openobserve/tests/ui-testing/pages/dashboardPages/dashboard-chart.js

import { expect } from "@playwright/test";

// pages/chartTypeSelector.js
// Methods : selectChartType, selectStreamType, searchAndAddField,  selectStream

export default class ChartTypeSelector {
  constructor(page) {
    this.page = page;
  }

  // Chart Type select
  async selectChartType(chartType) {
    const chartOption = this.page.locator(
      `[data-test="selected-chart-${chartType}-item"]`
    );
    await chartOption.waitFor({ state: "visible", timeout: 5000 });
    await chartOption.click();
  }

  //  Stream Type select
  async selectStreamType(type) {
    // Click the dropdown
    await this.page.locator('[data-test="index-dropdown-stream_type"]').click();

    await this.page
      .getByRole("option", { name: type })
      .locator("div")
      .nth(2)
      .click();
  }

  // Stream select
  async selectStream(streamName) {
    const streamInput = this.page.locator(
      '[data-test="index-dropdown-stream"]'
    );
    await streamInput.click();
    await streamInput.press("Control+a");
    await streamInput.fill(streamName);

    const streamOption = this.page
      .getByRole("option", { name: streamName, exact: true })
      .locator("div")
      .nth(2);

    await streamOption.waitFor({ state: "visible", timeout: 5000 });
    await streamOption.click();
  }

  // Search field and added for X, Y,Breakdown etc.
  async searchAndAddField(fieldName, target) {
    const searchInput = this.page.locator(
      '[data-test="index-field-search-input"]'
    );
    await searchInput.click();
    await searchInput.fill(fieldName);

    const buttonSelectors = {
      x: '[data-test="dashboard-add-x-data"]',
      y: '[data-test="dashboard-add-y-data"]',
      b: '[data-test="dashboard-add-b-data"]',
      filter: '[data-test="dashboard-add-filter-data"]',
      latitude: '[data-test="dashboard-add-latitude-data"]',
      longitude: '[data-test="dashboard-add-longitude-data"]',
      weight: '[data-test="dashboard-add-weight-data"]',
      z: '[data-test="dashboard-add-z-data"]',
    };

    const buttonSelector = buttonSelectors[target];

    if (!buttonSelector) {
      throw new Error(`Invalid target type: ${target}`);
    }

    await this.page.locator(buttonSelector).click();
  }

  // Add filter condition
  async addFilterCondition(initialFieldName, newFieldName, operator, value) {
    // Step 1: Click the existing field if provided
    if (initialFieldName) {
      await this.page
        .locator(
          `[data-test="dashboard-add-condition-label-0-${initialFieldName}"]`
        )
        .click();
    }

    // Step 2: Change field if newFieldName is provided
    if (newFieldName) {
      const fieldDropdown = this.page.locator(
        '[data-test="dashboard-add-condition-column-0\\}"]'
      );

      await fieldDropdown.click();
      await fieldDropdown.fill(newFieldName);

      await this.page
        .getByRole("option", { name: newFieldName, exact: true })
        .first()
        .click();
    }

    const selectedField = newFieldName || initialFieldName;

    // Step 3: Open the condition configuration if operator or value is being handled
    if (operator || value) {
      await this.page
        .locator('[data-test="dashboard-add-condition-list-0"]')
        .click();
      await this.page
        .locator('[data-test="dashboard-add-condition-condition-0"]')
        .click();
    }

    // Step 4: Select operator if provided
    if (operator) {
      await this.page
        .locator('[data-test="dashboard-add-condition-operator"]')
        .click();
      await this.page.getByRole("option", { name: operator }).click();
    }

    // Step 5: Enter value if provided
    if (value) {
      const valueInput = this.page.locator(
        '[data-test="common-auto-complete"]'
      );
      await valueInput.click();
      await valueInput.fill(value);
    } else if (operator && selectedField) {
      // Step 6: Assert dynamic error message for missing value
      const expectedError = `Filter: ${selectedField}: Condition value required`;
      const errorMessageLocator = this.page
        .locator("div")
        .filter({ hasText: expectedError })
        .first();
      await expect(errorMessageLocator).toBeVisible();
    }
  }
}