@bagaar/ember-graphql-mocking NPM

@bagaar/ember-graphql-mocking

Ember addon for mocking GraphQL requests using Mock Service Worker (MSW).

Compatibility

Ember.js v4.8 or above
Embroider or ember-auto-import v2
MSW v2 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: 1. Import setupEmberGraphqlMocking 2. Import your GraphQL schema 3. 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, as setupEmberGraphqlMocking 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 and setupGraphqlTest
Call setupGraphqlTest with hooks
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.
!NOTE Working versions of these code examples can be found in this addon's test app.