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.