Best JavaScript code snippet using storybook-root
miq-component.spec.js
Source:miq-component.spec.js
1import {2 getDefinition,3 sanitizeAndFreezeInstanceId,4 validateInstance,5 define,6 newInstance,7 getInstance,8 isDefined,9 getComponentNames,10 getComponentInstances,11 clearRegistry,12} from '../../miq-component/registry.js';13import {14 writeProxy,15 lockInstanceProperties,16} from '../../miq-component/utils.js';17describe('Component API', () => {18 let mountingElement;19 const mountId = 'mounting-point';20 beforeAll(() => {21 mountingElement = document.createElement('div');22 mountingElement.id = mountId;23 document.body.appendChild(mountingElement);24 });25 afterEach(() => {26 clearRegistry();27 });28 afterAll(() => {29 document.body.remove(mountingElement);30 });31 it('define method can be used to register new components', () => {32 define('FooComponent', {});33 define('BarComponent', {}, [{}]);34 expect(isDefined('FooComponent')).toBe(true);35 expect(isDefined('BarComponent')).toBe(true);36 expect(getComponentNames()).toEqual(['FooComponent', 'BarComponent']);37 });38 it('define method does nothing if the component name is already taken', () => {39 define('FooComponent', {});40 define('FooComponent', {});41 expect(getComponentNames()).toEqual(['FooComponent']);42 });43 it('define method does nothing if the component name is not a string', () => {44 define(123, {});45 expect(isDefined(123)).toBe(false);46 expect(getComponentNames()).toEqual([]);47 });48 it('define method can be used associate existing instances with the new component', () => {49 const testInstances = [50 { id: 'first' }, { id: 'second' },51 ];52 define('FooComponent', {}, testInstances);53 expect(getInstance('FooComponent', 'first')).toBe(testInstances[0]);54 expect(getInstance('FooComponent', 'second')).toBe(testInstances[1]);55 });56 it('when passing existing instances, define method ensures a sane instance id', () => {57 const testInstances = [58 { id: 'first' }, { id: 123 }, {},59 ];60 define('FooComponent', {}, testInstances);61 const registeredInstances = getComponentInstances('FooComponent');62 expect(registeredInstances).toHaveLength(3);63 expect(registeredInstances[0].id).toBe('first');64 expect(registeredInstances[1].id).toBe('FooComponent-1');65 expect(registeredInstances[2].id).toBe('FooComponent-2');66 });67 it('when passing existing instances, define method ensures that instance id is frozen', () => {68 const testInstances = [69 { id: 'first' },70 ];71 define('FooComponent', {}, testInstances);72 expect(() => {73 testInstances[0].id = 'second';74 }).toThrow();75 });76 it('when passing existing instances, define method skips falsy values', () => {77 const testInstances = [78 false, '', null, undefined, {},79 ];80 define('FooComponent', {}, testInstances);81 const registeredInstances = getComponentInstances('FooComponent');82 expect(registeredInstances).toHaveLength(1);83 expect(registeredInstances[0].id).toBe('FooComponent-0');84 });85 it('when passing existing instances, define method throws in case of reference duplicity', () => {86 const testInstance = { id: 'first' };87 expect(() => {88 define('FooComponent', {}, [testInstance, testInstance]);89 }).toThrow();90 });91 it('when passing existing instances, define method throws in case of id duplicity', () => {92 const testInstances = [93 { id: 'first' }, { id: 'first' },94 ];95 expect(() => {96 define('FooComponent', {}, testInstances);97 }).toThrow();98 });99 it('newInstance method can be used to create new component instances', () => {100 const testInstances = [101 { id: 'first', elementId: mountId }, { id: 'second', elementId: mountId },102 ];103 const testBlueprint = {104 create: jest.fn().mockName('testBlueprint.create')105 .mockImplementationOnce(() => testInstances[0])106 .mockImplementationOnce(() => testInstances[1]),107 };108 define('FooComponent', testBlueprint);109 const resultingInstances = [110 newInstance('FooComponent', { bar: 123 }, mountingElement),111 newInstance('FooComponent', { baz: true }, mountingElement),112 ];113 expect(testBlueprint.create).toHaveBeenCalledTimes(2);114 expect(testBlueprint.create.mock.calls[0]).toEqual([115 { bar: 123 },116 mountingElement,117 ]);118 expect(testBlueprint.create.mock.calls[1]).toEqual([119 { baz: true },120 mountingElement,121 ]);122 expect(resultingInstances[0]).toBe(testInstances[0]);123 expect(resultingInstances[1]).toBe(testInstances[1]);124 expect(resultingInstances[0].id).toBe('first');125 expect(resultingInstances[1].id).toBe('second');126 expect(resultingInstances[0].props).toEqual({ bar: 123 });127 expect(resultingInstances[1].props).toEqual({ baz: true });128 resultingInstances.forEach((instance) => {129 expect(instance.update).toEqual(expect.any(Function));130 expect(instance.destroy).toEqual(expect.any(Function));131 });132 const registeredInstances = getComponentInstances('FooComponent');133 expect(registeredInstances).toHaveLength(2);134 expect(registeredInstances[0]).toBe(resultingInstances[0]);135 expect(registeredInstances[1]).toBe(resultingInstances[1]);136 });137 it('newInstance method does nothing if the component is not already defined', () => {138 const resultingInstance = newInstance('FooComponent', { bar: 123 });139 expect(resultingInstance).toBeUndefined();140 });141 it('newInstance method does nothing if blueprint.create is not a function', () => {142 define('FooComponent', {});143 const resultingInstance = newInstance('FooComponent', { bar: 123 });144 expect(resultingInstance).toBeUndefined();145 });146 it('newInstance method throws if blueprint.create returns a falsy value', () => {147 define('FooComponent', {148 create() { return null; },149 });150 expect(() => {151 newInstance('FooComponent', { bar: 123 });152 }).toThrow();153 });154 it('newInstance method ensures a sane instance id', () => {155 define('FooComponent', {156 create: jest.fn().mockName('testBlueprint.create')157 .mockImplementationOnce(() => ({ id: 'first', elementId: mountId }))158 .mockImplementationOnce(() => ({ id: 123, elementId: mountId }))159 .mockImplementationOnce(() => ({ elementId: mountId })),160 });161 const resultingInstances = [162 newInstance('FooComponent', { bar: 123, elementId: mountId }, mountingElement),163 newInstance('FooComponent', { baz: true, elementId: mountId }, mountingElement),164 newInstance('FooComponent', { qux: ['1337'], elementId: mountId }, mountingElement),165 ];166 expect(resultingInstances[0].id).toBe('first');167 expect(resultingInstances[1].id).toBe('FooComponent-1');168 expect(resultingInstances[2].id).toBe('FooComponent-2');169 });170 it('newInstance method ensures that instance id is frozen', () => {171 define('FooComponent', {172 create: jest.fn().mockName('testBlueprint.create')173 .mockImplementationOnce(() => ({ id: 'first' })),174 });175 const resultingInstance = newInstance('FooComponent', { bar: 123 });176 expect(() => {177 resultingInstance.id = 'second';178 }).toThrow();179 });180 it('newInstance method throws if blueprint.create returns the same instance', () => {181 const testInstance = { id: 'first' };182 define('FooComponent', {183 create: jest.fn().mockName('testBlueprint.create')184 .mockImplementationOnce(() => testInstance)185 .mockImplementationOnce(() => testInstance),186 });187 newInstance('FooComponent', { bar: 123 });188 expect(() => {189 newInstance('FooComponent', { bar: 123 });190 }).toThrow();191 });192 it('newInstance method throws if blueprint.create returns an instance with id already taken', () => {193 define('FooComponent', {194 create: jest.fn().mockName('testBlueprint.create')195 .mockImplementationOnce(() => ({ id: 'first', elementId: mountId }))196 .mockImplementationOnce(() => ({ id: 'first', elementId: mountId })),197 });198 newInstance('FooComponent', { bar: 123 }, mountingElement);199 expect(() => {200 newInstance('FooComponent', { bar: 123 }, mountingElement);201 }).toThrow();202 });203 it('trying to rewrite instance props throws an error', () => {204 define('FooComponent', {205 create() { return {}; },206 });207 const resultingInstance = newInstance('FooComponent', { bar: 123 });208 expect(() => {209 resultingInstance.props = {};210 }).toThrow();211 });212 it('instance.update merges props and delegates to blueprint.update', () => {213 const testInstances = [214 { id: 'first', elementId: mountId }, { id: 'second', elementId: mountId },215 ];216 const testBlueprint = {217 create: jest.fn().mockName('testBlueprint.create')218 .mockImplementationOnce(() => testInstances[0])219 .mockImplementationOnce(() => testInstances[1]),220 update: jest.fn().mockName('testBlueprint.update'),221 };222 define('UpdateComponent', testBlueprint);223 const resultingInstances = [224 newInstance('UpdateComponent', { bar: 123 }, mountingElement),225 newInstance('UpdateComponent', { baz: true }, mountingElement),226 ];227 resultingInstances[0].update({ baz: true, qux: ['1337'] });228 resultingInstances[1].update({ baz: false });229 expect(testBlueprint.update).toHaveBeenCalledTimes(2);230 expect(testBlueprint.update.mock.calls[0]).toEqual([231 { bar: 123, baz: true, qux: ['1337'] },232 mountingElement,233 ]);234 expect(resultingInstances[0].props).toEqual({235 bar: 123, baz: true, qux: ['1337'],236 });237 expect(resultingInstances[1].props).toEqual({238 baz: false,239 });240 });241 it('instance.update does nothing if blueprint.update is not a function', () => {242 define('FooComponent', {243 create() { return {}; },244 });245 const resultingInstance = newInstance('FooComponent', { bar: 123 });246 resultingInstance.update({ baz: true, qux: ['1337'] });247 expect(resultingInstance.props).toEqual({ bar: 123 });248 });249 it('multiple props modifications will trigger single instance.update', (done) => {250 const testBlueprint = {251 create() { return {}; },252 update: jest.fn().mockName('testBlueprint.update'),253 };254 define('FooComponent', testBlueprint);255 const resultingInstance = newInstance('FooComponent', { bar: 123 });256 resultingInstance.update = jest.fn().mockName('resultingInstance.update');257 resultingInstance.props.baz = true;258 resultingInstance.props.qux = ['1337'];259 setTimeout(() => {260 expect(resultingInstance.update).toHaveBeenCalledWith({ baz: true, qux: ['1337'] });261 done();262 });263 });264 it('instance.destroy delegates to blueprint.destroy', () => {265 const testInstances = [266 { id: 'first', elementId: mountId }, { id: 'second', elementId: mountId },267 ];268 const testBlueprint = {269 create: jest.fn().mockName('testBlueprint.create')270 .mockImplementationOnce(() => testInstances[0])271 .mockImplementationOnce(() => testInstances[1]),272 destroy: jest.fn().mockName('testBlueprint.destroy'),273 elementId: mountId,274 };275 define('FooComponent', testBlueprint);276 const resultingInstances = [277 newInstance('FooComponent', { bar: 123 }, mountingElement),278 newInstance('FooComponent', { baz: true }),279 ];280 resultingInstances[0].destroy();281 resultingInstances[1].destroy();282 expect(testBlueprint.destroy).toHaveBeenCalledTimes(2);283 expect(testBlueprint.destroy.mock.calls[0]).toEqual([284 resultingInstances[0],285 mountingElement,286 ]);287 expect(testBlueprint.destroy.mock.calls[0][0]).toBe(resultingInstances[0]);288 expect(testBlueprint.destroy.mock.calls[1]).toEqual([289 resultingInstances[1],290 undefined,291 ]);292 expect(testBlueprint.destroy.mock.calls[1][0]).toBe(resultingInstances[1]);293 });294 it('instance.destroy removes the component instance', () => {295 define('FooComponent', {296 create: jest.fn().mockName('testBlueprint.create')297 .mockImplementationOnce(() => ({ id: 'first' })),298 });299 const resultingInstance = newInstance('FooComponent', { bar: 123 });300 resultingInstance.destroy();301 expect(getInstance('FooComponent', 'first')).toBeUndefined();302 expect(getComponentInstances('FooComponent')).toEqual([]);303 });304 it('instance.destroy prevents access to existing instance properties except for id', () => {305 define('FooComponent', {306 create() { return {}; },307 });308 const resultingInstance = newInstance('FooComponent', { bar: 123 });309 resultingInstance.destroy();310 Object.keys(resultingInstance)311 .filter(propName => propName !== 'id')312 .forEach((propName) => {313 expect(() => resultingInstance[propName]).toThrow();314 expect(() => {315 resultingInstance[propName] = ['1337'];316 }).toThrow();317 });318 });319 it('getInstance method can be used to obtain existing component instances', () => {320 define('FooComponent', {321 create: jest.fn().mockName('testBlueprint.create')322 .mockImplementationOnce(() => ({ id: 'first' })),323 });324 const resultingInstance = newInstance('FooComponent', { bar: 123 });325 const obtainedInstance = getInstance('FooComponent', 'first');326 expect(obtainedInstance).toBe(resultingInstance);327 expect(getInstance('FooComponent', 'second')).toBeUndefined();328 });329 it('isDefined method can be used to determine whether a component is already defined', () => {330 define('FooComponent', {});331 expect(isDefined('FooComponent')).toBe(true);332 expect(isDefined('BarComponent')).toBe(false);333 });334 it('getDefinition returns the correct component definition', () => {335 const testBlueprint = {};336 define('FooComponent', testBlueprint);337 const definition = getDefinition('FooComponent');338 expect(definition.name).toBe('FooComponent');339 expect(definition.blueprint).toBe(testBlueprint);340 expect(getDefinition('BarComponent')).toBeUndefined();341 });342 it('sanitizeAndFreezeInstanceId ensures the instance id is sane and cannot be changed', () => {343 const testInstances = [344 { id: 'first' }, { id: 123 }, {},345 ];346 define('FooComponent', {});347 const definition = getDefinition('FooComponent');348 testInstances.forEach((instance) => {349 sanitizeAndFreezeInstanceId(instance, definition);350 });351 expect(testInstances[0].id).toBe('first');352 expect(testInstances[1].id).toBe('FooComponent-0');353 expect(testInstances[2].id).toBe('FooComponent-0');354 testInstances.forEach((instance) => {355 expect(() => {356 instance.id = 'second'; // eslint-disable-line no-param-reassign, param reassing this is expected to fail, therefore eslint rule here does not make sense357 }).toThrow();358 });359 });360 it('validateInstance performs the necessary instance validations', () => {361 define('FooComponent', {362 create: jest.fn().mockName('testBlueprint.create')363 .mockImplementationOnce(() => ({ id: 'first' })),364 });365 const firstInstance = newInstance('FooComponent', { bar: 123 });366 const definition = getDefinition('FooComponent');367 expect(() => {368 validateInstance({ id: 'second' }, definition);369 }).not.toThrow();370 expect(() => {371 validateInstance(firstInstance, definition);372 }).toThrow();373 expect(() => {374 validateInstance({ id: 'first' }, definition);375 }).toThrow();376 });377 it('writeProxy can be used to proxy writes to properties of the given object', () => {378 const object = { bar: 123, baz: true };379 const onWrite = jest.fn().mockName('onWrite');380 const resultingObject = writeProxy(object, onWrite);381 expect(resultingObject).toEqual(object);382 resultingObject.bar = 456;383 resultingObject.qux = ['1337'];384 expect(resultingObject).toEqual(object);385 expect(object).toEqual({ bar: 456, baz: true, qux: ['1337'] });386 expect(onWrite).toHaveBeenCalledTimes(2);387 expect(onWrite.mock.calls[0]).toEqual([388 'bar', 456,389 ]);390 expect(onWrite.mock.calls[1]).toEqual([391 'qux', ['1337'],392 ]);393 });394 it('lockInstanceProperties prevents access to existing instance properties except for id', () => {395 const testInstance = { id: 'first', bar: 123, baz: true };396 const resultingInstance = lockInstanceProperties(testInstance);397 expect(resultingInstance.id).toBe('first');398 ['bar', 'baz'].forEach((propName) => {399 expect(() => resultingInstance[propName]).toThrow();400 expect(() => {401 resultingInstance[propName] = ['1337'];402 }).toThrow();403 });404 });...
NodeRegistry-test.js
Source:NodeRegistry-test.js
1import NodeRegistry from 'src/addons/MountNode/lib/NodeRegistry'2import { sandbox } from 'test/utils'3describe('NodeRegistry', () => {4 it('is a class', () => {5 expect(NodeRegistry).to.be.a('function')6 })7 describe('add', () => {8 it('adds different components to same node', () => {9 const handler = sandbox.spy()10 const registry = new NodeRegistry()11 registry.add('foo', 'FooComponent')12 registry.add('foo', 'BarComponent')13 registry.emit('foo', handler)14 handler.should.have.been.calledOnce()15 handler.should.have.been.calledWithMatch('foo', new Set(['FooComponent', 'BarComponent']))16 })17 it('adds components to different nodes node', () => {18 const handler = sandbox.spy()19 const registry = new NodeRegistry()20 registry.add('foo', 'FooComponent')21 registry.add('foo', 'BarComponent')22 registry.add('bar', 'BazComponent')23 registry.add('bar', 'QuxComponent')24 registry.emit('foo', handler)25 handler.should.have.been.calledOnce()26 handler.should.have.been.calledWithMatch('foo', new Set(['FooComponent', 'BarComponent']))27 handler.resetHistory()28 registry.emit('bar', handler)29 handler.should.have.been.calledOnce()30 handler.should.have.been.calledWithMatch('bar', new Set(['BazComponent', 'QuxComponent']))31 })32 })33 describe('del', () => {34 it('deletes only specified component', () => {35 const handler = sandbox.spy()36 const registry = new NodeRegistry()37 registry.add('foo', 'FooComponent')38 registry.add('foo', 'BarComponent')39 registry.del('foo', 'FooComponent')40 registry.emit('foo', handler)41 handler.should.have.been.calledOnce()42 handler.should.have.been.calledWithMatch('foo', new Set(['BarComponent']))43 })44 it('deletes node when all components are deleted', () => {45 const handler = sandbox.spy()46 const registry = new NodeRegistry()47 registry.add('foo', 'FooComponent')48 registry.add('foo', 'BarComponent')49 registry.del('foo', 'FooComponent')50 registry.del('foo', 'BarComponent')51 registry.emit('foo', handler)52 handler.should.have.been.calledOnce()53 handler.should.have.been.calledWithMatch('foo', undefined)54 })55 })...
contextuallyTypedStringLiteralsInJsxAttributes01.js
Source:contextuallyTypedStringLiteralsInJsxAttributes01.js
1//// [contextuallyTypedStringLiteralsInJsxAttributes01.tsx]2namespace JSX {3 export interface IntrinsicElements {4 span: {};5 }6 export interface Element {7 something?: any;8 }9}10const FooComponent = (props: { foo: "A" | "B" | "C" }) => <span>{props.foo}</span>;11<FooComponent foo={"A"} />;12<FooComponent foo="A" />;13<FooComponent foo={"f"} />;14<FooComponent foo="f" />;1516//// [contextuallyTypedStringLiteralsInJsxAttributes01.jsx]17var FooComponent = function (props) { return <span>{props.foo}</span>; };18<FooComponent foo={"A"}/>;19<FooComponent foo="A"/>;20<FooComponent foo={"f"}/>;21<FooComponent foo="f"/>;222324//// [contextuallyTypedStringLiteralsInJsxAttributes01.d.ts]25declare namespace JSX {26 interface IntrinsicElements {27 span: {};28 }29 interface Element {30 something?: any;31 }32}33declare const FooComponent: (props: {34 foo: "A" | "B" | "C";
...
Using AI Code Generation
1import { FooComponent } from "storybook-root";2import { BarComponent } from "storybook-root";3import { BazComponent } from "storybook-root";4import { FooComponent } from "storybook-root";5import { BarComponent } from "storybook-root";6import { BazComponent } from "storybook-root";7import { FooComponent } from "storybook-root";8import { BarComponent } from "storybook-root";9import { BazComponent } from "storybook-root";10import { FooComponent } from "storybook-root";11import { BarComponent } from "storybook-root";12import { BazComponent } from "storybook-root";13import { FooComponent } from "storybook-root";14import { BarComponent } from "storybook-root";15import { BazComponent } from "storybook-root";16import { FooComponent } from "storybook-root";17import { BarComponent } from "storybook-root";18import { BazComponent } from "storybook-root";19import { FooComponent } from "storybook-root";20import { BarComponent } from "storybook-root";21import { BazComponent } from "storybook-root";
Using AI Code Generation
1import FooComponent from 'storybook-root/FooComponent'2import BarComponent from 'storybook-root/BarComponent'3import BazComponent from 'storybook-root/BazComponent'4import QuxComponent from 'storybook-root/QuxComponent'5import QuuxComponent from 'storybook-root/QuuxComponent'6import CorgeComponent from 'storybook-root/CorgeComponent'7import GraultComponent from 'storybook-root/GraultComponent'8import GarplyComponent from 'storybook-root/GarplyComponent'9import WibbleComponent from 'storybook-root/WibbleComponent'10import WobbleComponent from 'storybook-root/WobbleComponent'11import WubbleComponent from 'storybook-root/WubbleComponent'12import FlobComponent from 'storybook-root/FlobComponent'13import GloopComponent from 'storybook-root/GloopComponent'14import GlorbComponent from 'storybook-root/GlorbComponent'15import BlorfComponent from 'storybook-root/BlorfComponent'16import WibblerComponent from 'storybook-root/WibblerComponent'
Using AI Code Generation
1import { FooComponent } from 'storybook-root';2import { FooComponent } from 'storybook-root';3import { FooComponent } from 'storybook-root';4import { FooComponent } from 'storybook-root';5import { FooComponent } from 'storybook-root';6import { FooComponent } from 'storybook-root';7import { FooComponent } from 'storybook-root';8import { FooComponent } from 'storybook-root';9import { FooComponent } from 'storybook-root';10import { FooComponent } from 'storybook-root';11import { FooComponent } from 'storybook-root';12import { FooComponent } from 'storybook-root';13import { FooComponent } from 'storybook-root';14import { FooComponent } from 'storybook-root';15import { FooComponent } from 'storybook-root';16import { FooComponent } from 'storybook-root';17import { FooComponent } from 'storybook-root';18import { FooComponent } from 'storybook-root';19import { FooComponent } from 'storybook-root';20import { FooComponent } from 'storybook-root';21import { FooComponent } from 'storybook-root';
Using AI Code Generation
1import FooComponent from './FooComponent';2export default {3};4export default function FooComponent() {5 return "Hello World";6}
Using AI Code Generation
1Is there a way to import the storybook-root package in the test project? Or to add the storybook-root package to the test project?2What error do you get when you try to import it?3I tried to import it in the test.js file with the following code:4import { FooComponent } from 'storybook-root';5I tried to import it in the test.js file with the following code:6I tried to import it in the test.js file with the following code:7Oh, sorry. I tried to import it with the following code:8import { FooComponent } from 'storybook-root';9I tried to import it with the following code:10import { FooComponent } from 'storybook-root';11import { FooComponent } from '@storybook-root';
Using AI Code Generation
1Hi @michael, I’m sorry, I was not clear enough. I’m trying to use a component that is defined in a storybook. It’s a component that is not used in the app. I’m trying to use it in a test file. I’m not sure how to import it. I’m trying to do something like:2import {FooComponent} from ‘storybook-root’3Hi @julien. I don’t think you can import from storybook-root . I’ve never tried this before, but I think you need to import from the path to the component. For example, if your component is in src/components/FooComponent/index.js , you would import it like this:4import FooComponent from '../../components/FooComponent'5Thanks @michael. I think I’m close but I’m still getting an error. I’m trying to import a component that is defined in a storybook. It’s a component that is not used in the app. I’m trying to use it in a test file. I’m not sure how to import it. I’m trying to do something like:6import {FooComponent} from ‘storybook-root’7I’m not sure what you mean by storybook-root . I think you need to import the component from the path to the component. For example, if your component is in src/components/FooComponent/index.js , you would import it like this:8import FooComponent from '../../components/FooComponent'9Thanks @michael. I think I’m close but I’m still getting an error. I’m trying to import a component that is defined in a storybook. It’s a component that is not used in the app. I’m trying to use it in a test file. I’m not sure how to import it. I’m trying to do something like:10import {FooComponent} from ‘storybook-root’11Hi, @julien. I’m not sure what you mean by storybook-root . I think you need to import the component from the path
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.
You could also refer to video tutorials over LambdaTest YouTube channel to get step by step demonstration from industry experts.
Get 100 minutes of automation test minutes FREE!!