Skip to content

Commit 0e5747d

Browse files
MarklbMarklb
committed
Merge branch 'next'
2 parents 966bf9b + b132018 commit 0e5747d

18 files changed

+10004
-13563
lines changed

‎.github/workflows/release.yml

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,10 @@ jobs:
1212
- name: Prepare repository
1313
run: git fetch --unshallow --tags
1414

15-
- name: Use Node.js 16.x
15+
- name: Use Node.js 18.19.x
1616
uses: actions/setup-node@v1
1717
with:
18-
node-version: 16.x
18+
node-version: 18.19.x
1919

2020
- name: Install dependencies
2121
uses: bahmutov/npm-install@v1

‎README.md

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -32,11 +32,11 @@ yarn add --dev @storybook/testing-angular
3232

3333
## Setup
3434

35-
### Storybook 7 and Component Story Format
35+
### Storybook 8 and Component Story Format
3636

37-
This library requires you to be using Storybook version 7, [Component Story Format (CSF)](https://storybook.js.org/docs/angular/api/csf) and [hoisted CSF annotations](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#hoisted-csf-annotations), which is the recommended way to write stories since Storybook 7.
37+
This library requires you to be using Storybook version 8, [Component Story Format (CSF)](https://storybook.js.org/docs/angular/api/csf) and [hoisted CSF annotations](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#hoisted-csf-annotations), which is the recommended way to write stories since Storybook 8.
3838

39-
Essentially, if you use Storybook 7 and your stories look similar to this, you're good to go!
39+
Essentially, if you use Storybook 8 and your stories look similar to this, you're good to go!
4040

4141
```ts
4242
// CSF: default export (meta) + named exports (stories)
@@ -61,10 +61,10 @@ If you have global decorators/parameters/etc and want them applied to your stori
6161

6262
```ts
6363
// test.ts <-- this will run before the tests in karma.
64-
import { setGlobalConfig } from '@storybook/testing-angular';
64+
import { setProjectAnnotations } from '@storybook/testing-angular';
6565
import * as globalStorybookConfig from '../.storybook/preview'; // path of your preview.js file
6666

67-
setGlobalConfig(globalStorybookConfig);
67+
setProjectAnnotations(globalStorybookConfig);
6868
```
6969

7070
## Usage
@@ -88,9 +88,9 @@ import Meta from './button.stories';
8888
const { Primary, Secondary } = composeStories(stories);
8989

9090
describe('button', () => {
91-
it('renders primary button with default args', () => {
91+
it('renders primary button with default args', async () => {
9292
const { component, applicationConfig } = createMountable(
93-
Primary({}, {} as any)
93+
Primary({})
9494
);
9595
await render(component, { providers: applicationConfig.providers });
9696
const buttonElement = screen.getByText(
@@ -99,9 +99,9 @@ describe('button', () => {
9999
expect(buttonElement).not.toBeNull();
100100
});
101101

102-
it('renders primary button with overriden props', () => {
102+
it('renders primary button with overriden props', async () => {
103103
const { component, applicationConfig } = createMountable(
104-
Primary({ label: 'Hello world' }, {} as any)
104+
Primary({ label: 'Hello world' })
105105
); // you can override props and they will get merged with values from the Story's args
106106
await render(component, { providers: applicationConfig.providers });
107107
const buttonElement = screen.getByText(/Hello world/i);
@@ -129,7 +129,7 @@ describe('button', () => {
129129
it('onclick handler is called', async () => {
130130
const onClickSpy = jasmine.createSpy();
131131
const { component, applicationConfig } = createMountable(
132-
Primary({ onClick: onClickSpy }, {} as any)
132+
Primary({ onClick: onClickSpy })
133133
);
134134
await render(component, { provider: applicationConfig.provider });
135135
const buttonElement = screen.getByText(Primary.args?.label!);
@@ -156,7 +156,7 @@ const { Primary } = composeStories(stories);
156156

157157
describe('button', () => {
158158
it('reuses args from composed story', async () => {
159-
const { component, applicationConfig } = createMountable(Primary({}, {} as any));
159+
const { component, applicationConfig } = createMountable(Primary({}));
160160
await render(component, { providers: applicationConfig.providers });
161161
expect(screen.getByText(Primary.args?.label!)).not.toBeNull();
162162
});

‎example/angular.json

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -15,18 +15,20 @@
1515
"prefix": "app",
1616
"architect": {
1717
"build": {
18-
"builder": "@angular-devkit/build-angular:browser",
18+
"builder": "@angular-devkit/build-angular:application",
1919
"options": {
20-
"outputPath": "dist/example",
20+
"outputPath": {
21+
"base": "dist/example"
22+
},
2123
"index": "src/index.html",
22-
"main": "src/main.ts",
2324
"polyfills": ["zone.js"],
2425
"tsConfig": "tsconfig.app.json",
2526
"inlineStyleLanguage": "scss",
2627
"assets": ["src/favicon.ico", "src/assets"],
2728
"styles": ["src/styles.scss"],
2829
"scripts": [],
29-
"sourceMap": true
30+
"sourceMap": true,
31+
"browser": "src/main.ts"
3032
},
3133
"configurations": {
3234
"production": {
@@ -45,9 +47,7 @@
4547
"outputHashing": "all"
4648
},
4749
"development": {
48-
"buildOptimizer": false,
4950
"optimization": false,
50-
"vendorChunk": true,
5151
"extractLicenses": false,
5252
"sourceMap": true,
5353
"namedChunks": true
@@ -59,18 +59,18 @@
5959
"builder": "@angular-devkit/build-angular:dev-server",
6060
"configurations": {
6161
"production": {
62-
"browserTarget": "example:build:production"
62+
"buildTarget": "example:build:production"
6363
},
6464
"development": {
65-
"browserTarget": "example:build:development"
65+
"buildTarget": "example:build:development"
6666
}
6767
},
6868
"defaultConfiguration": "development"
6969
},
7070
"extract-i18n": {
7171
"builder": "@angular-devkit/build-angular:extract-i18n",
7272
"options": {
73-
"browserTarget": "example:build"
73+
"buildTarget": "example:build"
7474
}
7575
},
7676
"test": {

‎example/package.json

Lines changed: 21 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -12,31 +12,30 @@
1212
},
1313
"private": true,
1414
"dependencies": {
15-
"@angular/animations": "^16.0.0",
16-
"@angular/common": "^16.0.0",
17-
"@angular/compiler": "^16.0.0",
18-
"@angular/core": "^16.0.0",
19-
"@angular/forms": "^16.0.0",
20-
"@angular/platform-browser": "^16.0.0",
21-
"@angular/platform-browser-dynamic": "^16.0.0",
22-
"@angular/router": "^16.0.0",
23-
"@ngrx/store": "^16.2.0",
15+
"@angular/animations": "^18.0.1",
16+
"@angular/common": "^18.0.1",
17+
"@angular/compiler": "^18.0.1",
18+
"@angular/core": "^18.0.1",
19+
"@angular/forms": "^18.0.1",
20+
"@angular/platform-browser": "^18.0.1",
21+
"@angular/platform-browser-dynamic": "^18.0.1",
22+
"@angular/router": "^18.0.1",
23+
"@ngrx/store": "^17.2.0",
2424
"@testing-library/angular": "^14.1.1",
2525
"rxjs": "~7.8.0",
26-
"tslib": "^2.3.0",
27-
"zone.js": "~0.13.0"
26+
"tslib": "^2.6.2",
27+
"zone.js": "~0.14.6"
2828
},
2929
"devDependencies": {
30-
"@angular-devkit/build-angular": "^16.0.2",
31-
"@angular/cli": "~16.0.2",
32-
"@angular/compiler-cli": "^16.0.0",
30+
"@angular-devkit/build-angular": "^18.0.2",
31+
"@angular/cli": "~18.0.2",
32+
"@angular/compiler-cli": "^18.0.1",
3333
"@compodoc/compodoc": "^1.1.21",
34-
"@storybook/addon-essentials": "^7.3.2",
35-
"@storybook/addon-interactions": "^7.3.2",
36-
"@storybook/addon-links": "^7.3.2",
37-
"@storybook/angular": "^7.3.2",
38-
"@storybook/blocks": "^7.3.2",
39-
"@storybook/testing-library": "^0.2.0",
34+
"@storybook/addon-essentials": "^8.1.5",
35+
"@storybook/addon-interactions": "^8.1.5",
36+
"@storybook/addon-links": "^8.1.5",
37+
"@storybook/angular": "^8.1.5",
38+
"@storybook/blocks": "^8.1.5",
4039
"@types/jasmine": "~4.3.0",
4140
"jasmine-core": "~4.6.0",
4241
"karma": "~6.4.0",
@@ -46,7 +45,7 @@
4645
"karma-jasmine-html-reporter": "~2.0.0",
4746
"react": "^18.2.0",
4847
"react-dom": "^18.2.0",
49-
"storybook": "^7.3.2",
50-
"typescript": "~5.0.2"
48+
"storybook": "^8.1.5",
49+
"typescript": "~5.4.5"
5150
}
5251
}

‎example/src/app/app.component.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -427,8 +427,8 @@ <h2>Next Steps</h2>
427427
<!-- Terminal -->
428428
<div class="terminal" [ngSwitch]="selection.value">
429429
<pre *ngSwitchDefault>ng generate component xyz</pre>
430-
<pre *ngSwitchCase="'material'">ng add @angular/material</pre>
431-
<pre *ngSwitchCase="'pwa'">ng add @angular/pwa</pre>
430+
<pre *ngSwitchCase="'material'">ng add &#64;angular/material</pre>
431+
<pre *ngSwitchCase="'pwa'">ng add &#64;angular/pwa</pre>
432432
<pre *ngSwitchCase="'dependency'">ng add _____</pre>
433433
<pre *ngSwitchCase="'test'">ng test</pre>
434434
<pre *ngSwitchCase="'build'">ng build</pre>

‎example/src/app/ngrx/my-counter.spec.ts

Lines changed: 21 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,26 @@ import { composeStories, composeStory, createMountable } from '@storybook/testin
33
import { render, screen } from '@testing-library/angular';
44

55
import * as stories from './my-counter.stories';
6-
import { MyCounterComponent } from './my-counter.component';
6+
import meta, { Primary } from './my-counter.stories';
77

8-
const composed: any = composeStories<MyCounterComponent>(stories);
8+
const composed = composeStories(stories);
99

10-
describe('interactive stories test', () =>
11-
it('should render and validate story', async () => {
12-
const { component, applicationConfig } = createMountable(composed.Primary({}, {} as any));
13-
await render(component, { providers: applicationConfig.providers });
14-
expect(screen.getByText("Current Count: 0")).not.toBeNull();
15-
}));
10+
const _Primary = composeStory(Primary, meta);
11+
12+
describe('interactive stories test', () => {
13+
describe('composeStories', () => {
14+
it('should render and validate story', async () => {
15+
const { component, applicationConfig } = createMountable(composed.Primary({}));
16+
await render(component, { providers: applicationConfig.providers });
17+
expect(screen.getByText("Current Count: 0")).not.toBeNull();
18+
});
19+
});
20+
21+
describe('composeStory', () => {
22+
it('should render and validate story', async () => {
23+
const { component, applicationConfig } = createMountable(_Primary({}));
24+
await render(component, { providers: applicationConfig.providers });
25+
expect(screen.getByText("Current Count: 0")).not.toBeNull();
26+
});
27+
});
28+
});

‎example/src/app/signal/with-signal-input.component.ts

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { CommonModule } from '@angular/common';
2+
import { Component, input } from '@angular/core';
3+
4+
@Component({
5+
selector: 'app-with-signal-input',
6+
template: `<div>Is Primary: {{ primary() }}</div>`,
7+
standalone: true,
8+
imports: [
9+
CommonModule,
10+
],
11+
})
12+
export default class WithSignalInputComponent {
13+
primary = input(false);
14+
}

‎example/src/app/signal/with-signal-input.spec.ts

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { composeStories, createMountable } from '@storybook/testing-angular';
2+
3+
import { render, screen } from '@testing-library/angular';
4+
5+
import * as stories from './with-signal-input.stories';
6+
7+
const composed = composeStories(stories);
8+
9+
describe('with signal input stories test', () =>
10+
it('should render and validate story', async () => {
11+
const { component, applicationConfig } = createMountable(composed.Primary({}));
12+
await render(component, { providers: applicationConfig.providers });
13+
expect(screen.getByText("Is Primary: false")).not.toBeNull();
14+
}));

‎example/src/app/signal/with-signal-input.stories.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { Meta, StoryObj } from '@storybook/angular';
2+
3+
import WithSignalInputComponent from './with-signal-input.component';
4+
5+
export default {
6+
title: 'Signal/WithSignalInput',
7+
component: WithSignalInputComponent,
8+
} as Meta<WithSignalInputComponent>;
9+
10+
export const Primary: StoryObj<WithSignalInputComponent> = {};

‎example/src/stories/Button.stories.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ const meta: Meta<ButtonComponent> = {
66
title: 'Example/Button',
77
component: ButtonComponent,
88
tags: ['autodocs'],
9-
render: (args: ButtonComponent) => ({
9+
render: args => ({
1010
props: {
1111
backgroundColor: null,
1212
...args,
@@ -59,4 +59,4 @@ export const Other: Story = {
5959
primary: true,
6060
label: 'Button',
6161
},
62-
};
62+
};

0 commit comments

Comments
 (0)