Join the 1-day Testing & QA Summit featuring 15+ Expert Speakers.Register for FREE! Join TestMu Conference

How to use storyPlays method in storybook-test-runner

Best JavaScript code snippet using storybook-test-runner

transformCsf.ts

Source:transformCsf.ts

1/* eslint-disable no-underscore-dangle */2import { loadCsf } from '@storybook/csf-tools';3import * as t from '@babel/types';4import generate from '@babel/generator';5import { toId, storyNameFromExport } from '@storybook/csf';6import dedent from 'ts-dedent';7const logger = console;8export interface TestContext {9  storyExport?: t.Identifier;10  name: t.Literal;11  title: t.Literal;12  id: t.Literal;13}14type TemplateResult = t.Statement | t.Statement[];15type FilePrefixer = () => TemplateResult;16type TestPrefixer = (context: TestContext) => TemplateResult;17interface TransformOptions {18  clearBody?: boolean;19  filePrefixer?: FilePrefixer;20  beforeEachPrefixer?: FilePrefixer;21  testPrefixer?: TestPrefixer;22  insertTestIfEmpty?: boolean;23  makeTitle?: (userTitle: string) => string;24}25const prefixFunction = (26  key: string,27  title: string,28  input: t.Expression,29  testPrefixer?: TestPrefixer30) => {31  const name = storyNameFromExport(key);32  const context: TestContext = {33    storyExport: t.identifier(key),34    name: t.stringLiteral(name), // FIXME .name annotation35    title: t.stringLiteral(title),36    id: t.stringLiteral(toId(title, name)),37  };38  const result = makeArray(testPrefixer(context));39  const stmt = result[1] as t.ExpressionStatement;40  return stmt.expression;41};42const makePlayTest = (43  key: string,44  title: string,45  metaOrStoryPlay: t.Node,46  testPrefix?: TestPrefixer47): t.Statement[] => {48  return [49    t.expressionStatement(50      t.callExpression(t.identifier('it'), [51        t.stringLiteral(!!metaOrStoryPlay ? 'play-test' : 'smoke-test'),52        prefixFunction(key, title, metaOrStoryPlay as t.Expression, testPrefix),53      ])54    ),55  ];56};57const makeDescribe = (58  key: string,59  tests: t.Statement[],60  beforeEachBlock?: t.ExpressionStatement61): t.Statement | null => {62  const blockStatements = beforeEachBlock ? [beforeEachBlock, ...tests] : tests;63  return t.expressionStatement(64    t.callExpression(t.identifier('describe'), [65      t.stringLiteral(key),66      t.arrowFunctionExpression([], t.blockStatement(blockStatements)),67    ])68  );69};70const makeBeforeEach = (beforeEachPrefixer: FilePrefixer) => {71  const stmt = beforeEachPrefixer() as t.ExpressionStatement;72  return t.expressionStatement(t.callExpression(t.identifier('beforeEach'), [stmt.expression]));73};74const makeArray = (templateResult: TemplateResult) =>75  Array.isArray(templateResult) ? templateResult : [templateResult];76export const transformCsf = (77  code: string,78  {79    filePrefixer,80    clearBody = false,81    testPrefixer,82    beforeEachPrefixer,83    insertTestIfEmpty,84    makeTitle,85  }: TransformOptions = {}86) => {87  const csf = loadCsf(code, { makeTitle });88  csf.parse();89  const storyExports = Object.keys(csf._stories);90  const title = csf.meta.title;91  const storyPlays = storyExports.reduce((acc, key) => {92    const annotations = csf._storyAnnotations[key];93    if (annotations?.play) {94      acc[key] = annotations.play;95    }96    return acc;97  }, {} as Record<string, t.Node>);98  const playTests = storyExports99    .map((key: string) => {100      let tests: t.Statement[] = [];101      tests = [...tests, ...makePlayTest(key, title, storyPlays[key], testPrefixer)];102      if (tests.length) {103        return makeDescribe(key, tests);104      }105      return null;106    })107    .filter(Boolean);108  const allTests = playTests;109  let result = '';110  // FIXME: insert between imports111  if (filePrefixer) {112    const { code: prefixCode } = generate(t.program(makeArray(filePrefixer())), {});113    result = `${prefixCode}\n`;114  }115  if (!clearBody) result = `${result}${code}\n`;116  if (allTests.length) {117    const describe = makeDescribe(118      csf.meta.title,119      allTests,120      beforeEachPrefixer ? makeBeforeEach(beforeEachPrefixer) : undefined121    );122    const { code: describeCode } = generate(describe, {});123    result = dedent`124      ${result}125      if (!require.main) {126        ${describeCode}127      }128    `;129  } else if (insertTestIfEmpty) {130    result = `describe('${csf.meta.title}', () => { it('no-op', () => {}) });`;131  }132  return result;...

Using AI Code Generation

1import storybook from 'storybook-test-runner';2import { storiesOf } from '@storybook/react';3import { action } from '@storybook/addon-actions';4import { linkTo } from '@storybook/addon-links';5import { Welcome } from '@storybook/react/demo';6storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);7storiesOf('Button', module)8  .add('with text', () => (9    <button onClick={action('clicked')}>Hello Button</button>10  .add('with some emoji', () => (11    <button onClick={action('clicked')}>😀 😎 👍 💯</button>12  ));13storybook.storyPlays('test.js', 'Button', 'with text');14import storybook from 'storybook-test-runner';15import { storiesOf } from '@storybook/react';16import { action } from '@storybook/addon-actions';17import { linkTo } from '@storybook/addon-links';18import { Welcome } from '@storybook/react/demo';19storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);20storiesOf('Button', module)21  .add('with text', () => (22    <button onClick={action('clicked')}>Hello Button</button>23  .add('with some emoji', () => (24    <button onClick={action('clicked')}>😀 😎 👍 💯</button>25  ));26storybook.storyPlays('test.js', 'Button', 'with text');27import storybook from 'storybook-test-runner';28import { storiesOf } from '@storybook/react';29import { action } from '@storybook/addon-actions';30import { linkTo } from '@storybook/addon-links';31import { Welcome } from '@storybook/react/demo';32storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);33storiesOf('Button', module)34  .add('with text', () => (35    <button onClick={action('clicked')}>Hello Button</button>36  .add('with some emoji', () => (37    <button onClick={action('clicked')}>

Using AI Code Generation

1import { storybookTestRunner } from 'storybook-test-runner';2import { storiesOf } from '@storybook/react';3const stories = storiesOf('Test', module);4stories.add('Test', () => <div>Test</div>);5storybookTestRunner(stories);6import { storyPlays } from 'storybook-test-runner';7import { storiesOf } from '@storybook/react';8const stories = storiesOf('Test', module);9stories.add('Test', () => <div>Test</div>);10storyPlays(stories);11import { storyPlays } from 'storybook-test-runner';12import { storiesOf } from '@storybook/react';13const stories = storiesOf('Test', module);14stories.add('Test', () => <div>Test</div>);15storyPlays(stories);16import { storyPlays } from 'storybook-test-runner';17import { storiesOf } from '@storybook/react';18const stories = storiesOf('Test', module);19stories.add('Test', () => <div>Test</div>);20storyPlays(stories);21import { storyPlays } from 'storybook-test-runner';22import { storiesOf } from '@storybook/react';23const stories = storiesOf('Test', module);24stories.add('Test', () => <div>Test</div>);25storyPlays(stories);26import { storyPlays } from 'storybook-test-runner';27import { storiesOf } from '@storybook/react';28const stories = storiesOf('Test', module);29stories.add('Test', () => <div>Test</div>);30storyPlays(stories);31import { storyPlays } from 'storybook-test-runner';32import { storiesOf } from '@storybook/react';33const stories = storiesOf('Test', module);34stories.add('Test', () => <div>Test</div>);35storyPlays(stories);

Using AI Code Generation

1import storybookTestRunner from 'storybook-test-runner';2import storybook from './storybook';3storybookTestRunner(storybook);4import { storiesOf } from '@kadira/storybook';5import { storyPlays } from 'storybook-test-runner';6export default storiesOf('MyComponent', module)7  .add('MyComponent', () => storyPlays(MyComponent, {8  }, {9  }));10import storybookTestRunner from 'storybook-test-runner';11import storybook from './storybook';12describe('MyComponent', () => {13  it('should render the component', () => {14    return storybookTestRunner(storybook).then(({ component, dom, props, context }) => {15    });16  });17});

Using AI Code Generation

1const storybook = require('storybook-test-runner')2const { storyPlays } = storybook3const storybook = require('storybook-test-runner')4const { mochaReporter } = storybook5"mocha": {6  "reporterOptions": {7    "mochaReporterOptions": {8    }9  }10}11"mocha": {12  "reporterOptions": {13    "mochaReporterOptions": {14    }15  }16}17"mocha": {18  "reporterOptions": {19    "mochaReporterOptions": {20    }21  }22}23"mocha": {24  "reporterOptions": {25    "mochaReporterOptions": {26    }27  }28}29"mocha": {30  "reporterOptions": {31    "mochaReporterOptions": {32    }33  }34}35"mocha": {36  "reporterOptions": {37    "mochaReporterOptions": {38    }39  }40}41"mocha": {42  "reporterOptions": {43    "mochaReporterOptions": {44    }45  }

Using AI Code Generation

1const { storybookTestRunner } = require('storybook-test-runner');2const { storyPlays } = storybookTestRunner();3const Button = require('./button');4describe('Button', () => {5  it('should render a button', () => {6    storyPlays(Button);7  });8});9import React from 'react';10import { storiesOf } from '@storybook/react';11export default () => {12  storiesOf('Button', module).add('default', () => (13  ));14};15{16  "scripts": {17  },18  "devDependencies": {19  }20}21import { storybookTestRunner } from 'storybook-test-runner';22const { storyPlays } = storybookTestRunner();23storybookTestRunner({24  stories: require.context('../src', true, /\.stories\.js$/),25  tests: require.context('../src', true, /\.test\.js$/)26});27import React from 'react';28import { storiesOf } from '@storybook/react';29export default () => {30  storiesOf('Button', module).add('default', () => (31  ));32};33import React from 'react';34import { storiesOf } from '@storybook/react';35export default () => {36  storiesOf('Button', module).add('default', () => (37  ));38};39{40  "scripts": {41  },42  "devDependencies": {43  }44}45import { storybookTestRunner } from 'storybook-test-runner';46const { story

Using AI Code Generation

1import Storybook from 'storybook-test-runner';2import stories from './stories';3const storybook = new Storybook(stories);4storybook.storyPlays('Button', 'Button with text', () => {5  console.log('Button with text');6});7storybook.storyPlays('Button', 'Button with emoji', () => {8  console.log('Button with emoji');9});10storybook.storyPlays('Button', 'Button with some emoji and action', () => {11  console.log('Button with some emoji and action');12});13storybook.storyPlays('Button', 'Button with some emoji and action disabled', () => {14  console.log('Button with some emoji and action disabled');15});16storybook.storyPlays('Button', 'Button as a link', () => {17  console.log('Button as a link');18});19"jest": {20}

Using AI Code Generation

1const { storybookTestRunner } = require('storybook-test-runner');2const { storybook } = storybookTestRunner();3storybook.storyPlays('Storybook Test Runner', 'Storybook Test Runner');4const { storybookTestRunner } = require('storybook-test-runner');5const { storybook } = storybookTestRunner();6storybook.storybookTestRunner('Storybook Test Runner', 'Storybook Test Runner');7const { storybookTestRunner } = require('storybook-test-runner');8const { storybook } = storybookTestRunner();9storybook.storybookTestRunner('Storybook Test Runner', 'Storybook Test Runner');10const { storybookTestRunner } = require('storybook-test-runner');11const { storybook } = storybookTestRunner();12storybook.storybookTestRunner('Storybook Test Runner', 'Storybook Test Runner');13const { storybookTestRunner } = require('storybook-test-runner');14const { storybook } = storybookTestRunner();15storybook.storybookTestRunner('Storybook Test Runner', 'Storybook Test Runner');16const { storybookTestRunner } = require('storybook-test-runner');17const { storybook } = storybookTestRunner();18storybook.storybookTestRunner('Storybook Test Runner', 'Storybook Test Runner');19const { storybookTestRunner } = require('storybook-test-runner');20const { storybook } = storybookTestRunner();21storybook.storybookTestRunner('Storybook Test Runner', 'Storybook Test Runner');22const { storybookTestRunner } = require('storybook-test-runner');23const { storybook } = storybookTestRunner();24storybook.storybookTestRunner('Storybook Test Runner', 'Storybook Test Runner');25const {

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.