1206093 - [Messages][Tests] Leverage "client.switchToShadowRoot" to tap on gaia-header action button

Status: RESOLVED FIXED

(Firefox OS Graveyard :: Gaia::SMS, defect)

Description

[Oleg Zasypkin [:azasypkin]]

Recently Marionette Client started to support querying of elements that are located inside shadow DOM. So now we can get rid of our hack with "HTMLEvents" and make test flow more natural.

E.g we can rewrite this [1]:

this.Composer.header.scriptWith(function(header) {
  var event = document.createEvent('HTMLEvents');
  event.initEvent('action', true, true);
  header.dispatchEvent(event);
});

with:

this.client.switchToShadowRoot(this.Composer.header);
this.Composer.headerActionButton.tap();
this.client.switchToShadowRoot();


[1] https://github.com/mozilla-b2g/gaia/blob/3e9de022ede11800170b6665606cb00c3fd92dc5/apps/sms/test/marionette/lib/messages.js#L211

Comment 1

[Kalpesh Krishna [:martianwars]]

would doing this much suffice?

Comment 2

[Kalpesh Krishna [:martianwars]]

Attachment: Checking out example code fix

Where else would I have to change code?

Comment 3

[Oleg Zasypkin [:azasypkin]]

Comment on attachment 8663418 [details] [review]
Checking out example code fix

Hey Kalpesh,

Thanks for your interest in this bug!

I've added some comments at the PR, but if you have any questions or doubts just ping me here or on IRC (azasypkin).

And ask for review again whenever you're ready.

Comment 4

[Kalpesh Krishna [:martianwars]]

I did a few changes. Getting a TypeError. Could you see the code for any major error once?

Comment 5

[Oleg Zasypkin [:azasypkin]]

(In reply to Kalpesh Krishna from comment #4)
> I did a few changes. Getting a TypeError. Could you see the code for any
> major error once?

We're getting closer, commented at Github :)

Comment 6

[Kalpesh Krishna [:martianwars]]

I figured out a few things. Couldn't understand why messages.js needs changes. The relevant parts seem to be coded

Comment 7

[Oleg Zasypkin [:azasypkin]]

(In reply to Kalpesh Krishna from comment #6)
> I figured out a few things. Couldn't understand why messages.js needs
> changes. The relevant parts seem to be coded

Replied at GitHub, basically you need changes in lib/messages.js because you have to add "headerActionButton" property to Report and Participants objects that are defined there.

Again, I'd recommend you to run Messages app in browser [1] to get better understanding of what "action button" is and how Messages app looks like :)

[1] https://github.com/mozilla-b2g/gaia/blob/master/apps/sms/README.md#how-to-run-the-application-in-firefox

Comment 8

[Kalpesh Krishna [:martianwars]]

@azasypkin :- Yeah now things make sense :) . I have made a few changes and pushed again. 

I had an issue with my npm due to which I was unable to setup the test environment. Got the app up and running in Firefox Dev Edition. Couldn't really make much sense of the role of the action button. I was looking at the New Message window. Found a few buttons such as Send, Attachment, Options there.

Comment 9

[Kalpesh Krishna [:martianwars]]

Also, I wanted to learn how to run unit tests on my machine locally. I remember doing it for another gaia bug on firefox dev edition where I would be presented with a list of unit tests and I could choose and execute any number of them. I would get console log as well as immediate results. It would be much faster than waiting for treeherder each time.

Comment 10

[Oleg Zasypkin [:azasypkin]]

(In reply to Kalpesh Krishna from comment #8)
> @azasypkin :- Yeah now things make sense :) . I have made a few changes and
> pushed again. 
> 
> I had an issue with my npm due to which I was unable to setup the test
> environment. Got the app up and running in Firefox Dev Edition. Couldn't
> really make much sense of the role of the action button.

Let me know if you still have issues running Messages app in browser, you can share log or something so that I can take a look. I usually follow steps from the resource I've mentioned in comment 7 and everything works fine. You can also use WebIDE + Simulator [1] if it's easier for you.

> I was looking at the New Message window. Found a few buttons such as Send, Attachment,
> Options there.

In case of Messages app, action button is a _back_ button inside top header in every view/page. It's dynamically added by header component, that is why you don't see it in markup. But you can analyze it with Page Inspector [2] once you run app in the browser or simulator.

> Also, I wanted to learn how to run unit tests on my machine locally. I
> remember doing it for another gaia bug on firefox dev edition where I would
> be presented with a list of unit tests and I could choose and execute any
> number of them. I would get console log as well as immediate results.

So in this bug you're working with Gaia integration tests, not unit tests, the workflow is different here. See [3] for more details. You can also use console.log inside integration tests tests. It's a bit trickier than unit tests as error messages aren't that obvious, but you can come on IRC (#fxos, #gaia-messaging channels) and ping me directly (azasypkin) if you have any difficulties :)

> It would be much faster than waiting for treeherder each time.

Absolutely! I always run tests locally using steps from [3], it significantly speeds up the process :)

