Test your AI Agents with the all-new Agent to Agent Testing Platform.Learn More
How to use unmounted method in storybook-root
Best JavaScript code snippet using storybook-root
disclosure.test.ts
Source:disclosure.test.ts 
1import { defineComponent, nextTick, ref, watch, h } from 'vue'2import { createRenderTemplate, render } from '../../test-utils/vue-testing-library'3import { Disclosure, DisclosureButton, DisclosurePanel } from './disclosure'4import { suppressConsoleLogs } from '../../test-utils/suppress-console-logs'5import {6 DisclosureState,7 assertDisclosurePanel,8 assertDisclosureButton,9 getDisclosureButton,10 getDisclosurePanel,11 getByText,12 assertActiveElement,13} from '../../test-utils/accessibility-assertions'14import { click, press, Keys, MouseButton } from '../../test-utils/interactions'15import { html } from '../../test-utils/html'16import { useOpenClosedProvider, State, useOpenClosed } from '../../internal/open-closed'17jest.mock('../../hooks/use-id')18afterAll(() => jest.restoreAllMocks())19const renderTemplate = createRenderTemplate({20 Disclosure,21 DisclosureButton,22 DisclosurePanel,23})24describe('Safe guards', () => {25 it.each([26 ['DisclosureButton', DisclosureButton],27 ['DisclosurePanel', DisclosurePanel],28 ])(29 'should error when we are using a <%s /> without a parent <Disclosure />',30 suppressConsoleLogs((name, Component) => {31 expect(() => render(Component)).toThrowError(32 `<${name} /> is missing a parent <Disclosure /> component.`33 )34 })35 )36 it(37 'should be possible to render a Disclosure without crashing',38 suppressConsoleLogs(async () => {39 renderTemplate(40 html`41 <Disclosure>42 <DisclosureButton>Trigger</DisclosureButton>43 <DisclosurePanel>Contents</DisclosurePanel>44 </Disclosure>45 `46 )47 assertDisclosureButton({48 state: DisclosureState.InvisibleUnmounted,49 attributes: { id: 'headlessui-disclosure-button-1' },50 })51 assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })52 })53 )54})55describe('Rendering', () => {56 describe('Disclosure', () => {57 it(58 'should be possible to render a Disclosure using a render prop',59 suppressConsoleLogs(async () => {60 renderTemplate(61 html`62 <Disclosure v-slot="{ open }">63 <DisclosureButton>Trigger</DisclosureButton>64 <DisclosurePanel>Panel is: {{open ? 'open' : 'closed'}}</DisclosurePanel>65 </Disclosure>66 `67 )68 assertDisclosureButton({69 state: DisclosureState.InvisibleUnmounted,70 attributes: { id: 'headlessui-disclosure-button-1' },71 })72 assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })73 await click(getDisclosureButton())74 assertDisclosureButton({75 state: DisclosureState.Visible,76 attributes: { id: 'headlessui-disclosure-button-1' },77 })78 assertDisclosurePanel({ state: DisclosureState.Visible, textContent: 'Panel is: open' })79 })80 )81 it('should be possible to render a Disclosure in an open state by default', async () => {82 renderTemplate(83 html`84 <Disclosure v-slot="{ open }" defaultOpen>85 <DisclosureButton>Trigger</DisclosureButton>86 <DisclosurePanel>Panel is: {{open ? 'open' : 'closed'}}</DisclosurePanel>87 </Disclosure>88 `89 )90 await new Promise<void>(nextTick)91 assertDisclosureButton({92 state: DisclosureState.Visible,93 attributes: { id: 'headlessui-disclosure-button-1' },94 })95 assertDisclosurePanel({ state: DisclosureState.Visible, textContent: 'Panel is: open' })96 await click(getDisclosureButton())97 assertDisclosureButton({ state: DisclosureState.InvisibleUnmounted })98 })99 it(100 'should expose a close function that closes the disclosure',101 suppressConsoleLogs(async () => {102 renderTemplate(103 html`104 <Disclosure v-slot="{ close }">105 <DisclosureButton>Trigger</DisclosureButton>106 <DisclosurePanel>107 <button @click="close()">Close me</button>108 </DisclosurePanel>109 </Disclosure>110 `111 )112 // Focus the button113 getDisclosureButton()?.focus()114 // Ensure the button is focused115 assertActiveElement(getDisclosureButton())116 // Open the disclosure117 await click(getDisclosureButton())118 // Ensure we can click the close button119 await click(getByText('Close me'))120 // Ensure the disclosure is closed121 assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })122 // Ensure the Disclosure.Button got the restored focus123 assertActiveElement(getByText('Trigger'))124 })125 )126 it(127 'should expose a close function that closes the disclosure and restores to a specific element',128 suppressConsoleLogs(async () => {129 renderTemplate({130 template: html`131 <button id="test">restoreable</button>132 <Disclosure v-slot="{ close }">133 <DisclosureButton>Trigger</DisclosureButton>134 <DisclosurePanel>135 <button @click="close(document.getElementById('test'))">Close me</button>136 </DisclosurePanel>137 </Disclosure>138 `,139 setup: () => ({ document }),140 })141 // Focus the button142 getDisclosureButton()?.focus()143 // Ensure the button is focused144 assertActiveElement(getDisclosureButton())145 // Open the disclosure146 await click(getDisclosureButton())147 // Ensure we can click the close button148 await click(getByText('Close me'))149 // Ensure the disclosure is closed150 assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })151 // Ensure the restoreable button got the restored focus152 assertActiveElement(getByText('restoreable'))153 })154 )155 it(156 'should expose a close function that closes the disclosure and restores to a ref',157 suppressConsoleLogs(async () => {158 renderTemplate({159 template: html`160 <button ref="elementRef">restoreable</button>161 <Disclosure v-slot="{ close }">162 <DisclosureButton>Trigger</DisclosureButton>163 <DisclosurePanel>164 <button @click="close(elementRef)">Close me</button>}165 </DisclosurePanel>166 </Disclosure>167 `,168 setup: () => ({ elementRef: ref() }),169 })170 // Focus the button171 getDisclosureButton()?.focus()172 // Ensure the button is focused173 assertActiveElement(getDisclosureButton())174 // Open the disclosure175 await click(getDisclosureButton())176 // Ensure we can click the close button177 await click(getByText('Close me'))178 // Ensure the disclosure is closed179 assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })180 // Ensure the restoreable button got the restored focus181 assertActiveElement(getByText('restoreable'))182 })183 )184 })185 describe('DisclosureButton', () => {186 it(187 'should be possible to render a DisclosureButton using a render prop',188 suppressConsoleLogs(async () => {189 renderTemplate(190 html`191 <Disclosure>192 <DisclosureButton v-slot="slot">{{JSON.stringify(slot)}}</DisclosureButton>193 <DisclosurePanel></DisclosurePanel>194 </Disclosure>195 `196 )197 assertDisclosureButton({198 state: DisclosureState.InvisibleUnmounted,199 attributes: { id: 'headlessui-disclosure-button-1' },200 textContent: JSON.stringify({ open: false }),201 })202 assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })203 await click(getDisclosureButton())204 assertDisclosureButton({205 state: DisclosureState.Visible,206 attributes: { id: 'headlessui-disclosure-button-1' },207 textContent: JSON.stringify({ open: true }),208 })209 assertDisclosurePanel({ state: DisclosureState.Visible })210 })211 )212 it(213 'should be possible to render a DisclosureButton using a render prop and an `as` prop',214 suppressConsoleLogs(async () => {215 renderTemplate(216 html`217 <Disclosure>218 <DisclosureButton as="div" role="button" v-slot="slot">219 {{JSON.stringify(slot)}}220 </DisclosureButton>221 <DisclosurePanel />222 </Disclosure>223 `224 )225 assertDisclosureButton({226 state: DisclosureState.InvisibleUnmounted,227 attributes: { id: 'headlessui-disclosure-button-1' },228 textContent: JSON.stringify({ open: false }),229 })230 assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })231 await click(getDisclosureButton())232 assertDisclosureButton({233 state: DisclosureState.Visible,234 attributes: { id: 'headlessui-disclosure-button-1' },235 textContent: JSON.stringify({ open: true }),236 })237 assertDisclosurePanel({ state: DisclosureState.Visible })238 })239 )240 describe('`type` attribute', () => {241 it('should set the `type` to "button" by default', async () => {242 renderTemplate(243 html`244 <Disclosure>245 <DisclosureButton> Trigger </DisclosureButton>246 </Disclosure>247 `248 )249 expect(getDisclosureButton()).toHaveAttribute('type', 'button')250 })251 it('should not set the `type` to "button" if it already contains a `type`', async () => {252 renderTemplate(253 html`254 <Disclosure>255 <DisclosureButton type="submit"> Trigger </DisclosureButton>256 </Disclosure>257 `258 )259 expect(getDisclosureButton()).toHaveAttribute('type', 'submit')260 })261 it(262 'should set the `type` to "button" when using the `as` prop which resolves to a "button"',263 suppressConsoleLogs(async () => {264 renderTemplate({265 template: html`266 <Disclosure>267 <DisclosureButton :as="CustomButton"> Trigger </DisclosureButton>268 </Disclosure>269 `,270 setup: () => ({271 CustomButton: defineComponent({272 setup: (props) => () => h('button', { ...props }),273 }),274 }),275 })276 await new Promise(requestAnimationFrame)277 expect(getDisclosureButton()).toHaveAttribute('type', 'button')278 })279 )280 it('should not set the type if the "as" prop is not a "button"', async () => {281 renderTemplate(282 html`283 <Disclosure>284 <DisclosureButton as="div"> Trigger </DisclosureButton>285 </Disclosure>286 `287 )288 expect(getDisclosureButton()).not.toHaveAttribute('type')289 })290 it(291 'should not set the `type` to "button" when using the `as` prop which resolves to a "div"',292 suppressConsoleLogs(async () => {293 renderTemplate({294 template: html`295 <Disclosure>296 <DisclosureButton :as="CustomButton"> Trigger </DisclosureButton>297 </Disclosure>298 `,299 setup: () => ({300 CustomButton: defineComponent({301 setup: (props) => () => h('div', props),302 }),303 }),304 })305 await new Promise(requestAnimationFrame)306 expect(getDisclosureButton()).not.toHaveAttribute('type')307 })308 )309 })310 })311 describe('DisclosurePanel', () => {312 it(313 'should be possible to render DisclosurePanel using a render prop',314 suppressConsoleLogs(async () => {315 renderTemplate(316 html`317 <Disclosure>318 <DisclosureButton>Trigger</DisclosureButton>319 <DisclosurePanel v-slot="slot">{{JSON.stringify(slot)}}</DisclosurePanel>320 </Disclosure>321 `322 )323 assertDisclosureButton({324 state: DisclosureState.InvisibleUnmounted,325 attributes: { id: 'headlessui-disclosure-button-1' },326 })327 assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })328 await click(getDisclosureButton())329 assertDisclosureButton({330 state: DisclosureState.Visible,331 attributes: { id: 'headlessui-disclosure-button-1' },332 })333 assertDisclosurePanel({334 state: DisclosureState.Visible,335 textContent: JSON.stringify({ open: true }),336 })337 })338 )339 it('should be possible to always render the DisclosurePanel if we provide it a `static` prop', () => {340 renderTemplate(341 html`342 <Disclosure>343 <DisclosureButton>Trigger</DisclosureButton>344 <DisclosurePanel static>Contents</DisclosurePanel>345 </Disclosure>346 `347 )348 // Let's verify that the Disclosure is already there349 expect(getDisclosurePanel()).not.toBe(null)350 })351 it('should be possible to use a different render strategy for the DisclosurePanel', async () => {352 renderTemplate(353 `354 <Disclosure>355 <DisclosureButton>Trigger</DisclosureButton>356 <DisclosurePanel :unmount="false">Contents</DisclosurePanel>357 </Disclosure>358 `359 )360 // TODO: Figure out a way so that we _don't_ require this.361 await new Promise<void>(nextTick)362 assertDisclosureButton({ state: DisclosureState.InvisibleHidden })363 assertDisclosurePanel({ state: DisclosureState.InvisibleHidden })364 // Let's open the Disclosure, to see if it is not hidden anymore365 await click(getDisclosureButton())366 assertDisclosureButton({ state: DisclosureState.Visible })367 assertDisclosurePanel({ state: DisclosureState.Visible })368 // Let's re-click the Disclosure, to see if it is hidden again369 await click(getDisclosureButton())370 assertDisclosureButton({ state: DisclosureState.InvisibleHidden })371 assertDisclosurePanel({ state: DisclosureState.InvisibleHidden })372 })373 it(374 'should expose a close function that closes the disclosure',375 suppressConsoleLogs(async () => {376 renderTemplate(377 html`378 <Disclosure>379 <DisclosureButton>Trigger</DisclosureButton>380 <DisclosurePanel v-slot="{ close }">381 <button @click="close()">Close me</button>382 </DisclosurePanel>383 </Disclosure>384 `385 )386 // Focus the button387 getDisclosureButton()?.focus()388 // Ensure the button is focused389 assertActiveElement(getDisclosureButton())390 // Open the disclosure391 await click(getDisclosureButton())392 // Ensure we can click the close button393 await click(getByText('Close me'))394 // Ensure the disclosure is closed395 assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })396 // Ensure the Disclosure.Button got the restored focus397 assertActiveElement(getByText('Trigger'))398 })399 )400 it(401 'should expose a close function that closes the disclosure and restores to a specific element',402 suppressConsoleLogs(async () => {403 renderTemplate({404 template: html`405 <button id="test">restoreable</button>406 <Disclosure>407 <DisclosureButton>Trigger</DisclosureButton>408 <DisclosurePanel v-slot="{ close }">409 <button @click="close(document.getElementById('test'))">Close me</button>410 </DisclosurePanel>411 </Disclosure>412 `,413 setup: () => ({ document }),414 })415 // Focus the button416 getDisclosureButton()?.focus()417 // Ensure the button is focused418 assertActiveElement(getDisclosureButton())419 // Open the disclosure420 await click(getDisclosureButton())421 // Ensure we can click the close button422 await click(getByText('Close me'))423 // Ensure the disclosure is closed424 assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })425 // Ensure the restoreable button got the restored focus426 assertActiveElement(getByText('restoreable'))427 })428 )429 it(430 'should expose a close function that closes the disclosure and restores to a ref',431 suppressConsoleLogs(async () => {432 renderTemplate({433 template: html`434 <button ref="elementRef">restoreable</button>435 <Disclosure>436 <DisclosureButton>Trigger</DisclosureButton>437 <DisclosurePanel v-slot="{ close }">438 <button @click="close(elementRef)">Close me</button>}439 </DisclosurePanel>440 </Disclosure>441 `,442 setup: () => ({ elementRef: ref() }),443 })444 // Focus the button445 getDisclosureButton()?.focus()446 // Ensure the button is focused447 assertActiveElement(getDisclosureButton())448 // Open the disclosure449 await click(getDisclosureButton())450 // Ensure we can click the close button451 await click(getByText('Close me'))452 // Ensure the disclosure is closed453 assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })454 // Ensure the restoreable button got the restored focus455 assertActiveElement(getByText('restoreable'))456 })457 )458 })459})460describe('Composition', () => {461 let OpenClosedWrite = defineComponent({462 props: { open: { type: Boolean } },463 setup(props, { slots }) {464 useOpenClosedProvider(ref(props.open ? State.Open : State.Closed))465 return () => slots.default?.()466 },467 })468 let OpenClosedRead = defineComponent({469 emits: ['read'],470 setup(_, { slots, emit }) {471 let state = useOpenClosed()472 watch([state], ([value]) => emit('read', value))473 return () => slots.default?.()474 },475 })476 it(477 'should always open the DisclosurePanel because of a wrapping OpenClosed component',478 suppressConsoleLogs(async () => {479 renderTemplate({480 components: { OpenClosedWrite },481 template: `482 <Disclosure>483 <DisclosureButton>Trigger</DisclosureButton>484 <OpenClosedWrite :open="true">485 <DisclosurePanel v-slot="data">486 {{JSON.stringify(data)}}487 </DisclosurePanel>488 </OpenClosedWrite>489 </Disclosure>490 `,491 })492 // Verify the Disclosure is visible493 assertDisclosurePanel({ state: DisclosureState.Visible })494 // Let's try and open the Disclosure495 await click(getDisclosureButton())496 // Verify the Disclosure is still visible497 assertDisclosurePanel({ state: DisclosureState.Visible })498 })499 )500 it(501 'should always close the DisclosurePanel because of a wrapping OpenClosed component',502 suppressConsoleLogs(async () => {503 renderTemplate({504 components: { OpenClosedWrite },505 template: `506 <Disclosure>507 <DisclosureButton>Trigger</DisclosureButton>508 <OpenClosedWrite :open="false">509 <DisclosurePanel v-slot="data">510 {{JSON.stringify(data)}}511 </DisclosurePanel>512 </OpenClosedWrite>513 </Disclosure>514 `,515 })516 // Verify the Disclosure is hidden517 assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })518 // Let's try and open the Disclosure519 await click(getDisclosureButton())520 // Verify the Disclosure is still hidden521 assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })522 })523 )524 it(525 'should be possible to read the OpenClosed state',526 suppressConsoleLogs(async () => {527 let readFn = jest.fn()528 renderTemplate({529 components: { OpenClosedRead },530 template: `531 <Disclosure>532 <DisclosureButton>Trigger</DisclosureButton>533 <OpenClosedRead @read="readFn">534 <DisclosurePanel></DisclosurePanel>535 </OpenClosedRead>536 </Disclosure>537 `,538 setup() {539 return { readFn }540 },541 })542 await new Promise<void>(nextTick)543 // Verify the Disclosure is hidden544 assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })545 // Let's toggle the Disclosure 3 times546 await click(getDisclosureButton())547 await click(getDisclosureButton())548 await click(getDisclosureButton())549 // Verify the Disclosure is visible550 assertDisclosurePanel({ state: DisclosureState.Visible })551 expect(readFn).toHaveBeenCalledTimes(3)552 expect(readFn).toHaveBeenNthCalledWith(1, State.Open)553 expect(readFn).toHaveBeenNthCalledWith(2, State.Closed)554 expect(readFn).toHaveBeenNthCalledWith(3, State.Open)555 })556 )557})558describe('Keyboard interactions', () => {559 describe('`Enter` key', () => {560 it(561 'should be possible to open the Disclosure with Enter',562 suppressConsoleLogs(async () => {563 renderTemplate(564 html`565 <Disclosure>566 <DisclosureButton>Trigger</DisclosureButton>567 <DisclosurePanel>Contents</DisclosurePanel>568 </Disclosure>569 `570 )571 assertDisclosureButton({572 state: DisclosureState.InvisibleUnmounted,573 attributes: { id: 'headlessui-disclosure-button-1' },574 })575 assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })576 // Focus the button577 getDisclosureButton()?.focus()578 // Open disclosure579 await press(Keys.Enter)580 // Verify it is open581 assertDisclosureButton({ state: DisclosureState.Visible })582 assertDisclosurePanel({583 state: DisclosureState.Visible,584 attributes: { id: 'headlessui-disclosure-panel-2' },585 })586 // Close disclosure587 await press(Keys.Enter)588 assertDisclosureButton({ state: DisclosureState.InvisibleUnmounted })589 })590 )591 it(592 'should not be possible to open the disclosure with Enter when the button is disabled',593 suppressConsoleLogs(async () => {594 renderTemplate(595 html`596 <Disclosure>597 <DisclosureButton disabled>Trigger</DisclosureButton>598 <DisclosurePanel>Content</DisclosurePanel>599 </Disclosure>600 `601 )602 assertDisclosureButton({603 state: DisclosureState.InvisibleUnmounted,604 attributes: { id: 'headlessui-disclosure-button-1' },605 })606 assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })607 // Focus the button608 getDisclosureButton()?.focus()609 // Try to open the disclosure610 await press(Keys.Enter)611 // Verify it is still closed612 assertDisclosureButton({613 state: DisclosureState.InvisibleUnmounted,614 attributes: { id: 'headlessui-disclosure-button-1' },615 })616 assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })617 })618 )619 it(620 'should be possible to close the disclosure with Enter when the disclosure is open',621 suppressConsoleLogs(async () => {622 renderTemplate(623 html`624 <Disclosure>625 <DisclosureButton>Trigger</DisclosureButton>626 <DisclosurePanel>Contents</DisclosurePanel>627 </Disclosure>628 `629 )630 assertDisclosureButton({631 state: DisclosureState.InvisibleUnmounted,632 attributes: { id: 'headlessui-disclosure-button-1' },633 })634 assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })635 // Focus the button636 getDisclosureButton()?.focus()637 // Open disclosure638 await press(Keys.Enter)639 // Verify it is open640 assertDisclosureButton({ state: DisclosureState.Visible })641 assertDisclosurePanel({642 state: DisclosureState.Visible,643 attributes: { id: 'headlessui-disclosure-panel-2' },644 })645 // Close disclosure646 await press(Keys.Enter)647 // Verify it is closed again648 assertDisclosureButton({ state: DisclosureState.InvisibleUnmounted })649 assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })650 })651 )652 })653 describe('`Space` key', () => {654 it(655 'should be possible to open the disclosure with Space',656 suppressConsoleLogs(async () => {657 renderTemplate(658 html`659 <Disclosure>660 <DisclosureButton>Trigger</DisclosureButton>661 <DisclosurePanel>Contents</DisclosurePanel>662 </Disclosure>663 `664 )665 assertDisclosureButton({666 state: DisclosureState.InvisibleUnmounted,667 attributes: { id: 'headlessui-disclosure-button-1' },668 })669 assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })670 // Focus the button671 getDisclosureButton()?.focus()672 // Open disclosure673 await press(Keys.Space)674 // Verify it is open675 assertDisclosureButton({ state: DisclosureState.Visible })676 assertDisclosurePanel({677 state: DisclosureState.Visible,678 attributes: { id: 'headlessui-disclosure-panel-2' },679 })680 })681 )682 it(683 'should not be possible to open the disclosure with Space when the button is disabled',684 suppressConsoleLogs(async () => {685 renderTemplate(686 html`687 <Disclosure>688 <DisclosureButton disabled>Trigger</DisclosureButton>689 <DisclosurePanel>Contents</DisclosurePanel>690 </Disclosure>691 `692 )693 assertDisclosureButton({694 state: DisclosureState.InvisibleUnmounted,695 attributes: { id: 'headlessui-disclosure-button-1' },696 })697 assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })698 // Focus the button699 getDisclosureButton()?.focus()700 // Try to open the disclosure701 await press(Keys.Space)702 // Verify it is still closed703 assertDisclosureButton({704 state: DisclosureState.InvisibleUnmounted,705 attributes: { id: 'headlessui-disclosure-button-1' },706 })707 assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })708 })709 )710 it(711 'should be possible to close the disclosure with Space when the disclosure is open',712 suppressConsoleLogs(async () => {713 renderTemplate(714 html`715 <Disclosure>716 <DisclosureButton>Trigger</DisclosureButton>717 <DisclosurePanel>Contents</DisclosurePanel>718 </Disclosure>719 `720 )721 assertDisclosureButton({722 state: DisclosureState.InvisibleUnmounted,723 attributes: { id: 'headlessui-disclosure-button-1' },724 })725 assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })726 // Focus the button727 getDisclosureButton()?.focus()728 // Open disclosure729 await press(Keys.Space)730 // Verify it is open731 assertDisclosureButton({ state: DisclosureState.Visible })732 assertDisclosurePanel({733 state: DisclosureState.Visible,734 attributes: { id: 'headlessui-disclosure-panel-2' },735 })736 // Close disclosure737 await press(Keys.Space)738 // Verify it is closed again739 assertDisclosureButton({ state: DisclosureState.InvisibleUnmounted })740 assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })741 })742 )743 })744})745describe('Mouse interactions', () => {746 it(747 'should be possible to open a disclosure on click',748 suppressConsoleLogs(async () => {749 renderTemplate(750 html`751 <Disclosure>752 <DisclosureButton>Trigger</DisclosureButton>753 <DisclosurePanel>Contents</DisclosurePanel>754 </Disclosure>755 `756 )757 assertDisclosureButton({758 state: DisclosureState.InvisibleUnmounted,759 attributes: { id: 'headlessui-disclosure-button-1' },760 })761 assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })762 // Open disclosure763 await click(getDisclosureButton())764 // Verify it is open765 assertDisclosureButton({ state: DisclosureState.Visible })766 assertDisclosurePanel({767 state: DisclosureState.Visible,768 attributes: { id: 'headlessui-disclosure-panel-2' },769 })770 })771 )772 it(773 'should not be possible to open a disclosure on right click',774 suppressConsoleLogs(async () => {775 renderTemplate(776 html`777 <Disclosure>778 <DisclosureButton>Trigger</DisclosureButton>779 <DisclosurePanel>Contents</DisclosurePanel>780 </Disclosure>781 `782 )783 assertDisclosureButton({784 state: DisclosureState.InvisibleUnmounted,785 attributes: { id: 'headlessui-disclosure-button-1' },786 })787 assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })788 // Open disclosure789 await click(getDisclosureButton(), MouseButton.Right)790 // Verify it is still closed791 assertDisclosureButton({792 state: DisclosureState.InvisibleUnmounted,793 attributes: { id: 'headlessui-disclosure-button-1' },794 })795 assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })796 })797 )798 it(799 'should not be possible to open a disclosure on click when the button is disabled',800 suppressConsoleLogs(async () => {801 renderTemplate(802 html`803 <Disclosure>804 <DisclosureButton disabled>Trigger</DisclosureButton>805 <DisclosurePanel>Contents</DisclosurePanel>806 </Disclosure>807 `808 )809 assertDisclosureButton({810 state: DisclosureState.InvisibleUnmounted,811 attributes: { id: 'headlessui-disclosure-button-1' },812 })813 assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })814 // Try to open the disclosure815 await click(getDisclosureButton())816 // Verify it is still closed817 assertDisclosureButton({818 state: DisclosureState.InvisibleUnmounted,819 attributes: { id: 'headlessui-disclosure-button-1' },820 })821 assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })822 })823 )824 it(825 'should be possible to close a disclosure on click',826 suppressConsoleLogs(async () => {827 renderTemplate(828 html`829 <Disclosure>830 <DisclosureButton>Trigger</DisclosureButton>831 <DisclosurePanel>Contents</DisclosurePanel>832 </Disclosure>833 `834 )835 // Open disclosure836 await click(getDisclosureButton())837 // Verify it is open838 assertDisclosureButton({ state: DisclosureState.Visible })839 // Click to close840 await click(getDisclosureButton())841 // Verify it is closed842 assertDisclosureButton({ state: DisclosureState.InvisibleUnmounted })843 assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })844 })845 )846 it(847 'should be possible to close the Disclosure by clicking on a DisclosureButton inside a DisclosurePanel',848 suppressConsoleLogs(async () => {849 renderTemplate(850 html`851 <Disclosure>852 <DisclosureButton>Open</DisclosureButton>853 <DisclosurePanel>854 <DisclosureButton>Close</DisclosureButton>855 </DisclosurePanel>856 </Disclosure>857 `858 )859 // Open the disclosure860 await click(getDisclosureButton())861 let closeBtn = getByText('Close')862 expect(closeBtn).not.toHaveAttribute('id')863 expect(closeBtn).not.toHaveAttribute('aria-controls')864 expect(closeBtn).not.toHaveAttribute('aria-expanded')865 // The close button should close the disclosure866 await click(closeBtn)867 // Verify it is closed868 assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })869 // Verify we restored the Open button870 assertActiveElement(getDisclosureButton())871 })872 )...
no-deprecated-destroyed-lifecycle.js
Source:no-deprecated-destroyed-lifecycle.js
1/**2 * @author Yosuke Ota3 * See LICENSE file in root directory for full license.4 */5'use strict'6// ------------------------------------------------------------------------------7// Requirements8// ------------------------------------------------------------------------------9const rule = require('../../../lib/rules/no-deprecated-destroyed-lifecycle')10const RuleTester = require('eslint').RuleTester11// ------------------------------------------------------------------------------12// Tests13// ------------------------------------------------------------------------------14const ruleTester = new RuleTester({15 parser: require.resolve('vue-eslint-parser'),16 parserOptions: { ecmaVersion: 2020, sourceType: 'module' }17})18ruleTester.run('no-deprecated-destroyed-lifecycle', rule, {19 valid: [20 {21 filename: 'test.vue',22 code: `23 <script>24 export default {25 unmounted () {},26 beforeUnmount () {},27 }28 </script>29 `30 },31 {32 filename: 'test.vue',33 code: `34 <script>35 export default {36 unmounted,37 beforeUnmount,38 }39 </script>40 `41 },42 {43 filename: 'test.vue',44 code: `45 <script>46 export default {47 beforeCreate,48 created,49 beforeMount,50 mounted,51 beforeUpdate,52 updated,53 activated,54 deactivated,55 beforeUnmount,56 unmounted,57 errorCaptured,58 renderTracked,59 renderTriggered,60 }61 </script>62 `63 },64 {65 filename: 'test.vue',66 code: `67 <script>68 export default {69 beforeUnmount:beforeDestroy,70 unmounted:destroyed,71 }72 </script>73 `74 },75 {76 filename: 'test.vue',77 code: `78 <script>79 export default {80 ...beforeDestroy,81 ...destroyed,82 }83 </script>84 `85 },86 {87 filename: 'test.vue',88 code: `89 <script>90 export default {91 [beforeDestroy] () {},92 [destroyed] () {},93 }94 </script>95 `96 }97 ],98 invalid: [99 {100 filename: 'test.vue',101 code: `102 <script>103 export default {104 beforeDestroy () {},105 destroyed () {},106 }107 </script>108 `,109 output: `110 <script>111 export default {112 beforeUnmount () {},113 unmounted () {},114 }115 </script>116 `,117 errors: [118 {119 message:120 'The `beforeDestroy` lifecycle hook is deprecated. Use `beforeUnmount` instead.',121 line: 4122 },123 {124 message:125 'The `destroyed` lifecycle hook is deprecated. Use `unmounted` instead.',126 line: 5127 }128 ]129 },130 {131 filename: 'test.vue',132 code: `133 <script>134 export default {135 beforeDestroy,136 destroyed,137 }138 </script>139 `,140 output: `141 <script>142 export default {143 beforeUnmount:beforeDestroy,144 unmounted:destroyed,145 }146 </script>147 `,148 errors: [149 {150 message:151 'The `beforeDestroy` lifecycle hook is deprecated. Use `beforeUnmount` instead.',152 line: 4153 },154 {155 message:156 'The `destroyed` lifecycle hook is deprecated. Use `unmounted` instead.',157 line: 5158 }159 ]160 },161 {162 filename: 'test.vue',163 code: `164 <script>165 export default {166 beforeCreate,167 created,168 beforeMount,169 mounted,170 beforeUpdate,171 updated,172 activated,173 deactivated,174 beforeDestroy,175 destroyed,176 errorCaptured,177 }178 </script>179 `,180 output: `181 <script>182 export default {183 beforeCreate,184 created,185 beforeMount,186 mounted,187 beforeUpdate,188 updated,189 activated,190 deactivated,191 beforeUnmount:beforeDestroy,192 unmounted:destroyed,193 errorCaptured,194 }195 </script>196 `,197 errors: [198 {199 message:200 'The `beforeDestroy` lifecycle hook is deprecated. Use `beforeUnmount` instead.',201 line: 12202 },203 {204 message:205 'The `destroyed` lifecycle hook is deprecated. Use `unmounted` instead.',206 line: 13207 }208 ]209 },210 {211 filename: 'test.vue',212 code: `213 <script>214 export default {215 ['beforeDestroy']() {},216 ['destroyed']() {},217 }218 </script>219 `,220 output: `221 <script>222 export default {223 ['beforeUnmount']() {},224 ['unmounted']() {},225 }226 </script>227 `,228 errors: [229 {230 message:231 'The `beforeDestroy` lifecycle hook is deprecated. Use `beforeUnmount` instead.',232 line: 4233 },234 {235 message:236 'The `destroyed` lifecycle hook is deprecated. Use `unmounted` instead.',237 line: 5238 }239 ]240 },241 {242 filename: 'test.vue',243 code: `244 <script>245 export default {246 [\`beforeDestroy\`]() {},247 [\`destroyed\`]() {},248 }249 </script>250 `,251 output: `252 <script>253 export default {254 [\`beforeUnmount\`]() {},255 [\`unmounted\`]() {},256 }257 </script>258 `,259 errors: [260 {261 message:262 'The `beforeDestroy` lifecycle hook is deprecated. Use `beforeUnmount` instead.',263 line: 4264 },265 {266 message:267 'The `destroyed` lifecycle hook is deprecated. Use `unmounted` instead.',268 line: 5269 }270 ]271 }272 ]...
index.ts
Source:index.ts
1import {2 createStateLink,3 useStateLinkUnmounted,4 useStateLink,5} from '@hookstate/core';6const selectedCategoryRef = createStateLink('default');7const selectedSubcategoryRef = createStateLink<string | undefined>(undefined);8const nameRef = createStateLink('');9const lastNameRef = createStateLink('');10const apelidoRef = createStateLink('');11const cpfRef = createStateLink('');12const cnpjRef = createStateLink('');13const rgRef = createStateLink('');14const institutionRgRef = createStateLink('');15const birthdayRef = createStateLink('');16const phoneRef = createStateLink('');17const emailRef = createStateLink('');18const categoryRef = createStateLink(0);19const categoryVucovucoRef = createStateLink(0);20const subCategoryRef = createStateLink(0);21const cepRef = createStateLink('');22const addressRef = createStateLink('');23const numberRef = createStateLink('');24const complementRef = createStateLink('');25const neighborhoodRef = createStateLink('');26const cityRef = createStateLink('');27const stateRef = createStateLink('');28const passwordRef = createStateLink('');29const creditCardNumberRef = createStateLink('');30const expirationDateRef = createStateLink('');31const cardSecurityCodeRef = createStateLink('');32const firstNameRef = createStateLink('');33const genderRef = createStateLink('');34const categoryIdsRef = createStateLink([]);35const categoryIdsVucovucoRef = createStateLink([]);36const latitudeRef = createStateLink(0);37const longitudeRef = createStateLink(0);38const unregisteredUserIdRef = createStateLink(0);39const isCompanyRef = createStateLink(true);40const confirmPasswordRef = createStateLink('');41const clearForm = () => {42 useStateLinkUnmounted(nameRef).set('');43 useStateLinkUnmounted(lastNameRef).set('');44 useStateLinkUnmounted(apelidoRef).set('');45 useStateLinkUnmounted(cpfRef).set('');46 useStateLinkUnmounted(cnpjRef).set('');47 useStateLinkUnmounted(rgRef).set('');48 useStateLinkUnmounted(institutionRgRef).set('');49 useStateLinkUnmounted(birthdayRef).set('');50 useStateLinkUnmounted(phoneRef).set('');51 useStateLinkUnmounted(emailRef).set('');52 useStateLinkUnmounted(categoryRef).set(0);53 useStateLinkUnmounted(categoryVucovucoRef).set(0);54 useStateLinkUnmounted(subCategoryRef).set(0);55 useStateLinkUnmounted(cepRef).set('');56 useStateLinkUnmounted(addressRef).set('');57 useStateLinkUnmounted(numberRef).set('');58 useStateLinkUnmounted(complementRef).set('');59 useStateLinkUnmounted(neighborhoodRef).set('');60 useStateLinkUnmounted(cityRef).set('');61 useStateLinkUnmounted(stateRef).set('');62 useStateLinkUnmounted(passwordRef).set('');63 useStateLinkUnmounted(creditCardNumberRef).set('');64 useStateLinkUnmounted(expirationDateRef).set('');65 useStateLinkUnmounted(cardSecurityCodeRef).set('');66 useStateLinkUnmounted(genderRef).set('');67 useStateLinkUnmounted(categoryIdsRef).set([]);68 useStateLinkUnmounted(categoryIdsVucovucoRef).set([]);69 useStateLinkUnmounted(longitudeRef).set(0);70 useStateLinkUnmounted(latitudeRef).set(0);71 useStateLinkUnmounted(unregisteredUserIdRef).set(0);72 useStateLinkUnmounted(isCompanyRef).set(true);73 useStateLinkUnmounted(confirmPasswordRef).set('');74};75export default {76 categoryIdsRef,77 categoryIdsVucovucoRef,78 genderRef,79 nameRef,80 lastNameRef,81 apelidoRef,82 // nicknameRef,83 cpfRef,84 cnpjRef,85 rgRef,86 institutionRgRef,87 phoneRef,88 emailRef,89 passwordRef,90 categoryRef,91 categoryVucovucoRef,92 subCategoryRef,93 cepRef,94 addressRef,95 numberRef,96 complementRef,97 neighborhoodRef,98 cityRef,99 stateRef,100 creditCardNumberRef,101 expirationDateRef,102 cardSecurityCodeRef,103 selectedCategoryRef,104 selectedSubcategoryRef,105 birthdayRef,106 latitudeRef,107 longitudeRef,108 unregisteredUserIdRef,109 clearForm,110 isCompanyRef,111 confirmPasswordRef,...
Using AI Code Generation
1import { unmountRootVC } from 'storybook-addon-root-vc';2describe('test', () => {3 it('test', () => {4 });5});6import 'storybook-addon-root-vc/register';7import { mountRootVC } from 'storybook-root-vc';8mountRootVC();9import { mountRootVC } from 'storybook-addon-root-vc';10mountRootVC();11import { mountRootVC } from 'storybook-root-vc';12import { withRootVC } from 'storybook-addon-root-vc';13addDecorator(withRootVC());14mountRootVC();15import { mountRootVC } from 'storybook-addon-root-vc';16import { withRootVC } from 'storybook-addon-root-vc';17addDecorator(withRootVC());18mountRootVC();19import { mountRootVC } from 'storybook-root-vc';20import { withRootVC } from 'storybook-addon-root-vc';21addDecorator(withRootVC());22mountRootVC();
Using AI Code Generation
1import React from 'react';2import { render } from 'react-dom';3import { unmount } from 'storybook-root-provider';4const App = () => {5 const { Provider, Consumer } = unmount('my-provider');6 return (7 <Provider value={123}>8 {value => <div>{value}</div>}9 );10};11render(<App />, document.getElementById('root'));12import { mount } from 'storybook-root-provider';13import { App } from './test';14describe('App', () => {15 it('should render', () => {16 mount(<App />, 'my-provider');17 });18});19import { mount } from 'storybook-root-provider';20import { App } from './test';21describe('App', () => {22 it('should render', () => {23 mount(<App />, 'my-provider');24 });25});26import { mount } from 'storybook-root-provider';27import { App } from './test';28describe('App', () => {29 it('should render', () => {30 mount(<App />, 'my-provider');31 });32});33import { mount } from 'storybook-root-provider';34import { App } from './test';35describe('App', () => {36 it('should render', () => {37 mount(<App />, 'my-provider');38 });39});40import { mount } from 'storybook-root-provider';41import { App } from './test';42describe('App', () => {43 it('should render', () => {44 mount(<App />, 'my-provider');45 });46});47import { mount } from 'storybook-root-provider';48import { App } from './test';49describe('App', () => {50 it('should render', () => {51 mount(<App />, 'my-provider');52 });53});54import { mount } from 'storybook-root-provider';55import { App } from './test';56describe('App', () => {57 it('should render', () => {58 mount(<App />, 'my-provider');59 });60});61import { mount } from 'storybook-root-provider';62import { App } from './test';63describe('App', () => {64 it('should
Using AI Code Generation
1import { unmount } from 'storybook-root';2const { unmount } = require('storybook-root');3const { unmount } = require('storybook-root');4unmount();5import { unmount } from 'storybook-root';6unmount();7const { unmount } = require('storybook-root');8unmount();9import { unmount } from 'storybook-root';10unmount();11const { unmount } = require('storybook-root');12unmount();13import { unmount } from 'storybook-root';14unmount();15const { unmount } = require('storybook-root');16unmount();17import { unmount } from 'storybook-root';18unmount();19const { unmount } = require('storybook-root');20unmount();21import { unmount } from 'storybook-root';22unmount();23const { unmount } = require('storybook-root');24unmount();25import { unmount } from 'storybook-root';26unmount();27const { unmount } = require('storybook-root');28unmount();29import { unmount } from 'storybook-root';30unmount();31const { unmount } = require('storybook-root');32unmount();33import { unmount } from 'storybook-root';34unmount();35const { unmount } = require('storybook-root');36unmount();37import { unmount } from 'storybook-root';38unmount();39const { unmount } = require('storybook-root');40unmount();41import { unmount } from 'storybook-root';42unmount();43const { unmount } = require('storybook-root');44unmount();45import { unmount } from 'storybook
Using AI Code Generation
1const { unmount } = require('@storybook/react/node_modules/@storybook/react/dist/client/preview/index');2const { render } = require('@storybook/react/node_modules/@storybook/react/dist/client/preview/render');3const { storybook } = require('@storybook/react/node_modules/@storybook/react/dist/client/preview/client_api');4const storybookRootBranch = storybook();5const stories = storybookRootBranch.storiesOf('My Story', module);6stories.add('story', () => <div>some story</div>);7const story = stories.getStoryWithContext();8const rendered = await render(story, storybookRootBranch);9unmount();10const { unmount } = require('@storybook/react/node_modules/@storybook/react/dist/client/preview/index');11const { render } = require('@storybook/react/node_modules/@storybook/react/dist/client/preview/render');12const { storybook } = require('@storybook/react/node_modules/@storybook/react/dist/client/preview/client_api');13const storybookRootBranch = storybook();14const stories = storybookRootBranch.storiesOf('My Story', module);15stories.add('story', () => <div>some story</div>);16const story = stories.getStoryWithContext();17const rendered = await render(story, storybookRootBranch);18unmount();19const story = stories.getStoryWithContext();20const rendered = await renderToDOM(story, storybookRootBranch);21@josephbassett I'm not sure if this will work, but you could try to use the renderToDOM function instead of the render function. It will render the story to the DOM and return the DOM node. const story = stories.getStoryWithContext(); const rendered = await renderToDOM(story, storybookRootBranch);
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:
- JUnit Tutorial
- TestNG Tutorial
- Webdriver Tutorial
- WebDriverIO Tutorial
- Protractor Tutorial
- Selenium 4 Tutorial
- Jenkins Tutorial
- NUnit Tutorial
- Jest Tutorial
- Playwright Tutorial
- Cypress Tutorial
- PyTest Tutorial
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!!
Was this article helpful?
