How to use lookupStoryInstance method in storybook-root

Best JavaScript code snippet using storybook-root

sourceDecorator.ts

Source:sourceDecorator.ts Github

copy

Full Screen

...36 if (!this._vnode) {37 return;38 }39 try {40 const storyNode = lookupStoryInstance(this, storyComponent);41 const code = vnodeToString(storyNode._vnode);42 const emitFormattedTemplate = async () => {43 const prettier = await import('prettier/standalone');44 const prettierHtml = await import('prettier/parser-html');45 channel.emit(46 SNIPPET_RENDERED,47 (context || {}).id,48 prettier.format(`<template>${code}</template>`, {49 parser: 'vue',50 plugins: [prettierHtml],51 // Because the parsed vnode missing spaces right before/after the surround tag,52 // we always get weird wrapped code without this option.53 htmlWhitespaceSensitivity: 'ignore',54 })55 );56 };57 emitFormattedTemplate();58 } catch (e) {59 logger.warn(`Failed to generate dynamic story source: ${e}`);60 }61 },62 template: '<story />',63 };64};65export function vnodeToString(vnode: Vue.VNode): string {66 const attrString = [67 ...(vnode.data?.slot ? ([['slot', vnode.data.slot]] as [string, any][]) : []),68 ['class', stringifyClassAttribute(vnode)],69 ...(vnode.componentOptions?.propsData ? Object.entries(vnode.componentOptions.propsData) : []),70 ...(vnode.data?.attrs ? Object.entries(vnode.data.attrs) : []),71 ]72 .filter(([name], index, list) => list.findIndex((item) => item[0] === name) === index)73 .map(([name, value]) => stringifyAttr(name, value))74 .filter(Boolean)75 .join(' ');76 if (!vnode.componentOptions) {77 // Non-component elements (div, span, etc...)78 if (vnode.tag) {79 if (!vnode.children) {80 return `<${vnode.tag} ${attrString}/>`;81 }82 return `<${vnode.tag} ${attrString}>${vnode.children.map(vnodeToString).join('')}</${83 vnode.tag84 }>`;85 }86 // TextNode87 if (vnode.text) {88 if (/[<>"&]/.test(vnode.text)) {89 return `{{\`${vnode.text.replace(/`/g, '\\`')}\`}}`;90 }91 return vnode.text;92 }93 // Unknown94 return '';95 }96 // Probably users never see the "unknown-component". It seems that vnode.tag97 // is always set.98 const tag = vnode.componentOptions.tag || vnode.tag || 'unknown-component';99 if (!vnode.componentOptions.children) {100 return `<${tag} ${attrString}/>`;101 }102 return `<${tag} ${attrString}>${vnode.componentOptions.children103 .map(vnodeToString)104 .join('')}</${tag}>`;105}106function stringifyClassAttribute(vnode: Vue.VNode): string | undefined {107 if (!vnode.data || (!vnode.data.staticClass && !vnode.data.class)) {108 return undefined;109 }110 return (111 [...(vnode.data.staticClass?.split(' ') ?? []), ...normalizeClassBinding(vnode.data.class)]112 .filter(Boolean)113 .join(' ') || undefined114 );115}116// https://vuejs.org/v2/guide/class-and-style.html#Binding-HTML-Classes117function normalizeClassBinding(binding: unknown): readonly string[] {118 if (!binding) {119 return [];120 }121 if (typeof binding === 'string') {122 return [binding];123 }124 if (binding instanceof Array) {125 // To handle an object-in-array binding smartly, we use recursion126 return binding.map(normalizeClassBinding).reduce((a, b) => [...a, ...b], []);127 }128 if (typeof binding === 'object') {129 return Object.entries(binding)130 .filter(([, active]) => !!active)131 .map(([className]) => className);132 }133 // Unknown class binding134 return [];135}136function stringifyAttr(attrName: string, value?: any): string | null {137 if (typeof value === 'undefined' || typeof value === 'function') {138 return null;139 }140 if (value === true) {141 return attrName;142 }143 if (typeof value === 'string') {144 return `${attrName}=${quote(value)}`;145 }146 // TODO: Better serialization (unquoted object key, Symbol/Classes, etc...)147 // Seems like Prettier don't format JSON-look object (= when keys are quoted)148 return `:${attrName}=${quote(JSON.stringify(value))}`;149}150function quote(value: string) {151 return value.includes(`"`) && !value.includes(`'`)152 ? `'${value}'`153 : `"${value.replace(/"/g, '&quot;')}"`;154}155/**156 * Skip decorators and grab a story component itself.157 * https://github.com/pocka/storybook-addon-vue-info/pull/113158 */159function getStoryComponent(w: any) {160 let matched = w;161 while (162 matched &&163 matched.options &&164 matched.options.components &&165 matched.options.components.story &&166 matched.options.components.story.options &&167 matched.options.components.story.options.STORYBOOK_WRAPS168 ) {169 matched = matched.options.components.story.options.STORYBOOK_WRAPS;170 }171 return matched;172}173interface VueInternal {174 // We need to access this private property, in order to grab the vnode of the175 // component instead of the "vnode of the parent of the component".176 // Probably it's safe to rely on this because vm.$vnode is a reference for this.177 // https://github.com/vuejs/vue/issues/6070#issuecomment-314389883178 _vnode: Vue.VNode;179}180/**181 * Find the story's instance from VNode tree.182 */183function lookupStoryInstance(instance: Vue, storyComponent: any): (Vue & VueInternal) | null {184 if (185 instance.$vnode &&186 instance.$vnode.componentOptions &&187 instance.$vnode.componentOptions.Ctor === storyComponent188 ) {189 return instance as Vue & VueInternal;190 }191 for (let i = 0, l = instance.$children.length; i < l; i += 1) {192 const found = lookupStoryInstance(instance.$children[i], storyComponent);193 if (found) {194 return found;195 }196 }197 return null;...

Full Screen

Full Screen

vue.ts

Source:vue.ts Github

copy

Full Screen

...110}111/**112 * Find the story's instance from VNode tree.113 */114function lookupStoryInstance(instance: Vue, storyComponent: any): any {115 if (instance.$vnode?.componentOptions?.Ctor === storyComponent) {116 return instance;117 }118 for (let i = 0, l = instance.$children.length; i < l; i += 1) {119 const found = lookupStoryInstance(instance.$children[i], storyComponent);120 if (found) {121 return found;122 }123 }124 return null;125}126export function getVueCodeSnippet(context: StoryContext): string | undefined {127 const story = getStory(context) as any;128 const storyComponent = getStoryComponent(story.options.STORYBOOK_WRAPS);129 const vm = new Vue({130 data() {131 return {132 STORYBOOK_VALUES: context.args133 };134 },135 render(h: any) {136 return h(story);137 }138 }).$mount();139 const storyNode = lookupStoryInstance(vm, storyComponent);140 if (!storyNode) {141 return;142 }143 const code = vnodeToString(storyNode._vnode);144 return prettier.format(`<template>${code}</template>`, {145 parser: "vue",146 plugins: [prettierHtml],147 // Because the parsed vnode missing spaces right before/after the surround tag,148 // We always get weird wrapped code without this option.149 htmlWhitespaceSensitivity: "ignore"150 });151}152export function getVueCodeLanguage(): string {153 return "html";...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1import React from 'react';2import {render} from 'react-dom';3import {lookupStoryInstance} from 'storybook-root-provider';4import {getStorybook} from '@storybook/react';5const storybook = getStorybook();6const story = storybook[0].stories[0];7const storyInstance = lookupStoryInstance(story);8render(storyInstance, document.getElementById('root'));

Full Screen

Using AI Code Generation

copy

Full Screen

1import { lookupStoryInstance } from 'storybook-root-provider';2const storyInstance = lookupStoryInstance('test', 'test');3console.log(storyInstance);4import { lookupStoryInstance } from 'storybook-root-provider';5const storyInstance = lookupStoryInstance('test', 'test');6console.log(storyInstance);7import { lookupStoryInstance } from 'storybook-root-provider';8const storyInstance = lookupStoryInstance('test', 'test');9console.log(storyInstance);10import { lookupStoryInstance } from 'storybook-root-provider';11const storyInstance = lookupStoryInstance('test', 'test');12console.log(storyInstance);13import { lookupStoryInstance } from 'storybook-root-provider';14const storyInstance = lookupStoryInstance('test', 'test');15console.log(storyInstance);16import { lookupStoryInstance } from 'storybook-root-provider';17const storyInstance = lookupStoryInstance('test', 'test');18console.log(storyInstance);19import { lookupStoryInstance } from 'storybook-root-provider';20const storyInstance = lookupStoryInstance('test', 'test');21console.log(storyInstance);

Full Screen

Using AI Code Generation

copy

Full Screen

1const lookupStoryInstance = require('storybook-root').lookupStoryInstance;2const story = lookupStoryInstance('storybook-root', 'Test', 'Test');3console.log(story);4"scripts": {5}6const lookupStoryInstance = require('storybook-root').lookupStoryInstance;7const story = lookupStoryInstance('storybook-root', 'Test', 'Test');8console.log(story);9"scripts": {10}11const lookupStoryInstance = require('storybook-root').lookupStoryInstance;12const story = lookupStoryInstance('storybook-root', 'Test', 'Test');13console.log(story);14"scripts": {15}

Full Screen

Using AI Code Generation

copy

Full Screen

1const { lookupStoryInstance } = require("../../../storybook-root");2const { default: MyComponent } = lookupStoryInstance("MyComponent");3it("renders", () => {4 const wrapper = shallow(<MyComponent />);5 expect(wrapper).toMatchSnapshot();6});7const { lookupStoryInstance } = require("../../../storybook-root");8const { default: MyComponentStory } = lookupStoryInstance(9);10it("renders", () => {11 const wrapper = shallow(<MyComponentStory />);12 expect(wrapper).toMatchSnapshot();13});14const { lookupStoryInstance } = require("../../../storybook-root");15const { default: MyComponentStory } = lookupStoryInstance(16 { prop1: "value1" }17);18it("renders", () => {19 const wrapper = shallow(<MyComponentStory />);20 expect(wrapper).toMatchSnapshot();21});22const { lookupStoryInstance } = require("../../../storybook-root");23const { default: MyComponentStory } = lookupStoryInstance(24 { prop1: "value1" },25);26it("renders", () => {27 const wrapper = shallow(<MyComponentStory />);28 expect(wrapper).toMatchSnapshot();29});30const { lookupStoryInstance } = require("../../../storybook-root");31const { default: MyComponentStory } = lookupStoryInstance(32 {},33);34it("renders", () => {35 const wrapper = shallow(<MyComponentStory />);36 expect(wrapper).toMatchSnapshot();37});

Full Screen

Using AI Code Generation

copy

Full Screen

1import { lookupStoryInstance } from 'storybook-root';2const storyInstance = lookupStoryInstance('Button', 'Default');3import { lookupStoryInstance } from 'storybook-root';4const storyInstance = lookupStoryInstance('Button', 'Default');5import { lookupStoryInstance } from 'storybook-root';6const storyInstance = lookupStoryInstance('Button', 'Default');7import { lookupStoryInstance } from 'storybook-root';8const storyInstance = lookupStoryInstance('Button', 'Default');9import { lookupStoryInstance } from 'storybook-root';10const storyInstance = lookupStoryInstance('Button', 'Default');11import { lookupStoryInstance } from 'storybook-root';12const storyInstance = lookupStoryInstance('Button', 'Default');13import { lookupStoryInstance } from 'storybook-root';14const storyInstance = lookupStoryInstance('Button', 'Default');

Full Screen

Using AI Code Generation

copy

Full Screen

1import { lookupStoryInstance } from 'storybook-root';2import { render } from '@testing-library/react';3import { getStoryInstance } from 'storybook-root';4const storyInstance = getStoryInstance('test-story');5const { container } = render(storyInstance);6const storyHtml = container.innerHTML;7import { getStorybook } from '@storybook/react';8import { Story } from '@storybook/react/types-6-0';9export const lookupStoryInstance = (storyName: string): Story => {10 const stories = getStorybook();11 for (const story of stories) {12 if (story.kind === 'Test Story') {13 return story.stories.find((s) => s.name === 'Test Story') as Story;14 }15 }16 throw new Error(`Story with name ${storyName} not found`);17};18import { getStorybook } from '@storybook/react';19import { Story } from '@storybook/react/types-6-0';20export const getStoryInstance = (storyName: string): Story => {21 const stories = getStorybook();22 for (const story of stories) {23 if (story.kind === 'Test Story') {24 return story.stories.find((s) => s.name === 'Test Story') as Story;25 }26 }27 throw new Error(`Story with name ${storyName} not found`);28};29import { getStorybook } from '@storybook/react';30import { Story } from '@storybook/react/types-6-0';31export const getStoryInstance = (storyName: string): Story => {32 const stories = getStorybook();33 for (const story of stories) {

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