ComponentLibrary

This project holds all the code for the Symphony Talent component library.

Useful Links

Below are some useful links and references for tools that are used in the project:

| Plugin | README | | ----------------------- | ------------------------------------------------------------------------- | | AtomicDesign | https://atomicdesign.bradfrost.com/chapter-2/ | | Storybook Docs | https://storybook.js.org/ | | NgxBootstrap | https://valor-software.com/ngx-bootstrap/documentation | | Deployed Storybook Site | https://sfx-component-library.s3-eu-west-1.amazonaws.com/index/index.html | | Npm package site | https://www.npmjs.com/org/symphony-talent |

Getting Started

This project is an Angular library so the only way to actually run and see your components is through storybook. To get started please follow these steps:

Step 1 - Install project dependancies

- Run `npm install`

Step 2 - Build project

- Run `npm run build`

Step 3 - Run Storybook (http://localhost:6006/?path=/story/)

- Run `npm run storybook`

Running lint

To run the linting rules you need to run the following command:

- Run `npm run lint`

Running unit tests

To run the unit tests with code coverage you need to run the following command:

- Run `npm run test`

The project is set up to be use chromeHeadless and run only once for the CI build. To run the HTML test runner to help debug tests locally and to visually see which tests failed you can update the Karma config by changing the following settings:

From

browsers: ['ChromeHeadless'],
singleRun: true,

To

browsers: ['Chrome'],
singleRun: false,

Note: This setting should not be checked in and is for local development only

The coverage html report can be found inside the coverage folder once the tests have completed. The coverage configuration can be found in the Karma config:

coverageIstanbulReporter: {
      dir: require('path').join(__dirname, '../../coverage/atoms'),
      reports: ['html', 'lcovonly', 'text-summary'],
      fixWebpackSourcePaths: true,
      thresholds: {
        statements: 90,
        branches: 90,
        functions: 90,
        lines: 90,
    },
},

Note: Do not change the coverage limit settings without seeking approval

Commiting Changes

When you have made changes to the files you want to commit please use the git add command and to get the commitizen wizard to walk you through the commit message then you can run npm run commit command.