Playwright tests

Author: karpikpl

.dockerignore

@@ -13,3 +13,8 @@ dist/
 .github/
 Dockerfile
 *.md
+azure-deploy/
+infra/
+playwright-report/
+test-results/
+test-results-docker/

.github/workflows/playwright.yml

@@ -0,0 +1,27 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [ main, master ]
+  pull_request:
+    branches: [ main, master ]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version: lts/*
+    - name: Install dependencies
+      run: npm ci
+    - name: Install Playwright Browsers
+      run: npx playwright install --with-deps
+    - name: Run Playwright tests
+      run: npm test
+    - uses: actions/upload-artifact@v4
+      if: ${{ !cancelled() }}
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30

.gitignore

@@ -25,3 +25,8 @@ pnpm-debug.log*
 
 api/public
 test.http
+/test-results/
+/test-results-docker/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

api.Dockerfile

@@ -29,6 +29,7 @@ COPY --chown=1000:1000 api/ .
 # Copy the built Vue.js app from the previous stage
 COPY --chown=1000:1000 --from=build-stage /app/dist /api/public
 COPY --chown=1000:1000 --from=build-stage /app/dist/assets/app-config.js /api/app-config.template.js
+COPY --chown=1000:1000 --from=build-stage /app/mock-data /mock-data
 
 # Expose the port your API will run on
 EXPOSE 3000

api/server.mjs

@@ -45,16 +45,47 @@ const authMiddleware = (req, res, next) => {
   next();
 };
 
+const simpleRequestLogger = (proxyServer, options) => {
+  proxyServer.on('proxyReq', (proxyReq, req, res) => {
+    console.log(`[HPM] [${req.method}] ${req.url}`); // outputs: [HPM] GET /users
+  });
+}
+
+const mockResponses = (proxyServer, options) => {
+  proxyServer.on('proxyReq', (proxyReq, req, res) => {
+    // Do not send to GitHub when mocked
+    switch (req.path) {
+      case "/orgs/octodemo/copilot/usage":
+        res.json(JSON.parse(readFileSync(path.join(__dirname, '../mock-data/organization_response_sample.json'), 'utf8')));
+        break;
+      case "/orgs/octodemo/copilot/billing/seats":
+        res.json(JSON.parse(readFileSync(path.join(__dirname, '../mock-data/organization_response_sample_seats.json'), 'utf8')));
+        break;
+      case "/enterprises/octodemo/copilot/usage":
+        res.json(JSON.parse(readFileSync(path.join(__dirname, '../mock-data/enterprise_response_sample.json'), 'utf8')));
+        break;
+      case "/enterprises/octodemo/copilot/billing/seats":
+        res.json(JSON.parse(readFileSync(path.join(__dirname, '../mock-data/enterprise_response_sample_seats.json'), 'utf8')));
+        break;
+      default:
+        res.status(418).send('🫖Request Not Mocked');
+    }
+  });
+}
+
+const plugins = [simpleRequestLogger];
+
+if (process.env.APP_MOCKED_DATA === 'true') {
+  plugins.push(mockResponses);
+}
+
 const githubProxy = createProxyMiddleware({
   target: 'https://api.github.com',
   changeOrigin: true,
   pathRewrite: {
     '^/api/github': '', // Rewrite URL path (remove /api/github)
   },
-  onProxyReq: (proxyReq, req) => {
-    console.log('Proxying request to GitHub API:', req.url);
-    // Optional: Modify the proxy request here (e.g., headers)
-  },
+  plugins
 });
 
 // Apply middlewares to the app

docker-compose.ent.override.yml

@@ -0,0 +1,14 @@
+version: '3.8'
+
+services:
+  api:
+    environment:
+      # Determines the scope of the API calls. 
+      # Can be 'enterprise' or 'organization' to target API calls to an enterprise or an organization respectively.
+      - VUE_APP_SCOPE=enterprise
+      # Determines the enterprise or organization name to target API calls.
+      - VUE_APP_GITHUB_ORG=
+      - VUE_APP_GITHUB_ENT=octodemo
+
+  playwright:
+    command: npx playwright test --output test-results-docker --grep @ent

docker-compose.yml

@@ -0,0 +1,40 @@
+version: '3.8'
+
+services:
+  api:
+    build:
+      context: .
+      dockerfile: api.Dockerfile
+    ports: 
+      - "3000:3000"
+    environment:
+      - NODE_ENV=production
+      # Determines if mocked data should be used instead of making API calls.
+      - VUE_APP_MOCKED_DATA=false
+      # Mock requests in the API not UI
+      - APP_MOCKED_DATA=true
+      # Determines the scope of the API calls. 
+      # Can be 'enterprise' or 'organization' to target API calls to an enterprise or an organization respectively.
+      - VUE_APP_SCOPE=organization
+      # Determines the enterprise or organization name to target API calls.
+      - VUE_APP_GITHUB_ORG=octodemo
+      - VUE_APP_GITHUB_ENT=
+      - VUE_APP_GITHUB_TOKEN=dummy
+      # GitHub Api Url
+      # for proxy api - set to /api/github defaults to https://api.github.com
+      - VUE_APP_GITHUB_API=/api/github
+      - SESSION_SECRET=secret
+
+  playwright:
+    image: mcr.microsoft.com/playwright:v1.49.1
+    environment:
+      - TEST_URL=http://api:3000
+      - CI=true
+    volumes:
+      - .:/workspace
+    working_dir: /workspace
+    command: npx playwright test --output test-results-docker --grep @org
+    ipc: host
+    profiles: [tests]
+    depends_on:
+      - api