Jack Maclennan Portfolio
    Preparing search index...

    Fixture for NavBar component

    export const navBarTest = test.extend<{ navBar: NavBar }>({
    navBar: async ({ page }, use) => {
    const navBar = new NavBar(page);
    // eslint-disable-next-line react-hooks/rules-of-hooks
    await use(navBar);
    }
    });

    Provides method helpers for locating child elements.

    Used in example to be accessed in testing environment.

    export default class NavBar implements Component {
    /** @public Component wrapper. */
    private readonly navBar: Locator;
    /** @public Logo link element. */
    private readonly logoLink: Locator;
    /** @public Wrapper for elements only visible on desktop screen sizes. */
    private readonly desktopComponents: Locator;
    /** @public Wrapper for elements only visible on mobile screen sizes. */
    private readonly mobileComponents: Locator;
    /** @public Child {@link SiteLinks}. */
    private readonly siteLinks: SiteLinks;
    /** @public Child {@link SocialIcons}. */
    private readonly socialIcons: SocialIcons;
    /** @public Child {@link ThemeSelect}s. */
    private readonly themeSelects: { mobileThemeSelect: ThemeSelect; desktopThemeSelect: ThemeSelect };
    /** @public Child {@link HamburgerMenu} */
    private readonly hamburgerMenu: HamburgerMenu;

    /**
    * Fixture constructor - initialise variables.
    * @param page - Playwright page object.
    */
    public constructor(private readonly page: Page) {
    this.navBar = this.page.getByTestId('nav-bar');
    this.logoLink = this.navBar.getByTestId('logo-link');
    this.desktopComponents = this.navBar.getByTestId('desktop-components');
    this.mobileComponents = this.navBar.getByTestId('mobile-components');
    this.siteLinks = new SiteLinks(this.navBar.getByTestId('desktop-components'));
    this.socialIcons = new SocialIcons(this.navBar.getByTestId('desktop-components'));
    this.themeSelects = {
    mobileThemeSelect: new ThemeSelect(page, this.navBar.getByTestId('mobile-components')),
    desktopThemeSelect: new ThemeSelect(page, this.navBar.getByTestId('desktop-components'))
    };
    this.hamburgerMenu = new HamburgerMenu(this.page);
    }

    /** Getter method. @returns {@link navBar}. */
    public getWrapper(): Locator {
    return this.navBar;
    }

    /** Testing helper method. */
    public async rendersCorrectly(): Promise<boolean> {
    const isMobile: boolean = await this.getMobileComponents().isVisible();

    await expect(this.getLogo(), 'logo is visible').toBeVisible();
    if (isMobile) {
    await expect(this.getSiteLinks().getWrapper(), 'site links hidden on mobile').toBeHidden();
    await expect(this.getDesktopThemeSelect().getWrapper(), 'desktop theme select hidden on mobile').toBeHidden();
    await expect(this.getSocialIcons().getWrapper(), 'social icons hidden on mobile').toBeHidden();
    await expect(this.getDesktopComponents(), 'desktop components hidden on mobile').toBeHidden();
    await expect(this.getMobileComponents(), 'mobile components visible on mobile').toBeVisible();
    expect(await this.getMobileThemeSelect().rendersCorrectly()).toBeTruthy();
    expect(await this.getHamburgerMenu().rendersCorrectly()).toBeTruthy();
    } else {
    await expect(this.getMobileThemeSelect().getWrapper(), 'mobile theme select hidden on desktop').toBeHidden();
    await expect(this.getHamburgerMenu().getWrapper(), 'hamburger menu hidden on desktop').toBeHidden();
    await expect(this.getMobileComponents(), 'mobile components hidden on desktop').toBeHidden();
    await expect(this.getDesktopComponents(), 'desktop components visible on desktop').toBeVisible();
    expect(await this.getSiteLinks().rendersCorrectly()).toBeTruthy();
    expect(await this.getSiteLinks().navigatesCorrectly(this.page)).toBeTruthy();
    expect(await this.getDesktopThemeSelect().rendersCorrectly()).toBeTruthy();
    expect(await this.getSocialIcons().rendersCorrectly()).toBeTruthy();
    }
    return true;
    }

    /** Getter method. @returns {@link logoLink}. */
    getLogo(): Locator {
    return this.logoLink;
    }

    /** Getter method. @returns {@link mobileComponents}. */
    getMobileComponents(): Locator {
    return this.mobileComponents;
    }

    /** Getter method. @returns {@link themeSelects | mobileThemeSelect}. */
    getMobileThemeSelect(): ThemeSelect {
    return this.themeSelects.mobileThemeSelect;
    }

    /** Getter method. @returns {@link desktopComponents}. */
    getDesktopComponents(): Locator {
    return this.desktopComponents;
    }

    /** Getter method @returns {@link themeSelects} based on which one is visible. */
    public async getVisibleThemeSelect(): Promise<ThemeSelect> {
    if (await this.getMobileThemeSelect().getWrapper().isVisible()) return this.getMobileThemeSelect();
    else return this.getDesktopThemeSelect();
    }

    /** Getter method. @returns {@link siteLinks}. */
    getSiteLinks(): SiteLinks {
    return this.siteLinks;
    }

    /** Getter method. @returns {@link themeSelects | desktopThemeSelect}. */
    getDesktopThemeSelect(): ThemeSelect {
    return this.themeSelects.desktopThemeSelect;
    }

    /** Getter method. @returns {@link socialIcons}. */
    getSocialIcons(): SocialIcons {
    return this.socialIcons;
    }

    /** Getter method. @returns {@link hamburgerMenu}. */
    public getHamburgerMenu(): HamburgerMenu {
    return this.hamburgerMenu;
    }
    }

    Implements

    Index

    Constructors

    Properties

    navBar: Locator

    Component wrapper.

    logoLink: Locator

    Logo link element.

    desktopComponents: Locator

    Wrapper for elements only visible on desktop screen sizes.

    mobileComponents: Locator

    Wrapper for elements only visible on mobile screen sizes.

    siteLinks: SiteLinks

    Child SiteLinks.

    socialIcons: SocialIcons

    Child SocialIcons.

    themeSelects: {
        mobileThemeSelect: ThemeSelect;
        desktopThemeSelect: ThemeSelect;
    }

    Child ThemeSelects.

    hamburgerMenu: HamburgerMenu
    page: Page

    Playwright page object.

    Methods