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">
|
||||
import logo from './assets/svelte.png'
|
||||
import Counter from './lib/Counter.svelte'
|
||||
</script>
|
||||
|
||||
<main>
|
||||
<img src={logo} alt="Svelte Logo" />
|
||||
<h1>Hello Typescript!</h1>
|
||||
|
||||
<Counter suffix={'42'}/>
|
||||
|
||||
<p>
|
||||
Visit <a href="https://svelte.dev">svelte.dev</a> to learn how to build Svelte
|
||||
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