tests: labels

[miketaylr]

we need intern tests for:

(list modified by @karlcow on 2015-08-07)

• setup: check if we are logged in
• tearDown: erase all labels
• label gear is here
• label widget opens
• setting a label makes it appear in the list of labels
• removing a label makes it disappear from the list of labels
• label filter works

[karlcow]

Started to write a test for this, not there yet. Just a head up.
karlcow@5e2ae26

[miketaylr]

❤️

[karlcow]

I'm testing with

    ISSUES_REPO_URI = os.environ.get('ISSUES_REPO_URI') or "miketaylr/nobody-look-at-this/issues"

and

define([
  // './functional/index',
  // './functional/comments',
  // './functional/issue-list',
  // './functional/issues',
  // './functional/reporting',
  // './functional/contributors',
  // './functional/history-navigation',
  './functional/labels'
], function () {
  'use strict';
});

to ease my pain.

[karlcow]

In that case, the automatic login will fail and you then have 10 seconds to manually enter a username and password in the GitHub login screen that appears.

hmm it doesn't seem I get the 10 seconds

[karlcow]

ok managed to enter my credentials quick enough.

/Users/karl/code/webcompat.com/node_modules/intern/runner.js:67
× firefox 38.0.5 on MAC - labels - setting a label
NoSuchElement: [POST http://localhost:4444/wd/hub/session/cddc1cb6-5f87-4617-830a-a6238fa0446a/element / {"using":"css selector","value":"LabelEditor-launcher"}] Unable to locate element: {"method":"css selector","selector":"LabelEditor-launcher"}
For documentation on this error, please visit: http://seleniumhq.org/exceptions/no_such_element.html

huh?
Checking a page https://webcompat.com/issues/100
Indeed I do not see the gear. Exploring the DOM.

<div class="Label-wrapper">
          <span class="Label Label--title">Labels</span>

          <span class="LabelEditor-wrapper">
<button class="LabelEditor-launcher wc-Icon wc-Icon--gear" aria-hidden="true"><span class="wc-sronly">Edit Labels</span></button>
</span>

          <span class="Label-list">

          </span>
        </div>

so LabelEditor-launcher is there but it has a display: none; this being logged in.

.LabelEditor-launcher {
    display: none;
    border: medium none;
    width: 1.3em;
    height: 1.3em;
    font-size: 1.4em;
    padding: 0px;
    opacity: 0.8;
}

Weird. /me is heading to a recent issue. Same thing.
https://webcompat.com/issues/1519

Oh weird. Logged out and logged in again, and the gear is back.

[karlcow]

Ah gotcha… stupid me. LabelEditor-launcher instead of .LabelEditor-launcher typo 👑

Let's go to the next typo:

<label class="LabelEditor-item">
              <span class="LabelEditor-color" style="background-color:#cccccc">
                <input class="LabelEditor-checkbox" name="duplicate" data-color="cccccc" type="checkbox">
              </span>
              <span class="LabelEditor-name">duplicate</span>
              </label>

Ah habits. I mixed up XPath syntax with CSS selectors. I'm more familiar with the former.

findByCssSelector('label.LabelEditor-item input[name="contactready"]').click() this should work better

It is still not working. I wonder if it also depends on a specific version of labelnames.

At least it's opening the thing as planned.

And indeed it requires status-*
Let's commit the code for the first test and see if @miketaylr as more luck than me.

[karlcow]

Note that at the moment github has connectivity issues.

[karlcow]

I closed the previous pull request and created a new one. It's not complete but it's working and this is #666 for the code conspiracy theorists 😱

[miketaylr]

Coooooool. 🌟

[karlcow]

ok.

I need to adjust the setup with things discussed in #666 (comment)

[karlcow]

pull, merge, add, commit… and push

→ git push origin 272/2
Counting objects: 37, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (37/37), done.
Writing objects: 100% (37/37), 3.52 KiB | 0 bytes/s, done.
Total 37 (delta 29), reused 0 (delta 0)
To [email protected]:karlcow/webcompat.com.git
   94dce03..9553491  272/2 -> 272/2

[karlcow]

Can't crack this one yet. This is not working. Putting it here to not forget.

    'Search filter is working': function () {
      return this.remote
        .setFindTimeout(intern.config.wc.pageLoadTimeout)
        .get(require.toUrl(url(100)))
        .findByCssSelector('.LabelEditor-launcher').click()
        .end()
        .findByCssSelector('.LabelEditor-search').click()
        .type('duplicate')
        .end()
        .findByCssSelector('.LabelEditor-name')
        .getVisibleText()
        .then(function (text) {
          assert.include(text, 'duplicate', 'Search filter reduces the list to what is typed');
        })
        .end();
    }

[karlcow]

@miketaylr @tagawa @magsout Useful tip:
When you need to run an individual test suite during development.

node_modules/.bin/intern-runner config=tests/intern functionalSuites=tests/functional/labels.js user="username" pw="secret_lies"

This functionalSuites=tests/functional/labels.js will select the test suite to run. This is also good for testing how independent are our test suite from each other. :)

[karlcow]

@vladikoff do you know a way to have intern-runner print things in the shell terminal where we run the tests? Basically an equivalent of a console.log() message or what we would in python for quick debugging with a print() statement.

Because I'm trying to understand what I do wrong.
Intern is saying to me ! Cannot call method 'findByCssSelector' of undefined
I understand that.

      return this.remote
        .setFindTimeout(intern.config.wc.pageLoadTimeout)
        .get(require.toUrl(url(100)))
        .then(function (issuepage) {
          var username_selector = 'body[data-username="'+intern.config.wc.user+'"]';
          if (issuepage.findByCssSelector(username_selector)) {
            // we are already logged
            return issuepage;
          } else {
            // we are not logged
            issuepage.badaboum;
            return issuepage;
          };
        })
        .findByCssSelector('.js-login-link').click()
        .end()
        .findByCssSelector('#login_field').click()

But let's say I would like to say console.log(issuepage) to inspect and/or understand the nature of the objects and its methods.

[vladikoff]

@karlcow Hey Karl,

If you pass reporters=console ( reporters=Console in intern 3) then it will print your console messages. The trick is that the "pretty" reporters does some terminal magic for animation purposes so I think the log (console.log) gets erased because it refreshes the frame. I'm not sure if that can be fixed or that's just how animations like this work in terminals.

[karlcow]

@vladikoff alleluiah! Thanks. Exactly what I wanted. big 😂

[karlcow]

grmbl… grmbl…

I guess I'll have to introduce a bit more delay.

PASS: main - labels - Label appears once selected (563ms)
FAIL: main - labels - Label has been sent to GitHub (12403ms)
NoSuchElement: [POST http://localhost:4444/wd/hub/session/09c47bda-3f4f-4ab8-9c6c-2fcaa4306b4d/element / {"using":"css selector","value":".Label--badge"}] Unable to locate element: {"method":"css selector","selector":".Label--badge"}

[karlcow]

The issue takes time too. Here I just did a reload. so everything is in cache. This is/should be the case for http://localhost:5000/api/issues/2, but we can see it takes almost 10s for localhost to receive the response. I wonder why it takes so much time.

I wonder if the issue is on the python side.