import { newSpecPage } from '@stencil/core/testing';
import { BsTooltip } from '../bs-tooltip';
import { faker } from '@faker-js/faker';
import { fireEvent, queryByText } from '@testing-library/dom';
describe('bs-tooltip', () => {
  describe('Test rendering', () => {
    let content;
    let tooltipId;
    beforeEach(() => {
      content = faker.random.words(3);
      tooltipId = faker.random.alphaNumeric(20);
    });
    it('renders', async () => {
      const page = await newSpecPage({
        components: [BsTooltip],
        html: `
          <bs-tooltip tooltip-id="${tooltipId}" content="${content}">
            <button>Hover Me!</button>
          </bs-tooltip>`,
      });
      const component = page.root.querySelector('.bs-tooltip');
      expect(queryByText(component, content));
      expect(queryByText(component, tooltipId));
    });
    // data-position undefined
    it('renders no data-position when not given', async () => {
      const page = await newSpecPage({
        components: [BsTooltip],
        html: `
          <bs-tooltip tooltip-id="${tooltipId}" content="${content}">
            <button>Hover Me!</button>
          </bs-tooltip>`,
      });
      const component = page.root.querySelector('.bs-tooltip');
      expect(component.getAttribute('data-position')).toBeNull();
    });
    // data-position defined
    it('renders data-position when given', async () => {
      const page = await newSpecPage({
        components: [BsTooltip],
        html: `
          <bs-tooltip tooltip-id="${tooltipId}" content="${content}" position="top">
            <button>Hover Me!</button>
          </bs-tooltip>`,
      });
      const component = page.root.querySelector('.bs-tooltip');
      expect(component.getAttribute('data-position')).toBe('top');
    });
  });
  describe('Test event handling', () => {
    let content;
    let tooltipId;
    beforeEach(() => {
      content = faker.random.words(3);
      tooltipId = faker.random.alphaNumeric(20);
    });
    // on mouse enter
    it('handles onMouseEnter', async () => {
      const page = await newSpecPage({
        components: [BsTooltip],
        html: `
          <bs-tooltip tooltip-id="${tooltipId}" content="${content}" clickable>
            <button>Hover Me!</button>
          </bs-tooltip>`,
      });
      const mockCallback = jest.fn();
      page.rootInstance.handleEnterOrFocus = mockCallback;
      fireEvent.mouseEnter(page.root);
      expect(mockCallback).toHaveBeenCalled();
    });
    // on mouse leave
    it('handles onMouseLeave', async () => {
      const page = await newSpecPage({
        components: [BsTooltip],
        html: `
          <bs-tooltip tooltip-id="${tooltipId}" content="${content}" clickable>
            <button>Hover Me!</button>
          </bs-tooltip>`,
      });
      const mockCallback = jest.fn();
      page.rootInstance.handleLeaveOrFocusOut = mockCallback;
      fireEvent.mouseLeave(page.root);
      expect(mockCallback).toHaveBeenCalled();
    });
    // on focus in
    it('handles onFocusin', async () => {
      const page = await newSpecPage({
        components: [BsTooltip],
        html: `
          <bs-tooltip tooltip-id="${tooltipId}" content="${content}" clickable>
            <button>Hover Me!</button>
          </bs-tooltip>`,
      });
      const mockCallback = jest.fn();
      page.rootInstance.handleEnterOrFocus = mockCallback;
      fireEvent.focusIn(page.root);
      expect(mockCallback).toHaveBeenCalled();
    });
    // on focus out
    it('handles onFocusout', async () => {
      const page = await newSpecPage({
        components: [BsTooltip],
        html: `
          <bs-tooltip tooltip-id="${tooltipId}" content="${content}" clickable>
            <button>Hover Me!</button>
          </bs-tooltip>`,
      });
      const mockCallback = jest.fn();
      page.rootInstance.handleLeaveOrFocusOut = mockCallback;
      fireEvent.focusOut(page.root);
      expect(mockCallback).toHaveBeenCalled();
    });
  });
  describe('Test component class logic', () => {
    let comp;
    beforeEach(() => {
      comp = new BsTooltip();
    });
    describe('handleEscape()', () => {
      it('should flip internal hover/focus/escape states when hovered/focused and escape key', () => {
        comp.isHoverOrFocused = true;
        comp.isEscaped = false;
        comp.handleEscape(new KeyboardEvent('keydown', { key: 'Escape' }));
        expect(comp.isHoverOrFocused).toBe(false);
        expect(comp.isEscaped).toBe(true);
      });
      it('should not flip internal states when hovered/focused and not escape key', () => {
        comp.isHoverOrFocused = true;
        comp.isEscaped = false;
        comp.handleEscape(new KeyboardEvent('keydown', { key: 'Enter' }));
        expect(comp.isHoverOrFocused).toBe(true);
        expect(comp.isEscaped).toBe(false);
      });
      it('should not flip internal states when not hovered/focused and escape key', () => {
        comp.isHoverOrFocused = false;
        comp.isEscaped = false;
        comp.handleEscape(new KeyboardEvent('keydown', { key: 'Escape' }));
        expect(comp.isHoverOrFocused).toBe(false);
        expect(comp.isEscaped).toBe(false);
      });
      it('should not flip internal states when not hovered/focused and not escape key', () => {
        comp.isHoverOrFocused = false;
        comp.isEscaped = false;
        comp.handleEscape(new KeyboardEvent('keydown', { key: 'Enter' }));
        expect(comp.isHoverOrFocused).toBe(false);
        expect(comp.isEscaped).toBe(false);
      });
    });
    describe('getTooltipTextClass()', () => {
      const escapedX = 'bs-tooltip-text escaped-x';
      const escapedY = 'bs-tooltip-text escaped-y';
      const escaped = 'bs-tooltip-text escaped';
      const notEscaped = 'bs-tooltip-text';
      // escaped, pos: undefined
      it('should return escaped-x when position is undefined', () => {
        comp.isEscaped = true;
        comp.position = undefined;
        expect(comp.getTooltipTextClass()).toBe(escapedX);
      });
      // escaped, pos: top
      it('should return escaped-x when position is "top"', () => {
        comp.isEscaped = true;
        comp.position = 'top';
        expect(comp.getTooltipTextClass()).toBe(escapedX);
      });
      // escaped, pos: bottom
      it('should return escaped-x when position is "bottom"', () => {
        comp.isEscaped = true;
        comp.position = 'bottom';
        expect(comp.getTooltipTextClass()).toBe(escapedX);
      });
      // escaped, pos: left
      it('should return escaped-y when position is "left"', () => {
        comp.isEscaped = true;
        comp.position = 'left';
        expect(comp.getTooltipTextClass()).toBe(escapedY);
      });
      // escaped, pos: right
      it('should return escaped-y when position is "right"', () => {
        comp.isEscaped = true;
        comp.position = 'right';
        expect(comp.getTooltipTextClass()).toBe(escapedY);
      });
      // escaped, pos: other (corners)
      it('should return escaped when position is a corner', () => {
        comp.isEscaped = true;
        comp.position = 'top-left';
        expect(comp.getTooltipTextClass()).toBe(escaped);
      });
      // not escaped
      it('should return the base style when not escaped', () => {
        comp.isEscaped = false;
        expect(comp.getTooltipTextClass()).toBe(notEscaped);
      });
    });
  });
});
//# sourceMappingURL=bs-tooltip.spec.js.map
