Skip to content

Commit

Permalink
Merge branch 'main' into feat-suggestedd-general-improvements
Browse files Browse the repository at this point in the history
# Conflicts:
#	.gitignore
#	e2e-examples/cli-e2e-original/setup/global-setup.ts
#	package-lock.json
#	package.json
  • Loading branch information
BioPhoton committed Sep 15, 2024
2 parents 7a29a91 + 8207608 commit 1a7f740
Show file tree
Hide file tree
Showing 18 changed files with 3,023 additions and 471 deletions.
File renamed without changes.
3 changes: 2 additions & 1 deletion .github/workflows/ci.yml
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ jobs:
cache: npm
- name: Audit production dependencies
run: npm audit --omit=dev --omit=optional

unit-test:
strategy:
fail-fast: false
Expand All @@ -45,7 +46,7 @@ jobs:
- name: Install dependencies
run: npm ci
- name: Unit test affected projects
run: npx nx affected -t unit-test --parallel=3 --coverage.enabled
run: npx nx affected -t unit-test --parallel=3 --verbose --coverage.enabled

e2e:
strategy:
Expand Down
39 changes: 39 additions & 0 deletions .github/workflows/code-pushup.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
name: Code PushUp

on:
push:
branches: [main]
pull_request:
branches: [main]

env:
NX_NON_NATIVE_HASHER: true

permissions:
pull-requests: write

jobs:
code-pushup:
runs-on: ubuntu-latest
name: Code PushUp
# ignore PRs from forks, handled by code-pushup-fork.yml
if: ${{ !github.event.pull_request.head.repo.fork }}
env:
CP_SERVER: ${{ secrets.CP_SERVER }}
CP_API_KEY: ${{ secrets.CP_API_KEY }}
CP_ORGANIZATION: code-pushup
CP_PROJECT: cli
steps:
- name: Checkout repository
uses: actions/checkout@v4
- name: Set up Node.js
uses: actions/setup-node@v4
with:
node-version-file: .nvmrc
cache: npm
- name: Install dependencies
run: npm ci
- name: Run Code PushUp action
uses: code-pushup/github-action@v0
with:
bin: npx nx code-pushup --
3 changes: 2 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -38,5 +38,6 @@ testem.log
.DS_Store
Thumbs.db

.code-pushup
.nx
.nx/cache
.nx/workspace-data
151 changes: 130 additions & 21 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
# Buildable Test Environment Plugin
# Nx Verdaccio Environment Plugin

This plugin provides a way zeros configuration setup to run e2e tests in a package manager environment.
This plugin provides a zeros configuration setup to run e2e tests in a package manager environment.

## Getting started

1. Register and configure the plugins in `nx.json`:

