Unlock 30% off on Manual Testing Annual Plans this Holiday Season.

Copied to Clipboard!

How to use refs method in storybook-root

Best JavaScript code snippet using storybook-root

ReactDOMTreeTraversal-test.js

Source:ReactDOMTreeTraversal-test.js

1/**2 * Copyright 2013-2015, Facebook, Inc.3 * All rights reserved.4 *5 * This source code is licensed under the BSD-style license found in the6 * LICENSE file in the root directory of this source tree. An additional grant7 * of patent rights can be found in the PATENTS file in the same directory.8 *9 * @emails react-core10 */11'use strict';12var React = require('React');13var ReactDOMComponentTree = require('ReactDOMComponentTree');14var ReactTestUtils = require('ReactTestUtils');15/**16 * Ensure that all callbacks are invoked, passing this unique argument.17 */18var ARG = {arg: true};19var ARG2 = {arg2: true};20var ChildComponent = React.createClass({21  render: function() {22    return (23      <div ref="DIV">24        <div ref="DIV_1" />25        <div ref="DIV_2" />26      </div>27    );28  },29});30var ParentComponent = React.createClass({31  render: function() {32    return (33      <div ref="P">34        <div ref="P_P1">35          <ChildComponent ref="P_P1_C1" />36          <ChildComponent ref="P_P1_C2" />37        </div>38        <div ref="P_OneOff" />39      </div>40    );41  },42});43function renderParentIntoDocument() {44  return ReactTestUtils.renderIntoDocument(<ParentComponent />);45}46describe('ReactDOMTreeTraversal', function() {47  var ReactDOMTreeTraversal;48  var aggregatedArgs;49  function argAggregator(inst, isUp, arg) {50    aggregatedArgs.push({51      node: ReactDOMComponentTree.getNodeFromInstance(inst),52      isUp: isUp,53      arg: arg,54    });55  }56  function getInst(node) {57    return ReactDOMComponentTree.getInstanceFromNode(node);58  }59  beforeEach(function() {60    ReactDOMTreeTraversal = require('ReactDOMTreeTraversal');61    aggregatedArgs = [];62  });63  describe('traverseTwoPhase', function() {64    it('should not traverse when traversing outside DOM', function() {65      var expectedAggregation = [];66      ReactDOMTreeTraversal.traverseTwoPhase(null, argAggregator, ARG);67      expect(aggregatedArgs).toEqual(expectedAggregation);68    });69    it('should traverse two phase across component boundary', function() {70      var parent = renderParentIntoDocument();71      var target = getInst(parent.refs.P_P1_C1.refs.DIV_1);72      var expectedAggregation = [73        {node: parent.refs.P, isUp: false, arg: ARG},74        {node: parent.refs.P_P1, isUp: false, arg: ARG},75        {node: parent.refs.P_P1_C1.refs.DIV, isUp: false, arg: ARG},76        {node: parent.refs.P_P1_C1.refs.DIV_1, isUp: false, arg: ARG},77        {node: parent.refs.P_P1_C1.refs.DIV_1, isUp: true, arg: ARG},78        {node: parent.refs.P_P1_C1.refs.DIV, isUp: true, arg: ARG},79        {node: parent.refs.P_P1, isUp: true, arg: ARG},80        {node: parent.refs.P, isUp: true, arg: ARG},81      ];82      ReactDOMTreeTraversal.traverseTwoPhase(target, argAggregator, ARG);83      expect(aggregatedArgs).toEqual(expectedAggregation);84    });85    it('should traverse two phase at shallowest node', function() {86      var parent = renderParentIntoDocument();87      var target = getInst(parent.refs.P);88      var expectedAggregation = [89        {node: parent.refs.P, isUp: false, arg: ARG},90        {node: parent.refs.P, isUp: true, arg: ARG},91      ];92      ReactDOMTreeTraversal.traverseTwoPhase(target, argAggregator, ARG);93      expect(aggregatedArgs).toEqual(expectedAggregation);94    });95  });96  describe('traverseEnterLeave', function() {97    it('should not traverse when enter/leaving outside DOM', function() {98      var target = null;99      var expectedAggregation = [];100      ReactDOMTreeTraversal.traverseEnterLeave(101        target, target, argAggregator, ARG, ARG2102      );103      expect(aggregatedArgs).toEqual(expectedAggregation);104    });105    it('should not traverse if enter/leave the same node', function() {106      var parent = renderParentIntoDocument();107      var leave = getInst(parent.refs.P_P1_C1.refs.DIV_1);108      var enter = getInst(parent.refs.P_P1_C1.refs.DIV_1);109      var expectedAggregation = [];110      ReactDOMTreeTraversal.traverseEnterLeave(111        leave, enter, argAggregator, ARG, ARG2112      );113      expect(aggregatedArgs).toEqual(expectedAggregation);114    });115    it('should traverse enter/leave to sibling - avoids parent', function() {116      var parent = renderParentIntoDocument();117      var leave = getInst(parent.refs.P_P1_C1.refs.DIV_1);118      var enter = getInst(parent.refs.P_P1_C1.refs.DIV_2);119      var expectedAggregation = [120        {node: parent.refs.P_P1_C1.refs.DIV_1, isUp: true, arg: ARG},121        // enter/leave shouldn't fire antyhing on the parent122        {node: parent.refs.P_P1_C1.refs.DIV_2, isUp: false, arg: ARG2},123      ];124      ReactDOMTreeTraversal.traverseEnterLeave(125        leave, enter, argAggregator, ARG, ARG2126      );127      expect(aggregatedArgs).toEqual(expectedAggregation);128    });129    it('should traverse enter/leave to parent - avoids parent', function() {130      var parent = renderParentIntoDocument();131      var leave = getInst(parent.refs.P_P1_C1.refs.DIV_1);132      var enter = getInst(parent.refs.P_P1_C1.refs.DIV);133      var expectedAggregation = [134        {node: parent.refs.P_P1_C1.refs.DIV_1, isUp: true, arg: ARG},135      ];136      ReactDOMTreeTraversal.traverseEnterLeave(137        leave, enter, argAggregator, ARG, ARG2138      );139      expect(aggregatedArgs).toEqual(expectedAggregation);140    });141    it('should enter from the window', function() {142      var parent = renderParentIntoDocument();143      var leave = null; // From the window or outside of the React sandbox.144      var enter = getInst(parent.refs.P_P1_C1.refs.DIV);145      var expectedAggregation = [146        {node: parent.refs.P, isUp: false, arg: ARG2},147        {node: parent.refs.P_P1, isUp: false, arg: ARG2},148        {node: parent.refs.P_P1_C1.refs.DIV, isUp: false, arg: ARG2},149      ];150      ReactDOMTreeTraversal.traverseEnterLeave(151        leave, enter, argAggregator, ARG, ARG2152      );153      expect(aggregatedArgs).toEqual(expectedAggregation);154    });155    it('should enter from the window to the shallowest', function() {156      var parent = renderParentIntoDocument();157      var leave = null; // From the window or outside of the React sandbox.158      var enter = getInst(parent.refs.P);159      var expectedAggregation = [160        {node: parent.refs.P, isUp: false, arg: ARG2},161      ];162      ReactDOMTreeTraversal.traverseEnterLeave(163        leave, enter, argAggregator, ARG, ARG2164      );165      expect(aggregatedArgs).toEqual(expectedAggregation);166    });167    it('should leave to the window', function() {168      var parent = renderParentIntoDocument();169      var enter = null; // From the window or outside of the React sandbox.170      var leave = getInst(parent.refs.P_P1_C1.refs.DIV);171      var expectedAggregation = [172        {node: parent.refs.P_P1_C1.refs.DIV, isUp: true, arg: ARG},173        {node: parent.refs.P_P1, isUp: true, arg: ARG},174        {node: parent.refs.P, isUp: true, arg: ARG},175      ];176      ReactDOMTreeTraversal.traverseEnterLeave(177        leave, enter, argAggregator, ARG, ARG2178      );179      expect(aggregatedArgs).toEqual(expectedAggregation);180    });181    it('should leave to the window from the shallowest', function() {182      var parent = renderParentIntoDocument();183      var enter = null; // From the window or outside of the React sandbox.184      var leave = getInst(parent.refs.P_P1_C1.refs.DIV);185      var expectedAggregation = [186        {node: parent.refs.P_P1_C1.refs.DIV, isUp: true, arg: ARG},187        {node: parent.refs.P_P1, isUp: true, arg: ARG},188        {node: parent.refs.P, isUp: true, arg: ARG},189      ];190      ReactDOMTreeTraversal.traverseEnterLeave(191        leave, enter, argAggregator, ARG, ARG2192      );193      expect(aggregatedArgs).toEqual(expectedAggregation);194    });195  });196  describe('getFirstCommonAncestor', function() {197    it('should determine the first common ancestor correctly', function() {198      var parent = renderParentIntoDocument();199      var ancestors = [200        // Common ancestor with self is self.201        {one: parent.refs.P_P1_C1.refs.DIV_1,202          two: parent.refs.P_P1_C1.refs.DIV_1,203          com: parent.refs.P_P1_C1.refs.DIV_1,204        },205        // Common ancestor with self is self - even if topmost DOM.206        {one: parent.refs.P, two: parent.refs.P, com: parent.refs.P},207        // Siblings208        {209          one: parent.refs.P_P1_C1.refs.DIV_1,210          two: parent.refs.P_P1_C1.refs.DIV_2,211          com: parent.refs.P_P1_C1.refs.DIV,212        },213        // Common ancestor with parent is the parent.214        {215          one: parent.refs.P_P1_C1.refs.DIV_1,216          two: parent.refs.P_P1_C1.refs.DIV,217          com: parent.refs.P_P1_C1.refs.DIV,218        },219        // Common ancestor with grandparent is the grandparent.220        {221          one: parent.refs.P_P1_C1.refs.DIV_1,222          two: parent.refs.P_P1,223          com: parent.refs.P_P1,224        },225        // Grantparent across subcomponent boundaries.226        {227          one: parent.refs.P_P1_C1.refs.DIV_1,228          two: parent.refs.P_P1_C2.refs.DIV_1,229          com: parent.refs.P_P1,230        },231        // Something deep with something one-off.232        {233          one: parent.refs.P_P1_C1.refs.DIV_1,234          two: parent.refs.P_OneOff,235          com: parent.refs.P,236        },237      ];238      var i;239      for (i = 0; i < ancestors.length; i++) {240        var plan = ancestors[i];241        var firstCommon = ReactDOMTreeTraversal.getLowestCommonAncestor(242          getInst(plan.one),243          getInst(plan.two)244        );245        expect(firstCommon).toBe(getInst(plan.com));246      }247    });248  });...

ref.spec.js

Source:ref.spec.js

1import Vue from 'vue'2describe('ref', () => {3  const components = {4    test: {5      id: 'test',6      template: '<div>test</div>'7    },8    test2: {9      id: 'test2',10      template: '<div>test2</div>'11    },12    test3: {13      id: 'test3',14      template: '<div>test3</div>'15    }16  }17  it('should work', () => {18    const vm = new Vue({19      data: {20        value: 'bar'21      },22      template: `<div>23        <test ref="foo"></test>24        <test2 :ref="value"></test2>25        <test3 :ref="0"></test3>26      </div>`,27      components28    })29    vm.$mount()30    expect(vm.$refs.foo).toBeTruthy()31    expect(vm.$refs.foo.$options.id).toBe('test')32    expect(vm.$refs.bar).toBeTruthy()33    expect(vm.$refs.bar.$options.id).toBe('test2')34    expect(vm.$refs['0']).toBeTruthy()35    expect(vm.$refs['0'].$options.id).toBe('test3')36  })37  it('should dynamically update refs', done => {38    const vm = new Vue({39      data: {40        value: 'foo'41      },42      template: '<div :ref="value"></div>'43    }).$mount()44    expect(vm.$refs.foo).toBe(vm.$el)45    vm.value = 'bar'46    waitForUpdate(() => {47      expect(vm.$refs.foo).toBeUndefined()48      expect(vm.$refs.bar).toBe(vm.$el)49    }).then(done)50  })51  it('should work as a hyperscript prop', () => {52    const vm = new Vue({53      components,54      render (h) {55        return h('div', null, [56          h('test', { ref: 'test' })57        ])58      }59    })60    vm.$mount()61    expect(vm.$refs.test).toBeTruthy()62    expect(vm.$refs.test.$options.id).toBe('test')63  })64  it('should accept HOC component', () => {65    const vm = new Vue({66      template: '<test ref="test"></test>',67      components68    })69    vm.$mount()70    expect(vm.$refs.test).toBeTruthy()71    expect(vm.$refs.test.$options.id).toBe('test')72  })73  it('should accept dynamic component', done => {74    const vm = new Vue({75      template: `<div>76        <component :is="test" ref="test"></component>77      </div>`,78      components,79      data: { test: 'test' }80    })81    vm.$mount()82    expect(vm.$refs.test.$options.id).toBe('test')83    vm.test = 'test2'84    waitForUpdate(() => {85      expect(vm.$refs.test.$options.id).toBe('test2')86      vm.test = ''87    }).then(() => {88      expect(vm.$refs.test).toBeUndefined()89    }).then(done)90  })91  it('should register as Array when used with v-for', done => {92    const vm = new Vue({93      data: {94        items: [1, 2, 3]95      },96      template: `97        <div>98          <div v-for="n in items" ref="list">{{n}}</div>99        </div>100      `101    }).$mount()102    assertRefs()103    // updating104    vm.items.push(4)105    waitForUpdate(assertRefs)106      .then(() => { vm.items = [] })107      .then(assertRefs)108      .then(done)109    function assertRefs () {110      expect(Array.isArray(vm.$refs.list)).toBe(true)111      expect(vm.$refs.list.length).toBe(vm.items.length)112      expect(vm.$refs.list.every((item, i) => item.textContent === String(i + 1))).toBe(true)113    }114  })115  it('should register as Array when used with v-for (components)', done => {116    const vm = new Vue({117      data: {118        items: [1, 2, 3]119      },120      template: `121        <div>122          <test v-for="n in items" ref="list" :key="n" :n="n"></test>123        </div>124      `,125      components: {126        test: {127          props: ['n'],128          template: '<div>{{ n }}</div>'129        }130      }131    }).$mount()132    assertRefs()133    // updating134    vm.items.push(4)135    waitForUpdate(assertRefs)136      .then(() => { vm.items = [] })137      .then(assertRefs)138      .then(done)139    function assertRefs () {140      expect(Array.isArray(vm.$refs.list)).toBe(true)141      expect(vm.$refs.list.length).toBe(vm.items.length)142      expect(vm.$refs.list.every((comp, i) => comp.$el.textContent === String(i + 1))).toBe(true)143    }144  })145  it('should work with v-for on dynamic component', done => {146    components.test3 = {147      id: 'test3',148      template: `<test1 v-if="!normal"></test1><div v-else>test3</div>`,149      data () {150        return { normal: false }151      },152      components: { test1: components.test }153    }154    // a flag that representing whether to test component content or not155    let testContent = false156    const vm = new Vue({157      template: `158        <div>159          <component160            v-for="(item, index) in items"161            :key="index"162            :is="item"163            ref="children">164          </component>165        </div>166      `,167      data: {168        items: ['test2', 'test3']169      },170      components171    }).$mount()172    assertRefs()173    expect(vm.$refs.children[0].$el.textContent).toBe('test2')174    expect(vm.$refs.children[1].$el.textContent).toBe('test')175    // updating176    vm.$refs.children[1].normal = true177    testContent = true178    waitForUpdate(assertRefs)179      .then(() => { vm.items.push('test') })180      .then(assertRefs)181      .then(done)182    function assertRefs () {183      expect(Array.isArray(vm.$refs.children)).toBe(true)184      expect(vm.$refs.children.length).toBe(vm.items.length)185      if (testContent) {186        expect(187          vm.$refs.children.every((comp, i) => comp.$el.textContent === vm.items[i])188        ).toBe(true)189      }190    }191  })192  it('should register on component with empty roots', done => {193    const vm = new Vue({194      template: '<child ref="test"></child>',195      components: {196        child: {197          template: '<div v-if="show"></div>',198          data () {199            return { show: false }200          }201        }202      }203    }).$mount()204    expect(vm.$refs.test).toBe(vm.$children[0])205    vm.$refs.test.show = true206    waitForUpdate(() => {207      expect(vm.$refs.test).toBe(vm.$children[0])208      vm.$refs.test.show = false209    }).then(() => {210      expect(vm.$refs.test).toBe(vm.$children[0])211    }).then(done)212  })...

Using AI Code Generation

1import { storiesOf } from '@storybook/react';2import { action } from '@storybook/addon-actions';3import { linkTo } from '@storybook/addon-links';4import { withInfo } from '@storybook/addon-info';5import { withKnobs, text, boolean, number } from '@storybook/addon-knobs/react';6import { withNotes } from '@storybook/addon-notes';7import { withOptions } from '@storybook/addon-options';8import { withViewport } from '@storybook/addon-viewport';9import { withBackgrounds } from '@storybook/addon-backgrounds';10import { withInfo } from '@storybook/addon-info';11import { withA11y } from '@storybook/addon-a11y';12import { withConsole } from '@storybook/addon-console';13import { withPropsTable } from 'storybook-addon-react-docgen';14import { withTests } from '@storybook/addon-jest';15import { withCsf } from '@storybook/addon-csf';16import { withCssResources } from '@storybook/addon-cssresources';17import { withEmotion } from 'storybook-addon-emotion-theme';18import { withGraphQL } from 'storybook-addon-graphql';19import { withPerformance } from 'storybook-addon-performance';20import { withRedux } from 'storybook-addon-redux';21import { withStyledComponents } from 'storybook-addon-styled-component-theme';22import { withTests } from '@storybook/addon-jest';23const stories = storiesOf('Welcome', module);24stories.addDecorator(withInfo);25stories.addDecorator(withKnobs);26stories.addDecorator(withNotes);27stories.addDecorator(withOptions);28stories.addDecorator(withViewport);29stories.addDecorator(withBackgrounds);30stories.addDecorator(withInfo);31stories.addDecorator(withA11y);32stories.addDecorator(withConsole);33stories.addDecorator(withPropsTable);34stories.addDecorator(withTests);35stories.addDecorator(withCsf);36stories.addDecorator(withCssResources);37stories.addDecorator(withEmotion);38stories.addDecorator(withGraphQL);39stories.addDecorator(withPerformance);40stories.addDecorator(withRedux);41stories.addDecorator(withStyledComponents);42stories.addDecorator(withTests);43stories.add('to Storybook', () => <Button onClick={action('clicked')}>Hello Button</Button>, {44  info: {45  },

Using AI Code Generation

1import { withRootDecorator } from 'storybook-root-decorator';2import { storiesOf } from '@storybook/react';3import { withInfo } from '@storybook/addon-info';4import { withKnobs } from '@storybook/addon-knobs';5import { withReadme } from 'storybook-readme';6import { withA11y } from '@storybook/addon-a11y';7import { withTests } from '@storybook/addon-jest';8import readme from './README.md';9import results from './testResults.json';10import { Component } from './Component';11import './Component.scss';12import './Component.test.js';13import './Component.stories.js';14import { withRootDecorator } from 'storybook-root-decorator';15import { withRootDecorator } from 'storybook-root-decorator';16import { withRootDecorator } from 'storybook-root-decorator';17import { withRootDecorator } from 'storybook-root-decorator';18storiesOf('Component', module)19  .addDecorator(withRootDecorator)20  .addDecorator(withInfo)21  .addDecorator(withKnobs)22  .addDecorator(withReadme(readme))23  .addDecorator(withA11y)24  .addDecorator(withTests({ results }))25  .add('default', () => <Component />);26import { withRootDecorator } from 'storybook-root-decorator';27import { storiesOf } from '@storybook/react';28import { withInfo } from '@storybook/addon-info';29import { withKnobs } from '@storybook/addon-knobs';30import { withReadme } from 'storybook-readme';31import { withA11y } from '@storybook/addon-a11y';32import { withTests } from '@storybook/addon-jest';33import readme from './README.md';

Using AI Code Generation

1import React from "react";2import { storiesOf } from "@storybook/react";3import { action } from "@storybook/addon-actions";4import App from "../src/App";5storiesOf("App", module)6  .add("Default", () => <App />)7  .add("With Text", () => <App text="Hello World" />)8  .add("With Action", () => <App onClick={action("clicked")} />);9This project was bootstrapped with [Create React Library](

Using AI Code Generation

1const { storiesOf } = require('@storybook/react');2const { action } = require('@storybook/addon-actions');3const { withInfo } = require('@storybook/addon-info');4const { withKnobs, text, boolean, number } = require('@storybook/addon-knobs');5const { withNotes } = require('@storybook/addon-notes');6const { withReadme } = require('storybook-readme');7const { withTests } = require('@storybook/addon-jest');8const { withOptions } = require('@storybook/addon-options');9const { withViewport } = require('@storybook/addon-viewport');10const { withBackgrounds } = require('@storybook/addon-backgrounds');11const { withA11y } = require('@storybook/addon-a11y');12const { withLinks } = require('@storybook/addon-links');13const { withConsole } = require('@storybook/addon-console');14const { withCssResources } = require('@storybook/addon-cssresources');15const { withReactRouter } = require('storybook-react-router');16const { withState } = require('@dump247/storybook-state');17const { withRedux } = require('@dump247/storybook-state');18const { withSmartKnobs } = require('storybook-addon-smart-knobs');19const { withPropsTable } = require('storybook-addon-react-docgen');20const { withPropsCombinations } = require('react-storybook-addon-props-combinations');21const { withDocs } = require('storybook-readme');22const { withCode } = require('storybook-addon-code');23const { withI18n } = require('@dump247/storybook-state');24const { withI18nKnobs } = require('storybook-addon-i18n');25const { withTheme } = require('@dump247/storybook-state');26const { withThemesProvider } = require('storybook-addon-styled-component-theme');27const { withThemeKnobs } = require('storybook-addon-material-ui');28const { withFormik } = require('@dump247/storybook-state');29const { withFormikKnobs } = require('storybook-formik');30const { withGraphQL } = require('storybook-addon-graphql');31const { withGraphQLKnobs } = require('storybook-addon-graphql-knobs');32const { withPercyOptions } = require('@percy-io/percy-storybook');33const { withPercyOptions } = require('@percy-io/percy-storybook');34const { withPercy

Using AI Code Generation

1import { withRefs } from 'storybook-addon-react-docgen';2import { ref } from 'storybook-addon-react-docgen';3export default {4};5export const Test = () => <div ref={ref('div1')}>Test</div>;6MIT © [mohseenrm](

Using AI Code Generation

1import { refs } from '@storybook/addon-storyshots-puppeteer';2const myCustomRefs = refs.filter(r => r.kind === 'MyCustomComponent');3initStoryshots({4  storyKindRegex: /^((?!.*?DontTest).)*$/,5  test: multiSnapshotWithOptions({}),6});7import { refs } from '@storybook/addon-storyshots-puppeteer';8const myCustomRefs = refs.filter(r => r.kind === 'MyCustomComponent');9initStoryshots({10  storyKindRegex: /^((?!.*?DontTest).)*$/,11  test: multiSnapshotWithOptions({}),12});13import { refs } from '@storybook/addon-storyshots-puppeteer';14const myCustomRefs = refs.filter(r => r.kind === 'MyCustomComponent');15initStoryshots({16  storyKindRegex: /^((?!.*?DontTest).)*$/,17  test: multiSnapshotWithOptions({}),18});19import { refs } from '@storybook/addon-storyshots-puppeteer';20const myCustomRefs = refs.filter(r => r.kind === 'MyCustomComponent');21initStoryshots({22  storyKindRegex: /^((?!.*?DontTest).)*$/,23  test: multiSnapshotWithOptions({}),

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.