chore(grants): upgrade vitest so we can take advantage of more accessible queries

packages/client/.gitignore

@@ -26,3 +26,6 @@ pnpm-debug.log*
 *.njsproj
 *.sln
 *.sw?
+
+# screenshots generated by browser tests
+__screenshots__

packages/client/package.json

@@ -12,7 +12,9 @@
     "build": "vite build && rm dist/deploy-config.js",
     "dev": "vite",
     "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src",
-    "test": "vitest"
+    "test": "yarn test:mount && yarn test:browser",
+    "test:mount": "vitest run -c vite.config.js",
+    "test:browser": "vitest run -c vite.browser.config.js"
   },
   "dependencies": {
     "@braid/vue-formulate": "^2.5.3",
@@ -43,9 +45,13 @@
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^5.26.0",
     "@typescript-eslint/parser": "^5.26.0",
-    "@vitest/coverage-istanbul": "^1.6.0",
+    "@vitest/coverage-istanbul": "^2.1.8",
     "@vue/eslint-config-prettier": "^7.0.0",
     "@vue/test-utils": "^2.4.6",
+    "@playwright/test": "^1.41.2",
+    "@vitejs/plugin-vue": "^5.0.5",
+    "@testing-library/vue": "^8.0.1",
+    "@vitest/browser": "2.1.8",
     "eslint": "^8.2.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-import-resolver-custom-alias": "^1.3.2",
@@ -58,9 +64,12 @@
     "eslint-plugin-vue": "^9.26.0",
     "eslint-plugin-vuejs-accessibility": "^2.4.1",
     "jsdom": "^24.0.0",
+    "playwright": "^1.36.0",
     "prettier": "2.6.1",
     "sass": "1.52.1",
     "typescript": "^4.7.2",
-    "vitest": "^1.6.0"
+    "vitest": "^2.1.8",
+    "vitest-browser-vue": "0.0.1"
+
   }
 }

packages/client/src/arpa_reporter/views/AgenciesView.browser.spec.js

@@ -0,0 +1,57 @@
+import {
+  describe, it, expect, vi, beforeEach,
+} from 'vitest';
+// import { mount } from '@vue/test-utils';
+import { createStore } from 'vuex';
+import { render } from 'vitest-browser-vue';
+import { createRouter, createWebHistory } from 'vue-router';
+import AgenciesView from '@/arpa_reporter/views/AgenciesView.vue';
+
+describe('AgenciesView', () => {
+  const mockAgencies = [
+    { id: 1, code: 'AG1', name: 'Agency One' },
+    { id: 2, code: 'AG2', name: 'Agency Two' },
+  ];
+
+  const store = createStore({
+    state: {
+      agencies: mockAgencies,
+    },
+    actions: {
+      updateAgencies: vi.fn(),
+    },
+  });
+
+  const router = createRouter({
+    history: createWebHistory(),
+    routes: [
+      { path: '/agencies/new', name: 'new-agency' },
+      { path: '/agencies/:id', name: 'edit-agency' },
+    ],
+  });
+
+  let screen;
+
+  beforeEach(() => {
+    screen = render(AgenciesView, {
+      global: {
+        plugins: [store, router],
+      },
+    });
+  });
+
+  it('renders the agencies table with correct headings', () => {
+    expect(screen.getByRole('heading', { name: /agencies/i, level: 1 }).element()).toBeInTheDocument();
+  });
+
+  it('displays agency data correctly', () => {
+    mockAgencies.forEach((agency) => {
+      expect(screen.getByText(agency.code).element()).toBeInTheDocument();
+      expect(screen.getByText(agency.name).element()).toBeInTheDocument();
+    });
+  });
+
+  it('has a create new agency button', () => {
+    expect(screen.getByRole('link', { name: /create new agency/i }).element()).toBeInTheDocument();
+  });
+});

packages/client/vite.browser.config.js

@@ -0,0 +1,55 @@
+import vue from '@vitejs/plugin-vue';
+import { defineConfig, loadEnv } from 'vite';
+import path from 'path';
+
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd(), '');
+
+  return {
+    plugins: [
+      vue({
+        template: {
+          compilerOptions: {
+            compatConfig: {
+              MODE: 2,
+            },
+          },
+        },
+      }),
+    ],
+    resolve: {
+      alias: {
+        vue: '@vue/compat',
+        '@': path.resolve(__dirname, './src'),
+      },
+    },
+    test: {
+      environment: 'jsdom',
+      globals: true,
+      setupFiles: ['vitest.setup.ts'],
+      alias: {
+        vue: 'vue',
+      },
+      browser: {
+        provider: 'playwright',
+        enabled: true,
+        name: 'chromium',
+        headless: true,
+      },
+      include: ['**/*.browser.spec.{js,jsx}'],
+      coverage: {
+        provider: 'istanbul',
+        include: ['src/**'],
+        reporter: [
+          ['text', { file: process.env.CI ? 'coverage.txt' : null }], // Direct to file in CI; direct to stdout otherwise
+          'html',
+          'clover',
+          'json',
+        ],
+      },
+    },
+    define: {
+      'process.env': env,
+    },
+  };
+});

packages/client/vite.config.js

@@ -57,6 +57,7 @@ export default defineConfig({
     sourcemap: true,
   },
   test: {
+    exclude: ['**/*.browser.spec.{js,jsx}'],
     setupFiles: ['vitest.setup.ts'],
     alias: {
       vue: 'vue',
@@ -65,6 +66,12 @@ export default defineConfig({
     coverage: {
       provider: 'istanbul',
       include: ['src/**'],
+      pool: 'vmThreads',
+      poolOptions: {
+        vmThreads: {
+          useAtomics: true,
+        },
+      },
       reporter: [
         ['text', { file: process.env.CI ? 'coverage.txt' : null }], // Direct to file in CI; direct to stdout otherwise
         'html',

packages/client/vitest.setup.ts

@@ -1,5 +1,12 @@
 import { config } from '@vue/test-utils';
 
+import { cleanup } from '@testing-library/vue';
+import { afterEach } from 'vitest';
+
+afterEach(() => {
+  cleanup();
+});
+
 const stubs = [
   'v-select',
   'b-modal',