diff options
Diffstat (limited to 'spec/frontend/projects')
3 files changed, 103 insertions, 0 deletions
diff --git a/spec/frontend/projects/commits/components/author_select_spec.js b/spec/frontend/projects/commits/components/author_select_spec.js index 60d36597fda..23b4cccd92c 100644 --- a/spec/frontend/projects/commits/components/author_select_spec.js +++ b/spec/frontend/projects/commits/components/author_select_spec.js @@ -65,6 +65,8 @@ describe('Author Select', () => { describe('user is searching via "filter by commit message"', () => { it('disables dropdown container', () => { + // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details + // eslint-disable-next-line no-restricted-syntax wrapper.setData({ hasSearchParam: true }); return wrapper.vm.$nextTick().then(() => { @@ -73,6 +75,8 @@ describe('Author Select', () => { }); it('has correct tooltip message', () => { + // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details + // eslint-disable-next-line no-restricted-syntax wrapper.setData({ hasSearchParam: true }); return wrapper.vm.$nextTick().then(() => { @@ -83,6 +87,8 @@ describe('Author Select', () => { }); it('disables dropdown', () => { + // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details + // eslint-disable-next-line no-restricted-syntax wrapper.setData({ hasSearchParam: false }); return wrapper.vm.$nextTick().then(() => { @@ -103,6 +109,8 @@ describe('Author Select', () => { }); it('displays the current selected author', () => { + // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details + // eslint-disable-next-line no-restricted-syntax wrapper.setData({ currentAuthor }); return wrapper.vm.$nextTick().then(() => { @@ -156,6 +164,8 @@ describe('Author Select', () => { isChecked: true, }; + // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details + // eslint-disable-next-line no-restricted-syntax wrapper.setData({ currentAuthor }); return wrapper.vm.$nextTick().then(() => { diff --git a/spec/frontend/projects/compare/components/revision_dropdown_legacy_spec.js b/spec/frontend/projects/compare/components/revision_dropdown_legacy_spec.js index 38e13dc5462..eb80d57fb3c 100644 --- a/spec/frontend/projects/compare/components/revision_dropdown_legacy_spec.js +++ b/spec/frontend/projects/compare/components/revision_dropdown_legacy_spec.js @@ -101,6 +101,8 @@ describe('RevisionDropdown component', () => { const findGlDropdownItems = () => wrapper.findAll(GlDropdownItem); const findFirstGlDropdownItem = () => findGlDropdownItems().at(0); + // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details + // eslint-disable-next-line no-restricted-syntax wrapper.setData({ branches: ['some-branch'] }); await wrapper.vm.$nextTick(); diff --git a/spec/frontend/projects/project_find_file_spec.js b/spec/frontend/projects/project_find_file_spec.js new file mode 100644 index 00000000000..9c1000039b1 --- /dev/null +++ b/spec/frontend/projects/project_find_file_spec.js @@ -0,0 +1,91 @@ +import MockAdapter from 'axios-mock-adapter'; +import $ from 'jquery'; +import { TEST_HOST } from 'helpers/test_constants'; +import { sanitize } from '~/lib/dompurify'; +import axios from '~/lib/utils/axios_utils'; +import ProjectFindFile from '~/projects/project_find_file'; + +jest.mock('~/lib/dompurify', () => ({ + addHook: jest.fn(), + sanitize: jest.fn((val) => val), +})); + +const BLOB_URL_TEMPLATE = `${TEST_HOST}/namespace/project/blob/main`; +const FILE_FIND_URL = `${TEST_HOST}/namespace/project/files/main?format=json`; +const FIND_TREE_URL = `${TEST_HOST}/namespace/project/tree/main`; +const TEMPLATE = `<div class="file-finder-holder tree-holder js-file-finder" data-blob-url-template="${BLOB_URL_TEMPLATE}" data-file-find-url="${FILE_FIND_URL}" data-find-tree-url="${FIND_TREE_URL}"> + <input class="file-finder-input" id="file_find" /> + <div class="tree-content-holder"> + <div class="table-holder"> + <table class="files-slider tree-table"> + <tbody /> + </table> + </div> + </div> +</div>`; + +describe('ProjectFindFile', () => { + let element; + let mock; + + const getProjectFindFileInstance = () => + new ProjectFindFile(element, { + url: FILE_FIND_URL, + treeUrl: FIND_TREE_URL, + blobUrlTemplate: BLOB_URL_TEMPLATE, + }); + + const findFiles = () => + element + .find('.tree-table tr') + .toArray() + .map((el) => ({ + text: el.textContent, + href: el.querySelector('a').href, + })); + + const files = [ + { path: 'fileA.txt', escaped: 'fileA.txt' }, + { path: 'fileB.txt', escaped: 'fileB.txt' }, + { path: 'fi#leC.txt', escaped: 'fi%23leC.txt' }, + { path: 'folderA/fileD.txt', escaped: 'folderA/fileD.txt' }, + { path: 'folder#B/fileE.txt', escaped: 'folder%23B/fileE.txt' }, + { path: 'folde?rC/fil#F.txt', escaped: 'folde%3FrC/fil%23F.txt' }, + ]; + + beforeEach((done) => { + // Create a mock adapter for stubbing axios API requests + mock = new MockAdapter(axios); + + element = $(TEMPLATE); + mock.onGet(FILE_FIND_URL).replyOnce( + 200, + files.map((x) => x.path), + ); + getProjectFindFileInstance(); // This triggers a load / axios call + subsequent render in the constructor + + setImmediate(done); + }); + + afterEach(() => { + // Reset the mock adapter + mock.restore(); + sanitize.mockClear(); + }); + + it('loads and renders elements from remote server', () => { + expect(findFiles()).toEqual( + files.map(({ path, escaped }) => ({ + text: path, + href: `${BLOB_URL_TEMPLATE}/${escaped}`, + })), + ); + }); + + it('sanitizes search text', () => { + const searchText = element.find('.file-finder-input').val(); + + expect(sanitize).toHaveBeenCalledTimes(1); + expect(sanitize).toHaveBeenCalledWith(searchText); + }); +}); |