2017-04-13 12:50:40 -04:00
|
|
|
/* eslint-disable no-new */
|
2018-03-09 15:18:59 -05:00
|
|
|
|
2018-01-26 04:19:03 -05:00
|
|
|
import MockAdapter from 'axios-mock-adapter';
|
2021-02-14 13:09:20 -05:00
|
|
|
import $ from 'jquery';
|
2020-10-08 08:08:31 -04:00
|
|
|
import { setTestTimeout } from 'helpers/timeout';
|
2021-07-22 05:08:22 -04:00
|
|
|
import { BlobViewer } from '~/blob/viewer/index';
|
2018-01-26 04:19:03 -05:00
|
|
|
import axios from '~/lib/utils/axios_utils';
|
2017-04-13 12:50:40 -04:00
|
|
|
|
2021-07-12 17:09:24 -04:00
|
|
|
const execImmediately = (callback) => {
|
|
|
|
callback();
|
|
|
|
};
|
|
|
|
|
2017-04-26 05:19:09 -04:00
|
|
|
describe('Blob viewer', () => {
|
|
|
|
let blob;
|
2018-01-26 04:19:03 -05:00
|
|
|
let mock;
|
|
|
|
|
2020-03-10 08:08:16 -04:00
|
|
|
const jQueryMock = {
|
|
|
|
tooltip: jest.fn(),
|
|
|
|
};
|
|
|
|
|
2020-10-08 08:08:31 -04:00
|
|
|
setTestTimeout(2000);
|
|
|
|
|
2017-04-13 12:50:40 -04:00
|
|
|
beforeEach(() => {
|
2022-01-18 19:12:04 -05:00
|
|
|
window.gon.features = { refactorBlobViewer: false }; // This file is based on the old (non-refactored) blob viewer
|
2021-07-12 17:09:24 -04:00
|
|
|
jest.spyOn(window, 'requestIdleCallback').mockImplementation(execImmediately);
|
2020-03-10 08:08:16 -04:00
|
|
|
$.fn.extend(jQueryMock);
|
2018-01-26 04:19:03 -05:00
|
|
|
mock = new MockAdapter(axios);
|
|
|
|
|
2020-10-08 08:08:31 -04:00
|
|
|
loadFixtures('blob/show_readme.html');
|
2017-04-13 12:50:40 -04:00
|
|
|
$('#modal-upload-blob').remove();
|
|
|
|
|
2021-12-10 07:10:18 -05:00
|
|
|
mock.onGet(/blob\/.+\/README\.md/).reply(200, {
|
2018-01-26 04:19:03 -05:00
|
|
|
html: '<div>testing</div>',
|
2017-04-13 12:50:40 -04:00
|
|
|
});
|
2018-01-26 04:19:03 -05:00
|
|
|
|
2020-10-08 08:08:31 -04:00
|
|
|
blob = new BlobViewer();
|
2017-04-13 12:50:40 -04:00
|
|
|
});
|
|
|
|
|
|
|
|
afterEach(() => {
|
2018-01-26 04:19:03 -05:00
|
|
|
mock.restore();
|
2018-06-15 11:58:27 -04:00
|
|
|
window.location.hash = '';
|
2017-04-13 12:50:40 -04:00
|
|
|
});
|
|
|
|
|
2022-02-11 10:14:00 -05:00
|
|
|
it('loads source file after switching views', async () => {
|
2017-04-21 14:33:48 -04:00
|
|
|
document.querySelector('.js-blob-viewer-switch-btn[data-viewer="simple"]').click();
|
2017-04-13 12:50:40 -04:00
|
|
|
|
2022-02-11 10:14:00 -05:00
|
|
|
await axios.waitForAll();
|
2017-04-13 12:50:40 -04:00
|
|
|
|
2022-02-11 10:14:00 -05:00
|
|
|
expect(
|
|
|
|
document
|
|
|
|
.querySelector('.js-blob-viewer-switch-btn[data-viewer="simple"]')
|
|
|
|
.classList.contains('hidden'),
|
|
|
|
).toBeFalsy();
|
2017-04-13 12:50:40 -04:00
|
|
|
});
|
|
|
|
|
2022-02-11 10:14:00 -05:00
|
|
|
it('loads source file when line number is in hash', async () => {
|
2018-06-15 11:58:27 -04:00
|
|
|
window.location.hash = '#L1';
|
2017-04-13 12:50:40 -04:00
|
|
|
|
|
|
|
new BlobViewer();
|
|
|
|
|
2022-02-11 10:14:00 -05:00
|
|
|
await axios.waitForAll();
|
2017-04-13 12:50:40 -04:00
|
|
|
|
2022-02-11 10:14:00 -05:00
|
|
|
expect(
|
|
|
|
document
|
|
|
|
.querySelector('.js-blob-viewer-switch-btn[data-viewer="simple"]')
|
|
|
|
.classList.contains('hidden'),
|
|
|
|
).toBeFalsy();
|
2017-04-13 12:50:40 -04:00
|
|
|
});
|
|
|
|
|
2020-03-10 08:08:16 -04:00
|
|
|
it('doesnt reload file if already loaded', () => {
|
2020-10-08 08:08:31 -04:00
|
|
|
const asyncClick = async () => {
|
|
|
|
document.querySelector('.js-blob-viewer-switch-btn[data-viewer="simple"]').click();
|
2019-11-12 10:06:26 -05:00
|
|
|
|
2020-10-08 08:08:31 -04:00
|
|
|
await axios.waitForAll();
|
|
|
|
};
|
2019-11-12 10:06:26 -05:00
|
|
|
|
2020-03-10 08:08:16 -04:00
|
|
|
return asyncClick()
|
2018-01-26 04:19:03 -05:00
|
|
|
.then(() => asyncClick())
|
2017-04-13 12:50:40 -04:00
|
|
|
.then(() => {
|
2022-05-11 17:08:09 -04:00
|
|
|
expect(document.querySelector('.blob-viewer[data-type="simple"]').dataset.loaded).toBe(
|
|
|
|
'true',
|
|
|
|
);
|
2017-04-13 12:50:40 -04:00
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('copy blob button', () => {
|
2017-05-18 16:53:15 -04:00
|
|
|
let copyButton;
|
2021-02-25 10:11:34 -05:00
|
|
|
let copyButtonTooltip;
|
2017-05-18 16:53:15 -04:00
|
|
|
|
|
|
|
beforeEach(() => {
|
|
|
|
copyButton = document.querySelector('.js-copy-blob-source-btn');
|
2021-02-25 10:11:34 -05:00
|
|
|
copyButtonTooltip = document.querySelector('.js-copy-blob-source-btn-tooltip');
|
2017-05-18 16:53:15 -04:00
|
|
|
});
|
|
|
|
|
2017-04-13 12:50:40 -04:00
|
|
|
it('disabled on load', () => {
|
2018-10-17 03:13:26 -04:00
|
|
|
expect(copyButton.classList.contains('disabled')).toBeTruthy();
|
2017-04-13 12:50:40 -04:00
|
|
|
});
|
|
|
|
|
|
|
|
it('has tooltip when disabled', () => {
|
2021-02-25 10:11:34 -05:00
|
|
|
expect(copyButtonTooltip.getAttribute('title')).toBe(
|
2019-11-12 10:06:26 -05:00
|
|
|
'Switch to the source to copy the file contents',
|
|
|
|
);
|
2017-04-13 12:50:40 -04:00
|
|
|
});
|
|
|
|
|
2017-05-18 16:53:15 -04:00
|
|
|
it('is blurred when clicked and disabled', () => {
|
2020-03-10 08:08:16 -04:00
|
|
|
jest.spyOn(copyButton, 'blur').mockImplementation(() => {});
|
2017-05-18 16:53:15 -04:00
|
|
|
|
|
|
|
copyButton.click();
|
|
|
|
|
|
|
|
expect(copyButton.blur).toHaveBeenCalled();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('is not blurred when clicked and not disabled', () => {
|
2020-03-10 08:08:16 -04:00
|
|
|
jest.spyOn(copyButton, 'blur').mockImplementation(() => {});
|
2017-05-18 16:53:15 -04:00
|
|
|
|
|
|
|
copyButton.classList.remove('disabled');
|
|
|
|
copyButton.click();
|
|
|
|
|
|
|
|
expect(copyButton.blur).not.toHaveBeenCalled();
|
|
|
|
});
|
|
|
|
|
2022-02-11 10:14:00 -05:00
|
|
|
it('enables after switching to simple view', async () => {
|
2017-04-21 14:33:48 -04:00
|
|
|
document.querySelector('.js-blob-viewer-switch-btn[data-viewer="simple"]').click();
|
2017-04-13 12:50:40 -04:00
|
|
|
|
2022-02-11 10:14:00 -05:00
|
|
|
await axios.waitForAll();
|
2017-04-13 12:50:40 -04:00
|
|
|
|
2022-02-11 10:14:00 -05:00
|
|
|
expect(copyButton.classList.contains('disabled')).toBeFalsy();
|
2017-04-13 12:50:40 -04:00
|
|
|
});
|
|
|
|
|
2022-02-11 10:14:00 -05:00
|
|
|
it('updates tooltip after switching to simple view', async () => {
|
2017-04-21 14:33:48 -04:00
|
|
|
document.querySelector('.js-blob-viewer-switch-btn[data-viewer="simple"]').click();
|
2017-04-13 12:50:40 -04:00
|
|
|
|
2022-02-11 10:14:00 -05:00
|
|
|
await axios.waitForAll();
|
2017-04-13 12:50:40 -04:00
|
|
|
|
2022-02-11 10:14:00 -05:00
|
|
|
expect(copyButtonTooltip.getAttribute('title')).toBe('Copy file contents');
|
2017-04-13 12:50:40 -04:00
|
|
|
});
|
|
|
|
});
|
2017-04-26 05:19:09 -04:00
|
|
|
|
|
|
|
describe('switchToViewer', () => {
|
|
|
|
it('removes active class from old viewer button', () => {
|
|
|
|
blob.switchToViewer('simple');
|
|
|
|
|
|
|
|
expect(
|
|
|
|
document.querySelector('.js-blob-viewer-switch-btn.active[data-viewer="rich"]'),
|
|
|
|
).toBeNull();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('adds active class to new viewer button', () => {
|
|
|
|
const simpleBtn = document.querySelector('.js-blob-viewer-switch-btn[data-viewer="simple"]');
|
|
|
|
|
2020-03-10 08:08:16 -04:00
|
|
|
jest.spyOn(simpleBtn, 'blur').mockImplementation(() => {});
|
2017-04-26 05:19:09 -04:00
|
|
|
|
|
|
|
blob.switchToViewer('simple');
|
|
|
|
|
2020-12-03 07:09:39 -05:00
|
|
|
expect(simpleBtn.classList.contains('selected')).toBeTruthy();
|
2018-10-09 14:03:09 -04:00
|
|
|
|
2017-04-26 05:19:09 -04:00
|
|
|
expect(simpleBtn.blur).toHaveBeenCalled();
|
|
|
|
});
|
|
|
|
|
2020-10-08 08:08:31 -04:00
|
|
|
it('makes request for initial view', () => {
|
|
|
|
expect(mock.history).toMatchObject({
|
|
|
|
get: [{ url: expect.stringMatching(/README\.md\?.*viewer=rich/) }],
|
|
|
|
});
|
2017-04-26 05:19:09 -04:00
|
|
|
});
|
|
|
|
|
2020-10-08 08:08:31 -04:00
|
|
|
describe.each`
|
|
|
|
views
|
|
|
|
${['simple']}
|
|
|
|
${['simple', 'rich']}
|
|
|
|
`('when view switches to $views', ({ views }) => {
|
|
|
|
beforeEach(async () => {
|
2020-12-23 16:10:24 -05:00
|
|
|
views.forEach((view) => blob.switchToViewer(view));
|
2020-10-08 08:08:31 -04:00
|
|
|
await axios.waitForAll();
|
|
|
|
});
|
2017-04-26 05:19:09 -04:00
|
|
|
|
2020-10-08 08:08:31 -04:00
|
|
|
it('sends 1 AJAX request for new view', async () => {
|
|
|
|
expect(mock.history).toMatchObject({
|
|
|
|
get: [
|
|
|
|
{ url: expect.stringMatching(/README\.md\?.*viewer=rich/) },
|
|
|
|
{ url: expect.stringMatching(/README\.md\?.*viewer=simple/) },
|
|
|
|
],
|
|
|
|
});
|
|
|
|
});
|
2017-04-26 05:19:09 -04:00
|
|
|
});
|
|
|
|
});
|
2017-04-13 12:50:40 -04:00
|
|
|
});
|