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

How to use makeActions method in storybook-root

Best JavaScript code snippet using storybook-root

shortcuts.test.js

Source:shortcuts.test.js

...22describe('ShortcutsScreen', () => {23  it('renders correctly', () => {24    const comp = shallow(25      <ThemeProvider theme={convert(themes.light)}>26        <ShortcutsScreen shortcutKeys={shortcutKeys} {...makeActions()} />27      </ThemeProvider>28    );29    expect(comp).toExist();30  });31  it('handles a full mount', () => {32    const comp = render(33      <ThemeProvider theme={convert(themes.light)}>34        <ShortcutsScreen shortcutKeys={shortcutKeys} {...makeActions()} />35      </ThemeProvider>36    );37    expect(comp).toBeDefined();38    comp.unmount();39  });40  describe('onFocus', () => {41    it('calls setstate and clears the input on focus', () => {42      const comp = shallow(<ShortcutsScreen shortcutKeys={shortcutKeys} {...makeActions()} />);43      const instance = comp.instance();44      instance.onFocus('toolbar')();45      expect(comp.state('shortcutKeys').toolbar.shortcut).toBeNull();46      expect(comp.state('activeFeature')).toBe('toolbar');47    });48  });49  describe('onKeyDown', () => {50    it('does nothing if a modifier key is pressed', () => {51      const actions = makeActions();52      const comp = shallow(<ShortcutsScreen shortcutKeys={shortcutKeys} {...actions} />);53      const instance = comp.instance();54      instance.onFocus('focusIframe')();55      instance.onKeyDown({ isShift: true, key: 'Shift' });56      expect(actions.setShortcut).not.toHaveBeenCalled();57      expect(comp.state('shortcutKeys').focusIframe.shortcut).toBeNull();58    });59    it('changes the shortcut in state if a key is pressed', () => {60      const actions = makeActions();61      const comp = shallow(<ShortcutsScreen shortcutKeys={shortcutKeys} {...actions} />);62      const instance = comp.instance();63      instance.onFocus('focusIframe')();64      instance.onKeyDown({ key: 'P' });65      expect(actions.setShortcut).not.toHaveBeenCalled();66      expect(comp.state('shortcutKeys').focusIframe.shortcut).toEqual(['P']);67      expect(comp.state('shortcutKeys').focusIframe.error).toBe(false);68    });69    it('sets an error and the shortcut in state if a duplicate key is pressed', () => {70      const actions = makeActions();71      const comp = shallow(<ShortcutsScreen shortcutKeys={shortcutKeys} {...actions} />);72      const instance = comp.instance();73      instance.onFocus('focusIframe')();74      instance.onKeyDown({ key: 'F' });75      expect(actions.setShortcut).not.toHaveBeenCalled();76      expect(comp.state('shortcutKeys').focusIframe.shortcut).toEqual(['F']);77      expect(comp.state('shortcutKeys').focusIframe.error).toBe(true);78    });79  });80  describe('onBlur', () => {81    it('if the input is empty, restores the respective default', async () => {82      const actions = makeActions();83      const comp = shallow(<ShortcutsScreen shortcutKeys={shortcutKeys} {...actions} />);84      const instance = comp.instance();85      instance.onFocus('focusIframe')();86      await instance.onBlur();87      expect(actions.setShortcut).not.toHaveBeenCalled();88      expect(actions.restoreDefaultShortcut).toHaveBeenCalledWith('focusIframe');89      expect(comp.state('shortcutKeys').focusIframe.shortcut).toEqual(['2']);90      expect(comp.state('shortcutKeys').focusIframe.error).toBe(false);91    });92    it('if the shortcut is errored, restores the respective default', async () => {93      const actions = makeActions();94      const comp = shallow(<ShortcutsScreen shortcutKeys={shortcutKeys} {...actions} />);95      const instance = comp.instance();96      instance.onFocus('focusIframe')();97      instance.onKeyDown({ key: 'F' });98      await instance.onBlur();99      expect(actions.setShortcut).not.toHaveBeenCalled();100      expect(actions.restoreDefaultShortcut).toHaveBeenCalledWith('focusIframe');101      expect(comp.state('shortcutKeys').focusIframe.shortcut).toEqual(['2']);102      expect(comp.state('shortcutKeys').focusIframe.error).toBe(false);103    });104    it('it saves the shortcut if it is valid', () => {105      const actions = makeActions();106      const comp = shallow(<ShortcutsScreen shortcutKeys={shortcutKeys} {...actions} />);107      const instance = comp.instance();108      instance.onFocus('focusIframe')();109      instance.onKeyDown({ key: 'P' });110      instance.onBlur();111      expect(actions.setShortcut).toHaveBeenCalledWith('focusIframe', ['P']);112      expect(comp.state('shortcutKeys').focusIframe.shortcut).toEqual(['P']);113      expect(comp.state('shortcutKeys').focusIframe.error).toBe(false);114    });115  });116  describe('restoreDefaults', () => {117    it('if the input is empty, restores the respective default', async () => {118      const actions = makeActions();119      const comp = shallow(<ShortcutsScreen shortcutKeys={shortcutKeys} {...actions} />);120      const instance = comp.instance();121      instance.onFocus('focusIframe')();122      instance.onKeyDown({ key: 'P' });123      await comp.find('#restoreDefaultsHotkeys').simulate('click');124      expect(comp.state('shortcutKeys').focusIframe.shortcut).toEqual(['2']);125    });126  });...

actions.js

Source:actions.js

...41      type: RESET,42    }),43  };44};45export const clearRoom = makeActions(types.CLEAR_ROOM);46export const createRoom = makeActions(types.CREATE_ROOM);47export const emitName = makeActions(types.EMIT_NAME);48export const endRound = makeActions(types.END_ROUND);49export const getStatus = makeActions(types.GET_STATUS);50export const gotResponses = makeActions(types.GOT_RESPONSES);51export const gotRooms = makeActions(types.GOT_ROOMS);52export const joinRoom = makeActions(types.JOIN_ROOM);53export const nextList = makeActions(types.NEXT_LIST);54export const nextRound = makeActions(types.NEXT_ROUND);55export const requestListRooms = makeActions(types.REQUEST_LIST_ROOMS);56export const requestRoom = makeActions(types.REQUEST_ROOM);57export const resetDiceRoll = makeActions(types.RESET_DICE_ROLL);58export const retrieveName = makeActions(types.RETRIEVE_NAME);59export const rollDice = makeActions(types.ROLL_DICE);60export const roundEnded = makeActions(types.ROUND_ENDED);61export const roundScored = makeActions(types.ROUND_SCORED);62export const sendAnswers = makeActions(types.SEND_ANSWERS);63export const sendTallies = makeActions(types.SEND_TALLIES);64export const setGamePhase = makeActions(types.SET_GAME_PHASE);65export const setPlayers = makeActions(types.SET_PLAYERS);66export const setRound = makeActions(types.SET_ROUND);67export const startGame = makeActions(types.START_GAME);68export const startRound = makeActions(types.START_ROUND);69export const timerFired = makeActions(types.TIMER_FIRED);70export const roundAllowAnswers = makeActions(types.ROUND_ALLOW_ANSWERS);71export const roundHideList = makeActions(types.ROUND_HIDE_LIST);72export const roundSetAnswers = makeActions(types.ROUND_SET_ANSWERS);73export const roundShowTimer = makeActions(types.ROUND_SHOW_TIMER);74export const requestAllUsers = makeActions(types.PRESENCE_GET_ALL_USERS);75export const requestOnlineUsers = makeActions(types.PRESENCE_GET_ONLINE_USERS);76export const requestInvitesToMe = makeActions(types.INVITES_GET_TO_ME);77export const requestInvitesFromMe = makeActions(types.INVITES_GET_FROM_ME);78export const sendInviteForRoom = makeActions(types.INVITES_SEND_FOR_ROOM);79export const onConnect = makeActions(types.ON_CONNECT);80export const onDisconnect = makeActions(types.ON_DISCONNECT);81export const permsRequestRecording = makeActions(types.PERMS_REQUEST_RECORDING);82export const permsCheckRecording = makeActions(types.PERMS_CHECK_RECORDING);83export const audioStartRecording = makeActions(types.AUDIO_START_REC);84export const sendPushNotif = makeActions(types.SEND_PUSH_NOTIF);85export const acceptRoomInvite = makeActions(types.ACCEPT_ROOM_INVITE);86export const declineRoomInvite = makeActions(types.DECLINE_ROOM_INVITE);87export const setPushToken = makeActions(types.SET_PUSH_TOKEN);88export const showAlertMessage = makeActions(types.SHOW_ALERT_MESSAGE);89export const activateChat = makeActions(types.ACTIVATE_CHAT);90export const sendChatMessage = makeActions(types.SEND_CHAT_MESSAGE);91export const chatMessageReceived = makeActions(types.CHAT_MESSAGE_RECEIVED);92export const getChatMessages = makeActions(types.GET_CHAT_MESSAGES);...

