Merge pull request #99 from hammercode-dev/feat/setup-playwright

[FEAT] - setup playwright

Author: mpsalunggg

.github/workflows/playwright.yml

@@ -0,0 +1,27 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [main, master, development]
+  pull_request:
+    branches: [main, master, development]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+      - name: Install dependencies
+        run: npm install -g pnpm && pnpm install
+      - name: Install Playwright Browsers
+        run: pnpm exec playwright install --with-deps
+      - name: Run Playwright tests
+        run: pnpm run test:e2e
+      - uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

.gitignore

@@ -35,3 +35,10 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# Playwright
+node_modules/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

package.json

@@ -12,7 +12,11 @@
     "check-format": "prettier --check .",
     "prepare": "husky",
     "test": "vitest",
-    "test:coverage": "vitest run --coverage"
+    "test:coverage": "vitest run --coverage",
+    "test:e2e": "playwright test --config=tests/setup/playwright.config.ts",
+    "test:e2e:ui": "playwright test --config=tests/setup/playwright.config.ts --ui",
+    "test:e2e:headed": "playwright test --config=tests/setup/playwright.config.ts --headed",
+    "test:e2e:debug": "playwright test --config=tests/setup/playwright.config.ts --debug"
   },
   "husky": {
     "hooks": {
@@ -81,6 +85,7 @@
     "zod": "^3.24.4"
   },
   "devDependencies": {
+    "@playwright/test": "^1.55.0",
     "@tailwindcss/postcss": "^4.1.4",
     "@tailwindcss/typography": "^0.5.16",
     "@testing-library/dom": "^10.4.0",

pnpm-lock.yaml

@@ -6,7 +6,7 @@ export const eventSchema = z.object({
   description: z.string(),
   slug: z.string().optional(),
   author: z.string(),
-  image: z.string(),
+  image_event: z.string(),
   date: z.string().optional(),
   type: z.string(),
   location: z.string(),

src/domains/Events.ts

@@ -8,13 +8,13 @@ import { EventType } from "@/domains/Events";
 import { useFormatDate } from "@/lib/format";
 
 const EventCardV2: FC<{ data: EventType }> = ({ data }) => {
-  const { title, date, image, status, duration, location } = data;
+  const { title, date, image_event, status, duration, location } = data;
 
   return (
     <Card className="flex size-full flex-col rounded-lg border shadow-md">
       <div className="bg-muted overflow-hidden rounded-t-lg">
         <Image
-          src={image ?? "/assets/images/events/fallbackImage.webp"}
+          src={image_event ?? "/assets/images/events/fallbackImage.webp"}
           alt={title}
           width={540}
           height={240}

src/features/events/components/EventCardV2.tsx

@@ -318,7 +318,11 @@ const EventForm = ({ onSubmit, isLoading = false, initialData, mode = "create" }
                         mode="single"
                         selected={field.value ? new Date(field.value) : undefined}
                         onSelect={(date) => field.onChange(date ? date.toISOString() : "")}
-                        disabled={(date) => date < new Date()}
+                        disabled={(date) => {
+                          const yesterday = new Date();
+                          yesterday.setDate(yesterday.getDate() - 1);
+                          return date < yesterday;
+                        }}
                       />
                     </PopoverContent>
                   </Popover>
@@ -351,7 +355,11 @@ const EventForm = ({ onSubmit, isLoading = false, initialData, mode = "create" }
                           mode="single"
                           selected={field.value ? new Date(field.value) : undefined}
                           onSelect={(date) => field.onChange(date ? date.toISOString() : "")}
-                          disabled={(date) => date < new Date()}
+                          disabled={(date) => {
+                            const yesterday = new Date();
+                            yesterday.setDate(yesterday.getDate() - 1);
+                            return date < yesterday;
+                          }}
                         />
                       </PopoverContent>
                     </Popover>
@@ -383,7 +391,11 @@ const EventForm = ({ onSubmit, isLoading = false, initialData, mode = "create" }
                           mode="single"
                           selected={field.value ? new Date(field.value) : undefined}
                           onSelect={(date) => field.onChange(date ? date.toISOString() : "")}
-                          disabled={(date) => date < new Date()}
+                          disabled={(date) => {
+                            const yesterday = new Date();
+                            yesterday.setDate(yesterday.getDate() - 1);
+                            return date < yesterday;
+                          }}
                         />
                       </PopoverContent>
                     </Popover>

src/features/events/components/EventForm.tsx

@@ -15,12 +15,12 @@ const MyEventCard = ({ data }: { data: UserEventType }) => {
           <div
             className="absolute inset-0 scale-110 bg-cover bg-center blur-xs"
             style={{
-              backgroundImage: `url(${data.event_detail.image ?? "/assets/images/events/fallbackImage.webp"})`,
+              backgroundImage: `url(${data.event_detail.image_event ?? "/assets/images/events/fallbackImage.webp"})`,
             }}
           />
           <Image
             alt={`Event ${order_no}`}
-            src={data.event_detail.image ?? "/assets/images/events/fallbackImage.webp"}
+            src={data.event_detail.image_event ?? "/assets/images/events/fallbackImage.webp"}
             width={540}
             height={240}
             className="relative z-10 object-cover object-center"

src/features/events/components/MyEventCard.tsx

@@ -28,12 +28,12 @@ const EventDetailPage: FC<EventDetailPageProp> = ({ eventId }) => {
           <div className="w-full rounded-lg">
             {!isLoading ? (
               <Image
-                src={event?.image ?? "/assets/images/events/fallbackImage.webp"}
+                src={event?.image_event ?? "/assets/images/events/fallbackImage.webp"}
                 alt="Banner"
                 width={1000}
                 height={500}
                 priority
-                className="rounded-lg"
+                className="rounded-lg border shadow-md"
               />
             ) : (
               <Skeleton className="h-24 w-full rounded-lg sm:h-96" />

src/features/events/pages/PublicEventDetailPage.tsx

@@ -66,7 +66,7 @@
       "enter-email": "Masukan Email",
       "enter-password": "Masukan Password",
       "no-account": "Apakah Belum Punya Akun?",
-      "sign-in": "Sign In",
+      "sign-in": "Masuk",
       "sign-up": "Sign Up",
       "forgot-password": "Lupa Password?"
     },