@redsift/ds-mcp-server 12.4.0 → 12.5.0-muiv7

package/data/demos/patterns/single-datagrid-client-side/SingleDatagridClientSide.interaction.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { within, userEvent } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
-import { GridFilterModel } from '@mui/x-data-grid-premium';
+import { GridFilterModel } from '@mui/x-data-grid-pro';
 
 import Example from './example';
 import WithLoadingExample from './with-loading';
@@ -16,7 +16,23 @@ import {
   assertBulkActionBarVisible,
   assertBulkActionBarHidden,
   clickRowCheckbox,
+  clickHeaderCheckbox,
   getRetryButton,
+  assertDisplayedRowsText,
+  clickNextPage,
+  clickPrevPage,
+  changePageSize,
+  openColumnsPanel,
+  toggleColumnInPanel,
+  closeColumnsPanel,
+  assertColumnVisible,
+  assertColumnHidden,
+  changeDensity,
+  assertDensity,
+  clickColumnHeader,
+  assertColumnSorted,
+  assertHeaderCheckboxState,
+  assertRowCheckboxChecked,
 } from '../_shared/story-helpers';
 import {
   DEFAULT_FILTER_MODEL_COUNT,
@@ -35,25 +51,106 @@ import {
   TAGS_HASANYOF_LOCAL_NEW,
 } from '../_shared/expected-values';
 
-const meta: Meta = {
+const meta: Meta<typeof Example> = {
   title: 'Patterns/Single Datagrid (Client)',
-  component: Example as any,
+  component: Example,
 };
 export default meta;
 type Story = StoryObj;
 
 // ---------------------------------------------------------------------------
-// Default — renders with DEFAULT_FILTER_MODEL + checkbox select/deselect
+// Helper — creates a filter story
+// ---------------------------------------------------------------------------
+
+const makeStory = (filterModel: GridFilterModel, expectedCount: number): Story => ({
+  render: () => <Example initialFilterModel={filterModel} />,
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    await step('Wait for grid to load', async () => {
+      await waitForGridToLoad(canvas);
+    });
+    await step(`Assert filtered row count is ${expectedCount}`, async () => {
+      await assertRowCount(canvasElement, expectedCount);
+    });
+  },
+});
+
+// Items (string)
+export const FilterItemsContainsBread: Story = makeStory(
+  { items: [{ field: 'Items', operator: 'contains', value: 'Bread' }] },
+  ITEMS_CONTAINS_BREAD
+);
+export const FilterItemsEqualsCoffee: Story = makeStory(
+  { items: [{ field: 'Items', operator: 'equals', value: 'Coffee' }] },
+  ITEMS_EQUALS_COFFEE
+);
+
+// Category (singleSelect)
+export const FilterCategoryIsBakery: Story = makeStory(
+  { items: [{ field: 'Category', operator: 'is', value: 'Bakery' }] },
+  CATEGORY_IS_BAKERY
+);
+export const FilterCategoryIsAnyOfBakeryPastry: Story = makeStory(
+  { items: [{ field: 'Category', operator: 'isAnyOf', value: ['Bakery', 'Pastry'] }] },
+  CATEGORY_ISANYOF_BAKERY_PASTRY
+);
+
+// Paid (number)
+export const FilterPaidGreaterThan3: Story = makeStory(
+  { items: [{ field: 'Paid', operator: '>', value: 3 }] },
+  PAID_GT_3
+);
+export const FilterPaidLessThanOrEqual1_5: Story = makeStory(
+  { items: [{ field: 'Paid', operator: '<=', value: 1.5 }] },
+  PAID_LTE_1_5
+);
+
+// InStock (boolean)
+export const FilterInStockTrue: Story = makeStory(
+  { items: [{ field: 'InStock', operator: 'is', value: 'true' }] },
+  INSTOCK_TRUE
+);
+export const FilterInStockFalse: Story = makeStory(
+  { items: [{ field: 'InStock', operator: 'is', value: 'false' }] },
+  INSTOCK_FALSE
+);
+
+// Allergens (multiSelect)
+export const FilterAllergensHasAnyOfGluten: Story = makeStory(
+  { items: [{ field: 'Allergens', operator: 'hasAnyOf', value: ['Gluten'] }] },
+  ALLERGENS_HASANYOF_GLUTEN
+);
+export const FilterAllergensHasAllOfGlutenDairy: Story = makeStory(
+  { items: [{ field: 'Allergens', operator: 'hasAllOf', value: ['Gluten', 'Dairy'] }] },
+  ALLERGENS_HASALLOF_GLUTEN_DAIRY
+);
+
+// Tags (tags)
+export const FilterTagsHasLocal: Story = makeStory(
+  { items: [{ field: 'Tags', operator: 'has', value: 'Local' }] },
+  TAGS_HAS_LOCAL
+);
+export const FilterTagsHasAnyOfLocalNew: Story = makeStory(
+  { items: [{ field: 'Tags', operator: 'hasAnyOf', value: ['Local', 'New'] }] },
+  TAGS_HASANYOF_LOCAL_NEW
+);
+
+// ---------------------------------------------------------------------------
+// Default — renders with DEFAULT_FILTER_MODEL
 // ---------------------------------------------------------------------------
 
 export const Default: Story = {
   render: () => <Example />,
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
-    await waitForGridToLoad(canvas);
 
-    // Default filter model produces 1,284 rows
-    await assertRowCount(canvasElement, DEFAULT_FILTER_MODEL_COUNT);
+    await step('Wait for grid to load', async () => {
+      await waitForGridToLoad(canvas);
+    });
+
+    await step('Assert default filter produces correct row count', async () => {
+      await assertRowCount(canvasElement, DEFAULT_FILTER_MODEL_COUNT);
+    });
   },
 };
 
