some more tests

Author: dwightjack

package.json

@@ -10,7 +10,7 @@
     "lint": "eslint 'src/**/*.*'",
     "serve": "vite preview",
     "dev:test": "vite dev --port 8888 --mode=test",
-    "test": ""
+    "test": "playwright test"
   },
   "packageManager": "[email protected]",
   "engines": {

src/stores/cycle.ts

@@ -4,19 +4,14 @@ import { Interval, IntervalType } from '@/types';
 import { useStorage } from '@vueuse/core';
 import { uniqId } from '@/utils';
 
-const initialIntervals = () => [
-  {
-    type: IntervalType.Work,
-    duration: 45 * 60 * 1000,
-    id: uniqId([]),
-  },
-];
-
 export const useCycle = defineStore('cycle', () => {
-  const intervals =
-    import.meta.env.MODE !== 'test'
-      ? useStorage<Interval[]>('intervals', initialIntervals())
-      : ref<Interval[]>(initialIntervals());
+  const intervals = useStorage<Interval[]>('intervals', [
+    {
+      type: IntervalType.Work,
+      duration: 45 * 60 * 1000,
+      id: uniqId([]),
+    },
+  ]);
 
   const countdowns = ref<number[]>([]);
   const current = ref(0);

tests/timer.spec.ts

@@ -1,4 +1,12 @@
 import { test, expect } from '@playwright/test';
+import { uid } from 'uid';
+import { IntervalType } from '../src/types';
+
+const mockInterval = (type: IntervalType, duration: number) => ({
+  type,
+  duration: duration * 60 * 1000,
+  id: uid(),
+});
 
 test.describe('initial state', () => {
   test.beforeEach(async ({ page }) => {
@@ -27,3 +35,46 @@ test.describe('initial state', () => {
     ).toBeVisible();
   });
 });
+
+test.describe('functionality', () => {
+  test.beforeEach(async ({ page }) => {
+    // set two intervals
+    await page.addInitScript(
+      (intervals) => {
+        window.localStorage.setItem('intervals', JSON.stringify(intervals));
+      },
+      [
+        mockInterval(IntervalType.Work, 1),
+        mockInterval(IntervalType.ShortBreak, 2),
+      ],
+    );
+    await page.goto('/');
+  });
+  test('list of two intervals', async ({ page }) => {
+    const list = page.getByRole('list', { name: 'Intervals' });
+    await expect(list.getByRole('listitem')).toHaveCount(2);
+  });
+
+  test('play', async ({ page }) => {
+    await page.getByRole('button', { name: 'Play' }).click();
+
+    await expect(page.getByRole('button', { name: 'Play' })).not.toBeVisible();
+    await expect(page.getByRole('button', { name: 'Pause' })).toBeVisible();
+  });
+
+  test('pause', async ({ page }) => {
+    await page.getByRole('button', { name: 'Play' }).click();
+
+    await expect(page.getByRole('button', { name: 'Play' })).not.toBeVisible();
+    await page.getByRole('button', { name: 'Pause' }).click();
+    await expect(page.getByRole('button', { name: 'Play' })).toBeVisible();
+  });
+
+  test('skip', async ({ page }) => {
+    await expect(page.getByRole('timer')).toContainText('01:00');
+    await page.getByRole('button', { name: 'Skip' }).click();
+    await page.waitForTimeout(700);
+
+    await expect(page.getByRole('timer')).toContainText('02:00');
+  });
+});

tsconfig.json

@@ -27,6 +27,12 @@
       "@/*": ["src/*"]
     }
   },
-  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.d.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "test/**/*.ts"
+  ],
   "references": [{ "path": "./tsconfig.node.json" }]
 }