Feature/playwright test setup (#107)

* Installed Playwright
  - Run playwright test when pushed to main master or this branch
  - Doing this on vercel deployment so we have a webserver to test against
  - Not using CI
  - Using base URL for tests
  - passing a bypass protection to vercel
  - if no URL try localhost
* Basic Restrutcure
  - Deals with content having @Instragam as it has merseysidelating festical in it
  - Restructure of spec files and a basic purchase flow UPTO stripe
* gitignore for playwright test for other branches
* Changing test to not include text present in Instagram
* Moving PR github action out
- It's the same check as Vercel preview deployment but without visibility on result

.github/workflows/playwright.yml

@@ -0,0 +1,30 @@
+name: Playwright Tests
+on:
+  deployment_status:
+env:
+  VERCEL_AUTOMATION_BYPASS_SECRET: ${{ secrets.VERCEL_AUTOMATION_BYPASS_SECRET }}
+  PLAYWRIGHT_TEST_BASE_URL: ${{ github.event.deployment_status.target_url }}
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    if: github.event.deployment_status.state == 'success'
+    steps:
+    - name: Url of the deployment
+      run: echo $PLAYWRIGHT_TEST_BASE_URL
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version: lts/*
+    - name: Install dependencies
+      run: npm install -g yarn && yarn
+    - name: Install Playwright
+      run: npx playwright install --with-deps
+    - name: Run Playwright tests
+      run: npx playwright test
+    - uses: actions/upload-artifact@v4
+      if: always()
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30

app/checkout/checkout-client.tsx

@@ -95,7 +95,7 @@ export default function CheckoutClient() {
               return (
                 <div className="mt-3" key={field.name}>
                   { field.type && field.type == 'hidden' ? null 
-                  : <label htmlFor="email" className="block text-sm font-medium leading-6 text-white capitalize">
+                  : <label htmlFor={field.name} className="block text-sm font-medium leading-6 text-white capitalize">
                       {field.label || field.name }
                     </label>
                   }

components/nav/nav-items.tsx

@@ -42,7 +42,7 @@ export default function NavItems({ navs }: { navs: any }) {
   const { theme } = useLayout();
   const searchParams = useSearchParams()
   const draft = searchParams.get('draft')
-  const filteredNavs = draft || process.env.NODE_ENV == 'development' ? navs : navs.filter((item)=>{return item.visible})
+  const filteredNavs = draft ? navs : navs.filter((item)=>{return item.visible})
   return (
     <>
       {draft ? (<a className="block text-xs bg-chillired-800 text-white w-96 text-center rounded-b-md absolute right-0 z-50" href="/">Currently showing Draft Content, Click to Hide</a>) : null}

components/nav/nav-mobile.tsx

@@ -4,7 +4,7 @@ import { useSearchParams } from 'next/navigation'
 export default function NavMobile({ navs }: { navs: any }) {
   const searchParams = useSearchParams()
   const draft = searchParams.get('draft')
-  const filteredNavs = draft || process.env.NODE_ENV == 'development' ? navs : navs.filter((item)=>{return item.visible})
+  const filteredNavs = draft ? navs : navs.filter((item)=>{return item.visible})
   return (
     <div className="mt-6 flow-root">
       <div className="-my-6 divide-y divide-gray-500/10">

components/preferences/MealPreferences.tsx

@@ -101,6 +101,7 @@ const MealPreferences = ({preferences,setPreferences}) =>{
 
         { preferences.dietary_requirements.selected.includes('other') ? (
           <div className="mt-6">
+            <label htmlFor="other" className=''>Please give more details</label>
           <textarea
             id="other"
             name="other"

components/ticketing/PassCard.tsx

@@ -13,6 +13,7 @@ export const PassCard = ({passName, clickFunction, pass, priceModel, hasASaving,
     <div
       onClick={clickFunction}
       key={passName}
+      title={passName}
       className={`relative flex flex-col justify-between rounded-3xl bg-richblack-600 ${passPadding} shadow-xl 
       ring-1 ring-gray-900/10  text-white border border-richblack-500 ${hoverClasses} ${cardWidthClasses}`}
     >

components/ticketing/PricingTable.tsx

@@ -119,7 +119,7 @@ const PricingTable = ({fullPassFunction,scrollToElement}:{fullPassFunction?:Func
         priceModel={priceModel}
       />
 
-      <div className="mx-auto w-full  max-w-2xl  items-start mt-10 mb-10 rounded-lg border border-gray-900 bg-gray-50 text-richblack-700 shadow-lg">
+      <div title="Checkout" className="mx-auto w-full  max-w-2xl  items-start mt-10 mb-10 rounded-lg border border-gray-900 bg-gray-50 text-richblack-700 shadow-lg">
       { priceModel === 'studentCost' && totalCost && totalCost > 0 ? (
           <div className='rounded-t-md border-t-gray-600 border border-b-0 border-l-0 border-r-0 bg-gold-500 p-2 font-bold text-center'>This is a student only ticket deal!</div>) 
         : null }

content/global/index.json

@@ -28,7 +28,7 @@
         "visible": true
       },
       {
-        "href": "/pricing",
+        "href": "pricing",
         "label": "Passes",
         "visible": false
       },

package.json

@@ -12,7 +12,9 @@
     "dev:build": "next build"
   },
   "devDependencies": {
+    "@faker-js/faker": "^8.4.1",
     "@next/bundle-analyzer": "^14.2.5",
+    "@playwright/test": "^1.46.0",
     "@svgr/webpack": "^8.1.0",
     "@tinacms/cli": "^1.5.53",
     "@types/js-cookie": "^3.0.0",

playwright.config.ts

@@ -0,0 +1,88 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// import dotenv from 'dotenv';
+// dotenv.config({ path: path.resolve(__dirname, '.env') });
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './tests',
+  /* Run tests in files in parallel */
+  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. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: process.env.PLAYWRIGHT_TEST_BASE_URL || 'http://localhost:3000',
+    // Populates context with given storage state.
+    // storageState: 'state.json',
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+    extraHTTPHeaders: {
+      'x-vercel-protection-bypass': process.env.VERCEL_AUTOMATION_BYPASS_SECRET,
+      'x-vercel-set-bypass-cookie': 'samesitenone'
+    }
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+      testIgnore: /.*mobile.spec.ts/,
+    },
+
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+      testIgnore: /.*mobile.spec.ts/,
+    },
+
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+      testIgnore: /.*mobile.spec.ts/,
+    },
+
+    /* Test against mobile viewports. */
+    {
+      name: 'Mobile Chrome',
+      use: { ...devices['Pixel 5'] },
+      testIgnore: /.*desktop.spec.ts/,
+    },
+    {
+      name: 'Mobile Safari',
+      use: { ...devices['iPhone 12'] },
+      testIgnore: /.*desktop.spec.ts/,
+    },
+
+    /* 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,
+  // },
+});