Add an E2E test

Author: Jan Waś

.github/workflows/ci.yml

@@ -25,30 +25,42 @@ jobs:
       - name: Build and test frontend
         run: yarn build
 
-      - name: Check for backend
-        id: check-for-backend
-        run: |
-          if [ -f "Magefile.go" ]
-          then
-            echo "::set-output name=has-backend::true"
-          fi
-
       - name: Setup Go environment
-        if: steps.check-for-backend.outputs.has-backend == 'true'
         uses: actions/setup-go@v5
         with:
           go-version: "1.22"
 
       - name: Test backend
-        if: steps.check-for-backend.outputs.has-backend == 'true'
         uses: magefile/mage-action@v3
         with:
           version: latest
           args: coverage
 
       - name: Build backend
-        if: steps.check-for-backend.outputs.has-backend == 'true'
         uses: magefile/mage-action@v3
         with:
           version: latest
           args: buildAll
+
+      - name: End to end test
+        run: |
+          docker network create trino
+
+          docker run \
+            --rm --detach \
+            --name trino \
+            --net trino \
+            trinodb/trino:468
+
+          docker run \
+            --rm --detach \
+            --name grafana \
+            --net trino \
+            --publish 3000:3000 \
+            --volume "$(pwd):/var/lib/grafana/plugins/trino" \
+            --env "GF_PLUGINS_ALLOW_LOADING_UNSIGNED_PLUGINS=trino-datasource" \
+           grafana/grafana:11.4.0
+
+           npx tsc -p tsconfig.json --noEmit
+           npx playwright install
+           npx playwright test

.gitignore

@@ -29,3 +29,7 @@ e2e-results/
 # Editor
 .idea
 .vscode
+
+# Playwright
+playwright-report/
+test-results

jest.config.js

@@ -4,5 +4,9 @@
 
 const standard = require('@grafana/toolkit/src/config/jest.plugin.config');
 
+
+var jestConfig = standard.jestConfig();
+jestConfig.testPathIgnorePatterns = ["/node_modules/", "e2e.test.ts"]
+
 // This process will use the same config that `yarn test` is using
-module.exports = standard.jestConfig();
+module.exports = jestConfig;

package.json

@@ -20,6 +20,7 @@
     "@grafana/runtime": "9.5.2",
     "@grafana/toolkit": "9.5.2",
     "@grafana/ui": "9.5.2",
+    "@playwright/test": "1.33.0",
     "@types/lodash": "4.14.195",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

playwright.config.ts

@@ -0,0 +1,21 @@
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  testDir: 'src',
+  testMatch: 'e2e*.test.ts',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: 'html',
+  use: {
+    baseURL: 'http://127.0.0.1:3000',
+    trace: 'on-first-retry',
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ]
+});

src/e2e.test.ts

@@ -0,0 +1,28 @@
+import { test, expect } from '@playwright/test';
+
+test('test', async ({ page }) => {
+  await page.goto('http://localhost:3000/login');
+  await page.getByTestId('data-testid Username input field').fill('admin');
+  await page.getByTestId('data-testid Password input field').fill('admin');
+  await page.getByTestId('data-testid Login button').click();
+  await page.getByTestId('data-testid Skip change password button').click();
+  await page.getByTestId('data-testid Toggle menu').click();
+  await page.getByRole('link', { name: 'Connections' }).click();
+  await page.getByRole('link', { name: 'Trino' }).click();
+  await page.locator('.css-1yhi3xa').click();
+  await page.getByRole('button', { name: 'Add new data source' }).click();
+  await page.getByTestId('data-testid Datasource HTTP settings url').fill('http://trino:8080');
+  await page.locator('div').filter({ hasText: /^Impersonate logged in userAccess token$/ }).getByLabel('Toggle switch').click();
+  await page.locator('input[type="password"]').fill('aaa');
+  await page.getByTestId('data-testid Data source settings page Save and Test button').click();
+  await page.getByLabel('Explore data').click();
+  await page.getByTestId('data-testid TimePicker Open Button').click();
+  await page.getByTestId('data-testid Time Range from field').fill('1995-01-01');
+  await page.getByTestId('data-testid Time Range to field').fill('1995-12-31');
+  await page.getByTestId('data-testid TimePicker submit button').click();
+  await page.locator('div').filter({ hasText: /^Format asChoose$/ }).locator('svg').click();
+  await page.getByRole('option', { name: 'Table' }).click();
+  await page.getByTestId('data-testid Code editor container').click();
+  await page.getByTestId('data-testid RefreshPicker run button').click();
+  await expect(page.getByTestId('data-testid table body')).toContainText(/.*1995-01-19 0.:00:005703857F.*/);
+});

src/types.ts

@@ -27,13 +27,13 @@ export const SelectableFormatOptions: Array<SelectableValue<FormatOptions>> = [
 
 export const defaultQuery: Partial<TrinoQuery> = {
   rawSQL: `SELECT
-  $__timeGroup(time_column, '1h'),
-  value_column as value,
-  series_column as metric
+  $__timeGroup(orderdate, '1w'),
+  sum(totalprice) as value,
+  orderstatus as metric
 FROM
-  catalog_name.schema_name.table_name
+  tpch.tiny.orders
 WHERE
-  $__timeFilter(time_column)
+  $__timeFilter(orderdate)
 GROUP BY
   1, 3
 ORDER BY

yarn.lock

@@ -2119,6 +2119,16 @@
   resolved "https://registry.yarnpkg.com/@petamoriken/float16/-/float16-3.7.1.tgz#4a0cc0854a3a101cc2d697272f120e1a05975ce5"
   integrity sha512-oXZOc+aePd0FnhTWk15pyqK+Do87n0TyLV1nxdEougE95X/WXWDqmQobfhgnSY7QsWn5euZUWuDVeTQvoQ5VNw==
 
+"@playwright/[email protected]":
+  version "1.33.0"
+  resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.33.0.tgz#669ef859efb81b143dfc624eef99d1dd92a81b67"
+  integrity sha512-YunBa2mE7Hq4CfPkGzQRK916a4tuZoVx/EpLjeWlTVOnD4S2+fdaQZE0LJkbfhN5FTSKNLdcl7MoT5XB37bTkg==
+  dependencies:
+    "@types/node" "*"
+    playwright-core "1.33.0"
+  optionalDependencies:
+    fsevents "2.3.2"
+
 "@popperjs/[email protected]", "@popperjs/core@^2.11.5":
   version "2.11.6"
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.6.tgz#cee20bd55e68a1720bdab363ecf0c821ded4cd45"
@@ -5482,7 +5492,7 @@ fs.realpath@^1.0.0:
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
   integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
 
-fsevents@^2.3.2, fsevents@~2.3.2:
+fsevents@2.3.2, fsevents@^2.3.2, fsevents@~2.3.2:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
   integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
@@ -7694,6 +7704,11 @@ pkg-up@^3.1.0:
   dependencies:
     find-up "^3.0.0"
 
+[email protected]:
+  version "1.33.0"
+  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.33.0.tgz#269efe29a927cd6d144d05f3c2d2f72bd72447a1"
+  integrity sha512-aizyPE1Cj62vAECdph1iaMILpT0WUDCq3E6rW6I+dleSbBoGbktvJtzS6VHkZ4DKNEOG9qJpiom/ZxO+S15LAw==
+
 pngjs@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-6.0.0.tgz#ca9e5d2aa48db0228a52c419c3308e87720da821"