diff options
Diffstat (limited to 'spec/frontend')
135 files changed, 7599 insertions, 196 deletions
diff --git a/spec/frontend/api_spec.js b/spec/frontend/api_spec.js index 6010488d9e0..7004373be0e 100644 --- a/spec/frontend/api_spec.js +++ b/spec/frontend/api_spec.js @@ -412,6 +412,22 @@ describe('Api', () => { }); }); + describe('user counts', () => { + it('fetches single user counts', done => { + const expectedUrl = `${dummyUrlRoot}/api/${dummyApiVersion}/user_counts`; + mock.onGet(expectedUrl).reply(200, { + merge_requests: 4, + }); + + Api.userCounts() + .then(({ data }) => { + expect(data.merge_requests).toBe(4); + }) + .then(done) + .catch(done.fail); + }); + }); + describe('user status', () => { it('fetches single user status', done => { const userId = '123456'; @@ -474,4 +490,27 @@ describe('Api', () => { .catch(done.fail); }); }); + + describe('projectForks', () => { + it('gets forked projects', done => { + const dummyProjectPath = 'gitlab-org/gitlab-ce'; + const expectedUrl = `${dummyUrlRoot}/api/${dummyApiVersion}/projects/${encodeURIComponent( + dummyProjectPath, + )}/forks`; + + jest.spyOn(axios, 'get'); + + mock.onGet(expectedUrl).replyOnce(200, ['fork']); + + Api.projectForks(dummyProjectPath, { visibility: 'private' }) + .then(({ data }) => { + expect(data).toEqual(['fork']); + expect(axios.get).toHaveBeenCalledWith(expectedUrl, { + params: { visibility: 'private' }, + }); + }) + .then(done) + .catch(done.fail); + }); + }); }); diff --git a/spec/frontend/behaviors/markdown/render_metrics_spec.js b/spec/frontend/behaviors/markdown/render_metrics_spec.js new file mode 100644 index 00000000000..6db0eabc16b --- /dev/null +++ b/spec/frontend/behaviors/markdown/render_metrics_spec.js @@ -0,0 +1,37 @@ +import Vue from 'vue'; +import renderMetrics from '~/behaviors/markdown/render_metrics'; +import { TEST_HOST } from 'helpers/test_constants'; + +const originalExtend = Vue.extend; + +describe('Render metrics for Gitlab Flavoured Markdown', () => { + const container = { + Metrics() {}, + }; + + let spyExtend; + + beforeEach(() => { + Vue.extend = () => container.Metrics; + spyExtend = jest.spyOn(Vue, 'extend'); + }); + + afterEach(() => { + Vue.extend = originalExtend; + }); + + it('does nothing when no elements are found', () => { + renderMetrics([]); + + expect(spyExtend).not.toHaveBeenCalled(); + }); + + it('renders a vue component when elements are found', () => { + const element = document.createElement('div'); + element.setAttribute('data-dashboard-url', TEST_HOST); + + renderMetrics([element]); + + expect(spyExtend).toHaveBeenCalled(); + }); +}); diff --git a/spec/frontend/boards/modal_store_spec.js b/spec/frontend/boards/modal_store_spec.js index 4dd27e94d97..5b5ae4b6556 100644 --- a/spec/frontend/boards/modal_store_spec.js +++ b/spec/frontend/boards/modal_store_spec.js @@ -25,7 +25,7 @@ describe('Modal store', () => { }); issue2 = new ListIssue({ title: 'Testing', - id: 1, + id: 2, iid: 2, confidential: false, labels: [], diff --git a/spec/frontend/boards/services/board_service_spec.js b/spec/frontend/boards/services/board_service_spec.js new file mode 100644 index 00000000000..e106c2bf1f1 --- /dev/null +++ b/spec/frontend/boards/services/board_service_spec.js @@ -0,0 +1,551 @@ +import BoardService from '~/boards/services/board_service'; +import { TEST_HOST } from 'helpers/test_constants'; +import AxiosMockAdapter from 'axios-mock-adapter'; +import axios from '~/lib/utils/axios_utils'; +import boardsStore from '~/boards/stores/boards_store'; + +describe('BoardService', () => { + const dummyResponse = "without type checking this doesn't matter"; + const boardId = 'dummy-board-id'; + const endpoints = { + boardsEndpoint: `${TEST_HOST}/boards`, + listsEndpoint: `${TEST_HOST}/lists`, + bulkUpdatePath: `${TEST_HOST}/bulk/update`, + recentBoardsEndpoint: `${TEST_HOST}/recent/boards`, + }; + + let service; + let axiosMock; + + beforeEach(() => { + axiosMock = new AxiosMockAdapter(axios); + boardsStore.setEndpoints({ + ...endpoints, + boardId, + }); + service = new BoardService(); + }); + + describe('all', () => { + it('makes a request to fetch lists', () => { + axiosMock.onGet(endpoints.listsEndpoint).replyOnce(200, dummyResponse); + const expectedResponse = expect.objectContaining({ data: dummyResponse }); + + return expect(service.all()).resolves.toEqual(expectedResponse); + }); + + it('fails for error response', () => { + axiosMock.onGet(endpoints.listsEndpoint).replyOnce(500); + + return expect(service.all()).rejects.toThrow(); + }); + }); + + describe('generateDefaultLists', () => { + const listsEndpointGenerate = `${endpoints.listsEndpoint}/generate.json`; + + it('makes a request to generate default lists', () => { + axiosMock.onPost(listsEndpointGenerate).replyOnce(200, dummyResponse); + const expectedResponse = expect.objectContaining({ data: dummyResponse }); + + return expect(service.generateDefaultLists()).resolves.toEqual(expectedResponse); + }); + + it('fails for error response', () => { + axiosMock.onPost(listsEndpointGenerate).replyOnce(500); + + return expect(service.generateDefaultLists()).rejects.toThrow(); + }); + }); + + describe('createList', () => { + const entityType = 'moorhen'; + const entityId = 'quack'; + const expectedRequest = expect.objectContaining({ + data: JSON.stringify({ list: { [entityType]: entityId } }), + }); + + let requestSpy; + + beforeEach(() => { + requestSpy = jest.fn(); + axiosMock.onPost(endpoints.listsEndpoint).replyOnce(config => requestSpy(config)); + }); + + it('makes a request to create a list', () => { + requestSpy.mockReturnValue([200, dummyResponse]); + const expectedResponse = expect.objectContaining({ data: dummyResponse }); + + return expect(service.createList(entityId, entityType)) + .resolves.toEqual(expectedResponse) + .then(() => { + expect(requestSpy).toHaveBeenCalledWith(expectedRequest); + }); + }); + + it('fails for error response', () => { + requestSpy.mockReturnValue([500]); + + return expect(service.createList(entityId, entityType)) + .rejects.toThrow() + .then(() => { + expect(requestSpy).toHaveBeenCalledWith(expectedRequest); + }); + }); + }); + + describe('updateList', () => { + const id = 'David Webb'; + const position = 'unknown'; + const expectedRequest = expect.objectContaining({ + data: JSON.stringify({ list: { position } }), + }); + + let requestSpy; + + beforeEach(() => { + requestSpy = jest.fn(); + axiosMock.onPut(`${endpoints.listsEndpoint}/${id}`).replyOnce(config => requestSpy(config)); + }); + + it('makes a request to update a list position', () => { + requestSpy.mockReturnValue([200, dummyResponse]); + const expectedResponse = expect.objectContaining({ data: dummyResponse }); + + return expect(service.updateList(id, position)) + .resolves.toEqual(expectedResponse) + .then(() => { + expect(requestSpy).toHaveBeenCalledWith(expectedRequest); + }); + }); + + it('fails for error response', () => { + requestSpy.mockReturnValue([500]); + + return expect(service.updateList(id, position)) + .rejects.toThrow() + .then(() => { + expect(requestSpy).toHaveBeenCalledWith(expectedRequest); + }); + }); + }); + + describe('destroyList', () => { + const id = '-42'; + + let requestSpy; + + beforeEach(() => { + requestSpy = jest.fn(); + axiosMock + .onDelete(`${endpoints.listsEndpoint}/${id}`) + .replyOnce(config => requestSpy(config)); + }); + + it('makes a request to delete a list', () => { + requestSpy.mockReturnValue([200, dummyResponse]); + const expectedResponse = expect.objectContaining({ data: dummyResponse }); + + return expect(service.destroyList(id)) + .resolves.toEqual(expectedResponse) + .then(() => { + expect(requestSpy).toHaveBeenCalled(); + }); + }); + + it('fails for error response', () => { + requestSpy.mockReturnValue([500]); + + return expect(service.destroyList(id)) + .rejects.toThrow() + .then(() => { + expect(requestSpy).toHaveBeenCalled(); + }); + }); + }); + + describe('getIssuesForList', () => { + const id = 'TOO-MUCH'; + const url = `${endpoints.listsEndpoint}/${id}/issues?id=${id}`; + + it('makes a request to fetch list issues', () => { + axiosMock.onGet(url).replyOnce(200, dummyResponse); + const expectedResponse = expect.objectContaining({ data: dummyResponse }); + + return expect(service.getIssuesForList(id)).resolves.toEqual(expectedResponse); + }); + + it('makes a request to fetch list issues with filter', () => { + const filter = { algal: 'scrubber' }; + axiosMock.onGet(`${url}&algal=scrubber`).replyOnce(200, dummyResponse); + const expectedResponse = expect.objectContaining({ data: dummyResponse }); + + return expect(service.getIssuesForList(id, filter)).resolves.toEqual(expectedResponse); + }); + + it('fails for error response', () => { + axiosMock.onGet(url).replyOnce(500); + + return expect(service.getIssuesForList(id)).rejects.toThrow(); + }); + }); + + describe('moveIssue', () => { + const urlRoot = 'potato'; + const id = 'over 9000'; + const fromListId = 'left'; + const toListId = 'right'; + const moveBeforeId = 'up'; + const moveAfterId = 'down'; + const expectedRequest = expect.objectContaining({ + data: JSON.stringify({ + from_list_id: fromListId, + to_list_id: toListId, + move_before_id: moveBeforeId, + move_after_id: moveAfterId, + }), + }); + + let requestSpy; + + beforeAll(() => { + global.gon.relative_url_root = urlRoot; + }); + + afterAll(() => { + delete global.gon.relative_url_root; + }); + + beforeEach(() => { + requestSpy = jest.fn(); + axiosMock + .onPut(`${urlRoot}/-/boards/${boardId}/issues/${id}`) + .replyOnce(config => requestSpy(config)); + }); + + it('makes a request to move an issue between lists', () => { + requestSpy.mockReturnValue([200, dummyResponse]); + const expectedResponse = expect.objectContaining({ data: dummyResponse }); + + return expect(service.moveIssue(id, fromListId, toListId, moveBeforeId, moveAfterId)) + .resolves.toEqual(expectedResponse) + .then(() => { + expect(requestSpy).toHaveBeenCalledWith(expectedRequest); + }); + }); + + it('fails for error response', () => { + requestSpy.mockReturnValue([500]); + + return expect(service.moveIssue(id, fromListId, toListId, moveBeforeId, moveAfterId)) + .rejects.toThrow() + .then(() => { + expect(requestSpy).toHaveBeenCalledWith(expectedRequest); + }); + }); + }); + + describe('newIssue', () => { + const id = 'not-creative'; + const issue = { some: 'issue data' }; + const url = `${endpoints.listsEndpoint}/${id}/issues`; + const expectedRequest = expect.objectContaining({ + data: JSON.stringify({ + issue, + }), + }); + + let requestSpy; + + beforeEach(() => { + requestSpy = jest.fn(); + axiosMock.onPost(url).replyOnce(config => requestSpy(config)); + }); + + it('makes a request to create a new issue', () => { + requestSpy.mockReturnValue([200, dummyResponse]); + const expectedResponse = expect.objectContaining({ data: dummyResponse }); + + return expect(service.newIssue(id, issue)) + .resolves.toEqual(expectedResponse) + .then(() => { + expect(requestSpy).toHaveBeenCalledWith(expectedRequest); + }); + }); + + it('fails for error response', () => { + requestSpy.mockReturnValue([500]); + + return expect(service.newIssue(id, issue)) + .rejects.toThrow() + .then(() => { + expect(requestSpy).toHaveBeenCalledWith(expectedRequest); + }); + }); + }); + + describe('getBacklog', () => { + const urlRoot = 'deep'; + const url = `${urlRoot}/-/boards/${boardId}/issues.json?not=relevant`; + const requestParams = { + not: 'relevant', + }; + + beforeAll(() => { + global.gon.relative_url_root = urlRoot; + }); + + afterAll(() => { + delete global.gon.relative_url_root; + }); + + it('makes a request to fetch backlog', () => { + axiosMock.onGet(url).replyOnce(200, dummyResponse); + const expectedResponse = expect.objectContaining({ data: dummyResponse }); + + return expect(service.getBacklog(requestParams)).resolves.toEqual(expectedResponse); + }); + + it('fails for error response', () => { + axiosMock.onGet(url).replyOnce(500); + + return expect(service.getBacklog(requestParams)).rejects.toThrow(); + }); + }); + + describe('bulkUpdate', () => { + const issueIds = [1, 2, 3]; + const extraData = { moar: 'data' }; + const expectedRequest = expect.objectContaining({ + data: JSON.stringify({ + update: { + ...extraData, + issuable_ids: '1,2,3', + }, + }), + }); + + let requestSpy; + + beforeEach(() => { + requestSpy = jest.fn(); + axiosMock.onPost(endpoints.bulkUpdatePath).replyOnce(config => requestSpy(config)); + }); + + it('makes a request to create a list', () => { + requestSpy.mockReturnValue([200, dummyResponse]); + const expectedResponse = expect.objectContaining({ data: dummyResponse }); + + return expect(service.bulkUpdate(issueIds, extraData)) + .resolves.toEqual(expectedResponse) + .then(() => { + expect(requestSpy).toHaveBeenCalledWith(expectedRequest); + }); + }); + + it('fails for error response', () => { + requestSpy.mockReturnValue([500]); + + return expect(service.bulkUpdate(issueIds, extraData)) + .rejects.toThrow() + .then(() => { + expect(requestSpy).toHaveBeenCalledWith(expectedRequest); + }); + }); + }); + + describe('getIssueInfo', () => { + const dummyEndpoint = `${TEST_HOST}/some/where`; + + it('makes a request to the given endpoint', () => { + axiosMock.onGet(dummyEndpoint).replyOnce(200, dummyResponse); + const expectedResponse = expect.objectContaining({ data: dummyResponse }); + + return expect(BoardService.getIssueInfo(dummyEndpoint)).resolves.toEqual(expectedResponse); + }); + + it('fails for error response', () => { + axiosMock.onGet(dummyEndpoint).replyOnce(500); + + return expect(BoardService.getIssueInfo(dummyEndpoint)).rejects.toThrow(); + }); + }); + + describe('toggleIssueSubscription', () => { + const dummyEndpoint = `${TEST_HOST}/some/where`; + + it('makes a request to the given endpoint', () => { + axiosMock.onPost(dummyEndpoint).replyOnce(200, dummyResponse); + const expectedResponse = expect.objectContaining({ data: dummyResponse }); + + return expect(BoardService.toggleIssueSubscription(dummyEndpoint)).resolves.toEqual( + expectedResponse, + ); + }); + + it('fails for error response', () => { + axiosMock.onPost(dummyEndpoint).replyOnce(500); + + return expect(BoardService.toggleIssueSubscription(dummyEndpoint)).rejects.toThrow(); + }); + }); + + describe('allBoards', () => { + const url = `${endpoints.boardsEndpoint}.json`; + + it('makes a request to fetch all boards', () => { + axiosMock.onGet(url).replyOnce(200, dummyResponse); + const expectedResponse = expect.objectContaining({ data: dummyResponse }); + + return expect(service.allBoards()).resolves.toEqual(expectedResponse); + }); + + it('fails for error response', () => { + axiosMock.onGet(url).replyOnce(500); + + return expect(service.allBoards()).rejects.toThrow(); + }); + }); + + describe('recentBoards', () => { + const url = `${endpoints.recentBoardsEndpoint}.json`; + + it('makes a request to fetch all boards', () => { + axiosMock.onGet(url).replyOnce(200, dummyResponse); + const expectedResponse = expect.objectContaining({ data: dummyResponse }); + + return expect(service.recentBoards()).resolves.toEqual(expectedResponse); + }); + + it('fails for error response', () => { + axiosMock.onGet(url).replyOnce(500); + + return expect(service.recentBoards()).rejects.toThrow(); + }); + }); + + describe('createBoard', () => { + const labelIds = ['first label', 'second label']; + const assigneeId = 'as sign ee'; + const milestoneId = 'vegetable soup'; + const board = { + labels: labelIds.map(id => ({ id })), + assignee: { id: assigneeId }, + milestone: { id: milestoneId }, + }; + + describe('for existing board', () => { + const id = 'skate-board'; + const url = `${endpoints.boardsEndpoint}/${id}.json`; + const expectedRequest = expect.objectContaining({ + data: JSON.stringify({ + board: { + ...board, + id, + label_ids: labelIds, + assignee_id: assigneeId, + milestone_id: milestoneId, + }, + }), + }); + + let requestSpy; + + beforeEach(() => { + requestSpy = jest.fn(); + axiosMock.onPut(url).replyOnce(config => requestSpy(config)); + }); + + it('makes a request to update the board', () => { + requestSpy.mockReturnValue([200, dummyResponse]); + const expectedResponse = expect.objectContaining({ data: dummyResponse }); + + return expect( + service.createBoard({ + ...board, + id, + }), + ) + .resolves.toEqual(expectedResponse) + .then(() => { + expect(requestSpy).toHaveBeenCalledWith(expectedRequest); + }); + }); + + it('fails for error response', () => { + requestSpy.mockReturnValue([500]); + + return expect( + service.createBoard({ + ...board, + id, + }), + ) + .rejects.toThrow() + .then(() => { + expect(requestSpy).toHaveBeenCalledWith(expectedRequest); + }); + }); + }); + + describe('for new board', () => { + const url = `${endpoints.boardsEndpoint}.json`; + const expectedRequest = expect.objectContaining({ + data: JSON.stringify({ + board: { + ...board, + label_ids: labelIds, + assignee_id: assigneeId, + milestone_id: milestoneId, + }, + }), + }); + + let requestSpy; + + beforeEach(() => { + requestSpy = jest.fn(); + axiosMock.onPost(url).replyOnce(config => requestSpy(config)); + }); + + it('makes a request to create a new board', () => { + requestSpy.mockReturnValue([200, dummyResponse]); + const expectedResponse = expect.objectContaining({ data: dummyResponse }); + + return expect(service.createBoard(board)) + .resolves.toEqual(expectedResponse) + .then(() => { + expect(requestSpy).toHaveBeenCalledWith(expectedRequest); + }); + }); + + it('fails for error response', () => { + requestSpy.mockReturnValue([500]); + + return expect(service.createBoard(board)) + .rejects.toThrow() + .then(() => { + expect(requestSpy).toHaveBeenCalledWith(expectedRequest); + }); + }); + }); + }); + + describe('deleteBoard', () => { + const id = 'capsized'; + const url = `${endpoints.boardsEndpoint}/${id}.json`; + + it('makes a request to delete a boards', () => { + axiosMock.onDelete(url).replyOnce(200, dummyResponse); + const expectedResponse = expect.objectContaining({ data: dummyResponse }); + + return expect(service.deleteBoard({ id })).resolves.toEqual(expectedResponse); + }); + + it('fails for error response', () => { + axiosMock.onDelete(url).replyOnce(500); + + return expect(service.deleteBoard({ id })).rejects.toThrow(); + }); + }); +}); diff --git a/spec/frontend/branches/components/__snapshots__/divergence_graph_spec.js.snap b/spec/frontend/branches/components/__snapshots__/divergence_graph_spec.js.snap new file mode 100644 index 00000000000..511c027dbc2 --- /dev/null +++ b/spec/frontend/branches/components/__snapshots__/divergence_graph_spec.js.snap @@ -0,0 +1,37 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Branch divergence graph component renders ahead and behind count 1`] = ` +<div + class="divergence-graph px-2 d-none d-md-block" + title="10 commits behind master, 10 commits ahead" +> + <graphbar-stub + count="10" + maxcommits="100" + position="left" + /> + + <div + class="graph-separator pull-left mt-1" + /> + + <graphbar-stub + count="10" + maxcommits="100" + position="right" + /> +</div> +`; + +exports[`Branch divergence graph component renders distance count 1`] = ` +<div + class="divergence-graph px-2 d-none d-md-block" + title="More than 900 commits different with master" +> + <graphbar-stub + count="900" + maxcommits="100" + position="full" + /> +</div> +`; diff --git a/spec/frontend/branches/components/divergence_graph_spec.js b/spec/frontend/branches/components/divergence_graph_spec.js new file mode 100644 index 00000000000..b54b2ceb233 --- /dev/null +++ b/spec/frontend/branches/components/divergence_graph_spec.js @@ -0,0 +1,67 @@ +import { shallowMount } from '@vue/test-utils'; +import DivergenceGraph from '~/branches/components/divergence_graph.vue'; +import GraphBar from '~/branches/components/graph_bar.vue'; + +let vm; + +function factory(propsData = {}) { + vm = shallowMount(DivergenceGraph, { propsData }); +} + +describe('Branch divergence graph component', () => { + afterEach(() => { + vm.destroy(); + }); + + it('renders ahead and behind count', () => { + factory({ + defaultBranch: 'master', + aheadCount: 10, + behindCount: 10, + maxCommits: 100, + }); + + expect(vm.findAll(GraphBar).length).toBe(2); + expect(vm.element).toMatchSnapshot(); + }); + + it('sets title for ahead and behind count', () => { + factory({ + defaultBranch: 'master', + aheadCount: 10, + behindCount: 10, + maxCommits: 100, + }); + + expect(vm.attributes('title')).toBe('10 commits behind master, 10 commits ahead'); + }); + + it('renders distance count', () => { + factory({ + defaultBranch: 'master', + aheadCount: 0, + behindCount: 0, + distance: 900, + maxCommits: 100, + }); + + expect(vm.findAll(GraphBar).length).toBe(1); + expect(vm.element).toMatchSnapshot(); + }); + + it.each` + distance | titleText + ${900} | ${'900'} + ${1100} | ${'999+'} + `('sets title for $distance as $titleText', ({ distance, titleText }) => { + factory({ + defaultBranch: 'master', + aheadCount: 0, + behindCount: 0, + distance, + maxCommits: 100, + }); + + expect(vm.attributes('title')).toBe(`More than ${titleText} commits different with master`); + }); +}); diff --git a/spec/frontend/branches/components/graph_bar_spec.js b/spec/frontend/branches/components/graph_bar_spec.js new file mode 100644 index 00000000000..61c051b49c6 --- /dev/null +++ b/spec/frontend/branches/components/graph_bar_spec.js @@ -0,0 +1,89 @@ +import { shallowMount } from '@vue/test-utils'; +import GraphBar from '~/branches/components/graph_bar.vue'; + +let vm; + +function factory(propsData = {}) { + vm = shallowMount(GraphBar, { propsData }); +} + +describe('Branch divergence graph bar component', () => { + afterEach(() => { + vm.destroy(); + }); + + it.each` + position | positionClass + ${'left'} | ${'position-right-0'} + ${'right'} | ${'position-left-0'} + ${'full'} | ${'position-left-0'} + `( + 'sets position class as $positionClass for position $position', + ({ position, positionClass }) => { + factory({ + position, + count: 10, + maxCommits: 100, + }); + + expect(vm.find('.js-graph-bar').classes()).toContain(positionClass); + }, + ); + + it.each` + position | textAlignmentClass + ${'left'} | ${'text-right'} + ${'right'} | ${'text-left'} + ${'full'} | ${'text-center'} + `( + 'sets text alignment class as $textAlignmentClass for position $position', + ({ position, textAlignmentClass }) => { + factory({ + position, + count: 10, + maxCommits: 100, + }); + + expect(vm.find('.js-graph-count').classes()).toContain(textAlignmentClass); + }, + ); + + it.each` + position | roundedClass + ${'left'} | ${'rounded-left'} + ${'right'} | ${'rounded-right'} + ${'full'} | ${'rounded'} + `('sets rounded class as $roundedClass for position $position', ({ position, roundedClass }) => { + factory({ + position, + count: 10, + maxCommits: 100, + }); + + expect(vm.find('.js-graph-bar').classes()).toContain(roundedClass); + }); + + it.each` + count | label + ${100} | ${'100'} + ${1000} | ${'999+'} + `('renders label as $roundedClass for $count', ({ count, label }) => { + factory({ + position: 'left', + count, + maxCommits: 1000, + }); + + expect(vm.find('.js-graph-count').text()).toContain(label); + }); + + it('sets width of bar', () => { + factory({ + position: 'left', + count: 100, + maxCommits: 1000, + }); + + expect(vm.find('.js-graph-bar').attributes('style')).toEqual('width: 10%;'); + }); +}); diff --git a/spec/frontend/branches/divergence_graph_spec.js b/spec/frontend/branches/divergence_graph_spec.js new file mode 100644 index 00000000000..8283bc966e4 --- /dev/null +++ b/spec/frontend/branches/divergence_graph_spec.js @@ -0,0 +1,40 @@ +import MockAdapter from 'axios-mock-adapter'; +import axios from '~/lib/utils/axios_utils'; +import init from '~/branches/divergence_graph'; + +describe('Divergence graph', () => { + let mock; + + beforeEach(() => { + mock = new MockAdapter(axios); + + mock.onGet('/-/diverging_counts').reply(200, { + master: { ahead: 1, behind: 1 }, + 'test/hello-world': { ahead: 1, behind: 1 }, + }); + + jest.spyOn(axios, 'get'); + + document.body.innerHTML = ` + <div class="js-branch-item" data-name="master"><div class="js-branch-divergence-graph"></div></div> + <div class="js-branch-item" data-name="test/hello-world"><div class="js-branch-divergence-graph"></div></div> + `; + }); + + afterEach(() => { + mock.restore(); + }); + + it('calls axos get with list of branch names', () => + init('/-/diverging_counts').then(() => { + expect(axios.get).toHaveBeenCalledWith('/-/diverging_counts', { + params: { names: ['master', 'test/hello-world'] }, + }); + })); + + it('creates Vue components', () => + init('/-/diverging_counts').then(() => { + expect(document.querySelector('[data-name="master"]').innerHTML).not.toEqual(''); + expect(document.querySelector('[data-name="test/hello-world"]').innerHTML).not.toEqual(''); + })); +}); diff --git a/spec/frontend/clusters/clusters_bundle_spec.js b/spec/frontend/clusters/clusters_bundle_spec.js index 6de06a9e2d5..80816faa5fc 100644 --- a/spec/frontend/clusters/clusters_bundle_spec.js +++ b/spec/frontend/clusters/clusters_bundle_spec.js @@ -147,47 +147,80 @@ describe('Clusters', () => { }); describe('updateContainer', () => { + const { location } = window; + + beforeEach(() => { + delete window.location; + window.location = { + reload: jest.fn(), + hash: location.hash, + }; + }); + + afterEach(() => { + window.location = location; + }); + describe('when creating cluster', () => { it('should show the creating container', () => { cluster.updateContainer(null, 'creating'); expect(cluster.creatingContainer.classList.contains('hidden')).toBeFalsy(); - expect(cluster.successContainer.classList.contains('hidden')).toBeTruthy(); - expect(cluster.errorContainer.classList.contains('hidden')).toBeTruthy(); + expect(window.location.reload).not.toHaveBeenCalled(); }); it('should continue to show `creating` banner with subsequent updates of the same status', () => { + cluster.updateContainer(null, 'creating'); cluster.updateContainer('creating', 'creating'); expect(cluster.creatingContainer.classList.contains('hidden')).toBeFalsy(); - expect(cluster.successContainer.classList.contains('hidden')).toBeTruthy(); - expect(cluster.errorContainer.classList.contains('hidden')).toBeTruthy(); + expect(window.location.reload).not.toHaveBeenCalled(); }); }); describe('when cluster is created', () => { - it('should show the success container and fresh the page', () => { - cluster.updateContainer(null, 'created'); + it('should hide the "creating" banner and refresh the page', () => { + jest.spyOn(cluster, 'setClusterNewlyCreated'); + cluster.updateContainer(null, 'creating'); + cluster.updateContainer('creating', 'created'); expect(cluster.creatingContainer.classList.contains('hidden')).toBeTruthy(); + expect(cluster.successContainer.classList.contains('hidden')).toBeTruthy(); + expect(cluster.errorContainer.classList.contains('hidden')).toBeTruthy(); + expect(window.location.reload).toHaveBeenCalled(); + expect(cluster.setClusterNewlyCreated).toHaveBeenCalledWith(true); + }); - expect(cluster.successContainer.classList.contains('hidden')).toBeFalsy(); + it('when the page is refreshed, it should show the "success" banner', () => { + jest.spyOn(cluster, 'setClusterNewlyCreated'); + jest.spyOn(cluster, 'isClusterNewlyCreated').mockReturnValue(true); + + cluster.updateContainer(null, 'created'); + cluster.updateContainer('created', 'created'); + expect(cluster.creatingContainer.classList.contains('hidden')).toBeTruthy(); + expect(cluster.successContainer.classList.contains('hidden')).toBeFalsy(); expect(cluster.errorContainer.classList.contains('hidden')).toBeTruthy(); + expect(window.location.reload).not.toHaveBeenCalled(); + expect(cluster.setClusterNewlyCreated).toHaveBeenCalledWith(false); }); it('should not show a banner when status is already `created`', () => { + jest.spyOn(cluster, 'setClusterNewlyCreated'); + jest.spyOn(cluster, 'isClusterNewlyCreated').mockReturnValue(false); + + cluster.updateContainer(null, 'created'); cluster.updateContainer('created', 'created'); expect(cluster.creatingContainer.classList.contains('hidden')).toBeTruthy(); - expect(cluster.successContainer.classList.contains('hidden')).toBeTruthy(); - expect(cluster.errorContainer.classList.contains('hidden')).toBeTruthy(); + expect(window.location.reload).not.toHaveBeenCalled(); + expect(cluster.setClusterNewlyCreated).not.toHaveBeenCalled(); }); }); diff --git a/spec/frontend/clusters/services/application_state_machine_spec.js b/spec/frontend/clusters/services/application_state_machine_spec.js index c146ef79be7..8632c5c4e26 100644 --- a/spec/frontend/clusters/services/application_state_machine_spec.js +++ b/spec/frontend/clusters/services/application_state_machine_spec.js @@ -72,9 +72,10 @@ describe('applicationStateMachine', () => { describe(`current state is ${INSTALLABLE}`, () => { it.each` - expectedState | event | effects - ${INSTALLING} | ${INSTALL_EVENT} | ${{ installFailed: false }} - ${INSTALLED} | ${INSTALLED} | ${NO_EFFECTS} + expectedState | event | effects + ${INSTALLING} | ${INSTALL_EVENT} | ${{ installFailed: false }} + ${INSTALLED} | ${INSTALLED} | ${NO_EFFECTS} + ${NOT_INSTALLABLE} | ${NOT_INSTALLABLE} | ${NO_EFFECTS} `(`transitions to $expectedState on $event event and applies $effects`, data => { const { expectedState, event, effects } = data; const currentAppState = { @@ -108,9 +109,10 @@ describe('applicationStateMachine', () => { describe(`current state is ${INSTALLED}`, () => { it.each` - expectedState | event | effects - ${UPDATING} | ${UPDATE_EVENT} | ${{ updateFailed: false, updateSuccessful: false }} - ${UNINSTALLING} | ${UNINSTALL_EVENT} | ${{ uninstallFailed: false, uninstallSuccessful: false }} + expectedState | event | effects + ${UPDATING} | ${UPDATE_EVENT} | ${{ updateFailed: false, updateSuccessful: false }} + ${UNINSTALLING} | ${UNINSTALL_EVENT} | ${{ uninstallFailed: false, uninstallSuccessful: false }} + ${NOT_INSTALLABLE} | ${NOT_INSTALLABLE} | ${NO_EFFECTS} `(`transitions to $expectedState on $event event and applies $effects`, data => { const { expectedState, event, effects } = data; const currentAppState = { @@ -119,7 +121,7 @@ describe('applicationStateMachine', () => { expect(transitionApplicationState(currentAppState, event)).toEqual({ status: expectedState, - ...effects, + ...noEffectsToEmptyObject(effects), }); }); }); diff --git a/spec/frontend/commons/nav/user_merge_requests_spec.js b/spec/frontend/commons/nav/user_merge_requests_spec.js new file mode 100644 index 00000000000..4da6d53557a --- /dev/null +++ b/spec/frontend/commons/nav/user_merge_requests_spec.js @@ -0,0 +1,113 @@ +import { + openUserCountsBroadcast, + closeUserCountsBroadcast, + refreshUserMergeRequestCounts, +} from '~/commons/nav/user_merge_requests'; +import Api from '~/api'; + +jest.mock('~/api'); + +const TEST_COUNT = 1000; +const MR_COUNT_CLASS = 'merge-requests-count'; + +describe('User Merge Requests', () => { + let channelMock; + let newBroadcastChannelMock; + + beforeEach(() => { + global.gon.current_user_id = 123; + + channelMock = { + postMessage: jest.fn(), + close: jest.fn(), + }; + newBroadcastChannelMock = jest.fn().mockImplementation(() => channelMock); + + global.BroadcastChannel = newBroadcastChannelMock; + setFixtures(`<div class="${MR_COUNT_CLASS}">0</div>`); + }); + + const findMRCountText = () => document.body.querySelector(`.${MR_COUNT_CLASS}`).textContent; + + describe('refreshUserMergeRequestCounts', () => { + beforeEach(() => { + Api.userCounts.mockReturnValue( + Promise.resolve({ + data: { merge_requests: TEST_COUNT }, + }), + ); + }); + + describe('with open broadcast channel', () => { + beforeEach(() => { + openUserCountsBroadcast(); + + return refreshUserMergeRequestCounts(); + }); + + it('updates the top count of merge requests', () => { + expect(findMRCountText()).toEqual(TEST_COUNT.toLocaleString()); + }); + + it('calls the API', () => { + expect(Api.userCounts).toHaveBeenCalled(); + }); + + it('posts count to BroadcastChannel', () => { + expect(channelMock.postMessage).toHaveBeenCalledWith(TEST_COUNT); + }); + }); + + describe('without open broadcast channel', () => { + beforeEach(() => refreshUserMergeRequestCounts()); + + it('does not post anything', () => { + expect(channelMock.postMessage).not.toHaveBeenCalled(); + }); + }); + }); + + describe('openUserCountsBroadcast', () => { + beforeEach(() => { + openUserCountsBroadcast(); + }); + + it('creates BroadcastChannel that updates DOM on message received', () => { + expect(findMRCountText()).toEqual('0'); + + channelMock.onmessage({ data: TEST_COUNT }); + + expect(findMRCountText()).toEqual(TEST_COUNT.toLocaleString()); + }); + + it('closes if called while already open', () => { + expect(channelMock.close).not.toHaveBeenCalled(); + + openUserCountsBroadcast(); + + expect(channelMock.close).toHaveBeenCalled(); + }); + }); + + describe('closeUserCountsBroadcast', () => { + describe('when not opened', () => { + it('does nothing', () => { + expect(channelMock.close).not.toHaveBeenCalled(); + }); + }); + + describe('when opened', () => { + beforeEach(() => { + openUserCountsBroadcast(); + }); + + it('closes', () => { + expect(channelMock.close).not.toHaveBeenCalled(); + + closeUserCountsBroadcast(); + + expect(channelMock.close).toHaveBeenCalled(); + }); + }); + }); +}); diff --git a/spec/frontend/confidential_merge_request/components/__snapshots__/project_form_group_spec.js.snap b/spec/frontend/confidential_merge_request/components/__snapshots__/project_form_group_spec.js.snap new file mode 100644 index 00000000000..47bdc677068 --- /dev/null +++ b/spec/frontend/confidential_merge_request/components/__snapshots__/project_form_group_spec.js.snap @@ -0,0 +1,101 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Confidential merge request project form group component renders empty state when response is empty 1`] = ` +<div + class="confidential-merge-request-fork-group form-group" +> + <label> + Project + </label> + + <div> + <!----> + + <p + class="text-muted mt-1 mb-0" + > + + No forks available to you. + <br /> + + <span> + To protect this issue's confidentiality, + <a + class="help-link" + href="https://test.com" + > + fork the project + </a> + and set the forks visiblity to private. + </span> + + <gllink-stub + class="w-auto p-0 d-inline-block text-primary bg-transparent" + href="/help" + target="_blank" + > + <span + class="sr-only" + > + Read more + </span> + + <i + aria-hidden="true" + class="fa fa-question-circle" + /> + </gllink-stub> + </p> + </div> +</div> +`; + +exports[`Confidential merge request project form group component renders fork dropdown 1`] = ` +<div + class="confidential-merge-request-fork-group form-group" +> + <label> + Project + </label> + + <div> + <!----> + + <p + class="text-muted mt-1 mb-0" + > + + No forks available to you. + <br /> + + <span> + To protect this issue's confidentiality, + <a + class="help-link" + href="https://test.com" + > + fork the project + </a> + and set the forks visiblity to private. + </span> + + <gllink-stub + class="w-auto p-0 d-inline-block text-primary bg-transparent" + href="/help" + target="_blank" + > + <span + class="sr-only" + > + Read more + </span> + + <i + aria-hidden="true" + class="fa fa-question-circle" + /> + </gllink-stub> + </p> + </div> +</div> +`; diff --git a/spec/frontend/confidential_merge_request/components/dropdown_spec.js b/spec/frontend/confidential_merge_request/components/dropdown_spec.js new file mode 100644 index 00000000000..69495f3c161 --- /dev/null +++ b/spec/frontend/confidential_merge_request/components/dropdown_spec.js @@ -0,0 +1,56 @@ +import { mount } from '@vue/test-utils'; +import { GlDropdownItem } from '@gitlab/ui'; +import Dropdown from '~/confidential_merge_request/components/dropdown.vue'; + +let vm; + +function factory(projects = []) { + vm = mount(Dropdown, { + propsData: { + projects, + selectedProject: projects[0], + }, + }); +} + +describe('Confidential merge request project dropdown component', () => { + afterEach(() => { + vm.destroy(); + }); + + it('renders dropdown items', () => { + factory([ + { + id: 1, + name: 'test', + }, + { + id: 2, + name: 'test', + }, + ]); + + expect(vm.findAll(GlDropdownItem).length).toBe(2); + }); + + it('renders selected project icon', () => { + factory([ + { + id: 1, + name: 'test', + }, + { + id: 2, + name: 'test 2', + }, + ]); + + expect(vm.find('.js-active-project-check').classes()).not.toContain('icon'); + expect( + vm + .findAll('.js-active-project-check') + .at(1) + .classes(), + ).toContain('icon'); + }); +}); diff --git a/spec/frontend/confidential_merge_request/components/project_form_group_spec.js b/spec/frontend/confidential_merge_request/components/project_form_group_spec.js new file mode 100644 index 00000000000..3001363f7b9 --- /dev/null +++ b/spec/frontend/confidential_merge_request/components/project_form_group_spec.js @@ -0,0 +1,77 @@ +import { shallowMount, createLocalVue } from '@vue/test-utils'; +import MockAdapter from 'axios-mock-adapter'; +import axios from '~/lib/utils/axios_utils'; +import ProjectFormGroup from '~/confidential_merge_request/components/project_form_group.vue'; + +const localVue = createLocalVue(); +const mockData = [ + { + id: 1, + name_with_namespace: 'root / gitlab-ce', + path_with_namespace: 'root/gitlab-ce', + namespace: { + full_path: 'root', + }, + }, + { + id: 2, + name_with_namespace: 'test / gitlab-ce', + path_with_namespace: 'test/gitlab-ce', + namespace: { + full_path: 'test', + }, + }, +]; +let vm; +let mock; + +function factory(projects = mockData) { + mock = new MockAdapter(axios); + mock.onGet(/api\/(.*)\/projects\/gitlab-org%2Fgitlab-ce\/forks/).reply(200, projects); + + vm = shallowMount(ProjectFormGroup, { + localVue, + propsData: { + namespacePath: 'gitlab-org', + projectPath: 'gitlab-org/gitlab-ce', + newForkPath: 'https://test.com', + helpPagePath: '/help', + }, + }); +} + +describe('Confidential merge request project form group component', () => { + afterEach(() => { + mock.restore(); + vm.destroy(); + }); + + it('renders fork dropdown', () => { + factory(); + + return localVue.nextTick(() => { + expect(vm.element).toMatchSnapshot(); + }); + }); + + it('sets selected project as first fork', () => { + factory(); + + return localVue.nextTick(() => { + expect(vm.vm.selectedProject).toEqual({ + id: 1, + name: 'root / gitlab-ce', + pathWithNamespace: 'root/gitlab-ce', + namespaceFullpath: 'root', + }); + }); + }); + + it('renders empty state when response is empty', () => { + factory([]); + + return localVue.nextTick(() => { + expect(vm.element).toMatchSnapshot(); + }); + }); +}); diff --git a/spec/frontend/create_merge_request_dropdown_spec.js b/spec/frontend/create_merge_request_dropdown_spec.js new file mode 100644 index 00000000000..dcc6fa96d18 --- /dev/null +++ b/spec/frontend/create_merge_request_dropdown_spec.js @@ -0,0 +1,103 @@ +import axios from '~/lib/utils/axios_utils'; +import MockAdapter from 'axios-mock-adapter'; +import CreateMergeRequestDropdown from '~/create_merge_request_dropdown'; +import confidentialState from '~/confidential_merge_request/state'; +import { TEST_HOST } from './helpers/test_constants'; + +describe('CreateMergeRequestDropdown', () => { + let axiosMock; + let dropdown; + + beforeEach(() => { + axiosMock = new MockAdapter(axios); + + document.body.innerHTML = ` + <div id="dummy-wrapper-element"> + <div class="available"></div> + <div class="unavailable"> + <div class="fa"></div> + <div class="text"></div> + </div> + <div class="js-ref"></div> + <div class="js-create-mr"></div> + <div class="js-create-merge-request"></div> + <div class="js-create-target"></div> + <div class="js-dropdown-toggle"></div> + </div> + `; + + const dummyElement = document.getElementById('dummy-wrapper-element'); + dropdown = new CreateMergeRequestDropdown(dummyElement); + dropdown.refsPath = `${TEST_HOST}/dummy/refs?search=`; + }); + + afterEach(() => { + axiosMock.restore(); + }); + + describe('getRef', () => { + it('escapes branch names correctly', done => { + const endpoint = `${dropdown.refsPath}contains%23hash`; + jest.spyOn(axios, 'get'); + axiosMock.onGet(endpoint).replyOnce({}); + + dropdown + .getRef('contains#hash') + .then(() => { + expect(axios.get).toHaveBeenCalledWith(endpoint); + }) + .then(done) + .catch(done.fail); + }); + }); + + describe('updateCreatePaths', () => { + it('escapes branch names correctly', () => { + dropdown.createBranchPath = `${TEST_HOST}/branches?branch_name=some-branch&issue=42`; + dropdown.createMrPath = `${TEST_HOST}/create_merge_request?branch_name=some-branch&ref=master`; + + dropdown.updateCreatePaths('branch', 'contains#hash'); + + expect(dropdown.createBranchPath).toBe( + `${TEST_HOST}/branches?branch_name=contains%23hash&issue=42`, + ); + + expect(dropdown.createMrPath).toBe( + `${TEST_HOST}/create_merge_request?branch_name=contains%23hash&ref=master`, + ); + }); + }); + + describe('enable', () => { + beforeEach(() => { + dropdown.createMergeRequestButton.classList.add('disabled'); + }); + + afterEach(() => { + confidentialState.selectedProject = {}; + }); + + it('enables button when not confidential issue', () => { + dropdown.enable(); + + expect(dropdown.createMergeRequestButton.classList).not.toContain('disabled'); + }); + + it('enables when can create confidential issue', () => { + document.querySelector('.js-create-mr').setAttribute('data-is-confidential', 'true'); + confidentialState.selectedProject = { name: 'test' }; + + dropdown.enable(); + + expect(dropdown.createMergeRequestButton.classList).not.toContain('disabled'); + }); + + it('does not enable when can not create confidential issue', () => { + document.querySelector('.js-create-mr').setAttribute('data-is-confidential', 'true'); + + dropdown.enable(); + + expect(dropdown.createMergeRequestButton.classList).toContain('disabled'); + }); + }); +}); diff --git a/spec/frontend/cycle_analytics/stage_nav_item_spec.js b/spec/frontend/cycle_analytics/stage_nav_item_spec.js new file mode 100644 index 00000000000..ff079082ca7 --- /dev/null +++ b/spec/frontend/cycle_analytics/stage_nav_item_spec.js @@ -0,0 +1,177 @@ +import { mount, shallowMount } from '@vue/test-utils'; +import StageNavItem from '~/cycle_analytics/components/stage_nav_item.vue'; + +describe('StageNavItem', () => { + let wrapper = null; + const title = 'Cool stage'; + const value = '1 day'; + + function createComponent(props, shallow = true) { + const func = shallow ? shallowMount : mount; + return func(StageNavItem, { + propsData: { + canEdit: false, + isActive: false, + isUserAllowed: false, + isDefaultStage: true, + title, + value, + ...props, + }, + }); + } + + function hasStageName() { + const stageName = wrapper.find('.stage-name'); + expect(stageName.exists()).toBe(true); + expect(stageName.text()).toEqual(title); + } + + it('renders stage name', () => { + wrapper = createComponent({ isUserAllowed: true }); + hasStageName(); + wrapper.destroy(); + }); + + describe('User has access', () => { + describe('with a value', () => { + beforeEach(() => { + wrapper = createComponent({ isUserAllowed: true }); + }); + + afterEach(() => { + wrapper.destroy(); + }); + it('renders the value for median value', () => { + expect(wrapper.find('.stage-empty').exists()).toBe(false); + expect(wrapper.find('.not-available').exists()).toBe(false); + expect(wrapper.find('.stage-median').text()).toEqual(value); + }); + }); + + describe('without a value', () => { + beforeEach(() => { + wrapper = createComponent({ isUserAllowed: true, value: null }); + }); + + afterEach(() => { + wrapper.destroy(); + }); + + it('has the stage-empty class', () => { + expect(wrapper.find('.stage-empty').exists()).toBe(true); + }); + + it('renders Not enough data for the median value', () => { + expect(wrapper.find('.stage-median').text()).toEqual('Not enough data'); + }); + }); + }); + + describe('is active', () => { + beforeEach(() => { + wrapper = createComponent({ isActive: true }, false); + }); + + afterEach(() => { + wrapper.destroy(); + }); + it('has the active class', () => { + expect(wrapper.find('.stage-nav-item').classes('active')).toBe(true); + }); + }); + + describe('is not active', () => { + beforeEach(() => { + wrapper = createComponent(); + }); + + afterEach(() => { + wrapper.destroy(); + }); + it('emits the `select` event when clicked', () => { + expect(wrapper.emitted().select).toBeUndefined(); + wrapper.trigger('click'); + expect(wrapper.emitted().select.length).toBe(1); + }); + }); + + describe('User does not have access', () => { + beforeEach(() => { + wrapper = createComponent({ isUserAllowed: false }, false); + }); + + afterEach(() => { + wrapper.destroy(); + }); + it('renders stage name', () => { + hasStageName(); + }); + + it('has class not-available', () => { + expect(wrapper.find('.stage-empty').exists()).toBe(false); + expect(wrapper.find('.not-available').exists()).toBe(true); + }); + + it('renders Not available for the median value', () => { + expect(wrapper.find('.stage-median').text()).toBe('Not available'); + }); + it('does not render options menu', () => { + expect(wrapper.find('.more-actions-toggle').exists()).toBe(false); + }); + }); + + describe('User can edit stages', () => { + beforeEach(() => { + wrapper = createComponent({ canEdit: true, isUserAllowed: true }, false); + }); + + afterEach(() => { + wrapper.destroy(); + }); + it('renders stage name', () => { + hasStageName(); + }); + + it('renders options menu', () => { + expect(wrapper.find('.more-actions-toggle').exists()).toBe(true); + }); + + describe('Default stages', () => { + beforeEach(() => { + wrapper = createComponent( + { canEdit: true, isUserAllowed: true, isDefaultStage: true }, + false, + ); + }); + it('can hide the stage', () => { + expect(wrapper.text()).toContain('Hide stage'); + }); + it('can not edit the stage', () => { + expect(wrapper.text()).not.toContain('Edit stage'); + }); + it('can not remove the stage', () => { + expect(wrapper.text()).not.toContain('Remove stage'); + }); + }); + + describe('Custom stages', () => { + beforeEach(() => { + wrapper = createComponent( + { canEdit: true, isUserAllowed: true, isDefaultStage: false }, + false, + ); + }); + it('can edit the stage', () => { + expect(wrapper.text()).toContain('Edit stage'); + }); + it('can remove the stage', () => { + expect(wrapper.text()).toContain('Remove stage'); + }); + + it('can not hide the stage', () => { + expect(wrapper.text()).not.toContain('Hide stage'); + }); + }); + }); +}); diff --git a/spec/frontend/diffs/components/diff_discussion_reply_spec.js b/spec/frontend/diffs/components/diff_discussion_reply_spec.js new file mode 100644 index 00000000000..28689ab07de --- /dev/null +++ b/spec/frontend/diffs/components/diff_discussion_reply_spec.js @@ -0,0 +1,90 @@ +import { shallowMount, createLocalVue } from '@vue/test-utils'; +import Vuex from 'vuex'; +import DiffDiscussionReply from '~/diffs/components/diff_discussion_reply.vue'; +import ReplyPlaceholder from '~/notes/components/discussion_reply_placeholder.vue'; +import NoteSignedOutWidget from '~/notes/components/note_signed_out_widget.vue'; + +const localVue = createLocalVue(); +localVue.use(Vuex); + +describe('DiffDiscussionReply', () => { + let wrapper; + let getters; + let store; + + const createComponent = (props = {}, slots = {}) => { + wrapper = shallowMount(DiffDiscussionReply, { + store, + localVue, + sync: false, + propsData: { + ...props, + }, + slots: { + ...slots, + }, + }); + }; + + afterEach(() => { + wrapper.destroy(); + }); + + describe('if user can reply', () => { + beforeEach(() => { + getters = { + userCanReply: () => true, + getUserData: () => ({ + path: 'test-path', + avatar_url: 'avatar_url', + name: 'John Doe', + }), + }; + + store = new Vuex.Store({ + getters, + }); + }); + + it('should render a form if component has form', () => { + createComponent( + { + renderReplyPlaceholder: false, + hasForm: true, + }, + { + form: `<div id="test-form"></div>`, + }, + ); + + expect(wrapper.find('#test-form').exists()).toBe(true); + }); + + it('should render a reply placeholder if there is no form', () => { + createComponent({ + renderReplyPlaceholder: true, + hasForm: false, + }); + + expect(wrapper.find(ReplyPlaceholder).exists()).toBe(true); + }); + }); + + it('renders a signed out widget when user is not logged in', () => { + getters = { + userCanReply: () => false, + getUserData: () => null, + }; + + store = new Vuex.Store({ + getters, + }); + + createComponent({ + renderReplyPlaceholder: false, + hasForm: false, + }); + + expect(wrapper.find(NoteSignedOutWidget).exists()).toBe(true); + }); +}); diff --git a/spec/frontend/diffs/components/diff_gutter_avatars_spec.js b/spec/frontend/diffs/components/diff_gutter_avatars_spec.js new file mode 100644 index 00000000000..48ee5c63f35 --- /dev/null +++ b/spec/frontend/diffs/components/diff_gutter_avatars_spec.js @@ -0,0 +1,113 @@ +import { shallowMount, createLocalVue } from '@vue/test-utils'; +import DiffGutterAvatars from '~/diffs/components/diff_gutter_avatars.vue'; +import discussionsMockData from '../mock_data/diff_discussions'; + +const localVue = createLocalVue(); +const getDiscussionsMockData = () => [Object.assign({}, discussionsMockData)]; + +describe('DiffGutterAvatars', () => { + let wrapper; + + const findCollapseButton = () => wrapper.find('.diff-notes-collapse'); + const findMoreCount = () => wrapper.find('.diff-comments-more-count'); + const findUserAvatars = () => wrapper.findAll('.diff-comment-avatar'); + + const createComponent = (props = {}) => { + wrapper = shallowMount(DiffGutterAvatars, { + localVue, + sync: false, + propsData: { + ...props, + }, + }); + }; + + afterEach(() => { + wrapper.destroy(); + }); + + describe('when expanded', () => { + beforeEach(() => { + createComponent({ + discussions: getDiscussionsMockData(), + discussionsExpanded: true, + }); + }); + + it('renders a collapse button when discussions are expanded', () => { + expect(findCollapseButton().exists()).toBe(true); + }); + + it('should emit toggleDiscussions event on button click', () => { + findCollapseButton().trigger('click'); + + expect(wrapper.emitted().toggleLineDiscussions).toBeTruthy(); + }); + }); + + describe('when collapsed', () => { + beforeEach(() => { + createComponent({ + discussions: getDiscussionsMockData(), + discussionsExpanded: false, + }); + }); + + it('renders user avatars and moreCount text', () => { + expect(findUserAvatars().exists()).toBe(true); + expect(findMoreCount().exists()).toBe(true); + }); + + it('renders correct amount of user avatars', () => { + expect(findUserAvatars().length).toBe(3); + }); + + it('renders correct moreCount number', () => { + expect(findMoreCount().text()).toBe('+2'); + }); + + it('should emit toggleDiscussions event on avatars click', () => { + findUserAvatars() + .at(0) + .trigger('click'); + + expect(wrapper.emitted().toggleLineDiscussions).toBeTruthy(); + }); + + it('should emit toggleDiscussions event on more count text click', () => { + findMoreCount().trigger('click'); + + expect(wrapper.emitted().toggleLineDiscussions).toBeTruthy(); + }); + }); + + it('renders an empty more count string if there are no discussions', () => { + createComponent({ + discussions: [], + discussionsExpanded: false, + }); + + expect(findMoreCount().exists()).toBe(false); + }); + + describe('tooltip text', () => { + beforeEach(() => { + createComponent({ + discussions: getDiscussionsMockData(), + discussionsExpanded: false, + }); + }); + + it('returns original comment if it is shorter than max length', () => { + const note = wrapper.vm.discussions[0].notes[0]; + + expect(wrapper.vm.getTooltipText(note)).toEqual('Administrator: comment 1'); + }); + + it('returns truncated version of comment if it is longer than max length', () => { + const note = wrapper.vm.discussions[0].notes[1]; + + expect(wrapper.vm.getTooltipText(note)).toEqual('Fatih Acet: comment 2 is r...'); + }); + }); +}); diff --git a/spec/frontend/diffs/mock_data/diff_discussions.js b/spec/frontend/diffs/mock_data/diff_discussions.js new file mode 100644 index 00000000000..711ab543411 --- /dev/null +++ b/spec/frontend/diffs/mock_data/diff_discussions.js @@ -0,0 +1,529 @@ +export default { + id: '6b232e05bea388c6b043ccc243ba505faac04ea8', + reply_id: '6b232e05bea388c6b043ccc243ba505faac04ea8', + position: { + old_line: null, + new_line: 2, + old_path: 'CHANGELOG', + new_path: 'CHANGELOG', + base_sha: 'e63f41fe459e62e1228fcef60d7189127aeba95a', + start_sha: 'd9eaefe5a676b820c57ff18cf5b68316025f7962', + head_sha: 'c48ee0d1bf3b30453f5b32250ce03134beaa6d13', + }, + line_code: '1c497fbb3a46b78edf04cc2a2fa33f67e3ffbe2a_1_2', + expanded: true, + notes: [ + { + id: '1749', + type: 'DiffNote', + attachment: null, + author: { + id: 1, + name: 'Administrator', + username: 'root', + state: 'active', + avatar_url: + 'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon', + path: '/root', + }, + created_at: '2018-04-03T21:06:21.521Z', + updated_at: '2018-04-08T08:50:41.762Z', + system: false, + noteable_id: 51, + noteable_type: 'MergeRequest', + noteable_iid: 20, + human_access: 'Owner', + note: 'comment 1', + note_html: '<p dir="auto">comment 1</p>', + last_edited_at: '2018-04-08T08:50:41.762Z', + last_edited_by: { + id: 1, + name: 'Administrator', + username: 'root', + state: 'active', + avatar_url: + 'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon', + path: '/root', + }, + current_user: { + can_edit: true, + can_award_emoji: true, + }, + resolved: false, + resolvable: true, + resolved_by: null, + discussion_id: '6b232e05bea388c6b043ccc243ba505faac04ea8', + emoji_awardable: true, + award_emoji: [], + toggle_award_path: '/gitlab-org/gitlab-test/notes/1749/toggle_award_emoji', + report_abuse_path: + '/abuse_reports/new?ref_url=http%3A%2F%2Flocalhost%3A3000%2Fgitlab-org%2Fgitlab-test%2Fmerge_requests%2F20%23note_1749&user_id=1', + path: '/gitlab-org/gitlab-test/notes/1749', + noteable_note_url: 'http://localhost:3000/gitlab-org/gitlab-test/merge_requests/20#note_1749', + resolve_path: + '/gitlab-org/gitlab-test/merge_requests/20/discussions/6b232e05bea388c6b043ccc243ba505faac04ea8/resolve', + resolve_with_issue_path: + '/gitlab-org/gitlab-test/issues/new?discussion_to_resolve=6b232e05bea388c6b043ccc243ba505faac04ea8&merge_request_to_resolve_discussions_of=20', + }, + { + id: '1753', + type: 'DiffNote', + attachment: null, + author: { + id: 1, + name: 'Fatih Acet', + username: 'fatihacet', + state: 'active', + avatar_url: + 'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon', + path: '/fatihacevt', + }, + created_at: '2018-04-08T08:49:35.804Z', + updated_at: '2018-04-08T08:50:45.915Z', + system: false, + noteable_id: 51, + noteable_type: 'MergeRequest', + noteable_iid: 20, + human_access: 'Owner', + note: 'comment 2 is really long one', + note_html: '<p dir="auto">comment 2 is really long one</p>', + last_edited_at: '2018-04-08T08:50:45.915Z', + last_edited_by: { + id: 1, + name: 'Administrator', + username: 'root', + state: 'active', + avatar_url: + 'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon', + path: '/root', + }, + current_user: { + can_edit: true, + can_award_emoji: true, + }, + resolved: false, + resolvable: true, + resolved_by: null, + discussion_id: '6b232e05bea388c6b043ccc243ba505faac04ea8', + emoji_awardable: true, + award_emoji: [], + toggle_award_path: '/gitlab-org/gitlab-test/notes/1753/toggle_award_emoji', + report_abuse_path: + '/abuse_reports/new?ref_url=http%3A%2F%2Flocalhost%3A3000%2Fgitlab-org%2Fgitlab-test%2Fmerge_requests%2F20%23note_1753&user_id=1', + path: '/gitlab-org/gitlab-test/notes/1753', + noteable_note_url: 'http://localhost:3000/gitlab-org/gitlab-test/merge_requests/20#note_1753', + resolve_path: + '/gitlab-org/gitlab-test/merge_requests/20/discussions/6b232e05bea388c6b043ccc243ba505faac04ea8/resolve', + resolve_with_issue_path: + '/gitlab-org/gitlab-test/issues/new?discussion_to_resolve=6b232e05bea388c6b043ccc243ba505faac04ea8&merge_request_to_resolve_discussions_of=20', + }, + { + id: '1754', + type: 'DiffNote', + attachment: null, + author: { + id: 1, + name: 'Administrator', + username: 'root', + state: 'active', + avatar_url: + 'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon', + path: '/root', + }, + created_at: '2018-04-08T08:50:48.294Z', + updated_at: '2018-04-08T08:50:48.294Z', + system: false, + noteable_id: 51, + noteable_type: 'MergeRequest', + noteable_iid: 20, + human_access: 'Owner', + note: 'comment 3', + note_html: '<p dir="auto">comment 3</p>', + current_user: { + can_edit: true, + can_award_emoji: true, + }, + resolved: false, + resolvable: true, + resolved_by: null, + discussion_id: '6b232e05bea388c6b043ccc243ba505faac04ea8', + emoji_awardable: true, + award_emoji: [], + toggle_award_path: '/gitlab-org/gitlab-test/notes/1754/toggle_award_emoji', + report_abuse_path: + '/abuse_reports/new?ref_url=http%3A%2F%2Flocalhost%3A3000%2Fgitlab-org%2Fgitlab-test%2Fmerge_requests%2F20%23note_1754&user_id=1', + path: '/gitlab-org/gitlab-test/notes/1754', + noteable_note_url: 'http://localhost:3000/gitlab-org/gitlab-test/merge_requests/20#note_1754', + resolve_path: + '/gitlab-org/gitlab-test/merge_requests/20/discussions/6b232e05bea388c6b043ccc243ba505faac04ea8/resolve', + resolve_with_issue_path: + '/gitlab-org/gitlab-test/issues/new?discussion_to_resolve=6b232e05bea388c6b043ccc243ba505faac04ea8&merge_request_to_resolve_discussions_of=20', + }, + { + id: '1755', + type: 'DiffNote', + attachment: null, + author: { + id: 1, + name: 'Administrator', + username: 'root', + state: 'active', + avatar_url: + 'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon', + path: '/root', + }, + created_at: '2018-04-08T08:50:50.911Z', + updated_at: '2018-04-08T08:50:50.911Z', + system: false, + noteable_id: 51, + noteable_type: 'MergeRequest', + noteable_iid: 20, + human_access: 'Owner', + note: 'comment 4', + note_html: '<p dir="auto">comment 4</p>', + current_user: { + can_edit: true, + can_award_emoji: true, + }, + resolved: false, + resolvable: true, + resolved_by: null, + discussion_id: '6b232e05bea388c6b043ccc243ba505faac04ea8', + emoji_awardable: true, + award_emoji: [], + toggle_award_path: '/gitlab-org/gitlab-test/notes/1755/toggle_award_emoji', + report_abuse_path: + '/abuse_reports/new?ref_url=http%3A%2F%2Flocalhost%3A3000%2Fgitlab-org%2Fgitlab-test%2Fmerge_requests%2F20%23note_1755&user_id=1', + path: '/gitlab-org/gitlab-test/notes/1755', + noteable_note_url: 'http://localhost:3000/gitlab-org/gitlab-test/merge_requests/20#note_1755', + resolve_path: + '/gitlab-org/gitlab-test/merge_requests/20/discussions/6b232e05bea388c6b043ccc243ba505faac04ea8/resolve', + resolve_with_issue_path: + '/gitlab-org/gitlab-test/issues/new?discussion_to_resolve=6b232e05bea388c6b043ccc243ba505faac04ea8&merge_request_to_resolve_discussions_of=20', + }, + { + id: '1756', + type: 'DiffNote', + attachment: null, + author: { + id: 1, + name: 'Administrator', + username: 'root', + state: 'active', + avatar_url: + 'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon', + path: '/root', + }, + created_at: '2018-04-08T08:50:53.895Z', + updated_at: '2018-04-08T08:50:53.895Z', + system: false, + noteable_id: 51, + noteable_type: 'MergeRequest', + noteable_iid: 20, + human_access: 'Owner', + note: 'comment 5', + note_html: '<p dir="auto">comment 5</p>', + current_user: { + can_edit: true, + can_award_emoji: true, + }, + resolved: false, + resolvable: true, + resolved_by: null, + discussion_id: '6b232e05bea388c6b043ccc243ba505faac04ea8', + emoji_awardable: true, + award_emoji: [], + toggle_award_path: '/gitlab-org/gitlab-test/notes/1756/toggle_award_emoji', + report_abuse_path: + '/abuse_reports/new?ref_url=http%3A%2F%2Flocalhost%3A3000%2Fgitlab-org%2Fgitlab-test%2Fmerge_requests%2F20%23note_1756&user_id=1', + path: '/gitlab-org/gitlab-test/notes/1756', + noteable_note_url: 'http://localhost:3000/gitlab-org/gitlab-test/merge_requests/20#note_1756', + resolve_path: + '/gitlab-org/gitlab-test/merge_requests/20/discussions/6b232e05bea388c6b043ccc243ba505faac04ea8/resolve', + resolve_with_issue_path: + '/gitlab-org/gitlab-test/issues/new?discussion_to_resolve=6b232e05bea388c6b043ccc243ba505faac04ea8&merge_request_to_resolve_discussions_of=20', + }, + ], + individual_note: false, + resolvable: true, + resolved: false, + resolve_path: + '/gitlab-org/gitlab-test/merge_requests/20/discussions/6b232e05bea388c6b043ccc243ba505faac04ea8/resolve', + resolve_with_issue_path: + '/gitlab-org/gitlab-test/issues/new?discussion_to_resolve=6b232e05bea388c6b043ccc243ba505faac04ea8&merge_request_to_resolve_discussions_of=20', + diff_file: { + submodule: false, + submodule_link: null, + blob: { + id: '9e10516ca50788acf18c518a231914a21e5f16f7', + path: 'CHANGELOG', + name: 'CHANGELOG', + mode: '100644', + readable_text: true, + icon: 'file-text-o', + }, + blob_path: 'CHANGELOG', + blob_name: 'CHANGELOG', + blob_icon: '<i aria-hidden="true" data-hidden="true" class="fa fa-file-text-o fa-fw"></i>', + file_hash: '1c497fbb3a46b78edf04cc2a2fa33f67e3ffbe2a', + file_path: 'CHANGELOG.rb', + new_file: false, + deleted_file: false, + renamed_file: false, + old_path: 'CHANGELOG', + new_path: 'CHANGELOG', + mode_changed: false, + a_mode: '100644', + b_mode: '100644', + text: true, + added_lines: 2, + removed_lines: 0, + diff_refs: { + base_sha: 'e63f41fe459e62e1228fcef60d7189127aeba95a', + start_sha: 'd9eaefe5a676b820c57ff18cf5b68316025f7962', + head_sha: 'c48ee0d1bf3b30453f5b32250ce03134beaa6d13', + }, + content_sha: 'c48ee0d1bf3b30453f5b32250ce03134beaa6d13', + stored_externally: null, + external_storage: null, + old_path_html: 'CHANGELOG_OLD', + new_path_html: 'CHANGELOG', + is_fully_expanded: true, + context_lines_path: + '/gitlab-org/gitlab-test/blob/c48ee0d1bf3b30453f5b32250ce03134beaa6d13/CHANGELOG/diff', + highlighted_diff_lines: [ + { + line_code: '1c497fbb3a46b78edf04cc2a2fa33f67e3ffbe2a_1_1', + type: 'new', + old_line: null, + new_line: 1, + text: '<span id="LC1" class="line" lang="plaintext"> - Bad dates</span>\n', + rich_text: '<span id="LC1" class="line" lang="plaintext"> - Bad dates</span>\n', + meta_data: null, + }, + { + line_code: '1c497fbb3a46b78edf04cc2a2fa33f67e3ffbe2a_1_2', + type: 'new', + old_line: null, + new_line: 2, + text: '<span id="LC2" class="line" lang="plaintext"></span>\n', + rich_text: '<span id="LC2" class="line" lang="plaintext"></span>\n', + meta_data: null, + }, + { + line_code: '1c497fbb3a46b78edf04cc2a2fa33f67e3ffbe2a_1_3', + type: null, + old_line: 1, + new_line: 3, + text: '<span id="LC3" class="line" lang="plaintext">v6.8.0</span>\n', + rich_text: '<span id="LC3" class="line" lang="plaintext">v6.8.0</span>\n', + meta_data: null, + }, + { + line_code: '1c497fbb3a46b78edf04cc2a2fa33f67e3ffbe2a_2_4', + type: null, + old_line: 2, + new_line: 4, + text: '<span id="LC4" class="line" lang="plaintext"></span>\n', + rich_text: '<span id="LC4" class="line" lang="plaintext"></span>\n', + meta_data: null, + }, + { + line_code: '1c497fbb3a46b78edf04cc2a2fa33f67e3ffbe2a_3_5', + type: null, + old_line: 3, + new_line: 5, + text: ' <span id="LC5" class="line" lang="plaintext">v6.7.0</span>\n', + rich_text: ' <span id="LC5" class="line" lang="plaintext">v6.7.0</span>\n', + meta_data: null, + }, + { + line_code: null, + type: 'match', + old_line: null, + new_line: null, + text: '', + rich_text: '', + meta_data: { + old_pos: 3, + new_pos: 5, + }, + }, + { + line_code: null, + type: 'match', + old_line: null, + new_line: null, + text: '', + rich_text: '', + meta_data: { + old_pos: 3, + new_pos: 5, + }, + }, + { + line_code: null, + type: 'match', + old_line: null, + new_line: null, + text: '', + rich_text: '', + meta_data: { + old_pos: 3, + new_pos: 5, + }, + }, + ], + parallel_diff_lines: [ + { + left: null, + right: { + line_code: '1c497fbb3a46b78edf04cc2a2fa33f67e3ffbe2a_1_1', + type: 'new', + old_line: null, + new_line: 1, + text: '<span id="LC1" class="line" lang="plaintext"> - Bad dates</span>\n', + rich_text: '<span id="LC1" class="line" lang="plaintext"> - Bad dates</span>\n', + meta_data: null, + }, + }, + { + left: null, + right: { + line_code: '1c497fbb3a46b78edf04cc2a2fa33f67e3ffbe2a_1_2', + type: 'new', + old_line: null, + new_line: 2, + text: '<span id="LC2" class="line" lang="plaintext"></span>\n', + rich_text: '<span id="LC2" class="line" lang="plaintext"></span>\n', + meta_data: null, + }, + }, + { + left: { + line_code: '1c497fbb3a46b78edf04cc2a2fa33f67e3ffbe2a_1_3', + type: null, + old_line: 1, + new_line: 3, + text: '<span id="LC3" class="line" lang="plaintext">v6.8.0</span>\n', + rich_text: '<span id="LC3" class="line" lang="plaintext">v6.8.0</span>\n', + meta_data: null, + }, + right: { + line_code: '1c497fbb3a46b78edf04cc2a2fa33f67e3ffbe2a_1_3', + type: null, + old_line: 1, + new_line: 3, + text: '<span id="LC3" class="line" lang="plaintext">v6.8.0</span>\n', + rich_text: '<span id="LC3" class="line" lang="plaintext">v6.8.0</span>\n', + meta_data: null, + }, + }, + { + left: { + line_code: '1c497fbb3a46b78edf04cc2a2fa33f67e3ffbe2a_2_4', + type: null, + old_line: 2, + new_line: 4, + text: '<span id="LC4" class="line" lang="plaintext"></span>\n', + rich_text: '<span id="LC4" class="line" lang="plaintext"></span>\n', + meta_data: null, + }, + right: { + line_code: '1c497fbb3a46b78edf04cc2a2fa33f67e3ffbe2a_2_4', + type: null, + old_line: 2, + new_line: 4, + text: '<span id="LC4" class="line" lang="plaintext"></span>\n', + rich_text: '<span id="LC4" class="line" lang="plaintext"></span>\n', + meta_data: null, + }, + }, + { + left: { + line_code: '1c497fbb3a46b78edf04cc2a2fa33f67e3ffbe2a_3_5', + type: null, + old_line: 3, + new_line: 5, + text: ' <span id="LC5" class="line" lang="plaintext">v6.7.0</span>\n', + rich_text: ' <span id="LC5" class="line" lang="plaintext">v6.7.0</span>\n', + meta_data: null, + }, + right: { + line_code: '1c497fbb3a46b78edf04cc2a2fa33f67e3ffbe2a_3_5', + type: null, + old_line: 3, + new_line: 5, + text: ' <span id="LC5" class="line" lang="plaintext">v6.7.0</span>\n', + rich_text: ' <span id="LC5" class="line" lang="plaintext">v6.7.0</span>\n', + meta_data: null, + }, + }, + { + left: { + line_code: null, + type: 'match', + old_line: null, + new_line: null, + text: '', + rich_text: '', + meta_data: { + old_pos: 3, + new_pos: 5, + }, + }, + right: { + line_code: null, + type: 'match', + old_line: null, + new_line: null, + text: '', + rich_text: '', + meta_data: { + old_pos: 3, + new_pos: 5, + }, + }, + }, + ], + viewer: { + name: 'text', + error: null, + }, + }, + diff_discussion: true, + truncated_diff_lines: [ + { + text: 'line', + rich_text: + '<tr class="line_holder new" id="">\n<td class="diff-line-num new old_line" data-linenumber="1">\n \n</td>\n<td class="diff-line-num new new_line" data-linenumber="1">\n1\n</td>\n<td class="line_content new"><span id="LC1" class="line" lang="plaintext"> - Bad dates</span>\n</td>\n</tr>\n<tr class="line_holder new" id="">\n<td class="diff-line-num new old_line" data-linenumber="1">\n \n</td>\n<td class="diff-line-num new new_line" data-linenumber="2">\n2\n</td>\n<td class="line_content new"><span id="LC2" class="line" lang="plaintext"></span>\n</td>\n</tr>\n', + can_receive_suggestion: true, + line_code: '6f209374f7e565f771b95720abf46024c41d1885_1_1', + type: 'new', + old_line: null, + new_line: 1, + meta_data: null, + }, + ], +}; + +export const imageDiffDiscussions = [ + { + id: '1', + position: { + x: 10, + y: 10, + width: 100, + height: 200, + }, + }, + { + id: '2', + position: { + x: 5, + y: 5, + width: 100, + height: 200, + }, + }, +]; diff --git a/spec/frontend/environment.js b/spec/frontend/environment.js index a8c8688441d..290c0e797cb 100644 --- a/spec/frontend/environment.js +++ b/spec/frontend/environment.js @@ -1,8 +1,11 @@ /* eslint-disable import/no-commonjs */ +const path = require('path'); const { ErrorWithStack } = require('jest-util'); const JSDOMEnvironment = require('jest-environment-jsdom'); +const ROOT_PATH = path.resolve(__dirname, '../..'); + class CustomEnvironment extends JSDOMEnvironment { constructor(config, context) { super(config, context); @@ -35,9 +38,8 @@ class CustomEnvironment extends JSDOMEnvironment { this.rejectedPromises.push(error); }; - this.global.fixturesBasePath = `${process.cwd()}/${ - IS_EE ? 'ee/' : '' - }spec/javascripts/fixtures`; + this.global.fixturesBasePath = `${ROOT_PATH}/tmp/tests/frontend/fixtures${IS_EE ? '-ee' : ''}`; + this.global.staticFixturesBasePath = `${ROOT_PATH}/spec/frontend/fixtures`; // Not yet supported by JSDOM: https://github.com/jsdom/jsdom/issues/317 this.global.document.createRange = () => ({ diff --git a/spec/frontend/environments/confirm_rollback_modal_spec.js b/spec/frontend/environments/confirm_rollback_modal_spec.js new file mode 100644 index 00000000000..a1a22274e8f --- /dev/null +++ b/spec/frontend/environments/confirm_rollback_modal_spec.js @@ -0,0 +1,70 @@ +import { shallowMount } from '@vue/test-utils'; +import { GlModal } from '@gitlab/ui'; +import ConfirmRollbackModal from '~/environments/components/confirm_rollback_modal.vue'; +import eventHub from '~/environments/event_hub'; + +describe('Confirm Rollback Modal Component', () => { + let environment; + + beforeEach(() => { + environment = { + name: 'test', + last_deployment: { + commit: { + short_id: 'abc0123', + }, + }, + modalId: 'test', + }; + }); + + it('should show "Rollback" when isLastDeployment is false', () => { + const component = shallowMount(ConfirmRollbackModal, { + propsData: { + environment: { + ...environment, + isLastDeployment: false, + }, + }, + }); + const modal = component.find(GlModal); + + expect(modal.attributes('title')).toContain('Rollback'); + expect(modal.attributes('title')).toContain('test'); + expect(modal.attributes('ok-title')).toBe('Rollback'); + expect(modal.text()).toContain('commit abc0123'); + expect(modal.text()).toContain('Are you sure you want to continue?'); + }); + + it('should show "Re-deploy" when isLastDeployment is true', () => { + const component = shallowMount(ConfirmRollbackModal, { + propsData: { + environment: { + ...environment, + isLastDeployment: true, + }, + }, + }); + const modal = component.find(GlModal); + + expect(modal.attributes('title')).toContain('Re-deploy'); + expect(modal.attributes('title')).toContain('test'); + expect(modal.attributes('ok-title')).toBe('Re-deploy'); + expect(modal.text()).toContain('commit abc0123'); + expect(modal.text()).toContain('Are you sure you want to continue?'); + }); + + it('should emit the "rollback" event when "ok" is clicked', () => { + environment = { ...environment, isLastDeployment: true }; + const component = shallowMount(ConfirmRollbackModal, { + propsData: { + environment, + }, + }); + const eventHubSpy = jest.spyOn(eventHub, '$emit'); + const modal = component.find(GlModal); + modal.vm.$emit('ok'); + + expect(eventHubSpy).toHaveBeenCalledWith('rollbackEnvironment', environment); + }); +}); diff --git a/spec/frontend/environments/environment_rollback_spec.js b/spec/frontend/environments/environment_rollback_spec.js new file mode 100644 index 00000000000..fb62a096c3d --- /dev/null +++ b/spec/frontend/environments/environment_rollback_spec.js @@ -0,0 +1,53 @@ +import { shallowMount, mount } from '@vue/test-utils'; +import { GlButton } from '@gitlab/ui'; +import eventHub from '~/environments/event_hub'; +import RollbackComponent from '~/environments/components/environment_rollback.vue'; + +describe('Rollback Component', () => { + const retryUrl = 'https://gitlab.com/retry'; + + it('Should render Re-deploy label when isLastDeployment is true', () => { + const wrapper = mount(RollbackComponent, { + propsData: { + retryUrl, + isLastDeployment: true, + environment: {}, + }, + }); + + expect(wrapper.element).toHaveSpriteIcon('repeat'); + }); + + it('Should render Rollback label when isLastDeployment is false', () => { + const wrapper = mount(RollbackComponent, { + propsData: { + retryUrl, + isLastDeployment: false, + environment: {}, + }, + }); + + expect(wrapper.element).toHaveSpriteIcon('redo'); + }); + + it('should emit a "rollback" event on button click', () => { + const eventHubSpy = jest.spyOn(eventHub, '$emit'); + const wrapper = shallowMount(RollbackComponent, { + propsData: { + retryUrl, + environment: { + name: 'test', + }, + }, + }); + const button = wrapper.find(GlButton); + + button.vm.$emit('click'); + + expect(eventHubSpy).toHaveBeenCalledWith('requestRollbackEnvironment', { + retryUrl, + isLastDeployment: true, + name: 'test', + }); + }); +}); diff --git a/spec/frontend/error_tracking_settings/components/app_spec.js b/spec/frontend/error_tracking_settings/components/app_spec.js new file mode 100644 index 00000000000..022f12ef191 --- /dev/null +++ b/spec/frontend/error_tracking_settings/components/app_spec.js @@ -0,0 +1,63 @@ +import Vuex from 'vuex'; +import { createLocalVue, shallowMount } from '@vue/test-utils'; +import ErrorTrackingSettings from '~/error_tracking_settings/components/app.vue'; +import ErrorTrackingForm from '~/error_tracking_settings/components/error_tracking_form.vue'; +import ProjectDropdown from '~/error_tracking_settings/components/project_dropdown.vue'; +import createStore from '~/error_tracking_settings/store'; +import { TEST_HOST } from 'helpers/test_constants'; + +const localVue = createLocalVue(); +localVue.use(Vuex); + +describe('error tracking settings app', () => { + let store; + let wrapper; + + function mountComponent() { + wrapper = shallowMount(ErrorTrackingSettings, { + localVue, + store, // Override the imported store + propsData: { + initialEnabled: 'true', + initialApiHost: TEST_HOST, + initialToken: 'someToken', + initialProject: null, + listProjectsEndpoint: TEST_HOST, + operationsSettingsEndpoint: TEST_HOST, + }, + }); + } + + beforeEach(() => { + store = createStore(); + + mountComponent(); + }); + + afterEach(() => { + if (wrapper) { + wrapper.destroy(); + } + }); + + describe('section', () => { + it('renders the form and dropdown', () => { + expect(wrapper.find(ErrorTrackingForm).exists()).toBeTruthy(); + expect(wrapper.find(ProjectDropdown).exists()).toBeTruthy(); + }); + + it('renders the Save Changes button', () => { + expect(wrapper.find('.js-error-tracking-button').exists()).toBeTruthy(); + }); + + it('enables the button by default', () => { + expect(wrapper.find('.js-error-tracking-button').attributes('disabled')).toBeFalsy(); + }); + + it('disables the button when saving', () => { + store.state.settingsLoading = true; + + expect(wrapper.find('.js-error-tracking-button').attributes('disabled')).toBeTruthy(); + }); + }); +}); diff --git a/spec/frontend/error_tracking_settings/components/error_tracking_form_spec.js b/spec/frontend/error_tracking_settings/components/error_tracking_form_spec.js new file mode 100644 index 00000000000..23e57c4bbf1 --- /dev/null +++ b/spec/frontend/error_tracking_settings/components/error_tracking_form_spec.js @@ -0,0 +1,91 @@ +import Vuex from 'vuex'; +import { createLocalVue, shallowMount } from '@vue/test-utils'; +import { GlButton, GlFormInput } from '@gitlab/ui'; +import ErrorTrackingForm from '~/error_tracking_settings/components/error_tracking_form.vue'; +import { defaultProps } from '../mock'; + +const localVue = createLocalVue(); +localVue.use(Vuex); + +describe('error tracking settings form', () => { + let wrapper; + + function mountComponent() { + wrapper = shallowMount(ErrorTrackingForm, { + localVue, + propsData: defaultProps, + }); + } + + beforeEach(() => { + mountComponent(); + }); + + afterEach(() => { + if (wrapper) { + wrapper.destroy(); + } + }); + + describe('an empty form', () => { + it('is rendered', () => { + expect(wrapper.findAll(GlFormInput).length).toBe(2); + expect(wrapper.find(GlFormInput).attributes('id')).toBe('error-tracking-api-host'); + expect( + wrapper + .findAll(GlFormInput) + .at(1) + .attributes('id'), + ).toBe('error-tracking-token'); + + expect(wrapper.findAll(GlButton).exists()).toBe(true); + }); + + it('is rendered with labels and placeholders', () => { + const pageText = wrapper.text(); + + expect(pageText).toContain('Find your hostname in your Sentry account settings page'); + expect(pageText).toContain( + "After adding your Auth Token, use the 'Connect' button to load projects", + ); + + expect(pageText).not.toContain('Connection has failed. Re-check Auth Token and try again'); + expect( + wrapper + .findAll(GlFormInput) + .at(0) + .attributes('placeholder'), + ).toContain('https://mysentryserver.com'); + }); + }); + + describe('after a successful connection', () => { + beforeEach(() => { + wrapper.setProps({ connectSuccessful: true }); + }); + + it('shows the success checkmark', () => { + expect(wrapper.find('.js-error-tracking-connect-success').isVisible()).toBe(true); + }); + + it('does not show an error', () => { + expect(wrapper.text()).not.toContain( + 'Connection has failed. Re-check Auth Token and try again', + ); + }); + }); + + describe('after an unsuccessful connection', () => { + beforeEach(() => { + wrapper.setProps({ connectError: true }); + }); + + it('does not show the check mark', () => { + expect(wrapper.find('.js-error-tracking-connect-success').isVisible()).toBe(false); + }); + + it('shows an error', () => { + expect(wrapper.text()).toContain('Connection has failed. Re-check Auth Token and try again'); + }); + }); +}); diff --git a/spec/frontend/error_tracking_settings/components/project_dropdown_spec.js b/spec/frontend/error_tracking_settings/components/project_dropdown_spec.js new file mode 100644 index 00000000000..8e5dbe28452 --- /dev/null +++ b/spec/frontend/error_tracking_settings/components/project_dropdown_spec.js @@ -0,0 +1,109 @@ +import _ from 'underscore'; +import Vuex from 'vuex'; +import { createLocalVue, shallowMount } from '@vue/test-utils'; +import { GlDropdown, GlDropdownItem } from '@gitlab/ui'; +import ProjectDropdown from '~/error_tracking_settings/components/project_dropdown.vue'; +import { defaultProps, projectList, staleProject } from '../mock'; + +const localVue = createLocalVue(); +localVue.use(Vuex); + +describe('error tracking settings project dropdown', () => { + let wrapper; + + function mountComponent() { + wrapper = shallowMount(ProjectDropdown, { + localVue, + propsData: { + ..._.pick( + defaultProps, + 'dropdownLabel', + 'invalidProjectLabel', + 'projects', + 'projectSelectionLabel', + 'selectedProject', + 'token', + ), + hasProjects: false, + isProjectInvalid: false, + }, + }); + } + + beforeEach(() => { + mountComponent(); + }); + + afterEach(() => { + if (wrapper) { + wrapper.destroy(); + } + }); + + describe('empty project list', () => { + it('renders the dropdown', () => { + expect(wrapper.find('#project-dropdown').exists()).toBeTruthy(); + expect(wrapper.find(GlDropdown).exists()).toBeTruthy(); + }); + + it('shows helper text', () => { + expect(wrapper.find('.js-project-dropdown-label').exists()).toBeTruthy(); + expect(wrapper.find('.js-project-dropdown-label').text()).toContain( + 'To enable project selection', + ); + }); + + it('does not show an error', () => { + expect(wrapper.find('.js-project-dropdown-error').exists()).toBeFalsy(); + }); + + it('does not contain any dropdown items', () => { + expect(wrapper.find(GlDropdownItem).exists()).toBeFalsy(); + expect(wrapper.find(GlDropdown).props('text')).toBe('No projects available'); + }); + }); + + describe('populated project list', () => { + beforeEach(() => { + wrapper.setProps({ projects: _.clone(projectList), hasProjects: true }); + }); + + it('renders the dropdown', () => { + expect(wrapper.find('#project-dropdown').exists()).toBeTruthy(); + expect(wrapper.find(GlDropdown).exists()).toBeTruthy(); + }); + + it('contains a number of dropdown items', () => { + expect(wrapper.find(GlDropdownItem).exists()).toBeTruthy(); + expect(wrapper.findAll(GlDropdownItem).length).toBe(2); + }); + }); + + describe('selected project', () => { + const selectedProject = _.clone(projectList[0]); + + beforeEach(() => { + wrapper.setProps({ projects: _.clone(projectList), selectedProject, hasProjects: true }); + }); + + it('does not show helper text', () => { + expect(wrapper.find('.js-project-dropdown-label').exists()).toBeFalsy(); + expect(wrapper.find('.js-project-dropdown-error').exists()).toBeFalsy(); + }); + }); + + describe('invalid project selected', () => { + beforeEach(() => { + wrapper.setProps({ + projects: _.clone(projectList), + selectedProject: staleProject, + isProjectInvalid: true, + }); + }); + + it('displays a error', () => { + expect(wrapper.find('.js-project-dropdown-label').exists()).toBeFalsy(); + expect(wrapper.find('.js-project-dropdown-error').exists()).toBeTruthy(); + }); + }); +}); diff --git a/spec/frontend/error_tracking_settings/mock.js b/spec/frontend/error_tracking_settings/mock.js new file mode 100644 index 00000000000..8c5bfd08beb --- /dev/null +++ b/spec/frontend/error_tracking_settings/mock.js @@ -0,0 +1,92 @@ +import createStore from '~/error_tracking_settings/store'; +import { TEST_HOST } from 'helpers/test_constants'; + +const defaultStore = createStore(); + +export const projectList = [ + { + name: 'name', + slug: 'slug', + organizationName: 'organizationName', + organizationSlug: 'organizationSlug', + }, + { + name: 'name2', + slug: 'slug2', + organizationName: 'organizationName2', + organizationSlug: 'organizationSlug2', + }, +]; + +export const staleProject = { + name: 'staleName', + slug: 'staleSlug', + organizationName: 'staleOrganizationName', + organizationSlug: 'staleOrganizationSlug', +}; + +export const normalizedProject = { + name: 'name', + slug: 'slug', + organizationName: 'organization_name', + organizationSlug: 'organization_slug', +}; + +export const sampleBackendProject = { + name: normalizedProject.name, + slug: normalizedProject.slug, + organization_name: normalizedProject.organizationName, + organization_slug: normalizedProject.organizationSlug, +}; + +export const sampleFrontendSettings = { + apiHost: 'apiHost', + enabled: false, + token: 'token', + selectedProject: { + slug: normalizedProject.slug, + name: normalizedProject.name, + organizationName: normalizedProject.organizationName, + organizationSlug: normalizedProject.organizationSlug, + }, +}; + +export const transformedSettings = { + api_host: 'apiHost', + enabled: false, + token: 'token', + project: { + slug: normalizedProject.slug, + name: normalizedProject.name, + organization_name: normalizedProject.organizationName, + organization_slug: normalizedProject.organizationSlug, + }, +}; + +export const defaultProps = { + ...defaultStore.state, + ...defaultStore.getters, +}; + +export const initialEmptyState = { + apiHost: '', + enabled: false, + project: null, + token: '', + listProjectsEndpoint: TEST_HOST, + operationsSettingsEndpoint: TEST_HOST, +}; + +export const initialPopulatedState = { + apiHost: 'apiHost', + enabled: true, + project: JSON.stringify(projectList[0]), + token: 'token', + listProjectsEndpoint: TEST_HOST, + operationsSettingsEndpoint: TEST_HOST, +}; + +export const projectWithHtmlTemplate = { + ...projectList[0], + name: '<strong>bold</strong>', +}; diff --git a/spec/frontend/error_tracking_settings/store/actions_spec.js b/spec/frontend/error_tracking_settings/store/actions_spec.js new file mode 100644 index 00000000000..1eab0f7470b --- /dev/null +++ b/spec/frontend/error_tracking_settings/store/actions_spec.js @@ -0,0 +1,194 @@ +import MockAdapter from 'axios-mock-adapter'; +import testAction from 'helpers/vuex_action_helper'; +import { TEST_HOST } from 'helpers/test_constants'; +import axios from '~/lib/utils/axios_utils'; +import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils'; +import { refreshCurrentPage } from '~/lib/utils/url_utility'; +import * as actions from '~/error_tracking_settings/store/actions'; +import * as types from '~/error_tracking_settings/store/mutation_types'; +import defaultState from '~/error_tracking_settings/store/state'; +import { projectList } from '../mock'; + +jest.mock('~/lib/utils/url_utility'); + +describe('error tracking settings actions', () => { + let state; + + describe('project list actions', () => { + let mock; + + beforeEach(() => { + mock = new MockAdapter(axios); + state = { ...defaultState(), listProjectsEndpoint: TEST_HOST }; + }); + + afterEach(() => { + mock.restore(); + refreshCurrentPage.mockClear(); + }); + + it('should request and transform the project list', done => { + mock.onPost(TEST_HOST).reply(() => [200, { projects: projectList }]); + testAction( + actions.fetchProjects, + null, + state, + [], + [ + { type: 'requestProjects' }, + { + type: 'receiveProjectsSuccess', + payload: projectList.map(convertObjectPropsToCamelCase), + }, + ], + () => { + expect(mock.history.post.length).toBe(1); + done(); + }, + ); + }); + + it('should handle a server error', done => { + mock.onPost(`${TEST_HOST}.json`).reply(() => [400]); + testAction( + actions.fetchProjects, + null, + state, + [], + [ + { type: 'requestProjects' }, + { + type: 'receiveProjectsError', + }, + ], + () => { + expect(mock.history.post.length).toBe(1); + done(); + }, + ); + }); + + it('should request projects correctly', done => { + testAction(actions.requestProjects, null, state, [{ type: types.RESET_CONNECT }], [], done); + }); + + it('should receive projects correctly', done => { + const testPayload = []; + testAction( + actions.receiveProjectsSuccess, + testPayload, + state, + [ + { type: types.UPDATE_CONNECT_SUCCESS }, + { type: types.RECEIVE_PROJECTS, payload: testPayload }, + ], + [], + done, + ); + }); + + it('should handle errors when receiving projects', done => { + const testPayload = []; + testAction( + actions.receiveProjectsError, + testPayload, + state, + [{ type: types.UPDATE_CONNECT_ERROR }, { type: types.CLEAR_PROJECTS }], + [], + done, + ); + }); + }); + + describe('save changes actions', () => { + let mock; + + beforeEach(() => { + mock = new MockAdapter(axios); + state = { + operationsSettingsEndpoint: TEST_HOST, + }; + }); + + afterEach(() => { + mock.restore(); + }); + + it('should save the page', done => { + mock.onPatch(TEST_HOST).reply(200); + testAction(actions.updateSettings, null, state, [], [{ type: 'requestSettings' }], () => { + expect(mock.history.patch.length).toBe(1); + expect(refreshCurrentPage).toHaveBeenCalled(); + done(); + }); + }); + + it('should handle a server error', done => { + mock.onPatch(TEST_HOST).reply(400); + testAction( + actions.updateSettings, + null, + state, + [], + [ + { type: 'requestSettings' }, + { + type: 'receiveSettingsError', + payload: new Error('Request failed with status code 400'), + }, + ], + () => { + expect(mock.history.patch.length).toBe(1); + done(); + }, + ); + }); + + it('should request to save the page', done => { + testAction( + actions.requestSettings, + null, + state, + [{ type: types.UPDATE_SETTINGS_LOADING, payload: true }], + [], + done, + ); + }); + + it('should handle errors when requesting to save the page', done => { + testAction( + actions.receiveSettingsError, + {}, + state, + [{ type: types.UPDATE_SETTINGS_LOADING, payload: false }], + [], + done, + ); + }); + }); + + describe('generic actions to update the store', () => { + const testData = 'test'; + it('should reset the `connect success` flag when updating the api host', done => { + testAction( + actions.updateApiHost, + testData, + state, + [{ type: types.UPDATE_API_HOST, payload: testData }, { type: types.RESET_CONNECT }], + [], + done, + ); + }); + + it('should reset the `connect success` flag when updating the token', done => { + testAction( + actions.updateToken, + testData, + state, + [{ type: types.UPDATE_TOKEN, payload: testData }, { type: types.RESET_CONNECT }], + [], + done, + ); + }); + }); +}); diff --git a/spec/frontend/error_tracking_settings/store/getters_spec.js b/spec/frontend/error_tracking_settings/store/getters_spec.js new file mode 100644 index 00000000000..2c5ff084b8a --- /dev/null +++ b/spec/frontend/error_tracking_settings/store/getters_spec.js @@ -0,0 +1,93 @@ +import * as getters from '~/error_tracking_settings/store/getters'; +import defaultState from '~/error_tracking_settings/store/state'; +import { projectList, projectWithHtmlTemplate, staleProject } from '../mock'; + +describe('Error Tracking Settings - Getters', () => { + let state; + + beforeEach(() => { + state = defaultState(); + }); + + describe('hasProjects', () => { + it('should reflect when no projects exist', () => { + expect(getters.hasProjects(state)).toEqual(false); + }); + + it('should reflect when projects exist', () => { + state.projects = projectList; + + expect(getters.hasProjects(state)).toEqual(true); + }); + }); + + describe('isProjectInvalid', () => { + const mockGetters = { hasProjects: true }; + it('should show when a project is valid', () => { + state.projects = projectList; + [state.selectedProject] = projectList; + + expect(getters.isProjectInvalid(state, mockGetters)).toEqual(false); + }); + + it('should show when a project is invalid', () => { + state.projects = projectList; + state.selectedProject = staleProject; + + expect(getters.isProjectInvalid(state, mockGetters)).toEqual(true); + }); + }); + + describe('dropdownLabel', () => { + const mockGetters = { hasProjects: false }; + it('should display correctly when there are no projects available', () => { + expect(getters.dropdownLabel(state, mockGetters)).toEqual('No projects available'); + }); + + it('should display correctly when a project is selected', () => { + [state.selectedProject] = projectList; + + expect(getters.dropdownLabel(state, mockGetters)).toEqual('organizationName | name'); + }); + + it('should display correctly when no project is selected', () => { + state.projects = projectList; + + expect(getters.dropdownLabel(state, { hasProjects: true })).toEqual('Select project'); + }); + }); + + describe('invalidProjectLabel', () => { + it('should display an error containing the project name', () => { + [state.selectedProject] = projectList; + + expect(getters.invalidProjectLabel(state)).toEqual( + 'Project "name" is no longer available. Select another project to continue.', + ); + }); + + it('should properly escape the label text', () => { + state.selectedProject = projectWithHtmlTemplate; + + expect(getters.invalidProjectLabel(state)).toEqual( + 'Project "<strong>bold</strong>" is no longer available. Select another project to continue.', + ); + }); + }); + + describe('projectSelectionLabel', () => { + it('should show the correct message when the token is empty', () => { + expect(getters.projectSelectionLabel(state)).toEqual( + 'To enable project selection, enter a valid Auth Token', + ); + }); + + it('should show the correct message when token exists', () => { + state.token = 'test-token'; + + expect(getters.projectSelectionLabel(state)).toEqual( + "Click 'Connect' to re-establish the connection to Sentry and activate the dropdown.", + ); + }); + }); +}); diff --git a/spec/frontend/error_tracking_settings/store/mutation_spec.js b/spec/frontend/error_tracking_settings/store/mutation_spec.js new file mode 100644 index 00000000000..fa188462c3f --- /dev/null +++ b/spec/frontend/error_tracking_settings/store/mutation_spec.js @@ -0,0 +1,82 @@ +import { TEST_HOST } from 'helpers/test_constants'; +import mutations from '~/error_tracking_settings/store/mutations'; +import defaultState from '~/error_tracking_settings/store/state'; +import * as types from '~/error_tracking_settings/store/mutation_types'; +import { + initialEmptyState, + initialPopulatedState, + projectList, + sampleBackendProject, + normalizedProject, +} from '../mock'; + +describe('error tracking settings mutations', () => { + describe('mutations', () => { + let state; + + beforeEach(() => { + state = defaultState(); + }); + + it('should create an empty initial state correctly', () => { + mutations[types.SET_INITIAL_STATE](state, { + ...initialEmptyState, + }); + + expect(state.apiHost).toEqual(''); + expect(state.enabled).toEqual(false); + expect(state.selectedProject).toEqual(null); + expect(state.token).toEqual(''); + expect(state.listProjectsEndpoint).toEqual(TEST_HOST); + expect(state.operationsSettingsEndpoint).toEqual(TEST_HOST); + }); + + it('should populate the initial state correctly', () => { + mutations[types.SET_INITIAL_STATE](state, { + ...initialPopulatedState, + }); + + expect(state.apiHost).toEqual('apiHost'); + expect(state.enabled).toEqual(true); + expect(state.selectedProject).toEqual(projectList[0]); + expect(state.token).toEqual('token'); + expect(state.listProjectsEndpoint).toEqual(TEST_HOST); + expect(state.operationsSettingsEndpoint).toEqual(TEST_HOST); + }); + + it('should receive projects successfully', () => { + mutations[types.RECEIVE_PROJECTS](state, [sampleBackendProject]); + + expect(state.projects).toEqual([normalizedProject]); + }); + + it('should strip out unnecessary project properties', () => { + mutations[types.RECEIVE_PROJECTS](state, [ + { ...sampleBackendProject, extra_property: 'extra_property' }, + ]); + + expect(state.projects).toEqual([normalizedProject]); + }); + + it('should update state when connect is successful', () => { + mutations[types.UPDATE_CONNECT_SUCCESS](state); + + expect(state.connectSuccessful).toBe(true); + expect(state.connectError).toBe(false); + }); + + it('should update state when connect fails', () => { + mutations[types.UPDATE_CONNECT_ERROR](state); + + expect(state.connectSuccessful).toBe(false); + expect(state.connectError).toBe(true); + }); + + it('should update state when connect is reset', () => { + mutations[types.RESET_CONNECT](state); + + expect(state.connectSuccessful).toBe(false); + expect(state.connectError).toBe(false); + }); + }); +}); diff --git a/spec/frontend/error_tracking_settings/utils_spec.js b/spec/frontend/error_tracking_settings/utils_spec.js new file mode 100644 index 00000000000..4b144f7daf1 --- /dev/null +++ b/spec/frontend/error_tracking_settings/utils_spec.js @@ -0,0 +1,29 @@ +import { transformFrontendSettings } from '~/error_tracking_settings/utils'; +import { sampleFrontendSettings, transformedSettings } from './mock'; + +describe('error tracking settings utils', () => { + describe('data transform functions', () => { + it('should transform settings successfully for the backend', () => { + expect(transformFrontendSettings(sampleFrontendSettings)).toEqual(transformedSettings); + }); + + it('should transform empty values in the settings object to null', () => { + const emptyFrontendSettingsObject = { + apiHost: '', + enabled: false, + token: '', + selectedProject: null, + }; + const transformedEmptySettingsObject = { + api_host: null, + enabled: false, + token: null, + project: null, + }; + + expect(transformFrontendSettings(emptyFrontendSettingsObject)).toEqual( + transformedEmptySettingsObject, + ); + }); + }); +}); diff --git a/spec/frontend/filterable_list_spec.js b/spec/frontend/filterable_list_spec.js new file mode 100644 index 00000000000..67d18611661 --- /dev/null +++ b/spec/frontend/filterable_list_spec.js @@ -0,0 +1,53 @@ +import FilterableList from '~/filterable_list'; +import { getJSONFixture, setHTMLFixture } from './helpers/fixtures'; + +describe('FilterableList', () => { + let List; + let form; + let filter; + let holder; + + beforeEach(() => { + setHTMLFixture(` + <form id="project-filter-form"> + <input name="name" class="js-projects-list-filter" /> + </div> + <div class="js-projects-list-holder"></div> + `); + getJSONFixture('static/projects.json'); + form = document.querySelector('form#project-filter-form'); + filter = document.querySelector('.js-projects-list-filter'); + holder = document.querySelector('.js-projects-list-holder'); + List = new FilterableList(form, filter, holder); + }); + + it('processes input parameters', () => { + expect(List.filterForm).toEqual(form); + expect(List.listFilterElement).toEqual(filter); + expect(List.listHolderElement).toEqual(holder); + }); + + describe('getPagePath', () => { + it('returns properly constructed base endpoint', () => { + List.filterForm.action = '/foo/bar/'; + List.listFilterElement.value = 'blah'; + + expect(List.getPagePath()).toEqual('/foo/bar/?name=blah'); + }); + + it('properly appends custom parameters to existing URL', () => { + List.filterForm.action = '/foo/bar?alpha=beta'; + List.listFilterElement.value = 'blah'; + + expect(List.getPagePath()).toEqual('/foo/bar?alpha=beta&name=blah'); + }); + }); + + describe('getFilterEndpoint', () => { + it('returns getPagePath by default', () => { + jest.spyOn(List, 'getPagePath').mockReturnValue('blah/blah/foo'); + + expect(List.getFilterEndpoint()).toEqual(List.getPagePath()); + }); + }); +}); diff --git a/spec/frontend/fixtures/abuse_reports.rb b/spec/frontend/fixtures/abuse_reports.rb new file mode 100644 index 00000000000..21356390cae --- /dev/null +++ b/spec/frontend/fixtures/abuse_reports.rb @@ -0,0 +1,26 @@ +require 'spec_helper' + +describe Admin::AbuseReportsController, '(JavaScript fixtures)', type: :controller do + include JavaScriptFixturesHelpers + + let(:admin) { create(:admin) } + let!(:abuse_report) { create(:abuse_report) } + let!(:abuse_report_with_short_message) { create(:abuse_report, message: 'SHORT MESSAGE') } + let!(:abuse_report_with_long_message) { create(:abuse_report, message: "LONG MESSAGE\n" * 50) } + + render_views + + before(:all) do + clean_frontend_fixtures('abuse_reports/') + end + + before do + sign_in(admin) + end + + it 'abuse_reports/abuse_reports_list.html' do + get :index + + expect(response).to be_successful + end +end diff --git a/spec/frontend/fixtures/admin_users.rb b/spec/frontend/fixtures/admin_users.rb new file mode 100644 index 00000000000..0209594dadc --- /dev/null +++ b/spec/frontend/fixtures/admin_users.rb @@ -0,0 +1,28 @@ +require 'spec_helper' + +describe Admin::UsersController, '(JavaScript fixtures)', type: :controller do + include StubENV + include JavaScriptFixturesHelpers + + let(:admin) { create(:admin) } + + before do + stub_env('IN_MEMORY_APPLICATION_SETTINGS', 'false') + sign_in(admin) + end + + render_views + + before(:all) do + clean_frontend_fixtures('admin/users') + end + + it 'admin/users/new_with_internal_user_regex.html' do + stub_application_setting(user_default_external: true) + stub_application_setting(user_default_internal_regex: '^(?:(?!\.ext@).)*$\r?') + + get :new + + expect(response).to be_successful + end +end diff --git a/spec/frontend/fixtures/application_settings.rb b/spec/frontend/fixtures/application_settings.rb new file mode 100644 index 00000000000..38a060580c1 --- /dev/null +++ b/spec/frontend/fixtures/application_settings.rb @@ -0,0 +1,33 @@ +require 'spec_helper' + +describe Admin::ApplicationSettingsController, '(JavaScript fixtures)', type: :controller do + include StubENV + include JavaScriptFixturesHelpers + + let(:admin) { create(:admin) } + let(:namespace) { create(:namespace, name: 'frontend-fixtures' )} + let(:project) { create(:project_empty_repo, namespace: namespace, path: 'application-settings') } + + before do + stub_env('IN_MEMORY_APPLICATION_SETTINGS', 'false') + sign_in(admin) + end + + render_views + + before(:all) do + clean_frontend_fixtures('application_settings/') + end + + after do + remove_repository(project) + end + + it 'application_settings/accounts_and_limit.html' do + stub_application_setting(user_default_external: false) + + get :show + + expect(response).to be_successful + end +end diff --git a/spec/frontend/fixtures/autocomplete_sources.rb b/spec/frontend/fixtures/autocomplete_sources.rb new file mode 100644 index 00000000000..9e04328e2b9 --- /dev/null +++ b/spec/frontend/fixtures/autocomplete_sources.rb @@ -0,0 +1,39 @@ +# frozen_string_literal: true + +require 'spec_helper' + +describe Projects::AutocompleteSourcesController, '(JavaScript fixtures)', type: :controller do + include JavaScriptFixturesHelpers + + set(:admin) { create(:admin) } + set(:group) { create(:group, name: 'frontend-fixtures') } + set(:project) { create(:project, namespace: group, path: 'autocomplete-sources-project') } + set(:issue) { create(:issue, project: project) } + + before(:all) do + clean_frontend_fixtures('autocomplete_sources/') + end + + before do + sign_in(admin) + end + + it 'autocomplete_sources/labels.json' do + issue.labels << create(:label, project: project, title: 'bug') + issue.labels << create(:label, project: project, title: 'critical') + + create(:label, project: project, title: 'feature') + create(:label, project: project, title: 'documentation') + + get :labels, + format: :json, + params: { + namespace_id: group.path, + project_id: project.path, + type: issue.class.name, + type_id: issue.id + } + + expect(response).to be_successful + end +end diff --git a/spec/frontend/fixtures/blob.rb b/spec/frontend/fixtures/blob.rb new file mode 100644 index 00000000000..ce5030efbf8 --- /dev/null +++ b/spec/frontend/fixtures/blob.rb @@ -0,0 +1,34 @@ +require 'spec_helper' + +describe Projects::BlobController, '(JavaScript fixtures)', type: :controller do + include JavaScriptFixturesHelpers + + let(:admin) { create(:admin) } + let(:namespace) { create(:namespace, name: 'frontend-fixtures' )} + let(:project) { create(:project, :repository, namespace: namespace, path: 'branches-project') } + + render_views + + before(:all) do + clean_frontend_fixtures('blob/') + end + + before do + sign_in(admin) + allow(SecureRandom).to receive(:hex).and_return('securerandomhex:thereisnospoon') + end + + after do + remove_repository(project) + end + + it 'blob/show.html' do + get(:show, params: { + namespace_id: project.namespace, + project_id: project, + id: 'add-ipython-files/files/ipython/basic.ipynb' + }) + + expect(response).to be_successful + end +end diff --git a/spec/frontend/fixtures/boards.rb b/spec/frontend/fixtures/boards.rb new file mode 100644 index 00000000000..f257d80390f --- /dev/null +++ b/spec/frontend/fixtures/boards.rb @@ -0,0 +1,28 @@ +require 'spec_helper' + +describe Projects::BoardsController, '(JavaScript fixtures)', type: :controller do + include JavaScriptFixturesHelpers + + let(:admin) { create(:admin) } + let(:namespace) { create(:namespace, name: 'frontend-fixtures' )} + let(:project) { create(:project, :repository, namespace: namespace, path: 'boards-project') } + + render_views + + before(:all) do + clean_frontend_fixtures('boards/') + end + + before do + sign_in(admin) + end + + it 'boards/show.html' do + get(:index, params: { + namespace_id: project.namespace, + project_id: project + }) + + expect(response).to be_successful + end +end diff --git a/spec/frontend/fixtures/branches.rb b/spec/frontend/fixtures/branches.rb new file mode 100644 index 00000000000..197fe42c52a --- /dev/null +++ b/spec/frontend/fixtures/branches.rb @@ -0,0 +1,32 @@ +require 'spec_helper' + +describe Projects::BranchesController, '(JavaScript fixtures)', type: :controller do + include JavaScriptFixturesHelpers + + let(:admin) { create(:admin) } + let(:namespace) { create(:namespace, name: 'frontend-fixtures' )} + let(:project) { create(:project, :repository, namespace: namespace, path: 'branches-project') } + + render_views + + before(:all) do + clean_frontend_fixtures('branches/') + end + + before do + sign_in(admin) + end + + after do + remove_repository(project) + end + + it 'branches/new_branch.html' do + get :new, params: { + namespace_id: project.namespace.to_param, + project_id: project + } + + expect(response).to be_successful + end +end diff --git a/spec/frontend/fixtures/clusters.rb b/spec/frontend/fixtures/clusters.rb new file mode 100644 index 00000000000..f15ef010807 --- /dev/null +++ b/spec/frontend/fixtures/clusters.rb @@ -0,0 +1,34 @@ +require 'spec_helper' + +describe Projects::ClustersController, '(JavaScript fixtures)', type: :controller do + include JavaScriptFixturesHelpers + + let(:admin) { create(:admin) } + let(:namespace) { create(:namespace, name: 'frontend-fixtures' )} + let(:project) { create(:project, :repository, namespace: namespace) } + let(:cluster) { create(:cluster, :provided_by_gcp, projects: [project]) } + + render_views + + before(:all) do + clean_frontend_fixtures('clusters/') + end + + before do + sign_in(admin) + end + + after do + remove_repository(project) + end + + it 'clusters/show_cluster.html' do + get :show, params: { + namespace_id: project.namespace.to_param, + project_id: project, + id: cluster + } + + expect(response).to be_successful + end +end diff --git a/spec/frontend/fixtures/commit.rb b/spec/frontend/fixtures/commit.rb new file mode 100644 index 00000000000..a328c455356 --- /dev/null +++ b/spec/frontend/fixtures/commit.rb @@ -0,0 +1,33 @@ +require 'spec_helper' + +describe Projects::CommitController, '(JavaScript fixtures)', type: :controller do + include JavaScriptFixturesHelpers + + set(:project) { create(:project, :repository) } + set(:user) { create(:user) } + let(:commit) { project.commit("master") } + + render_views + + before(:all) do + clean_frontend_fixtures('commit/') + end + + before do + project.add_maintainer(user) + sign_in(user) + allow(SecureRandom).to receive(:hex).and_return('securerandomhex:thereisnospoon') + end + + it 'commit/show.html' do + params = { + namespace_id: project.namespace, + project_id: project, + id: commit.id + } + + get :show, params: params + + expect(response).to be_successful + end +end diff --git a/spec/frontend/fixtures/deploy_keys.rb b/spec/frontend/fixtures/deploy_keys.rb new file mode 100644 index 00000000000..fca233c6f59 --- /dev/null +++ b/spec/frontend/fixtures/deploy_keys.rb @@ -0,0 +1,43 @@ +require 'spec_helper' + +describe Projects::DeployKeysController, '(JavaScript fixtures)', type: :controller do + include JavaScriptFixturesHelpers + + let(:admin) { create(:admin) } + let(:namespace) { create(:namespace, name: 'frontend-fixtures' )} + let(:project) { create(:project_empty_repo, namespace: namespace, path: 'todos-project') } + let(:project2) { create(:project, :internal)} + let(:project3) { create(:project, :internal)} + let(:project4) { create(:project, :internal)} + + before(:all) do + clean_frontend_fixtures('deploy_keys/') + end + + before do + sign_in(admin) + end + + after do + remove_repository(project) + end + + render_views + + it 'deploy_keys/keys.json' do + create(:rsa_deploy_key_2048, public: true) + project_key = create(:deploy_key, key: 'ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAAAgQCdMHEHyhRjbhEZVddFn6lTWdgEy5Q6Bz4nwGB76xWZI5YT/1WJOMEW+sL5zYd31kk7sd3FJ5L9ft8zWMWrr/iWXQikC2cqZK24H1xy+ZUmrRuJD4qGAaIVoyyzBL+avL+lF8J5lg6YSw8gwJY/lX64/vnJHUlWw2n5BF8IFOWhiw== dummy@gitlab.com') + internal_key = create(:deploy_key, key: 'ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAAAgQDNd/UJWhPrpb+b/G5oL109y57yKuCxE+WUGJGYaj7WQKsYRJmLYh1mgjrl+KVyfsWpq4ylOxIfFSnN9xBBFN8mlb0Fma5DC7YsSsibJr3MZ19ZNBprwNcdogET7aW9I0In7Wu5f2KqI6e5W/spJHCy4JVxzVMUvk6Myab0LnJ2iQ== dummy@gitlab.com') + create(:deploy_keys_project, project: project, deploy_key: project_key) + create(:deploy_keys_project, project: project2, deploy_key: internal_key) + create(:deploy_keys_project, project: project3, deploy_key: project_key) + create(:deploy_keys_project, project: project4, deploy_key: project_key) + + get :index, params: { + namespace_id: project.namespace.to_param, + project_id: project + }, format: :json + + expect(response).to be_successful + end +end diff --git a/spec/frontend/fixtures/groups.rb b/spec/frontend/fixtures/groups.rb new file mode 100644 index 00000000000..c1bb2d43332 --- /dev/null +++ b/spec/frontend/fixtures/groups.rb @@ -0,0 +1,35 @@ +require 'spec_helper' + +describe 'Groups (JavaScript fixtures)', type: :controller do + include JavaScriptFixturesHelpers + + let(:admin) { create(:admin) } + let(:group) { create(:group, name: 'frontend-fixtures-group', runners_token: 'runnerstoken:intabulasreferre')} + + render_views + + before(:all) do + clean_frontend_fixtures('groups/') + end + + before do + group.add_maintainer(admin) + sign_in(admin) + end + + describe GroupsController, '(JavaScript fixtures)', type: :controller do + it 'groups/edit.html' do + get :edit, params: { id: group } + + expect(response).to be_successful + end + end + + describe Groups::Settings::CiCdController, '(JavaScript fixtures)', type: :controller do + it 'groups/ci_cd_settings.html' do + get :show, params: { group_id: group } + + expect(response).to be_successful + end + end +end diff --git a/spec/frontend/fixtures/issues.rb b/spec/frontend/fixtures/issues.rb new file mode 100644 index 00000000000..b5eb38e0023 --- /dev/null +++ b/spec/frontend/fixtures/issues.rb @@ -0,0 +1,122 @@ +require 'spec_helper' + +describe Projects::IssuesController, '(JavaScript fixtures)', type: :controller do + include JavaScriptFixturesHelpers + + let(:admin) { create(:admin, feed_token: 'feedtoken:coldfeed') } + let(:namespace) { create(:namespace, name: 'frontend-fixtures' )} + let(:project) { create(:project_empty_repo, namespace: namespace, path: 'issues-project') } + + render_views + + before(:all) do + clean_frontend_fixtures('issues/') + end + + before do + sign_in(admin) + end + + after do + remove_repository(project) + end + + it 'issues/open-issue.html' do + render_issue(create(:issue, project: project)) + end + + it 'issues/closed-issue.html' do + render_issue(create(:closed_issue, project: project)) + end + + it 'issues/issue-with-task-list.html' do + issue = create(:issue, project: project, description: '- [ ] Task List Item') + render_issue(issue) + end + + it 'issues/issue_with_comment.html' do + issue = create(:issue, project: project) + create(:note, project: project, noteable: issue, note: '- [ ] Task List Item').save + render_issue(issue) + end + + it 'issues/issue_list.html' do + create(:issue, project: project) + + get :index, params: { + namespace_id: project.namespace.to_param, + project_id: project + } + + expect(response).to be_successful + end + + private + + def render_issue(issue) + get :show, params: { + namespace_id: project.namespace.to_param, + project_id: project, + id: issue.to_param + } + + expect(response).to be_successful + end +end + +describe API::Issues, '(JavaScript fixtures)', type: :request do + include ApiHelpers + include JavaScriptFixturesHelpers + + def get_related_merge_requests(project_id, issue_iid, user = nil) + get api("/projects/#{project_id}/issues/#{issue_iid}/related_merge_requests", user) + end + + def create_referencing_mr(user, project, issue) + attributes = { + author: user, + source_project: project, + target_project: project, + source_branch: "master", + target_branch: "test", + assignee: user, + description: "See #{issue.to_reference}" + } + create(:merge_request, attributes).tap do |merge_request| + create(:note, :system, project: issue.project, noteable: issue, author: user, note: merge_request.to_reference(full: true)) + end + end + + it 'issues/related_merge_requests.json' do + user = create(:user) + project = create(:project, :public, creator_id: user.id, namespace: user.namespace) + issue_title = 'foo' + issue_description = 'closed' + milestone = create(:milestone, title: '1.0.0', project: project) + issue = create :issue, + author: user, + assignees: [user], + project: project, + milestone: milestone, + created_at: generate(:past_time), + updated_at: 1.hour.ago, + title: issue_title, + description: issue_description + + project.add_reporter(user) + create_referencing_mr(user, project, issue) + + create(:merge_request, + :simple, + author: user, + source_project: project, + target_project: project, + description: "Some description") + project2 = create(:project, :public, creator_id: user.id, namespace: user.namespace) + create_referencing_mr(user, project2, issue).update!(head_pipeline: create(:ci_pipeline)) + + get_related_merge_requests(project.id, issue.iid, user) + + expect(response).to be_successful + end +end diff --git a/spec/frontend/fixtures/jobs.rb b/spec/frontend/fixtures/jobs.rb new file mode 100644 index 00000000000..a3a7759c85b --- /dev/null +++ b/spec/frontend/fixtures/jobs.rb @@ -0,0 +1,54 @@ +require 'spec_helper' + +describe Projects::JobsController, '(JavaScript fixtures)', type: :controller do + include JavaScriptFixturesHelpers + + let(:admin) { create(:admin) } + let(:namespace) { create(:namespace, name: 'frontend-fixtures' )} + let(:project) { create(:project, :repository, namespace: namespace, path: 'builds-project') } + let(:pipeline) { create(:ci_empty_pipeline, project: project, sha: project.commit.id) } + let!(:build_with_artifacts) { create(:ci_build, :success, :artifacts, :trace_artifact, pipeline: pipeline, stage: 'test', artifacts_expire_at: Time.now + 18.months) } + let!(:failed_build) { create(:ci_build, :failed, pipeline: pipeline, stage: 'build') } + let!(:pending_build) { create(:ci_build, :pending, pipeline: pipeline, stage: 'deploy') } + let!(:delayed_job) do + create(:ci_build, :scheduled, + pipeline: pipeline, + name: 'delayed job', + stage: 'test') + end + + render_views + + before(:all) do + clean_frontend_fixtures('builds/') + clean_frontend_fixtures('jobs/') + end + + before do + sign_in(admin) + end + + after do + remove_repository(project) + end + + it 'builds/build-with-artifacts.html' do + get :show, params: { + namespace_id: project.namespace.to_param, + project_id: project, + id: build_with_artifacts.to_param + } + + expect(response).to be_successful + end + + it 'jobs/delayed.json' do + get :show, params: { + namespace_id: project.namespace.to_param, + project_id: project, + id: delayed_job.to_param + }, format: :json + + expect(response).to be_successful + end +end diff --git a/spec/frontend/fixtures/labels.rb b/spec/frontend/fixtures/labels.rb new file mode 100644 index 00000000000..a312287970f --- /dev/null +++ b/spec/frontend/fixtures/labels.rb @@ -0,0 +1,58 @@ +require 'spec_helper' + +describe 'Labels (JavaScript fixtures)' do + include JavaScriptFixturesHelpers + + let(:admin) { create(:admin) } + let(:group) { create(:group, name: 'frontend-fixtures-group' )} + let(:project) { create(:project_empty_repo, namespace: group, path: 'labels-project') } + + let!(:project_label_bug) { create(:label, project: project, title: 'bug', color: '#FF0000') } + let!(:project_label_enhancement) { create(:label, project: project, title: 'enhancement', color: '#00FF00') } + let!(:project_label_feature) { create(:label, project: project, title: 'feature', color: '#0000FF') } + + let!(:group_label_roses) { create(:group_label, group: group, title: 'roses', color: '#FF0000') } + let!(:groub_label_space) { create(:group_label, group: group, title: 'some space', color: '#FFFFFF') } + let!(:groub_label_violets) { create(:group_label, group: group, title: 'violets', color: '#0000FF') } + + before(:all) do + clean_frontend_fixtures('labels/') + end + + after do + remove_repository(project) + end + + describe Groups::LabelsController, '(JavaScript fixtures)', type: :controller do + render_views + + before do + sign_in(admin) + end + + it 'labels/group_labels.json' do + get :index, params: { + group_id: group + }, format: 'json' + + expect(response).to be_successful + end + end + + describe Projects::LabelsController, '(JavaScript fixtures)', type: :controller do + render_views + + before do + sign_in(admin) + end + + it 'labels/project_labels.json' do + get :index, params: { + namespace_id: group, + project_id: project + }, format: 'json' + + expect(response).to be_successful + end + end +end diff --git a/spec/frontend/fixtures/merge_requests.rb b/spec/frontend/fixtures/merge_requests.rb new file mode 100644 index 00000000000..88706e96676 --- /dev/null +++ b/spec/frontend/fixtures/merge_requests.rb @@ -0,0 +1,134 @@ +require 'spec_helper' + +describe Projects::MergeRequestsController, '(JavaScript fixtures)', type: :controller do + include JavaScriptFixturesHelpers + + let(:admin) { create(:admin) } + let(:namespace) { create(:namespace, name: 'frontend-fixtures' )} + let(:project) { create(:project, :repository, namespace: namespace, path: 'merge-requests-project') } + let(:merge_request) { create(:merge_request, :with_diffs, source_project: project, target_project: project, description: '- [ ] Task List Item') } + let(:merged_merge_request) { create(:merge_request, :merged, source_project: project, target_project: project) } + let(:pipeline) do + create( + :ci_pipeline, + project: merge_request.source_project, + ref: merge_request.source_branch, + sha: merge_request.diff_head_sha + ) + end + let(:path) { "files/ruby/popen.rb" } + let(:position) do + Gitlab::Diff::Position.new( + old_path: path, + new_path: path, + old_line: nil, + new_line: 14, + diff_refs: merge_request.diff_refs + ) + end + + render_views + + before(:all) do + clean_frontend_fixtures('merge_requests/') + end + + before do + sign_in(admin) + allow(Discussion).to receive(:build_discussion_id).and_return(['discussionid:ceterumcenseo']) + end + + after do + remove_repository(project) + end + + it 'merge_requests/merge_request_of_current_user.html' do + merge_request.update(author: admin) + + render_merge_request(merge_request) + end + + it 'merge_requests/merge_request_with_task_list.html' do + create(:ci_build, :pending, pipeline: pipeline) + + render_merge_request(merge_request) + end + + it 'merge_requests/merged_merge_request.html' do + expect_next_instance_of(MergeRequest) do |merge_request| + allow(merge_request).to receive(:source_branch_exists?).and_return(true) + allow(merge_request).to receive(:can_remove_source_branch?).and_return(true) + end + render_merge_request(merged_merge_request) + end + + it 'merge_requests/diff_comment.html' do + create(:diff_note_on_merge_request, project: project, author: admin, position: position, noteable: merge_request) + create(:note_on_merge_request, author: admin, project: project, noteable: merge_request) + render_merge_request(merge_request) + end + + it 'merge_requests/merge_request_with_comment.html' do + create(:note_on_merge_request, author: admin, project: project, noteable: merge_request, note: '- [ ] Task List Item') + render_merge_request(merge_request) + end + + it 'merge_requests/discussions.json' do + create(:diff_note_on_merge_request, project: project, author: admin, position: position, noteable: merge_request) + render_discussions_json(merge_request) + end + + it 'merge_requests/diff_discussion.json' do + create(:diff_note_on_merge_request, project: project, author: admin, position: position, noteable: merge_request) + render_discussions_json(merge_request) + end + + it 'merge_requests/resolved_diff_discussion.json' do + note = create(:discussion_note_on_merge_request, :resolved, project: project, author: admin, position: position, noteable: merge_request) + create(:system_note, project: project, author: admin, noteable: merge_request, discussion_id: note.discussion.id) + + render_discussions_json(merge_request) + end + + context 'with image diff' do + let(:merge_request2) { create(:merge_request_with_diffs, :with_image_diffs, source_project: project, title: "Added images") } + let(:image_path) { "files/images/ee_repo_logo.png" } + let(:image_position) do + Gitlab::Diff::Position.new( + old_path: image_path, + new_path: image_path, + width: 100, + height: 100, + x: 1, + y: 1, + position_type: "image", + diff_refs: merge_request2.diff_refs + ) + end + + it 'merge_requests/image_diff_discussion.json' do + create(:diff_note_on_merge_request, project: project, noteable: merge_request2, position: image_position) + render_discussions_json(merge_request2) + end + end + + private + + def render_discussions_json(merge_request) + get :discussions, params: { + namespace_id: project.namespace.to_param, + project_id: project, + id: merge_request.to_param + }, format: :json + end + + def render_merge_request(merge_request) + get :show, params: { + namespace_id: project.namespace.to_param, + project_id: project, + id: merge_request.to_param + }, format: :html + + expect(response).to be_successful + end +end diff --git a/spec/frontend/fixtures/merge_requests_diffs.rb b/spec/frontend/fixtures/merge_requests_diffs.rb new file mode 100644 index 00000000000..b633a0495a6 --- /dev/null +++ b/spec/frontend/fixtures/merge_requests_diffs.rb @@ -0,0 +1,69 @@ +require 'spec_helper' + +describe Projects::MergeRequests::DiffsController, '(JavaScript fixtures)', type: :controller do + include JavaScriptFixturesHelpers + + let(:admin) { create(:admin) } + let(:namespace) { create(:namespace, name: 'frontend-fixtures' )} + let(:project) { create(:project, :repository, namespace: namespace, path: 'merge-requests-project') } + let(:merge_request) { create(:merge_request, :with_diffs, source_project: project, target_project: project, description: '- [ ] Task List Item') } + let(:path) { "files/ruby/popen.rb" } + let(:selected_commit) { merge_request.all_commits[0] } + let(:position) do + Gitlab::Diff::Position.new( + old_path: path, + new_path: path, + old_line: nil, + new_line: 14, + diff_refs: merge_request.diff_refs + ) + end + + render_views + + before(:all) do + clean_frontend_fixtures('merge_request_diffs/') + end + + before do + sign_in(admin) + end + + after do + remove_repository(project) + end + + it 'merge_request_diffs/with_commit.json' do + # Create a user that matches the selected commit author + # This is so that the "author" information will be populated + create(:user, email: selected_commit.author_email, name: selected_commit.author_name) + + render_merge_request(merge_request, commit_id: selected_commit.sha) + end + + it 'merge_request_diffs/inline_changes_tab_with_comments.json' do + create(:diff_note_on_merge_request, project: project, author: admin, position: position, noteable: merge_request) + create(:note_on_merge_request, author: admin, project: project, noteable: merge_request) + render_merge_request(merge_request) + end + + it 'merge_request_diffs/parallel_changes_tab_with_comments.json' do + create(:diff_note_on_merge_request, project: project, author: admin, position: position, noteable: merge_request) + create(:note_on_merge_request, author: admin, project: project, noteable: merge_request) + render_merge_request(merge_request, view: 'parallel') + end + + private + + def render_merge_request(merge_request, view: 'inline', **extra_params) + get :show, params: { + namespace_id: project.namespace.to_param, + project_id: project, + id: merge_request.to_param, + view: view, + **extra_params + }, format: :json + + expect(response).to be_successful + end +end diff --git a/spec/frontend/fixtures/pipeline_schedules.rb b/spec/frontend/fixtures/pipeline_schedules.rb new file mode 100644 index 00000000000..a70091a3919 --- /dev/null +++ b/spec/frontend/fixtures/pipeline_schedules.rb @@ -0,0 +1,43 @@ +require 'spec_helper' + +describe Projects::PipelineSchedulesController, '(JavaScript fixtures)', type: :controller do + include JavaScriptFixturesHelpers + + let(:admin) { create(:admin) } + let(:namespace) { create(:namespace, name: 'frontend-fixtures' )} + let(:project) { create(:project, :public, :repository) } + let!(:pipeline_schedule) { create(:ci_pipeline_schedule, project: project, owner: admin) } + let!(:pipeline_schedule_populated) { create(:ci_pipeline_schedule, project: project, owner: admin) } + let!(:pipeline_schedule_variable1) { create(:ci_pipeline_schedule_variable, key: 'foo', value: 'foovalue', pipeline_schedule: pipeline_schedule_populated) } + let!(:pipeline_schedule_variable2) { create(:ci_pipeline_schedule_variable, key: 'bar', value: 'barvalue', pipeline_schedule: pipeline_schedule_populated) } + + render_views + + before(:all) do + clean_frontend_fixtures('pipeline_schedules/') + end + + before do + sign_in(admin) + end + + it 'pipeline_schedules/edit.html' do + get :edit, params: { + namespace_id: project.namespace.to_param, + project_id: project, + id: pipeline_schedule.id + } + + expect(response).to be_successful + end + + it 'pipeline_schedules/edit_with_variables.html' do + get :edit, params: { + namespace_id: project.namespace.to_param, + project_id: project, + id: pipeline_schedule_populated.id + } + + expect(response).to be_successful + end +end diff --git a/spec/frontend/fixtures/pipelines.rb b/spec/frontend/fixtures/pipelines.rb new file mode 100644 index 00000000000..ed57eb0aa80 --- /dev/null +++ b/spec/frontend/fixtures/pipelines.rb @@ -0,0 +1,34 @@ +require 'spec_helper' + +describe Projects::PipelinesController, '(JavaScript fixtures)', type: :controller do + include JavaScriptFixturesHelpers + + let(:admin) { create(:admin) } + let(:namespace) { create(:namespace, name: 'frontend-fixtures' )} + let(:project) { create(:project, :repository, namespace: namespace, path: 'pipelines-project') } + let(:commit) { create(:commit, project: project) } + let(:commit_without_author) { RepoHelpers.another_sample_commit } + let!(:user) { create(:user, developer_projects: [project], email: commit.author_email) } + let!(:pipeline) { create(:ci_pipeline, project: project, sha: commit.id, user: user) } + let!(:pipeline_without_author) { create(:ci_pipeline, project: project, sha: commit_without_author.id) } + let!(:pipeline_without_commit) { create(:ci_pipeline, project: project, sha: '0000') } + + render_views + + before(:all) do + clean_frontend_fixtures('pipelines/') + end + + before do + sign_in(admin) + end + + it 'pipelines/pipelines.json' do + get :index, params: { + namespace_id: namespace, + project_id: project + }, format: :json + + expect(response).to be_successful + end +end diff --git a/spec/frontend/fixtures/projects.rb b/spec/frontend/fixtures/projects.rb new file mode 100644 index 00000000000..91e3b65215a --- /dev/null +++ b/spec/frontend/fixtures/projects.rb @@ -0,0 +1,81 @@ +require 'spec_helper' + +describe 'Projects (JavaScript fixtures)', type: :controller do + include JavaScriptFixturesHelpers + + runners_token = 'runnerstoken:intabulasreferre' + + let(:admin) { create(:admin) } + let(:namespace) { create(:namespace, name: 'frontend-fixtures' )} + let(:project) { create(:project, namespace: namespace, path: 'builds-project', runners_token: runners_token) } + let(:project_with_repo) { create(:project, :repository, description: 'Code and stuff') } + let(:project_variable_populated) { create(:project, namespace: namespace, path: 'builds-project2', runners_token: runners_token) } + + render_views + + before(:all) do + clean_frontend_fixtures('projects/') + end + + before do + project.add_maintainer(admin) + sign_in(admin) + allow(SecureRandom).to receive(:hex).and_return('securerandomhex:thereisnospoon') + end + + after do + remove_repository(project) + end + + describe ProjectsController, '(JavaScript fixtures)', type: :controller do + it 'projects/dashboard.html' do + get :show, params: { + namespace_id: project.namespace.to_param, + id: project + } + + expect(response).to be_successful + end + + it 'projects/overview.html' do + get :show, params: { + namespace_id: project_with_repo.namespace.to_param, + id: project_with_repo + } + + expect(response).to be_successful + end + + it 'projects/edit.html' do + get :edit, params: { + namespace_id: project.namespace.to_param, + id: project + } + + expect(response).to be_successful + end + end + + describe Projects::Settings::CiCdController, '(JavaScript fixtures)', type: :controller do + it 'projects/ci_cd_settings.html' do + get :show, params: { + namespace_id: project.namespace.to_param, + project_id: project + } + + expect(response).to be_successful + end + + it 'projects/ci_cd_settings_with_variables.html' do + create(:ci_variable, project: project_variable_populated) + create(:ci_variable, project: project_variable_populated) + + get :show, params: { + namespace_id: project_variable_populated.namespace.to_param, + project_id: project_variable_populated + } + + expect(response).to be_successful + end + end +end diff --git a/spec/frontend/fixtures/prometheus_service.rb b/spec/frontend/fixtures/prometheus_service.rb new file mode 100644 index 00000000000..93ee81120d7 --- /dev/null +++ b/spec/frontend/fixtures/prometheus_service.rb @@ -0,0 +1,34 @@ +require 'spec_helper' + +describe Projects::ServicesController, '(JavaScript fixtures)', type: :controller do + include JavaScriptFixturesHelpers + + let(:admin) { create(:admin) } + let(:namespace) { create(:namespace, name: 'frontend-fixtures' )} + let(:project) { create(:project_empty_repo, namespace: namespace, path: 'services-project') } + let!(:service) { create(:prometheus_service, project: project) } + + render_views + + before(:all) do + clean_frontend_fixtures('services/prometheus') + end + + before do + sign_in(admin) + end + + after do + remove_repository(project) + end + + it 'services/prometheus/prometheus_service.html' do + get :edit, params: { + namespace_id: namespace, + project_id: project, + id: service.to_param + } + + expect(response).to be_successful + end +end diff --git a/spec/frontend/fixtures/raw.rb b/spec/frontend/fixtures/raw.rb new file mode 100644 index 00000000000..801c80a0112 --- /dev/null +++ b/spec/frontend/fixtures/raw.rb @@ -0,0 +1,39 @@ +require 'spec_helper' + +describe 'Raw files', '(JavaScript fixtures)' do + include JavaScriptFixturesHelpers + + let(:namespace) { create(:namespace, name: 'frontend-fixtures' )} + let(:project) { create(:project, :repository, namespace: namespace, path: 'raw-project') } + let(:response) { @blob.data.force_encoding('UTF-8') } + + before(:all) do + clean_frontend_fixtures('blob/balsamiq/') + clean_frontend_fixtures('blob/notebook/') + clean_frontend_fixtures('blob/pdf/') + end + + after do + remove_repository(project) + end + + it 'blob/balsamiq/test.bmpr' do + @blob = project.repository.blob_at('b89b56d79', 'files/images/balsamiq.bmpr') + end + + it 'blob/notebook/basic.json' do + @blob = project.repository.blob_at('6d85bb69', 'files/ipython/basic.ipynb') + end + + it 'blob/notebook/worksheets.json' do + @blob = project.repository.blob_at('6d85bb69', 'files/ipython/worksheets.ipynb') + end + + it 'blob/notebook/math.json' do + @blob = project.repository.blob_at('93ee732', 'files/ipython/math.ipynb') + end + + it 'blob/pdf/test.pdf' do + @blob = project.repository.blob_at('e774ebd33', 'files/pdf/test.pdf') + end +end diff --git a/spec/frontend/fixtures/search.rb b/spec/frontend/fixtures/search.rb new file mode 100644 index 00000000000..c26c6998ae9 --- /dev/null +++ b/spec/frontend/fixtures/search.rb @@ -0,0 +1,17 @@ +require 'spec_helper' + +describe SearchController, '(JavaScript fixtures)', type: :controller do + include JavaScriptFixturesHelpers + + render_views + + before(:all) do + clean_frontend_fixtures('search/') + end + + it 'search/show.html' do + get :show + + expect(response).to be_successful + end +end diff --git a/spec/frontend/fixtures/services.rb b/spec/frontend/fixtures/services.rb new file mode 100644 index 00000000000..ee1e088f158 --- /dev/null +++ b/spec/frontend/fixtures/services.rb @@ -0,0 +1,34 @@ +require 'spec_helper' + +describe Projects::ServicesController, '(JavaScript fixtures)', type: :controller do + include JavaScriptFixturesHelpers + + let(:admin) { create(:admin) } + let(:namespace) { create(:namespace, name: 'frontend-fixtures' )} + let(:project) { create(:project_empty_repo, namespace: namespace, path: 'services-project') } + let!(:service) { create(:custom_issue_tracker_service, project: project, title: 'Custom Issue Tracker') } + + render_views + + before(:all) do + clean_frontend_fixtures('services/') + end + + before do + sign_in(admin) + end + + after do + remove_repository(project) + end + + it 'services/edit_service.html' do + get :edit, params: { + namespace_id: namespace, + project_id: project, + id: service.to_param + } + + expect(response).to be_successful + end +end diff --git a/spec/frontend/fixtures/sessions.rb b/spec/frontend/fixtures/sessions.rb new file mode 100644 index 00000000000..18574ea06b5 --- /dev/null +++ b/spec/frontend/fixtures/sessions.rb @@ -0,0 +1,25 @@ +require 'spec_helper' + +describe 'Sessions (JavaScript fixtures)' do + include JavaScriptFixturesHelpers + + before(:all) do + clean_frontend_fixtures('sessions/') + end + + describe SessionsController, '(JavaScript fixtures)', type: :controller do + include DeviseHelpers + + render_views + + before do + set_devise_mapping(context: @request) + end + + it 'sessions/new.html' do + get :new + + expect(response).to be_successful + end + end +end diff --git a/spec/frontend/fixtures/snippet.rb b/spec/frontend/fixtures/snippet.rb new file mode 100644 index 00000000000..23bcdb47ac6 --- /dev/null +++ b/spec/frontend/fixtures/snippet.rb @@ -0,0 +1,33 @@ +require 'spec_helper' + +describe SnippetsController, '(JavaScript fixtures)', type: :controller do + include JavaScriptFixturesHelpers + + let(:admin) { create(:admin) } + let(:namespace) { create(:namespace, name: 'frontend-fixtures' )} + let(:project) { create(:project, :repository, namespace: namespace, path: 'branches-project') } + let(:snippet) { create(:personal_snippet, title: 'snippet.md', content: '# snippet', file_name: 'snippet.md', author: admin) } + + render_views + + before(:all) do + clean_frontend_fixtures('snippets/') + end + + before do + sign_in(admin) + allow(Discussion).to receive(:build_discussion_id).and_return(['discussionid:ceterumcenseo']) + end + + after do + remove_repository(project) + end + + it 'snippets/show.html' do + create(:discussion_note_on_snippet, noteable: snippet, project: project, author: admin, note: '- [ ] Task List Item') + + get(:show, params: { id: snippet.to_param }) + + expect(response).to be_successful + end +end diff --git a/spec/frontend/fixtures/static/README.md b/spec/frontend/fixtures/static/README.md new file mode 100644 index 00000000000..011601d0df8 --- /dev/null +++ b/spec/frontend/fixtures/static/README.md @@ -0,0 +1,3 @@ +# Please do not add new files here! + +Instead use a Ruby file in the fixtures root directory (`spec/frontend/fixtures/`). diff --git a/spec/frontend/fixtures/static/ajax_loading_spinner.html b/spec/frontend/fixtures/static/ajax_loading_spinner.html new file mode 100644 index 00000000000..0e1ebb32b1c --- /dev/null +++ b/spec/frontend/fixtures/static/ajax_loading_spinner.html @@ -0,0 +1,3 @@ +<a class="js-ajax-loading-spinner" data-remote href="http://goesnowhere.nothing/whereami"> +<i class="fa fa-trash-o"></i> +</a> diff --git a/spec/frontend/fixtures/static/balsamiq_viewer.html b/spec/frontend/fixtures/static/balsamiq_viewer.html new file mode 100644 index 00000000000..cdd723d1a84 --- /dev/null +++ b/spec/frontend/fixtures/static/balsamiq_viewer.html @@ -0,0 +1 @@ +<div class="file-content balsamiq-viewer" data-endpoint="/test" id="js-balsamiq-viewer"></div> diff --git a/spec/frontend/fixtures/static/create_item_dropdown.html b/spec/frontend/fixtures/static/create_item_dropdown.html new file mode 100644 index 00000000000..d2d38370092 --- /dev/null +++ b/spec/frontend/fixtures/static/create_item_dropdown.html @@ -0,0 +1,11 @@ +<div class="js-create-item-dropdown-fixture-root"> +<input name="variable[environment]" type="hidden"> +<div class="dropdown "><button class="dropdown-menu-toggle js-dropdown-menu-toggle" type="button" data-toggle="dropdown"><span class="dropdown-toggle-text ">some label</span><i aria-hidden="true" data-hidden="true" class="fa fa-chevron-down"></i></button><div class="dropdown-menu dropdown-select dropdown-menu-selectable"><div class="dropdown-input"><input type="search" id="" class="dropdown-input-field" autocomplete="off" /><i aria-hidden="true" data-hidden="true" class="fa fa-search dropdown-input-search"></i><i aria-hidden="true" data-hidden="true" role="button" class="fa fa-times dropdown-input-clear js-dropdown-input-clear"></i></div><div class="dropdown-content js-dropdown-content"></div><div class="dropdown-footer"><ul class="dropdown-footer-list"> +<li> +<button class="dropdown-create-new-item-button js-dropdown-create-new-item"> +Create wildcard +<code></code> +</button> +</li> +</ul> +</div><div class="dropdown-loading"><i aria-hidden="true" data-hidden="true" class="fa fa-spinner fa-spin"></i></div></div></div></div> diff --git a/spec/frontend/fixtures/static/environments/table.html b/spec/frontend/fixtures/static/environments/table.html new file mode 100644 index 00000000000..417af564ff1 --- /dev/null +++ b/spec/frontend/fixtures/static/environments/table.html @@ -0,0 +1,15 @@ +<table> +<thead> +<tr> +<th>Environment</th> +<th>Last deployment</th> +<th>Job</th> +<th>Commit</th> +<th></th> +<th></th> +</tr> +</thead> +<tbody> +<tr id="environment-row"></tr> +</tbody> +</table> diff --git a/spec/frontend/fixtures/static/environments_logs.html b/spec/frontend/fixtures/static/environments_logs.html new file mode 100644 index 00000000000..6179d3dbc23 --- /dev/null +++ b/spec/frontend/fixtures/static/environments_logs.html @@ -0,0 +1,29 @@ +<div class="js-kubernetes-logs" data-logs-path="/root/kubernetes-app/environments/1/logs"> + <div class="build-page"> + <div class="build-trace-container prepend-top-default"> + <div class="top-bar js-top-bar"> + <div class="truncated-info hidden-xs pull-left"></div> + <div class="dropdown prepend-left-10 js-pod-dropdown"> + <button aria-expanded="false" class="dropdown-menu-toggle" data-toggle="dropdown" type="button"> + <i class="fa fa-chevron-down"></i> + </button> + <div class="dropdown-menu dropdown-menu-selectable dropdown-menu-drop-up"></div> + </div> + <div class="controllers pull-right"> + <div class="has-tooltip controllers-buttons" data-container="body" data-placement="top" title="Scroll to top"> + <button class="js-scroll-up btn-scroll btn-transparent btn-blank" disabled type="button"></button> + </div> + <div class="has-tooltip controllers-buttons" data-container="body" data-placement="top" title="Scroll to bottom"> + <button class="js-scroll-down btn-scroll btn-transparent btn-blank" disabled type="button"></button> + </div> + <div class="refresh-control pull-right"> + <div class="has-tooltip controllers-buttons" data-container="body" data-placement="top" title="Refresh"> + <button class="js-refresh-log btn-default btn-refresh" disabled type="button"></button> + </div> + </div> + </div> + </div> + <pre class="build-trace" id="build-trace"><code class="bash js-build-output"><div class="build-loader-animation js-build-refresh"></div></code></pre> + </div> + </div> +</div> diff --git a/spec/frontend/fixtures/static/event_filter.html b/spec/frontend/fixtures/static/event_filter.html new file mode 100644 index 00000000000..8e9b6fb1b5c --- /dev/null +++ b/spec/frontend/fixtures/static/event_filter.html @@ -0,0 +1,44 @@ +<ul class="nav-links event-filter scrolling-tabs nav nav-tabs"> +<li class="active"> +<a class="event-filter-link" href="/dashboard/activity" id="all_event_filter" title="Filter by all"> +<span> +All +</span> +</a> +</li> +<li> +<a class="event-filter-link" href="/dashboard/activity" id="push_event_filter" title="Filter by push events"> +<span> +Push events +</span> +</a> +</li> +<li> +<a class="event-filter-link" href="/dashboard/activity" id="merged_event_filter" title="Filter by merge events"> +<span> +Merge events +</span> +</a> +</li> +<li> +<a class="event-filter-link" href="/dashboard/activity" id="issue_event_filter" title="Filter by issue events"> +<span> +Issue events +</span> +</a> +</li> +<li> +<a class="event-filter-link" href="/dashboard/activity" id="comments_event_filter" title="Filter by comments"> +<span> +Comments +</span> +</a> +</li> +<li> +<a class="event-filter-link" href="/dashboard/activity" id="team_event_filter" title="Filter by team"> +<span> +Team +</span> +</a> +</li> +</ul> diff --git a/spec/frontend/fixtures/static/gl_dropdown.html b/spec/frontend/fixtures/static/gl_dropdown.html new file mode 100644 index 00000000000..08f6738414e --- /dev/null +++ b/spec/frontend/fixtures/static/gl_dropdown.html @@ -0,0 +1,26 @@ +<div> +<div class="dropdown inline"> +<button class="dropdown-menu-toggle" data-toggle="dropdown" id="js-project-dropdown" type="button"> +<div class="dropdown-toggle-text"> +Projects +</div> +<i class="fa fa-chevron-down dropdown-toggle-caret js-projects-dropdown-toggle"></i> +</button> +<div class="dropdown-menu dropdown-select dropdown-menu-selectable"> +<div class="dropdown-title"> +<span>Go to project</span> +<button aria="{:label=>"Close"}" class="dropdown-title-button dropdown-menu-close"> +<i class="fa fa-times dropdown-menu-close-icon"></i> +</button> +</div> +<div class="dropdown-input"> +<input class="dropdown-input-field" placeholder="Filter results" type="search"> +<i class="fa fa-search dropdown-input-search"></i> +</div> +<div class="dropdown-content"></div> +<div class="dropdown-loading"> +<i class="fa fa-spinner fa-spin"></i> +</div> +</div> +</div> +</div> diff --git a/spec/frontend/fixtures/static/gl_field_errors.html b/spec/frontend/fixtures/static/gl_field_errors.html new file mode 100644 index 00000000000..f8470e02b7c --- /dev/null +++ b/spec/frontend/fixtures/static/gl_field_errors.html @@ -0,0 +1,22 @@ +<form action="submit" class="gl-show-field-errors" method="post"> +<div class="form-group"> +<input class="required-text" required type="text">Text</input> +</div> +<div class="form-group"> +<input class="email" required title="Please provide a valid email address." type="email">Email</input> +</div> +<div class="form-group"> +<input class="password" required type="password">Password</input> +</div> +<div class="form-group"> +<input class="alphanumeric" pattern="[a-zA-Z0-9]" required type="text">Alphanumeric</input> +</div> +<div class="form-group"> +<input class="hidden" type="hidden"> +</div> +<div class="form-group"> +<input class="custom gl-field-error-ignore" type="text">Custom, do not validate</input> +</div> +<div class="form-group"></div> +<input class="submit" type="submit">Submit</input> +</form> diff --git a/spec/frontend/fixtures/static/images/green_box.png b/spec/frontend/fixtures/static/images/green_box.png Binary files differnew file mode 100644 index 00000000000..cd1ff9f9ade --- /dev/null +++ b/spec/frontend/fixtures/static/images/green_box.png diff --git a/spec/frontend/fixtures/static/images/one_white_pixel.png b/spec/frontend/fixtures/static/images/one_white_pixel.png Binary files differnew file mode 100644 index 00000000000..073fcf40a18 --- /dev/null +++ b/spec/frontend/fixtures/static/images/one_white_pixel.png diff --git a/spec/frontend/fixtures/static/images/red_box.png b/spec/frontend/fixtures/static/images/red_box.png Binary files differnew file mode 100644 index 00000000000..73b2927da0f --- /dev/null +++ b/spec/frontend/fixtures/static/images/red_box.png diff --git a/spec/frontend/fixtures/static/issuable_filter.html b/spec/frontend/fixtures/static/issuable_filter.html new file mode 100644 index 00000000000..06b70fb43f1 --- /dev/null +++ b/spec/frontend/fixtures/static/issuable_filter.html @@ -0,0 +1,9 @@ +<form action="/user/project/issues?scope=all&state=closed" class="js-filter-form"> +<input id="utf8" name="utf8" value="✓"> +<input id="check-all-issues" name="check-all-issues"> +<input id="search" name="search"> +<input id="author_id" name="author_id"> +<input id="assignee_id" name="assignee_id"> +<input id="milestone_title" name="milestone_title"> +<input id="label_name" name="label_name"> +</form> diff --git a/spec/frontend/fixtures/static/issue_sidebar_label.html b/spec/frontend/fixtures/static/issue_sidebar_label.html new file mode 100644 index 00000000000..ec8fb30f219 --- /dev/null +++ b/spec/frontend/fixtures/static/issue_sidebar_label.html @@ -0,0 +1,26 @@ +<div class="block labels"> +<div class="sidebar-collapsed-icon js-sidebar-labels-tooltip"></div> +<div class="title hide-collapsed"> +<a class="edit-link float-right" href="#"> +Edit +</a> +</div> +<div class="selectbox hide-collapsed" style="display: none;"> +<div class="dropdown"> +<button class="dropdown-menu-toggle js-label-select js-multiselect" data-ability-name="issue" data-field-name="issue[label_names][]" data-issue-update="/root/test/issues/2.json" data-labels="/root/test/labels.json" data-project-id="12" data-show-any="true" data-show-no="true" data-toggle="dropdown" type="button"> +<span class="dropdown-toggle-text"> +Label +</span> +<i class="fa fa-chevron-down"></i> +</button> +<div class="dropdown-menu dropdown-select dropdown-menu-paging dropdown-menu-labels dropdown-menu-selectable"> +<div class="dropdown-page-one"> +<div class="dropdown-content"></div> +<div class="dropdown-loading"> +<i class="fa fa-spinner fa-spin"></i> +</div> +</div> +</div> +</div> +</div> +</div> diff --git a/spec/frontend/fixtures/static/line_highlighter.html b/spec/frontend/fixtures/static/line_highlighter.html new file mode 100644 index 00000000000..897a25d6760 --- /dev/null +++ b/spec/frontend/fixtures/static/line_highlighter.html @@ -0,0 +1,107 @@ +<div class="file-holder"> +<div class="file-content"> +<div class="line-numbers"> +<a data-line-number="1" href="#L1" id="L1"> +<i class="fa fa-link"></i> +1 +</a> +<a data-line-number="2" href="#L2" id="L2"> +<i class="fa fa-link"></i> +2 +</a> +<a data-line-number="3" href="#L3" id="L3"> +<i class="fa fa-link"></i> +3 +</a> +<a data-line-number="4" href="#L4" id="L4"> +<i class="fa fa-link"></i> +4 +</a> +<a data-line-number="5" href="#L5" id="L5"> +<i class="fa fa-link"></i> +5 +</a> +<a data-line-number="6" href="#L6" id="L6"> +<i class="fa fa-link"></i> +6 +</a> +<a data-line-number="7" href="#L7" id="L7"> +<i class="fa fa-link"></i> +7 +</a> +<a data-line-number="8" href="#L8" id="L8"> +<i class="fa fa-link"></i> +8 +</a> +<a data-line-number="9" href="#L9" id="L9"> +<i class="fa fa-link"></i> +9 +</a> +<a data-line-number="10" href="#L10" id="L10"> +<i class="fa fa-link"></i> +10 +</a> +<a data-line-number="11" href="#L11" id="L11"> +<i class="fa fa-link"></i> +11 +</a> +<a data-line-number="12" href="#L12" id="L12"> +<i class="fa fa-link"></i> +12 +</a> +<a data-line-number="13" href="#L13" id="L13"> +<i class="fa fa-link"></i> +13 +</a> +<a data-line-number="14" href="#L14" id="L14"> +<i class="fa fa-link"></i> +14 +</a> +<a data-line-number="15" href="#L15" id="L15"> +<i class="fa fa-link"></i> +15 +</a> +<a data-line-number="16" href="#L16" id="L16"> +<i class="fa fa-link"></i> +16 +</a> +<a data-line-number="17" href="#L17" id="L17"> +<i class="fa fa-link"></i> +17 +</a> +<a data-line-number="18" href="#L18" id="L18"> +<i class="fa fa-link"></i> +18 +</a> +<a data-line-number="19" href="#L19" id="L19"> +<i class="fa fa-link"></i> +19 +</a> +<a data-line-number="20" href="#L20" id="L20"> +<i class="fa fa-link"></i> +20 +</a> +<a data-line-number="21" href="#L21" id="L21"> +<i class="fa fa-link"></i> +21 +</a> +<a data-line-number="22" href="#L22" id="L22"> +<i class="fa fa-link"></i> +22 +</a> +<a data-line-number="23" href="#L23" id="L23"> +<i class="fa fa-link"></i> +23 +</a> +<a data-line-number="24" href="#L24" id="L24"> +<i class="fa fa-link"></i> +24 +</a> +<a data-line-number="25" href="#L25" id="L25"> +<i class="fa fa-link"></i> +25 +</a> +</div> +<pre class="code highlight"><code><span class="line" id="LC1">Line 1</span><span class="line" id="LC2">Line 2</span><span class="line" id="LC3">Line 3</span><span class="line" id="LC4">Line 4</span><span class="line" id="LC5">Line 5</span><span class="line" id="LC6">Line 6</span><span class="line" id="LC7">Line 7</span><span class="line" id="LC8">Line 8</span><span class="line" id="LC9">Line 9</span><span class="line" id="LC10">Line 10</span><span class="line" id="LC11">Line 11</span><span class="line" id="LC12">Line 12</span><span class="line" id="LC13">Line 13</span><span class="line" id="LC14">Line 14</span><span class="line" id="LC15">Line 15</span><span class="line" id="LC16">Line 16</span><span class="line" id="LC17">Line 17</span><span class="line" id="LC18">Line 18</span><span class="line" id="LC19">Line 19</span><span class="line" id="LC20">Line 20</span><span class="line" id="LC21">Line 21</span><span class="line" id="LC22">Line 22</span><span class="line" id="LC23">Line 23</span><span class="line" id="LC24">Line 24</span><span class="line" id="LC25">Line 25</span></code></pre> +</div> +</div> diff --git a/spec/frontend/fixtures/static/linked_tabs.html b/spec/frontend/fixtures/static/linked_tabs.html new file mode 100644 index 00000000000..c25463bf1db --- /dev/null +++ b/spec/frontend/fixtures/static/linked_tabs.html @@ -0,0 +1,20 @@ +<ul class="nav nav-tabs new-session-tabs linked-tabs"> +<li class="nav-item"> +<a class="nav-link" data-action="tab1" data-target="div#tab1" data-toggle="tab" href="foo/bar/1"> +Tab 1 +</a> +</li> +<li class="nav-item"> +<a class="nav-link" data-action="tab2" data-target="div#tab2" data-toggle="tab" href="foo/bar/1/context"> +Tab 2 +</a> +</li> +</ul> +<div class="tab-content"> +<div class="tab-pane" id="tab1"> +Tab 1 Content +</div> +<div class="tab-pane" id="tab2"> +Tab 2 Content +</div> +</div> diff --git a/spec/frontend/fixtures/static/merge_requests_show.html b/spec/frontend/fixtures/static/merge_requests_show.html new file mode 100644 index 00000000000..87e36c9f315 --- /dev/null +++ b/spec/frontend/fixtures/static/merge_requests_show.html @@ -0,0 +1,15 @@ +<a class="btn-close"></a> +<div class="detail-page-description"> +<div class="description js-task-list-container"> +<div class="md"> +<ul class="task-list"> +<li class="task-list-item"> +<input class="task-list-item-checkbox" type="checkbox"> +Task List Item +</li> +</ul> +<textarea class="js-task-list-field">- [ ] Task List Item</textarea> +</div> +</div> +</div> +<form action="/foo" class="js-issuable-update"></form> diff --git a/spec/frontend/fixtures/static/mini_dropdown_graph.html b/spec/frontend/fixtures/static/mini_dropdown_graph.html new file mode 100644 index 00000000000..cd0b8dec3fc --- /dev/null +++ b/spec/frontend/fixtures/static/mini_dropdown_graph.html @@ -0,0 +1,13 @@ +<div class="js-builds-dropdown-tests dropdown dropdown js-mini-pipeline-graph"> +<button class="js-builds-dropdown-button" data-toggle="dropdown" data-stage-endpoint="foobar"> +Dropdown +</button> +<ul class="dropdown-menu mini-pipeline-graph-dropdown-menu js-builds-dropdown-container"> +<li class="js-builds-dropdown-list scrollable-menu"> +<ul></ul> +</li> +<li class="js-builds-dropdown-loading hidden"> +<span class="fa fa-spinner"></span> +</li> +</ul> +</div> diff --git a/spec/frontend/fixtures/static/notebook_viewer.html b/spec/frontend/fixtures/static/notebook_viewer.html new file mode 100644 index 00000000000..4bbb7bf1094 --- /dev/null +++ b/spec/frontend/fixtures/static/notebook_viewer.html @@ -0,0 +1 @@ +<div class="file-content" data-endpoint="/test" id="js-notebook-viewer"></div> diff --git a/spec/frontend/fixtures/static/oauth_remember_me.html b/spec/frontend/fixtures/static/oauth_remember_me.html new file mode 100644 index 00000000000..9ba1ffc72fe --- /dev/null +++ b/spec/frontend/fixtures/static/oauth_remember_me.html @@ -0,0 +1,6 @@ +<div id="oauth-container"> +<input id="remember_me" type="checkbox"> +<a class="oauth-login twitter" href="http://example.com/"></a> +<a class="oauth-login github" href="http://example.com/"></a> +<a class="oauth-login facebook" href="http://example.com/?redirect_fragment=L1"></a> +</div> diff --git a/spec/frontend/fixtures/static/pdf_viewer.html b/spec/frontend/fixtures/static/pdf_viewer.html new file mode 100644 index 00000000000..350d35a262f --- /dev/null +++ b/spec/frontend/fixtures/static/pdf_viewer.html @@ -0,0 +1 @@ +<div class="file-content" data-endpoint="/test" id="js-pdf-viewer"></div> diff --git a/spec/frontend/fixtures/static/pipeline_graph.html b/spec/frontend/fixtures/static/pipeline_graph.html new file mode 100644 index 00000000000..422372bb7d5 --- /dev/null +++ b/spec/frontend/fixtures/static/pipeline_graph.html @@ -0,0 +1,24 @@ +<div class="pipeline-visualization js-pipeline-graph"> +<ul class="stage-column-list"> +<li class="stage-column"> +<div class="stage-name"> +<a href="/"> +Test +<div class="builds-container"> +<ul> +<li class="build"> +<div class="curve"></div> +<a> +<svg></svg> +<div class="ci-status-text"> +stop_review +</div> +</a> +</li> +</ul> +</div> +</a> +</div> +</li> +</ul> +</div> diff --git a/spec/frontend/fixtures/static/pipelines.html b/spec/frontend/fixtures/static/pipelines.html new file mode 100644 index 00000000000..42333f94f2f --- /dev/null +++ b/spec/frontend/fixtures/static/pipelines.html @@ -0,0 +1,3 @@ +<div> +<div data-can-create-pipeline="true" data-ci-lint-path="foo" data-empty-state-svg-path="foo" data-endpoint="foo" data-error-state-svg-path="foo" data-has-ci="foo" data-help-auto-devops-path="foo" data-help-page-path="foo" data-new-pipeline-path="foo" data-reset-cache-path="foo" id="pipelines-list-vue"></div> +</div> diff --git a/spec/frontend/fixtures/static/project_select_combo_button.html b/spec/frontend/fixtures/static/project_select_combo_button.html new file mode 100644 index 00000000000..50c826051c0 --- /dev/null +++ b/spec/frontend/fixtures/static/project_select_combo_button.html @@ -0,0 +1,9 @@ +<div class="project-item-select-holder"> +<input class="project-item-select" data-group-id="12345" data-relative-path="issues/new"> +<a class="new-project-item-link" data-label="New issue" data-type="issues" href=""> +<i class="fa fa-spinner spin"></i> +</a> +<a class="new-project-item-select-button"> +<i class="fa fa-caret-down"></i> +</a> +</div> diff --git a/spec/frontend/fixtures/static/projects.json b/spec/frontend/fixtures/static/projects.json new file mode 100644 index 00000000000..68a150f602a --- /dev/null +++ b/spec/frontend/fixtures/static/projects.json @@ -0,0 +1,445 @@ +[{ + "id": 9, + "description": "", + "default_branch": null, + "tag_list": [], + "public": true, + "archived": false, + "visibility_level": 20, + "ssh_url_to_repo": "phil@localhost:root/test.git", + "http_url_to_repo": "http://localhost:3000/root/test.git", + "web_url": "http://localhost:3000/root/test", + "owner": { + "name": "Administrator", + "username": "root", + "id": 1, + "state": "active", + "avatar_url": "https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80\u0026d=identicon", + "web_url": "http://localhost:3000/u/root" + }, + "name": "test", + "name_with_namespace": "Administrator / test", + "path": "test", + "path_with_namespace": "root/test", + "issues_enabled": true, + "merge_requests_enabled": true, + "wiki_enabled": true, + "builds_enabled": true, + "snippets_enabled": false, + "created_at": "2016-01-14T19:08:05.364Z", + "last_activity_at": "2016-01-14T19:08:07.418Z", + "shared_runners_enabled": true, + "creator_id": 1, + "namespace": { + "id": 1, + "name": "root", + "path": "root", + "owner_id": 1, + "created_at": "2016-01-13T20:19:44.439Z", + "updated_at": "2016-01-13T20:19:44.439Z", + "description": "", + "avatar": null + }, + "avatar_url": null, + "star_count": 0, + "forks_count": 0, + "only_allow_merge_if_pipeline_succeeds": false, + "open_issues_count": 0, + "permissions": { + "project_access": null, + "group_access": null + } +}, { + "id": 8, + "description": "Voluptatem quae nulla eius numquam ullam voluptatibus quia modi.", + "default_branch": "master", + "tag_list": [], + "public": false, + "archived": false, + "visibility_level": 0, + "ssh_url_to_repo": "phil@localhost:h5bp/html5-boilerplate.git", + "http_url_to_repo": "http://localhost:3000/h5bp/html5-boilerplate.git", + "web_url": "http://localhost:3000/h5bp/html5-boilerplate", + "name": "Html5 Boilerplate", + "name_with_namespace": "H5bp / Html5 Boilerplate", + "path": "html5-boilerplate", + "path_with_namespace": "h5bp/html5-boilerplate", + "issues_enabled": true, + "merge_requests_enabled": true, + "wiki_enabled": true, + "builds_enabled": true, + "snippets_enabled": false, + "created_at": "2016-01-13T20:19:57.525Z", + "last_activity_at": "2016-01-13T20:27:57.280Z", + "shared_runners_enabled": true, + "creator_id": 1, + "namespace": { + "id": 5, + "name": "H5bp", + "path": "h5bp", + "owner_id": null, + "created_at": "2016-01-13T20:19:57.239Z", + "updated_at": "2016-01-13T20:19:57.239Z", + "description": "Tempore accusantium possimus aut libero.", + "avatar": { + "url": null + } + }, + "avatar_url": null, + "star_count": 0, + "forks_count": 0, + "only_allow_merge_if_pipeline_succeeds": false, + "open_issues_count": 5, + "permissions": { + "project_access": { + "access_level": 10, + "notification_level": 3 + }, + "group_access": { + "access_level": 50, + "notification_level": 3 + } + } +}, { + "id": 7, + "description": "Modi odio mollitia dolorem qui.", + "default_branch": "master", + "tag_list": [], + "public": false, + "archived": false, + "visibility_level": 0, + "ssh_url_to_repo": "phil@localhost:twitter/typeahead-js.git", + "http_url_to_repo": "http://localhost:3000/twitter/typeahead-js.git", + "web_url": "http://localhost:3000/twitter/typeahead-js", + "name": "Typeahead.Js", + "name_with_namespace": "Twitter / Typeahead.Js", + "path": "typeahead-js", + "path_with_namespace": "twitter/typeahead-js", + "issues_enabled": true, + "merge_requests_enabled": true, + "wiki_enabled": true, + "builds_enabled": true, + "snippets_enabled": false, + "created_at": "2016-01-13T20:19:56.212Z", + "last_activity_at": "2016-01-13T20:27:51.496Z", + "shared_runners_enabled": true, + "creator_id": 1, + "namespace": { + "id": 4, + "name": "Twitter", + "path": "twitter", + "owner_id": null, + "created_at": "2016-01-13T20:19:54.480Z", + "updated_at": "2016-01-13T20:19:54.480Z", + "description": "Id voluptatem ipsa maiores omnis repudiandae et et.", + "avatar": { + "url": null + } + }, + "avatar_url": null, + "star_count": 0, + "forks_count": 0, + "only_allow_merge_if_pipeline_succeeds": true, + "open_issues_count": 4, + "permissions": { + "project_access": null, + "group_access": { + "access_level": 10, + "notification_level": 3 + } + } +}, { + "id": 6, + "description": "Omnis asperiores ipsa et beatae quidem necessitatibus quia.", + "default_branch": "master", + "tag_list": [], + "public": true, + "archived": false, + "visibility_level": 20, + "ssh_url_to_repo": "phil@localhost:twitter/flight.git", + "http_url_to_repo": "http://localhost:3000/twitter/flight.git", + "web_url": "http://localhost:3000/twitter/flight", + "name": "Flight", + "name_with_namespace": "Twitter / Flight", + "path": "flight", + "path_with_namespace": "twitter/flight", + "issues_enabled": true, + "merge_requests_enabled": true, + "wiki_enabled": true, + "builds_enabled": true, + "snippets_enabled": false, + "created_at": "2016-01-13T20:19:54.754Z", + "last_activity_at": "2016-01-13T20:27:50.502Z", + "shared_runners_enabled": true, + "creator_id": 1, + "namespace": { + "id": 4, + "name": "Twitter", + "path": "twitter", + "owner_id": null, + "created_at": "2016-01-13T20:19:54.480Z", + "updated_at": "2016-01-13T20:19:54.480Z", + "description": "Id voluptatem ipsa maiores omnis repudiandae et et.", + "avatar": { + "url": null + } + }, + "avatar_url": null, + "star_count": 0, + "forks_count": 0, + "only_allow_merge_if_pipeline_succeeds": true, + "open_issues_count": 4, + "permissions": { + "project_access": null, + "group_access": { + "access_level": 10, + "notification_level": 3 + } + } +}, { + "id": 5, + "description": "Voluptatem commodi voluptate placeat architecto beatae illum dolores fugiat.", + "default_branch": "master", + "tag_list": [], + "public": false, + "archived": false, + "visibility_level": 0, + "ssh_url_to_repo": "phil@localhost:gitlab-org/gitlab-test.git", + "http_url_to_repo": "http://localhost:3000/gitlab-org/gitlab-test.git", + "web_url": "http://localhost:3000/gitlab-org/gitlab-test", + "name": "Gitlab Test", + "name_with_namespace": "Gitlab Org / Gitlab Test", + "path": "gitlab-test", + "path_with_namespace": "gitlab-org/gitlab-test", + "issues_enabled": true, + "merge_requests_enabled": true, + "wiki_enabled": true, + "builds_enabled": true, + "snippets_enabled": false, + "created_at": "2016-01-13T20:19:53.202Z", + "last_activity_at": "2016-01-13T20:27:41.626Z", + "shared_runners_enabled": true, + "creator_id": 1, + "namespace": { + "id": 3, + "name": "Gitlab Org", + "path": "gitlab-org", + "owner_id": null, + "created_at": "2016-01-13T20:19:48.851Z", + "updated_at": "2016-01-13T20:19:48.851Z", + "description": "Magni mollitia quod quidem soluta nesciunt impedit.", + "avatar": { + "url": null + } + }, + "avatar_url": null, + "star_count": 0, + "forks_count": 0, + "only_allow_merge_if_pipeline_succeeds": false, + "open_issues_count": 5, + "permissions": { + "project_access": null, + "group_access": { + "access_level": 50, + "notification_level": 3 + } + } +}, { + "id": 4, + "description": "Aut molestias quas est ut aperiam officia quod libero.", + "default_branch": "master", + "tag_list": [], + "public": true, + "archived": false, + "visibility_level": 20, + "ssh_url_to_repo": "phil@localhost:gitlab-org/gitlab-shell.git", + "http_url_to_repo": "http://localhost:3000/gitlab-org/gitlab-shell.git", + "web_url": "http://localhost:3000/gitlab-org/gitlab-shell", + "name": "Gitlab Shell", + "name_with_namespace": "Gitlab Org / Gitlab Shell", + "path": "gitlab-shell", + "path_with_namespace": "gitlab-org/gitlab-shell", + "issues_enabled": true, + "merge_requests_enabled": true, + "wiki_enabled": true, + "builds_enabled": true, + "snippets_enabled": false, + "created_at": "2016-01-13T20:19:51.882Z", + "last_activity_at": "2016-01-13T20:27:35.678Z", + "shared_runners_enabled": true, + "creator_id": 1, + "namespace": { + "id": 3, + "name": "Gitlab Org", + "path": "gitlab-org", + "owner_id": null, + "created_at": "2016-01-13T20:19:48.851Z", + "updated_at": "2016-01-13T20:19:48.851Z", + "description": "Magni mollitia quod quidem soluta nesciunt impedit.", + "avatar": { + "url": null + } + }, + "avatar_url": null, + "star_count": 0, + "forks_count": 0, + "only_allow_merge_if_pipeline_succeeds": false, + "open_issues_count": 5, + "permissions": { + "project_access": { + "access_level": 20, + "notification_level": 3 + }, + "group_access": { + "access_level": 50, + "notification_level": 3 + } + } +}, { + "id": 3, + "description": "Excepturi molestiae quia repellendus omnis est illo illum eligendi.", + "default_branch": "master", + "tag_list": [], + "public": true, + "archived": false, + "visibility_level": 20, + "ssh_url_to_repo": "phil@localhost:gitlab-org/gitlab-ci.git", + "http_url_to_repo": "http://localhost:3000/gitlab-org/gitlab-ci.git", + "web_url": "http://localhost:3000/gitlab-org/gitlab-ci", + "name": "Gitlab Ci", + "name_with_namespace": "Gitlab Org / Gitlab Ci", + "path": "gitlab-ci", + "path_with_namespace": "gitlab-org/gitlab-ci", + "issues_enabled": true, + "merge_requests_enabled": true, + "wiki_enabled": true, + "builds_enabled": true, + "snippets_enabled": false, + "created_at": "2016-01-13T20:19:50.346Z", + "last_activity_at": "2016-01-13T20:27:30.115Z", + "shared_runners_enabled": true, + "creator_id": 1, + "namespace": { + "id": 3, + "name": "Gitlab Org", + "path": "gitlab-org", + "owner_id": null, + "created_at": "2016-01-13T20:19:48.851Z", + "updated_at": "2016-01-13T20:19:48.851Z", + "description": "Magni mollitia quod quidem soluta nesciunt impedit.", + "avatar": { + "url": null + } + }, + "avatar_url": null, + "star_count": 0, + "forks_count": 0, + "only_allow_merge_if_pipeline_succeeds": false, + "open_issues_count": 3, + "permissions": { + "project_access": null, + "group_access": { + "access_level": 50, + "notification_level": 3 + } + } +}, { + "id": 2, + "description": "Adipisci quaerat dignissimos enim sed ipsam dolorem quia.", + "default_branch": "master", + "tag_list": [], + "public": false, + "archived": false, + "visibility_level": 10, + "ssh_url_to_repo": "phil@localhost:gitlab-org/gitlab-ce.git", + "http_url_to_repo": "http://localhost:3000/gitlab-org/gitlab-ce.git", + "web_url": "http://localhost:3000/gitlab-org/gitlab-ce", + "name": "Gitlab Ce", + "name_with_namespace": "Gitlab Org / Gitlab Ce", + "path": "gitlab-ce", + "path_with_namespace": "gitlab-org/gitlab-ce", + "issues_enabled": true, + "merge_requests_enabled": true, + "wiki_enabled": true, + "builds_enabled": true, + "snippets_enabled": false, + "created_at": "2016-01-13T20:19:49.065Z", + "last_activity_at": "2016-01-13T20:26:58.454Z", + "shared_runners_enabled": true, + "creator_id": 1, + "namespace": { + "id": 3, + "name": "Gitlab Org", + "path": "gitlab-org", + "owner_id": null, + "created_at": "2016-01-13T20:19:48.851Z", + "updated_at": "2016-01-13T20:19:48.851Z", + "description": "Magni mollitia quod quidem soluta nesciunt impedit.", + "avatar": { + "url": null + } + }, + "avatar_url": null, + "star_count": 0, + "forks_count": 0, + "only_allow_merge_if_pipeline_succeeds": false, + "open_issues_count": 5, + "permissions": { + "project_access": { + "access_level": 30, + "notification_level": 3 + }, + "group_access": { + "access_level": 50, + "notification_level": 3 + } + } +}, { + "id": 1, + "description": "Vel voluptatem maxime saepe ex quia.", + "default_branch": "master", + "tag_list": [], + "public": false, + "archived": false, + "visibility_level": 0, + "ssh_url_to_repo": "phil@localhost:documentcloud/underscore.git", + "http_url_to_repo": "http://localhost:3000/documentcloud/underscore.git", + "web_url": "http://localhost:3000/documentcloud/underscore", + "name": "Underscore", + "name_with_namespace": "Documentcloud / Underscore", + "path": "underscore", + "path_with_namespace": "documentcloud/underscore", + "issues_enabled": true, + "merge_requests_enabled": true, + "wiki_enabled": true, + "builds_enabled": true, + "snippets_enabled": false, + "created_at": "2016-01-13T20:19:45.862Z", + "last_activity_at": "2016-01-13T20:25:03.106Z", + "shared_runners_enabled": true, + "creator_id": 1, + "namespace": { + "id": 2, + "name": "Documentcloud", + "path": "documentcloud", + "owner_id": null, + "created_at": "2016-01-13T20:19:44.464Z", + "updated_at": "2016-01-13T20:19:44.464Z", + "description": "Aut impedit perferendis fuga et ipsa repellat cupiditate et.", + "avatar": { + "url": null + } + }, + "avatar_url": null, + "star_count": 0, + "forks_count": 0, + "only_allow_merge_if_pipeline_succeeds": false, + "open_issues_count": 5, + "permissions": { + "project_access": null, + "group_access": { + "access_level": 50, + "notification_level": 3 + } + } +}] diff --git a/spec/frontend/fixtures/static/search_autocomplete.html b/spec/frontend/fixtures/static/search_autocomplete.html new file mode 100644 index 00000000000..29db9020424 --- /dev/null +++ b/spec/frontend/fixtures/static/search_autocomplete.html @@ -0,0 +1,15 @@ +<div class="search search-form"> +<form class="form-inline"> +<div class="search-input-container"> +<div class="search-input-wrap"> +<div class="dropdown"> +<input class="search-input dropdown-menu-toggle" id="search"> +<div class="dropdown-menu dropdown-select"> +<div class="dropdown-content"></div> +</div> +</div> +</div> +</div> +<input class="js-search-project-options" type="hidden"> +</form> +</div> diff --git a/spec/frontend/fixtures/static/signin_tabs.html b/spec/frontend/fixtures/static/signin_tabs.html new file mode 100644 index 00000000000..7e66ab9394b --- /dev/null +++ b/spec/frontend/fixtures/static/signin_tabs.html @@ -0,0 +1,8 @@ +<ul class="nav-links new-session-tabs"> +<li class="active"> +<a href="#ldap">LDAP</a> +</li> +<li> +<a href="#login-pane">Standard</a> +</li> +</ul> diff --git a/spec/frontend/fixtures/static/sketch_viewer.html b/spec/frontend/fixtures/static/sketch_viewer.html new file mode 100644 index 00000000000..e25e554e568 --- /dev/null +++ b/spec/frontend/fixtures/static/sketch_viewer.html @@ -0,0 +1,3 @@ +<div class="file-content" data-endpoint="/test_sketch_file.sketch" id="js-sketch-viewer"> +<div class="js-loading-icon"></div> +</div> diff --git a/spec/frontend/fixtures/todos.rb b/spec/frontend/fixtures/todos.rb new file mode 100644 index 00000000000..a7c183d2414 --- /dev/null +++ b/spec/frontend/fixtures/todos.rb @@ -0,0 +1,54 @@ +require 'spec_helper' + +describe 'Todos (JavaScript fixtures)' do + include JavaScriptFixturesHelpers + + let(:admin) { create(:admin) } + let(:namespace) { create(:namespace, name: 'frontend-fixtures' )} + let(:project) { create(:project_empty_repo, namespace: namespace, path: 'todos-project') } + let(:issue_1) { create(:issue, title: 'issue_1', project: project) } + let!(:todo_1) { create(:todo, user: admin, project: project, target: issue_1, created_at: 5.hours.ago) } + let(:issue_2) { create(:issue, title: 'issue_2', project: project) } + let!(:todo_2) { create(:todo, :done, user: admin, project: project, target: issue_2, created_at: 50.hours.ago) } + + before(:all) do + clean_frontend_fixtures('todos/') + end + + after do + remove_repository(project) + end + + describe Dashboard::TodosController, '(JavaScript fixtures)', type: :controller do + render_views + + before do + sign_in(admin) + end + + it 'todos/todos.html' do + get :index + + expect(response).to be_successful + end + end + + describe Projects::TodosController, '(JavaScript fixtures)', type: :controller do + render_views + + before do + sign_in(admin) + end + + it 'todos/todos.json' do + post :create, params: { + namespace_id: namespace, + project_id: project, + issuable_type: 'issue', + issuable_id: issue_2.id + }, format: 'json' + + expect(response).to be_successful + end + end +end diff --git a/spec/frontend/fixtures/u2f.rb b/spec/frontend/fixtures/u2f.rb new file mode 100644 index 00000000000..8ecbc0390cd --- /dev/null +++ b/spec/frontend/fixtures/u2f.rb @@ -0,0 +1,44 @@ +require 'spec_helper' + +context 'U2F' do + include JavaScriptFixturesHelpers + + let(:user) { create(:user, :two_factor_via_u2f, otp_secret: 'otpsecret:coolkids') } + + before(:all) do + clean_frontend_fixtures('u2f/') + end + + describe SessionsController, '(JavaScript fixtures)', type: :controller do + include DeviseHelpers + + render_views + + before do + set_devise_mapping(context: @request) + end + + it 'u2f/authenticate.html' do + allow(controller).to receive(:find_user).and_return(user) + + post :create, params: { user: { login: user.username, password: user.password } } + + expect(response).to be_successful + end + end + + describe Profiles::TwoFactorAuthsController, '(JavaScript fixtures)', type: :controller do + render_views + + before do + sign_in(user) + allow_any_instance_of(Profiles::TwoFactorAuthsController).to receive(:build_qr_code).and_return('qrcode:blackandwhitesquares') + end + + it 'u2f/register.html' do + get :show + + expect(response).to be_successful + end + end +end diff --git a/spec/frontend/helpers/fixtures.js b/spec/frontend/helpers/fixtures.js index b77bcd6266e..778196843db 100644 --- a/spec/frontend/helpers/fixtures.js +++ b/spec/frontend/helpers/fixtures.js @@ -4,12 +4,15 @@ import path from 'path'; import { ErrorWithStack } from 'jest-util'; export function getFixture(relativePath) { - const absolutePath = path.join(global.fixturesBasePath, relativePath); + const basePath = relativePath.startsWith('static/') + ? global.staticFixturesBasePath + : global.fixturesBasePath; + const absolutePath = path.join(basePath, relativePath); if (!fs.existsSync(absolutePath)) { throw new ErrorWithStack( `Fixture file ${relativePath} does not exist. -Did you run bin/rake karma:fixtures?`, +Did you run bin/rake frontend:fixtures?`, getFixture, ); } diff --git a/spec/frontend/helpers/vue_test_utils_helper.js b/spec/frontend/helpers/vue_test_utils_helper.js index 121e99c9783..68326e37ae7 100644 --- a/spec/frontend/helpers/vue_test_utils_helper.js +++ b/spec/frontend/helpers/vue_test_utils_helper.js @@ -1,5 +1,3 @@ -/* eslint-disable import/prefer-default-export */ - const vNodeContainsText = (vnode, text) => (vnode.text && vnode.text.includes(text)) || (vnode.children && vnode.children.filter(child => vNodeContainsText(child, text)).length); @@ -19,3 +17,19 @@ export const shallowWrapperContainsSlotText = (shallowWrapper, slotName, text) = Boolean( shallowWrapper.vm.$slots[slotName].filter(vnode => vNodeContainsText(vnode, text)).length, ); + +/** + * Returns a promise that waits for a mutation to be fired before resolving + * NOTE: There's no reject action here so it will hang if it waits for a mutation that won't happen. + * @param {Object} store - The Vue store that contains the mutations + * @param {String} expectedMutationType - The Mutation to wait for + */ +export const waitForMutation = (store, expectedMutationType) => + new Promise(resolve => { + const unsubscribe = store.subscribe(mutation => { + if (mutation.type === expectedMutationType) { + unsubscribe(); + resolve(); + } + }); + }); diff --git a/spec/frontend/helpers/vue_test_utils_helper_spec.js b/spec/frontend/helpers/vue_test_utils_helper_spec.js new file mode 100644 index 00000000000..41714066da5 --- /dev/null +++ b/spec/frontend/helpers/vue_test_utils_helper_spec.js @@ -0,0 +1,48 @@ +import { shallowMount } from '@vue/test-utils'; +import { shallowWrapperContainsSlotText } from './vue_test_utils_helper'; + +describe('Vue test utils helpers', () => { + describe('shallowWrapperContainsSlotText', () => { + const mockText = 'text'; + const mockSlot = `<div>${mockText}</div>`; + let mockComponent; + + beforeEach(() => { + mockComponent = shallowMount( + { + render(h) { + h(`<div>mockedComponent</div>`); + }, + }, + { + slots: { + default: mockText, + namedSlot: mockSlot, + }, + }, + ); + }); + + it('finds text within shallowWrapper default slot', () => { + expect(shallowWrapperContainsSlotText(mockComponent, 'default', mockText)).toBe(true); + }); + + it('finds text within shallowWrapper named slot', () => { + expect(shallowWrapperContainsSlotText(mockComponent, 'namedSlot', mockText)).toBe(true); + }); + + it('returns false when text is not present', () => { + const searchText = 'absent'; + + expect(shallowWrapperContainsSlotText(mockComponent, 'default', searchText)).toBe(false); + expect(shallowWrapperContainsSlotText(mockComponent, 'namedSlot', searchText)).toBe(false); + }); + + it('searches with case-sensitivity', () => { + const searchText = mockText.toUpperCase(); + + expect(shallowWrapperContainsSlotText(mockComponent, 'default', searchText)).toBe(false); + expect(shallowWrapperContainsSlotText(mockComponent, 'namedSlot', searchText)).toBe(false); + }); + }); +}); diff --git a/spec/frontend/helpers/vuex_action_helper.js b/spec/frontend/helpers/vuex_action_helper.js index 88652202a8e..6c3569a2247 100644 --- a/spec/frontend/helpers/vuex_action_helper.js +++ b/spec/frontend/helpers/vuex_action_helper.js @@ -20,7 +20,7 @@ const noop = () => {}; * // expected mutations * [ * { type: types.MUTATION} - * { type: types.MUTATION_1, payload: jasmine.any(Number)} + * { type: types.MUTATION_1, payload: expect.any(Number)} * ], * // expected actions * [ @@ -89,10 +89,7 @@ export default ( payload, ); - return new Promise(resolve => { - setImmediate(resolve); - }) - .then(() => result) + return (result || new Promise(resolve => setImmediate(resolve))) .catch(error => { validateResults(); throw error; diff --git a/spec/frontend/helpers/vuex_action_helper_spec.js b/spec/frontend/helpers/vuex_action_helper_spec.js new file mode 100644 index 00000000000..61d05762a04 --- /dev/null +++ b/spec/frontend/helpers/vuex_action_helper_spec.js @@ -0,0 +1,166 @@ +import MockAdapter from 'axios-mock-adapter'; +import { TEST_HOST } from 'helpers/test_constants'; +import axios from '~/lib/utils/axios_utils'; +import testAction from './vuex_action_helper'; + +describe('VueX test helper (testAction)', () => { + let originalExpect; + let assertion; + let mock; + const noop = () => {}; + + beforeEach(() => { + mock = new MockAdapter(axios); + /** + * In order to test the helper properly, we need to overwrite the Jest + * `expect` helper. We test that the testAction helper properly passes the + * dispatched actions/committed mutations to the Jest helper. + */ + originalExpect = expect; + assertion = null; + global.expect = actual => ({ + toEqual: () => { + originalExpect(actual).toEqual(assertion); + }, + }); + }); + + afterEach(() => { + mock.restore(); + global.expect = originalExpect; + }); + + it('properly passes state and payload to action', () => { + const exampleState = { FOO: 12, BAR: 3 }; + const examplePayload = { BAZ: 73, BIZ: 55 }; + + const action = ({ state }, payload) => { + originalExpect(state).toEqual(exampleState); + originalExpect(payload).toEqual(examplePayload); + }; + + assertion = { mutations: [], actions: [] }; + + testAction(action, examplePayload, exampleState); + }); + + describe('given a sync action', () => { + it('mocks committing mutations', () => { + const action = ({ commit }) => { + commit('MUTATION'); + }; + + assertion = { mutations: [{ type: 'MUTATION' }], actions: [] }; + + testAction(action, null, {}, assertion.mutations, assertion.actions, noop); + }); + + it('mocks dispatching actions', () => { + const action = ({ dispatch }) => { + dispatch('ACTION'); + }; + + assertion = { actions: [{ type: 'ACTION' }], mutations: [] }; + + testAction(action, null, {}, assertion.mutations, assertion.actions, noop); + }); + + it('works with done callback once finished', done => { + assertion = { mutations: [], actions: [] }; + + testAction(noop, null, {}, assertion.mutations, assertion.actions, done); + }); + + it('returns a promise', done => { + assertion = { mutations: [], actions: [] }; + + testAction(noop, null, {}, assertion.mutations, assertion.actions) + .then(done) + .catch(done.fail); + }); + }); + + describe('given an async action (returning a promise)', () => { + let lastError; + const data = { FOO: 'BAR' }; + + const asyncAction = ({ commit, dispatch }) => { + dispatch('ACTION'); + + return axios + .get(TEST_HOST) + .catch(error => { + commit('ERROR'); + lastError = error; + throw error; + }) + .then(() => { + commit('SUCCESS'); + return data; + }); + }; + + beforeEach(() => { + lastError = null; + }); + + it('works with done callback once finished', done => { + mock.onGet(TEST_HOST).replyOnce(200, 42); + + assertion = { mutations: [{ type: 'SUCCESS' }], actions: [{ type: 'ACTION' }] }; + + testAction(asyncAction, null, {}, assertion.mutations, assertion.actions, done); + }); + + it('returns original data of successful promise while checking actions/mutations', done => { + mock.onGet(TEST_HOST).replyOnce(200, 42); + + assertion = { mutations: [{ type: 'SUCCESS' }], actions: [{ type: 'ACTION' }] }; + + testAction(asyncAction, null, {}, assertion.mutations, assertion.actions) + .then(res => { + originalExpect(res).toEqual(data); + done(); + }) + .catch(done.fail); + }); + + it('returns original error of rejected promise while checking actions/mutations', done => { + mock.onGet(TEST_HOST).replyOnce(500, ''); + + assertion = { mutations: [{ type: 'ERROR' }], actions: [{ type: 'ACTION' }] }; + + testAction(asyncAction, null, {}, assertion.mutations, assertion.actions) + .then(done.fail) + .catch(error => { + originalExpect(error).toBe(lastError); + done(); + }); + }); + }); + + it('works with async actions not returning promises', done => { + const data = { FOO: 'BAR' }; + + const asyncAction = ({ commit, dispatch }) => { + dispatch('ACTION'); + + axios + .get(TEST_HOST) + .then(() => { + commit('SUCCESS'); + return data; + }) + .catch(error => { + commit('ERROR'); + throw error; + }); + }; + + mock.onGet(TEST_HOST).replyOnce(200, 42); + + assertion = { mutations: [{ type: 'SUCCESS' }], actions: [{ type: 'ACTION' }] }; + + testAction(asyncAction, null, {}, assertion.mutations, assertion.actions, done); + }); +}); diff --git a/spec/frontend/ide/lib/files_spec.js b/spec/frontend/ide/lib/files_spec.js index aa1fa0373db..08a31318544 100644 --- a/spec/frontend/ide/lib/files_spec.js +++ b/spec/frontend/ide/lib/files_spec.js @@ -12,6 +12,7 @@ const createEntries = paths => { const { name, parent } = splitParent(path); const parentEntry = acc[parent]; + const previewMode = viewerInformationForPath(name); acc[path] = { ...decorateData({ @@ -22,7 +23,8 @@ const createEntries = paths => { path, url: createUrl(`/${TEST_PROJECT_ID}/${type}/${TEST_BRANCH_ID}/-/${escapeFileUrl(path)}`), type, - previewMode: viewerInformationForPath(path), + previewMode, + binary: (previewMode && previewMode.binary) || false, parentPath: parent, parentTreeUrl: parentEntry ? parentEntry.url diff --git a/spec/frontend/ide/services/index_spec.js b/spec/frontend/ide/services/index_spec.js new file mode 100644 index 00000000000..3d5ed4b5c0c --- /dev/null +++ b/spec/frontend/ide/services/index_spec.js @@ -0,0 +1,31 @@ +import services from '~/ide/services'; +import Api from '~/api'; + +jest.mock('~/api'); + +const TEST_PROJECT_ID = 'alice/wonderland'; +const TEST_BRANCH = 'master-patch-123'; +const TEST_COMMIT_SHA = '123456789'; + +describe('IDE services', () => { + describe('commit', () => { + let payload; + + beforeEach(() => { + payload = { + branch: TEST_BRANCH, + commit_message: 'Hello world', + actions: [], + start_sha: TEST_COMMIT_SHA, + }; + + Api.commitMultiple.mockReturnValue(Promise.resolve()); + }); + + it('should commit', () => { + services.commit(TEST_PROJECT_ID, payload); + + expect(Api.commitMultiple).toHaveBeenCalledWith(TEST_PROJECT_ID, payload); + }); + }); +}); diff --git a/spec/frontend/ide/utils_spec.js b/spec/frontend/ide/utils_spec.js new file mode 100644 index 00000000000..2b7dffdcd88 --- /dev/null +++ b/spec/frontend/ide/utils_spec.js @@ -0,0 +1,44 @@ +import { commitItemIconMap } from '~/ide/constants'; +import { getCommitIconMap } from '~/ide/utils'; +import { decorateData } from '~/ide/stores/utils'; + +describe('WebIDE utils', () => { + const createFile = (name = 'name', id = name, type = '', parent = null) => + decorateData({ + id, + type, + icon: 'icon', + url: 'url', + name, + path: parent ? `${parent.path}/${name}` : name, + parentPath: parent ? parent.path : '', + lastCommit: {}, + }); + + describe('getCommitIconMap', () => { + let entry; + + beforeEach(() => { + entry = createFile('Entry item'); + }); + + it('renders "deleted" icon for deleted entries', () => { + entry.deleted = true; + expect(getCommitIconMap(entry)).toEqual(commitItemIconMap.deleted); + }); + it('renders "addition" icon for temp entries', () => { + entry.tempFile = true; + expect(getCommitIconMap(entry)).toEqual(commitItemIconMap.addition); + }); + it('renders "modified" icon for newly-renamed entries', () => { + entry.prevPath = 'foo/bar'; + entry.tempFile = false; + expect(getCommitIconMap(entry)).toEqual(commitItemIconMap.modified); + }); + it('renders "modified" icon even for temp entries if they are newly-renamed', () => { + entry.prevPath = 'foo/bar'; + entry.tempFile = true; + expect(getCommitIconMap(entry)).toEqual(commitItemIconMap.modified); + }); + }); +}); diff --git a/spec/frontend/issue_show/components/pinned_links_spec.js b/spec/frontend/issue_show/components/pinned_links_spec.js new file mode 100644 index 00000000000..77da3390918 --- /dev/null +++ b/spec/frontend/issue_show/components/pinned_links_spec.js @@ -0,0 +1,47 @@ +import { shallowMount, createLocalVue } from '@vue/test-utils'; +import { GlLink } from '@gitlab/ui'; +import PinnedLinks from '~/issue_show/components/pinned_links.vue'; + +const localVue = createLocalVue(); + +const plainZoomUrl = 'https://zoom.us/j/123456789'; + +describe('PinnedLinks', () => { + let wrapper; + + const link = { + get text() { + return wrapper.find(GlLink).text(); + }, + get href() { + return wrapper.find(GlLink).attributes('href'); + }, + }; + + const createComponent = props => { + wrapper = shallowMount(localVue.extend(PinnedLinks), { + localVue, + sync: false, + propsData: { + zoomMeetingUrl: null, + ...props, + }, + }); + }; + + it('displays Zoom link', () => { + createComponent({ + zoomMeetingUrl: `<a href="${plainZoomUrl}">Zoom</a>`, + }); + + expect(link.text).toBe('Join Zoom meeting'); + }); + + it('does not render if there are no links', () => { + createComponent({ + zoomMeetingUrl: null, + }); + + expect(wrapper.find(GlLink).exists()).toBe(false); + }); +}); diff --git a/spec/frontend/jobs/components/empty_state_spec.js b/spec/frontend/jobs/components/empty_state_spec.js deleted file mode 100644 index a2df79bdda0..00000000000 --- a/spec/frontend/jobs/components/empty_state_spec.js +++ /dev/null @@ -1,93 +0,0 @@ -import Vue from 'vue'; -import component from '~/jobs/components/empty_state.vue'; -import mountComponent from '../../helpers/vue_mount_component_helper'; - -describe('Empty State', () => { - const Component = Vue.extend(component); - let vm; - - const props = { - illustrationPath: 'illustrations/pending_job_empty.svg', - illustrationSizeClass: 'svg-430', - title: 'This job has not started yet', - }; - - const content = 'This job is in pending state and is waiting to be picked by a runner'; - - afterEach(() => { - vm.$destroy(); - }); - - describe('renders image and title', () => { - beforeEach(() => { - vm = mountComponent(Component, { - ...props, - content, - }); - }); - - it('renders img with provided path and size', () => { - expect(vm.$el.querySelector('img').getAttribute('src')).toEqual(props.illustrationPath); - expect(vm.$el.querySelector('.svg-content').classList).toContain(props.illustrationSizeClass); - }); - - it('renders provided title', () => { - expect(vm.$el.querySelector('.js-job-empty-state-title').textContent.trim()).toEqual( - props.title, - ); - }); - }); - - describe('with content', () => { - it('renders content', () => { - vm = mountComponent(Component, { - ...props, - content, - }); - - expect(vm.$el.querySelector('.js-job-empty-state-content').textContent.trim()).toEqual( - content, - ); - }); - }); - - describe('without content', () => { - it('does not render content', () => { - vm = mountComponent(Component, { - ...props, - }); - - expect(vm.$el.querySelector('.js-job-empty-state-content')).toBeNull(); - }); - }); - - describe('with action', () => { - it('renders action', () => { - vm = mountComponent(Component, { - ...props, - content, - action: { - path: 'runner', - button_title: 'Check runner', - method: 'post', - }, - }); - - expect(vm.$el.querySelector('.js-job-empty-state-action').getAttribute('href')).toEqual( - 'runner', - ); - }); - }); - - describe('without action', () => { - it('does not render action', () => { - vm = mountComponent(Component, { - ...props, - content, - action: null, - }); - - expect(vm.$el.querySelector('.js-job-empty-state-action')).toBeNull(); - }); - }); -}); diff --git a/spec/frontend/lib/utils/color_utils_spec.js b/spec/frontend/lib/utils/color_utils_spec.js new file mode 100644 index 00000000000..433e9d5a85e --- /dev/null +++ b/spec/frontend/lib/utils/color_utils_spec.js @@ -0,0 +1,35 @@ +import { textColorForBackground, hexToRgb } from '~/lib/utils/color_utils'; + +describe('Color utils', () => { + describe('Converting hex code to rgb', () => { + it('convert hex code to rgb', () => { + expect(hexToRgb('#000000')).toEqual([0, 0, 0]); + expect(hexToRgb('#ffffff')).toEqual([255, 255, 255]); + }); + + it('convert short hex code to rgb', () => { + expect(hexToRgb('#000')).toEqual([0, 0, 0]); + expect(hexToRgb('#fff')).toEqual([255, 255, 255]); + }); + + it('handle conversion regardless of the characters case', () => { + expect(hexToRgb('#f0F')).toEqual([255, 0, 255]); + }); + }); + + describe('Getting text color for given background', () => { + // following tests are being ported from `text_color_for_bg` section in labels_helper_spec.rb + it('uses light text on dark backgrounds', () => { + expect(textColorForBackground('#222E2E')).toEqual('#FFFFFF'); + }); + + it('uses dark text on light backgrounds', () => { + expect(textColorForBackground('#EEEEEE')).toEqual('#333333'); + }); + + it('supports RGB triplets', () => { + expect(textColorForBackground('#FFF')).toEqual('#333333'); + expect(textColorForBackground('#000')).toEqual('#FFFFFF'); + }); + }); +}); diff --git a/spec/frontend/lib/utils/datetime_utility_spec.js b/spec/frontend/lib/utils/datetime_utility_spec.js index 9f49e68cfe8..751fb5e1b94 100644 --- a/spec/frontend/lib/utils/datetime_utility_spec.js +++ b/spec/frontend/lib/utils/datetime_utility_spec.js @@ -334,6 +334,12 @@ describe('prettyTime methods', () => { assertTimeUnits(aboveOneDay, 33, 2, 2, 0); assertTimeUnits(aboveOneWeek, 26, 0, 1, 9); }); + + it('should correctly parse values when limitedToHours is true', () => { + const twoDays = datetimeUtility.parseSeconds(173000, { limitToHours: true }); + + assertTimeUnits(twoDays, 3, 48, 0, 0); + }); }); describe('stringifyTime', () => { diff --git a/spec/frontend/lib/utils/forms_spec.js b/spec/frontend/lib/utils/forms_spec.js new file mode 100644 index 00000000000..cac17235f0d --- /dev/null +++ b/spec/frontend/lib/utils/forms_spec.js @@ -0,0 +1,74 @@ +import { serializeForm } from '~/lib/utils/forms'; + +describe('lib/utils/forms', () => { + const createDummyForm = inputs => { + const form = document.createElement('form'); + + form.innerHTML = inputs + .map(({ type, name, value }) => { + let str = ``; + if (type === 'select') { + str = `<select name="${name}">`; + value.forEach(v => { + if (v.length > 0) { + str += `<option value="${v}"></option> `; + } + }); + str += `</select>`; + } else { + str = `<input type="${type}" name="${name}" value="${value}" checked/>`; + } + return str; + }) + .join(''); + + return form; + }; + + describe('serializeForm', () => { + it('returns an object of key values from inputs', () => { + const form = createDummyForm([ + { type: 'text', name: 'foo', value: 'foo-value' }, + { type: 'text', name: 'bar', value: 'bar-value' }, + ]); + + const data = serializeForm(form); + + expect(data).toEqual({ + foo: 'foo-value', + bar: 'bar-value', + }); + }); + + it('works with select', () => { + const form = createDummyForm([ + { type: 'select', name: 'foo', value: ['foo-value1', 'foo-value2'] }, + { type: 'text', name: 'bar', value: 'bar-value1' }, + ]); + + const data = serializeForm(form); + + expect(data).toEqual({ + foo: 'foo-value1', + bar: 'bar-value1', + }); + }); + + it('works with multiple inputs of the same name', () => { + const form = createDummyForm([ + { type: 'checkbox', name: 'foo', value: 'foo-value3' }, + { type: 'checkbox', name: 'foo', value: 'foo-value2' }, + { type: 'checkbox', name: 'foo', value: 'foo-value1' }, + { type: 'text', name: 'bar', value: 'bar-value2' }, + { type: 'text', name: 'bar', value: 'bar-value1' }, + ]); + + const data = serializeForm(form); + + expect(data).toEqual({ + foo: ['foo-value3', 'foo-value2', 'foo-value1'], + bar: ['bar-value2', 'bar-value1'], + }); + }); + }); +}); diff --git a/spec/frontend/lib/utils/text_utility_spec.js b/spec/frontend/lib/utils/text_utility_spec.js index 9e920d59093..b6f1aef9ce4 100644 --- a/spec/frontend/lib/utils/text_utility_spec.js +++ b/spec/frontend/lib/utils/text_utility_spec.js @@ -29,20 +29,6 @@ describe('text_utility', () => { }); }); - describe('pluralize', () => { - it('should pluralize given string', () => { - expect(textUtils.pluralize('test', 2)).toBe('tests'); - }); - - it('should pluralize when count is 0', () => { - expect(textUtils.pluralize('test', 0)).toBe('tests'); - }); - - it('should not pluralize when count is 1', () => { - expect(textUtils.pluralize('test', 1)).toBe('test'); - }); - }); - describe('dasherize', () => { it('should replace underscores with dashes', () => { expect(textUtils.dasherize('foo_bar_foo')).toEqual('foo-bar-foo'); @@ -55,9 +41,24 @@ describe('text_utility', () => { }); }); - describe('slugifyWithHyphens', () => { + describe('slugify', () => { + it('should remove accents and convert to lower case', () => { + expect(textUtils.slugify('João')).toEqual('jo-o'); + }); it('should replaces whitespaces with hyphens and convert to lower case', () => { - expect(textUtils.slugifyWithHyphens('My Input String')).toEqual('my-input-string'); + expect(textUtils.slugify('My Input String')).toEqual('my-input-string'); + }); + it('should remove trailing whitespace and replace whitespaces within string with a hyphen', () => { + expect(textUtils.slugify(' a new project ')).toEqual('a-new-project'); + }); + it('should only remove non-allowed special characters', () => { + expect(textUtils.slugify('test!_pro-ject~')).toEqual('test-_pro-ject-'); + }); + it('should squash multiple hypens', () => { + expect(textUtils.slugify('test!!!!_pro-ject~')).toEqual('test-_pro-ject-'); + }); + it('should return empty string if only non-allowed characters', () => { + expect(textUtils.slugify('здрасти')).toEqual(''); }); }); diff --git a/spec/frontend/lib/utils/url_utility_spec.js b/spec/frontend/lib/utils/url_utility_spec.js index c771984a137..b0bdd924921 100644 --- a/spec/frontend/lib/utils/url_utility_spec.js +++ b/spec/frontend/lib/utils/url_utility_spec.js @@ -34,6 +34,41 @@ describe('URL utility', () => { }); }); + describe('getParameterValues', () => { + beforeEach(() => { + setWindowLocation({ + href: 'https://gitlab.com?test=passing&multiple=1&multiple=2', + // make our fake location act like real window.location.toString + // URL() (used in getParameterValues) does this if passed an object + toString() { + return this.href; + }, + }); + }); + + it('returns empty array for no params', () => { + expect(urlUtils.getParameterValues()).toEqual([]); + }); + + it('returns empty array for non-matching params', () => { + expect(urlUtils.getParameterValues('notFound')).toEqual([]); + }); + + it('returns single match', () => { + expect(urlUtils.getParameterValues('test')).toEqual(['passing']); + }); + + it('returns multiple matches', () => { + expect(urlUtils.getParameterValues('multiple')).toEqual(['1', '2']); + }); + + it('accepts url as second arg', () => { + const url = 'https://gitlab.com?everything=works'; + expect(urlUtils.getParameterValues('everything', url)).toEqual(['works']); + expect(urlUtils.getParameterValues('test', url)).toEqual([]); + }); + }); + describe('mergeUrlParams', () => { it('adds w', () => { expect(urlUtils.mergeUrlParams({ w: 1 }, '#frag')).toBe('?w=1#frag'); @@ -59,6 +94,12 @@ describe('URL utility', () => { it('adds and updates encoded params', () => { expect(urlUtils.mergeUrlParams({ a: '&', q: '?' }, '?a=%23#frag')).toBe('?a=%26&q=%3F#frag'); }); + + it('treats "+" as "%20"', () => { + expect(urlUtils.mergeUrlParams({ ref: 'bogus' }, '?a=lorem+ipsum&ref=charlie')).toBe( + '?a=lorem%20ipsum&ref=bogus', + ); + }); }); describe('removeParams', () => { diff --git a/spec/frontend/matchers.js b/spec/frontend/matchers.js new file mode 100644 index 00000000000..35c362d0bf5 --- /dev/null +++ b/spec/frontend/matchers.js @@ -0,0 +1,38 @@ +export default { + toHaveSpriteIcon: (element, iconName) => { + if (!iconName) { + throw new Error('toHaveSpriteIcon is missing iconName argument!'); + } + + if (!(element instanceof HTMLElement)) { + throw new Error(`${element} is not a DOM element!`); + } + + const iconReferences = [].slice.apply(element.querySelectorAll('svg use')); + const matchingIcon = iconReferences.find(reference => + reference.getAttribute('xlink:href').endsWith(`#${iconName}`), + ); + + const pass = Boolean(matchingIcon); + + let message; + if (pass) { + message = `${element.outerHTML} contains the sprite icon "${iconName}"!`; + } else { + message = `${element.outerHTML} does not contain the sprite icon "${iconName}"!`; + + const existingIcons = iconReferences.map(reference => { + const iconUrl = reference.getAttribute('xlink:href'); + return `"${iconUrl.replace(/^.+#/, '')}"`; + }); + if (existingIcons.length > 0) { + message += ` (only found ${existingIcons.join(',')})`; + } + } + + return { + pass, + message: () => message, + }; + }, +}; diff --git a/spec/frontend/mocks/ce/lib/utils/axios_utils.js b/spec/frontend/mocks/ce/lib/utils/axios_utils.js new file mode 100644 index 00000000000..b4065626b09 --- /dev/null +++ b/spec/frontend/mocks/ce/lib/utils/axios_utils.js @@ -0,0 +1,15 @@ +const axios = jest.requireActual('~/lib/utils/axios_utils').default; + +axios.isMock = true; + +// Fail tests for unmocked requests +axios.defaults.adapter = config => { + const message = + `Unexpected unmocked request: ${JSON.stringify(config, null, 2)}\n` + + 'Consider using the `axios-mock-adapter` in tests.'; + const error = new Error(message); + error.config = config; + throw error; +}; + +export default axios; diff --git a/spec/frontend/mocks/mocks_helper.js b/spec/frontend/mocks/mocks_helper.js new file mode 100644 index 00000000000..21c032cd3c9 --- /dev/null +++ b/spec/frontend/mocks/mocks_helper.js @@ -0,0 +1,60 @@ +/** + * @module + * + * This module implements auto-injected manual mocks that are cleaner than Jest's approach. + * + * See https://docs.gitlab.com/ee/development/testing_guide/frontend_testing.html + */ + +import fs from 'fs'; +import path from 'path'; + +import readdir from 'readdir-enhanced'; + +const MAX_DEPTH = 20; +const prefixMap = [ + // E.g. the mock ce/foo/bar maps to require path ~/foo/bar + { mocksRoot: 'ce', requirePrefix: '~' }, + // { mocksRoot: 'ee', requirePrefix: 'ee' }, // We'll deal with EE-specific mocks later + { mocksRoot: 'node', requirePrefix: '' }, + // { mocksRoot: 'virtual', requirePrefix: '' }, // We'll deal with virtual mocks later +]; + +const mockFileFilter = stats => stats.isFile() && stats.path.endsWith('.js'); + +const getMockFiles = root => readdir.sync(root, { deep: MAX_DEPTH, filter: mockFileFilter }); + +// Function that performs setting a mock. This has to be overridden by the unit test, because +// jest.setMock can't be overwritten across files. +// Use require() because jest.setMock expects the CommonJS exports object +const defaultSetMock = (srcPath, mockPath) => + jest.mock(srcPath, () => jest.requireActual(mockPath)); + +// eslint-disable-next-line import/prefer-default-export +export const setupManualMocks = function setupManualMocks(setMock = defaultSetMock) { + prefixMap.forEach(({ mocksRoot, requirePrefix }) => { + const mocksRootAbsolute = path.join(__dirname, mocksRoot); + if (!fs.existsSync(mocksRootAbsolute)) { + return; + } + + getMockFiles(path.join(__dirname, mocksRoot)).forEach(mockPath => { + const mockPathNoExt = mockPath.substring(0, mockPath.length - path.extname(mockPath).length); + const sourcePath = path.join(requirePrefix, mockPathNoExt); + const mockPathRelative = `./${path.join(mocksRoot, mockPathNoExt)}`; + + try { + setMock(sourcePath, mockPathRelative); + } catch (e) { + if (e.message.includes('Could not locate module')) { + // The corresponding mocked module doesn't exist. Raise a better error. + // Eventualy, we may support virtual mocks (mocks whose path doesn't directly correspond + // to a module, like with the `ee_else_ce` prefix). + throw new Error( + `A manual mock was defined for module ${sourcePath}, but the module doesn't exist!`, + ); + } + } + }); + }); +}; diff --git a/spec/frontend/mocks/mocks_helper_spec.js b/spec/frontend/mocks/mocks_helper_spec.js new file mode 100644 index 00000000000..b8bb02c2f43 --- /dev/null +++ b/spec/frontend/mocks/mocks_helper_spec.js @@ -0,0 +1,149 @@ +/* eslint-disable global-require, promise/catch-or-return */ + +import path from 'path'; + +import axios from '~/lib/utils/axios_utils'; + +const absPath = path.join.bind(null, __dirname); + +jest.mock('fs'); +jest.mock('readdir-enhanced'); + +describe('mocks_helper.js', () => { + let setupManualMocks; + const setMock = jest.fn().mockName('setMock'); + let fs; + let readdir; + + beforeAll(() => { + jest.resetModules(); + jest.setMock = jest.fn().mockName('jest.setMock'); + fs = require('fs'); + readdir = require('readdir-enhanced'); + + // We need to provide setupManualMocks with a mock function that pretends to do the setup of + // the mock. This is because we can't mock jest.setMock across files. + setupManualMocks = () => require('./mocks_helper').setupManualMocks(setMock); + }); + + afterEach(() => { + fs.existsSync.mockReset(); + readdir.sync.mockReset(); + setMock.mockReset(); + }); + + it('enumerates through mock file roots', () => { + setupManualMocks(); + expect(fs.existsSync).toHaveBeenCalledTimes(2); + expect(fs.existsSync).toHaveBeenNthCalledWith(1, absPath('ce')); + expect(fs.existsSync).toHaveBeenNthCalledWith(2, absPath('node')); + + expect(readdir.sync).toHaveBeenCalledTimes(0); + }); + + it("doesn't traverse the directory tree infinitely", () => { + fs.existsSync.mockReturnValue(true); + readdir.sync.mockReturnValue([]); + setupManualMocks(); + + const readdirSpy = readdir.sync; + expect(readdirSpy).toHaveBeenCalled(); + readdirSpy.mock.calls.forEach(call => { + expect(call[1].deep).toBeLessThan(100); + }); + }); + + it('sets up mocks for CE (the ~/ prefix)', () => { + fs.existsSync.mockImplementation(root => root.endsWith('ce')); + readdir.sync.mockReturnValue(['root.js', 'lib/utils/util.js']); + setupManualMocks(); + + expect(readdir.sync).toHaveBeenCalledTimes(1); + expect(readdir.sync.mock.calls[0][0]).toBe(absPath('ce')); + + expect(setMock).toHaveBeenCalledTimes(2); + expect(setMock).toHaveBeenNthCalledWith(1, '~/root', './ce/root'); + expect(setMock).toHaveBeenNthCalledWith(2, '~/lib/utils/util', './ce/lib/utils/util'); + }); + + it('sets up mocks for node_modules', () => { + fs.existsSync.mockImplementation(root => root.endsWith('node')); + readdir.sync.mockReturnValue(['jquery', '@babel/core']); + setupManualMocks(); + + expect(readdir.sync).toHaveBeenCalledTimes(1); + expect(readdir.sync.mock.calls[0][0]).toBe(absPath('node')); + + expect(setMock).toHaveBeenCalledTimes(2); + expect(setMock).toHaveBeenNthCalledWith(1, 'jquery', './node/jquery'); + expect(setMock).toHaveBeenNthCalledWith(2, '@babel/core', './node/@babel/core'); + }); + + it('sets up mocks for all roots', () => { + const files = { + [absPath('ce')]: ['root', 'lib/utils/util'], + [absPath('node')]: ['jquery', '@babel/core'], + }; + + fs.existsSync.mockReturnValue(true); + readdir.sync.mockImplementation(root => files[root]); + setupManualMocks(); + + expect(readdir.sync).toHaveBeenCalledTimes(2); + expect(readdir.sync.mock.calls[0][0]).toBe(absPath('ce')); + expect(readdir.sync.mock.calls[1][0]).toBe(absPath('node')); + + expect(setMock).toHaveBeenCalledTimes(4); + expect(setMock).toHaveBeenNthCalledWith(1, '~/root', './ce/root'); + expect(setMock).toHaveBeenNthCalledWith(2, '~/lib/utils/util', './ce/lib/utils/util'); + expect(setMock).toHaveBeenNthCalledWith(3, 'jquery', './node/jquery'); + expect(setMock).toHaveBeenNthCalledWith(4, '@babel/core', './node/@babel/core'); + }); + + it('fails when given a virtual mock', () => { + fs.existsSync.mockImplementation(p => p.endsWith('ce')); + readdir.sync.mockReturnValue(['virtual', 'shouldntBeImported']); + setMock.mockImplementation(() => { + throw new Error('Could not locate module'); + }); + + expect(setupManualMocks).toThrow( + new Error("A manual mock was defined for module ~/virtual, but the module doesn't exist!"), + ); + + expect(readdir.sync).toHaveBeenCalledTimes(1); + expect(readdir.sync.mock.calls[0][0]).toBe(absPath('ce')); + }); + + describe('auto-injection', () => { + it('handles ambiguous paths', () => { + jest.isolateModules(() => { + const axios2 = require('../../../app/assets/javascripts/lib/utils/axios_utils').default; + expect(axios2.isMock).toBe(true); + }); + }); + + it('survives jest.isolateModules()', done => { + jest.isolateModules(() => { + const axios2 = require('~/lib/utils/axios_utils').default; + expect(axios2.get('http://gitlab.com')) + .rejects.toThrow('Unexpected unmocked request') + .then(done); + }); + }); + + it('can be unmocked and remocked', () => { + jest.dontMock('~/lib/utils/axios_utils'); + jest.resetModules(); + const axios2 = require('~/lib/utils/axios_utils').default; + expect(axios2).not.toBe(axios); + expect(axios2.isMock).toBeUndefined(); + + jest.doMock('~/lib/utils/axios_utils'); + jest.resetModules(); + const axios3 = require('~/lib/utils/axios_utils').default; + expect(axios3).not.toBe(axios2); + expect(axios3.isMock).toBe(true); + }); + }); +}); diff --git a/spec/frontend/mocks/node/jquery.js b/spec/frontend/mocks/node/jquery.js new file mode 100644 index 00000000000..34a25772f67 --- /dev/null +++ b/spec/frontend/mocks/node/jquery.js @@ -0,0 +1,13 @@ +/* eslint-disable import/no-commonjs */ + +const $ = jest.requireActual('jquery'); + +// Fail tests for unmocked requests +$.ajax = () => { + throw new Error( + 'Unexpected unmocked jQuery.ajax() call! Make sure to mock jQuery.ajax() in tests.', + ); +}; + +// jquery is not an ES6 module +module.exports = $; diff --git a/spec/frontend/mocks_spec.js b/spec/frontend/mocks_spec.js new file mode 100644 index 00000000000..2d2324120fd --- /dev/null +++ b/spec/frontend/mocks_spec.js @@ -0,0 +1,13 @@ +import $ from 'jquery'; +import axios from '~/lib/utils/axios_utils'; + +describe('Mock auto-injection', () => { + describe('mocks', () => { + it('~/lib/utils/axios_utils', () => + expect(axios.get('http://gitlab.com')).rejects.toThrow('Unexpected unmocked request')); + + it('jQuery.ajax()', () => { + expect($.ajax).toThrow('Unexpected unmocked'); + }); + }); +}); diff --git a/spec/frontend/monitoring/__snapshots__/dashboard_state_spec.js.snap b/spec/frontend/monitoring/__snapshots__/dashboard_state_spec.js.snap new file mode 100644 index 00000000000..5f24bab600c --- /dev/null +++ b/spec/frontend/monitoring/__snapshots__/dashboard_state_spec.js.snap @@ -0,0 +1,37 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`EmptyState shows gettingStarted state 1`] = ` +<glemptystate-stub + description="Stay updated about the performance and health of your environment by configuring Prometheus to monitor your deployments." + primarybuttonlink="/clustersPath" + primarybuttontext="Install on clusters" + secondarybuttonlink="/settingsPath" + secondarybuttontext="Configure existing installation" + svgpath="/path/to/getting-started.svg" + title="Get started with performance monitoring" +/> +`; + +exports[`EmptyState shows loading state 1`] = ` +<glemptystate-stub + description="Creating graphs uses the data from the Prometheus server. If this takes a long time, ensure that data is available." + primarybuttonlink="/documentationPath" + primarybuttontext="View documentation" + secondarybuttonlink="" + secondarybuttontext="" + svgpath="/path/to/loading.svg" + title="Waiting for performance data" +/> +`; + +exports[`EmptyState shows unableToConnect state 1`] = ` +<glemptystate-stub + description="Ensure connectivity is available from the GitLab server to the Prometheus server" + primarybuttonlink="/documentationPath" + primarybuttontext="View documentation" + secondarybuttonlink="/settingsPath" + secondarybuttontext="Configure Prometheus" + svgpath="/path/to/unable-to-connect.svg" + title="Unable to connect to Prometheus server" +/> +`; diff --git a/spec/frontend/monitoring/dashboard_state_spec.js b/spec/frontend/monitoring/dashboard_state_spec.js new file mode 100644 index 00000000000..950422911eb --- /dev/null +++ b/spec/frontend/monitoring/dashboard_state_spec.js @@ -0,0 +1,43 @@ +import { shallowMount } from '@vue/test-utils'; +import EmptyState from '~/monitoring/components/empty_state.vue'; + +function createComponent(props) { + return shallowMount(EmptyState, { + propsData: { + ...props, + settingsPath: '/settingsPath', + clustersPath: '/clustersPath', + documentationPath: '/documentationPath', + emptyGettingStartedSvgPath: '/path/to/getting-started.svg', + emptyLoadingSvgPath: '/path/to/loading.svg', + emptyNoDataSvgPath: '/path/to/no-data.svg', + emptyUnableToConnectSvgPath: '/path/to/unable-to-connect.svg', + }, + }); +} + +describe('EmptyState', () => { + it('shows gettingStarted state', () => { + const wrapper = createComponent({ + selectedState: 'gettingStarted', + }); + + expect(wrapper.element).toMatchSnapshot(); + }); + + it('shows loading state', () => { + const wrapper = createComponent({ + selectedState: 'loading', + }); + + expect(wrapper.element).toMatchSnapshot(); + }); + + it('shows unableToConnect state', () => { + const wrapper = createComponent({ + selectedState: 'unableToConnect', + }); + + expect(wrapper.element).toMatchSnapshot(); + }); +}); diff --git a/spec/frontend/monitoring/embed/embed_spec.js b/spec/frontend/monitoring/embed/embed_spec.js new file mode 100644 index 00000000000..3b18a0f77c7 --- /dev/null +++ b/spec/frontend/monitoring/embed/embed_spec.js @@ -0,0 +1,78 @@ +import { createLocalVue, shallowMount } from '@vue/test-utils'; +import Vuex from 'vuex'; +import Embed from '~/monitoring/components/embed.vue'; +import MonitorAreaChart from '~/monitoring/components/charts/area.vue'; +import { TEST_HOST } from 'helpers/test_constants'; +import { groups, initialState, metricsData, metricsWithData } from './mock_data'; + +const localVue = createLocalVue(); +localVue.use(Vuex); + +describe('Embed', () => { + let wrapper; + let store; + let actions; + + function mountComponent() { + wrapper = shallowMount(Embed, { + localVue, + store, + propsData: { + dashboardUrl: TEST_HOST, + }, + }); + } + + beforeEach(() => { + actions = { + setFeatureFlags: () => {}, + setShowErrorBanner: () => {}, + setEndpoints: () => {}, + fetchMetricsData: () => {}, + }; + + store = new Vuex.Store({ + modules: { + monitoringDashboard: { + namespaced: true, + actions, + state: initialState, + }, + }, + }); + }); + + afterEach(() => { + if (wrapper) { + wrapper.destroy(); + } + }); + + describe('no metrics are available yet', () => { + beforeEach(() => { + mountComponent(); + }); + + it('shows an empty state when no metrics are present', () => { + expect(wrapper.find('.metrics-embed').exists()).toBe(true); + expect(wrapper.find(MonitorAreaChart).exists()).toBe(false); + }); + }); + + describe('metrics are available', () => { + beforeEach(() => { + store.state.monitoringDashboard.groups = groups; + store.state.monitoringDashboard.groups[0].metrics = metricsData; + store.state.monitoringDashboard.metricsWithData = metricsWithData; + + mountComponent(); + }); + + it('shows a chart when metrics are present', () => { + wrapper.setProps({}); + expect(wrapper.find('.metrics-embed').exists()).toBe(true); + expect(wrapper.find(MonitorAreaChart).exists()).toBe(true); + expect(wrapper.findAll(MonitorAreaChart).length).toBe(2); + }); + }); +}); diff --git a/spec/frontend/monitoring/embed/mock_data.js b/spec/frontend/monitoring/embed/mock_data.js new file mode 100644 index 00000000000..df4acb82e95 --- /dev/null +++ b/spec/frontend/monitoring/embed/mock_data.js @@ -0,0 +1,87 @@ +export const metricsWithData = [15, 16]; + +export const groups = [ + { + panels: [ + { + title: 'Memory Usage (Total)', + type: 'area-chart', + y_label: 'Total Memory Used', + weight: 4, + metrics: [ + { + id: 'system_metrics_kubernetes_container_memory_total', + metric_id: 15, + }, + ], + }, + { + title: 'Core Usage (Total)', + type: 'area-chart', + y_label: 'Total Cores', + weight: 3, + metrics: [ + { + id: 'system_metrics_kubernetes_container_cores_total', + metric_id: 16, + }, + ], + }, + ], + }, +]; + +export const metrics = [ + { + id: 'system_metrics_kubernetes_container_memory_total', + metric_id: 15, + }, + { + id: 'system_metrics_kubernetes_container_cores_total', + metric_id: 16, + }, +]; + +const queries = [ + { + result: [ + { + values: [ + ['Mon', 1220], + ['Tue', 932], + ['Wed', 901], + ['Thu', 934], + ['Fri', 1290], + ['Sat', 1330], + ['Sun', 1320], + ], + }, + ], + }, +]; + +export const metricsData = [ + { + queries, + metrics: [ + { + metric_id: 15, + }, + ], + }, + { + queries, + metrics: [ + { + metric_id: 16, + }, + ], + }, +]; + +export const initialState = { + monitoringDashboard: {}, + groups: [], + metricsWithData: [], + useDashboardEndpoint: true, +}; diff --git a/spec/frontend/notes/components/discussion_jump_to_next_button_spec.js b/spec/frontend/notes/components/discussion_jump_to_next_button_spec.js index 989b0458481..fd439ba46bd 100644 --- a/spec/frontend/notes/components/discussion_jump_to_next_button_spec.js +++ b/spec/frontend/notes/components/discussion_jump_to_next_button_spec.js @@ -23,8 +23,7 @@ describe('JumpToNextDiscussionButton', () => { button.trigger('click'); - expect(wrapper.emitted()).toEqual({ - onClick: [[]], - }); + expect(wrapper.emitted().onClick).toBeTruthy(); + expect(wrapper.emitted().onClick.length).toBe(1); }); }); diff --git a/spec/frontend/notes/components/discussion_keyboard_navigator_spec.js b/spec/frontend/notes/components/discussion_keyboard_navigator_spec.js new file mode 100644 index 00000000000..8881bedf3cc --- /dev/null +++ b/spec/frontend/notes/components/discussion_keyboard_navigator_spec.js @@ -0,0 +1,104 @@ +/* global Mousetrap */ +import 'mousetrap'; +import { shallowMount, createLocalVue } from '@vue/test-utils'; +import Vuex from 'vuex'; +import DiscussionKeyboardNavigator from '~/notes/components/discussion_keyboard_navigator.vue'; +import notesModule from '~/notes/stores/modules'; + +const localVue = createLocalVue(); +localVue.use(Vuex); + +const NEXT_ID = 'abc123'; +const PREV_ID = 'def456'; +const NEXT_DIFF_ID = 'abc123_diff'; +const PREV_DIFF_ID = 'def456_diff'; + +describe('notes/components/discussion_keyboard_navigator', () => { + let storeOptions; + let wrapper; + let store; + + const createComponent = (options = {}) => { + store = new Vuex.Store(storeOptions); + + wrapper = shallowMount(DiscussionKeyboardNavigator, { + localVue, + store, + ...options, + }); + + wrapper.vm.jumpToDiscussion = jest.fn(); + }; + + beforeEach(() => { + const notes = notesModule(); + + notes.getters.nextUnresolvedDiscussionId = () => (currId, isDiff) => + isDiff ? NEXT_DIFF_ID : NEXT_ID; + notes.getters.previousUnresolvedDiscussionId = () => (currId, isDiff) => + isDiff ? PREV_DIFF_ID : PREV_ID; + + storeOptions = { + modules: { + notes, + }, + }; + }); + + afterEach(() => { + wrapper.destroy(); + storeOptions = null; + store = null; + }); + + describe.each` + isDiffView | expectedNextId | expectedPrevId + ${true} | ${NEXT_DIFF_ID} | ${PREV_DIFF_ID} + ${false} | ${NEXT_ID} | ${PREV_ID} + `('when isDiffView is $isDiffView', ({ isDiffView, expectedNextId, expectedPrevId }) => { + beforeEach(() => { + createComponent({ propsData: { isDiffView } }); + }); + + it('calls jumpToNextDiscussion when pressing `n`', () => { + Mousetrap.trigger('n'); + + expect(wrapper.vm.jumpToDiscussion).toHaveBeenCalledWith(expectedNextId); + expect(wrapper.vm.currentDiscussionId).toEqual(expectedNextId); + }); + + it('calls jumpToPreviousDiscussion when pressing `p`', () => { + Mousetrap.trigger('p'); + + expect(wrapper.vm.jumpToDiscussion).toHaveBeenCalledWith(expectedPrevId); + expect(wrapper.vm.currentDiscussionId).toEqual(expectedPrevId); + }); + }); + + describe('on destroy', () => { + beforeEach(() => { + jest.spyOn(Mousetrap, 'unbind'); + + createComponent(); + + wrapper.destroy(); + }); + + it('unbinds keys', () => { + expect(Mousetrap.unbind).toHaveBeenCalledWith('n'); + expect(Mousetrap.unbind).toHaveBeenCalledWith('p'); + }); + + it('does not call jumpToNextDiscussion when pressing `n`', () => { + Mousetrap.trigger('n'); + + expect(wrapper.vm.jumpToDiscussion).not.toHaveBeenCalled(); + }); + + it('does not call jumpToNextDiscussion when pressing `p`', () => { + Mousetrap.trigger('p'); + + expect(wrapper.vm.jumpToDiscussion).not.toHaveBeenCalled(); + }); + }); +}); diff --git a/spec/frontend/notes/components/discussion_notes_replies_wrapper_spec.js b/spec/frontend/notes/components/discussion_notes_replies_wrapper_spec.js new file mode 100644 index 00000000000..279ca017b44 --- /dev/null +++ b/spec/frontend/notes/components/discussion_notes_replies_wrapper_spec.js @@ -0,0 +1,51 @@ +import { mount } from '@vue/test-utils'; +import DiscussionNotesRepliesWrapper from '~/notes/components/discussion_notes_replies_wrapper.vue'; + +const TEST_CHILDREN = '<li>Hello!</li><li>World!</li>'; + +// We have to wrap our SUT with a TestComponent because multiple roots are possible +// because it's a functional component. +const TestComponent = { + components: { DiscussionNotesRepliesWrapper }, + template: `<ul><discussion-notes-replies-wrapper v-bind="$attrs">${TEST_CHILDREN}</discussion-notes-replies-wrapper></ul>`, +}; + +describe('DiscussionNotesRepliesWrapper', () => { + let wrapper; + + const createComponent = (props = {}) => { + wrapper = mount(TestComponent, { + propsData: props, + sync: false, + }); + }; + + afterEach(() => { + wrapper.destroy(); + }); + + describe('when normal discussion', () => { + beforeEach(() => { + createComponent(); + }); + + it('renders children directly', () => { + expect(wrapper.html()).toEqual(`<ul>${TEST_CHILDREN}</ul>`); + }); + }); + + describe('when diff discussion', () => { + beforeEach(() => { + createComponent({ + isDiffDiscussion: true, + }); + }); + + it('wraps children with notes', () => { + const notes = wrapper.find('li.discussion-collapsible ul.notes'); + + expect(notes.exists()).toBe(true); + expect(notes.html()).toEqual(`<ul class="notes">${TEST_CHILDREN}</ul>`); + }); + }); +}); diff --git a/spec/frontend/notes/components/discussion_notes_spec.js b/spec/frontend/notes/components/discussion_notes_spec.js index c3204b3aaa0..58d367077e8 100644 --- a/spec/frontend/notes/components/discussion_notes_spec.js +++ b/spec/frontend/notes/components/discussion_notes_spec.js @@ -87,7 +87,7 @@ describe('DiscussionNotes', () => { discussion.notes[0], ]; discussion.notes = notesData; - createComponent({ discussion }); + createComponent({ discussion, shouldRenderDiffs: true }); const notes = wrapper.findAll('.notes > li'); expect(notes.at(0).is(PlaceholderSystemNote)).toBe(true); @@ -112,6 +112,44 @@ describe('DiscussionNotes', () => { }); }); + describe('events', () => { + describe('with groupped notes and replies expanded', () => { + const findNoteAtIndex = index => wrapper.find(`.note:nth-of-type(${index + 1}`); + + beforeEach(() => { + createComponent({ shouldGroupReplies: true, isExpanded: true }); + }); + + it('emits deleteNote when first note emits handleDeleteNote', () => { + findNoteAtIndex(0).vm.$emit('handleDeleteNote'); + expect(wrapper.emitted().deleteNote).toBeTruthy(); + }); + + it('emits startReplying when first note emits startReplying', () => { + findNoteAtIndex(0).vm.$emit('startReplying'); + expect(wrapper.emitted().startReplying).toBeTruthy(); + }); + + it('emits deleteNote when second note emits handleDeleteNote', () => { + findNoteAtIndex(1).vm.$emit('handleDeleteNote'); + expect(wrapper.emitted().deleteNote).toBeTruthy(); + }); + }); + + describe('with ungroupped notes', () => { + let note; + beforeEach(() => { + createComponent(); + note = wrapper.find('.note'); + }); + + it('emits deleteNote when first note emits handleDeleteNote', () => { + note.vm.$emit('handleDeleteNote'); + expect(wrapper.emitted().deleteNote).toBeTruthy(); + }); + }); + }); + describe('componentData', () => { beforeEach(() => { createComponent(); diff --git a/spec/frontend/notes/components/discussion_reply_placeholder_spec.js b/spec/frontend/notes/components/discussion_reply_placeholder_spec.js index 07a366cf339..e008f4ed093 100644 --- a/spec/frontend/notes/components/discussion_reply_placeholder_spec.js +++ b/spec/frontend/notes/components/discussion_reply_placeholder_spec.js @@ -2,13 +2,19 @@ import ReplyPlaceholder from '~/notes/components/discussion_reply_placeholder.vu import { shallowMount, createLocalVue } from '@vue/test-utils'; const localVue = createLocalVue(); +const buttonText = 'Test Button Text'; describe('ReplyPlaceholder', () => { let wrapper; + const findButton = () => wrapper.find({ ref: 'button' }); + beforeEach(() => { wrapper = shallowMount(ReplyPlaceholder, { localVue, + propsData: { + buttonText, + }, }); }); @@ -17,9 +23,7 @@ describe('ReplyPlaceholder', () => { }); it('emits onClick even on button click', () => { - const button = wrapper.find({ ref: 'button' }); - - button.trigger('click'); + findButton().trigger('click'); expect(wrapper.emitted()).toEqual({ onClick: [[]], @@ -27,8 +31,6 @@ describe('ReplyPlaceholder', () => { }); it('should render reply button', () => { - const button = wrapper.find({ ref: 'button' }); - - expect(button.text()).toEqual('Reply...'); + expect(findButton().text()).toEqual(buttonText); }); }); diff --git a/spec/frontend/operation_settings/components/external_dashboard_spec.js b/spec/frontend/operation_settings/components/external_dashboard_spec.js index a881de8fbfe..39d7c19e731 100644 --- a/spec/frontend/operation_settings/components/external_dashboard_spec.js +++ b/spec/frontend/operation_settings/components/external_dashboard_spec.js @@ -7,7 +7,6 @@ import { refreshCurrentPage } from '~/lib/utils/url_utility'; import createFlash from '~/flash'; import { TEST_HOST } from 'helpers/test_constants'; -jest.mock('~/lib/utils/axios_utils'); jest.mock('~/lib/utils/url_utility'); jest.mock('~/flash'); @@ -32,6 +31,10 @@ describe('operation settings external dashboard component', () => { wrapper = shallow ? shallowMount(...config) : mount(...config); }; + beforeEach(() => { + jest.spyOn(axios, 'patch').mockImplementation(); + }); + afterEach(() => { if (wrapper.destroy) { wrapper.destroy(); diff --git a/spec/frontend/pages/search/show/__snapshots__/refresh_counts_spec.js.snap b/spec/frontend/pages/search/show/__snapshots__/refresh_counts_spec.js.snap new file mode 100644 index 00000000000..ce456d6c899 --- /dev/null +++ b/spec/frontend/pages/search/show/__snapshots__/refresh_counts_spec.js.snap @@ -0,0 +1,7 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`pages/search/show/refresh_counts fetches and displays search counts 1`] = ` +"<div class=\\"badge\\">22</div> +<div class=\\"badge js-search-count\\" data-url=\\"http://test.host/search/count?search=lorem+ipsum&project_id=3&scope=issues\\">4</div> +<div class=\\"badge js-search-count\\" data-url=\\"http://test.host/search/count?search=lorem+ipsum&project_id=3&scope=merge_requests\\">5</div>" +`; diff --git a/spec/frontend/pages/search/show/refresh_counts_spec.js b/spec/frontend/pages/search/show/refresh_counts_spec.js new file mode 100644 index 00000000000..ead268b3971 --- /dev/null +++ b/spec/frontend/pages/search/show/refresh_counts_spec.js @@ -0,0 +1,35 @@ +import MockAdapter from 'axios-mock-adapter'; +import { TEST_HOST } from 'helpers/test_constants'; +import axios from '~/lib/utils/axios_utils'; +import refreshCounts from '~/pages/search/show/refresh_counts'; + +const URL = `${TEST_HOST}/search/count?search=lorem+ipsum&project_id=3`; +const urlWithScope = scope => `${URL}&scope=${scope}`; +const counts = [{ scope: 'issues', count: 4 }, { scope: 'merge_requests', count: 5 }]; +const fixture = `<div class="badge">22</div> +<div class="badge js-search-count hidden" data-url="${urlWithScope('issues')}"></div> +<div class="badge js-search-count hidden" data-url="${urlWithScope('merge_requests')}"></div>`; + +describe('pages/search/show/refresh_counts', () => { + let mock; + + beforeEach(() => { + mock = new MockAdapter(axios); + setFixtures(fixture); + }); + + afterEach(() => { + mock.restore(); + }); + + it('fetches and displays search counts', () => { + counts.forEach(({ scope, count }) => { + mock.onGet(urlWithScope(scope)).reply(200, { count }); + }); + + // assert before act behavior + return refreshCounts().then(() => { + expect(document.body.innerHTML).toMatchSnapshot(); + }); + }); +}); diff --git a/spec/frontend/projects/gke_cluster_namespace/gke_cluster_namespace_spec.js b/spec/frontend/projects/gke_cluster_namespace/gke_cluster_namespace_spec.js new file mode 100644 index 00000000000..7b8df03d3c3 --- /dev/null +++ b/spec/frontend/projects/gke_cluster_namespace/gke_cluster_namespace_spec.js @@ -0,0 +1,61 @@ +import initGkeNamespace from '~/projects/gke_cluster_namespace'; + +describe('GKE cluster namespace', () => { + const changeEvent = new Event('change'); + const isHidden = el => el.classList.contains('hidden'); + const hasDisabledInput = el => el.querySelector('input').disabled; + + let glManagedCheckbox; + let selfManaged; + let glManaged; + + beforeEach(() => { + setFixtures(` + <input class="js-gl-managed" type="checkbox" value="1" checked /> + <div class="js-namespace"> + <input type="text" /> + </div> + <div class="js-namespace-prefixed"> + <input type="text" /> + </div> + `); + + glManagedCheckbox = document.querySelector('.js-gl-managed'); + selfManaged = document.querySelector('.js-namespace'); + glManaged = document.querySelector('.js-namespace-prefixed'); + + initGkeNamespace(); + }); + + describe('GKE cluster namespace toggles', () => { + it('initially displays the GitLab-managed label and input', () => { + expect(isHidden(glManaged)).toEqual(false); + expect(hasDisabledInput(glManaged)).toEqual(false); + + expect(isHidden(selfManaged)).toEqual(true); + expect(hasDisabledInput(selfManaged)).toEqual(true); + }); + + it('displays the self-managed label and input when the Gitlab-managed checkbox is unchecked', () => { + glManagedCheckbox.checked = false; + glManagedCheckbox.dispatchEvent(changeEvent); + + expect(isHidden(glManaged)).toEqual(true); + expect(hasDisabledInput(glManaged)).toEqual(true); + + expect(isHidden(selfManaged)).toEqual(false); + expect(hasDisabledInput(selfManaged)).toEqual(false); + }); + + it('displays the GitLab-managed label and input when the Gitlab-managed checkbox is checked', () => { + glManagedCheckbox.checked = true; + glManagedCheckbox.dispatchEvent(changeEvent); + + expect(isHidden(glManaged)).toEqual(false); + expect(hasDisabledInput(glManaged)).toEqual(false); + + expect(isHidden(selfManaged)).toEqual(true); + expect(hasDisabledInput(selfManaged)).toEqual(true); + }); + }); +}); diff --git a/spec/frontend/projects/projects_filterable_list_spec.js b/spec/frontend/projects/projects_filterable_list_spec.js new file mode 100644 index 00000000000..e756fb3ab56 --- /dev/null +++ b/spec/frontend/projects/projects_filterable_list_spec.js @@ -0,0 +1,31 @@ +import ProjectsFilterableList from '~/projects/projects_filterable_list'; +import { getJSONFixture, setHTMLFixture } from '../helpers/fixtures'; + +describe('ProjectsFilterableList', () => { + let List; + let form; + let filter; + let holder; + + beforeEach(() => { + setHTMLFixture(` + <form id="project-filter-form"> + <input name="name" class="js-projects-list-filter" /> + </div> + <div class="js-projects-list-holder"></div> + `); + getJSONFixture('static/projects.json'); + form = document.querySelector('form#project-filter-form'); + filter = document.querySelector('.js-projects-list-filter'); + holder = document.querySelector('.js-projects-list-holder'); + List = new ProjectsFilterableList(form, filter, holder); + }); + + describe('getFilterEndpoint', () => { + it('updates converts getPagePath for projects', () => { + jest.spyOn(List, 'getPagePath').mockReturnValue('blah/projects?'); + + expect(List.getFilterEndpoint()).toEqual('blah/projects.json?'); + }); + }); +}); diff --git a/spec/frontend/repository/components/__snapshots__/last_commit_spec.js.snap b/spec/frontend/repository/components/__snapshots__/last_commit_spec.js.snap new file mode 100644 index 00000000000..cd8372a8800 --- /dev/null +++ b/spec/frontend/repository/components/__snapshots__/last_commit_spec.js.snap @@ -0,0 +1,98 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Repository last commit component renders commit widget 1`] = ` +<div + class="info-well d-none d-sm-flex project-last-commit commit p-3" +> + <useravatarlink-stub + class="avatar-cell" + imgalt="" + imgcssclasses="" + imgsize="40" + imgsrc="https://test.com" + linkhref="https://test.com/test" + tooltipplacement="top" + tooltiptext="" + username="" + /> + + <div + class="commit-detail flex-list" + > + <div + class="commit-content qa-commit-content" + > + <gllink-stub + class="commit-row-message item-title" + href="https://test.com/commit/123" + > + + Commit title + + </gllink-stub> + + <!----> + + <div + class="committer" + > + <gllink-stub + class="commit-author-link js-user-link" + href="https://test.com/test" + > + + Test + + </gllink-stub> + + authored + + <timeagotooltip-stub + cssclass="" + time="2019-01-01" + tooltipplacement="bottom" + /> + </div> + + <!----> + </div> + + <div + class="commit-actions flex-row" + > + <gllink-stub + class="js-commit-pipeline" + data-original-title="Commit: failed" + href="https://test.com/pipeline" + title="" + > + <ciicon-stub + aria-label="Commit: failed" + cssclasses="" + size="24" + status="[object Object]" + /> + </gllink-stub> + + <div + class="commit-sha-group d-flex" + > + <div + class="label label-monospace monospace" + > + + 12345678 + + </div> + + <clipboardbutton-stub + cssclass="btn-default" + text="123456789" + title="Copy commit SHA to clipboard" + tooltipplacement="bottom" + /> + </div> + </div> + </div> +</div> +`; diff --git a/spec/frontend/repository/components/breadcrumbs_spec.js b/spec/frontend/repository/components/breadcrumbs_spec.js index 068fa317a87..707eae34793 100644 --- a/spec/frontend/repository/components/breadcrumbs_spec.js +++ b/spec/frontend/repository/components/breadcrumbs_spec.js @@ -1,12 +1,14 @@ import { shallowMount, RouterLinkStub } from '@vue/test-utils'; +import { GlDropdown } from '@gitlab/ui'; import Breadcrumbs from '~/repository/components/breadcrumbs.vue'; let vm; -function factory(currentPath) { +function factory(currentPath, extraProps = {}) { vm = shallowMount(Breadcrumbs, { propsData: { currentPath, + ...extraProps, }, stubs: { RouterLink: RouterLinkStub, @@ -41,4 +43,20 @@ describe('Repository breadcrumbs component', () => { .attributes('aria-current'), ).toEqual('page'); }); + + it('does not render add to tree dropdown when permissions are false', () => { + factory('/', { canCollaborate: false }); + + vm.setData({ userPermissions: { forkProject: false, createMergeRequestIn: false } }); + + expect(vm.find(GlDropdown).exists()).toBe(false); + }); + + it('renders add to tree dropdown when permissions are true', () => { + factory('/', { canCollaborate: true }); + + vm.setData({ userPermissions: { forkProject: true, createMergeRequestIn: true } }); + + expect(vm.find(GlDropdown).exists()).toBe(true); + }); }); diff --git a/spec/frontend/repository/components/last_commit_spec.js b/spec/frontend/repository/components/last_commit_spec.js new file mode 100644 index 00000000000..14479f3c3a4 --- /dev/null +++ b/spec/frontend/repository/components/last_commit_spec.js @@ -0,0 +1,110 @@ +import { shallowMount } from '@vue/test-utils'; +import { GlLoadingIcon } from '@gitlab/ui'; +import LastCommit from '~/repository/components/last_commit.vue'; +import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue'; + +let vm; + +function createCommitData(data = {}) { + return { + sha: '123456789', + title: 'Commit title', + message: 'Commit message', + webUrl: 'https://test.com/commit/123', + authoredDate: '2019-01-01', + author: { + name: 'Test', + avatarUrl: 'https://test.com', + webUrl: 'https://test.com/test', + }, + latestPipeline: { + detailedStatus: { + detailsPath: 'https://test.com/pipeline', + icon: 'failed', + tooltip: 'failed', + text: 'failed', + group: {}, + }, + }, + ...data, + }; +} + +function factory(commit = createCommitData(), loading = false) { + vm = shallowMount(LastCommit, { + mocks: { + $apollo: { + queries: { + commit: { + loading: true, + }, + }, + }, + }, + }); + vm.setData({ commit }); + vm.vm.$apollo.queries.commit.loading = loading; +} + +describe('Repository last commit component', () => { + afterEach(() => { + vm.destroy(); + }); + + it.each` + loading | label + ${true} | ${'shows'} + ${false} | ${'hides'} + `('$label when loading icon $loading is true', ({ loading }) => { + factory(createCommitData(), loading); + + expect(vm.find(GlLoadingIcon).exists()).toBe(loading); + }); + + it('renders commit widget', () => { + factory(); + + expect(vm.element).toMatchSnapshot(); + }); + + it('renders short commit ID', () => { + factory(); + + expect(vm.find('.label-monospace').text()).toEqual('12345678'); + }); + + it('hides pipeline components when pipeline does not exist', () => { + factory(createCommitData({ latestPipeline: null })); + + expect(vm.find('.js-commit-pipeline').exists()).toBe(false); + }); + + it('renders pipeline components', () => { + factory(); + + expect(vm.find('.js-commit-pipeline').exists()).toBe(true); + }); + + it('hides author component when author does not exist', () => { + factory(createCommitData({ author: null })); + + expect(vm.find('.js-user-link').exists()).toBe(false); + expect(vm.find(UserAvatarLink).exists()).toBe(false); + }); + + it('does not render description expander when description is null', () => { + factory(createCommitData({ description: null })); + + expect(vm.find('.text-expander').exists()).toBe(false); + expect(vm.find('.commit-row-description').exists()).toBe(false); + }); + + it('expands commit description when clicking expander', () => { + factory(createCommitData({ description: 'Test description' })); + + vm.find('.text-expander').vm.$emit('click'); + + expect(vm.find('.commit-row-description').isVisible()).toBe(true); + expect(vm.find('.text-expander').classes('open')).toBe(true); + }); +}); diff --git a/spec/frontend/repository/components/table/__snapshots__/row_spec.js.snap b/spec/frontend/repository/components/table/__snapshots__/row_spec.js.snap index 1f06d693411..d55dc553031 100644 --- a/spec/frontend/repository/components/table/__snapshots__/row_spec.js.snap +++ b/spec/frontend/repository/components/table/__snapshots__/row_spec.js.snap @@ -29,10 +29,20 @@ exports[`Repository table row component renders table row 1`] = ` <td class="d-none d-sm-table-cell tree-commit" - /> + > + <glskeletonloading-stub + class="h-auto" + lines="1" + /> + </td> <td class="tree-time-ago text-right" - /> + > + <glskeletonloading-stub + class="ml-auto h-auto w-50" + lines="1" + /> + </td> </tr> `; diff --git a/spec/frontend/repository/components/table/row_spec.js b/spec/frontend/repository/components/table/row_spec.js index 5a345ddeacd..e539c560975 100644 --- a/spec/frontend/repository/components/table/row_spec.js +++ b/spec/frontend/repository/components/table/row_spec.js @@ -1,5 +1,5 @@ import { shallowMount, RouterLinkStub } from '@vue/test-utils'; -import { GlBadge } from '@gitlab/ui'; +import { GlBadge, GlLink } from '@gitlab/ui'; import { visitUrl } from '~/lib/utils/url_utility'; import TableRow from '~/repository/components/table/row.vue'; @@ -16,6 +16,8 @@ function factory(propsData = {}) { vm = shallowMount(TableRow, { propsData: { ...propsData, + name: propsData.path, + projectPath: 'gitlab-org/gitlab-ce', url: `https://test.com`, }, mocks: { @@ -140,4 +142,18 @@ describe('Repository table row component', () => { expect(vm.find(GlBadge).exists()).toBe(true); }); + + it('renders commit and web links with href for submodule', () => { + factory({ + id: '1', + path: 'test', + type: 'commit', + url: 'https://test.com', + submoduleTreeUrl: 'https://test.com/commit', + currentPath: '/', + }); + + expect(vm.find('a').attributes('href')).toEqual('https://test.com'); + expect(vm.find(GlLink).attributes('href')).toEqual('https://test.com/commit'); + }); }); diff --git a/spec/frontend/repository/log_tree_spec.js b/spec/frontend/repository/log_tree_spec.js new file mode 100644 index 00000000000..a9499f7c61b --- /dev/null +++ b/spec/frontend/repository/log_tree_spec.js @@ -0,0 +1,129 @@ +import MockAdapter from 'axios-mock-adapter'; +import axios from '~/lib/utils/axios_utils'; +import { normalizeData, resolveCommit, fetchLogsTree } from '~/repository/log_tree'; + +const mockData = [ + { + commit: { + id: '123', + message: 'testing message', + committed_date: '2019-01-01', + }, + commit_path: `https://test.com`, + file_name: 'index.js', + type: 'blob', + }, +]; + +describe('normalizeData', () => { + it('normalizes data into LogTreeCommit object', () => { + expect(normalizeData(mockData)).toEqual([ + { + sha: '123', + message: 'testing message', + committedDate: '2019-01-01', + commitPath: 'https://test.com', + fileName: 'index.js', + type: 'blob', + __typename: 'LogTreeCommit', + }, + ]); + }); +}); + +describe('resolveCommit', () => { + it('calls resolve when commit found', () => { + const resolver = { + entry: { name: 'index.js', type: 'blob' }, + resolve: jest.fn(), + }; + const commits = [{ fileName: 'index.js', type: 'blob' }]; + + resolveCommit(commits, resolver); + + expect(resolver.resolve).toHaveBeenCalledWith({ fileName: 'index.js', type: 'blob' }); + }); +}); + +describe('fetchLogsTree', () => { + let mock; + let client; + let resolver; + + beforeEach(() => { + mock = new MockAdapter(axios); + + mock.onGet(/(.*)/).reply(200, mockData, {}); + + jest.spyOn(axios, 'get'); + + global.gon = { gitlab_url: 'https://test.com' }; + + client = { + readQuery: () => ({ + projectPath: 'gitlab-org/gitlab-ce', + ref: 'master', + commits: [], + }), + writeQuery: jest.fn(), + }; + + resolver = { + entry: { name: 'index.js', type: 'blob' }, + resolve: jest.fn(), + }; + }); + + afterEach(() => { + mock.restore(); + }); + + it('calls axios get', () => + fetchLogsTree(client, '', '0', resolver).then(() => { + expect(axios.get).toHaveBeenCalledWith( + 'https://test.com/gitlab-org/gitlab-ce/refs/master/logs_tree', + { params: { format: 'json', offset: '0' } }, + ); + })); + + it('calls axios get once', () => + Promise.all([ + fetchLogsTree(client, '', '0', resolver), + fetchLogsTree(client, '', '0', resolver), + ]).then(() => { + expect(axios.get.mock.calls.length).toEqual(1); + })); + + it('calls entry resolver', () => + fetchLogsTree(client, '', '0', resolver).then(() => { + expect(resolver.resolve).toHaveBeenCalledWith({ + __typename: 'LogTreeCommit', + commitPath: 'https://test.com', + committedDate: '2019-01-01', + fileName: 'index.js', + message: 'testing message', + sha: '123', + type: 'blob', + }); + })); + + it('writes query to client', () => + fetchLogsTree(client, '', '0', resolver).then(() => { + expect(client.writeQuery).toHaveBeenCalledWith({ + query: expect.anything(), + data: { + commits: [ + { + __typename: 'LogTreeCommit', + commitPath: 'https://test.com', + committedDate: '2019-01-01', + fileName: 'index.js', + message: 'testing message', + sha: '123', + type: 'blob', + }, + ], + }, + }); + })); +}); diff --git a/spec/frontend/test_setup.js b/spec/frontend/test_setup.js index 7e7cc1488b8..df8a625319b 100644 --- a/spec/frontend/test_setup.js +++ b/spec/frontend/test_setup.js @@ -1,12 +1,22 @@ import Vue from 'vue'; import * as jqueryMatchers from 'custom-jquery-matchers'; +import $ from 'jquery'; import Translate from '~/vue_shared/translate'; -import axios from '~/lib/utils/axios_utils'; +import { config as testUtilsConfig } from '@vue/test-utils'; import { initializeTestTimeout } from './helpers/timeout'; import { loadHTMLFixture, setHTMLFixture } from './helpers/fixtures'; +import { setupManualMocks } from './mocks/mocks_helper'; +import customMatchers from './matchers'; + +// Expose jQuery so specs using jQuery plugins can be imported nicely. +// Here is an issue to explore better alternatives: +// https://gitlab.com/gitlab-org/gitlab-ee/issues/12448 +window.jQuery = $; process.on('unhandledRejection', global.promiseRejectionHandler); +setupManualMocks(); + afterEach(() => // give Promises a bit more time so they fail the right test new Promise(setImmediate).then(() => { @@ -17,18 +27,6 @@ afterEach(() => initializeTestTimeout(process.env.CI ? 5000 : 500); -// fail tests for unmocked requests -beforeEach(done => { - axios.defaults.adapter = config => { - const error = new Error(`Unexpected unmocked request: ${JSON.stringify(config, null, 2)}`); - error.config = config; - done.fail(error); - return Promise.reject(error); - }; - - done(); -}); - Vue.config.devtools = false; Vue.config.productionTip = false; @@ -54,9 +52,44 @@ Object.assign(global, { preloadFixtures() {}, }); +Object.assign(global, { + MutationObserver() { + return { + disconnect() {}, + observe() {}, + }; + }, +}); + // custom-jquery-matchers was written for an old Jest version, we need to make it compatible Object.entries(jqueryMatchers).forEach(([matcherName, matcherFactory]) => { expect.extend({ [matcherName]: matcherFactory().compare, }); }); + +expect.extend(customMatchers); + +// Tech debt issue TBD +testUtilsConfig.logModifiedComponents = false; + +// Basic stub for MutationObserver +global.MutationObserver = () => ({ + disconnect: () => {}, + observe: () => {}, +}); + +Object.assign(global, { + requestIdleCallback(cb) { + const start = Date.now(); + return setTimeout(() => { + cb({ + didTimeout: false, + timeRemaining: () => Math.max(0, 50 - (Date.now() - start)), + }); + }); + }, + cancelIdleCallback(id) { + clearTimeout(id); + }, +}); diff --git a/spec/frontend/tracking_spec.js b/spec/frontend/tracking_spec.js new file mode 100644 index 00000000000..cd0bf50f8e9 --- /dev/null +++ b/spec/frontend/tracking_spec.js @@ -0,0 +1,116 @@ +import $ from 'jquery'; +import { setHTMLFixture } from './helpers/fixtures'; + +import Tracking from '~/tracking'; + +describe('Tracking', () => { + beforeEach(() => { + window.snowplow = window.snowplow || (() => {}); + }); + + describe('.event', () => { + let snowplowSpy = null; + + beforeEach(() => { + snowplowSpy = jest.spyOn(window, 'snowplow'); + }); + + it('tracks to snowplow (our current tracking system)', () => { + Tracking.event('_category_', '_eventName_', { label: '_label_' }); + + expect(snowplowSpy).toHaveBeenCalledWith('trackStructEvent', '_category_', '_eventName_', { + label: '_label_', + property: '', + value: '', + }); + }); + + it('skips tracking if snowplow is unavailable', () => { + window.snowplow = false; + Tracking.event('_category_', '_eventName_'); + + expect(snowplowSpy).not.toHaveBeenCalled(); + }); + }); + + describe('tracking interface events', () => { + let eventSpy = null; + let subject = null; + + beforeEach(() => { + eventSpy = jest.spyOn(Tracking, 'event'); + subject = new Tracking('_category_'); + setHTMLFixture(` + <input data-track-event="click_input1" data-track-label="_label_" value="_value_"/> + <input data-track-event="click_input2" data-track-value="_value_override_" value="_value_"/> + <input type="checkbox" data-track-event="toggle_checkbox" value="_value_" checked/> + <input class="dropdown" data-track-event="toggle_dropdown"/> + <div class="js-projects-list-holder"></div> + `); + }); + + it('binds to clicks on elements matching [data-track-event]', () => { + subject.bind(document); + $('[data-track-event="click_input1"]').click(); + + expect(eventSpy).toHaveBeenCalledWith('_category_', 'click_input1', { + label: '_label_', + value: '_value_', + property: '', + }); + }); + + it('allows value override with the data-track-value attribute', () => { + subject.bind(document); + $('[data-track-event="click_input2"]').click(); + + expect(eventSpy).toHaveBeenCalledWith('_category_', 'click_input2', { + label: '', + value: '_value_override_', + property: '', + }); + }); + + it('handles checkbox values correctly', () => { + subject.bind(document); + const $checkbox = $('[data-track-event="toggle_checkbox"]'); + + $checkbox.click(); // unchecking + + expect(eventSpy).toHaveBeenCalledWith('_category_', 'toggle_checkbox', { + label: '', + property: '', + value: false, + }); + + $checkbox.click(); // checking + + expect(eventSpy).toHaveBeenCalledWith('_category_', 'toggle_checkbox', { + label: '', + property: '', + value: '_value_', + }); + }); + + it('handles bootstrap dropdowns', () => { + new Tracking('_category_').bind(document); + const $dropdown = $('[data-track-event="toggle_dropdown"]'); + + $dropdown.trigger('show.bs.dropdown'); // showing + + expect(eventSpy).toHaveBeenCalledWith('_category_', 'toggle_dropdown_show', { + label: '', + property: '', + value: '', + }); + + $dropdown.trigger('hide.bs.dropdown'); // hiding + + expect(eventSpy).toHaveBeenCalledWith('_category_', 'toggle_dropdown_hide', { + label: '', + property: '', + value: '', + }); + }); + }); +}); diff --git a/spec/frontend/vue_shared/components/changed_file_icon_spec.js b/spec/frontend/vue_shared/components/changed_file_icon_spec.js new file mode 100644 index 00000000000..806602877ef --- /dev/null +++ b/spec/frontend/vue_shared/components/changed_file_icon_spec.js @@ -0,0 +1,123 @@ +import { shallowMount } from '@vue/test-utils'; +import ChangedFileIcon from '~/vue_shared/components/changed_file_icon.vue'; +import Icon from '~/vue_shared/components/icon.vue'; + +const changedFile = () => ({ changed: true }); +const stagedFile = () => ({ changed: false, staged: true }); +const changedAndStagedFile = () => ({ changed: true, staged: true }); +const newFile = () => ({ changed: true, tempFile: true }); +const unchangedFile = () => ({ changed: false, tempFile: false, staged: false, deleted: false }); + +describe('Changed file icon', () => { + let wrapper; + + const factory = (props = {}) => { + wrapper = shallowMount(ChangedFileIcon, { + propsData: { + file: changedFile(), + showTooltip: true, + ...props, + }, + sync: false, + }); + }; + + afterEach(() => { + wrapper.destroy(); + }); + + const findIcon = () => wrapper.find(Icon); + const findIconName = () => findIcon().props('name'); + const findIconClasses = () => + findIcon() + .props('cssClasses') + .split(' '); + const findTooltipText = () => wrapper.attributes('data-original-title'); + + it('with isCentered true, adds center class', () => { + factory({ + isCentered: true, + }); + + expect(wrapper.classes('ml-auto')).toBe(true); + }); + + it('with isCentered false, does not center', () => { + factory({ + isCentered: false, + }); + + expect(wrapper.classes('ml-auto')).toBe(false); + }); + + it('with showTooltip false, does not show tooltip', () => { + factory({ + showTooltip: false, + }); + + expect(findTooltipText()).toBeFalsy(); + }); + + describe.each` + file | iconName | tooltipText | desc + ${changedFile()} | ${'file-modified'} | ${'Unstaged modification'} | ${'with file changed'} + ${stagedFile()} | ${'file-modified-solid'} | ${'Staged modification'} | ${'with file staged'} + ${changedAndStagedFile()} | ${'file-modified'} | ${'Unstaged and staged modification'} | ${'with file changed and staged'} + ${newFile()} | ${'file-addition'} | ${'Unstaged addition'} | ${'with file new'} + `('$desc', ({ file, iconName, tooltipText }) => { + beforeEach(() => { + factory({ file }); + }); + + it('renders icon', () => { + expect(findIconName()).toBe(iconName); + expect(findIconClasses()).toContain(iconName); + }); + + it('renders tooltip text', () => { + expect(findTooltipText()).toBe(tooltipText); + }); + }); + + describe('with file unchanged', () => { + beforeEach(() => { + factory({ + file: unchangedFile(), + }); + }); + + it('does not show icon', () => { + expect(findIcon().exists()).toBe(false); + }); + + it('does not have tooltip text', () => { + expect(findTooltipText()).toBe(''); + }); + }); + + it('with size set, sets icon size', () => { + const size = 8; + + factory({ + file: changedFile(), + size, + }); + + expect(findIcon().props('size')).toBe(size); + }); + + // NOTE: It looks like 'showStagedIcon' behavior is backwards to what the name suggests + // https://gitlab.com/gitlab-org/gitlab-ce/issues/66071 + it.each` + showStagedIcon | iconName | desc + ${false} | ${'file-modified-solid'} | ${'with showStagedIcon false, renders staged icon'} + ${true} | ${'file-modified'} | ${'with showStagedIcon true, renders regular icon'} + `('$desc', ({ showStagedIcon, iconName }) => { + factory({ + file: stagedFile(), + showStagedIcon, + }); + + expect(findIconName()).toEqual(iconName); + }); +}); diff --git a/spec/frontend/vue_shared/components/issue/related_issuable_item_spec.js b/spec/frontend/vue_shared/components/issue/related_issuable_item_spec.js index e43d5301a50..b85e2673624 100644 --- a/spec/frontend/vue_shared/components/issue/related_issuable_item_spec.js +++ b/spec/frontend/vue_shared/components/issue/related_issuable_item_spec.js @@ -88,7 +88,7 @@ describe('RelatedIssuableItem', () => { }); it('renders state title', () => { - const stateTitle = tokenState.attributes('data-original-title'); + const stateTitle = tokenState.attributes('title'); const formatedCreateDate = formatDate(props.createdAt); expect(stateTitle).toContain('<span class="bold">Opened</span>'); @@ -155,7 +155,9 @@ describe('RelatedIssuableItem', () => { describe('token assignees', () => { it('renders assignees avatars', () => { - expect(wrapper.findAll('.item-assignees .user-avatar-link').length).toBe(2); + // Expect 2 times 2 because assignees are rendered twice, due to layout issues + expect(wrapper.findAll('.item-assignees .user-avatar-link').length).toBeDefined(); + expect(wrapper.find('.item-assignees .avatar-counter').text()).toContain('+2'); }); }); diff --git a/spec/frontend/vue_shared/components/markdown/header_spec.js b/spec/frontend/vue_shared/components/markdown/header_spec.js new file mode 100644 index 00000000000..48f2ee86619 --- /dev/null +++ b/spec/frontend/vue_shared/components/markdown/header_spec.js @@ -0,0 +1,107 @@ +import Vue from 'vue'; +import $ from 'jquery'; +import headerComponent from '~/vue_shared/components/markdown/header.vue'; + +describe('Markdown field header component', () => { + let vm; + + beforeEach(done => { + const Component = Vue.extend(headerComponent); + + vm = new Component({ + propsData: { + previewMarkdown: false, + }, + }).$mount(); + + Vue.nextTick(done); + }); + + it('renders markdown header buttons', () => { + const buttons = [ + 'Add bold text', + 'Add italic text', + 'Insert a quote', + 'Insert suggestion', + 'Insert code', + 'Add a link', + 'Add a bullet list', + 'Add a numbered list', + 'Add a task list', + 'Add a table', + 'Go full screen', + ]; + const elements = vm.$el.querySelectorAll('.toolbar-btn'); + + elements.forEach((buttonEl, index) => { + expect(buttonEl.getAttribute('data-original-title')).toBe(buttons[index]); + }); + }); + + it('renders `write` link as active when previewMarkdown is false', () => { + expect(vm.$el.querySelector('li:nth-child(1)').classList.contains('active')).toBeTruthy(); + }); + + it('renders `preview` link as active when previewMarkdown is true', done => { + vm.previewMarkdown = true; + + Vue.nextTick(() => { + expect(vm.$el.querySelector('li:nth-child(2)').classList.contains('active')).toBeTruthy(); + + done(); + }); + }); + + it('emits toggle markdown event when clicking preview', () => { + jest.spyOn(vm, '$emit').mockImplementation(); + + vm.$el.querySelector('.js-preview-link').click(); + + expect(vm.$emit).toHaveBeenCalledWith('preview-markdown'); + + vm.$el.querySelector('.js-write-link').click(); + + expect(vm.$emit).toHaveBeenCalledWith('write-markdown'); + }); + + it('does not emit toggle markdown event when triggered from another form', () => { + jest.spyOn(vm, '$emit').mockImplementation(); + + $(document).triggerHandler('markdown-preview:show', [ + $( + '<form><div class="js-vue-markdown-field"><textarea class="markdown-area"></textarea></div></form>', + ), + ]); + + expect(vm.$emit).not.toHaveBeenCalled(); + }); + + it('blurs preview link after click', () => { + const link = vm.$el.querySelector('li:nth-child(2) button'); + jest.spyOn(HTMLElement.prototype, 'blur').mockImplementation(); + + link.click(); + + expect(link.blur).toHaveBeenCalled(); + }); + + it('renders markdown table template', () => { + expect(vm.mdTable).toEqual( + '| header | header |\n| ------ | ------ |\n| cell | cell |\n| cell | cell |', + ); + }); + + it('renders suggestion template', () => { + vm.lineContent = 'Some content'; + + expect(vm.mdSuggestion).toEqual('```suggestion:-0+0\n{text}\n```'); + }); + + it('does not render suggestion button if `canSuggest` is set to false', () => { + vm.canSuggest = false; + + Vue.nextTick(() => { + expect(vm.$el.querySelector('.js-suggestion-btn')).toBe(null); + }); + }); +}); diff --git a/spec/frontend/vue_shared/components/markdown/suggestion_diff_header_spec.js b/spec/frontend/vue_shared/components/markdown/suggestion_diff_header_spec.js index 3b6f67457ad..6716e5cd794 100644 --- a/spec/frontend/vue_shared/components/markdown/suggestion_diff_header_spec.js +++ b/spec/frontend/vue_shared/components/markdown/suggestion_diff_header_spec.js @@ -28,8 +28,8 @@ describe('Suggestion Diff component', () => { wrapper.destroy(); }); - const findApplyButton = () => wrapper.find('.qa-apply-btn'); - const findHeader = () => wrapper.find('.qa-suggestion-diff-header'); + const findApplyButton = () => wrapper.find('.js-apply-btn'); + const findHeader = () => wrapper.find('.js-suggestion-diff-header'); const findHelpButton = () => wrapper.find('.js-help-btn'); const findLoading = () => wrapper.find(GlLoadingIcon); @@ -73,7 +73,10 @@ describe('Suggestion Diff component', () => { }); it('emits apply', () => { - expect(wrapper.emittedByOrder()).toEqual([{ name: 'apply', args: [expect.any(Function)] }]); + expect(wrapper.emittedByOrder()).toContainEqual({ + name: 'apply', + args: [expect.any(Function)], + }); }); it('hides apply button', () => { diff --git a/spec/frontend/vue_shared/components/paginated_list_spec.js b/spec/frontend/vue_shared/components/paginated_list_spec.js new file mode 100644 index 00000000000..31ac362d35f --- /dev/null +++ b/spec/frontend/vue_shared/components/paginated_list_spec.js @@ -0,0 +1,56 @@ +import PaginatedList from '~/vue_shared/components/paginated_list.vue'; +import { PREV, NEXT } from '~/vue_shared/components/pagination/constants'; +import { mount } from '@vue/test-utils'; + +describe('Pagination links component', () => { + let wrapper; + let glPaginatedList; + + const template = ` + <div class="slot" slot-scope="{ listItem }"> + <span class="item">Item Name: {{listItem.id}}</span> + </div> + `; + + const props = { + prevText: PREV, + nextText: NEXT, + }; + + beforeEach(() => { + wrapper = mount(PaginatedList, { + scopedSlots: { + default: template, + }, + propsData: { + list: [{ id: 'foo' }, { id: 'bar' }], + props, + }, + }); + + [glPaginatedList] = wrapper.vm.$children; + }); + + afterEach(() => { + wrapper.destroy(); + }); + + describe('Paginated List Component', () => { + describe('props', () => { + // We test attrs and not props because we pass through to child component using v-bind:"$attrs" + it('should pass prevText to GitLab UI paginated list', () => { + expect(glPaginatedList.$attrs['prev-text']).toBe(props.prevText); + }); + it('should pass nextText to GitLab UI paginated list', () => { + expect(glPaginatedList.$attrs['next-text']).toBe(props.nextText); + }); + }); + + describe('rendering', () => { + it('it renders the gl-paginated-list', () => { + expect(wrapper.contains('ul.list-group')).toBe(true); + expect(wrapper.findAll('li.list-group-item').length).toBe(2); + }); + }); + }); +}); diff --git a/spec/frontend/vue_shared/components/pagination_links_spec.js b/spec/frontend/vue_shared/components/pagination_links_spec.js index d0cb3731050..efa5825d92f 100644 --- a/spec/frontend/vue_shared/components/pagination_links_spec.js +++ b/spec/frontend/vue_shared/components/pagination_links_spec.js @@ -1,59 +1,77 @@ -import Vue from 'vue'; +import { mount, createLocalVue } from '@vue/test-utils'; +import { GlPagination } from '@gitlab/ui'; import PaginationLinks from '~/vue_shared/components/pagination_links.vue'; -import { s__ } from '~/locale'; -import mountComponent from '../../helpers/vue_mount_component_helper'; +import { + PREV, + NEXT, + LABEL_FIRST_PAGE, + LABEL_PREV_PAGE, + LABEL_NEXT_PAGE, + LABEL_LAST_PAGE, +} from '~/vue_shared/components/pagination/constants'; + +const localVue = createLocalVue(); describe('Pagination links component', () => { - const paginationLinksComponent = Vue.extend(PaginationLinks); - const change = page => page; const pageInfo = { page: 3, perPage: 5, total: 30, }; const translations = { - firstText: s__('Pagination|« First'), - prevText: s__('Pagination|Prev'), - nextText: s__('Pagination|Next'), - lastText: s__('Pagination|Last »'), + prevText: PREV, + nextText: NEXT, + labelFirstPage: LABEL_FIRST_PAGE, + labelPrevPage: LABEL_PREV_PAGE, + labelNextPage: LABEL_NEXT_PAGE, + labelLastPage: LABEL_LAST_PAGE, }; - let paginationLinks; + let wrapper; let glPagination; - let destinationComponent; + let changeMock; - beforeEach(() => { - paginationLinks = mountComponent(paginationLinksComponent, { - change, - pageInfo, + const createComponent = () => { + changeMock = jest.fn(); + wrapper = mount(PaginationLinks, { + propsData: { + change: changeMock, + pageInfo, + }, + localVue, + sync: false, }); - [glPagination] = paginationLinks.$children; - [destinationComponent] = glPagination.$children; + }; + + beforeEach(() => { + createComponent(); + glPagination = wrapper.find(GlPagination); }); afterEach(() => { - paginationLinks.$destroy(); + wrapper.destroy(); }); it('should provide translated text to GitLab UI pagination', () => { Object.entries(translations).forEach(entry => { - expect(destinationComponent[entry[0]]).toBe(entry[1]); + expect(glPagination.vm[entry[0]]).toBe(entry[1]); }); }); - it('should pass change to GitLab UI pagination', () => { - expect(Object.is(glPagination.change, change)).toBe(true); + it('should call change when page changes', () => { + wrapper.find('a').trigger('click'); + expect(changeMock).toHaveBeenCalled(); }); it('should pass page from pageInfo to GitLab UI pagination', () => { - expect(destinationComponent.value).toBe(pageInfo.page); + expect(glPagination.vm.value).toBe(pageInfo.page); }); it('should pass per page from pageInfo to GitLab UI pagination', () => { - expect(destinationComponent.perPage).toBe(pageInfo.perPage); + expect(glPagination.vm.perPage).toBe(pageInfo.perPage); }); it('should pass total items from pageInfo to GitLab UI pagination', () => { - expect(destinationComponent.totalRows).toBe(pageInfo.total); + expect(glPagination.vm.totalItems).toBe(pageInfo.total); }); }); |
