Skip to content

Commit bb46fe9

Browse files
mrichar1mrichar1
committed
Replace nightwatch with playwright for e2e testing. Remove legacy deps.
1 parent a1c7274 commit bb46fe9

30 files changed

+357
-5960
lines changed

‎.github/workflows/main.yml

+2-1
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,8 @@ jobs:
2828
run: |
2929
yarn
3030
yarn lint
31-
yarn test
31+
yarn unit
32+
yarn e2e
3233
yarn docs
3334
3435
- name: Setup Node.js

‎examples/testapp/README.md

-11
This file was deleted.

‎examples/testapp/babel.config.js

-3
This file was deleted.

‎examples/testapp/public/favicon.ico renamed to ‎examples/testapp/favicon.ico

File renamed without changes.

‎examples/testapp/public/index.html renamed to ‎examples/testapp/index.html

+1-2
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
<meta charset="utf-8" />
55
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
66
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
7-
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
87
<title>testapp</title>
98
</head>
109
<body>
@@ -14,6 +13,6 @@
1413
>
1514
</noscript>
1615
<div id="app"></div>
17-
<!-- built files will be auto injected -->
16+
<script type="module" src="/src/main.js"></script>
1817
</body>
1918
</html>

‎examples/testapp/postcss.config.js

-5
This file was deleted.

‎package.json

