build(.github) setup end-to-end testing w/ Playwright

.github/workflows/tests-end-to-end-seating.yml

@@ -0,0 +1,244 @@
+name: 'End-to-End Tests - Seating'
+on:
+  pull_request:
+    paths:
+      - 'tests/**.ts'
+      - 'src/**.php'
+      - 'src/resources/**.js'
+      - 'composer.json'
+      - 'composer.lock'
+      - '.github/workflows/tests-end-to-end-seating.yml'
+jobs:
+  test:
+    strategy:
+      fail-fast: false
+      matrix:
+        suite:
+          - seating
+    runs-on: ubuntu-latest
+    steps:
+      # ------------------------------------------------------------------------------
+      # Checkout the repo
+      # ------------------------------------------------------------------------------
+      - name: Checkout the repository
+        uses: actions/checkout@v2
+        with:
+          fetch-depth: 1000
+          token: ${{ secrets.GH_BOT_TOKEN }}
+          submodules: recursive
+      # ------------------------------------------------------------------------------
+      # Checkout slic
+      # ------------------------------------------------------------------------------
+      - name: Checkout slic
+        uses: actions/checkout@v2
+        with:
+          repository: stellarwp/slic
+          ref: main
+          path: slic
+          fetch-depth: 1
+      # ------------------------------------------------------------------------------
+      # Prepare our composer cache directory
+      # ------------------------------------------------------------------------------
+      - name: Get Composer Cache Directory
+        id: get-composer-cache-dir
+        run: |
+          echo "::set-output name=dir::$(composer config cache-files-dir)-${{ secrets.COMPOSER_CACHE_KEY }}"
+      - uses: actions/cache@v2
+        id: composer-cache
+        with:
+          path: ${{ steps.get-composer-cache-dir.outputs.dir }}
+          key: ${{ runner.os }}-composer-${{ secrets.COMPOSER_CACHE_KEY }}-${{ hashFiles('**/composer.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-composer-
+      # ------------------------------------------------------------------------------
+      # Initialize slic
+      # ------------------------------------------------------------------------------
+      - name: Set up slic env vars
+        run: |
+          echo "SLIC_BIN=${GITHUB_WORKSPACE}/slic/slic" >> $GITHUB_ENV
+          echo "SLIC_WP_DIR=${GITHUB_WORKSPACE}/slic/_wordpress" >> $GITHUB_ENV
+          echo "SLIC_WORDPRESS_DOCKERFILE=Dockerfile.base" >> $GITHUB_ENV
+      - name: Set run context for slic
+        run: echo "SLIC=1" >> $GITHUB_ENV && echo "CI=1" >> $GITHUB_ENV
+      - name: Start ssh-agent
+        run: |
+          mkdir -p "${HOME}/.ssh";
+          ssh-agent -a /tmp/ssh_agent.sock;
+      - name: Export SSH_AUTH_SOCK env var
+        run: echo "SSH_AUTH_SOCK=/tmp/ssh_agent.sock" >> $GITHUB_ENV
+      - name: Set up slic for CI
+        run: |
+          cd ${GITHUB_WORKSPACE}/..
+          ${SLIC_BIN} here
+          ${SLIC_BIN} interactive off
+          ${SLIC_BIN} build-prompt off
+          ${SLIC_BIN} build-subdir off
+          ${SLIC_BIN} xdebug off
+          ${SLIC_BIN} composer-cache set /home/runner/.cache/composer
+          ${SLIC_BIN} debug on
+          ${SLIC_BIN} info
+          ${SLIC_BIN} config
+      # ------------------------------------------------------------------------------
+      # Start the Chrome container
+      # ------------------------------------------------------------------------------
+      - name: Start the Chrome container
+        run: ${SLIC_BIN} up chrome
+      # ------------------------------------------------------------------------------
+      # Fetch branches for dependent repos
+      # ------------------------------------------------------------------------------
+      - name: Fetch head branch from TEC
+        uses: octokit/[email protected]
+        id: fetch-tec-head-branch
+        with:
+          route: GET /repos/{owner}/{repo}/branches/${{ github.head_ref }}
+          owner: the-events-calendar
+          repo: the-events-calendar
+        env:
+          GITHUB_TOKEN: ${{ secrets.GH_BOT_TOKEN }}
+        continue-on-error: true
+      - name: Fetch base branch from TEC
+        uses: octokit/[email protected]
+        id: fetch-tec-base-branch
+        if: steps.fetch-tec-head-branch.outcome != 'success'
+        with:
+          route: GET /repos/{owner}/{repo}/branches/${{ github.base_ref }}
+          owner: the-events-calendar
+          repo: the-events-calendar
+        env:
+          GITHUB_TOKEN: ${{ secrets.GH_BOT_TOKEN }}
+        continue-on-error: true
+      # ------------------------------------------------------------------------------
+      # Set TEC branch
+      # ------------------------------------------------------------------------------
+      - name: Set TEC with head branch
+        if: steps.fetch-tec-head-branch.outcome == 'success'
+        run: echo "TEC_BRANCH=${{ github.head_ref }}" >> $GITHUB_ENV
+      - name: Set TEC with base branch
+        if: steps.fetch-tec-head-branch.outcome != 'success' && steps.fetch-tec-base-branch.outcome == 'success'
+        run: echo "TEC_BRANCH=${{ github.base_ref }}" >> $GITHUB_ENV
+      - name: Set TEC with master branch
+        if: steps.fetch-tec-head-branch.outcome != 'success' && steps.fetch-tec-base-branch.outcome != 'success'
+        run: echo "TEC_BRANCH=master" >> $GITHUB_ENV
+      # ------------------------------------------------------------------------------
+      # Clone and init TEC
+      # ------------------------------------------------------------------------------
+      - name: Clone TEC
+        uses: actions/checkout@v2
+        with:
+          fetch-depth: 1
+          repository: the-events-calendar/the-events-calendar
+          ref: ${{ env.TEC_BRANCH }}
+          token: ${{ secrets.GH_BOT_TOKEN }}
+          path: the-events-calendar
+          submodules: recursive
+      - name: Init TEC (including npm)
+        run: |
+          mv ${GITHUB_WORKSPACE}/the-events-calendar ${GITHUB_WORKSPACE}/../the-events-calendar
+          docker network prune -f
+          ${SLIC_BIN} use the-events-calendar
+          ${SLIC_BIN} composer install --no-dev
+          ${SLIC_BIN} npm install
+          ${SLIC_BIN} npm run build
+      - name: Set up TEC Common (including npm)
+        run: |
+          docker network prune -f
+          ${SLIC_BIN} use the-events-calendar/common
+          ${SLIC_BIN} composer install --no-dev
+          ${SLIC_BIN} npm install
+          ${SLIC_BIN} npm run build
+      # ------------------------------------------------------------------------------
+      # Set up ET Common
+      # ------------------------------------------------------------------------------
+      - name: Set up ET Common (including npm)
+        run: |
+          docker network prune -f
+          ${SLIC_BIN} use event-tickets/common
+          ${SLIC_BIN} composer install --no-dev
+          ${SLIC_BIN} npm install
+          ${SLIC_BIN} npm run build
+      # ------------------------------------------------------------------------------
+      # Set up ET (including npm)
+      # ------------------------------------------------------------------------------
+      - name: Set up ET
+        run: |
+          ${SLIC_BIN} use event-tickets
+          ${SLIC_BIN} composer install
+          ${SLIC_BIN} npm install
+          ${SLIC_BIN} npm run build
+      # ------------------------------------------------------------------------------
+      # Init WordPress container
+      # ------------------------------------------------------------------------------
+      - name: Init the WordPress container
+        run: |
+          ${SLIC_BIN} up wordpress
+          ${SLIC_BIN} wp core version
+          ${SLIC_BIN} wp core update --force --version=6.4.1
+          ${SLIC_BIN} wp core version
+      # ------------------------------------------------------------------------------
+      # Install and activate TwentyTwenty
+      # ------------------------------------------------------------------------------
+      - name: Install and activate TwentyTwenty
+        run:  ${SLIC_BIN} wp theme install twentytwenty --activate
+      # ------------------------------------------------------------------------------
+      # Install Playwright dependencies (chromium)
+      # ------------------------------------------------------------------------------
+      - name: Install Playwright dependencies
+        run: ${SLIC_BIN} playwright install
+        env:
+          CI: 'true'
+      # ------------------------------------------------------------------------------
+      # Clone, init and spin up the Seating service
+      # ------------------------------------------------------------------------------
+      - name: Clone the Seating service
+        uses: actions/checkout@v2
+        with:
+          fetch-depth: 1
+          repository: the-events-calendar/event-tickets-seating-service
+          ref: id-end-to-end-testing
+          path: event-tickets-seating-service
+          submodules: recursive
+          token: ${{ secrets.GH_BOT_TOKEN }}
+      - name: Set the env var for the Seating service directory
+        id: seating-service-dir
+        run: |
+          mv ${GITHUB_WORKSPACE}/event-tickets-seating-service ${GITHUB_WORKSPACE}/../../event-tickets-seating-service
+          echo "SEATING_SERVICE_DIR=$(realpath ${GITHUB_WORKSPACE}/../../event-tickets-seating-service)" >> $GITHUB_ENV
+      - name: Change directory to the Seating service one
+        run: cd ${SEATING_SERVICE_DIR}
+      - name: Setup node
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: .nvmrc
+      - name: Init the Seating service
+        run: |
+          npm ci
+          npm run build
+      - name: Install pm2
+        run: |
+          npm install -g pm2
+          pm2 -V
+          pm2 list
+      - name: Start the Seating service using pm2
+        run: |
+          pm2 start npm --name "seating-ci" -- run local:up
+          pm2 list
+      - name: Change directory back to the workspace
+        run: cd ${GITHUB_WORKSPACE}
+      # ------------------------------------------------------------------------------
+      # Run Playwright tests
+      # ------------------------------------------------------------------------------
+      - name: Run suite tests
+        run: |
+          ${SLIC_BIN} playwright test tests/end-to-end/${{ matrix.suite }}
+        env:
+          CI: 'true'
+      # ------------------------------------------------------------------------------
+      # Upload artifacts (On failure) -- @todo find the location of the artifacts in Playwright
+      # ------------------------------------------------------------------------------
+      - name: Upload artifacts on failure
+        if: ${{ failure() }}
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-${{ matrix.suite }}-report
+          path: tests/_output/playwright/
+          retention-days: 7

playwright.config.ts

@@ -13,7 +13,8 @@ export default defineConfig({
 	testDir: './tests/end-to-end',
 	outputDir: './tests/_output/playwright',
 	preserveOutput: 'failures-only',
-	snapshotPathTemplate: '{testDir}/{testFileDir}/__screenshots__/{testName}-{arg}{ext}',
+	snapshotPathTemplate:
+		'{testDir}/{testFileDir}/__screenshots__/{testName}-{arg}{ext}',
 	updateSnapshots: 'missing',
 	/* Run tests in files in parallel? No, we want to run them in order since they are insisting on the same database. */
 	fullyParallel: false,
@@ -32,6 +33,11 @@ export default defineConfig({
 
 		/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
 		trace: 'on-first-retry',
+
+		viewport: {
+			width: 1200,
+			height: 1100,
+		},
 	},
 	/* Configure projects for major browsers, using only chromium */
 	projects: [