mirror of
https://github.com/microsoft/playwright.git
synced 2025-06-26 21:40:17 +00:00
f17d345ac9
Currently, we ues `#root` vs `#root > *` selector for component roots depending on the number of root children. This heuristic detects fragments that render multiple elements inside the root. However, this does not work with empty fragments that do not render anything. The fix is to make the `#root >> control=component` selector that would dynamically detect the root. This supports empty fragments and also allows for dynamic updates of the fragments.
95 lines
2.9 KiB
TypeScript
95 lines
2.9 KiB
TypeScript
/**
|
|
* 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 DefaultSlot from './components/DefaultSlot.svelte';
|
|
import MultiRoot from './components/MultiRoot.svelte';
|
|
import Empty from './components/Empty.svelte';
|
|
|
|
test.use({ viewport: { width: 500, height: 500 } });
|
|
|
|
test('render props', async ({ mount }) => {
|
|
const component = await mount(Button, {
|
|
props: {
|
|
title: 'Submit'
|
|
}
|
|
})
|
|
await expect(component).toContainText('Submit')
|
|
})
|
|
|
|
test('emit an submit event when the button is clicked', 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('render a default slot', async ({ mount }) => {
|
|
const component = await mount(DefaultSlot, {
|
|
slots: {
|
|
default: 'Main Content'
|
|
}
|
|
})
|
|
await expect(component).toContainText('Main Content')
|
|
})
|
|
|
|
test('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('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('get textContent of the empty component', async ({ mount }) => {
|
|
const component = await mount(Empty);
|
|
expect(await component.allTextContents()).toEqual(['']);
|
|
expect(await component.textContent()).toBe('');
|
|
await expect(component).toHaveText('');
|
|
});
|