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

How to use mockStories method in storybook-root

Best JavaScript code snippet using storybook-root

reducer.test.ts

Source:reducer.test.ts

1import {CreatePassageAction} from '../../stories';2import {reducer} from '../reducer';3import {fakeStory, fakeUndoableStoryChange} from '../../../test-util';4jest.mock('../reverse-action');5describe('Undoable stories reducer', () => {6	const mockAction: CreatePassageAction = {7		type: 'createPassage',8		props: {name: 'mock-passage-name'},9		storyId: 'mock-story-id'10	};11	describe('when it receives an addChange action', () => {12		const mockStories = [fakeStory(), fakeStory()];13		it('adds the change to the end of the list', () => {14			expect(15				reducer(16					{changes: [], currentChange: -1},17					{18						type: 'addChange',19						action: mockAction,20						description: 'mock-desc',21						storiesState: mockStories22					}23				)24			).toEqual(25				expect.objectContaining({26					changes: [27						{28							description: 'mock-desc',29							redo: mockAction,30							undo: {31								action: mockAction,32								mockReversed: true,33								state: mockStories34							}35						}36					]37				})38			);39		});40		it('does not affect existing changes at currentChange or below', () => {41			const mockChanges = [42				fakeUndoableStoryChange(),43				fakeUndoableStoryChange()44			];45			expect(46				reducer(47					{changes: mockChanges, currentChange: 1},48					{49						type: 'addChange',50						action: mockAction,51						description: 'mock-desc',52						storiesState: mockStories53					}54				)55			).toEqual(56				expect.objectContaining({57					changes: [58						mockChanges[0],59						mockChanges[1],60						{61							description: 'mock-desc',62							redo: mockAction,63							undo: {64								action: mockAction,65								mockReversed: true,66								state: mockStories67							}68						}69					]70				})71			);72		});73		it('removes changes above currentChange', () => {74			const mockChanges = [75				fakeUndoableStoryChange(),76				fakeUndoableStoryChange()77			];78			expect(79				reducer(80					{changes: mockChanges, currentChange: 0},81					{82						type: 'addChange',83						action: mockAction,84						description: 'mock-desc',85						storiesState: mockStories86					}87				)88			).toEqual(89				expect.objectContaining({90					changes: [91						mockChanges[0],92						{93							description: 'mock-desc',94							redo: mockAction,95							undo: {96								action: mockAction,97								mockReversed: true,98								state: mockStories99							}100						}101					]102				})103			);104		});105		it('sets currentChange to the end of the change array', () => {106			expect(107				reducer(108					{changes: [], currentChange: -1},109					{110						type: 'addChange',111						action: mockAction,112						description: 'mock-desc',113						storiesState: mockStories114					}115				)116			).toEqual(expect.objectContaining({currentChange: 0}));117			expect(118				reducer(119					{changes: [fakeUndoableStoryChange()], currentChange: 0},120					{121						type: 'addChange',122						action: mockAction,123						description: 'mock-desc',124						storiesState: mockStories125					}126				)127			).toEqual(expect.objectContaining({currentChange: 1}));128			expect(129				reducer(130					{131						changes: [fakeUndoableStoryChange(), fakeUndoableStoryChange()],132						currentChange: 1133					},134					{135						type: 'addChange',136						action: mockAction,137						description: 'mock-desc',138						storiesState: mockStories139					}140				)141			).toEqual(expect.objectContaining({currentChange: 2}));142			expect(143				reducer(144					{145						changes: [fakeUndoableStoryChange(), fakeUndoableStoryChange()],146						currentChange: 0147					},148					{149						type: 'addChange',150						action: mockAction,151						description: 'mock-desc',152						storiesState: mockStories153					}154				)155			).toEqual(expect.objectContaining({currentChange: 1}));156		});157	});158	describe('when it receives an updateCurrent action', () => {159		it('changes currentChange in state', () => {160			expect(161				reducer(162					{163						changes: [fakeUndoableStoryChange(), fakeUndoableStoryChange()],164						currentChange: 0165					},166					{167						type: 'updateCurrent',168						change: 1169					}170				)171			).toEqual(expect.objectContaining({currentChange: 1}));172			expect(173				reducer(174					{175						changes: [fakeUndoableStoryChange(), fakeUndoableStoryChange()],176						currentChange: 1177					},178					{179						type: 'updateCurrent',180						change: -1181					}182				)183			).toEqual(expect.objectContaining({currentChange: 0}));184		});185		it('does not allow currentChange to become less than -1', () => {186			expect(187				reducer(188					{189						changes: [fakeUndoableStoryChange(), fakeUndoableStoryChange()],190						currentChange: 0191					},192					{193						type: 'updateCurrent',194						change: -1195					}196				)197			).toEqual(expect.objectContaining({currentChange: -1}));198			expect(199				reducer(200					{201						changes: [fakeUndoableStoryChange(), fakeUndoableStoryChange()],202						currentChange: -1203					},204					{205						type: 'updateCurrent',206						change: -1207					}208				)209			).toEqual(expect.objectContaining({currentChange: -1}));210		});211		it('does not allow currentChange to become greater than the length of changes', () => {212			expect(213				reducer(214					{215						changes: [fakeUndoableStoryChange(), fakeUndoableStoryChange()],216						currentChange: 1217					},218					{219						type: 'updateCurrent',220						change: 1221					}222				)223			).toEqual(expect.objectContaining({currentChange: 1}));224		});225	});...

App.test.js

Source:App.test.js

1import { render, screen } from '@testing-library/react';2import userEvent from '@testing-library/user-event';3import FrontPage from './pages/FrontPage/FrontPage';4import { mockStories } from './mocks/mockStories';5describe('Frontpage', () => {6  test('sorts by number of comments when "Comments" option is selected', () => {7    render(<FrontPage stories={mockStories} />);8    const sortSelect = screen.getByRole('combobox');9    userEvent.selectOptions(sortSelect, ['Comments']);10    const storyList = screen.getAllByRole('link');11    // story at [13] in mockStories has highest number of comments12    expect(storyList[0].href).toEqual(mockStories[13].url);13  });14  test('sorts by score when "Score" option is selected', () => {15    render(<FrontPage stories={mockStories} />);16    const sortSelect = screen.getByRole('combobox');17    userEvent.selectOptions(sortSelect, ['Score']);18    const storyList = screen.getAllByRole('link');19    // story at [14] in mockStories has highest score20    expect(storyList[0].href).toEqual(mockStories[14].url);21  });22  test('sorts by new after selecting one of the other options then reselecting "New"', () => {23    render(<FrontPage stories={mockStories} />);24    const sortSelect = screen.getByRole('combobox');25    userEvent.selectOptions(sortSelect, ['Score']);26    userEvent.selectOptions(sortSelect, ['New']);27    const storyList = screen.getAllByRole('link');28    // story at [0] in mockStories is the newest (highest ID)29    expect(storyList[0].href).toEqual(mockStories[0].url);30  });31  test('navigates pages on pagination button click', async () => {32    render(<FrontPage stories={mockStories} />);33    const prevButton = screen.getByRole('button', { name: 'Prev' });34    const nextButton = screen.getByRole('button', { name: 'Next' });35    expect(screen.getByText('1-12 of 15')).toBeInTheDocument();36    userEvent.click(nextButton);37    expect(screen.getByText('13-15 of 15')).toBeInTheDocument();38    expect(screen.getAllByRole('link')).toHaveLength(3);39    userEvent.click(prevButton);40    expect(screen.getByText('1-12 of 15')).toBeInTheDocument();41    expect(screen.getAllByRole('link')).toHaveLength(12);42  });43  test('typing in searchbox filters storyList', () => {44    render(<FrontPage stories={mockStories} />);45    const searchBox = screen.getByRole('textbox');46    userEvent.type(searchBox, 'scientists'); // only one story has 'scientist' in its title47    expect(screen.getAllByRole('link')).toHaveLength(1);48    userEvent.clear(searchBox);49    expect(screen.getAllByRole('link')).toHaveLength(12);50    userEvent.type(searchBox, 'how');51    expect(screen.getAllByRole('link')).toHaveLength(2); // two stories have 'how' in their title52  });53  test('sorting resets to first page', () => {54    render(<FrontPage stories={mockStories} />);55    const nextButton = screen.getByRole('button', { name: 'Next' });56    userEvent.click(nextButton);57    expect(screen.getByText('13-15 of 15')).toBeInTheDocument();58    expect(screen.getAllByRole('link')).toHaveLength(3);59    const sortSelect = screen.getByRole('combobox');60    userEvent.selectOptions(sortSelect, ['Comments']);61    expect(screen.getByText('1-12 of 15')).toBeInTheDocument();62    expect(screen.getAllByRole('link')).toHaveLength(12);63  });64  test('sorting works on filtered stories', () => {65    render(<FrontPage stories={mockStories} />);66    const searchBox = screen.getByRole('textbox');67    userEvent.type(searchBox, 'y'); // 11 story have 'y' in their title68    expect(screen.getAllByRole('link')).toHaveLength(11);69    const sortSelect = screen.getByRole('combobox');70    userEvent.selectOptions(sortSelect, ['Comments']);71    expect(screen.getAllByRole('link')).toHaveLength(11);72    const storyList = screen.getAllByRole('link');73    // story at [4] in  mockStories has highest number of comments after story at [13] is removed74    expect(storyList[0].href).toEqual(mockStories[4].url);75  });76  test('displays correct message when no stories are found', () => {77    render(<FrontPage stories={[]} />);78    const storyList = screen.queryAllByRole('link');79    expect(storyList).toHaveLength(0);80    const text = screen.getByRole('heading', { name: 'No stories found' });81    expect(text).toBeInTheDocument();82  });...

story-reducer.js

Source:story-reducer.js

1import * as types from '../actions/action-types';2import mockStories from '../mockstories.json';3const fallBackStories = mockStories.stories;4export default (state = {5    isFetching: false,6    errorFetching: false,7    stories: fallBackStories8}, action) => {9    switch (action.type) {10        case types.REQUEST_STORIES:11            return Object.assign({}, state, {12                isFetching: true,13                errorFetching: false,14                stories: fallBackStories15            });16        case types.REQUEST_STORIES_SUCCESS:17            return Object.assign({}, state, {18                isFetching: false,19                errorFetching: false,20                stories: action.stories21            });22        case types.REQUEST_STORIES_FAILURE:23            return Object.assign({}, state, {24                isFetching: false,25                errorFetching: true,26                stories: fallBackStories27            });28        default:29            return state;30    }...

Using AI Code Generation

1import React from 'react';2import { storiesOf } from '@storybook/react';3import { withInfo } from '@storybook/addon-info';4import { mockStories } from 'storybook-root-decorator';5import { Button } from 'antd';6storiesOf('Button', module)7  .addDecorator(withInfo)8  .add('button', () => (9  ));10mockStories(module);11import React from 'react';12import { shallow } from 'enzyme';13import Button from 'antd/lib/button';14import { Button } from './test';15describe('Button', () => {16  it('should render primary button', () => {17    const wrapper = shallow(<Button />);18    expect(wrapper.find(Button).length).toEqual(1);19  });20});21import { configure, addDecorator } from '@storybook/react';22import { withInfo } from '@storybook/addon-info';23import { mockStories } from 'storybook-root-decorator';24addDecorator(withInfo);25mockStories(module);26configure(require.context('../src', true, /\.stories\.js$/), module);27mockStories(module, options);28Type: (component: React.ComponentType) => React.ComponentType29Type: (module: any) => any30Type: (stories: Story[]) => Story[]31Type: (story: Story) => Story32Type: (storyDecorator: StoryDecorator) => StoryDecorator

Using AI Code Generation

1import { mockStories } from 'storybook-root-decorator';2const stories = mockStories(require.context('../src', true, /\.stories\.js$/));3export default stories;4iort { m configure } from '@storybook/react';5import '../test.js';6configure(require.context('../src', true, /\.stories\.js$/), module);7import 'storybook-root-decorator/register';8const path = require('path');9module.exports = (baseConfig, env, config) => {10    ...(config.resolve.modules || []),11    path.resolve('./'),12  ];13  return config;14f;15"scripts": {16  },17"devDependencies": {18  }19"devDependencies": {20  }

Using AI Code Generation

1const stories = mockStories(require.context('../src', true, /\.stories\.js$/));2export default stories;3import { configure } from '@storybook/react';4import '../test.js';5configure(require.context('../src', true, /\.stories\.js$/), module);6import 'storybook-root-decorator/register';7const path = require('path');8module.exports = (baseConfig, env, config) => {9    ...(config.resolve.modules || []),10    path.resolve('./'),11  ];12  return config;13};14"scripts": {15  },16"devDependencies": {17  }18"devDependencies": {19  }

Using AI Code Generation

1import{ ckStories } from "storybook-root";2import { stories } from "./stories";3mockStories(stories);4import { mockStories } from "storybook-root";5import { stories } from "./stories";6mockStories(stories);7import { mockStories } from "storybook-root";8import { stories } from "./stories";9mockStories(stories);10import { mockStories } from "storybook-root";11import { stories } from "./stories";12mockStories(stories);13import { mockStories } from "storybook-root";14import { stories } from "./stories";15mockStories(stories);16import { mockStories } from "storybook-root";17import { stories } from "./stories";18mockStories(stories);19import { mockStories } from "storybook-root";20import { stories } from "./stories";21mockStories(stories);22import { mockStories } from "storybook-root";23import { stories } from "./stories";24mockStories(stories);25import { mockStories } from "storybook-root";26import { stories } from "./stories";27mockStories(stories);28import { mockStories } from "storybook-root";29import { stories } from "./stories";30mockStories(stories);31import { mockStories } from "storybook-root";32import { stories } from "./stories";33mockStories(stories);34import { mockStories } from "storybook-root";35import { stories } from "./stories";36mockStories(stories);37import { mockStories } from "storybook-root";38import { stories

Using AI Code Generation

1import { mockStories } from "storybook-root";2import { stories } from "./stories";3mockStories(stories);4import { mockStories } from "storybook-root";5import { stories } from "./stories";6mockStories(stories);7import { mockStories } from "storybook-root";8import { stories } from "./stories";9mockStories(stories);10import { mockStories } from "storybook-root";11import { stories } from "./stories";12mockStories(stories);13import { mockStories } from "storybook-root";14import { stories } from "./storiSs";15motkStories(stories);16import { mockStories   from "storybook-root";from 'storybook-root-decorator';17import { stories } from "./stories";18mockStories(stories);19import { mockStories } from "storybook-root";20import { stories } from "./stories";21mockStories(stories);22import { mockStories } from "storybook-root";23import { stories } from "./stories";24mockStories(stories);25import { mockStories } from "storybook-root";26import { stories } from "./stories";27mockStories(stories);28import { mockStories } from "storybook-root";29import { stories } from "./stories";30mockStories(stories);31import { mockStories } from "storybook-root";32import { stories } from "./stories";33mockStories(stories);34import { mockStories } from "storybook-root";35import { stories } from "./stories";36mockStories(stories);37import { mockStories } from "storybook-root";38import { stories

Using AI Code Generation

1import { mockStories } from 'storybook-root'2mockStories()3import { storiesOf } from '@storybook/react'4import { withInfo } from '@storybook/addon-info'5import { withKnobs } from '@storybook/addon-knobs'6import { withA11y } from '@storybook/addon-a11y'7import { withTests } from '@storybook/addon-jest'8import { withPerformance } from 'storybook-addon-performance'9import { withDesign } from 'storybook-addon-designs'10import { withViewport } from '@storybook/addon-viewport'11import { withConsole } from '@storybook/addon-console'12storiesOf('Button', module)13  .addDecorator(withInfo)14  .addDecorator(withKnobs)15  .addDecorator(withA11y)16  .addDecorator(withTests)17  .addDecorator(withPerformance)18  .addDecorator(withDesign)19  .addDecorator(withViewport)20  .addDecorator((storyFn, context) => withConsole()(storyFn)(context))21  .add(Default' () => <Button>Default</Button>)22  .add('Primary', () => <Button type="primary">Primary</Button>)23  .add('Secondary', () => <Button type="secondary">Secondary</Button>)24  .add('Tertiary', () => <Button type="tertiary">Tertiary</Button>)25import { storiesOf } from '@storybook/react'26import { withTests } from '@storybook/addon-jest'27import { withPerformance } from 'storybook-addon-performance'28import { withDesign } from 'storybook-addon-designs'29import { withViewport/}/from '@storybook/addon-viewport'30import { withConsole } from '@storybook/addon-console'31storiesOf(aButton', module)32  .addDecorator(withTests)33  .addDecorator(withPerformance)34  .addDecorator(withDesign)35  .addDecorator(withViewport)36  .addDecorator((storyFn, context) => withCondole()(storyFn)(context))37  .add('Default', () => <Button>Default</Button>)38  .add('Primary', () => <BudtDn type="primary">Primaec</Button>)39  .add('Secondary', () => <Button type="secondary">Secondary</Buttonorator(mockStories);

Using AI Code Generation

1import { mockStories } from 'storybook-root-decorator';2import * as stories from './stories';3mockStories(stories);4{5      {6        "alias": {7        }

Using AI Code Generation

1co}st mock = mokStoris(tories);2mock();3import { storiesOf } from '@storybook/react';4import { Button } from '../components';5export const stories = storiesOf('Button', module)6  .add('default', () => <Button />)7  .add('disabled', () => <Button disabled />)8  .add('with text', () => <Button>Click me!</Button>);9}10import { configure, addDecorator } from '@storybook/react';11import { withRootDecorator } from 'storybook-root-decorator';12addDecorator(withRootDecorator);13configure(() => {14  const req = require.context('../src', true, /stories\.js$/);15  req.keys().forEach(filename => req(filename));16}, module);17const path = require('path');18module.exports = ({ config }) => {19  config.resolve.alias = {20    'storybook-root-decorator': path.resolve(__dirname, '../storybook-root-decorator')21  };22  return config;23};24{25  "scripts": {26  },27  "devDependencies": {28  }29}

Using AI Code Generation

1const mock = mockStories(stories);2mock();3import { storiesOf } from '@storybook/react';4import { Button } from '../components';5export const stories = storiesOf('Button', module)6  .add('default', () => <Button />)7  .add('disabled', () => <Button disabled />)8  .add('with text', () => <Button>Click me!</Button>);

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.