Commit f80415d4 authored by Paul Slaughter's avatar Paul Slaughter Committed by Alex Buijs

Clean zuora component spec

- New store in beforeEach
- Only one component instance
- Only testing component interface
Signed-off-by: default avatarAlex Buijs <abuijs@gitlab.com>
parent dc0a92be
......@@ -9,26 +9,32 @@ describe('Zuora', () => {
const localVue = createLocalVue();
localVue.use(Vuex);
let store;
let wrapper;
const store = createStore();
const methodMocks = {
loadZuoraScript: jest.fn(),
renderZuoraIframe: jest.fn(),
};
const createComponent = (opts = {}) => {
const createComponent = (props = {}) => {
wrapper = shallowMount(Component, {
propsData: {
active: true,
...props,
},
localVue,
sync: false,
store,
...opts,
methods: methodMocks,
});
};
const methodMocks = {
loadZuoraScript: jest.fn(),
renderZuoraIframe: jest.fn(),
};
const findLoading = () => wrapper.find(GlLoadingIcon);
const findZuoraPayment = () => wrapper.find('#zuora_payment');
beforeEach(() => {
createComponent({ methods: methodMocks, propsData: { active: true } });
store = createStore();
});
afterEach(() => {
......@@ -37,75 +43,70 @@ describe('Zuora', () => {
describe('mounted', () => {
it('should call loadZuoraScript', () => {
createComponent();
expect(methodMocks.loadZuoraScript).toHaveBeenCalled();
});
});
describe('when active and loading', () => {
it('the loading indicator should not be shown', () => {
expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
describe('when active', () => {
beforeEach(() => {
createComponent();
});
it('the zuora_payment selector should be visible', () => {
expect(wrapper.find('#zuora_payment').element.style.display).toEqual('none');
it('shows the loading icon', () => {
expect(findLoading().exists()).toBe(true);
});
});
describe('when active and not loading', () => {
beforeEach(() => {
wrapper.vm.toggleLoading();
it('the zuora_payment selector should not be visible', () => {
expect(findZuoraPayment().element.style.display).toEqual('none');
});
it('the loading indicator should not be shown', () => {
expect(wrapper.find(GlLoadingIcon).exists()).toBe(false);
});
describe.each`
desc | commitType | commitPayload
${'when paymentMethodId is updated'} | ${types.UPDATE_PAYMENT_METHOD_ID} | ${'foo'}
${'when creditCardDetails are updated'} | ${types.UPDATE_CREDIT_CARD_DETAILS} | ${{}}
`('$desc', ({ commitType, commitPayload }) => {
beforeEach(() => {
store.commit(commitType, commitPayload);
it('the zuora_payment selector should be visible', () => {
expect(wrapper.find('#zuora_payment').element.style.display).toEqual('');
});
});
return localVue.nextTick();
});
describe('not active and not loading', () => {
beforeEach(() => {
createComponent({ methods: methodMocks, propsData: { active: false } });
wrapper.vm.toggleLoading();
});
it('does not show loading icon', () => {
expect(findLoading().exists()).toBe(false);
});
it('the zuora_payment selector should not be visible', () => {
expect(wrapper.find('#zuora_payment').element.style.display).toEqual('none');
it('the zuora_payment selector should be visible', () => {
expect(findZuoraPayment().element.style.display).toEqual('');
});
});
});
describe('toggleLoading', () => {
let spy;
describe('when not active and not loading', () => {
beforeEach(() => {
spy = jest.spyOn(wrapper.vm, 'toggleLoading');
});
afterEach(() => {
spy.mockClear();
});
createComponent({ active: false });
it('is called when the paymentMethodId is updated', () => {
store.commit(types.UPDATE_PAYMENT_METHOD_ID, 'foo');
return localVue.nextTick().then(() => {
expect(spy).toHaveBeenCalled();
});
return localVue.nextTick();
});
it('is called when the creditCardDetails are updated', () => {
store.commit(types.UPDATE_CREDIT_CARD_DETAILS, {});
it('does not show loading icon', () => {
expect(findLoading().exists()).toBe(false);
});
return localVue.nextTick().then(() => {
expect(spy).toHaveBeenCalled();
});
it('the zuora_payment selector should not be visible', () => {
expect(wrapper.find('#zuora_payment').element.style.display).toEqual('none');
});
});
describe('renderZuoraIframe', () => {
it('is called when the paymentFormParams are updated', () => {
createComponent();
expect(methodMocks.renderZuoraIframe).not.toHaveBeenCalled();
store.commit(types.UPDATE_PAYMENT_FORM_PARAMS, {});
return localVue.nextTick().then(() => {
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment