mirror of
https://github.com/microsoft/playwright.git
synced 2025-06-26 21:40:17 +00:00
test(ct): svelte vite (#16766)
This commit is contained in:
sand4rt
GitHub
parent
1cedd805ed
commit
d5c9774293
@ -1,14 +1,11 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import logo from './assets/svelte.png'
|
import logo from './assets/svelte.png'
|
||||||
import Counter from './lib/Counter.svelte'
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
<img src={logo} alt="Svelte Logo" />
|
<img src={logo} alt="Svelte Logo" />
|
||||||
<h1>Hello Typescript!</h1>
|
<h1>Hello Typescript!</h1>
|
||||||
|
|
||||||
<Counter suffix={'42'}/>
|
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
Visit <a href="https://svelte.dev">svelte.dev</a> to learn how to build Svelte
|
Visit <a href="https://svelte.dev">svelte.dev</a> to learn how to build Svelte
|
||||||
apps.
|
apps.
|
||||||
|
|||||||
@ -0,0 +1,7 @@
|
|||||||
|
<script>
|
||||||
|
import { createEventDispatcher } from "svelte";
|
||||||
|
export let title;
|
||||||
|
const dispatch = createEventDispatcher();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<button on:click={() => dispatch('submit', 'hello')}>{title}</button>
|
||||||
@ -0,0 +1,2 @@
|
|||||||
|
<div>root 1</div>
|
||||||
|
<div>root 2</div>
|
||||||
@ -1,47 +0,0 @@
|
|||||||
<article class="contact-card">
|
|
||||||
<h2>
|
|
||||||
<slot name="name">
|
|
||||||
<span class="missing">Unknown name</span>
|
|
||||||
</slot>
|
|
||||||
</h2>
|
|
||||||
|
|
||||||
<div class="address">
|
|
||||||
<slot name="address">
|
|
||||||
<span class="missing">Unknown address</span>
|
|
||||||
</slot>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="email">
|
|
||||||
<slot name="email">
|
|
||||||
<span class="missing">Unknown email</span>
|
|
||||||
</slot>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.contact-card {
|
|
||||||
width: 300px;
|
|
||||||
border: 1px solid #aaa;
|
|
||||||
border-radius: 2px;
|
|
||||||
box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
|
|
||||||
padding: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
padding: 0 0 0.2em 0;
|
|
||||||
margin: 0 0 1em 0;
|
|
||||||
border-bottom: 1px solid #ff3e00
|
|
||||||
}
|
|
||||||
|
|
||||||
.address, .email {
|
|
||||||
padding: 0 0 0 1.5em;
|
|
||||||
background: 0 50% no-repeat;
|
|
||||||
background-size: 1em 1em;
|
|
||||||
margin: 0 0 0.5em 0;
|
|
||||||
line-height: 1.2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.missing {
|
|
||||||
color: #999;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,60 +0,0 @@
|
|||||||
/**
|
|
||||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
|
||||||
*
|
|
||||||
* 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 { test, expect } from '@playwright/experimental-ct-svelte';
|
|
||||||
import Counter from './Counter.svelte';
|
|
||||||
|
|
||||||
test.use({ viewport: { width: 500, height: 500 } });
|
|
||||||
|
|
||||||
test('should work', async ({ mount }) => {
|
|
||||||
const values = [];
|
|
||||||
const component = await mount(Counter, {
|
|
||||||
props: {
|
|
||||||
suffix: 'my suffix',
|
|
||||||
},
|
|
||||||
on: {
|
|
||||||
changed: value => values.push(value)
|
|
||||||
}
|
|
||||||
});
|
|
||||||
await expect(component).toContainText('my suffix');
|
|
||||||
await component.click();
|
|
||||||
expect(values).toEqual([{ count: 1 }]);
|
|
||||||
});
|
|
||||||
|
|
||||||
test('should configure app', async ({ page, mount }) => {
|
|
||||||
const messages: string[] = [];
|
|
||||||
page.on('console', m => messages.push(m.text()));
|
|
||||||
await mount(Counter, {
|
|
||||||
props: {
|
|
||||||
units: 's',
|
|
||||||
},
|
|
||||||
hooksConfig: {
|
|
||||||
route: 'A'
|
|
||||||
}
|
|
||||||
});
|
|
||||||
expect(messages).toEqual(['Before mount: {\"route\":\"A\"}', 'After mount']);
|
|
||||||
});
|
|
||||||
|
|
||||||
test('should unmount', async ({ page, mount }) => {
|
|
||||||
const component = await mount(Counter, {
|
|
||||||
props: {
|
|
||||||
suffix: 'my suffix',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
await expect(page.locator('#root')).toContainText('my suffix')
|
|
||||||
await component.unmount();
|
|
||||||
await expect(page.locator('#root')).not.toContainText('my suffix');
|
|
||||||
});
|
|
||||||
@ -1,38 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
import { createEventDispatcher } from 'svelte';
|
|
||||||
export let suffix: string;
|
|
||||||
let count: number = 0;
|
|
||||||
const dispatch = createEventDispatcher();
|
|
||||||
const increment = () => {
|
|
||||||
++count;
|
|
||||||
dispatch('changed', { count });
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<button on:click={increment}>
|
|
||||||
Clicks: {count} {suffix}
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
button {
|
|
||||||
font-family: inherit;
|
|
||||||
font-size: inherit;
|
|
||||||
padding: 1em 2em;
|
|
||||||
color: #ff3e00;
|
|
||||||
background-color: rgba(255, 62, 0, 0.1);
|
|
||||||
border-radius: 2em;
|
|
||||||
border: 2px solid rgba(255, 62, 0, 0);
|
|
||||||
outline: none;
|
|
||||||
width: 200px;
|
|
||||||
font-variant-numeric: tabular-nums;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
button:focus {
|
|
||||||
border: 2px solid #ff3e00;
|
|
||||||
}
|
|
||||||
|
|
||||||
button:active {
|
|
||||||
background-color: rgba(255, 62, 0, 0.2);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
76
tests/components/ct-svelte-vite/src/tests.spec.ts
Normal file
76
tests/components/ct-svelte-vite/src/tests.spec.ts
Normal file
@ -0,0 +1,76 @@
|
|||||||
|
/**
|
||||||
|
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||||
|
*
|
||||||
|
* 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 { test, expect } from '@playwright/experimental-ct-svelte';
|
||||||
|
import Button from './components/Button.svelte';
|
||||||
|
import MultiRoot from './components/MultiRoot.svelte';
|
||||||
|
|
||||||
|
test.use({ viewport: { width: 500, height: 500 } });
|
||||||
|
|
||||||
|
test('props should work', async ({ mount }) => {
|
||||||
|
const component = await mount(Button, {
|
||||||
|
props: {
|
||||||
|
title: 'Submit'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
await expect(component).toContainText('Submit')
|
||||||
|
})
|
||||||
|
|
||||||
|
test('event should work', async ({ mount }) => {
|
||||||
|
const messages = []
|
||||||
|
const component = await mount(Button, {
|
||||||
|
props: {
|
||||||
|
title: 'Submit'
|
||||||
|
},
|
||||||
|
on: {
|
||||||
|
submit: data => messages.push(data)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
await component.click()
|
||||||
|
expect(messages).toEqual(['hello'])
|
||||||
|
})
|
||||||
|
|
||||||
|
test('should run hooks', async ({ page, mount }) => {
|
||||||
|
const messages = []
|
||||||
|
page.on('console', m => messages.push(m.text()))
|
||||||
|
await mount(Button, {
|
||||||
|
props: {
|
||||||
|
title: 'Submit'
|
||||||
|
},
|
||||||
|
hooksConfig: { route: 'A' }
|
||||||
|
})
|
||||||
|
expect(messages).toEqual(['Before mount: {\"route\":\"A\"}', 'After mount']);
|
||||||
|
})
|
||||||
|
|
||||||
|
test('should 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 should work', 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')
|
||||||
|
})
|
||||||
@ -1,10 +0,0 @@
|
|||||||
import register from '@playwright/experimental-ct-svelte/register';
|
|
||||||
import App from './App.svelte';
|
|
||||||
import ContactCard from './lib/ContactCard.svelte';
|
|
||||||
import Counter from './lib/Counter.svelte';
|
|
||||||
|
|
||||||
register({
|
|
||||||
App,
|
|
||||||
Counter,
|
|
||||||
ContactCard
|
|
||||||
});
|
|
||||||
Loading…
x
Reference in New Issue
Block a user