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.

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

Docs: Intro Storybook minor updates #784

Merged
merged 1 commit into from
Oct 21, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
1 change: 1 addition & 0 deletions content/intro-to-storybook/angular/en/deploy.md
Original file line number Diff line number Diff line change
Expand Up @@ -108,6 +108,7 @@ jobs:
with:
#👇 Chromatic projectToken, see https://storybook.js.org/tutorials/intro-to-storybook/angular/en/deploy/ to obtain it
projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
token: ${{ secrets.GITHUB_TOKEN }}
```

<div class="aside">
Expand Down
2 changes: 1 addition & 1 deletion content/intro-to-storybook/angular/en/screen.md
Original file line number Diff line number Diff line change
Expand Up @@ -362,7 +362,7 @@ Can't we automate this workflow and test our component interactions automaticall

### Write a component test using the play function

Storybook's [`play`](https://storybook.js.org/docs/angular/writing-stories/play-function) and [`@storybook/addon-interactions`](https://storybook.js.org/docs/writing-tests/component-testing) help us with that. A play function includes small snippets of code that run after the story renders.
Storybook's [`play`](https://storybook.js.org/docs/writing-stories/play-function) and [`@storybook/addon-interactions`](https://storybook.js.org/docs/writing-tests/component-testing) help us with that. A play function includes small snippets of code that run after the story renders.

The play function helps us verify what happens to the UI when tasks are updated. It uses framework-agnostic DOM APIs, which means we can write stories with the play function to interact with the UI and simulate human behavior no matter the frontend framework.

Expand Down
8 changes: 4 additions & 4 deletions content/intro-to-storybook/react/en/screen.md
Original file line number Diff line number Diff line change
Expand Up @@ -330,15 +330,15 @@ Check your Storybook, and you'll see that the `error` story is now working as in
/>
</video>

## Interaction tests
## Component tests

So far, we've been able to build a fully functional application from the ground up, starting from a simple component up to a screen and continuously testing each change using our stories. But each new story also requires a manual check on all the other stories to ensure the UI doesn't break. That's a lot of extra work.

Can't we automate this workflow and test our component interactions automatically?

### Write an interaction test using the play function
### Write a component test using the play function

Storybook's [`play`](https://storybook.js.org/docs/writing-stories/play-function) and [`@storybook/addon-interactions`](https://storybook.js.org/docs/writing-tests/interaction-testing) help us with that. A play function includes small snippets of code that run after the story renders.
Storybook's [`play`](https://storybook.js.org/docs/writing-stories/play-function) and [`@storybook/addon-interactions`](https://storybook.js.org/docs/writing-tests/component-testing) help us with that. A play function includes small snippets of code that run after the story renders.

The play function helps us verify what happens to the UI when tasks are updated. It uses framework-agnostic DOM APIs, which means we can write stories with the play function to interact with the UI and simulate human behavior no matter the frontend framework.

Expand Down Expand Up @@ -457,7 +457,7 @@ yarn test-storybook --watch

<div class="aside">

💡 Interaction testing with the play function is a fantastic way to test your UI components. It can do much more than we've seen here; we recommend reading the [official documentation](https://storybook.js.org/docs/writing-tests/interaction-testing) to learn more about it.
💡 Component testing with the play function is a fantastic way to test your UI components. It can do much more than we've seen here; we recommend reading the [official documentation](https://storybook.js.org/docs/writing-tests/component-testing) to learn more about it.

For an even deeper dive into testing, check out the [Testing Handbook](/ui-testing-handbook). It covers testing strategies used by scaled-front-end teams to supercharge your development workflow.

Expand Down
2 changes: 1 addition & 1 deletion content/intro-to-storybook/react/en/test.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ No Storybook tutorial would be complete without testing. Testing is essential to

- **Accessibility tests** with a11y addon verify that the component is accessible to everyone. They're great for allowing us to collect information about how people with certain types of disabilities use our components.

- **Interaction tests** with the play function verify that the component behaves as expected when interacting with it. They're great for testing the behavior of a component when it's in use.
- **Component tests** with the play function verify that the component behaves as expected when interacting with it. They're great for testing the behavior of a component when it's in use.

## “But does it look right?”

Expand Down
6 changes: 3 additions & 3 deletions content/intro-to-storybook/svelte/en/screen.md
Original file line number Diff line number Diff line change
Expand Up @@ -161,13 +161,13 @@ Cycling through states in Storybook makes it easy to test we’ve done this corr
/>
</video>

## Interaction tests
## Component tests

So far, we've been able to build a fully functional application from the ground up, starting from a simple component up to a screen and continuously testing each change using our stories. But each new story also requires a manual check on all the other stories to ensure the UI doesn't break. That's a lot of extra work.

Can't we automate this workflow and test our component interactions automatically?

### Write an interaction test using the play function
### Write a component test using the play function

Storybook's [`play`](https://storybook.js.org/docs/writing-stories/play-function) and [`@storybook/addon-interactions`](https://storybook.js.org/docs/writing-tests/interaction-testing) help us with that. A play function includes small snippets of code that run after the story renders.

Expand Down Expand Up @@ -252,7 +252,7 @@ yarn test-storybook --watch

<div class="aside">

💡 Interaction testing with the play function is a fantastic way to test your UI components. It can do much more than we've seen here; we recommend reading the [official documentation](https://storybook.js.org/docs/writing-tests/interaction-testing) to learn more about it.
💡 Component testing with the play function is a fantastic way to test your UI components. It can do much more than we've seen here; we recommend reading the [official documentation](https://storybook.js.org/docs/writing-tests/component-testing) to learn more about it.

For an even deeper dive into testing, check out the [Testing Handbook](/ui-testing-handbook). It covers testing strategies used by scaled-front-end teams to supercharge your development workflow.

Expand Down
2 changes: 1 addition & 1 deletion content/intro-to-storybook/svelte/en/test.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ No Storybook tutorial would be complete without testing. Testing is essential to

- **Accessibility tests** with a11y addon verify that the component is accessible to everyone. They're great for allowing us to collect information about how people with certain types of disabilities use our components.

- **Interaction tests** with the play function verify that the component behaves as expected when interacting with it. They're great for testing the behavior of a component when it's in use.
- **Component tests** with the play function verify that the component behaves as expected when interacting with it. They're great for testing the behavior of a component when it's in use.

## “But does it look right?”

Expand Down
8 changes: 4 additions & 4 deletions content/intro-to-storybook/vue/en/screen.md
Original file line number Diff line number Diff line change
Expand Up @@ -188,15 +188,15 @@ Cycling through states in Storybook makes it easy to test we’ve done this corr
/>
</video>

## Interaction tests
## Component tests

So far, we've been able to build a fully functional application from the ground up, starting from a simple component up to a screen and continuously testing each change using our stories. But each new story also requires a manual check on all the other stories to ensure the UI doesn't break. That's a lot of extra work.

Can't we automate this workflow and test our component interactions automatically?

### Write an interaction test using the play function
### Write a component test using the play function

Storybook's [`play`](https://storybook.js.org/docs/writing-stories/play-function) and [`@storybook/addon-interactions`](https://storybook.js.org/docs/writing-tests/interaction-testing) help us with that. A play function includes small snippets of code that run after the story renders.
Storybook's [`play`](https://storybook.js.org/docs/writing-stories/play-function) and [`@storybook/addon-interactions`](https://storybook.js.org/docs/writing-tests/component-testing) help us with that. A play function includes small snippets of code that run after the story renders.

The play function helps us verify what happens to the UI when tasks are updated. It uses framework-agnostic DOM APIs, which means we can write stories with the play function to interact with the UI and simulate human behavior no matter the frontend framework.

Expand Down Expand Up @@ -279,7 +279,7 @@ yarn test-storybook --watch

<div class="aside">

💡 Interaction testing with the play function is a fantastic way to test your UI components. It can do much more than we've seen here; we recommend reading the [official documentation](https://storybook.js.org/docs/writing-tests/interaction-testing) to learn more about it.
💡 Component testing with the play function is a fantastic way to test your UI components. It can do much more than we've seen here; we recommend reading the [official documentation](https://storybook.js.org/docs/writing-tests/component-testing) to learn more about it.

For an even deeper dive into testing, check out the [Testing Handbook](/ui-testing-handbook). It covers testing strategies used by scaled-front-end teams to supercharge your development workflow.

Expand Down
2 changes: 1 addition & 1 deletion content/intro-to-storybook/vue/en/test.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ No Storybook tutorial would be complete without testing. Testing is essential to

- **Accessibility tests** with a11y addon verify that the component is accessible to everyone. They're great for allowing us to collect information about how people with certain types of disabilities use our components.

- **Interaction tests** with the play function verify that the component behaves as expected when interacting with it. They're great for testing the behavior of a component when it's in use.
- **Component tests** with the play function verify that the component behaves as expected when interacting with it. They're great for testing the behavior of a component when it's in use.

## “But does it look right?”

Expand Down
6 changes: 3 additions & 3 deletions gatsby-config.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ module.exports = {
'intro-to-storybook': {
react: {
de: 5.3,
en: 8.1,
en: 8.3,
es: 6.5,
fr: 6.5,
it: 7.6,
Expand All @@ -38,7 +38,7 @@ module.exports = {
pt: 7.6,
},
vue: {
en: 8.1,
en: 8.3,
es: 6.1,
fr: 5.3,
pt: 5.3,
Expand All @@ -52,7 +52,7 @@ module.exports = {
pt: 5.3,
},
svelte: {
en: 8.1,
en: 8.3,
es: 5.3,
},
ember: {
Expand Down
Loading