KaneAI - World’s First E2E Software Testing Agent.Signup for Private Beta Join TestMu Conference

How to use storyContext method in storybook-root

Best JavaScript code snippet using storybook-root

example.jsx

Source:example.jsx

1// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved2// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license3import React from 'react';4import { FormElement, Fieldset } from '../';5import Input from '../../input/';6import { Textarea } from '../../textarea/base/example';7import { Checkbox } from '../../checkbox/base/example';8import { Radio } from '../../radio-group/base/example';9const storyContext = 'Base';10const inputLabel = 'Form Element Label';11const errorId = 'error-message-unique-id';12export default [13  {14    id: 'default',15    label: `${storyContext} - Default`,16    context: `${storyContext}`,17    element: (18      <FormElement labelContent={inputLabel} inputId="input-unique-id-01">19        <Input id="input-unique-id-01" />20      </FormElement>21    ),22  },23];24export let states = [25  {26    id: 'required',27    label: `${storyContext} - Required`,28    context: `${storyContext}`,29    element: (30      <FormElement31        labelContent={inputLabel}32        inputId="input-unique-id-02"33        isRequired34      >35        <Input id="input-unique-id-02" required />36      </FormElement>37    ),38  },39  {40    id: 'error',41    label: `${storyContext} - Error`,42    context: `${storyContext}`,43    element: (44      <FormElement45        labelContent={inputLabel}46        inputId="input-unique-id-03"47        errorId={errorId}48        isRequired49        hasError50        inlineMessage="This field is required"51      >52        <Input id="input-unique-id-03" required aria-describedby={errorId} />53      </FormElement>54    ),55  },56  {57    id: 'checkbox-required',58    label: `${storyContext} - Checkbox - Required`,59    context: `${storyContext}`,60    element: (61      <FormElement>62        <Checkbox label="Checkbox Label" isRequired />63      </FormElement>64    ),65  },66  {67    id: 'checkbox-required-help-text',68    label: `${storyContext} - Checkbox - Required (help text icon)`,69    context: `${storyContext}`,70    element: (71      <FormElement>72        <Checkbox label="Checkbox Label" isRequired hasTooltip />73      </FormElement>74    ),75  },76  {77    id: 'checkbox-group-required',78    label: `${storyContext} - Checkbox Group (Required)`,79    context: `${storyContext}`,80    element: (81      <Fieldset label="Form Element Legend" isRequired>82        <Checkbox label="Checkbox Label" />83        <Checkbox label="Checkbox Label" />84      </Fieldset>85    ),86  },87  {88    id: 'checkbox-group-required-help-text',89    label: `${storyContext} - Checkbox Group (Required with help text icon)`,90    context: `${storyContext}`,91    element: (92      <Fieldset93        id="fieldset-with-help-text"94        label="Form Element Legend"95        isRequired96        hasTooltip97      >98        <Checkbox label="Checkbox Label" />99        <Checkbox label="Checkbox Label" />100      </Fieldset>101    ),102  },103  {104    id: 'radio-group-required',105    label: `${storyContext} - Radio Group (Required)`,106    context: `${storyContext}`,107    element: (108      <Fieldset label="Form Element Label" isRequired>109        <Radio checked label="Radio Label One" />110        <Radio label="Radio Label Two" />111      </Fieldset>112    ),113  },114  {115    id: 'radio-group-required-help-text',116    label: `${storyContext} - Radio Group (Required with help text icon)`,117    context: `${storyContext}`,118    element: (119      <Fieldset120        id="fieldset-with-help-text"121        label="Form Element Label"122        isRequired123        hasTooltip124      >125        <Radio checked label="Radio Label One" />126        <Radio label="Radio Label Two" />127      </Fieldset>128    ),129  },130  {131    id: 'required-tooltip-help',132    label: `${storyContext} - Tooltip Help (Required)`,133    context: `${storyContext}`,134    demoStyles: `padding-top: 3rem; position: relative`,135    storybookStyles: true,136    element: (137      <FormElement138        labelContent={inputLabel}139        inputId="input-unique-id-04"140        hasTooltip141        showTooltip142        isRequired143      >144        <Input id="input-unique-id-04" required />145      </FormElement>146    ),147  },148];149export let examples = [150  {151    id: 'input',152    label: `${storyContext} - Input`,153    context: `${storyContext}`,154    element: (155      <FormElement labelContent={inputLabel} inputId="input-unique-id-05">156        <Input id="input-unique-id-05" />157      </FormElement>158    ),159  },160  {161    id: 'textarea',162    label: `${storyContext} - Textarea`,163    context: `${storyContext}`,164    element: (165      <FormElement labelContent={inputLabel} inputId="input-unique-id-06">166        <Textarea id="input-unique-id-06" />167      </FormElement>168    ),169  },170  {171    id: 'checkbox',172    label: `${storyContext} - Checkbox`,173    context: `${storyContext}`,174    element: (175      <FormElement>176        <Checkbox label="Checkbox Label" />177      </FormElement>178    ),179  },180  {181    id: 'checkbox-group',182    label: `${storyContext} - Checkbox Group`,183    context: `${storyContext}`,184    element: (185      <Fieldset label="Form Element Legend">186        <Checkbox label="Checkbox Label" />187        <Checkbox label="Checkbox Label" />188      </Fieldset>189    ),190  },191  {192    id: 'radio-group',193    label: `${storyContext} - Radio Group`,194    context: `${storyContext}`,195    element: (196      <Fieldset label="Form Element Label">197        <Radio checked label="Radio Label One" />198        <Radio label="Radio Label Two" />199      </Fieldset>200    ),201  },202  {203    id: 'inline-help',204    label: `${storyContext} - Inline Help`,205    context: `${storyContext}`,206    element: (207      <FormElement208        labelContent={inputLabel}209        inputId="input-unique-id-07"210        inlineMessage="ex: (415)111-2222"211      >212        <Input id="input-unique-id-07" />213      </FormElement>214    ),215  },216  {217    id: 'tooltip-help',218    label: `${storyContext} - Tooltip Help`,219    context: `${storyContext}`,220    demoStyles: `padding-top: 3px; position: relative`,221    storybookStyles: true,222    element: (223      <FormElement224        labelContent={inputLabel}225        inputId="input-unique-id-08"226        hasTooltip227        showTooltip228      >229        <Input id="input-unique-id-08" />230      </FormElement>231    ),232  },...

