How to use enhancerOne method in storybook-root

Best JavaScript code snippet using storybook-root
prepareStory.test.ts
Source:prepareStory.test.ts
1import global from 'global';2import { addons, HooksContext } from '@storybook/addons';3import type {4  AnyFramework,5  ArgsEnhancer,6  SBObjectType,7  SBScalarType,8  StoryContext,9} from '@storybook/csf';10import { NO_TARGET_NAME } from '../args';11import { prepareStory } from './prepareStory';12jest.mock('global', () => ({13  ...(jest.requireActual('global') as any),14  FEATURES: {15    breakingChangesV7: true,16  },17}));18const id = 'id';19const name = 'name';20const title = 'title';21const render = (args: any) => {};22const stringType: SBScalarType = { name: 'string' };23const numberType: SBScalarType = { name: 'number' };24const booleanType: SBScalarType = { name: 'boolean' };25const complexType: SBObjectType = {26  name: 'object',27  value: {28    complex: {29      name: 'object',30      value: {31        object: {32          name: 'array',33          value: { name: 'string' },34        },35      },36    },37  },38};39beforeEach(() => {40  global.FEATURES = { breakingChangesV7: true };41});42describe('prepareStory', () => {43  describe('parameters', () => {44    it('are combined in the right order', () => {45      const { parameters } = prepareStory(46        { id, name, parameters: { a: 'story', nested: { z: 'story' } } },47        {48          id,49          title,50          parameters: {51            a: { name: 'component' },52            b: { name: 'component' },53            nested: { z: { name: 'component' }, y: { name: 'component' } },54          },55        },56        {57          render,58          parameters: {59            a: { name: 'global' },60            b: { name: 'global' },61            c: { name: 'global' },62            nested: { z: { name: 'global' }, x: { name: 'global' } },63          },64        }65      );66      expect(parameters).toEqual({67        __isArgsStory: true,68        a: 'story',69        b: { name: 'component' },70        c: { name: 'global' },71        nested: { z: 'story', y: { name: 'component' }, x: { name: 'global' } },72      });73    });74    it('sets a value even if metas do not have parameters', () => {75      const { parameters } = prepareStory({ id, name }, { id, title }, { render });76      expect(parameters).toEqual({ __isArgsStory: true });77    });78    it('does not set `__isArgsStory` if `passArgsFirst` is disabled', () => {79      const { parameters } = prepareStory(80        { id, name, parameters: { passArgsFirst: false } },81        { id, title },82        { render }83      );84      expect(parameters).toEqual({ passArgsFirst: false, __isArgsStory: false });85    });86    it('does not set `__isArgsStory` if `render` does not take args', () => {87      const { parameters } = prepareStory({ id, name }, { id, title }, { render: () => {} });88      expect(parameters).toEqual({ __isArgsStory: false });89    });90  });91  describe('args/initialArgs', () => {92    it('are combined in the right order', () => {93      const { initialArgs } = prepareStory(94        { id, name, args: { a: 'story', nested: { z: 'story' } } },95        {96          id,97          title,98          args: {99            a: 'component',100            b: 'component',101            nested: { z: 'component', y: 'component' },102          },103        },104        {105          render,106          args: {107            a: 'global',108            b: 'global',109            c: 'global',110            nested: { z: 'global', x: 'global' },111          },112        }113      );114      expect(initialArgs).toEqual({115        a: 'story',116        b: 'component',117        c: 'global',118        nested: { z: 'story' },119      });120    });121    it('can be overriden by `undefined`', () => {122      const { initialArgs } = prepareStory(123        { id, name, args: { a: undefined } },124        { id, title, args: { a: 'component' } },125        { render }126      );127      expect(initialArgs).toEqual({ a: undefined });128    });129    it('sets a value even if metas do not have args', () => {130      const { initialArgs } = prepareStory({ id, name }, { id, title }, { render });131      expect(initialArgs).toEqual({});132    });133    it('are initialized to argTypes[x].defaultValue if unset', () => {134      const { initialArgs } = prepareStory(135        {136          id,137          name,138          args: {139            arg2: 3,140            arg4: 'foo',141            arg7: false,142          },143          argTypes: {144            arg1: { name: 'arg1', type: stringType, defaultValue: 'arg1' },145            arg2: { name: 'arg2', type: numberType, defaultValue: 2 },146            arg3: {147              name: 'arg3',148              type: complexType,149              defaultValue: { complex: { object: ['type'] } },150            },151            arg4: { name: 'arg4', type: stringType },152            arg5: { name: 'arg5', type: stringType },153            arg6: { name: 'arg6', type: numberType, defaultValue: 0 }, // See https://github.com/storybookjs/storybook/issues/12767 }154          },155        },156        { id, title },157        { render: () => {} }158      );159      expect(initialArgs).toEqual({160        arg1: 'arg1',161        arg2: 3,162        arg3: { complex: { object: ['type'] } },163        arg4: 'foo',164        arg6: 0,165        arg7: false,166      });167    });168    describe('argsEnhancers', () => {169      it('are applied in the right order', () => {170        const run = [];171        const enhancerOne: ArgsEnhancer<AnyFramework> = () => {172          run.push(1);173          return {};174        };175        const enhancerTwo: ArgsEnhancer<AnyFramework> = () => {176          run.push(2);177          return {};178        };179        prepareStory(180          { id, name },181          { id, title },182          { render, argsEnhancers: [enhancerOne, enhancerTwo] }183        );184        expect(run).toEqual([1, 2]);185      });186      it('allow you to add args', () => {187        const enhancer = jest.fn(() => ({ c: 'd' }));188        const { initialArgs } = prepareStory(189          { id, name, args: { a: 'b' } },190          { id, title },191          { render, argsEnhancers: [enhancer] }192        );193        expect(enhancer).toHaveBeenCalledWith(expect.objectContaining({ initialArgs: { a: 'b' } }));194        expect(initialArgs).toEqual({ a: 'b', c: 'd' });195      });196      it('passes result of earlier enhancers into subsequent ones, and composes their output', () => {197        const enhancerOne = jest.fn(() => ({ b: 'B' }));198        const enhancerTwo = jest.fn(({ initialArgs }) =>199          Object.entries(initialArgs).reduce(200            (acc, [key, val]) => ({ ...acc, [key]: `enhanced ${val}` }),201            {}202          )203        );204        const enhancerThree = jest.fn(() => ({ c: 'C' }));205        const { initialArgs } = prepareStory(206          { id, name, args: { a: 'A' } },207          { id, title },208          { render, argsEnhancers: [enhancerOne, enhancerTwo, enhancerThree] }209        );210        expect(enhancerOne).toHaveBeenCalledWith(211          expect.objectContaining({ initialArgs: { a: 'A' } })212        );213        expect(enhancerTwo).toHaveBeenCalledWith(214          expect.objectContaining({ initialArgs: { a: 'A', b: 'B' } })215        );216        expect(enhancerThree).toHaveBeenCalledWith(217          expect.objectContaining({ initialArgs: { a: 'enhanced A', b: 'enhanced B' } })218        );219        expect(initialArgs).toEqual({220          a: 'enhanced A',221          b: 'enhanced B',222          c: 'C',223        });224      });225    });226  });227  describe('argTypes', () => {228    it('are combined in the right order', () => {229      const { argTypes } = prepareStory(230        {231          id,232          name,233          argTypes: {234            a: { name: 'a-story', type: booleanType },235            nested: { name: 'nested', type: booleanType, a: 'story' },236          },237        },238        {239          id,240          title,241          argTypes: {242            a: { name: 'a-component', type: stringType },243            b: { name: 'b-component', type: stringType },244            nested: { name: 'nested', type: booleanType, a: 'component', b: 'component' },245          },246        },247        {248          render,249          argTypes: {250            a: { name: 'a-global', type: numberType },251            b: { name: 'b-global', type: numberType },252            c: { name: 'c-global', type: numberType },253            nested: { name: 'nested', type: booleanType, a: 'global', b: 'global', c: 'global' },254          },255        }256      );257      expect(argTypes).toEqual({258        a: { name: 'a-story', type: booleanType },259        b: { name: 'b-component', type: stringType },260        c: { name: 'c-global', type: numberType },261        nested: { name: 'nested', type: booleanType, a: 'story', b: 'component', c: 'global' },262      });263    });264    describe('argTypesEnhancers', () => {265      it('allows you to alter argTypes when stories are added', () => {266        const enhancer = jest.fn((context) => ({ ...context.argTypes, c: { name: 'd' } }));267        const { argTypes } = prepareStory(268          { id, name, argTypes: { a: { name: 'b' } } },269          { id, title },270          { render, argTypesEnhancers: [enhancer] }271        );272        expect(enhancer).toHaveBeenCalledWith(273          expect.objectContaining({ argTypes: { a: { name: 'b' } } })274        );275        expect(argTypes).toEqual({ a: { name: 'b' }, c: { name: 'd' } });276      });277      it('does not merge argType enhancer results', () => {278        const enhancer = jest.fn(() => ({ c: { name: 'd' } }));279        const { argTypes } = prepareStory(280          { id, name, argTypes: { a: { name: 'b' } } },281          { id, title },282          { render, argTypesEnhancers: [enhancer] }283        );284        expect(enhancer).toHaveBeenCalledWith(285          expect.objectContaining({ argTypes: { a: { name: 'b' } } })286        );287        expect(argTypes).toEqual({ c: { name: 'd' } });288      });289      it('recursively passes argTypes to successive enhancers', () => {290        const firstEnhancer = jest.fn((context) => ({ ...context.argTypes, c: { name: 'd' } }));291        const secondEnhancer = jest.fn((context) => ({ ...context.argTypes, e: { name: 'f' } }));292        const { argTypes } = prepareStory(293          { id, name, argTypes: { a: { name: 'b' } } },294          { id, title },295          { render, argTypesEnhancers: [firstEnhancer, secondEnhancer] }296        );297        expect(firstEnhancer).toHaveBeenCalledWith(298          expect.objectContaining({ argTypes: { a: { name: 'b' } } })299        );300        expect(secondEnhancer).toHaveBeenCalledWith(301          expect.objectContaining({ argTypes: { a: { name: 'b' }, c: { name: 'd' } } })302        );303        expect(argTypes).toEqual({ a: { name: 'b' }, c: { name: 'd' }, e: { name: 'f' } });304      });305    });306  });307  describe('applyLoaders', () => {308    it('awaits the result of a loader', async () => {309      const loader = jest.fn(async () => new Promise((r) => setTimeout(() => r({ foo: 7 }), 100)));310      const { applyLoaders } = prepareStory(311        { id, name, loaders: [loader] },312        { id, title },313        { render }314      );315      const storyContext = { context: 'value' } as any;316      const loadedContext = await applyLoaders(storyContext);317      expect(loader).toHaveBeenCalledWith(storyContext);318      expect(loadedContext).toEqual({319        context: 'value',320        loaded: { foo: 7 },321      });322    });323    it('loaders are composed in the right order', async () => {324      const globalLoader = async () => ({ foo: 1, bar: 1, baz: 1 });325      const componentLoader = async () => ({ foo: 3, bar: 3 });326      const storyLoader = async () => ({ foo: 5 });327      const { applyLoaders } = prepareStory(328        { id, name, loaders: [storyLoader] },329        { id, title, loaders: [componentLoader] },330        { render, loaders: [globalLoader] }331      );332      const storyContext = { context: 'value' } as any;333      const loadedContext = await applyLoaders(storyContext);334      expect(loadedContext).toEqual({335        context: 'value',336        loaded: { foo: 5, bar: 3, baz: 1 },337      });338    });339    it('later loaders override earlier loaders', async () => {340      const loaders = [341        async () => new Promise((r) => setTimeout(() => r({ foo: 7 }), 100)),342        async () => new Promise((r) => setTimeout(() => r({ foo: 3 }), 50)),343      ];344      const { applyLoaders } = prepareStory({ id, name, loaders }, { id, title }, { render });345      const storyContext = { context: 'value' } as any;346      const loadedContext = await applyLoaders(storyContext);347      expect(loadedContext).toEqual({348        context: 'value',349        loaded: { foo: 3 },350      });351    });352  });353  describe('undecoratedStoryFn', () => {354    it('args are mapped by argTypes[x].mapping', () => {355      const renderMock = jest.fn();356      const story = prepareStory(357        {358          id,359          name,360          argTypes: {361            one: { name: 'one', type: { name: 'string' }, mapping: { 1: 'mapped' } },362            two: { name: 'two', type: { name: 'string' }, mapping: { 1: 'no match' } },363          },364          args: { one: 1, two: 2, three: 3 },365        },366        { id, title },367        { render: renderMock }368      );369      const context = { args: story.initialArgs, ...story };370      story.undecoratedStoryFn(context as any);371      expect(renderMock).toHaveBeenCalledWith(372        { one: 'mapped', two: 2, three: 3 },373        expect.objectContaining({ args: { one: 'mapped', two: 2, three: 3 } })374      );375    });376    it('passes args as the first argument to the story if `parameters.passArgsFirst` is true', () => {377      const renderMock = jest.fn();378      const firstStory = prepareStory(379        { id, name, args: { a: 1 }, parameters: { passArgsFirst: true } },380        { id, title },381        { render: renderMock }382      );383      firstStory.undecoratedStoryFn({ args: firstStory.initialArgs, ...firstStory } as any);384      expect(renderMock).toHaveBeenCalledWith(385        { a: 1 },386        expect.objectContaining({ args: { a: 1 } })387      );388      const secondStory = prepareStory(389        { id, name, args: { a: 1 }, parameters: { passArgsFirst: false } },390        { id, title },391        { render: renderMock }392      );393      secondStory.undecoratedStoryFn({ args: secondStory.initialArgs, ...secondStory } as any);394      expect(renderMock).toHaveBeenCalledWith(expect.objectContaining({ args: { a: 1 } }));395    });396  });397  describe('storyFn', () => {398    it('produces a story with inherited decorators applied', () => {399      const renderMock = jest.fn();400      const globalDecorator = jest.fn((s) => s());401      const componentDecorator = jest.fn((s) => s());402      const storyDecorator = jest.fn((s) => s());403      const story = prepareStory(404        {405          id,406          name,407          decorators: [storyDecorator],408        },409        { id, title, decorators: [componentDecorator] },410        { render: renderMock, decorators: [globalDecorator] }411      );412      addons.setChannel({ on: jest.fn(), removeListener: jest.fn() } as any);413      const hooks = new HooksContext();414      story.unboundStoryFn({ args: story.initialArgs, hooks, ...story } as any);415      expect(globalDecorator).toHaveBeenCalled();416      expect(componentDecorator).toHaveBeenCalled();417      expect(storyDecorator).toHaveBeenCalled();418      expect(renderMock).toHaveBeenCalled();419      hooks.clean();420    });421  });422  describe('with `FEATURES.argTypeTargetsV7`', () => {423    beforeEach(() => {424      global.FEATURES = { breakingChangesV7: true, argTypeTargetsV7: true };425    });426    it('filters out targeted args', () => {427      const renderMock = jest.fn();428      const firstStory = prepareStory(429        {430          id,431          name,432          args: { a: 1, b: 2 },433          argTypes: { b: { name: 'b', target: 'foo' } },434        },435        { id, title },436        { render: renderMock }437      );438      firstStory.unboundStoryFn({439        args: firstStory.initialArgs,440        hooks: new HooksContext(),441        ...firstStory,442      } as any);443      expect(renderMock).toHaveBeenCalledWith(444        { a: 1 },445        expect.objectContaining({ args: { a: 1 }, allArgs: { a: 1, b: 2 } })446      );447    });448    it('adds argsByTarget to context', () => {449      const renderMock = jest.fn();450      const firstStory = prepareStory(451        {452          id,453          name,454          args: { a: 1, b: 2 },455          argTypes: { b: { name: 'b', target: 'foo' } },456        },457        { id, title },458        { render: renderMock }459      );460      firstStory.unboundStoryFn({461        args: firstStory.initialArgs,462        hooks: new HooksContext(),463        ...firstStory,464      } as any);465      expect(renderMock).toHaveBeenCalledWith(466        { a: 1 },467        expect.objectContaining({ argsByTarget: { [NO_TARGET_NAME]: { a: 1 }, foo: { b: 2 } } })468      );469    });470    it('always sets args, even when all are targetted', () => {471      const renderMock = jest.fn();472      const firstStory = prepareStory(473        {474          id,475          name,476          args: { b: 2 },477          argTypes: { b: { name: 'b', target: 'foo' } },478        },479        { id, title },480        { render: renderMock }481      );482      firstStory.unboundStoryFn({483        args: firstStory.initialArgs,484        hooks: new HooksContext(),485        ...firstStory,486      } as any);487      expect(renderMock).toHaveBeenCalledWith(488        {},489        expect.objectContaining({ argsByTarget: { foo: { b: 2 } } })490      );491    });492    it('always sets args, even when none are set for the story', () => {493      const renderMock = jest.fn();494      const firstStory = prepareStory(495        {496          id,497          name,498        },499        { id, title },500        { render: renderMock }501      );502      firstStory.unboundStoryFn({503        args: firstStory.initialArgs,504        hooks: new HooksContext(),505        ...firstStory,506      } as any);507      expect(renderMock).toHaveBeenCalledWith({}, expect.objectContaining({ argsByTarget: {} }));508    });509  });510});511describe('playFunction', () => {512  it('awaits play if defined', async () => {513    const inner = jest.fn();514    const play = jest.fn(async () => {515      await new Promise((r) => setTimeout(r, 0)); // Ensure this puts an async boundary in516      inner();517    });518    const { playFunction } = prepareStory({ id, name, play }, { id, title }, { render });519    await playFunction({} as StoryContext<AnyFramework>);520    expect(play).toHaveBeenCalled();521    expect(inner).toHaveBeenCalled();522  });...
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.