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

How to use onRemove method in storybook-root

Best JavaScript code snippet using storybook-root

test-onremove.js

Source:test-onremove.js

1"use strict"2var o = require("ospec")3var components = require("../test-utils/components")4var domMock = require("../test-utils/domMock")5var vdom = require("../lib/render")6var m = require("../lib/hyperscript")7o.spec("onremove", function() {8	var $window, root, render9	o.beforeEach(function() {10		$window = domMock()11		root = $window.document.createElement("div")12		render = vdom($window)13	})14	o("does not call onremove when creating", function() {15		var create = o.spy()16		var update = o.spy()17		var vnode = {tag: "div", attrs: {onremove: create}}18		var updated = {tag: "div", attrs: {onremove: update}}19		render(root, [vnode])20		render(root, [updated])21		o(create.callCount).equals(0)22	})23	o("does not call onremove when updating", function() {24		var create = o.spy()25		var update = o.spy()26		var vnode = {tag: "div", attrs: {onremove: create}}27		var updated = {tag: "div", attrs: {onremove: update}}28		render(root, [vnode])29		render(root, [updated])30		o(create.callCount).equals(0)31		o(update.callCount).equals(0)32	})33	o("calls onremove when removing element", function() {34		var remove = o.spy()35		var vnode = {tag: "div", attrs: {onremove: remove}, state: {}}36		render(root, [vnode])37		render(root, [])38		o(remove.callCount).equals(1)39		o(remove.this).equals(vnode.state)40		o(remove.args[0]).equals(vnode)41	})42	o("calls onremove when removing text", function() {43		var remove = o.spy()44		var vnode = {tag: "#", attrs: {onremove: remove}, children: "a", state: {}}45		render(root, [vnode])46		render(root, [])47		o(remove.callCount).equals(1)48		o(remove.this).equals(vnode.state)49		o(remove.args[0]).equals(vnode)50	})51	o("calls onremove when removing fragment", function() {52		var remove = o.spy()53		var vnode = {tag: "[", attrs: {onremove: remove}, children: [], state: {}}54		render(root, [vnode])55		render(root, [])56		o(remove.callCount).equals(1)57		o(remove.this).equals(vnode.state)58		o(remove.args[0]).equals(vnode)59	})60	o("calls onremove when removing html", function() {61		var remove = o.spy()62		var vnode = {tag: "<", attrs: {onremove: remove}, children: "a", state: {}}63		render(root, [vnode])64		render(root, [])65		o(remove.callCount).equals(1)66		o(remove.this).equals(vnode.state)67		o(remove.args[0]).equals(vnode)68	})69	o("does not set onremove as an event handler", function() {70		var remove = o.spy()71		var vnode = {tag: "div", attrs: {onremove: remove}, children: []}72		render(root, [vnode])73		o(vnode.dom.onremove).equals(undefined)74		o(vnode.dom.attributes["onremove"]).equals(undefined)75		o(vnode.events).equals(undefined)76	})77	o("calls onremove on keyed nodes", function() {78		var remove = o.spy()79		var vnodes = [{tag: "div", key: 1}]80		var temp = [{tag: "div", key: 2, attrs: {onremove: remove}}]81		var updated = [{tag: "div", key: 1}]82		render(root, vnodes)83		render(root, temp)84		render(root, updated)85		o(vnodes[0].dom).notEquals(updated[0].dom) // this used to be a recycling pool test86		o(remove.callCount).equals(1)87	})88	o("does not recycle when there's an onremove", function() {89		var remove = o.spy()90		var vnode = {tag: "div", key: 1, attrs: {onremove: remove}}91		var updated = {tag: "div", key: 1, attrs: {onremove: remove}}92		render(root, [vnode])93		render(root, [])94		render(root, [updated])95		o(vnode.dom).notEquals(updated.dom)96	})97	components.forEach(function(cmp){98		o.spec(cmp.kind, function(){99			var createComponent = cmp.create100			o("calls onremove on nested component", function() {101				var spy = o.spy()102				var comp = createComponent({103					view: function() {return m(outer)}104				})105				var outer = createComponent({106					view: function() {return m(inner)}107				})108				var inner = createComponent({109					onremove: spy,110					view: function() {return m("div")}111				})112				render(root, {tag: comp})113				render(root, null)114				o(spy.callCount).equals(1)115			})116			o("calls onremove on nested component child", function() {117				var spy = o.spy()118				var comp = createComponent({119					view: function() {return m(outer)}120				})121				var outer = createComponent({122					view: function() {return m(inner, m("a", {onremove: spy}))}123				})124				var inner = createComponent({125					view: function(vnode) {return m("div", vnode.children)}126				})127				render(root, {tag: comp})128				render(root, null)129				o(spy.callCount).equals(1)130			})131			o("doesn't call onremove on children when the corresponding view returns null (after removing the parent)", function() {132				var threw = false133				var spy = o.spy()134				var parent = createComponent({135					view: function() {}136				})137				var child = createComponent({138					view: function() {},139					onremove: spy140				})141				render(root, {tag: parent, children: [child]})142				try {143					render(root, null)144				} catch (e) {145					threw = e146				}147				o(spy.callCount).equals(0)148				o(threw).equals(false)149			})150			o("doesn't call onremove on children when the corresponding view returns null (after removing the children)", function() {151				var threw = false152				var spy = o.spy()153				var parent = createComponent({154					view: function() {}155				})156				var child = createComponent({157					view: function() {},158					onremove: spy159				})160				render(root, {tag: parent, children: [child]})161				try {162					render(root, {tag: parent})163				} catch (e) {164					threw = true165				}166				o(spy.callCount).equals(0)167				o(threw).equals(false)168			})169			o("onremove doesn't fire on nodes that go from pool to pool (#1990)", function() {170				var onremove = o.spy();171				render(root, [m("div", m("div")), m("div", m("div", {onremove: onremove}))]);172				render(root, [m("div", m("div"))]);173				render(root, []);174				o(onremove.callCount).equals(1)175			})176			o("doesn't fire when removing the children of a node that's brought back from the pool (#1991 part 2)", function() {177				var onremove = o.spy()178				var vnode = {tag: "div", key: 1, children: [{tag: "div", attrs: {onremove: onremove}}]}179				var temp = {tag: "div", key: 2}180				var updated = {tag: "div", key: 1, children: [{tag: "p"}]}181				render(root, [vnode])182				render(root, [temp])183				render(root, [updated])184				o(vnode.dom).notEquals(updated.dom) // this used to be a recycling pool test185				o(onremove.callCount).equals(1)186			})187			// Warning: this test is complicated because it's replicating a race condition.188			o("removes correct nodes when child delays removal, parent removes, then child resolves", function () {189				// Sugar over the complexity - I need to test the entire tree for consistency.190				function expect(expectedPairs) {191					var expected = []192					for (var i = 0; i < expectedPairs.length; i++) {193						var name = expectedPairs[i][0]194						var text = expectedPairs[i][1]195						expected.push({196							name: name,197							firstType: name === "#text" ? null : "#text",198							text: text,199						})200					}201					var actual = []202					var list = root.firstChild.childNodes203					for (var i = 0; i < list.length; i++) {204						var current = list[i]205						var textNode = current.childNodes.length === 1206							? current.firstChild207							: current208						actual.push({209							name: current.nodeName,210							firstType: textNode === current ? null : textNode.nodeName,211							text: textNode.nodeValue,212						})213					}214					o(actual).deepEquals(expected)215				}216				var resolve217				function update(id, showParent, showChild) {218					render(root, [219						{tag: "div", children: [220							showParent ? {tag: "[", children: [221								{tag: "#", children: ""}, // Required222								showChild ? {tag: "[", attrs: {223									onbeforeremove: function () {224										return {then: function (r) { resolve = r }}225									},226								}, children: [227									{tag: "div", text: id},228								]} : undefined,229							]} : undefined,230						]}231					])232				}233				update("1", true, true)234				expect([235					["#text", ""],236					["DIV", "1"],237				])238				o(resolve).equals(undefined)239				update("2", true, false)240				expect([241					["#text", ""],242					["DIV", "1"],243				])244				o(typeof resolve).equals("function")245				var original = resolve246				update("3", true, true)247				expect([248					["#text", ""],249					["DIV", "1"],250					["DIV", "3"],251				])252				o(resolve).equals(original)253				update("4", false, true)254				expect([255					["DIV", "1"],256				])257				o(resolve).equals(original)258				update("5", true, true)259				expect([260					["DIV", "1"],261					["#text", ""],262					["DIV", "5"],263				])264				o(resolve).equals(original)265				resolve()266				expect([267					["#text", ""],268					["DIV", "5"],269				])270				o(resolve).equals(original)271				update("6", true, true)272				expect([273					["#text", ""],274					["DIV", "6"],275				])276				o(resolve).equals(original)277			})278			// Warning: this test is complicated because it's replicating a race condition.279			o("removes correct nodes when child delays removal, parent removes, then child resolves + rejects both", function () {280				// Sugar over the complexity - I need to test the entire tree for consistency.281				function expect(expectedPairs) {282					var expected = []283					for (var i = 0; i < expectedPairs.length; i++) {284						var name = expectedPairs[i][0]285						var text = expectedPairs[i][1]286						expected.push({287							name: name,288							firstType: name === "#text" ? null : "#text",289							text: text,290						})291					}292					var actual = []293					var list = root.firstChild.childNodes294					for (var i = 0; i < list.length; i++) {295						var current = list[i]296						var textNode = current.childNodes.length === 1297							? current.firstChild298							: current299						actual.push({300							name: current.nodeName,301							firstType: textNode === current ? null : textNode.nodeName,302							text: textNode.nodeValue,303						})304					}305					o(actual).deepEquals(expected)306				}307				var resolve, reject308				function update(id, showParent, showChild) {309					render(root, [310						{tag: "div", children: [311							showParent ? {tag: "[", children: [312								{tag: "#", children: ""}, // Required313								showChild ? {tag: "[", attrs: {314									onbeforeremove: function () {315										return {then: function (res, rej) {316											resolve = res317											reject = rej318										}}319									},320								}, children: [321									{tag: "div", text: id},322								]} : undefined,323							]} : undefined,324						]}325					])326				}327				update("1", true, true)328				expect([329					["#text", ""],330					["DIV", "1"],331				])332				o(resolve).equals(undefined)333				update("2", true, false)334				expect([335					["#text", ""],336					["DIV", "1"],337				])338				o(typeof resolve).equals("function")339				var originalResolve = resolve340				var originalReject = reject341				update("3", true, true)342				expect([343					["#text", ""],344					["DIV", "1"],345					["DIV", "3"],346				])347				o(resolve).equals(originalResolve)348				o(reject).equals(originalReject)349				update("4", false, true)350				expect([351					["DIV", "1"],352				])353				o(resolve).equals(originalResolve)354				o(reject).equals(originalReject)355				update("5", true, true)356				expect([357					["DIV", "1"],358					["#text", ""],359					["DIV", "5"],360				])361				o(resolve).equals(originalResolve)362				o(reject).equals(originalReject)363				resolve()364				reject()365				reject()366				resolve()367				expect([368					["#text", ""],369					["DIV", "5"],370				])371				o(resolve).equals(originalResolve)372				o(reject).equals(originalReject)373				update("6", true, true)374				expect([375					["#text", ""],376					["DIV", "6"],377				])378				o(resolve).equals(originalResolve)379				o(reject).equals(originalReject)380			})381		})382	})...

element.test.js

Source:element.test.js

1/**2 * External dependencies3 */4import React from 'react';5/**6 * Internal dependencies7 */8import ImageUpload, {9	renderImageUploadButton,10	renderImage,11} from '@moderntribe/common/elements/image-upload/element';12jest.mock( '@wordpress/editor', () => ( {13	MediaUpload: () => ( <button>Media Upload</button> ),14} ) );15jest.mock( '@moderntribe/common/icons', () => ( {16	Close: () => <span>icon</span>,17} ) );18describe( 'renderImageUploadButton', () => {19	const open = jest.fn();20	afterEach( () => {21		open.mockClear();22	} );23	it( 'renders the button', () => {24		const component = renderer.create( renderImageUploadButton( false, 'label' )( { open } ) );25		expect( component.toJSON() ).toMatchSnapshot();26	} );27	it( 'renders the button disabled', () => {28		const component = renderer.create( renderImageUploadButton( true, 'label' )( { open } ) );29		expect( component.toJSON() ).toMatchSnapshot();30	} );31	it( 'executes the open action when the mediaUpload is fired', () => {32		const component = mount( renderImageUploadButton( false, 'label' )( { open } ) );33		component.find( 'button' ).simulate( 'click' );34		expect( open ).toHaveBeenCalled();35		expect( open ).toHaveBeenCalledTimes( 1 );36	} );37} );38describe( 'renderImage', () => {39	const onRemove = jest.fn();40	const image = {41		id: 42,42		src: 'test-src',43		alt: 'test-alt',44	};45	afterEach( () => {46		onRemove.mockClear();47	} );48	it( 'renders the image and button', () => {49		const component = renderer.create( renderImage( false, image, onRemove ) );50		expect( component.toJSON() ).toMatchSnapshot();51	} );52	it( 'renders the image and disabled button', () => {53		const component = renderer.create( renderImage( true, image, onRemove ) );54		expect( component.toJSON() ).toMatchSnapshot();55	} );56	it( 'executes onRemove on click', () => {57		const component = mount( renderImage( false, image, onRemove ) );58		component.find( 'button' ).simulate( 'click' );59		expect( onRemove ).toHaveBeenCalled();60		expect( onRemove ).toHaveBeenCalledTimes( 1 );61	} );62} );63describe( 'ImageUpload', () => {64	const onRemove = jest.fn();65	const onSelect = jest.fn();66	let image;67	beforeEach( () => {68		image = {69			id: 0,70			src: '',71			alt: '',72		};73	} );74	afterEach( () => {75		onRemove.mockClear();76		onSelect.mockClear();77	} );78	it( 'renders the component', () => {79		const component = renderer.create(80			<ImageUpload81				image={ image }82				onSelect={ onSelect }83				onRemove={ onRemove }84			/>85		);86		expect( component.toJSON() ).toMatchSnapshot();87	} );88	it( 'renders with title', () => {89		const component = renderer.create(90			<ImageUpload91				image={ image }92				onSelect={ onSelect }93				onRemove={ onRemove }94				title="Modern Tribe"95			/>96		);97		expect( component.toJSON() ).toMatchSnapshot();98	} );99	it( 'renders with description', () => {100		const component = renderer.create(101			<ImageUpload102				image={ image }103				onSelect={ onSelect}104				onRemove={ onRemove }105				description="The Next Generation of Digital Agency"106			/>107		);108		expect( component.toJSON() ).toMatchSnapshot();109	} );110	it( 'renders with class', () => {111		const component = renderer.create(112			<ImageUpload113				image={ image }114				onSelect={ onSelect }115				onRemove={ onRemove }116				className="test-class"117			/>118		);119		expect( component.toJSON() ).toMatchSnapshot();120	} );121	it( 'renders uploaded image', () => {122		image = {123			id: 42,124			src: 'test-src',125			alt: 'test-alt',126		};127		const component = renderer.create(128			<ImageUpload129				image={ image }130				onSelect={ onSelect }131				onRemove={ onRemove }132			/>133		);134		expect( component.toJSON() ).toMatchSnapshot();135	} );136	it( 'renders upload image button', () => {137		const component = renderer.create(138			<ImageUpload139				image={ image }140				onSelect={ onSelect }141				onRemove={ onRemove }142			/>143		);144		expect( component.toJSON() ).toMatchSnapshot();145	} );...

Using AI Code Generation

1import { addDecorator } from '@storybook/react';2import { withConsole } from '@storybook/addon-console';3import { withInfo } from '@storybook/addon-info';4import { withKnobs } from '@storybook/addon-knobs';5import { withTests } from '@storybook/addon-jest';6import { withOptions } from '@storybook/addon-options';7import { setDefaults } from '@storybook/addon-info';8import { withA11y } from '@storybook/addon-a11y';9import results from '../.jest-test-results.json';10addDecorator(11  withTests({12  })13);14addDecorator((storyFn, context) => withConsole()(storyFn)(context));15addDecorator(withInfo);16addDecorator(withKnobs);17addDecorator(withA11y);18addDecorator(19  withOptions({

Using AI Code Generation

1import { render } from '@testing-library/react';2import { unmountComponentAtNode } from 'react-dom';3import { act } from 'react-dom/test-utils';4import App from '../App';5let container = null;6beforeEach(() => {7  container = document.createElement('div');8  document.body.appendChild(container);9});10afterEach(() => {11  unmountComponentAtNode(container);12  container.remove();13  container = null;14});15it('renders with or without a name', () => {16  act(() => {17    render(<App />, container);18  });19  expect(container.textContent).toBe('Hey, stranger');20  act(() => {21    render(<App name="Jenny" />, container);22  });23  expect(container.textContent).toBe('Hello, Jenny!');24  act(() => {25    render(<App name="Margaret" />, container);26  });27  expect(container.textContent).toBe('Hello, Margaret!');28});29import React from 'react';30import { useStorybookRoot } from 'storybook-react-root';31export default function App({ name = 'stranger' }) {32  useStorybookRoot();33  return <h1>Hello, {name}!</h1>;34}35import React from 'react';36import { addDecorator } from '@storybook/react';37import { StorybookRoot, useStorybookRoot } from 'storybook-react-root';38addDecorator((story) => (39  <StorybookRoot onRemove={useStorybookRoot()}>{story()}</StorybookRoot>40));

Using AI Code Generation

1const storybookRoot = document.getElementById('storybook-root');2storybookRoot.onRemove = () => {3  console.log('removed');4};5const storybookPreviewIframe = document.getElementById('storybook-preview-iframe');6storybookPreviewIframe.onRemove = () => {7  console.log('removed');8};9const storybookPreviewWrapper = document.getElementById('storybook-preview-wrapper');10storybookPreviewWrapper.onRemove = () => {11  console.log('removed');12};13MIT © [Amit Kumar](

Using AI Code Generation

1import { addons } from '@storybook/addons';2const channel = addons.getChannel();3channel.on('storybook-root-unmount', () => {4});5import { addons } from '@storybook/addons';6const channel = addons.getChannel();7channel.emit('storybook-root-emit', { message: 'Hello from test.js' });8import { addons } from '@storybook/addons';9const channel = addons.getChannel();10channel.on('storybook-root-on', (data) => {11  console.log(data.message);12});13import { addons } from '@storybook/addons';14const channel = addons.getChannel();15channel.emit('storybook-preview-emit', { message: 'Hello from test.js' });16import { addons } from '@storybook/addons';17const channel = addons.getChannel();18channel.on('storybook-preview-on', (data) => {19  console.log(data.message);20});21import { addons } from '@storybook/addons';22const channel = addons.getChannel();23channel.emit('storybook-preview-iframe-emit', { message: 'Hello from test.js' });24import { addons }

Using AI Code Generation

1document.addEventListener('DOMContentLoaded', function() {2  const storybookRoot = document.getElementById('storybook-root');3  if (storybookRoot) {4    storybookRoot.onRemove = function() {5      storybookRoot.remove();6    };7  }8});9import { addDecorator } from '@storybook/html';10import { withA11y } from '@storybook/addon-a11y';11import { withKnobs } from '@storybook/addon-knobs';12import { withCssResources } from '@storybook/addon-cssresources';13import { withPerformance } from 'storybook-addon-performance';14import { withTests } from '@storybook/addon-jest';15import { withConsole } from '@storybook/addon-console';16import results from '../jest-test-results.json';17import '../test.js';18import '../src/styles/main.css';19import { cssResources } from '../src/styles/css-resources';20addDecorator(withA11y);21addDecorator(withKnobs);22addDecorator(withCssResources);23addDecorator((storyFn, context) => withConsole()(storyFn)(context));24addDecorator(withPerformance);25addDecorator(26  withTests({27  })28);29addDecorator(withCssResources(cssResources));30export const parameters = {31  options: {32    storySort: {

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.