Tapestry Design System

Table of Contents

• General Info
• Technologies
• Get Started
• Installing dependencies
• Folder structure

General Info

The purpose of this project is to build/provide custom components that can be implemented throughout all of our applications.

Technologies

• React
• npm
• Storybook
• Typescript

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
  • index.tsx file that exports your custom component
  • [FileName].test.tsx to include your tests for that component
  • [FileName].stories.tsx to provide the UI portion of your component in storybook (not necessary for hooks/utils)
• 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)
  })
})