dataset-view.spec.ts

import { test, expect } from '@playwright/test';

import { resolveDatasetUrlByTitle } from './helpers/find-dataset';
import { CONSUMER_DATASET_TITLE, CUSTOM_YEAR_DATASET_TITLE } from '../fixtures/dataset-title';

let datasetUrl: string;

test.beforeAll(async ({ browser }) => {
  datasetUrl = await resolveDatasetUrlByTitle(browser, CONSUMER_DATASET_TITLE);
});

test.describe('Dataset View', () => {
  test('Can view dataset from search', async ({ page }) => {
    await page.goto(datasetUrl);
    // Should show dataset title as h1
    await expect(page.locator('h1.govuk-heading-xl')).toBeVisible();
  });

  test('Shows tab navigation', async ({ page }) => {
    await page.goto(datasetUrl);
    await expect(page.getByRole('tab', { name: 'View data', exact: true })).toBeVisible();
    await expect(page.getByRole('tab', { name: 'Download data' })).toBeVisible();
    await expect(page.getByRole('tab', { name: 'Dataset history' })).toBeVisible();
    await expect(page.getByRole('tab', { name: 'About this dataset' })).toBeVisible();
  });

  test('Data tab shows table with filters', async ({ page }) => {
    await page.goto(datasetUrl);
    // Data tab should be active by default and show table
    await expect(page.locator('#data_table')).toBeVisible();
    // Should show page size selector
    await expect(page.locator('#page_size')).toBeVisible();
  });

  test('About tab shows dataset information', async ({ page }) => {
    await page.goto(datasetUrl);
    // Click About tab
    await page.getByRole('tab', { name: 'About this dataset' }).click();
    // Should show main information section
    await expect(page.getByRole('heading', { name: 'Main information' })).toBeVisible();
    // Realistic dataset has a Financial year date dimension — time period should be visible
    await expect(page.locator('#time-period')).toBeVisible();
    // Financial year coverage should show correct months (not shifted by timezone)
    await expect(page.locator('#time-period')).toContainText('April 2013');
    await expect(page.locator('#time-period')).toContainText('March 2024');
  });

  test('About tab shows dataset ID at the bottom of Main information', async ({ page }) => {
    await page.goto(datasetUrl);
    await page.getByRole('tab', { name: 'About this dataset' }).click();

    const datasetIdRow = page.locator('#dataset-id');
    await expect(datasetIdRow).toBeVisible();
    await expect(datasetIdRow.locator('dt')).toHaveText('Dataset ID');

    // The value should be the UUID from the URL
    const urlId = new URL(datasetUrl).pathname.split('/').find((s) => s.match(/^[0-9a-f-]{36}$/i));
    await expect(datasetIdRow.locator('dd')).toHaveText(urlId!);
  });

  test('About tab shows dataset ID label in Welsh', async ({ page }) => {
    await page.goto(datasetUrl);
    await page.getByText('Cymraeg').click();
    await page.getByRole('tab', { name: 'Am y set ddata hon' }).click();

    const datasetIdRow = page.locator('#dataset-id');
    await expect(datasetIdRow).toBeVisible();
    await expect(datasetIdRow.locator('dt')).toHaveText('ID y set ddata');
  });

  test('Custom year dataset About tab does not show time period', async ({ browser }) => {
    const customYearUrl = await resolveDatasetUrlByTitle(browser, CUSTOM_YEAR_DATASET_TITLE);
    const page = await browser.newPage();
    await page.goto(customYearUrl);
    await page.getByRole('tab', { name: 'About this dataset' }).click();
    await expect(page.getByRole('heading', { name: 'Main information' })).toBeVisible();
    // Custom year dataset uses LookupTable type — no coverage dates, so time period should not appear
    await expect(page.locator('#time-period')).not.toBeVisible();
    await page.close();
  });

  test('Numeric columns and cells are right-aligned in the data table', async ({ page }) => {
    await page.goto(datasetUrl);

    // At least one header should carry the numeric alignment class
    const numericHeaders = page.locator('#data_table th.govuk-table__header--numeric');
    await expect(numericHeaders.first()).toBeVisible();

    // At least one data cell should carry the numeric alignment class
    const numericCells = page.locator('#data_table td.govuk-table__cell--numeric');
    await expect(numericCells.first()).toBeVisible();

    // The CSS class must actually produce right-aligned text
    const textAlign = await numericCells.first().evaluate((el) => window.getComputedStyle(el).textAlign);
    expect(textAlign).toBe('right');
  });

  test('Can switch to Welsh on dataset view', async ({ page }) => {
    await page.goto(datasetUrl);
    await page.getByText('Cymraeg').click();
    // URL should change to Welsh
    await expect(page).toHaveURL(/\/cy/);
  });
});