Example: Individual Story Plan — Pagination

This file excerpts the key sections from the implementation plan for the Business Affiliate Pagination story (BA::0001::0006). It is an example of a pure play-function story: one that creates a single new file and reuses all existing infrastructure without modifying any shared code. Future story plans of this type should follow this structure.

See the Story Plan template for the full template structure.

---

Preconditions

The following infrastructure must exist and be merged before this story can begin.

#	Precondition	Provided By
1	BusinessAffiliateDataGrid component renders AG Grid with server-side row model	BA::0001 (Wave 0)
2	useBusinessAffiliates hook accepts page and pageSize parameters and returns totalCount	BA::0001 (Wave 0)
3	PaginationToolbar component exists and accepts currentPage, pageSize, totalCount, onPageChange, onPageSizeChange props	BA::0002 (Wave 1, Browse)
4	Mock data set contains at least 60 records across 3 logical pages	BA::0001 (Wave 0, mock data)

---

Objective

Implement the Storybook story that exercises pagination through the Business Affiliate list. The story must demonstrate navigating from page 1 to page 2 and back, and changing the page size from 20 to 50. No new components, hooks, or utilities are to be created. The story file is the sole deliverable.

---

Element Classification

Story File — BusinessAffiliatePagination.stories.tsx

Meta configuration:

• title: "Use Cases/Business Affiliates/Pagination"
• component: BusinessAffiliateListPage
• parameters.layout: "fullscreen"
• decorators: wraps in MockQueryClientDecorator and RouterDecorator

PaginationFlow play function — assertions (in order):

1. Grid renders with 20 rows on initial load (page 1, pageSize 20).
2. Page indicator shows “Page 1 of 3”.
3. User clicks “Next Page” button; grid re-renders with the next 20 records.
4. Page indicator updates to “Page 2 of 3”.
5. First row of page 2 is visible and contains the expected record name from the mock data set.
6. User clicks “Previous Page”; grid returns to page 1 records.
7. Page indicator returns to “Page 1 of 3”.
8. User selects page size “50” from the page size dropdown; grid re-renders with 50 rows.
9. Page indicator updates to “Page 1 of 2”.
10. Total row count label reads “60 records”.

---

File Inventory

Action	File	Notes
Create	src/use-cases/business-affiliates/BusinessAffiliatePagination.stories.tsx	Sole deliverable

No files are modified by this story.

---

Implementation Steps

Step 1 — Scaffold the story file. Create BusinessAffiliatePagination.stories.tsx with the Meta block and a PaginationFlow named export. Import BusinessAffiliateListPage, MockQueryClientDecorator, RouterDecorator, and userEvent from their established paths. Verify the story renders in Storybook before adding the play function.

Step 2 — Implement the play function. Write the play function using within(canvasElement) for grid queries and screen for any portal elements. Follow the assertion sequence in the Element Classification section above. Use waitFor after each navigation action to allow the mock query to settle before asserting row content. Run npx storybook test locally to confirm all assertions pass.

---

Risk Notes

Mock data page boundaries. The play function asserts on a specific record name at the top of page 2. If the mock data set is sorted differently than expected, this assertion will fail. Confirm the mock data sort order before writing the assertion, or assert on a record name that is unambiguously in the second page regardless of secondary sort.

AG Grid re-render on page change. After clicking “Next Page”, AG Grid briefly removes the current rows before inserting the new page’s rows. Asserting on row content immediately after the click will produce a false negative. Wrap post-navigation row assertions in waitFor. See CI Stabilization Patterns Pattern 3 for details.

---