Ember GraphQL Mocking
Ember addon for mocking GraphQL requests using Mock Service Worker (MSW).
Compatibility
- Ember.js v3.28 or above
- Ember CLI v3.28 or above
- Node.js v14 or above
- MSW v1 or above
Installation
npm install -D @bagaar/ember-graphql-mocking msw
pnpm add -D @bagaar/ember-graphql-mocking msw
yarn add -D @bagaar/ember-graphql-mocking msw
Usage
1. Set up Ember GraphQL Mocking
In tests/test-helper.js
:
- Import
setupEmberGraphqlMocking
- Import your GraphQL schema
- Call
setupEmberGraphqlMocking
with your GraphQL schema
// tests/test-helper.js
import Application from 'my-app/app';
import config from 'my-app/config/environment';
import * as QUnit from 'qunit';
import { setApplication } from '@ember/test-helpers';
import { setup } from 'qunit-dom';
import { start } from 'ember-qunit';
import { setupEmberGraphqlMocking } from '@bagaar/ember-graphql-mocking/test-support'; // 1.
import schema from 'my-app/graphql/schema'; // 2.
QUnit.begin(() => setupEmberGraphqlMocking(schema)); // 3.
setApplication(Application.create(config.APP));
setup(QUnit.assert);
start();
NOTE: Make sure to use
QUnit.begin
, assetupEmberGraphqlMocking
returns a Promise.
If you want to pass along additional start options
to MSW's service worker, you can do so by defining an mswStartOptions
object:
QUnit.begin(() =>
setupEmberGraphqlMocking(schema, {
mswStartOptions: {
// Additional MSW start options...
},
})
);
2. Write an Acceptance Test
- Import
mockResolvers
andsetupGraphqlTest
- Call
setupGraphqlTest
withhooks
- Call
mockResolvers
to mock the necessary resolver(s) per test
setupGraphqlTest
will make sure that all resolvers are cleared in between tests.
mockResolvers
accepts an object that consists of one or more resolvers. The key must be the name of the mocked operation, the value can either be a response object or a function that returns a response object.
NOTE: Make sure that your operations are named in order for
@bagaar/ember-graphql-mocking
to function properly.
// tests/acceptance/my-acceptance-test.js
import { module, test } from 'qunit';
import { visit, currentURL } from '@ember/test-helpers';
import { setupApplicationTest } from 'my-app/tests/helpers';
import { mockResolvers, setupGraphqlTest } from '@bagaar/ember-graphql-mocking/test-support'; // 1.
module('Acceptance | ember graphql mocking', function (hooks) {
setupApplicationTest(hooks);
setupGraphqlTest(hooks); // 2.
test('visiting /', async function (assert) {
mockResolvers({ // 3.
me: {
id: '1',
firstName: 'John',
lastName: 'Doe',
},
});
await visit('/');
assert.strictEqual(currentURL(), '/');
assert.dom('[data-test-me-id]').hasText('1');
assert.dom('[data-test-me-first-name]').hasText('John');
assert.dom('[data-test-me-last-name]').hasText('Doe');
});
});
NOTE: Calling
mockResolvers
multiple times within a single test, will simply merge all resolvers into a single root.
tests
folder.
Contributing
See the Contributing guide for details.
License
This project is licensed under the MIT License.