How to use storyArgs method in storybook-root
Best JavaScript code snippet using storybook-root
stories-theme.js
Source:stories-theme.js 
1export const themes = {2 default: {3 name: 'light',4 args: {5 colorScheme: 'light',6 primaryColor: '#3f729b',7 primaryColorLight0: '#ecf5fc',8 primaryColorLight1: '#c2e0ff',9 gray0: '#666',10 gray1: '#919191',11 black: '#0a0a0a',12 textColor: '#0a0a0a',13 textColorMid: '#808080',14 textColorInverse: '#fefefe',15 surface0: '#e2e2e2',16 surface1: '#fefefe',17 surface2: '#f5f5f5',18 surface3: '#ffffff',19 borderColor: '#cecece',20 shadow0: '0 2px 4px rgb(0 0 0 / 25%)',21 shadow1: '0 4px 4px rgb(0 0 0 / 25%)',22 alertColor: '#cc4b37',23 cautionColor: '#f2c962',24 successColor: '#4caf50',25 inactiveColor: '#808080',26 disabledColor: '#e6e6e6',27 fontFamily: 'Helvetica, Arial, sans-serif',28 formBorderColor: 'var(--border-color)',29 formBorderColorAlert: 'var(--alert-color)',30 formBackgroundColor: 'var(--surface-1)',31 formDisabledBackgroundColor: 'var(--disabled-color)',32 formTextColor: 'var(--text-color)',33 formTextColorInverse: 'var(--text-color-inverse)',34 checkmarkWidth: '3px',35 checkmarkColor: 'var(--success-color)',36 connectionIconFill: 'var(--primary-color)',37 multiSelectTextColor: 'var(--text-color)',38 multiSelectBackgroundColor: 'var(--surface-1)',39 multiSelectTagBorderColor: 'var(--primary-color-light-1)',40 multiSelectTagBackgroundColor: 'var(--primary-color-light-0)',41 multiSelectOptionHoverBackground: 'var(--surface-2)',42 singleSelectTextColor: 'var(--dt-form-text-color)',43 singleSelectTextColorInverse: 'var(--dt-form-text-color-inverse)',44 dttextColor: 'var(--dt-form-text-color)',45 dttextColorMid: 'var(--dt-form-text-color-mid)',46 dttextColorInverse: 'var(--dt-form-text-color-inverse)',47 textBackgroundColor: 'var(--dt-form-background-color)',48 textBorderColor: 'var(--dt-form-border-color)',49 textBorderColorAlert: 'var(--dt-form-border-color-alert)',50 textDisabledBackgroundColor: 'var(--dt-form-disabled-background-color)',51 textareaBorderColor: 'var(--dt-form-border-color)',52 textareaBackgroundColor: 'var(--dt-form-background-color)',53 textareaDisabledBackgroundColor: 'var(--dt-form-disabled-background-color)',54 textareaTextColor: 'var(--dt-form-text-color)',55 textareaTextcolorInverse: 'var(--dt-form-text-color-inverse)',56 labelFontSize: '14px',57 labelFontWeight: '700',58 labelTextColor: 'var(--dt-form-text-color)',59 labelTooltipColor: 'var(--gray-0)',60 labelTooltipBackground: 'var(--surface-2)',61 toggleBackgroundColorOn: 'var(--primary-color)',62 toggleBackgroundColorOff: 'var(--surface-3)',63 toggleIconSuccess: 'var(--success-color)',64 toggleIconAlert: 'var(--alert-color)',65 spinnerColor1: 'var(--gray-1)',66 spinnerColor2: 'var(--black)',67 tileFontFamily: 'var(--font-family)',68 tileFontSize: '14px;',69 tileFontWeight: '700',70 tileBackground: 'var(--surface-1)',71 tileBorderColor: 'var(--border-color)',72 tileShadow: 'var(--shadow-0)',73 tileHeaderColor: 'var(--primary-color)',74 listheaderBackground: 'var(--dt-tile-background-color, #fefefe)',75 listheaderBackgroundHover: 'var(--dt-list-hover-background-color, #ecf5fc)',76 listSortArrowColor: 'var(--dt-list-sort-arrow-color, #808080)',77 listSortArrowColorHighlight: 'var(--primary-color, #3f729b)',78 listHeaderColor: 'var(--dt-list-header-color, #0a0a0a)',79 alertTextColorLight: '#fff',80 alertTextColorDark: '#000',81 alertTextColor: 'var(--text-color)',82 alertFontFamily: 'var(--font-family)',83 alertFontSize: '14px;',84 alertFontWeight: '700',85 alertBackground: 'var(--surface-1)',86 alertBorderColor: 'var(--border-color)',87 alertShadow: 'var(--shadow-0)',88 background: 'var(--surface-0)',89 },90 },91 dark: {92 name: 'dark',93 args: {94 colorScheme: 'dark',95 primaryColor: 'hsla(207, 87%, 40%, 1)',96 primaryColorLight0: 'hsla(207, 87%, 46%, 1)',97 primaryColorLight1: 'hsla(207, 97%, 36%, 1)',98 gray0: '#666',99 gray1: '#919191',100 black: '#0a0a0a',101 textColor: '#fefefe',102 textColorInverse: '#999',103 surface0: '#212529',104 surface1: '#343a40',105 surface2: '#495057',106 surface3:'#868e96',107 borderColor: '#868e96v',108 shadow0: '0 2px 4px rgb(0 0 0 / 25%)',109 shadow1: '0 4px 4px rgb(0 0 0 / 25%)',110 alertColor: '#cc4b37',111 cautionColor: '#f2c962',112 successColor: '#4caf50',113 inactiveColor: '#808080',114 disabledColor: '#343a40',115 fontFamily: 'Helvetica, Arial, sans-serif',116 formBorderColor: 'var(--border-color)',117 formBorderColorAlert: 'var(--alert-color)',118 formBackgroundColor: 'var(--surface-3)',119 formDisabledBackgroundColor: 'var(--disabled-color)',120 formTextColor: 'var(--text-color)',121 formTextColorInverse: 'var(--text-color-inverse)',122 checkmarkWidth: '3px',123 checkmarkColor: 'var(--success-color)',124 connectionIconFill: 'var(--primary-color)',125 multiSelectTextColor: 'var(--text-color)',126 multiSelectBackgroundColor: 'var(--surface-3)',127 multiSelectTagBorderColor: 'var(--primary-color-light-1)',128 multiSelectTagBackgroundColor: 'var(--primary-color-light-0)',129 multiSelectOptionHoverBackground: 'var(--surface-2)',130 singleSelectTextColor: 'var(--dt-form-text-color)',131 singleSelectTextColorInverse: 'var(--dt-form-text-color-inverse)',132 dttextColor: 'var(--dt-form-text-color)',133 dttextColorInverse: 'var(--dt-form-text-color-inverse)',134 textBackgroundColor: 'var(--dt-form-background-color)',135 textBorderColor: 'var(--dt-form-border-color)',136 textBorderColorAlert: 'var(--dt-form-border-color-alert)',137 textDisabledBackgroundColor: 'var(--dt-form-disabled-background-color)',138 textareaBorderColor: 'var(--dt-form-border-color)',139 textareaBackgroundColor: 'var(--dt-form-background-color)',140 textareaDisabledBackgroundColor: 'var(--dt-form-disabled-background-color)',141 textareaTextColor: 'var(--dt-form-text-color)',142 textareaTextcolorInverse: 'var(--dt-form-text-color-inverse)',143 labelFontSize: '14px',144 labelFontWeight: '700',145 labelTooltipColor: 'var(--gray-0)',146 labelTooltipBackground: 'var(--surface-2)',147 toggleBackgroundColorOn: 'var(--primary-color)',148 toggleBackgroundColorOff: 'var(--surface-3)',149 toggleIconSuccess: 'var(--success-color)',150 toggleIconAlert: 'var(--alert-color)',151 spinnerColor1: 'var(--gray-1)',152 spinnerColor2: 'var(--black)',153 tileFontFamily: 'var(--font-family)',154 tileFontSize: '14px;',155 tileFontWeight: '700',156 tileBackground: 'var(--surface-1)',157 tileBorderColor: 'var(--border-color)',158 tileShadow: 'var(--shadow-0)',159 tileHeaderColor: 'var(--primary-color)',160 alertTextColorLight: '#fff',161 alertTextColorDark: '#000',162 alertTextColor: 'var(--text-color)',163 alertFontFamily: 'var(--font-family)',164 alertFontSize: '14px;',165 alertFontWeight: '700',166 alertBackground: 'var(--surface-1)',167 alertBorderColor:'var(--border-color)',168 alertShadow: 'var(--shadow-0)',169 background: 'var(--surface-0)',170 },171 },172 dim: {173 name: 'dim',174 args: {175 colorScheme: 'dark',176 primaryColor: 'hsla(207, 87%, 40%, 1)',177 primaryColorLight0: 'hsla(207, 87%, 46%, 1)',178 primaryColorLight1: 'hsla(207, 97%, 36%, 1)',179 gray0: '#666',180 gray1: '#919191',181 black: '#0a0a0a',182 textColor: '#fefefe',183 textColorInverse: '#999',184 surface0: 'hsla(207, 9%, 31%, 1)',185 surface1: 'hsla(207, 7%, 56%, 1)',186 surface2: 'hsla(207, 7%, 60%, 1)',187 surface3:'hsla(207, 4%, 70%, 1)',188 borderColor: '#868e96v',189 shadow0: '0 2px 4px rgb(0 0 0 / 25%)',190 shadow1: '0 4px 4px rgb(0 0 0 / 25%)',191 alertColor: '#cc4b37',192 cautionColor: '#f2c962',193 successColor: '#4caf50',194 inactiveColor: '#808080',195 disabledColor: '#343a40',196 fontFamily: 'Helvetica, Arial, sans-serif',197 formBorderColor: 'var(--border-color)',198 formBorderColorAlert: 'var(--alert-color)',199 formBackgroundColor: 'var(--surface-3)',200 formDisabledBackgroundColor: 'var(--disabled-color)',201 formTextColor: 'var(--text-color)',202 formTextColorInverse: 'var(--text-color-inverse)',203 checkmarkWidth: '3px',204 checkmarkColor: 'var(--success-color)',205 connectionIconFill: 'var(--primary-color)',206 multiSelectTextColor: 'var(--text-color)',207 multiSelectBackgroundColor: 'var(--surface-3)',208 multiSelectTagBorderColor: 'var(--primary-color-light-1)',209 multiSelectTagBackgroundColor: 'var(--primary-color-light-0)',210 multiSelectOptionHoverBackground: 'var(--surface-2)',211 singleSelectTextColor: 'var(--dt-form-text-color)',212 singleSelectTextColorInverse: 'var(--dt-form-text-color-inverse)',213 dttextColor: 'var(--dt-form-text-color)',214 dttextColorInverse: 'var(--dt-form-text-color-inverse)',215 textBackgroundColor: 'var(--dt-form-background-color)',216 textBorderColor: 'var(--dt-form-border-color)',217 textBorderColorAlert: 'var(--dt-form-border-color-alert)',218 textDisabledBackgroundColor: 'var(--dt-form-disabled-background-color)',219 textareaBorderColor: 'var(--dt-form-border-color)',220 textareaBackgroundColor: 'var(--dt-form-background-color)',221 textareaDisabledBackgroundColor: 'var(--dt-form-disabled-background-color)',222 textareaTextColor: 'var(--dt-form-text-color)',223 textareaTextcolorInverse: 'var(--dt-form-text-color-inverse)',224 labelFontSize: '14px',225 labelFontWeight: '700',226 labelTooltipColor: 'var(--gray-0)',227 labelTooltipBackground: 'var(--surface-2)',228 toggleBackgroundColorOn: 'var(--primary-color)',229 toggleBackgroundColorOff: 'var(--surface-3)',230 toggleIconSuccess: 'var(--success-color)',231 toggleIconAlert: 'var(--alert-color)',232 spinnerColor1: 'var(--gray-1)',233 spinnerColor2: 'var(--black)',234 tileFontFamily: 'var(--font-family)',235 tileFontSize: '14px;',236 tileFontWeight: '700',237 tileBackground: 'var(--surface-1)',238 tileBorderColor: 'var(--border-color)',239 tileShadow: 'var(--shadow-0)',240 tileHeaderColor: 'var(--primary-color)',241 alertTextColorLight: '#fff',242 alertTextColorDark: '#000',243 alertTextColor: 'var(--text-color)',244 alertFontFamily: 'var(--font-family)',245 alertFontSize: '14px;',246 alertFontWeight: '700',247 alertBackground: 'var(--surface-1)',248 alertBorderColor: 'var(--border-color)',249 alertShadow: 'var(--shadow-0)',250 background: 'var(--surface-0)',251 },252 },253};254export const contexts = ['primary', 'alert', 'caution', 'success', 'inactive', 'disabled'];255export const argTypes = {256 theme: { control: 'select', options: Object.keys(themes), defaultValue: ['default'] },257 RTL: { control: 'boolean', defaultValue: false },258 primaryColor: { control: 'color' },259 primaryColorLight0: { control: 'color' },260 primaryColorLight1: { control: 'color' },261 gray0: { control: 'color' },262 gray1: { control: 'color' },263 black: { control: 'color' },264 textColor: { control: 'color' },265 textColorInverse: { control: 'color' },266 surface0: { control: 'color' },267 surface1: { control: 'color' },268 surface2: { control: 'color' },269 borderColor: { control: 'color' },270 shadow0: { control: 'text' },271 shadow1: { control: 'text' },272 alertColor: { control: 'color' },273 cautionColor: { control: 'color' },274 successColor: { control: 'color' },275 inactiveColor: { control: 'color' },276 disabledColor: { control: 'color' },277 fontFamily: { control: 'text' },278 formBorderColor: { control: 'color' },279 formBorderColorAlert: { control: 'color' },280 formBackgroundColor: { control: 'color' },281 formDisabledBackgroundColor: { control: 'color' },282 formTextColor: { control: 'color' },283 formTextColorInverse: { control: 'color' },284 checkmarkWidth: { control: 'text' },285 checkmarkColor: { control: 'color' },286 connectionIconFill: { control: 'color' },287 multiSelectTextColor: { control: 'color' },288 multiSelectBackgroundColor: { control: 'color' },289 multiSelectTagBorderColor: { control: 'color' },290 multiSelectTagBackgroundColor: { control: 'color' },291 multiSelectOptionHoverBackground: { control: 'color' },292 singleSelectTextColor: { control: 'color' },293 singleSelectTextColorInverse: { control: 'color' },294 dttextColor: { control: 'color' },295 dttextColorInverse: { control: 'color' },296 textBackgroundColor: { control: 'color' },297 textBorderColor: { control: 'color' },298 textBorderColorAlert: { control: 'color' },299 textDisabledBackgroundColor: { control: 'color' },300 textareaBorderColor: { control: 'color' },301 textareaBackgroundColor: { control: 'color' },302 textareaDisabledBackgroundColor: { control: 'color' },303 textareaTextColor: { control: 'color' },304 textareaTextcolorInverse: { control: 'color' },305 labelFontSize: { control: 'text' },306 labelFontWeight: { control: 'text' },307 labelTooltipColor: { control: 'color' },308 labelTooltipBackground: { control: 'color' },309 spinnerColor1: { control: 'color' },310 spinnerColor2: { control: 'color' },311 toggleBackgroundColorOn: { control: 'color' },312 toggleBackgroundColorOff: { control: 'color' },313 toggleIconSuccess: { control: 'color' },314 toggleIconAlert: { control: 'color' },315 tileFontFamily: { control: 'color' },316 tileFontSize: { control: 'text' },317 tileFontWeight: { control: 'text' },318 tileBackground: { control: 'color' },319 tileBorderColor: { control: 'color' },320 tileShadow: { control: 'color' },321 tileHeaderColor: { control: 'color' },322 alertTextColorLight: '#fff',323 alertTextColorDark: '#000',324 alertTextColor: { control: 'color' },325 alertFontFamily: { control: 'color' },326 alertFontSize: { control: 'text' },327 alertFontWeight: { control: 'text' },328 alertBackground: { control: 'color' },329 alertBorderColor: { control: 'color' },330 alertShadow: { control: 'color' },331};332function getArg(storyArgs, argName) {333 if (storyArgs[argName]) {334 return storyArgs[argName];335 }336 if (storyArgs.theme) {337 return themes[storyArgs.theme].args[argName]338 }339 storyArgs.theme = 'default';340 return themes.default.args[argName];341}342export function themeCss(storyArgs) {343 return `344 html {345 --primary-color: ${getArg(storyArgs, 'primaryColor')};346 --primary-color-light-1: ${getArg(storyArgs, 'primaryColorLight1')};347 --primary-color-light-0: ${getArg(storyArgs, 'primaryColorLight0')};348 --gray-0: ${getArg(storyArgs, 'gray0')};349 --gray-1: ${getArg(storyArgs, 'gray1')};350 --black: ${getArg(storyArgs, 'black')};351 --text-color: ${getArg(storyArgs, 'textColor')};352 --text-color-inverse: ${getArg(storyArgs, 'textColorInverse')};353 --surface-0: ${getArg(storyArgs, 'surface0')};354 --surface-1: ${getArg(storyArgs, 'surface1')};355 --surface-2: ${getArg(storyArgs, 'surface2')};356 --surface-3: ${getArg(storyArgs, 'surface3')};357 --border-color: ${getArg(storyArgs, 'borderColor')};358 --shadow-0: ${getArg(storyArgs, 'shadow0')};359 --shadow-1: ${getArg(storyArgs, 'shadow1')};360 --alert-color: ${getArg(storyArgs, 'alertColor')};361 --caution-color: ${getArg(storyArgs, 'cautionColor')};362 --success-color: ${getArg(storyArgs, 'successColor')};363 --inactive-color: ${getArg(storyArgs, 'inactiveColor')};364 --disabled-color: ${getArg(storyArgs, 'disabledColor')};365 --font-family: ${getArg(storyArgs, 'fontFamily')};366 --dt-form-border-color: ${getArg(storyArgs, 'formBorderColor')};367 --dt-form-border-color-alert: ${getArg(storyArgs, 'formBorderColorAlert')};368 --dt-form-background-color: ${getArg(storyArgs, 'formBackgroundColor')};369 --dt-form-disabled-background-color: ${getArg(storyArgs, 'formDisabledBackgroundColor')};370 --dt-form-text-color: ${getArg(storyArgs, 'formTextColor')};371 --dt-form-text-color-inverse: ${getArg(storyArgs, 'formTextColorInverse')};372 --dt-form-text-border-color: ${getArg(storyArgs, 'formBorderColor')};373 --dt-checkmark-width: ${getArg(storyArgs, 'checkmarkWidth')};374 --dt-checkmark-color: ${getArg(storyArgs, 'checkmarkColor')};375 --dt-connection-icon-fill: ${getArg(storyArgs, 'connectionIconFill')};376 --dt-multi-select-text-color: ${getArg(storyArgs, 'multiSelectTextColor')};377 --dt-multi-select-background-color: ${getArg(storyArgs, 'multiSelectBackgroundColor')};378 --dt-multi-select-tag-border-color: ${getArg(storyArgs, 'multiSelectTagBorderColor')};379 --dt-multi-select-tag-background-color: ${getArg(storyArgs, 'multiSelectTagBackgroundColor')};380 --dt-multi-select-option-hover-background: ${getArg(storyArgs, 'multiSelectOptionHoverBackground')};381 --dt-single-select-text-color: ${getArg(storyArgs, 'singleSelectTextColor')};382 --dt-single-select-text-color-inverse: ${getArg(storyArgs, 'singleSelectTextColorInverse')};383 --dt-text-color: ${getArg(storyArgs, 'dttextColor')};384 --dt-text-color-inverse: ${getArg(storyArgs, 'dttextColorInverse')};385 --dt-text-color-mid: ${getArg(storyArgs, 'dttextColorMid')};386 --dt-text-background-color: ${getArg(storyArgs, 'textBackgroundColor')};387 --dt-text-border-color: ${getArg(storyArgs, 'textBorderColor')};388 --dt-text-border-color-alert: ${getArg(storyArgs, 'textBorderColorAlert')};389 --dt-text-disabled-background-color: ${getArg(storyArgs, 'textDisabledBackgroundColor')};390 --dt-textarea-border-color: ${getArg(storyArgs, 'textareaBorderColor')};391 --dt-textarea-background-color: ${getArg(storyArgs, 'textareaBackgroundColor')};392 --dt-textarea-disabled-background-color: ${getArg(storyArgs, 'textareaDisabledBackgroundColor')};393 --dt-textarea-text-color: ${getArg(storyArgs, 'textareaTextColor')};394 --dt-textarea-text-color-inverse: ${getArg(storyArgs, 'textareaTextcolorInverse')};395 --dt-label-font-size: ${getArg(storyArgs, 'labelFontSize')};396 --dt-label-font-weight: ${getArg(storyArgs, 'labelFontWeight')};397 --dt-label-color: ${getArg(storyArgs, 'labelTextColor')};398 --dt-label-tooltip-color: ${getArg(storyArgs, 'labelTooltipColor')};399 --dt-label-tooltip-background: ${getArg(storyArgs, 'labelTooltipBackground')};400 --dt-spinner-color-1: ${getArg(storyArgs, 'spinnerColor1')};401 --dt-spinner-color-2: ${getArg(storyArgs, 'spinnerColor2')};402 --dt-tile-font-family: ${getArg(storyArgs, 'tileFontFamily')};403 --dt-toggle-background-color-on: ${getArg(storyArgs, 'toggleBackgroundColorOn')};404 --dt-toggle-background-color-off: ${getArg(storyArgs, 'toggleBackgroundColorOff')};405 --dt-toggle-border-color: ${getArg(storyArgs, 'toggleBorderColor')};406 --dt-toggle-icon-success: ${getArg(storyArgs, 'toggleIconSuccess')};407 --dt-toggle-icon-alert: ${getArg(storyArgs, 'toggleIconAlert')};408 --dt-tile-font-size: ${getArg(storyArgs, 'tileFontSize')};409 --dt-tile-font-weight: ${getArg(storyArgs, 'tileFontWeight')};410 --dt-tile-background-color: ${getArg(storyArgs, 'tileBackground')};411 --dt-tile-border-color: ${getArg(storyArgs, 'tileBorderColor')};412 --dt-tile-shadow: ${getArg(storyArgs, 'tileShadow')};413 --dt-alert-text-color-light: ${getArg(storyArgs, 'alertTextColorLight')};414 --dt-alert-text-color-dark: ${getArg(storyArgs, 'alertTextColorDark')};415 --dt-alert-text-color: ${getArg(storyArgs, 'alertTextColor')};416 --dt-alert-font-family: ${getArg(storyArgs, 'alertFontFamily')};417 --dt-alert-font-size: ${getArg(storyArgs, 'alertFontSize')};418 --dt-alert-font-weight: ${getArg(storyArgs, 'alertFontWeight')};419 --dt-alert-background-color: ${getArg(storyArgs, 'alertBackground')};420 --dt-alert-border-color: ${getArg(storyArgs, 'alertBorderColor')};421 --dt-alert-shadow: ${getArg(storyArgs, 'alertShadow')};422 background: ${getArg(storyArgs, 'surface0')};423 color-scheme: ${getArg(storyArgs, 'colorScheme')};424 --dt-list-background-color: ${getArg(storyArgs, 'listheaderBackground')};425 --dt-list-hover-background-color: ${getArg(storyArgs, 'listheaderHoverBackground')};426 --dt-list-sort-arrow-color: ${getArg(storyArgs, 'listSortArrowColor')};427 --dt-list-sort-arrow-color-highlight: ${getArg(storyArgs, 'listSortArrowColorHighlight')};428 --dt-list-header-color: ${getArg(storyArgs, 'listHeaderColor')};429 ${storyArgs.RTL ? 'direction: rtl;' : 'direction: ltr;'}430 }431 `;...
indexSpec.js
Source:indexSpec.js
1import { createWidgetLoader } from '../index';2import { getMerkur, createMerkurWidget } from '@merkur/core';3import { componentPlugin } from '@merkur/plugin-component';4describe('Merkur tool storybook', () => {5 describe('createWidgetLoader method', () => {6 let render;7 let widgetProperties;8 let storyArgs;9 beforeEach(() => {10 render = jest.fn();11 widgetProperties = {12 name: 'widget',13 version: '0.0.1',14 $plugins: [componentPlugin],15 };16 storyArgs = {17 story: 'StoryName',18 args: {19 widget: {20 props: {},21 },22 },23 };24 getMerkur().register({25 ...widgetProperties,26 createWidget: createMerkurWidget,27 });28 });29 it('should return empty widget for not defined props', async () => {30 let loader = createWidgetLoader({ widgetProperties, render });31 delete storyArgs.args.widget.props;32 let { widget } = await loader(storyArgs);33 expect(widget).toEqual(null);34 });35 it('should return widget instance for defined props', async () => {36 let loader = createWidgetLoader({ widgetProperties, render });37 let { widget } = await loader(storyArgs);38 expect(widget.name).toEqual(widgetProperties.name);39 expect(widget.version).toEqual(widgetProperties.version);40 expect(widget.props).toEqual(storyArgs.args.widget.props);41 });42 it('should rerender widget for update', async () => {43 let loader = createWidgetLoader({ widgetProperties, render });44 let { widget } = await loader(storyArgs);45 widget.setState({});46 expect(render).toHaveBeenCalled();47 });48 it('should unmount previous widget if story is changed', async () => {49 let loader = createWidgetLoader({ widgetProperties, render });50 let { widget } = await loader(storyArgs);51 jest.spyOn(widget, 'unmount');52 storyArgs.story = 'AnotherStory';53 await loader(storyArgs);54 expect(widget.unmount).toHaveBeenCalled();55 });56 it('should define custom function on widget through story args', async () => {57 let loader = createWidgetLoader({ widgetProperties, render });58 storyArgs.args.widget.customFunction = () => {};59 let { widget } = await loader(storyArgs);60 expect(typeof widget.customFunction === 'function').toBeTruthy();61 });62 });...
Using AI Code Generation
1import React from 'react';2import { storiesOf } from '@storybook/react';3import { withInfo } from '@storybook/addon-info';4import { withKnobs, text, boolean, number } from '@storybook/addon-knobs/react';5import { withA11y } from '@storybook/addon-a11y';6import { withTests } from '@storybook/addon-jest';7import { action } from '@storybook/addon-actions';8import { linkTo } from '@storybook/addon-links';9import { Button } from '@storybook/react/demo';10import { withStorybookRoot } from 'storybook-root';11import { withTests } from '@storybook/addon-jest';12import results from '../.jest-test-results.json';13storiesOf('Button', module)14 .addDecorator(withStorybookRoot())15 .addDecorator(withKnobs)16 .addDecorator(withA11y)17 .addDecorator(withTests({ results }))18 .addParameters({19 info: {20 },21 })22 .add(23 withInfo('A very simple component')(() => (24 <Button onClick={action('clicked')}>{text('Label', 'Hello Button')}</Button>25 .add(26 withInfo('A very simple component')(() => (27 <Button onClick={action('clicked')}>28 {text('Label', 'π π π π―')}29 .add(30 withInfo('A very simple component')(() => (31 <Button onClick={linkTo('Button', 'with some emoji')}>32 {text('Label', 'π π π π―')}33 .add(34 withInfo('A very simple component')(() => (35 <Button onClick={linkTo('Button', 'with some emoji')}>36 {text('Label', 'π π π π―')}37 .add(38 withInfo('A very simple component')(() => (39 <Button onClick={linkTo('Button', 'with some emoji')}>40 {text('Label', 'π π π π―')}
Using AI Code Generation
1import { storyArgs } from 'storybook-root-decorator';2import { storybookRootDecorator } from 'storybook-root-decorator';3import { storybookRootDecorator } from 'storybook-root-decorator';4import { withKnobs } from '@storybook/addon-knobs';5import { storybookRootDecorator, storyArgs } from 'storybook-root-decorator';6import { withKnobs } from '@storybook/addon-knobs';7import { storybookRootDecorator, storyArgs } from 'storybook-root-decorator';8import { withKnobs } from '@storybook/addon-knobs';9import { storybookRootDecorator, storyArgs } from 'storybook-root-decorator';10import { withKnobs } from '@storybook/addon-knobs';11import { storybookRootDecorator, storyArgs } from 'storybook-root-decorator';12import { withKnobs } from '@storybook/addon-knobs';13import { storybookRootDecorator, storyArgs } from 'storybook-root-decorator';14import { withKnobs } from '@storybook/addon-knobs';15import { storybookRootDecorator, storyArgs } from 'storybook-root-decorator';16import { withKnobs } from '@storybook/addon-knobs';17import { storybookRootDecorator, storyArgs } from 'storybook-root-decorator';18import { withKnobs } from '@storybook/addon-knobs';19import { storybookRootDecorator, storyArgs } from 'storybook-root-decorator';20import { withKnobs } from '@storybook/addon-knobs';
Using AI Code Generation
1import { storyArgs } from 'storybook-root-decorator';2const { args } = storyArgs();3const { args } = storyArgs('Button');4const { args } = storyArgs('Button', 'Primary');5const { args } = storyArgs('Button', 'Primary', 'Small');6const { args } = storyArgs('Button', 'Primary', 'Small', 'Secondary');7const { args } = storyArgs('Button', 'Primary', 'Small', 'Secondary', 'Large');8const { args } = storyArgs('Button', 'Primary', 'Small', 'Secondary', 'Large', 'Extra Large');9const { args } = storyArgs('Button', 'Primary', 'Small', 'Secondary', 'Large', 'Extra Large', 'Extra Extra Large');10const { args } = storyArgs('Button', 'Primary', 'Small', 'Secondary', 'Large', 'Extra Large', 'Extra Extra Large', 'Extra Extra Extra Large');11const { args } = storyArgs('Button', 'Primary', 'Small', 'Secondary', 'Large', 'Extra Large', 'Extra Extra Large', 'Extra Extra Extra Large', 'Extra Extra Extra Extra Large');12const { args } = storyArgs('Button', 'Primary', 'Small', 'Secondary', 'Large', 'Extra Large', 'Extra Extra Large', 'Extra Extra Extra Large', 'Extra Extra Extra Extra Large', 'Extra Extra Extra Extra Extra Large');13const { args } = storyArgs('Button', 'Primary', 'Small', 'Secondary', 'Large', 'Extra Large
Using AI Code Generation
1import React from 'react';2import { configure, addDecorator } from '@storybook/react';3import { withRootDecorator } from 'storybook-root-decorator';4configure(require.context('../src', true, /\.stories\.js$/), module);5addDecorator(withRootDecorator);6import React from 'react';7import { addDecorator } from '@storybook/react';8import { withRootDecorator } from 'storybook-root-decorator';9addDecorator(withRootDecorator);10import React from 'react';11import { addDecorator } from '@storybook/react';12import { withRootDecorator } from 'storybook-root-decorator';13addDecorator(withRootDecorator);14import React from 'react';15import { addDecorator } from '@storybook/react';16import { withRootDecorator } from 'storybook-root-decorator';17addDecorator(withRootDecorator);18import React from 'react';19import { addDecorator } from '@storybook/react';20import { withRootDecorator } from 'storybook-root-decorator';21addDecorator(withRootDecorator);22import React from 'react';23import { addDecorator } from '@storybook/react';24import { withRootDecorator } from 'storybook-root-decorator';25addDecorator(withRootDecorator);26import React from 'react';27import { addDecorator } from '@storybook/react';28import { withRootDecorator } from 'storybook-root-decorator';29addDecorator(withRootDecorator);30import React from 'react';31import { addDecorator } from '@storybook/react';32import { withRootDecorator } from 'storybook-root-decorator';33addDecorator(withRootDecorator);34import React from 'react';35import { addDecorator } from '@storybook/react';36import { withRootDecorator } from 'storybook-root-decorator';37addDecorator(withRootDecorator);38import React from 'react';39import { addDecorator } from '@storybook/react';40import { withRootDecorator } from 'storybook
Using AI Code Generation
1import { storyArgs } from 'storybook-root';2import { Button } from 'components';3const args = storyArgs('Button');4export const Default = () => <Button {...args} />;5Default.storyName = 'Default';6Default.args = {7};8Default.parameters = {9 docs: {10 source: {11import { storyArgs } from 'storybook-root';12import { Button } from 'components';13const args = storyArgs('Button');14export const Default = () => <Button {...args} />;15Default.storyName = 'Default';16Default.args = {17};18Default.parameters = {19 docs: {20 source: {21import { storyArgs } from 'storybook-root';22import { Button } from 'components';23const args = storyArgs('Button');24export const Default = () => <Button {...args} />;
Using AI Code Generation
1import { storyArgs } from 'storybook-root-decorator';2export default {3};4import React from 'react';5import { storiesOf } from '@storybook/react';6import { withKnobs, text } from '@storybook/addon-knobs';7import Test from './test';8storiesOf('Test', module)9 .addDecorator(withKnobs)10 .add('default', () => {11 const value = text('value', 'test');12 return <Test value={value} />;13 });14import React from 'react';15import { mount } from 'enzyme';16import Test from './test';17describe('Test', () => {18 it('should render', () => {19 const wrapper = mount(<Test />);20 expect(wrapper).toHaveLength(1);21 });22});23at Test (test.js:7)24at mount (react-dom.development.js:16000)25at Object.mount (enzyme-adapter-react-16.1.1.js:645)26at Object.it (test.test.js:7)
Using AI Code Generation
1import { storyArgs } from 'storybook-root';2const { name, age } = storyArgs();3console.log(name, age);4import { storiesOf } from '@storybook/react';5import TestComponent from './test';6storiesOf('Test', module)7 .add('with args', () => <TestComponent name="John" age={20} />);
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.
LambdaTest Learning Hubs:
- JUnit Tutorial
- TestNG Tutorial
- Webdriver Tutorial
- WebDriverIO Tutorial
- Protractor Tutorial
- Selenium 4 Tutorial
- Jenkins Tutorial
- NUnit Tutorial
- Jest Tutorial
- Playwright Tutorial
- Cypress Tutorial
- PyTest Tutorial
YouTube
You could also refer to video tutorials over LambdaTest YouTube channel to get step by step demonstration from industry experts.
Run storybook-root automation tests on LambdaTest cloud grid
Perform automation testing on 3000+ real desktop and mobile devices online.
Try LambdaTest Now !!
Get 100 minutes of automation test minutes FREE!!
Was this article helpful?