+14-25
Original file line numberDiff line numberDiff line change
@@ -4,57 +4,46 @@
44
"description": "Access restructured JSONAPI data from a Vuex Store.",
55
"author": "Matthew Richardson <[email protected]>",
66
"scripts": {
7-
"lint": "eslint .",
7+
"dev": "concurrently --success first --kill-others \"npm:fakeapiserver\" \"vite dev\"",
88
"docs": "rm -rf docs/; jsdoc -c jsdoc.json",
9-
"e2e": "concurrently --success first --kill-others \"npm:fakeapiserver\" \"vue-cli-service test:e2e --env chrome --headless\"",
9+
"e2e": "playwright test --project 'Google Chrome'",
1010
"fakeapiserver": "node examples/fake-json-api-server.js",
11-
"test": "npm run unit && npm run e2e",
12-
"testapp": "concurrently --kill-others \"npm:fakeapiserver\" \"vue-cli-service serve\"",
13-
"unit": "vitest run"
11+
"lint": "eslint .",
12+
"unit": "vitest run --dir tests/unit"
1413
},
1514
"main": "src/jsonapi-vuex.js",
1615
"files": [
1716
"src/"
1817
],
1918
"dependencies": {
2019
"jsonpath-plus": "^7.2.0",
21-
"lodash": "^4.17.21",
22-
"vitest": "^0.34.6"
20+
"lodash": "^4.17.21"
2321
},
2422
"devDependencies": {
25-
"@vue/cli-plugin-babel": "~5.0.8",
26-
"@vue/cli-plugin-e2e-nightwatch": "~5.0.8",
27-
"@vue/cli-plugin-eslint": "~5.0.8",
28-
"@vue/cli-plugin-vuex": "~5.0.8",
29-
"@vue/cli-service": "~5.0.8",
30-
"@vue/test-utils": "^2.3.1",
23+
"@babel/core": "^7.23.3",
24+
"@babel/eslint-parser": "^7.23.3",
25+
"@playwright/test": "^1.39.0",
26+
"@vitejs/plugin-vue": "^4.4.1",
3127
"axios": "^1.6.2",
3228
"axios-mock-adapter": "^1.22.0",
33-
"@babel/core": "^7.21.0",
34-
"@babel/eslint-parser": "^7.19.1",
35-
"@babel/preset-env": "^7.20.2",
3629
"chai": "^4.3.10",
37-
"chromedriver": "^118.0.0",
3830
"concurrently": "^7.6.0",
39-
"core-js": "^3.29.1",
4031
"eslint": "^8.36.0",
4132
"eslint-config-prettier": "^8.7.0",
4233
"eslint-plugin-prettier": "^4.2.1",
4334
"eslint-plugin-prettier-vue": "^4.2.0",
4435
"eslint-plugin-vue": "^9.9.0",
4536
"eslint-webpack-plugin": "^4.0.0",
4637
"fake-json-api-server": "^1.6.0",
47-
"geckodriver": "^3.2.0",
48-
"husky": "^8.0.3",
38+
"happy-dom": "^12.10.3",
4939
"jsdoc": "^4.0.2",
50-
"lint-staged": "^13.2.0",
51-
"nightwatch": "^2.6.17",
5240
"prettier": "^2.8.4",
5341
"sinon": "^17.0.1",
5442
"sinon-chai": "^3.7.0",
55-
"vue": "^3.2.47",
56-
"vuex": "^4.1.0",
57-
"webpack": "^5.0.0"
43+
"vite": "^4.4.5",
44+
"vitest": "^0.34.6",
45+
"vue": "^3.3.8",
46+
"vuex": "^4.1.0"
5847
},
5948
"peerDependencies": {
6049
"vue": "^3.0.11",

‎playwright.config.js

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import { defineConfig, devices } from '@playwright/test'
2+
3+
export default defineConfig({
4+
testDir: './tests/e2e',
5+
testMatch: /.*\.js/,
6+
/* Maximum time one test can run for. */
7+
timeout: 30 * 1000,
8+
expect: {
9+
/**
10+
* Maximum time expect() should wait for the condition to be met.
11+
* For example in `await expect(locator).toHaveText();`
12+
*/
13+
timeout: 0,
14+
},
15+
/* Fail the build on CI if you accidentally left test.only in the source code. */
16+
forbidOnly: !!process.env.CI,
17+
/* Retry on CI only */
18+
retries: process.env.CI ? 2 : 0,
19+
/* Opt out of parallel tests on CI. */
20+
workers: process.env.CI ? 1 : undefined,
21+
/* Reporter to use. See https://playwright.dev/docs/test-reporters */
22+
reporter: 'list',
23+
use: {
24+
/* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
25+
actionTimeout: 10000,
26+
/* Base URL to use in actions like `await page.goto('/')`. */
27+
baseURL: 'http://localhost:5173',
28+
29+
/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
30+
trace: 'on-first-retry',
31+
32+
/* Only on CI systems run the tests headless */
33+
headless: !!process.env.CI,
34+
},
35+
36+
/* Run your local dev server before starting the tests */
37+
webServer: {
38+
command: 'yarn dev',
39+
port: 5173,
40+
reuseExistingServer: !process.env.CI,
41+
},
42+
// Google Chrome is pre-installed on Github CI/dev desktops, so use it to avoid 'playwright install' delays
43+
projects: [
44+
{
45+
name: "Google Chrome",
46+
use: {
47+
channel: "chrome",
48+
},
49+
},
50+
]
51+
})

‎tests/e2e/custom-assertions/.gitkeep

Whitespace-only changes.

‎tests/e2e/custom-commands/.gitkeep

Whitespace-only changes.

‎tests/e2e/globals.js

Whitespace-only changes.

‎tests/e2e/page-objects/.gitkeep

Whitespace-only changes.

‎tests/e2e/specs/test.js

-79
This file was deleted.

‎tests/e2e/vue.spec.js

+80
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import { expect, test } from '@playwright/test'
2+
3+
let page
4+
5+
test.beforeAll(async ({ browser }) => {
6+
page = await browser.newPage()
7+
await page.goto('localhost:5173')
8+
})
9+
10+
test('Has main div', async () => {
11+
expect(await page.locator('#main-div').isVisible()).toBe(true)
12+
})
13+
14+
test('Has h1 title', async () => {
15+
expect(await page.locator('div#main-div > h1')).toHaveText('JSONAPI Vuex Test App')
16+
})
17+
18+
test('Has raw data div', async () => {
19+
expect(await page.locator('#raw_data').isVisible()).toBe(true)
20+
})
21+
22+
test('Has h2 raw title', async () => {
23+
expect(await page.locator('div#raw_data > h2')).toHaveText('Raw Data')
24+
})
25+
26+
test('Has render data div', async () => {
27+
expect(await page.locator('#render_data').isVisible()).toBe(true)
28+
})
29+
30+
test('Has h2 render title', async () => {
31+
expect(await page.locator('div#render_data > h2')).toHaveText('Rendered Data')
32+
})
33+
34+
test('Has initial API data', async () => {
35+
expect(await page.locator('#span_name_1')).toHaveText('sprocket')
36+
expect(await page.locator('#span_color_1')).toHaveText('black')
37+
})
38+
39+
test('Has related objects', async () => {
40+
expect(await page.locator('#rel_span_relname')).toHaveText('widgets')
41+
expect(await page.locator('#rel_span_name')).toHaveText('gear')
42+
expect(await page.locator('#rel_span_color')).toHaveText('blue')
43+
})
44+
45+
test('Has initial API search data', async () => {
46+
expect(await page.locator('#search_name_1')).toHaveText('sprocket')
47+
expect(await page.locator('#search_color_1')).toHaveText('black')
48+
})
49+
50+
test('Inputs exist and have correct values ', async () => {
51+
expect(await page.locator('#patch').isVisible()).toBe(true)
52+
expect(await page.locator('#patch_name')).toHaveValue('sprocket')
53+
expect(await page.locator('#patch_color')).toHaveValue('black')
54+
})
55+
56+
test('Patch values', async () => {
57+
expect(await page.locator('#patch_name').fill('cog'))
58+
expect(await page.locator('#patch_color').fill('red'))
59+
await page.getByRole('button', { name: 'Patch' }).click()
60+
await page.waitForTimeout(1000)
61+
expect(await page.locator('#span_name_1')).toHaveText('cog')
62+
expect(await page.locator('#span_color_1')).toHaveText('red')
63+
})
64+
65+
test('Post new item', async () => {
66+
expect(await page.locator('#post_name').fill('wheel'))
67+
expect(await page.locator('#post_color').fill('green'))
68+
await page.getByRole('button', { name: 'Post' }).click()
69+
await page.waitForTimeout(1000)
70+
expect(await page.locator('#span_name_4')).toHaveText('wheel')
71+
expect(await page.locator('#span_color_4')).toHaveText('green')
72+
})
73+
74+
test('Delete an item', async () => {
75+
expect(await page.locator('#span_name_1').isVisible()).toBe(true)
76+
expect(await page.locator('#delete_id').fill('1'))
77+
await page.getByRole('button', { name: 'Delete' }).click()
78+
await page.waitForTimeout(1000)
79+
expect(await page.locator('#span_name_1').isVisible()).toBe(false)
80+
})

‎tests/unit/actions/create.spec.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ describe('create', function () {
88
let jsonapiModule
99

1010
beforeEach(function () {
11-
[ api ] = makeApi()
11+
;[api] = makeApi()
1212
jsonapiModule = createJsonapiModule(api)
1313
})
1414

‎tests/unit/actions/delete.spec.js

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { beforeEach, describe, expect, test } from 'vitest'
22
import sinonChai from 'sinon-chai'
3-
import sinon from 'sinon'
43
import chai from 'chai'
54
chai.use(sinonChai)
65

@@ -15,7 +14,7 @@ describe('delete', function () {
1514
let jsonWidget1, normWidget1, jsonapiModule, stubContext
1615

1716
beforeEach(function () {
18-
[ api, mockApi ] = makeApi()
17+
;[api, mockApi] = makeApi()
1918
jsonWidget1 = createJsonWidget1()
2019
normWidget1 = createNormWidget1()
2120

‎tests/unit/actions/deleteRelated.spec.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ describe('deleteRelated', function () {
1111
let normWidget1, jsonWidget1, jsonapiModule, stubContext
1212

1313
beforeEach(function () {
14-
[ api, mockApi ] = makeApi()
14+
;[api, mockApi] = makeApi()
1515
normWidget1 = createNormWidget1()
1616
jsonWidget1 = createJsonWidget1()
1717

‎tests/unit/actions/fetch.spec.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ describe('fetch', function () {
88
let jsonapiModule
99

1010
beforeEach(function () {
11-
[ api ] = makeApi()
11+
;[api] = makeApi()
1212
jsonapiModule = createJsonapiModule(api)
1313
})
1414

‎tests/unit/actions/get.spec.js

+2-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { beforeEach, describe, expect, test } from 'vitest'
22
import sinonChai from 'sinon-chai'
3-
import sinon from 'sinon'
43
import chai from 'chai'
54
chai.use(sinonChai)
65

@@ -37,7 +36,7 @@ describe('get', function () {
3736

3837
beforeEach(function () {
3938
// Mock up a fake axios-like api instance
40-
[ api, mockApi ] = makeApi()
39+
;[api, mockApi] = makeApi()
4140
jsonMachine1 = createJsonMachine1()
4241
normMachine1 = createNormMachine1()
4342
jsonWidget1 = createJsonWidget1()
@@ -232,4 +231,4 @@ describe('get', function () {
232231
expect(error.response.status).to.equal(500)
233232
}
234233
})
235-
})
234+
})

0 commit comments

Comments
 (0)