Addon Test: Add interactions functionality #29232

yannbf · 2024-09-27T13:17:00Z

What I did

This PR brings the addon-interactions panel and functionality into addon test. It's mostly a copy-paste, including e2e tests and unit tests!

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

stories
unit tests
integration tests
end-to-end tests

Manual testing

This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!

Documentation

Add or update documentation reflecting your changes
If you are deprecating/removing a feature, make sure to update
MIGRATION.MD

Checklist for Maintainers

When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli/src/sandbox-templates.ts
Make sure this PR contains one of the labels below:
Available labels
- bug: Internal changes that fixes incorrect behavior.
- maintenance: User-facing maintenance tasks.
- dependencies: Upgrading (sometimes downgrading) dependencies.
- build: Internal-facing build tooling & test updates. Will not show up in release changelog.
- cleanup: Minor cleanup style change. Will not show up in release changelog.
- documentation: Documentation only changes. Will not show up in release changelog.
- feature request: Introducing a new feature.
- BREAKING CHANGE: Changes that break compatibility in some way with current major version.
- other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=<PR_NUMBER>

name	after	diff	z	%
createSize	0 B	0 B	-	-
generateSize	77.7 MB	77.7 MB	-	100%
initSize	152 MB	152 MB	-	100%
diffSize	74.4 MB	74.4 MB	-	100%
buildSize	7.27 MB	7.27 MB	-	100%
buildSbAddonsSize	1.87 MB	1.87 MB	-	100%
buildSbCommonSize	195 kB	195 kB	-	100%
buildSbManagerSize	1.92 MB	1.92 MB	-	100%
buildSbPreviewSize	312 kB	312 kB	-	100%
buildStaticSize	0 B	0 B	-	-
buildPrebuildSize	4.3 MB	4.3 MB	-	100%
buildPreviewSize	2.97 MB	2.97 MB	-	100%
testBuildSize	0 B	0 B	-	-
testBuildSbAddonsSize	0 B	0 B	-	-
testBuildSbCommonSize	0 B	0 B	-	-
testBuildSbManagerSize	0 B	0 B	-	-
testBuildSbPreviewSize	0 B	0 B	-	-
testBuildStaticSize	0 B	0 B	-	-
testBuildPrebuildSize	0 B	0 B	-	-
testBuildPreviewSize	0 B	0 B	-	-

name	before	after	diff	z	%
createTime	0ms	6s	6s	-	100%
generateTime	0ms	19.7s	19.7s	-	100%
initTime	0ms	14s	14s	-	100%
buildTime	0ms	8.7s	8.7s	-	100%
testBuildTime	0ms	0ms	0ms	-	-
devPreviewResponsive	0ms	6.7s	6.7s	-	100%
devManagerResponsive	0ms	4.2s	4.2s	-	100%
devManagerHeaderVisible	0ms	667ms	667ms	-	100%
devManagerIndexVisible	0ms	707ms	707ms	-	100%
devStoryVisibleUncached	0ms	844ms	844ms	-	100%
devStoryVisible	0ms	706ms	706ms	-	100%
devAutodocsVisible	0ms	630ms	630ms	-	100%
devMDXVisible	0ms	610ms	610ms	-	100%
buildManagerHeaderVisible	0ms	667ms	667ms	-	100%
buildManagerIndexVisible	0ms	739ms	739ms	-	100%
buildStoryVisible	0ms	740ms	740ms	-	100%
buildAutodocsVisible	0ms	544ms	544ms	-	100%
buildMDXVisible	0ms	520ms	520ms	-	100%

Greptile Summary

This PR introduces the interactions functionality from addon-interactions into addon-test, focusing on integrating the Interactions panel and related components.

Added new Panel component in src/Panel.tsx to handle rendering and state management of interactions
Introduced InteractionsPanel component in src/components/InteractionsPanel.tsx for displaying test results and exceptions
Updated src/manager.tsx to include the new Component Tests panel with dynamic title showing interaction count and exceptions
Added utility functions in src/utils.ts for error handling and ANSI to HTML conversion
Introduced test stories in stories/basics.stories.ts demonstrating various interaction testing scenarios

