Merge pull request #17 from LerianStudio/chore/playwright-config

🔧 chore: add initial Playwright setup and config. files
LerianStudio · Nov 12, 2024 · 12cfd18 · 12cfd18
2 parents bc9259f + de058e1
commit 12cfd18
Show file tree

Hide file tree

Showing 18 changed files with 184 additions and 72 deletions.
diff --git a/.env.playwright.example b/.env.playwright.example
@@ -0,0 +1,5 @@
+MIDAZ_CONSOLE_HOST='localhost'
+MIDAZ_CONSOLE_PORT=8081
+MIDAZ_CONSOLE_URL='http://${MIDAZ_CONSOLE_HOST}:${MIDAZ_CONSOLE_PORT}'
+MIDAZ_USERNAME=INSERT_USERNAME
+MIDAZ_PASSWORD=INSERT_PASSWORD
diff --git a/.gitignore b/.gitignore
@@ -28,6 +28,7 @@ yarn-error.log*
 # local env files
 .env
 .env*.local
+.env.playwright
 
 # vercel
 .vercel
@@ -54,3 +55,5 @@ next-env.d.ts
 /playwright-report/
 /blob-report/
 /playwright/.cache/
+/tests/storage/
+node_modules/
diff --git a/next.config.mjs b/next.config.mjs
@@ -39,6 +39,12 @@ const nextConfig = {
         pathname: '**'
       }
     ]
+  },
+  compiler: {
+    reactRemoveProperties:
+      process.env.NODE_ENV === 'production'
+        ? { properties: ['^data-testid$'] }
+        : false
   }
 }
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,6 +13,7 @@
     "compile:i18n": "formatjs compile-folder \"./locales/extracted\" --format simple \"./locales/compiled\"",
     "i18n": "npm run extract:i18n & npm run compile:i18n",
     "test": "jest",
+    "test:e2e": "playwright test --ui",
     "set-local-env": "shx cp .env.local.example .env",
     "set-env": "shx cp .env.example .env",
     "docker-compose": "npm run set-env && docker-compose up -d"
@@ -44,6 +45,7 @@
     "colorjs.io": "^0.5.2",
     "cookies-next": "^4.3.0",
     "dayjs": "^1.11.13",
+    "dotenv": "^16.4.5",
     "framer-motion": "^11.11.10",
     "inversify": "^6.0.3",
     "jsonwebtoken": "^9.0.2",
@@ -68,7 +70,7 @@
     "@chromatic-com/storybook": "^3.1.0",
     "@formatjs/cli": "^6.3.5",
     "@formatjs/cli-lib": "^6.6.1",
-    "@playwright/test": "^1.48.1",
+    "@playwright/test": "^1.48.2",
     "@storybook/addon-essentials": "^8.3.6",
     "@storybook/addon-interactions": "^8.3.6",
     "@storybook/addon-links": "^8.3.6",

diff --git a/playwright.config.ts b/playwright.config.ts
@@ -1,36 +1,19 @@
 import { defineConfig, devices } from '@playwright/test'
 
