참고소스 수정본
This commit is contained in:
LASTA_DEV01\lasta
@@ -0,0 +1 @@
|
||||
**/*
|
||||
23
참고/playwright-main/tests/components/ct-vue-cli/.gitignore
vendored
Normal file
23
참고/playwright-main/tests/components/ct-vue-cli/.gitignore
vendored
Normal file
@@ -0,0 +1,23 @@
|
||||
.DS_Store
|
||||
node_modules
|
||||
/dist
|
||||
*.tsbuildinfo
|
||||
|
||||
# local env files
|
||||
.env.local
|
||||
.env.*.local
|
||||
|
||||
# Log files
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
|
||||
# Editor directories and files
|
||||
.idea
|
||||
.vscode
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
24
참고/playwright-main/tests/components/ct-vue-cli/README.md
Normal file
24
참고/playwright-main/tests/components/ct-vue-cli/README.md
Normal file
@@ -0,0 +1,24 @@
|
||||
# ct-vue-cli
|
||||
|
||||
## Project setup
|
||||
```
|
||||
npm install
|
||||
```
|
||||
|
||||
### Compiles and hot-reloads for development
|
||||
```
|
||||
npm run serve
|
||||
```
|
||||
|
||||
### Compiles and minifies for production
|
||||
```
|
||||
npm run build
|
||||
```
|
||||
|
||||
### Lints and fixes files
|
||||
```
|
||||
npm run lint
|
||||
```
|
||||
|
||||
### Customize configuration
|
||||
See [Configuration Reference](https://cli.vuejs.org/config/).
|
||||
@@ -0,0 +1,5 @@
|
||||
module.exports = {
|
||||
presets: [
|
||||
'@vue/cli-plugin-babel/preset'
|
||||
]
|
||||
}
|
||||
47
참고/playwright-main/tests/components/ct-vue-cli/package.json
Normal file
47
참고/playwright-main/tests/components/ct-vue-cli/package.json
Normal file
@@ -0,0 +1,47 @@
|
||||
{
|
||||
"name": "ct-vue-cli",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build",
|
||||
"lint": "vue-cli-service lint",
|
||||
"typecheck": "tsc --noEmit --project tsconfig.test.json"
|
||||
},
|
||||
"dependencies": {
|
||||
"core-js": "^3.8.3",
|
||||
"vue": "^3.2.36",
|
||||
"vue-router": "^4.5.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.23.2",
|
||||
"@babel/eslint-parser": "^7.22.15",
|
||||
"@vue/cli-plugin-babel": "~5.0.0",
|
||||
"@vue/cli-plugin-eslint": "~5.0.0",
|
||||
"@vue/cli-plugin-router": "~5.0.0",
|
||||
"@vue/cli-service": "~5.0.0",
|
||||
"@vue/tsconfig": "^0.7.0",
|
||||
"eslint": "^7.32.0",
|
||||
"eslint-plugin-vue": "^8.0.3"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"root": true,
|
||||
"env": {
|
||||
"node": true
|
||||
},
|
||||
"extends": [
|
||||
"plugin:vue/vue3-essential",
|
||||
"eslint:recommended"
|
||||
],
|
||||
"parserOptions": {
|
||||
"parser": "@babel/eslint-parser"
|
||||
},
|
||||
"rules": {}
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 2 versions",
|
||||
"not dead",
|
||||
"not ie 11"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
/**
|
||||
* Copyright (c) Microsoft Corporation.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { defineConfig, devices } from '@playwright/experimental-ct-vue';
|
||||
import { resolve } from 'path';
|
||||
|
||||
export default defineConfig({
|
||||
testDir: 'tests',
|
||||
forbidOnly: !!process.env.CI,
|
||||
retries: process.env.CI ? 2 : 0,
|
||||
reporter: process.env.CI ? 'html' : 'line',
|
||||
use: {
|
||||
trace: 'on-first-retry',
|
||||
ctViteConfig: {
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': resolve(__dirname, './src'),
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
projects: [
|
||||
{
|
||||
name: 'chromium',
|
||||
use: { ...devices['Desktop Chrome'] },
|
||||
},
|
||||
{
|
||||
name: 'firefox',
|
||||
use: { ...devices['Desktop Firefox'] },
|
||||
},
|
||||
{
|
||||
name: 'webkit',
|
||||
use: { ...devices['Desktop Safari'] },
|
||||
},
|
||||
],
|
||||
});
|
||||
@@ -0,0 +1,12 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="./index.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,20 @@
|
||||
import { beforeMount, afterMount } from '@playwright/experimental-ct-vue/hooks';
|
||||
import { router } from '../src/router';
|
||||
import Button from '../src/components/Button.vue';
|
||||
import '../src/assets/index.css';
|
||||
|
||||
export type HooksConfig = {
|
||||
route?: string;
|
||||
routing?: boolean;
|
||||
}
|
||||
|
||||
beforeMount<HooksConfig>(async ({ app, hooksConfig }) => {
|
||||
if (hooksConfig?.routing)
|
||||
app.use(router as any);
|
||||
app.component('Button', Button);
|
||||
console.log(`Before mount: ${JSON.stringify(hooksConfig)}, app: ${!!app}`);
|
||||
});
|
||||
|
||||
afterMount<HooksConfig>(async ({ instance }) => {
|
||||
console.log(`After mount el: ${instance.$el.constructor.name}`);
|
||||
});
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
@@ -0,0 +1,17 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,8 @@
|
||||
<template>
|
||||
<header>
|
||||
<img alt="Vue logo" class="logo" src="./assets/logo.png" width="125" height="125" />
|
||||
<router-link to="/">Login</router-link>
|
||||
<router-link to="/dashboard">Dashboard</router-link>
|
||||
</header>
|
||||
<router-view />
|
||||
</template>
|
||||
@@ -0,0 +1,20 @@
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
||||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
||||
sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
||||
monospace;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
color: #e3e3e3;
|
||||
background-color: #1b1b1d;
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
@@ -0,0 +1,14 @@
|
||||
<script lang="ts" setup>
|
||||
import { useAttrs } from 'vue';
|
||||
defineProps<{ title: string }>();
|
||||
const attrs = useAttrs();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button
|
||||
@click="$emit('submit', 'hello')"
|
||||
@dblclick="() => attrs.dbclick('fallthroughEvent')"
|
||||
>
|
||||
{{ title }}
|
||||
</button>
|
||||
</template>
|
||||
@@ -0,0 +1,3 @@
|
||||
<template>
|
||||
<div>test</div>
|
||||
</template>
|
||||
@@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<button @click="$emit('submit', 'hello')">
|
||||
<span data-testid="props">{{ count }}</span>
|
||||
<span data-testid="remount-count">{{ remountCount }}</span>
|
||||
<slot name="main" />
|
||||
<slot />
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
let remountCount = 0
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
defineProps({
|
||||
count: {
|
||||
type: Number,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
remountCount++
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,11 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>Welcome!</h1>
|
||||
<main>
|
||||
<slot />
|
||||
</main>
|
||||
<footer>
|
||||
Thanks for visiting.
|
||||
</footer>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,8 @@
|
||||
<script lang="ts" setup>
|
||||
import { useSlots } from 'vue';
|
||||
const slots = useSlots();
|
||||
Object.assign(window, { slots });
|
||||
</script>
|
||||
<template>
|
||||
</template>
|
||||
|
||||
@@ -0,0 +1,4 @@
|
||||
<template>
|
||||
<div>root 1</div>
|
||||
<div>root 2</div>
|
||||
</template>
|
||||
@@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<div>
|
||||
<header>
|
||||
<slot name="header" />
|
||||
</header>
|
||||
<main>
|
||||
<slot name="main" />
|
||||
</main>
|
||||
<footer>
|
||||
<slot name="footer" />
|
||||
</footer>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,6 @@
|
||||
import { createApp } from 'vue';
|
||||
import { router } from './router';
|
||||
import App from './App.vue';
|
||||
import './assets/index.css';
|
||||
|
||||
createApp(App).use(router).mount('#app');
|
||||
@@ -0,0 +1,3 @@
|
||||
<template>
|
||||
<main>Dashboard</main>
|
||||
</template>
|
||||
@@ -0,0 +1,3 @@
|
||||
<template>
|
||||
<main>Login</main>
|
||||
</template>
|
||||
@@ -0,0 +1,11 @@
|
||||
import DashboardPage from '../pages/DashboardPage.vue';
|
||||
import LoginPage from '../pages/LoginPage.vue';
|
||||
import { createRouter, createWebHistory } from 'vue-router';
|
||||
|
||||
export const router = createRouter({
|
||||
history: createWebHistory('/'),
|
||||
routes: [
|
||||
{ path: '/', component: LoginPage },
|
||||
{ path: '/dashboard', component: DashboardPage },
|
||||
],
|
||||
})
|
||||
4
참고/playwright-main/tests/components/ct-vue-cli/src/vue.d.ts
vendored
Normal file
4
참고/playwright-main/tests/components/ct-vue-cli/src/vue.d.ts
vendored
Normal file
@@ -0,0 +1,4 @@
|
||||
declare module '*.vue' {
|
||||
const value: any;
|
||||
export default value;
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
import { test, expect } from '@playwright/experimental-ct-vue';
|
||||
import Button from '@/components/Button.vue';
|
||||
|
||||
test('emit an submit event when the button is clicked', async ({ mount }) => {
|
||||
const messages: string[] = [];
|
||||
const component = await mount(Button, {
|
||||
props: {
|
||||
title: 'Submit',
|
||||
},
|
||||
on: {
|
||||
submit: (data: string) => messages.push(data),
|
||||
},
|
||||
});
|
||||
await component.click();
|
||||
expect(messages).toEqual(['hello']);
|
||||
});
|
||||
|
||||
test('emit a fallthrough event when the button is double clicked', async ({ mount }) => {
|
||||
const messages: string[] = [];
|
||||
const component = await mount(Button, {
|
||||
props: {
|
||||
title: 'Submit',
|
||||
},
|
||||
on: {
|
||||
dbclick: (message: string) => messages.push(message),
|
||||
},
|
||||
});
|
||||
await component.dblclick();
|
||||
expect(messages).toEqual(['fallthroughEvent']);
|
||||
});
|
||||
@@ -0,0 +1,42 @@
|
||||
import { test, expect } from '@playwright/experimental-ct-vue';
|
||||
import Button from '@/components/Button.vue';
|
||||
import DefaultSlot from '@/components/DefaultSlot.vue';
|
||||
|
||||
test('emit an submit event when the button is clicked', async ({ mount }) => {
|
||||
const messages: string[] = [];
|
||||
const component = await mount(
|
||||
<Button
|
||||
title="Submit"
|
||||
v-on:submit={(data: string) => {
|
||||
messages.push(data);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
await component.click();
|
||||
expect(messages).toEqual(['hello']);
|
||||
});
|
||||
|
||||
test('emit a fallthrough event when the button is double clicked', async ({ mount }) => {
|
||||
const messages: string[] = [];
|
||||
const component = await mount(
|
||||
<Button
|
||||
title="Submit"
|
||||
v-on:dbclick={(message: string) => {
|
||||
messages.push(message)
|
||||
}}
|
||||
/>
|
||||
);
|
||||
await component.dblclick();
|
||||
expect(messages).toEqual(['fallthroughEvent']);
|
||||
});
|
||||
|
||||
test('emit a event when a slot is clicked', async ({ mount }) => {
|
||||
let clickFired = false;
|
||||
const component = await mount(
|
||||
<DefaultSlot>
|
||||
<span v-on:click={() => (clickFired = true)}>Main Content</span>
|
||||
</DefaultSlot>
|
||||
);
|
||||
await component.getByText('Main Content').click();
|
||||
expect(clickFired).toBeTruthy();
|
||||
});
|
||||
@@ -0,0 +1,25 @@
|
||||
import { test, expect } from '@playwright/experimental-ct-vue';
|
||||
import Button from '@/components/Button.vue';
|
||||
import Component from '@/components/Component.vue';
|
||||
import EmptyTemplate from '@/components/EmptyTemplate.vue';
|
||||
|
||||
test('render props', async ({ mount }) => {
|
||||
const component = await mount(Button, {
|
||||
props: {
|
||||
title: 'Submit',
|
||||
},
|
||||
});
|
||||
await expect(component).toContainText('Submit');
|
||||
});
|
||||
|
||||
test('render a component without options', async ({ mount }) => {
|
||||
const component = await mount(Component);
|
||||
await expect(component).toContainText('test');
|
||||
});
|
||||
|
||||
test('get textContent of the empty template', async ({ mount }) => {
|
||||
const component = await mount(EmptyTemplate);
|
||||
expect(await component.allTextContents()).toEqual(['']);
|
||||
expect(await component.textContent()).toBe('');
|
||||
await expect(component).toHaveText('');
|
||||
});
|
||||
@@ -0,0 +1,16 @@
|
||||
import { test, expect } from '@playwright/experimental-ct-vue';
|
||||
import Button from '@/components/Button.vue';
|
||||
import EmptyTemplate from '@/components/EmptyTemplate.vue';
|
||||
|
||||
test('render props', async ({ mount }) => {
|
||||
const component = await mount(<Button title="Submit" />);
|
||||
await expect(component).toContainText('Submit');
|
||||
});
|
||||
|
||||
test('render an empty component', async ({ page, mount }) => {
|
||||
const component = await mount(<EmptyTemplate />);
|
||||
expect(await page.evaluate(() => 'slots' in window && window.slots)).toEqual({});
|
||||
expect(await component.allTextContents()).toEqual(['']);
|
||||
expect(await component.textContent()).toBe('');
|
||||
await expect(component).toHaveText('');
|
||||
});
|
||||
@@ -0,0 +1,47 @@
|
||||
import { test, expect } from '@playwright/experimental-ct-vue';
|
||||
import DefaultSlot from '@/components/DefaultSlot.vue';
|
||||
import NamedSlots from '@/components/NamedSlots.vue';
|
||||
|
||||
test('render a default slot', async ({ mount }) => {
|
||||
const component = await mount(DefaultSlot, {
|
||||
slots: {
|
||||
default: '<strong>Main Content</strong>',
|
||||
},
|
||||
});
|
||||
await expect(component.getByRole('strong')).toContainText('Main Content');
|
||||
});
|
||||
|
||||
test('render a component as slot', async ({ mount }) => {
|
||||
const component = await mount(DefaultSlot, {
|
||||
slots: {
|
||||
default: '<Button title="Submit" />', // component is registered globally in /playwright/index.ts
|
||||
},
|
||||
});
|
||||
await expect(component).toContainText('Submit');
|
||||
});
|
||||
|
||||
test('render a component with multiple slots', async ({ mount }) => {
|
||||
const component = await mount(DefaultSlot, {
|
||||
slots: {
|
||||
default: [
|
||||
'<div data-testid="one">One</div>',
|
||||
'<div data-testid="two">Two</div>',
|
||||
],
|
||||
},
|
||||
});
|
||||
await expect(component.getByTestId('one')).toContainText('One');
|
||||
await expect(component.getByTestId('two')).toContainText('Two');
|
||||
});
|
||||
|
||||
test('render a component with a named slot', async ({ mount }) => {
|
||||
const component = await mount(NamedSlots, {
|
||||
slots: {
|
||||
header: 'Header',
|
||||
main: 'Main Content',
|
||||
footer: 'Footer',
|
||||
},
|
||||
});
|
||||
await expect(component).toContainText('Header');
|
||||
await expect(component).toContainText('Main Content');
|
||||
await expect(component).toContainText('Footer');
|
||||
});
|
||||
@@ -0,0 +1,52 @@
|
||||
import { test, expect } from '@playwright/experimental-ct-vue';
|
||||
import Button from '@/components/Button.vue';
|
||||
import DefaultSlot from '@/components/DefaultSlot.vue';
|
||||
import NamedSlots from '@/components/NamedSlots.vue';
|
||||
|
||||
test('render a default slot', async ({ mount }) => {
|
||||
const component = await mount(
|
||||
<DefaultSlot>
|
||||
<strong>Main Content</strong>
|
||||
</DefaultSlot>
|
||||
);
|
||||
await expect(component.getByRole('strong')).toContainText('Main Content');
|
||||
});
|
||||
|
||||
test('render a component as slot', async ({ mount }) => {
|
||||
const component = await mount(
|
||||
<DefaultSlot>
|
||||
<Button title="Submit" />
|
||||
</DefaultSlot>
|
||||
);
|
||||
await expect(component).toContainText('Submit');
|
||||
});
|
||||
|
||||
test('render a component with multiple slots', async ({ mount }) => {
|
||||
const component = await mount(
|
||||
<DefaultSlot>
|
||||
<div data-testid="one">One</div>
|
||||
<div data-testid="two">Two</div>
|
||||
</DefaultSlot>
|
||||
);
|
||||
await expect(component.getByTestId('one')).toContainText('One');
|
||||
await expect(component.getByTestId('two')).toContainText('Two');
|
||||
});
|
||||
|
||||
test('render a component with a named slot', async ({ mount }) => {
|
||||
const component = await mount(
|
||||
<NamedSlots>
|
||||
<template v-slot:header>Header</template>
|
||||
<template v-slot:main>Main Content</template>
|
||||
<template v-slot:footer>Footer</template>
|
||||
</NamedSlots>
|
||||
);
|
||||
await expect(component).toContainText('Header');
|
||||
await expect(component).toContainText('Main Content');
|
||||
await expect(component).toContainText('Footer');
|
||||
});
|
||||
|
||||
test('render array as child', async ({ mount }) => {
|
||||
const component = await mount(<DefaultSlot>{[<h4>{[4]}</h4>,[[<p>[2,3]</p>]]]}</DefaultSlot>);
|
||||
await expect(component.getByRole('heading', { level: 4 })).toHaveText('4');
|
||||
await expect(component.getByRole('paragraph')).toHaveText('[2,3]');
|
||||
});
|
||||
@@ -0,0 +1,34 @@
|
||||
import { test, expect } from '@playwright/experimental-ct-vue';
|
||||
import Button from '@/components/Button.vue';
|
||||
import MultiRoot from '@/components/MultiRoot.vue';
|
||||
|
||||
test('unmount', async ({ page, mount }) => {
|
||||
const component = await mount(Button, {
|
||||
props: {
|
||||
title: 'Submit',
|
||||
},
|
||||
});
|
||||
await expect(page.locator('#root')).toContainText('Submit');
|
||||
await component.unmount();
|
||||
await expect(page.locator('#root')).not.toContainText('Submit');
|
||||
});
|
||||
|
||||
test('unmount a multi root component', async ({ mount, page }) => {
|
||||
const component = await mount(MultiRoot);
|
||||
await expect(page.locator('#root')).toContainText('root 1');
|
||||
await expect(page.locator('#root')).toContainText('root 2');
|
||||
await component.unmount();
|
||||
await expect(page.locator('#root')).not.toContainText('root 1');
|
||||
await expect(page.locator('#root')).not.toContainText('root 2');
|
||||
});
|
||||
|
||||
test('unmount twice throws an error', async ({ mount }) => {
|
||||
const component = await mount(Button, {
|
||||
props: {
|
||||
title: 'Submit',
|
||||
},
|
||||
});
|
||||
await component.unmount();
|
||||
await expect(component.unmount()).rejects.toThrowError('Component was not mounted');
|
||||
});
|
||||
|
||||
@@ -0,0 +1,25 @@
|
||||
import { test, expect } from '@playwright/experimental-ct-vue';
|
||||
import Button from '@/components/Button.vue';
|
||||
import MultiRoot from '@/components/MultiRoot.vue';
|
||||
|
||||
test('unmount', async ({ page, mount }) => {
|
||||
const component = await mount(<Button title="Submit" />);
|
||||
await expect(page.locator('#root')).toContainText('Submit');
|
||||
await component.unmount();
|
||||
await expect(page.locator('#root')).not.toContainText('Submit');
|
||||
});
|
||||
|
||||
test('unmount a multi root component', async ({ mount, page }) => {
|
||||
const component = await mount(<MultiRoot />);
|
||||
await expect(page.locator('#root')).toContainText('root 1');
|
||||
await expect(page.locator('#root')).toContainText('root 2');
|
||||
await component.unmount();
|
||||
await expect(page.locator('#root')).not.toContainText('root 1');
|
||||
await expect(page.locator('#root')).not.toContainText('root 2');
|
||||
});
|
||||
|
||||
test('unmount twice throws an error', async ({ mount }) => {
|
||||
const component = await mount(<Button title="Submit" />);
|
||||
await component.unmount();
|
||||
await expect(component.unmount()).rejects.toThrowError('Component was not mounted');
|
||||
});
|
||||
@@ -0,0 +1,47 @@
|
||||
import { test, expect } from '@playwright/experimental-ct-vue';
|
||||
import Counter from '@/components/Counter.vue';
|
||||
|
||||
test('update props without remounting', async ({ mount }) => {
|
||||
const component = await mount(Counter, {
|
||||
props: { count: 9001 },
|
||||
});
|
||||
await expect(component.getByTestId('props')).toContainText('9001');
|
||||
|
||||
await component.update({
|
||||
props: { count: 1337 },
|
||||
});
|
||||
await expect(component).not.toContainText('9001');
|
||||
await expect(component.getByTestId('props')).toContainText('1337');
|
||||
|
||||
await expect(component.getByTestId('remount-count')).toContainText('1');
|
||||
});
|
||||
|
||||
test('update event listeners without remounting', async ({ mount }) => {
|
||||
const component = await mount(Counter);
|
||||
|
||||
const messages: string[] = [];
|
||||
await component.update({
|
||||
on: {
|
||||
submit: (count: string) => messages.push(count),
|
||||
},
|
||||
});
|
||||
await component.click();
|
||||
expect(messages).toEqual(['hello']);
|
||||
|
||||
await expect(component.getByTestId('remount-count')).toContainText('1');
|
||||
});
|
||||
|
||||
test('update slots without remounting', async ({ mount }) => {
|
||||
const component = await mount(Counter, {
|
||||
slots: { default: 'Default Slot' },
|
||||
});
|
||||
await expect(component).toContainText('Default Slot');
|
||||
|
||||
await component.update({
|
||||
slots: { main: 'Test Slot' },
|
||||
});
|
||||
await expect(component).not.toContainText('Default Slot');
|
||||
await expect(component).toContainText('Test Slot');
|
||||
|
||||
await expect(component.getByTestId('remount-count')).toContainText('1');
|
||||
});
|
||||
@@ -0,0 +1,53 @@
|
||||
import { test, expect } from '@playwright/experimental-ct-vue';
|
||||
import Counter from '@/components/Counter.vue';
|
||||
|
||||
test('update props without remounting', async ({ mount }) => {
|
||||
const component = await mount(<Counter count={9001} />);
|
||||
await expect(component.getByTestId('props')).toContainText('9001');
|
||||
|
||||
await component.update(<Counter count={1337} />);
|
||||
await expect(component).not.toContainText('9001');
|
||||
await expect(component.getByTestId('props')).toContainText('1337');
|
||||
|
||||
await expect(component.getByTestId('remount-count')).toContainText('1');
|
||||
});
|
||||
|
||||
test('update event listeners without remounting', async ({ mount }) => {
|
||||
const component = await mount(<Counter />);
|
||||
|
||||
const messages: string[] = [];
|
||||
await component.update(
|
||||
<Counter
|
||||
v-on:submit={(count: string) => {
|
||||
messages.push(count);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
await component.click();
|
||||
expect(messages).toEqual(['hello']);
|
||||
|
||||
await expect(component.getByTestId('remount-count')).toContainText('1');
|
||||
});
|
||||
|
||||
test('update slots without remounting', async ({ mount }) => {
|
||||
const component = await mount(<Counter>Default Slot</Counter>);
|
||||
await expect(component).toContainText('Default Slot');
|
||||
|
||||
await component.update(
|
||||
<Counter>
|
||||
<template v-slot:main>Test Slot</template>
|
||||
</Counter>
|
||||
);
|
||||
await expect(component).not.toContainText('Default Slot');
|
||||
await expect(component).toContainText('Test Slot');
|
||||
|
||||
await expect(component.getByTestId('remount-count')).toContainText('1');
|
||||
});
|
||||
|
||||
test('throw error when updating a native html element', async ({ mount }) => {
|
||||
const component = await mount(<div id="1337"></div>);
|
||||
|
||||
await expect(async () => {
|
||||
await component.update(<div id="9001"></div>);
|
||||
}).rejects.toThrowError('Updating a native HTML element is not supported');
|
||||
});
|
||||
@@ -0,0 +1,14 @@
|
||||
import { test, expect } from '@playwright/experimental-ct-vue';
|
||||
import App from '@/App.vue';
|
||||
import type { HooksConfig } from '../../playwright';
|
||||
|
||||
test('navigate to a page by clicking a link', async ({ page, mount }) => {
|
||||
const component = await mount<HooksConfig>(App, {
|
||||
hooksConfig: { routing: true },
|
||||
});
|
||||
await expect(component.getByRole('main')).toHaveText('Login');
|
||||
await expect(page).toHaveURL('/');
|
||||
await component.getByRole('link', { name: 'Dashboard' }).click();
|
||||
await expect(component.getByRole('main')).toHaveText('Dashboard');
|
||||
await expect(page).toHaveURL('/dashboard');
|
||||
});
|
||||
@@ -0,0 +1,14 @@
|
||||
import { test, expect } from '@playwright/experimental-ct-vue';
|
||||
import App from '@/App.vue';
|
||||
import type { HooksConfig } from '../../playwright';
|
||||
|
||||
test('navigate to a page by clicking a link', async ({ page, mount }) => {
|
||||
const component = await mount<HooksConfig>(<App />, {
|
||||
hooksConfig: { routing: true },
|
||||
});
|
||||
await expect(component.getByRole('main')).toHaveText('Login');
|
||||
await expect(page).toHaveURL('/');
|
||||
await component.getByRole('link', { name: 'Dashboard' }).click();
|
||||
await expect(component.getByRole('main')).toHaveText('Dashboard');
|
||||
await expect(page).toHaveURL('/dashboard');
|
||||
});
|
||||
@@ -0,0 +1,13 @@
|
||||
{
|
||||
"extends": "@vue/tsconfig/tsconfig.dom.json",
|
||||
"include": ["src/**/*", "src/**/*.vue"],
|
||||
"exclude": ["src/**/*.spec.*/*"],
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["./src/*"],
|
||||
"*": ["_"],
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"extends": "@vue/tsconfig/tsconfig.dom.json",
|
||||
"include": ["playwright.config.*"],
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"types": ["node"]
|
||||
}
|
||||
}
|
||||
14
참고/playwright-main/tests/components/ct-vue-cli/tsconfig.json
Normal file
14
참고/playwright-main/tests/components/ct-vue-cli/tsconfig.json
Normal file
@@ -0,0 +1,14 @@
|
||||
{
|
||||
"files": [],
|
||||
"references": [
|
||||
{
|
||||
"path": "./tsconfig.config.json"
|
||||
},
|
||||
{
|
||||
"path": "./tsconfig.app.json"
|
||||
},
|
||||
{
|
||||
"path": "./tsconfig.test.json"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
{
|
||||
"extends": "./tsconfig.app.json",
|
||||
"include": ["playwright", "src/**/*", "tests/**/*"],
|
||||
"compilerOptions": {
|
||||
"allowJs": true,
|
||||
"composite": true,
|
||||
"lib": [],
|
||||
"jsx": "react-jsx",
|
||||
"types": ["node"],
|
||||
"noUncheckedSideEffectImports": false,
|
||||
"ignoreDeprecations": "6.0"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
const { defineConfig } = require('@vue/cli-service')
|
||||
module.exports = defineConfig({
|
||||
transpileDependencies: true,
|
||||
})
|
||||
4
참고/playwright-main/tests/components/ct-vue-cli/vue.d.ts
vendored
Normal file
4
참고/playwright-main/tests/components/ct-vue-cli/vue.d.ts
vendored
Normal file
@@ -0,0 +1,4 @@
|
||||
declare module '*.vue' {
|
||||
const value: any;
|
||||
export default value;
|
||||
}
|
||||
Reference in New Issue
Block a user