import { newSpecPage } from '@stencil/core/testing';
import { BsChartBar } from '../bs-chart-bar';
import { faker } from '@faker-js/faker';
import { getMockData } from '../../../utils/chartHelpers';
const title = faker.random.words();
const xLabel = faker.random.words();
const yLabel = faker.random.words();
const { datasets, datapointLabels } = getMockData(faker);
describe('bs-chart-bar', () => {
  it('renders chartTitle', async () => {
    const page = await newSpecPage({
      components: [BsChartBar],
      html: `<bs-chart-bar chart-title="${title}"></bs-chart-bar>`,
    });
    const canvas = getChild(page.root, 'canvas');
    expect(canvas.getAttribute('aria-label')).toBe(title);
  });
  it('renders aria-label on canvas with axis labels', async () => {
    const page = await newSpecPage({
      components: [BsChartBar],
      html: `<bs-chart-bar x-label="${xLabel}" y-label="${yLabel}"></bs-chart-bar>`,
    });
    const canvas = getChild(page.root, 'canvas');
    expect(canvas.getAttribute('aria-label')).toBe(`${yLabel} / ${xLabel}`);
  });
  it('renders a legend as figcaption, shown by default', async () => {
    const page = await newSpecPage({
      components: [BsChartBar],
      html: `<bs-chart-bar></bs-chart-bar>`,
    });
    const legend = getChild(page.root, 'figcaption');
    expect(legend).not.toHaveAttribute('data-hidden');
  });
  it('renders a hidden legend if showLegend is false', async () => {
    const page = await newSpecPage({
      components: [BsChartBar],
      html: `<bs-chart-bar show-legend="false"></bs-chart-bar>`,
    });
    const legend = getChild(page.root, 'figcaption');
    expect(legend).toHaveAttribute('data-hidden');
  });
  /**
   * Chart.js is throwing an error here, causing the test to bail.
   * Most likely related to canvas element, ctx.
   * May not be possible to do this without puppeteer / e2e.
   * Needs further investigation.
  * */
  it.skip('renders a legend with correct labels', async () => {
    const page = await newSpecPage({
      components: [BsChartBar],
      html: `<bs-chart-bar x-label="${xLabel}" y-label="${yLabel}"></bs-chart-bar>`,
    });
    page.root.data = datasets;
    page.root.dataIdxLabels = datapointLabels;
    await page.waitForChanges();
    const legendList = getChild(page.root, 'figcaption ul');
    const legendItems = legendList.querySelectorAll('li');
    expect(legendItems.length).toBeTruthy();
    expect(legendItems.length).toBe(datapointLabels.length);
  });
});
function getChild(component, selector) {
  return component.shadowRoot.querySelector(selector);
}
//# sourceMappingURL=bs-chart-bar.spec.js.map