makeCart.ts

Source:makeCart.ts

...7export const makeCart = (cartName: any) => {8	const actionTypes = makeActionTypes(cartName);9	const instance = {10		actionTypes: makeActionTypes(cartName),11		actions: makeActions(cartName, actionTypes) as Actions,12		reducer: makeReducer(cartName, actionTypes),13	};14	instances.push(instance);15	return instance;16};...

Using AI Code Generation

1import { makeActions } from 'storybook-root-decorator';2import { storiesOf } from '@storybook/react';3import { action } from '@storybook/addon-actions';4import Button from './Button';5storiesOf('Button', module)6  .addDecorator(makeActions('onClick'))7  .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>)8  .add('with some emoji', () => (9    <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>10  ));11import { makeDecorator } from 'storybook-root-decorator';12import { storiesOf } from '@storybook/react';13import { action } from '@storybook/addon-actions';14import Button from './Button';15const withActions = makeDecorator({16  wrapper: (getStory, context, { options, parameters }) => {17    const actionOptions = Object.assign({}, options, parameters);18    return getStory(context);19  },20});21storiesOf('Button', module)22  .addDecorator(withActions('onClick'))23  .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>)24  .add('with some emoji', () => (25    <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>26  ));27import { withActions } from 'storybook-root-decorator';28import { storiesOf } from '@storybook/react';29import { action } from '@storybook/addon-actions';30import Button from './Button';31storiesOf('Button', module)32  .addDecorator(withActions('onClick'))33  .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>)34  .add('with some emoji', () => (35    <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>36  ));

