Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit c692698

Browse files
MarklbMarklb
committed
Merge branch 'next' into main
2 parents 66bd74a + 72ac9d7 commit c692698

File tree

6 files changed

+1806
-732
lines changed

6 files changed

+1806
-732
lines changed

‎README.md

Lines changed: 10 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ If you use the composed story (e.g. PrimaryButton), the component will render wi
7979
import { render, screen } from '@testing-library/angular';
8080
import {
8181
composeStories,
82-
createMountableStoryComponent,
82+
createMountable,
8383
} from '@storybook/testing-angular';
8484
import * as stories from './button.stories'; // import all stories from the stories file
8585
import Meta from './button.stories';
@@ -89,9 +89,8 @@ const { Primary, Secondary } = composeStories(stories);
8989

9090
describe('button', () => {
9191
it('renders primary button with default args', () => {
92-
const { component, applicationConfig } = createMountableStoryComponent(
93-
Primary({}, {} as any),
94-
Meta.component,
92+
const { component, applicationConfig } = createMountable(
93+
Primary({}, {} as any)
9594
);
9695
await render(component, { providers: applicationConfig.providers });
9796
const buttonElement = screen.getByText(
@@ -101,9 +100,8 @@ describe('button', () => {
101100
});
102101

103102
it('renders primary button with overriden props', () => {
104-
const { component, applicationConfig } = createMountableStoryComponent(
105-
Primary({ label: 'Hello world' }, {} as any),
106-
Meta.component,
103+
const { component, applicationConfig } = createMountable(
104+
Primary({ label: 'Hello world' }, {} as any)
107105
); // you can override props and they will get merged with values from the Story's args
108106
await render(component, { providers: applicationConfig.providers });
109107
const buttonElement = screen.getByText(/Hello world/i);
@@ -120,7 +118,7 @@ You can use `composeStory` if you wish to apply it for a single story rather tha
120118
import { render, screen } from '@testing-library/angular';
121119
import {
122120
composeStory,
123-
createMountableStoryComponent,
121+
createMountable,
124122
} from '@storybook/testing-angular';
125123
import Meta, { Primary as PrimaryStory } from './button.stories';
126124

@@ -130,9 +128,8 @@ const Primary = composeStory(PrimaryStory, Meta);
130128
describe('button', () => {
131129
it('onclick handler is called', async () => {
132130
const onClickSpy = jasmine.createSpy();
133-
const { component, applicationConfig } = createMountableStoryComponent(
134-
Primary({ onClick: onClickSpy }, {} as any),
135-
Meta.component,
131+
const { component, applicationConfig } = createMountable(
132+
Primary({ onClick: onClickSpy }, {} as any)
136133
);
137134
await render(component, { provider: applicationConfig.provider });
138135
const buttonElement = screen.getByText(Primary.args?.label!);
@@ -150,7 +147,7 @@ The components returned by `composeStories` or `composeStory` not only can be re
150147
import { render, screen } from '@testing-library/angular';
151148
import {
152149
composeStory,
153-
createMountableStoryComponent,
150+
createMountable,
154151
} from '@storybook/testing-angular';
155152
import * as stories from './button.stories';
156153
import Meta from './button.stories';
@@ -159,10 +156,7 @@ const { Primary } = composeStories(stories);
159156

160157
describe('button', () => {
161158
it('reuses args from composed story', async () => {
162-
const { component, applicationConfig } = createMountableStoryComponent(
163-
Primary({}, {} as any),
164-
Meta.component
165-
);
159+
const { component, applicationConfig } = createMountable(Primary({}, {} as any));
166160
await render(component, { providers: applicationConfig.providers });
167161
expect(screen.getByText(Primary.args?.label!)).not.toBeNull();
168162
});

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

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
1-
import { composeStory, createMountableStoryComponent } from '@storybook/testing-angular';
1+
import { composeStories, composeStory, createMountable } from '@storybook/testing-angular';
22

33
import { render, screen } from '@testing-library/angular';
44

5-
import Meta from './my-counter.stories';
65
import * as stories from './my-counter.stories';
76
import { MyCounterComponent } from './my-counter.component';
87

9-
const Primary = composeStory<MyCounterComponent>(stories.Primary as any, Meta);
8+
const composed: any = composeStories<MyCounterComponent>(stories);
109

1110
describe('interactive stories test', () =>
1211
it('should render and validate story', async () => {
13-
const { component, applicationConfig } = createMountableStoryComponent(Primary({}, {} as any), Meta.component);
12+
const { component, applicationConfig } = createMountable(composed.Primary({}, {} as any));
1413
await render(component, { providers: applicationConfig.providers });
1514
expect(screen.getByText("Current Count: 0")).not.toBeNull();
1615
}));

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,9 @@ export default {
1010
component: MyCounterComponent,
1111
decorators: [
1212
applicationConfig({
13-
providers: [provideStore({ count: counterReducer })],
13+
providers: [
14+
provideStore({ count: counterReducer })
15+
],
1416
}),
1517
],
1618
} as Meta<MyCounterComponent>;

‎example/src/stories/button.spec.ts

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { render, screen } from '@testing-library/angular';
2-
import { composeStories, composeStory, createMountableStoryComponent } from '@storybook/testing-angular';
2+
import { composeStories, composeStory, createMountable } from '@storybook/testing-angular';
33

44
import { ButtonComponent } from './button.component';
55
// import * as stories from './Button.stories'; // import all stories from the stories file
@@ -25,7 +25,7 @@ describe('button TestBed', () => {
2525
let applicationConfig: ApplicationConfig
2626

2727
beforeEach(async () => {
28-
const componentAndConfig = createMountableStoryComponent(Primary({}, {} as any), Meta.component);
28+
const componentAndConfig = createMountable(Primary({}, {} as any));
2929
component = componentAndConfig.component;
3030
applicationConfig = componentAndConfig.applicationConfig;
3131
await TestBed.configureTestingModule({
@@ -50,21 +50,20 @@ describe('button TestBed', () => {
5050

5151
describe('button testing-library', () => {
5252
it('renders primary button', async () => {
53-
const { component, applicationConfig } = createMountableStoryComponent(Primary({}, {} as any), Meta.component);
53+
const { component, applicationConfig } = createMountable(Primary({}, {} as any));
5454
await render(component, { providers: applicationConfig.providers });
5555
expect(screen.getByText(Primary.args?.label!)).not.toBeNull();
5656
});
5757

5858
it('renders other button', async () => {
59-
console.log('Other', Other)
60-
const { component, applicationConfig } = createMountableStoryComponent(Other({}, {} as any), Meta.component);
59+
const { component, applicationConfig } = createMountable(Other({}, {} as any));
6160
await render(component, { providers: applicationConfig.providers });
6261
expect(screen.getByText(Other.args?.label!)).not.toBeNull();
6362
});
6463

6564
it('renders primary button with spy', async () => {
6665
const onClickSpy = jasmine.createSpy()
67-
const { component, applicationConfig } = createMountableStoryComponent(Primary({ onClick: onClickSpy as any }, {} as any), Meta.component);
66+
const { component, applicationConfig } = createMountable(Primary({ onClick: onClickSpy as any }, {} as any));
6867
await render(component, { providers: applicationConfig.providers });
6968
const buttonElement = screen.getByText(Primary.args?.label!);
7069
buttonElement.click();

0 commit comments

Comments
 (0)