How to use argsByTarget 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

prepareStory.ts

Source:prepareStory.ts Github

copy

Full Screen

1import dedent from 'ts-dedent';2import deprecate from 'util-deprecate';3import global from 'global';4import type {5 Parameters,6 Args,7 LegacyStoryFn,8 ArgsStoryFn,9 StoryContextForEnhancers,10 StoryContext,11 AnyFramework,12 StrictArgTypes,13} from '@storybook/csf';14import type {15 NormalizedComponentAnnotations,16 Story,17 NormalizedStoryAnnotations,18 NormalizedProjectAnnotations,19} from '../types';20import { combineParameters } from '../parameters';21import { applyHooks } from '../hooks';22import { defaultDecorateStory } from '../decorators';23import { groupArgsByTarget, NO_TARGET_NAME } from '../args';24import { getValuesFromArgTypes } from './getValuesFromArgTypes';25const argTypeDefaultValueWarning = deprecate(26 () => {},27 dedent`28 \`argType.defaultValue\` is deprecated and will be removed in Storybook 7.0.29 https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#no-longer-inferring-default-values-of-args`30);31// Combine all the metadata about a story (both direct and inherited from the component/global scope)32// into a "renderable" story function, with all decorators applied, parameters passed as context etc33//34// Note that this story function is *stateless* in the sense that it does not track args or globals35// Instead, it is expected these are tracked separately (if necessary) and are passed into each invocation.36export function prepareStory<TFramework extends AnyFramework>(37 storyAnnotations: NormalizedStoryAnnotations<TFramework>,38 componentAnnotations: NormalizedComponentAnnotations<TFramework>,39 projectAnnotations: NormalizedProjectAnnotations<TFramework>40): Story<TFramework> {41 // NOTE: in the current implementation we are doing everything once, up front, rather than doing42 // anything at render time. The assumption is that as we don't load all the stories at once, this43 // will have a limited cost. If this proves misguided, we can refactor it.44 const { id, name } = storyAnnotations;45 const { title } = componentAnnotations;46 const parameters: Parameters = combineParameters(47 projectAnnotations.parameters,48 componentAnnotations.parameters,49 storyAnnotations.parameters50 );51 const decorators = [52 ...(storyAnnotations.decorators || []),53 ...(componentAnnotations.decorators || []),54 ...(projectAnnotations.decorators || []),55 ];56 // Currently it is only possible to set these globally57 const {58 applyDecorators = defaultDecorateStory,59 argTypesEnhancers = [],60 argsEnhancers = [],61 } = projectAnnotations;62 const loaders = [63 ...(projectAnnotations.loaders || []),64 ...(componentAnnotations.loaders || []),65 ...(storyAnnotations.loaders || []),66 ];67 // The render function on annotations *has* to be an `ArgsStoryFn`, so when we normalize68 // CSFv1/2, we use a new field called `userStoryFn` so we know that it can be a LegacyStoryFn69 const render =70 storyAnnotations.userStoryFn ||71 storyAnnotations.render ||72 componentAnnotations.render ||73 projectAnnotations.render;74 const passedArgTypes: StrictArgTypes = combineParameters(75 projectAnnotations.argTypes,76 componentAnnotations.argTypes,77 storyAnnotations.argTypes78 ) as StrictArgTypes;79 const { passArgsFirst = true } = parameters;80 // eslint-disable-next-line no-underscore-dangle81 parameters.__isArgsStory = passArgsFirst && render.length > 0;82 // Pull out args[X] into initialArgs for argTypes enhancers83 const passedArgs: Args = {84 ...projectAnnotations.args,85 ...componentAnnotations.args,86 ...storyAnnotations.args,87 } as Args;88 const contextForEnhancers: StoryContextForEnhancers<TFramework> = {89 componentId: componentAnnotations.id,90 title,91 kind: title, // Back compat92 id,93 name,94 story: name, // Back compat95 component: componentAnnotations.component,96 subcomponents: componentAnnotations.subcomponents,97 parameters,98 initialArgs: passedArgs,99 argTypes: passedArgTypes,100 };101 contextForEnhancers.argTypes = argTypesEnhancers.reduce(102 (accumulatedArgTypes, enhancer) =>103 enhancer({ ...contextForEnhancers, argTypes: accumulatedArgTypes }),104 contextForEnhancers.argTypes105 );106 // Add argTypes[X].defaultValue to initial args (note this deprecated)107 // We need to do this *after* the argTypesEnhancers as they may add defaultValues108 const defaultArgs = getValuesFromArgTypes(contextForEnhancers.argTypes);109 if (Object.keys(defaultArgs).length > 0) {110 argTypeDefaultValueWarning();111 }112 const initialArgsBeforeEnhancers = { ...defaultArgs, ...passedArgs };113 contextForEnhancers.initialArgs = argsEnhancers.reduce(114 (accumulatedArgs: Args, enhancer) => ({115 ...accumulatedArgs,116 ...enhancer({117 ...contextForEnhancers,118 initialArgs: accumulatedArgs,119 }),120 }),121 initialArgsBeforeEnhancers122 );123 // Add some of our metadata into parameters as we used to do this in 6.x and users may be relying on it124 if (!global.FEATURES?.breakingChangesV7) {125 contextForEnhancers.parameters = {126 ...contextForEnhancers.parameters,127 __id: id,128 globals: projectAnnotations.globals,129 globalTypes: projectAnnotations.globalTypes,130 args: contextForEnhancers.initialArgs,131 argTypes: contextForEnhancers.argTypes,132 };133 }134 const applyLoaders = async (context: StoryContext<TFramework>) => {135 const loadResults = await Promise.all(loaders.map((loader) => loader(context)));136 const loaded = Object.assign({}, ...loadResults);137 return { ...context, loaded };138 };139 const undecoratedStoryFn: LegacyStoryFn<TFramework> = (context: StoryContext<TFramework>) => {140 const mappedArgs = Object.entries(context.args).reduce((acc, [key, val]) => {141 const mapping = context.argTypes[key]?.mapping;142 acc[key] = mapping && val in mapping ? mapping[val] : val;143 return acc;144 }, {} as Args);145 const mappedContext = { ...context, args: mappedArgs };146 const { passArgsFirst: renderTimePassArgsFirst = true } = context.parameters;147 return renderTimePassArgsFirst148 ? (render as ArgsStoryFn<TFramework>)(mappedContext.args, mappedContext)149 : (render as LegacyStoryFn<TFramework>)(mappedContext);150 };151 const decoratedStoryFn = applyHooks<TFramework>(applyDecorators)(undecoratedStoryFn, decorators);152 const unboundStoryFn = (context: StoryContext<TFramework>) => {153 let finalContext: StoryContext<TFramework> = context;154 if (global.FEATURES?.argTypeTargetsV7) {155 const argsByTarget = groupArgsByTarget({ args: context.args, ...context });156 finalContext = {157 ...context,158 allArgs: context.args,159 argsByTarget,160 args: argsByTarget[NO_TARGET_NAME] || {},161 };162 }163 return decoratedStoryFn(finalContext);164 };165 const playFunction = storyAnnotations.play;166 return Object.freeze({167 ...contextForEnhancers,168 originalStoryFn: render,169 undecoratedStoryFn,170 unboundStoryFn,171 applyLoaders,172 playFunction,173 });...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { argsByTarget } = require("storybook-root");2module.exports = {3 stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],4 webpackFinal: async (config) => {5 const args = argsByTarget(config);6 return {7 module: {8 {9 {10 options: {11 {12 },13 },14 },15 },16 {17 test: /\.(ts|tsx)$/,18 {19 options: {20 {21 },22 },23 },24 {25 options: {26 },27 },28 },29 {30 {31 options: {32 $args: ${JSON.stringify(args)};33 @import "src/styles/variables.scss";34 @import "src/styles/mixins.scss";35 @import "src/styles/global.scss";36 },37 },38 },39 {40 test: /\.(png|jpg|jpeg|gif|woff|woff2|eot|ttf|svg)$/,41 },42 },43 };44 },45};46import React from "react";47import { ComponentName } from "./ComponentName";48export default {49};50const Template = (args) => <ComponentName {...args} />;51export const Default = Template.bind({});52Default.args = {53};

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { argsByTarget } = require('storybook-root');2const { args } = argsByTarget('my-component');3const { argsByTarget } = require('storybook-root');4const { args } = argsByTarget('my-component');5const { argsByTarget } = require('storybook-root');6const { args } = argsByTarget('my-component');7const { argsByTarget } = require('storybook-root');8const { args } = argsByTarget('my-component');9const { argsByTarget } = require('storybook-root');10const { args } = argsByTarget('my-component');11const { argsByTarget } = require('storybook-root');12const { args } = argsByTarget('my-component');13const { argsByTarget } = require('storybook-root');14const { args } = argsByTarget('my-component');15const { argsByTarget } = require('storybook-root');16const { args } = argsByTarget('my-component');17const { argsByTarget } = require('storybook-root');18const { args } = argsByTarget('my-component');19const { argsByTarget } = require('storybook-root');20const { args } = argsByTarget('my-component');21const { argsByTarget } = require('storybook-root');22const { args } = argsByTarget('my-component');23const { argsByTarget } = require('storybook-root');24const { args } = argsByTarget('my-component');25const { argsByTarget } = require('storybook-root');26const { args } = argsByTarget('my-component');27const { argsByTarget } = require('storybook-root');28const { args } = args

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1import { argsByTarget } from 'storybook-root-decorator';2import { args } from './args';3export default {4 argTypes: {5 target: {6 control: {7 },8 },9 },10};11const Template = (args) => {12 const { target, ...rest } = args;13 const storyArgs = argsByTarget(target, args);14 return `<div>${JSON.stringify(storyArgs)}</div>`;15};16export const ArgsByTarget = Template.bind({});17ArgsByTarget.args = args;18export const args = {19 desktop: {20 },21 tablet: {22 },23 mobile: {24 },25};26module.exports = {27 stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],28 core: {29 },30};31import { addDecorator } from '@storybook/react';32import { withRootDecorator } from 'storybook-root-decorator';33addDecorator(withRootDecorator);

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1import { argsByTarget } from 'storybook-root-cause';2import { render } from '@testing-library/react';3import { Button } from './Button';4const { args, argTypes } = argsByTarget(Button);5test('renders Button', () => {6 const { getByText } = render(<Button {...args} />);7 const linkElement = getByText(/learn react/i);8 expect(linkElement).toBeInTheDocument();9});

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1import { argsByTarget } from 'storybook-root-attribute';2const { args } = argsByTarget('my-component');3export default {4 argTypes: {5 },6};7export const MyComponent = (args) => {8 return `<my-component ${args}> </my-component>`;9};10MyComponent.args = args;11MyComponent.story = {12 parameters: {13 docs: {14 source: {15 },16 },17 },18};19import { argsByTarget } from 'storybook-root-attribute';20export const MyComponent = (args) => {21 const { args } = argsByTarget('my-component', args);22 return `<my-component ${args}> </my-component>`;23};24const { args } = argsByTarget('my-component', args);25export const MyComponent = (args) => {26 return `<my-component ${args}> </my-component>`;27};28MyComponent.args = args;29export const MyComponent = (args) => {30 return `<my-component ${args}> </my-component>`;31};32MyComponent.story = {33 parameters: {34 docs: {35 source: {

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const rootCause = require('storybook-root-cause');2const { argsByTarget } = rootCause;3const args = argsByTarget('targetFunctionName', 'targetFunctionFile.js');4function targetFunctionName(param1, param2) {5}6const targetFunctionFile = require('./targetFunctionFile');7targetFunctionFile.targetFunctionName(...args);8const targetFunctionFile = require('./targetFunctionFile');9const args = argsByTarget('targetFunctionName', 'targetFunctionFile.js');10targetFunctionFile.targetFunctionName(...args);11const targetFunctionFile = require('./targetFunctionFile');12const args = argsByTarget('targetFunctionName', 'targetFunctionFile.js');13targetFunctionFile.targetFunctionName(...args);14const targetFunctionFile = require('./targetFunctionFile');15const args = argsByTarget('targetFunctionName', 'targetFunctionFile.js');16targetFunctionFile.targetFunctionName(...args);17const targetFunctionFile = require('./targetFunctionFile');18const args = argsByTarget('targetFunctionName', 'targetFunctionFile.js');19targetFunctionFile.targetFunctionName(...args);20const targetFunctionFile = require('./targetFunctionFile');21const args = argsByTarget('targetFunctionName', 'targetFunctionFile.js');22targetFunctionFile.targetFunctionName(...args);23const targetFunctionFile = require('./targetFunctionFile');24const args = argsByTarget('targetFunctionName', 'targetFunctionFile.js');25targetFunctionFile.targetFunctionName(...args);26const targetFunctionFile = require('./targetFunctionFile');27const args = argsByTarget('targetFunctionName', 'targetFunctionFile.js');28targetFunctionFile.targetFunctionName(...args);29const targetFunctionFile = require('./targetFunctionFile');30const args = argsByTarget('targetFunctionName', 'targetFunctionFile.js');31targetFunctionFile.targetFunctionName(...args);32const targetFunctionFile = require('./targetFunctionFile');33const args = argsByTarget('targetFunctionName', 'targetFunctionFile.js');34targetFunctionFile.targetFunctionName(...args);35const targetFunctionFile = require('./targetFunctionFile');

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1import { argsByTarget } from 'storybook-root';2const args = argsByTarget('my-component');3console.log(args);4{5}6import { argsByTarget } from 'storybook-root';7const args = argsByTarget('my-component');8console.log(args);9{10}11import { argsByTarget } from 'storybook-root';12const args = argsByTarget('my-component');13console.log(args);14{15}16import { argsByTarget } from 'storybook-root';17const args = argsByTarget('my-component');18console.log(args);19{20}21import { argsByTarget } from 'storybook-root';22const args = argsByTarget('my-component');23console.log(args);24{25}26import { argsByTarget } from 'storybook-root';27const args = argsByTarget('my-component');28console.log(args);29{30}31import { argsByTarget } from 'storybook-root';32const args = argsByTarget('my-component');33console.log(args);34{35}36import { argsByTarget } from 'storybook-root';37const args = argsByTarget('my-component');38console.log(args);39{40}41import { argsByTarget } from 'storybook-root';42const args = argsByTarget('my-component');43console.log(args);44{

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { argsByTarget } = require('storybook-root-attribute');2const { rootAttribute } = argsByTarget();3console.log(rootAttribute);4module.exports = {5};6module.exports = {7 {8 options: {9 },10 },11};12module.exports = {13 {14 options: {15 rootAttribute: {

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1import { argsByTarget } from 'storybook-root';2import { Button } from 'storybook-root';3const args = argsByTarget('Button');4const button = new Button(args);5button.render();6import { Button } from 'storybook-root';7export default {8 args: {9 },10};

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.

... View sample repo... View DocumentationSign up Free
›
_

Try LambdaTest Now !!

Get 100 minutes of automation test minutes FREE!!

...
Sign up with GoogleSign up with Email
Next-Gen App & Browser Testing Cloud

Was this article helpful?

Helpful

NotHelpful