wip: Add Google auth test, proxy auth emulator, add CI job for Playwr…

…ight, etc

.github/workflows/ci.yml

@@ -100,7 +100,7 @@ jobs:
         run: pnpm install --shamefully-hoist
       - name: Run linter
         run: pnpm lint
-  test-e2e:
+  test-e2e-cypress:
     needs:
       - install-dependencies
     runs-on: ubuntu-latest
@@ -149,6 +149,44 @@ jobs:
         with:
           name: cypress-videos
           path: test/cypress/videos
+  test-e2e-playwright:
+    needs:
+      - install-dependencies
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout the repository
+        uses: actions/checkout@v3
+      - name: Install Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8
+          run_install: false
+      - name: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+      - name: Setup pnpm cache
+        uses: actions/cache@v3
+        with:
+          key: v1-${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          path: |
+            ${{ env.STORE_PATH }}
+            ~/.cache/Cypress
+          restore-keys: v1-${{ runner.os }}-pnpm-store-
+      - name: Install dependencies
+        run: pnpm install --shamefully-hoist
+      - run: pnpm playwright install --with-deps
+      - run: pnpm playwright test ./test/e2e
+      - uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30
   test-unit:
     needs:
       - install-dependencies

app.vue

@@ -1,5 +1,4 @@
 <script lang="ts">
-import { nanoid } from 'nanoid'
 import { loadSettings } from '#root/src/store/plugins/caching/settings'
 
 import 'overlayscrollbars/overlayscrollbars.css'
@@ -37,17 +36,7 @@ export default defineComponent({
       titleTemplate: (title) => `${title} | ${appName}`,
     })
 
-    const pageKey = ref('')
-    const router = useRouter()
-
-    router.afterEach((to) => {
-      if (!to.query.p) {
-        pageKey.value = nanoid()
-      }
-    })
-
     return {
-      pageKey,
       sizes,
     }
   },
@@ -71,7 +60,7 @@ export default defineComponent({
     <VitePwaManifest />
     <AsyncChangeLog v-if="showChangeLog && !flow" />
     <AppLayout>
-      <AppPage :page-key="pageKey" class="bg-opacity-25 flex-grow flex-shrink h-full overflow-x-hidden relative" />
+      <AppPage class="bg-opacity-25 flex-grow flex-shrink h-full overflow-x-hidden relative" />
     </AppLayout>
   </div>
 </template>

components/AuthSocialLinks.vue

@@ -58,15 +58,30 @@ export default defineComponent({
 
 <template>
   <section class="flex flex-col gap-3">
-    <CoreButton v-if="allowGitHub" :layer="1" data-test-auth-social-github @click="clickProvider('github')">
+    <CoreButton
+      v-if="allowGitHub"
+      :layer="1"
+      data-test-auth-social-github
+      data-test-id="sign-in-with-github"
+      @click="clickProvider('github')"
+    >
       <LocalGitHubIcon class="h-5 w-5" />
       <span>Continue with GitHub</span>
     </CoreButton>
-    <CoreButton :layer="1" data-test-auth-social-google @click="clickProvider('google')">
+    <CoreButton
+      :layer="1"
+      data-test-auth-social-google
+      data-test-id="sign-in-with-google"
+      @click="clickProvider('google')"
+    >
       <LocalGoogleIcon class="h-5 w-5" />
       <span>Continue with Google</span>
     </CoreButton>
-    <CoreButton :layer="1" data-test-auth-social-twitter @click="clickProvider('twitter')">
+    <CoreButton
+      :layer="1"
+      data-test-auth-social-twitter
+      @click="clickProvider('twitter')"
+    >
       <LocalTwitterIcon class="h-5 w-5" />
       <span>Continue with Twitter</span>
     </CoreButton>

layouts/minimal.vue

@@ -25,7 +25,7 @@ onMounted(() => {
               <CoreButtonLink v-if="user.id" :layer="0" :to="{ path: '/docs/new' }">
                 App
               </CoreButtonLink>
-              <CoreButtonLink v-else :layer="0" :to="{ path: '/authenticate' }">
+              <CoreButtonLink v-else data-test-id="sign-in" :layer="0" :to="{ path: '/authenticate' }">
                 Sign In
               </CoreButtonLink>
             </div>

nuxt.config.ts

@@ -101,6 +101,17 @@ export default defineNuxtConfig({
         '/settings',
       ],
     },
+    routeRules: {
+      '/emulator/auth/**': {
+        proxy: 'http://127.0.0.1:32775/emulator/auth/**',
+      },
+      '/identitytoolkit.googleapis.com/**': {
+        proxy: 'http://127.0.0.1:32775/identitytoolkit.googleapis.com/**',
+      },
+      '/securetoken.googleapis.com/**': {
+        proxy: 'http://127.0.0.1:32775/securetoken.googleapis.com/**',
+      },
+    },
   },
   postcss: {
     plugins: {

package.json

@@ -32,7 +32,7 @@
     "deepmerge": "^4.3.1",
     "dexie": "^3.2.4",
     "file-saver": "^2.0.5",
-    "firebase": "^9.23.0",
+    "firebase": "^10.8.0",
     "force-graph": "^1.43.4",
     "fuse.js": "^6.6.2",
     "ink-mde": "^0.31.0",
@@ -78,7 +78,7 @@
     "eslint": "^8.56.0",
     "eslint-config-artisan": "^0.2.1",
     "eslint-generate-todo": "^0.2.0",
-    "firebase-tools": "^12.9.1",
+    "firebase-tools": "^13.3.1",
     "happy-dom": "^12.10.3",
     "micromark": "^3.1.0",
     "npm-run-all": "^4.1.5",

playwright.config.ts

@@ -26,8 +26,11 @@ export default defineConfig({
     /* Base URL to use in actions like `await page.goto('/')`. */
     baseURL: process.env.BASE_URL,
 
+    testIdAttribute: 'data-test-id',
+
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on-first-retry',
+    video: 'retain-on-failure',
   },
 
   /* Configure projects for major browsers */