import MockAdapter from 'axios-mock-adapter'; import $ from 'jquery'; import { TEST_HOST } from 'helpers/test_constants'; import sanitize from 'sanitize-html'; import ProjectFindFile from '~/project_find_file'; import axios from '~/lib/utils/axios_utils'; jest.mock('sanitize-html', () => jest.fn(val => val)); const BLOB_URL_TEMPLATE = `${TEST_HOST}/namespace/project/blob/master`; const FILE_FIND_URL = `${TEST_HOST}/namespace/project/files/master?format=json`; const FIND_TREE_URL = `${TEST_HOST}/namespace/project/tree/master`; const TEMPLATE = `
`; 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); }); });