Fail to use ember-test-selector and qunit-dom

Testing
1

I’d like to test the display of a label in a template defined as follows:

# address.hbs

{{#if model.isNew}}
      <div class="card border-danger mb-3">
        <div class="card-header" data-test-missing-address="missing address">{{t "address.errors.missing.address"}}</div>
        <div class="card-body text-danger">
          <h5 class="card-title" data-test-errors-creation-label="create a new address">{{t "address.errors.creation.label"}}</h5>
        </div>
      </div>      
    {{/if}}

Here is the test:

# tests/acceptance/address-test.js

test('Display a message when no address found', async function(assert) {
    let shop = server.create('shop');
    server.create('user', { shop });
    
    await authenticateSession({
      access_token: 'azerty',
      token_type: 'Bearer'
    });

    await visit('/address');
    assert.dom('[data-test-missing-address=missing address]').exists();    
  });

When running the tests in server mode, I can clearly see the div with message displayed, but the above test fails with:

Acceptance | Address: Display a message when no address found
    ✘ Promise rejected during "Display a message when no address found": Failed to execute 'querySelectorAll' on 'Element': '[data-test-missing-address=missing address]' is not a valid selector.
        Error: Failed to execute 'querySelectorAll' on 'Element': '[data-test-missing-address=missing address]' is not a valid selector.
            at DOMAssertions.findElements (http://localhost:7357/assets/test-support.js:10246:47)
            at DOMAssertions.exists (http://localhost:7357/assets/test-support.js:9200:27)
            at DOMAssertions.exists (http://localhost:7357/assets/test-support.js:9495:18)
            at Object.<anonymous> (http://localhost:7357/assets/tests.js:35:65)

The complete content of the test looks as follows:

import { module, test } from 'qunit';
import { visit, currentURL } from '@ember/test-helpers';
import { setupApplicationTest } from 'ember-qunit';
import { authenticateSession } from 'ember-simple-auth/test-support';
import { setupMirage } from 'ember-cli-mirage/test-support';
import { setupWindowMock } from 'ember-window-mock';

module('Acceptance | Address', function(hooks) {
  setupWindowMock(hooks);
  setupApplicationTest(hooks);
  setupMirage(hooks);

  test('Authenticated users can visit /address', async function(assert) {
    let shop = server.create('shop');
    server.create('user', { shop });
    server.create('address', { shop });

    await authenticateSession({
      access_token: 'azerty',
      token_type: 'Bearer'
    });

    await visit('/address');
    assert.equal(currentURL(), '/address', 'user is on the Address page');
  });
  
  test('Display a message when no address found', async function(assert) {
    let shop = server.create('shop');
    server.create('user', { shop });
    
    await authenticateSession({
      access_token: 'azerty',
      token_type: 'Bearer'
    });

    await visit('/address');
    assert.dom('[data-test-missing-address=missing address]').exists();    
  });
});

What am I missing? Thank you.

2

I figured ou myself :grinning: The right syntax should use double quotes when passing a value to data-test-missing-address option as follows:

assert.dom('[data-test-missing-address="missing address"]').exists();
2 Likes