Improve auth tests

.github/workflows/ci.yml

@@ -5,6 +5,7 @@ on:
     branches:
       - main
 env:
+  BASE_URL: http://127.0.0.1:8888
   FIREBASE_PROJECT_ID: demo-octo
   NODE_OPTIONS: --max-old-space-size=4096
   NUXT_PUBLIC_CDN_URL:
@@ -25,7 +26,7 @@ env:
   NUXT_PUBLIC_FIREBASE_AUTH_DOMAIN: fake
   NUXT_PUBLIC_FIREBASE_DATABASE_URL: fake
   NUXT_PUBLIC_FIREBASE_DISABLED:
-  NUXT_PUBLIC_FIREBASE_EMULATOR_AUTH: http://127.0.0.1:32775
+  NUXT_PUBLIC_FIREBASE_EMULATOR_AUTH: http://127.0.0.1:8888
   NUXT_PUBLIC_FIREBASE_EMULATOR_BYPASS:
   NUXT_PUBLIC_FIREBASE_EMULATOR_FIRESTORE_HOST: 127.0.0.1
   NUXT_PUBLIC_FIREBASE_EMULATOR_FIRESTORE_PORT: 32776
@@ -100,7 +101,9 @@ jobs:
         run: pnpm install --shamefully-hoist
       - name: Run linter
         run: pnpm lint
-  test-e2e:
+  test-e2e-cypress:
+    env:
+      NUXT_PUBLIC_FIREBASE_EMULATOR_AUTH: http://127.0.0.1:32775
     needs:
       - install-dependencies
     runs-on: ubuntu-latest
@@ -149,6 +152,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

.github/workflows/preview.yml

@@ -1,6 +1,5 @@
 name: preview
 on:
-  pull_request:
   workflow_dispatch:
 env:
   NODE_OPTIONS: --max-old-space-size=4096

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'
@@ -15,6 +14,9 @@ export default defineComponent({
     onMounted(() => {
       isMounted.value = true
 
+      // This is used by tests to determine when the app is ready.
+      document.body.dataset.isMounted = 'true'
+
       loadSettings(store)
     })
 
@@ -37,17 +39,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 +63,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/AppPage.vue

@@ -3,6 +3,7 @@ export default defineComponent({
   props: {
     pageKey: {
       type: String,
+      default: 'static',
     },
   },
   setup() {
@@ -16,6 +17,6 @@ export default defineComponent({
 </script>
 
 <template>
-  <NuxtPage v-if="isNuxt" :pageKey="pageKey" />
-  <RouterView v-else :inheritAttrs="true" :key="pageKey" />
+  <NuxtPage v-if="isNuxt" :page-key="pageKey" />
+  <RouterView v-else :key="pageKey" :inherit-attrs="true" />
 </template>

components/AuthSocialLinks.vue

@@ -39,9 +39,9 @@
     const allowGoogle = computed(() => props.providers.includes('google'))
     const allowTwitter = computed(() => props.providers.includes('twitter'))
     const clickProvider = (provider: string) => {
       props.form.confirmed = false
       props.form.confirming = true
       props.form.error = ''
 
       emit('provider', provider)
     }
@@ -58,15 +58,30 @@
 
 <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

@@ -66,6 +66,12 @@ export default defineNuxtConfig({
   devServer: {
     host: '127.0.0.1',
   },
+  devtools: {
+    enabled: true,
+    timeline: {
+      enabled: true,
+    },
+  },
   experimental: {
     appManifest: true,
     payloadExtraction: true,
@@ -101,6 +107,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",

pages/docs/[docId]/index.vue

@@ -22,27 +22,38 @@ export default defineComponent({
     const editor = ref()
     const router = useRouter()
     const store = useStore()
-    const placeholder = new Doc({ text: formatTags(store.state.context.tags, ' ') })
+    const placeholder = ref(new Doc({ text: formatTags(store.state.context.tags, ' ') }))
     const settings = computed(() => store.state.settings.editor)
     const recentDocs = useRecentDocs()
     const docId = computed(() => props.docId || router.currentRoute.value.params.docId as string)
-    const doc = computed(() => store.getters.decrypted.find((d: Doc) => d.id === docId.value) || placeholder)
+    const doc = computed(() => store.getters.decrypted.find((d: Doc) => d.id === docId.value) || placeholder.value)
     const tags = computed(() => doc.value.tags)
     const header = computed(() => doc.value.headers[0])
     const { public: { appTitle } } = useConfig()
 
     const onInput = async (text: string) => {
-      store.commit(EDIT_DOCUMENT, new Doc({ ...doc.value, text }))
+      // Todo: Load a new doc before leaving the route so that Ink does not
+      // send a new input event (or figure out how to prevent it from sending
+      // an input event when data is pushed to the editor from the store).
+      if (text && (!docId.value || docId.value === 'new')) {
+        // When we receive input without an active doc, we should always create
+        // a new doc with a unique id.
+        const newDoc = new Doc({ text })
 
-      if (!docId.value || docId.value === 'new') {
+        store.commit(EDIT_DOCUMENT, newDoc)
+
+        // Now that we no longer use `pageKey`, we don't have to worry about
+        // preserving the editor state.
         await router.replace({
-          path: `/docs/${doc.value.id}`,
-          query: {
-            p: '1',
-          },
+          path: `/docs/${newDoc.id}`,
+          force: true,
         })
 
-        recentDocs.add(docId.value)
+        recentDocs.add(newDoc.id)
+      } else if (docId.value !== 'new') {
+        // Otherwise, when we receive input with an active doc, we should
+        // update the existing doc.
+        store.commit(EDIT_DOCUMENT, new Doc({ ...doc.value, text }))
       }
     }
 
@@ -65,7 +76,6 @@ export default defineComponent({
       editor,
       header,
       onInput,
-      placeholder,
       settings,
       tags,
     }
@@ -75,7 +85,6 @@ export default defineComponent({
 
 <template>
   <Editor
-    :key="doc.id"
     :appearance="appearance"
     :doc="doc"
     :settings="settings"

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 */
@@ -69,9 +72,9 @@ export default defineConfig({
   ],
 
   /* Run your local dev server before starting the tests */
-  // webServer: {
-  //   command: 'npm run start',
-  //   url: 'http://127.0.0.1:3000',
-  //   reuseExistingServer: !process.env.CI,
-  // },
+  webServer: {
+    command: 'pnpm dev:full',
+    url: 'http://127.0.0.1:8888',
+    reuseExistingServer: !process.env.CI,
+  },
 })