KaneAI - World’s First E2E Software Testing Agent.Signup for Private Beta 
How to use frameworkRender method in storybook-root
Best JavaScript code snippet using storybook-root
start.test.ts
Source:start.test.ts 
1/* global window */2import Events from '@storybook/core-events';3import {4 waitForRender,5 waitForEvents,6 waitForQuiescence,7 emitter,8 mockChannel,9} from '@storybook/preview-web/dist/cjs/PreviewWeb.mockdata';10// @ts-expect-error (Converted from ts-ignore)11import { WebView } from '@storybook/preview-web/dist/cjs/WebView';12import { setGlobalRender } from '@storybook/client-api';13import { start } from './start';14jest.mock('@storybook/preview-web/dist/cjs/WebView');15jest.spyOn(WebView.prototype, 'prepareForDocs').mockReturnValue('docs-root');16jest.spyOn(WebView.prototype, 'prepareForStory').mockReturnValue('story-root');17jest.mock('global', () => ({18 // @ts-expect-error (Converted from ts-ignore)19 ...jest.requireActual('global'),20 history: { replaceState: jest.fn() },21 document: {22 location: {23 pathname: 'pathname',24 search: '?id=*',25 },26 },27 FEATURES: {28 breakingChangesV7: true,29 },30}));31jest.mock('@storybook/channel-postmessage', () => ({ createChannel: () => mockChannel }));32jest.mock('react-dom');33// for the auto-title test34jest.mock('@storybook/store', () => {35 const actualStore = jest.requireActual('@storybook/store');36 return {37 ...actualStore,38 userOrAutoTitle: (importPath: string, specifier: any, userTitle?: string) =>39 userTitle || 'auto-title',40 };41});42beforeEach(() => {43 mockChannel.emit.mockClear();44 // Preview doesn't clean itself up as it isn't designed to ever be stopped :shrug:45 emitter.removeAllListeners();46});47describe('start', () => {48 describe('when configure is called with storiesOf only', () => {49 it('loads and renders the first story correctly', async () => {50 const renderToDOM = jest.fn();51 const { configure, clientApi } = start(renderToDOM);52 configure('test', () => {53 clientApi54 .storiesOf('Component A', { id: 'file1' } as NodeModule)55 .add('Story One', jest.fn())56 .add('Story Two', jest.fn());57 clientApi58 .storiesOf('Component B', { id: 'file2' } as NodeModule)59 .add('Story Three', jest.fn());60 });61 await waitForRender();62 expect(63 mockChannel.emit.mock.calls.find((call: [string, any]) => call[0] === Events.SET_STORIES)[1]64 ).toMatchInlineSnapshot(`65 Object {66 "globalParameters": Object {},67 "globals": Object {},68 "kindParameters": Object {69 "Component A": Object {},70 "Component B": Object {},71 },72 "stories": Object {73 "component-a--story-one": Object {74 "argTypes": Object {},75 "args": Object {},76 "component": undefined,77 "componentId": "component-a",78 "id": "component-a--story-one",79 "initialArgs": Object {},80 "kind": "Component A",81 "name": "Story One",82 "parameters": Object {83 "__id": "component-a--story-one",84 "__isArgsStory": false,85 "fileName": "file1",86 "framework": "test",87 },88 "playFunction": undefined,89 "story": "Story One",90 "subcomponents": undefined,91 "title": "Component A",92 },93 "component-a--story-two": Object {94 "argTypes": Object {},95 "args": Object {},96 "component": undefined,97 "componentId": "component-a",98 "id": "component-a--story-two",99 "initialArgs": Object {},100 "kind": "Component A",101 "name": "Story Two",102 "parameters": Object {103 "__id": "component-a--story-two",104 "__isArgsStory": false,105 "fileName": "file1",106 "framework": "test",107 },108 "playFunction": undefined,109 "story": "Story Two",110 "subcomponents": undefined,111 "title": "Component A",112 },113 "component-b--story-three": Object {114 "argTypes": Object {},115 "args": Object {},116 "component": undefined,117 "componentId": "component-b",118 "id": "component-b--story-three",119 "initialArgs": Object {},120 "kind": "Component B",121 "name": "Story Three",122 "parameters": Object {123 "__id": "component-b--story-three",124 "__isArgsStory": false,125 "fileName": "file2",126 "framework": "test",127 },128 "playFunction": undefined,129 "story": "Story Three",130 "subcomponents": undefined,131 "title": "Component B",132 },133 },134 "v": 2,135 }136 `);137 await waitForRender();138 expect(mockChannel.emit).toHaveBeenCalledWith(139 Events.STORY_RENDERED,140 'component-a--story-one'141 );142 expect(renderToDOM).toHaveBeenCalledWith(143 expect.objectContaining({144 id: 'component-a--story-one',145 }),146 'story-root'147 );148 });149 it('sends over docs only stories', async () => {150 const renderToDOM = jest.fn();151 const { configure, clientApi } = start(renderToDOM);152 configure('test', () => {153 clientApi154 .storiesOf('Component A', { id: 'file1' } as NodeModule)155 .add('Story One', jest.fn(), { docsOnly: true, docs: {} });156 });157 await waitForEvents([Events.SET_STORIES]);158 expect(159 mockChannel.emit.mock.calls.find((call: [string, any]) => call[0] === Events.SET_STORIES)[1]160 ).toMatchInlineSnapshot(`161 Object {162 "globalParameters": Object {},163 "globals": Object {},164 "kindParameters": Object {165 "Component A": Object {},166 },167 "stories": Object {168 "component-a--story-one": Object {169 "argTypes": Object {},170 "args": Object {},171 "component": undefined,172 "componentId": "component-a",173 "id": "component-a--story-one",174 "initialArgs": Object {},175 "kind": "Component A",176 "name": "Story One",177 "parameters": Object {178 "__id": "component-a--story-one",179 "__isArgsStory": false,180 "docs": Object {},181 "docsOnly": true,182 "fileName": "file1",183 "framework": "test",184 },185 "playFunction": undefined,186 "story": "Story One",187 "subcomponents": undefined,188 "title": "Component A",189 },190 },191 "v": 2,192 }193 `);194 // Wait a second to let the docs "render" finish (and maybe throw)195 await waitForQuiescence();196 });197 it('deals with stories with "default" name', async () => {198 const renderToDOM = jest.fn();199 const { configure, clientApi } = start(renderToDOM);200 configure('test', () => {201 clientApi.storiesOf('Component A', { id: 'file1' } as NodeModule).add('default', jest.fn());202 });203 await waitForRender();204 expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_RENDERED, 'component-a--default');205 });206 it('deals with stories with camel-cased names', async () => {207 const renderToDOM = jest.fn();208 const { configure, clientApi } = start(renderToDOM);209 configure('test', () => {210 clientApi211 .storiesOf('Component A', { id: 'file1' } as NodeModule)212 .add('storyOne', jest.fn());213 });214 await waitForRender();215 expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_RENDERED, 'component-a--storyone');216 });217 it('deals with stories with spaces in the name', async () => {218 const renderToDOM = jest.fn();219 const { configure, clientApi } = start(renderToDOM);220 configure('test', () => {221 clientApi222 .storiesOf('Component A', { id: 'file1' } as NodeModule)223 .add('Story One', jest.fn());224 });225 await waitForRender();226 expect(mockChannel.emit).toHaveBeenCalledWith(227 Events.STORY_RENDERED,228 'component-a--story-one'229 );230 });231 // https://github.com/storybookjs/storybook/issues/16303232 it('deals with stories with numeric names', async () => {233 const renderToDOM = jest.fn();234 const { configure, clientApi } = start(renderToDOM);235 configure('test', () => {236 clientApi.storiesOf('Component A', { id: 'file1' } as NodeModule).add('story0', jest.fn());237 });238 await waitForRender();239 expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_RENDERED, 'component-a--story0');240 });241 it('deals with storiesOf from the same file twice', async () => {242 const renderToDOM = jest.fn();243 const { configure, clientApi } = start(renderToDOM);244 configure('test', () => {245 clientApi.storiesOf('Component A', { id: 'file1' } as NodeModule).add('default', jest.fn());246 clientApi.storiesOf('Component B', { id: 'file1' } as NodeModule).add('default', jest.fn());247 clientApi.storiesOf('Component C', { id: 'file1' } as NodeModule).add('default', jest.fn());248 });249 await waitForRender();250 expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_RENDERED, 'component-a--default');251 const storiesOfData = mockChannel.emit.mock.calls.find(252 (call: [string, any]) => call[0] === Events.SET_STORIES253 )[1];254 expect(Object.values(storiesOfData.stories).map((s: any) => s.parameters.fileName)).toEqual([255 'file1',256 'file1-2',257 'file1-3',258 ]);259 });260 it('allows global metadata via client-api', async () => {261 const renderToDOM = jest.fn(({ storyFn }) => storyFn());262 const { configure, clientApi } = start(renderToDOM);263 const loader = jest.fn(async () => ({ val: 'loaded' }));264 const decorator = jest.fn();265 configure('test', () => {266 clientApi.addLoader(loader);267 clientApi.addDecorator(decorator);268 clientApi.addParameters({ param: 'global' });269 clientApi.storiesOf('Component A', { id: 'file1' } as NodeModule).add('default', jest.fn());270 });271 await waitForRender();272 expect(loader).toHaveBeenCalled();273 expect(decorator).toHaveBeenCalled();274 expect(renderToDOM).toHaveBeenCalledWith(275 expect.objectContaining({276 storyContext: expect.objectContaining({277 parameters: expect.objectContaining({278 framework: 'test',279 param: 'global',280 }),281 }),282 }),283 'story-root'284 );285 });286 it('allows setting compomnent/args/argTypes via a parameter', async () => {287 const renderToDOM = jest.fn(({ storyFn }) => storyFn());288 const { configure, clientApi } = start(renderToDOM);289 const component = {};290 configure('test', () => {291 clientApi292 .storiesOf('Component A', { id: 'file1' } as NodeModule)293 .addParameters({294 component,295 args: { a: 'a' },296 argTypes: { a: { type: 'string' } },297 })298 .add('default', jest.fn(), {299 args: { b: 'b' },300 argTypes: { b: { type: 'string' } },301 });302 });303 await waitForRender();304 expect(renderToDOM).toHaveBeenCalledWith(305 expect.objectContaining({306 storyContext: expect.objectContaining({307 component,308 args: { a: 'a', b: 'b' },309 argTypes: {310 a: { name: 'a', type: { name: 'string' } },311 b: { name: 'b', type: { name: 'string' } },312 },313 }),314 }),315 'story-root'316 );317 expect((window as any).IS_STORYBOOK).toBe(true);318 });319 it('supports forceRerender()', async () => {320 const renderToDOM = jest.fn(({ storyFn }) => storyFn());321 const { configure, clientApi, forceReRender } = start(renderToDOM);322 configure('test', () => {323 clientApi.storiesOf('Component A', { id: 'file1' } as NodeModule).add('default', jest.fn());324 });325 await waitForRender();326 expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_RENDERED, 'component-a--default');327 mockChannel.emit.mockClear();328 forceReRender();329 await waitForRender();330 expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_RENDERED, 'component-a--default');331 });332 it('supports HMR when a story file changes', async () => {333 const renderToDOM = jest.fn(({ storyFn }) => storyFn());334 const { configure, clientApi, forceReRender } = start(renderToDOM);335 let disposeCallback: () => void;336 const module = {337 id: 'file1',338 hot: {339 accept: jest.fn(),340 dispose(cb: () => void) {341 disposeCallback = cb;342 },343 },344 };345 const firstImplementation = jest.fn();346 configure('test', () => {347 clientApi.storiesOf('Component A', module as any).add('default', firstImplementation);348 });349 await waitForRender();350 expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_RENDERED, 'component-a--default');351 expect(firstImplementation).toHaveBeenCalled();352 expect(module.hot.accept).toHaveBeenCalled();353 expect(disposeCallback).toBeDefined();354 mockChannel.emit.mockClear();355 disposeCallback();356 const secondImplementation = jest.fn();357 clientApi.storiesOf('Component A', module as any).add('default', secondImplementation);358 await waitForRender();359 expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_RENDERED, 'component-a--default');360 expect(secondImplementation).toHaveBeenCalled();361 });362 it('re-emits SET_STORIES when a story is added', async () => {363 const renderToDOM = jest.fn(({ storyFn }) => storyFn());364 const { configure, clientApi, forceReRender } = start(renderToDOM);365 let disposeCallback: () => void;366 const module = {367 id: 'file1',368 hot: {369 accept: jest.fn(),370 dispose(cb: () => void) {371 disposeCallback = cb;372 },373 },374 };375 configure('test', () => {376 clientApi.storiesOf('Component A', module as any).add('default', jest.fn());377 });378 await waitForRender();379 mockChannel.emit.mockClear();380 disposeCallback();381 clientApi382 .storiesOf('Component A', module as any)383 .add('default', jest.fn())384 .add('new', jest.fn());385 await waitForEvents([Events.SET_STORIES]);386 expect(387 mockChannel.emit.mock.calls.find((call: [string, any]) => call[0] === Events.SET_STORIES)[1]388 ).toMatchInlineSnapshot(`389 Object {390 "globalParameters": Object {},391 "globals": Object {},392 "kindParameters": Object {393 "Component A": Object {},394 },395 "stories": Object {396 "component-a--default": Object {397 "argTypes": Object {},398 "args": Object {},399 "component": undefined,400 "componentId": "component-a",401 "id": "component-a--default",402 "initialArgs": Object {},403 "kind": "Component A",404 "name": "default",405 "parameters": Object {406 "__id": "component-a--default",407 "__isArgsStory": false,408 "fileName": "file1",409 "framework": "test",410 },411 "playFunction": undefined,412 "story": "default",413 "subcomponents": undefined,414 "title": "Component A",415 },416 "component-a--new": Object {417 "argTypes": Object {},418 "args": Object {},419 "component": undefined,420 "componentId": "component-a",421 "id": "component-a--new",422 "initialArgs": Object {},423 "kind": "Component A",424 "name": "new",425 "parameters": Object {426 "__id": "component-a--new",427 "__isArgsStory": false,428 "fileName": "file1",429 "framework": "test",430 },431 "playFunction": undefined,432 "story": "new",433 "subcomponents": undefined,434 "title": "Component A",435 },436 },437 "v": 2,438 }439 `);440 });441 it('re-emits SET_STORIES when a story file is removed', async () => {442 const renderToDOM = jest.fn(({ storyFn }) => storyFn());443 const { configure, clientApi, forceReRender } = start(renderToDOM);444 let disposeCallback: () => void;445 const moduleB = {446 id: 'file2',447 hot: {448 accept: jest.fn(),449 dispose(cb: () => void) {450 disposeCallback = cb;451 },452 },453 };454 configure('test', () => {455 clientApi.storiesOf('Component A', { id: 'file1' } as any).add('default', jest.fn());456 clientApi.storiesOf('Component B', moduleB as any).add('default', jest.fn());457 });458 await waitForEvents([Events.SET_STORIES]);459 expect(460 mockChannel.emit.mock.calls.find((call: [string, any]) => call[0] === Events.SET_STORIES)[1]461 ).toMatchInlineSnapshot(`462 Object {463 "globalParameters": Object {},464 "globals": Object {},465 "kindParameters": Object {466 "Component A": Object {},467 "Component B": Object {},468 },469 "stories": Object {470 "component-a--default": Object {471 "argTypes": Object {},472 "args": Object {},473 "component": undefined,474 "componentId": "component-a",475 "id": "component-a--default",476 "initialArgs": Object {},477 "kind": "Component A",478 "name": "default",479 "parameters": Object {480 "__id": "component-a--default",481 "__isArgsStory": false,482 "fileName": "file1",483 "framework": "test",484 },485 "playFunction": undefined,486 "story": "default",487 "subcomponents": undefined,488 "title": "Component A",489 },490 "component-b--default": Object {491 "argTypes": Object {},492 "args": Object {},493 "component": undefined,494 "componentId": "component-b",495 "id": "component-b--default",496 "initialArgs": Object {},497 "kind": "Component B",498 "name": "default",499 "parameters": Object {500 "__id": "component-b--default",501 "__isArgsStory": false,502 "fileName": "file2",503 "framework": "test",504 },505 "playFunction": undefined,506 "story": "default",507 "subcomponents": undefined,508 "title": "Component B",509 },510 },511 "v": 2,512 }513 `);514 mockChannel.emit.mockClear();515 disposeCallback();516 await waitForEvents([Events.SET_STORIES]);517 expect(518 mockChannel.emit.mock.calls.find((call: [string, any]) => call[0] === Events.SET_STORIES)[1]519 ).toMatchInlineSnapshot(`520 Object {521 "globalParameters": Object {},522 "globals": Object {},523 "kindParameters": Object {524 "Component A": Object {},525 },526 "stories": Object {527 "component-a--default": Object {528 "argTypes": Object {},529 "args": Object {},530 "component": undefined,531 "componentId": "component-a",532 "id": "component-a--default",533 "initialArgs": Object {},534 "kind": "Component A",535 "name": "default",536 "parameters": Object {537 "__id": "component-a--default",538 "__isArgsStory": false,539 "fileName": "file1",540 "framework": "test",541 },542 "playFunction": undefined,543 "story": "default",544 "subcomponents": undefined,545 "title": "Component A",546 },547 },548 "v": 2,549 }550 `);551 });552 });553 const componentCExports = {554 default: {555 title: 'Component C',556 },557 StoryOne: jest.fn(),558 StoryTwo: jest.fn(),559 };560 describe('when configure is called with CSF only', () => {561 it('loads and renders the first story correctly', async () => {562 const renderToDOM = jest.fn();563 const { configure } = start(renderToDOM);564 configure('test', () => [componentCExports]);565 await waitForRender();566 expect(567 mockChannel.emit.mock.calls.find((call: [string, any]) => call[0] === Events.SET_STORIES)[1]568 ).toMatchInlineSnapshot(`569 Object {570 "globalParameters": Object {},571 "globals": Object {},572 "kindParameters": Object {573 "Component C": Object {},574 },575 "stories": Object {576 "component-c--story-one": Object {577 "argTypes": Object {},578 "args": Object {},579 "component": undefined,580 "componentId": "component-c",581 "id": "component-c--story-one",582 "initialArgs": Object {},583 "kind": "Component C",584 "name": "Story One",585 "parameters": Object {586 "__isArgsStory": false,587 "fileName": "exports-map-0",588 "framework": "test",589 },590 "playFunction": undefined,591 "story": "Story One",592 "subcomponents": undefined,593 "title": "Component C",594 },595 "component-c--story-two": Object {596 "argTypes": Object {},597 "args": Object {},598 "component": undefined,599 "componentId": "component-c",600 "id": "component-c--story-two",601 "initialArgs": Object {},602 "kind": "Component C",603 "name": "Story Two",604 "parameters": Object {605 "__isArgsStory": false,606 "fileName": "exports-map-0",607 "framework": "test",608 },609 "playFunction": undefined,610 "story": "Story Two",611 "subcomponents": undefined,612 "title": "Component C",613 },614 },615 "v": 2,616 }617 `);618 await waitForRender();619 expect(mockChannel.emit).toHaveBeenCalledWith(620 Events.STORY_RENDERED,621 'component-c--story-one'622 );623 expect(renderToDOM).toHaveBeenCalledWith(624 expect.objectContaining({625 id: 'component-c--story-one',626 }),627 'story-root'628 );629 });630 it('supports HMR when a story file changes', async () => {631 const renderToDOM = jest.fn(({ storyFn }) => storyFn());632 let disposeCallback: (data: object) => void;633 const module = {634 id: 'file1',635 hot: {636 data: {},637 accept: jest.fn(),638 dispose(cb: () => void) {639 disposeCallback = cb;640 },641 },642 };643 const { configure } = start(renderToDOM);644 configure('test', () => [componentCExports], module as any);645 await waitForRender();646 expect(mockChannel.emit).toHaveBeenCalledWith(647 Events.STORY_RENDERED,648 'component-c--story-one'649 );650 expect(componentCExports.StoryOne).toHaveBeenCalled();651 expect(module.hot.accept).toHaveBeenCalled();652 expect(disposeCallback).toBeDefined();653 mockChannel.emit.mockClear();654 disposeCallback(module.hot.data);655 const secondImplementation = jest.fn();656 configure(657 'test',658 () => [{ ...componentCExports, StoryOne: secondImplementation }],659 module as any660 );661 await waitForRender();662 expect(mockChannel.emit).toHaveBeenCalledWith(663 Events.STORY_RENDERED,664 'component-c--story-one'665 );666 expect(secondImplementation).toHaveBeenCalled();667 });668 it('re-emits SET_STORIES when a story is added', async () => {669 const renderToDOM = jest.fn(({ storyFn }) => storyFn());670 let disposeCallback: (data: object) => void;671 const module = {672 id: 'file1',673 hot: {674 data: {},675 accept: jest.fn(),676 dispose(cb: () => void) {677 disposeCallback = cb;678 },679 },680 };681 const { configure } = start(renderToDOM);682 configure('test', () => [componentCExports], module as any);683 await waitForRender();684 mockChannel.emit.mockClear();685 disposeCallback(module.hot.data);686 configure('test', () => [{ ...componentCExports, StoryThree: jest.fn() }], module as any);687 await waitForEvents([Events.SET_STORIES]);688 expect(689 mockChannel.emit.mock.calls.find((call: [string, any]) => call[0] === Events.SET_STORIES)[1]690 ).toMatchInlineSnapshot(`691 Object {692 "globalParameters": Object {},693 "globals": Object {},694 "kindParameters": Object {695 "Component C": Object {},696 },697 "stories": Object {698 "component-c--story-one": Object {699 "argTypes": Object {},700 "args": Object {},701 "component": undefined,702 "componentId": "component-c",703 "id": "component-c--story-one",704 "initialArgs": Object {},705 "kind": "Component C",706 "name": "Story One",707 "parameters": Object {708 "__isArgsStory": false,709 "fileName": "exports-map-0",710 "framework": "test",711 },712 "playFunction": undefined,713 "story": "Story One",714 "subcomponents": undefined,715 "title": "Component C",716 },717 "component-c--story-three": Object {718 "argTypes": Object {},719 "args": Object {},720 "component": undefined,721 "componentId": "component-c",722 "id": "component-c--story-three",723 "initialArgs": Object {},724 "kind": "Component C",725 "name": "Story Three",726 "parameters": Object {727 "__isArgsStory": false,728 "fileName": "exports-map-0",729 "framework": "test",730 },731 "playFunction": undefined,732 "story": "Story Three",733 "subcomponents": undefined,734 "title": "Component C",735 },736 "component-c--story-two": Object {737 "argTypes": Object {},738 "args": Object {},739 "component": undefined,740 "componentId": "component-c",741 "id": "component-c--story-two",742 "initialArgs": Object {},743 "kind": "Component C",744 "name": "Story Two",745 "parameters": Object {746 "__isArgsStory": false,747 "fileName": "exports-map-0",748 "framework": "test",749 },750 "playFunction": undefined,751 "story": "Story Two",752 "subcomponents": undefined,753 "title": "Component C",754 },755 },756 "v": 2,757 }758 `);759 });760 it('re-emits SET_STORIES when a story file is removed', async () => {761 const renderToDOM = jest.fn(({ storyFn }) => storyFn());762 let disposeCallback: (data: object) => void;763 const module = {764 id: 'file1',765 hot: {766 data: {},767 accept: jest.fn(),768 dispose(cb: () => void) {769 disposeCallback = cb;770 },771 },772 };773 const { configure } = start(renderToDOM);774 configure(775 'test',776 () => [componentCExports, { default: { title: 'Component D' }, StoryFour: jest.fn() }],777 module as any778 );779 await waitForEvents([Events.SET_STORIES]);780 expect(781 mockChannel.emit.mock.calls.find((call: [string, any]) => call[0] === Events.SET_STORIES)[1]782 ).toMatchInlineSnapshot(`783 Object {784 "globalParameters": Object {},785 "globals": Object {},786 "kindParameters": Object {787 "Component C": Object {},788 "Component D": Object {},789 },790 "stories": Object {791 "component-c--story-one": Object {792 "argTypes": Object {},793 "args": Object {},794 "component": undefined,795 "componentId": "component-c",796 "id": "component-c--story-one",797 "initialArgs": Object {},798 "kind": "Component C",799 "name": "Story One",800 "parameters": Object {801 "__isArgsStory": false,802 "fileName": "exports-map-0",803 "framework": "test",804 },805 "playFunction": undefined,806 "story": "Story One",807 "subcomponents": undefined,808 "title": "Component C",809 },810 "component-c--story-two": Object {811 "argTypes": Object {},812 "args": Object {},813 "component": undefined,814 "componentId": "component-c",815 "id": "component-c--story-two",816 "initialArgs": Object {},817 "kind": "Component C",818 "name": "Story Two",819 "parameters": Object {820 "__isArgsStory": false,821 "fileName": "exports-map-0",822 "framework": "test",823 },824 "playFunction": undefined,825 "story": "Story Two",826 "subcomponents": undefined,827 "title": "Component C",828 },829 "component-d--story-four": Object {830 "argTypes": Object {},831 "args": Object {},832 "component": undefined,833 "componentId": "component-d",834 "id": "component-d--story-four",835 "initialArgs": Object {},836 "kind": "Component D",837 "name": "Story Four",838 "parameters": Object {839 "__isArgsStory": false,840 "fileName": "exports-map-1",841 "framework": "test",842 },843 "playFunction": undefined,844 "story": "Story Four",845 "subcomponents": undefined,846 "title": "Component D",847 },848 },849 "v": 2,850 }851 `);852 await waitForRender();853 mockChannel.emit.mockClear();854 disposeCallback(module.hot.data);855 configure('test', () => [componentCExports], module as any);856 await waitForEvents([Events.SET_STORIES]);857 expect(858 mockChannel.emit.mock.calls.find((call: [string, any]) => call[0] === Events.SET_STORIES)[1]859 ).toMatchInlineSnapshot(`860 Object {861 "globalParameters": Object {},862 "globals": Object {},863 "kindParameters": Object {864 "Component C": Object {},865 },866 "stories": Object {867 "component-c--story-one": Object {868 "argTypes": Object {},869 "args": Object {},870 "component": undefined,871 "componentId": "component-c",872 "id": "component-c--story-one",873 "initialArgs": Object {},874 "kind": "Component C",875 "name": "Story One",876 "parameters": Object {877 "__isArgsStory": false,878 "fileName": "exports-map-0",879 "framework": "test",880 },881 "playFunction": undefined,882 "story": "Story One",883 "subcomponents": undefined,884 "title": "Component C",885 },886 "component-c--story-two": Object {887 "argTypes": Object {},888 "args": Object {},889 "component": undefined,890 "componentId": "component-c",891 "id": "component-c--story-two",892 "initialArgs": Object {},893 "kind": "Component C",894 "name": "Story Two",895 "parameters": Object {896 "__isArgsStory": false,897 "fileName": "exports-map-0",898 "framework": "test",899 },900 "playFunction": undefined,901 "story": "Story Two",902 "subcomponents": undefined,903 "title": "Component C",904 },905 },906 "v": 2,907 }908 `);909 await waitForRender();910 });911 it('allows you to override the render function in project annotations', async () => {912 const renderToDOM = jest.fn(({ storyFn }) => storyFn());913 const frameworkRender = jest.fn();914 const { configure } = start(renderToDOM, { render: frameworkRender });915 const projectRender = jest.fn();916 setGlobalRender(projectRender);917 configure('test', () => {918 return [919 {920 default: {921 title: 'Component A',922 component: jest.fn(),923 },924 StoryOne: {},925 },926 ];927 });928 await waitForRender();929 expect(mockChannel.emit).toHaveBeenCalledWith(930 Events.STORY_RENDERED,931 'component-a--story-one'932 );933 expect(frameworkRender).not.toHaveBeenCalled();934 expect(projectRender).toHaveBeenCalled();935 });936 });937 describe('when configure is called with a combination', () => {938 it('loads and renders the first story correctly', async () => {939 const renderToDOM = jest.fn();940 const { configure, clientApi } = start(renderToDOM);941 configure('test', () => {942 clientApi943 .storiesOf('Component A', { id: 'file1' } as NodeModule)944 .add('Story One', jest.fn())945 .add('Story Two', jest.fn());946 clientApi947 .storiesOf('Component B', { id: 'file2' } as NodeModule)948 .add('Story Three', jest.fn());949 return [componentCExports];950 });951 await waitForRender();952 expect(953 mockChannel.emit.mock.calls.find((call: [string, any]) => call[0] === Events.SET_STORIES)[1]954 ).toMatchInlineSnapshot(`955 Object {956 "globalParameters": Object {},957 "globals": Object {},958 "kindParameters": Object {959 "Component A": Object {},960 "Component B": Object {},961 "Component C": Object {},962 },963 "stories": Object {964 "component-a--story-one": Object {965 "argTypes": Object {},966 "args": Object {},967 "component": undefined,968 "componentId": "component-a",969 "id": "component-a--story-one",970 "initialArgs": Object {},971 "kind": "Component A",972 "name": "Story One",973 "parameters": Object {974 "__id": "component-a--story-one",975 "__isArgsStory": false,976 "fileName": "file1",977 "framework": "test",978 },979 "playFunction": undefined,980 "story": "Story One",981 "subcomponents": undefined,982 "title": "Component A",983 },984 "component-a--story-two": Object {985 "argTypes": Object {},986 "args": Object {},987 "component": undefined,988 "componentId": "component-a",989 "id": "component-a--story-two",990 "initialArgs": Object {},991 "kind": "Component A",992 "name": "Story Two",993 "parameters": Object {994 "__id": "component-a--story-two",995 "__isArgsStory": false,996 "fileName": "file1",997 "framework": "test",998 },999 "playFunction": undefined,1000 "story": "Story Two",1001 "subcomponents": undefined,1002 "title": "Component A",1003 },1004 "component-b--story-three": Object {1005 "argTypes": Object {},1006 "args": Object {},1007 "component": undefined,1008 "componentId": "component-b",1009 "id": "component-b--story-three",1010 "initialArgs": Object {},1011 "kind": "Component B",1012 "name": "Story Three",1013 "parameters": Object {1014 "__id": "component-b--story-three",1015 "__isArgsStory": false,1016 "fileName": "file2",1017 "framework": "test",1018 },1019 "playFunction": undefined,1020 "story": "Story Three",1021 "subcomponents": undefined,1022 "title": "Component B",1023 },1024 "component-c--story-one": Object {1025 "argTypes": Object {},1026 "args": Object {},1027 "component": undefined,1028 "componentId": "component-c",1029 "id": "component-c--story-one",1030 "initialArgs": Object {},1031 "kind": "Component C",1032 "name": "Story One",1033 "parameters": Object {1034 "__isArgsStory": false,1035 "fileName": "exports-map-0",1036 "framework": "test",1037 },1038 "playFunction": undefined,1039 "story": "Story One",1040 "subcomponents": undefined,1041 "title": "Component C",1042 },1043 "component-c--story-two": Object {1044 "argTypes": Object {},1045 "args": Object {},1046 "component": undefined,1047 "componentId": "component-c",1048 "id": "component-c--story-two",1049 "initialArgs": Object {},1050 "kind": "Component C",1051 "name": "Story Two",1052 "parameters": Object {1053 "__isArgsStory": false,1054 "fileName": "exports-map-0",1055 "framework": "test",1056 },1057 "playFunction": undefined,1058 "story": "Story Two",1059 "subcomponents": undefined,1060 "title": "Component C",1061 },1062 },1063 "v": 2,1064 }1065 `);1066 await waitForRender();1067 expect(mockChannel.emit).toHaveBeenCalledWith(1068 Events.STORY_RENDERED,1069 'component-a--story-one'1070 );1071 expect(renderToDOM).toHaveBeenCalledWith(1072 expect.objectContaining({1073 id: 'component-a--story-one',1074 }),1075 'story-root'1076 );1077 });1078 });1079 // These tests need to be in here, as they require a convoluted hookup between1080 // a ClientApi and a StoryStore1081 describe('ClientApi.getStorybook', () => {1082 it('should transform the storybook to an array with filenames, empty', () => {1083 const { configure, clientApi } = start(jest.fn());1084 configure('test', () => {});1085 expect(clientApi.getStorybook()).toEqual([]);1086 });1087 it('should transform the storybook to an array with filenames, full', () => {1088 const { configure, clientApi } = start(jest.fn());1089 configure('test', () => {1090 clientApi1091 .storiesOf('kind 1', { id: 'file1' } as any)1092 .add('name 1', () => '1')1093 .add('name 2', () => '2');1094 clientApi1095 .storiesOf('kind 2', { id: 'file2' } as any)1096 .add('name 1', () => '1')1097 .add('name 2', () => '2');1098 });1099 expect(clientApi.getStorybook()).toEqual([1100 expect.objectContaining({1101 fileName: expect.any(String),1102 kind: 'kind 1',1103 stories: [1104 {1105 name: 'name 1',1106 render: expect.any(Function),1107 },1108 {1109 name: 'name 2',1110 render: expect.any(Function),1111 },1112 ],1113 }),1114 expect.objectContaining({1115 fileName: expect.any(String),1116 kind: 'kind 2',1117 stories: [1118 {1119 name: 'name 1',1120 render: expect.any(Function),1121 },1122 {1123 name: 'name 2',1124 render: expect.any(Function),1125 },1126 ],1127 }),1128 ]);1129 });1130 it('reads filename from module', async () => {1131 const { configure, clientApi } = start(jest.fn());1132 const fn = jest.fn();1133 configure('test', () => {1134 clientApi.storiesOf('kind', { id: 'foo.js' } as NodeModule).add('name', fn);1135 });1136 const storybook = clientApi.getStorybook();1137 expect(storybook).toEqual([1138 {1139 kind: 'kind',1140 fileName: 'foo.js',1141 stories: [1142 {1143 name: 'name',1144 render: expect.any(Function),1145 },1146 ],1147 },1148 ]);1149 });1150 it('should stringify ids from module', async () => {1151 const { configure, clientApi } = start(jest.fn());1152 const fn = jest.fn();1153 configure('test', () => {1154 clientApi.storiesOf('kind', { id: 1211 } as any).add('name', fn);1155 });1156 const storybook = clientApi.getStorybook();1157 expect(storybook).toEqual([1158 {1159 kind: 'kind',1160 fileName: '1211',1161 stories: [1162 {1163 name: 'name',1164 render: expect.any(Function),1165 },1166 ],1167 },1168 ]);1169 });1170 });1171 describe('auto-title', () => {1172 const componentDExports = {1173 default: {1174 component: 'Component D',1175 },1176 StoryOne: jest.fn(),1177 };1178 it('loads and renders the first story correctly', async () => {1179 const renderToDOM = jest.fn();1180 const { configure } = start(renderToDOM);1181 configure('test', () => [componentDExports]);1182 await waitForEvents([Events.SET_STORIES]);1183 expect(1184 mockChannel.emit.mock.calls.find((call: [string, any]) => call[0] === Events.SET_STORIES)[1]1185 ).toMatchInlineSnapshot(`1186 Object {1187 "globalParameters": Object {},1188 "globals": Object {},1189 "kindParameters": Object {1190 "auto-title": Object {},1191 },1192 "stories": Object {1193 "auto-title--story-one": Object {1194 "argTypes": Object {},1195 "args": Object {},1196 "component": "Component D",1197 "componentId": "auto-title",1198 "id": "auto-title--story-one",1199 "initialArgs": Object {},1200 "kind": "auto-title",1201 "name": "Story One",1202 "parameters": Object {1203 "__isArgsStory": false,1204 "fileName": "exports-map-0",1205 "framework": "test",1206 },1207 "playFunction": undefined,1208 "story": "Story One",1209 "subcomponents": undefined,1210 "title": "auto-title",1211 },1212 },1213 "v": 2,1214 }1215 `);1216 await waitForRender();1217 });1218 });...
ProjectDetailsContent.js
Source:ProjectDetailsContent.js
1import React from 'react';2import ContentItem from '../../../UI/ContentItem/ContentItem';3import ContentItemText from '../../../UI/ContentItem/ContentItemText';4import ContentItemBoxGroup from '../../../UI/ContentItem/ContentItemBoxGroup';5import ContentItemBox from '../../../UI/ContentItem/ContentItemBox';6import { AiFillHtml5 } from 'react-icons/ai';7import { DiCss3 } from 'react-icons/di';8import { SiJavascript } from 'react-icons/si';9import { SiDotNet } from 'react-icons/si';10import { FaReact } from 'react-icons/fa';11import { SiJava } from 'react-icons/si';12import { SiCsharp } from 'react-icons/si';13import { SiPython } from 'react-icons/si';14import { SiMicrosoftsqlserver } from 'react-icons/si';15import { SiFirebase } from 'react-icons/si';16import { SiBootstrap } from 'react-icons/si';17import styles from './ProjectDetailsContent.module.css';18const ProjectDetailsContent = props => {19 const { project } = props;20 const { frameworks, languages, database, sourceCode } = project;21 //Frameworks Render22 const frameworkRender = frameworks.map(item => {23 if (item.name === ".Net Core") {24 return (25 <div className={styles["icon"]} key={item.id}>26 <SiDotNet style={{fontSize: item.fontSize, color: item.color}}/>27 <p className={styles["icon__name"]}>{item.name}</p>28 </div>29 )30 }else if(item.name === "Boostrap"){31 return (32 <div className={styles["icon"]} key={item.id}>33 <SiBootstrap style={{fontSize: item.fontSize, color: item.color}}/>34 <p className={styles["icon__name"]}>{item.name}</p>35 </div>36 )37 }else if(item.name === "React.js"){38 return (39 <div className={styles["icon"]} key={item.id}>40 <FaReact style={{fontSize: item.fontSize, color: item.color}}/>41 <p className={styles["icon__name"]}>{item.name}</p>42 </div>43 )44 }else if(item.name === "React Native"){45 return (46 <div className={styles["icon"]} key={item.id}>47 <FaReact style={{fontSize: item.fontSize, color: item.color}}/>48 <p className={styles["icon__name"]}>{item.name}</p>49 </div>50 )51 }52 return (53 <div className={styles["icon"]} key={item.id}>54 <p className={styles["icon__name"]}>{item.name}</p>55 </div>56 )57 })58 //Database Render59 const databaseRender = database.map(item => {60 if(item.name === "Microsoft SQL Server"){61 return(62 <div className={styles["icon"]} key={item.id}>63 <SiMicrosoftsqlserver style={{fontSize: item.fontSize, color: item.color}}/>64 <p className={styles["icon__name"]}>{item.name}</p>65 </div>66 )67 }else if(item.name === "Firebase"){68 return (69 <div className={styles["icon"]} key={item.id}>70 <SiFirebase style={{fontSize: item.fontSize, color: item.color}}/>71 <p className={styles["icon__name"]}>{item.name}</p>72 </div>73 )74 }75 return (76 <div className={styles["icon"]} key={item.id}>77 <p className={styles["icon__name"]}>{item.name}</p>78 </div>79 )80 })81 //Languages Render82 const languagesRender = languages.map(item => {83 if(item.name === "HTML5"){84 return (85 <div className={styles["icon"]} key={item.id}>86 <AiFillHtml5 style={{fontSize: item.fontSize, color: item.color}}/>87 <p className={styles["icon__name"]}>{item.name}</p>88 </div>89 )90 }else if(item.name === "CSS3"){91 return (92 <div className={styles["icon"]} key={item.id}>93 <DiCss3 style={{fontSize: item.fontSize, color: item.color}}/>94 <p className={styles["icon__name"]}>{item.name}</p>95 </div>96 )97 }else if(item.name === "JavaScript"){98 return (99 <div className={styles["icon"]} key={item.id}>100 <SiJavascript style={{fontSize: item.fontSize, color: item.color}}/>101 <p className={styles["icon__name"]}>{item.name}</p>102 </div>103 )104 }else if(item.name === "C#"){105 return (106 <div className={styles["icon"]} key={item.id}>107 <SiCsharp style={{fontSize: item.fontSize, color: item.color}}/>108 <p className={styles["icon__name"]}>{item.name}</p>109 </div>110 )111 }else if(item.name === "Java"){112 return (113 <div className={styles["icon"]} key={item.id}>114 <SiJava style={{fontSize: item.fontSize, color: item.color}}/>115 <p className={styles["icon__name"]}>{item.name}</p>116 </div>117 )118 }else if(item.name === "Python"){119 return (120 <div className={styles["icon"]} key={item.id}>121 <SiPython style={{fontSize: item.fontSize, color: item.color}}/>122 <p className={styles["icon__name"]}>{item.name}</p>123 </div>124 )125 }126 return (127 <div className={styles["icon"]} key={item.id}>128 <p className={styles["icon__name"]}>{item.name}</p>129 </div>130 )131 })132 //Source Code Render133 const sourceCodeRender = sourceCode === "private" ? <p className={styles["source-code"]} style={{color: "red"}}>- {sourceCode} -</p> : 134 <p className={styles["source-code"]} style={{color: "#2980B9"}}>- {sourceCode} -</p>135 return (136 <div className={styles["project-details-content"]}>137 <ContentItem title="Description">138 <ContentItemText>{project.description}</ContentItemText>139 </ContentItem>140 <ContentItem title="Skills Set Used">141 <ContentItemBoxGroup>142 <ContentItemBox classNameBox="small" classNameTitle="style-01" title="Frameworks">143 <div className={styles["group-icons"]}>{frameworkRender}</div>144 </ContentItemBox>145 <ContentItemBox classNameBox="small" classNameTitle="style-01" title="Database">146 <div className={styles["group-icons"]}>{databaseRender}</div>147 </ContentItemBox>148 <ContentItemBox classNameBox="big" classNameTitle="style-01" title="Languages">149 <div className={styles["group-icons"]}>{languagesRender}</div>150 </ContentItemBox>151 </ContentItemBoxGroup>152 </ContentItem>153 <ContentItem title="Source Code">154 {sourceCodeRender}155 </ContentItem>156 </div>157 );158}...
Using AI Code Generation
1import { frameworkRender } from 'storybook-root-decorator';2import { storiesOf } from '@storybook/react';3import { withInfo } from '@storybook/addon-info';4import { withKnobs } from '@storybook/addon-knobs';5import { withA11y } from '@storybook/addon-a11y';6import { withTests } from '@storybook/addon-jest';7import { MyComponent } from './MyComponent';8import results from '../.jest-test-results.json';9storiesOf('MyComponent', module)10 .addDecorator(frameworkRender())11 .addDecorator(withInfo)12 .addDecorator(withKnobs)13 .addDecorator(withA11y)14 .addDecorator(withTests({ results }))15 .add('default', () => <MyComponent />);
Using AI Code Generation
1import { configure, addDecorator } from '@storybook/react';2import { withRootDecorator } from 'storybook-root-decorator';3import { withConsole } from '@storybook/addon-console';4import { withA11y } from '@storybook/addon-a11y';5import { withInfo } from '@storybook/addon-info';6import { withKnobs } from '@storybook/addon-knobs';7import { withOptions } from '@storybook/addon-options';8import { withViewport } from '@storybook/addon-viewport';9addDecorator(10 withOptions({11 })12);13addDecorator(14 withRootDecorator({15 frameworkRender: (storyFn) => {16 },17 })18);19addDecorator((storyFn, context) => withConsole()(storyFn)(context));20addDecorator(withA11y);21addDecorator(withInfo);22addDecorator(withKnobs);23addDecorator(withViewport);24configure(require.context('../src', true, /\.stories\.js$/), module);25export const parameters = {26 options: {27 },28};29import { addons } from '@storybook/addons';30import { themes } from '@storybook/theming';31import { create } from '@storybook/theming/create';32addons.setConfig({33 theme: create({34 }),35});36module.exports = {37 module: {38 {39 },40 },41};42module.exports = {43 module: {44 {45 },46 },47};48import React from 'react';49import { storiesOf } from '@storybook/react';50import { with
Using AI Code Generation
1import { frameworkRender } from 'storybook-root-provider';2import { stories } from './stories';3frameworkRender(stories);4import { storiesOf } from '@storybook/react';5import { withKnobs, text } from '@storybook/addon-knobs';6import { withReadme } from 'storybook-readme';7import { withTests } from '@storybook/addon-jest';8import results from '../.jest-test-results.json';9import readme from './README.md';10import Component from './Component';11import { withProvider } from 'storybook-addon-redux';12import { withProvider as withProvider2 } from 'storybook-root-provider';13import { Provider } from 'react-redux';14import { store } from './store';15const stories = storiesOf('Component', module);16stories.addDecorator(withKnobs);17stories.addDecorator(withReadme(readme));18stories.addDecorator(withTests({ results }));19stories.addDecorator(withProvider2(Provider, store));20stories.add('Component', () => <Component value={text('value', 'test')} />);21export { stories };22import { addDecorator } from '@storybook/react';23import { withProvider } from 'storybook-root-provider';24addDecorator(withProvider);25const path = require('path');26module.exports = async ({ config, mode }) => {27 config.resolve.alias = {28 'storybook-root-provider': path.resolve(__dirname, '../src'),29 };30 return config;31};32import 'storybook-root-provider/register';33import { addDecorator } from '@storybook/react';34import { withProvider } from 'storybook-root-provider';35addDecorator(withProvider);36import { addons } from '@storybook/addons';37import { withProvider } from 'storybook-root-provider';38addons.setConfig({
Using AI Code Generation
1import { frameworkRender } from 'storybook-root-renderer';2import { MyComponent } from './MyComponent';3frameworkRender(MyComponent, { title: 'My Title' });4import { render } from 'react-dom';5import React from 'react';6import { App } from './App';7export const frameworkRender = (Component, props) => {8 render(<Component {...props} />, document.getElementById('root'));9};10import React from 'react';11export const App = (props) => {12 return <div>{props.title}</div>;13};14import React from 'react';15import { MyComponent } from './MyComponent';16export default {17};18export const MyComponentStory = () => <MyComponent title="My Title" />;19import { addDecorator } from '@storybook/react';20import { withRootRenderer } from 'storybook-root-renderer';21import { frameworkRender } from '../storybook-root-renderer';22addDecorator(withRootRenderer(frameworkRender));23import { frameworkRender } from 'storybook-root-renderer';24import { MyComponent } from './MyComponent';
Automation Testing Tutorials
Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.
LambdaTest Learning Hubs:
- JUnit Tutorial
- TestNG Tutorial
- Webdriver Tutorial
- WebDriverIO Tutorial
- Protractor Tutorial
- Selenium 4 Tutorial
- Jenkins Tutorial
- NUnit Tutorial
- Jest Tutorial
- Playwright Tutorial
- Cypress Tutorial
- PyTest Tutorial
YouTube
You could also refer to video tutorials over LambdaTest YouTube channel to get step by step demonstration from industry experts.
Run storybook-root automation tests on LambdaTest cloud grid
Perform automation testing on 3000+ real desktop and mobile devices online.
Try LambdaTest Now !!
Get 100 minutes of automation test minutes FREE!!
Was this article helpful?
