add real e2e + some fixes

e2e/dashboard.spec.ts

@@ -1,7 +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);
+  await page.goto('/');
+
+  await expect(page).toHaveURL('/dashboard');
 });

e2e/subscriptions.spec.ts

@@ -1,23 +1,55 @@
 import { expect, test } from '@playwright/test';
-import { route } from '../src/router/types/route';
-import {
-  addSubscriptionButton,
-  noSubscriptionsPlaceholder,
-  subscriptionUpsertForm,
-} from '../src/subscriptions/globals/subscription.test-id';
+import type { RawFormValue } from '../src/form/types/raw-form-value';
+import type { InsertSubscriptionModel } from '../src/subscriptions/models/subscription.model';
 
 test('should create subscription', async ({ page }) => {
-  await page.goto(route.subscriptions);
+  const formValue = {
+    name: 'Webstorm',
+    description: 'JetBrains',
+    icon: 'webstorm',
+    price: '10',
+    startedAt: '2024-03-01',
+    endedAt: '2024-08-01',
+  } as const satisfies RawFormValue<InsertSubscriptionModel>;
+
+  await page.goto('/');
+  await page.getByRole('link', { name: 'subscriptions' }).click();
 
   await expect(
-    page.getByTestId(noSubscriptionsPlaceholder),
-    `should have no subscriptions initially`,
+    page.getByText('No Subscriptions'),
+    `should show no subscriptions placeholder initially`,
   ).toBeVisible();
 
-  await page.getByTestId(addSubscriptionButton).click();
+  await page.getByRole('button', { name: 'add sub' }).click();
+
+  await page.getByLabel('name').fill(formValue.name);
+  await page.getByLabel('description').fill(formValue.description);
+  await page.getByLabel('icon').fill(formValue.icon);
+  await page.getByLabel('price').fill(formValue.price);
+  await page.getByLabel('started at').fill(formValue.startedAt);
+  await page.getByLabel('ended at').fill(formValue.endedAt);
+
+  await page.getByRole('button', { name: 'insert' }).click();
 
   await expect(
-    page.getByTestId(subscriptionUpsertForm),
-    `should show subscription upsert form`,
+    page.getByText('No Subscriptions'),
+    `should hide no subscriptions placeholder after subscription was inserted`,
+  ).not.toBeVisible();
+  await expect(
+    page.getByRole('button', { name: 'update' }),
+    'should switch to update mode',
+  ).toBeVisible();
+
+  await expect(
+    page.getByText(formValue.name),
+    `should show newly inserted subscription name`,
+  ).toBeVisible();
+  await expect(
+    page.getByText(formValue.description),
+    `should show newly inserted subscription description`,
+  ).toBeVisible();
+  await expect(
+    page.getByText(formValue.price),
+    `should show newly inserted subscription price`,
   ).toBeVisible();
 });

package.json

@@ -15,6 +15,7 @@
     "test": "vitest run",
     "test:watch": "vitest watch",
     "e2e": "playwright test",
+    "e2e:ui": "playwright test --ui",
     "e2e:setup": "playwright install --with-deps",
     "bundle:analyze": "vite-bundle-visualizer"
   },

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

@@ -1,6 +1,5 @@
 import { Button } from '@chakra-ui/react';
 import { memo, useCallback, useContext } from 'react';
