Test - GradedJestRisk/ember-training GitHub Wiki

Table of Contents Unit component Integration UI helpers component Acceptance test Faking API - Mirage Define response Modify an object in DB setup test

Scope: class

Call component external method (interface) and check side-effect

• exposed state (used by template)
• method calls to outside (stubbed), eg controller

Use:

• instantiate component with lookup component = this.owner.lookup('<DIRECTORY>/<COMPONENT>');
• stub all dependencies
  • usual: store and router

component.store = sinon.stub();
component.router = sinon.stub();

• • session

sessionStub = {
   authenticate: sinon.stub().resolves(),
   get: sinon.stub().returns(<VALUE>);
   set: sinon.stub(),
};

• call component: await component.<METHOD>();
• check:
  • state mutation: expect(component.<PROPERTY>).to.be.false;
  • side-effect: sinon.assert.calledWith(component.router.replaceWith, expectedRouteName);

Most code comes from @ember/test-helpers

Selector:

• tag type: none ()
• CSS class: dot (.)
• ID: hash (#)
• property: bracket ([]) [<KEY>=<VALUE>)

Action:

• go to URL: await emberVisit(<URL>)
• click button: await click(<SELECTOR>)
• enter text: await fillIn(<SELECTOR>, <VALUE>)
• select in drop-down list:

Assertion:

• URL is: expect(currentURL().to.equal(<URL>);
• text exists: expect(contains(<TEXT>)).to.exist;
• element exists: expect(find(<SELECTOR>)).to.exist;
• element contains: === component ===

Scope: class + template Steps: * import <pre> import hbs from 'htmlbars-inline-precompile'; import { click, fillIn, render, find } from '@ember/test-helpers'; </pre> * instantiate component with lookup <code> component = this.owner.lookup('<DIRECTORY>/<COMPONENT>');

• render
  • simple: await render(hbs`{{<DIRECTORY>/<COMPONENT>}}`);
  • with stubbed argument:

const <STUB> = sinon.stub();
this.set('<ARGUMENT_NAME>', <STUB>);
await render(hbs`<DIRECTORY>::<COMPONENT> @<ARGUMENT_NAME>={{this.<ARGUMENT_NAME>}}`);

• assert with UI helpers

Scope: user scenario through several routes (only API faked for performance issues)

List:

• start with visit
  • special need: encode JWT token in URL

const <TOKEN> = 'aaa.' +  btoa('{ <...PROPERTIES>, "source":"external","iat":1545321469,"exp":4702193958}') + '.bbb';
await visit(`<BASE_URL>?<PARAMETER_NAME>=${<TOKEN>}`);

• stub
• use UI helpers

Install ember-cli-mirage

List:

• for all tests, in Mirage config.js file:
  • unconditionally using config.<VERB>('<URL>', () => new Response(<HTTP_STATUS_CODE>));
  • conditionally using

config.<VERB>('<URL>', (schema, request) => {
  // retrieve from DB
  const <OBJECT> =  schema.<MODEL>.find(request.params.<ID>);

   // return object
   return <OBJECT>
}

• in a single test, unconditionnaly

import { Response } from 'ember-cli-mirage';
(..)
this.server.<VERB>(<URL>, () => {
   new Response(<HTTP_STATUS>, {}, <ERROR>);
});

List:

• in Mirage

config.<VERB>('<URL>', (schema, request) => {
  // retrieve from DB
  const <OBJECT> =  schema.<MODEL>.find(request.params.<ID>);
 
  // update DB
  const body = JSON.parse(request.requestBody);
  <OBJECT>.update({ <PROPERTY> : body.data.attributes.<PROPERTY> });

  (...)
}

• from test: const <OBJECT> = server.create(<MODEL>, <VALUE>);

import { setupApplicationTest } from 'ember-mocha';
import { setupMirage } from 'ember-cli-mirage/test-support';