Skip to content

Commit

Permalink
WIP: E2E comparison
Browse files Browse the repository at this point in the history
  • Loading branch information
adamyeats committed Oct 6, 2023
1 parent a35e52c commit 8e7216b
Show file tree
Hide file tree
Showing 7 changed files with 123 additions and 85 deletions.
15 changes: 13 additions & 2 deletions .github/workflows/cypress.yml
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,16 @@ name: E2E tests - Cypress
on: [push, pull_request]

jobs:
build:
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Use Node.js

- name: Setup Node.js environment
uses: actions/setup-node@v3
with:
node-version-file: .nvmrc

- name: Install yarn dependencies
run: yarn install
env:
Expand All @@ -22,5 +24,14 @@ jobs:
run: yarn build
env:
NODE_OPTIONS: '--max_old_space_size=4096'

- name: Start Grafana
run: docker run --rm -d -p 3000:3000 --name=grafana --env GF_PLUGINS_ALLOW_LOADING_UNSIGNED_PLUGINS=grafana-azure-data-explorer-datasource --volume "$PWD:/var/lib/grafana/plugins" grafana/grafana

- name: Run E2E tests
run: yarn run e2e
env:
E2E_ADX_CLIENT_ID: ${{ secrets.E2E_ADX_CLIENT_ID }}
E2E_ADX_CLIENT_SECRET: ${{ secrets.E2E_ADX_CLIENT_SECRET }}
E2E_ADX_CLUSTER_URL: ${{ secrets.E2E_ADX_CLUSTER_URL }}
E2E_ADX_TENANT_ID: ${{ secrets.E2E_ADX_TENANT_ID }}
17 changes: 14 additions & 3 deletions .github/workflows/k6.yml
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,16 @@ name: E2E tests - k6
on: [push, pull_request]

jobs:
build:
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3

- name: Use Node.js
uses: actions/setup-node@v3
with:
node-version-file: .nvmrc

- name: Install yarn dependencies
run: yarn install
env:
Expand All @@ -22,14 +24,23 @@ jobs:
run: yarn build
env:
NODE_OPTIONS: '--max_old_space_size=4096'

- name: Setup k6
run: |
sudo gpg -k
sudo gpg --no-default-keyring --keyring /usr/share/keyrings/k6-archive-keyring.gpg --keyserver hkp://keyserver.ubuntu.com:80 --recv-keys C5AD17C747E3415A3642D57D77C6C491D6AC1D69
echo "deb [signed-by=/usr/share/keyrings/k6-archive-keyring.gpg] https://dl.k6.io/deb stable main" | sudo tee /etc/apt/sources.list.d/k6.list
sudo apt-get update
sudo apt-get install k6
- name: Start Grafana
run: docker run --rm -d -p 3000:3000 --name=grafana --env GF_PLUGINS_ALLOW_LOADING_UNSIGNED_PLUGINS=grafana-azure-data-explorer-datasource --volume "$PWD:/var/lib/grafana/plugins" grafana/grafana
- name: Run e2e tests
run: docker run --rm -d -p 3000:3000 --name=grafana --env GF_PLUGINS_ALLOW_LOADING_UNSIGNED_PLUGINS=grafana-azure-data-explorer-datasource --volume "$PWD/dist:/var/lib/grafana/plugins/azure-data-explorer-datasource" grafana/grafana; sleep 30

- name: Run E2E tests
run: k6 run ./e2e/k6/k6.test.js
env:
E2E_ADX_CLIENT_ID: ${{ secrets.E2E_ADX_CLIENT_ID }}
E2E_ADX_CLIENT_SECRET: ${{ secrets.E2E_ADX_CLIENT_SECRET }}
E2E_ADX_CLUSTER_URL: ${{ secrets.E2E_ADX_CLUSTER_URL }}
E2E_ADX_TENANT_ID: ${{ secrets.E2E_ADX_TENANT_ID }}

63 changes: 34 additions & 29 deletions .github/workflows/playwright.yml
Original file line number Diff line number Diff line change
Expand Up @@ -6,32 +6,37 @@ jobs:
timeout-minutes: 60
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version-file: .nvmrc
- name: Install yarn dependencies
run: yarn install
env:
NODE_OPTIONS: '--max_old_space_size=4096'

- name: Build
run: go build -v ./...

- name: Build Frontend
run: yarn build
env:
NODE_OPTIONS: '--max_old_space_size=4096'
- name: Install Playwright Browsers
run: yarn playwright install --with-deps
- name: Start Grafana
run: docker run --rm -d -p 3000:3000 --name=grafana --env GF_PLUGINS_ALLOW_LOADING_UNSIGNED_PLUGINS=grafana-azure-data-explorer-datasource --volume "$PWD:/var/lib/grafana/plugins" grafana/grafana
- name: Run Playwright tests
run: yarn playwright test

# - uses: actions/upload-artifact@v3
# if: always()
# with:
# name: playwright-report
# path: playwright-report/
# retention-days: 30
- uses: actions/checkout@v3