nx-cloud · 2024-09-27T13:21:20Z

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 3c49ac3. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

✅ Successfully ran 1 target

nx run-many -t build --parallel=3

Sent with 💌 from NxCloud.

greptile-apps

_{30 file(s) reviewed, 33 comment(s)}
_{Edit PR Review Bot Settings}

greptile-apps · 2024-09-27T13:19:56Z

code/addons/test/src/Panel.tsx

+        ([end]: any) => setScrollTarget(end.isIntersecting ? undefined : end.target),
+        { root: global.document.querySelector('#panel-tab-content') }


style: Type assertion to 'any' here may be unsafe. Consider using a more specific type or adding a type guard.

greptile-apps · 2024-09-27T13:19:57Z

code/addons/test/src/Panel.tsx

+
+  const storyFilePath = useParameter('fileName', '');
+  const [fileName] = storyFilePath.toString().split('/').slice(-1);
+  const scrollToTarget = () => scrollTarget?.scrollIntoView({ behavior: 'smooth', block: 'end' });


style: Consider memoizing this function to prevent unnecessary re-creation on each render.

greptile-apps · 2024-09-27T13:19:58Z

code/addons/test/src/Panel.tsx

+  const hasException =
+    !!caughtException ||
+    !!unhandledErrors ||
+    interactions.some((v) => v.status === CallStates.ERROR);


style: This logic for determining hasException is duplicated in the state. Consider refactoring to use a single source of truth.

greptile-apps · 2024-09-27T13:20:23Z

code/addons/test/src/components/EmptyState.tsx

+          Interaction tests allow you to verify the functional aspects of UIs. Write a play function
+          for your story and you&apos;ll see it run here.


style: consider wrapping long lines for better readability

greptile-apps · 2024-09-27T13:20:43Z

code/addons/test/src/components/Interaction.stories.tsx

