How to use callRefsByResult method in storybook-root

Best JavaScript code snippet using storybook-root

instrumenter.ts

Source:instrumenter.ts

1/* eslint-disable no-underscore-dangle */2import { addons, Channel, StoryId } from '@storybook/addons';3import { once } from '@storybook/client-logger';4import {5  FORCE_REMOUNT,6  IGNORED_EXCEPTION,7  SET_CURRENT_STORY,8  STORY_RENDER_PHASE_CHANGED,9} from '@storybook/core-events';10import global from 'global';11import getCssSelector from 'css-selector-generator';12import { Call, CallRef, CallStates, State, Options, ControlStates, LogItem } from './types';13export const EVENTS = {14  CALL: 'instrumenter/call',15  SYNC: 'instrumenter/sync',16  START: 'instrumenter/start',17  BACK: 'instrumenter/back',18  GOTO: 'instrumenter/goto',19  NEXT: 'instrumenter/next',20  END: 'instrumenter/end',21};22type PatchedObj<TObj> = {23  [Property in keyof TObj]: TObj[Property] & { __originalFn__: PatchedObj<TObj> };24};25const debuggerDisabled = global.FEATURES?.interactionsDebugger !== true;26const controlsDisabled: ControlStates = {27  debugger: !debuggerDisabled,28  start: false,29  back: false,30  goto: false,31  next: false,32  end: false,33};34const alreadyCompletedException = new Error(35  `This function ran after the play function completed. Did you forget to \`await\` it?`36);37const isObject = (o: unknown) => Object.prototype.toString.call(o) === '[object Object]';38const isModule = (o: unknown) => Object.prototype.toString.call(o) === '[object Module]';39const isInstrumentable = (o: unknown) => {40  if (!isObject(o) && !isModule(o)) return false;41  if (o.constructor === undefined) return true;42  const proto = o.constructor.prototype;43  if (!isObject(proto)) return false;44  if (Object.prototype.hasOwnProperty.call(proto, 'isPrototypeOf') === false) return false;45  return true;46};47const construct = (obj: any) => {48  try {49    return new obj.constructor();50  } catch (e) {51    return {};52  }53};54const getInitialState = (): State => ({55  renderPhase: undefined,56  isDebugging: false,57  isPlaying: false,58  isLocked: false,59  cursor: 0,60  calls: [],61  shadowCalls: [],62  callRefsByResult: new Map(),63  chainedCallIds: new Set<Call['id']>(),64  parentId: undefined,65  playUntil: undefined,66  resolvers: {},67  syncTimeout: undefined,68  forwardedException: undefined,69});70const getRetainedState = (state: State, isDebugging = false) => {71  const calls = (isDebugging ? state.shadowCalls : state.calls).filter((call) => call.retain);72  if (!calls.length) return undefined;73  const callRefsByResult = new Map(74    Array.from(state.callRefsByResult.entries()).filter(([, ref]) => ref.retain)75  );76  return { cursor: calls.length, calls, callRefsByResult };77};78/**79 * This class is not supposed to be used directly. Use the `instrument` function below instead.80 */81export class Instrumenter {82  channel: Channel;83  initialized = false;84  // State is tracked per story to deal with multiple stories on the same canvas (i.e. docs mode)85  state: Record<StoryId, State>;86  constructor() {87    this.channel = addons.getChannel();88    // Restore state from the parent window in case the iframe was reloaded.89    this.state = global.window.parent.__STORYBOOK_ADDON_INTERACTIONS_INSTRUMENTER_STATE__ || {};90    // When called from `start`, isDebugging will be true91    const resetState = ({92      storyId,93      isPlaying = true,94      isDebugging = false,95    }: {96      storyId?: StoryId;97      isPlaying?: boolean;98      isDebugging?: boolean;99    }) => {100      const state = this.getState(storyId);101      this.setState(storyId, {102        ...getInitialState(),103        ...getRetainedState(state, isDebugging),104        shadowCalls: isDebugging ? state.shadowCalls : [],105        chainedCallIds: isDebugging ? state.chainedCallIds : new Set<Call['id']>(),106        playUntil: isDebugging ? state.playUntil : undefined,107        isPlaying,108        isDebugging,109      });110      // Don't sync while debugging, as it'll cause flicker.111      if (!isDebugging) this.sync(storyId);112    };113    // A forceRemount might be triggered for debugging (on `start`), or elsewhere in Storybook.114    this.channel.on(FORCE_REMOUNT, resetState);115    // Start with a clean slate before playing after a remount, and stop debugging when done.116    this.channel.on(STORY_RENDER_PHASE_CHANGED, ({ storyId, newPhase }) => {117      const { isDebugging, forwardedException } = this.getState(storyId);118      this.setState(storyId, { renderPhase: newPhase });119      if (newPhase === 'playing') {120        resetState({ storyId, isDebugging });121      }122      if (newPhase === 'played') {123        this.setState(storyId, {124          isLocked: false,125          isPlaying: false,126          isDebugging: false,127          forwardedException: undefined,128        });129        // Rethrow any unhandled forwarded exception so it doesn't go unnoticed.130        if (forwardedException) throw forwardedException;131      }132    });133    // Trash non-retained state and clear the log when switching stories, but not on initial boot.134    this.channel.on(SET_CURRENT_STORY, () => {135      if (this.initialized) this.cleanup();136      else this.initialized = true;137    });138    this.channel.on('storybook/interactions/highlight_element', (e) => {139      const storyState = this.getState(e.storyId);140      const [element] = Array.from(storyState.callRefsByResult.entries()).find(([key, value]) => {141        return value.__callId__ === e.selector;142      });143      Promise.resolve(element).then((el) => {144        const selector = getCssSelector(el);145        this.channel.emit('storybook/a11y/highlight', { elements: [selector], color: '#6c1d5c' });146      });147    });148    const start = ({ storyId, playUntil }: { storyId: string; playUntil?: Call['id'] }) => {149      if (!this.getState(storyId).isDebugging) {150        this.setState(storyId, ({ calls }) => ({151          calls: [],152          shadowCalls: calls.map((call) => ({ ...call, status: CallStates.WAITING })),153          isDebugging: true,154        }));155      }156      const log = this.getLog(storyId);157      this.setState(storyId, ({ shadowCalls }) => {158        const firstRowIndex = shadowCalls.findIndex((call) => call.id === log[0].callId);159        return {160          playUntil:161            playUntil ||162            shadowCalls163              .slice(0, firstRowIndex)164              .filter((call) => call.interceptable)165              .slice(-1)[0]?.id,166        };167      });168      // Force remount may trigger a page reload if the play function can't be aborted.169      this.channel.emit(FORCE_REMOUNT, { storyId, isDebugging: true });170    };171    const back = ({ storyId }: { storyId: string }) => {172      const { isDebugging } = this.getState(storyId);173      const log = this.getLog(storyId);174      const next = isDebugging175        ? log.findIndex(({ status }) => status === CallStates.WAITING)176        : log.length;177      start({ storyId, playUntil: log[next - 2]?.callId });178    };179    const goto = ({ storyId, callId }: { storyId: string; callId: Call['id'] }) => {180      const { calls, shadowCalls, resolvers } = this.getState(storyId);181      const call = calls.find(({ id }) => id === callId);182      const shadowCall = shadowCalls.find(({ id }) => id === callId);183      if (!call && shadowCall && Object.values(resolvers).length > 0) {184        const nextId = this.getLog(storyId).find((c) => c.status === CallStates.WAITING)?.callId;185        if (shadowCall.id !== nextId) this.setState(storyId, { playUntil: shadowCall.id });186        Object.values(resolvers).forEach((resolve) => resolve());187      } else {188        start({ storyId, playUntil: callId });189      }190    };191    const next = ({ storyId }: { storyId: string }) => {192      const { resolvers } = this.getState(storyId);193      if (Object.values(resolvers).length > 0) {194        Object.values(resolvers).forEach((resolve) => resolve());195      } else {196        const nextId = this.getLog(storyId).find((c) => c.status === CallStates.WAITING)?.callId;197        if (nextId) start({ storyId, playUntil: nextId });198        else end({ storyId });199      }200    };201    const end = ({ storyId }: { storyId: string }) => {202      this.setState(storyId, { playUntil: undefined, isDebugging: false });203      Object.values(this.getState(storyId).resolvers).forEach((resolve) => resolve());204    };205    this.channel.on(EVENTS.START, start);206    this.channel.on(EVENTS.BACK, back);207    this.channel.on(EVENTS.GOTO, goto);208    this.channel.on(EVENTS.NEXT, next);209    this.channel.on(EVENTS.END, end);210  }211  getState(storyId: StoryId) {212    return this.state[storyId] || getInitialState();213  }214  setState(storyId: StoryId, update: Partial<State> | ((state: State) => Partial<State>)) {215    const state = this.getState(storyId);216    const patch = typeof update === 'function' ? update(state) : update;217    this.state = { ...this.state, [storyId]: { ...state, ...patch } };218    // Track state on the parent window so we can reload the iframe without losing state.219    global.window.parent.__STORYBOOK_ADDON_INTERACTIONS_INSTRUMENTER_STATE__ = this.state;220  }221  cleanup() {222    // Reset stories with retained state to their initial state, and drop the rest.223    this.state = Object.entries(this.state).reduce((acc, [storyId, state]) => {224      const retainedState = getRetainedState(state);225      if (!retainedState) return acc;226      acc[storyId] = Object.assign(getInitialState(), retainedState);227      return acc;228    }, {} as Record<StoryId, State>);229    this.channel.emit(EVENTS.SYNC, { controlStates: controlsDisabled, logItems: [] });230    global.window.parent.__STORYBOOK_ADDON_INTERACTIONS_INSTRUMENTER_STATE__ = this.state;231  }232  getLog(storyId: string): LogItem[] {233    const { calls, shadowCalls } = this.getState(storyId);234    const merged = [...shadowCalls];235    calls.forEach((call, index) => {236      merged[index] = call;237    });238    const seen = new Set();239    return merged.reduceRight<LogItem[]>((acc, call) => {240      call.args.forEach((arg) => {241        if (arg?.__callId__) {242          seen.add(arg.__callId__);243        }244      });245      call.path.forEach((node) => {246        if ((node as CallRef).__callId__) {247          seen.add((node as CallRef).__callId__);248        }249      });250      if (call.interceptable && !seen.has(call.id)) {251        acc.unshift({ callId: call.id, status: call.status });252        seen.add(call.id);253      }254      return acc;255    }, []);256  }257  // Traverses the object structure to recursively patch all function properties.258  // Returns the original object, or a new object with the same constructor,259  // depending on whether it should mutate.260  instrument<TObj extends { [x: string]: any }>(obj: TObj, options: Options): PatchedObj<TObj> {261    if (!isInstrumentable(obj)) return obj;262    const { mutate = false, path = [] } = options;263    return Object.keys(obj).reduce(264      (acc, key) => {265        const value = (obj as Record<string, any>)[key];266        // Nothing to patch, but might be instrumentable, so we recurse267        if (typeof value !== 'function') {268          acc[key] = this.instrument(value, { ...options, path: path.concat(key) });269          return acc;270        }271        // Already patched, so we pass through unchanged272        if (typeof value.__originalFn__ === 'function') {273          acc[key] = value;274          return acc;275        }276        // Patch the function and mark it "patched" by adding a reference to the original function277        acc[key] = (...args: any[]) => this.track(key, value, args, options);278        acc[key].__originalFn__ = value;279        // Reuse the original name as the patched function's name280        Object.defineProperty(acc[key], 'name', { value: key, writable: false });281        // Deal with functions that also act like an object282        if (Object.keys(value).length > 0) {283          Object.assign(284            acc[key],285            this.instrument({ ...value }, { ...options, path: path.concat(key) })286          );287        }288        return acc;289      },290      mutate ? obj : construct(obj)291    );292  }293  // Monkey patch an object method to record calls.294  // Returns a function that invokes the original function, records the invocation ("call") and295  // returns the original result.296  track(method: string, fn: Function, args: any[], options: Options) {297    const storyId: StoryId =298      args?.[0]?.__storyId__ || global.window.__STORYBOOK_PREVIEW__?.urlStore?.selection?.storyId;299    const { cursor, parentId } = this.getState(storyId);300    this.setState(storyId, { cursor: cursor + 1 });301    const id = `${parentId || storyId} [${cursor}] ${method}`;302    const { path = [], intercept = false, retain = false } = options;303    const interceptable = typeof intercept === 'function' ? intercept(method, path) : intercept;304    const call: Call = { id, parentId, storyId, cursor, path, method, args, interceptable, retain };305    const result = (interceptable ? this.intercept : this.invoke).call(this, fn, call, options);306    return this.instrument(result, { ...options, mutate: true, path: [{ __callId__: call.id }] });307  }308  intercept(fn: Function, call: Call, options: Options) {309    const { chainedCallIds, isDebugging, playUntil } = this.getState(call.storyId);310    // For a "jump to step" action, continue playing until we hit a call by that ID.311    // For chained calls, we can only return a Promise for the last call in the chain.312    const isChainedUpon = chainedCallIds.has(call.id);313    if (!isDebugging || isChainedUpon || playUntil) {314      if (playUntil === call.id) {315        this.setState(call.storyId, { playUntil: undefined });316      }317      return this.invoke(fn, call, options);318    }319    // Instead of invoking the function, defer the function call until we continue playing.320    return new Promise((resolve) => {321      this.setState(call.storyId, ({ resolvers }) => ({322        isLocked: false,323        resolvers: { ...resolvers, [call.id]: resolve },324      }));325    }).then(() => {326      this.setState(call.storyId, (state) => {327        const { [call.id]: _, ...resolvers } = state.resolvers;328        return { isLocked: true, resolvers };329      });330      return this.invoke(fn, call, options);331    });332  }333  invoke(fn: Function, call: Call, options: Options) {334    // TODO this doesnt work because the abortSignal we have here is the newly created one335    // const { abortSignal } = global.window.__STORYBOOK_PREVIEW__ || {};336    // if (abortSignal && abortSignal.aborted) throw IGNORED_EXCEPTION;337    const { callRefsByResult, forwardedException, renderPhase } = this.getState(call.storyId);338    const info: Call = {339      ...call,340      // Map args that originate from a tracked function call to a call reference to enable nesting.341      // These values are often not fully serializable anyway (e.g. HTML elements).342      args: call.args.map((arg) => {343        if (callRefsByResult.has(arg)) {344          return callRefsByResult.get(arg);345        }346        if (arg instanceof global.window.HTMLElement) {347          const { prefix, localName, id, classList, innerText } = arg;348          const classNames = Array.from(classList);349          return { __element__: { prefix, localName, id, classNames, innerText } };350        }351        return arg;352      }),353    };354    // Mark any ancestor calls as "chained upon" so we won't attempt to defer it later.355    call.path.forEach((ref: any) => {356      if (ref?.__callId__) {357        this.setState(call.storyId, ({ chainedCallIds }) => ({358          chainedCallIds: new Set(Array.from(chainedCallIds).concat(ref.__callId__)),359        }));360      }361    });362    const handleException = (e: unknown) => {363      if (e instanceof Error) {364        const { name, message, stack } = e;365        const exception = { name, message, stack };366        this.update({ ...info, status: CallStates.ERROR, exception });367        // Always track errors to their originating call.368        this.setState(call.storyId, (state) => ({369          callRefsByResult: new Map([370            ...Array.from(state.callRefsByResult.entries()),371            [e, { __callId__: call.id, retain: call.retain }],372          ]),373        }));374        // We need to throw to break out of the play function, but we don't want to trigger a redbox375        // so we throw an ignoredException, which is caught and silently ignored by Storybook.376        if (call.interceptable && e !== alreadyCompletedException) {377          throw IGNORED_EXCEPTION;378        }379        // Non-interceptable calls need their exceptions forwarded to the next interceptable call.380        // In case no interceptable call picks it up, it'll get rethrown in the "completed" phase.381        this.setState(call.storyId, { forwardedException: e });382        return e;383      }384      throw e;385    };386    try {387      // An earlier, non-interceptable call might have forwarded an exception.388      if (forwardedException) {389        this.setState(call.storyId, { forwardedException: undefined });390        throw forwardedException;391      }392      if (renderPhase === 'played' && !call.retain) {393        throw alreadyCompletedException;394      }395      const finalArgs = options.getArgs396        ? options.getArgs(call, this.getState(call.storyId))397        : call.args;398      const result = fn(399        // Wrap any callback functions to provide a way to access their "parent" call.400        // This is picked up in the `track` function and used for call metadata.401        ...finalArgs.map((arg: any) => {402          if (typeof arg !== 'function' || Object.keys(arg).length) return arg;403          return (...args: any) => {404            const { cursor, parentId } = this.getState(call.storyId);405            this.setState(call.storyId, { cursor: 0, parentId: call.id });406            const restore = () => this.setState(call.storyId, { cursor, parentId });407            const res = arg(...args);408            if (res instanceof Promise) res.then(restore, restore);409            else restore();410            return res;411          };412        })413      );414      // Track the result so we can trace later uses of it back to the originating call.415      // Primitive results (undefined, null, boolean, string, number, BigInt) are ignored.416      if (result && ['object', 'function', 'symbol'].includes(typeof result)) {417        this.setState(call.storyId, (state) => ({418          callRefsByResult: new Map([419            ...Array.from(state.callRefsByResult.entries()),420            [result, { __callId__: call.id, retain: call.retain }],421          ]),422        }));423      }424      this.update({425        ...info,426        status: result instanceof Promise ? CallStates.ACTIVE : CallStates.DONE,427      });428      if (result instanceof Promise) {429        return result.then((value) => {430          this.update({ ...info, status: CallStates.DONE });431          return value;432        }, handleException);433      }434      return result;435    } catch (e) {436      return handleException(e);437    }438  }439  // Sends the call info and log to the manager.440  // Uses a 0ms debounce because this might get called many times in one tick.441  update(call: Call) {442    clearTimeout(this.getState(call.storyId).syncTimeout);443    this.channel.emit(EVENTS.CALL, call);444    this.setState(call.storyId, ({ calls }) => {445      // Omit earlier calls for the same ID, which may have been superceded by a later invocation.446      // This typically happens when calls are part of a callback which runs multiple times.447      const callsById = calls448        .concat(call)449        .reduce<Record<Call['id'], Call>>((a, c) => Object.assign(a, { [c.id]: c }), {});450      return {451        // Calls are sorted to ensure parent calls always come before calls in their callback.452        calls: Object.values(callsById).sort((a, b) =>453          a.id.localeCompare(b.id, undefined, { numeric: true })454        ),455        syncTimeout: setTimeout(() => this.sync(call.storyId), 0),456      };457    });458  }459  sync(storyId: StoryId) {460    const { isLocked, isPlaying } = this.getState(storyId);461    const logItems: LogItem[] = this.getLog(storyId);462    const hasActive = logItems.some((item) => item.status === CallStates.ACTIVE);463    if (debuggerDisabled || isLocked || hasActive || logItems.length === 0) {464      this.channel.emit(EVENTS.SYNC, { controlStates: controlsDisabled, logItems });465      return;466    }467    const hasPrevious = logItems.some((item) =>468      [CallStates.DONE, CallStates.ERROR].includes(item.status)469    );470    const controlStates: ControlStates = {471      debugger: true,472      start: hasPrevious,473      back: hasPrevious,474      goto: true,475      next: isPlaying,476      end: isPlaying,477    };478    this.channel.emit(EVENTS.SYNC, { controlStates, logItems });479  }480}481/**482 * Instruments an object or module by traversing its properties, patching any functions (methods)483 * to enable debugging. Patched functions will emit a `call` event when invoked.484 * When intercept = true, patched functions will return a Promise when the debugger stops before485 * this function. As such, "interceptable" functions will have to be `await`-ed.486 */487export function instrument<TObj extends Record<string, any>>(488  obj: TObj,489  options: Options = {}490): TObj {491  try {492    // Don't do any instrumentation if not loaded in an iframe.493    if (global.window.parent === global.window) return obj;494    // Only create an instance if we don't have one (singleton) yet.495    if (!global.window.__STORYBOOK_ADDON_INTERACTIONS_INSTRUMENTER__) {496      global.window.__STORYBOOK_ADDON_INTERACTIONS_INSTRUMENTER__ = new Instrumenter();497    }498    const instrumenter: Instrumenter = global.window.__STORYBOOK_ADDON_INTERACTIONS_INSTRUMENTER__;499    return instrumenter.instrument(obj, options);500  } catch (e) {501    // Access to the parent window might fail due to CORS restrictions.502    once.warn(e);503    return obj;504  }...

Using AI Code Generation

1import React from 'react';2import { callRefsByResult } from 'storybook-root';3export default class Test extends React.Component {4  constructor(props) {5    super(props);6    this.state = {7    };8  }9  componentDidMount() {10    this.setState({ result: callRefsByResult('myRef') });11  }12  render() {13    return <div>{this.state.result}</div>;14  }15}16import Test from './test';17export default {18};19export const test = () => <Test />;20import { addDecorator } from '@storybook/react';21import { withRefs } from 'storybook-addon-react-ref';22addDecorator(withRefs);23import { addDecorator } from '@storybook/react';24import { withRefs } from 'storybook-addon-react-ref';25addDecorator(withRefs);26import { addons } from '@storybook/addons';27import { withRefs } from 'storybook-addon-react-ref';28addons.setConfig({29  refs: {30    myRef: {31    },32  },33});34import { addDecorator } from '@storybook/react';35import { withRefs } from 'storybook-addon-react-ref';36addDecorator(withRefs);37import { addons } from '@storybook/addons';38import { withRefs } from 'storybook-addon-react-ref';39addons.setConfig({40  refs: {41    myRef: {42    },43  },44});45import { addDecorator } from '@storybook/react';46import { withRefs } from 'storybook-addon-react-ref';47addDecorator(withRefs);48import { addons } from '@storybook/addons';49import { withRefs } from 'storybook-addon-react-ref';50addons.setConfig({51  refs: {52    myRef: {53    },54  },55});56import { addDecorator } from '@storybook/react';57import { withRefs } from 'storybook-addon-react-ref';58addDecorator(withRefs);

Using AI Code Generation

1import React from 'react';2import { callRefsByResult } from 'storybook-root/src/utils';3import { storiesOf } from '@storybook/react';4import { action } from '@storybook/addon-actions';5class TestComponent extends React.Component {6  constructor(props) {7    super(props);8    this.state = {9    };10  }11  render() {12    return (13        <button onClick={this.props.onClick}>Click me</button>14    );15  }16}17const TestComponentWithRef = React.forwardRef((props, ref) => (18  <TestComponent {...props} ref={ref} />19));20const TestComponentWithRef2 = React.forwardRef((props, ref) => (21  <TestComponent {...props} ref={ref} />22));23storiesOf('TestComponent', module)24  .add('default', () => (25        onClick={action('clicked')}26        ref={callRefsByResult('testRef', 'testRef2')}27  .add('default2', () => (28        onClick={action('clicked')}29        ref={callRefsByResult('testRef', 'testRef2')}30  ));31import React from 'react';32import { shallow } from 'enzyme';33import TestComponent from './test';34import { TestComponentWithRef } from './test';35describe('TestComponent', () => {36  it('should render correctly', () => {37    const wrapper = shallow(<TestComponent />);38    expect(wrapper).toMatchSnapshot();39  });40  it('should call ref', () => {41    const wrapper = shallow(<TestComponent />);42    const instance = wrapper.instance();43    const mockRef = jest.fn();44    instance.testRef = mockRef;45    wrapper.find(TestComponentWithRef).simulate('click');46    expect(mockRef).toHaveBeenCalled();47  });48});

Using AI Code Generation

1import React from 'react';2import { callRefsByResult } from 'storybook-root';3import { mount } from 'enzyme';4export const MyComponent = () => (5    <input type="text" ref={callRefsByResult('my-input', 'input')} />6);7export const MyComponentTest = () => {8  const wrapper = mount(<MyComponent />);9  const input = wrapper.ref('my-input');10  return (11      <input type="text" value={input.value} />12  );13};14import React from 'react';15import { shallow } from 'enzyme';16import { MyComponentTest } from 'test';17describe('MyComponentTest', () => {18  it('should render input', () => {19    const wrapper = shallow(<MyComponentTest />);20    expect(wrapper.find('input').length).toBe(1);21  });22});23import React from 'react';24import { storiesOf } from '@storybook/react';25import { MyComponentTest } from 'test';26storiesOf('MyComponentTest', module).add('default', () => <MyComponentTest />);

Using AI Code Generation

1import { callRefsByResult } from 'storybook-root';2import { someOtherImport } from 'storybook-root';3import { someOtherImport2 } from 'storybook-root';4import { someOtherImport3 } from 'storybook-root';5import { someOtherImport4 } from 'storybook-root';6import { someOtherImport5 } from 'storybook-root';7import { someOtherImport6 } from 'storybook-root';8import { someOtherImport7 } from 'storybook-root';9import { someOtherImport8 } from 'storybook-root';10import { someOtherImport9 } from 'storybook-root';11import { someOtherImport10 } from 'storybook-root';12import { someOtherImport11 } from 'storybook-root';13import { someOtherImport12 } from 'storybook-root';14import { someOtherImport13 } from 'storybook-root';15import { someOtherImport14 } from 'storybook-root';16import { someOtherImport15 } from 'storybook-root';17import { someOtherImport16 } from 'storybook-root';18import { someOtherImport17 } from 'storybook-root';19import { someOtherImport18 } from 'storybook-root';20import { someOtherImport19 } from 'storybook-root';21import { someOtherImport20 } from 'storybook-root';22import { someOtherImport21 } from 'storybook-root';23import { someOtherImport22 } from 'storybook-root';24import { someOtherImport23 } from 'storybook-root';25import { someOtherImport24 } from 'storybook-root';26import { someOtherImport25 } from 'storybook-root';27import { someOtherImport26 } from 'storybook-root';28import { someOtherImport27 } from 'storybook-root';29import { someOtherImport28 } from 'storybook-root';30import { someOtherImport29 } from 'storybook-root';31import { someOtherImport30 } from 'storybook-root';32import { someOtherImport31 } from 'storybook-root';33import { someOtherImport32 } from 'storybook-root';34import { someOtherImport33 } from 'storybook-root';35import { someOtherImport34 } from 'storybook-root';36import { someOtherImport35 } from 'storybook-root';37import { someOtherImport36 } from 'storybook-root';38import { someOtherImport37 } from 'storybook-root';39import { someOtherImport38 } from 'storybook-root';40import { someOtherImport39 } from 'storybook-root';41import { someOtherImport40 } from 'storybook-root';42import { someOtherImport41 } from

Using AI Code Generation

1import { callRefsByResult } from 'storybook-root';2import { getStorybook } from '@storybook/react';3import { mount } from 'enzyme';4import { expect } from 'chai';5describe('Test', () => {6  it('should test', () => {7    const storybook = getStorybook();8    const story = storybook[0].stories[0];9    const storyElement = story.render();10    const wrapper = mount(storyElement);11    const ref = callRefsByResult(wrapper, 'test');12    expect(ref).to.have.length(1);13  });14});15import { callRefsByResult } from 'storybook-root';16import { getStorybook } from '@storybook/react';17import { mount } from 'enzyme';18import { expect } from 'chai';19describe('Test', () => {20  it('should test', () => {21    const storybook = getStorybook();22    const story = storybook[0].stories[0];23    const storyElement = story.render();24    const wrapper = mount(storyElement);25    const ref = callRefsByResult(wrapper, 'test');26    expect(ref).to.have.length(1);27  });28});

Using AI Code Generation

1import { callRefsByResult } from "storybook-root"2const result = callRefsByResult("myRef", "myMethod", "myParam")3console.log(result)4import React from "react"5import { refStore } from "storybook-ref-store"6const callRefsByResult = (refName, methodName, param) => {7  const ref = refStore.getRef(refName)8  if (ref) {9    return ref[methodName](param)10  } else {11    console.error(`Ref ${refName} not found`)12  }13}14export { callRefsByResult }15import React from "react"16import { refStore } from "storybook-ref-store"17const MyRef = React.forwardRef((props, ref) => {18  const [value, setValue] = React.useState(0)19  const myMethod = param => {20    setValue(value + param)21  }22  React.useImperativeHandle(ref, () => ({23  }))24  return <div>{value}</div>25})26refStore.setRef("myRef", MyRef)27import React from "react"28import { refStore } from "storybook-ref-store"29const MyRef = React.forwardRef((props, ref) => {30  const [value, setValue] = React.useState(0)31  const myMethod = param => {32    setValue(value + param)33  }34  React.useImperativeHandle(ref, () => ({35  }))36  return <div>{value}</div>37})38refStore.setRef("myRef", MyRef)39import React from "react"40import { refStore } from "storybook-ref-store"41const MyRef = React.forwardRef((props, ref) => {42  const [value, setValue] = React.useState(0)43  const myMethod = param => {44    setValue(value + param)45  }46  React.useImperativeHandle(ref, () => ({47  }))48  return <div>{value}</div>49})50refStore.setRef("myRef", MyRef)

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.