waitFor timesout when testing Create a band

[lljr]

I get this error when I insert await waitFor('p.text-center') -> Promise rejected during "Create a band": waitFor timed out waiting for selector "p.text-center"@ 1385 ms

in index.hbs I have <p class="text-center">Select a band.</p>. and in bands-test.js ->

import { module, test } from 'qunit';
import { visit, click, fillIn, waitFor } from '@ember/test-helpers';
import { setupApplicationTest } from 'ember-qunit';
import { setupMirage } from 'ember-cli-mirage/test-support';

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

  test('List bands', async function(assert) {
    this.server.create('band', { name: 'Radiohead' });
    this.server.create('band', { name: 'Long Distance Calling' });
    await visit('/');

    let bandLinks = document.querySelectorAll('.mb-2 > a');
    assert.equal(bandLinks.length, 2, 'All band links are rendered');
    assert.ok(bandLinks[0].textContent.includes('Radiohead'), 'First band link contains the band name');
    assert.ok(bandLinks[1].textContent.includes('Long Distance Calling'), 'The other band link contains the band name');
  });

  test('Create a band', async function(assert) {
    this.server.create('band', { name: 'Royal Blood'});

    await visit('/');
    await click('a[href="/bands/new"]');
    await fillIn('input', 'Caspian');
    await click('button');
    await waitFor('p.text-center');

    let bandLinks = document.querySelectorAll('.mb-2 > a');
    assert.equal(bandLinks.length, 2, 'All band links are rendered');
    assert.ok(bandLinks[1].textContent.includes('Caspian'), 'The new band link is rendered as the last item');
    assert.ok(document.querySelector('.border-b-4.border-purple-400').textContent.includes('Song'), 'The Songs tab is active');
  });
});

config.js

export default function() {
  this.get('/bands');
  this.get('/bands/:id');
  this.get('/bands/:id/songs', function(schema, request) {
    let id = request.params.id;
    return schema.songs.where({ bandId: id });
  });
  this.post('/bands');
}

mirage/serializers/application.js

import { JSONAPISerializer } from 'ember-cli-mirage';

export default JSONAPISerializer.extend({
  links(resource) {
    let { id, modelName } = resource;
    if (modelName === 'band') {
      return {
        songs: {
          related: `/bands/${id}/songs`,
          self: `/bands/${id}/relationships/songs`
        }
      };
    }
  }
});

Actually, this may be the error:

Source:    _loadResource@http://localhost:7357/assets/rarwe.js:1276:11
                load@http://localhost:7357/assets/rarwe.js:1266:19 
                create@http://localhost:7357/assets/rarwe.js:1329:19

[balinterdi]

Does the stack trace tell you more (details about the error)?

[lljr]

  _loadResource(data) {
    let record;
    let { id, type, attributes, relationships } = data;
    if (type === 'bands') {
      let rels = extractRelationships(relationships);
      record = new Band({ id, ...attributes }, rels);
      this.add('band', record);
    }
    if (type === 'songs') {
      let rels = extractRelationships(relationships);
      record = new Song({ id, ...attributes }, rels);
      this.add('song', record);
    }
    return record;
  }

Mirage

import { Model, hasMany } from 'ember-cli-mirage';

export default Model.extend({
  songs: hasMany()
});

import { Model, belongsTo } from 'ember-cli-mirage';

export default Model.extend({
  band: belongsTo()
});

[balinterdi]

The error says it timed out waiting for [data-test-rr="no-songs-text"].

Do you have that attribute attached to the DOM element (the p tag)?

[lljr]

in templates/bands/band/songs.hbs

{{else}}
  <p class="text-center" data-test-rr="no-songs-text">
    The band has no songs yet.
  </p>
{{/if}}

[balinterdi]

The waitFor that you have in the test still says waitFor('p.text-center') but the error thrown says it was waiting for [data-test-rr="no-songs-text"]. That's interesting but I'll assume the test code you pasted is an earlier version.

Anyway, if you put an await this.pauseTest() before the waitFor line, do you see the element that's waited for (the p just here above, in the previous template snippet)?

[lljr]

I just got back to this error. I redid everything from Chapter 1 to this point. I still have issues passing these tests.

It's weird because it says that the bandLinks are not rendered, yet when I await this.pauseTest() before waitFor, the links are rendered. Look below

Now look when I run the tests without the await this.pauseTest()

[lljr]

Ok... I found out... I misspelled bandLinks.length with bandLinks.legth...