+  title: 'Interaction',
+  component: Interaction,
+  args: {
+    callsById: new Map(getCalls(CallStates.DONE).map((call) => [call.id, call])),


style: Consider using a more descriptive variable name instead of 'call' for clarity

greptile-apps · 2024-09-27T13:27:45Z

code/addons/test/src/manager.tsx

+  );
+}
+
+addons.register(ADDON_ID, (api) => {


style: The 'api' parameter is unused. Consider removing it if not needed

greptile-apps · 2024-09-27T13:28:15Z

code/addons/test/src/mocks/index.ts

+      ancestors: ['story--id [6] waitFor'],
+      path: ['expect'],
+      method: 'stringMatching',
+      args: [{ __regexp__: { flags: 'gi', source: '([A-Z])w+' } }],


syntax: The regular expression '([A-Z])w+' might be incorrect. Did you mean '([A-Z])\w+'?

greptile-apps · 2024-09-27T13:29:27Z

code/addons/test/src/theme.ts

+/** Interaction Testing Theme PLACEHOLDER until SB is updated <3 */
+interface Colors {
+  pure?: {
+    gray?: any;


style: Consider using a more specific type than 'any' for better type safety

greptile-apps · 2024-09-27T13:29:28Z

code/addons/test/src/theme.ts

+  colors,
+};
+
+export default theme;


style: Remove this empty line at the end of the file

greptile-apps · 2024-09-27T13:29:54Z

code/addons/test/src/utils.ts

+export function isTestAssertionError(error: unknown) {
+  return isChaiError(error) || isJestError(error);
+}


style: Consider adding a more specific return type (e.g., boolean) for clarity

yannbf added feature request ci:normal addon: test labels Sep 27, 2024

greptile-apps bot reviewed Sep 27, 2024

View reviewed changes

yannbf force-pushed the yann/introduce-test-panel branch from 44872e5 to 8444fd3 Compare September 27, 2024 13:36

yannbf added ci:daily Run the CI jobs that normally run in the daily job. and removed ci:normal labels Sep 27, 2024

yannbf force-pushed the yann/introduce-test-panel branch from 8444fd3 to e8fd5cf Compare September 27, 2024 15:33

Addon Test: Add interactions functionality

ff5ee95

yannbf force-pushed the yann/introduce-test-panel branch from e8fd5cf to ff5ee95 Compare September 27, 2024 15:44

yannbf added 2 commits September 30, 2024 10:41

apply addon-test to all sandboxes

42d0ef4

Merge branch 'unified-ui-testing' into yann/introduce-test-panel

8703d63

kasperpeulen assigned yannbf Sep 30, 2024

fix issues in webpack projects

9ca737d

yannbf force-pushed the yann/introduce-test-panel branch from 4e63442 to 9ca737d Compare September 30, 2024 13:58

yannbf added 4 commits September 30, 2024 16:16

update test snapshots

511892a

add strict: false to addon test tsconfig (hopefully temporarily)

3bae439

skip ts issues

504026e

experiment with v8 coverage

12a7fdb

yannbf added ci:normal and removed ci:daily Run the CI jobs that normally run in the daily job. labels Sep 30, 2024

bring back istanbul coverage

fba1359

ghengeveld approved these changes Oct 1, 2024

View reviewed changes

Update addon test preset to use experimental addon

3c49ac3

yannbf merged commit 43a5c82 into unified-ui-testing Oct 1, 2024
4 of 7 checks passed

yannbf deleted the yann/introduce-test-panel branch October 1, 2024 10:20

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Addon Test: Add interactions functionality #29232

Addon Test: Add interactions functionality #29232

yannbf commented Sep 27, 2024 •

edited by storybook-pr-benchmarking bot

Loading

nx-cloud bot commented Sep 27, 2024 •

edited

Loading

greptile-apps bot left a comment

greptile-apps bot Sep 27, 2024

greptile-apps bot Sep 27, 2024

greptile-apps bot Sep 27, 2024

greptile-apps bot Sep 27, 2024

greptile-apps bot Sep 27, 2024

greptile-apps bot Sep 27, 2024

greptile-apps bot Sep 27, 2024

greptile-apps bot Sep 27, 2024

greptile-apps bot Sep 27, 2024

greptile-apps bot Sep 27, 2024

		([end]: any) => setScrollTarget(end.isIntersecting ? undefined : end.target),
		{ root: global.document.querySelector('#panel-tab-content') }

		Interaction tests allow you to verify the functional aspects of UIs. Write a play function
		for your story and you'll see it run here.

Addon Test: Add interactions functionality #29232

Addon Test: Add interactions functionality #29232

Conversation

yannbf commented Sep 27, 2024 • edited by storybook-pr-benchmarking bot Loading

What I did

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

Manual testing

Documentation

Checklist for Maintainers

🦋 Canary release

Greptile Summary

nx-cloud bot commented Sep 27, 2024 • edited Loading

☁️ Nx Cloud Report

greptile-apps bot left a comment

Choose a reason for hiding this comment

greptile-apps bot Sep 27, 2024

Choose a reason for hiding this comment

greptile-apps bot Sep 27, 2024

Choose a reason for hiding this comment

greptile-apps bot Sep 27, 2024

Choose a reason for hiding this comment

greptile-apps bot Sep 27, 2024

Choose a reason for hiding this comment

greptile-apps bot Sep 27, 2024

Choose a reason for hiding this comment

greptile-apps bot Sep 27, 2024

Choose a reason for hiding this comment

greptile-apps bot Sep 27, 2024

Choose a reason for hiding this comment

greptile-apps bot Sep 27, 2024

Choose a reason for hiding this comment

greptile-apps bot Sep 27, 2024

Choose a reason for hiding this comment

greptile-apps bot Sep 27, 2024

Choose a reason for hiding this comment

yannbf commented Sep 27, 2024 •

edited by storybook-pr-benchmarking bot

Loading

nx-cloud bot commented Sep 27, 2024 •

edited

Loading