How to use dispatchEventWithLog method in wpt
Best JavaScript code snippet using wpt
propagation.spec.js
Source:propagation.spec.js 
2// https://github.com/web-platform-tests/wpt/blob/master/shadow-dom/event-inside-shadow-tree.html3import { createElement, setFeatureFlagForTest } from 'lwc';4import { extractDataIds } from 'test-utils';5import Container from 'x/container';6function dispatchEventWithLog(target, nodes, event) {7 const log = [];8 [...Object.values(nodes), document.body, document.documentElement, document, window].forEach(9 (node) => {10 node.addEventListener(event.type, (event) => {11 log.push([node, event.target, event.composedPath()]);12 });13 }14 );15 target.dispatchEvent(event);16 return log;17}18function createTestElement() {19 const elm = createElement('x-container', { is: Container });20 elm.setAttribute('data-id', 'x-container');21 document.body.appendChild(elm);22 return extractDataIds(elm);23}24function createDisconnectedTestElement() {25 const fragment = document.createDocumentFragment();26 const elm = createElement('x-container', { is: Container });27 elm.setAttribute('data-id', 'x-container');28 fragment.appendChild(elm);29 const nodes = extractDataIds(elm);30 // Manually added because document fragments can't have attributes.31 nodes.fragment = fragment;32 return nodes;33}34describe('event propagation', () => {35 describe('dispatched on native element', () => {36 it('{bubbles: true, composed: true}', () => {37 const nodes = createTestElement();38 const event = new CustomEvent('test', { bubbles: true, composed: true });39 const actualLogs = dispatchEventWithLog(nodes.button, nodes, event);40 const composedPath = [41 nodes.button,42 nodes.button_div,43 nodes['x-button'].shadowRoot,44 nodes['x-button'],45 nodes.button_group_slot,46 nodes.button_group_internal_slot,47 nodes['x-button-group-internal'].shadowRoot,48 nodes['x-button-group-internal'],49 nodes.button_group_div,50 nodes['x-button-group'].shadowRoot,51 nodes['x-button-group'],52 nodes.container_div,53 nodes['x-container'].shadowRoot,54 nodes['x-container'],55 document.body,56 document.documentElement,57 document,58 window,59 ];60 const expectedLogs = [61 [nodes.button, nodes.button, composedPath],62 [nodes.button_div, nodes.button, composedPath],63 [nodes['x-button'].shadowRoot, nodes.button, composedPath],64 [nodes['x-button'], nodes['x-button'], composedPath],65 [nodes.button_group_slot, nodes['x-button'], composedPath],66 [nodes.button_group_internal_slot, nodes['x-button'], composedPath],67 [nodes['x-button-group-internal'].shadowRoot, nodes['x-button'], composedPath],68 [nodes['x-button-group-internal'], nodes['x-button'], composedPath],69 [nodes.button_group_div, nodes['x-button'], composedPath],70 [nodes['x-button-group'].shadowRoot, nodes['x-button'], composedPath],71 [nodes['x-button-group'], nodes['x-button'], composedPath],72 [nodes.container_div, nodes['x-button'], composedPath],73 [nodes['x-container'].shadowRoot, nodes['x-button'], composedPath],74 [nodes['x-container'], nodes['x-container'], composedPath],75 [document.body, nodes['x-container'], composedPath],76 [document.documentElement, nodes['x-container'], composedPath],77 [document, nodes['x-container'], composedPath],78 [window, nodes['x-container'], composedPath],79 ];80 expect(actualLogs).toEqual(expectedLogs);81 });82 it('{bubbles: true, composed: false}', () => {83 const nodes = createTestElement();84 const event = new CustomEvent('test', { bubbles: true, composed: false });85 const actualLogs = dispatchEventWithLog(nodes.button, nodes, event);86 const composedPath = [nodes.button, nodes.button_div, nodes['x-button'].shadowRoot];87 const expectedLogs = [88 [nodes.button, nodes.button, composedPath],89 [nodes.button_div, nodes.button, composedPath],90 [nodes['x-button'].shadowRoot, nodes.button, composedPath],91 ];92 expect(actualLogs).toEqual(expectedLogs);93 });94 it('{bubbles: false, composed: true}', () => {95 const nodes = createTestElement();96 const event = new CustomEvent('test', { bubbles: false, composed: true });97 const actualLogs = dispatchEventWithLog(nodes.button, nodes, event);98 const composedPath = [99 nodes.button,100 nodes.button_div,101 nodes['x-button'].shadowRoot,102 nodes['x-button'],103 nodes.button_group_slot,104 nodes.button_group_internal_slot,105 nodes['x-button-group-internal'].shadowRoot,106 nodes['x-button-group-internal'],107 nodes.button_group_div,108 nodes['x-button-group'].shadowRoot,109 nodes['x-button-group'],110 nodes.container_div,111 nodes['x-container'].shadowRoot,112 nodes['x-container'],113 document.body,114 document.documentElement,115 document,116 window,117 ];118 let expectedLogs;119 if (process.env.NATIVE_SHADOW) {120 expectedLogs = [121 [nodes.button, nodes.button, composedPath],122 [nodes['x-button'], nodes['x-button'], composedPath],123 [nodes['x-container'], nodes['x-container'], composedPath],124 ];125 } else {126 // TODO [#1138]: {bubbles: false, composed: true} events should invoke event listeners on ancestor hosts127 expectedLogs = [[nodes.button, nodes.button, composedPath]];128 }129 expect(actualLogs).toEqual(expectedLogs);130 });131 it('{bubbles: false, composed: false}', () => {132 const nodes = createTestElement();133 const event = new CustomEvent('test', { bubbles: false, composed: false });134 const actualLogs = dispatchEventWithLog(nodes.button, nodes, event);135 const composedPath = [nodes.button, nodes.button_div, nodes['x-button'].shadowRoot];136 const expectedLogs = [[nodes.button, nodes.button, composedPath]];137 expect(actualLogs).toEqual(expectedLogs);138 });139 if (!process.env.NATIVE_SHADOW) {140 describe('when the ENABLE_NON_COMPOSED_EVENTS_LEAKAGE flag is enabled', () => {141 beforeEach(() => {142 setFeatureFlagForTest('ENABLE_NON_COMPOSED_EVENTS_LEAKAGE', true);143 });144 afterEach(() => {145 setFeatureFlagForTest('ENABLE_NON_COMPOSED_EVENTS_LEAKAGE', false);146 });147 it('{bubbles: true, composed: false}', () => {148 const nodes = createTestElement();149 const event = new CustomEvent('test', { bubbles: true, composed: false });150 const actualLogs = dispatchEventWithLog(nodes.button, nodes, event);151 const composedPath = [152 nodes.button,153 nodes.button_div,154 nodes['x-button'].shadowRoot,155 ];156 const expectedLogs = [157 [nodes.button, nodes.button, composedPath],158 [nodes.button_div, nodes.button, composedPath],159 [nodes['x-button'].shadowRoot, nodes.button, composedPath],160 [nodes.button_group_slot, null, composedPath],161 [nodes.button_group_internal_slot, null, composedPath],162 [nodes.button_group_div, null, composedPath],163 [nodes.container_div, null, composedPath],164 [document.body, null, composedPath],165 [document.documentElement, null, composedPath],166 [document, null, composedPath],167 [window, null, composedPath],168 ];169 expect(actualLogs).toEqual(expectedLogs);170 });171 });172 }173 });174 describe('dispatched on host element', () => {175 it('{bubbles: true, composed: true}', () => {176 const nodes = createTestElement();177 const event = new CustomEvent('test', { bubbles: true, composed: true });178 const actualLogs = dispatchEventWithLog(nodes['x-button'], nodes, event);179 const composedPath = [180 nodes['x-button'],181 nodes.button_group_slot,182 nodes.button_group_internal_slot,183 nodes['x-button-group-internal'].shadowRoot,184 nodes['x-button-group-internal'],185 nodes.button_group_div,186 nodes['x-button-group'].shadowRoot,187 nodes['x-button-group'],188 nodes.container_div,189 nodes['x-container'].shadowRoot,190 nodes['x-container'],191 document.body,192 document.documentElement,193 document,194 window,195 ];196 const expectedLogs = [197 [nodes['x-button'], nodes['x-button'], composedPath],198 [nodes.button_group_slot, nodes['x-button'], composedPath],199 [nodes.button_group_internal_slot, nodes['x-button'], composedPath],200 [nodes['x-button-group-internal'].shadowRoot, nodes['x-button'], composedPath],201 [nodes['x-button-group-internal'], nodes['x-button'], composedPath],202 [nodes.button_group_div, nodes['x-button'], composedPath],203 [nodes['x-button-group'].shadowRoot, nodes['x-button'], composedPath],204 [nodes['x-button-group'], nodes['x-button'], composedPath],205 [nodes.container_div, nodes['x-button'], composedPath],206 [nodes['x-container'].shadowRoot, nodes['x-button'], composedPath],207 [nodes['x-container'], nodes['x-container'], composedPath],208 [document.body, nodes['x-container'], composedPath],209 [document.documentElement, nodes['x-container'], composedPath],210 [document, nodes['x-container'], composedPath],211 [window, nodes['x-container'], composedPath],212 ];213 expect(actualLogs).toEqual(expectedLogs);214 });215 it('{bubbles: true, composed: false}', () => {216 const nodes = createTestElement();217 const event = new CustomEvent('test', { bubbles: true, composed: false });218 const actualLogs = dispatchEventWithLog(nodes['x-button'], nodes, event);219 const composedPath = [220 nodes['x-button'],221 nodes.button_group_slot,222 nodes.button_group_internal_slot,223 nodes['x-button-group-internal'].shadowRoot,224 nodes['x-button-group-internal'],225 nodes.button_group_div,226 nodes['x-button-group'].shadowRoot,227 nodes['x-button-group'],228 nodes.container_div,229 nodes['x-container'].shadowRoot,230 ];231 const expectedLogs = [232 [nodes['x-button'], nodes['x-button'], composedPath],233 [nodes.button_group_slot, nodes['x-button'], composedPath],234 [nodes.button_group_internal_slot, nodes['x-button'], composedPath],235 [nodes['x-button-group-internal'].shadowRoot, nodes['x-button'], composedPath],236 [nodes['x-button-group-internal'], nodes['x-button'], composedPath],237 [nodes.button_group_div, nodes['x-button'], composedPath],238 [nodes['x-button-group'].shadowRoot, nodes['x-button'], composedPath],239 [nodes['x-button-group'], nodes['x-button'], composedPath],240 [nodes.container_div, nodes['x-button'], composedPath],241 [nodes['x-container'].shadowRoot, nodes['x-button'], composedPath],242 ];243 expect(actualLogs).toEqual(expectedLogs);244 });245 it('{bubbles: false, composed: true}', () => {246 const nodes = createTestElement();247 const event = new CustomEvent('test', { bubbles: false, composed: true });248 const actualLogs = dispatchEventWithLog(nodes['x-button'], nodes, event);249 const composedPath = [250 nodes['x-button'],251 nodes.button_group_slot,252 nodes.button_group_internal_slot,253 nodes['x-button-group-internal'].shadowRoot,254 nodes['x-button-group-internal'],255 nodes.button_group_div,256 nodes['x-button-group'].shadowRoot,257 nodes['x-button-group'],258 nodes.container_div,259 nodes['x-container'].shadowRoot,260 nodes['x-container'],261 document.body,262 document.documentElement,263 document,264 window,265 ];266 let expectedLogs;267 if (process.env.NATIVE_SHADOW) {268 expectedLogs = [269 [nodes['x-button'], nodes['x-button'], composedPath],270 [nodes['x-container'], nodes['x-container'], composedPath],271 ];272 } else {273 expectedLogs = [[nodes['x-button'], nodes['x-button'], composedPath]];274 }275 expect(actualLogs).toEqual(expectedLogs);276 });277 it('{bubbles: false, composed: false}', () => {278 const nodes = createTestElement();279 const event = new CustomEvent('test', { bubbles: false, composed: false });280 const actualLogs = dispatchEventWithLog(nodes['x-button'], nodes, event);281 const composedPath = [282 nodes['x-button'],283 nodes.button_group_slot,284 nodes.button_group_internal_slot,285 nodes['x-button-group-internal'].shadowRoot,286 nodes['x-button-group-internal'],287 nodes.button_group_div,288 nodes['x-button-group'].shadowRoot,289 nodes['x-button-group'],290 nodes.container_div,291 nodes['x-container'].shadowRoot,292 ];293 const expectedLogs = [[nodes['x-button'], nodes['x-button'], composedPath]];294 expect(actualLogs).toEqual(expectedLogs);295 });296 if (!process.env.NATIVE_SHADOW) {297 describe('when the ENABLE_NON_COMPOSED_EVENTS_LEAKAGE flag is enabled', () => {298 beforeEach(() => {299 setFeatureFlagForTest('ENABLE_NON_COMPOSED_EVENTS_LEAKAGE', true);300 });301 afterEach(() => {302 setFeatureFlagForTest('ENABLE_NON_COMPOSED_EVENTS_LEAKAGE', false);303 });304 it('{bubbles: true, composed: false}', () => {305 const nodes = createTestElement();306 const event = new CustomEvent('test', { bubbles: true, composed: false });307 const actualLogs = dispatchEventWithLog(nodes['x-button'], nodes, event);308 const composedPath = [309 nodes['x-button'],310 nodes.button_group_slot,311 nodes.button_group_internal_slot,312 nodes['x-button-group-internal'].shadowRoot,313 nodes['x-button-group-internal'],314 nodes.button_group_div,315 nodes['x-button-group'].shadowRoot,316 nodes['x-button-group'],317 nodes.container_div,318 nodes['x-container'].shadowRoot,319 ];320 const expectedLogs = [321 [nodes['x-button'], nodes['x-button'], composedPath],322 [nodes.button_group_slot, nodes['x-button'], composedPath],323 [nodes.button_group_internal_slot, nodes['x-button'], composedPath],324 [325 nodes['x-button-group-internal'].shadowRoot,326 nodes['x-button'],327 composedPath,328 ],329 [nodes['x-button-group-internal'], nodes['x-button'], composedPath],330 [nodes.button_group_div, nodes['x-button'], composedPath],331 [nodes['x-button-group'].shadowRoot, nodes['x-button'], composedPath],332 [nodes['x-button-group'], nodes['x-button'], composedPath],333 [nodes.container_div, nodes['x-button'], composedPath],334 [nodes['x-container'].shadowRoot, nodes['x-button'], composedPath],335 [document.body, null, composedPath],336 [document.documentElement, null, composedPath],337 [document, null, composedPath],338 [window, null, composedPath],339 ];340 expect(actualLogs).toEqual(expectedLogs);341 });342 });343 }344 });345 describe('dispatched on shadow root', () => {346 it('{bubbles: true, composed: true}', () => {347 const nodes = createTestElement();348 const event = new CustomEvent('test', { bubbles: true, composed: true });349 const actualLogs = dispatchEventWithLog(nodes['x-button'].shadowRoot, nodes, event);350 const composedPath = [351 nodes['x-button'].shadowRoot,352 nodes['x-button'],353 nodes.button_group_slot,354 nodes.button_group_internal_slot,355 nodes['x-button-group-internal'].shadowRoot,356 nodes['x-button-group-internal'],357 nodes.button_group_div,358 nodes['x-button-group'].shadowRoot,359 nodes['x-button-group'],360 nodes.container_div,361 nodes['x-container'].shadowRoot,362 nodes['x-container'],363 document.body,364 document.documentElement,365 document,366 window,367 ];368 const expectedLogs = [369 [nodes['x-button'].shadowRoot, nodes['x-button'].shadowRoot, composedPath],370 [nodes['x-button'], nodes['x-button'], composedPath],371 [nodes.button_group_slot, nodes['x-button'], composedPath],372 [nodes.button_group_internal_slot, nodes['x-button'], composedPath],373 [nodes['x-button-group-internal'].shadowRoot, nodes['x-button'], composedPath],374 [nodes['x-button-group-internal'], nodes['x-button'], composedPath],375 [nodes.button_group_div, nodes['x-button'], composedPath],376 [nodes['x-button-group'].shadowRoot, nodes['x-button'], composedPath],377 [nodes['x-button-group'], nodes['x-button'], composedPath],378 [nodes.container_div, nodes['x-button'], composedPath],379 [nodes['x-container'].shadowRoot, nodes['x-button'], composedPath],380 [nodes['x-container'], nodes['x-container'], composedPath],381 [document.body, nodes['x-container'], composedPath],382 [document.documentElement, nodes['x-container'], composedPath],383 [document, nodes['x-container'], composedPath],384 [window, nodes['x-container'], composedPath],385 ];386 expect(actualLogs).toEqual(expectedLogs);387 });388 it('{bubbles: true, composed: false}', () => {389 const nodes = createTestElement();390 const event = new CustomEvent('test', { bubbles: true, composed: false });391 const actualLogs = dispatchEventWithLog(nodes['x-button'].shadowRoot, nodes, event);392 const composedPath = [nodes['x-button'].shadowRoot];393 const expectedLogs = [394 [nodes['x-button'].shadowRoot, nodes['x-button'].shadowRoot, composedPath],395 ];396 expect(actualLogs).toEqual(expectedLogs);397 });398 it('{bubbles: false, composed: true}', () => {399 const nodes = createTestElement();400 const event = new CustomEvent('test', { bubbles: false, composed: true });401 const actualLogs = dispatchEventWithLog(nodes['x-button'].shadowRoot, nodes, event);402 const composedPath = [403 nodes['x-button'].shadowRoot,404 nodes['x-button'],405 nodes.button_group_slot,406 nodes.button_group_internal_slot,407 nodes['x-button-group-internal'].shadowRoot,408 nodes['x-button-group-internal'],409 nodes.button_group_div,410 nodes['x-button-group'].shadowRoot,411 nodes['x-button-group'],412 nodes.container_div,413 nodes['x-container'].shadowRoot,414 nodes['x-container'],415 document.body,416 document.documentElement,417 document,418 window,419 ];420 let expectedLogs;421 if (process.env.NATIVE_SHADOW) {422 expectedLogs = [423 [nodes['x-button'].shadowRoot, nodes['x-button'].shadowRoot, composedPath],424 [nodes['x-button'], nodes['x-button'], composedPath],425 [nodes['x-container'], nodes['x-container'], composedPath],426 ];427 } else {428 expectedLogs = [429 [nodes['x-button'].shadowRoot, nodes['x-button'].shadowRoot, composedPath],430 [nodes['x-button'], nodes['x-button'], composedPath],431 ];432 }433 expect(actualLogs).toEqual(expectedLogs);434 });435 it('{bubbles: false, composed: false}', () => {436 const nodes = createTestElement();437 const event = new CustomEvent('test', { bubbles: false, composed: false });438 const actualLogs = dispatchEventWithLog(nodes['x-button'].shadowRoot, nodes, event);439 const composedPath = [nodes['x-button'].shadowRoot];440 const expectedLogs = [441 [nodes['x-button'].shadowRoot, nodes['x-button'].shadowRoot, composedPath],442 ];443 expect(actualLogs).toEqual(expectedLogs);444 });445 });446 describe('dispatched on lwc:dom="manual" node', () => {447 if (!process.env.NATIVE_SHADOW) {448 describe('when the ENABLE_NON_COMPOSED_EVENTS_LEAKAGE flag is enabled', () => {449 beforeEach(() => {450 setFeatureFlagForTest('ENABLE_NON_COMPOSED_EVENTS_LEAKAGE', true);451 });452 afterEach(() => {453 setFeatureFlagForTest('ENABLE_NON_COMPOSED_EVENTS_LEAKAGE', false);454 });455 it('{bubbles: true, composed: false}', () => {456 const nodes = createTestElement();457 const event = new CustomEvent('test', { bubbles: true, composed: false });458 const composedPath = [459 nodes.container_span_manual,460 nodes.container_span,461 nodes['x-container'].shadowRoot,462 ];463 const expectedLogs = [464 [nodes.container_span_manual, nodes.container_span_manual, composedPath],465 [nodes.container_span, nodes.container_span_manual, composedPath],466 [467 nodes['x-container'].shadowRoot,468 nodes.container_span_manual,469 composedPath,470 ],471 [document.body, null, composedPath],472 [document.documentElement, null, composedPath],473 [document, null, composedPath],474 [window, null, composedPath],475 ];476 return new Promise(setTimeout).then(() => {477 const actualLogs = dispatchEventWithLog(478 nodes.container_span_manual,479 nodes,480 event481 );482 expect(actualLogs).toEqual(expectedLogs);483 });484 });485 });486 }487 it('{bubbles: true, composed: true}', () => {488 const nodes = createTestElement();489 const event = new CustomEvent('test', { bubbles: true, composed: true });490 const composedPath = [491 nodes.container_span_manual,492 nodes.container_span,493 nodes['x-container'].shadowRoot,494 nodes['x-container'],495 document.body,496 document.documentElement,497 document,498 window,499 ];500 const expectedLogs = [501 [nodes.container_span_manual, nodes.container_span_manual, composedPath],502 [nodes.container_span, nodes.container_span_manual, composedPath],503 [nodes['x-container'].shadowRoot, nodes.container_span_manual, composedPath],504 [nodes['x-container'], nodes['x-container'], composedPath],505 [document.body, nodes['x-container'], composedPath],506 [document.documentElement, nodes['x-container'], composedPath],507 [document, nodes['x-container'], composedPath],508 [window, nodes['x-container'], composedPath],509 ];510 return new Promise(setTimeout).then(() => {511 const actualLogs = dispatchEventWithLog(nodes.container_span_manual, nodes, event);512 expect(actualLogs).toEqual(expectedLogs);513 });514 });515 it('{bubbles: true, composed: false}', () => {516 const nodes = createTestElement();517 const event = new CustomEvent('test', { bubbles: true, composed: false });518 const composedPath = [519 nodes.container_span_manual,520 nodes.container_span,521 nodes['x-container.shadowRoot'],522 ];523 const expectedLogs = [524 [nodes.container_span_manual, nodes.container_span_manual, composedPath],525 [nodes.container_span, nodes.container_span_manual, composedPath],526 [nodes['x-container'].shadowRoot, nodes.container_span_manual, composedPath],527 ];528 return Promise.resolve().then(() => {529 const actualLogs = dispatchEventWithLog(nodes.container_span_manual, nodes, event);530 expect(actualLogs).toEqual(expectedLogs);531 });532 });533 it('{bubbles: false, composed: true}', () => {534 const nodes = createTestElement();535 const event = new CustomEvent('test', { bubbles: false, composed: true });536 const composedPath = [537 nodes.container_span_manual,538 nodes.container_span,539 nodes['x-container.shadowRoot'],540 nodes['x-container'],541 document.body,542 document.documentElement,543 document,544 window,545 ];546 let expectedLogs;547 if (process.env.NATIVE_SHADOW) {548 expectedLogs = [549 [nodes.container_span_manual, nodes.container_span_manual, composedPath],550 [nodes['x-container'], nodes['x-container'], composedPath],551 ];552 } else {553 expectedLogs = [554 [nodes.container_span_manual, nodes.container_span_manual, composedPath],555 ];556 }557 return Promise.resolve().then(() => {558 const actualLogs = dispatchEventWithLog(nodes.container_span_manual, nodes, event);559 expect(actualLogs).toEqual(expectedLogs);560 });561 });562 it('{bubbles: false, composed: false}', () => {563 const nodes = createTestElement();564 const event = new CustomEvent('test', { bubbles: false, composed: false });565 const composedPath = [566 nodes.container_span_manual,567 nodes.container_span,568 nodes['x-container.shadowRoot'],569 ];570 const expectedLogs = [571 [nodes.container_span_manual, nodes.container_span_manual, composedPath],572 ];573 return Promise.resolve().then(() => {574 const actualLogs = dispatchEventWithLog(nodes.container_span_manual, nodes, event);575 expect(actualLogs).toEqual(expectedLogs);576 });577 });578 });579 // IE11 doesn't bubble events to the document fragment580 if (process.env.COMPAT !== true) {581 describe('dispatched within a disconnected tree', () => {582 it('{bubbles: true, composed: true}', () => {583 const nodes = createDisconnectedTestElement();584 const event = new CustomEvent('test', { bubbles: true, composed: true });585 const composedPath = [586 nodes.container_div,587 nodes['x-container'].shadowRoot,588 nodes['x-container'],589 nodes.fragment,590 ];591 const expectedLogs = [592 [nodes.container_div, nodes.container_div, composedPath],593 [nodes['x-container'].shadowRoot, nodes.container_div, composedPath],594 [nodes['x-container'], nodes['x-container'], composedPath],595 [nodes.fragment, nodes['x-container'], composedPath],596 ];597 const actualLogs = dispatchEventWithLog(nodes.container_div, nodes, event);598 expect(actualLogs).toEqual(expectedLogs);599 });600 it('{bubbles: true, composed: false}', () => {601 const nodes = createDisconnectedTestElement();602 const event = new CustomEvent('test', { bubbles: true, composed: false });603 const composedPath = [nodes.container_div, nodes['x-container'].shadowRoot];604 const expectedLogs = [605 [nodes.container_div, nodes.container_div, composedPath],606 [nodes['x-container'].shadowRoot, nodes.container_div, composedPath],607 ];608 const actualLogs = dispatchEventWithLog(nodes.container_div, nodes, event);609 expect(actualLogs).toEqual(expectedLogs);610 });611 it('{bubbles: false, composed: true}', () => {612 const nodes = createDisconnectedTestElement();613 const event = new CustomEvent('test', { bubbles: false, composed: true });614 const composedPath = [615 nodes.container_div,616 nodes['x-container'].shadowRoot,617 nodes['x-container'],618 nodes.fragment,619 ];620 let expectedLogs;621 if (process.env.NATIVE_SHADOW) {622 expectedLogs = [623 [nodes.container_div, nodes.container_div, composedPath],624 [nodes['x-container'], nodes['x-container'], composedPath],625 ];626 } else {627 expectedLogs = [[nodes.container_div, nodes.container_div, composedPath]];628 }629 const actualLogs = dispatchEventWithLog(nodes.container_div, nodes, event);630 expect(actualLogs).toEqual(expectedLogs);631 });632 it('{bubbles: false, composed: false}', () => {633 const nodes = createDisconnectedTestElement();634 const event = new CustomEvent('test', { bubbles: false, composed: false });635 const composedPath = [nodes.container_div, nodes['x-container'].shadowRoot];636 const expectedLogs = [[nodes.container_div, nodes.container_div, composedPath]];637 const actualLogs = dispatchEventWithLog(nodes.container_div, nodes, event);638 expect(actualLogs).toEqual(expectedLogs);639 });640 });641 }642});643describe('declarative event listener', () => {644 it('when dispatching instance of Event', () => {645 const nodes = createTestElement();646 const event = new Event('test', { bubbles: true, composed: true });647 nodes.button.dispatchEvent(event);648 expect(nodes['x-container'].testEventReceived).toBeTrue();649 });650 it('when dispatching instance of CustomEvent', () => {651 const nodes = createTestElement();...
index.spec.js
Source:index.spec.js
1import { createElement } from 'lwc';2import { extractDataIds } from 'test-utils';3import Container from 'x/container';4function dispatchEventWithLog(target, nodes, event) {5 const log = [];6 [...Object.values(nodes), document.body, document.documentElement, document, window].forEach(7 (node) => {8 node.addEventListener(event.type, () => {9 log.push(node);10 });11 }12 );13 target.dispatchEvent(event);14 return log;15}16function createTestElement() {17 const elm = createElement('x-container', { is: Container });18 elm.setAttribute('data-id', 'x-container');19 document.body.appendChild(elm);20 return extractDataIds(elm);21}22describe('Event.stopPropagation', () => {23 it('native element', () => {24 const nodes = createTestElement();25 const event = new CustomEvent('test', { bubbles: true, composed: true });26 nodes.container_div.addEventListener('test', (event) => {27 event.stopPropagation();28 });29 const logs = dispatchEventWithLog(nodes.child_div, nodes, event);30 expect(logs).toEqual([31 nodes.child_div,32 nodes['x-child.shadowRoot'],33 nodes['x-child'],34 nodes.container_div,35 ]);36 });37 it('shadow root', () => {38 const nodes = createTestElement();39 const event = new CustomEvent('test', { bubbles: true, composed: true });40 nodes['x-container.shadowRoot'].addEventListener('test', (event) => {41 event.stopPropagation();42 });43 const logs = dispatchEventWithLog(nodes.child_div, nodes, event);44 expect(logs).toEqual([45 nodes.child_div,46 nodes['x-child.shadowRoot'],47 nodes['x-child'],48 nodes.container_div,49 nodes['x-container.shadowRoot'],50 ]);51 });52 it('host element', () => {53 const nodes = createTestElement();54 const event = new CustomEvent('test', { bubbles: true, composed: true });55 nodes['x-container'].addEventListener('test', (event) => {56 event.stopPropagation();57 });58 const logs = dispatchEventWithLog(nodes.child_div, nodes, event);59 expect(logs).toEqual([60 nodes.child_div,61 nodes['x-child.shadowRoot'],62 nodes['x-child'],63 nodes.container_div,64 nodes['x-container.shadowRoot'],65 nodes['x-container'],66 ]);67 });68});69describe('Event.stopImmediatePropagation', () => {70 it('native element', () => {71 const nodes = createTestElement();72 const event = new CustomEvent('test', { bubbles: true, composed: true });73 nodes.container_div.addEventListener('test', (event) => {74 event.stopImmediatePropagation();75 });76 const logs = dispatchEventWithLog(nodes.child_div, nodes, event);77 expect(logs).toEqual([nodes.child_div, nodes['x-child.shadowRoot'], nodes['x-child']]);78 });79 it('shadow root', () => {80 const nodes = createTestElement();81 const event = new CustomEvent('test', { bubbles: true, composed: true });82 nodes['x-container.shadowRoot'].addEventListener('test', (event) => {83 event.stopImmediatePropagation();84 });85 const logs = dispatchEventWithLog(nodes.child_div, nodes, event);86 expect(logs).toEqual([87 nodes.child_div,88 nodes['x-child.shadowRoot'],89 nodes['x-child'],90 nodes.container_div,91 ]);92 });93 it('host element', () => {94 const nodes = createTestElement();95 const event = new CustomEvent('test', { bubbles: true, composed: true });96 nodes['x-container'].addEventListener('test', (event) => {97 event.stopImmediatePropagation();98 });99 const logs = dispatchEventWithLog(nodes.child_div, nodes, event);100 expect(logs).toEqual([101 nodes.child_div,102 nodes['x-child.shadowRoot'],103 nodes['x-child'],104 nodes.container_div,105 nodes['x-container.shadowRoot'],106 ]);107 });108});109describe('Event.composedPath', () => {110 it('should return an empty array when asynchronously invoked', () => {111 const nodes = createTestElement();112 const event = new CustomEvent('test', { bubbles: true, composed: true });113 let _event;...
Using AI Code Generation
1var event = new Event('test');2event.initEvent('test', true, true);3window.dispatchEventWithLog(event);4{5 "test": {6 }7}
Using AI Code Generation
1var wpt = require('wpt');2var log = wpt.log;3var dispatchEventWithLog = wpt.dispatchEventWithLog;4var wptEvent = wpt.event;5var wptEventName = wpt.eventName;6var wptEventResult = wpt.eventResult;7function test() {8 dispatchEventWithLog(event, function (result) {9 log.info("Result: " + result);10 });11}12test();13var wpt = require('wpt');14var log = wpt.log;15var dispatchEventWithLog = wpt.dispatchEventWithLog;16var wptEvent = wpt.event;17var wptEventName = wpt.eventName;18var wptEventResult = wpt.eventResult;19function test() {20 dispatchEventWithLog(event, function (result) {21 log.info("Result: " + result);22 });23}24test();25var wpt = require('wpt');26var log = wpt.log;27var dispatchEventWithLog = wpt.dispatchEventWithLog;28var wptEvent = wpt.event;29var wptEventName = wpt.eventName;30var wptEventResult = wpt.eventResult;31function test() {32 dispatchEventWithLog(event, function (result) {33 log.info("Result: " + result);34 });35}36test();37var wpt = require('wpt');38var log = wpt.log;39var dispatchEventWithLog = wpt.dispatchEventWithLog;40var wptEvent = wpt.event;41var wptEventName = wpt.eventName;42var wptEventResult = wpt.eventResult;43function test() {44 dispatchEventWithLog(event, function (result) {45 log.info("Result: " + result);46 });47}48test();49var wpt = require('
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 wpt 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?
