React CI GH actions

ci.yml

# CI name
name: Run linters and specs

# The on key is used to define when
# the CI should be triggered, aka Event
on:
  # When someone push or merge a pull request
  # inside the main branch
  push:
    branches:
      - main
  # When someone create a pull request from
  # the main branch
  pull_request:
    branches:
      - main

# A job is a set of steps that execute on the same runner.
# The jobs can be run in parallel or sequentially and can 
# have many steps.
# In this case, I created a single job with many steps
# since the configuration is pretty simple but
# I could have created a different structure using parallel jobs.
# Each job uses an own runner.
jobs:
  # Job name
  suite:
    # OS of the runner
    runs-on: ubuntu-latest

    # A step is an individual task that can run commands in a job
    # and share the same runner.
    # Each step can run a ready-to-use action or a bash command
    steps:
      # Runner meaningful name
      - name: Checkout
        # Ready-to-use action made by GH or third party 
        # companies
        # We can recognize the GH actions from the third party 
        # ones checking the name prefix.
        # `actions/` = GH
        # `something-else/` = third party
        # This is a GH ready-to-use action
        uses: actions/checkout@v2

      - name: Setup and run Cypress
        # This is a cycpress ready-to-use action
        # that setups the runner installing the 
        # dependencies using NPM and installing Cypress
        uses: cypress-io/github-action@v2
        # The action accepts parameters.
        # You should read the documentation before using an action
        # to understand what it does under the hood.
        with:
          browser: chrome
          headless: true
          start: npm start

      - name: Run ESLint
        # Run the lint custom NPM command that triggers the
        # ESLint linter check
        run: npm run lint

      - name: Run Prettier
        # Run the format:check custom NPM command
        # that runs prettier to check code format
        run: npm run format:check

      - name: Run Jest
        # Run the test:unit custom NPM command
        # that runs Jest 
        run: npm run test:unit

      - name: Push the coverage
        # Run the coverage:push custom NPM command
        # that push the Jest coverage to codcov 
        # The secrets.CODECOV is a constant that is used
        # to store the CODECOV token.
        # The GH secrets are used like ENV variables to pass sensible informatin
        # to the flow.
        run: npm run coverage:push -- --token=${{ secrets.CODECOV_TOKEN }}