quality-approach-example-library v0.4.2

Getting Started with Create React App

This project was bootstrapped with Create React App. This is a components library based on Atomic Design approach.

Important notice

This is an example about testing scope and strategy. This is not something we have to follow by the book. What it's important here is to better understand which type of tests we have to perform and when.

Mindset: All in one

Goal is to have an all in one approach:

• Documentation
• State preview
• Tests

In a component folder, you should at least find this files:

• *.mdx as a documentation, including usecases
• *.usecases or *.stories to display state of components
• *.test.js or *.steps.test.js file to tests usecases
• *.js or *.jsx as code

Available Scripts

In the project directory, you can run:

yarn storybook

Runs storybook.\ Open http://localhost:6006 to view it in your browser.

The page will reload when you make changes.\ You may also see any lint errors in the console.

yarn coverage

Launches the coverage report.\ Open http://localhost:6007 to view it in your browser.

yarn test

Runs test in a watch mode and generate report

yarn test:ci

Runs tests as a CI and do not generate report

Pre-commit

Each time developers want to commit, yarn test:ci is exectued to ensure you cannot commit something not tested:

• Should not have failed tests
• Should reach coverageThreshold defined within package.json

"jest": {
    "testMatch": [
      "**/*.steps.test.js", // Include BDD
      "**/*.test.js" // Include TDD
    ],
    "collectCoverageFrom": [
      "src/components/**",
      "!src/**/*.stories.js",
      "!src/**/*.usecases.js"
    ],
    "coverageThreshold": {
      "global": {
        "branches": 60,
        "functions": 60,
        "lines": 60,
        "statements": 60
      }
    }
  }