UI Datatable

UI Datatable is a ui wrapper of react-table, created as a re-useable/accessible components for BusinesSolver react applications.

Live Documentation

What's New

• v1 - initial components/documentation

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

Notable Dependencies

• react-bootstrap
• react-table
• Storybook

Coding style

The eslint and Prettier are setup in the project. Even if you have the code formatted ugly, prettier will format the code for you.

• Git hooks are pre-setup, eslint and Prettier will run automatically on commit.

• Running eslint manually:

  cd <project directory>
  npm run lint

• Running Prettier manually:

  cd <project directory>
  npm run format

Installing

After cloning the project, navigate to the project in terminal and run the following command(s)

• install project dependencies

  cd <project directory>
  yarn

Running the app locally

cd <project directory>
npm run storybook

Unit Tests

Unit testing uses a combination of jest, and enzyme. Test files should be packaged with the components themselves, and end with a .test.js suffix.

Test Structure

• Component
  • defaultProps
    • tests validity of default props
    • tests validity of custom props
  • Data types
    • tests validity of PropTypes
  • Events
  • Conditionals
    • tests for conditional rendering/logic inside components
  • States
    • tests various component states

Running Tests

• All tests

  cd <project directory>
  npm run test

• Running single test files

  cd <project directory>
  npm run test -- <file prefix>.test.js
  

• Debugging tests with console.log

  • need to set verbose flag to false
  • ex) npm run test -- --verbose=false

Builds for deployment

cd <project directory>
npm run format:build
npm run lint:build
npm run storybook:build
npm run build
npm run test:coverage