path: root/.gitlab/ci/frontend.gitlab-ci.yml

.yarn-install: &yarn-install
  - source scripts/utils.sh
  - run_timed_command "retry yarn install --frozen-lockfile"

.storybook-yarn-install: &storybook-yarn-install
  - source scripts/utils.sh
  - run_timed_command "retry yarn run storybook:install --frozen-lockfile"

.compile-assets-base:
  extends:
    - .default-retry
    - .default-before_script
    - .assets-compile-cache
  image: ${REGISTRY_HOST}/${REGISTRY_GROUP}/gitlab-build-images:debian-${DEBIAN_VERSION}-ruby-2.7-git-2.33-lfs-2.9-node-16.14-yarn-1.22-graphicsmagick-1.3.36
  variables:
    SETUP_DB: "false"
    WEBPACK_VENDOR_DLL: "true"
    # Disable warnings in browserslist which can break on backports
    # https://github.com/browserslist/browserslist/blob/a287ec6/node.js#L367-L384
    BROWSERSLIST_IGNORE_OLD_DATA: "true"
  stage: prepare
  script:
    - *yarn-install
    - run_timed_command "bin/rake gitlab:assets:compile"
    - run_timed_command "scripts/clean-old-cached-assets"

compile-production-assets:
  extends:
    - .compile-assets-base
    - .frontend:rules:compile-production-assets
  variables:
    NODE_ENV: "production"
    RAILS_ENV: "production"
    WEBPACK_REPORT: "true"
  artifacts:
    name: webpack-report
    expire_in: 31d
    paths:
      # These assets are used in multiple locations:
      # - in `build-assets-image` job to create assets image for packaging systems
      # - GitLab UI for integration tests: https://gitlab.com/gitlab-org/gitlab-ui/-/blob/e88493b3c855aea30bf60baee692a64606b0eb1e/.storybook/preview-head.pug#L1
      - public/assets/
      - webpack-report/
    when: always
  before_script:
    - if [ -n "$CI_MERGE_REQUEST_SOURCE_BRANCH_SHA" ]; then
        echo "Checking out \$CI_MERGE_REQUEST_SOURCE_BRANCH_SHA ($CI_MERGE_REQUEST_SOURCE_BRANCH_SHA) instead of \$CI_COMMIT_SHA (merge result commit $CI_COMMIT_SHA) so that GitLab assets image tag actually reflect the commit for which assets were compiled.";
        git checkout -f ${CI_MERGE_REQUEST_SOURCE_BRANCH_SHA};
      else
        echo "Building the image from \$CI_COMMIT_SHA ($CI_COMMIT_SHA) for this non-merge result pipeline.";
      fi;
    - echo "See https://docs.gitlab.com/ee/development/testing_guide/end_to_end/index.html#with-pipeline-for-merged-results for more details.";
    - !reference [.default-before_script, before_script]
  after_script:
    - rm -f /etc/apt/sources.list.d/google*.list  # We don't need to update Chrome here

compile-test-assets:
  extends:
    - .compile-assets-base
    - .frontend:rules:compile-test-assets
  artifacts:
    expire_in: 7d
    paths:
      - public/assets/
      - node_modules/@gitlab/svgs/dist/icons.json  # app/helpers/icons_helper.rb uses this file
    when: always

compile-test-assets as-if-foss:
  extends:
    - compile-test-assets
    - .frontend:rules:compile-test-assets-as-if-foss
    - .as-if-foss

compile-test-assets as-if-jh:
  extends:
    - compile-test-assets
    - .frontend:rules:compile-test-assets-as-if-jh
  needs: ["add-jh-folder"]

update-assets-compile-production-cache:
  extends:
    - compile-production-assets
    - .assets-compile-cache-push
    - .shared:rules:update-cache
  stage: prepare
  artifacts: {}  # This job's purpose is only to update the cache.

update-assets-compile-test-cache:
  extends:
    - compile-test-assets
    - .assets-compile-cache-push
    - .shared:rules:update-cache
  stage: prepare
  artifacts: {}  # This job's purpose is only to update the cache.

update-yarn-cache:
  extends:
    - .default-retry
    - .yarn-cache-push
    - .shared:rules:update-cache
  stage: prepare
  script:
    - *yarn-install

update-storybook-yarn-cache:
  extends:
    - .default-retry
    - .storybook-yarn-cache-push
    - .shared:rules:update-cache
  stage: prepare
  script:
    - *storybook-yarn-install

