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
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.
You could also refer to video tutorials over LambdaTest YouTube channel to get step by step demonstration from industry experts.
Get 100 minutes of automation test minutes FREE!!