add some tests

e2e/dashboard.spec.ts

@@ -0,0 +1,7 @@
+import { expect, test } from '@playwright/test';
+import { route } from '../src/router/types/route';
+
+test('should redirect from root to dashboard', async ({ page }) => {
+  await page.goto(route.root);
+  await expect(page).toHaveURL(route.dashboard);
+});

e2e/subscriptions.spec.ts

@@ -0,0 +1,23 @@
+import { expect, test } from '@playwright/test';
+import { route } from '../src/router/types/route';
+import {
+  addSubscriptionButton,
+  noSubscriptionsPlaceholder,
+  subscriptionUpsertForm,
+} from '../src/subscriptions/globals/subscription.test-id';
+
+test('should create subscription', async ({ page }) => {
+  await page.goto(route.subscriptions);
+
+  await expect(
+    page.getByTestId(noSubscriptionsPlaceholder),
+    `should have no subscriptions initially`,
+  ).toBeVisible();
+
+  await page.getByTestId(addSubscriptionButton).click();
+
+  await expect(
+    page.getByTestId(subscriptionUpsertForm),
+    `should show subscription upsert form`,
+  ).toBeVisible();
+});

package.json

@@ -4,9 +4,9 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "start:dev": "vite",
+    "start:prod": "vite preview",
     "build": "tsc && vite build",
-    "preview": "vite preview",
     "format:check": "prettier . --check",
     "format:fix": "prettier . --write",
     "lint:check": "eslint .",

src/main.tsx

@@ -1,5 +1,6 @@
 import { App } from '@/App.tsx';
 import { DashboardPage } from '@/dashboard/pages/dashboard.page.tsx';
+import { route } from '@/router/types/route.ts';
 import { SubscriptionsPage } from '@/subscriptions/pages/subscriptions.page.tsx';
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
@@ -16,7 +17,7 @@ const router = createBrowserRouter([
     Component: App,
     children: [
       {
-        path: '/',
+        path: route.root,
         element: (
           <Navigate
             to="/dashboard"
@@ -25,11 +26,11 @@ const router = createBrowserRouter([
         ),
       },
       {
-        path: '/dashboard',
+        path: route.dashboard,
         Component: DashboardPage,
       },
       {
-        path: '/subscriptions',
+        path: route.subscriptions,
         Component: SubscriptionsPage,
       },
     ],

src/router/types/route.ts

@@ -0,0 +1,7 @@
+export const route = {
+  root: '/',
+  dashboard: '/dashboard',
+  subscriptions: '/subscriptions',
+} as const;
+
+export type Route = (typeof route)[keyof typeof route];

src/subscriptions/components/add-subscription-button.tsx

@@ -1,4 +1,5 @@
 import { memo, useCallback, useContext } from 'react';
+import { addSubscriptionButton } from '../globals/subscription.test-id.ts';
 import { SubscriptionUpsertStateContext } from './subscription-upsert.tsx';
 
 export const AddSubscriptionButton = memo(() => {
@@ -9,5 +10,11 @@ export const AddSubscriptionButton = memo(() => {
     [upsert],
   );
 
-  return <button onClick={onClick}>add sub</button>;
+  return (
+    <button
+      data-testid={addSubscriptionButton}
+      onClick={onClick}>
+      add sub
+    </button>
+  );
 });

src/subscriptions/components/subscription-list.tsx

@@ -2,6 +2,7 @@ import { SplitLayoutContext } from '@/ui/layouts/split.layout.tsx';
 import { cn } from '@/ui/utils/cn.ts';
 import { useLiveQuery } from 'dexie-react-hooks';
 import { memo, useContext } from 'react';
+import { noSubscriptionsPlaceholder } from '../globals/subscription.test-id.ts';
 import { findSubscriptions } from '../models/subscription.table.ts';
 import { SubscriptionListItem } from './subscription-list-item.tsx';
 
@@ -23,7 +24,7 @@ export const SubscriptionList = memo(() => {
           />
         ))
       ) : (
-        <div>No Subscriptions</div>
+        <div data-testid={noSubscriptionsPlaceholder}>No Subscriptions</div>
       )}
     </div>
   );

src/subscriptions/components/subscription-upsert.tsx

@@ -15,6 +15,7 @@ import {
 } from 'react';
 import { useForm, type SubmitHandler } from 'react-hook-form';
 import { usePrevious } from 'react-use';
+import { subscriptionUpsertForm } from '../globals/subscription.test-id.ts';
 import {
   type InsertSubscriptionModel,
   type SubscriptionModel,
@@ -81,6 +82,7 @@ export const SubscriptionUpsert = memo(() => {
       <h1>{`${state.mode === 'update' ? 'Update' : 'Insert'} Subscription`}</h1>
 
       <form
+        data-testid={subscriptionUpsertForm}
         onSubmit={handleSubmit(onSubmit)}
         className={cn('flex flex-col gap-2 self-stretch')}>
         <input

src/subscriptions/globals/subscription.test-id.ts

@@ -0,0 +1,4 @@
+export const noSubscriptionsPlaceholder =
+  'no-subscriptions-placeholder' as const;
+export const addSubscriptionButton = 'add-subscription-button' as const;
+export const subscriptionUpsertForm = 'subscription-upsert-form' as const;