Update E2E workflow using Docker (#117)

* e2e flow updated

* empty line

* Formatting

* load ts updated

* revert changes

* upd e2e docker

* test case added

---------

Co-authored-by: Mikhail Volkov <mikhail@volkovlabs.io>

.eslintignore

@@ -11,4 +11,4 @@ postgres/
 
 # Playwright tests
 playwright.config.ts
-test/panel.spec.ts
+test/

.github/workflows/e2e.yml

@@ -27,17 +27,14 @@ jobs:
       - name: Build
         run: npm run build
 
-      - name: Setup playwright browser
-        run: npx playwright install --with-deps chromium
-
       - name: Start Grafana
-        run: docker-compose up -d
+        run: docker compose --profile dev up -d
 
       - name: Run e2e tests
-        run: npm run test:e2e
+        run: npm run test:e2e:docker
 
       - name: Stop Grafana
-        run: docker-compose down
+        run: docker compose down
 
       - uses: actions/upload-artifact@v4
         if: ${{ !cancelled() }}

.github/workflows/main.yml

@@ -32,19 +32,18 @@ jobs:
       - name: Build
         run: npm run build
 
-      - name: Sign plugin
-        run: npm run sign
-        env:
-          GRAFANA_ACCESS_POLICY_TOKEN: ${{ secrets.GRAFANA_ACCESS_POLICY_TOKEN }}
-
-      - name: Setup playwright browser
-        run: npx playwright install --with-deps chromium
-
       - name: Start Grafana
-        run: docker-compose -f test/docker-compose.yml up -d
+        run: docker compose --profile main up -d
 
       - name: Run e2e tests
-        run: npm run test:e2e
+        run: npm run test:e2e:docker
 
       - name: Stop Grafana
         run: docker-compose down
+
+      - uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

CHANGELOG.md

@@ -7,7 +7,8 @@
 - Updated video overview (#100)
 - Added plugin e2e tests and remove cypress (#101, #102, #103, #105)
 - Added ability to load image, videos from URL and video toolbar (#111)
-- Update to Grafana 11 and dependencies (#114)
+- Updated to Grafana 11 and dependencies (#114)
+- Updated E2E workflow using Docker (#117)
 
 ## 5.0.0 (2024-03-25)
 

docker-compose.yml

@@ -17,6 +17,9 @@ services:
       - 5432:5432
     volumes:
       - ./postgres:/docker-entrypoint-initdb.d
+    profiles:
+      - dev
+      - main
 
   pdf-loader:
     build: ./postgres
@@ -27,6 +30,9 @@ services:
     depends_on:
       postgres:
         condition: service_healthy
+    profiles:
+      - dev
+      - main
 
   grafana:
     container_name: grafana
@@ -40,3 +46,34 @@ services:
     volumes:
       - ./dist:/var/lib/grafana/plugins/volkovlabs-image-panel
       - ./provisioning:/etc/grafana/provisioning
+    profiles:
+      - dev
+
+  grafana-main:
+    container_name: grafana-main
+    image: grafana/grafana:main
+    ports:
+      - 3000:3000/tcp
+    environment:
+      - GF_DEFAULT_APP_MODE=development
+      - GF_USERS_DEFAULT_THEME=light
+      - GF_INSTALL_PLUGINS=marcusolsson-static-datasource
+    volumes:
+      - ./dist:/var/lib/grafana/plugins/volkovlabs-image-panel
+      - ./provisioning:/etc/grafana/provisioning
+    profiles:
+      - main
+
+  test:
+    container_name: test-e2e
+    build:
+      context: .
+      dockerfile: test/Dockerfile
+    environment:
+      - GRAFANA_URL=http://127.0.0.1:3000
+    volumes:
+      - ./test:/app/test
+      - ./playwright-report:/app/playwright-report
+    network_mode: host
+    profiles:
+      - e2e

package.json

@@ -68,13 +68,14 @@
     "lint": "eslint --ignore-path ./.eslintignore --ext .js,.jsx,.ts,.tsx .",
     "lint:fix": "eslint --fix --ignore-path ./.eslintignore --ext .js,.jsx,.ts,.tsx .",
     "sign": "npx --yes @grafana/sign-plugin@latest",
-    "start": "docker-compose pull && docker-compose up",
-    "start:e2e": "docker-compose -f test/docker-compose.yml up",
-    "stop": "docker-compose down",
+    "start": "docker compose pull grafana && docker compose --profile dev up",
+    "start:main": "docker compose pull grafana-main && docker compose --profile main up",
+    "stop": "docker compose down",
     "stop:e2e": "docker-compose -f test/docker-compose.yml down",
     "test": "jest --watch --onlyChanged",
     "test:ci": "jest --maxWorkers 4 --coverage",
     "test:e2e": "npx playwright test",
+    "test:e2e:docker": "docker compose --profile e2e up",
     "upgrade": "npm upgrade --save"
   },
   "version": "5.1.0"

playwright.config.ts

@@ -7,7 +7,11 @@ const pluginE2eAuth = `${dirname(require.resolve('@grafana/plugin-e2e'))}/auth`;
  * See https://playwright.dev/docs/test-configuration.
  */
 export default defineConfig({
+  /**
+   * Directory with tests
+   */
   testDir: './test',
+
   /**
    * Run tests in files in parallel
    */
@@ -26,7 +30,7 @@ export default defineConfig({
   /**
    * Reporter to use. See https://playwright.dev/docs/test-reporters
    */
-  reporter: 'html',
+  reporter: [['html', { open: 'never' }]],
 
   /**
    * Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions.
@@ -35,7 +39,7 @@ export default defineConfig({
     /**
      * Base URL to use in actions like `await page.goto('/')`.
      */
-    baseURL: 'http://127.0.0.1:3000',
+    baseURL: process.env.GRAFANA_URL || 'http://localhost:3000',
 
     /**
      * Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer.

test/Dockerfile

@@ -0,0 +1,17 @@
+# Get the latest version of Playwright
+FROM mcr.microsoft.com/playwright:focal
+
+# Set the work directory for the application
+WORKDIR app
+
+# COPY the needed files to the app folder in Docker image
+COPY .. .
+
+# Install the dependencies in Node environment
+RUN npm install --only=dev
+
+# Install browsers
+RUN npx playwright install --with-deps chromium
+
+# Run tests
+CMD ["npm", "run", "test:e2e"]

test/panel.spec.ts

@@ -2,6 +2,11 @@ import { test, expect } from '@grafana/plugin-e2e';
 import { TEST_IDS } from '../src/constants';
 
 test.describe('Base64 Image/PDF panel', () => {
+  test('Check grafana version', async ({ grafanaVersion }) => {
+    console.log('Grafana version: ', grafanaVersion);
+    expect(grafanaVersion).toEqual(grafanaVersion);
+  });
+
   test('should display message in case panel data is empty', async ({ gotoDashboardPage, dashboardPage }) => {
     /**
      * Go To E2E dashboard