### What is Rocket Kit?

![TAIKAI Rocket Kit Storybook](https://storage.googleapis.com/taikai-storage/images/bounties/CleanShot%202022-10-07%20at%2010.09.43%402x.png)

As the project grew, we at TAIKAI realized that it was essential to have an internal design system to share components between the various projects we were developing. The journey was not always easy, but we learned what would work best for us internally along the way.

With the growth of the design system, we realized that it would make perfect sense to open it to the world and provide a package with these same components for anyone who wanted to start a project in a hackathon, bounty, startup, etc.

It is an always-in-progress project, developed in TypeScript, and already has some tests in several components, accessibility tests, and visual testing.

GitHub → [github.com/taikai/rocket-kit](https://github.com/taikai/rocket-kit)

Storybook → [chromatic.com](https://600c295ccb36300021e7d82f-mqqrjrjcdd.chromatic.com/)

### What is Storybook?

Storybook is a frontend workshop for building UI components and pages in isolation that helps you develop hard-to-reach states and edge cases without running the whole app.

For more information, visit the [Storybook website](https://storybook.js.org).

### The Bounty

![2022-02-23-17.09.31.gif](https://storage.googleapis.com/taikai-storage/images/bounties/2022-02-23-17.09.31.gif)

Our goal will be to make Rocket Kit a robust design system, with all the components to start or integrate into any project, well documented, and with automation of usability and accessibility tests.

With this in mind, this bounty is intended to improve the testing of various components by adding [interaction testing](https://storybook.js.org/blog/interaction-testing-with-storybook/) with the [Testing Library](https://testing-library.com/), that runs in a live browser and can be executed via the command line or your CI server to simulate and verify user behavior.

The components and individual stories where the interaction tests should be added are:

- Atoms/Checkbox
- Atoms/TextField
- Atoms/Button
- Atoms/File Picker
- Atoms/Select
- Atoms/Slideshow
- Atoms/TextArea
- Atoms/TextFieldAppendix
- Atoms/Toggle
- Molecules/ActionsMenu
- Molecules/Note Card
- Molecules/Alert
- Molecules/CheckboxGroup
- Molecules/FieldWidthButton
- Molecules/Form Group
- Molecules/Modal Footer
- Molecules/Number Spinner
- Molecules/PaginationControl
- Molecules/RadioGroup
- Molecules/Table
- Molecules/Wizard Steps
- Organisms/Navigation
- Organisms/Modal

#### But what kind of tests?

Good question, and glad you asked! The expected tests differ from component to component, but here are some examples of what you can test to include different (available) behaviors on a single component:

- Atoms/Checkbox
    - Find the element to check;
    - Check if it is unchecked;
    - Check if the button change the color with mouse hover;
    - Click to check;
    - See if the checkbox is checked.
- Atoms/TextField
    - Find the field;
    - Check if change the color when you select;
    - Check the field;
    - Type something and see if it changes the value.
- Atoms/Button
    - Find the button element;
    - Check if the button change the color with mouse hover;
    - Press the button;
    - See if the button receive the click.





Added interaction tests to the following storybook stories

Atoms/Checkbox
Atoms/TextField
Atoms/Button
Atoms/File Picker
Atoms/Select
Atoms/Slideshow
Atoms/TextArea
Atoms/TextFieldAppendix
Atoms/Toggle
Molecules/ActionsMenu
Molecules/Note Card
Molecules/Alert
Molecules/CheckboxGroup
Molecules/FieldWidthButton
Molecules/Form Group
Molecules/Modal Footer
Molecules/Number Spinner
Molecules/PaginationControl
Molecules/RadioGroup
Molecules/Table
Molecules/Wizard Steps
Organisms/Navigation
Organisms/Modal

There are 3 ways to run these tests:

    by browsing around in the storybook
    by first starting the storybook and then runninh npm run test-storybook
    or by pushing your changes and github will automatically run them, as defined in the workflow file storybook-tests.yml


Rocket Kit - Add interaction tests

Details

Description

Comments