import { newSpecPage } from '@stencil/core/testing';
import { BsToastHeader } from '../bs-toast-header';
import { faker } from '@faker-js/faker';
import { queryByText } from '@testing-library/dom';
describe('bs-toast-header', () => {
  describe('Test rendering', () => {
    let title;
    beforeEach(() => {
      title = faker.random.word();
    });
    it('renders', async () => {
      const page = await newSpecPage({
        components: [BsToastHeader],
        html: `<bs-toast-header>${title}</bs-toast-header>`,
      });
      const component = page.root.querySelector('.bs-toast-header');
      expect(queryByText(component, title));
    });
    // data-variant = undefined
    it('renders with undefined data-variant', async () => {
      const page = await newSpecPage({
        components: [BsToastHeader],
        html: `<bs-toast-header>${title}</bs-toast-header>`,
      });
      const component = page.root.querySelector('.bs-toast-header');
      expect(component.getAttribute('data-variant')).toBeNull();
    });
    // data-variant = warning
    it('renders with "warning" data-variant', async () => {
      const page = await newSpecPage({
        components: [BsToastHeader],
        html: `<bs-toast-header variant="warning">${title}</bs-toast-header>`,
      });
      const component = page.root.querySelector('.bs-toast-header');
      expect(component.getAttribute('data-variant')).toBe('warning');
    });
    // data-variant = positive
    it('renders with "positive" data-variant', async () => {
      const page = await newSpecPage({
        components: [BsToastHeader],
        html: `<bs-toast-header variant="positive">${title}</bs-toast-header>`,
      });
      const component = page.root.querySelector('.bs-toast-header');
      expect(component.getAttribute('data-variant')).toBe('positive');
    });
    // data-variant = negative
    it('renders with "negative" data-variant', async () => {
      const page = await newSpecPage({
        components: [BsToastHeader],
        html: `<bs-toast-header variant="negative">${title}</bs-toast-header>`,
      });
      const component = page.root.querySelector('.bs-toast-header');
      expect(component.getAttribute('data-variant')).toBe('negative');
    });
  });
  describe('Test component class logic', () => {
    let comp;
    beforeEach(() => {
      comp = new BsToastHeader();
    });
    describe('get icon', () => {
      // warning
      it('should return a warning icon when warning variant', () => {
        comp.variant = 'warning';
        expect(JSON.stringify(comp.icon)).toContain('bs-icon-warning');
      });
      // positive
      it('should return a positive icon when positive variant', () => {
        comp.variant = 'positive';
        expect(JSON.stringify(comp.icon)).toContain('bs-icon-thumbs-up-stroke');
      });
      // negative
      it('should return negative icon when negative variant', () => {
        comp.variant = 'negative';
        expect(JSON.stringify(comp.icon)).toContain('bs-icon-warning');
      });
      // base
      it('should return base icon when no variant given', () => {
        comp.variant = undefined;
        expect(JSON.stringify(comp.icon)).toContain('bs-icon-circle-exclamation');
      });
    });
  });
});
//# sourceMappingURL=bs-toast-header.spec.js.map