-/**
- * Read environment variables from file.
- * https://github.com/motdotla/dotenv
- */
-// require('dotenv').config();
-
-/**
- * See https://playwright.dev/docs/test-configuration.
- */
 export default defineConfig({
-  testDir: './tests',
-  /* Run tests in files in parallel */
+  testDir: './tests/e2e',
   fullyParallel: true,
-  /* Fail the build on CI if you accidentally left test.only in the source code. */
   forbidOnly: !!process.env.CI,
-  /* Retry on CI only */
   retries: process.env.CI ? 2 : 0,
-  /* Opt out of parallel tests on CI. */
   workers: process.env.CI ? 1 : undefined,
-  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
   reporter: 'html',
-  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  globalSetup: require.resolve('./tests/utils/global-setup'),
   use: {
-    /* Base URL to use in actions like `await page.goto('/')`. */
-    // baseURL: 'http://127.0.0.1:3000',
-
-    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    baseURL: 'http://localhost:8081',
+    storageState: 'tests/storage/data.json',
     trace: 'on-first-retry'
   },
 
-  /* Configure projects for major browsers */
   projects: [
     {
       name: 'chromium',
@@ -46,32 +29,11 @@ export default defineConfig({
       name: 'webkit',
       use: { ...devices['Desktop Safari'] }
     }
+  ],
 
-    /* Test against mobile viewports. */
-    // {
-    //   name: 'Mobile Chrome',
-    //   use: { ...devices['Pixel 5'] },
-    // },
-    // {
-    //   name: 'Mobile Safari',
-    //   use: { ...devices['iPhone 12'] },
-    // },
-
-    /* Test against branded browsers. */
-    // {
-    //   name: 'Microsoft Edge',
-    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
-    // },
-    // {
-    //   name: 'Google Chrome',
-    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
-    // },
-  ]
-
-  /* Run your local dev server before starting the tests */
-  // webServer: {
-  //   command: 'npm run start',
-  //   url: 'http://127.0.0.1:3000',
-  //   reuseExistingServer: !process.env.CI,
-  // },
+  webServer: {
+    command: 'npm run dev',
+    port: 8081,
+    reuseExistingServer: !process.env.CI
+  }
 })
diff --git a/src/app/(routes)/ledgers/ledgers-data-table.tsx b/src/app/(routes)/ledgers/ledgers-data-table.tsx
@@ -156,7 +156,11 @@ const LedgerRow: React.FC<LedgerRowProps> = ({
         <TableCell className="w-0">
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
-              <Button variant="secondary" className="h-auto w-max p-2">
+              <Button
+                variant="secondary"
+                className="h-auto w-max p-2"
+                data-testid="actions"
+              >
                 <MoreVertical size={16} onClick={() => {}} />
               </Button>
             </DropdownMenuTrigger>
@@ -171,6 +175,7 @@ const LedgerRow: React.FC<LedgerRowProps> = ({
               </Link>
               <DropdownMenuSeparator />
               <DropdownMenuItem
+                data-testid="delete"
                 onClick={() =>
                   handleDialogOpen(
                     ledger.original.id || '',

diff --git a/src/app/(routes)/ledgers/ledgers-sheet.tsx b/src/app/(routes)/ledgers/ledgers-sheet.tsx
@@ -116,7 +116,7 @@ export const LedgersSheet = ({
 
   return (
     <Sheet onOpenChange={onOpenChange} {...others}>
-      <SheetContent>
+      <SheetContent data-testid="ledgers-sheet">
         {mode === 'create' && (
           <SheetHeader>
             <SheetTitle>

diff --git a/src/app/(routes)/ledgers/ledgers-view.tsx b/src/app/(routes)/ledgers/ledgers-view.tsx
@@ -108,7 +108,11 @@ const LedgersView = ({ ledgers, refetch, isLoading }: LedgersViewProps) => {
                 defaultMessage: 'What is a Ledger?'
               })}
             />
-            <Button icon={<Plus />} onClick={handleCreate}>
+            <Button
+              icon={<Plus />}
+              onClick={handleCreate}
+              data-testid="new-ledger"
+            >
               {!ledgers || ledgers.items.length === 0
                 ? intl.formatMessage({
                     id: 'ledgers.listingTemplate.newAddButton',

diff --git a/src/components/confirmation-dialog/index.tsx b/src/components/confirmation-dialog/index.tsx
@@ -44,7 +44,7 @@ const ConfirmationDialog: React.FC<ConfirmationDialogProps> = ({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent>
+      <DialogContent data-testid="dialog">
         <DialogHeader>
           <div className="flex items-center gap-2">
             {icon && <span>{icon}</span>}
@@ -65,6 +65,7 @@ const ConfirmationDialog: React.FC<ConfirmationDialogProps> = ({
             loading={loading}
             onClick={onConfirm}
             variant="default"
+            data-testid="confirm"
           >
             {confirmLabel ??
               intl.formatMessage({

diff --git a/src/components/page-header/info-title.tsx b/src/components/page-header/info-title.tsx
@@ -16,7 +16,10 @@ export const InfoTitle = ({
   children
 }: InfoTitleProps) => (
   <div className="mb-12 flex flex-col gap-4">
-    <h1 className={cn('text-4xl font-bold text-[#3f3f46]', className)}>
+    <h1
+      className={cn('text-4xl font-bold text-[#3f3f46]', className)}
+      data-testid="title"
+    >
       {title}
     </h1>
 

diff --git a/src/hooks/use-custom-toast.tsx b/src/hooks/use-custom-toast.tsx
@@ -2,10 +2,16 @@ import { toast } from 'react-hot-toast'
 import { Check, X, AlertTriangle, Info, XCircle } from 'lucide-react'
 import { cn } from '@/lib/utils'
 
-const customToast = (message: string, icon: JSX.Element, bgColor: string) => {
+const customToast = (
+  message: string,
+  icon: JSX.Element,
+  bgColor: string,
+  dataTestId?: string
+) => {
   toast.custom(
     (t) => (
       <div
+        data-testid={dataTestId}
         className={cn(
           'pointer-events-auto flex w-full max-w-[330px] rounded-lg bg-white px-4 py-5 shadow-2xl transition-opacity duration-100 ease-in-out',
           t.visible ? 'opacity-100' : 'opacity-0'
@@ -18,7 +24,11 @@ const customToast = (message: string, icon: JSX.Element, bgColor: string) => {
               <p className="text-sm font-medium text-shadcn-500">{message}</p>
             </div>
           </div>
-          <button onClick={() => toast.dismiss(t.id)} className="flex">
+          <button
+            onClick={() => toast.dismiss(t.id)}
+            className="flex"
+            data-testid="dismiss-toast"
+          >
             <X className="text-[#9CA3AF]" size={20} />
           </button>
         </div>
@@ -33,31 +43,35 @@ const useCustomToast = () => {
     customToast(
       message,
       <Check size={16} className="text-[#009F6F]" />,
-      'bg-[#D1FAE5]'
+      'bg-[#D1FAE5]',
+      'success-toast'
     )
   }
 
   const showError = (message: string) => {
     customToast(
       message,
       <XCircle size={16} className="text-[#EF4444]" />,
-      'bg-[#FEE2E2]'
+      'bg-[#FEE2E2]',
+      'error-toast'
     )
   }
 
   const showInfo = (message: string) => {
     customToast(
       message,
       <Info size={16} className="text-[#2563EB]" />,
-      'bg-white'
+      'bg-white',
+      'info-toast'
     )
   }
 
   const showWarning = (message: string) => {
     customToast(
       message,
       <AlertTriangle size={16} className="text-[#FBBF24]" />,
-      'bg-yellow-100'
+      'bg-yellow-100',
+      'warning-toast'
     )
   }