Using AI Code Generation

1import { makeActions } from 'storybook-root-decorator';2import { action } from '@storybook/addon-actions';3import { storiesOf } from '@storybook/react';4import React from 'react';5import MyComponent from './MyComponent';6const actions = makeActions('onButtonClick', 'onButtonClick2', 'onButtonClick3');7const actions2 = makeActions('onButtonClick', 'onButtonClick2', 'onButtonClick3');8storiesOf('MyComponent', module)9  .add('default', () => (10    <MyComponent {...actions} />11  .add('with props', () => (12    <MyComponent {...actions2} />13  ));14MIT © [arunoda](

Using AI Code Generation

1import makeActions from 'storybook-root-decorator';2import { storiesOf } from '@storybook/react';3import { action } from '@storybook/addon-actions';4const actions = makeActions(action);5storiesOf('My Component', module)6  .add('default', () => (7    <MyComponent {...actions} />8  ));9import React from 'react';10import PropTypes from 'prop-types';11const MyComponent = ({ onClick, onHover, onScroll }) => (12  <div onClick={onClick} onHover={onHover} onScroll={onScroll}>13);14MyComponent.propTypes = {15};16export default MyComponent;17const actions = makeActions({18});19const actions = makeActions(action, {20});21const actions = makeActions({22});23const actions = makeActions(action, {24});

Using AI Code Generation

1import { withRootDecorator } from 'storybook-root-decorator';2import { makeActions } from 'storybook-root-decorator';3import { storiesOf } from '@storybook/react';4import React from 'react';5import { action } from '@storybook/addon-actions';6import { withKnobs, text, boolean, number } from '@storybook/addon-knobs/react';7import { withInfo } from '@storybook/addon-info';8import { withA11y } from '@storybook/addon-a11y';9import MyComponent from '../MyComponent';10const stories = storiesOf('MyComponent', module);11stories.addDecorator(withRootDecorator);12stories.addDecorator(withKnobs);13stories.addDecorator(withInfo);14stories.addDecorator(withA11y);15stories.add('Default', () => {16  const props = {17    myProp: text('myProp', 'Hello World'),18    myOtherProp: boolean('myOtherProp', true),19    myThirdProp: number('myThirdProp', 10),20    myAction: action('myAction')21  };22  return <MyComponent {...props} />;23});24stories.add('With Actions', () => {25  const props = {26    myProp: text('myProp', 'Hello World'),27    myOtherProp: boolean('myOtherProp', true),28    myThirdProp: number('myThirdProp', 10),29    ...makeActions(['myAction1', 'myAction2', 'myAction3'])30  };31  return <MyComponent {...props} />;32});

Using AI Code Generation

1import { makeActions } from 'storybook-root-decorator';2const actions = makeActions('onToggle');3export default {4  decorators: [makeActions('onToggle')],5};6export const withText = () => <Toggle {...actions} />;7export const withEmoji = () => <Toggle {...actions} />;8export const withEmojiAndText = () => <Toggle {...actions} />;9export const withEmojiAndTextAndAction = () => (10  <Toggle {...actions} onToggle={action('onToggle')} />11);12import { withInfo } from 'storybook-addon-jsx';13const actions = makeActions('onToggle');14export default {15  decorators: [makeActions('onToggle'), withInfo],16};17export const withText = () => <Toggle {...actions} />;18export const withEmoji = () => <Toggle {...actions} />;19export const withEmojiAndText = () => <Toggle {...actions} />;20export const withEmojiAndTextAndAction = () => (21  <Toggle {...actions} onToggle={action('onToggle')} />22);

Using AI Code Generation

1import { makeActions } from 'storybook-root-decorator';2const actions = makeActions(['onAction1', 'onAction2']);3import React from 'react';4import { storiesOf } from '@storybook/react';5import { action } from '@storybook/addon-actions';6import { withKnobs, text } from '@storybook/addon-knobs';7import Test from './test';8import { addDecorator } from 'storybook-root-decorator';9addDecorator(withKnobs);10storiesOf('Test', module)11  .add('default', () => <Test {...actions} text={text('Text', 'Hello')} />);12MIT © [sajib1066](

Using AI Code Generation

1import { makeActions } from 'storybook-root-decorator';2import {action} from '@storybook/addon-actions';3export default {4};5const actions = makeActions(['onClick', 'onMouseOver', 'onMouseOut']);6export const Test = () => (7    <button {...actions.onClick}>Click me</button>8    <button {...actions.onMouseOver}>Hover me</button>9    <button {...actions.onMouseOut}>Leave me</button>10);11Test.story = {12  parameters: {13    actions: {14    },15  },16};17import { render, screen } from '@testing-library/react';18import userEvent from '@testing-library/user-event';19import { Test } from './test';20describe('Test', () => {21  test('should call onClick', () => {22    const onClick = jest.fn();23    render(<Test onClick={onClick} />);24    userEvent.click(screen.getByText('Click me'));25    expect(onClick).toHaveBeenCalled();26  });27  test('should call onMouseOver', () => {28    const onMouseOver = jest.fn();29    render(<Test onMouseOver={onMouseOver} />);30    userEvent.hover(screen.getByText('Hover me'));31    expect(onMouseOver).toHaveBeenCalled();32  });33  test('should call onMouseOut', () => {34    const onMouseOut = jest.fn();35    render(<Test onMouseOut={onMouseOut} />);36    userEvent.unhover(screen.getByText('Leave me'));37    expect(onMouseOut).toHaveBeenCalled();38  });39});40MIT © [pranavp10](

Using AI Code Generation

1import { makeActions } from 'storybook-root'2const actions = makeActions({3})4import React from 'react'5import { storiesOf } from 'storybook-root'6import Test from './test'7storiesOf('Test', module)8  .add('test1', () => <Test />)9  .add('test2', () => <Test />)10import React from 'react'11import { storiesOf } from 'storybook-root'12import Test from './test'13storiesOf('Test', module)14  .add('test1', () => <Test />)15  .add('test2', () => <Test />)16import React from 'react'17import { storiesOf } from 'storybook-root'18import Test from './test'19storiesOf('Test', module)20  .add('test1', () => <Test />)21  .add('test2', () => <Test />)22import React from 'react'23import { storiesOf } from 'storybook-root'24import Test from './test'25storiesOf('Test', module)26  .add('test1', () => <Test />)27  .add('test2', () => <Test />)28import React from 'react'29import { storiesOf } from 'storybook-root'30import Test from './test'31storiesOf('Test', module)32  .add('test1', () => <Test />)33  .add('test2', () => <Test />)34import React from 'react'35import { storiesOf } from 'storybook-root'36import Test from './test'37storiesOf('Test', module)38  .add('test1', () => <Test />)39  .add('test2', () => <Test />)

Using AI Code Generation

1import { makeActions } from 'storybook-root-decorator';2import { actions } from '@storybook/addon-actions';3const action = actions('onClick', 'onMouseOver');4const actions = makeActions(action);5import { makeDecorator } from 'storybook-root-decorator';6import { actions } from '@storybook/addon-actions';7const action = actions('onClick', 'onMouseOver');8const actions = makeDecorator(action);9MIT © [julianjorgensen](

Using AI Code Generation

1import { makeActions } from 'storybook-root';2const actions = makeActions('button', ['click', 'hover']);3const buttons = makeStories('button', actions);4import { configure } from '@storybook/react';5import requireContext from 'require-context.macro';6const req = requireContext('../', true, /.stories.js$/);7function loadStories() {8  req.keys().forEach(filename => req(filename));9}10configure(loadStories, module);11import { configure } from '@storybook/react';12import requireContext from 'require-context.macro';13const req = requireContext('../', true, /.stories.js$/);14function loadStories() {15  req.keys().forEach(filename => req(filename));16}17configure(loadStories, module);18import { configure, addDecorator } from '@storybook/react';19import { withInfo } from '@storybook/addon-info';20import { withKnobs } from '@storybook/addon-knobs';21import { withA11y } from '@storybook/addon-a11y';22import { withTests } from '@storybook/addon-jest';23import { withConsole } from '@storybook/addon-console';24import { withOptions } from '@storybook/addon-options';25import { withViewport } from '@storybook/addon-viewport';26import { withPerformance } from 'storybook-addon-performance';27import { withBackgrounds } from '@storybook/addon-backgrounds';28import { withContexts } from

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.