Add Unit Test Mocking Support (#60)

* Basic unit test mock implementation

* Add test for mocking multiple records

* Mocking simpleQuery/Mutation and docs

* Update docs

* Build

* Fix docs

* setupTestUtils method

Author: phortx

dist/vuex-orm-graphql.esm.js

@@ -31,4 +31,5 @@ themeConfig:
     - /guide/eager-loading/
     - /guide/virtual-fields/
     - /guide/meta-fields/
+    - /guide/testing/
     - /guide/faq/

docs/.vuepress/config.yml

@@ -193,7 +193,7 @@ mutation SendSms($to: string!, $text: string!) {
   }
 }`;
 
-const result = store.dispatch('entities/simpleQuery', {
+const result = await store.dispatch('entities/simpleMutation', {
   query,
   variables: { to: '+4912345678', text: 'GraphQL is awesome!' }
 });

docs/guide/custom-queries/README.md

@@ -9,11 +9,13 @@ the `persist` action.
 Via calling
 
 ```javascript
-const post = await Post.create({
+await Post.create({ data: {
   content: 'Lorem Ipsum dolor sit amet',
   title: 'Example Post',
-  user: user.query().first()
-});
+  user: User.query().first()
+}});
+
+const post = Post.query().first();
 
 await post.$persist();
 // or

docs/guide/persist/README.md

@@ -0,0 +1,168 @@
+# Testing
+
+[[toc]]
+
+## 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
+
+```js
+import VuexORMGraphQL from '@vuex-orm/plugin-graphql';
+import { setupTestUtils, mock } from '@vuex-orm/plugin-graphql/lib/test-utils';
+```
+
+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
+
+```js
+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:
+
+```js
+// 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
+
+```js
+// This mock call
+mock('fetch', { filter: { id: 42 }}).for(User).andReturn(userData);
+
+// will be triggerd by
+User.fetch(42);
+```
+
+### Persist
+
+```js
+// This mock call
+mock('persist', { id: 17 }).for(User).andReturn({ id: 17, name: 'Charlie Brown' });
+
+// will be triggerd by
+user.$persist();
+```
+
+### Push
+
+```js
+// This mock call
+mock('push', { data: { ... } }).for(User).andReturn({ id: 17, name: 'Charlie Brown' });
+
+// will be triggerd by
+user.$push();
+```
+
+### Destroy
+
+```js
+// This mock call
+mock('destroy', { id: 17 }).for(User).andReturn({ id: 17, name: 'Charlie Brown' });
+
+// will be triggerd by
+user.$destroy();
+```
+
+### Query
+
+
+
+### Mutate
+
+```js
+// 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`):
+
+```js
+// 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:
+
+```js
+// 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
+:::

docs/guide/testing/README.md

@@ -1,6 +1,7 @@
 import { ActionParams } from '../support/interfaces';
 import Action from './action';
 import NameGenerator from '../graphql/name-generator';
+import { Store } from '../orm/store';
 
 /**
  * Destroy action for sending a delete mutation. Will be used for record.$destroy().
@@ -17,6 +18,13 @@ export default class Destroy extends Action {
       const model = this.getModelFromState(state);
       const mutationName = NameGenerator.getNameForDestroy(model);
 
+      const mockReturnValue = model.$mockHook('destroy', { id });
+
+      if (mockReturnValue) {
+        await Store.insertData(mockReturnValue, dispatch);
+        return true;
+      }
+
       args = this.prepareArgs(args, id);
 
       await Action.mutation(mutationName, args, dispatch, model);

src/actions/destroy.ts

@@ -18,10 +18,18 @@ export default class Fetch extends Action {
    */
   public static async call ({ state, dispatch }: ActionParams, params?: ActionParams): Promise<Data> {
     const context = Context.getInstance();
-    await context.loadSchema();
-
     const model = this.getModelFromState(state);
 
+    const mockReturnValue = model.$mockHook('fetch', {
+      filter: params ? params.filter || {} : {}
+    });
+
+    if (mockReturnValue) {
+      return Store.insertData(mockReturnValue, dispatch);
+    }
+
+    await context.loadSchema();
+
     // Filter
     const filter = params && params.filter ?
       Transformer.transformOutgoingData(model, params.filter, Object.keys(params.filter)) : {};

src/actions/fetch.ts

@@ -2,6 +2,7 @@ import { ActionParams, Arguments, Data } from '../support/interfaces';
 import Action from './action';
 import Context from '../common/context';
 import Schema from '../graphql/schema';
+import { Store } from '../orm/store';
 
 /**
  * Mutate action for sending a custom mutation. Will be used for Model.mutate() and record.$mutate().
@@ -18,8 +19,18 @@ export default class Mutate extends Action {
   public static async call ({ state, dispatch }: ActionParams, { args, name }: ActionParams): Promise<Data> {
     if (name) {
       const context: Context = Context.getInstance();
-      const schema: Schema = await context.loadSchema();
       const model = this.getModelFromState(state);
+
+      const mockReturnValue = model.$mockHook('mutate', {
+        name,
+        args: args || {}
+      });
+
+      if (mockReturnValue) {
+        return Store.insertData(mockReturnValue, dispatch);
+      }
+
+      const schema: Schema = await context.loadSchema();
       args = this.prepareArgs(args);
 
       // There could be anything in the args, but we have to be sure that all records are gone through

src/actions/mutate.ts

@@ -3,6 +3,7 @@ import { ActionParams, Data } from '../support/interfaces';
 import Action from './action';
 import NameGenerator from '../graphql/name-generator';
 import Model from '../orm/model';
+import { Store } from '../orm/store';
 
 /**
  * Persist action for sending a create mutation. Will be used for record.$persist().
@@ -20,6 +21,17 @@ export default class Persist extends Action {
       const mutationName = NameGenerator.getNameForPersist(model);
       const oldRecord = model.getRecordWithId(id);
 
+      const mockReturnValue = model.$mockHook('persist', {
+        id,
+        args: args || {}
+      });
+
+      if (mockReturnValue) {
+        const newRecord = Store.insertData(mockReturnValue, dispatch);
+        await this.deleteObsoleteRecord(model, newRecord, oldRecord);
+        return newRecord;
+      }
+
       // Arguments
       args = this.prepareArgs(args);
       this.addRecordToArgs(args, model, oldRecord);

src/actions/persist.ts

@@ -1,6 +1,7 @@
 import { ActionParams, Data } from '../support/interfaces';
 import Action from './action';
 import NameGenerator from '../graphql/name-generator';
+import { Store } from '../orm/store';
 
 /**
  * Push action for sending a update mutation. Will be used for record.$push().
@@ -18,6 +19,15 @@ export default class Push extends Action {
       const model = this.getModelFromState(state);
       const mutationName = NameGenerator.getNameForPush(model);
 
+      const mockReturnValue = model.$mockHook('push', {
+        data,
+        args: args || {}
+      });
+
+      if (mockReturnValue) {
+        return Store.insertData(mockReturnValue, dispatch);
+      }
+
       // Arguments
       args = this.prepareArgs(args, data.id);
       this.addRecordToArgs(args, model, data);