From 4755e0549949155a35135262ad9f0ad80d473385 Mon Sep 17 00:00:00 2001 From: Amir Rustamzadeh Date: Fri, 26 Jan 2018 11:54:36 -0800 Subject: [PATCH 1/4] Add Cypress commands to scripts --- package.json | 2 ++ 1 file changed, 2 insertions(+) diff --git a/package.json b/package.json index 5772408cb..558503ba0 100644 --- a/package.json +++ b/package.json @@ -4,6 +4,8 @@ "author": "Evan You ", "private": true, "scripts": { + "cy:open": "cypress open", + "cy:run": "cypress run", "dev": "node server", "start": "cross-env NODE_ENV=production node server", "build": "rimraf dist && npm run build:client && npm run build:server", From 5846cd38476a7ba9878a89ce93b6feb173c81a50 Mon Sep 17 00:00:00 2001 From: Amir Rustamzadeh Date: Fri, 26 Jan 2018 11:56:38 -0800 Subject: [PATCH 2/4] Add Cypress specific webpack config MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit We need a base config but with an alias for ‘create-api’. --- build/webpack.cypress.config.js | 13 +++++++++++++ cypress/plugins/index.js | 2 +- 2 files changed, 14 insertions(+), 1 deletion(-) create mode 100644 build/webpack.cypress.config.js diff --git a/build/webpack.cypress.config.js b/build/webpack.cypress.config.js new file mode 100644 index 000000000..15899e073 --- /dev/null +++ b/build/webpack.cypress.config.js @@ -0,0 +1,13 @@ +const path = require('path') +const merge = require('webpack-merge') +const base = require('./webpack.base.config') + +const config = merge(base, { + resolve: { + alias: { + 'create-api': './create-api-client.js' + } + } +}) + +module.exports = config \ No newline at end of file diff --git a/cypress/plugins/index.js b/cypress/plugins/index.js index a3bb8c08f..6512accbf 100644 --- a/cypress/plugins/index.js +++ b/cypress/plugins/index.js @@ -2,7 +2,7 @@ const join = require('path').join const { onFilePreprocessor } = require('cypress-vue-unit-test/preprocessor/webpack') -const config = join(__dirname, '../../build/webpack.base.config') +const config = join(__dirname, '../../build/webpack.cypress.config') module.exports = on => { on('file:preprocessor', onFilePreprocessor(config)) } From 0525ca38f3d4593532b7558ed6358fc29a5c56d6 Mon Sep 17 00:00:00 2001 From: Amir Rustamzadeh Date: Fri, 26 Jan 2018 11:57:21 -0800 Subject: [PATCH 3/4] =?UTF-8?q?Set=20Cypress=20=E2=80=99baseUrl=E2=80=99?= =?UTF-8?q?=20to=20local=20dev=20server?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- cypress.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cypress.json b/cypress.json index 870b3cb82..3255b61ad 100644 --- a/cypress.json +++ b/cypress.json @@ -1,4 +1,4 @@ { - "baseUrl": "https://vue-hn.now.sh", + "baseUrl": "http://localhost:8080", "projectId": "b1sfu5" } From 3521a93a0358c575a3b36345877de5b0ddcac341 Mon Sep 17 00:00:00 2001 From: Amir Rustamzadeh Date: Fri, 26 Jan 2018 12:31:23 -0800 Subject: [PATCH 4/4] Fix Vue Router integeration - add `VueRouter` to plugins option - generate router instance with `createRouter` - include router instance in component object --- cypress/integration/item-spec.js | 21 ++++++++++----------- 1 file changed, 10 insertions(+), 11 deletions(-) diff --git a/cypress/integration/item-spec.js b/cypress/integration/item-spec.js index d8a9e6612..1c0d1a313 100644 --- a/cypress/integration/item-spec.js +++ b/cypress/integration/item-spec.js @@ -1,7 +1,9 @@ import Item from '../../src/components/Item.vue' import { timeAgo, host } from '../../src/util/filters' +import { createRouter } from '../../src/router' +import VueRouter from 'vue-router' +import mountVue from 'cypress-vue-unit-test' -const mountVue = require('cypress-vue-unit-test') /* eslint-env mocha */ /* global cy, Cypress */ describe('Item', () => { @@ -20,7 +22,9 @@ describe('Item', () => { descendants: 42 } } + const extensions = { + plugins: [ VueRouter ], filters: { timeAgo, host } } const html = ` @@ -32,29 +36,24 @@ describe('Item', () => { ` - // - // hmm, when adding the vue router getting an error inside the RouterLink - // render function - // var router = this.$router; - // var current = this.$route; - // var ref = router.resolve(this.to, current, this.append); - // this.$router is undefined - // Seems VueRouter.install(Vue) did not go well + const options = { html, extensions } + const router = createRouter() + beforeEach(() => { cy.viewport(400, 200) }) - beforeEach(mountVue({ template, components, data }, options)) + beforeEach(mountVue({ template, components, data, router }, options)) it('loads news item', () => { cy.contains('.score', 101) }) it('has link to comments', () => { - cy.contains('router-link', '42 comments') + cy.contains('.comments-link > a', '42 comments') }) })