- name: Setup Node.js environment
uses: actions/setup-node@v3
with:
node-version-file: .nvmrc

- name: Install yarn dependencies
run: yarn install
env:
NODE_OPTIONS: '--max_old_space_size=4096'

- name: Build
run: go build -v ./...

- name: Build Frontend
run: yarn build
env:
NODE_OPTIONS: '--max_old_space_size=4096'

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

- name: Start Grafana
run: docker run --rm -d -p 3000:3000 --name=grafana --env GF_PLUGINS_ALLOW_LOADING_UNSIGNED_PLUGINS=grafana-azure-data-explorer-datasource --volume "$PWD/dist:/var/lib/grafana/plugins/azure-data-explorer-datasource" grafana/grafana; sleep 30

- name: Run Playwright tests
run: yarn playwright test
env:
E2E_ADX_CLIENT_ID: ${{ secrets.E2E_ADX_CLIENT_ID }}
E2E_ADX_CLIENT_SECRET: ${{ secrets.E2E_ADX_CLIENT_SECRET }}
E2E_ADX_CLUSTER_URL: ${{ secrets.E2E_ADX_CLUSTER_URL }}
E2E_ADX_TENANT_ID: ${{ secrets.E2E_ADX_TENANT_ID }}

2 changes: 2 additions & 0 deletions .github/workflows/pull-request-image.yml
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,7 @@ jobs:
with:
issue-number: ${{ github.event.number }}
body-includes: Use the following command to run this PR with Docker