index.ts

Source:index.ts

1/* eslint-disable prefer-destructuring */2import { ComponentOptions, defineComponent, h, Component } from 'vue';3const { start } = require('@storybook/core/client')4import {5  ClientStoryApi,6  StoryFn,7  DecoratorFunction,8  StoryContext,9  Loadable,10} from '@storybook/addons';11import './globals';12import { IStorybookSection, StoryFnVueReturnType } from './types';13import render, { propsContainer } from './render';14import { extractProps } from './util';15function prepare(16  rawStory: StoryFnVueReturnType,17  innerStory?: ComponentOptions18): Component | null {19  let story: ComponentOptions;20  if (typeof rawStory === 'string') {21    story = { template: rawStory } as ComponentOptions;22  } else if (rawStory != null) {23    story = rawStory;24  } else {25    return null;26  }27  // @ts-ignore28  // eslint-disable-next-line no-underscore-dangle29  if (innerStory) {30    story.components = { story: innerStory }31    return story32  }33  propsContainer.props = extractProps(story.props)34  return defineComponent({35    render() {36      return h(story, propsContainer.props)37    }38  })39}40const defaultContext: StoryContext = {41  id: 'unspecified',42  name: 'unspecified',43  kind: 'unspecified',44  parameters: {},45  args: {},46  argTypes: {},47  globals: {},48};49function decorateStory(50  storyFn: StoryFn<StoryFnVueReturnType>,51  decorators: DecoratorFunction<any>[]52): StoryFn<any> {53  const result = decorators.reduce(54    (decorated: StoryFn<any>, decorator) => (context: StoryContext = defaultContext) => {55      let story;56      const decoratedStory = decorator(57        ({ parameters, ...innerContext }: StoryContext = {} as StoryContext) => {58          story = decorated({ ...context, ...innerContext });59          return story;60        },61        context62      );63      if (!story) {64        story = decorated(context);65      }66      if (decoratedStory === story) {67        return story;68      }69      return prepare(decoratedStory, story);70    },71    (context) => prepare(storyFn(context))72  );73  return result74}75const framework = 'vue3';76interface ClientApi extends ClientStoryApi<StoryFnVueReturnType> {77  setAddon(addon: any): void;78  configure(loader: Loadable, module: NodeModule): void;79  getStorybook(): IStorybookSection[];80  clearDecorators(): void;81  forceReRender(): void;82  raw: () => any; // todo add type83  load: (...args: any[]) => void;84}85const api = start(render, { decorateStory });86export const storiesOf: ClientApi['storiesOf'] = (kind, m) => {87  return (api.clientApi.storiesOf(kind, m) as ReturnType<ClientApi['storiesOf']>).addParameters({88    framework,89  });90};91export const configure: ClientApi['configure'] = (...args) => api.configure(framework, ...args);92export const addDecorator: ClientApi['addDecorator'] = api.clientApi.addDecorator;93export const addParameters: ClientApi['addParameters'] = api.clientApi.addParameters;94export const clearDecorators: ClientApi['clearDecorators'] = api.clientApi.clearDecorators;95export const setAddon: ClientApi['setAddon'] = api.clientApi.setAddon;96export const forceReRender: ClientApi['forceReRender'] = api.forceReRender;97export const getStorybook: ClientApi['getStorybook'] = api.clientApi.getStorybook;...

index.js

Source:index.js

1// pages/startstory/index.js2const db = wx.cloud.database()3Page({4  context:[],5  src:[],6  data: {7    member:[],8    type:'',9    text:"",10    src:"",11    currentsrc:0,12    currenttext:0,13    finish:"ç»§ç»"14  },15  16  onLoad: function (options) {17    18    19    const {index}=options20    const { group } = options21    let storycontext = wx.getStorageSync('storycontext')22    if (!storycontext){23      wx.showLoading({24        title: 'å è½½ä¸',25      })26    console.log("ç»å",group,"ç¬¬å æ®µ",index)27    wx.cloud.callFunction({28      name:'getonedb',29      data:{30        name:'storycontext'31      }32    }).then(res=>{33      console.log("äºç«¯è¯»åå§æ",res)34      wx.setStorageSync('storycontext', res.result.data)35      let story=this.select(group,index,res.result.data)36      console.log(story)37      this.context=story.context38      this.src=story.src39      var type40      if(!this.context[0].type){41        type=042      }else{43        type=this.context[0].type44      }45      this.setData({46        member:story.member,47        type:type,48        text:this.context[0].text,49        src:this.src[0]50      })51      wx.hideLoading()52    })53    }else{54      console.log("æ¬å°åå¨å§æ")55      let story = this.select(group, index, storycontext)56      this.context = story.context57      this.src = story.src58      var type59      if (!story.type) {60        type = 061      } else {62        type =story.type63      }64      this.setData({65        member: story.member,66        type: type,67        text: this.context[0].text,68        src: this.src[0]69      })70     71    }72  },73  select(group,index,storycontext) {74    console.log(storycontext)75    function has(element) {76      return (element.group == group && element.index == index)77    }78    let story = storycontext.filter(has)79    console.log(story)80    return story[0]81  },82  next(){83    if(this.data.finish=="å·²ç»æ"){84      wx.navigateBack({85        86      })87    }else{88    var currenttext=this.data.currenttext89    if(currenttext==this.context.length-1){90      this.setData({91        finish:"å·²ç»æ"92      })93    }else{94      let currentcontext = this.context[currenttext + 1]95      96      var type97      if(!currentcontext.type){98        type=099      }else{100        101        type=currentcontext.type102        console.log("å¯¹è¯", type)103      }104      if(currentcontext.change){105        console.log("æ¢èæ¯")106        var currentsrc = this.data.currentsrc107        this.setData({108          src:this.src[currentsrc+1],109          currentsrc:currentsrc+1,110          text:currentcontext.text,111          currenttext:currenttext+1,112          type:type113        })114      }else{115        this.setData({116          text: currentcontext.text,117          currenttext: currenttext + 1,118          type: type119        })120      }121    }122    }123  },124  onShareAppMessage: function () {125    return {126      title: 'æå¨ <HMH48æ½æ½æ½> ä¸è§£éäºå§æ',//åäº«åå®¹127      path: '/pages/index/index',//åäº«å°å128    }129  },...

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.