Unlock 30% off on Manual Testing Annual Plans this Holiday Season.

Copied to Clipboard!

How to use closeListener method in devicefarmer-stf

Best JavaScript code snippet using devicefarmer-stf

drilldownNavigationList.test.js

Source:drilldownNavigationList.test.js

1import { createElement } from 'lwc';2import { menuItems, parentItem } from './drilldownNavigationList.data';3import DrilldownNavigationList from '../drilldownNavigationList';4import { querySelector, querySelectorAll } from 'kagekiri';5import listStylesStringGenerator from '../listStylesStringGenerator';6describe('community_navigation/drilldownNavigationList', () => {7    let element;8    beforeEach(() => {9        element = createElement(10            'community_navigation-drilldown-navigation-list',11            { is: DrilldownNavigationList }12        );13        element.menuItems = menuItems;14        document.body.appendChild(element);15        return element;16    });17    afterEach(() => {18        document.body.removeChild(element);19    });20    describe('@api', () => {21        describe('menuItems', () => {22            it('should set items', () => {23                expect(element.menuItems).toEqual(menuItems);24                element.menuItems = [];25                expect(element.menuItems).toEqual([]);26            });27        });28        describe('parentItem', () => {29            it('should set parent item', () => {30                expect(element.parentItem).toEqual({});31                element.parentItem = menuItems[0];32                expect(element.parentItem).toEqual(menuItems[0]);33            });34        });35        describe('focusOnFirstItem', () => {36            it('should set boolean value', () => {37                expect(element.focusOnFirstItem).toBeFalsy();38                element.focusOnFirstItem = true;39                expect(element.focusOnFirstItem).toBeTruthy();40            });41        });42        describe('focusOnLastItem', () => {43            it('should set boolean value', () => {44                expect(element.focusOnLastItem).toBeFalsy();45                element.focusOnLastItem = true;46                expect(element.focusOnLastItem).toBeTruthy();47            });48        });49        describe('isMobileView', () => {50            it('should set boolean value', () => {51                expect(element.isMobileView).toBeFalsy();52                element.isMobileView = true;53                expect(element.isMobileView).toBeTruthy();54            });55        });56        describe('showBackLabel', () => {57            it('should set boolean value', () => {58                expect(element.showBackLabel).toBeFalsy();59                element.showBackLabel = true;60                expect(element.showBackLabel).toBeTruthy();61            });62        });63    });64    describe('custom styles', () => {65        let navigationListStyleSpy;66        beforeEach(() => {67            navigationListStyleSpy = jest.spyOn(68                listStylesStringGenerator,69                'createForStyles'70            );71        });72        it('should not apply any styles when custom styles are not provided', () => {73            return Promise.resolve().then(() => {74                expect(navigationListStyleSpy).not.toHaveBeenCalled();75            });76        });77        it('sets the item style when custom styles are provided', () => {78            const customThemeStyles = { color: 'red' };79            element.customThemeStyles = customThemeStyles;80            return Promise.resolve().then(() => {81                expect(navigationListStyleSpy).toHaveBeenCalledWith(82                    expect.objectContaining(customThemeStyles),83                    expect.anything()84                );85            });86        });87        it(`should apply and remove the hover styles when mouse over and off the menu item`, async () => {88            const customThemeStyles = {89                'background-color': 'rgb(0, 36, 169)',90                'background-hover': 'rgb(255, 99, 71)'91            };92            element.customThemeStyles = customThemeStyles;93            // Fire the "mouseenter" event to simulate the mouse moving over the menu item.94            let menuItem = querySelector('.slds-list__item button');95            menuItem.dispatchEvent(new CustomEvent('mouseover'));96            expect(menuItem.style.getPropertyValue('background-color')).toBe(97                customThemeStyles['background-hover']98            );99            menuItem.dispatchEvent(new CustomEvent('mouseout'));100            expect(menuItem.style.getPropertyValue('background-color')).toBe(101                customThemeStyles['background-color']102            );103        });104        it(`should not apply any hover styles when there are no customThemeStyles`, async () => {105            let menuItem = querySelector('.slds-list__item button');106            menuItem.dispatchEvent(new CustomEvent('mouseover'));107            expect(menuItem.style.getPropertyValue('background-color')).toBe(108                ''109            );110            menuItem.dispatchEvent(new CustomEvent('mouseout'));111            expect(menuItem.style.getPropertyValue('background-color')).toBe(112                ''113            );114        });115    });116    describe('handleFocusOut', () => {117        let closeSubmenuListener;118        beforeEach(() => {119            closeSubmenuListener = jest.fn();120            element.addEventListener('closesubmenus', closeSubmenuListener);121        });122        it(`should not close when focus out to the top level menu item`, () => {123            return Promise.resolve()124                .then(() => {125                    querySelector('.slds-list__item button').click();126                })127                .then(() => {128                    querySelector('ul').dispatchEvent(129                        new CustomEvent('focusout', {})130                    );131                })132                .then(() => {133                    expect(closeSubmenuListener).not.toHaveBeenCalledOnce();134                });135        });136        it(`should close when focus out of the menu item`, () => {137            return Promise.resolve()138                .then(() => {139                    querySelector('.slds-list__item button').click();140                })141                .then(() => {142                    const event = new FocusEvent('focusout', {143                        relatedTarget: document.body144                    });145                    querySelector('ul').dispatchEvent(event);146                })147                .then(() => {148                    expect(closeSubmenuListener).toHaveBeenCalledOnce();149                });150        });151    });152    describe('handleCloseClick', () => {153        let closeSubmenuListener;154        beforeEach(() => {155            closeSubmenuListener = jest.fn();156            element.addEventListener('closesubmenus', closeSubmenuListener);157        });158        it('should dispatch navigatetopage event', async () => {159            element.isMobileView = true;160            await Promise.resolve();161            const closeButton = querySelector(162                '.comm-drilldown-navigation__close-button'163            );164            closeButton?.click();165            await Promise.resolve();166            expect(closeSubmenuListener).toHaveBeenCalledOnce();167        });168    });169    describe('handleParentClick', () => {170        it('should drill down to submenu and remove animation styling', async () => {171            element.parentItem = menuItems[0];172            const parent = querySelector('.slds-list__item button');173            parent?.click();174            await Promise.resolve();175            let animation = querySelector(176                '.comm-drilldown-navigation__slideRightToLeft'177            );178            expect(animation).toBeTruthy();179            animation.dispatchEvent(new CustomEvent('animationend'));180            expect(animation.classList).not.toContain(181                '.comm-drilldown-navigation__slideRightToLeft'182            );183            const listItems = querySelectorAll('.slds-list__item');184            expect(listItems.length).toBe(2);185        });186    });187    describe('handleBack', () => {188        it('should drill down to submenu and go back and remove animation styling', async () => {189            element.showBackLabel = true;190            let parent = querySelector('.slds-list__item button');191            parent?.click();192            await Promise.resolve();193            const back = querySelectorAll('li button');194            parent = querySelectorAll('.slds-list__item');195            expect(parent.length).toBe(2);196            back[0].click();197            await Promise.resolve();198            let animation = querySelector(199                '.comm-drilldown-navigation__slideLeftToRight'200            );201            expect(animation).toBeTruthy();202            animation.dispatchEvent(new CustomEvent('animationend'));203            expect(animation.classList).not.toContain(204                '.comm-drilldown-navigation__slideLeftToRight'205            );206            parent = querySelectorAll('.slds-list__item');207            expect(parent.length).toBe(3);208        });209    });210    describe('handleAllClick', () => {211        it('should fire navigation event', async () => {212            const navigateListener = jest.fn();213            const closeListener = jest.fn();214            element.addEventListener('navigatetopage', navigateListener);215            element.addEventListener('closesubmenus', closeListener);216            const parent = querySelector('.slds-list__item button');217            parent?.click();218            await Promise.resolve();219            const all = querySelector('li:not(.slds-list__item) a');220            all?.click();221            await Promise.resolve();222            expect(navigateListener).toHaveBeenCalledOnce();223            expect(closeListener).toHaveBeenCalledOnce();224        });225    });226    describe('handleLeafClick', () => {227        let navigateListener;228        let closeListener;229        beforeEach(() => {230            navigateListener = jest.fn();231            closeListener = jest.fn();232            element.addEventListener('navigatetopage', navigateListener);233            element.addEventListener('closesubmenus', closeListener);234        });235        it('should dispatch navigatetopage event', async () => {236            element.parentItem = parentItem;237            const leaf = querySelector('.slds-list__item a');238            leaf?.click();239            await Promise.resolve();240            expect(navigateListener).toHaveBeenCalledOnce();241            expect(closeListener).toHaveBeenCalledOnce();242        });243    });244    describe('key events', () => {245        describe('handleBackKeyDown', () => {246            let parent;247            let closeListener;248            beforeEach(async () => {249                closeListener = jest.fn();250                element.addEventListener('closesubmenus', closeListener);251                parent = querySelector('.slds-list__item button');252                parent?.click();253                await Promise.resolve();254            });255            ['Enter', ' ', 'ArrowLeft', 'Esc', 'Escape'].forEach((key) => {256                it('should go back', async () => {257                    const back = querySelector('li button');258                    const event = new KeyboardEvent('keydown', { key });259                    back.dispatchEvent(event);260                    await Promise.resolve();261                    parent = querySelectorAll('.slds-list__item');262                    expect(parent.length).toBe(3);263                });264            });265            it('should close submenu and fire event', async () => {266                const keyListener = jest.fn();267                element.addEventListener(268                    'leftrightarrowkeysubmenu',269                    keyListener270                );271                const back = querySelector('li button');272                const event = new KeyboardEvent('keydown', {273                    key: 'ArrowRight'274                });275                back.dispatchEvent(event);276                await Promise.resolve();277                expect(keyListener).toHaveBeenCalled();278            });279        });280        describe('handleAllKeyDown', () => {281            let parent;282            let navigateListener;283            let keyListener;284            let closeListener;285            beforeEach(async () => {286                navigateListener = jest.fn();287                keyListener = jest.fn();288                closeListener = jest.fn();289                element.addEventListener(290                    'leftrightarrowkeysubmenu',291                    keyListener292                );293                element.addEventListener('navigatetopage', navigateListener);294                element.addEventListener('closesubmenus', closeListener);295                parent = querySelector('.slds-list__item button');296                parent?.click();297                await Promise.resolve();298            });299            ['Enter', ' '].forEach((key) => {300                it('should navigate', async () => {301                    const all = querySelector('li a');302                    const event = new KeyboardEvent('keydown', { key });303                    all.dispatchEvent(event);304                    await Promise.resolve();305                    expect(navigateListener).toHaveBeenCalled();306                    expect(closeListener).toHaveBeenCalled();307                });308            });309            it('should close list and fire event on ArrowRight', async () => {310                const all = querySelector('li:not(.slds-list__item) a');311                const event = new KeyboardEvent('keydown', {312                    key: 'ArrowRight'313                });314                all.dispatchEvent(event);315                await Promise.resolve();316                expect(keyListener).toHaveBeenCalled();317            });318            it('should close list and fire event on ArrowLeft', async () => {319                element.parentItem = parentItem;320                let all = querySelector('li:not(.slds-list__item) a');321                const event = new KeyboardEvent('keydown', {322                    key: 'ArrowLeft'323                });324                all.dispatchEvent(event);325                await Promise.resolve();326                parent = querySelectorAll('.slds-list__item');327                expect(parent.length).toBe(2);328                all = querySelector('li:not(.slds-list__item) a');329                all.dispatchEvent(event);330                await Promise.resolve();331                expect(keyListener).toHaveBeenCalled();332            });333            ['Esc', 'Escape'].forEach((key) => {334                it(`should close list and fire event on "${key}"`, async () => {335                    element.parentItem = parentItem;336                    let all = querySelector('li:not(.slds-list__item) a');337                    const event = new KeyboardEvent('keydown', {338                        key339                    });340                    all.dispatchEvent(event);341                    await Promise.resolve();342                    parent = querySelectorAll('.slds-list__item');343                    expect(parent.length).toBe(2);344                    all = querySelector('li:not(.slds-list__item) a');345                    all.dispatchEvent(event);346                    await Promise.resolve();347                    expect(closeListener).toHaveBeenCalled();348                });349            });350        });351        describe('handleParentKeyDown', () => {352            let parent;353            let keyListener;354            let closeListener;355            beforeEach(async () => {356                keyListener = jest.fn();357                closeListener = jest.fn();358                element.addEventListener(359                    'leftrightarrowkeysubmenu',360                    keyListener361                );362                element.addEventListener('closesubmenus', closeListener);363                parent = querySelector('.slds-list__item button');364            });365            ['Enter', ' ', 'ArrowRight'].forEach((key) => {366                it('should drill down to next list', async () => {367                    const event = new KeyboardEvent('keydown', { key });368                    parent.dispatchEvent(event);369                    await Promise.resolve();370                    const listItems = querySelectorAll('.slds-list__item');371                    expect(listItems.length).toBe(2);372                });373            });374            it('should go back to previous menu on ArrowLeft', async () => {375                element.parentItem = parentItem;376                const event = new KeyboardEvent('keydown', {377                    key: 'ArrowLeft'378                });379                parent.click();380                await Promise.resolve();381                parent = querySelector('.slds-list__item button');382                parent.dispatchEvent(event);383                await Promise.resolve();384                parent = querySelectorAll('.slds-list__item');385                expect(parent.length).toBe(3);386                parent = querySelector('.slds-list__item button');387                parent.dispatchEvent(event);388                await Promise.resolve();389                expect(keyListener).toHaveBeenCalled();390            });391            ['Esc', 'Escape'].forEach((key) => {392                it(`should go back close menu or go back on ${key}`, async () => {393                    element.parentItem = parentItem;394                    const event = new KeyboardEvent('keydown', {395                        key396                    });397                    parent.click();398                    await Promise.resolve();399                    parent = querySelector('.slds-list__item button');400                    parent.dispatchEvent(event);401                    await Promise.resolve();402                    parent = querySelectorAll('.slds-list__item');403                    expect(parent.length).toBe(3);404                    parent = querySelector('.slds-list__item button');405                    parent.dispatchEvent(event);406                    await Promise.resolve();407                    expect(closeListener).toHaveBeenCalled();408                });409            });410        });411        describe('handleLeafKeyDown', () => {412            let parent;413            let keyListener;414            let navigateListener;415            let closeListener;416            beforeEach(async () => {417                keyListener = jest.fn();418                closeListener = jest.fn();419                navigateListener = jest.fn();420                element.addEventListener(421                    'leftrightarrowkeysubmenu',422                    keyListener423                );424                element.addEventListener('closesubmenus', closeListener);425                element.addEventListener('navigatetopage', navigateListener);426                parent = querySelector('.slds-list__item button');427            });428            ['Enter', ' '].forEach((key) => {429                it('should dispatch navigatetopage event', async () => {430                    element.parentItem = parentItem;431                    const event = new KeyboardEvent('keydown', { key });432                    const leaf = querySelector('.slds-list__item a');433                    leaf.dispatchEvent(event);434                    await Promise.resolve();435                    expect(navigateListener).toHaveBeenCalledOnce();436                });437            });438            it('should go back to previous menu on ArrowLeft', async () => {439                element.parentItem = parentItem;440                const event = new KeyboardEvent('keydown', {441                    key: 'ArrowLeft'442                });443                parent.click();444                await Promise.resolve();445                let leaf = querySelector('.slds-list__item a');446                leaf.dispatchEvent(event);447                await Promise.resolve();448                parent = querySelectorAll('.slds-list__item');449                expect(parent.length).toBe(3);450                leaf = querySelector('.slds-list__item a');451                leaf.dispatchEvent(event);452                await Promise.resolve();453                expect(keyListener).toHaveBeenCalled();454            });455            it('should fire event on ArrowRight', async () => {456                element.parentItem = parentItem;457                const event = new KeyboardEvent('keydown', {458                    key: 'ArrowRight'459                });460                parent.click();461                await Promise.resolve();462                let leaf = querySelector('.slds-list__item a');463                leaf.dispatchEvent(event);464                await Promise.resolve();465                expect(keyListener).toHaveBeenCalled();466            });467            ['Esc', 'Escape'].forEach((key) => {468                it('should go back or close list', async () => {469                    element.parentItem = parentItem;470                    const event = new KeyboardEvent('keydown', {471                        key472                    });473                    parent.click();474                    await Promise.resolve();475                    let leaf = querySelector('.slds-list__item a');476                    leaf.dispatchEvent(event);477                    await Promise.resolve();478                    parent = querySelectorAll('.slds-list__item');479                    expect(parent.length).toBe(3);480                    leaf = querySelector('.slds-list__item a');481                    leaf.dispatchEvent(event);482                    await Promise.resolve();483                    expect(closeListener).toHaveBeenCalled();484                });485            });486            it('should fire close event on Tab', async () => {487                element.parentItem = parentItem;488                const event = new KeyboardEvent('keydown', {489                    key: 'Tab'490                });491                let leaf = querySelector('.slds-list__item a');492                leaf.dispatchEvent(event);493                await Promise.resolve();494                expect(closeListener).toHaveBeenCalled();495            });496        });497        describe('handleCommonKeyDown', () => {498            let parent;499            let navigateListener;500            let keyListener;501            beforeEach(async () => {502                navigateListener = jest.fn();503                keyListener = jest.fn();504                element.addEventListener(505                    'leftrightarrowkeysubmenu',506                    keyListener507                );508                element.addEventListener('navigatetopage', navigateListener);509                parent = querySelector('.slds-list__item button');510                parent?.click();511                await Promise.resolve();512            });513            it('should focus next item', async () => {514                let listItems = querySelectorAll('[role=menuitem]');515                const length = listItems.length;516                const event = new KeyboardEvent('keydown', {517                    key: 'ArrowDown'518                });519                for (const item of listItems) {520                    const index = listItems.indexOf(item);521                    let spy;522                    let next;523                    if (index + 1 < length) {524                        next = index + 1;525                        spy = jest.spyOn(listItems[index + 1], 'focus');526                    } else {527                        next = 0;528                        spy = jest.spyOn(listItems[0], 'focus');529                    }530                    listItems[index].dispatchEvent(event);531                    // eslint-disable-next-line no-await-in-loop532                    await Promise.resolve();533                    expect(listItems[index].getAttribute('tabindex')).toBe(534                        '-1'535                    );536                    expect(listItems[next].getAttribute('tabindex')).toBe('0');537                    expect(spy).toHaveBeenCalled();538                }539            });540            it('should focus previous item', async () => {541                let listItems = querySelectorAll('[role=menuitem]');542                const length = listItems.length;543                const event = new KeyboardEvent('keydown', {544                    key: 'ArrowUp'545                });546                //reorder to ensure it focuses in the right order547                listItems = [548                    listItems[0],549                    listItems[3],550                    listItems[2],551                    listItems[1]552                ];553                for (const item of listItems) {554                    const index = listItems.indexOf(item);555                    let spy;556                    let next;557                    if (index + 1 < length) {558                        next = index + 1;559                        spy = jest.spyOn(listItems[next], 'focus');560                    } else {561                        next = 0;562                        spy = jest.spyOn(listItems[next], 'focus');563                    }564                    listItems[index].dispatchEvent(event);565                    // eslint-disable-next-line no-await-in-loop566                    await Promise.resolve();567                    expect(listItems[index].getAttribute('tabindex')).toBe(568                        '-1'569                    );570                    expect(listItems[next].getAttribute('tabindex')).toBe('0');571                    expect(spy).toHaveBeenCalled();572                }573            });574            ['Home', 'PageUp'].forEach((key) => {575                it('should focus first item', async () => {576                    let listItems = querySelectorAll('[role=menuitem]');577                    const event = new KeyboardEvent('keydown', {578                        key579                    });580                    for (const item of listItems) {581                        const index = listItems.indexOf(item);582                        const firstItemSpy = jest.spyOn(listItems[0], 'focus');583                        listItems[index].dispatchEvent(event);584                        // eslint-disable-next-line no-await-in-loop585                        await Promise.resolve();586                        expect(listItems[0].getAttribute('tabindex')).toBe('0');587                        expect(firstItemSpy).toHaveBeenCalled();588                    }589                });590            });591            ['End', 'PageDown'].forEach((key) => {592                it('should focus last item', async () => {593                    let listItems = querySelectorAll('[role=menuitem]');594                    const event = new KeyboardEvent('keydown', {595                        key596                    });597                    for (const item of listItems) {598                        const index = listItems.indexOf(item);599                        const firstItemSpy = jest.spyOn(600                            listItems[listItems.length - 1],601                            'focus'602                        );603                        listItems[index].dispatchEvent(event);604                        // eslint-disable-next-line no-await-in-loop605                        await Promise.resolve();606                        expect(607                            listItems[listItems.length - 1].getAttribute(608                                'tabindex'609                            )610                        ).toBe('0');611                        expect(firstItemSpy).toHaveBeenCalled();612                    }613                });614            });615            ['ctrl', 'cmd'].forEach((key) => {616                it('should do nothing for other key events', async () => {617                    let listItems = querySelectorAll('[role=menuitem]');618                    const event = new KeyboardEvent('keydown', {619                        key620                    });621                    for (const item of listItems) {622                        const index = listItems.indexOf(item);623                        listItems[index].dispatchEvent(event);624                        // eslint-disable-next-line no-await-in-loop625                        await Promise.resolve();626                        expect(keyListener).not.toHaveBeenCalled();627                        expect(navigateListener).not.toHaveBeenCalled();628                    }629                });630            });631        });632    });...

socketcluster-server-tests.ts

Source:socketcluster-server-tests.ts

1// Adapted from README2// Using with basic http(s) module (example)3import http = require("http");4import WebSocket = require("ws");5import * as socketClusterServer from "socketcluster-server";6let httpServer = http.createServer();7let scServer = socketClusterServer.attach(httpServer);8scServer.on("connection", socket => {9    // ... Handle new socket connections here10});11httpServer.listen(8000);12// Using with Express (example)13import serveStatic = require("serve-static");14import path = require("path");15import express = require("express");16const app = express();17app.use(serveStatic(path.resolve(__dirname, "public")));18httpServer = http.createServer();19// Attach express to our httpServer20httpServer.on("request", app);21// Attach socketcluster-server to our httpServer22scServer = socketClusterServer.attach(httpServer);23scServer.on("connection", socket => {24    // ... Handle new socket connections here25});26httpServer.listen(8000);27// Tests of the server-side socket28scServer.on("connection", socket => {29    // Check the standard events, with normal subscription,30    // one-time subscription and unsubscription.31    const errorListener: (error: Error) => void = err => {32        console.log(err);33    };34    socket.on("error", errorListener);35    socket.once("error", errorListener);36    socket.off("error", errorListener);37    socket.off("error");38    const messageListener: (message: WebSocket.Data) => void = message => {39        console.log(message);40    };41    socket.on("message", messageListener);42    socket.once("message", messageListener);43    socket.off("message", messageListener);44    socket.off("message");45    socket.on("raw", messageListener);46    socket.once("raw", messageListener);47    socket.off("raw", messageListener);48    socket.off("raw");49    const closeListener: (code: number, data?: any) => void = (code, data) => {50        console.log(`${code} ${data}`);51    };52    socket.on("connectAbort", closeListener);53    socket.once("connectAbort", closeListener);54    socket.off("connectAbort", closeListener);55    socket.off("connectAbort");56    socket.on("disconnect", closeListener);57    socket.once("disconnect", closeListener);58    socket.off("disconnect", closeListener);59    socket.off("disconnect");60    socket.on("close", closeListener);61    socket.once("close", closeListener);62    socket.off("close", closeListener);63    socket.off("close");64    const authStateChangeListener: (stateChangeData: socketClusterServer.SCServerSocket.StateChangeData) => void = data => {65        console.log(data);66    };67    socket.on("authStateChange", authStateChangeListener);68    socket.once("authStateChange", authStateChangeListener);69    socket.off("authStateChange", authStateChangeListener);70    socket.off("authStateChange");71    const authenticateListener: (authToken?: socketClusterServer.SCServer.AuthToken) => void = authToken => {72        console.log(authToken);73    };74    socket.on("authenticate", authenticateListener);75    socket.once("authenticate", authenticateListener);76    socket.off("authenticate", authenticateListener);77    socket.off("authenticate");78    const deauthenticateListener: (oldToken?: socketClusterServer.SCServer.AuthToken) => void = oldToken => {79        console.log(oldToken);80    };81    socket.on("deauthenticate", deauthenticateListener);82    socket.once("deauthenticate", deauthenticateListener);83    socket.off("deauthenticate", deauthenticateListener);84    socket.off("deauthenticate");85    // Check custom events, with normal subscription,86    // one-time subscription and unsubscription.87    const customEventListener: (data?: any) => void = data => {88        console.log(data);89    };90    socket.on("custom-event", customEventListener);91    socket.once("custom-event", customEventListener);92    socket.off("custom-event", customEventListener);93    socket.off("custom-event");...

page.ts

Source:page.ts

...15      </li>16    `)17    const closeBtn = this.element.querySelector('.close-btn')! as HTMLSpanElement18    closeBtn.onclick = () => {19      this.closeListener && this.closeListener()20    }21  }22  addChild(child: Component, position: InsertPosition = 'afterbegin') {23    child.attachTo(this.element, position)24  }25  setOnCloseListener(closeListener: CloseListener) {26    this.closeListener = closeListener27  }28}29export class PageComponent extends BaseComponent<HTMLUListElement> implements Composable {30  constructor() {31    super(`<ul class="page"></ul>`)32  }33  addChild(child: Component, position: InsertPosition = 'afterbegin') {...

use_open.ts

Source:use_open.ts

1import { useState, useEffect, useCallback } from 'react';2import eventemitter, { EventType } from '../eventemitter';3export default () => {4  const [open, setOpen] = useState(false);5  const onClose = useCallback(() => setOpen(false), []);6  const [id, setId] = useState('');7  useEffect(() => {8    const openListener = (data: { id: string }) => {9      setId(data.id);10      return setOpen(true);11    };12    const closeListener = () => setOpen(false);13    eventemitter.on(EventType.OPEN_MUSIC_DRAWER, openListener);14    eventemitter.on(EventType.OPEN_SINGER_DRAWER, closeListener);15    eventemitter.on(EventType.OPEN_MUSICBILL_LIST_DRAWER, closeListener);16    eventemitter.on(EventType.OPEN_MUSIC_OPERATE_POPUP, closeListener);17    return () => {18      eventemitter.off(EventType.OPEN_MUSIC_DRAWER, openListener);19      eventemitter.off(EventType.OPEN_SINGER_DRAWER, closeListener);20      eventemitter.off(EventType.OPEN_MUSICBILL_LIST_DRAWER, closeListener);21      eventemitter.off(EventType.OPEN_MUSIC_OPERATE_POPUP, closeListener);22    };23  }, []);24  return {25    open,26    onClose,27    id,28  };...

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.