fix tests. msw has issues on firefox with vitest isolation.

package.json

@@ -68,8 +68,9 @@
     "@vitejs/devtools": "^0.3.1",
     "@vitejs/plugin-vue": "^6.0.7",
     "@vitejs/plugin-vue-jsx": "^5.1.5",
-    "@vitest/browser": "^3.0.7",
+    "@vitest/browser-playwright": "^4.1.7",
-    "@vitest/ui": "^3.0.7",
+    "@vitest/browser": "^4.1.7",
+    "@vitest/ui": "^4.1.7",
     "@vue/babel-helper-vue-jsx-merge-props": "1.4.0",
     "@vue/babel-plugin-jsx": "1.5.0",
     "@vue/compiler-sfc": "3.5.22",
@@ -95,7 +96,7 @@
     "http-proxy-middleware": "3.0.5",
     "iso-639-1": "3.1.5",
     "lodash": "4.17.21",
-    "msw": "2.10.5",
+    "msw": "2.14.6",
     "nightwatch": "3.12.2",
     "oxc": "^1.0.1",
     "playwright": "1.57.0",
@@ -118,7 +119,7 @@
     "vite": "^8.0.0",
     "vite-plugin-eslint2": "^5.1.0",
     "vite-plugin-stylelint": "^6.1.0",
-    "vitest": "^3.0.7",
+    "vitest": "^4.1.7",
     "vue-eslint-parser": "10.2.0"
   },
   "type": "module",

src/api/oauth.js

@@ -5,7 +5,12 @@ import { paramsString, promisedRequest } from './helpers.js'
 import { StatusCodeError } from 'src/services/errors/errors.js'
 
 const REDIRECT_URI = `${window.location.origin}/oauth-callback`
