Unlock 30% off on Manual Testing Annual Plans this Holiday Season.

Copied to Clipboard!

How to use getStoryContext method in storybook-test-runner

Best JavaScript code snippet using storybook-test-runner

inferControls.test.ts

Source:inferControls.test.ts

...32    });33    it('should return color type when using color matcher', () => {34      // passing a string, should return control type color35      const inferredControls = inferControls(36        getStoryContext({37          argTypes: {38            background: {39              type: {40                name: 'string',41              },42              name: 'background',43            },44          },45          parameters: {46            controls: {47              matchers: {48                color: /background/,49              },50            },51          },52        })53      );54      expect(inferredControls.background.control.type).toEqual('color');55    });56    it('should return inferred type when using color matcher but arg passed is not a string', () => {57      const sampleTypes = [58        {59          name: 'object',60          value: {61            rgb: {62              name: 'number',63            },64          },65        },66        { name: 'number' },67        { name: 'boolean' },68      ];69      sampleTypes.forEach((type) => {70        const inferredControls = inferControls(71          getStoryContext({72            argTypes: {73              background: {74                // passing an object which is unsupported75                // should ignore color control and infer the type instead76                type,77                name: 'background',78              },79            },80            parameters: {81              controls: {82                matchers: {83                  color: /background/,84                },85              },86            },87          })88        );89        expect(warnSpy).toHaveBeenCalled();90        expect(inferredControls.background.control.type).toEqual(type.name);91      });92    });93  });94  it('should return argTypes as is when no exclude or include is passed', () => {95    const controls = inferControls(getStoryContext());96    expect(Object.keys(controls)).toEqual(['label', 'labelName', 'borderWidth']);97  });98  it('should return filtered argTypes when include is passed', () => {99    const [includeString, includeArray, includeRegex] = [100      inferControls(getStoryContext({ parameters: { controls: { include: 'label' } } })),101      inferControls(getStoryContext({ parameters: { controls: { include: ['label'] } } })),102      inferControls(getStoryContext({ parameters: { controls: { include: /label*/ } } })),103    ];104    expect(Object.keys(includeString)).toEqual(['label', 'labelName']);105    expect(Object.keys(includeArray)).toEqual(['label']);106    expect(Object.keys(includeRegex)).toEqual(['label', 'labelName']);107  });108  it('should return filtered argTypes when exclude is passed', () => {109    const [excludeString, excludeArray, excludeRegex] = [110      inferControls(getStoryContext({ parameters: { controls: { exclude: 'label' } } })),111      inferControls(getStoryContext({ parameters: { controls: { exclude: ['label'] } } })),112      inferControls(getStoryContext({ parameters: { controls: { exclude: /label*/ } } })),113    ];114    expect(Object.keys(excludeString)).toEqual(['borderWidth']);115    expect(Object.keys(excludeArray)).toEqual(['labelName', 'borderWidth']);116    expect(Object.keys(excludeRegex)).toEqual(['borderWidth']);117  });...

decorateStory.ts

Source:decorateStory.ts

...27const bindWithContext =28  (storyFn: LegacyStoryFn, getStoryContext: () => StoryContext): PartialStoryFn =>29  // (NOTE: You cannot override the parameters key, it is fixed)30  ({ id, name, kind, parameters, ...contextUpdate }: StoryContextUpdate = {}) =>31    storyFn({ ...getStoryContext(), ...contextUpdate });32export const decorateStory = (33  storyFn: LegacyStoryFn,34  decorator: DecoratorFunction,35  getStoryContext: () => StoryContext36): LegacyStoryFn => {37  // Bind the partially decorated storyFn so that when it is called it always knows about the story context,38  // no matter what it is passed directly. This is because we cannot guarantee a decorator will39  // pass the context down to the next decorated story in the chain.40  const boundStoryFunction = bindWithContext(storyFn, getStoryContext);41  return (context: StoryContext) => decorator(boundStoryFunction, context);42};43export const defaultDecorateStory = (44  storyFn: LegacyStoryFn,45  decorators: DecoratorFunction[]...

Using AI Code Generation

1import { getStoryContext } from 'storybook-test-runner';2import { storiesOf } from '@storybook/react';3import MyComponent from './MyComponent';4storiesOf('My Component', module).add('with some text', () => (5));6getStoryContext()7  .then(({ story, context }) => {8  })9  .catch(e => {10  });11import { getStoryContext } from 'storybook-test-runner';12import { storiesOf } from '@storybook/react';13import MyComponent from './MyComponent';14storiesOf('My Component', module).add('with some text', () => (15));16getStoryContext()17  .then(({ story, context }) => {18  })19  .catch(e => {20  });21getStoryContext()

Using AI Code Generation

1const getStoryContext = require('storybook-test-runner').getStoryContext;2const storyContext = getStoryContext('my-storybook', 'my-story');3console.log(storyContext);4const getStoryContext = require('storybook-test-runner').getStoryContext;5const storyContext = getStoryContext('my-storybook', 'my-story', { context: { some: 'custom', context: 'object' } });6console.log(storyContext);7const getStoryContext = require('storybook-test-runner').getStoryContext;8const storyContext = getStoryContext('my-storybook', 'my-story', { config: { some: 'custom', config: 'object' } });9console.log(storyContext);10const getStoryContext = require('storybook-test-runner').getStoryContext;11const storyContext = getStoryContext('my-storybook', 'my-story', { context: { some: 'custom', context: 'object' }, config: { some: 'custom', config: 'object' } });12console.log(storyContext);13const getStoryContext = require('storybook-test-runner').getStoryContext;14const storyContext = getStoryContext('my-storybook', 'my-story', { context: { some: 'custom', context: 'object' }, config: { some: 'custom', config: 'object' }, story: { some: 'custom', story: 'object' } });15console.log(storyContext);16const getStoryContext = require('storybook-test-runner').getStoryContext;17const storyContext = getStoryContext('my-storybook', 'my-story', { context: { some: 'custom', context: 'object' }, config: { some: 'custom', config: 'object' }, story: { some: 'custom', story: 'object' }, parameters: { some: 'custom', parameters: 'object' } });18console.log(storyContext);

Using AI Code Generation

1import { getStoryContext } from 'storybook-test-runner';2import { storiesOf } from 'storybook-test-runner';3const context = getStoryContext();4const stories = storiesOf('Storybook Test Runner', module, context);5stories.add('with text', () => {6  return {7    template: `<h1>{{text}}</h1>`,8    props: {9      text: {10        default: text('text', 'Hello World'),11      },12    },13  };14});15const path = require('path');16module.exports = {17  module: {18      {19          {20            loader: require.resolve('@storybook/source-loader'),21            options: { parser: 'javascript' },22          },23      },24      {25          {26            loader: require.resolve('@storybook/addon-storysource/loader'),27            options: { parser: 'javascript' },28          },29      },30      {31          {32            loader: require.resolve('storybook-test-runner/loader'),33          },34      },35  },36  resolve: {37    alias: {38      '@': path.resolve(__dirname, 'src'),39    },40  },41};42import { configure, addParameters } from '@storybook/vue';43import { setOptions } from '@storybook/addon-options';44import { withA11y } from '@storybook/addon-a11y';45import { withTests } from '@storybook/addon-jest';46import { withKnobs } from '@storybook/addon-knobs';47import { withInfo } from 'storybook-addon-vue-info';48import results from '../jest-test-results.json';49import { setConsoleOptions } from '@storybook/addon-console';50import { addDecorator } from '@storybook/vue';51import Vue from 'vue';52import VueI18n from 'vue-i18n

Using AI Code Generation

1import { getStoryContext } from 'storybook-test-runner'2const { context, story } = getStoryContext()3import { renderStory } from 'storybook-test-runner'4renderStory(context, story)5import { renderStoryWithHooks } from 'storybook-test-runner'6renderStoryWithHooks(context, story)7import { renderStoryWithRedux } from 'storybook-test-runner'8renderStoryWithRedux(context, story)9import { renderStoryWithReduxAndRouter } from 'storybook-test-runner'10renderStoryWithReduxAndRouter(context, story)11import { renderStoryWithReduxRouterAndIntl } from 'storybook-test-runner'12renderStoryWithReduxRouterAndIntl(context, story)13import { renderStoryWithReduxRouterIntlAndTheme } from 'storybook-test-runner'14renderStoryWithReduxRouterIntlAndTheme(context, story)15import { renderStoryWithReduxRouterIntlThemeAndApollo } from 'storybook-test-runner'16renderStoryWithReduxRouterIntlThemeAndApollo(context, story)17import { renderStoryWithReduxRouterIntlThemeApolloAndMST } from 'storybook-test-runner'18renderStoryWithReduxRouterIntlThemeApolloAndMST(context, story)19import { renderStoryWithReduxRouterIntlThemeApolloMSTAndMaterialUI } from 'storybook-test-runner'20renderStoryWithReduxRouterIntlThemeApolloMSTAndMaterialUI(context, story)21import { renderStoryWithReduxRouterIntlThemeApolloMSTMaterialUIAndReactQuery } from 'storybook-test-runner'

Using AI Code Generation

1const { getStoryContext } = require('storybook-test-runner');2const storyContext = getStoryContext('my-story');3console.log(storyContext);4{ id: 'my-story',5  parameters: { fileName: 'path/to/story.js' } }6const { getStoryContext } = require('storybook-test-runner');7const storyContext = getStoryContext('my-story');8const storyComponent = storyContext.getComponent();9console.log(storyComponent);10{ kind: 'my-story',11  parameters: { fileName: 'path/to/story.js' },12  fn: [Function: fn] }13const { getStoryContext } = require('storybook-test-runner');14const storyContext = getStoryContext('my-story');15const storyComponent = storyContext.getComponent({name: 'john'});16console.log(storyComponent);17{ kind: 'my-story',18  parameters: { fileName: 'path/to/story.js' },19  fn: [Function: fn] }

Using AI Code Generation

1const { getStoryContext } = require('storybook-test-runner');2const context = getStoryContext('stories/MyComponent.stories.js', 'MyComponent');3const { MyComponent } = context;4const { container } = render(MyComponent());5function capitalizeFirstLetter(string) {6    return string.charAt(0).toUpperCase() + string.slice(1);7}8function titleCase(str) {9    var splitStr = str.toLowerCase().split(' ');10    for (var i = 0; i < splitStr.length; i++) {11        splitStr[i] = capitalizeFirstLetter(splitStr[i]);12    }13    return splitStr.join(' ');14}15console.log(titleCase("I'm a little tea pot"));16function getRandomNumber() {17    return Math.floor(Math.random() * 10) + 1;18}19console.log(getRandomNumber());20function getRandomNumber() {21    return Math.floor(Math.random() * 10) + 1;22}23console.log(getRandomNumber());

Using AI Code Generation

1import { getStoryContext } from 'storybook-test-runner';2const storyContext = getStoryContext();3import { getStoryContext } from 'storybook-test-runner';4const storyContext = getStoryContext();5import { getStoryContext } from 'storybook-test-runner';6const storyContext = getStoryContext();7import { getStoryContext } from 'storybook-test-runner';8const storyContext = getStoryContext();9import { getStoryContext } from 'storybook-test-runner';10const storyContext = getStoryContext();11import { getStoryContext } from 'storybook-test-runner';12const storyContext = getStoryContext();

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.