Skip to content
Merged
Show file tree
Hide file tree
Changes from 5 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions .github/dependabot.yml
Original file line number Diff line number Diff line change
Expand Up @@ -39,9 +39,10 @@ updates:
patterns:
- '@testing-library/*'
- '@types/testing-library*'
- '@types/jest'
- 'jest'
- 'jest-*'
- 'tsx'
- '@reporters/github'
- 'jsdom'
- 'global-jsdom'
next-js:
patterns:
- 'next'
Expand Down
89 changes: 89 additions & 0 deletions .github/workflows/chromatic.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
# Security Notes
# Only selected Actions are allowed within this repository. Please refer to (https://github.com/nodejs/nodejs.org/settings/actions)
# for the full list of available actions. If you want to add a new one, please reach out a maintainer with Admin permissions.
# REVIEWERS, please always double-check security practices before merging a PR that contains Workflow changes!!
# AUTHORS, please only use actions with explicit SHA references, and avoid using `@master` or `@main` references or `@version` tags.

name: Chromatic

on:
push:
branches:
- main
pull_request_target:
branches:
- main
types:
- labeled
merge_group:

defaults:
run:
# This ensures that the working directory is the root of the repository
working-directory: ./

permissions:
contents: read
actions: read

env:
# See https://turbo.build/repo/docs/reference/command-line-reference/run#--force
TURBO_FORCE: true

jobs:
chromatic:
# We only need to run Storybook Builds and Storybook Visual Regression Tests within Pull Requests that actually
# introduce changes to the Storybook. Hence, we skip running these on Crowdin PRs and Dependabot PRs
# sha reference has no stable git tag reference or URL. see https://github.com/chromaui/chromatic-cli/issues/797
if: |
github.event_name == 'push' ||
(
github.event_name == 'pull_request_target' &&
startsWith(github.event.pull_request.head.ref, 'dependabot/') == false &&
github.event.pull_request.head.ref != 'chore/crowdin'
)

name: Tests
runs-on: ubuntu-latest

environment:
name: Storybook
url: ${{ steps.chromatic-deploy.outputs.storybookUrl }}

steps:
- name: Harden Runner
uses: step-security/harden-runner@4d991eb9b905ef189e4c376166672c3f2f230481 # v2.11.0
with:
egress-policy: audit

- name: Git Checkout
uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
with:
# Provides the Pull Request commit SHA or the GitHub merge group ref
ref: ${{ github.event_name == 'pull_request_target' && github.event.pull_request.head.sha || github.ref }}
# The Chromatic (@chromaui/action) Action requires a full history of the current branch in order to be able to compare
# previous changes and previous commits and determine which Storybooks should be tested against and what should be built
fetch-depth: 0

- name: Set up Node.js
uses: actions/setup-node@cdca7365b2dadb8aad0a33bc7601856ffabcc48e # v4.3.0
with:
# We want to ensure that the Node.js version running here respects our supported versions
node-version-file: '.nvmrc'
cache: 'npm'

- name: Install npm packages
# We want to avoid npm from running the Audit Step and Funding messages on a CI environment
# We also use `npm i` instead of `npm ci` so that the node_modules/.cache folder doesn't get deleted
run: npm i --no-audit --no-fund --userconfig=/dev/null

- name: Start Visual Regression Tests (Chromatic)
# This assigns the Environment Deployment for Storybook
id: chromatic-deploy
uses: chromaui/action@c93e0bc3a63aa176e14a75b61a31847cbfdd341c
with:
workingDir: packages/ui-components
buildScriptName: storybook:build
projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
exitOnceUploaded: true
onlyChanged: true
113 changes: 29 additions & 84 deletions .github/workflows/lint-and-tests.yml
Original file line number Diff line number Diff line change
@@ -1,49 +1,43 @@
# Security Notes
# Only selected Actions are allowed within this repository. Please refer to (https://github.com/nodejs/nodejs.org/settings/actions)
# for the full list of available actions. If you want to add a new one, please reach out a maintainer with Admin permissions.
# REVIEWERS, please always double-check security practices before merging a PR that contains Workflow changes!!
# REVIEWERS, please always double-check security practices before merging a PR that contains workflow changes!!
# AUTHORS, please only use actions with explicit SHA references, and avoid using `@master` or `@main` references or `@version` tags.

name: Linting and Tests

