test(ct): svelte (#16761)

tests/components/ct-svelte/playwright/index.ts

@@ -0,0 +1,10 @@
+//@ts-check
+import { beforeMount, afterMount } from '@playwright/experimental-ct-svelte/hooks';
+
+beforeMount(async ({ hooksConfig }) => {
+  console.log(`Before mount: ${JSON.stringify(hooksConfig)}`);
+});
+  
+afterMount(async ({}) => {
+  console.log(`After mount`);
+});

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

@@ -1,29 +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';
-
-test.use({ viewport: { width: 500, height: 500 } });
-
-test('should work', async ({ mount }) => {
-  const component = await mount(App, {
-    props: {
-      name: 'world'
-    }
-  });
-  await expect(component).toContainText('Hello world!');
-})

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

@@ -27,4 +27,4 @@
       max-width: none;
     }
   }
-</style>
+</style>

tests/components/ct-svelte/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/src/components/MultiRoot.svelte

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

tests/components/ct-svelte/src/main.js

@@ -7,4 +7,4 @@ const app = new App({
   }
 });
 
-export default app;
+export default app;

tests/components/ct-svelte/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')
+})