-import { addSubscriptionButton } from '../globals/subscription.test-id.ts';
 import { SubscriptionUpsertStateContext } from './subscription-upsert.tsx';
 
 export const AddSubscriptionButton = memo(() => {
@@ -14,7 +13,6 @@ export const AddSubscriptionButton = memo(() => {
   return (
     <Button
       colorScheme="teal"
-      data-testid={addSubscriptionButton}
       onClick={onClick}>
       add sub
     </Button>

src/subscriptions/components/subscription-list-item.tsx

@@ -1,32 +1,29 @@
 import { cn } from '@/ui/utils/cn.ts';
-import {
-  Avatar,
-  Box,
-  Card,
-  CardBody,
-  Flex,
-  Heading,
-  Text,
-} from '@chakra-ui/react';
-import { memo, useContext } from 'react';
+import { Avatar, Card, CardBody, Heading, Text } from '@chakra-ui/react';
+import { memo, useCallback, useContext } from 'react';
 import type { SubscriptionModel } from '../models/subscription.model.ts';
 import { SubscriptionUpsertStateContext } from './subscription-upsert.tsx';
 
 export const SubscriptionListItem = memo(
   ({ subscription }: SubscriptionListItemProps) => {
     const upsert = useContext(SubscriptionUpsertStateContext);
 
+    const openSubscriptionUpdate = useCallback(
+      () => upsert.dispatch({ type: 'open', subscription }),
+      [subscription, upsert],
+    );
+
     return (
       <Card
         as="button"
         textAlign="start"
         alignItems="initial"
-        onClick={() => upsert.dispatch({ type: 'open', subscription })}>
+        onClick={openSubscriptionUpdate}>
         <CardBody>
-          <Flex className={cn(`items-center gap-2`)}>
+          <div className={cn(`flex items-center gap-2`)}>
             <Avatar size="sm" />
 
-            <Box flex={1}>
+            <div className={cn('flex-1')}>
               <Heading
                 size="xs"
                 textTransform="uppercase">
@@ -36,10 +33,10 @@ export const SubscriptionListItem = memo(
               {subscription.description ? (
                 <Text fontSize="sm">{subscription.description}</Text>
               ) : null}
-            </Box>
+            </div>
 
             <Heading size="md">{subscription.price}</Heading>
-          </Flex>
+          </div>
         </CardBody>
       </Card>
     );

src/subscriptions/components/subscription-list.tsx

@@ -2,7 +2,6 @@ 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';
 
@@ -24,7 +23,7 @@ export const SubscriptionList = memo(() => {
           />
         ))
       ) : (
-        <div data-testid={noSubscriptionsPlaceholder}>No Subscriptions</div>
+        <div>No Subscriptions</div>
       )}
     </div>
   );

src/subscriptions/components/subscription-upsert.tsx

@@ -6,7 +6,6 @@ import {
   FormControl,
   FormLabel,
   Input,
-  Stack,
   Textarea,
 } from '@chakra-ui/react';
 import { clsx } from 'clsx';
@@ -23,7 +22,6 @@ 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,
@@ -42,26 +40,22 @@ export const SubscriptionUpsert = memo(() => {
   const { register, handleSubmit, reset } =
     useForm<RawFormValue<UpsertSubscriptionModel>>();
 
-  const onSubmit: SubmitHandler<RawFormValue<UpsertSubscriptionModel>> =
-    useCallback(
-      async (raw) => {
-        const subscription =
-          state.mode === 'update'
-            ? await updateSubscription(
-                raw as RawFormValue<UpdateSubscriptionModel>,
-              )
-            : await insertSubscription(
-                raw as RawFormValue<InsertSubscriptionModel>,
-              );
+  const onSubmit: SubmitHandler<RawFormValue<UpsertSubscriptionModel>> = async (
+    raw,
+  ) => {
+    const subscription =
+      state.mode === 'update'
+        ? await updateSubscription(raw as RawFormValue<UpdateSubscriptionModel>)
+        : await insertSubscription(
+            raw as RawFormValue<InsertSubscriptionModel>,
+          );
 
-        if (state.mode === 'update') {
-          return;
-        }
+    if (state.mode === 'update') {
+      return;
+    }
 
-        dispatch({ type: 'open', subscription });
-      },
-      [dispatch, state.mode],
-    );
+    dispatch({ type: 'open', subscription });
+  };
 
   const onDelete = useCallback(async () => {
     if (state.mode !== 'update') {
@@ -90,7 +84,6 @@ 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
@@ -144,7 +137,7 @@ export const SubscriptionUpsert = memo(() => {
         </FormControl>
 
         <FormControl>
-          <FormLabel htmlFor="price">Started At</FormLabel>
+          <FormLabel htmlFor="startedAt">Started At</FormLabel>
           <Input
             {...register('startedAt')}
             id="startedAt"
@@ -155,7 +148,7 @@ export const SubscriptionUpsert = memo(() => {
         </FormControl>
 
         <FormControl>
-          <FormLabel htmlFor="price">Ended At</FormLabel>
+          <FormLabel htmlFor="endedAt">Ended At</FormLabel>
           <Input
             {...register('endedAt')}
             id="endedAt"
@@ -165,9 +158,7 @@ export const SubscriptionUpsert = memo(() => {
           />
         </FormControl>
 
-        <Stack
-          spacing={2}
-          direction="row">
+        <div className={cn('flex gap-2')}>
           <Button
             type="submit"
             colorScheme="teal">
@@ -188,7 +179,7 @@ export const SubscriptionUpsert = memo(() => {
               Delete
             </Button>
           )}
-        </Stack>
+        </div>
       </form>
     </div>
   );