# This workflow should run either on `merge_group`, `pull_request`, or `push` events
# since we want to run lint checks against any changes on pull requests, or the final patch on merge groups
# or if direct pushes happen to main (or when changes in general land on the `main` (default) branch)
# Note that the reason why we run this on pushes against `main` is that on rare cases, maintainers might do direct pushes against `main`

on:
push:
branches:
- main
pull_request_target:
pull_request:
branches:
- main
types:
- labeled
merge_group:

defaults:
run:
# This ensures that the working directory is the root of the repository
working-directory: ./

# The permissions specified below apply to workflows triggered by `merge_group`, `push`, and `pull_request` events that originate from the same repository (non-fork).
# However, workflows triggered by `pull_request` events from forked repositories are treated differently for security reasons:
# - These workflows **do not** have access to any secrets configured in the repository.
# - They are also **not granted any permissions** to perform actions on the base repository.
#
# This is a deliberate security restriction designed to prevent potential abuse through malicious pull requests from forks.
# For a deeper explanation and best practices for securing your GitHub Actions workflows, particularly against so-called "pwn requests",
# refer to https://securitylab.github.com/resources/github-actions-preventing-pwn-requests/
permissions:
contents: read
actions: read
# This permission is required by `MishaKav/jest-coverage-comment`
pull-requests: write

env:
# See https://turbo.build/repo/docs/reference/command-line-reference/run#--force
TURBO_FORCE: true

jobs:
lint:
# This Job should run either on `merge_groups` or `push` events
# or `pull_request_target` event with a `labeled` action with a label named `github_actions:pull-request`
# since we want to run lint checks against any changes on pull requests, or the final patch on merge groups
# or if direct pushes happen to main (or when changes in general land on the `main` (default) branch)
# Note that the reason why we run this on pushes against `main` is that on rare cases, maintainers might do direct pushes against `main`
if: |
(github.event_name == 'push' || github.event_name == 'merge_group') ||
(github.event_name == 'pull_request_target' &&
github.event.label.name == 'github_actions:pull-request')

name: Quality checks
runs-on: ubuntu-latest

Expand All @@ -55,9 +49,6 @@ jobs:

- name: Git Checkout
uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
with:
# Provides the Pull Request commit SHA or the GitHub merge group ref
ref: ${{ github.event_name == 'pull_request_target' && github.event.pull_request.head.sha || github.ref }}

- name: Restore Lint Cache
uses: actions/cache/restore@5a3ec84eff668545956fd18022155c47e93e2684 # v4.2.3
Expand Down Expand Up @@ -96,10 +87,8 @@ jobs:
# Note: Linting and Prettifying of files on Crowdin PRs is handled by the `translations-pr.yml` Workflow
if: |
(github.event_name == 'push' || github.event_name == 'merge_group') ||
(github.event_name == 'pull_request_target' &&
github.event.pull_request.head.ref != 'chore/crowdin')
# We want to enforce that the actual `turbo@latest` package is used instead of a possible hijack from the user
run: npx --package=turbo@latest -- turbo lint check-types prettier
(github.event_name == 'pull_request' && github.event.pull_request.head.ref != 'chore/crowdin')
run: npx turbo lint check-types prettier

