8620532a05
This contains also multiple fixes to make it work. The following is a non-exhaustive list. When @Prop default value is a callback, then it is called instead of set verbatim. This means, when you want a default value to be a callback, then it needs to be `default: () => () => X`. jest does not yet properly support WebWorkers, hence the code introduces an indirection to provide the worker URL. This in turn required removing the global "store" dependency from the tests. As a consequence the new NotificatorPlugin takes store as a dependency. And many of the tests are adjusted to not import store directly. Moved StoreModule definition to avoid initializing the global store. Some of the router code was moved into store. We can later figure out how to structure it better and move it back. bip39 needs explicit fallbacks for some of the dependencies. Fixes to timer mocking. jest supports it natively. Remove sinon dependency. jest provides all the functionality we need. Change-Id: I7af3599390c63ce9f99dbd0b1e0870e9f8ca994d
111 lines
3.9 KiB
TypeScript
111 lines
3.9 KiB
TypeScript
// Copyright (C) 2020 Storj Labs, Inc.
|
|
// See LICENSE for copying information.
|
|
|
|
import Vuex from 'vuex';
|
|
|
|
import PaymentMethods from '@/components/account/billing/paymentMethods/PaymentMethods.vue';
|
|
|
|
import { appStateModule } from '@/store/modules/appState';
|
|
import { makeNotificationsModule } from '@/store/modules/notifications';
|
|
import { makePaymentsModule, PAYMENTS_MUTATIONS } from '@/store/modules/payments';
|
|
import { makeProjectsModule } from '@/store/modules/projects';
|
|
import { makeUsersModule, USER_MUTATIONS } from '@/store/modules/users';
|
|
import { CreditCard } from '@/types/payments';
|
|
import { User } from '@/types/users';
|
|
import { NotificatorPlugin } from '@/utils/plugins/notificator';
|
|
import { createLocalVue, mount, shallowMount } from '@vue/test-utils';
|
|
|
|
import { PaymentsMock } from '../../../mock/api/payments';
|
|
import { ProjectsApiMock } from '../../../mock/api/projects';
|
|
import { UsersApiMock } from '../../../mock/api/users';
|
|
|
|
const localVue = createLocalVue();
|
|
|
|
localVue.use(Vuex);
|
|
|
|
const paymentsApi = new PaymentsMock();
|
|
const paymentsModule = makePaymentsModule(paymentsApi);
|
|
const usersApi = new UsersApiMock();
|
|
const usersModule = makeUsersModule(usersApi);
|
|
const projectsApi = new ProjectsApiMock();
|
|
const projectsModule = makeProjectsModule(projectsApi);
|
|
const notificationsModule = makeNotificationsModule();
|
|
const store = new Vuex.Store({ modules: { usersModule, paymentsModule, projectsModule, appStateModule, notificationsModule }});
|
|
store.commit(USER_MUTATIONS.SET_USER, new User('id', 'name', 'short', 'test@test.test', 'partner', 'pass'));
|
|
|
|
localVue.use(new NotificatorPlugin(store));
|
|
|
|
const ANIMATION_COMPLETE_TIME = 600;
|
|
|
|
describe('PaymentMethods', () => {
|
|
it('renders correctly without card', async (): Promise<void> => {
|
|
const wrapper = mount(PaymentMethods, {
|
|
store,
|
|
localVue,
|
|
});
|
|
|
|
await wrapper.setData({ areCardsFetching: false });
|
|
|
|
expect(wrapper).toMatchSnapshot();
|
|
});
|
|
|
|
it('renders correctly after add card and cancel click', async () => {
|
|
const wrapper = shallowMount(PaymentMethods, {
|
|
store,
|
|
localVue,
|
|
});
|
|
|
|
await wrapper.setData({ areCardsFetching: false });
|
|
|
|
await wrapper.find('.add-card-button').trigger('click');
|
|
|
|
await new Promise<void>(resolve => {
|
|
setTimeout(() => {
|
|
expect(wrapper).toMatchSnapshot();
|
|
wrapper.find('.payment-methods-area__functional-area__button-area__cancel').trigger('click');
|
|
|
|
setTimeout(() => {
|
|
expect(wrapper).toMatchSnapshot();
|
|
resolve();
|
|
}, ANIMATION_COMPLETE_TIME);
|
|
}, ANIMATION_COMPLETE_TIME);
|
|
});
|
|
});
|
|
|
|
it('renders correctly after add STORJ and cancel click', async () => {
|
|
const wrapper = mount(PaymentMethods, {
|
|
store,
|
|
localVue,
|
|
});
|
|
|
|
await wrapper.setData({ areCardsFetching: false });
|
|
|
|
await wrapper.find('.add-storj-button').trigger('click');
|
|
|
|
await new Promise<void>(resolve => {
|
|
setTimeout(() => {
|
|
expect(wrapper).toMatchSnapshot();
|
|
wrapper.find('.payment-methods-area__functional-area__button-area__cancel').trigger('click');
|
|
|
|
setTimeout(() => {
|
|
expect(wrapper).toMatchSnapshot();
|
|
resolve();
|
|
}, ANIMATION_COMPLETE_TIME);
|
|
}, ANIMATION_COMPLETE_TIME);
|
|
});
|
|
});
|
|
|
|
it('renders correctly with card', async (): Promise<void> => {
|
|
const card = new CreditCard('cardId', 12, 2100, 'test', '0000', true);
|
|
store.commit(PAYMENTS_MUTATIONS.SET_CREDIT_CARDS, [card]);
|
|
|
|
const wrapper = mount(PaymentMethods, {
|
|
store,
|
|
localVue,
|
|
});
|
|
|
|
await wrapper.setData({ areCardsFetching: false });
|
|
|
|
expect(wrapper).toMatchSnapshot();
|
|
});
|
|
}); |