Skip to content

Commit

Permalink
Feat/AN-4120 playwright e2e tests (#93)
Browse files Browse the repository at this point in the history
* add playwright and delete cypress

* add first queryEditor playwright test

* check for header and start and end date

* set minuteIntervalLimitInMilliseconds to 3h1min

* add defaultPercentileValue

* add ids for testing to ui elements in Query Editor

* improve and add more test QueryEditor test cases

* update yarn.lock

* delete example test file

* add e2e test github workflow

* delete console.log and comment Firefox and Safari tests

* fix package conflicts

* fix intervalUtils test

* update yarn to latest version

* delete deprecated --prefer-offline flag

* install @typescript-eslint/eslint-plugin

* delete enableGlobalCache flag in yarnrc

* Revert "delete enableGlobalCache flag in yarnrc"

This reverts commit 8962cba.

* Revert "install @typescript-eslint/eslint-plugin"

This reverts commit 6a070fe.

* Revert "delete deprecated --prefer-offline flag"

This reverts commit a9c7620.

* Revert "update yarn to latest version"

This reverts commit 31e0272.

* add resolutions to solve conflicting package versions

* delete playwright.yml workflow

* fix should send correct query for time series and table data

* fix should send correct query for percentile selection

* add filter test

* add groupBy and orderBy tests

* add queryEditorId to element ids

* add tests to check if data is correctly displayed

* add test for config editor

* deletes commented code in playwright config

* include e2e workflow in the ci workflow

* delete interval and percentile changes as they were addressed in other PRs

* format

* adds unsuccessfull configEditor scenario

* regenerate yarn.lock and delete resolutions in package.json

* Revert "regenerate yarn.lock and delete resolutions in package.json"

This reverts commit 146e89d.

* substitute id with data-testid for elements with HTMLElement Attributes
  • Loading branch information
MGJamJam authored Jul 30, 2024
1 parent b6a1fa2 commit 642d140
Show file tree
Hide file tree
Showing 19 changed files with 1,951 additions and 3,120 deletions.
124 changes: 100 additions & 24 deletions .github/workflows/ci.yml
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,17 @@ permissions: read-all

jobs:
build:
name: Build, lint and unit tests
runs-on: ubuntu-latest
outputs:
plugin-id: ${{ steps.metadata.outputs.plugin-id }}
plugin-version: ${{ steps.metadata.outputs.plugin-version }}
has-e2e: ${{ steps.check-for-e2e.outputs.has-e2e }}
has-backend: ${{ steps.check-for-backend.outputs.has-backend }}
env:
GRAFANA_ACCESS_POLICY_TOKEN: ${{ secrets.GRAFANA_ACCESS_POLICY_TOKEN }}
steps:
- uses: actions/checkout@v4
with:
ref: ${{ github.ref }}

- name: Setup Node.js environment
uses: actions/setup-node@v4
with:
Expand Down Expand Up @@ -65,31 +68,11 @@ jobs:
- name: Check for E2E
id: check-for-e2e
run: |
if [ -d "cypress" ]
if [ -f "playwright.config.ts" ]
then
echo "has-e2e=true" >> $GITHUB_OUTPUT
fi
- name: Start grafana docker
if: steps.check-for-e2e.outputs.has-e2e == 'true'
run: docker-compose up -d

- name: Run e2e tests
if: steps.check-for-e2e.outputs.has-e2e == 'true'
run: yarn run e2e

- name: Stop grafana docker
if: steps.check-for-e2e.outputs.has-e2e == 'true'
run: docker-compose down

- name: Archive E2E output
uses: actions/upload-artifact@v4
if: steps.check-for-e2e.outputs.has-e2e == 'true' && steps.run-e2e-tests.outcome != 'success'
with:
name: cypress-videos
path: cypress/videos
retention-days: 5

- name: Sign plugin
run: yarn run sign
if: ${{ env.GRAFANA_ACCESS_POLICY_TOKEN != '' }}
Expand Down Expand Up @@ -119,3 +102,96 @@ jobs:
name: ${{ steps.metadata.outputs.plugin-id }}-${{ steps.metadata.outputs.plugin-version }}
path: ${{ steps.metadata.outputs.plugin-id }}
retention-days: 5

resolve-versions:
name: Resolve e2e images
runs-on: ubuntu-latest
timeout-minutes: 3
needs: build
if: ${{ needs.build.outputs.has-e2e == 'true' }}
outputs:
matrix: ${{ steps.resolve-versions.outputs.matrix }}
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Resolve Grafana E2E versions
id: resolve-versions
uses: grafana/plugin-actions/e2e-version@main

playwright-tests:
needs: [resolve-versions, build]
timeout-minutes: 15
strategy:
fail-fast: false
matrix:
GRAFANA_IMAGE: ${{fromJson(needs.resolve-versions.outputs.matrix)}}
name: e2e test ${{ matrix.GRAFANA_IMAGE.name }}@${{ matrix.GRAFANA_IMAGE.VERSION }}
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4

- name: Download plugin
uses: actions/download-artifact@v4
with:
path: dist
name: ${{ needs.build.outputs.plugin-id }}-${{ needs.build.outputs.plugin-version }}

- name: Execute permissions on binary
if: needs.build.outputs.has-backend == 'true'
run: |
chmod +x ./dist/gpx_*
- name: Setup Node.js environment
uses: actions/setup-node@v4
with:
node-version: '20'
cache: 'yarn'

- name: Install dev dependencies
run: yarn install --immutable --prefer-offline

- name: Start Grafana
run: |
docker-compose pull
DEVELOPMENT=false GRAFANA_VERSION=${{ matrix.GRAFANA_IMAGE.VERSION }} GRAFANA_IMAGE=${{ matrix.GRAFANA_IMAGE.NAME }} docker-compose up -d
- name: Wait for Grafana to start
uses: nev7n/wait_for_response@v1
with:
url: 'http://localhost:3000/'
responseCode: 200
timeout: 60000
interval: 500

- name: Install Playwright Browsers
run: yarn exec playwright install chromium --with-deps

- name: Run Playwright tests
id: run-tests
run: yarn run e2e

- name: Docker logs
if: ${{ always() && steps.run-tests.outcome == 'failure' }}
run: |
docker logs test-test-datasource >& grafana-server.log
- name: Stop grafana docker
run: docker-compose down

- name: Upload server log
uses: actions/upload-artifact@v4
if: ${{ always() && steps.run-tests.outcome == 'failure' }}
with:
name: ${{ matrix.GRAFANA_IMAGE.NAME }}-v${{ matrix.GRAFANA_IMAGE.VERSION }}-${{github.run_id}}-server-log
path: grafana-server.log
retention-days: 5

# Uncomment this step to upload the Playwright report to Github artifacts.
# If your repository is public, the report will be public on the Internet so beware not to expose sensitive information.
# - name: Upload artifacts
# uses: actions/upload-artifact@v4
# if: ${{ always() && steps.run-tests.outcome == 'failure' }}
# with:
# name: playwright-report-${{ matrix.GRAFANA_IMAGE.NAME }}-v${{ matrix.GRAFANA_IMAGE.VERSION }}-${{github.run_id}}
# path: playwright-report/
# retention-days: 5
10 changes: 7 additions & 3 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -24,11 +24,15 @@ coverage
artifacts/
work/
ci/
e2e-results/
**/cypress/videos
**/cypress/report.json

# Editor
.idea

.eslintcache

# Playwright
/test-results/
/playwright-report/
/blob-report/
/playwright/.cache/
/playwright/.auth/
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,7 @@ This project was generated with `yarn create @grafana/plugin@4.3.0`.
yarn run server
```

6. Run the E2E tests (using Cypress)
6. Run the E2E tests (using Playwright)

```bash
# Spins up a Grafana instance first that we tests against
Expand Down
3 changes: 0 additions & 3 deletions cypress.json

This file was deleted.

10 changes: 0 additions & 10 deletions cypress/integration/01-smoke.spec.ts

This file was deleted.

47 changes: 47 additions & 0 deletions e2e/configurationEditor.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
import { test, expect } from '@grafana/plugin-e2e';
import { BitmovinDataSourceOptions } from '../src/types/grafanaTypes';

test('should save and test valid configuration', async ({
createDataSourceConfigPage,
readProvisionedDataSource,
page,
selectors,
}) => {
await page.route('*/**/analytics/licenses', async (route) => {
await route.fulfill({ status: 200, body: 'OK' });
});
const ds = await readProvisionedDataSource<BitmovinDataSourceOptions>({ fileName: 'datasources.yml' });
const configPage = await createDataSourceConfigPage({ type: ds.type });

await page.getByTestId(`config-editor-${configPage.datasource.name}_api-key-input`).fill('test-api-key');
await page.getByTestId(`config-editor-${configPage.datasource.name}_tenant-org-id-input`).fill('test-tenant-org-id');

const queryPromise = page.waitForRequest('*/**/analytics/licenses');
await configPage.getByGrafanaSelector(selectors.pages.DataSource.saveAndTest).click();
const queryRequest = await queryPromise;

expect(queryRequest.headers()['x-api-client']).toBe('analytics-grafana-datasource');
expect(queryRequest.headers()['x-api-key']).toBe('test-api-key');
expect(queryRequest.headers()['x-tenant-org-id']).toBe('test-tenant-org-id');

expect(configPage).toHaveAlert('success');
});

test('should not save invalid configuration', async ({
createDataSourceConfigPage,
readProvisionedDataSource,
page,
selectors,
}) => {
const ds = await readProvisionedDataSource<BitmovinDataSourceOptions>({ fileName: 'datasources.yml' });
const configPage = await createDataSourceConfigPage({ type: ds.type });

await page.getByTestId(`config-editor-${configPage.datasource.name}_api-key-input`).fill('grafana-invalid-api-key');

const responsePromise = page.waitForResponse('*/**/analytics/licenses');
await configPage.getByGrafanaSelector(selectors.pages.DataSource.saveAndTest).click();
const response = await responsePromise;

expect(response.status()).toBe(403);
expect(configPage).toHaveAlert('error');
});
Loading

0 comments on commit 642d140

Please sign in to comment.