Skip to content

Commit a61002d

Browse files
yannbfyannbf
authored
Merge pull request #34112 from storybookjs/sidnioulz/update-node-executors-angular
Angular: Update Node CI executors to support Angular prerelease Node.js min version
2 parents 5917ecd + c19ad44 commit a61002d

File tree

16 files changed

+101
-55
lines changed

16 files changed

+101
-55
lines changed

‎.github/copilot-instructions.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -303,7 +303,7 @@ cd code && yarn test
303303

304304
### End-to-End Testing
305305

306-
- Playwright tests available (version 1.52.0 configured)
306+
- Playwright tests available (version 1.58.2 configured)
307307
- E2E test tasks: `yarn task e2e-tests-build --start-from auto` or `yarn task e2e-tests-dev --start-from auto`
308308
- Test runner scenarios: `yarn task test-runner-build --start-from auto` or `yarn task test-runner-dev --start-from auto`
309309
- Smoke tests: `yarn task smoke-test --start-from auto`

‎code/lib/cli-storybook/src/sandbox-templates.ts‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,11 @@ export type Template = {
9696
editAddons?: (addons: string[]) => string[];
9797
useCsfFactory?: boolean;
9898
};
99+
/** Additional CI steps in case this template has special needs during CI. */
100+
extraCiSteps?: {
101+
// Some sandboxes (e.g. Angular) rely on Node 22.22.1 as minimum supported version and threfore it needs enforcing, even if the CI image comes with a different node version.
102+
ensureMinNodeVersion?: boolean;
103+
};
99104
/** Additional options to pass to the initiate command when initializing Storybook. */
100105
initOptions?: {
101106
builder?: SupportedBuilder;
@@ -625,6 +630,9 @@ export const baseTemplates = {
625630
renderer: '@storybook/svelte',
626631
builder: '@storybook/builder-vite',
627632
},
633+
modifications: {
634+
extraDependencies: ['@sveltejs/vite-plugin-svelte@7.0.0'],
635+
},
628636
skipTasks: ['e2e-tests', 'bench'],
629637
},
630638
'svelte-vite/default-ts': {
@@ -635,6 +643,9 @@ export const baseTemplates = {
635643
renderer: '@storybook/svelte',
636644
builder: '@storybook/builder-vite',
637645
},
646+
modifications: {
647+
extraDependencies: ['@sveltejs/vite-plugin-svelte@7.0.0'],
648+
},
638649
// Remove smoke-test from the list once https://github.com/storybookjs/storybook/issues/19351 is fixed.
639650
skipTasks: ['smoke-test', 'bench'],
640651
},
@@ -646,6 +657,9 @@ export const baseTemplates = {
646657
// extraDependencies: ['@standard-schema/spec@^1', '@angular/forms@next'],
647658
useCsfFactory: true,
648659
},
660+
extraCiSteps: {
661+
ensureMinNodeVersion: true,
662+
},
649663
expected: {
650664
framework: '@storybook/angular',
651665
renderer: '@storybook/angular',
@@ -661,6 +675,9 @@ export const baseTemplates = {
661675
extraDependencies: ['@angular/forms@latest'],
662676
useCsfFactory: true,
663677
},
678+
extraCiSteps: {
679+
ensureMinNodeVersion: true,
680+
},
664681
expected: {
665682
framework: '@storybook/angular',
666683
renderer: '@storybook/angular',
@@ -677,6 +694,9 @@ export const baseTemplates = {
677694
renderer: '@storybook/svelte',
678695
builder: '@storybook/builder-vite',
679696
},
697+
modifications: {
698+
extraDependencies: ['@sveltejs/vite-plugin-svelte@7.0.0'],
699+
},
680700
skipTasks: ['e2e-tests', 'bench'],
681701
},
682702
'lit-vite/default-js': {

‎code/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@
7070
],
7171
"dependencies": {
7272
"@chromatic-com/storybook": "^5.0.0",
73-
"@playwright/test": "1.52.0",
73+
"@playwright/test": "1.58.2",
7474
"@storybook/addon-a11y": "workspace:*",
7575
"@storybook/addon-designs": "^11.0.3",
7676
"@storybook/addon-docs": "workspace:*",

‎docs/writing-tests/in-ci.mdx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ jobs:
5858
container:
5959
# Make sure to grab the latest version of the Playwright image
6060
# https://playwright.dev/docs/docker#pull-the-image
61-
image: mcr.microsoft.com/playwright:v1.52.0-noble
61+
image: mcr.microsoft.com/playwright:v1.58.2-noble
6262
steps:
6363
- uses: actions/checkout@v4
6464

@@ -98,7 +98,7 @@ Test:
9898
stage: UI_Tests
9999
# Make sure to grab the latest version of the Playwright image
100100
# https://playwright.dev/docs/docker#pull-the-image
101-
image: mcr.microsoft.com/playwright:v1.52.0-noble
101+
image: mcr.microsoft.com/playwright:v1.58.2-noble
102102
script:
103103
- npm run test-storybook
104104
```
@@ -125,7 +125,7 @@ pipelines:
125125
name: "Run Tests"
126126
# Make sure to grab the latest version of the Playwright image
127127
# https://playwright.dev/docs/docker#pull-the-image
128-
image: mcr.microsoft.com/playwright:v1.52.0-noble
128+
image: mcr.microsoft.com/playwright:v1.58.2-noble
129129
caches:
130130
- npm
131131
- node
@@ -149,7 +149,7 @@ executors:
149149
docker:
150150
# Make sure to grab the latest version of the Playwright image
151151
# https://playwright.dev/docs/docker#pull-the-image
152-
- image: mcr.microsoft.com/playwright:v1.52.0-noble
152+
- image: mcr.microsoft.com/playwright:v1.58.2-noble
153153
working_directory: ~/repo
154154
155155
jobs:
@@ -222,7 +222,7 @@ pipeline {
222222
* Make sure to grab the latest version of the Playwright image
223223
* https://playwright.dev/docs/docker#pull-the-image
224224
*/
225-
image 'mcr.microsoft.com/playwright:v1.52.0-noble'
225+
image 'mcr.microsoft.com/playwright:v1.58.2-noble'
226226
reuseNode true
227227
}
228228
}
@@ -257,7 +257,7 @@ stages:
257257
displayName: "Storybook tests"
258258
# Make sure to grab the latest version of the Playwright image
259259
# https://playwright.dev/docs/docker#pull-the-image
260-
container: mcr.microsoft.com/playwright:v1.52.0-noble
260+
container: mcr.microsoft.com/playwright:v1.58.2-noble
261261
variables:
262262
npm_config_cache: $(Pipeline.Workspace)/.npm
263263
steps:
@@ -308,7 +308,7 @@ jobs:
308308
test:
309309
runs-on: ubuntu-latest
310310
container:
311-
image: mcr.microsoft.com/playwright:v1.52.0-noble
311+
image: mcr.microsoft.com/playwright:v1.58.2-noble
312312
+ # 👇 Only run on successful deployments
313313
+ if: github.event_name == 'deployment_status' && github.event.deployment_status.state == 'success'
314314
steps:

‎docs/writing-tests/index.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@ Next, add a new CI workflow.
9090
container:
9191
# Make sure to grab the latest version of the Playwright image
9292
# https://playwright.dev/docs/docker#pull-the-image
93-
image: mcr.microsoft.com/playwright:v1.52.0-noble
93+
image: mcr.microsoft.com/playwright:v1.58.2-noble
9494
steps:
9595
- uses: actions/checkout@v4
9696

‎package.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@
4141
"@babel/runtime": "latest",
4242
"@babel/traverse": "latest",
4343
"@babel/types": "^7.28.4",
44-
"@playwright/test": "1.52.0",
44+
"@playwright/test": "1.58.2",
4545
"@testing-library/user-event@npm:^14.4.0": "patch:@testing-library/user-event@npm%3A14.6.1#~/.yarn/patches/@testing-library-user-event-npm-14.6.1-5da7e1d4e2.patch",
4646
"@testing-library/user-event@npm:^14.6.1": "patch:@testing-library/user-event@npm%3A14.6.1#~/.yarn/patches/@testing-library-user-event-npm-14.6.1-5da7e1d4e2.patch",
4747
"@types/babel__traverse@npm:*": "patch:@types/babel__traverse@npm%3A7.20.6#~/.yarn/patches/@types-babel__traverse-npm-7.20.6-fac4243243.patch",
@@ -51,16 +51,16 @@
5151
"@vitest/expect@npm:3.2.4": "patch:@vitest/expect@npm%3A3.2.4#~/.yarn/patches/@vitest-expect-npm-3.2.4-97c526d5cc.patch",
5252
"aria-query@5.3.0": "^5.3.0",
5353
"esbuild": "^0.27.0",
54-
"playwright": "1.52.0",
55-
"playwright-core": "1.52.0",
54+
"playwright": "1.58.2",
55+
"playwright-core": "1.58.2",
5656
"react": "^18.2.0",
5757
"serialize-javascript": "^3.1.0",
5858
"type-fest": "~2.19",
5959
"typescript": "^5.9.3"
6060
},
6161
"devDependencies": {
6262
"@nx/workspace": "^22.1.3",
63-
"@playwright/test": "^1.52.0",
63+
"@playwright/test": "^1.58.2",
6464
"@types/kill-port": "^2.0.3",
6565
"http-server": "^14.1.1",
6666
"husky": "^9.1.7",

‎scripts/ci/sandboxes.ts‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { join } from 'path';
22

33
import * as sandboxTemplates from '../../code/lib/cli-storybook/src/sandbox-templates';
4+
import { type TemplateKey } from '../../code/lib/cli-storybook/src/sandbox-templates';
45
import { build_linux } from './common-jobs';
56
import { LINUX_ROOT_DIR, SANDBOX_DIR, WINDOWS_ROOT_DIR, WORKING_DIR } from './utils/constants';
67
import {
@@ -17,6 +18,23 @@ import {
1718
import { defineJob, defineNoOpJob, isWorkflowOrAbove } from './utils/types';
1819
import type { JobOrNoOpJob, Workflow } from './utils/types';
1920

21+
function getSandboxSetupSteps(template: string) {
22+
const extraSteps = [];
23+
const templateData = sandboxTemplates.allTemplates[template as TemplateKey];
24+
25+
if (templateData.extraCiSteps?.ensureMinNodeVersion) {
26+
extraSteps.push({
27+
'node/install': {
28+
'install-yarn': true,
29+
// Currently using Node 22.22.1 as minimum supported version for Angular sandboxes
30+
'node-version': '22.22.1',
31+
},
32+
});
33+
}
34+
35+
return extraSteps;
36+
}
37+
2038
function defineSandboxJob_build({
2139
directory,
2240
name,
@@ -36,6 +54,7 @@ function defineSandboxJob_build({
3654
class: 'medium+',
3755
},
3856
steps: [
57+
...getSandboxSetupSteps(template),
3958
...workflow.restoreLinux(),
4059
{
4160
run: {
@@ -75,6 +94,7 @@ function defineSandboxJob_dev({
7594
class: 'medium',
7695
},
7796
steps: [
97+
...getSandboxSetupSteps(template),
7898
...workflow.restoreLinux(),
7999
...(options.e2e
80100
? [
@@ -134,6 +154,7 @@ export function defineSandboxFlow<Key extends string>(key: Key) {
134154
class: 'large',
135155
},
136156
steps: [
157+
...getSandboxSetupSteps(key),
137158
...workflow.restoreLinux(),
138159
verdaccio.start(),
139160
{
@@ -223,6 +244,7 @@ export function defineSandboxFlow<Key extends string>(key: Key) {
223244
class: 'medium',
224245
},
225246
steps: [
247+
...getSandboxSetupSteps(key),
226248
'checkout', // we need the full git history for chromatic
227249
workspace.attach(),
228250
cache.attach(CACHE_KEYS()),
@@ -254,6 +276,7 @@ export function defineSandboxFlow<Key extends string>(key: Key) {
254276
class: 'medium',
255277
},
256278
steps: [
279+
...getSandboxSetupSteps(key),
257280
...workflow.restoreLinux(),
258281
{
259282
run: {
@@ -274,6 +297,7 @@ export function defineSandboxFlow<Key extends string>(key: Key) {
274297
class: 'medium+',
275298
},
276299
steps: [
300+
...getSandboxSetupSteps(key),
277301
...workflow.restoreLinux(),
278302
{
279303
run: {
@@ -310,6 +334,7 @@ export function defineSandboxFlow<Key extends string>(key: Key) {
310334
class: 'medium',
311335
},
312336
steps: [
337+
...getSandboxSetupSteps(key),
313338
...workflow.restoreLinux(),
314339
{
315340
run: {
@@ -359,6 +384,7 @@ export function defineSandboxTestRunner(sandbox: ReturnType<typeof defineSandbox
359384
class: 'medium',
360385
},
361386
steps: [
387+
...getSandboxSetupSteps(sandbox.name),
362388
...workflow.restoreLinux(),
363389
{
364390
run: {

‎scripts/ci/utils/executors.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export const executors = {
77
environment: {
88
NODE_OPTIONS: '--max_old_space_size=6144',
99
},
10-
image: 'cimg/node:22.15.0-browsers',
10+
image: 'cimg/node:22.22.1-browsers',
1111
},
1212
],
1313
parameters: {
@@ -27,7 +27,7 @@ export const executors = {
2727
environment: {
2828
NODE_OPTIONS: '--max_old_space_size=6144',
2929
},
30-
image: 'cimg/node:22.15.0',
30+
image: 'cimg/node:22.22.1',
3131
},
3232
],
3333
parameters: {
@@ -47,7 +47,7 @@ export const executors = {
4747
environment: {
4848
NODE_OPTIONS: '--max_old_space_size=6144',
4949
},
50-
image: 'mcr.microsoft.com/playwright:v1.52.0-noble',
50+
image: 'mcr.microsoft.com/playwright:v1.58.2-noble',
5151
},
5252
],
5353
parameters: {

‎scripts/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -138,8 +138,8 @@
138138
"p-limit": "^7.2.0",
139139
"p-retry": "^7.1.0",
140140
"picocolors": "^1.1.0",
141-
"playwright": "1.52.0",
142-
"playwright-core": "1.52.0",
141+
"playwright": "1.58.2",
142+
"playwright-core": "1.58.2",
143143
"polka": "^1.0.0-next.28",
144144
"prettier": "^3.7.1",
145145
"prettier-plugin-brace-style": "^0.8.1",

‎scripts/utils/yarn.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -37,9 +37,9 @@ export const addPackageResolutions = async ({ cwd, dryRun }: YarnOptions) => {
3737
...packageJson.resolutions,
3838
...storybookVersions,
3939
// this is for our CI test, ensure we use the same version as docker image, it should match version specified in `./code/package.json` and `.circleci/config.yml`
40-
playwright: '1.52.0',
41-
'playwright-core': '1.52.0',
42-
'@playwright/test': '1.52.0',
40+
playwright: '1.58.2',
41+
'playwright-core': '1.58.2',
42+
'@playwright/test': '1.58.2',
4343
};
4444
await writeFile(packageJsonPath, JSON.stringify(packageJson, null, 2));
4545
};

0 commit comments

Comments
 (0)
⚡