196 lines
5.4 KiB
JavaScript
196 lines
5.4 KiB
JavaScript
import { GlEmptyState, GlLoadingIcon } from '@gitlab/ui';
|
|
import { within } from '@testing-library/dom';
|
|
import { mount, createWrapper } from '@vue/test-utils';
|
|
import Vue from 'vue';
|
|
import Vuex from 'vuex';
|
|
import waitForPromises from 'helpers/wait_for_promises';
|
|
import Api from '~/api';
|
|
import UserListsComponent from '~/user_lists/components/user_lists.vue';
|
|
import UserListsTable from '~/user_lists/components/user_lists_table.vue';
|
|
import createStore from '~/user_lists/store/index';
|
|
import TablePagination from '~/vue_shared/components/pagination/table_pagination.vue';
|
|
import { userList } from '../../feature_flags/mock_data';
|
|
|
|
jest.mock('~/api');
|
|
|
|
Vue.use(Vuex);
|
|
|
|
describe('~/user_lists/components/user_lists.vue', () => {
|
|
const mockProvide = {
|
|
newUserListPath: '/user-lists/new',
|
|
featureFlagsHelpPagePath: '/help/feature-flags',
|
|
errorStateSvgPath: '/assets/illustrations/feature_flag.svg',
|
|
};
|
|
|
|
const mockState = {
|
|
projectId: '1',
|
|
};
|
|
|
|
let wrapper;
|
|
let store;
|
|
|
|
const factory = (provide = mockProvide, fn = mount) => {
|
|
store = createStore(mockState);
|
|
wrapper = fn(UserListsComponent, {
|
|
store,
|
|
provide,
|
|
});
|
|
};
|
|
|
|
const newButton = () => within(wrapper.element).queryAllByText('New user list');
|
|
|
|
afterEach(() => {
|
|
wrapper.destroy();
|
|
wrapper = null;
|
|
});
|
|
|
|
describe('without permissions', () => {
|
|
const provideData = {
|
|
...mockProvide,
|
|
newUserListPath: null,
|
|
};
|
|
|
|
beforeEach(() => {
|
|
Api.fetchFeatureFlagUserLists.mockResolvedValue({ data: [], headers: {} });
|
|
factory(provideData);
|
|
});
|
|
|
|
it('does not render new user list button', () => {
|
|
expect(newButton()).toHaveLength(0);
|
|
});
|
|
});
|
|
|
|
describe('loading state', () => {
|
|
it('renders a loading icon', () => {
|
|
Api.fetchFeatureFlagUserLists.mockReturnValue(new Promise(() => {}));
|
|
|
|
factory();
|
|
|
|
const loadingElement = wrapper.findComponent(GlLoadingIcon);
|
|
|
|
expect(loadingElement.exists()).toBe(true);
|
|
expect(loadingElement.props('label')).toEqual('Loading user lists');
|
|
});
|
|
});
|
|
|
|
describe('successful request', () => {
|
|
describe('without user lists', () => {
|
|
let emptyState;
|
|
|
|
beforeEach(async () => {
|
|
Api.fetchFeatureFlagUserLists.mockResolvedValue({ data: [], headers: {} });
|
|
|
|
factory();
|
|
await waitForPromises();
|
|
await Vue.nextTick();
|
|
|
|
emptyState = wrapper.findComponent(GlEmptyState);
|
|
});
|
|
|
|
it('should render the empty state', async () => {
|
|
expect(emptyState.exists()).toBe(true);
|
|
});
|
|
|
|
it('renders new feature flag button', () => {
|
|
expect(newButton()).not.toHaveLength(0);
|
|
});
|
|
|
|
it('renders generic title', () => {
|
|
const title = createWrapper(
|
|
within(emptyState.element).getByText('Get started with user lists'),
|
|
);
|
|
expect(title.exists()).toBe(true);
|
|
});
|
|
|
|
it('renders generic description', () => {
|
|
const description = createWrapper(
|
|
within(emptyState.element).getByText(
|
|
'User lists allow you to define a set of users to use with Feature Flags.',
|
|
),
|
|
);
|
|
expect(description.exists()).toBe(true);
|
|
});
|
|
});
|
|
|
|
describe('with paginated user lists', () => {
|
|
let table;
|
|
|
|
beforeEach(async () => {
|
|
Api.fetchFeatureFlagUserLists.mockResolvedValue({
|
|
data: [userList],
|
|
headers: {
|
|
'x-next-page': '2',
|
|
'x-page': '1',
|
|
'X-Per-Page': '2',
|
|
'X-Prev-Page': '',
|
|
'X-TOTAL': '37',
|
|
'X-Total-Pages': '5',
|
|
},
|
|
});
|
|
|
|
factory();
|
|
jest.spyOn(store, 'dispatch');
|
|
await Vue.nextTick();
|
|
table = wrapper.findComponent(UserListsTable);
|
|
});
|
|
|
|
it('should render a table with feature flags', () => {
|
|
expect(table.exists()).toBe(true);
|
|
expect(table.props('userLists')).toEqual([userList]);
|
|
});
|
|
|
|
it('renders new feature flag button', () => {
|
|
expect(newButton()).not.toHaveLength(0);
|
|
});
|
|
|
|
describe('pagination', () => {
|
|
let pagination;
|
|
|
|
beforeEach(() => {
|
|
pagination = wrapper.findComponent(TablePagination);
|
|
});
|
|
|
|
it('should render pagination', () => {
|
|
expect(pagination.exists()).toBe(true);
|
|
});
|
|
|
|
it('should make an API request when page is clicked', () => {
|
|
jest.spyOn(store, 'dispatch');
|
|
pagination.vm.change('4');
|
|
|
|
expect(store.dispatch).toHaveBeenCalledWith('setUserListsOptions', {
|
|
page: '4',
|
|
});
|
|
});
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('unsuccessful request', () => {
|
|
beforeEach(async () => {
|
|
Api.fetchFeatureFlagUserLists.mockRejectedValue();
|
|
factory();
|
|
|
|
await Vue.nextTick();
|
|
});
|
|
|
|
it('should render error state', () => {
|
|
const emptyState = wrapper.findComponent(GlEmptyState);
|
|
const title = createWrapper(
|
|
within(emptyState.element).getByText('There was an error fetching the user lists.'),
|
|
);
|
|
expect(title.exists()).toBe(true);
|
|
const description = createWrapper(
|
|
within(emptyState.element).getByText(
|
|
'Try again in a few moments or contact your support team.',
|
|
),
|
|
);
|
|
expect(description.exists()).toBe(true);
|
|
});
|
|
|
|
it('renders new feature flag button', () => {
|
|
expect(newButton()).not.toHaveLength(0);
|
|
});
|
|
});
|
|
});
|