From c4b9654fa726d5e1bae12b047aeef803f1d9097f Mon Sep 17 00:00:00 2001 From: Sander Date: Wed, 11 Jan 2023 23:07:02 +0100 Subject: [PATCH] test(ct): svelte slice by feature (#20045) follow up for: https://github.com/microsoft/playwright/pull/19657. --- .../ct-svelte-vite/playwright.config.ts | 10 +- .../ct-svelte-vite/src/tests.spec.ts | 150 ----------------- .../ct-svelte-vite/tests/events.spec.ts | 16 ++ .../ct-svelte-vite/tests/render.spec.ts | 19 +++ .../ct-svelte-vite/tests/slots.spec.ts | 25 +++ .../tests/svelte-navigator.spec.ts | 11 ++ .../ct-svelte-vite/tests/unmount.spec.ts | 23 +++ .../ct-svelte-vite/tests/update.spec.ts | 32 ++++ tests/components/ct-svelte-vite/tsconfig.json | 7 +- .../components/ct-svelte/playwright.config.ts | 13 +- tests/components/ct-svelte/src/tests.spec.ts | 156 ------------------ tests/components/ct-svelte/svelte.d.ts | 4 - .../components/ct-svelte/tests/events.spec.ts | 16 ++ .../components/ct-svelte/tests/render.spec.ts | 25 +++ .../components/ct-svelte/tests/slots.spec.ts | 25 +++ .../ct-svelte/tests/svelte-navigator.spec.ts | 11 ++ .../ct-svelte/tests/unmount.spec.ts | 23 +++ .../components/ct-svelte/tests/update.spec.ts | 32 ++++ tests/components/ct-svelte/tsconfig.json | 6 +- 19 files changed, 287 insertions(+), 317 deletions(-) delete mode 100644 tests/components/ct-svelte-vite/src/tests.spec.ts create mode 100644 tests/components/ct-svelte-vite/tests/events.spec.ts create mode 100644 tests/components/ct-svelte-vite/tests/render.spec.ts create mode 100644 tests/components/ct-svelte-vite/tests/slots.spec.ts create mode 100644 tests/components/ct-svelte-vite/tests/svelte-navigator.spec.ts create mode 100644 tests/components/ct-svelte-vite/tests/unmount.spec.ts create mode 100644 tests/components/ct-svelte-vite/tests/update.spec.ts delete mode 100644 tests/components/ct-svelte/src/tests.spec.ts delete mode 100644 tests/components/ct-svelte/svelte.d.ts create mode 100644 tests/components/ct-svelte/tests/events.spec.ts create mode 100644 tests/components/ct-svelte/tests/render.spec.ts create mode 100644 tests/components/ct-svelte/tests/slots.spec.ts create mode 100644 tests/components/ct-svelte/tests/svelte-navigator.spec.ts create mode 100644 tests/components/ct-svelte/tests/unmount.spec.ts create mode 100644 tests/components/ct-svelte/tests/update.spec.ts diff --git a/tests/components/ct-svelte-vite/playwright.config.ts b/tests/components/ct-svelte-vite/playwright.config.ts index ce93c2efee..c52c6e876f 100644 --- a/tests/components/ct-svelte-vite/playwright.config.ts +++ b/tests/components/ct-svelte-vite/playwright.config.ts @@ -16,14 +16,22 @@ import type { PlaywrightTestConfig } from '@playwright/experimental-ct-svelte'; import { devices } from '@playwright/test'; +import { resolve } from 'path'; const config: PlaywrightTestConfig = { - testDir: 'src', + testDir: 'tests', forbidOnly: !!process.env.CI, retries: process.env.CI ? 2 : 0, reporter: 'html', use: { trace: 'on-first-retry', + ctViteConfig: { + resolve: { + alias: { + '@': resolve('./src'), + } + } + } }, projects: [ { diff --git a/tests/components/ct-svelte-vite/src/tests.spec.ts b/tests/components/ct-svelte-vite/src/tests.spec.ts deleted file mode 100644 index cdacefe5c6..0000000000 --- a/tests/components/ct-svelte-vite/src/tests.spec.ts +++ /dev/null @@ -1,150 +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 App from './App.svelte'; -import Button from './components/Button.svelte'; -import Counter from './components/Counter.svelte'; -import DefaultSlot from './components/DefaultSlot.svelte'; -import NamedSlots from './components/NamedSlots.svelte'; -import MultiRoot from './components/MultiRoot.svelte'; -import Empty from './components/Empty.svelte'; -import type { HooksConfig } from '../playwright'; - -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('update props without remounting', async ({ mount }) => { - const component = await mount(Counter, { - props: { count: 9001 } - }) - await expect(component.locator('#props')).toContainText('9001') - - await component.update({ - props: { count: 1337 } - }) - await expect(component).not.toContainText('9001') - await expect(component.locator('#props')).toContainText('1337') - - await expect(component.locator('#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: (data: string) => messages.push(data) - } - }) - await component.click(); - expect(messages).toEqual(['hello']) - - await expect(component.locator('#remount-count')).toContainText('1') -}) - -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('render a default slot', async ({ mount }) => { - const component = await mount(DefaultSlot, { - slots: { - default: 'Main Content' - } - }) - await expect(component).toContainText('Main Content') -}) - -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') -}) - -test('run hooks', async ({ page, mount }) => { - const messages: string[] = [] - 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(''); -}); - -test('navigate to a page by clicking a link', async ({ page, mount }) => { - const component = await mount(App); - 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'); -}); diff --git a/tests/components/ct-svelte-vite/tests/events.spec.ts b/tests/components/ct-svelte-vite/tests/events.spec.ts new file mode 100644 index 0000000000..f2f2593515 --- /dev/null +++ b/tests/components/ct-svelte-vite/tests/events.spec.ts @@ -0,0 +1,16 @@ +import { test, expect } from '@playwright/experimental-ct-svelte'; +import Button from '@/components/Button.svelte'; + +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']); +}); diff --git a/tests/components/ct-svelte-vite/tests/render.spec.ts b/tests/components/ct-svelte-vite/tests/render.spec.ts new file mode 100644 index 0000000000..76992694e1 --- /dev/null +++ b/tests/components/ct-svelte-vite/tests/render.spec.ts @@ -0,0 +1,19 @@ +import { test, expect } from '@playwright/experimental-ct-svelte'; +import Button from '@/components/Button.svelte'; +import Empty from '@/components/Empty.svelte'; + +test('render props', async ({ mount }) => { + const component = await mount(Button, { + props: { + title: 'Submit', + }, + }); + await expect(component).toContainText('Submit'); +}); + +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(''); +}); diff --git a/tests/components/ct-svelte-vite/tests/slots.spec.ts b/tests/components/ct-svelte-vite/tests/slots.spec.ts new file mode 100644 index 0000000000..4d6823abe7 --- /dev/null +++ b/tests/components/ct-svelte-vite/tests/slots.spec.ts @@ -0,0 +1,25 @@ +import { test, expect } from '@playwright/experimental-ct-svelte'; +import DefaultSlot from '@/components/DefaultSlot.svelte'; +import NamedSlots from '@/components/NamedSlots.svelte'; + +test('render a default slot', async ({ mount }) => { + const component = await mount(DefaultSlot, { + slots: { + default: 'Main Content', + }, + }); + await expect(component).toContainText('Main Content'); +}); + +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'); +}); diff --git a/tests/components/ct-svelte-vite/tests/svelte-navigator.spec.ts b/tests/components/ct-svelte-vite/tests/svelte-navigator.spec.ts new file mode 100644 index 0000000000..127620b3c9 --- /dev/null +++ b/tests/components/ct-svelte-vite/tests/svelte-navigator.spec.ts @@ -0,0 +1,11 @@ +import { test, expect } from '@playwright/experimental-ct-svelte'; +import App from '@/App.svelte'; + +test('navigate to a page by clicking a link', async ({ page, mount }) => { + const component = await mount(App); + 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'); +}); diff --git a/tests/components/ct-svelte-vite/tests/unmount.spec.ts b/tests/components/ct-svelte-vite/tests/unmount.spec.ts new file mode 100644 index 0000000000..bf0898804f --- /dev/null +++ b/tests/components/ct-svelte-vite/tests/unmount.spec.ts @@ -0,0 +1,23 @@ +import { test, expect } from '@playwright/experimental-ct-svelte'; +import Button from '@/components/Button.svelte'; +import MultiRoot from '@/components/MultiRoot.svelte'; + +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'); +}); diff --git a/tests/components/ct-svelte-vite/tests/update.spec.ts b/tests/components/ct-svelte-vite/tests/update.spec.ts new file mode 100644 index 0000000000..c7e7c54081 --- /dev/null +++ b/tests/components/ct-svelte-vite/tests/update.spec.ts @@ -0,0 +1,32 @@ +import { test, expect } from '@playwright/experimental-ct-svelte'; +import Counter from '@/components/Counter.svelte'; + +test('update props without remounting', async ({ mount }) => { + const component = await mount(Counter, { + props: { count: 9001 }, + }); + await expect(component.locator('#props')).toContainText('9001'); + + await component.update({ + props: { count: 1337 }, + }); + await expect(component).not.toContainText('9001'); + await expect(component.locator('#props')).toContainText('1337'); + + await expect(component.locator('#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: (data: string) => messages.push(data), + }, + }); + await component.click(); + expect(messages).toEqual(['hello']); + + await expect(component.locator('#remount-count')).toContainText('1'); +}); diff --git a/tests/components/ct-svelte-vite/tsconfig.json b/tests/components/ct-svelte-vite/tsconfig.json index 898993ae64..635d5559ea 100644 --- a/tests/components/ct-svelte-vite/tsconfig.json +++ b/tests/components/ct-svelte-vite/tsconfig.json @@ -15,8 +15,11 @@ "allowJs": true, "checkJs": true, "skipLibCheck": true, - "strict": true + "strict": true, + "paths": { + "@/*": ["./src/*"] + } }, - "include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte", "src/**/*.spec.*/*"], + "include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte", "src/**/*.spec.*/*", "tests/**/*.ts"], "references": [{ "path": "./tsconfig.node.json" }] } diff --git a/tests/components/ct-svelte/playwright.config.ts b/tests/components/ct-svelte/playwright.config.ts index ce93c2efee..7a731b0fbd 100644 --- a/tests/components/ct-svelte/playwright.config.ts +++ b/tests/components/ct-svelte/playwright.config.ts @@ -14,16 +14,23 @@ * limitations under the License. */ -import type { PlaywrightTestConfig } from '@playwright/experimental-ct-svelte'; -import { devices } from '@playwright/test'; +import { type PlaywrightTestConfig, devices } from '@playwright/experimental-ct-svelte'; +import { resolve } from 'path'; const config: PlaywrightTestConfig = { - testDir: 'src', + testDir: 'tests', forbidOnly: !!process.env.CI, retries: process.env.CI ? 2 : 0, reporter: 'html', use: { trace: 'on-first-retry', + ctViteConfig: { + resolve: { + alias: { + '@': resolve(__dirname, './src'), + } + } + } }, projects: [ { diff --git a/tests/components/ct-svelte/src/tests.spec.ts b/tests/components/ct-svelte/src/tests.spec.ts deleted file mode 100644 index c42d557f1e..0000000000 --- a/tests/components/ct-svelte/src/tests.spec.ts +++ /dev/null @@ -1,156 +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 App from './App.svelte'; -import Button from './components/Button.svelte'; -import Counter from './components/Counter.svelte'; -import Component from './components/Component.svelte'; -import DefaultSlot from './components/DefaultSlot.svelte'; -import NamedSlots from './components/NamedSlots.svelte' -import MultiRoot from './components/MultiRoot.svelte'; -import Empty from './components/Empty.svelte'; -import type { HooksConfig } from '../playwright'; - -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('update props without remounting', async ({ mount }) => { - const component = await mount(Counter, { - props: { count: 9001 } - }) - await expect(component.locator('#props')).toContainText('9001') - - await component.update({ - props: { count: 1337 } - }) - await expect(component).not.toContainText('9001') - await expect(component.locator('#props')).toContainText('1337') - - await expect(component.locator('#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: (data: string) => messages.push(data) - } - }) - await component.click(); - expect(messages).toEqual(['hello']) - - await expect(component.locator('#remount-count')).toContainText('1') -}) - -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('render a default slot', async ({ mount }) => { - const component = await mount(DefaultSlot, { - slots: { - default: 'Main Content' - } - }) - await expect(component).toContainText('Main Content') -}) - -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') -}) - -test('render a component without options', async ({ mount }) => { - const component = await mount(Component); - await expect(component).toContainText('test'); -}) - -test('run hooks', async ({ page, mount }) => { - const messages: string[] = [] - 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(''); -}); - -test('navigate to a page by clicking a link', async ({ page, mount }) => { - const component = await mount(App); - 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'); -}); diff --git a/tests/components/ct-svelte/svelte.d.ts b/tests/components/ct-svelte/svelte.d.ts deleted file mode 100644 index 0fdb59facc..0000000000 --- a/tests/components/ct-svelte/svelte.d.ts +++ /dev/null @@ -1,4 +0,0 @@ -declare module '*.svelte' { - const value: any; // Add better type definitions here if desired. - export default value; -} diff --git a/tests/components/ct-svelte/tests/events.spec.ts b/tests/components/ct-svelte/tests/events.spec.ts new file mode 100644 index 0000000000..f2f2593515 --- /dev/null +++ b/tests/components/ct-svelte/tests/events.spec.ts @@ -0,0 +1,16 @@ +import { test, expect } from '@playwright/experimental-ct-svelte'; +import Button from '@/components/Button.svelte'; + +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']); +}); diff --git a/tests/components/ct-svelte/tests/render.spec.ts b/tests/components/ct-svelte/tests/render.spec.ts new file mode 100644 index 0000000000..3c0ada7a61 --- /dev/null +++ b/tests/components/ct-svelte/tests/render.spec.ts @@ -0,0 +1,25 @@ +import { test, expect } from '@playwright/experimental-ct-svelte'; +import Button from '@/components/Button.svelte'; +import Component from '@/components/Component.svelte'; +import Empty from '@/components/Empty.svelte'; + +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 component', async ({ mount }) => { + const component = await mount(Empty); + expect(await component.allTextContents()).toEqual(['']); + expect(await component.textContent()).toBe(''); + await expect(component).toHaveText(''); +}); diff --git a/tests/components/ct-svelte/tests/slots.spec.ts b/tests/components/ct-svelte/tests/slots.spec.ts new file mode 100644 index 0000000000..4d6823abe7 --- /dev/null +++ b/tests/components/ct-svelte/tests/slots.spec.ts @@ -0,0 +1,25 @@ +import { test, expect } from '@playwright/experimental-ct-svelte'; +import DefaultSlot from '@/components/DefaultSlot.svelte'; +import NamedSlots from '@/components/NamedSlots.svelte'; + +test('render a default slot', async ({ mount }) => { + const component = await mount(DefaultSlot, { + slots: { + default: 'Main Content', + }, + }); + await expect(component).toContainText('Main Content'); +}); + +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'); +}); diff --git a/tests/components/ct-svelte/tests/svelte-navigator.spec.ts b/tests/components/ct-svelte/tests/svelte-navigator.spec.ts new file mode 100644 index 0000000000..127620b3c9 --- /dev/null +++ b/tests/components/ct-svelte/tests/svelte-navigator.spec.ts @@ -0,0 +1,11 @@ +import { test, expect } from '@playwright/experimental-ct-svelte'; +import App from '@/App.svelte'; + +test('navigate to a page by clicking a link', async ({ page, mount }) => { + const component = await mount(App); + 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'); +}); diff --git a/tests/components/ct-svelte/tests/unmount.spec.ts b/tests/components/ct-svelte/tests/unmount.spec.ts new file mode 100644 index 0000000000..9be4d9e7e1 --- /dev/null +++ b/tests/components/ct-svelte/tests/unmount.spec.ts @@ -0,0 +1,23 @@ +import { test, expect } from '@playwright/experimental-ct-svelte'; +import Button from '@/components/Button.svelte'; +import MultiRoot from '@/components/MultiRoot.svelte'; + +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 ({ page, mount }) => { + 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'); +}); diff --git a/tests/components/ct-svelte/tests/update.spec.ts b/tests/components/ct-svelte/tests/update.spec.ts new file mode 100644 index 0000000000..c7e7c54081 --- /dev/null +++ b/tests/components/ct-svelte/tests/update.spec.ts @@ -0,0 +1,32 @@ +import { test, expect } from '@playwright/experimental-ct-svelte'; +import Counter from '@/components/Counter.svelte'; + +test('update props without remounting', async ({ mount }) => { + const component = await mount(Counter, { + props: { count: 9001 }, + }); + await expect(component.locator('#props')).toContainText('9001'); + + await component.update({ + props: { count: 1337 }, + }); + await expect(component).not.toContainText('9001'); + await expect(component.locator('#props')).toContainText('1337'); + + await expect(component.locator('#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: (data: string) => messages.push(data), + }, + }); + await component.click(); + expect(messages).toEqual(['hello']); + + await expect(component.locator('#remount-count')).toContainText('1'); +}); diff --git a/tests/components/ct-svelte/tsconfig.json b/tests/components/ct-svelte/tsconfig.json index c3b167bbe8..47248ae0a0 100644 --- a/tests/components/ct-svelte/tsconfig.json +++ b/tests/components/ct-svelte/tsconfig.json @@ -6,6 +6,10 @@ "forceConsistentCasingInFileNames": true, "strict": true, "skipLibCheck": true, - "moduleResolution": "node" + "moduleResolution": "node", + "baseUrl": ".", + "paths": { + "@/*": ["./src/*"] + } } }