@@ -63,221 +160,329 @@ export const Default: Story = {
 
 export const NoFilter: Story = {
   render: () => <Example initialFilterModel={{ items: [] }} />,
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
-    await waitForGridToLoad(canvas);
-    await assertRowCount(canvasElement, TOTAL);
+
+    await step('Wait for grid to load', async () => {
+      await waitForGridToLoad(canvas);
+    });
+
+    await step('Assert all rows visible (no filter)', async () => {
+      await assertRowCount(canvasElement, TOTAL);
+    });
   },
 };
 
 // ---------------------------------------------------------------------------
-// Items (string column) — contains / equals
+// Checkbox selection — bulk action bar appears/disappears
 // ---------------------------------------------------------------------------
 
-const itemsContainsBread: GridFilterModel = {
-  items: [{ field: 'Items', operator: 'contains', value: 'Bread' }],
-};
-
-export const FilterItemsContainsBread: Story = {
-  render: () => <Example initialFilterModel={itemsContainsBread} />,
-  play: async ({ canvasElement }) => {
+export const CheckboxSelectionBulkActions: Story = {
+  render: () => <Example initialFilterModel={{ items: [] }} />,
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
-    await waitForGridToLoad(canvas);
-    await assertRowCount(canvasElement, ITEMS_CONTAINS_BREAD);
-  },
-};
-
-const itemsEqualsCoffee: GridFilterModel = {
-  items: [{ field: 'Items', operator: 'equals', value: 'Coffee' }],
-};
 
-export const FilterItemsEqualsCoffee: Story = {
-  render: () => <Example initialFilterModel={itemsEqualsCoffee} />,
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    await waitForGridToLoad(canvas);
-    await assertRowCount(canvasElement, ITEMS_EQUALS_COFFEE);
+    await step('Wait for grid to load', async () => {
+      await waitForGridToLoad(canvas);
+    });
+
+    await step('Verify no bulk action bar initially', async () => {
+      await assertBulkActionBarHidden(canvasElement);
+    });
+
+    await step('Select first row — bulk bar shows 1 selected', async () => {
+      await clickRowCheckbox(canvasElement, 0);
+      await assertBulkActionBarVisible(canvasElement, 1);
+    });
+
+    await step('Select second row — bulk bar shows 2 selected', async () => {
+      await clickRowCheckbox(canvasElement, 1);
+      await assertBulkActionBarVisible(canvasElement, 2);
+    });
+
+    await step('Deselect first row — bulk bar shows 1 selected', async () => {
+      await clickRowCheckbox(canvasElement, 0);
+      await assertBulkActionBarVisible(canvasElement, 1);
+    });
+
+    await step('Deselect last row — bulk bar disappears', async () => {
+      await clickRowCheckbox(canvasElement, 1);
+      await assertBulkActionBarHidden(canvasElement);
+    });
   },
 };
 
 // ---------------------------------------------------------------------------
-// Category (singleSelect column) — is / isAnyOf
+// Pagination — next/prev and page size
 // ---------------------------------------------------------------------------
 
