test(ct): svelte vite (#16766)

tests/components/ct-svelte-vite/src/App.svelte

@@ -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.

tests/components/ct-svelte-vite/src/components/Button.svelte

@@ -0,0 +1,7 @@
+<script>
+  import { createEventDispatcher } from "svelte";
+  export let title;
+  const dispatch = createEventDispatcher();
+</script>
+ 
+<button on:click={() => dispatch('submit', 'hello')}>{title}</button>

tests/components/ct-svelte-vite/src/components/MultiRoot.svelte

@@ -0,0 +1,2 @@
+<div>root 1</div>
+<div>root 2</div>

tests/components/ct-svelte-vite/src/lib/ContactCard.svelte

@@ -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>

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

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

tests/components/ct-svelte-vite/src/lib/Counter.svelte

@@ -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>

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

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

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

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