From 447053b4a782cd4a10a66f05a7fc0d57a802137b Mon Sep 17 00:00:00 2001 From: Eduardo San Martin Morote Date: Thu, 19 Mar 2020 16:02:29 +0100 Subject: [PATCH] test(e2e): setup e2e tests --- e2e/runner.js | 3 +-- e2e/specs/basic.js | 27 -------------------------- e2e/specs/encoding.js | 37 ++++++++++++++++++++++++++++++++++++ examples/encoding/index.html | 20 +++++++++++-------- examples/encoding/index.ts | 29 +++++++++++++++------------- examples/global.css | 7 +++++++ examples/hash/index.ts | 19 +++++++----------- examples/index.html | 2 +- examples/index.ts | 17 +++++++++++++---- examples/server.js | 12 ++++++++++++ examples/tsconfig.json | 2 +- examples/webpack.config.js | 13 ++++++++----- 12 files changed, 115 insertions(+), 73 deletions(-) delete mode 100644 e2e/specs/basic.js create mode 100644 e2e/specs/encoding.js create mode 100644 examples/server.js diff --git a/e2e/runner.js b/e2e/runner.js index d17dee99..c8de873c 100644 --- a/e2e/runner.js +++ b/e2e/runner.js @@ -26,8 +26,7 @@ const Nightwatch = require('nightwatch') const args = process.argv.slice(2) // if we are running yarn dev locally, we can pass --dev to avoid launching another server instance -const server = - args.indexOf('--dev') > -1 ? null : require('../../examples/server') +const server = args.indexOf('--dev') > -1 ? null : require('../examples/server') // allow running browserstack local const isLocal = args.indexOf('--local') > -1 diff --git a/e2e/specs/basic.js b/e2e/specs/basic.js deleted file mode 100644 index 28f62c11..00000000 --- a/e2e/specs/basic.js +++ /dev/null @@ -1,27 +0,0 @@ -const bsStatus = require('../browserstack-send-status') - -module.exports = { - ...bsStatus(), - - '@tags': ['history'], - - basic(browser) { - browser - .url('http://localhost:8080') - .waitForElementVisible('#app', 1000) - // .assert.count('li', 8) - - .click('li:nth-child(2) a') - .assert.urlEquals('http://localhost:8080/documents/%E2%82%ACuro') - .assert.containsText('#fullPath', '/documents/%E2%82%ACuro') - .assert.containsText('#path', '/documents/%E2%82%ACuro') - .assert.containsText('#params', JSON.stringify({ id: '€uro' }, null, 2)) - - // check initial visit - .url('http://localhost:8080/users/2') - .waitForElementVisible('#app', 1000) - .assert.containsText('#params', JSON.stringify({ id: '2' }, null, 2)) - - .end() - }, -} diff --git a/e2e/specs/encoding.js b/e2e/specs/encoding.js new file mode 100644 index 00000000..305f5015 --- /dev/null +++ b/e2e/specs/encoding.js @@ -0,0 +1,37 @@ +const bsStatus = require('../browserstack-send-status') + +const baseURL = 'http://localhost:8080/encoding' + +module.exports = { + ...bsStatus(), + + '@tags': ['history', 'encoding'], + + /** @type {import('nightwatch').NightwatchTest} */ + basic(browser) { + browser + .url(baseURL) + .waitForElementVisible('#app', 1000) + + .click('li:nth-child(3) a') + .assert.urlEquals(baseURL + '/documents/%E2%82%ACuro') + .assert.containsText('#fullPath', '/documents/%E2%82%ACuro') + .assert.containsText('#path', '/documents/%E2%82%ACuro') + .assert.containsText('#params', JSON.stringify({ id: '€uro' }, null, 2)) + + // check initial visit + .url(baseURL + '/encoding/documents/%E2%82%ACuro') + .waitForElementVisible('#app', 1000) + .assert.containsText('#fullPath', '/documents/%E2%82%ACuro') + .assert.containsText('#path', '/documents/%E2%82%ACuro') + // .assert.containsText('#params', JSON.stringify({ id: '€uro' }, null, 2)) + // .assert.containsText('#params', JSON.stringify({ id: '€uro' }, null, 2)) + + browser + .getText('#params', function(res) { + this.assert.equal(res.value, JSON.stringify({ id: '€uro' }, null, 2)) + console.log(res.state) + }) + .end() + }, +} diff --git a/examples/encoding/index.html b/examples/encoding/index.html index ca1ab4c8..9c304ecd 100644 --- a/examples/encoding/index.html +++ b/examples/encoding/index.html @@ -12,32 +12,32 @@
Name: - 
{{ $route.name }}
+ 
{{ route.name }}
Params: - 
{{ $route.params }}
+ 
{{ route.params }}
Query: - 
{{ $route.query }}
+ 
{{ route.query }}
Hash: - 
{{ $route.hash }}
+ 
{{ route.hash }}
FullPath: - 
{{ $route.fullPath }}
+ 
{{ route.fullPath }}
path: - 
{{ $route.path }}
+ 
{{ route.path }}
@@ -63,10 +63,14 @@ >
  • - /n/%E2%82%AC (force reload) + /n/%E2%82%AC (force reload)
  • - /n/€ (force reload): not valid tho + /n/€ (force reload. not valid but should not crash the router)
    • diff --git a/examples/encoding/index.ts b/examples/encoding/index.ts index 9f4fc529..a63ccebc 100644 --- a/examples/encoding/index.ts +++ b/examples/encoding/index.ts @@ -1,6 +1,6 @@ -import { Router, plugin, createHistory } from '../../src' +import { createRouter, createWebHistory, useRoute } from '../../src' import { RouteComponent } from '../../src/types' -import Vue from 'vue' +import { createApp } from 'vue' const component: RouteComponent = { template: `
    A component
    `, @@ -11,11 +11,14 @@ const Home: RouteComponent = { } const Document: RouteComponent = { - template: `
    Document: {{ $route.params.id }}
    `, + template: `
    Document: {{ route.params.id }}
    `, + setup() { + return { route: useRoute() } + }, } -const router = new Router({ - history: createHistory('/' + __dirname), +const router = createRouter({ + history: createWebHistory('/' + __dirname), routes: [ { path: '/', component: Home, name: 'home' }, { path: '/documents/:id', name: 'docs', component: Document }, @@ -23,12 +26,12 @@ const router = new Router({ ], }) -// use the router -Vue.use(plugin) - -// @ts-ignore -window.vm = new Vue({ - el: '#app', - // @ts-ignore - router, +const app = createApp({ + setup() { + const route = useRoute() + return { route } + }, }) +app.use(router) + +window.vm = app.mount('#app') diff --git a/examples/global.css b/examples/global.css index 915be034..6d42c336 100644 --- a/examples/global.css +++ b/examples/global.css @@ -22,3 +22,10 @@ a { a:hover { color: #4fc08d; } + +.router-link-active { + color: darkorange; +} +.router-link-exact-active { + color: red; +} diff --git a/examples/hash/index.ts b/examples/hash/index.ts index 04ddab58..a174b191 100644 --- a/examples/hash/index.ts +++ b/examples/hash/index.ts @@ -1,6 +1,6 @@ -import { Router, plugin, createHashHistory } from '../../src' +import { createRouter, createWebHistory } from '../../src' import { RouteComponent } from '../../src/types' -import Vue from 'vue' +import { createApp } from 'vue' const component: RouteComponent = { template: `
    A component
    `, @@ -14,8 +14,8 @@ const Document: RouteComponent = { template: `
    Document: {{ $route.params.id }}
    `, } -const router = new Router({ - history: createHashHistory('/' + __dirname), +const router = createRouter({ + history: createWebHistory('/' + __dirname), routes: [ { path: '/', component: Home, name: 'home' }, { path: '/documents/:id', name: 'docs', component: Document }, @@ -23,12 +23,7 @@ const router = new Router({ ], }) -// use the router -Vue.use(plugin) +const app = createApp({}) +app.use(router) -// @ts-ignore -window.vm = new Vue({ - el: '#app', - // @ts-ignore - router, -}) +window.vm = app.mount('#app') diff --git a/examples/index.html b/examples/index.html index 44af7d0b..e45bab93 100644 --- a/examples/index.html +++ b/examples/index.html @@ -12,7 +12,7 @@
    diff --git a/examples/index.ts b/examples/index.ts index c63a4d32..157c08dd 100644 --- a/examples/index.ts +++ b/examples/index.ts @@ -1,4 +1,4 @@ -import Vue from 'vue' +import { createApp, ComponentPublicInstance } from 'vue' const context = require.context('.', true, /^.{2,}\/index\.ts$/) const DIR_RE = /^\.\/([^/]+)\// @@ -11,7 +11,16 @@ context.keys().forEach(path => { }) examples.sort() -new Vue({ - el: '#app', - data: { examples }, +declare global { + interface Window { + app: typeof app + vm: ComponentPublicInstance + } +} + +const app = createApp({ + data: () => ({ examples }), }) + +app.mount('#app') +window.app = app diff --git a/examples/server.js b/examples/server.js new file mode 100644 index 00000000..5a3bfad9 --- /dev/null +++ b/examples/server.js @@ -0,0 +1,12 @@ +const webpack = require('webpack') +const WebpackDevServer = require('webpack-dev-server') +const webpackConfig = require('./webpack.config') + +const compiler = webpack(webpackConfig) + +const app = new WebpackDevServer(compiler, webpackConfig.devServer) + +const port = process.env.PORT || 8080 +module.exports = app.listen(port, () => { + console.log(`Server listening on http://localhost:${port}, Ctrl+C to stop`) +}) diff --git a/examples/tsconfig.json b/examples/tsconfig.json index dbdce62e..95aceb4d 100644 --- a/examples/tsconfig.json +++ b/examples/tsconfig.json @@ -1,5 +1,5 @@ { - "include": ["index.ts", "*/*ts"], + "include": ["index.ts", "*/*ts", "../src/global.d.ts"], "compilerOptions": { "target": "es5", "module": "commonjs", diff --git a/examples/webpack.config.js b/examples/webpack.config.js index 6ce4c6b0..545c1340 100644 --- a/examples/webpack.config.js +++ b/examples/webpack.config.js @@ -34,6 +34,7 @@ module.exports = { })), }, hot: true, + stats: 'minimal', }, entry: examples.reduce( @@ -72,6 +73,13 @@ module.exports = { extensions: ['.ts', '.tsx', '.js'], }, plugins: [ + new webpack.DefinePlugin({ + __DEV__: JSON.stringify(process.env.NODE_ENV !== 'production'), + __BROWSER__: `typeof window !== 'undefined'`, + 'process.env': { + NODE_ENV: JSON.stringify(process.env.NODE_ENV), + }, + }), ...examples.map( name => new HtmlWebpackPlugin({ @@ -85,10 +93,5 @@ module.exports = { chunks: ['index'], template: resolve(__dirname, 'index.html'), }), - new webpack.DefinePlugin({ - 'process.env': { - NODE_ENV: JSON.stringify(process.env.NODE_ENV), - }, - }), ], } -- 2.39.5