threshold-ui/e2e-tests/admin/tests/sorting.spec.js

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: BUSL-1.1
 */

import { test } from '../../global-setup.js';
import { RolesPage } from '../pages/roles.js';
import { expect } from '@playwright/test';

const roleNamesToCreate = ['Alpha', 'Beta', 'Delta', 'Gamma', 'Zeta'];

export const columnHeaderSortButton = (tableLocator, name) =>
  tableLocator.getByRole('columnheader', { name }).getByRole('button');

export const assertColumnHeaderSortedAscending = (tableLocator, name) =>
  expect(tableLocator.getByRole('columnheader', { name })).toHaveAttribute(
    'aria-sort',
    'ascending',
  );

export const assertColumnHeaderSortedDescending = (tableLocator, name) =>
  expect(tableLocator.getByRole('columnheader', { name })).toHaveAttribute(
    'aria-sort',
    'descending',
  );

const columnHeaders = Object.freeze({
  name: { index: 0, label: 'Name' },
  id: { index: 2, label: 'ID' },
});

let org, rolesSortedByCreatedTime, rolesSortedByName, rolesSortedById;

test.beforeEach(async ({ apiClient }) => {
  org = await apiClient.clients.Scope.scopeServiceCreateScope({
    item: {
      scopeId: 'global',
    },
    skipAdminRoleCreation: true,
    skipDefaultRoleCreation: true,
  });

  // create roles with specific names
  const roles = await Promise.all(
    roleNamesToCreate.map((roleName) => {
      return apiClient.clients.Role.roleServiceCreateRole({
        item: {
          scopeId: org.id,
          name: roleName,
        },
      });
    }),
  );

  // collect all roles and data so that sorting can be tested based on the underlying data
  rolesSortedByCreatedTime = roles.toSorted((a, b) => {
    return new Date(b.createdTime) - new Date(a.createdTime);
  });
  rolesSortedByName = roles.toSorted((a, b) => a.name.localeCompare(b.name));
  rolesSortedById = roles.toSorted((a, b) => a.id.localeCompare(b.id));
});

test(
  'Sorting works',
  { tag: ['@ce', '@ent', '@aws', '@docker'] },
  async ({ page }) => {
    const rolesPage = new RolesPage(page);
    rolesPage.goToRolesPage({ scope: org.id });

    const table = page.getByRole('table');
    const tableRows = table
      .getByRole('row')
      .filter({ hasNot: page.getByRole('columnheader') });

    await expect(tableRows).toHaveCount(roleNamesToCreate.length);

    // assert that the table has the expected column headers
    for (const { label, index } of Object.values(columnHeaders)) {
      await expect(
        table.getByRole('columnheader').nth(index).getByLabel(label),
      ).toBeVisible();
    }

    // by default, resources are sorted by created time, descending
    for (const [index, role] of Object.entries(
      rolesSortedByCreatedTime,
    ).toReversed()) {
      await expect(tableRows.nth(index)).toContainText(role.name);
    }

    // click the "Name" column header to sort by name, ascending
    await columnHeaderSortButton(table, columnHeaders.name.label).click();
    await assertColumnHeaderSortedAscending(table, columnHeaders.name.label);

    for (const [index, role] of Object.entries(rolesSortedByName)) {
      await expect(tableRows.nth(index)).toContainText(role.name);
    }

    // click the "Name" column header again, to sort by name, descending
    await columnHeaderSortButton(table, columnHeaders.name.label).click();
    await assertColumnHeaderSortedDescending(table, columnHeaders.name.label);
    for (const [index, role] of Object.entries(
      rolesSortedByName.toReversed(),
    )) {
      await expect(tableRows.nth(index)).toContainText(role.name);
    }

    // click the "ID" column header to sort by ID, ascending
    await columnHeaderSortButton(table, columnHeaders.id.label).click();
    await assertColumnHeaderSortedAscending(table, columnHeaders.id.label);
    for (const [index, role] of Object.entries(rolesSortedById)) {
      await expect(tableRows.nth(index)).toContainText(role.name);
    }

    // click the "ID" column header again, to sort by ID, descending
    await columnHeaderSortButton(table, columnHeaders.id.label).click();
    await assertColumnHeaderSortedDescending(table, columnHeaders.id.label);
    for (const [index, role] of Object.entries(rolesSortedById.toReversed())) {
      await expect(tableRows.nth(index)).toContainText(role.name);
    }
  },
);