HSNAKDValidation Labhakdogan.com

Admin Panel

Table filters

Compound filter (role + status) narrows the data set and reflects the chip count.

User story

As an admin, I want to combine role and status filters and see a clear chip-summary of what's active.

Acceptance criteria

  • Multiple filters apply with AND semantics
  • Chips render for each active filter
  • Removing a chip removes only that filter
  • Filter state encodes into the URL

Manual test steps

  1. 1.Open /users
  2. 2.Set role=Admin
  3. 3.Set status=Active
  4. 4.Remove the Active chip

Expected result

URL contains role=admin only after the chip removal; rows update accordingly.

Possible bug risks

  • OR vs AND semantics inconsistent across columns
  • URL state drifts from internal state on back/forward
  • Chip removal forgets the URL pruning

Reference Playwright spec

table-filters.spec.ts
ts
1
2
3
4
5
6
7
8
9
10
import { test, expect } from '@playwright/test';

test('combined filter chips', async ({ page }) => {
  await page.goto('https://lab.hakdogan.com/users');
  await page.getByLabel(/role/i).selectOption('admin');
  await page.getByLabel(/status/i).selectOption('active');

  await expect(page.getByTestId('filter-chip-role')).toContainText('Admin');
  await expect(page.getByTestId('filter-chip-status')).toContainText('Active');
});