From: Evan You Date: Mon, 2 Dec 2019 23:18:02 +0000 (-0500) Subject: test(e2e): wip e2e test for todomvc X-Git-Tag: v3.0.0-alpha.0~108 X-Git-Url: http://git.ipfire.org/gitweb.cgi?a=commitdiff_plain;h=74fd6635cec1c6caf7c2c85453a41ca4ed976350;p=thirdparty%2Fvuejs%2Fcore.git test(e2e): wip e2e test for todomvc --- diff --git a/package.json b/package.json index 045f1c1742..a36d82e2d6 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,7 @@ "size-compiler": "node scripts/build.js compiler-dom -p -f global", "size": "yarn size-runtime && yarn size-compiler", "lint": "prettier --write --parser typescript \"packages/**/*.ts?(x)\"", - "test": "jest", + "test": "node scripts/build.js vue -f global -d && jest", "test-dts": "node scripts/build.js reactivity runtime-core runtime-dom -t -f esm && tsd" }, "types": "test-dts/index.d.ts", @@ -37,6 +37,7 @@ "@rollup/plugin-json": "^4.0.0", "@rollup/plugin-replace": "^2.2.1", "@types/jest": "^24.0.21", + "@types/puppeteer": "^2.0.0", "brotli": "^1.3.2", "chalk": "^2.4.2", "execa": "^2.0.4", @@ -46,6 +47,7 @@ "lint-staged": "^9.2.3", "minimist": "^1.2.0", "prettier": "~1.14.0", + "puppeteer": "^2.0.0", "rollup": "^1.19.4", "rollup-plugin-terser": "^5.1.1", "rollup-plugin-typescript2": "^0.24.0", diff --git a/packages/vue/examples/__tests__/todomvc.spec.ts b/packages/vue/examples/__tests__/todomvc.spec.ts new file mode 100644 index 0000000000..0864b379df --- /dev/null +++ b/packages/vue/examples/__tests__/todomvc.spec.ts @@ -0,0 +1,79 @@ +import path from 'path' +import puppeteer from 'puppeteer' + +const puppeteerOptions = process.env.CI + ? { args: ['--no-sandbox', '--disable-setuid-sandbox'] } + : {} + +let browser: puppeteer.Browser +let page: puppeteer.Page + +describe('e2e', () => { + beforeEach(async () => { + browser = await puppeteer.launch(puppeteerOptions) + page = await browser.newPage() + }) + + afterEach(async () => { + await browser.close() + }) + + test('todomvc', async () => { + await page.goto( + `file://${path.resolve(__dirname, '../classic/todomvc.html')}` + ) + expect(await isVisible('.main')).toBe(false) + expect(await isVisible('.footer')).toBe(false) + expect(await count('.filters .selected')).toBe(1) + expect(await text('.filters .selected')).toBe('All') + expect(await count('.todo')).toBe(0) + + await createNewItem('test') + expect(await count('.todo')).toBe(1) + expect(await isVisible('.todo .edit')).toBe(false) + expect(await text('.todo label')).toBe('test') + expect(await text('.todo-count strong')).toBe('1') + expect(await isChecked('.todo .toggle')).toBe(false) + expect(await isVisible('.main')).toBe(true) + expect(await isVisible('.footer')).toBe(true) + expect(await isVisible('.clear-completed')).toBe(false) + expect(await value('.new-todo')).toBe('') + + await createNewItem('test2') + expect(await count('.todo')).toBe(2) + expect(await text('.todo:nth-child(2) label')).toBe('test2') + expect(await text('.todo-count strong')).toBe('2') + + // TODO complete the test + // https://github.com/vuejs/vue/blob/dev/test/e2e/specs/todomvc.js + }) +}) + +async function isVisible(selector: string) { + const display = await page.$eval(selector, (node: HTMLElement) => { + return window.getComputedStyle(node).display + }) + return display !== 'none' +} + +async function isChecked(selector: string) { + return await page.$eval(selector, (node: any) => node.checked) +} + +async function count(selector: string) { + return (await page.$$(selector)).length +} + +async function text(selector: string) { + return await page.$eval(selector, node => node.textContent) +} + +async function value(selector: string) { + return await page.$eval(selector, (node: any) => node.value) +} + +async function createNewItem(text: string) { + const el = (await page.$('.new-todo'))! + await el.type(text) + await el.press('Enter') +} diff --git a/packages/vue/examples/classic/todomvc.html b/packages/vue/examples/classic/todomvc.html index 092f6b36cb..9e6501e0a5 100644 --- a/packages/vue/examples/classic/todomvc.html +++ b/packages/vue/examples/classic/todomvc.html @@ -11,7 +11,7 @@ v-model="newTodo" @keyup.enter="addTodo"> -
+
    @@ -34,7 +34,7 @@
-