- name: Save Lint Cache
# We only want to save caches on `push` events or `pull_request_target` events
Expand All @@ -109,7 +98,7 @@ jobs:
# other Pull Requests and PRs coming from forks
if: |
github.event_name == 'push' ||
(github.event_name == 'pull_request_target' &&
(github.event_name == 'pull_request' &&
startsWith(github.event.pull_request.head.ref, 'dependabot/') == false &&
github.event.pull_request.head.ref != 'chore/crowdin')
uses: actions/cache/save@5a3ec84eff668545956fd18022155c47e93e2684 # v4.2.3
Expand All @@ -123,22 +112,9 @@ jobs:
key: cache-lint-${{ hashFiles('package-lock.json') }}-${{ hashFiles('.turbo/cache/**') }}

tests:
# This Job should run either on `merge_groups` or `push` events
# or `pull_request_target` event with a `labeled` action with a label named `github_actions:pull-request`
# since we want to run lint checks against any changes on pull requests and on final patches against a pull request.
# We don't need to execute the tests again on pushes against (`main`) as the merge group should already handle that
if: |
(github.event_name == 'push' || github.event_name == 'merge_group') ||
(github.event_name == 'pull_request_target' &&
github.event.label.name == 'github_actions:pull-request')

name: Tests
runs-on: ubuntu-latest

environment:
name: Storybook
url: ${{ steps.chromatic-deploy.outputs.storybookUrl }}

steps:
- name: Harden Runner
uses: step-security/harden-runner@4d991eb9b905ef189e4c376166672c3f2f230481 # v2.11.0
Expand All @@ -147,12 +123,6 @@ jobs:

- name: Git Checkout
uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
with:
# Provides the Pull Request commit SHA or the GitHub merge group ref
ref: ${{ github.event_name == 'pull_request_target' && github.event.pull_request.head.sha || github.ref }}
# The Chromatic (@chromaui/action) Action requires a full history of the current branch in order to be able to compare
# previous changes and previous commits and determine which Storybooks should be tested against and what should be built
fetch-depth: 0

- name: Set up Node.js
uses: actions/setup-node@cdca7365b2dadb8aad0a33bc7601856ffabcc48e # v4.3.0
Expand All @@ -169,41 +139,16 @@ jobs:
- name: Run Unit Tests
# We want to run Unit Tests in every circumstance, including Crowdin PRs and Dependabot PRs to ensure
# that changes to dependencies or translations don't break the Unit Tests
# We want to enforce that the actual `turbo@latest` package is used instead of a possible hijack from the user
run: npx --package=turbo@latest -- turbo test:unit -- --ci --coverage

- name: Start Visual Regression Tests (Chromatic)
# This assigns the Environment Deployment for Storybook
id: chromatic-deploy
# We only need to run Storybook Builds and Storybook Visual Regression Tests within Pull Requests that actually
# introduce changes to the Storybook. Hence, we skip running these on Crowdin PRs and Dependabot PRs
if: |
github.event_name == 'push' ||
(github.event_name == 'pull_request_target' &&
startsWith(github.event.pull_request.head.ref, 'dependabot/') == false &&
github.event.pull_request.head.ref != 'chore/crowdin')
# sha reference has no stable git tag reference or URL. see https://github.com/chromaui/chromatic-cli/issues/797
uses: chromaui/action@c93e0bc3a63aa176e14a75b61a31847cbfdd341c
run: npm run test:ci

- name: Upload test coverage to Codecov
if: ${{ !cancelled() }}
uses: codecov/codecov-action@0565863a31f2c772f9f0395002a31e3f06189574 # v5.4.0
with:
workingDir: packages/ui-components
buildScriptName: storybook:build
projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
exitOnceUploaded: true
onlyChanged: true

- name: Jest Coverage Comment
# We don't need to post the Jest Coverage comment on Crowdin PRs and Dependabot PRs
# as in general they introduce no changes to the Unit Tests and the Codebase
# We reuse the checks from the Chromatic Deploy step as they're the same conditions
if: steps.chromatic-deploy.outcome == 'success'
# This comments the current Jest Coverage Report containing JUnit XML reports
# and a Code Coverage Summary
uses: MishaKav/jest-coverage-comment@d74238813c33e6ea20530ff91b5ea37953d11c91 # v1.0.27
files: ./apps/site/lcov.info,./packages/ui-components/lcov.info

- name: Upload test results to Codecov
if: ${{ !cancelled() }}
uses: codecov/test-results-action@f2dba722c67b86c6caa034178c6e4d35335f6706 # v1.1.0
with:
title: 'Unit Test Coverage Report'
multiple-junitxml-files: |
@node-core/ui-components, ./packages/ui-components/junit.xml
@nodejs/website, ./apps/site/junit.xml
multiple-files: |
@node-core/ui-components, ./packages/ui-components/coverage/coverage-summary.json
@nodejs/website, ./apps/site/coverage/coverage-summary.json
files: ./apps/site/junit.xml,./packages/ui-components/junit.xml
5 changes: 2 additions & 3 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,9 @@ npm-debug.log
.next
build

# Jest
coverage
.swc
# Test Runner
junit.xml
lcov.info

# Storybook
storybook-static
Expand Down
5 changes: 2 additions & 3 deletions .prettierignore
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,9 @@ build
# Next.js Generated Files
public/static/documents

# Jest
coverage
.swc
# Test Runner
junit.xml
lcov.info

# Storybook
storybook-static
Expand Down
6 changes: 2 additions & 4 deletions COLLABORATOR_GUIDE.md
Original file line number Diff line number Diff line change
Expand Up @@ -418,7 +418,7 @@ You can add a PACKAGE_MANAGER the same way as adding an INSTALLATION_METHOD (fro
## Unit Tests and Storybooks

Each new feature or bug fix should be accompanied by a unit test (when deemed valuable).
We use [Jest][] as our test runner and [React Testing Library][] for our React unit tests.
We use [`node:test`][] as our test runner and [React Testing Library][] for our React unit tests.

We also use [Storybook][] to document our components.
Components within `packages/ui-components` should have a storybook story that documents the component's usage.
Expand All @@ -434,8 +434,6 @@ Unit Tests are fundamental to ensure that code changes do not disrupt the functi
- Unit Tests should ensure that a given change's functionality is working as expected.
- When creating unit tests for React components, we recommend that the tests cover all the possible states of the component.
- We also recommend mocking external dependencies, if unsure about how to mock a particular dependency, raise the question on your Pull Request.
- We recommend using [Jest's Mock Functions](https://jestjs.io/docs/en/mock-functions) for mocking dependencies.
- We recommend using [Jest's Mock Modules](https://jestjs.io/docs/en/manual-mocks) for mocking dependencies unavailable on the Node.js runtime.
- Common Providers and Contexts from the lifecycle of our App, such as [`next-intl`][] should not be mocked but given an empty or fake context whenever possible.
- We recommend reading previous unit tests from the codebase for inspiration and code guidelines.

Expand Down Expand Up @@ -643,7 +641,7 @@ A lot of the current structure is due to retro-compatibility, keeping a simple a

If you're unfamiliar or curious about something, we recommend opening a Discussion on this GitHub Repository.

[Jest]: https://jestjs.io/
[`node:test`]: https://nodejs.org/api/test.html
[React Testing Library]: https://testing-library.com/docs/react-testing-library/intro/
[Storybook]: https://storybook.js.org/
[`next-intl`]: https://next-intl-docs.vercel.app
Expand Down
2 changes: 1 addition & 1 deletion CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -160,7 +160,7 @@ This repository contains several scripts and commands for performing numerous ta
- `npx turbo storybook` starts Storybook's local server
- `npx turbo storybook:build` builds Storybook as a static web application for publishing
- `npm run test` runs all tests locally
- `npx turbo test:unit` runs jest (unit-tests) locally
- `npx turbo test:unit` runs unit-tests locally

</details>

Expand Down
4 changes: 2 additions & 2 deletions DEPENDENCY_PINNING.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,14 @@ The following recommendations are in order when adding a new dependency:
- Some non-code dependencies are required for the bootstrap of the repository. They are either used on basic build scripts or Git Hooks. Examples include `husky`, `lint-staged` and others.
- A dependency should be a `devDependencies` if it is not invoked anywhere within the codebase.
- This applies to runtimes, tooling, utility/dev-only commands, type packages and others
- Sometimes, a dependency should be a `devDependency` even if invoked within the codebase, but only used within a development environment or during a test runner. Examples include `jest`, `storybook` and others.
- Sometimes, a dependency should be a `devDependency` even if invoked within the codebase, but only used within a development environment or during a test runner. Examples include `storybook` and others.
- A dependency should be a `peerDependencies` if it is a runtime dependency of the Website, but the Website itself does not install it. Examples include `react`, `react-dom` and others.

### When pinning dependencies

When adding dependencies, you should consider if that dependency should be saved as an exact dependency (`--save-exact`) or use either a `^` or `~` version range operator. The following guidelines are in order:

- A dependency, in general, should be pinned to its exact dependency if it's either a tooling or a CLI dependency. Examples include `husky`, `prettier`, `jest` and others.
- A dependency, in general, should be pinned to its exact dependency if it's either a tooling or a CLI dependency. Examples include `husky`, `prettier`, and others.
- A dependency should generally use `~` if we're interested in patch updates (such as hot-fixes and bug-fixes) and the package is part of the Development or Testing Environment. (Such as `storybook`, for example)
- A dependency should generally use `^` if they're part of the Website Application itself, such as `react`, `next-intl` etc. This is done because we intentionally want to get these dependencies' latest features and bug-fixes.
- If we're not interested in getting the latest features and bug fixes, we should consider using `~` instead.
Expand Down
5 changes: 3 additions & 2 deletions apps/site/.stylelintignore
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,9 @@ build
# Public Folder
public

# Jest
coverage
# Test Runner
junit.xml
lcov.info

# Old Styles
styles/old
Loading
Loading