Merge branch 'fix-e2e'

.gitattributes

@@ -6,7 +6,7 @@
 /art                    export-ignore
 /docker                 export-ignore
 /docs                   export-ignore
-/playwright             export-ignore
+/e2e                    export-ignore
 /tests                  export-ignore
 /wrapper-mingle         export-ignore
 /.dockerignore          export-ignore

.github/workflows/run-e2e-tests.yml

@@ -1,40 +1,41 @@
 name: Create and Test Project
 
-#on:
-#  workflow_dispatch:
-#  push:
-#    branches: [ "main" ]
-#  pull_request:
-#    branches: [ "main" ]
-
+on:
+  workflow_dispatch:
+  push:
 
 jobs:
-
-  test-project-e2e:
+  test-e2e:
+    timeout-minutes: 15
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
+      - uses: shivammathur/setup-php@v2
+        with:
+          php-version: '8.3'
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
 
-      - name: Set up environment
-        run: |
-          echo "SHA_SHORT=$(git rev-parse --short $GITHUB_SHA)" >> $GITHUB_ENV
-          cd wrapper-mingle ; composer install
-          nohup php artisan serve --host=0.0.0.0 --port=8080 > /dev/null &
-          cd ..
-          curl http://localhost:8080
-
-      - name: Create and Test Project
-        if: ${{ false }}
+      - name: Set up webserver and Test Project
         run: |
-          cd playwright
+          ./run prepare:repo
+          ./run prepare:container
+          touch wrapper-mingle/database/database.sqlite
+          docker compose run --rm webapp php artisan migrate
+          cd wrapper-mingle ; npm ci ; npm run build ; cd -
+          ./run dev:server
           npm ci
           npx playwright install --with-deps
-          echo "Installation done".
-          npx playwright test
+          # Build JS
+          # Wait for the webserver to be ready
+          curl http://localhost:8080
+          npx wait-on http://localhost:8080 -t 15s
+          npm run test
 
       - uses: actions/upload-artifact@v4
-        if: ${{ false }}
+        if: always()
         with:
           name: playwright-report
-          path: playwright/playwright-report/
+          path: playwright-report/
           retention-days: 30

.gitignore

@@ -9,3 +9,7 @@ testbench.yaml
 vendor
 node_modules
 .env
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

docker-compose.yml

@@ -1,31 +1,25 @@
 services:
-    laravel.test:
+      webapp:
         build:
-            context: ./wrapper-mingle/vendor/laravel/sail/runtimes/8.3
-            dockerfile: Dockerfile
-            args:
-                WWWGROUP: '${WWWGROUP}'
-        image: sail-8.3/app
+          context: .
+          dockerfile: docker/dev/runtimes/php/Dockerfile
+          args:
+            USER_ID: $USER_ID
+            GROUP_ID: $GROUP_ID
+        image: minglejs-wrapper
         extra_hosts:
             - 'host.docker.internal:host-gateway'
         ports:
-            - '${APP_PORT:-80}:80'
+            - '${APP_PORT:-8080}:8080'
             - '${VITE_PORT:-5173}:${VITE_PORT:-5173}'
-        environment:
-            WWWUSER: '${WWWUSER}'
-            LARAVEL_SAIL: 1
-            XDEBUG_MODE: '${SAIL_XDEBUG_MODE:-off}'
-            XDEBUG_CONFIG: '${SAIL_XDEBUG_CONFIG:-client_host=host.docker.internal}'
-            IGNITION_LOCAL_SITES_PATH: '${PWD}'
         volumes:
             # The wrapper app is mounted to `/var/www/html` folder, as a regular website
             - './wrapper-mingle:/var/www/html'
             # The root dir is mounted on another folder.
             # The wrapper app will use this from composer.json configuration.
             - '.:/var/www/html/packages/mingle'
         networks:
-            - sail
-        depends_on: {  }
+            - web
+
 networks:
-    sail:
-        driver: bridge
+    web:

docker/dev/runtimes/php/Dockerfile

@@ -0,0 +1,30 @@
+############################################
+# Base Image
+############################################
+FROM serversideup/php:8.3-fpm-nginx-bookworm-v3.3.0-beta3 as base
+
+############################################
+# Development Image
+############################################
+FROM base as development
+
+# Switch to root so we can do root things
+USER root
+
+# Save the build arguments as a variable
+ARG USER_ID
+ARG GROUP_ID
+
+# Install extensions
+RUN install-php-extensions intl
+
+# Use the build arguments to change the UID
+# and GID of www-data while also changing
+# the file permissions for NGINX
+RUN docker-php-serversideup-set-id www-data $USER_ID:$GROUP_ID && \
+    \
+    # Update the file permissions for our NGINX service to match the new UID/GID
+    docker-php-serversideup-set-file-permissions --owner $USER_ID:$GROUP_ID --service nginx
+
+# Drop back to our unprivileged user
+USER www-data

e2e/example.spec.js

@@ -0,0 +1,34 @@
+// @ts-check
+const { test, expect } = require('@playwright/test');
+
+test('has title', async ({ page }) => {
+  await page.goto('https://playwright.dev/');
+
+  // Expect a title "to contain" a substring.
+  await expect(page).toHaveTitle(/Playwright/);
+});
+
+test('get started link', async ({ page }) => {
+  await page.goto('https://playwright.dev/');
+
+  // Click the get started link.
+  await page.getByRole('link', { name: 'Get started' }).click();
+
+  // Expects page to have a heading with the name of Installation.
+  await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
+});
+
+test('homepage', async ({page}) => {
+    await page.goto('/')
+    const locator = page.locator('body')
+    await expect(locator).toHaveText(/MingleJS Demo/)
+})
+
+test('livewire demo', async ({page}) => {
+
+    await page.goto('/demo-with-livewire')
+
+    const locator = page.locator('body')
+    await expect(locator).toHaveText(/Counter component with Livewire/)
+
+})

package.json

@@ -0,0 +1,13 @@
+{
+  "dependencies": {
+    "playwright": "^1.45.2"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.45.2",
+    "@types/node": "^20.14.11"
+  },
+  "scripts": {
+    "test": "npx playwright test",
+    "test:headed": "npx playwright test --headed"
+  }
+}

playwright.config.js

@@ -0,0 +1,82 @@
+// @ts-check
+const {defineConfig, devices} = require('@playwright/test')
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config({ path: path.resolve(__dirname, '.env') });
+
+const projectUrl = 'http://localhost:8080'
+
+/**
+ * @see https://playwright.dev/docs/test-configuration
+ */
+module.exports = defineConfig({
+    testDir: './e2e',
+    /* 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: projectUrl,
+
+        /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+        trace: 'on-first-retry',
+    },
+
+    /* Configure projects for major browsers */
+    projects: [
+        {
+            name: 'chromium',
+            use: {...devices['Desktop Chrome']},
+        },
+
+        // {
+        //   name: 'firefox',
+        //   use: { ...devices['Desktop Firefox'] },
+        // },
+        //
+        // {
+        //   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: './run dev:server',
+        timeout: 30 * 1000,
+        url: projectUrl,
+        reuseExistingServer: true,
+    },
+})
+