Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Component test: Fix wording #29487

Open
wants to merge 2 commits into
base: next
Choose a base branch
from
Open

Component test: Fix wording #29487

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
37bc79f
replace Interaction Test wording with Component Test, remove outdated…
JReinhold Oct 30, 2024
9fe5916
Prose tweaks for empty states
kylegach Nov 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 4 additions & 14 deletions code/addons/interactions/src/components/EmptyState.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,22 +4,16 @@ import { EmptyTabContent, Link } from 'storybook/internal/components';
import { useStorybookApi } from 'storybook/internal/manager-api';
import { styled } from 'storybook/internal/theming';

import { DocumentIcon, VideoIcon } from '@storybook/icons';
import { DocumentIcon } from '@storybook/icons';

import { DOCUMENTATION_LINK, TUTORIAL_VIDEO_LINK } from '../constants';
import { DOCUMENTATION_LINK } from '../constants';

const Links = styled.div(({ theme }) => ({
display: 'flex',
fontSize: theme.typography.size.s2 - 1,
gap: 25,
}));

const Divider = styled.div(({ theme }) => ({
width: 1,
height: 16,
backgroundColor: theme.appBorderColor,
}));

export const Empty = () => {
const [isLoading, setIsLoading] = useState(true);
const api = useStorybookApi();
Expand All @@ -46,19 +40,15 @@ export const Empty = () => {

return (
<EmptyTabContent
title="Interaction testing"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should this file be updated at all? I would expect the new terminology to only be used in the test addon, not the (legacy) interactions addon.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We've changed the term everywhere, including the Interactions addon (except that name itself 🙃).

title="Component testing"
description={
<>
Interaction tests allow you to verify the functional aspects of UIs. Write a play function
Component 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.
kylegach marked this conversation as resolved.
Show resolved Hide resolved
</>
}
footer={
<Links>
<Link href={TUTORIAL_VIDEO_LINK} target="_blank" withArrow>
<VideoIcon /> Watch 8m video
</Link>
<Divider />
<Link href={docsUrl} target="_blank" withArrow>
<DocumentIcon /> Read docs
</Link>
Expand Down
2 changes: 1 addition & 1 deletion code/addons/interactions/src/constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,4 @@ export const ADDON_ID = 'storybook/interactions';
export const PANEL_ID = `${ADDON_ID}/panel`;

export const TUTORIAL_VIDEO_LINK = 'https://youtu.be/Waht9qq7AoA';
export const DOCUMENTATION_LINK = 'writing-tests/interaction-testing';
export const DOCUMENTATION_LINK = 'writing-tests/component-testing';
18 changes: 4 additions & 14 deletions code/addons/test/src/components/EmptyState.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,22 +4,16 @@ import { EmptyTabContent, Link } from 'storybook/internal/components';
import { useStorybookApi } from 'storybook/internal/manager-api';
import { styled } from 'storybook/internal/theming';

import { DocumentIcon, VideoIcon } from '@storybook/icons';
import { DocumentIcon } from '@storybook/icons';

import { DOCUMENTATION_LINK, TUTORIAL_VIDEO_LINK } from '../constants';
import { DOCUMENTATION_LINK } from '../constants';

const Links = styled.div(({ theme }) => ({
display: 'flex',
fontSize: theme.typography.size.s2 - 1,
gap: 25,
}));

const Divider = styled.div(({ theme }) => ({
width: 1,
height: 16,
backgroundColor: theme.appBorderColor,
}));

export const Empty = () => {
const [isLoading, setIsLoading] = useState(true);
const api = useStorybookApi();
Expand All @@ -46,19 +40,15 @@ export const Empty = () => {

return (
<EmptyTabContent
title="Interaction testing"
title="Component testing"
description={
<>
Interaction tests allow you to verify the functional aspects of UIs. Write a play function
Component 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.
kylegach marked this conversation as resolved.
Show resolved Hide resolved
</>
}
footer={
<Links>
<Link href={TUTORIAL_VIDEO_LINK} target="_blank" withArrow>
<VideoIcon /> Watch 8m video
</Link>
<Divider />
<Link href={docsUrl} target="_blank" withArrow>
<DocumentIcon /> Read docs
</Link>
Expand Down
2 changes: 1 addition & 1 deletion code/core/src/core-server/presets/common-preset.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,7 @@ export const babel = async (_: unknown, options: Options) => {
...babelDefault,
// This override makes sure that we will never transpile babel further down then the browsers that storybook supports.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

syntax: typo: 'down then' should be 'down than'

// This is needed to support the mount property of the context described here:
// https://storybook.js.org/docs/writing-tests/interaction-testing#run-code-before-each-test
// https://storybook.js.org/docs/writing-tests/component-testing#run-code-before-each-test
overrides: [
...(babelDefault?.overrides ?? []),
{
Expand Down
2 changes: 1 addition & 1 deletion code/core/src/preview-errors.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -228,7 +228,7 @@ export class MountMustBeDestructuredError extends StorybookError {

Note that Angular is not supported. As async/await is transpiled to support the zone.js polyfill.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

syntax: sentence fragment: 'As async/await is transpiled' is incomplete and unclear


More info: https://storybook.js.org/docs/writing-tests/interaction-testing#run-code-before-the-component-gets-rendered
More info: https://storybook.js.org/docs/writing-tests/component-testing#run-code-before-the-component-gets-rendered

Received the following play function:
${data.playFunction}`,
Expand Down
2 changes: 1 addition & 1 deletion code/core/template/stories/indexer.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { expect } from '@storybook/test';

export default {
component: globalThis.Components.Pre,
args: { text: 'Check that id assertions in interaction tests are passing' },
args: { text: 'Check that id assertions in component tests are passing' },
id: 'indexer-custom-meta-id',
};

Expand Down
2 changes: 1 addition & 1 deletion code/frameworks/angular/template/cli/page.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ type Story = StoryObj<PageComponent>;

export const LoggedOut: Story = {};

// More on interaction testing: https://storybook.js.org/docs/writing-tests/interaction-testing
// More on component testing: https://storybook.js.org/docs/writing-tests/component-testing
export const LoggedIn: Story = {
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
Expand Down
2 changes: 1 addition & 1 deletion code/frameworks/experimental-nextjs-vite/template/cli/js/Page.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export default {

export const LoggedOut = {};

// More on interaction testing: https://storybook.js.org/docs/writing-tests/interaction-testing
// More on component testing: https://storybook.js.org/docs/writing-tests/component-testing
export const LoggedIn = {
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
Expand Down
2 changes: 1 addition & 1 deletion code/frameworks/experimental-nextjs-vite/template/cli/ts-3-8/Page.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ type Story = StoryObj<typeof Page>;

export const LoggedOut: Story = {};

// More on interaction testing: https://storybook.js.org/docs/writing-tests/interaction-testing
// More on component testing: https://storybook.js.org/docs/writing-tests/component-testing
export const LoggedIn: Story = {
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
Expand Down
2 changes: 1 addition & 1 deletion code/frameworks/experimental-nextjs-vite/template/cli/ts-4-9/Page.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ type Story = StoryObj<typeof meta>;

export const LoggedOut: Story = {};

// More on interaction testing: https://storybook.js.org/docs/writing-tests/interaction-testing
// More on component testing: https://storybook.js.org/docs/writing-tests/component-testing
export const LoggedIn: Story = {
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
Expand Down
2 changes: 1 addition & 1 deletion code/frameworks/nextjs/template/cli/js/Page.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export default {

export const LoggedOut = {};

// More on interaction testing: https://storybook.js.org/docs/writing-tests/interaction-testing
// More on component testing: https://storybook.js.org/docs/writing-tests/component-testing
export const LoggedIn = {
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
Expand Down
2 changes: 1 addition & 1 deletion code/frameworks/nextjs/template/cli/ts-3-8/Page.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ type Story = StoryObj<typeof Page>;

export const LoggedOut: Story = {};

// More on interaction testing: https://storybook.js.org/docs/writing-tests/interaction-testing
// More on component testing: https://storybook.js.org/docs/writing-tests/component-testing
export const LoggedIn: Story = {
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
Expand Down
2 changes: 1 addition & 1 deletion code/frameworks/nextjs/template/cli/ts-4-9/Page.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ type Story = StoryObj<typeof meta>;

export const LoggedOut: Story = {};

// More on interaction testing: https://storybook.js.org/docs/writing-tests/interaction-testing
// More on component testing: https://storybook.js.org/docs/writing-tests/component-testing
export const LoggedIn: Story = {
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
Expand Down
2 changes: 1 addition & 1 deletion code/renderers/html/template/cli/js/Page.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export default {

export const LoggedOut = {};

// More on interaction testing: https://storybook.js.org/docs/writing-tests/interaction-testing
// More on component testing: https://storybook.js.org/docs/writing-tests/component-testing
export const LoggedIn = {
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
Expand Down
2 changes: 1 addition & 1 deletion code/renderers/html/template/cli/ts-3-8/Page.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export default meta;

export const LoggedOut: StoryObj = {};

// More on interaction testing: https://storybook.js.org/docs/writing-tests/interaction-testing
// More on component testing: https://storybook.js.org/docs/writing-tests/component-testing
export const LoggedIn: StoryObj = {
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
Expand Down
2 changes: 1 addition & 1 deletion code/renderers/html/template/cli/ts-4-9/Page.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export default meta;

export const LoggedOut: StoryObj = {};

// More on interaction testing: https://storybook.js.org/docs/writing-tests/interaction-testing
// More on component testing: https://storybook.js.org/docs/writing-tests/component-testing
export const LoggedIn: StoryObj = {
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
Expand Down
2 changes: 1 addition & 1 deletion code/renderers/preact/template/cli/Page.stories.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export default {

export const LoggedOut = {};

// More on interaction testing: https://storybook.js.org/docs/writing-tests/interaction-testing
// More on component testing: https://storybook.js.org/docs/writing-tests/component-testing
export const LoggedIn = {
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
Expand Down
2 changes: 1 addition & 1 deletion code/renderers/react/template/cli/js/Page.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export default {

export const LoggedOut = {};

// More on interaction testing: https://storybook.js.org/docs/writing-tests/interaction-testing
// More on component testing: https://storybook.js.org/docs/writing-tests/component-testing
export const LoggedIn = {
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
Expand Down
2 changes: 1 addition & 1 deletion code/renderers/react/template/cli/ts-3-8/Page.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ type Story = StoryObj<typeof Page>;

export const LoggedOut: Story = {};

// More on interaction testing: https://storybook.js.org/docs/writing-tests/interaction-testing
// More on component testing: https://storybook.js.org/docs/writing-tests/component-testing
export const LoggedIn: Story = {
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
Expand Down
2 changes: 1 addition & 1 deletion code/renderers/react/template/cli/ts-4-9/Page.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ type Story = StoryObj<typeof meta>;

export const LoggedOut: Story = {};

// More on interaction testing: https://storybook.js.org/docs/writing-tests/interaction-testing
// More on component testing: https://storybook.js.org/docs/writing-tests/component-testing
export const LoggedIn: Story = {
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
Expand Down
2 changes: 1 addition & 1 deletion code/renderers/svelte/template/cli/js/Page.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export default {

export const LoggedOut = {};

// More on interaction testing: https://storybook.js.org/docs/writing-tests/interaction-testing
// More on component testing: https://storybook.js.org/docs/writing-tests/component-testing
export const LoggedIn = {
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
Expand Down
2 changes: 1 addition & 1 deletion code/renderers/svelte/template/cli/ts-3-8/Page.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ type Story = StoryObj<Page>;

export const LoggedOut: Story = {};

// More on interaction testing: https://storybook.js.org/docs/writing-tests/interaction-testing
// More on component testing: https://storybook.js.org/docs/writing-tests/component-testing
export const LoggedIn: Story = {
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
Expand Down
2 changes: 1 addition & 1 deletion code/renderers/svelte/template/cli/ts-4-9/Page.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ type Story = StoryObj<typeof meta>;

export const LoggedOut: Story = {};

// More on interaction testing: https://storybook.js.org/docs/writing-tests/interaction-testing
// More on component testing: https://storybook.js.org/docs/writing-tests/component-testing
export const LoggedIn: Story = {
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
Expand Down
2 changes: 1 addition & 1 deletion code/renderers/vue3/template/cli/js/Page.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export default {

export const LoggedOut = {};

// More on interaction testing: https://storybook.js.org/docs/writing-tests/interaction-testing
// More on component testing: https://storybook.js.org/docs/writing-tests/component-testing
export const LoggedIn = {
render: () => ({
components: {
Expand Down
2 changes: 1 addition & 1 deletion code/renderers/vue3/template/cli/ts-3-8/Page.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ const meta: Meta<typeof MyPage> = {
export default meta;
type Story = StoryObj<typeof MyPage>;

// More on interaction testing: https://storybook.js.org/docs/writing-tests/interaction-testing
// More on component testing: https://storybook.js.org/docs/writing-tests/component-testing
export const LoggedIn: Story = {
play: async ({ canvasElement }: any) => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

style: canvasElement should be properly typed rather than using 'any'

const canvas = within(canvasElement);
Expand Down
2 changes: 1 addition & 1 deletion code/renderers/vue3/template/cli/ts-4-9/Page.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ const meta = {
export default meta;
type Story = StoryObj<typeof meta>;

// More on interaction testing: https://storybook.js.org/docs/writing-tests/interaction-testing
// More on component testing: https://storybook.js.org/docs/writing-tests/component-testing
export const LoggedIn: Story = {
play: async ({ canvasElement }: any) => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

style: Type 'any' used for canvasElement - consider using a more specific type

const canvas = within(canvasElement);
Expand Down
4 changes: 2 additions & 2 deletions docs/writing-tests/component-testing.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ The test itself is defined inside a `play` function connected to a story. Here's

{/* prettier-ignore-start */}

<CodeSnippets path="login-form-with-play-function.md" usesCsf3 csf2Path="writing-tests/interaction-testing#snippet-login-form-with-play-function" />
<CodeSnippets path="login-form-with-play-function.md" usesCsf3 csf2Path="writing-tests/component-testing#snippet-login-form-with-play-function" />
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@JReinhold if you're ok with it, you can remove the usesCSF3 and csf2Path props from the code snippets as they are no longer relevant.


{/* prettier-ignore-end */}

Expand Down Expand Up @@ -213,7 +213,7 @@ For complex flows, it can be worthwhile to group sets of related interactions to

{/* prettier-ignore-start */}

<CodeSnippets path="storybook-interactions-step-function.md" usesCsf3 csf2Path="writing-tests/interaction-testing#snippet-storybook-interactions-step-function" />
<CodeSnippets path="storybook-interactions-step-function.md" usesCsf3 csf2Path="writing-tests/component-testing#snippet-storybook-interactions-step-function" />

{/* prettier-ignore-end */}

Expand Down
Loading