eci-ui-components

Web Package Template

• Setup
• How to Publish
• Test Coverage Threshold

Setup

Step 1: Create a new repo using this template

Option 1: via new repo page

Option 2: via this repo

Step 2: Clone your new repo

$ git clone [e-mail]:traveloka/<repo_name>.git
& cd <repo_name>

Step 3: Setup your new repo

$ yarn setup

That's it! Have fun 😉

How to Publish

Cut a tag

$ yarn prepare-release
$ git push --follow-tags

Under the hood, the yarn prepare-release command uses standard-version utility to do the following tasks (simplified):

• NPM package version bump
• Changelog generation (if your commit message follows the Conventional Commits standard)
• Git tagging

Finally, the second command will push your newly created tag to your remote & trigger the automated publishing process. To see the progress, just click on the "Actions" tab on your Github repo page.

Test Coverage Threshold

Note: The following is not mandatory and is meant only for a reference if you choose to enable it.

This template comes with Jest testing framework (as part of tsdx toolchain). Jest natively supports coverage reporting and adding thresholds which can help you maintain code quality. To enable it, simply follow these steps:

Step 1: Add coverage threshold config to package.json

{
  ...,
  "jest": {
    ...,
    "coverageThreshold": {
      "global": {
        "branches": 50,
        "functions": 50,
        "lines": 50,
        "statements": 50
      }
    }
  }
}

You can also apply more specific rules to certain glob patterns:

{
  ...,
  "jest": {
    ...,
    "coverageThreshold": {
      "global": {
        "branches": 50,
        "functions": 50,
        "lines": 50,
        "statements": 50
      },
      "./src/components/": {
        "branches": 40,
        "statements": 40
      },
      "./src/reducers/**/*.js": {
        "statements": 90
      },
      "./src/api/very-important-module.js": {
        "branches": 100,
        "functions": 100,
        "lines": 100,
        "statements": 100
      }
    }
  }
}

Step 2: Enable coverage reporting flags in test script

In your package.json:

{
  ...,
  "scripts": {
    ...,
-   "test": "tsdx test --env=jsdom",
+   "test": "tsdx test --env=jsdom --coverage --coverage-reporters=none"
  }
}

After this, your test will fail if the coverage doesn't meet the threshold specified in step 1. This configuration also applies to continuous integration (CI).