Test your AI Agents with the all-new Agent to Agent Testing Platform.Learn More

How to use storiesOfData method in storybook-root

Best JavaScript code snippet using storybook-root

start.test.ts

Source:start.test.ts

1import Events from '@storybook/core-events';2import {3  waitForRender,4  waitForEvents,5  emitter,6  mockChannel,7} from '@storybook/preview-web/dist/cjs/PreviewWeb.mockdata';8import { start } from './start';9jest.mock('@storybook/preview-web/dist/cjs/WebView');10jest.mock('global', () => ({11  // @ts-ignore12  ...jest.requireActual('global'),13  history: { replaceState: jest.fn() },14  document: {15    location: {16      pathname: 'pathname',17      search: '?id=*',18    },19  },20  FEATURES: {21    breakingChangesV7: true,22  },23}));24jest.mock('@storybook/channel-postmessage', () => () => mockChannel);25jest.mock('react-dom');26// for the auto-title test27jest.mock('@storybook/store', () => {28  const actualStore = jest.requireActual('@storybook/store');29  return {30    ...actualStore,31    autoTitle: () => 'auto-title',32  };33});34beforeEach(() => {35  mockChannel.emit.mockClear();36  // Preview doesn't clean itself up as it isn't designed to ever be stopped :shrug:37  emitter.removeAllListeners();38});39describe('start', () => {40  describe('when configure is called with storiesOf only', () => {41    it('loads and renders the first story correctly', async () => {42      const render = jest.fn();43      const { configure, clientApi } = start(render);44      configure('test', () => {45        clientApi46          .storiesOf('Component A', { id: 'file1' } as NodeModule)47          .add('Story One', jest.fn())48          .add('Story Two', jest.fn());49        clientApi50          .storiesOf('Component B', { id: 'file2' } as NodeModule)51          .add('Story Three', jest.fn());52      });53      await waitForRender();54      expect(55        mockChannel.emit.mock.calls.find((call: [string, any]) => call[0] === Events.SET_STORIES)[1]56      ).toMatchInlineSnapshot(`57        Object {58          "globalParameters": Object {},59          "globals": Object {},60          "kindParameters": Object {61            "Component A": Object {},62            "Component B": Object {},63          },64          "stories": Object {65            "component-a--story-one": Object {66              "argTypes": Object {},67              "args": Object {},68              "component": undefined,69              "componentId": "component-a",70              "id": "component-a--story-one",71              "initialArgs": Object {},72              "kind": "Component A",73              "name": "Story One",74              "parameters": Object {75                "__id": "component-a--story-one",76                "__isArgsStory": false,77                "fileName": "file1",78                "framework": "test",79              },80              "playFunction": undefined,81              "story": "Story One",82              "subcomponents": undefined,83              "title": "Component A",84            },85            "component-a--story-two": Object {86              "argTypes": Object {},87              "args": Object {},88              "component": undefined,89              "componentId": "component-a",90              "id": "component-a--story-two",91              "initialArgs": Object {},92              "kind": "Component A",93              "name": "Story Two",94              "parameters": Object {95                "__id": "component-a--story-two",96                "__isArgsStory": false,97                "fileName": "file1",98                "framework": "test",99              },100              "playFunction": undefined,101              "story": "Story Two",102              "subcomponents": undefined,103              "title": "Component A",104            },105            "component-b--story-three": Object {106              "argTypes": Object {},107              "args": Object {},108              "component": undefined,109              "componentId": "component-b",110              "id": "component-b--story-three",111              "initialArgs": Object {},112              "kind": "Component B",113              "name": "Story Three",114              "parameters": Object {115                "__id": "component-b--story-three",116                "__isArgsStory": false,117                "fileName": "file2",118                "framework": "test",119              },120              "playFunction": undefined,121              "story": "Story Three",122              "subcomponents": undefined,123              "title": "Component B",124            },125          },126          "v": 2,127        }128      `);129      await waitForRender();130      expect(mockChannel.emit).toHaveBeenCalledWith(131        Events.STORY_RENDERED,132        'component-a--story-one'133      );134      expect(render).toHaveBeenCalledWith(135        expect.objectContaining({136          id: 'component-a--story-one',137        }),138        undefined139      );140    });141    it('sends over docs only stories', async () => {142      const render = jest.fn();143      const { configure, clientApi } = start(render);144      configure('test', () => {145        clientApi146          .storiesOf('Component A', { id: 'file1' } as NodeModule)147          .add('Story One', jest.fn(), { docsOnly: true, docs: {} });148      });149      await waitForEvents([Events.SET_STORIES]);150      expect(151        mockChannel.emit.mock.calls.find((call: [string, any]) => call[0] === Events.SET_STORIES)[1]152      ).toMatchInlineSnapshot(`153        Object {154          "globalParameters": Object {},155          "globals": Object {},156          "kindParameters": Object {157            "Component A": Object {},158          },159          "stories": Object {160            "component-a--story-one": Object {161              "argTypes": Object {},162              "args": Object {},163              "component": undefined,164              "componentId": "component-a",165              "id": "component-a--story-one",166              "initialArgs": Object {},167              "kind": "Component A",168              "name": "Story One",169              "parameters": Object {170                "__id": "component-a--story-one",171                "__isArgsStory": false,172                "docs": Object {},173                "docsOnly": true,174                "fileName": "file1",175                "framework": "test",176              },177              "playFunction": undefined,178              "story": "Story One",179              "subcomponents": undefined,180              "title": "Component A",181            },182          },183          "v": 2,184        }185      `);186    });187    it('deals with stories with "default" name', async () => {188      const render = jest.fn();189      const { configure, clientApi } = start(render);190      configure('test', () => {191        clientApi.storiesOf('Component A', { id: 'file1' } as NodeModule).add('default', jest.fn());192      });193      await waitForRender();194      expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_RENDERED, 'component-a--default');195    });196    it('deals with stories with camel-cased names', async () => {197      const render = jest.fn();198      const { configure, clientApi } = start(render);199      configure('test', () => {200        clientApi201          .storiesOf('Component A', { id: 'file1' } as NodeModule)202          .add('storyOne', jest.fn());203      });204      await waitForRender();205      expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_RENDERED, 'component-a--storyone');206    });207    it('deals with stories with spaces in the name', async () => {208      const render = jest.fn();209      const { configure, clientApi } = start(render);210      configure('test', () => {211        clientApi212          .storiesOf('Component A', { id: 'file1' } as NodeModule)213          .add('Story One', jest.fn());214      });215      await waitForRender();216      expect(mockChannel.emit).toHaveBeenCalledWith(217        Events.STORY_RENDERED,218        'component-a--story-one'219      );220    });221    // https://github.com/storybookjs/storybook/issues/16303222    it('deals with stories with numeric names', async () => {223      const render = jest.fn();224      const { configure, clientApi } = start(render);225      configure('test', () => {226        clientApi.storiesOf('Component A', { id: 'file1' } as NodeModule).add('story0', jest.fn());227      });228      await waitForRender();229      expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_RENDERED, 'component-a--story0');230    });231    it('deals with storiesOf from the same file twice', async () => {232      const render = jest.fn();233      const { configure, clientApi } = start(render);234      configure('test', () => {235        clientApi.storiesOf('Component A', { id: 'file1' } as NodeModule).add('default', jest.fn());236        clientApi.storiesOf('Component B', { id: 'file1' } as NodeModule).add('default', jest.fn());237        clientApi.storiesOf('Component C', { id: 'file1' } as NodeModule).add('default', jest.fn());238      });239      await waitForRender();240      expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_RENDERED, 'component-a--default');241      const storiesOfData = mockChannel.emit.mock.calls.find(242        (call: [string, any]) => call[0] === Events.SET_STORIES243      )[1];244      expect(Object.values(storiesOfData.stories).map((s: any) => s.parameters.fileName)).toEqual([245        'file1',246        'file1-2',247        'file1-3',248      ]);249    });250    it('allows global metadata via client-api', async () => {251      const render = jest.fn(({ storyFn }) => storyFn());252      const { configure, clientApi } = start(render);253      const loader = jest.fn(async () => ({ val: 'loaded' }));254      const decorator = jest.fn();255      configure('test', () => {256        clientApi.addLoader(loader);257        clientApi.addDecorator(decorator);258        clientApi.addParameters({ param: 'global' });259        clientApi.storiesOf('Component A', { id: 'file1' } as NodeModule).add('default', jest.fn());260      });261      await waitForRender();262      expect(loader).toHaveBeenCalled();263      expect(decorator).toHaveBeenCalled();264      expect(render).toHaveBeenCalledWith(265        expect.objectContaining({266          storyContext: expect.objectContaining({267            parameters: expect.objectContaining({268              framework: 'test',269              param: 'global',270            }),271          }),272        }),273        undefined274      );275    });276    it('allows setting compomnent/args/argTypes via a parameter', async () => {277      const render = jest.fn(({ storyFn }) => storyFn());278      const { configure, clientApi } = start(render);279      const component = {};280      configure('test', () => {281        clientApi282          .storiesOf('Component A', { id: 'file1' } as NodeModule)283          .addParameters({284            component,285            args: { a: 'a' },286            argTypes: { a: { type: 'string' } },287          })288          .add('default', jest.fn(), {289            args: { b: 'b' },290            argTypes: { b: { type: 'string' } },291          });292      });293      await waitForRender();294      expect(render).toHaveBeenCalledWith(295        expect.objectContaining({296          storyContext: expect.objectContaining({297            component,298            args: { a: 'a', b: 'b' },299            argTypes: {300              a: { name: 'a', type: { name: 'string' } },301              b: { name: 'b', type: { name: 'string' } },302            },303          }),304        }),305        undefined306      );307    });308    it('supports forceRerender()', async () => {309      const render = jest.fn(({ storyFn }) => storyFn());310      const { configure, clientApi, forceReRender } = start(render);311      configure('test', () => {312        clientApi.storiesOf('Component A', { id: 'file1' } as NodeModule).add('default', jest.fn());313      });314      await waitForRender();315      expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_RENDERED, 'component-a--default');316      mockChannel.emit.mockClear();317      forceReRender();318      await waitForRender();319      expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_RENDERED, 'component-a--default');320    });321    it('supports HMR when a story file changes', async () => {322      const render = jest.fn(({ storyFn }) => storyFn());323      const { configure, clientApi, forceReRender } = start(render);324      let disposeCallback: () => void;325      const module = {326        id: 'file1',327        hot: {328          accept: jest.fn(),329          dispose(cb: () => void) {330            disposeCallback = cb;331          },332        },333      };334      const firstImplementation = jest.fn();335      configure('test', () => {336        clientApi.storiesOf('Component A', module as any).add('default', firstImplementation);337      });338      await waitForRender();339      expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_RENDERED, 'component-a--default');340      expect(firstImplementation).toHaveBeenCalled();341      expect(module.hot.accept).toHaveBeenCalled();342      expect(disposeCallback).toBeDefined();343      mockChannel.emit.mockClear();344      disposeCallback();345      const secondImplementation = jest.fn();346      clientApi.storiesOf('Component A', module as any).add('default', secondImplementation);347      await waitForRender();348      expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_RENDERED, 'component-a--default');349      expect(secondImplementation).toHaveBeenCalled();350    });351    it('re-emits SET_STORIES when a story is added', async () => {352      const render = jest.fn(({ storyFn }) => storyFn());353      const { configure, clientApi, forceReRender } = start(render);354      let disposeCallback: () => void;355      const module = {356        id: 'file1',357        hot: {358          accept: jest.fn(),359          dispose(cb: () => void) {360            disposeCallback = cb;361          },362        },363      };364      configure('test', () => {365        clientApi.storiesOf('Component A', module as any).add('default', jest.fn());366      });367      await waitForRender();368      mockChannel.emit.mockClear();369      disposeCallback();370      clientApi371        .storiesOf('Component A', module as any)372        .add('default', jest.fn())373        .add('new', jest.fn());374      await waitForEvents([Events.SET_STORIES]);375      expect(376        mockChannel.emit.mock.calls.find((call: [string, any]) => call[0] === Events.SET_STORIES)[1]377      ).toMatchInlineSnapshot(`378        Object {379          "globalParameters": Object {},380          "globals": Object {},381          "kindParameters": Object {382            "Component A": Object {},383          },384          "stories": Object {385            "component-a--default": Object {386              "argTypes": Object {},387              "args": Object {},388              "component": undefined,389              "componentId": "component-a",390              "id": "component-a--default",391              "initialArgs": Object {},392              "kind": "Component A",393              "name": "default",394              "parameters": Object {395                "__id": "component-a--default",396                "__isArgsStory": false,397                "fileName": "file1",398                "framework": "test",399              },400              "playFunction": undefined,401              "story": "default",402              "subcomponents": undefined,403              "title": "Component A",404            },405            "component-a--new": Object {406              "argTypes": Object {},407              "args": Object {},408              "component": undefined,409              "componentId": "component-a",410              "id": "component-a--new",411              "initialArgs": Object {},412              "kind": "Component A",413              "name": "new",414              "parameters": Object {415                "__id": "component-a--new",416                "__isArgsStory": false,417                "fileName": "file1",418                "framework": "test",419              },420              "playFunction": undefined,421              "story": "new",422              "subcomponents": undefined,423              "title": "Component A",424            },425          },426          "v": 2,427        }428      `);429    });430    it('re-emits SET_STORIES when a story file is removed', async () => {431      const render = jest.fn(({ storyFn }) => storyFn());432      const { configure, clientApi, forceReRender } = start(render);433      let disposeCallback: () => void;434      const moduleB = {435        id: 'file2',436        hot: {437          accept: jest.fn(),438          dispose(cb: () => void) {439            disposeCallback = cb;440          },441        },442      };443      configure('test', () => {444        clientApi.storiesOf('Component A', { id: 'file1' } as any).add('default', jest.fn());445        clientApi.storiesOf('Component B', moduleB as any).add('default', jest.fn());446      });447      await waitForEvents([Events.SET_STORIES]);448      expect(449        mockChannel.emit.mock.calls.find((call: [string, any]) => call[0] === Events.SET_STORIES)[1]450      ).toMatchInlineSnapshot(`451        Object {452          "globalParameters": Object {},453          "globals": Object {},454          "kindParameters": Object {455            "Component A": Object {},456            "Component B": Object {},457          },458          "stories": Object {459            "component-a--default": Object {460              "argTypes": Object {},461              "args": Object {},462              "component": undefined,463              "componentId": "component-a",464              "id": "component-a--default",465              "initialArgs": Object {},466              "kind": "Component A",467              "name": "default",468              "parameters": Object {469                "__id": "component-a--default",470                "__isArgsStory": false,471                "fileName": "file1",472                "framework": "test",473              },474              "playFunction": undefined,475              "story": "default",476              "subcomponents": undefined,477              "title": "Component A",478            },479            "component-b--default": Object {480              "argTypes": Object {},481              "args": Object {},482              "component": undefined,483              "componentId": "component-b",484              "id": "component-b--default",485              "initialArgs": Object {},486              "kind": "Component B",487              "name": "default",488              "parameters": Object {489                "__id": "component-b--default",490                "__isArgsStory": false,491                "fileName": "file2",492                "framework": "test",493              },494              "playFunction": undefined,495              "story": "default",496              "subcomponents": undefined,497              "title": "Component B",498            },499          },500          "v": 2,501        }502      `);503      mockChannel.emit.mockClear();504      disposeCallback();505      await waitForEvents([Events.SET_STORIES]);506      expect(507        mockChannel.emit.mock.calls.find((call: [string, any]) => call[0] === Events.SET_STORIES)[1]508      ).toMatchInlineSnapshot(`509        Object {510          "globalParameters": Object {},511          "globals": Object {},512          "kindParameters": Object {513            "Component A": Object {},514          },515          "stories": Object {516            "component-a--default": Object {517              "argTypes": Object {},518              "args": Object {},519              "component": undefined,520              "componentId": "component-a",521              "id": "component-a--default",522              "initialArgs": Object {},523              "kind": "Component A",524              "name": "default",525              "parameters": Object {526                "__id": "component-a--default",527                "__isArgsStory": false,528                "fileName": "file1",529                "framework": "test",530              },531              "playFunction": undefined,532              "story": "default",533              "subcomponents": undefined,534              "title": "Component A",535            },536          },537          "v": 2,538        }539      `);540    });541  });542  const componentCExports = {543    default: {544      title: 'Component C',545    },546    StoryOne: jest.fn(),547    StoryTwo: jest.fn(),548  };549  describe('when configure is called with CSF only', () => {550    it('loads and renders the first story correctly', async () => {551      const render = jest.fn();552      const { configure } = start(render);553      configure('test', () => [componentCExports]);554      await waitForRender();555      expect(556        mockChannel.emit.mock.calls.find((call: [string, any]) => call[0] === Events.SET_STORIES)[1]557      ).toMatchInlineSnapshot(`558        Object {559          "globalParameters": Object {},560          "globals": Object {},561          "kindParameters": Object {562            "Component C": Object {},563          },564          "stories": Object {565            "component-c--story-one": Object {566              "argTypes": Object {},567              "args": Object {},568              "component": undefined,569              "componentId": "component-c",570              "id": "component-c--story-one",571              "initialArgs": Object {},572              "kind": "Component C",573              "name": "Story One",574              "parameters": Object {575                "__isArgsStory": false,576                "fileName": "exports-map-0",577                "framework": "test",578              },579              "playFunction": undefined,580              "story": "Story One",581              "subcomponents": undefined,582              "title": "Component C",583            },584            "component-c--story-two": Object {585              "argTypes": Object {},586              "args": Object {},587              "component": undefined,588              "componentId": "component-c",589              "id": "component-c--story-two",590              "initialArgs": Object {},591              "kind": "Component C",592              "name": "Story Two",593              "parameters": Object {594                "__isArgsStory": false,595                "fileName": "exports-map-0",596                "framework": "test",597              },598              "playFunction": undefined,599              "story": "Story Two",600              "subcomponents": undefined,601              "title": "Component C",602            },603          },604          "v": 2,605        }606      `);607      await waitForRender();608      expect(mockChannel.emit).toHaveBeenCalledWith(609        Events.STORY_RENDERED,610        'component-c--story-one'611      );612      expect(render).toHaveBeenCalledWith(613        expect.objectContaining({614          id: 'component-c--story-one',615        }),616        undefined617      );618    });619    it('supports HMR when a story file changes', async () => {620      const render = jest.fn(({ storyFn }) => storyFn());621      let disposeCallback: (data: object) => void;622      const module = {623        id: 'file1',624        hot: {625          data: {},626          accept: jest.fn(),627          dispose(cb: () => void) {628            disposeCallback = cb;629          },630        },631      };632      const { configure } = start(render);633      configure('test', () => [componentCExports], module as any);634      await waitForRender();635      expect(mockChannel.emit).toHaveBeenCalledWith(636        Events.STORY_RENDERED,637        'component-c--story-one'638      );639      expect(componentCExports.StoryOne).toHaveBeenCalled();640      expect(module.hot.accept).toHaveBeenCalled();641      expect(disposeCallback).toBeDefined();642      mockChannel.emit.mockClear();643      disposeCallback(module.hot.data);644      const secondImplementation = jest.fn();645      configure(646        'test',647        () => [{ ...componentCExports, StoryOne: secondImplementation }],648        module as any649      );650      await waitForRender();651      expect(mockChannel.emit).toHaveBeenCalledWith(652        Events.STORY_RENDERED,653        'component-c--story-one'654      );655      expect(secondImplementation).toHaveBeenCalled();656    });657    it('re-emits SET_STORIES when a story is added', async () => {658      const render = jest.fn(({ storyFn }) => storyFn());659      let disposeCallback: (data: object) => void;660      const module = {661        id: 'file1',662        hot: {663          data: {},664          accept: jest.fn(),665          dispose(cb: () => void) {666            disposeCallback = cb;667          },668        },669      };670      const { configure } = start(render);671      configure('test', () => [componentCExports], module as any);672      await waitForRender();673      mockChannel.emit.mockClear();674      disposeCallback(module.hot.data);675      configure('test', () => [{ ...componentCExports, StoryThree: jest.fn() }], module as any);676      await waitForEvents([Events.SET_STORIES]);677      expect(678        mockChannel.emit.mock.calls.find((call: [string, any]) => call[0] === Events.SET_STORIES)[1]679      ).toMatchInlineSnapshot(`680        Object {681          "globalParameters": Object {},682          "globals": Object {},683          "kindParameters": Object {684            "Component C": Object {},685          },686          "stories": Object {687            "component-c--story-one": Object {688              "argTypes": Object {},689              "args": Object {},690              "component": undefined,691              "componentId": "component-c",692              "id": "component-c--story-one",693              "initialArgs": Object {},694              "kind": "Component C",695              "name": "Story One",696              "parameters": Object {697                "__isArgsStory": false,698                "fileName": "exports-map-0",699                "framework": "test",700              },701              "playFunction": undefined,702              "story": "Story One",703              "subcomponents": undefined,704              "title": "Component C",705            },706            "component-c--story-three": Object {707              "argTypes": Object {},708              "args": Object {},709              "component": undefined,710              "componentId": "component-c",711              "id": "component-c--story-three",712              "initialArgs": Object {},713              "kind": "Component C",714              "name": "Story Three",715              "parameters": Object {716                "__isArgsStory": false,717                "fileName": "exports-map-0",718                "framework": "test",719              },720              "playFunction": undefined,721              "story": "Story Three",722              "subcomponents": undefined,723              "title": "Component C",724            },725            "component-c--story-two": Object {726              "argTypes": Object {},727              "args": Object {},728              "component": undefined,729              "componentId": "component-c",730              "id": "component-c--story-two",731              "initialArgs": Object {},732              "kind": "Component C",733              "name": "Story Two",734              "parameters": Object {735                "__isArgsStory": false,736                "fileName": "exports-map-0",737                "framework": "test",738              },739              "playFunction": undefined,740              "story": "Story Two",741              "subcomponents": undefined,742              "title": "Component C",743            },744          },745          "v": 2,746        }747      `);748    });749    it('re-emits SET_STORIES when a story file is removed', async () => {750      const render = jest.fn(({ storyFn }) => storyFn());751      let disposeCallback: (data: object) => void;752      const module = {753        id: 'file1',754        hot: {755          data: {},756          accept: jest.fn(),757          dispose(cb: () => void) {758            disposeCallback = cb;759          },760        },761      };762      const { configure } = start(render);763      configure(764        'test',765        () => [componentCExports, { default: { title: 'Component D' }, StoryFour: jest.fn() }],766        module as any767      );768      await waitForEvents([Events.SET_STORIES]);769      expect(770        mockChannel.emit.mock.calls.find((call: [string, any]) => call[0] === Events.SET_STORIES)[1]771      ).toMatchInlineSnapshot(`772        Object {773          "globalParameters": Object {},774          "globals": Object {},775          "kindParameters": Object {776            "Component C": Object {},777            "Component D": Object {},778          },779          "stories": Object {780            "component-c--story-one": Object {781              "argTypes": Object {},782              "args": Object {},783              "component": undefined,784              "componentId": "component-c",785              "id": "component-c--story-one",786              "initialArgs": Object {},787              "kind": "Component C",788              "name": "Story One",789              "parameters": Object {790                "__isArgsStory": false,791                "fileName": "exports-map-0",792                "framework": "test",793              },794              "playFunction": undefined,795              "story": "Story One",796              "subcomponents": undefined,797              "title": "Component C",798            },799            "component-c--story-two": Object {800              "argTypes": Object {},801              "args": Object {},802              "component": undefined,803              "componentId": "component-c",804              "id": "component-c--story-two",805              "initialArgs": Object {},806              "kind": "Component C",807              "name": "Story Two",808              "parameters": Object {809                "__isArgsStory": false,810                "fileName": "exports-map-0",811                "framework": "test",812              },813              "playFunction": undefined,814              "story": "Story Two",815              "subcomponents": undefined,816              "title": "Component C",817            },818            "component-d--story-four": Object {819              "argTypes": Object {},820              "args": Object {},821              "component": undefined,822              "componentId": "component-d",823              "id": "component-d--story-four",824              "initialArgs": Object {},825              "kind": "Component D",826              "name": "Story Four",827              "parameters": Object {828                "__isArgsStory": false,829                "fileName": "exports-map-1",830                "framework": "test",831              },832              "playFunction": undefined,833              "story": "Story Four",834              "subcomponents": undefined,835              "title": "Component D",836            },837          },838          "v": 2,839        }840      `);841      mockChannel.emit.mockClear();842      disposeCallback(module.hot.data);843      configure('test', () => [componentCExports], module as any);844      await waitForEvents([Events.SET_STORIES]);845      expect(846        mockChannel.emit.mock.calls.find((call: [string, any]) => call[0] === Events.SET_STORIES)[1]847      ).toMatchInlineSnapshot(`848        Object {849          "globalParameters": Object {},850          "globals": Object {},851          "kindParameters": Object {852            "Component C": Object {},853          },854          "stories": Object {855            "component-c--story-one": Object {856              "argTypes": Object {},857              "args": Object {},858              "component": undefined,859              "componentId": "component-c",860              "id": "component-c--story-one",861              "initialArgs": Object {},862              "kind": "Component C",863              "name": "Story One",864              "parameters": Object {865                "__isArgsStory": false,866                "fileName": "exports-map-0",867                "framework": "test",868              },869              "playFunction": undefined,870              "story": "Story One",871              "subcomponents": undefined,872              "title": "Component C",873            },874            "component-c--story-two": Object {875              "argTypes": Object {},876              "args": Object {},877              "component": undefined,878              "componentId": "component-c",879              "id": "component-c--story-two",880              "initialArgs": Object {},881              "kind": "Component C",882              "name": "Story Two",883              "parameters": Object {884                "__isArgsStory": false,885                "fileName": "exports-map-0",886                "framework": "test",887              },888              "playFunction": undefined,889              "story": "Story Two",890              "subcomponents": undefined,891              "title": "Component C",892            },893          },894          "v": 2,895        }896      `);897    });898  });899  describe('when configure is called with a combination', () => {900    it('loads and renders the first story correctly', async () => {901      const render = jest.fn();902      const { configure, clientApi } = start(render);903      configure('test', () => {904        clientApi905          .storiesOf('Component A', { id: 'file1' } as NodeModule)906          .add('Story One', jest.fn())907          .add('Story Two', jest.fn());908        clientApi909          .storiesOf('Component B', { id: 'file2' } as NodeModule)910          .add('Story Three', jest.fn());911        return [componentCExports];912      });913      await waitForRender();914      expect(915        mockChannel.emit.mock.calls.find((call: [string, any]) => call[0] === Events.SET_STORIES)[1]916      ).toMatchInlineSnapshot(`917        Object {918          "globalParameters": Object {},919          "globals": Object {},920          "kindParameters": Object {921            "Component A": Object {},922            "Component B": Object {},923            "Component C": Object {},924          },925          "stories": Object {926            "component-a--story-one": Object {927              "argTypes": Object {},928              "args": Object {},929              "component": undefined,930              "componentId": "component-a",931              "id": "component-a--story-one",932              "initialArgs": Object {},933              "kind": "Component A",934              "name": "Story One",935              "parameters": Object {936                "__id": "component-a--story-one",937                "__isArgsStory": false,938                "fileName": "file1",939                "framework": "test",940              },941              "playFunction": undefined,942              "story": "Story One",943              "subcomponents": undefined,944              "title": "Component A",945            },946            "component-a--story-two": Object {947              "argTypes": Object {},948              "args": Object {},949              "component": undefined,950              "componentId": "component-a",951              "id": "component-a--story-two",952              "initialArgs": Object {},953              "kind": "Component A",954              "name": "Story Two",955              "parameters": Object {956                "__id": "component-a--story-two",957                "__isArgsStory": false,958                "fileName": "file1",959                "framework": "test",960              },961              "playFunction": undefined,962              "story": "Story Two",963              "subcomponents": undefined,964              "title": "Component A",965            },966            "component-b--story-three": Object {967              "argTypes": Object {},968              "args": Object {},969              "component": undefined,970              "componentId": "component-b",971              "id": "component-b--story-three",972              "initialArgs": Object {},973              "kind": "Component B",974              "name": "Story Three",975              "parameters": Object {976                "__id": "component-b--story-three",977                "__isArgsStory": false,978                "fileName": "file2",979                "framework": "test",980              },981              "playFunction": undefined,982              "story": "Story Three",983              "subcomponents": undefined,984              "title": "Component B",985            },986            "component-c--story-one": Object {987              "argTypes": Object {},988              "args": Object {},989              "component": undefined,990              "componentId": "component-c",991              "id": "component-c--story-one",992              "initialArgs": Object {},993              "kind": "Component C",994              "name": "Story One",995              "parameters": Object {996                "__isArgsStory": false,997                "fileName": "exports-map-0",998                "framework": "test",999              },1000              "playFunction": undefined,1001              "story": "Story One",1002              "subcomponents": undefined,1003              "title": "Component C",1004            },1005            "component-c--story-two": Object {1006              "argTypes": Object {},1007              "args": Object {},1008              "component": undefined,1009              "componentId": "component-c",1010              "id": "component-c--story-two",1011              "initialArgs": Object {},1012              "kind": "Component C",1013              "name": "Story Two",1014              "parameters": Object {1015                "__isArgsStory": false,1016                "fileName": "exports-map-0",1017                "framework": "test",1018              },1019              "playFunction": undefined,1020              "story": "Story Two",1021              "subcomponents": undefined,1022              "title": "Component C",1023            },1024          },1025          "v": 2,1026        }1027      `);1028      await waitForRender();1029      expect(mockChannel.emit).toHaveBeenCalledWith(1030        Events.STORY_RENDERED,1031        'component-a--story-one'1032      );1033      expect(render).toHaveBeenCalledWith(1034        expect.objectContaining({1035          id: 'component-a--story-one',1036        }),1037        undefined1038      );1039    });1040  });1041  // These tests need to be in here, as they require a convoluted hookup between1042  // a ClientApi and a StoryStore1043  describe('ClientApi.getStorybook', () => {1044    it('should transform the storybook to an array with filenames, empty', () => {1045      const { configure, clientApi } = start(jest.fn());1046      configure('test', () => {});1047      expect(clientApi.getStorybook()).toEqual([]);1048    });1049    it('should transform the storybook to an array with filenames, full', () => {1050      const { configure, clientApi } = start(jest.fn());1051      configure('test', () => {1052        clientApi1053          .storiesOf('kind 1', { id: 'file1' } as any)1054          .add('name 1', () => '1')1055          .add('name 2', () => '2');1056        clientApi1057          .storiesOf('kind 2', { id: 'file2' } as any)1058          .add('name 1', () => '1')1059          .add('name 2', () => '2');1060      });1061      expect(clientApi.getStorybook()).toEqual([1062        expect.objectContaining({1063          fileName: expect.any(String),1064          kind: 'kind 1',1065          stories: [1066            {1067              name: 'name 1',1068              render: expect.any(Function),1069            },1070            {1071              name: 'name 2',1072              render: expect.any(Function),1073            },1074          ],1075        }),1076        expect.objectContaining({1077          fileName: expect.any(String),1078          kind: 'kind 2',1079          stories: [1080            {1081              name: 'name 1',1082              render: expect.any(Function),1083            },1084            {1085              name: 'name 2',1086              render: expect.any(Function),1087            },1088          ],1089        }),1090      ]);1091    });1092    it('reads filename from module', async () => {1093      const { configure, clientApi } = start(jest.fn());1094      const fn = jest.fn();1095      configure('test', () => {1096        clientApi.storiesOf('kind', { id: 'foo.js' } as NodeModule).add('name', fn);1097      });1098      const storybook = clientApi.getStorybook();1099      expect(storybook).toEqual([1100        {1101          kind: 'kind',1102          fileName: 'foo.js',1103          stories: [1104            {1105              name: 'name',1106              render: expect.any(Function),1107            },1108          ],1109        },1110      ]);1111    });1112    it('should stringify ids from module', async () => {1113      const { configure, clientApi } = start(jest.fn());1114      const fn = jest.fn();1115      configure('test', () => {1116        clientApi.storiesOf('kind', { id: 1211 } as any).add('name', fn);1117      });1118      const storybook = clientApi.getStorybook();1119      expect(storybook).toEqual([1120        {1121          kind: 'kind',1122          fileName: '1211',1123          stories: [1124            {1125              name: 'name',1126              render: expect.any(Function),1127            },1128          ],1129        },1130      ]);1131    });1132  });1133  describe('auto-title', () => {1134    const componentDExports = {1135      default: {1136        component: 'Component D',1137      },1138      StoryOne: jest.fn(),1139    };1140    it('loads and renders the first story correctly', async () => {1141      const render = jest.fn();1142      const { configure } = start(render);1143      configure('test', () => [componentDExports]);1144      await waitForEvents([Events.SET_STORIES]);1145      expect(1146        mockChannel.emit.mock.calls.find((call: [string, any]) => call[0] === Events.SET_STORIES)[1]1147      ).toMatchInlineSnapshot(`1148        Object {1149          "globalParameters": Object {},1150          "globals": Object {},1151          "kindParameters": Object {1152            "auto-title": Object {},1153          },1154          "stories": Object {1155            "auto-title--story-one": Object {1156              "argTypes": Object {},1157              "args": Object {},1158              "component": "Component D",1159              "componentId": "auto-title",1160              "id": "auto-title--story-one",1161              "initialArgs": Object {},1162              "kind": "auto-title",1163              "name": "Story One",1164              "parameters": Object {1165                "__isArgsStory": false,1166                "fileName": "exports-map-0",1167                "framework": "test",1168              },1169              "playFunction": undefined,1170              "story": "Story One",1171              "subcomponents": undefined,1172              "title": "auto-title",1173            },1174          },1175          "v": 2,1176        }1177      `);1178    });1179  });...

Using AI Code Generation

1import { storiesOfData } from 'storybook-root-decorator';2import { storiesOf } from '@storybook/react';3import { withKnobs, text, boolean, number } from '@storybook/addon-knobs';4import { action } from '@storybook/addon-actions';5import { withInfo } from '@storybook/addon-info';6import { withA11y } from '@storybook/addon-a11y';7import { withConsole } from '@storybook/addon-console';8import { withTests } from '@storybook/addon-jest';9import { withViewport } from '@storybook/addon-viewport';10import { withOptions } from '@storybook/addon-options';11import { withNotes } from '@storybook/addon-notes';12import { withBackgrounds } from '@storybook/addon-backgrounds';13import { withLinks } from '@storybook/addon-links';14import { withPropsTable } from 'storybook-addon-react-docgen';15import { withReadme } from 'storybook-readme/with-readme';16import { withDocs } from 'storybook-readme/with-docs';17import { withReadme as withMarkdown } from 'storybook-readme/with-readme';18import { withDocs as withMarkdownDocs } from 'storybook-readme/with-docs';19import { withReadme as withMarkdownReadme } from 'storybook-readme/with-readme';20import { withDocs as withMarkdownDocsDocs } from 'storybook-readme/with-docs';21import { withReadme as withMarkdownReadmeReadme } from 'storybook-readme/with-readme';22import { withDocs as withMarkdownDocsDocsDocs } from 'storybook-readme/with-docs';23import { withReadme as withMarkdownReadmeReadmeReadme } from 'storybook-readme/with-readme';24import { withDocs as withMarkdownDocsDocsDocsDocs } from 'storybook-readme/with-docs';25import { withReadme as withMarkdownReadmeReadmeReadmeReadme } from 'storybook-readme/with-readme';26import { withDocs as withMarkdownDocsDocsDocsDocsDocs } from 'storybook-readme/with-docs';27import { withReadme as withMarkdownReadmeReadmeReadmeReadmeReadme } from 'storybook-readme/with-readme';28import { withDocs as withMarkdownDocsDocsDocsDocsDocsDocs } from 'storybook-readme/with-docs';29import { withReadme as

Using AI Code Generation

1import { storiesOfData } from 'storybook-root-decorator';2import { storiesOf } from '@storybook/react';3import { action } from '@storybook/addon-actions';4storiesOfData('Button', {5  data: {6  },7  options: {8  },9})10  .addWithJSX('with text', () => (11    <button onClick={action('clicked')}>{text}</button>12  ));13import { configure } from '@storybook/react';14import 'storybook-root-decorator/register';15function loadStories() {16  require('../test.js');17}18configure(loadStories, module);19MIT © [Dan Abramov](

Using AI Code Generation

1storiesOfData('Welcome', module)2  .addDecorator(withKnobs)3  .add('to Storybook', () => (4    <Button onClick={action('clicked')}>Hello Button</Button>5  ));6storiesOfData('Welcome', module)7  .addDecorator(withKnobs)8  .add('to Storybook', () => (9    <Button onClick={action('clicked')}>Hello Button</Button>10  ));11storiesOfData('Welcome', module)12  .addDecorator(withKnobs)13  .add('to Storybook', () => (14    <Button onClick={action('clicked')}>Hello Button</Button>15  ));16storiesOfData('Welcome', module)17  .addDecorator(withKnobs)18  .add('to Storybook', () => (19    <Button onClick={action('clicked')}>Hello Button</Button>20  ));21storiesOfData('Welcome', module)22  .addDecorator(withKnobs)23  .add('to Storybook', () => (24    <Button onClick={action('clicked')}>Hello Button</Button>25  ));26storiesOfData('Welcome', module)27  .addDecorator(withKnobs)28  .add('to Storybook', () => (29    <Button onClick={action('clicked')}>Hello Button</Button>30  ));31storiesOfData('Welcome', module)32  .addDecorator(withKnobs)33  .add('to Storybook', () => (34    <Button onClick={action('clicked')}>Hello Button</Button>35  ));36storiesOfData('Welcome', module)37  .addDecorator(withKnobs)38  .add('to Storybook', () => (39    <Button onClick={action('

Using AI Code Generation

1import { storiesOfData } from 'storybook-root-decorator';2import { storiesOf } from '@storybook/react';3storiesOfData('test', storiesOf, module)4  .add('test', () => (5import { storiesOfData } from 'storybook-root-decorator';6import { storiesOf } from '@storybook/react';7storiesOfData('test', storiesOf, module)8  .add('test', () => (9import { addDecorator } from '@storybook/react';10const storiesOfData = (storyName, storiesOf, module) => {11  const stories = storiesOf(storyName, module);12  addDecorator(story => (13      {story()}14  ));15  return stories;16};17export { storiesOfData };18import { configure } from '@storybook/react';19import { addDecorator } from '@storybook/react';20import { setOptions } from '@storybook/addon-options';21import { withOptions } from '@storybook/addon-options';22import { setDefaults } from 'storybook-root-decorator';23const req = require.context('../src', true, /.stories.js$/);24const loadStories = () => req.keys().forEach(filename => req(filename));25setDefaults({ theme: 'light' });26addDecorator(withOptions);27setOptions({

Using AI Code Generation

1import { storiesOfData } from 'storybook-root-decorator';2storiesOfData('Test', module)3  .add('test', () => {4    return (5    );6  });7import 'storybook-root-decorator/register';

Using AI Code Generation

1import { storiesOfData } from 'storybook-root';2storiesOfData('test', () => {3  return {4  };5});6import { storiesOfData } from 'storybook-root';7storiesOfData('test', () => {8  return {9  };10});11import { storiesOfData } from 'storybook-root';12storiesOfData('test', () => {13  return {14  };15});16import { storiesOfData } from 'storybook-root';17storiesOfData('test', () => {18  return {19  };20});21import { storiesOfData } from 'storybook-root';22storiesOfData('test', () => {23  return {24  };25});26import { storiesOfData } from 'storybook-root';27storiesOfData('test', () => {28  return {29  };30});31import { storiesOfData } from 'storybook-root';32storiesOfData('test', () => {33  return {34  };35});36import { storiesOfData } from 'storybook-root';37storiesOfData('test', () => {38  return {39  };40});41import { storiesOfData } from 'storybook-root';42storiesOfData('test', () => {43  return {44  };45});46import { storiesOfData }

Using AI Code Generation

1import { storiesOfData } from 'storybook-root-decorator';2storiesOfData(3  {4    myData: { name: 'myData' },5    myOtherData: { name: 'myOtherData' },6  },7);8import { storiesOfData } from 'storybook-root-decorator';9storiesOfData(10  {11    myData: { name: 'myData' },12    myOtherData: { name: 'myOtherData' },13  },14);15import { storiesOfData } from 'storybook-root-decorator';16storiesOfData(17  {18    myData: { name: 'myData' },19    myOtherData: { name: 'myOtherData' },20  },21);22import { storiesOfData } from 'storybook-root-decorator';23storiesOfData(24  {25    myData: { name: 'myData' },26    myOtherData: { name: 'myOtherData' },27  },28);29import { storiesOfData } from 'storybook-root-decorator';30storiesOfData(31  {32    myData: { name: 'myData' },33    myOtherData: { name: 'myOtherData' },34  },35);36import { storiesOfData } from 'storybook-root-de

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.