```json
```jsonc
{
"plugins": [
{
"plugin": "@org/build-env",
"options": {
"environmentsDir": "tmp/environments"
"environmentsDir": "tmp/environments" // Optional
}
}
]
Expand All @@ -21,20 +21,21 @@ This plugin provides a way zeros configuration setup to run e2e tests in a packa

Now you can configure the project you want to e2e test as published package.

2. Add a `publishable` tag to the package under test
2. Add a `publishable` tag to the package under test to tell the plugin which projects it should consider as publishable

```jsonc
// projects/my-lib/project.json
{
"name": "my-lib",
"tags": ["publishable"]
"targets": ["publish", "nx-release-publish"]
"tags": ["publishable"] // Optionally filter projects by tags for a more finegrained control
// ...
}
```

Next you need to configure the e2e project to use the package under test.
Next you need to configure the e2e project that uses the package under test.

3. Add the package under test as `implicitDependency` to your e2e project.
3. Add the package under test as `implicitDependency` to your e2e project. The plugin will detect implicit dependencies and use them for the environment setup.

```jsonc
// projects/my-lib-e2e/project.json
Expand Down Expand Up @@ -71,32 +72,140 @@ Now you are ready to go.

Tadaaaa! 🎉

## DX while debuggins e2e tests
**Example usage:**
- `nx run cli-e2e:e2e` - setup environment and then run E2E tests for `cli-e2e`
- `nx run cli-static-e2e:e2e --environmentRoot static-environments/user-lists` - setup NPM in existing environment and then run E2E tests for `cli-static-e2e`

### Production usage:

- `nx run cli-e2e:e2e` - setup environment and then run E2E tests for `cli-e2e`
@TODO figure out why we can't set the environmentRoot in the target options in `project.json`
- `nx run cli-static-e2e:e2e --environmentRoot static-environments/user-lists` - setup NPM stuff in existing environment and then run E2E tests for `cli-static-e2e`
## DX while debugging e2e tests

Debug full environment in 1 setup:

- `nx run cli-e2e:setup-env` - setup environment for `cli-e2e`
- `nx run cli-e2e:setup-env --keepServerRunning` - keeps verdaccio running after setup
- `nx run cli-e2e:stop-verdaccio` - stops the verdaccio server for `cli-e2e`
- `nx run cli-e2e:setup-env --keepServerRunning` - keeps Verdaccio running after setup
- `nx run cli-e2e:stop-verdaccio` - stops the Verdaccio server for `cli-e2e`

Debug full environment in 2 steps:

- `nx run cli-e2e:bootstrap-env` - setup folders and starts verdaccio for `cli-e2e`
- `nx run cli-e2e:bootstrap-env` - setup folders and starts Verdaccio for `cli-e2e`
- `nx run cli-e2e:install-env` - bootstraps and installs all dependencies for `cli-e2e`
- `nx run cli-e2e:stop-verdaccio` - stops the verdaccio server for `cli-e2e`
- `nx run cli-e2e:stop-verdaccio` - stops the Verdaccio server for `cli-e2e`

Debug packages:

- `nx run cli-e2e:bootstrap-env` - setup folders and starts verdaccio for `cli-e2e`
- `nx run utils:npm-publish --environmentProject cli-e2e` - publishes `utils` and `models` to the verdaccio registry configured for `cli-e2e`
- `nx run utils:npm-install --environmentProject cli-e2e` - installs `utils` and `models` from the verdaccio registry configured for `cli-e2e`
- `nx run cli-e2e:stop-verdaccio` - stops the verdaccio server for `cli-e2e`
- `nx run cli-e2e:bootstrap-env` - setup folders and starts Verdaccio for `cli-e2e`
- `nx run utils:npm-publish --environmentProject cli-e2e` - publishes `utils` and `models` to the Verdaccio registry configured for `cli-e2e`
- `nx run utils:npm-install --environmentProject cli-e2e` - installs `utils` and `models` from the Verdaccio registry configured for `cli-e2e`
- `nx run cli-e2e:stop-verdaccio` - stops the Verdaccio server for `cli-e2e`

## Benefits in depth

In the below we point out a **scalable** and **maintainable** setup for Verdaccio environments.

### 🛡️ Isolation of Files During E2E Tests

All files that change during testing are contained within an isolated folder, ensuring they don't interfere with your local setup or other tests.

By isolating the environment for each E2E project, you avoid conflicts with the local file system and package manager configurations, enabling parallel test execution without issues like publish, install or file conflicts.

```sh
Root/
├── dist/
│ └── packages/
│ └── <project-name>/...
├── tmp/
│ └── e2e/
│ └── <project-name>/
│ ├── storage/... # npm publish/unpublish
│ │ └── @my-org
│ │ └── my-lib/...
│ ├── node_modules/
│ │ └── <org>
│ │ └── <package-name>/... # npm install/uninstall
│ ├── __test__/...
│ │ └── <test-file-name>/...
│ │ └── <it-block-setup>/...
│ │ └── test.file.ts
│ ├── .npmrc # local npm config configured for project specific Verdaccio registry
│ ├── package-lock.json # skipped creation by default
│ └── package.json # npm install/uninstall
└── packages/
└── <project-name>/...
```

### 🚀 Scalability - A Parallel-Friendly Setup

This solution allows for **parallel execution** of tests, which was not possible before due to conflicts with file systems and package managers.

- ⏱️No more waiting for tests to run sequentially. With isolated environments, each E2E test can run independently without interfering with others.
- ⏱️Environment setup and test setup are separated, which means **significantly faster execution** of the tests and less overhead in CPU and general runtime.

### ⚡ Task Performance - Optimized Execution

To further improve task performance, we can now treat the E2E environment as **build output**.
No need for a running server anymore.

This allows us to **cache** the environment and **reuse** it across tests, leading to faster performance:

- 🔥 As it is decoupled from the running server we can now save cache the target
- 🔥 No need to stop and restart the server between tests, saving CPU and memory
- 🔥 No need to uninstall packages or delete storage folders manually. We can simply delete the isolated folder when needed.
- 🔥 The system only installs the necessary packages, further reducing time and resource usage.

![utils-project-graph-idle.png](docs%2Futils-project-graph-idle.png)

#### Changes in source

```mermaid
flowchart TB
P[project-e2e:e2e]:::e2e-.implicit.->S[project-e2e:setup-env]:::build;
S-.implicit.->E[project:build]:::build;
classDef e2e stroke:#f00
classDef setup-env stroke:#f00
classDef build stroke:#f00
```

#### Changes in the test environments

```mermaid
flowchart TB
P[project-e2e:e2e]:::e2e-.implicit.->S[project-e2e:setup-env]:::setup-env;
S-.implicit.->E[project:build]:::build;
classDef e2e stroke:#f00
classDef setup-env stroke:#f00
```

#### Changes in tests

```mermaid
flowchart TB
P[project-e2e:e2e]:::e2e-.implicit.->S[project-e2e:setup-env]:::build;
S-.implicit.->E[project:build]:::build;
classDef e2e stroke:#f00
```

### ✨ DX - Developer Experience Simplified

The **NX task graph** makes it easier to discover and understand the setup. Instead of relying on complex global setup scripts:

- 🤌 No need for global setup files teardown or setup at all. The only connection to the tests files is just another target that runs before the E2E tests.
- 🤌 The process is faster because the test environment doesn’t require ongoing CPU or memory once set up.
- 🤌 Errors are easier to debug. Every step is on its own debugable.

### 🔧 Maintainability - Easy to Update and Manage

This approach makes the E2E setup more **maintainable** and easier to serve edge cases:

- A fine-grained task graph makes it easy to understand the project
- Since the environment doesn’t require a constantly running server, maintaining the setup becomes much simpler. The environment can be cached as a build output, reducing complexity.
- as the cleanup logic of a test is just deleting the files this debug effort is gone completely
- The NX task graph provides a clear visual overview of the process, making it easy to see what runs when and how the environment is set up.
- Configuring a test setup is in a single place and provides fine-grained configuration

![utils-task-graph-idle.png](docs%2Futils-task-graph-idle.png)

In summary, this new setup offers a more scalable, maintainable, and performant way to handle E2E testing.
By isolating environments and using NX’s powerful tools, it becomes easier to run, manage, and debug E2E tests across projects.

- make verdaccio-registry.json a constant!

Expand Down
11 changes: 11 additions & 0 deletions code-pushup.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import {CoreConfig} from "@code-pushup/models";
import nxPerformancePlugin from "./tooling/measures/nx-performance/nx-performance.plugin";

const tasks = ['cli-e2e:e2e', 'cli-e2e-original:original-e2e'];
export default {
plugins: [
nxPerformancePlugin({
tasks
})
],
} satisfies CoreConfig;
Loading

0 comments on commit 1a7f740

Please sign in to comment.