test(integration): add consumer-perspective DataAppWorkflow story by ts-ithomas · Pull Request #100 · tetrascience/ts-lib-ui-kit

ts-ithomas · 2026-05-13T19:58:00Z

Summary

This PR adds a single Storybook story file that tests the UI kit from a consumer's perspective — the way a developer who has installed the package and built a data app on top of it would experience it.

It came out of a QE review of SW-1288 (v0.5.0). The existing test suite is strong on component internals and design tokens, but there were no tests that import from the public package surface and exercise a realistic end-to-end workflow. This is a first pass at filling that gap.

Not tied to any sprint or epic — sharing for the team to adopt if it's useful.

What's in the file

src/components/composed/DataAppWorkflow.stories.tsx

A CompoundRegistry component built using only public imports:

import { Badge, Button, DataTable, DataTableFilter, DataTablePagination, TableToolbar }
  from "@tetrascience-npm/tetrascience-react-ui"

Five stories, each with a play: function that runs in Playwright via the existing CI:

Story	Scenario
`RendersWithData`	Table renders with correct headers, 5 rows/page, Badge status cells, View buttons
`SortByName`	Click Name header → ascending (Amoxicillin first); click again → descending (Warfarin first)
`FilterByCategory`	Filter panel → Category = "Antibiotic" → 3 rows; clear → 5 rows restored
`Pagination`	1–5 of 12 → Next → 6–10 → Next → 11–12 (2 rows) → Previous
`RowActionCallback`	View button fires `onView` callback with the correct row object

Why this matters

If a breaking change lands in DataTable, Badge, Button, or the filter/pagination components, these tests will fail in CI before any downstream app is affected. It's essentially a consumer regression harness baked into the repo.

Notes for the team

Zephyr IDs are left as "" — the sync workflow will assign them on merge
The compound dataset and column definitions are intentionally simple — feel free to swap in the fixture data from .storybook/__fixtures__/ or adjust assertions to match your conventions
The onView callback pattern (custom cell with a Button) is a stand-in for onRowClick — if that prop gets added to DataTable in future, this story is a natural place to test it

Happy to adjust anything before this merges. Thanks for the great work on v0.5.0!

Adds a Storybook play-function story that exercises the UI kit from the outside — importing exclusively from the public package surface (@tetrascience-npm/tetrascience-react-ui) and building a realistic compound-registry data app on top of it. Five scenarios are covered: initial render, sort, filter, pagination, and row action callback. If any of these break for a downstream consumer, CI will catch it here first. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

vercel · 2026-05-13T19:58:06Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
ts-lib-ui-kit-storybook	Ready	Preview, Comment	May 14, 2026 0:36am

Copilot

Pull request overview

Adds a new Storybook story file that exercises the UI kit from a consumer's perspective — importing components only via the public package entry point (@tetrascience-npm/tetrascience-react-ui, aliased to local src/index.ts by vite.config.ts) and walking through a realistic compound‑registry data‑app workflow. Five play() functions assert rendering, sorting, filtering, pagination, and a row‑action callback to act as an end‑to‑end consumer regression harness. The story is not tied to a Jira ticket, no production code is modified, and Zephyr IDs are intentionally left empty for the sync workflow to populate.

Changes:

Adds CompoundRegistry consumer-style component using DataTable, DataTableFilter, DataTablePagination, TableToolbar, Badge, and Button from the package's public entry.
Adds five Storybook stories under the new Integration/DataAppWorkflow title with play() functions covering rendering, sort, filter, pagination, and row-action callback flows.
Uses the package self-import path so a break in any of the re-exported components surfaces as a failing CI test.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

blee-tetrascience · 2026-05-13T20:39:35Z

The import from @tetrascience-npm/tetrascience-react-ui won't fail at build time, but the reason why is worth understanding. vite.config.ts defines an alias that maps the package name to src/index.ts locally, so it never touches npm or any published version. The story file header says these tests simulate "a developer who has installed the kit" but that's not accurate. These tests run against the live source tree, not the compiled dist/ output that consumers actually get. A build regression (dropped export, bad rollup config, etc.) would pass these tests and still break downstream apps. Worth either updating the comment to accurately describe what's being tested, or adding a separate test that runs against dist/ if the consumer perspective guarantee is something we actually want.

blee-tetrascience · 2026-05-13T20:39:38Z

This file lives in src/components/composed/ but there's no DataAppWorkflow component, just a test fixture with an inline CompoundRegistry. The composed/ directory is for actual components so this is a bit confusing. Something like src/stories/integration/ would make the intent clearer.

