jeudi 26 mars 2020

Integration test not rendering after click when observing ember data record

I can't seem to figure out why a very simple integration test is not passing

Given an ember data model setting.js

export default class SettingModel extends Model {
  @attr('string') name;
  @attr('number') value;
}

I am rendering this model with a component

<MyComponent @setting=
             @name=
             @value=
             @values=
             @saveSetting= />

The component renders all the possible values (@values) and applies an active class on the one which equals the current value


  <div class="btn " >
    
  </div>

I wanted to write a simple test where clicking another button updates the active class, but the last assertion always fails. The active class is never updated. In this example, I have used ember-cli mirage

test('renders correctly', async function(assert) {
    this.server.get('/settings/:id', () => ({ settings: { id: 1, name: "settingName", value: 1 }}), 200);
    let setting = await this.owner.lookup('service:store').findRecord('setting', 1);
    this.set('setting', setting);
    this.set('name', setting.get('name'));
    this.set('value', setting.get('value'));
    this.set('values', [0, 1, 2]);
    this.set('saveSettingFn', () => {});

    await render(hbs`<MyComponent @setting=
                                  @name=
                                  @value=
                                  @values=
                                  @saveSetting= />`);



    // middle option active
    assert.ok(this.element.querySelectorAll('.btn')[1].getAttribute('class').includes('active'), 'second button active');
    // click the first button
    await click('.btn');
    // first option active
    assert.ok(this.element.querySelectorAll('.btn')[0].getAttribute('class').includes('active'), 'first button active');
  });

I've created an example project here with a failing test https://github.com/spicalous/component-test-example/blob/master/tests/integration/components/my-component-test.js#L55

  1. It looks like the value on the model has been saved
  2. I have tried using waitFor test helper
  3. I have tried await settled();

Any help is appreciated! Thank you!




Aucun commentaire:

Enregistrer un commentaire