-const MASTODON_APP_VERIFY_URL = '/api/v1/apps/verify_credentials'
+
+export const MASTODON_APP_VERIFY_URL = '/api/v1/apps/verify_credentials'
+export const MASTODON_APP_URL = '/api/v1/apps'
+export const OAUTH_TOKEN_URL = '/oauth/token'
+export const OAUTH_MFA_CHALLENGE_URL = '/oauth/mfa/challenge'
+export const OAUTH_REVOKE_URL = '/oauth/revoke'
 
 export const createApp = () => {
   const formData = new window.FormData()
@@ -16,8 +21,8 @@ export const createApp = () => {
   formData.append('scopes', 'read write follow push admin')
 
   return promisedRequest({
-    url: '/api/v1/apps',
     method: 'POST',
+    url: MASTODON_APP_URL,
     formData,
   }).then(({ data, ...rest }) => ({
     ...rest,
@@ -61,7 +66,7 @@ export const getTokenWithCredentials = ({
   formData.append('password', password)
 
   return promisedRequest({
-    url: '/oauth/token',
+    url: OAUTH_TOKEN_URL,
     method: 'POST',
     formData,
   })
@@ -77,7 +82,7 @@ export const getToken = ({ clientId, clientSecret, code }) => {
   formData.append('redirect_uri', `${window.location.origin}/oauth-callback`)
 
   return promisedRequest({
-    url: '/oauth/token',
+    url: OAUTH_TOKEN_URL,
     method: 'POST',
     formData,
   })
@@ -92,7 +97,7 @@ export const getClientToken = ({ clientId, clientSecret }) => {
   formData.append('redirect_uri', `${window.location.origin}/oauth-callback`)
 
   return promisedRequest({
-    url: '/oauth/token',
+    url: OAUTH_TOKEN_URL,
     method: 'POST',
     formData,
   })
@@ -108,7 +113,7 @@ export const verifyOTPCode = ({ app, mfaToken, code }) => {
   formData.append('challenge_type', 'totp')
 
   return promisedRequest({
-    url: '/oauth/mfa/challenge',
+    url: OAUTH_MFA_CHALLENGE_URL,
     method: 'POST',
     formData,
   })
@@ -124,7 +129,7 @@ export const verifyRecoveryCode = ({ app, mfaToken, code }) => {
   formData.append('challenge_type', 'recovery')
 
   return promisedRequest({
-    url: '/oauth/mfa/challenge',
+    url: OAUTH_MFA_CHALLENGE_URL,
     method: 'POST',
     formData,
   })
@@ -138,7 +143,7 @@ export const revokeToken = ({ app, token }) => {
   formData.append('token', token)
 
   return promisedRequest({
-    url: '/oauth/revoke',
+    url: OAUTH_REVOKE_URL,
     method: 'POST',
     formData,
   })

src/api/user.js

@@ -44,8 +44,8 @@ const MASTODON_DENY_USER_URL = (id) => `/api/v1/follow_requests/${id}/reject`
 const MASTODON_USER_RELATIONSHIPS_URL = ({ id, withSuspended }) =>
   `/api/v1/accounts/relationships/${paramsString({ id, withSuspended })}`
 const MASTODON_USER_IN_LISTS = (id) => `/api/v1/accounts/${id}/lists`
-const MASTODON_LIST_URL = (id) => `/api/v1/lists/${id}`
+export const MASTODON_LIST_URL = (id) => `/api/v1/lists/${id}`
-const MASTODON_LIST_ACCOUNTS_URL = (id) => `/api/v1/lists/${id}/accounts`
+export const MASTODON_LIST_ACCOUNTS_URL = (id) => `/api/v1/lists/${id}/accounts`
 const MASTODON_USER_BLOCKS_URL = ({
   maxId,
   sinceId,
@@ -80,7 +80,6 @@ const MASTODON_UNPIN_OWN_STATUS = (id) => `/api/v1/statuses/${id}/unpin`
 const MASTODON_MUTE_CONVERSATION = (id) => `/api/v1/statuses/${id}/mute`
 const MASTODON_UNMUTE_CONVERSATION = (id) => `/api/v1/statuses/${id}/unmute`
 const MASTODON_DOMAIN_BLOCKS_URL = '/api/v1/domain_blocks'
-const MASTODON_LISTS_URL = '/api/v1/lists'
 const MASTODON_ANNOUNCEMENTS_URL = '/api/v1/announcements'
 const MASTODON_ANNOUNCEMENTS_DISMISS_URL = (id) =>
   `/api/v1/announcements/${id}/dismiss`
@@ -824,13 +823,13 @@ export const revokeOAuthToken = ({ id, credentials }) =>
 // #Lists
 export const fetchLists = ({ credentials }) =>
   promisedRequest({
-    url: MASTODON_LISTS_URL,
+    url: MASTODON_LIST_URL(),
     credentials,
   })
 
 export const createList = ({ title, credentials }) =>
   promisedRequest({
-    url: MASTODON_LISTS_URL,
+    url: MASTODON_LIST_URL(),
     credentials,
     method: 'POST',
     payload: { title },
@@ -843,6 +842,7 @@ export const getList = ({ listId, credentials }) =>
   })
 
 export const updateList = ({ listId, title, credentials }) =>
+  console.log('PUT', MASTODON_LIST_URL(listId)) ||
   promisedRequest({
     url: MASTODON_LIST_URL(listId),
 

src/stores/lists.js

@@ -50,8 +50,8 @@ export const useListsStore = defineStore('lists', {
     setLists(value) {
       this.allLists = value
     },
-    createList({ title }) {
+    async createList({ title }) {
-      return createList({
+      return await createList({
         title,
         credentials: useOAuthStore().token,
       }).then((list) => {
@@ -59,14 +59,14 @@ export const useListsStore = defineStore('lists', {
         return list
       })
     },
-    fetchList({ listId }) {
+    async fetchList({ listId }) {
-      return getList({
+      return await getList({
         listId,
         credentials: useOAuthStore().token,
       }).then((list) => this.setList({ listId: list.id, title: list.title }))
     },
-    fetchListAccounts({ listId }) {
+    async fetchListAccounts({ listId }) {
-      return getListAccounts({
+      return await getListAccounts({
         listId,
         credentials: useOAuthStore().token,
       }).then((accountIds) => {
@@ -76,8 +76,8 @@ export const useListsStore = defineStore('lists', {
         this.allListsObject[listId].accountIds = accountIds
       })
     },
-    setList({ listId, title }) {
+    async setList({ listId, title }) {
-      updateList({
+      await updateList({
         listId,
         title,
         credentials: useOAuthStore().token,
@@ -95,7 +95,7 @@ export const useListsStore = defineStore('lists', {
         entry.title = title
       }
     },
-    setListAccounts({ listId, accountIds }) {
+    async setListAccounts({ listId, accountIds }) {
       const saved = this.allListsObject[listId]?.accountIds || []
       const added = accountIds.filter((id) => !saved.includes(id))
       const removed = saved.filter((id) => !accountIds.includes(id))
@@ -103,23 +103,29 @@ export const useListsStore = defineStore('lists', {
         this.allListsObject[listId] = { accountIds: [] }
       }
       this.allListsObject[listId].accountIds = accountIds
+      const promises = []
       if (added.length > 0) {
-        addAccountsToList({
+        promises.push(
-          listId,
+          addAccountsToList({
-          accountIds: added,
+            listId,
-          credentials: useOAuthStore().token,
+            accountIds: added,
-        })
+            credentials: useOAuthStore().token,
+          }),
+        )
       }
       if (removed.length > 0) {
-        removeAccountsFromList({
+        promises.push(
-          listId,
+          removeAccountsFromList({
-          accountIds: removed,
+            listId,
-          credentials: useOAuthStore().token,
+            accountIds: removed,
-        })
+            credentials: useOAuthStore().token,
+          }),
+        )
       }
+      await Promise.all(promises)
     },
-    addListAccount({ listId, accountId }) {
+    async addListAccount({ listId, accountId }) {
-      return addAccountsToList({
+      return await addAccountsToList({
         listId,
         accountIds: [accountId],
         credentials: useOAuthStore().token,
@@ -131,8 +137,8 @@ export const useListsStore = defineStore('lists', {
         return result
       })
     },
-    removeListAccount({ listId, accountId }) {
+    async removeListAccount({ listId, accountId }) {
-      return removeAccountsFromList({
+      return await removeAccountsFromList({
         listId,
         accountIds: [accountId],
         credentials: useOAuthStore().token,
@@ -148,8 +154,8 @@ export const useListsStore = defineStore('lists', {
         return result
       })
     },
-    deleteList({ listId }) {
+    async deleteList({ listId }) {
-      deleteList({
+      await deleteList({
         listId,
         credentials: useOAuthStore().token,
       })

src/stores/sync_config.js

@@ -233,9 +233,18 @@ export const _mergeJournal = (...journals) => {
       Object.hasOwn(entry, 'timestamp'),
   )
   const grouped = groupBy(allJournals, 'path')
-  const trimmedGrouped = Object.entries(grouped).map(([path, journal]) => {
+  const trimmedGrouped = Object.entries(grouped).map(([path, rawJournal]) => {
-    // side effect
+    const journal = rawJournal
-    journal.sort((a, b) => (a.timestamp > b.timestamp ? 1 : -1))
+      .map((data, index) => ({ data, index }))
+      .toSorted(({ data: a, index: ai }, { data: b, index: bi }) => {
+        if (a.timestamp === b.timestamp) {
+          return ai - bi
+        } else {
+          return a.timestamp > b.timestamp ? 1 : -1
+        }
+      })
+      .map((x) => x.data)
+    console.log(journal)
 
     if (path.startsWith('collections')) {
       const lastRemoveIndex = findLastIndex(
@@ -270,9 +279,16 @@ export const _mergeJournal = (...journals) => {
     }
   })
 
-  const flat = flatten(trimmedGrouped).sort((a, b) =>
+  const flat = flatten(trimmedGrouped)
-    a.timestamp > b.timestamp ? 1 : -1,
+    .map((data, index) => ({ data, index }))
-  )
+    .toSorted(({ data: a, index: ai }, { data: b, index: bi }) => {
+      if (a.timestamp === b.timestamp) {
+        return ai - bi
+      } else {
+        return a.timestamp > b.timestamp ? 1 : -1
+      }
+    })
+    .map((x) => x.data)
   return take(flat, 500)
 }
 

test/fixtures/mock_api.js

@@ -1,73 +1,19 @@
-import { HttpResponse, http } from 'msw'
-import { setupWorker } from 'msw/browser'
 import { test as testBase } from 'vitest'
 
-export const testServer = ''
+import { worker } from './worker.js'
 
-// https://mswjs.io/docs/recipes/vitest-browser-mode
+export const test = testBase.extend({
-export const injectMswToTest = (defaultHandlers) => {
+  worker: [
-  const worker = setupWorker(...defaultHandlers)
+    // biome-ignore lint: required by vitest
+    async ({}, use) => {
+      await worker.start()
 
-  return testBase.extend({
+      await use(worker)
-    worker: [
-      // biome-ignore lint: required by vitest
-      async ({}, use) => {
-        await worker.start()
 
-        await use(worker)
+      worker.resetHandlers()
-
+    },
-        worker.resetHandlers()
+    {
-        worker.stop()
+      auto: true,
-      },
+    },
-      {
+  ],
-        auto: true,
+})
-      },
-    ],
-  })
-}
-
-export const authApis = [
-  http.post('/api/v1/apps', () => {
-    return HttpResponse.json({
-      client_id: 'test-id',
-      client_secret: 'test-secret',
-    })
-  }),
-  http.get('/api/v1/apps/verify_credentials', ({ request }) => {
-    const authHeader = request.headers.get('Authorization')
-    if (
-      authHeader === 'Bearer test-app-token' ||
-      authHeader === 'Bearer also-good-app-token'
-    ) {
-      return HttpResponse.json({})
-    } else {
-      // Pleroma 2.9.0 gives the following respoonse upon error
-      return HttpResponse.json(
-        { error: { detail: 'Internal server error' } },
-        {
-          status: 400,
-        },
-      )
-    }
-  }),
-  http.post('/oauth/token', async ({ request }) => {
-    const data = await request.formData()
-
-    if (
-      data.get('client_id') === 'test-id' &&
-      data.get('client_secret') === 'test-secret' &&
-      data.get('grant_type') === 'client_credentials' &&
-      data.has('redirect_uri')
-    ) {
-      return HttpResponse.json({ access_token: 'test-app-token' })
-    } else {
-      // Pleroma 2.9.0 gives the following respoonse upon error
-      return HttpResponse.json(
-        { error: 'Invalid credentials' },
-        {
-          status: 400,
-        },
-      )
-    }
-  }),
-]

test/fixtures/worker.js

@@ -0,0 +1,8 @@
+import { setupWorker } from 'msw/browser'
+
+export const worker = setupWorker()
+
+console.log('=============== TEST ===============')
+console.log(window.__test__)
+console.log('=============== TEST ===============')
+window.__test__ = window.__test__ || 'TEST'

test/unit/specs/stores/lists.spec.js

@@ -2,26 +2,22 @@ import { createTestingPinia } from '@pinia/testing'
 import { HttpResponse, http } from 'msw'
 import { setActivePinia } from 'pinia'
 
-import { injectMswToTest } from '/test/fixtures/mock_api.js'
+import { test as mockedIt } from '/test/fixtures/mock_api.js'
 
 import { useListsStore } from 'src/stores/lists.js'
 
-setActivePinia(createTestingPinia({ stubActions: false }))
+import { MASTODON_LIST_ACCOUNTS_URL, MASTODON_LIST_URL } from 'src/api/user.js'
-const store = useListsStore()
-const it = injectMswToTest([
-  http.get('/api/v1/lists/:id', () => HttpResponse.json({ ok: true })),
-  http.put('/api/v1/lists/:id', () => HttpResponse.json({ ok: true })),
-  http.post('/api/v1/lists/:id', () => HttpResponse.json({ ok: true })),
-  http.delete('/api/v1/lists/:id', () => HttpResponse.json({ ok: true })),
-  http.get('/api/v1/lists/:id/accounts', () => HttpResponse.json({ ok: true })),
-  http.post('/api/v1/lists/:id/accounts', () => HttpResponse.json({ ok: true })),
-  http.delete('/api/v1/lists/:id/accounts', () => HttpResponse.json({ ok: true })),
-])
 
 describe('The lists store', () => {
+  let store
+
+  beforeEach(() => {
+    createTestingPinia({ stubActions: false })
+    store = useListsStore()
+  })
+
   describe('actions', () => {
-    it('updates array of all lists', () => {
+    mockedIt('updates array of all lists', () => {
-      store.$reset()
       const list = { id: '1', title: 'testList' }
 
       store.setLists([list])
@@ -29,46 +25,74 @@ describe('The lists store', () => {
       expect(store.allLists).to.eql([list])
     })
 
-    it('adds a new list with a title, updating the title for existing lists', () => {
+    mockedIt(
-      store.$reset()
+      'adds a new list with a title, updating the title for existing lists',
-      const list = { id: '1', title: 'testList' }
+      async ({ worker }) => {
-      const modList = { id: '1', title: 'anotherTestTitle' }
+        const list = { id: '1', title: 'testList' }
+        const modList = { id: '1', title: 'anotherTestTitle' }
 
-      store.setList({ listId: list.id, title: list.title })
+        worker.use(
-      expect(store.allListsObject[list.id]).to.eql({
+          http.put(MASTODON_LIST_URL(':id'), () =>
-        title: list.title,
+            HttpResponse.json({ ok: true }),
-        accountIds: [],
+          ),
-      })
+        )
-      expect(store.allLists).to.have.length(1)
+        console.log('1 =========', worker.listHandlers())
-      expect(store.allLists[0]).to.eql(list)
 
-      store.setList({ listId: modList.id, title: modList.title })
+        await store.setList({ listId: list.id, title: list.title })
-      expect(store.allListsObject[modList.id]).to.eql({
+        expect(store.allListsObject[list.id]).to.eql({
-        title: modList.title,
+          title: list.title,
-        accountIds: [],
+          accountIds: [],
-      })
+        })
-      expect(store.allLists).to.have.length(1)
+        expect(store.allLists).to.have.length(1)
-      expect(store.allLists[0]).to.eql(modList)
+        expect(store.allLists[0]).to.eql(list)
-    })
 
-    it('adds a new list with an array of IDs, updating the IDs for existing lists', () => {
+        console.log('2 =========', worker.listHandlers())
-      store.$reset()
-      const list = { id: '1', accountIds: ['1', '2', '3'] }
-      const modList = { id: '1', accountIds: ['3', '4', '5'] }
 
-      store.setListAccounts({ listId: list.id, accountIds: list.accountIds })
+        await store.setList({ listId: modList.id, title: modList.title })
-      expect(store.allListsObject[list.id].accountIds).to.eql(list.accountIds)
+        expect(store.allListsObject[modList.id]).to.eql({
+          title: modList.title,
+          accountIds: [],
+        })
+        expect(store.allLists).to.have.length(1)
+        expect(store.allLists[0]).to.eql(modList)
 
-      store.setListAccounts({
+        console.log('3 =========', worker.listHandlers())
-        listId: modList.id,
+      },
-        accountIds: modList.accountIds,
+    )
-      })
-      expect(store.allListsObject[modList.id].accountIds).to.eql(
-        modList.accountIds,
-      )
-    })
 
-    it('deletes a list', () => {
+    mockedIt(
+      'adds a new list with an array of IDs, updating the IDs for existing lists',
+      async ({ worker }) => {
+        const list = { id: '1', accountIds: ['1', '2', '3'] }
+        const modList = { id: '1', accountIds: ['3', '4', '5'] }
+
+        worker.use(
+          http.post(MASTODON_LIST_ACCOUNTS_URL(':id'), () =>
+            HttpResponse.json({ ok: true }),
+          ),
+          http.delete(MASTODON_LIST_ACCOUNTS_URL(':id'), () =>
+            HttpResponse.json({ ok: true }),
+          ),
+        )
+
+        await store.setListAccounts({
+          listId: list.id,
+          accountIds: list.accountIds,
+        })
+        expect(store.allListsObject[list.id].accountIds).to.eql(list.accountIds)
+
+        await store.setListAccounts({
+          listId: modList.id,
+          accountIds: modList.accountIds,
+        })
+
+        expect(store.allListsObject[modList.id].accountIds).to.eql(
+          modList.accountIds,
+        )
+      },
+    )
+
+    mockedIt('deletes a list', async ({ worker }) => {
       store.$patch({
         allLists: [{ id: '1', title: 'testList' }],
         allListsObject: {
@@ -77,14 +101,20 @@ describe('The lists store', () => {
       })
       const listId = '1'
 
-      store.deleteList({ listId })
+      worker.use(
+        http.delete(MASTODON_LIST_URL(':id'), () =>
+          HttpResponse.json({ ok: true }),
+        ),
+      )
+
+      await store.deleteList({ listId })
       expect(store.allLists).to.have.length(0)
       expect(store.allListsObject).to.eql({})
     })
   })
 
   describe('getters', () => {
-    it('returns list title', () => {
+    mockedIt('returns list title', () => {
       store.$patch({
         allLists: [{ id: '1', title: 'testList' }],
         allListsObject: {
@@ -96,7 +126,7 @@ describe('The lists store', () => {
       expect(store.findListTitle(id)).to.eql('testList')
     })
 
-    it('returns list accounts', () => {
+    mockedIt('returns list accounts', () => {
       store.$patch({
         allLists: [{ id: '1', title: 'testList' }],
         allListsObject: {

test/unit/specs/stores/oauth.spec.js

@@ -1,12 +1,64 @@
 import { createTestingPinia } from '@pinia/testing'
 import { HttpResponse, http } from 'msw'
-import { createPinia, setActivePinia } from 'pinia'
+import { setActivePinia } from 'pinia'
 
-import { authApis, injectMswToTest } from '/test/fixtures/mock_api.js'
+import { test as it } from '/test/fixtures/mock_api.js'
 
 import { useOAuthStore } from 'src/stores/oauth.js'
 
-const test = injectMswToTest(authApis)
+import {
+  MASTODON_APP_URL,
+  MASTODON_APP_VERIFY_URL,
+  OAUTH_MFA_CHALLENGE_URL,
+  OAUTH_REVOKE_URL,
+  OAUTH_TOKEN_URL,
+} from 'src/api/oauth.js'
+
+const authApis = () => [
+  http.post(MASTODON_APP_URL, () => {
+    return HttpResponse.json({
+      client_id: 'test-id',
+      client_secret: 'test-secret',
+    })
+  }),
+  http.get(MASTODON_APP_VERIFY_URL, ({ request }) => {
+    const authHeader = request.headers.get('Authorization')
+    if (
+      authHeader === 'Bearer test-app-token' ||
+      authHeader === 'Bearer also-good-app-token'
+    ) {
+      return HttpResponse.json({})
+    } else {
+      // Pleroma 2.9.0 gives the following respoonse upon error
+      return HttpResponse.json(
+        { error: { detail: 'Internal server error' } },
+        {
+          status: 400,
+        },
+      )
+    }
+  }),
+  http.post(OAUTH_TOKEN_URL, async ({ request }) => {
+    const data = await request.formData()
+
+    if (
+      data.get('client_id') === 'test-id' &&
+      data.get('client_secret') === 'test-secret' &&
+      data.get('grant_type') === 'client_credentials' &&
+      data.has('redirect_uri')
+    ) {
+      return HttpResponse.json({ access_token: 'test-app-token' })
+    } else {
+      // Pleroma 2.9.0 gives the following respoonse upon error
+      return HttpResponse.json(
+        { error: 'Invalid credentials' },
+        {
+          status: 400,
+        },
+      )
+    }
+  }),
+]
 
 describe('oauth store', () => {
   beforeEach(() => {
@@ -14,8 +66,11 @@ describe('oauth store', () => {
   })
 
   describe('createApp', () => {
-    test('it should use create an app and record client id and secret', async () => {
+    it('should use create an app and record client id and secret', async ({
+      worker,
+    }) => {
       const store = useOAuthStore()
+      worker.use(...authApis())
       const app = await store.createApp()
       expect(store.clientId).to.eql('test-id')
       expect(store.clientSecret).to.eql('test-secret')
@@ -23,9 +78,9 @@ describe('oauth store', () => {
       expect(app.clientSecret).to.eql('test-secret')
     })
 
-    test('it should throw and not update if failed', async ({ worker }) => {
+    it('should throw and not update if failed', async ({ worker }) => {
       worker.use(
-        http.post('/api/v1/apps', () => {
+        http.post(MASTODON_APP_URL, () => {
           return HttpResponse.text('Throttled', { status: 429 })
         }),
       )
@@ -39,7 +94,8 @@ describe('oauth store', () => {
   })
 
   describe('ensureApp', () => {
-    test('it should create an app if it does not exist', async () => {
+    it('should create an app if it does not exist', async ({ worker }) => {
+      worker.use(...authApis())
       const store = useOAuthStore()
       const app = await store.ensureApp()
       expect(store.clientId).to.eql('test-id')
@@ -48,9 +104,9 @@ describe('oauth store', () => {
       expect(app.clientSecret).to.eql('test-secret')
     })
 
-    test('it should not create an app if it exists', async ({ worker }) => {
+    it('should not create an app if it exists', async ({ worker }) => {
       worker.use(
-        http.post('/api/v1/apps', () => {
+        http.post(MASTODON_APP_URL, () => {
           return HttpResponse.text('Should not call this API', { status: 400 })
         }),
       )
@@ -68,7 +124,8 @@ describe('oauth store', () => {
   })
 
   describe('getAppToken', () => {
-    test('it should get app token and set it in state', async () => {
+    it('should get app token and set it in state', async ({ worker }) => {
+      worker.use(...authApis())
       const store = useOAuthStore()
       store.clientId = 'test-id'
       store.clientSecret = 'test-secret'
@@ -78,7 +135,10 @@ describe('oauth store', () => {
       expect(store.appToken).to.eql('test-app-token')
     })
 
-    test('it should throw and not set state if it cannot get app token', async () => {
+    it('should throw and not set state if it cannot get app token', async ({
+      worker,
+    }) => {
+      worker.use(...authApis())
       const store = useOAuthStore()
       store.clientId = 'bad-id'
       store.clientSecret = 'bad-secret'
@@ -89,14 +149,17 @@ describe('oauth store', () => {
   })
 
   describe('ensureAppToken', () => {
-    test('it should work if the state is empty', async () => {
+    it('should work if the state is empty', async ({ worker }) => {
+      worker.use(...authApis())
+      console.log('=========', worker.listHandlers())
       const store = useOAuthStore()
       const token = await store.ensureAppToken()
       expect(token).to.eql('test-app-token')
       expect(store.appToken).to.eql('test-app-token')
     })
 
-    test('it should work if we already have a working token', async () => {
+    it('should work if we already have a working token', async ({ worker }) => {
+      worker.use(...authApis())
       const store = useOAuthStore()
       store.appToken = 'also-good-app-token'
 
@@ -105,11 +168,12 @@ describe('oauth store', () => {
       expect(store.appToken).to.eql('also-good-app-token')
     })
 
-    test('it should work if we have a bad token but good app credentials', async ({
+    it('should work if we have a bad token but good app credentials', async ({
       worker,
     }) => {
       worker.use(
-        http.post('/api/v1/apps', () => {
+        ...authApis(),
+        http.post(MASTODON_APP_URL, () => {
           return HttpResponse.text('Should not call this API', { status: 400 })
         }),
       )
@@ -123,11 +187,12 @@ describe('oauth store', () => {
       expect(store.appToken).to.eql('test-app-token')
     })
 
-    test('it should work if we have no token but good app credentials', async ({
+    it('should work if we have no token but good app credentials', async ({
       worker,
     }) => {
       worker.use(
-        http.post('/api/v1/apps', () => {
+        ...authApis(),
+        http.post(MASTODON_APP_URL, () => {
           return HttpResponse.text('Should not call this API', { status: 400 })
         }),
       )
@@ -140,7 +205,10 @@ describe('oauth store', () => {
       expect(store.appToken).to.eql('test-app-token')
     })
 
-    test('it should work if we have no token and bad app credentials', async () => {
+    it('should work if we have no token and bad app credentials', async ({
+      worker,
+    }) => {
+      worker.use(...authApis())
       const store = useOAuthStore()
       store.clientId = 'bad-id'
       store.clientSecret = 'bad-secret'
@@ -152,7 +220,10 @@ describe('oauth store', () => {
       expect(store.clientSecret).to.eql('test-secret')
     })
 
-    test('it should work if we have bad token and bad app credentials', async () => {
+    it('should work if we have bad token and bad app credentials', async ({
+      worker,
+    }) => {
+      worker.use(...authApis())
       const store = useOAuthStore()
       store.appToken = 'bad-app-token'
       store.clientId = 'bad-id'
@@ -165,9 +236,9 @@ describe('oauth store', () => {
       expect(store.clientSecret).to.eql('test-secret')
     })
 
-    test('it should throw if we cannot create an app', async ({ worker }) => {
+    it('should throw if we cannot create an app', async ({ worker }) => {
       worker.use(
-        http.post('/api/v1/apps', () => {
+        http.post(MASTODON_APP_URL, () => {
           return HttpResponse.text('Throttled', { status: 429 })
         }),
       )
@@ -176,17 +247,15 @@ describe('oauth store', () => {
       await expect(store.ensureAppToken()).rejects.toThrowError('Throttled')
     })
 
-    test('it should throw if we cannot obtain app token', async ({
+    it('should throw if we cannot obtain app token', async ({ worker }) => {
-      worker,
-    }) => {
       worker.use(
-        http.post('/oauth/token', () => {
+        http.post(OAUTH_TOKEN_URL, () => {
           return HttpResponse.text('Throttled', { status: 429 })
         }),
       )
 
       const store = useOAuthStore()
-      await expect(store.ensureAppToken()).rejects.toThrowError('Throttled')
+      await expect(store.getAppToken()).rejects.toThrowError('Throttled')
     })
   })
 })

vite.config.js

@@ -3,6 +3,7 @@ import { fileURLToPath } from 'node:url'
 import { DevTools } from '@vitejs/devtools'
 import vue from '@vitejs/plugin-vue'
 import vueJsx from '@vitejs/plugin-vue-jsx'
+import { playwright } from '@vitest/browser-playwright'
 import { defineConfig } from 'vite'
 import eslint from 'vite-plugin-eslint2'
 import stylelint from 'vite-plugin-stylelint'
@@ -240,8 +241,10 @@ export default defineConfig(async ({ mode, command }) => {
       exclude: [...configDefaults.exclude, 'test/e2e-playwright/**'],
       browser: {
         enabled: true,
-        provider: 'playwright',
+        headless: true,
-        instances: [{ browser: 'firefox' }],
+        provider: playwright(),
+        // https://github.com/mswjs/msw/issues/2757
+        instances: [{ browser: 'chromium' }],
       },
     },
   }