Marcellin Nshimiyimana Reading time ~1 minute

Description

We have a search box, a text on top of it, and a question mark to provide useful info in case a user gets confused.

The information is shown when the user hover over this question mark

End Goal

Step by step

  • create the acceptance test
# terminal
ember g acceptance-test show-searchinput-tooltip-on-hover
  • writing the test logic:
    • go to search page
    visit('/search');
    • make sure the question-mark icon exist
    andThen(function() {
  assert.equal(find('.full-name .info-icon').length, 1,
                'name info icon exist');
});
    • hover over the “question-mark” icon in front of the Name input box
    andThen(function() {
  let ic = find('.full-name .info-icon');
  ic.mouseenter();
});
    • A message “Enter a partial or complete name” should show up
    andThen(function() {
  let messageBox = find('.full-name .popover-content');
  assert.equal(messageBox.text().trim().search(message), 0,
                'helpful message is shown');
});
  • Complete test
import { test } from 'qunit';
import moduleForAcceptance from
    'app-test/tests/helpers/module-for-acceptance';

moduleForAcceptance('Acceptance | show searchinput tooltip on hover');

test('Hovering over the question-mark icon', function(assert) {
  visit('/search');
  let searchRouteName = 'search',
  message = 'Enter a partial or complete name';

  andThen(function() {
    assert.equal(currentRouteName(), searchRouteName,
                  'search page reached');
    assert.equal(find('.full-name .info-icon').length, 1,
                  'name info icon exist');
  });

  andThen(function() {
    let ic = find('.full-name .info-icon');
    ic.mouseenter();
  });

  andThen(function() {
    let messageBox = find('.full-name .popover-content');
    assert.equal(messageBox.length, 1, 'popover box is present');
    assert.equal(messageBox.text().trim().search(message), 0,
                  'helpful message is shown');
  });

  andThen(function() {
    let ic = find('.full-name .info-icon');
    ic.mouseleave();
  });

  andThen(function() {
    let messageBox = find('.full-name .popover-content');
    assert.equal(messageBox.length, 0, 'popover box is removed');
  });
});

Now you can do this!

GitHub resources: