How to use refs method in storybook-root

Best JavaScript code snippet using storybook-root

ReactDOMTreeTraversal-test.js

Source:ReactDOMTreeTraversal-test.js Github

copy

Full Screen

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 });...

Full Screen

Full Screen

ref.spec.js

Source:ref.spec.js Github

copy

Full Screen

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 })...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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 },

Full Screen

Using AI Code Generation

copy

Full Screen

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';

Full Screen

Using AI Code Generation

copy

Full Screen

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](

Full Screen

Using AI Code Generation

copy

Full Screen

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

Full Screen

Using AI Code Generation

copy

Full Screen

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](

Full Screen

Using AI Code Generation

copy

Full Screen

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({}),

Full Screen

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:

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!!

Next-Gen App & Browser Testing Cloud

Was this article helpful?

Helpful

NotHelpful