@talenra/components documentation
  1. Classes
  2. TableTestUtils

File

table/src/table/table.test-utils.ts

Description

Utility class for generating and managing test IDs for table components. Provides methods to generate consistent test IDs for table elements and helpers for testing frameworks like Playwright and Testing Library.

Import

Example :
import { TableTestUtils } from '@talenra/components/table';

Basic Usage

Example :
// Get test ID for a table element
const tableId = TableTestUtils.table();

// Get test ID for a specific cell
const cellId = TableTestUtils.cell('row-1', 'col-name');

// Get test ID for a header cell
const headerId = TableTestUtils.headerCell('col-name');

Configuration

Example :
// Configure with custom prefix and attribute
TableTestUtils.setupTableTestIds({
  testIdAttribute: 'data-test',
  prefix: 'my-app-'
});

With Testing Frameworks

Example :
// With Playwright
const tableId = TableTestUtils.wrap((testId) => page.getByTestId(testId));
await expect(tableId.cell('row-1', 'col-name')).toBeVisible();

// With Angular TestBed
const cellElement = fixture.debugElement.query(
  By.css(TableTestUtils.getSelector(TableTestUtils.cell('row-1', 'col-name')))
);

../../#/table

Index

Methods

Methods

Static cell
cell(rowId: string, colId: string)

Get test ID for a specific cell.

Example :
const cellId = TableTestUtils.cell('user-123', 'name');
// Returns: "table-cell-user-123-name"
Parameters :
Name Type Optional Description
rowId string No
  • The row identifier
colId string No
  • The column identifier
Returns : string

Test ID for the cell
Static getSelector
getSelector(testId: string)

Utility function to get a CSS selector for a test ID. Useful for querySelector or Angular's By.css().

Example :
const cellId = TableTestUtils.cell('row-1', 'col-name');
const selector = TableTestUtils.getSelector(cellId);
// Returns: '[data-testid="table-cell-row-1-col-name"]'

const element = document.querySelector(selector);
// Or with Angular TestBed
const element = fixture.debugElement.query(By.css(selector));
Parameters :
Name Type Optional Description
testId string No
  • The test ID to create a selector for
Returns : string

CSS attribute selector for the test ID
Static getTableTestIdConfig
getTableTestIdConfig()

Get the current test ID configuration.

Example :
const config = TableTestUtils.getTableTestIdConfig();
console.log(config.prefix); // Current prefix
Returns : TableTestIdConfig

A copy of the current configuration
Static header
header()

Get test ID for the table header.

Example :
const headerId = TableTestUtils.header();
// Returns: "table-header"
Returns : string

Test ID for the table header
Static headerCell
headerCell(colId: string)

Get test ID for a specific header cell.

Example :
const headerCellId = TableTestUtils.headerCell('name');
// Returns: "table-header-cell-name"
Parameters :
Name Type Optional Description
colId string No
  • The column identifier
Returns : string

Test ID for the header cell
Static loading
loading()

Get test ID for the loading skeleton. Note: Only one loading indicator is present in the table header when loading.

Example :
const loadingId = TableTestUtils.loading();
// Returns: "table-loading"
Returns : string

Test ID for the loading indicator
Static noData
noData()

Get test ID for the no data message.

Example :
const noDataId = TableTestUtils.noData();
// Returns: "table-no-data"
Returns : string

Test ID for the no data message
Static row
row(rowId: string)

Get test ID for a specific row.

Example :
const rowId = TableTestUtils.row('user-123');
// Returns: "table-row-user-123"
Parameters :
Name Type Optional Description
rowId string No
  • The row identifier
Returns : string

Test ID for the row
Static selectAll
selectAll()

Get test ID for the select all checkbox.

Example :
const selectAllId = TableTestUtils.selectAll();
// Returns: "table-select-all"
Returns : string

Test ID for the select all checkbox
Static selectRow
selectRow(rowId: string)

Get test ID for a row selection checkbox.

Example :
const selectRowId = TableTestUtils.selectRow('user-123');
// Returns: "table-select-row-user-123"
Parameters :
Name Type Optional Description
rowId string No
  • The row identifier
Returns : string

Test ID for the row selection checkbox
Static setupTableTestIds
setupTableTestIds(options: TableTestIdConfig)

Configure the table test utilities.

Example :
TableTestUtils.setupTableTestIds({
  testIdAttribute: 'data-test',
  prefix: 'my-app-'
});
Parameters :
Name Type Optional Default value Description
options TableTestIdConfig No {}
  • Configuration options for test IDs
Returns : void
Static sortIcon
sortIcon(colId: string)

Get test ID for a column sort icon.

Example :
const sortIconId = TableTestUtils.sortIcon('name');
// Returns: "table-sort-name"
Parameters :
Name Type Optional Description
colId string No
  • The column identifier
Returns : string

Test ID for the sort icon
Static table
table()

Get test ID for the main table element.

Example :
const tableId = TableTestUtils.table();
// Returns: "table" (or with prefix: "my-app-table")
Returns : string

Test ID for the table element
Static toolbar
toolbar()

Get test ID for the table toolbar.

Example :
const toolbarId = TableTestUtils.toolbar();
// Returns: "table-toolbar"
Returns : string

Test ID for the table toolbar
Static wrap
wrap(getByTestId: TestIdGetter<T>)
Type parameters :
  • T

Creates a wrapper around TableTestUtils methods to reduce boilerplate in tests. This is particularly useful with testing frameworks like Playwright or Testing Library.

Example :
// With Playwright
const tableId = TableTestUtils.wrap((testId) => page.getByTestId(testId));
await expect(tableId.cell('row-1', 'col-name')).toBeVisible();
await tableId.selectRow('row-1').click();

// With Angular TestBed
const tableId = TableTestUtils.wrap(
  (testId) => fixture.debugElement.query(By.css(`[data-testid="${testId}"]`))?.nativeElement
);
expect(tableId.headerCell('name')).toHaveTextContent('Name');
Parameters :
Name Type Optional Description
getByTestId TestIdGetter<T> No
  • Function that retrieves elements by test ID
Returns : literal type

Object with methods that return elements for each table part

results matching ""

    No results matching ""