-const categoryIsBakery: GridFilterModel = {
-  items: [{ field: 'Category', operator: 'is', value: 'Bakery' }],
-};
-
-export const FilterCategoryIsBakery: Story = {
-  render: () => <Example initialFilterModel={categoryIsBakery} />,
-  play: async ({ canvasElement }) => {
+export const PaginationNextPrev: Story = {
+  render: () => <Example initialFilterModel={{ items: [] }} />,
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
-    await waitForGridToLoad(canvas);
-    await assertRowCount(canvasElement, CATEGORY_IS_BAKERY);
-  },
-};
 
-const categoryIsAnyOfBakeryPastry: GridFilterModel = {
-  items: [{ field: 'Category', operator: 'isAnyOf', value: ['Bakery', 'Pastry'] }],
-};
+    await step('Wait for grid to load', async () => {
+      await waitForGridToLoad(canvas);
+    });
 
-export const FilterCategoryIsAnyOfBakeryPastry: Story = {
-  render: () => <Example initialFilterModel={categoryIsAnyOfBakeryPastry} />,
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    await waitForGridToLoad(canvas);
-    await assertRowCount(canvasElement, CATEGORY_ISANYOF_BAKERY_PASTRY);
-  },
-};
+    await step('Verify initial page shows 1–10 of 14,075', async () => {
+      await assertDisplayedRowsText(canvasElement, '1–10 of 14,075');
+    });
 
-// ---------------------------------------------------------------------------
-// Paid (number column) — > / <=
-// ---------------------------------------------------------------------------
+    await step('Navigate to next page — shows 11–20', async () => {
+      await clickNextPage(canvasElement);
+      await assertDisplayedRowsText(canvasElement, '11–20 of 14,075');
+    });
 
-const paidGt3: GridFilterModel = {
-  items: [{ field: 'Paid', operator: '>', value: 3 }],
+    await step('Navigate back to first page — shows 1–10', async () => {
+      await clickPrevPage(canvasElement);
+      await assertDisplayedRowsText(canvasElement, '1–10 of 14,075');
+    });
+  },
 };
 
-export const FilterPaidGreaterThan3: Story = {
-  render: () => <Example initialFilterModel={paidGt3} />,
-  play: async ({ canvasElement }) => {
+export const PaginationPageSizeChange: Story = {
+  render: () => <Example initialFilterModel={{ items: [] }} />,
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
-    await waitForGridToLoad(canvas);
-    await assertRowCount(canvasElement, PAID_GT_3);
-  },
-};
 
-const paidLte1_5: GridFilterModel = {
-  items: [{ field: 'Paid', operator: '<=', value: 1.5 }],
-};
+    await step('Wait for grid to load', async () => {
+      await waitForGridToLoad(canvas);
+    });
 
-export const FilterPaidLessThanOrEqual1_5: Story = {
-  render: () => <Example initialFilterModel={paidLte1_5} />,
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    await waitForGridToLoad(canvas);
-    await assertRowCount(canvasElement, PAID_LTE_1_5);
+    await step('Verify initial page shows 1–10 of 14,075', async () => {
+      await assertDisplayedRowsText(canvasElement, '1–10 of 14,075');
+    });
+
+    await step('Change page size to 25 — shows 1–25', async () => {
+      await changePageSize(canvasElement, 25);
+      await assertDisplayedRowsText(canvasElement, '1–25 of 14,075');
+    });
   },
 };
 
 // ---------------------------------------------------------------------------
-// InStock (boolean column) — is true / is false
+// Selection + Pagination — selection persists across pages
 // ---------------------------------------------------------------------------
 
