From 6d1a7f33153b5ce7be1982098b1364829cbac4ca Mon Sep 17 00:00:00 2001
From: sand4rt <info@mesander.com>
Date: Tue, 23 Aug 2022 20:34:20 +0200
Subject: [PATCH] test(ct): svelte (#16761)

---
 .../components/ct-svelte/playwright/index.ts  | 10 +++
 tests/components/ct-svelte/src/App.spec.ts    | 29 -------
 tests/components/ct-svelte/src/App.svelte     |  2 +-
 .../ct-svelte/src/components/Button.svelte    |  7 ++
 .../ct-svelte/src/components/MultiRoot.svelte |  2 +
 tests/components/ct-svelte/src/main.js        |  2 +-
 tests/components/ct-svelte/src/tests.spec.ts  | 76 +++++++++++++++++++
 7 files changed, 97 insertions(+), 31 deletions(-)
 delete mode 100644 tests/components/ct-svelte/src/App.spec.ts
 create mode 100644 tests/components/ct-svelte/src/components/Button.svelte
 create mode 100644 tests/components/ct-svelte/src/components/MultiRoot.svelte
 create mode 100644 tests/components/ct-svelte/src/tests.spec.ts

diff --git a/tests/components/ct-svelte/playwright/index.ts b/tests/components/ct-svelte/playwright/index.ts
index e69de29bb2..d3a5d6623b 100644
--- a/tests/components/ct-svelte/playwright/index.ts
+++ b/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`);
+});
diff --git a/tests/components/ct-svelte/src/App.spec.ts b/tests/components/ct-svelte/src/App.spec.ts
deleted file mode 100644
index 68223ddc06..0000000000
--- a/tests/components/ct-svelte/src/App.spec.ts
+++ /dev/null
@@ -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!');
-})
diff --git a/tests/components/ct-svelte/src/App.svelte b/tests/components/ct-svelte/src/App.svelte
index 84cd1b59c9..9d6aec93d6 100644
--- a/tests/components/ct-svelte/src/App.svelte
+++ b/tests/components/ct-svelte/src/App.svelte
@@ -27,4 +27,4 @@
       max-width: none;
     }
   }
-</style>
\ No newline at end of file
+</style>
diff --git a/tests/components/ct-svelte/src/components/Button.svelte b/tests/components/ct-svelte/src/components/Button.svelte
new file mode 100644
index 0000000000..8c46efd1f2
--- /dev/null
+++ b/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>
diff --git a/tests/components/ct-svelte/src/components/MultiRoot.svelte b/tests/components/ct-svelte/src/components/MultiRoot.svelte
new file mode 100644
index 0000000000..87996d0ce0
--- /dev/null
+++ b/tests/components/ct-svelte/src/components/MultiRoot.svelte
@@ -0,0 +1,2 @@
+<div>root 1</div>
+<div>root 2</div>
diff --git a/tests/components/ct-svelte/src/main.js b/tests/components/ct-svelte/src/main.js
index 8f6710a978..8e1efe955c 100644
--- a/tests/components/ct-svelte/src/main.js
+++ b/tests/components/ct-svelte/src/main.js
@@ -7,4 +7,4 @@ const app = new App({
   }
 });
 
-export default app;
\ No newline at end of file
+export default app;
diff --git a/tests/components/ct-svelte/src/tests.spec.ts b/tests/components/ct-svelte/src/tests.spec.ts
new file mode 100644
index 0000000000..c41abb50a4
--- /dev/null
+++ b/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')
+})