How to use enhancerTwo method in storybook-root

Best JavaScript code snippet using storybook-root

prepareStory.test.ts

Source:prepareStory.test.ts Github

copy

Full Screen

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 });...

Full Screen

Full Screen

Automation Testing Tutorials

Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.

LambdaTest Learning Hubs:

YouTube

You could also refer to video tutorials over LambdaTest YouTube channel to get step by step demonstration from industry experts.

Run storybook-root automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

Try LambdaTest Now !!

Get 100 minutes of automation test minutes FREE!!

Next-Gen App & Browser Testing Cloud

Was this article helpful?

Helpful

NotHelpful