-const inStockTrue: GridFilterModel = {
-  items: [{ field: 'InStock', operator: 'is', value: 'true' }],
-};
-
-export const FilterInStockTrue: Story = {
-  render: () => <Example initialFilterModel={inStockTrue} />,
-  play: async ({ canvasElement }) => {
+export const SelectionPersistsAcrossPages: Story = {
+  render: () => <Example initialFilterModel={{ items: [] }} />,
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
-    await waitForGridToLoad(canvas);
-    await assertRowCount(canvasElement, INSTOCK_TRUE);
+
+    await step('Wait for grid to load', async () => {
+      await waitForGridToLoad(canvas);
+    });
+
+    await step('Select rows 0 and 1 — verify checkboxes checked', async () => {
+      await assertHeaderCheckboxState(canvasElement, 'unchecked');
+      await clickRowCheckbox(canvasElement, 0);
+      await clickRowCheckbox(canvasElement, 1);
+      await assertBulkActionBarVisible(canvasElement, 2);
+      await assertRowCheckboxChecked(canvasElement, 0, true);
+      await assertRowCheckboxChecked(canvasElement, 1, true);
+      await assertHeaderCheckboxState(canvasElement, 'indeterminate');
+    });
+
+    await step('Navigate to next page — selection persists, page actually changed', async () => {
+      await clickNextPage(canvasElement);
+      await assertDisplayedRowsText(canvasElement, '11–20 of 14,075');
+      await assertBulkActionBarVisible(canvasElement, 2);
+      await assertHeaderCheckboxState(canvasElement, 'unchecked');
+      await assertRowCheckboxChecked(canvasElement, 0, false);
+    });
+
+    await step('Navigate back — rows 0 and 1 still checked', async () => {
+      await clickPrevPage(canvasElement);
+      await assertDisplayedRowsText(canvasElement, '1–10 of 14,075');
+      await assertBulkActionBarVisible(canvasElement, 2);
+      await assertRowCheckboxChecked(canvasElement, 0, true);
+      await assertRowCheckboxChecked(canvasElement, 1, true);
+      await assertHeaderCheckboxState(canvasElement, 'indeterminate');
+    });
   },
 };
 
-const inStockFalse: GridFilterModel = {
-  items: [{ field: 'InStock', operator: 'is', value: 'false' }],
+export const SelectAllOnPage: Story = {
+  render: () => <Example initialFilterModel={{ items: [] }} />,
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+
+    await step('Wait for grid to load', async () => {
+      await waitForGridToLoad(canvas);
+    });
+
+    await step('Verify header checkbox starts unchecked', async () => {
+      await assertHeaderCheckboxState(canvasElement, 'unchecked');
+    });
+
+    await step('Select all on first page — 10 selected, header checked', async () => {
+      await clickHeaderCheckbox(canvasElement);
+      await assertBulkActionBarVisible(canvasElement, 10);
+      await assertHeaderCheckboxState(canvasElement, 'checked');
+      await assertDisplayedRowsText(canvasElement, '1–10 of 14,075');
+    });
+
+    await step('Navigate to page 2 — verify page changed, header unchecked', async () => {
+      await clickNextPage(canvasElement);
+      await assertDisplayedRowsText(canvasElement, '11–20 of 14,075');
+      await assertBulkActionBarVisible(canvasElement, 10);
+      await assertHeaderCheckboxState(canvasElement, 'unchecked');
+    });
+
+    await step('Select all on page 2 — 20 selected, still on page 2', async () => {
+      await clickHeaderCheckbox(canvasElement);
+      await assertBulkActionBarVisible(canvasElement, 20);
+      await assertHeaderCheckboxState(canvasElement, 'checked');
+      await assertDisplayedRowsText(canvasElement, '11–20 of 14,075');
+    });
+
+    await step('Navigate back to page 1 — all rows still checked', async () => {
+      await clickPrevPage(canvasElement);
+      await assertDisplayedRowsText(canvasElement, '1–10 of 14,075');
+      await assertBulkActionBarVisible(canvasElement, 20);
+      await assertHeaderCheckboxState(canvasElement, 'checked');
+      await assertRowCheckboxChecked(canvasElement, 0, true);
+    });
+  },
 };
 
-export const FilterInStockFalse: Story = {
-  render: () => <Example initialFilterModel={inStockFalse} />,
-  play: async ({ canvasElement }) => {
+export const PartialDeselectAfterSelectAll: Story = {
+  render: () => <Example initialFilterModel={{ items: [] }} />,
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
-    await waitForGridToLoad(canvas);
-    await assertRowCount(canvasElement, INSTOCK_FALSE);
+
+    await step('Wait for grid to load', async () => {
+      await waitForGridToLoad(canvas);
+    });
+
+    await step('Select all on page — 10 selected, header checked', async () => {
+      await clickHeaderCheckbox(canvasElement);
+      await assertBulkActionBarVisible(canvasElement, 10);
+      await assertHeaderCheckboxState(canvasElement, 'checked');
+    });
+
+    await step('Deselect row 3 — 9 selected, header indeterminate', async () => {
+      await clickRowCheckbox(canvasElement, 3);
+      await assertBulkActionBarVisible(canvasElement, 9);
+      await assertHeaderCheckboxState(canvasElement, 'indeterminate');
+      await assertRowCheckboxChecked(canvasElement, 3, false);
+      await assertRowCheckboxChecked(canvasElement, 0, true);
+    });
+
+    await step('Click header to re-select all — 10 selected', async () => {
+      await clickHeaderCheckbox(canvasElement);
+      await assertBulkActionBarVisible(canvasElement, 10);
+      await assertHeaderCheckboxState(canvasElement, 'checked');
+    });
+
+    await step('Click header to deselect all — 0 selected', async () => {
+      await clickHeaderCheckbox(canvasElement);
+      await assertBulkActionBarHidden(canvasElement);
+      await assertHeaderCheckboxState(canvasElement, 'unchecked');
+    });
   },
 };
 
 // ---------------------------------------------------------------------------
-// Allergens (multiSelect column) — hasAnyOf / hasAllOf
+// Column visibility — toggle columns on and off
 // ---------------------------------------------------------------------------
 
-const allergensHasAnyOfGluten: GridFilterModel = {
-  items: [{ field: 'Allergens', operator: 'hasAnyOf', value: ['Gluten'] }],
-};
-
-export const FilterAllergensHasAnyOfGluten: Story = {
-  render: () => <Example initialFilterModel={allergensHasAnyOfGluten} />,
-  play: async ({ canvasElement }) => {
+export const ColumnVisibilityToggle: Story = {
+  render: () => <Example initialFilterModel={{ items: [] }} />,
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
-    await waitForGridToLoad(canvas);
-    await assertRowCount(canvasElement, ALLERGENS_HASANYOF_GLUTEN);
-  },
-};
 
-const allergensHasAllOfGlutenDairy: GridFilterModel = {
-  items: [{ field: 'Allergens', operator: 'hasAllOf', value: ['Gluten', 'Dairy'] }],
-};
-
-export const FilterAllergensHasAllOfGlutenDairy: Story = {
-  render: () => <Example initialFilterModel={allergensHasAllOfGlutenDairy} />,
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    await waitForGridToLoad(canvas);
-    await assertRowCount(canvasElement, ALLERGENS_HASALLOF_GLUTEN_DAIRY);
+    await step('Wait for grid to load', async () => {
+      await waitForGridToLoad(canvas);
+    });
+
+    await step('Verify Date & Time column is visible', async () => {
+      await assertColumnVisible(canvasElement, 'Date & Time');
+    });
+
+    await step('Hide Date & Time column', async () => {
+      await openColumnsPanel(canvasElement);
+      await toggleColumnInPanel('Date & Time');
+      await closeColumnsPanel();
+      await assertColumnHidden(canvasElement, 'Date & Time');
+    });
+
+    await step('Show Date & Time column again', async () => {
+      await openColumnsPanel(canvasElement);
+      await toggleColumnInPanel('Date & Time');
+      await closeColumnsPanel();
+      await assertColumnVisible(canvasElement, 'Date & Time');
+    });
   },
 };
 
 // ---------------------------------------------------------------------------
-// Tags (tags column) — has / hasAnyOf
+// Density — switch between compact, standard, comfortable
 // ---------------------------------------------------------------------------
 
-const tagsHasLocal: GridFilterModel = {
-  items: [{ field: 'Tags', operator: 'has', value: 'Local' }],
-};
-
-export const FilterTagsHasLocal: Story = {
-  render: () => <Example initialFilterModel={tagsHasLocal} />,
-  play: async ({ canvasElement }) => {
+export const DensitySwitch: Story = {
+  render: () => <Example initialFilterModel={{ items: [] }} />,
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
-    await waitForGridToLoad(canvas);
-    await assertRowCount(canvasElement, TAGS_HAS_LOCAL);
-  },
-};
 
-const tagsHasAnyOfLocalNew: GridFilterModel = {
-  items: [{ field: 'Tags', operator: 'hasAnyOf', value: ['Local', 'New'] }],
-};
+    await step('Wait for grid to load', async () => {
+      await waitForGridToLoad(canvas);
+    });
 
-export const FilterTagsHasAnyOfLocalNew: Story = {
-  render: () => <Example initialFilterModel={tagsHasAnyOfLocalNew} />,
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    await waitForGridToLoad(canvas);
-    await assertRowCount(canvasElement, TAGS_HASANYOF_LOCAL_NEW);
+    await step('Verify default density is Compact', async () => {
+      await assertDensity(canvasElement, 'Compact');
+    });
+
+    await step('Switch to Standard density', async () => {
+      await changeDensity(canvasElement, 'Standard');
+      await assertDensity(canvasElement, 'Standard');
+    });
+
+    await step('Switch to Comfortable density', async () => {
+      await changeDensity(canvasElement, 'Comfortable');
+      await assertDensity(canvasElement, 'Comfortable');
+    });
+
+    await step('Switch back to Compact density', async () => {
+      await changeDensity(canvasElement, 'Compact');
+      await assertDensity(canvasElement, 'Compact');
+    });
   },
 };
 
 // ---------------------------------------------------------------------------
-// Checkbox selection — bulk action bar appears/disappears
+// Sorting — click column header to cycle sort direction
 // ---------------------------------------------------------------------------
 
-export const CheckboxSelectionBulkActions: Story = {
+export const SortingInteraction: Story = {
   render: () => <Example initialFilterModel={{ items: [] }} />,
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
-    await waitForGridToLoad(canvas);
-
-    // Initially no bulk action bar
-    await assertBulkActionBarHidden(canvasElement);
-
-    // Select first row via checkbox
-    await clickRowCheckbox(canvasElement, 0);
-    await assertBulkActionBarVisible(canvasElement, 1);
 
-    // Select second row
-    await clickRowCheckbox(canvasElement, 1);
-    await assertBulkActionBarVisible(canvasElement, 2);
-
-    // Deselect first row
-    await clickRowCheckbox(canvasElement, 0);
-    await assertBulkActionBarVisible(canvasElement, 1);
-
-    // Deselect second row — bulk action bar disappears
-    await clickRowCheckbox(canvasElement, 1);
-    await assertBulkActionBarHidden(canvasElement);
+    await step('Wait for grid to load', async () => {
+      await waitForGridToLoad(canvas);
+    });
+
+    await step('Verify default sort is DateTime descending', async () => {
+      await assertColumnSorted(canvasElement, 'Date & Time', 'descending');
+    });
+
+    await step('Click Item header — sort ascending', async () => {
+      await clickColumnHeader(canvasElement, 'Item');
+      await assertColumnSorted(canvasElement, 'Item', 'ascending');
+      await assertColumnSorted(canvasElement, 'Date & Time', 'none');
+    });
+
+    await step('Click Item header again — sort descending', async () => {
+      await clickColumnHeader(canvasElement, 'Item');
+      await assertColumnSorted(canvasElement, 'Item', 'descending');
+    });
+
+    await step('Click Item header again — unsorted', async () => {
+      await clickColumnHeader(canvasElement, 'Item');
+      await assertColumnSorted(canvasElement, 'Item', 'none');
+    });
   },
 };
 
@@ -287,10 +492,12 @@ export const CheckboxSelectionBulkActions: Story = {
 
 export const WithLoading: Story = {
   render: () => <WithLoadingExample />,
-  play: async ({ canvasElement }) => {
-    await assertLoadingVisible(canvasElement);
-    const grid = canvasElement.querySelector('.MuiDataGrid-root');
-    expect(grid).toBeTruthy();
+  play: async ({ canvasElement, step }) => {
+    await step('Assert loading state is visible', async () => {
+      await assertLoadingVisible(canvasElement);
+      const grid = canvasElement.querySelector('.MuiDataGrid-root');
+      expect(grid).toBeTruthy();
+    });
   },
 };
 
@@ -308,12 +515,18 @@ export const WithEmptyState: Story = {
 
 export const WithError: Story = {
   render: () => <WithErrorExample />,
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
-    await assertErrorBannerVisible(canvas);
-    const retryButton = getRetryButton(canvas);
-    expect(retryButton).toBeTruthy();
-    await userEvent.click(retryButton);
-    await assertLoadingVisible(canvasElement);
+
+    await step('Assert error banner is visible', async () => {
+      await assertErrorBannerVisible(canvas);
+    });
+
+    await step('Click retry button — loading state appears', async () => {
+      const retryButton = getRetryButton(canvas);
+      expect(retryButton).toBeTruthy();
+      await userEvent.click(retryButton);
+      await assertLoadingVisible(canvasElement);
+    });
   },
 };