pezkuwi-apps/packages/test-support/src/pagesElements/Sidebar.ts

// Copyright 2017-2026 @pezkuwi/test-supports authors & contributors
// SPDX-License-Identifier: Apache-2.0

/* global expect */

import { fireEvent, screen, within } from '@testing-library/react';

import { assertTextContent } from '../utils/domAssertions.js';
import { JudgementTag } from './JudgementTag.js';

export class Sidebar {
  public sidebar: HTMLElement;

  constructor (sidebar: HTMLElement) {
    this.sidebar = sidebar;
  }

  async changeAccountName (accountName: string): Promise<void> {
    this.edit();
    await this.typeAccountName(accountName);
    this.save();
  }

  async typeAccountName (accountName: string): Promise<void> {
    const accountNameInput = await this.findByTestId('name-input');

    fireEvent.change(accountNameInput, { target: { value: accountName } });
  }

  async selectTag (tagName: string): Promise<void> {
    const tagsCombobox = this.openTagsDropdown();
    const tagOptions = await within(tagsCombobox).findAllByRole('option');
    const tag = tagOptions.find((tag) => tag.textContent === tagName);

    if (!tag) {
      throw new Error(`Unable to find tag ${tagName}`);
    }

    fireEvent.click(tag);
  }

  async assertAccountInput (expectedInput: string): Promise<void> {
    const nameInput = await this.findByTestId('name-input');

    expect(nameInput).toHaveProperty('value', expectedInput);
  }

  async assertAccountName (expectedAccountName: string): Promise<void> {
    const sideBarAddressSection = await this.findByTestId('sidebar-address-menu');
    const sideBarName = await within(sideBarAddressSection).findByTestId('account-name');

    assertTextContent(sideBarName, expectedAccountName);
  }

  async assertJudgement (judgement: string): Promise<void> {
    const judgementsSection = await this.findByTestId('judgements');

    assertTextContent(judgementsSection, judgement);
  }

  async assertTags (tagsContent: string): Promise<void> {
    const sideBarTags = await this.findByTestId('sidebar-tags');

    assertTextContent(sideBarTags, tagsContent);
  }

  close (): Promise<void> {
    return this.clickByTestId('close-sidebar-button');
  }

  cancel (): void {
    this.clickButton('Cancel');
  }

  edit (): void {
    this.clickButton('Edit');
  }

  save (): void {
    this.clickButton('Save');
  }

  async clickByText (text: string): Promise<void> {
    const htmlElement = await this.findByText(text);

    fireEvent.click(htmlElement);
  }

  async clickByTestId (testId: string): Promise<void> {
    const htmlElement = await this.findByTestId(testId);

    fireEvent.click(htmlElement);
  }

  async findByText (text: string): Promise<HTMLElement> {
    return within(this.sidebar).findByText(text);
  }

  async findByTestId (testId: string): Promise<HTMLElement> {
    return within(this.sidebar).findByTestId(testId);
  }

  async findByRole (role: string): Promise<HTMLElement> {
    return within(this.sidebar).findByRole(role);
  }

  async findAllByRole (role: string): Promise<HTMLElement[]> {
    return within(this.sidebar).findAllByRole(role);
  }

  getByTestId (testId: string): HTMLElement {
    return within(this.sidebar).getByTestId(testId);
  }

  getByRole (roleName: string, options?: Record<string, unknown>): HTMLElement {
    return within(this.sidebar).getByRole(roleName, options);
  }

  queryByRole (roleName: string, options?: Record<string, unknown>): HTMLElement | null {
    return within(this.sidebar).queryByRole(roleName, options);
  }

  queryByTestId (testId: string): HTMLElement | null {
    return within(this.sidebar).queryByTestId(testId);
  }

  async findSubs (): Promise<HTMLElement[]> {
    const identitySection = await this.findByTestId('identity-section');

    return within(identitySection).queryAllByTestId('subs');
  }

  async openSubsModal (): Promise<HTMLElement> {
    const identitySection = await this.findByTestId('identity-section');
    const showSubsButton = await within(identitySection).findByText('Show list');

    fireEvent.click(showSubsButton);

    return screen.findByTestId('modal');
  }

  async getJudgement (judgementName: string): Promise<JudgementTag> {
    const judgements = await this.findByTestId('judgements');

    return new JudgementTag(await within(judgements).findByText(judgementName));
  }

  private clickButton (buttonName: string) {
    const button = this.getByRole('button', { name: buttonName });

    fireEvent.click(button);
  }

  private openTagsDropdown (): HTMLElement {
    const tagsDropdown = this.getByRole('combobox', { expanded: false });

    fireEvent.click(tagsDropdown);

    return tagsDropdown;
  }
}