diff --git a/package-lock.json b/package-lock.json index f8809d2c..54d95e04 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3171,6 +3171,12 @@ "resolved": "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-15.0.0.tgz", "integrity": "sha512-FA/BWv8t8ZWJ+gEOnLLd8ygxH/2UFbAvgEonyfN6yWGLKc7zVjbpl2Y4CTjid9h2RfgPP6SEt6uHwEOply00yw==" }, + "@types/zen-observable": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/@types/zen-observable/-/zen-observable-0.8.0.tgz", + "integrity": "sha512-te5lMAWii1uEJ4FwLjzdlbw3+n0FZNOvFXHxQDKeT0dilh7HOzdMzV2TrJVUzq8ep7J4Na8OUYPRLSQkJHAlrg==", + "dev": true + }, "@typescript-eslint/experimental-utils": { "version": "2.33.0", "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-2.33.0.tgz", @@ -3456,6 +3462,25 @@ "@xtuc/long": "4.2.2" } }, + "@wry/context": { + "version": "0.4.4", + "resolved": "https://registry.npmjs.org/@wry/context/-/context-0.4.4.tgz", + "integrity": "sha512-LrKVLove/zw6h2Md/KZyWxIkFM6AoyKp71OqpH9Hiip1csjPVoD3tPxlbQUNxEnHENks3UGgNpSBCAfq9KWuag==", + "dev": true, + "requires": { + "@types/node": ">=6", + "tslib": "^1.9.3" + } + }, + "@wry/equality": { + "version": "0.1.11", + "resolved": "https://registry.npmjs.org/@wry/equality/-/equality-0.1.11.tgz", + "integrity": "sha512-mwEVBDUVODlsQQ5dfuLUS5/Tf7jqUKyhKYHmVi4fPB6bDMOfWvUPJmKgS1Z7Za/sOI3vzWt4+O7yCiL/70MogA==", + "dev": true, + "requires": { + "tslib": "^1.9.3" + } + }, "@xtuc/ieee754": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz", @@ -3648,6 +3673,69 @@ } } }, + "apollo-cache": { + "version": "1.3.5", + "resolved": "https://registry.npmjs.org/apollo-cache/-/apollo-cache-1.3.5.tgz", + "integrity": "sha512-1XoDy8kJnyWY/i/+gLTEbYLnoiVtS8y7ikBr/IfmML4Qb+CM7dEEbIUOjnY716WqmZ/UpXIxTfJsY7rMcqiCXA==", + "dev": true, + "requires": { + "apollo-utilities": "^1.3.4", + "tslib": "^1.10.0" + } + }, + "apollo-cache-inmemory": { + "version": "1.6.6", + "resolved": "https://registry.npmjs.org/apollo-cache-inmemory/-/apollo-cache-inmemory-1.6.6.tgz", + "integrity": "sha512-L8pToTW/+Xru2FFAhkZ1OA9q4V4nuvfoPecBM34DecAugUZEBhI2Hmpgnzq2hTKZ60LAMrlqiASm0aqAY6F8/A==", + "dev": true, + "requires": { + "apollo-cache": "^1.3.5", + "apollo-utilities": "^1.3.4", + "optimism": "^0.10.0", + "ts-invariant": "^0.4.0", + "tslib": "^1.10.0" + } + }, + "apollo-client": { + "version": "2.6.10", + "resolved": "https://registry.npmjs.org/apollo-client/-/apollo-client-2.6.10.tgz", + "integrity": "sha512-jiPlMTN6/5CjZpJOkGeUV0mb4zxx33uXWdj/xQCfAMkuNAC3HN7CvYDyMHHEzmcQ5GV12LszWoQ/VlxET24CtA==", + "dev": true, + "requires": { + "@types/zen-observable": "^0.8.0", + "apollo-cache": "1.3.5", + "apollo-link": "^1.0.0", + "apollo-utilities": "1.3.4", + "symbol-observable": "^1.0.2", + "ts-invariant": "^0.4.0", + "tslib": "^1.10.0", + "zen-observable": "^0.8.0" + } + }, + "apollo-link": { + "version": "1.2.14", + "resolved": "https://registry.npmjs.org/apollo-link/-/apollo-link-1.2.14.tgz", + "integrity": "sha512-p67CMEFP7kOG1JZ0ZkYZwRDa369w5PIjtMjvrQd/HnIV8FRsHRqLqK+oAZQnFa1DDdZtOtHTi+aMIW6EatC2jg==", + "dev": true, + "requires": { + "apollo-utilities": "^1.3.0", + "ts-invariant": "^0.4.0", + "tslib": "^1.9.3", + "zen-observable-ts": "^0.8.21" + } + }, + "apollo-utilities": { + "version": "1.3.4", + "resolved": "https://registry.npmjs.org/apollo-utilities/-/apollo-utilities-1.3.4.tgz", + "integrity": "sha512-pk2hiWrCXMAy2fRPwEyhvka+mqwzeP60Jr1tRYi5xru+3ko94HI9o6lK0CT33/w4RDlxWchmdhDCrvdr+pHCig==", + "dev": true, + "requires": { + "@wry/equality": "^0.1.2", + "fast-json-stable-stringify": "^2.0.0", + "ts-invariant": "^0.4.0", + "tslib": "^1.10.0" + } + }, "aproba": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz", @@ -7094,6 +7182,18 @@ "integrity": "sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw==", "dev": true }, + "graphql": { + "version": "15.0.0", + "resolved": "https://registry.npmjs.org/graphql/-/graphql-15.0.0.tgz", + "integrity": "sha512-ZyVO1xIF9F+4cxfkdhOJINM+51B06Friuv4M66W7HzUOeFd+vNzUn4vtswYINPi6sysjf1M2Ri/rwZALqgwbaQ==", + "dev": true + }, + "graphql-tag": { + "version": "2.10.3", + "resolved": "https://registry.npmjs.org/graphql-tag/-/graphql-tag-2.10.3.tgz", + "integrity": "sha512-4FOv3ZKfA4WdOKJeHdz6B3F/vxBLSgmBcGeAFPf4n1F64ltJUvOOerNj0rsJxONQGdhUMynQIvd6LzB+1J5oKA==", + "dev": true + }, "growly": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/growly/-/growly-1.3.0.tgz", @@ -12502,6 +12602,12 @@ "minimist": "^1.2.5" } }, + "mock-apollo-client": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/mock-apollo-client/-/mock-apollo-client-0.4.0.tgz", + "integrity": "sha512-cHznpkX8uUClkWWJMpgdDWzEgjacM85xt69S9gPLrssM8Vahas0QmEJkFUycrRQyBkaqxvRe58Bg3a5pOvj2zA==", + "dev": true + }, "move-concurrently": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz", @@ -12893,6 +12999,15 @@ "integrity": "sha512-pVOEP16TrAO2/fjej1IdOyupJY8KDUM1CvsaScRbw6oddvpQoOfGk4ywha0HKKVAD6RkW4x6Q+tNBwhf3Bgpuw==", "dev": true }, + "optimism": { + "version": "0.10.3", + "resolved": "https://registry.npmjs.org/optimism/-/optimism-0.10.3.tgz", + "integrity": "sha512-9A5pqGoQk49H6Vhjb9kPgAeeECfUDF6aIICbMDL23kDLStBn1MWk3YvcZ4xWF9CsSf6XEgvRLkXy4xof/56vVw==", + "dev": true, + "requires": { + "@wry/context": "^0.4.0" + } + }, "optionator": { "version": "0.8.3", "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.3.tgz", @@ -14907,6 +15022,12 @@ } } }, + "symbol-observable": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz", + "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==", + "dev": true + }, "symbol-tree": { "version": "3.2.4", "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz", @@ -14992,6 +15113,12 @@ "integrity": "sha512-fcwX4mndzpLQKBS1DVYhGAcYaYt7vsHNIvQV+WXMvnow5cgjPphq5CaayLaGsjRdSCKZFNGt7/GYAuXaNOiYCA==", "dev": true }, + "throttle-debounce": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-2.1.0.tgz", + "integrity": "sha512-AOvyNahXQuU7NN+VVvOOX+uW6FPaWdAOdRP5HfwYxAfCzXTFKRMoIMk+n+po318+ktcChx+F1Dd91G3YHeMKyg==", + "dev": true + }, "through": { "version": "2.3.8", "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz", @@ -15146,6 +15273,15 @@ "integrity": "sha512-rvuRbTarPXmMb79SmzEp8aqXNKcK+y0XaB298IXueQ8I2PsrATcPBCSPyK/dDNa2iWOhKlfNnOjdAOTBU/nkFA==", "dev": true }, + "ts-invariant": { + "version": "0.4.4", + "resolved": "https://registry.npmjs.org/ts-invariant/-/ts-invariant-0.4.4.tgz", + "integrity": "sha512-uEtWkFM/sdZvRNNDL3Ehu4WVpwaulhwQszV8mrtcdeE8nN00BV9mAmQ88RkrBhFgl9gMgvjJLAQcZbnPXI9mlA==", + "dev": true, + "requires": { + "tslib": "^1.9.3" + } + }, "ts-jest": { "version": "23.10.5", "resolved": "https://registry.npmjs.org/ts-jest/-/ts-jest-23.10.5.tgz", @@ -15601,6 +15737,17 @@ "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.11.tgz", "integrity": "sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ==" }, + "vue-apollo": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/vue-apollo/-/vue-apollo-3.0.3.tgz", + "integrity": "sha512-WJaQ1v/i46/oIPlKv7J0Tx6tTlbuaeCdhrAbL06h+Zca2gzr5ywjUFpl8ijMTGJsQ+Ph/U4xEpBFBOMxQmL+7g==", + "dev": true, + "requires": { + "chalk": "^2.4.2", + "serialize-javascript": "^2.1.0", + "throttle-debounce": "^2.1.0" + } + }, "vue-eslint-parser": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.0.0.tgz", @@ -16111,6 +16258,22 @@ "camelcase": "^5.0.0", "decamelize": "^1.2.0" } + }, + "zen-observable": { + "version": "0.8.15", + "resolved": "https://registry.npmjs.org/zen-observable/-/zen-observable-0.8.15.tgz", + "integrity": "sha512-PQ2PC7R9rslx84ndNBZB/Dkv8V8fZEpk83RLgXtYd0fwUgEjseMn1Dgajh2x6S8QbZAFa9p2qVCEuYZNgve0dQ==", + "dev": true + }, + "zen-observable-ts": { + "version": "0.8.21", + "resolved": "https://registry.npmjs.org/zen-observable-ts/-/zen-observable-ts-0.8.21.tgz", + "integrity": "sha512-Yj3yXweRc8LdRMrCC8nIc4kkjWecPAUVh0TI0OUrWXx6aX790vLcDlWca6I4vsyCGH3LpWxq0dJRcMOFoVqmeg==", + "dev": true, + "requires": { + "tslib": "^1.9.3", + "zen-observable": "^0.8.0" + } } } } diff --git a/package.json b/package.json index ec520a45..e502d0d2 100644 --- a/package.json +++ b/package.json @@ -48,14 +48,20 @@ "devDependencies": { "@babel/plugin-transform-runtime": "^7.9.6", "@testing-library/jest-dom": "^5.7.0", + "apollo-cache-inmemory": "^1.6.6", + "apollo-client": "^2.6.10", "axios": "^0.19.2", "eslint-plugin-vue": "^6.2.2", + "graphql": "^15.0.0", + "graphql-tag": "^2.10.3", "jest-serializer-vue": "^2.0.2", "kcd-scripts": "^5.11.1", "lodash.merge": "^4.6.2", + "mock-apollo-client": "^0.4.0", "portal-vue": "^2.1.7", "vee-validate": "^2.2.15", "vue": "^2.6.11", + "vue-apollo": "^3.0.3", "vue-i18n": "^8.17.6", "vue-jest": "^4.0.0-beta.2", "vue-router": "^3.1.6", diff --git a/src/__tests__/components/VueApollo.vue b/src/__tests__/components/VueApollo.vue new file mode 100644 index 00000000..a491c0e4 --- /dev/null +++ b/src/__tests__/components/VueApollo.vue @@ -0,0 +1,61 @@ + + + diff --git a/src/__tests__/components/VueApollo/queries.js b/src/__tests__/components/VueApollo/queries.js new file mode 100644 index 00000000..05cd43c2 --- /dev/null +++ b/src/__tests__/components/VueApollo/queries.js @@ -0,0 +1,19 @@ +import gql from 'graphql-tag' + +export const updateUserMutation = gql` + mutation updateUser($data: UpdateUserInput) { + updateUser(input: $data) { + id + email + } + } +` + +export const userQuery = gql` + query User($id: String!) { + user(id: $id) { + id + email + } + } +` diff --git a/src/__tests__/vue-apollo.js b/src/__tests__/vue-apollo.js new file mode 100644 index 00000000..f057dcdb --- /dev/null +++ b/src/__tests__/vue-apollo.js @@ -0,0 +1,63 @@ +// Caution! +// This approach only works with apollo-client 2.x and vue-apollo 3.x + +import '@testing-library/jest-dom' +import {render, fireEvent, screen} from '@testing-library/vue' +import VueApollo from 'vue-apollo' + +// Since vue-apollo doesn't provides a MockProvider for Vue, +// you need to use some kind of a mocking client for Apollo. + +// If you decide to use `mock-apollo-client`, +// have a look at the documentation at +// https://github.com/Mike-Gibson/mock-apollo-client +import {createMockClient} from 'mock-apollo-client' + +import Component from './components/VueApollo.vue' +import {userQuery, updateUserMutation} from './components/VueApollo/queries' + +test('mocking queries and mutations', async () => { + const mockClient = createMockClient() + + mockClient.setRequestHandler(userQuery, () => + Promise.resolve({ + data: {user: {id: '1', email: 'alice@example.com'}}, + }), + ) + + mockClient.setRequestHandler(updateUserMutation, variables => + Promise.resolve({ + data: { + updateUser: {id: variables.input.id, email: variables.input.email}, + }, + }), + ) + + render(Component, {props: {id: '1'}}, localVue => { + localVue.use(VueApollo) + + return { + apolloProvider: new VueApollo({ + defaultClient: mockClient, + }), + } + }) + + //Initial rendering will be in the loading state, + expect(screen.getByText('Loading')).toBeInTheDocument() + + expect( + await screen.findByText('Email: alice@example.com'), + ).toBeInTheDocument() + + await fireEvent.update( + screen.getByLabelText('Email'), + 'alice+new@example.com', + ) + + await fireEvent.click(screen.getByRole('button', {name: 'Change email'})) + + expect( + await screen.findByText('Email: alice+new@example.com'), + ).toBeInTheDocument() +})