Vuex-ORM GraphQL Plugin

# Testing

# Unit Testing

To unit test vue components which use the persistence actions of this plugin, you need to mock the results of the GraphQL queries. The GraphQL plugin offers some utils to do this.

First we have to import the mock method from the test utils via

import VuexORMGraphQL from '@vuex-orm/plugin-graphql';
import { setupTestUtils, mock } from '@vuex-orm/plugin-graphql';

After that we have to setup the test utils, this is very easy, just pass the imported VuexORMGraphQL plugin like this:

setupTestUtils(VuexORMGraphQL);

Now we're ready to go. In the next step we can setup mocks via

mock('fetch').for(User).andReturn({ id: '1', name: 'Charlie Brown' });

This means: Whenever User.fetch() is called, insert { id: '1', name: 'Charlie Brown' } in the Vuex-ORM store.

The mock method also accepts a second param which allows to match specific calls. Only those properties which are within the given object are considered while matching. Example:

// Will only trigger when `User.fetch('17')` is called
mock('fetch', { filter: { id: '17' } }).for(User).andReturn({ id: '17', name: 'Charlie Brown' });

// Will only trigger when `User.fetch({ filter: { active: true }})` is called
mock('fetch', { filter: { active: true } }).for(User).andReturn([
  { id: '17', name: 'Charlie Brown' },
  { id: '18', name: 'Snoopy' }
]);

Additionally the argument of andReturn can be a function, which will be called each time the mock is triggered.

The following examples describe how each action type can be mocked.

# Fetch

// This mock call
mock('fetch', { filter: { id: '42' }}).for(User).andReturn(userData);

// will be triggerd by
User.fetch('42');

# Persist

// This mock call
mock('persist', { id: '17' }).for(User).andReturn({ id: '17', name: 'Charlie Brown' });

// will be triggerd by
user.$persist();

# Push

// This mock call
mock('push', { data: { ... } }).for(User).andReturn({ id: '17', name: 'Charlie Brown' });

// will be triggerd by
user.$push();

# Destroy

// This mock call
mock('destroy', { id: '17' }).for(User).andReturn({ id: '17', name: 'Charlie Brown' });

// will be triggerd by
user.$destroy();

# Custom query

// This mock call
mock('query', { name: 'status' }).for(Post).andReturn({ ... });

// will be triggerd by
Post.customQuery({ name: 'status' });

# Mutate

// This mock call
mock('mutate', { name: 'upvote', args: { id: '4' }}).for(Post).andReturn({ ... });

// will be triggerd by
post.$mutate({ name: 'upvote' });

# Simple Query

Mocking simple queries works slightly different then the other actions, because these are not model related. Thus we have to mock these globally by omiting the model (for):

// This mock call
mock('simpleQuery', { name: 'example' }).andReturn({ success: true });

// will be triggered by
store.dispatch('entities/simpleQuery', { query: 'query example { success }' });

# Simple Mutation

Works just like the simple queries:

// This mock call
mock('simpleMutation', {
  name: 'SendSms',
  variables: { to: '+4912345678', text: 'GraphQL is awesome!' }
}).andReturn({ sendSms: { delivered: true }});

// will be triggered by
const query = `
mutation SendSms($to: string!, $text: string!) {
  sendSms(to: $to, text: $text) {
    delivered
  }
}`;

const result = await store.dispatch('entities/simpleMutation', {
  query,
  variables: { to: '+4912345678', text: 'GraphQL is awesome!' }
});

# Resetting a mock

WARNING

Support for resetting a mock is currently work in progress and will be added soon.

See https://github.com/vuex-orm/plugin-graphql/issues/61

# Misc

The testing utils also provide some other useful functions, which are listed here:

  • async clearORMStore(): Will remove all records from the Vuex-ORM store to clean up while testing.

# Integration Testing

WARNING

Support for integration testing is currently work in progress and will be added soon.

See https://github.com/vuex-orm/plugin-graphql/issues/59

← Frequently Asked Questions →