buster/web/playwright-tests/bar-chart-updates.spec.ts

92 lines
2.9 KiB
TypeScript

import { test, expect } from '@playwright/test';
test('Can load a bar chart', async ({ page }) => {
await page.goto('http://localhost:3000/app/home');
await page.getByRole('link', { name: 'Metrics', exact: true }).click();
await page
.getByRole('link', {
name: 'Yearly Sales Revenue - Signature Cycles Products (Last 3 Years + YTD)'
})
.click();
await expect(page.getByTestId('metric-view-chart-content')).toBeVisible();
await expect(page.getByTestId('metric-view-chart-content').getByRole('img')).toBeVisible();
//can remove x axis from bar chart
await page.getByTestId('edit-chart-button').getByRole('button').click();
await page.locator('.relative > button').first().click();
await expect(page.getByText('No valid axis selected')).toBeVisible();
//can drag a numeric column to x axis
const sourceElement = page
.getByTestId('select-axis-available-items-list')
.getByRole('button')
.first();
expect(sourceElement).toBeVisible();
const targetElement = page
.getByTestId('select-axis-drop-zone-xAxis')
.locator('div')
.filter({ hasText: /^Drag column here$/ });
expect(targetElement).toBeVisible();
const sourceBoundingBox = await sourceElement.boundingBox();
const targetBoundingBox = await targetElement.boundingBox();
if (sourceBoundingBox && targetBoundingBox) {
// Start at the center of the source element
await page.mouse.move(
sourceBoundingBox.x + sourceBoundingBox.width / 2,
sourceBoundingBox.y + sourceBoundingBox.height / 2
);
await page.mouse.down();
// Move to target in small increments
const steps = 50;
const dx = (targetBoundingBox.x - sourceBoundingBox.x) / steps;
const dy = (targetBoundingBox.y - sourceBoundingBox.y) / steps;
for (let i = 0; i <= steps; i++) {
await page.mouse.move(
sourceBoundingBox.x + dx * i + sourceBoundingBox.width / 2,
sourceBoundingBox.y + dy * i + sourceBoundingBox.height / 2,
{ steps: 1 }
);
await page.waitForTimeout(1); // Add a small delay between each movement
}
await page.mouse.up();
}
await expect(
page.getByTestId('select-axis-drop-zone-xAxis').getByRole('button', { name: 'Year' })
).toBeVisible();
//can drag to availabel from x axis
{
const sourceElement = page
.getByTestId('select-axis-drop-zone-xAxis')
.getByRole('button', { name: 'Year' });
expect(sourceElement).toBeVisible();
const targetElement = page
.getByTestId('select-axis-available-items-list')
.getByRole('button')
.first();
expect(targetElement).toBeVisible();
// Click and hold before dragging
await sourceElement.click({ button: 'left', delay: 500 });
await sourceElement.hover();
await page.mouse.down();
await targetElement.hover();
await page.mouse.up();
await expect(
page.getByTestId('select-axis-drop-zone-xAxis').getByRole('button', { name: 'Year' })
).not.toBeVisible();
}
});