[1] http://mdn.io/webide
[2] https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector
[3] https://developer.mozilla.org/en-US/Firefox_OS/Automated_testing/Gaia_integration_tests

Comment 11

[Kalpesh Krishna [:martianwars]]

@azasypkin :- Were you talking about the browser "BACK" and "FORWARD" buttons? Because I was using them to navigate to and fro in the sms app. Is it because I have made incomplete changes to my repository? A switch to master branch does no good so I suppose I haven't understood what to look for. I did see the inspector. Found a <gaia-header> and this in it.
> <a aria-label="Actions" id="threads-options-button" data-icon="more" data-l10n-id="actionsButton"></a>

I managed to run the tests locally successfully :) I'll try to figure out my mistakes.

Comment 12

[Kalpesh Krishna [:martianwars]]

okay not, facing this error constantly
https://pastebin.mozilla.org/8847421

Comment 13

[Julien Wajsberg [:julienw]]

can you run "npm install" ?

If this still doesn't work you can try this:

  rm -rf node_modules; make node_modules

Comment 14

[Kalpesh Krishna [:martianwars]]

Hi Julien,
Facing a similar error even after those steps. 
Node version :- v0.12.7
NPM version :- 2.11.3

Comment 15

[Oleg Zasypkin [:azasypkin]]

(In reply to Kalpesh Krishna from comment #11)
> @azasypkin :- Were you talking about the browser "BACK" and "FORWARD"
> buttons? Because I was using them to navigate to and fro in the sms app. Is
> it because I have made incomplete changes to my repository? A switch to
> master branch does no good so I suppose I haven't understood what to look
> for. I did see the inspector. Found a <gaia-header> and this in it.
> > <a aria-label="Actions" id="threads-options-button" data-icon="more" data-l10n-id="actionsButton"></a>

Hey, you need to use in-app back button only, browser's back and forward doesn't work correctly (yet). I've captured my screen to show what back button I mean and how it looks inside Page inspector: https://www.youtube.com/watch?v=8I1W5yT3Mis . Enjoy! :)

> I managed to run the tests locally successfully :) I'll try to figure out my
> mistakes.

Great!

Comment 16

[Oleg Zasypkin [:azasypkin]]

(In reply to Kalpesh Krishna from comment #14)
> Hi Julien,
> Facing a similar error even after those steps. 
> Node version :- v0.12.7
> NPM version :- 2.11.3

Hmm, setup looks good. What command do you use to run tests?

Also it probably would be quicker if you come on IRC so that we can "debug"/help in real time :)

Comment 17

[Kalpesh Krishna [:martianwars]]

@azasypkin :- I guess you weren't around on the IRC in #fxos

Can't see the back button you referred to in the video. This is my screen
Running using command 
> firefox-trunk -profile profile-sms --no-remote app://sms.gaiamobile.org

