add test

examples/vue-pinia/.test.ts

@@ -0,0 +1,34 @@
+import { test, expect, run, fetchHtml, page, getServerUrl, autoRetry } from '@brillout/test-e2e'
+
+runTest()
+
+const counter1 = 'button#counter-1'
+const counter2 = 'button#counter-2'
+
+function runTest() {
+  run('pnpm run dev')
+
+  test('initial state', async () => {
+    const url = '/'
+    const html = await fetchHtml(url)
+    expect(html).toContain('<button type="button" id="counter-1">Counter 1</button>')
+    expect(html).toContain('<button type="button" id="counter-2">Counter 1</button>')
+    await page.goto(getServerUrl() + url)
+    expect(await page.textContent(counter1)).toBe('Counter 1')
+    expect(await page.textContent(counter2)).toBe('Counter 1')
+  })
+
+  test('synced state', async () => {
+    // autoRetry() for awaiting client-side code loading & executing
+    await autoRetry(
+      async () => {
+        expect(await page.textContent(counter1)).toBe('Counter 1')
+        await page.click(counter1)
+        expect(await page.textContent(counter1)).toContain('Counter 2')
+      },
+      { timeout: 5 * 1000 },
+    )
+    expect(await page.textContent(counter1)).toBe('Counter 2')
+    expect(await page.textContent(counter2)).toBe('Counter 2')
+  })
+}

examples/vue-pinia/pages/index/+Page.vue

@@ -6,9 +6,9 @@
     <li>Interactive.</li>
   </ul>
   <h2>Counters synced via shared store</h2>
-  <Counter />
+  <Counter id="counter-1" />
   <hr />
-  <Counter />
+  <Counter id="counter-2"/>
 </template>
 
 <script lang="ts" setup>