- name: Update comment on PR
if: steps.fc.outputs.comment-id != ''
uses: peter-evans/create-or-update-comment@v3
Expand All @@ -118,6 +119,7 @@ jobs:
```
docker run --rm -p 3000:3000 grafana/plugin-builds:${{ github.event.pull_request.head.sha }}pre
```
- name: Add comment to PR
if: steps.fc.outputs.comment-id == ''
uses: peter-evans/create-or-update-comment@v3
Expand Down
8 changes: 4 additions & 4 deletions e2e/k6/k6.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -82,10 +82,10 @@ export async function addDatasource(page) {

// form inputs
const inputs = {
'Client ID': '',
'Client Secret': '',
'Cluster URL': '',
'Tenant ID': '',
'Client ID': __ENV.E2E_ADX_CLIENT_ID,
'Client Secret': __ENV.E2E_ADX_CLIENT_SECRET,
'Cluster URL': __ENV.E2E_ADX_CLUSTER_URL,
'Tenant ID': __ENV.E2E_ADX_TENANT_ID,
};

// fill in form inputs
Expand Down
97 changes: 55 additions & 42 deletions e2e/playwright/playwright.spec.ts
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import { test, expect } from '@playwright/test';
import { test, expect, Page } from '@playwright/test';
import { selectors } from '@grafana/e2e-selectors';
import { v4 as uuidv4 } from 'uuid';

const DASHBOARD_TITLE = `e2e-test-dashboard-${uuidv4()}`;
const DATASOURCE_NAME = `adx-e2e-test-${uuidv4()}`;

const getDashboardUid = (url) => {
const getDashboardUid = (url: string) => {
const matches = new URL(url).pathname.match(/\/d\/([^/]+)/);

if (matches && Array.isArray(matches) && matches.length > 0) {
Expand All @@ -15,7 +15,7 @@ const getDashboardUid = (url) => {
}
};

test('Login', async ({ page }) => {
async function login(page: Page) {
await page.goto(`http://localhost:3000${selectors.pages.Login.url}`, {
waitUntil: 'networkidle',
});
Expand All @@ -31,17 +31,17 @@ test('Login', async ({ page }) => {
};

// login
fields.username.fill('admin');
fields.password.fill('admin');
await fields.username.fill('admin');
await fields.password.fill('admin');
await buttons.submit.click();

// checks page for skip change password screen
expect(buttons.skip).toBeAttached();
await expect(buttons.skip.isVisible()).toBeTruthy();

await buttons.skip.click();
});
}

test('Add datasource', async ({ page }) => {
async function addDatasource(page: Page) {
await page.goto(`http://localhost:3000${selectors.pages.AddDataSource.url}`, {
waitUntil: 'networkidle',
});
Expand All @@ -53,29 +53,24 @@ test('Add datasource', async ({ page }) => {

// name datasource
const dsName = page.locator(`input[aria-label="${selectors.pages.DataSource.name}"]`);
dsName.fill('');
dsName.fill(`${DATASOURCE_NAME}`);

// form inputs
const inputs = {
'Client ID': '',
'Client Secret': '',
'Cluster URL': '',
'Tenant ID': '',
};
await dsName.fill('');
await dsName.fill(`${DATASOURCE_NAME}`);

// fill in form inputs
Object.entries(inputs).forEach(([key, value]) => page.locator(`input[aria-label="${key}"]`).fill(value));
await page.locator(`input[aria-label="Cluster URL"]`).fill(process.env.E2E_ADX_CLUSTER_URL!);
await page.locator(`input[aria-label="Tenant ID"]`).fill(process.env.E2E_ADX_TENANT_ID!);
await page.locator(`input[aria-label="Client ID"]`).fill(process.env.E2E_ADX_CLIENT_ID!);
await page.locator(`input[aria-label="Client Secret"]`).fill(process.env.E2E_ADX_CLIENT_SECRET!);

// save and test
const saveBtn = page.locator(`button[data-testid="data-testid ${selectors.pages.DataSource.saveAndTest}"]`);
await saveBtn.click();

// checks the page for the data source is working message
expect(page.locator('[aria-label="Create a dashboard"]')).toContainText('building a dashboard');
});
await expect(page.locator('[aria-label="Create a dashboard"]')).toContainText('building a dashboard');
}

test('Add dashboard', async ({ page }) => {
async function addDashboard(page: Page) {
await page.goto(`http://localhost:3000${selectors.pages.AddDashboard.url}`, { waitUntil: 'networkidle' });

// checks for the create dashboard button
Expand All @@ -88,18 +83,18 @@ test('Add dashboard', async ({ page }) => {

// name dashboard
const dashboardTitleInput = page.locator(`input[aria-label="${selectors.pages.SaveDashboardAsModal.newName}"]`);
dashboardTitleInput.fill('');
dashboardTitleInput.fill(DASHBOARD_TITLE);
await dashboardTitleInput.fill('');
await dashboardTitleInput.fill(DASHBOARD_TITLE);

// save dashboard
const saveDashboardModalButton = page.locator(`button[aria-label="${selectors.pages.SaveDashboardAsModal.save}"]`);
await saveDashboardModalButton.click();

// checks that the dashboard is created successfully
expect(page.locator('div[data-testid="data-testid Alert success"]')).toBeAttached();
});
await expect(page.locator('div[data-testid="data-testid Alert success"]').isVisible()).toBeTruthy();
}

test('Configure panel', async ({ page }) => {
async function configurePanel(page: Page) {
const dashboardURL = page.url();
await page.goto(`${dashboardURL}`, { waitUntil: 'networkidle' });

Expand All @@ -108,33 +103,43 @@ test('Configure panel', async ({ page }) => {
await addPanelButton.click();

// select data source for panel
page.locator('input[placeholder="Search data source"]').fill(`${DATASOURCE_NAME}`);
page.keyboard.down('Tab');
page.keyboard.down('Enter');
await page.locator('input[placeholder="Search data source"]').fill(`${DATASOURCE_NAME}`);
await page.keyboard.down('Tab');
await page.keyboard.down('Enter');

// select database
const database = page.locator(`[aria-label="Database"]`);
await database.click();
database.fill('PerfTest');
page.keyboard.down('Enter');
await database.fill('PerfTest');
await page.keyboard.down('Enter');

// select table
const table = page.locator(`[aria-label="Table"]`);
await table.click();
table.fill('PerfTest');
page.keyboard.down('Enter');
await table.fill('PerfTest');
await page.keyboard.down('Enter');

// run query
const runQueryBtn = page.locator(`[data-testid="data-testid run-query"]`);
await runQueryBtn.click();
// const runQueryBtn = page.locator(`[data-testid="data-testid run-query"]`);
// await runQueryBtn.click();

// are there results?
const columns = page.locator(`[aria-label="Columns"]`);
await columns.click();
// const columns = page.locator(`[aria-label="Columns"]`);
// await columns.click();

expect(page.locator('[aria-label="Select options menu"]').innerHTML()).toContain('_val1_');
});
const html = await page.locator('[aria-label="Select options menu"]').innerHTML();
await expect(html).toContain('_val1_');

// save panel
const savePanelBtn = page.locator(`button[title="Apply changes and save dashboard"]`);
await savePanelBtn.click();
const saveDashButton = page.locator('button[aria-label="Save dashboard button"]');
await saveDashButton.click();

await page.pause();
}

test('Remove dashboard', async ({ page }) => {
export async function removeDashboard(page: Page) {
const dashboardUID = getDashboardUid(page.url());
await page.goto(`http://localhost:3000/d/${dashboardUID}`, { waitUntil: 'networkidle' });

Expand All @@ -157,5 +162,13 @@ test('Remove dashboard', async ({ page }) => {
await deleteDashboardModalButton.click();

// checks for success alert message
expect(page.locator('div[data-testid="data-testid Alert success"]')).toBeAttached();
await expect(page.locator('div[data-testid="data-testid Alert success"]').isVisible()).toBeTruthy();
}

test('Azure Data Explorer dashboard', async ({ page }) => {
await login(page);
await addDatasource(page);
await addDashboard(page);
await configurePanel(page);
await removeDashboard(page);
});
6 changes: 1 addition & 5 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -99,9 +99,5 @@
"resolutions": {
"**/@testing-library/dom": "7.31.2"
},
"packageManager": "yarn@1.22.19",
"volta": {
"node": "18.18.0",
"yarn": "1.22.19"
}
"packageManager": "yarn@1.22.19"
}

0 comments on commit 8e7216b

Please sign in to comment.