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 ; let store ; 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 ) ; } ) ; } ) ;