.frontend-fixtures-base:
  extends:
    - .default-retry
    - .default-before_script
    - .rails-cache
    - .use-pg12
  stage: fixtures
  needs: ["setup-test-env", "retrieve-tests-metadata"]
  variables:
    WEBPACK_VENDOR_DLL: "true"
  script:
    - run_timed_command "gem install knapsack --no-document"
    - run_timed_command "scripts/gitaly-test-spawn"
    - source ./scripts/rspec_helpers.sh
    - rspec_paralellized_job
  artifacts:
    name: frontend-fixtures
    expire_in: 31d
    when: always
    paths:
      - tmp/tests/frontend/
      - knapsack/
      - crystalball/

# Builds FOSS, and EE fixtures in the EE project.
# Builds FOSS fixtures in the FOSS project.
rspec-all frontend_fixture:
  extends:
    - .frontend-fixtures-base
    - .frontend:rules:default-frontend-jobs
  needs:
    - !reference [.frontend-fixtures-base, needs]
    - "compile-test-assets"
  parallel: 5

# Builds FOSS fixtures in the EE project, with the `ee/` folder removed (due to `as-if-foss`).
rspec-all frontend_fixture as-if-foss:
  extends:
    - .frontend-fixtures-base
    - .frontend:rules:default-frontend-jobs-as-if-foss
    - .as-if-foss
  needs:
    - !reference [.frontend-fixtures-base, needs]
    - "compile-test-assets as-if-foss"

# Builds FOSS, EE, and JH fixtures in the EE project, with the `jh/` folder added (due to `as-if-jh`).
rspec-all frontend_fixture as-if-jh:
  extends:
    - .frontend-fixtures-base
    - .frontend:rules:default-frontend-jobs-as-if-jh
  needs:
    - !reference [.frontend-fixtures-base, needs]
    - "compile-test-assets as-if-jh"
    - "add-jh-folder"
  script:
    - echo "This job is currently doing nothing since there's no specific JH fixtures yet. To enable this job, remove this line."

graphql-schema-dump:
  variables:
    SETUP_DB: "false"
  extends:
    - .default-retry
    - .rails-cache
    - .default-before_script
    - .frontend:rules:default-frontend-jobs
  stage: fixtures
  needs: []
  script:
    - bundle exec rake gitlab:graphql:schema:dump
  artifacts:
    name: graphql-schema
    paths:
      - tmp/tests/graphql/gitlab_schema.graphql
      - tmp/tests/graphql/gitlab_schema.json

.frontend-test-base:
  extends:
    - .default-retry
    - .yarn-cache
  variables:
    # Disable warnings in browserslist which can break on backports
    # https://github.com/browserslist/browserslist/blob/a287ec6/node.js#L367-L384
    BROWSERSLIST_IGNORE_OLD_DATA: "true"
  before_script:
    - *yarn-install
  stage: test

.jest-base:
  extends: .frontend-test-base
  script:
    - run_timed_command "yarn jest:ci"

jest:
  extends:
    - .jest-base
    - .frontend:rules:jest
  needs: ["rspec-all frontend_fixture"]
  artifacts:
    name: coverage-frontend
    expire_in: 31d
    when: always
    paths:
      - coverage-frontend/
      - junit_jest.xml
      - tmp/tests/frontend/
    reports:
      junit: junit_jest.xml
  parallel: 5

jest minimal:
  extends:
    - jest
    - .frontend:rules:jest:minimal
  needs:
    - !reference [jest, needs]
    - "detect-tests"
  script:
    - run_timed_command "yarn jest:ci:minimal"

jest-integration:
  extends:
    - .frontend-test-base
    - .frontend:rules:default-frontend-jobs
  script:
    - run_timed_command "yarn jest:integration --ci"
  needs:
    - job: "rspec-all frontend_fixture"
    - job: "graphql-schema-dump"

jest-as-if-foss:
  extends:
    - .jest-base
    - .frontend:rules:default-frontend-jobs-as-if-foss
    - .as-if-foss
  needs: ["rspec-all frontend_fixture as-if-foss"]
  parallel: 2

jest-as-if-jh:
  extends:
    - .jest-base
    - .frontend:rules:default-frontend-jobs-as-if-jh
  needs: ["rspec-all frontend_fixture as-if-jh", "add-jh-folder"]
  script:
    - echo "This job is currently doing nothing since there's no specific JH Jest tests yet. To enable this job, remove this line."

