import { faker } from '@faker-js/faker';
import { newSpecPage } from '@stencil/core/testing';
import { queryByText } from '@testing-library/dom';
import { BsBadge } from '../bs-badge';
const content = faker.random.words();
const max = faker.datatype.number();
const count = faker.datatype.number({ max });
const label = faker.random.words();
describe('bs-badge', () => {
  it('renders slotted content', async () => {
    const page = await newSpecPage({
      components: [BsBadge],
      html: `<bs-badge>${content}</bs-badge>`,
    });
    expect(queryByText(page.root, content)).toBeTruthy();
  });
  it('handles color prop by setting the data-badge-color attribute', async () => {
    const page = await newSpecPage({
      components: [BsBadge],
      html: `<bs-badge color="blue">${content}</bs-badge>`,
    });
    const badge = page.root;
    expect(badge.getAttribute('data-badge-color')).toBe('blue');
    badge.color = 'white';
    await page.waitForChanges();
    expect(badge.getAttribute('data-badge-color')).toBe('white');
  });
  describe('handles count, countMax, and dot props by', () => {
    it('setting the data-count attribute', async () => {
      const page = await newSpecPage({
        components: [BsBadge],
        html: `<bs-badge count="${count}" count-max="${max}">${content}</bs-badge>`,
      });
      const badge = page.root;
      expect(badge.getAttribute('data-count')).toBe(count.toString());
    });
    it('enforcing countMax by formatting the data-count attribute value', async () => {
      const page = await newSpecPage({
        components: [BsBadge],
        html: `<bs-badge count="${max + 1}" count-max="${max}">${content}</bs-badge>`,
      });
      const badge = page.root;
      expect(badge.getAttribute('data-count')).toBe(max.toString() + "+");
    });
    it('only applies the .bs-badge class if dot or count are truthy', async () => {
      const page = await newSpecPage({
        components: [BsBadge],
        html: `<bs-badge>${content}</bs-badge>`,
      });
      const badge = page.root;
      expect(page.body.querySelector('.bs-badge')).toBeFalsy();
      badge.count = 1;
      await page.waitForChanges();
      expect(page.body.querySelector('.bs-badge')).toBeTruthy();
      badge.count = undefined;
      await page.waitForChanges();
      expect(page.body.querySelector('.bs-badge')).toBeFalsy();
      badge.dot = true;
      await page.waitForChanges();
      expect(page.body.querySelector('.bs-badge')).toBeTruthy();
      badge.dot = false;
      await page.waitForChanges();
      expect(page.body.querySelector('.bs-badge')).toBeFalsy();
    });
  });
  it('handles the showZero prop by setting data-show-zero', async () => {
    const page = await newSpecPage({
      components: [BsBadge],
      html: `<bs-badge show-zero="true">${content}</bs-badge>`,
    });
    const badge = page.root;
    expect(badge).toHaveAttribute('data-show-zero');
    badge.showZero = false;
    await page.waitForChanges();
    expect(badge).not.toHaveAttribute('data-show-zero');
  });
  it('handles the position prop by setting data-position', async () => {
    const page = await newSpecPage({
      components: [BsBadge],
      html: `<bs-badge position="left">${content}</bs-badge>`,
    });
    const badge = page.root;
    expect(badge.getAttribute('data-position')).toBe('left');
    badge.position = undefined;
    await page.waitForChanges();
    expect(badge.getAttribute('data-position')).toBeFalsy();
    badge.position = 'right';
    await page.waitForChanges();
    expect(badge.getAttribute('data-position')).toBe('right');
  });
  it('handles the label prop by formatting a readable aria-label', async () => {
    const page = await newSpecPage({
      components: [BsBadge],
      html: `<bs-badge
        count="${count}"
        count-max="${max}"
        label="${label}"
      >
        ${content}
      </bs-badge>`,
    });
    const badge = page.root;
    const countFmt = ct => ct > max ? max + '+' : ct;
    const expectedLabel = ct => `${content}, ${countFmt(ct)} ${label}${ct != 1 ? 's' : ''}`;
    expect(badge.getAttribute('aria-label')).toBe(expectedLabel(count));
    badge.count = undefined;
    await page.waitForChanges();
    expect(badge.getAttribute('aria-label')).toBe(content);
    badge.dot = true;
    await page.waitForChanges();
    expect(badge.getAttribute('aria-label')).toBe(`${content}, ${label}s`);
  });
});
//# sourceMappingURL=bs-badge.spec.js.map
