debian-mirror-gitlab/spec/frontend/members/components/table/expiration_datepicker_spec.js
2022-04-04 11:22:00 +05:30

170 lines
4.6 KiB
JavaScript

import { GlDatepicker } from '@gitlab/ui';
import { mount } from '@vue/test-utils';
import Vue, { nextTick } from 'vue';
import Vuex from 'vuex';
import { useFakeDate } from 'helpers/fake_date';
import waitForPromises from 'helpers/wait_for_promises';
import ExpirationDatepicker from '~/members/components/table/expiration_datepicker.vue';
import { MEMBER_TYPES } from '~/members/constants';
import { member } from '../../mock_data';
Vue.use(Vuex);
describe('ExpirationDatepicker', () => {
// March 15th, 2020 3:00
useFakeDate(2020, 2, 15, 3);
let wrapper;
let actions;
let resolveUpdateMemberExpiration;
const $toast = {
show: jest.fn(),
};
const createStore = () => {
actions = {
updateMemberExpiration: jest.fn(
() =>
new Promise((resolve) => {
resolveUpdateMemberExpiration = resolve;
}),
),
};
return new Vuex.Store({
modules: {
[MEMBER_TYPES.user]: { namespaced: true, actions },
},
});
};
const createComponent = (propsData = {}) => {
wrapper = mount(ExpirationDatepicker, {
propsData: {
member,
permissions: { canUpdate: true },
...propsData,
},
provide: {
namespace: MEMBER_TYPES.user,
},
store: createStore(),
mocks: {
$toast,
},
});
};
const findInput = () => wrapper.find('input');
const findDatepicker = () => wrapper.find(GlDatepicker);
afterEach(() => {
wrapper.destroy();
});
describe('datepicker input', () => {
it('sets `member.expiresAt` as initial date', async () => {
createComponent({ member: { ...member, expiresAt: '2020-03-17T00:00:00Z' } });
await nextTick();
expect(findInput().element.value).toBe('2020-03-17');
});
});
describe('props', () => {
beforeEach(() => {
createComponent();
});
it('sets `minDate` prop as tomorrow', () => {
expect(findDatepicker().props('minDate').toISOString()).toBe(
new Date('2020-3-16').toISOString(),
);
});
it('sets `target` prop as `null` so datepicker opens on focus', () => {
expect(findDatepicker().props('target')).toBe(null);
});
it("sets `container` prop as `null` so table styles don't affect the datepicker styles", () => {
expect(findDatepicker().props('container')).toBe(null);
});
it('shows clear button', () => {
expect(findDatepicker().props('showClearButton')).toBe(true);
});
});
describe('when datepicker is changed', () => {
beforeEach(async () => {
createComponent();
findDatepicker().vm.$emit('input', new Date('2020-03-17'));
});
it('calls `updateMemberExpiration` Vuex action', () => {
expect(actions.updateMemberExpiration).toHaveBeenCalledWith(expect.any(Object), {
memberId: member.id,
expiresAt: new Date('2020-03-17'),
});
});
it('displays toast when successful', async () => {
resolveUpdateMemberExpiration();
await waitForPromises();
expect($toast.show).toHaveBeenCalledWith('Expiration date updated successfully.');
});
it('disables dropdown while waiting for `updateMemberExpiration` to resolve', async () => {
expect(findDatepicker().props('disabled')).toBe(true);
resolveUpdateMemberExpiration();
await waitForPromises();
expect(findDatepicker().props('disabled')).toBe(false);
});
});
describe('when datepicker is cleared', () => {
beforeEach(async () => {
createComponent();
findInput().setValue('2020-03-17');
await nextTick();
wrapper.find('[data-testid="clear-button"]').trigger('click');
});
it('calls `updateMemberExpiration` Vuex action', () => {
expect(actions.updateMemberExpiration).toHaveBeenCalledWith(expect.any(Object), {
memberId: member.id,
expiresAt: null,
});
});
it('displays toast when successful', async () => {
resolveUpdateMemberExpiration();
await waitForPromises();
expect($toast.show).toHaveBeenCalledWith('Expiration date removed successfully.');
});
it('disables datepicker while waiting for `updateMemberExpiration` to resolve', async () => {
expect(findDatepicker().props('disabled')).toBe(true);
resolveUpdateMemberExpiration();
await waitForPromises();
expect(findDatepicker().props('disabled')).toBe(false);
});
});
describe('when user does not have `canUpdate` permissions', () => {
it('disables datepicker', () => {
createComponent({ permissions: { canUpdate: false } });
expect(findDatepicker().props('disabled')).toBe(true);
});
});
});