2021-07-07 12:08:23 +00:00
|
|
|
import { GlEmptyState } from '@gitlab/ui';
|
2021-07-21 15:08:52 +00:00
|
|
|
import { shallowMount, createLocalVue } from '@vue/test-utils';
|
|
|
|
import VueApollo from 'vue-apollo';
|
|
|
|
import createMockApollo from 'helpers/mock_apollo_helper';
|
|
|
|
import waitForPromises from 'helpers/wait_for_promises';
|
|
|
|
import createFlash from '~/flash';
|
2021-07-07 12:08:23 +00:00
|
|
|
|
|
|
|
import PackagesApp from '~/packages_and_registries/package_registry/components/details/app.vue';
|
2021-07-21 15:08:52 +00:00
|
|
|
import PackageTitle from '~/packages_and_registries/package_registry/components/details/package_title.vue';
|
|
|
|
import { FETCH_PACKAGE_DETAILS_ERROR_MESSAGE } from '~/packages_and_registries/package_registry/constants';
|
|
|
|
import getPackageDetails from '~/packages_and_registries/package_registry/graphql/queries/get_package_details.query.graphql';
|
|
|
|
import { packageDetailsQuery, packageData } from '../../mock_data';
|
|
|
|
|
|
|
|
jest.mock('~/flash');
|
|
|
|
|
|
|
|
const localVue = createLocalVue();
|
2021-07-07 12:08:23 +00:00
|
|
|
|
|
|
|
describe('PackagesApp', () => {
|
|
|
|
let wrapper;
|
2021-07-21 15:08:52 +00:00
|
|
|
let apolloProvider;
|
|
|
|
|
|
|
|
function createComponent({ resolver = jest.fn().mockResolvedValue(packageDetailsQuery()) } = {}) {
|
|
|
|
localVue.use(VueApollo);
|
|
|
|
|
|
|
|
const requestHandlers = [[getPackageDetails, resolver]];
|
|
|
|
apolloProvider = createMockApollo(requestHandlers);
|
2021-07-07 12:08:23 +00:00
|
|
|
|
|
|
|
wrapper = shallowMount(PackagesApp, {
|
2021-07-21 15:08:52 +00:00
|
|
|
localVue,
|
|
|
|
apolloProvider,
|
2021-07-07 12:08:23 +00:00
|
|
|
provide: {
|
2021-07-21 15:08:52 +00:00
|
|
|
packageId: '111',
|
|
|
|
titleComponent: 'PackageTitle',
|
2021-07-07 12:08:23 +00:00
|
|
|
projectName: 'projectName',
|
|
|
|
canDelete: 'canDelete',
|
|
|
|
svgPath: 'svgPath',
|
|
|
|
npmPath: 'npmPath',
|
|
|
|
npmHelpPath: 'npmHelpPath',
|
|
|
|
projectListUrl: 'projectListUrl',
|
|
|
|
groupListUrl: 'groupListUrl',
|
|
|
|
},
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2021-07-21 15:08:52 +00:00
|
|
|
const findEmptyState = () => wrapper.findComponent(GlEmptyState);
|
|
|
|
const findPackageTitle = () => wrapper.findComponent(PackageTitle);
|
2021-07-07 12:08:23 +00:00
|
|
|
|
|
|
|
afterEach(() => {
|
|
|
|
wrapper.destroy();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('renders an empty state component', () => {
|
|
|
|
createComponent();
|
|
|
|
|
2021-07-21 15:08:52 +00:00
|
|
|
expect(findEmptyState().exists()).toBe(true);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('renders the app and displays the package title', async () => {
|
|
|
|
createComponent();
|
|
|
|
|
|
|
|
await waitForPromises();
|
|
|
|
|
|
|
|
expect(findPackageTitle().exists()).toBe(true);
|
|
|
|
expect(findPackageTitle().props()).toMatchObject({
|
|
|
|
packageEntity: expect.objectContaining(packageData()),
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it('emits an error message if the load fails', async () => {
|
|
|
|
createComponent({ resolver: jest.fn().mockRejectedValue() });
|
|
|
|
|
|
|
|
await waitForPromises();
|
|
|
|
|
|
|
|
expect(createFlash).toHaveBeenCalledWith(
|
|
|
|
expect.objectContaining({
|
|
|
|
message: FETCH_PACKAGE_DETAILS_ERROR_MESSAGE,
|
|
|
|
}),
|
|
|
|
);
|
2021-07-07 12:08:23 +00:00
|
|
|
});
|
|
|
|
});
|