mqtt-explorer/.github/workflows/tests.yml

on:
  pull_request_target: # Use pull_request_target
    branches: [master, beta, release]

jobs:
  test:
    runs-on: ubuntu-latest
    container:
      image: ghcr.io/thomasnordquist/mqtt-explorer-ui-tests:latest
      volumes:
        - ./:/app
      options: --user root
    steps:
      - uses: actions/checkout@v4
        with:
          ref: ${{ github.event.pull_request.head.sha }}
      - name: Install Packages
        run: yarn install --frozen-lockfile
      - name: Build
        run: yarn build
      - name: Test
        run: yarn test

  browser-ui-tests:
    runs-on: ubuntu-latest
    container:
      image: ghcr.io/thomasnordquist/mqtt-explorer-ui-tests:latest
      volumes:
        - ./:/app
      options: --user root
    steps:
      - uses: actions/checkout@v4
        with:
          ref: ${{ github.event.pull_request.head.sha }}
      - name: Install Packages
        run: yarn install --frozen-lockfile
      - name: Build Browser Mode
        run: yarn build:server
      - name: Run Browser UI Tests
        timeout-minutes: 10
        run: ./scripts/runBrowserTests.sh
      - name: Upload Test Screenshots
        if: always()
        uses: actions/upload-artifact@v4
        with:
          name: browser-test-screenshots
          path: |
            test-screenshot-*.png
          retention-days: 30

  demo-video:
    runs-on: ubuntu-latest
    container:
      image: ghcr.io/thomasnordquist/mqtt-explorer-ui-tests:latest
      volumes:
        - ./:/app
      options: --user root
    steps:
      - uses: actions/checkout@v4
        with:
          ref: ${{ github.event.pull_request.head.sha }}
      - name: Install Packages
        run: yarn install --frozen-lockfile
      - name: Build
        run: yarn build
      - name: Generate Demo Video
        run: yarn ui-test
      - name: Post-processing
        run: ./scripts/prepareVideo.sh
      - name: Generate unique filename
        id: filename
        run: |
          TIMESTAMP=$(date +%Y%m%d-%H%M%S)
          FILENAME="pr-${{ github.event.pull_request.number }}-${TIMESTAMP}.gif"
          echo "filename=${FILENAME}" >> $GITHUB_OUTPUT
      - name: Install AWS CLI v2
        run: |
          apt-get update && apt-get install -y unzip
          curl "https://awscli.amazonaws.com/awscli-exe-linux-x86_64.zip" -o "awscliv2.zip"
          unzip -q awscliv2.zip
          ./aws/install
          rm -rf aws awscliv2.zip
      - name: Configure AWS credentials
        uses: aws-actions/configure-aws-credentials@v4
        with:
          aws-access-key-id: ${{ vars.AWS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          aws-region: 'eu-central-1'
      - name: Upload to S3
        id: upload
        env:
          AWS_BUCKET: ${{ vars.AWS_BUCKET }}
          FILENAME: ${{ steps.filename.outputs.filename }}
        run: |
          aws s3api put-object \
            --bucket ${AWS_BUCKET} \
            --key artifacts/${FILENAME} \
            --body ./ui-test.gif
      - name: Generate file URL
        id: fileurl
        env:
          AWS_BUCKET: ${{ vars.AWS_BUCKET }}
          FILENAME: ${{ steps.filename.outputs.filename }}
        run: |
          FILE_URL="https://${AWS_BUCKET}.s3.eu-central-1.amazonaws.com/${FILENAME}"
          echo "file-url=${FILE_URL}" >> $GITHUB_OUTPUT
          echo "Uploaded to: ${FILE_URL}"
      - name: Show URL
        run: echo '${{ steps.fileurl.outputs.file-url }}'
        id: artifact-upload-step
      - run: echo '<picture><img src="${{ steps.fileurl.outputs.file-url }}"></picture>' \
          >> $GITHUB_STEP_SUMMARY
      - name: Post video to PR
        uses: actions/github-script@v7
        env:
          VIDEO_URL: ${{ steps.fileurl.outputs.file-url }}
        with:
          github-token: ${{ secrets.GITHUB_TOKEN }}
          script: |
            const videoUrl = process.env.VIDEO_URL;
            github.rest.issues.createComment({
              owner: context.repo.owner,
              repo: context.repo.repo,
              issue_number: context.issue.number,
              body: `## 🎬 Demo Video Generated\n\n![Demo Video](${videoUrl})\n\n_This video will expire in 90 days._`
            });

  test-browser:
    runs-on: ubuntu-latest
    services:
      mosquitto:
        image: eclipse-mosquitto:2
        ports:
          - 1883:1883
        options: >-
          --health-cmd "mosquitto_sub -t '$SYS/#' -C 1"
          --health-interval 10s
          --health-timeout 5s
          --health-retries 5
    steps:
      - uses: actions/checkout@v4
        with:
          ref: ${{ github.event.pull_request.head.sha }}
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '24'
      - name: Install Dependencies
        run: yarn install --frozen-lockfile
      - name: Build Browser Mode
        run: yarn build:server
      - name: Test App
        run: yarn test:app
      - name: Test Backend
        run: yarn test:backend
      - name: Start Server in Background
        run: |
          yarn start:server &
          echo $! > server.pid
        env:
          MQTT_EXPLORER_USERNAME: test
          MQTT_EXPLORER_PASSWORD: test123
          PORT: 3000
      - name: Wait for Server
        run: |
          timeout 30 bash -c 'until curl -f http://localhost:3000; do sleep 1; done'
      - name: Browser Smoke Test
        run: |
          # Test server is running
          curl -f http://localhost:3000 || exit 1
          echo "Browser mode server is running successfully"
      - name: Stop Server
        if: always()
        run: |
          if [ -f server.pid ]; then
            kill $(cat server.pid) || true
            rm server.pid
          fi