coverage-frontend:
  extends:
    - .default-retry
    - .yarn-cache
    - .frontend:rules:ee-mr-and-default-branch-only
  needs:
    - job: "jest"
      optional: true
    - job: "jest minimal"
      optional: true
  stage: post-test
  before_script:
    - *yarn-install
  script:
    - run_timed_command "yarn node scripts/frontend/merge_coverage_frontend.js"
    # Removing the individual coverage results, as we just merged them.
    - rm -r coverage-frontend/jest-*
  coverage: '/^Statements\s*:\s*?(\d+(?:\.\d+)?)%/'
  artifacts:
    name: coverage-frontend
    expire_in: 31d
    paths:
      - coverage-frontend/
    reports:
      cobertura: coverage-frontend/cobertura-coverage.xml

.qa-frontend-node:
  extends:
    - .default-retry
    - .yarn-cache
    - .frontend:rules:qa-frontend-node
  stage: test
  dependencies: []
  script:
    - *yarn-install
    - run_timed_command "retry yarn run webpack-prod"

qa-frontend-node:12:
  extends: .qa-frontend-node
  image: ${GITLAB_DEPENDENCY_PROXY}node:12

qa-frontend-node:14:
  extends: .qa-frontend-node
  image: ${GITLAB_DEPENDENCY_PROXY}node:14

qa-frontend-node:latest:
  extends:
    - .qa-frontend-node
    - .frontend:rules:qa-frontend-node-latest
  image: ${GITLAB_DEPENDENCY_PROXY}node:latest

webpack-dev-server:
  extends:
    - .default-retry
    - .yarn-cache
    - .frontend:rules:default-frontend-jobs
  stage: test
  needs: []
  variables:
    WEBPACK_MEMORY_TEST: "true"
    WEBPACK_VENDOR_DLL: "true"
  script:
    - *yarn-install
    - run_timed_command "retry yarn webpack-vendor"
    - run_timed_command "node --expose-gc node_modules/.bin/webpack-dev-server --config config/webpack.config.js"
  artifacts:
    name: webpack-dev-server
    expire_in: 31d
    paths:
      - webpack-dev-server.json

bundle-size-review:
  extends:
    - .default-retry
    - .frontend:rules:bundle-size-review
  image: ${REGISTRY_HOST}/${REGISTRY_GROUP}/gitlab-build-images:danger
  stage: test
  needs: ["compile-production-assets"]
  script:
    - mkdir -p bundle-size-review
    - cp webpack-report/index.html bundle-size-review/bundle-report.html
    - yarn global add https://gitlab.com/gitlab-org/frontend/playground/webpack-memory-metrics.git
    - danger --dangerfile=danger/bundle_size/Dangerfile --fail-on-errors=true --verbose --danger_id=bundle-size-review
  artifacts:
    when: always
    name: bundle-size-review
    expire_in: 31d
    paths:
      - bundle-size-review

.startup-css-check-base:
  extends:
    - .frontend-test-base
  script:
    - run_timed_command "yarn generate:startup_css"
    - yarn check:startup_css

startup-css-check:
  extends:
    - .startup-css-check-base
    - .frontend:rules:default-frontend-jobs
  needs:
    - job: "compile-test-assets"
    - job: "rspec-all frontend_fixture"

startup-css-check as-if-foss:
  extends:
    - .startup-css-check-base
    - .as-if-foss
    - .frontend:rules:default-frontend-jobs-as-if-foss
  needs:
    - job: "compile-test-assets as-if-foss"
    - job: "rspec-all frontend_fixture as-if-foss"

.compile-storybook-base:
  extends:
    - .frontend-test-base
    - .storybook-yarn-cache
  script:
    - *storybook-yarn-install
    - yarn run storybook:build
  needs: ["graphql-schema-dump"]

compile-storybook:
  extends:
    - .compile-storybook-base
    - .frontend:rules:default-frontend-jobs
  needs:
    - !reference [.compile-storybook-base, needs]
    - job: "rspec-all frontend_fixture"
  artifacts:
    name: storybook
    expire_in: 31d
    when: always
    paths:
      - storybook/public

compile-storybook as-if-foss:
  extends:
    - .compile-storybook-base
    - .as-if-foss
    - .frontend:rules:default-frontend-jobs-as-if-foss
  needs:
    - !reference [.compile-storybook-base, needs]
    - job: "rspec-all frontend_fixture as-if-foss"