test(ct): svelte slice by feature (#20045)

follow up for: https://github.com/microsoft/playwright/pull/19657.

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: [
     {

tests/components/ct-svelte-vite/src/tests.spec.ts

@@ -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<HooksConfig>(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');
-});

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']);
+});

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('');
+});

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');
+});

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');
+});

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');
+});

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');
+});

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" }]
 }

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: [
     {

tests/components/ct-svelte/src/tests.spec.ts

@@ -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<HooksConfig>(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');
-});

tests/components/ct-svelte/svelte.d.ts

@@ -1,4 +0,0 @@
-declare module '*.svelte' {
-  const value: any; // Add better type definitions here if desired.
-  export default value;
-}

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']);
+});

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('');
+});

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');
+});

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');
+});

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');
+});

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');
+});

tests/components/ct-svelte/tsconfig.json

@@ -6,6 +6,10 @@
     "forceConsistentCasingInFileNames": true,
     "strict": true,
     "skipLibCheck": true,
-    "moduleResolution": "node"
+    "moduleResolution": "node",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
   }
 }