debian-mirror-gitlab/spec/frontend/repository/components/table/index_spec.js

149 lines
3.2 KiB
JavaScript
Raw Normal View History

2020-11-24 15:15:51 +05:30
import { GlDeprecatedSkeletonLoading as GlSkeletonLoading, GlButton } from '@gitlab/ui';
2021-03-11 19:13:27 +05:30
import { shallowMount } from '@vue/test-utils';
2022-04-04 11:22:00 +05:30
import { nextTick } from 'vue';
2019-09-04 21:01:54 +05:30
import Table from '~/repository/components/table/index.vue';
2019-12-26 22:10:19 +05:30
import TableRow from '~/repository/components/table/row.vue';
2019-09-04 21:01:54 +05:30
let vm;
let $apollo;
2019-12-26 22:10:19 +05:30
const MOCK_BLOBS = [
{
id: '123abc',
sha: '123abc',
flatPath: 'blob',
name: 'blob.md',
type: 'blob',
2020-10-24 23:57:45 +05:30
webPath: '/blob',
2019-12-26 22:10:19 +05:30
},
{
id: '124abc',
sha: '124abc',
flatPath: 'blob2',
name: 'blob2.md',
type: 'blob',
webUrl: 'http://test.com',
},
2020-07-28 23:09:34 +05:30
{
id: '125abc',
sha: '125abc',
flatPath: 'blob3',
name: 'blob3.md',
type: 'blob',
webUrl: 'http://test.com',
mode: '120000',
},
2019-12-26 22:10:19 +05:30
];
2021-11-18 22:05:49 +05:30
const MOCK_COMMITS = [
{
fileName: 'blob.md',
type: 'blob',
commit: {
message: 'Updated blob.md',
},
},
{
fileName: 'blob2.md',
type: 'blob',
commit: {
message: 'Updated blob2.md',
},
},
{
fileName: 'blob3.md',
type: 'blob',
commit: {
message: 'Updated blob3.md',
},
},
];
function factory({ path, isLoading = false, hasMore = true, entries = {}, commits = [] }) {
2019-09-04 21:01:54 +05:30
vm = shallowMount(Table, {
propsData: {
path,
2019-12-26 22:10:19 +05:30
isLoading,
entries,
2020-11-24 15:15:51 +05:30
hasMore,
2021-11-18 22:05:49 +05:30
commits,
2019-09-04 21:01:54 +05:30
},
mocks: {
$apollo,
},
2021-11-18 22:05:49 +05:30
provide: {
glFeatures: { lazyLoadCommits: true },
},
2019-09-04 21:01:54 +05:30
});
}
describe('Repository table component', () => {
afterEach(() => {
vm.destroy();
});
it.each`
path | ref
2021-06-08 01:23:25 +05:30
${'/'} | ${'main'}
${'app/assets'} | ${'main'}
2019-09-04 21:01:54 +05:30
${'/'} | ${'test'}
2022-04-04 11:22:00 +05:30
`('renders table caption for $ref in $path', async ({ path, ref }) => {
2019-12-26 22:10:19 +05:30
factory({ path });
2019-09-04 21:01:54 +05:30
2022-03-02 08:16:31 +05:30
// setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
// eslint-disable-next-line no-restricted-syntax
2019-09-04 21:01:54 +05:30
vm.setData({ ref });
2022-04-04 11:22:00 +05:30
await nextTick();
expect(vm.find('.table').attributes('aria-label')).toEqual(
`Files, directories, and submodules in the path ${path} for commit reference ${ref}`,
);
2019-09-04 21:01:54 +05:30
});
it('shows loading icon', () => {
2019-12-26 22:10:19 +05:30
factory({ path: '/', isLoading: true });
2019-09-04 21:01:54 +05:30
2019-12-26 22:10:19 +05:30
expect(vm.find(GlSkeletonLoading).exists()).toBe(true);
2019-09-04 21:01:54 +05:30
});
2019-12-26 22:10:19 +05:30
it('renders table rows', () => {
factory({
path: '/',
entries: {
blobs: MOCK_BLOBS,
},
2021-11-18 22:05:49 +05:30
commits: MOCK_COMMITS,
2019-09-04 21:01:54 +05:30
});
2020-07-28 23:09:34 +05:30
const rows = vm.findAll(TableRow);
expect(rows.length).toEqual(3);
expect(rows.at(2).attributes().mode).toEqual('120000');
2021-11-18 22:05:49 +05:30
expect(rows.at(2).props().rowNumber).toBe(2);
expect(rows.at(2).props().commitInfo).toEqual(MOCK_COMMITS[2]);
2019-09-04 21:01:54 +05:30
});
2020-11-24 15:15:51 +05:30
describe('Show more button', () => {
const showMoreButton = () => vm.find(GlButton);
it.each`
hasMore | expectButtonToExist
${true} | ${true}
${false} | ${false}
`('renders correctly', ({ hasMore, expectButtonToExist }) => {
factory({ path: '/', hasMore });
expect(showMoreButton().exists()).toBe(expectButtonToExist);
});
it('when is clicked, emits showMore event', async () => {
factory({ path: '/' });
showMoreButton().vm.$emit('click');
2022-04-04 11:22:00 +05:30
await nextTick();
2020-11-24 15:15:51 +05:30
expect(vm.emitted('showMore')).toHaveLength(1);
});
});
2019-09-04 21:01:54 +05:30
});