http://imagebin.ca/v/2GrgPpBvGyDg

Also, I tried to run the tests using 
> make test-integration APP=sms

I have updated the pull request. I guess I'm missing a line somewhere. Do let me know what's going wrong

Comment 18

[Oleg Zasypkin [:azasypkin]]

(In reply to Kalpesh Krishna from comment #17)
> @azasypkin :- I guess you weren't around on the IRC in #fxos
> 
> Can't see the back button you referred to in the video. This is my screen
> Running using command 
> > firefox-trunk -profile profile-sms --no-remote app://sms.gaiamobile.org
> 
> http://imagebin.ca/v/2GrgPpBvGyDg

It seems you version of Fx doesn't support web components, either it's too old or the right preference is turned off ("dom.webcomponents.enabled" should be "true" in "about:config").

> 
> Also, I tried to run the tests using 
> > make test-integration APP=sms
> 
> I have updated the pull request. I guess I'm missing a line somewhere. Do
> let me know what's going wrong

I'll try it locally later today and let you know :)

Comment 19

[Oleg Zasypkin [:azasypkin]]

Added some clarifications about switchToShadowRoot at Github.

Please, ask r? whenever you're ready and Treeherder is green :)

Thanks!

Comment 20

[Kalpesh Krishna [:martianwars]]

Comment on attachment 8663418 [details] [review]
Checking out example code fix

Passed Gij16 :D

Comment 21

[Oleg Zasypkin [:azasypkin]]

Comment on attachment 8663418 [details] [review]
Checking out example code fix

Looks good now! I've just left two minor nits (2 redundant empty lines).

So now you need to (steps 9-11 in [1]):

1) Fix those minor nits;
2) Squash your commits into _one_ (with correct commit message and r=azasypkin);
3) Rebase your PR branch on the _latest_ upstream master;
4) Push your changes to GitHub and wait for the green treeherder (ping me if you see anything failing so that we can determine if it's related to your PR);
5) Add checkin-neeeded keyword to the bug.

Thanks a lot for your contribution!

[1] https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Developing_Gaia/Submitting_a_Gaia_patch#Manual_patch_submission

Comment 22

[Kalpesh Krishna [:martianwars]]

https://treeherder.mozilla.org/#/jobs?repo=gaia&revision=fdd469509dd7f3d507c428b6da1fa7eb42f79c98

Got all green, occasional blue. Will do right? @azasypkin

Comment 23

[Oleg Zasypkin [:azasypkin]]

Looks good, let's land this!

Thanks!

Comment 24

[Kalpesh Krishna [:martianwars]]

@azasypkin :- Finally :) It was fun working on this bug. Could I do another bug/mini project under your guidance?

Comment 25

[Oleg Zasypkin [:azasypkin]]

(In reply to Kalpesh Krishna from comment #24)
> @azasypkin :- Finally :) It was fun working on this bug.

My pleasure :)

> Could I do another bug/mini project under your guidance?

Definitely! You can use following query to find mentored and not-yet-assigned Gaia:SMS bugs, not sure if all of them are actionable right now, but you can pick one you like most and ask for guidance on the bug:

https://bugzilla.mozilla.org/buglist.cgi?list_id=12575706&o2=isnotempty&j17=OR&f10=OP&f19=CP&f1=OP&o3=equals&f8=CP&f0=OP&v3=nobody%40mozilla.org&f18=CP&f9=CP&query_format=advanced&f3=assigned_to&f2=bug_mentor&f11=OP&bug_status=NEW&component=Gaia%3A%3ASMS&product=Firefox%20OS

Hope to see you working on one of these :)

Thanks!

Comment 26

[Oleg Zasypkin [:azasypkin]]

Landed, master: https://github.com/mozilla-b2g/gaia/commit/c7cf2abd0ebb83ef238b3a3f150d49300a2ee7d7

Comment 27

[Kalpesh Krishna [:martianwars]]

Thank you :)