@avant-inc/tapestry v0.5.0
Tapestry Design System
Table of Contents
General Info
The purpose of this project is to build/provide custom components that can be implemented throughout all of our applications.
Technologies
Get Started
Setup
Currently Tapestry is build using node version 17.9.1.
If you don't have node installed, then install it locally nodejs or via asdf website
If you are using asdef to control your node version for your projec, you need to install nodejs version 17.9.1
Install dependencies
The generated project includes React, and ReactDOM as devDependencies. You may install other dependencies (for example, React Router) with npm:
npm install --save-dev react-router
Whenever a devDependency is installed, be sure to add it as a peer dependency as well. Our intent is
to keep this component library lightweight in order to improve performance and to avoid duplication
of node_modules
.
Folder structure
When building out your component, you should include a main folder (named appropriately) with all the related files nested inside.
- Required
- Optional
- FileName.styles.(ts/\x|css) to separate styles styles for that specific component.
Below is an example of how your file structure should appear when creating your component or customHook:
my-app/
README.md
node_modules/
dist/
src/
components/
Button/
Button.tsx
Button.stories.tsx
Button.test.tsx
index.ts
customHooks/
useDelay/
useDelay.test.tsx
index.tsx
index.ts
Testing
Writing tests
To create tests, add an it()
block with the name of the test and its code. The describe()
command allows you to group
related tests, producing clear outputs.
Jest provides a built-in expect()
global function for making assertions. A basic test could look like this:
import React from 'react'
import { fireEvent, screen, render } from '@testing-library/react'
import { axe } from 'jest-axe'
import { Button, ButtonProps } from './Button'
describe('Button', () => {
const TestComponent = (props: Partial<ButtonProps>): JSX.Element => (
<Button {...props}>
{props.children}
</Button>
)
it('should call onClick when is clicked', () => {
const onClickMock = jest.fn()
render(<TestComponent onClick={onClickMock}>Button</TestComponent>)
fireEvent.click(screen.getByRole('button', { name: 'Button' }))
expect(onClickMock).toHaveBeenCalledTimes(1)
})
it('should not call onClick when is disabled', () => {
const onClickMock = jest.fn()
render(<TestComponent onClick={onClickMock} disabled={true}>Button</TestComponent>)
fireEvent.click(screen.getByRole('button', { name: 'Button' }))
expect(onClickMock).toHaveBeenCalledTimes(0)
})
it('should not fail any accesibility tests', async () => {
const { container } = render(<TestComponent>Button</TestComponent>)
expect(await axe(container)).toHaveNoViolations()
})
})
All expect()
matches supported by Jest are extensively documented here.
You can also use jest.fn()
and expect(fn).toBeCalled()
to create
"spies" or mock functions.
Things to highlight:
- It is a good idea to create a wrapper around the component you are going to test, this helps in case the component structure change in the future
- Always (if possible) include a test that make sure the component is accesible
- Include as many senarios that you can think of, and try to almost always use one assertion per test (if possible)
- Use priority list to get the elements as much as possible
Debugging
Some times you don't know why a test is failing so you can use screen.debug()
to display the HTML content that is being generated by that
test
import React from 'react'
import { screen, render } from '@testing-library/react'
import { Button, ButtonProps } from './Button'
describe('Button', () => {
const TestComponent = (props: Partial<ButtonProps>): JSX.Element => (
<Button {...props}>
{props.children}
</Button>
)
it('should call onClick when is clicked', () => {
const onClickMock = jest.fn()
render(<TestComponent onClick={onClickMock}>Button</TestComponent>)
screen.debug()
fireEvent.click(screen.getByRole('button', { name: 'Button' }))
expect(onClickMock).toHaveBeenCalledTimes(1)
})
})
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago