Commit 2313f1cb authored by Natalia Tepluhina's avatar Natalia Tepluhina

Merge branch 'xanf-vtu-v1-subscriptions' into 'master'

Upgrading VTU to v1: Remove deprecated `methods` from components/checkout

See merge request gitlab-org/gitlab!50498
parents f4b18186 d955b6da
......@@ -8,10 +8,11 @@ import createState from './state';
Vue.use(Vuex);
export default (initialState = {}) =>
new Vuex.Store({
state: createState(initialState),
actions,
getters,
mutations,
});
export const getStoreConfig = (initialState = {}) => ({
state: createState(initialState),
actions,
getters,
mutations,
});
export default (initialState = {}) => new Vuex.Store(getStoreConfig(initialState));
import { mount, createLocalVue } from '@vue/test-utils';
import { mount } from '@vue/test-utils';
import Vue, { nextTick } from 'vue';
import Vuex from 'vuex';
import Component from 'ee/subscriptions/new/components/checkout/billing_address.vue';
import Step from 'ee/subscriptions/new/components/checkout/step.vue';
import createStore from 'ee/subscriptions/new/store';
import { getStoreConfig } from 'ee/subscriptions/new/store';
import * as types from 'ee/subscriptions/new/store/mutation_types';
describe('Billing Address', () => {
const localVue = createLocalVue();
localVue.use(Vuex);
Vue.use(Vuex);
describe('Billing Address', () => {
let store;
let wrapper;
const methodMocks = {
const actionMocks = {
fetchCountries: jest.fn(),
fetchStates: jest.fn(),
};
const createComponent = () => {
const { actions, ...storeConfig } = getStoreConfig();
store = new Vuex.Store({
...storeConfig,
actions: { ...actions, ...actionMocks },
});
wrapper = mount(Component, {
localVue,
store,
methods: methodMocks,
});
};
beforeEach(() => {
store = createStore();
createComponent();
});
......@@ -36,7 +39,7 @@ describe('Billing Address', () => {
describe('mounted', () => {
it('should load the countries', () => {
expect(methodMocks.fetchCountries).toHaveBeenCalled();
expect(actionMocks.fetchCountries).toHaveBeenCalled();
});
});
......@@ -55,12 +58,11 @@ describe('Billing Address', () => {
expect(countrySelect().html()).toContain('<option value="NL">Netherlands</option>');
});
it('should fetch states when selecting a country', () => {
it('should fetch states when selecting a country', async () => {
countrySelect().trigger('change');
await nextTick();
return localVue.nextTick().then(() => {
expect(methodMocks.fetchStates).toHaveBeenCalled();
});
expect(actionMocks.fetchStates).toHaveBeenCalled();
});
});
......@@ -78,36 +80,32 @@ describe('Billing Address', () => {
expect(isStepValid()).toBe(true);
});
it('should be invalid when country is undefined', () => {
it('should be invalid when country is undefined', async () => {
store.commit(types.UPDATE_COUNTRY, null);
await nextTick();
return localVue.nextTick().then(() => {
expect(isStepValid()).toBe(false);
});
expect(isStepValid()).toBe(false);
});
it('should be invalid when streetAddressLine1 is undefined', () => {
it('should be invalid when streetAddressLine1 is undefined', async () => {
store.commit(types.UPDATE_STREET_ADDRESS_LINE_ONE, null);
await nextTick();
return localVue.nextTick().then(() => {
expect(isStepValid()).toBe(false);
});
expect(isStepValid()).toBe(false);
});
it('should be invalid when city is undefined', () => {
it('should be invalid when city is undefined', async () => {
store.commit(types.UPDATE_CITY, null);
await nextTick();
return localVue.nextTick().then(() => {
expect(isStepValid()).toBe(false);
});
expect(isStepValid()).toBe(false);
});
it('should be invalid when zipCode is undefined', () => {
it('should be invalid when zipCode is undefined', async () => {
store.commit(types.UPDATE_ZIP_CODE, null);
await nextTick();
return localVue.nextTick().then(() => {
expect(isStepValid()).toBe(false);
});
expect(isStepValid()).toBe(false);
});
});
......
......@@ -2,7 +2,7 @@ import { GlLoadingIcon } from '@gitlab/ui';
import { shallowMount, createLocalVue } from '@vue/test-utils';
import Vuex from 'vuex';
import Component from 'ee/subscriptions/new/components/checkout/zuora.vue';
import createStore from 'ee/subscriptions/new/store';
import { getStoreConfig } from 'ee/subscriptions/new/store';
import * as types from 'ee/subscriptions/new/store/mutation_types';
describe('Zuora', () => {
......@@ -12,21 +12,30 @@ describe('Zuora', () => {
let store;
let wrapper;
const methodMocks = {
loadZuoraScript: jest.fn(),
renderZuoraIframe: jest.fn(),
const actionMocks = {
startLoadingZuoraScript: jest.fn(),
fetchPaymentFormParams: jest.fn(),
zuoraIframeRendered: jest.fn(),
paymentFormSubmitted: jest.fn(),
};
const createComponent = (props = {}) => {
const { actions, ...storeConfig } = getStoreConfig();
store = new Vuex.Store({
...storeConfig,
actions: {
...actions,
...actionMocks,
},
});
wrapper = shallowMount(Component, {
propsData: {
active: true,
...props,
},
localVue,
sync: false,
store,
methods: methodMocks,
});
};
......@@ -34,18 +43,24 @@ describe('Zuora', () => {
const findZuoraPayment = () => wrapper.find('#zuora_payment');
beforeEach(() => {
store = createStore();
window.Z = {
runAfterRender(fn) {
return Promise.resolve().then(fn);
},
render() {},
};
});
afterEach(() => {
delete window.Z;
wrapper.destroy();
});
describe('mounted', () => {
it('should call loadZuoraScript', () => {
it('starts loading zuora script', () => {
createComponent();
expect(methodMocks.loadZuoraScript).toHaveBeenCalled();
expect(actionMocks.startLoadingZuoraScript).toHaveBeenCalled();
});
});
......@@ -97,12 +112,12 @@ describe('Zuora', () => {
it('is called when the paymentFormParams are updated', () => {
createComponent();
expect(methodMocks.renderZuoraIframe).not.toHaveBeenCalled();
expect(actionMocks.zuoraIframeRendered).not.toHaveBeenCalled();
store.commit(types.UPDATE_PAYMENT_FORM_PARAMS, {});
return localVue.nextTick().then(() => {
expect(methodMocks.renderZuoraIframe).toHaveBeenCalled();
expect(actionMocks.zuoraIframeRendered).toHaveBeenCalled();
});
});
});
......
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