layerx-labs/rocket-kit

LayerX Design System

rocket-kit's Issues

Setup ESLint and Prettier

Modal Component

Add ActionsMenu Component

• Component
• Styles
• Storybook
• Tests

Add Table Compoment

• Component
• Styles
• Storybook
• Tests

aedsa adadad

adadadadasd

Rocket Kit - Add interaction tests

What is Rocket Kit?

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

Storybook → 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.

The Bounty

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 with the Testing Library, 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.