Commit ff156d48 authored by Thomas Randolph's avatar Thomas Randolph

Test using the pagination component instead of custom buttons

parent 0ffdf51d
import Vuex from 'vuex'; import Vuex from 'vuex';
import { shallowMount, createLocalVue } from '@vue/test-utils'; import { shallowMount, createLocalVue } from '@vue/test-utils';
import { GlLoadingIcon } from '@gitlab/ui'; import { GlLoadingIcon, GlPagination } from '@gitlab/ui';
import MockAdapter from 'axios-mock-adapter'; import MockAdapter from 'axios-mock-adapter';
import { TEST_HOST } from 'spec/test_constants'; import { TEST_HOST } from 'spec/test_constants';
import Mousetrap from 'mousetrap'; import Mousetrap from 'mousetrap';
...@@ -843,13 +843,16 @@ describe('diffs/components/app', () => { ...@@ -843,13 +843,16 @@ describe('diffs/components/app', () => {
}); });
describe('pagination', () => { describe('pagination', () => {
const fileByFileNav = () => wrapper.find('[data-testid="file-by-file-navigation"]');
const paginator = () => fileByFileNav().find(GlPagination);
it('sets previous button as disabled', () => { it('sets previous button as disabled', () => {
createComponent({ viewDiffsFileByFile: true }, ({ state }) => { createComponent({ viewDiffsFileByFile: true }, ({ state }) => {
state.diffs.diffFiles.push({ file_hash: '123' }, { file_hash: '312' }); state.diffs.diffFiles.push({ file_hash: '123' }, { file_hash: '312' });
}); });
expect(wrapper.find('[data-testid="singleFilePrevious"]').props('disabled')).toBe(true); expect(paginator().attributes('prevpage')).toBe(undefined);
expect(wrapper.find('[data-testid="singleFileNext"]').props('disabled')).toBe(false); expect(paginator().attributes('nextpage')).toBe('2');
}); });
it('sets next button as disabled', () => { it('sets next button as disabled', () => {
...@@ -858,17 +861,17 @@ describe('diffs/components/app', () => { ...@@ -858,17 +861,17 @@ describe('diffs/components/app', () => {
state.diffs.currentDiffFileId = '312'; state.diffs.currentDiffFileId = '312';
}); });
expect(wrapper.find('[data-testid="singleFilePrevious"]').props('disabled')).toBe(false); expect(paginator().attributes('prevpage')).toBe('1');
expect(wrapper.find('[data-testid="singleFileNext"]').props('disabled')).toBe(true); expect(paginator().attributes('nextpage')).toBe(undefined);
}); });
it.each` it.each`
currentDiffFileId | button | index currentDiffFileId | targetFile
${'123'} | ${'singleFileNext'} | ${1} ${'123'} | ${2}
${'312'} | ${'singleFilePrevious'} | ${0} ${'312'} | ${1}
`( `(
'it calls navigateToDiffFileIndex with $index when $button is clicked', 'it calls navigateToDiffFileIndex with $index when $link is clicked',
({ currentDiffFileId, button, index }) => { async ({ currentDiffFileId, targetFile }) => {
createComponent({ viewDiffsFileByFile: true }, ({ state }) => { createComponent({ viewDiffsFileByFile: true }, ({ state }) => {
state.diffs.diffFiles.push({ file_hash: '123' }, { file_hash: '312' }); state.diffs.diffFiles.push({ file_hash: '123' }, { file_hash: '312' });
state.diffs.currentDiffFileId = currentDiffFileId; state.diffs.currentDiffFileId = currentDiffFileId;
...@@ -876,11 +879,11 @@ describe('diffs/components/app', () => { ...@@ -876,11 +879,11 @@ describe('diffs/components/app', () => {
jest.spyOn(wrapper.vm, 'navigateToDiffFileIndex'); jest.spyOn(wrapper.vm, 'navigateToDiffFileIndex');
wrapper.find(`[data-testid="${button}"]`).vm.$emit('click'); paginator().vm.$emit('input', targetFile);
return wrapper.vm.$nextTick().then(() => { await wrapper.vm.$nextTick();
expect(wrapper.vm.navigateToDiffFileIndex).toHaveBeenCalledWith(index);
}); expect(wrapper.vm.navigateToDiffFileIndex).toHaveBeenCalledWith(targetFile - 1);
}, },
); );
}); });
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment