import { shallowMount, createLocalVue } from "@vue/test-utils";
import LabelContentSplit from "@/components/common/LabelContentSplit.vue";
import Vuex from "vuex";
import numeral from "numeral";

describe("LabelContentSplit.vue", () => {
  let state: any;
  let store: any;

  const localVue = createLocalVue();
  localVue.use(Vuex);

  beforeEach(() => {
    state = {
      darkMode: false
    };
    store = new Vuex.Store({
      modules: {
        general: {
          namespaced: true,
          state
        }
      }
    });
  });

  it("renders props when passed", () => {
    const label = "Price Impact";
    const value = numeral(0.03).format("0.0000%");
    const wrapper = shallowMount(LabelContentSplit, {
      propsData: { label, value },
      store,
      localVue
    });
    expect(wrapper.text()).toMatch(label);
    expect(wrapper.text()).toMatch(value);
  });

  it("displays tooltip icon and popover when passed", () => {
    const tooltip = "Tooltip";
    const wrapper = shallowMount(LabelContentSplit, {
      propsData: { tooltip },
      store,
      localVue
    });
    expect(wrapper.find("#popover-target").exists()).toBe(true);
    expect(wrapper.text()).toMatch(tooltip);
  });

  it("should not displays value while loading", () => {
    const value = numeral(0.03).format("0.0000%");
    const wrapper = shallowMount(LabelContentSplit, {
      propsData: { value, loading: true },
      store,
      localVue
    });
    expect(wrapper.text()).not.toMatch(value);
  });

  it("displays red text when isAlert prop has passed", () => {
    const value = numeral(0.03).format("0.0000%");
    const wrapper = shallowMount(LabelContentSplit, {
      propsData: { value, isAlert: true },
      store,
      localVue
    });
    const span = wrapper.findAll("span").at(1);
    expect(span.text()).toBe(value);
    expect(span.element.classList.contains("text-red")).toBe(true);
  });
});