UNPKG

@gitlab/ui

Version:
122 lines (95 loc) 3.47 kB
import { shallowMount } from '@vue/test-utils'; import GlAnimatedNumber from './animated_number.vue'; import { waitForAnimationFrame } from '~/utils/test_utils'; const duration = 2000; const ACTION_ANIMATED = 'animated'; const ACTION_ANIMATING = 'animating'; describe('GlAnimatedNumber', () => { let wrapper; const createComponent = ({ number = 100, decimalPlaces = 0, animateOnMount = false } = {}) => { wrapper = shallowMount(GlAnimatedNumber, { propsData: { number, decimalPlaces, duration, animateOnMount, }, }); }; const runOutAnimationTimer = async () => { const { vm: { startTime }, } = wrapper; wrapper.setData({ startTime: startTime - duration, }); await waitForAnimationFrame(); }; it('renders the component', () => { createComponent(); expect(wrapper.findComponent(GlAnimatedNumber).exists()).toBe(true); }); describe('when animateOnMount is false', () => { describe.each` withDecimal | number | updatedNumber | decimalPlaces | expectedInitialOnMount | expectedInitialOnUpdate ${false} | ${100} | ${200} | ${0} | ${'100'} | ${'200'} ${true} | ${100.2} | ${200.2} | ${1} | ${'100.2'} | ${'200.2'} `( 'withDecimal === $withDecimal', ({ number, updatedNumber, decimalPlaces, expectedInitialOnMount, expectedInitialOnUpdate, }) => { beforeEach(() => { createComponent({ number, decimalPlaces }); }); it('displays the correct number on mount', async () => { await waitForAnimationFrame(); expect(wrapper.text()).toBe(expectedInitialOnMount); }); it('displays the correct number when updated', async () => { await waitForAnimationFrame(); await wrapper.setProps({ number: updatedNumber }); await runOutAnimationTimer(); expect(wrapper.text()).toBe(expectedInitialOnUpdate); }); } ); }); describe('when animateOnMount is true', () => { describe.each` withDecimal | number | decimalPlaces | expectedInitial ${false} | ${100} | ${0} | ${'0'} ${true} | ${100.2} | ${1} | ${'0.0'} `('withDecimal === $withDecimal', ({ number, decimalPlaces, expectedInitial }) => { beforeEach(() => { createComponent({ number, decimalPlaces, animateOnMount: true }); }); it('displays the correct intial number', () => { expect(wrapper.text()).toBe(expectedInitial); }); it('displays the correct end number', async () => { await runOutAnimationTimer(); expect(wrapper.text()).toBe(`${number}`); }); }); }); describe('animation event emissions', () => { beforeEach(() => { createComponent({ animateOnMount: true }); }); it(`emits ${ACTION_ANIMATING} when the animation starts`, () => { expect(wrapper.emitted(ACTION_ANIMATING)).toHaveLength(1); }); it(`emits ${ACTION_ANIMATED} when the animation completes`, async () => { expect(wrapper.emitted(ACTION_ANIMATED)).toBeUndefined(); await waitForAnimationFrame(); expect(wrapper.emitted(ACTION_ANIMATED)).toBeUndefined(); await runOutAnimationTimer(); expect(wrapper.emitted(ACTION_ANIMATED)).toHaveLength(1); }); }); });