How to use @open-wc/testing - 10 common examples

it('generates an accessible markup', async () => {
        // For some reason we need to create a new share menu,
        // otherwise axe will complain about "no elements in frame context"
        const possiblyAccessibleShareMenu: ShareMenu = await fixture(html`
          
        `);

        await expect(possiblyAccessibleShareMenu).to.be.accessible();
      });

it('creates a button only for the specified socials and in the specified order', () => {
        shareMenu.socials = ['facebook', 'skype', 'telegram'];
        const buttons = shareMenu.shadowRoot.querySelectorAll<
          HTMLButtonElement
        >('button.social');

        expect(buttons.length).to.equal(3);
        expect(buttons[0].title).to.equal(
          shareMenu['_supportedSocials'].facebook.title,
        );
        expect(buttons[1].title).to.equal(
          shareMenu['_supportedSocials'].skype.title,
        );
        expect(buttons[2].title).to.equal(
          shareMenu['_supportedSocials'].telegram.title,
        );

        // Restore socials
        shareMenu.socials = Object.keys(shareMenu['_supportedSocials']);
      });

it('updates the window pathname', async () => {
            window.history.pushState({ triggerRouteChange: false }, null, '/page3');
            expect(location.pathname).to.equal('/page3');
        });

it('updates the document title that matches the current location after calling pushState', async () => {
        await fixture(html`
            
                
                
            
        `);
        window.history.pushState({}, document.title, '/page1');
        expect(document.title).to.equal('Test1');
        const state = { my: 'state' };
        const pageTitle = 'the title';
        const url = '/page2';
        window.history.pushState(state, pageTitle, url);
        expect(document.title).to.equal('Test2');
    });

it('renders image only socials if is-imsage is truthy', () => {
        shareMenu.isImage = 'yes';
        expect(
          shareMenu.shadowRoot.querySelector(
            `button.social#${imageOnlySocialId}`,
          ),
        ).not.to.be.null;
      });

it('shows a warning when attempting to go to a route that is not handled after popstate is called', async () => {
        const component: RouterComponent = await fixture(html`
            
                
                
            
        `);

        window.history.pushState({}, document.title, '/page1');
        const newPath = 'nope';
        consoleWarn.resetHistory();
        component.show(newPath);
        expect(consoleWarn.args[0]).to.deep.equal([
            `Navigated to path "${newPath}" but there is no matching ` +
                `element with a path that matches. Maybe you should implement a catch-all route with the path attribute of ".*"?`
        ]);
    });

it('scrolls back to top of page if there is no hash', async () => {
            window.history.pushState({}, document.title, '/page1');
            const popstate = new PopStateEvent('popstate', { state: {} });
            const windowScrollToStub = sinon.stub(window, 'scrollTo');
            window.dispatchEvent(popstate);
            expect(windowScrollToStub).to.be.calledOnceWithExactly({ behavior: 'auto', top: 0 });
            windowScrollToStub.restore();
        });
    });

it('defaults to all of them unless specified', () => {
        expect(shareMenu.socials).to.deep.equal(
          Object.keys(shareMenu['_supportedSocials']),
        );
      });

it('should continue to show the current page and not show a warning when show has been called with the same url', async () => {
        const component: RouterComponent = await fixture(html`
            
                
                
            
        `);

        const pathname = '/page1';
        window.history.pushState({}, document.title, pathname);
        consoleWarn.resetHistory();
        component.show(pathname);
        expect(consoleWarn.callCount).to.equal(0);
        expect(document.body.querySelector('first-page')).to.not.be.null;
        expect(document.body.querySelector('second-page')).to.be.null;
    });

const fakeOpenWindow = fake((url: string) => {
            expect(url).not.to.contain('i=');
          });
          shareMenu['_openWindow'] = fakeOpenWindow;