- Move file from src/components/composed/ to src/stories/integration/ (composed/ is for real components, not test fixtures) - Remove unused React namespace import flagged by Copilot - Fix filter assertion: toHaveLength(3) instead of toBeLessThanOrEqual(3) - Update file header to accurately describe what is tested (source tree, not compiled dist/) and note the gap a consumer build test would fill - Add "Integration" to storybook preview.ts sort order so the section is positioned deliberately rather than falling into the wildcard bucket Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Copilot

Pull request overview

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

The sort onClick handler is attached to the inner div inside the th (data-table.tsx:233), not the th itself. Clicking the columnheader role element never triggered sorting. Fix mirrors the pattern used in the existing ReorderWithSorting story. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Copilot

Pull request overview

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

ts-ithomas · 2026-05-14T00:44:15Z

Hey Brennon — updated the PR description to reflect the correct file path (src/stories/integration/). All of Copilot's feedback has been addressed across the last few commits.

Totally happy for you to merge, adjust, or discard this. The follow-up idea of running tests against dist/ post-pack is definitely worth a separate ticket. Will be good to have one test like that.

Thanks again for the thorough review!

54321jenn-ts

LGTM

blee-tetrascience

CI is red for build, Storybook, and title check. Please fix the failing play step below and put the Jira ticket in the required PR field so the title check passes.

blee-tetrascience · 2026-05-29T19:58:29Z

+    await step("Select Category column in the filter", async () => {
+      const columnSelects = body.getAllByRole("combobox")
+      await userEvent.click(columnSelects[0])
+      await userEvent.click(body.getByRole("option", { name: "Category" }))


CI opens this select and only sees page size options, so the test is clicking the wrong combobox. Please scope the query to the filter popover or choose the combobox by its accessible name before selecting Category.

Copilot AI review requested due to automatic review settings May 13, 2026 19:58

ts-ithomas requested review from a team as code owners May 13, 2026 19:58

ts-ithomas temporarily deployed to artifactory-prod May 13, 2026 19:58 — with GitHub Actions Inactive

Copilot started reviewing on behalf of ts-ithomas May 13, 2026 19:58 View session

Copilot AI reviewed May 13, 2026

View reviewed changes

Comment thread src/components/composed/DataAppWorkflow.stories.tsx Outdated

Comment thread src/stories/integration/DataAppWorkflow.stories.tsx

Comment thread src/components/composed/DataAppWorkflow.stories.tsx Outdated

ts-ithomas temporarily deployed to artifactory-prod May 14, 2026 00:26 — with GitHub Actions Inactive

vercel Bot deployed to Preview May 14, 2026 00:28 View deployment

ts-ithomas requested a review from Copilot May 14, 2026 00:28

Copilot started reviewing on behalf of ts-ithomas May 14, 2026 00:29 View session

Copilot AI reviewed May 14, 2026

View reviewed changes

Comment thread src/stories/integration/DataAppWorkflow.stories.tsx Outdated

ts-ithomas temporarily deployed to artifactory-prod May 14, 2026 00:34 — with GitHub Actions Inactive

ts-ithomas requested a review from Copilot May 14, 2026 00:36

vercel Bot deployed to Preview May 14, 2026 00:36 View deployment

Copilot started reviewing on behalf of ts-ithomas May 14, 2026 00:37 View session

Copilot AI reviewed May 14, 2026

View reviewed changes

Comment thread src/stories/integration/DataAppWorkflow.stories.tsx

54321jenn-ts approved these changes May 20, 2026

View reviewed changes

54321jenn-ts mentioned this pull request May 29, 2026

feat: SW-1825 stepper component #106

Merged

13 tasks

blee-tetrascience requested changes May 29, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

test(integration): add consumer-perspective DataAppWorkflow story#100

test(integration): add consumer-perspective DataAppWorkflow story#100
ts-ithomas wants to merge 3 commits into
mainfrom
qe/consumer-integration-story

ts-ithomas commented May 13, 2026

Uh oh!

vercel Bot commented May 13, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

blee-tetrascience commented May 13, 2026

Uh oh!

blee-tetrascience commented May 13, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

ts-ithomas commented May 14, 2026

Uh oh!

54321jenn-ts left a comment

Uh oh!

blee-tetrascience left a comment

Uh oh!

blee-tetrascience May 29, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

ts-ithomas commented May 13, 2026

Summary

What's in the file

Why this matters

Notes for the team

Uh oh!

vercel Bot commented May 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

blee-tetrascience commented May 13, 2026

Uh oh!

blee-tetrascience commented May 13, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

ts-ithomas commented May 14, 2026

Uh oh!

54321jenn-ts left a comment

Choose a reason for hiding this comment

Uh oh!

blee-tetrascience left a comment

Choose a reason for hiding this comment

Uh oh!

blee-tetrascience May 29, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

vercel Bot commented May 13, 2026 •

edited

Loading