Add initial tests

package.json

@@ -15,7 +15,7 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "@fontsource/bungee-shade": "^5.0.20",
+    "@fontsource/bungee-shade": "^5.0.21",
     "@headlessui/vue": "^1.7.22",
     "@mdi/js": "^7.4.47",
     "@vueuse/core": "^10.11.0",
@@ -43,15 +43,15 @@
     "eslint-plugin-playwright": "^1.6.2",
     "eslint-plugin-vue": "^9.27.0",
     "jsdom": "^24.1.0",
-    "npm-run-all2": "^6.2.0",
+    "npm-run-all2": "^6.2.2",
     "postcss": "^8.4.39",
     "prettier": "^3.3.2",
     "sass": "^1.77.6",
     "tailwindcss": "^3.4.4",
     "typescript": "~5.5.3",
     "vite": "^5.3.3",
     "vitest": "^1.6.0",
-    "vue-tsc": "^2.0.24"
+    "vue-tsc": "^2.0.26"
   },
   "engines": {
     "node": "> 20.0.0"

playwright.config.ts

@@ -1,5 +1,5 @@
-import process from 'node:process'
-import { defineConfig, devices } from '@playwright/test'
+import process from 'node:process';
+import {defineConfig, devices} from '@playwright/test';
 
 /**
  * Read environment variables from file.
@@ -13,13 +13,13 @@ import { defineConfig, devices } from '@playwright/test'
 export default defineConfig({
   testDir: './e2e',
   /* Maximum time one test can run for. */
-  timeout: 30 * 1000,
+  timeout: 10 * 1000,
   expect: {
     /**
      * Maximum time expect() should wait for the condition to be met.
      * For example in `await expect(locator).toHaveText();`
      */
-    timeout: 5000
+    timeout: 3000,
   },
   /* Fail the build on CI if you accidentally left test.only in the source code. */
   forbidOnly: !!process.env.CI,
@@ -40,29 +40,29 @@ export default defineConfig({
     trace: 'on-first-retry',
 
     /* Only on CI systems run the tests headless */
-    headless: !!process.env.CI
+    headless: !!process.env.CI,
   },
 
   /* Configure projects for major browsers */
   projects: [
     {
       name: 'chromium',
       use: {
-        ...devices['Desktop Chrome']
-      }
+        ...devices['Desktop Chrome'],
+      },
     },
     {
       name: 'firefox',
       use: {
-        ...devices['Desktop Firefox']
-      }
+        ...devices['Desktop Firefox'],
+      },
     },
     {
       name: 'webkit',
       use: {
-        ...devices['Desktop Safari']
-      }
-    }
+        ...devices['Desktop Safari'],
+      },
+    },
 
     /* Test against mobile viewports. */
     // {
@@ -105,6 +105,6 @@ export default defineConfig({
      */
     command: process.env.CI ? 'vite preview --port 5173' : 'vite dev',
     port: 5173,
-    reuseExistingServer: !process.env.CI
-  }
-})
+    reuseExistingServer: !process.env.CI,
+  },
+});

src/components/__tests__/activityStore.spec.ts

@@ -0,0 +1,39 @@
+import {describe, it, expect, beforeEach} from 'vitest';
+import {DateTime} from 'luxon';
+import {useActivityStore} from '@/stores/activityStore';
+import {createPinia, setActivePinia} from 'pinia';
+
+describe('activityStore', () => {
+  let activityStore: ReturnType<typeof useActivityStore>;
+  beforeEach(() => {
+    // creates a fresh pinia and makes it active
+    // so it's automatically picked up by any useStore() call
+    // without having to pass it to it: `useStore(pinia)`
+    setActivePinia(createPinia());
+    activityStore = useActivityStore();
+  });
+
+  it('adds ingredients', () => {
+    activityStore.toggleIngredient('cucumber');
+    activityStore.toggleIngredient('tomato');
+    expect(activityStore.activity.length).toBe(2);
+  });
+
+  it('removes ingredients', () => {
+    activityStore.toggleIngredient('cucumber');
+    activityStore.toggleIngredient('cucumber');
+    expect(activityStore.activity.length).toBe(0);
+  });
+
+  it('ingredient toggle does not affect previous week', () => {
+    const lastWeekAction = {
+      ingredient: 'tomato',
+      date: DateTime.now().startOf('week').minus({weeks: 1}),
+    };
+    activityStore.activity.push(lastWeekAction);
+    activityStore.toggleIngredient('tomato');
+    expect(activityStore.activity.length).toBe(2);
+    activityStore.toggleIngredient('tomato');
+    expect(activityStore.activity[0]).toEqual(lastWeekAction);
+  });
+});

tsconfig.app.json

@@ -5,7 +5,6 @@
   "compilerOptions": {
     "composite": true,
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-
     "baseUrl": ".",
     "paths": {
       "@/*": ["./src/*"]

tsconfig.node.json

@@ -5,7 +5,6 @@
     "composite": true,
     "noEmit": true,
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
-
     "module": "ESNext",
     "moduleResolution": "Bundler",
     "types": ["node"]

tsconfig.vitest.json

@@ -5,7 +5,6 @@
   "compilerOptions": {
     "composite": true,
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.vitest.tsbuildinfo",
-
     "lib": [],
     "types": ["node", "jsdom"]
   }

vite.config.ts

@@ -1,6 +1,6 @@
-import { fileURLToPath, URL } from 'node:url'
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
+import {fileURLToPath, URL} from 'node:url';
+import {defineConfig} from 'vite';
+import vue from '@vitejs/plugin-vue';
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -13,4 +13,4 @@ export default defineConfig({
   preview: {
     port: 5173,
   },
-})
+});

vitest.config.ts

@@ -1,6 +1,5 @@
 import {fileURLToPath} from 'node:url';
-import {mergeConfig} from 'vite';
-import {configDefaults, defineConfig} from 'vitest/config';
+import {mergeConfig, configDefaults, defineConfig} from 'vitest/config';
 import viteConfig from './vite.config';
 
 export default mergeConfig(

vitest.setup.ts

@@ -14,5 +14,7 @@ config.plugins.VueWrapper.install(dataTestIdPlugin);
 
 // Reset handlers after each test
 afterEach(() => {
+  // Clear local storage so state is fresh for each test
+  localStorage.clear();
   config.global.plugins[0] = createTestingPinia();
 });