diff options
Diffstat (limited to 'spec/frontend')
435 files changed, 34386 insertions, 4185 deletions
diff --git a/spec/frontend/.eslintrc.yml b/spec/frontend/.eslintrc.yml index b9159191114..8e6faa90c58 100644 --- a/spec/frontend/.eslintrc.yml +++ b/spec/frontend/.eslintrc.yml @@ -10,7 +10,7 @@ settings: - path import/resolver: jest: - jestConfigFile: 'jest.config.unit.js' + jestConfigFile: 'jest.config.js' globals: getJSONFixture: false loadFixtures: false diff --git a/spec/frontend/__mocks__/lodash/throttle.js b/spec/frontend/__mocks__/lodash/throttle.js new file mode 100644 index 00000000000..aef391afd0c --- /dev/null +++ b/spec/frontend/__mocks__/lodash/throttle.js @@ -0,0 +1,4 @@ +// Similar to `lodash/debounce`, `lodash/throttle` also causes flaky specs. +// See `./debounce.js` for more details. + +export default fn => fn; diff --git a/spec/frontend/__mocks__/monaco-editor/index.js b/spec/frontend/__mocks__/monaco-editor/index.js index 18cc3a7c377..7c53cfb5174 100644 --- a/spec/frontend/__mocks__/monaco-editor/index.js +++ b/spec/frontend/__mocks__/monaco-editor/index.js @@ -9,5 +9,8 @@ import 'monaco-editor/esm/vs/language/json/monaco.contribution'; import 'monaco-editor/esm/vs/language/html/monaco.contribution'; import 'monaco-editor/esm/vs/basic-languages/monaco.contribution'; +// This language starts trying to spin up web workers which obviously breaks in Jest environment +jest.mock('monaco-editor/esm/vs/language/typescript/tsMode'); + export * from 'monaco-editor/esm/vs/editor/editor.api'; export default global.monaco; diff --git a/spec/frontend/alert_management/components/alert_management_detail_spec.js b/spec/frontend/alert_management/components/alert_management_detail_spec.js index 1e4c2e24ccb..14e45a4f563 100644 --- a/spec/frontend/alert_management/components/alert_management_detail_spec.js +++ b/spec/frontend/alert_management/components/alert_management_detail_spec.js @@ -1,39 +1,37 @@ import { mount, shallowMount } from '@vue/test-utils'; -import { GlAlert, GlLoadingIcon, GlDropdownItem, GlTable } from '@gitlab/ui'; +import { GlAlert, GlLoadingIcon, GlTable } from '@gitlab/ui'; +import axios from 'axios'; +import MockAdapter from 'axios-mock-adapter'; import AlertDetails from '~/alert_management/components/alert_details.vue'; -import updateAlertStatus from '~/alert_management/graphql/mutations/update_alert_status.graphql'; -import createFlash from '~/flash'; - +import createIssueQuery from '~/alert_management/graphql/mutations/create_issue_from_alert.graphql'; +import { joinPaths } from '~/lib/utils/url_utility'; +import { + trackAlertsDetailsViewsOptions, + ALERTS_SEVERITY_LABELS, +} from '~/alert_management/constants'; +import Tracking from '~/tracking'; import mockAlerts from '../mocks/alerts.json'; const mockAlert = mockAlerts[0]; -jest.mock('~/flash'); describe('AlertDetails', () => { let wrapper; - const newIssuePath = 'root/alerts/-/issues/new'; - const findStatusDropdownItem = () => wrapper.find(GlDropdownItem); + let mock; + const projectPath = 'root/alerts'; + const projectIssuesPath = 'root/alerts/-/issues'; + const findDetailsTable = () => wrapper.find(GlTable); - function mountComponent({ - data, - createIssueFromAlertEnabled = false, - loading = false, - mountMethod = shallowMount, - stubs = {}, - } = {}) { + function mountComponent({ data, loading = false, mountMethod = shallowMount, stubs = {} } = {}) { wrapper = mountMethod(AlertDetails, { propsData: { alertId: 'alertId', - projectPath: 'projectPath', - newIssuePath, + projectPath, + projectIssuesPath, }, data() { return { alert: { ...mockAlert }, ...data }; }, - provide: { - glFeatures: { createIssueFromAlertEnabled }, - }, mocks: { $apollo: { mutate: jest.fn(), @@ -48,13 +46,22 @@ describe('AlertDetails', () => { }); } + beforeEach(() => { + mock = new MockAdapter(axios); + }); + afterEach(() => { if (wrapper) { - wrapper.destroy(); + if (wrapper) { + wrapper.destroy(); + } } + mock.restore(); }); - const findCreatedIssueBtn = () => wrapper.find('[data-testid="createIssueBtn"]'); + const findCreateIssueBtn = () => wrapper.find('[data-testid="createIssueBtn"]'); + const findViewIssueBtn = () => wrapper.find('[data-testid="viewIssueBtn"]'); + const findIssueCreationAlert = () => wrapper.find('[data-testid="issueCreationError"]'); describe('Alert details', () => { describe('when alert is null', () => { @@ -80,6 +87,12 @@ describe('AlertDetails', () => { expect(wrapper.find('[data-testid="fullDetailsTab"]').exists()).toBe(true); }); + it('renders severity', () => { + expect(wrapper.find('[data-testid="severity"]').text()).toBe( + ALERTS_SEVERITY_LABELS[mockAlert.severity], + ); + }); + it('renders a title', () => { expect(wrapper.find('[data-testid="title"]').text()).toBe(mockAlert.title); }); @@ -117,18 +130,54 @@ describe('AlertDetails', () => { }); describe('Create issue from alert', () => { - describe('createIssueFromAlertEnabled feature flag enabled', () => { - it('should display a button that links to new issue page', () => { - mountComponent({ createIssueFromAlertEnabled: true }); - expect(findCreatedIssueBtn().exists()).toBe(true); - expect(findCreatedIssueBtn().attributes('href')).toBe(newIssuePath); + it('should display "View issue" button that links the issue page when issue exists', () => { + const issueIid = '3'; + mountComponent({ + data: { alert: { ...mockAlert, issueIid } }, }); + expect(findViewIssueBtn().exists()).toBe(true); + expect(findViewIssueBtn().attributes('href')).toBe(joinPaths(projectIssuesPath, issueIid)); + expect(findCreateIssueBtn().exists()).toBe(false); }); - describe('createIssueFromAlertEnabled feature flag disabled', () => { - it('should display a button that links to a new issue page', () => { - mountComponent({ createIssueFromAlertEnabled: false }); - expect(findCreatedIssueBtn().exists()).toBe(false); + it('should display "Create issue" button when issue doesn\'t exist yet', () => { + const issueIid = null; + mountComponent({ + mountMethod: mount, + data: { alert: { ...mockAlert, issueIid } }, + }); + expect(findViewIssueBtn().exists()).toBe(false); + expect(findCreateIssueBtn().exists()).toBe(true); + }); + + it('calls `$apollo.mutate` with `createIssueQuery`', () => { + const issueIid = '10'; + jest + .spyOn(wrapper.vm.$apollo, 'mutate') + .mockResolvedValue({ data: { createAlertIssue: { issue: { iid: issueIid } } } }); + + findCreateIssueBtn().trigger('click'); + expect(wrapper.vm.$apollo.mutate).toHaveBeenCalledWith({ + mutation: createIssueQuery, + variables: { + iid: mockAlert.iid, + projectPath, + }, + }); + }); + + it('shows error alert when issue creation fails ', () => { + const errorMsg = 'Something went wrong'; + mountComponent({ + mountMethod: mount, + data: { alert: { ...mockAlert, alertIid: 1 } }, + }); + + jest.spyOn(wrapper.vm.$apollo, 'mutate').mockRejectedValue(errorMsg); + findCreateIssueBtn().trigger('click'); + + setImmediate(() => { + expect(findIssueCreationAlert().text()).toBe(errorMsg); }); }); }); @@ -171,15 +220,15 @@ describe('AlertDetails', () => { describe('individual header fields', () => { describe.each` - severity | createdAt | monitoringTool | result - ${'MEDIUM'} | ${'2020-04-17T23:18:14.996Z'} | ${null} | ${'Medium • Reported now'} - ${'INFO'} | ${'2020-04-17T23:18:14.996Z'} | ${'Datadog'} | ${'Info • Reported now by Datadog'} + createdAt | monitoringTool | result + ${'2020-04-17T23:18:14.996Z'} | ${null} | ${'Alert Reported now'} + ${'2020-04-17T23:18:14.996Z'} | ${'Datadog'} | ${'Alert Reported now by Datadog'} `( - `When severity=$severity, createdAt=$createdAt, monitoringTool=$monitoringTool`, - ({ severity, createdAt, monitoringTool, result }) => { + `When createdAt=$createdAt, monitoringTool=$monitoringTool`, + ({ createdAt, monitoringTool, result }) => { beforeEach(() => { mountComponent({ - data: { alert: { ...mockAlert, severity, createdAt, monitoringTool } }, + data: { alert: { ...mockAlert, createdAt, monitoringTool } }, mountMethod: mount, stubs, }); @@ -194,19 +243,9 @@ describe('AlertDetails', () => { }); }); - describe('updating the alert status', () => { - const mockUpdatedMutationResult = { - data: { - updateAlertStatus: { - errors: [], - alert: { - status: 'acknowledged', - }, - }, - }, - }; - + describe('Snowplow tracking', () => { beforeEach(() => { + jest.spyOn(Tracking, 'event'); mountComponent({ props: { alertManagementEnabled: true, userCanEnableAlertManagement: true }, data: { alert: mockAlert }, @@ -214,29 +253,9 @@ describe('AlertDetails', () => { }); }); - it('calls `$apollo.mutate` with `updateAlertStatus` mutation and variables containing `iid`, `status`, & `projectPath`', () => { - jest.spyOn(wrapper.vm.$apollo, 'mutate').mockResolvedValue(mockUpdatedMutationResult); - findStatusDropdownItem().vm.$emit('click'); - - expect(wrapper.vm.$apollo.mutate).toHaveBeenCalledWith({ - mutation: updateAlertStatus, - variables: { - iid: 'alertId', - status: 'TRIGGERED', - projectPath: 'projectPath', - }, - }); - }); - - it('calls `createFlash` when request fails', () => { - jest.spyOn(wrapper.vm.$apollo, 'mutate').mockReturnValue(Promise.reject(new Error())); - findStatusDropdownItem().vm.$emit('click'); - - setImmediate(() => { - expect(createFlash).toHaveBeenCalledWith( - 'There was an error while updating the status of the alert. Please try again.', - ); - }); + it('should track alert details page views', () => { + const { category, action } = trackAlertsDetailsViewsOptions; + expect(Tracking.event).toHaveBeenCalledWith(category, action); }); }); }); diff --git a/spec/frontend/alert_management/components/alert_management_list_spec.js b/spec/frontend/alert_management/components/alert_management_list_spec.js index c4630ac57fe..0154e5fa112 100644 --- a/spec/frontend/alert_management/components/alert_management_list_spec.js +++ b/spec/frontend/alert_management/components/alert_management_list_spec.js @@ -7,15 +7,23 @@ import { GlDropdown, GlDropdownItem, GlIcon, + GlTabs, GlTab, + GlBadge, + GlPagination, } from '@gitlab/ui'; import { visitUrl } from '~/lib/utils/url_utility'; import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue'; import createFlash from '~/flash'; import AlertManagementList from '~/alert_management/components/alert_management_list.vue'; -import { ALERTS_STATUS_TABS } from '../../../../app/assets/javascripts/alert_management/constants'; +import { + ALERTS_STATUS_TABS, + trackAlertListViewsOptions, + trackAlertStatusUpdateOptions, +} from '~/alert_management/constants'; import updateAlertStatus from '~/alert_management/graphql/mutations/update_alert_status.graphql'; import mockAlerts from '../mocks/alerts.json'; +import Tracking from '~/tracking'; jest.mock('~/flash'); @@ -33,9 +41,21 @@ describe('AlertManagementList', () => { const findLoader = () => wrapper.find(GlLoadingIcon); const findStatusDropdown = () => wrapper.find(GlDropdown); const findStatusFilterTabs = () => wrapper.findAll(GlTab); + const findStatusTabs = () => wrapper.find(GlTabs); + const findStatusFilterBadge = () => wrapper.findAll(GlBadge); const findDateFields = () => wrapper.findAll(TimeAgo); const findFirstStatusOption = () => findStatusDropdown().find(GlDropdownItem); + const findAssignees = () => wrapper.findAll('[data-testid="assigneesField"]'); const findSeverityFields = () => wrapper.findAll('[data-testid="severityField"]'); + const findSeverityColumnHeader = () => wrapper.findAll('th').at(0); + const findPagination = () => wrapper.find(GlPagination); + const alertsCount = { + open: 14, + triggered: 10, + acknowledged: 6, + resolved: 1, + all: 16, + }; function mountComponent({ props = { @@ -44,7 +64,6 @@ describe('AlertManagementList', () => { }, data = {}, loading = false, - alertListStatusFilteringEnabled = false, stubs = {}, } = {}) { wrapper = mount(AlertManagementList, { @@ -54,17 +73,13 @@ describe('AlertManagementList', () => { emptyAlertSvgPath: 'illustration/path', ...props, }, - provide: { - glFeatures: { - alertListStatusFilteringEnabled, - }, - }, data() { return data; }, mocks: { $apollo: { mutate: jest.fn(), + query: jest.fn(), queries: { alerts: { loading, @@ -86,49 +101,32 @@ describe('AlertManagementList', () => { } }); - describe('alert management feature renders empty state', () => { + describe('Empty state', () => { it('shows empty state', () => { expect(wrapper.find(GlEmptyState).exists()).toBe(true); }); }); describe('Status Filter Tabs', () => { - describe('alertListStatusFilteringEnabled feature flag enabled', () => { - beforeEach(() => { - mountComponent({ - props: { alertManagementEnabled: true, userCanEnableAlertManagement: true }, - data: { alerts: mockAlerts }, - loading: false, - alertListStatusFilteringEnabled: true, - stubs: { - GlTab: true, - }, - }); - }); - - it('should display filter tabs for all statuses', () => { - const tabs = findStatusFilterTabs().wrappers; - tabs.forEach((tab, i) => { - expect(tab.text()).toContain(ALERTS_STATUS_TABS[i].title); - }); + beforeEach(() => { + mountComponent({ + props: { alertManagementEnabled: true, userCanEnableAlertManagement: true }, + data: { alerts: mockAlerts, alertsCount }, + loading: false, + stubs: { + GlTab: true, + }, }); }); - describe('alertListStatusFilteringEnabled feature flag disabled', () => { - beforeEach(() => { - mountComponent({ - props: { alertManagementEnabled: true, userCanEnableAlertManagement: true }, - data: { alerts: mockAlerts }, - loading: false, - alertListStatusFilteringEnabled: false, - stubs: { - GlTab: true, - }, - }); - }); + it('should display filter tabs with alerts count badge for each status', () => { + const tabs = findStatusFilterTabs().wrappers; + const badges = findStatusFilterBadge(); - it('should NOT display tabs', () => { - expect(findStatusFilterTabs()).not.toExist(); + tabs.forEach((tab, i) => { + const status = ALERTS_STATUS_TABS[i].status.toLowerCase(); + expect(tab.text()).toContain(ALERTS_STATUS_TABS[i].title); + expect(badges.at(i).text()).toContain(alertsCount[status]); }); }); }); @@ -137,52 +135,72 @@ describe('AlertManagementList', () => { it('loading state', () => { mountComponent({ props: { alertManagementEnabled: true, userCanEnableAlertManagement: true }, - data: { alerts: null }, + data: { alerts: {}, alertsCount: null }, loading: true, }); expect(findAlertsTable().exists()).toBe(true); expect(findLoader().exists()).toBe(true); + expect( + findAlerts() + .at(0) + .classes(), + ).not.toContain('gl-hover-bg-blue-50'); }); it('error state', () => { mountComponent({ props: { alertManagementEnabled: true, userCanEnableAlertManagement: true }, - data: { alerts: null, errored: true }, + data: { alerts: { errors: ['error'] }, alertsCount: null, errored: true }, loading: false, }); expect(findAlertsTable().exists()).toBe(true); expect(findAlertsTable().text()).toContain('No alerts to display'); expect(findLoader().exists()).toBe(false); expect(findAlert().props().variant).toBe('danger'); + expect( + findAlerts() + .at(0) + .classes(), + ).not.toContain('gl-hover-bg-blue-50'); }); it('empty state', () => { mountComponent({ props: { alertManagementEnabled: true, userCanEnableAlertManagement: true }, - data: { alerts: [], errored: false }, + data: { alerts: { list: [], pageInfo: {} }, alertsCount: { all: 0 }, errored: false }, loading: false, }); expect(findAlertsTable().exists()).toBe(true); expect(findAlertsTable().text()).toContain('No alerts to display'); expect(findLoader().exists()).toBe(false); expect(findAlert().props().variant).toBe('info'); + expect( + findAlerts() + .at(0) + .classes(), + ).not.toContain('gl-hover-bg-blue-50'); }); it('has data state', () => { mountComponent({ props: { alertManagementEnabled: true, userCanEnableAlertManagement: true }, - data: { alerts: mockAlerts, errored: false }, + data: { alerts: { list: mockAlerts }, alertsCount, errored: false }, loading: false, }); expect(findLoader().exists()).toBe(false); expect(findAlertsTable().exists()).toBe(true); expect(findAlerts()).toHaveLength(mockAlerts.length); + expect( + findAlerts() + .at(0) + .classes(), + ).toContain('gl-hover-bg-blue-50'); }); it('displays status dropdown', () => { mountComponent({ props: { alertManagementEnabled: true, userCanEnableAlertManagement: true }, - data: { alerts: mockAlerts, errored: false }, + data: { alerts: { list: mockAlerts }, alertsCount, errored: false }, loading: false, }); expect(findStatusDropdown().exists()).toBe(true); @@ -191,7 +209,7 @@ describe('AlertManagementList', () => { it('shows correct severity icons', () => { mountComponent({ props: { alertManagementEnabled: true, userCanEnableAlertManagement: true }, - data: { alerts: mockAlerts, errored: false }, + data: { alerts: { list: mockAlerts }, alertsCount, errored: false }, loading: false, }); @@ -208,7 +226,7 @@ describe('AlertManagementList', () => { it('renders severity text', () => { mountComponent({ props: { alertManagementEnabled: true, userCanEnableAlertManagement: true }, - data: { alerts: mockAlerts, errored: false }, + data: { alerts: { list: mockAlerts }, alertsCount, errored: false }, loading: false, }); @@ -219,10 +237,38 @@ describe('AlertManagementList', () => { ).toBe('Critical'); }); + it('renders Unassigned when no assignee(s) present', () => { + mountComponent({ + props: { alertManagementEnabled: true, userCanEnableAlertManagement: true }, + data: { alerts: { list: mockAlerts }, alertsCount, errored: false }, + loading: false, + }); + + expect( + findAssignees() + .at(0) + .text(), + ).toBe('Unassigned'); + }); + + it('renders username(s) when assignee(s) present', () => { + mountComponent({ + props: { alertManagementEnabled: true, userCanEnableAlertManagement: true }, + data: { alerts: { list: mockAlerts }, alertsCount, errored: false }, + loading: false, + }); + + expect( + findAssignees() + .at(1) + .text(), + ).toBe(mockAlerts[1].assignees.nodes[0].username); + }); + it('navigates to the detail page when alert row is clicked', () => { mountComponent({ props: { alertManagementEnabled: true, userCanEnableAlertManagement: true }, - data: { alerts: mockAlerts, errored: false }, + data: { alerts: { list: mockAlerts }, alertsCount, errored: false }, loading: false, }); @@ -237,15 +283,19 @@ describe('AlertManagementList', () => { mountComponent({ props: { alertManagementEnabled: true, userCanEnableAlertManagement: true }, data: { - alerts: [ - { - iid: 1, - status: 'acknowledged', - startedAt: '2020-03-17T23:18:14.996Z', - endedAt: '2020-04-17T23:18:14.996Z', - severity: 'high', - }, - ], + alerts: { + list: [ + { + iid: 1, + status: 'acknowledged', + startedAt: '2020-03-17T23:18:14.996Z', + endedAt: '2020-04-17T23:18:14.996Z', + severity: 'high', + assignees: { nodes: [] }, + }, + ], + }, + alertsCount, errored: false, }, loading: false, @@ -266,6 +316,7 @@ describe('AlertManagementList', () => { severity: 'high', }, ], + alertsCount, errored: false, }, loading: false, @@ -275,6 +326,32 @@ describe('AlertManagementList', () => { }); }); + describe('sorting the alert list by column', () => { + beforeEach(() => { + mountComponent({ + props: { alertManagementEnabled: true, userCanEnableAlertManagement: true }, + data: { + alerts: { list: mockAlerts }, + errored: false, + sort: 'STARTED_AT_DESC', + alertsCount, + }, + loading: false, + stubs: { GlTable }, + }); + }); + + it('updates sort with new direction and column key', () => { + findSeverityColumnHeader().trigger('click'); + + expect(wrapper.vm.$data.sort).toBe('SEVERITY_DESC'); + + findSeverityColumnHeader().trigger('click'); + + expect(wrapper.vm.$data.sort).toBe('SEVERITY_ASC'); + }); + }); + describe('updating the alert status', () => { const iid = '1527542'; const mockUpdatedMutationResult = { @@ -292,7 +369,7 @@ describe('AlertManagementList', () => { beforeEach(() => { mountComponent({ props: { alertManagementEnabled: true, userCanEnableAlertManagement: true }, - data: { alerts: mockAlerts, errored: false }, + data: { alerts: { list: mockAlerts }, alertsCount, errored: false }, loading: false, }); }); @@ -322,4 +399,91 @@ describe('AlertManagementList', () => { }); }); }); + + describe('Snowplow tracking', () => { + beforeEach(() => { + jest.spyOn(Tracking, 'event'); + mountComponent({ + props: { alertManagementEnabled: true, userCanEnableAlertManagement: true }, + data: { alerts: { list: mockAlerts }, alertsCount }, + loading: false, + }); + }); + + it('should track alert list page views', () => { + const { category, action } = trackAlertListViewsOptions; + expect(Tracking.event).toHaveBeenCalledWith(category, action); + }); + + it('should track alert status updates', () => { + Tracking.event.mockClear(); + jest.spyOn(wrapper.vm.$apollo, 'mutate').mockResolvedValue({}); + findFirstStatusOption().vm.$emit('click'); + const status = findFirstStatusOption().text(); + setImmediate(() => { + const { category, action, label } = trackAlertStatusUpdateOptions; + expect(Tracking.event).toHaveBeenCalledWith(category, action, { label, property: status }); + }); + }); + }); + + describe('Pagination', () => { + beforeEach(() => { + mountComponent({ + props: { alertManagementEnabled: true, userCanEnableAlertManagement: true }, + data: { alerts: { list: mockAlerts, pageInfo: {} }, alertsCount, errored: false }, + loading: false, + }); + }); + + it('does NOT show pagination control when list is smaller than default page size', () => { + findStatusTabs().vm.$emit('input', 3); + wrapper.vm.$nextTick(() => { + expect(findPagination().exists()).toBe(false); + }); + }); + + it('shows pagination control when list is larger than default page size', () => { + findStatusTabs().vm.$emit('input', 0); + wrapper.vm.$nextTick(() => { + expect(findPagination().exists()).toBe(true); + }); + }); + + describe('prevPage', () => { + it('returns prevPage number', () => { + findPagination().vm.$emit('input', 3); + + return wrapper.vm.$nextTick(() => { + expect(wrapper.vm.prevPage).toBe(2); + }); + }); + + it('returns 0 when it is the first page', () => { + findPagination().vm.$emit('input', 1); + + return wrapper.vm.$nextTick(() => { + expect(wrapper.vm.prevPage).toBe(0); + }); + }); + }); + + describe('nextPage', () => { + it('returns nextPage number', () => { + findPagination().vm.$emit('input', 1); + + return wrapper.vm.$nextTick(() => { + expect(wrapper.vm.nextPage).toBe(2); + }); + }); + + it('returns `null` when currentPage is already last page', () => { + findStatusTabs().vm.$emit('input', 3); + findPagination().vm.$emit('input', 1); + return wrapper.vm.$nextTick(() => { + expect(wrapper.vm.nextPage).toBeNull(); + }); + }); + }); + }); }); diff --git a/spec/frontend/alert_management/components/alert_management_system_note_spec.js b/spec/frontend/alert_management/components/alert_management_system_note_spec.js new file mode 100644 index 00000000000..87dc36cc7cb --- /dev/null +++ b/spec/frontend/alert_management/components/alert_management_system_note_spec.js @@ -0,0 +1,34 @@ +import { shallowMount } from '@vue/test-utils'; +import SystemNote from '~/alert_management/components/system_notes/system_note.vue'; +import mockAlerts from '../mocks/alerts.json'; + +const mockAlert = mockAlerts[1]; + +describe('Alert Details System Note', () => { + let wrapper; + + function mountComponent({ stubs = {} } = {}) { + wrapper = shallowMount(SystemNote, { + propsData: { + note: { ...mockAlert.notes.nodes[0] }, + }, + stubs, + }); + } + + afterEach(() => { + if (wrapper) { + wrapper.destroy(); + } + }); + + describe('System notes', () => { + beforeEach(() => { + mountComponent({}); + }); + + it('renders the correct system note', () => { + expect(wrapper.find('.note-wrapper').attributes('id')).toBe('note_1628'); + }); + }); +}); diff --git a/spec/frontend/alert_management/components/alert_managment_sidebar_assignees_spec.js b/spec/frontend/alert_management/components/alert_managment_sidebar_assignees_spec.js new file mode 100644 index 00000000000..5dbd83dbdac --- /dev/null +++ b/spec/frontend/alert_management/components/alert_managment_sidebar_assignees_spec.js @@ -0,0 +1,133 @@ +import { shallowMount } from '@vue/test-utils'; +import axios from 'axios'; +import MockAdapter from 'axios-mock-adapter'; +import { GlDropdownItem } from '@gitlab/ui'; +import SidebarAssignee from '~/alert_management/components/sidebar/sidebar_assignee.vue'; +import SidebarAssignees from '~/alert_management/components/sidebar/sidebar_assignees.vue'; +import AlertSetAssignees from '~/alert_management/graphql/mutations/alert_set_assignees.graphql'; +import mockAlerts from '../mocks/alerts.json'; + +const mockAlert = mockAlerts[0]; + +describe('Alert Details Sidebar Assignees', () => { + let wrapper; + let mock; + + function mountComponent({ + data, + users = [], + isDropdownSearching = false, + sidebarCollapsed = true, + loading = false, + stubs = {}, + } = {}) { + wrapper = shallowMount(SidebarAssignees, { + data() { + return { + users, + isDropdownSearching, + }; + }, + propsData: { + alert: { ...mockAlert }, + ...data, + sidebarCollapsed, + projectPath: 'projectPath', + }, + mocks: { + $apollo: { + mutate: jest.fn(), + queries: { + alert: { + loading, + }, + }, + }, + }, + stubs, + }); + } + + afterEach(() => { + if (wrapper) { + wrapper.destroy(); + } + mock.restore(); + }); + + describe('updating the alert status', () => { + const mockUpdatedMutationResult = { + data: { + updateAlertStatus: { + errors: [], + alert: { + assigneeUsernames: ['root'], + }, + }, + }, + }; + + beforeEach(() => { + mock = new MockAdapter(axios); + const path = '/autocomplete/users.json'; + const users = [ + { + avatar_url: + 'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon', + id: 1, + name: 'User 1', + username: 'root', + }, + { + avatar_url: + 'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon', + id: 2, + name: 'User 2', + username: 'not-root', + }, + ]; + + mock.onGet(path).replyOnce(200, users); + mountComponent({ + data: { alert: mockAlert }, + sidebarCollapsed: false, + loading: false, + users, + stubs: { + SidebarAssignee, + }, + }); + }); + + it('renders a unassigned option', () => { + wrapper.setData({ isDropdownSearching: false }); + return wrapper.vm.$nextTick().then(() => { + expect(wrapper.find(GlDropdownItem).text()).toBe('Unassigned'); + }); + }); + + it('calls `$apollo.mutate` with `AlertSetAssignees` mutation and variables containing `iid`, `assigneeUsernames`, & `projectPath`', () => { + jest.spyOn(wrapper.vm.$apollo, 'mutate').mockResolvedValue(mockUpdatedMutationResult); + wrapper.setData({ isDropdownSearching: false }); + + return wrapper.vm.$nextTick().then(() => { + wrapper.find(SidebarAssignee).vm.$emit('update-alert-assignees', 'root'); + + expect(wrapper.vm.$apollo.mutate).toHaveBeenCalledWith({ + mutation: AlertSetAssignees, + variables: { + iid: '1527542', + assigneeUsernames: ['root'], + projectPath: 'projectPath', + }, + }); + }); + }); + + it('stops updating and cancels loading when the request fails', () => { + jest.spyOn(wrapper.vm.$apollo, 'mutate').mockReturnValue(Promise.reject(new Error())); + wrapper.vm.updateAlertAssignees('root'); + expect(wrapper.find('[data-testid="unassigned-users"]').text()).toBe('assign yourself'); + }); + }); +}); diff --git a/spec/frontend/alert_management/components/alert_sidebar_spec.js b/spec/frontend/alert_management/components/alert_sidebar_spec.js new file mode 100644 index 00000000000..80c4d9e0650 --- /dev/null +++ b/spec/frontend/alert_management/components/alert_sidebar_spec.js @@ -0,0 +1,55 @@ +import { shallowMount, mount } from '@vue/test-utils'; +import axios from 'axios'; +import MockAdapter from 'axios-mock-adapter'; +import AlertSidebar from '~/alert_management/components/alert_sidebar.vue'; +import SidebarAssignees from '~/alert_management/components/sidebar/sidebar_assignees.vue'; +import mockAlerts from '../mocks/alerts.json'; + +const mockAlert = mockAlerts[0]; + +describe('Alert Details Sidebar', () => { + let wrapper; + let mock; + + function mountComponent({ + sidebarCollapsed = true, + mountMethod = shallowMount, + stubs = {}, + alert = {}, + } = {}) { + wrapper = mountMethod(AlertSidebar, { + propsData: { + alert, + sidebarCollapsed, + projectPath: 'projectPath', + }, + stubs, + }); + } + + afterEach(() => { + if (wrapper) { + wrapper.destroy(); + } + mock.restore(); + }); + + describe('the sidebar renders', () => { + beforeEach(() => { + mock = new MockAdapter(axios); + mountComponent(); + }); + + it('open as default', () => { + expect(wrapper.props('sidebarCollapsed')).toBe(true); + }); + + it('should render side bar assignee dropdown', () => { + mountComponent({ + mountMethod: mount, + alert: mockAlert, + }); + expect(wrapper.find(SidebarAssignees).exists()).toBe(true); + }); + }); +}); diff --git a/spec/frontend/alert_management/components/alert_sidebar_status_spec.js b/spec/frontend/alert_management/components/alert_sidebar_status_spec.js new file mode 100644 index 00000000000..94643966a43 --- /dev/null +++ b/spec/frontend/alert_management/components/alert_sidebar_status_spec.js @@ -0,0 +1,107 @@ +import { shallowMount } from '@vue/test-utils'; +import { GlDropdownItem, GlLoadingIcon } from '@gitlab/ui'; +import { trackAlertStatusUpdateOptions } from '~/alert_management/constants'; +import AlertSidebarStatus from '~/alert_management/components/sidebar/sidebar_status.vue'; +import updateAlertStatus from '~/alert_management/graphql/mutations/update_alert_status.graphql'; +import Tracking from '~/tracking'; +import mockAlerts from '../mocks/alerts.json'; + +const mockAlert = mockAlerts[0]; + +describe('Alert Details Sidebar Status', () => { + let wrapper; + const findStatusDropdownItem = () => wrapper.find(GlDropdownItem); + const findStatusLoadingIcon = () => wrapper.find(GlLoadingIcon); + + function mountComponent({ data, sidebarCollapsed = true, loading = false, stubs = {} } = {}) { + wrapper = shallowMount(AlertSidebarStatus, { + propsData: { + alert: { ...mockAlert }, + ...data, + sidebarCollapsed, + projectPath: 'projectPath', + }, + mocks: { + $apollo: { + mutate: jest.fn(), + queries: { + alert: { + loading, + }, + }, + }, + }, + stubs, + }); + } + + afterEach(() => { + if (wrapper) { + wrapper.destroy(); + } + }); + + describe('updating the alert status', () => { + const mockUpdatedMutationResult = { + data: { + updateAlertStatus: { + errors: [], + alert: { + status: 'acknowledged', + }, + }, + }, + }; + + beforeEach(() => { + mountComponent({ + data: { alert: mockAlert }, + sidebarCollapsed: false, + loading: false, + }); + }); + + it('calls `$apollo.mutate` with `updateAlertStatus` mutation and variables containing `iid`, `status`, & `projectPath`', () => { + jest.spyOn(wrapper.vm.$apollo, 'mutate').mockResolvedValue(mockUpdatedMutationResult); + findStatusDropdownItem().vm.$emit('click'); + + expect(wrapper.vm.$apollo.mutate).toHaveBeenCalledWith({ + mutation: updateAlertStatus, + variables: { + iid: '1527542', + status: 'TRIGGERED', + projectPath: 'projectPath', + }, + }); + }); + + it('stops updating when the request fails', () => { + jest.spyOn(wrapper.vm.$apollo, 'mutate').mockReturnValue(Promise.reject(new Error())); + findStatusDropdownItem().vm.$emit('click'); + expect(findStatusLoadingIcon().exists()).toBe(false); + expect(wrapper.find('[data-testid="status"]').text()).toBe('Triggered'); + }); + }); + + describe('Snowplow tracking', () => { + beforeEach(() => { + jest.spyOn(Tracking, 'event'); + mountComponent({ + props: { alertManagementEnabled: true, userCanEnableAlertManagement: true }, + data: { alert: mockAlert }, + loading: false, + }); + }); + + it('should track alert status updates', () => { + Tracking.event.mockClear(); + jest.spyOn(wrapper.vm.$apollo, 'mutate').mockResolvedValue({}); + findStatusDropdownItem().vm.$emit('click'); + const status = findStatusDropdownItem().text(); + setImmediate(() => { + const { category, action, label } = trackAlertStatusUpdateOptions; + expect(Tracking.event).toHaveBeenCalledWith(category, action, { label, property: status }); + }); + }); + }); +}); diff --git a/spec/frontend/alert_management/mocks/alerts.json b/spec/frontend/alert_management/mocks/alerts.json index b67e2cfc52e..312d1756790 100644 --- a/spec/frontend/alert_management/mocks/alerts.json +++ b/spec/frontend/alert_management/mocks/alerts.json @@ -1,29 +1,66 @@ [ - { - "iid": "1527542", - "title": "SyntaxError: Invalid or unexpected token", - "severity": "CRITICAL", - "eventCount": 7, - "startedAt": "2020-04-17T23:18:14.996Z", - "endedAt": "2020-04-17T23:18:14.996Z", - "status": "TRIGGERED" - }, - { - "iid": "1527543", - "title": "Some other alert Some other alert Some other alert Some other alert Some other alert Some other alert", - "severity": "MEDIUM", - "eventCount": 1, - "startedAt": "2020-04-17T23:18:14.996Z", - "endedAt": "2020-04-17T23:18:14.996Z", - "status": "ACKNOWLEDGED" - }, - { - "iid": "1527544", - "title": "SyntaxError: Invalid or unexpected token", - "severity": "LOW", - "eventCount": 4, - "startedAt": "2020-04-17T23:18:14.996Z", - "endedAt": "2020-04-17T23:18:14.996Z", - "status": "RESOLVED" + { + "iid": "1527542", + "title": "SyntaxError: Invalid or unexpected token", + "severity": "CRITICAL", + "eventCount": 7, + "createdAt": "2020-04-17T23:18:14.996Z", + "startedAt": "2020-04-17T23:18:14.996Z", + "endedAt": "2020-04-17T23:18:14.996Z", + "status": "TRIGGERED", + "assignees": { "nodes": [] }, + "notes": { "nodes": [] } + }, + { + "iid": "1527543", + "title": "Some other alert Some other alert Some other alert Some other alert Some other alert Some other alert", + "severity": "MEDIUM", + "eventCount": 1, + "startedAt": "2020-04-17T23:18:14.996Z", + "endedAt": "2020-04-17T23:18:14.996Z", + "status": "ACKNOWLEDGED", + "assignees": { "nodes": [{ "username": "root" }] }, + "notes": { + "nodes": [ + { + "id": "gid://gitlab/Note/1628", + "author": { + "id": "gid://gitlab/User/1", + "state": "active", + "__typename": "User", + "avatarUrl": "https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80\u0026d=identicon", + "name": "Administrator", + "username": "root", + "webUrl": "http://192.168.1.4:3000/root" + } + } + ] } - ] + }, + { + "iid": "1527544", + "title": "SyntaxError: Invalid or unexpected token", + "severity": "LOW", + "eventCount": 4, + "startedAt": "2020-04-17T23:18:14.996Z", + "endedAt": "2020-04-17T23:18:14.996Z", + "status": "RESOLVED", + "assignees": { "nodes": [{ "username": "root" }] }, + "notes": { + "nodes": [ + { + "id": "gid://gitlab/Note/1629", + "author": { + "id": "gid://gitlab/User/2", + "state": "active", + "__typename": "User", + "avatarUrl": "https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80\u0026d=identicon", + "name": "Administrator", + "username": "root", + "webUrl": "http://192.168.1.4:3000/root" + } + } + ] + } + } +] diff --git a/spec/frontend/alerts_service_settings/components/__snapshots__/alerts_service_form_spec.js.snap b/spec/frontend/alerts_service_settings/components/__snapshots__/alerts_service_form_spec.js.snap index 36ec0badade..0d4171a20b3 100644 --- a/spec/frontend/alerts_service_settings/components/__snapshots__/alerts_service_form_spec.js.snap +++ b/spec/frontend/alerts_service_settings/components/__snapshots__/alerts_service_form_spec.js.snap @@ -6,4 +6,4 @@ exports[`AlertsServiceForm with default values renders "url" input 1`] = `"<gl-f exports[`AlertsServiceForm with default values renders toggle button 1`] = `"<toggle-button-stub id=\\"activated\\"></toggle-button-stub>"`; -exports[`AlertsServiceForm with default values shows description and "Learn More" link 1`] = `"Each alert source must be authorized using the following URL and authorization key. <a href=\\"https://docs.gitlab.com/ee/user/project/integrations/generic_alerts.md\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\">Learn more</a> about configuring this endpoint to receive alerts."`; +exports[`AlertsServiceForm with default values shows description and docs links 1`] = `"<p><gl-sprintf-stub message=\\"You must provide this URL and authorization key to authorize an external service to send alerts to GitLab. You can provide this URL and key to multiple services. After configuring an external service, alerts from your service will display on the GitLab %{linkStart}Alerts%{linkEnd} page.\\"></gl-sprintf-stub></p><p><gl-sprintf-stub message=\\"Review your external service's documentation to learn where to provide this information to your external service, and the %{linkStart}GitLab documentation%{linkEnd} to learn more about configuring your endpoint.\\"></gl-sprintf-stub></p>"`; diff --git a/spec/frontend/alerts_service_settings/components/alerts_service_form_spec.js b/spec/frontend/alerts_service_settings/components/alerts_service_form_spec.js index b7a008c78d0..c7c15c8fd44 100644 --- a/spec/frontend/alerts_service_settings/components/alerts_service_form_spec.js +++ b/spec/frontend/alerts_service_settings/components/alerts_service_form_spec.js @@ -12,7 +12,8 @@ const defaultProps = { initialAuthorizationKey: 'abcedfg123', formPath: 'http://invalid', url: 'https://gitlab.com/endpoint-url', - learnMoreUrl: 'https://docs.gitlab.com/ee/user/project/integrations/generic_alerts.md', + alertsSetupUrl: 'http://invalid', + alertsUsageUrl: 'http://invalid', initialActivated: false, }; @@ -32,7 +33,7 @@ describe('AlertsServiceForm', () => { const findUrl = () => wrapper.find('#url'); const findAuthorizationKey = () => wrapper.find('#authorization-key'); - const findDescription = () => wrapper.find('p'); + const findDescription = () => wrapper.find('[data-testid="description"'); const findActiveStatusIcon = val => document.querySelector(`.js-service-active-status[data-value=${val.toString()}]`); @@ -67,7 +68,7 @@ describe('AlertsServiceForm', () => { expect(wrapper.find(ToggleButton).html()).toMatchSnapshot(); }); - it('shows description and "Learn More" link', () => { + it('shows description and docs links', () => { expect(findDescription().element.innerHTML).toMatchSnapshot(); }); }); diff --git a/spec/frontend/api_spec.js b/spec/frontend/api_spec.js index d365048ab0b..c1a23d441b3 100644 --- a/spec/frontend/api_spec.js +++ b/spec/frontend/api_spec.js @@ -691,4 +691,60 @@ describe('Api', () => { }); }); }); + + describe('updateIssue', () => { + it('update an issue with the given payload', done => { + const projectId = 8; + const issue = 1; + const expectedArray = [1, 2, 3]; + const expectedUrl = `${dummyUrlRoot}/api/${dummyApiVersion}/projects/${projectId}/issues/${issue}`; + mock.onPut(expectedUrl).reply(200, { assigneeIds: expectedArray }); + + Api.updateIssue(projectId, issue, { assigneeIds: expectedArray }) + .then(({ data }) => { + expect(data.assigneeIds).toEqual(expectedArray); + done(); + }) + .catch(done.fail); + }); + }); + + describe('updateMergeRequest', () => { + it('update an issue with the given payload', done => { + const projectId = 8; + const mergeRequest = 1; + const expectedArray = [1, 2, 3]; + const expectedUrl = `${dummyUrlRoot}/api/${dummyApiVersion}/projects/${projectId}/merge_requests/${mergeRequest}`; + mock.onPut(expectedUrl).reply(200, { assigneeIds: expectedArray }); + + Api.updateMergeRequest(projectId, mergeRequest, { assigneeIds: expectedArray }) + .then(({ data }) => { + expect(data.assigneeIds).toEqual(expectedArray); + done(); + }) + .catch(done.fail); + }); + }); + + describe('tags', () => { + it('fetches all tags of a particular project', done => { + const query = 'dummy query'; + const options = { unused: 'option' }; + const projectId = 8; + const expectedUrl = `${dummyUrlRoot}/api/${dummyApiVersion}/projects/${projectId}/repository/tags`; + mock.onGet(expectedUrl).reply(200, [ + { + name: 'test', + }, + ]); + + Api.tags(projectId, query, options) + .then(({ data }) => { + expect(data.length).toBe(1); + expect(data[0].name).toBe('test'); + }) + .then(done) + .catch(done.fail); + }); + }); }); diff --git a/spec/frontend/u2f/authenticate_spec.js b/spec/frontend/authentication/u2f/authenticate_spec.js index 1d39c4857ae..8abef2ae1b2 100644 --- a/spec/frontend/u2f/authenticate_spec.js +++ b/spec/frontend/authentication/u2f/authenticate_spec.js @@ -1,5 +1,5 @@ import $ from 'jquery'; -import U2FAuthenticate from '~/u2f/authenticate'; +import U2FAuthenticate from '~/authentication/u2f/authenticate'; import 'vendor/u2f'; import MockU2FDevice from './mock_u2f_device'; @@ -13,10 +13,10 @@ describe('U2FAuthenticate', () => { beforeEach(() => { loadFixtures('u2f/authenticate.html'); u2fDevice = new MockU2FDevice(); - container = $('#js-authenticate-u2f'); + container = $('#js-authenticate-token-2fa'); component = new U2FAuthenticate( container, - '#js-login-u2f-form', + '#js-login-token-2fa-form', { sign_requests: [], }, @@ -92,7 +92,7 @@ describe('U2FAuthenticate', () => { u2fDevice.respondToAuthenticateRequest({ errorCode: 'error!', }); - const retryButton = container.find('#js-u2f-try-again'); + const retryButton = container.find('#js-token-2fa-try-again'); retryButton.trigger('click'); setupButton = container.find('#js-login-u2f-device'); setupButton.trigger('click'); diff --git a/spec/frontend/u2f/mock_u2f_device.js b/spec/frontend/authentication/u2f/mock_u2f_device.js index ec8425a4e3e..ec8425a4e3e 100644 --- a/spec/frontend/u2f/mock_u2f_device.js +++ b/spec/frontend/authentication/u2f/mock_u2f_device.js diff --git a/spec/frontend/u2f/register_spec.js b/spec/frontend/authentication/u2f/register_spec.js index a4395a2123a..3c2ecdbba66 100644 --- a/spec/frontend/u2f/register_spec.js +++ b/spec/frontend/authentication/u2f/register_spec.js @@ -1,5 +1,5 @@ import $ from 'jquery'; -import U2FRegister from '~/u2f/register'; +import U2FRegister from '~/authentication/u2f/register'; import 'vendor/u2f'; import MockU2FDevice from './mock_u2f_device'; diff --git a/spec/frontend/u2f/util_spec.js b/spec/frontend/authentication/u2f/util_spec.js index 32cd6891384..67fd4c73243 100644 --- a/spec/frontend/u2f/util_spec.js +++ b/spec/frontend/authentication/u2f/util_spec.js @@ -1,4 +1,4 @@ -import { canInjectU2fApi } from '~/u2f/util'; +import { canInjectU2fApi } from '~/authentication/u2f/util'; describe('U2F Utils', () => { describe('canInjectU2fApi', () => { diff --git a/spec/frontend/awards_handler_spec.js b/spec/frontend/awards_handler_spec.js new file mode 100644 index 00000000000..754f0702b84 --- /dev/null +++ b/spec/frontend/awards_handler_spec.js @@ -0,0 +1,403 @@ +import $ from 'jquery'; +import Cookies from 'js-cookie'; +import loadAwardsHandler from '~/awards_handler'; +import '~/lib/utils/common_utils'; +import waitForPromises from './helpers/wait_for_promises'; + +window.gl = window.gl || {}; +window.gon = window.gon || {}; + +let openAndWaitForEmojiMenu; +let awardsHandler = null; +const urlRoot = gon.relative_url_root; + +const lazyAssert = (done, assertFn) => { + jest.runOnlyPendingTimers(); + waitForPromises() + .then(() => { + assertFn(); + done(); + }) + .catch(e => { + throw e; + }); +}; + +describe('AwardsHandler', () => { + preloadFixtures('snippets/show.html'); + beforeEach(done => { + loadFixtures('snippets/show.html'); + loadAwardsHandler(true) + .then(obj => { + awardsHandler = obj; + jest.spyOn(awardsHandler, 'postEmoji').mockImplementation((button, url, emoji, cb) => cb()); + done(); + }) + .catch(done.fail); + + let isEmojiMenuBuilt = false; + openAndWaitForEmojiMenu = () => { + return new Promise(resolve => { + if (isEmojiMenuBuilt) { + resolve(); + } else { + $('.js-add-award') + .eq(0) + .click(); + const $menu = $('.emoji-menu'); + $menu.one('build-emoji-menu-finish', () => { + isEmojiMenuBuilt = true; + resolve(); + }); + } + }); + }; + }); + + afterEach(() => { + // restore original url root value + gon.relative_url_root = urlRoot; + + // Undo what we did to the shared <body> + $('body').removeAttr('data-page'); + + awardsHandler.destroy(); + }); + + describe('::showEmojiMenu', () => { + it('should show emoji menu when Add emoji button clicked', done => { + $('.js-add-award') + .eq(0) + .click(); + lazyAssert(done, () => { + const $emojiMenu = $('.emoji-menu'); + + expect($emojiMenu.length).toBe(1); + expect($emojiMenu.hasClass('is-visible')).toBe(true); + expect($emojiMenu.find('.js-emoji-menu-search').length).toBe(1); + expect($('.js-awards-block.current').length).toBe(1); + }); + }); + + it('should also show emoji menu for the smiley icon in notes', done => { + $('.js-add-award.note-action-button').click(); + lazyAssert(done, () => { + const $emojiMenu = $('.emoji-menu'); + + expect($emojiMenu.length).toBe(1); + }); + }); + + it('should remove emoji menu when body is clicked', done => { + $('.js-add-award') + .eq(0) + .click(); + lazyAssert(done, () => { + const $emojiMenu = $('.emoji-menu'); + $('body').click(); + + expect($emojiMenu.length).toBe(1); + expect($emojiMenu.hasClass('is-visible')).toBe(false); + expect($('.js-awards-block.current').length).toBe(0); + }); + }); + + it('should not remove emoji menu when search is clicked', done => { + $('.js-add-award') + .eq(0) + .click(); + lazyAssert(done, () => { + const $emojiMenu = $('.emoji-menu'); + $('.emoji-search').click(); + + expect($emojiMenu.length).toBe(1); + expect($emojiMenu.hasClass('is-visible')).toBe(true); + expect($('.js-awards-block.current').length).toBe(1); + }); + }); + }); + + describe('::addAwardToEmojiBar', () => { + it('should add emoji to votes block', () => { + const $votesBlock = $('.js-awards-block').eq(0); + awardsHandler.addAwardToEmojiBar($votesBlock, 'heart', false); + const $emojiButton = $votesBlock.find('[data-name=heart]'); + + expect($emojiButton.length).toBe(1); + expect($emojiButton.next('.js-counter').text()).toBe('1'); + expect($votesBlock.hasClass('hidden')).toBe(false); + }); + + it('should remove the emoji when we click again', () => { + const $votesBlock = $('.js-awards-block').eq(0); + awardsHandler.addAwardToEmojiBar($votesBlock, 'heart', false); + awardsHandler.addAwardToEmojiBar($votesBlock, 'heart', false); + const $emojiButton = $votesBlock.find('[data-name=heart]'); + + expect($emojiButton.length).toBe(0); + }); + + it('should decrement the emoji counter', () => { + const $votesBlock = $('.js-awards-block').eq(0); + awardsHandler.addAwardToEmojiBar($votesBlock, 'heart', false); + const $emojiButton = $votesBlock.find('[data-name=heart]'); + $emojiButton.next('.js-counter').text(5); + awardsHandler.addAwardToEmojiBar($votesBlock, 'heart', false); + + expect($emojiButton.length).toBe(1); + expect($emojiButton.next('.js-counter').text()).toBe('4'); + }); + }); + + describe('::userAuthored', () => { + it('should update tooltip to user authored title', () => { + const $votesBlock = $('.js-awards-block').eq(0); + const $thumbsUpEmoji = $votesBlock.find('[data-name=thumbsup]').parent(); + $thumbsUpEmoji.attr('data-title', 'sam'); + awardsHandler.userAuthored($thumbsUpEmoji); + + expect($thumbsUpEmoji.data('originalTitle')).toBe( + 'You cannot vote on your own issue, MR and note', + ); + }); + + it('should restore tooltip back to initial vote list', () => { + const $votesBlock = $('.js-awards-block').eq(0); + const $thumbsUpEmoji = $votesBlock.find('[data-name=thumbsup]').parent(); + $thumbsUpEmoji.attr('data-title', 'sam'); + awardsHandler.userAuthored($thumbsUpEmoji); + jest.advanceTimersByTime(2801); + + expect($thumbsUpEmoji.data('originalTitle')).toBe('sam'); + }); + }); + + describe('::getAwardUrl', () => { + it('returns the url for request', () => { + expect(awardsHandler.getAwardUrl()).toBe('http://test.host/snippets/1/toggle_award_emoji'); + }); + }); + + describe('::addAward and ::checkMutuality', () => { + it('should handle :+1: and :-1: mutuality', () => { + const awardUrl = awardsHandler.getAwardUrl(); + const $votesBlock = $('.js-awards-block').eq(0); + const $thumbsUpEmoji = $votesBlock.find('[data-name=thumbsup]').parent(); + const $thumbsDownEmoji = $votesBlock.find('[data-name=thumbsdown]').parent(); + awardsHandler.addAward($votesBlock, awardUrl, 'thumbsup', false); + + expect($thumbsUpEmoji.hasClass('active')).toBe(true); + expect($thumbsDownEmoji.hasClass('active')).toBe(false); + $thumbsUpEmoji.tooltip(); + $thumbsDownEmoji.tooltip(); + awardsHandler.addAward($votesBlock, awardUrl, 'thumbsdown', true); + + expect($thumbsUpEmoji.hasClass('active')).toBe(false); + expect($thumbsDownEmoji.hasClass('active')).toBe(true); + }); + }); + + describe('::removeEmoji', () => { + it('should remove emoji', () => { + const awardUrl = awardsHandler.getAwardUrl(); + const $votesBlock = $('.js-awards-block').eq(0); + awardsHandler.addAward($votesBlock, awardUrl, 'fire', false); + + expect($votesBlock.find('[data-name=fire]').length).toBe(1); + awardsHandler.removeEmoji($votesBlock.find('[data-name=fire]').closest('button')); + + expect($votesBlock.find('[data-name=fire]').length).toBe(0); + }); + }); + + describe('::addYouToUserList', () => { + it('should prepend "You" to the award tooltip', () => { + const awardUrl = awardsHandler.getAwardUrl(); + const $votesBlock = $('.js-awards-block').eq(0); + const $thumbsUpEmoji = $votesBlock.find('[data-name=thumbsup]').parent(); + $thumbsUpEmoji.attr('data-title', 'sam, jerry, max, and andy'); + awardsHandler.addAward($votesBlock, awardUrl, 'thumbsup', false); + $thumbsUpEmoji.tooltip(); + + expect($thumbsUpEmoji.data('originalTitle')).toBe('You, sam, jerry, max, and andy'); + }); + + it('handles the special case where "You" is not cleanly comma separated', () => { + const awardUrl = awardsHandler.getAwardUrl(); + const $votesBlock = $('.js-awards-block').eq(0); + const $thumbsUpEmoji = $votesBlock.find('[data-name=thumbsup]').parent(); + $thumbsUpEmoji.attr('data-title', 'sam'); + awardsHandler.addAward($votesBlock, awardUrl, 'thumbsup', false); + $thumbsUpEmoji.tooltip(); + + expect($thumbsUpEmoji.data('originalTitle')).toBe('You and sam'); + }); + }); + + describe('::removeYouToUserList', () => { + it('removes "You" from the front of the tooltip', () => { + const awardUrl = awardsHandler.getAwardUrl(); + const $votesBlock = $('.js-awards-block').eq(0); + const $thumbsUpEmoji = $votesBlock.find('[data-name=thumbsup]').parent(); + $thumbsUpEmoji.attr('data-title', 'You, sam, jerry, max, and andy'); + $thumbsUpEmoji.addClass('active'); + awardsHandler.addAward($votesBlock, awardUrl, 'thumbsup', false); + $thumbsUpEmoji.tooltip(); + + expect($thumbsUpEmoji.data('originalTitle')).toBe('sam, jerry, max, and andy'); + }); + + it('handles the special case where "You" is not cleanly comma separated', () => { + const awardUrl = awardsHandler.getAwardUrl(); + const $votesBlock = $('.js-awards-block').eq(0); + const $thumbsUpEmoji = $votesBlock.find('[data-name=thumbsup]').parent(); + $thumbsUpEmoji.attr('data-title', 'You and sam'); + $thumbsUpEmoji.addClass('active'); + awardsHandler.addAward($votesBlock, awardUrl, 'thumbsup', false); + $thumbsUpEmoji.tooltip(); + + expect($thumbsUpEmoji.data('originalTitle')).toBe('sam'); + }); + }); + + describe('::searchEmojis', () => { + it('should filter the emoji', done => { + openAndWaitForEmojiMenu() + .then(() => { + expect($('[data-name=angel]').is(':visible')).toBe(true); + expect($('[data-name=anger]').is(':visible')).toBe(true); + awardsHandler.searchEmojis('ali'); + + expect($('[data-name=angel]').is(':visible')).toBe(false); + expect($('[data-name=anger]').is(':visible')).toBe(false); + expect($('[data-name=alien]').is(':visible')).toBe(true); + expect($('.js-emoji-menu-search').val()).toBe('ali'); + }) + .then(done) + .catch(err => { + done.fail(`Failed to open and build emoji menu: ${err.message}`); + }); + }); + + it('should clear the search when searching for nothing', done => { + openAndWaitForEmojiMenu() + .then(() => { + awardsHandler.searchEmojis('ali'); + + expect($('[data-name=angel]').is(':visible')).toBe(false); + expect($('[data-name=anger]').is(':visible')).toBe(false); + expect($('[data-name=alien]').is(':visible')).toBe(true); + awardsHandler.searchEmojis(''); + + expect($('[data-name=angel]').is(':visible')).toBe(true); + expect($('[data-name=anger]').is(':visible')).toBe(true); + expect($('[data-name=alien]').is(':visible')).toBe(true); + expect($('.js-emoji-menu-search').val()).toBe(''); + }) + .then(done) + .catch(err => { + done.fail(`Failed to open and build emoji menu: ${err.message}`); + }); + }); + }); + + describe('emoji menu', () => { + const emojiSelector = '[data-name="sunglasses"]'; + const openEmojiMenuAndAddEmoji = () => { + return openAndWaitForEmojiMenu().then(() => { + const $menu = $('.emoji-menu'); + const $block = $('.js-awards-block'); + const $emoji = $menu.find(`.emoji-menu-list:not(.frequent-emojis) ${emojiSelector}`); + + expect($emoji.length).toBe(1); + expect($block.find(emojiSelector).length).toBe(0); + $emoji.click(); + + expect($menu.hasClass('.is-visible')).toBe(false); + expect($block.find(emojiSelector).length).toBe(1); + }); + }; + + it('should add selected emoji to awards block', done => { + openEmojiMenuAndAddEmoji() + .then(done) + .catch(err => { + done.fail(`Failed to open and build emoji menu: ${err.message}`); + }); + }); + + it('should remove already selected emoji', done => { + openEmojiMenuAndAddEmoji() + .then(() => { + $('.js-add-award') + .eq(0) + .click(); + const $block = $('.js-awards-block'); + const $emoji = $('.emoji-menu').find( + `.emoji-menu-list:not(.frequent-emojis) ${emojiSelector}`, + ); + $emoji.click(); + + expect($block.find(emojiSelector).length).toBe(0); + }) + .then(done) + .catch(err => { + done.fail(`Failed to open and build emoji menu: ${err.message}`); + }); + }); + }); + + describe('frequently used emojis', () => { + beforeEach(() => { + // Clear it out + Cookies.set('frequently_used_emojis', ''); + }); + + it('shouldn\'t have any "Frequently used" heading if no frequently used emojis', done => { + return openAndWaitForEmojiMenu() + .then(() => { + const emojiMenu = document.querySelector('.emoji-menu'); + Array.prototype.forEach.call(emojiMenu.querySelectorAll('.emoji-menu-title'), title => { + expect(title.textContent.trim().toLowerCase()).not.toBe('frequently used'); + }); + }) + .then(done) + .catch(err => { + done.fail(`Failed to open and build emoji menu: ${err.message}`); + }); + }); + + it('should have any frequently used section when there are frequently used emojis', done => { + awardsHandler.addEmojiToFrequentlyUsedList('8ball'); + + return openAndWaitForEmojiMenu() + .then(() => { + const emojiMenu = document.querySelector('.emoji-menu'); + const hasFrequentlyUsedHeading = Array.prototype.some.call( + emojiMenu.querySelectorAll('.emoji-menu-title'), + title => title.textContent.trim().toLowerCase() === 'frequently used', + ); + + expect(hasFrequentlyUsedHeading).toBe(true); + }) + .then(done) + .catch(err => { + done.fail(`Failed to open and build emoji menu: ${err.message}`); + }); + }); + + it('should disregard invalid frequently used emoji that are being attempted to be added', () => { + awardsHandler.addEmojiToFrequentlyUsedList('8ball'); + awardsHandler.addEmojiToFrequentlyUsedList('invalid_emoji'); + awardsHandler.addEmojiToFrequentlyUsedList('grinning'); + + expect(awardsHandler.getFrequentlyUsedEmojis()).toEqual(['8ball', 'grinning']); + }); + + it('should disregard invalid frequently used emoji already set in cookie', () => { + Cookies.set('frequently_used_emojis', '8ball,invalid_emoji,grinning'); + + expect(awardsHandler.getFrequentlyUsedEmojis()).toEqual(['8ball', 'grinning']); + }); + }); +}); diff --git a/spec/frontend/batch_comments/components/diff_file_drafts_spec.js b/spec/frontend/batch_comments/components/diff_file_drafts_spec.js new file mode 100644 index 00000000000..6e0b61db9fa --- /dev/null +++ b/spec/frontend/batch_comments/components/diff_file_drafts_spec.js @@ -0,0 +1,61 @@ +import { shallowMount, createLocalVue } from '@vue/test-utils'; +import Vuex from 'vuex'; +import DiffFileDrafts from '~/batch_comments/components/diff_file_drafts.vue'; +import DraftNote from '~/batch_comments/components/draft_note.vue'; + +const localVue = createLocalVue(); + +localVue.use(Vuex); + +describe('Batch comments diff file drafts component', () => { + let vm; + + function factory() { + const store = new Vuex.Store({ + modules: { + batchComments: { + namespaced: true, + getters: { + draftsForFile: () => () => [{ id: 1 }, { id: 2 }], + }, + }, + }, + }); + + vm = shallowMount(localVue.extend(DiffFileDrafts), { + store, + localVue, + propsData: { fileHash: 'filehash' }, + }); + } + + afterEach(() => { + vm.destroy(); + }); + + it('renders list of draft notes', () => { + factory(); + + expect(vm.findAll(DraftNote).length).toEqual(2); + }); + + it('renders index of draft note', () => { + factory(); + + expect(vm.findAll('.js-diff-notes-index').length).toEqual(2); + + expect( + vm + .findAll('.js-diff-notes-index') + .at(0) + .text(), + ).toEqual('1'); + + expect( + vm + .findAll('.js-diff-notes-index') + .at(1) + .text(), + ).toEqual('2'); + }); +}); diff --git a/spec/frontend/batch_comments/components/draft_note_spec.js b/spec/frontend/batch_comments/components/draft_note_spec.js new file mode 100644 index 00000000000..eea7f25dbc1 --- /dev/null +++ b/spec/frontend/batch_comments/components/draft_note_spec.js @@ -0,0 +1,125 @@ +import { shallowMount, createLocalVue } from '@vue/test-utils'; +import DraftNote from '~/batch_comments/components/draft_note.vue'; +import { createStore } from '~/batch_comments/stores'; +import NoteableNote from '~/notes/components/noteable_note.vue'; +import '~/behaviors/markdown/render_gfm'; +import { createDraft } from '../mock_data'; + +const localVue = createLocalVue(); + +describe('Batch comments draft note component', () => { + let wrapper; + let draft; + + beforeEach(() => { + const store = createStore(); + + draft = createDraft(); + + wrapper = shallowMount(localVue.extend(DraftNote), { + store, + propsData: { draft }, + localVue, + }); + + jest.spyOn(wrapper.vm.$store, 'dispatch').mockImplementation(); + }); + + afterEach(() => { + wrapper.destroy(); + }); + + it('renders template', () => { + expect(wrapper.find('.draft-pending-label').exists()).toBe(true); + + const note = wrapper.find(NoteableNote); + + expect(note.exists()).toBe(true); + expect(note.props().note).toEqual(draft); + }); + + describe('add comment now', () => { + it('dispatches publishSingleDraft when clicking', () => { + const publishNowButton = wrapper.find({ ref: 'publishNowButton' }); + publishNowButton.vm.$emit('click'); + + expect(wrapper.vm.$store.dispatch).toHaveBeenCalledWith( + 'batchComments/publishSingleDraft', + 1, + ); + }); + + it('sets as loading when draft is publishing', done => { + wrapper.vm.$store.state.batchComments.currentlyPublishingDrafts.push(1); + + wrapper.vm.$nextTick(() => { + const publishNowButton = wrapper.find({ ref: 'publishNowButton' }); + + expect(publishNowButton.props().loading).toBe(true); + + done(); + }); + }); + }); + + describe('update', () => { + it('dispatches updateDraft', done => { + const note = wrapper.find(NoteableNote); + + note.vm.$emit('handleEdit'); + + wrapper.vm + .$nextTick() + .then(() => { + const formData = { + note: draft, + noteText: 'a', + resolveDiscussion: false, + }; + + note.vm.$emit('handleUpdateNote', formData); + + expect(wrapper.vm.$store.dispatch).toHaveBeenCalledWith( + 'batchComments/updateDraft', + formData, + ); + }) + .then(done) + .catch(done.fail); + }); + }); + + describe('deleteDraft', () => { + it('dispatches deleteDraft', () => { + jest.spyOn(window, 'confirm').mockImplementation(() => true); + + const note = wrapper.find(NoteableNote); + + note.vm.$emit('handleDeleteNote', draft); + + expect(wrapper.vm.$store.dispatch).toHaveBeenCalledWith('batchComments/deleteDraft', draft); + }); + }); + + describe('quick actions', () => { + it('renders referenced commands', done => { + wrapper.setProps({ + draft: { + ...draft, + references: { + commands: 'test command', + }, + }, + }); + + wrapper.vm.$nextTick(() => { + const referencedCommands = wrapper.find('.referenced-commands'); + + expect(referencedCommands.exists()).toBe(true); + expect(referencedCommands.text()).toContain('test command'); + + done(); + }); + }); + }); +}); diff --git a/spec/frontend/batch_comments/components/drafts_count_spec.js b/spec/frontend/batch_comments/components/drafts_count_spec.js new file mode 100644 index 00000000000..9d9fffce7e7 --- /dev/null +++ b/spec/frontend/batch_comments/components/drafts_count_spec.js @@ -0,0 +1,43 @@ +import Vue from 'vue'; +import DraftsCount from '~/batch_comments/components/drafts_count.vue'; +import { mountComponentWithStore } from 'helpers/vue_mount_component_helper'; +import { createStore } from '~/batch_comments/stores'; + +describe('Batch comments drafts count component', () => { + let vm; + let Component; + + beforeAll(() => { + Component = Vue.extend(DraftsCount); + }); + + beforeEach(() => { + const store = createStore(); + + store.state.batchComments.drafts.push('comment'); + + vm = mountComponentWithStore(Component, { store }); + }); + + afterEach(() => { + vm.$destroy(); + }); + + it('renders count', () => { + expect(vm.$el.querySelector('.drafts-count-number').textContent).toBe('1'); + }); + + it('renders screen reader text', done => { + const el = vm.$el.querySelector('.sr-only'); + + expect(el.textContent).toContain('draft'); + + vm.$store.state.batchComments.drafts.push('comment 2'); + + vm.$nextTick(() => { + expect(el.textContent).toContain('drafts'); + + done(); + }); + }); +}); diff --git a/spec/frontend/batch_comments/components/preview_item_spec.js b/spec/frontend/batch_comments/components/preview_item_spec.js new file mode 100644 index 00000000000..7d951fd7799 --- /dev/null +++ b/spec/frontend/batch_comments/components/preview_item_spec.js @@ -0,0 +1,130 @@ +import Vue from 'vue'; +import PreviewItem from '~/batch_comments/components/preview_item.vue'; +import { mountComponentWithStore } from 'helpers/vue_mount_component_helper'; +import { createStore } from '~/batch_comments/stores'; +import diffsModule from '~/diffs/store/modules'; +import notesModule from '~/notes/stores/modules'; +import '~/behaviors/markdown/render_gfm'; +import { createDraft } from '../mock_data'; + +describe('Batch comments draft preview item component', () => { + let vm; + let Component; + let draft; + + function createComponent(isLast = false, extra = {}, extendStore = () => {}) { + const store = createStore(); + store.registerModule('diffs', diffsModule()); + store.registerModule('notes', notesModule()); + + extendStore(store); + + draft = { + ...createDraft(), + ...extra, + }; + + vm = mountComponentWithStore(Component, { store, props: { draft, isLast } }); + } + + beforeAll(() => { + Component = Vue.extend(PreviewItem); + }); + + afterEach(() => { + vm.$destroy(); + }); + + it('renders text content', () => { + createComponent(false, { note_html: '<img src="" /><p>Hello world</p>' }); + + expect(vm.$el.querySelector('.review-preview-item-content').innerHTML).toEqual( + '<p>Hello world</p>', + ); + }); + + it('adds is last class', () => { + createComponent(true); + + expect(vm.$el.classList).toContain('is-last'); + }); + + it('scrolls to draft on click', () => { + createComponent(); + + jest.spyOn(vm.$store, 'dispatch').mockImplementation(); + + vm.$el.click(); + + expect(vm.$store.dispatch).toHaveBeenCalledWith('batchComments/scrollToDraft', vm.draft); + }); + + describe('for file', () => { + it('renders file path', () => { + createComponent(false, { file_path: 'index.js', file_hash: 'abc', position: {} }); + + expect(vm.$el.querySelector('.review-preview-item-header-text').textContent).toContain( + 'index.js', + ); + }); + + it('renders new line position', () => { + createComponent(false, { + file_path: 'index.js', + file_hash: 'abc', + position: { new_line: 1 }, + }); + + expect(vm.$el.querySelector('.bold').textContent).toContain(':1'); + }); + + it('renders old line position', () => { + createComponent(false, { + file_path: 'index.js', + file_hash: 'abc', + position: { old_line: 2 }, + }); + + expect(vm.$el.querySelector('.bold').textContent).toContain(':2'); + }); + + it('renders image position', () => { + createComponent(false, { + file_path: 'index.js', + file_hash: 'abc', + position: { position_type: 'image', x: 10, y: 20 }, + }); + + expect(vm.$el.querySelector('.bold').textContent).toContain('10x 20y'); + }); + }); + + describe('for thread', () => { + beforeEach(() => { + createComponent(false, { discussion_id: '1', resolve_discussion: true }, store => { + store.state.notes.discussions.push({ + id: '1', + notes: [ + { + author: { + name: 'Author Name', + }, + }, + ], + }); + }); + }); + + it('renders title', () => { + expect(vm.$el.querySelector('.review-preview-item-header-text').textContent).toContain( + "Author Name's thread", + ); + }); + + it('it renders thread resolved text', () => { + expect(vm.$el.querySelector('.draft-note-resolution').textContent).toContain( + 'Thread will be resolved', + ); + }); + }); +}); diff --git a/spec/frontend/batch_comments/components/publish_button_spec.js b/spec/frontend/batch_comments/components/publish_button_spec.js new file mode 100644 index 00000000000..97f3a1c8939 --- /dev/null +++ b/spec/frontend/batch_comments/components/publish_button_spec.js @@ -0,0 +1,52 @@ +import Vue from 'vue'; +import PublishButton from '~/batch_comments/components/publish_button.vue'; +import { mountComponentWithStore } from 'helpers/vue_mount_component_helper'; +import { createStore } from '~/batch_comments/stores'; + +describe('Batch comments publish button component', () => { + let vm; + let Component; + + beforeAll(() => { + Component = Vue.extend(PublishButton); + }); + + beforeEach(() => { + const store = createStore(); + + vm = mountComponentWithStore(Component, { store, props: { shouldPublish: true } }); + + jest.spyOn(vm.$store, 'dispatch').mockImplementation(); + }); + + afterEach(() => { + vm.$destroy(); + }); + + it('dispatches publishReview on click', () => { + vm.$el.click(); + + expect(vm.$store.dispatch).toHaveBeenCalledWith('batchComments/publishReview', undefined); + }); + + it('dispatches toggleReviewDropdown when shouldPublish is false on click', () => { + vm.shouldPublish = false; + + vm.$el.click(); + + expect(vm.$store.dispatch).toHaveBeenCalledWith( + 'batchComments/toggleReviewDropdown', + undefined, + ); + }); + + it('sets loading when isPublishing is true', done => { + vm.$store.state.batchComments.isPublishing = true; + + vm.$nextTick(() => { + expect(vm.$el.getAttribute('disabled')).toBe('disabled'); + + done(); + }); + }); +}); diff --git a/spec/frontend/batch_comments/components/publish_dropdown_spec.js b/spec/frontend/batch_comments/components/publish_dropdown_spec.js new file mode 100644 index 00000000000..b50ae340691 --- /dev/null +++ b/spec/frontend/batch_comments/components/publish_dropdown_spec.js @@ -0,0 +1,96 @@ +import Vue from 'vue'; +import PreviewDropdown from '~/batch_comments/components/preview_dropdown.vue'; +import { mountComponentWithStore } from 'helpers/vue_mount_component_helper'; +import { createStore } from '~/mr_notes/stores'; +import '~/behaviors/markdown/render_gfm'; +import { createDraft } from '../mock_data'; + +describe('Batch comments publish dropdown component', () => { + let vm; + let Component; + + function createComponent(extendStore = () => {}) { + const store = createStore(); + store.state.batchComments.drafts.push(createDraft(), { ...createDraft(), id: 2 }); + + extendStore(store); + + vm = mountComponentWithStore(Component, { store }); + } + + beforeAll(() => { + Component = Vue.extend(PreviewDropdown); + }); + + afterEach(() => { + vm.$destroy(); + }); + + it('toggles dropdown when clicking button', done => { + createComponent(); + + jest.spyOn(vm.$store, 'dispatch'); + + vm.$el.querySelector('.review-preview-dropdown-toggle').click(); + + expect(vm.$store.dispatch).toHaveBeenCalledWith( + 'batchComments/toggleReviewDropdown', + expect.anything(), + ); + + setImmediate(() => { + expect(vm.$el.classList).toContain('show'); + + done(); + }); + }); + + it('toggles dropdown when clicking body', () => { + createComponent(); + + vm.$store.state.batchComments.showPreviewDropdown = true; + + jest.spyOn(vm.$store, 'dispatch').mockImplementation(); + + document.body.click(); + + expect(vm.$store.dispatch).toHaveBeenCalledWith( + 'batchComments/toggleReviewDropdown', + undefined, + ); + }); + + it('renders list of drafts', () => { + createComponent(store => { + Object.assign(store.state.notes, { + isNotesFetched: true, + }); + }); + + expect(vm.$el.querySelectorAll('.dropdown-content li').length).toBe(2); + }); + + it('adds is-last class to last item', () => { + createComponent(store => { + Object.assign(store.state.notes, { + isNotesFetched: true, + }); + }); + + expect(vm.$el.querySelectorAll('.dropdown-content li')[1].querySelector('.is-last')).not.toBe( + null, + ); + }); + + it('renders draft count in dropdown title', () => { + createComponent(); + + expect(vm.$el.querySelector('.dropdown-title').textContent).toContain('2 pending comments'); + }); + + it('renders publish button in footer', () => { + createComponent(); + + expect(vm.$el.querySelector('.dropdown-footer .js-publish-draft-button')).not.toBe(null); + }); +}); diff --git a/spec/frontend/batch_comments/mock_data.js b/spec/frontend/batch_comments/mock_data.js new file mode 100644 index 00000000000..c50fea94fe3 --- /dev/null +++ b/spec/frontend/batch_comments/mock_data.js @@ -0,0 +1,27 @@ +import { TEST_HOST } from 'spec/test_constants'; + +export const createDraft = () => ({ + author: { + id: 1, + name: 'Test', + username: 'test', + state: 'active', + avatar_url: TEST_HOST, + }, + current_user: { can_edit: true, can_award_emoji: false, can_resolve: false }, + discussion_id: null, + file_hash: null, + file_path: null, + id: 1, + line_code: null, + merge_request_id: 1, + note: 'a', + note_html: '<p>Test</p>', + noteable_type: 'MergeRequest', + references: { users: [], commands: '' }, + resolve_discussion: false, + isDraft: true, + position: null, +}); + +export default () => {}; diff --git a/spec/frontend/batch_comments/stores/modules/batch_comments/actions_spec.js b/spec/frontend/batch_comments/stores/modules/batch_comments/actions_spec.js new file mode 100644 index 00000000000..2ec114d026a --- /dev/null +++ b/spec/frontend/batch_comments/stores/modules/batch_comments/actions_spec.js @@ -0,0 +1,403 @@ +import MockAdapter from 'axios-mock-adapter'; +import testAction from 'helpers/vuex_action_helper'; +import * as actions from '~/batch_comments/stores/modules/batch_comments/actions'; +import axios from '~/lib/utils/axios_utils'; + +describe('Batch comments store actions', () => { + let res = {}; + let mock; + + beforeEach(() => { + mock = new MockAdapter(axios); + }); + + afterEach(() => { + res = {}; + mock.restore(); + }); + + describe('saveDraft', () => { + it('dispatches saveNote on root', () => { + const dispatch = jest.fn(); + + actions.saveDraft({ dispatch }, { id: 1 }); + + expect(dispatch).toHaveBeenCalledWith('saveNote', { id: 1, isDraft: true }, { root: true }); + }); + }); + + describe('addDraftToDiscussion', () => { + it('commits ADD_NEW_DRAFT if no errors returned', done => { + res = { id: 1 }; + mock.onAny().reply(200, res); + + testAction( + actions.addDraftToDiscussion, + { endpoint: gl.TEST_HOST, data: 'test' }, + null, + [{ type: 'ADD_NEW_DRAFT', payload: res }], + [], + done, + ); + }); + + it('does not commit ADD_NEW_DRAFT if errors returned', done => { + mock.onAny().reply(500); + + testAction( + actions.addDraftToDiscussion, + { endpoint: gl.TEST_HOST, data: 'test' }, + null, + [], + [], + done, + ); + }); + }); + + describe('createNewDraft', () => { + it('commits ADD_NEW_DRAFT if no errors returned', done => { + res = { id: 1 }; + mock.onAny().reply(200, res); + + testAction( + actions.createNewDraft, + { endpoint: gl.TEST_HOST, data: 'test' }, + null, + [{ type: 'ADD_NEW_DRAFT', payload: res }], + [], + done, + ); + }); + + it('does not commit ADD_NEW_DRAFT if errors returned', done => { + mock.onAny().reply(500); + + testAction( + actions.createNewDraft, + { endpoint: gl.TEST_HOST, data: 'test' }, + null, + [], + [], + done, + ); + }); + }); + + describe('deleteDraft', () => { + let getters; + + beforeEach(() => { + getters = { + getNotesData: { + draftsDiscardPath: gl.TEST_HOST, + }, + }; + }); + + it('commits DELETE_DRAFT if no errors returned', done => { + const commit = jest.fn(); + const context = { + getters, + commit, + }; + res = { id: 1 }; + mock.onAny().reply(200); + + actions + .deleteDraft(context, { id: 1 }) + .then(() => { + expect(commit).toHaveBeenCalledWith('DELETE_DRAFT', 1); + }) + .then(done) + .catch(done.fail); + }); + + it('does not commit DELETE_DRAFT if errors returned', done => { + const commit = jest.fn(); + const context = { + getters, + commit, + }; + mock.onAny().reply(500); + + actions + .deleteDraft(context, { id: 1 }) + .then(() => { + expect(commit).not.toHaveBeenCalledWith('DELETE_DRAFT', 1); + }) + .then(done) + .catch(done.fail); + }); + }); + + describe('fetchDrafts', () => { + let getters; + + beforeEach(() => { + getters = { + getNotesData: { + draftsPath: gl.TEST_HOST, + }, + }; + }); + + it('commits SET_BATCH_COMMENTS_DRAFTS with returned data', done => { + const commit = jest.fn(); + const context = { + getters, + commit, + }; + res = { id: 1 }; + mock.onAny().reply(200, res); + + actions + .fetchDrafts(context) + .then(() => { + expect(commit).toHaveBeenCalledWith('SET_BATCH_COMMENTS_DRAFTS', { id: 1 }); + }) + .then(done) + .catch(done.fail); + }); + }); + + describe('publishReview', () => { + let dispatch; + let commit; + let getters; + let rootGetters; + + beforeEach(() => { + dispatch = jest.fn(); + commit = jest.fn(); + getters = { + getNotesData: { draftsPublishPath: gl.TEST_HOST, discussionsPath: gl.TEST_HOST }, + }; + rootGetters = { discussionsStructuredByLineCode: 'discussions' }; + }); + + it('dispatches actions & commits', done => { + mock.onAny().reply(200); + + actions + .publishReview({ dispatch, commit, getters, rootGetters }) + .then(() => { + expect(commit.mock.calls[0]).toEqual(['REQUEST_PUBLISH_REVIEW']); + expect(commit.mock.calls[1]).toEqual(['RECEIVE_PUBLISH_REVIEW_SUCCESS']); + + expect(dispatch.mock.calls[0]).toEqual(['updateDiscussionsAfterPublish']); + }) + .then(done) + .catch(done.fail); + }); + + it('dispatches error commits', done => { + mock.onAny().reply(500); + + actions + .publishReview({ dispatch, commit, getters, rootGetters }) + .then(() => { + expect(commit.mock.calls[0]).toEqual(['REQUEST_PUBLISH_REVIEW']); + expect(commit.mock.calls[1]).toEqual(['RECEIVE_PUBLISH_REVIEW_ERROR']); + }) + .then(done) + .catch(done.fail); + }); + }); + + describe('discardReview', () => { + it('commits mutations', done => { + const getters = { + getNotesData: { draftsDiscardPath: gl.TEST_HOST }, + }; + const commit = jest.fn(); + mock.onAny().reply(200); + + actions + .discardReview({ getters, commit }) + .then(() => { + expect(commit.mock.calls[0]).toEqual(['REQUEST_DISCARD_REVIEW']); + expect(commit.mock.calls[1]).toEqual(['RECEIVE_DISCARD_REVIEW_SUCCESS']); + }) + .then(done) + .catch(done.fail); + }); + + it('commits error mutations', done => { + const getters = { + getNotesData: { draftsDiscardPath: gl.TEST_HOST }, + }; + const commit = jest.fn(); + mock.onAny().reply(500); + + actions + .discardReview({ getters, commit }) + .then(() => { + expect(commit.mock.calls[0]).toEqual(['REQUEST_DISCARD_REVIEW']); + expect(commit.mock.calls[1]).toEqual(['RECEIVE_DISCARD_REVIEW_ERROR']); + }) + .then(done) + .catch(done.fail); + }); + }); + + describe('updateDraft', () => { + let getters; + + beforeEach(() => { + getters = { + getNotesData: { + draftsPath: gl.TEST_HOST, + }, + }; + }); + + it('commits RECEIVE_DRAFT_UPDATE_SUCCESS with returned data', done => { + const commit = jest.fn(); + const context = { + getters, + commit, + }; + res = { id: 1 }; + mock.onAny().reply(200, res); + + actions + .updateDraft(context, { note: { id: 1 }, noteText: 'test', callback() {} }) + .then(() => { + expect(commit).toHaveBeenCalledWith('RECEIVE_DRAFT_UPDATE_SUCCESS', { id: 1 }); + }) + .then(done) + .catch(done.fail); + }); + + it('calls passed callback', done => { + const commit = jest.fn(); + const context = { + getters, + commit, + }; + const callback = jest.fn(); + res = { id: 1 }; + mock.onAny().reply(200, res); + + actions + .updateDraft(context, { note: { id: 1 }, noteText: 'test', callback }) + .then(() => { + expect(callback).toHaveBeenCalled(); + }) + .then(done) + .catch(done.fail); + }); + }); + + describe('toggleReviewDropdown', () => { + it('dispatches openReviewDropdown', done => { + testAction( + actions.toggleReviewDropdown, + null, + { showPreviewDropdown: false }, + [], + [{ type: 'openReviewDropdown' }], + done, + ); + }); + + it('dispatches closeReviewDropdown when showPreviewDropdown is true', done => { + testAction( + actions.toggleReviewDropdown, + null, + { showPreviewDropdown: true }, + [], + [{ type: 'closeReviewDropdown' }], + done, + ); + }); + }); + + describe('openReviewDropdown', () => { + it('commits OPEN_REVIEW_DROPDOWN', done => { + testAction( + actions.openReviewDropdown, + null, + null, + [{ type: 'OPEN_REVIEW_DROPDOWN' }], + [], + done, + ); + }); + }); + + describe('closeReviewDropdown', () => { + it('commits CLOSE_REVIEW_DROPDOWN', done => { + testAction( + actions.closeReviewDropdown, + null, + null, + [{ type: 'CLOSE_REVIEW_DROPDOWN' }], + [], + done, + ); + }); + }); + + describe('expandAllDiscussions', () => { + it('dispatches expandDiscussion for all drafts', done => { + const state = { + drafts: [ + { + discussion_id: '1', + }, + ], + }; + + testAction( + actions.expandAllDiscussions, + null, + state, + [], + [ + { + type: 'expandDiscussion', + payload: { discussionId: '1' }, + }, + ], + done, + ); + }); + }); + + describe('scrollToDraft', () => { + beforeEach(() => { + window.mrTabs = { + currentAction: 'notes', + tabShown: jest.fn(), + }; + }); + + it('scrolls to draft item', () => { + const dispatch = jest.fn(); + const rootGetters = { + getDiscussion: () => ({ + id: '1', + diff_discussion: true, + }), + }; + const draft = { + discussion_id: '1', + id: '2', + }; + + actions.scrollToDraft({ dispatch, rootGetters }, draft); + + expect(dispatch.mock.calls[0]).toEqual(['closeReviewDropdown']); + + expect(dispatch.mock.calls[1]).toEqual([ + 'expandDiscussion', + { discussionId: '1' }, + { root: true }, + ]); + + expect(window.mrTabs.tabShown).toHaveBeenCalledWith('diffs'); + }); + }); +}); diff --git a/spec/frontend/batch_comments/stores/modules/batch_comments/getters_spec.js b/spec/frontend/batch_comments/stores/modules/batch_comments/getters_spec.js new file mode 100644 index 00000000000..2398bb4feb1 --- /dev/null +++ b/spec/frontend/batch_comments/stores/modules/batch_comments/getters_spec.js @@ -0,0 +1,27 @@ +import * as getters from '~/batch_comments/stores/modules/batch_comments/getters'; + +describe('Batch comments store getters', () => { + describe('draftsForFile', () => { + it('returns drafts for a file hash', () => { + const state = { + drafts: [ + { + file_hash: 'filehash', + comment: 'testing 123', + }, + { + file_hash: 'filehash2', + comment: 'testing 1234', + }, + ], + }; + + expect(getters.draftsForFile(state)('filehash')).toEqual([ + { + file_hash: 'filehash', + comment: 'testing 123', + }, + ]); + }); + }); +}); diff --git a/spec/frontend/batch_comments/stores/modules/batch_comments/mutations_spec.js b/spec/frontend/batch_comments/stores/modules/batch_comments/mutations_spec.js new file mode 100644 index 00000000000..a86726269ef --- /dev/null +++ b/spec/frontend/batch_comments/stores/modules/batch_comments/mutations_spec.js @@ -0,0 +1,159 @@ +import createState from '~/batch_comments/stores/modules/batch_comments/state'; +import mutations from '~/batch_comments/stores/modules/batch_comments/mutations'; +import * as types from '~/batch_comments/stores/modules/batch_comments/mutation_types'; + +describe('Batch comments mutations', () => { + let state; + + beforeEach(() => { + state = createState(); + }); + + describe(types.ADD_NEW_DRAFT, () => { + it('adds processed object into drafts array', () => { + const draft = { id: 1, note: 'test' }; + + mutations[types.ADD_NEW_DRAFT](state, draft); + + expect(state.drafts).toEqual([ + { + ...draft, + isDraft: true, + }, + ]); + }); + }); + + describe(types.DELETE_DRAFT, () => { + it('removes draft from array by ID', () => { + state.drafts.push({ id: 1 }, { id: 2 }); + + mutations[types.DELETE_DRAFT](state, 1); + + expect(state.drafts).toEqual([{ id: 2 }]); + }); + }); + + describe(types.SET_BATCH_COMMENTS_DRAFTS, () => { + it('adds to processed drafts in state', () => { + const drafts = [{ id: 1 }, { id: 2 }]; + + mutations[types.SET_BATCH_COMMENTS_DRAFTS](state, drafts); + + expect(state.drafts).toEqual([ + { + id: 1, + isDraft: true, + }, + { + id: 2, + isDraft: true, + }, + ]); + }); + }); + + describe(types.REQUEST_PUBLISH_REVIEW, () => { + it('sets isPublishing to true', () => { + mutations[types.REQUEST_PUBLISH_REVIEW](state); + + expect(state.isPublishing).toBe(true); + }); + }); + + describe(types.RECEIVE_PUBLISH_REVIEW_SUCCESS, () => { + it('resets drafts', () => { + state.drafts.push('test'); + + mutations[types.RECEIVE_PUBLISH_REVIEW_SUCCESS](state); + + expect(state.drafts).toEqual([]); + }); + + it('sets isPublishing to false', () => { + state.isPublishing = true; + + mutations[types.RECEIVE_PUBLISH_REVIEW_SUCCESS](state); + + expect(state.isPublishing).toBe(false); + }); + }); + + describe(types.RECEIVE_PUBLISH_REVIEW_ERROR, () => { + it('updates isPublishing to false', () => { + state.isPublishing = true; + + mutations[types.RECEIVE_PUBLISH_REVIEW_ERROR](state); + + expect(state.isPublishing).toBe(false); + }); + }); + + describe(types.REQUEST_DISCARD_REVIEW, () => { + it('sets isDiscarding to true', () => { + mutations[types.REQUEST_DISCARD_REVIEW](state); + + expect(state.isDiscarding).toBe(true); + }); + }); + + describe(types.RECEIVE_DISCARD_REVIEW_SUCCESS, () => { + it('emptys drafts array', () => { + state.drafts.push('test'); + + mutations[types.RECEIVE_DISCARD_REVIEW_SUCCESS](state); + + expect(state.drafts).toEqual([]); + }); + + it('sets isDiscarding to false', () => { + state.isDiscarding = true; + + mutations[types.RECEIVE_DISCARD_REVIEW_SUCCESS](state); + + expect(state.isDiscarding).toBe(false); + }); + }); + + describe(types.RECEIVE_DISCARD_REVIEW_ERROR, () => { + it('updates isDiscarding to false', () => { + state.isDiscarding = true; + + mutations[types.RECEIVE_DISCARD_REVIEW_ERROR](state); + + expect(state.isDiscarding).toBe(false); + }); + }); + + describe(types.RECEIVE_DRAFT_UPDATE_SUCCESS, () => { + it('updates draft in store', () => { + state.drafts.push({ id: 1 }); + + mutations[types.RECEIVE_DRAFT_UPDATE_SUCCESS](state, { id: 1, note: 'test' }); + + expect(state.drafts).toEqual([ + { + id: 1, + note: 'test', + isDraft: true, + }, + ]); + }); + }); + + describe(types.OPEN_REVIEW_DROPDOWN, () => { + it('sets showPreviewDropdown to true', () => { + mutations[types.OPEN_REVIEW_DROPDOWN](state); + + expect(state.showPreviewDropdown).toBe(true); + }); + }); + + describe(types.CLOSE_REVIEW_DROPDOWN, () => { + it('sets showPreviewDropdown to false', () => { + mutations[types.CLOSE_REVIEW_DROPDOWN](state); + + expect(state.showPreviewDropdown).toBe(false); + }); + }); +}); diff --git a/spec/frontend/behaviors/autosize_spec.js b/spec/frontend/behaviors/autosize_spec.js new file mode 100644 index 00000000000..59abae479d4 --- /dev/null +++ b/spec/frontend/behaviors/autosize_spec.js @@ -0,0 +1,20 @@ +import $ from 'jquery'; +import '~/behaviors/autosize'; + +function load() { + $(document).trigger('load'); +} + +describe('Autosize behavior', () => { + beforeEach(() => { + setFixtures('<textarea class="js-autosize" style="resize: vertical"></textarea>'); + }); + + it('does not overwrite the resize property', () => { + load(); + + expect($('textarea')).toHaveCss({ + resize: 'vertical', + }); + }); +}); diff --git a/spec/frontend/behaviors/bind_in_out_spec.js b/spec/frontend/behaviors/bind_in_out_spec.js index 923b6d372dd..92a68ddd387 100644 --- a/spec/frontend/behaviors/bind_in_out_spec.js +++ b/spec/frontend/behaviors/bind_in_out_spec.js @@ -163,14 +163,8 @@ describe('BindInOut', () => { describe('init', () => { beforeEach(() => { - // eslint-disable-next-line func-names - jest.spyOn(BindInOut.prototype, 'addEvents').mockImplementation(function() { - return this; - }); - // eslint-disable-next-line func-names - jest.spyOn(BindInOut.prototype, 'updateOut').mockImplementation(function() { - return this; - }); + jest.spyOn(BindInOut.prototype, 'addEvents').mockReturnThis(); + jest.spyOn(BindInOut.prototype, 'updateOut').mockReturnThis(); testContext.init = BindInOut.init({}, {}); }); diff --git a/spec/frontend/behaviors/copy_as_gfm_spec.js b/spec/frontend/behaviors/copy_as_gfm_spec.js new file mode 100644 index 00000000000..cf96ac488a8 --- /dev/null +++ b/spec/frontend/behaviors/copy_as_gfm_spec.js @@ -0,0 +1,125 @@ +import initCopyAsGFM, { CopyAsGFM } from '~/behaviors/markdown/copy_as_gfm'; + +describe('CopyAsGFM', () => { + describe('CopyAsGFM.pasteGFM', () => { + function callPasteGFM() { + const e = { + originalEvent: { + clipboardData: { + getData(mimeType) { + // When GFM code is copied, we put the regular plain text + // on the clipboard as `text/plain`, and the GFM as `text/x-gfm`. + // This emulates the behavior of `getData` with that data. + if (mimeType === 'text/plain') { + return 'code'; + } + if (mimeType === 'text/x-gfm') { + return '`code`'; + } + return null; + }, + }, + }, + preventDefault() {}, + }; + + CopyAsGFM.pasteGFM(e); + } + + it('wraps pasted code when not already in code tags', () => { + jest.spyOn(window.gl.utils, 'insertText').mockImplementation((el, textFunc) => { + const insertedText = textFunc('This is code: ', ''); + + expect(insertedText).toEqual('`code`'); + }); + + callPasteGFM(); + }); + + it('does not wrap pasted code when already in code tags', () => { + jest.spyOn(window.gl.utils, 'insertText').mockImplementation((el, textFunc) => { + const insertedText = textFunc('This is code: `', '`'); + + expect(insertedText).toEqual('code'); + }); + + callPasteGFM(); + }); + }); + + describe('CopyAsGFM.copyGFM', () => { + // Stub getSelection to return a purpose-built object. + const stubSelection = (html, parentNode) => ({ + getRangeAt: () => ({ + commonAncestorContainer: { tagName: parentNode }, + cloneContents: () => { + const fragment = document.createDocumentFragment(); + const node = document.createElement('div'); + node.innerHTML = html; + Array.from(node.childNodes).forEach(item => fragment.appendChild(item)); + return fragment; + }, + }), + rangeCount: 1, + }); + + const clipboardData = { + setData() {}, + }; + + const simulateCopy = () => { + const e = { + originalEvent: { + clipboardData, + }, + preventDefault() {}, + stopPropagation() {}, + }; + CopyAsGFM.copyAsGFM(e, CopyAsGFM.transformGFMSelection); + return clipboardData; + }; + + beforeAll(done => { + initCopyAsGFM(); + + // Fake call to nodeToGfm so the import of lazy bundle happened + CopyAsGFM.nodeToGFM(document.createElement('div')) + .then(() => { + done(); + }) + .catch(done.fail); + }); + + beforeEach(() => jest.spyOn(clipboardData, 'setData')); + + describe('list handling', () => { + it('uses correct gfm for unordered lists', done => { + const selection = stubSelection('<li>List Item1</li><li>List Item2</li>\n', 'UL'); + + window.getSelection = jest.fn(() => selection); + simulateCopy(); + + setImmediate(() => { + const expectedGFM = '* List Item1\n* List Item2'; + + expect(clipboardData.setData).toHaveBeenCalledWith('text/x-gfm', expectedGFM); + done(); + }); + }); + + it('uses correct gfm for ordered lists', done => { + const selection = stubSelection('<li>List Item1</li><li>List Item2</li>\n', 'OL'); + + window.getSelection = jest.fn(() => selection); + simulateCopy(); + + setImmediate(() => { + const expectedGFM = '1. List Item1\n1. List Item2'; + + expect(clipboardData.setData).toHaveBeenCalledWith('text/x-gfm', expectedGFM); + done(); + }); + }); + }); + }); +}); diff --git a/spec/frontend/behaviors/gl_emoji/unicode_support_map_spec.js b/spec/frontend/behaviors/gl_emoji/unicode_support_map_spec.js new file mode 100644 index 00000000000..aaee9c30cac --- /dev/null +++ b/spec/frontend/behaviors/gl_emoji/unicode_support_map_spec.js @@ -0,0 +1,52 @@ +import getUnicodeSupportMap from '~/emoji/support/unicode_support_map'; +import AccessorUtilities from '~/lib/utils/accessor'; +import { useLocalStorageSpy } from 'helpers/local_storage_helper'; + +describe('Unicode Support Map', () => { + useLocalStorageSpy(); + describe('getUnicodeSupportMap', () => { + const stringSupportMap = 'stringSupportMap'; + + beforeEach(() => { + jest.spyOn(AccessorUtilities, 'isLocalStorageAccessSafe').mockImplementation(() => {}); + jest.spyOn(JSON, 'parse').mockImplementation(() => {}); + jest.spyOn(JSON, 'stringify').mockReturnValue(stringSupportMap); + }); + + describe('if isLocalStorageAvailable is `true`', () => { + beforeEach(() => { + jest.spyOn(AccessorUtilities, 'isLocalStorageAccessSafe').mockReturnValue(true); + + getUnicodeSupportMap(); + }); + + it('should call .getItem and .setItem', () => { + const getArgs = window.localStorage.getItem.mock.calls; + const setArgs = window.localStorage.setItem.mock.calls; + + expect(getArgs[0][0]).toBe('gl-emoji-version'); + expect(getArgs[1][0]).toBe('gl-emoji-user-agent'); + + expect(setArgs[0][0]).toBe('gl-emoji-version'); + expect(setArgs[0][1]).toBe('0.2.0'); + expect(setArgs[1][0]).toBe('gl-emoji-user-agent'); + expect(setArgs[1][1]).toBe(navigator.userAgent); + expect(setArgs[2][0]).toBe('gl-emoji-unicode-support-map'); + expect(setArgs[2][1]).toBe(stringSupportMap); + }); + }); + + describe('if isLocalStorageAvailable is `false`', () => { + beforeEach(() => { + jest.spyOn(AccessorUtilities, 'isLocalStorageAccessSafe').mockReturnValue(false); + + getUnicodeSupportMap(); + }); + + it('should not call .getItem or .setItem', () => { + expect(window.localStorage.getItem.mock.calls.length).toBe(1); + expect(window.localStorage.setItem).not.toHaveBeenCalled(); + }); + }); + }); +}); diff --git a/spec/frontend/behaviors/markdown/highlight_current_user_spec.js b/spec/frontend/behaviors/markdown/highlight_current_user_spec.js new file mode 100644 index 00000000000..3305ddc412d --- /dev/null +++ b/spec/frontend/behaviors/markdown/highlight_current_user_spec.js @@ -0,0 +1,55 @@ +import highlightCurrentUser from '~/behaviors/markdown/highlight_current_user'; + +describe('highlightCurrentUser', () => { + let rootElement; + let elements; + + beforeEach(() => { + setFixtures(` + <div id="dummy-root-element"> + <div data-user="1">@first</div> + <div data-user="2">@second</div> + </div> + `); + rootElement = document.getElementById('dummy-root-element'); + elements = rootElement.querySelectorAll('[data-user]'); + }); + + describe('without current user', () => { + beforeEach(() => { + window.gon = window.gon || {}; + window.gon.current_user_id = null; + }); + + afterEach(() => { + delete window.gon.current_user_id; + }); + + it('does not highlight the user', () => { + const initialHtml = rootElement.outerHTML; + + highlightCurrentUser(elements); + + expect(rootElement.outerHTML).toBe(initialHtml); + }); + }); + + describe('with current user', () => { + beforeEach(() => { + window.gon = window.gon || {}; + window.gon.current_user_id = 2; + }); + + afterEach(() => { + delete window.gon.current_user_id; + }); + + it('highlights current user', () => { + highlightCurrentUser(elements); + + expect(elements.length).toBe(2); + expect(elements[0]).not.toHaveClass('current-user'); + expect(elements[1]).toHaveClass('current-user'); + }); + }); +}); diff --git a/spec/frontend/behaviors/requires_input_spec.js b/spec/frontend/behaviors/requires_input_spec.js new file mode 100644 index 00000000000..617fe49b059 --- /dev/null +++ b/spec/frontend/behaviors/requires_input_spec.js @@ -0,0 +1,62 @@ +import $ from 'jquery'; +import '~/behaviors/requires_input'; + +describe('requiresInput', () => { + let submitButton; + preloadFixtures('branches/new_branch.html'); + + beforeEach(() => { + loadFixtures('branches/new_branch.html'); + submitButton = $('button[type="submit"]'); + }); + + it('disables submit when any field is required', () => { + $('.js-requires-input').requiresInput(); + + expect(submitButton).toBeDisabled(); + }); + + it('enables submit when no field is required', () => { + $('*[required=required]').prop('required', false); + $('.js-requires-input').requiresInput(); + + expect(submitButton).not.toBeDisabled(); + }); + + it('enables submit when all required fields are pre-filled', () => { + $('*[required=required]').remove(); + $('.js-requires-input').requiresInput(); + + expect($('.submit')).not.toBeDisabled(); + }); + + it('enables submit when all required fields receive input', () => { + $('.js-requires-input').requiresInput(); + $('#required1') + .val('input1') + .change(); + + expect(submitButton).toBeDisabled(); + + $('#optional1') + .val('input1') + .change(); + + expect(submitButton).toBeDisabled(); + + $('#required2') + .val('input2') + .change(); + $('#required3') + .val('input3') + .change(); + $('#required4') + .val('input4') + .change(); + $('#required5') + .val('1') + .change(); + + expect($('.submit')).not.toBeDisabled(); + }); +}); diff --git a/spec/frontend/behaviors/shortcuts/shortcuts_issuable_spec.js b/spec/frontend/behaviors/shortcuts/shortcuts_issuable_spec.js new file mode 100644 index 00000000000..6391a544985 --- /dev/null +++ b/spec/frontend/behaviors/shortcuts/shortcuts_issuable_spec.js @@ -0,0 +1,322 @@ +import $ from 'jquery'; +import 'mousetrap'; +import initCopyAsGFM, { CopyAsGFM } from '~/behaviors/markdown/copy_as_gfm'; +import ShortcutsIssuable from '~/behaviors/shortcuts/shortcuts_issuable'; +import { getSelectedFragment } from '~/lib/utils/common_utils'; + +const FORM_SELECTOR = '.js-main-target-form .js-vue-comment-form'; + +jest.mock('~/lib/utils/common_utils', () => ({ + ...jest.requireActual('~/lib/utils/common_utils'), + getSelectedFragment: jest.fn().mockName('getSelectedFragment'), +})); + +describe('ShortcutsIssuable', () => { + const fixtureName = 'snippets/show.html'; + + preloadFixtures(fixtureName); + + beforeAll(done => { + initCopyAsGFM(); + + // Fake call to nodeToGfm so the import of lazy bundle happened + CopyAsGFM.nodeToGFM(document.createElement('div')) + .then(() => { + done(); + }) + .catch(done.fail); + }); + + beforeEach(() => { + loadFixtures(fixtureName); + $('body').append( + `<div class="js-main-target-form"> + <textarea class="js-vue-comment-form"></textarea> + </div>`, + ); + document.querySelector('.js-new-note-form').classList.add('js-main-target-form'); + + window.shortcut = new ShortcutsIssuable(true); + }); + + afterEach(() => { + $(FORM_SELECTOR).remove(); + + delete window.shortcut; + }); + + describe('replyWithSelectedText', () => { + // Stub window.gl.utils.getSelectedFragment to return a node with the provided HTML. + const stubSelection = (html, invalidNode) => { + getSelectedFragment.mockImplementation(() => { + const documentFragment = document.createDocumentFragment(); + const node = document.createElement('div'); + + node.innerHTML = html; + if (!invalidNode) node.className = 'md'; + + documentFragment.appendChild(node); + return documentFragment; + }); + }; + + describe('with empty selection', () => { + it('does not return an error', () => { + ShortcutsIssuable.replyWithSelectedText(true); + + expect($(FORM_SELECTOR).val()).toBe(''); + }); + + it('triggers `focus`', () => { + const spy = jest.spyOn(document.querySelector(FORM_SELECTOR), 'focus'); + ShortcutsIssuable.replyWithSelectedText(true); + + expect(spy).toHaveBeenCalled(); + }); + }); + + describe('with any selection', () => { + beforeEach(() => { + stubSelection('<p>Selected text.</p>'); + }); + + it('leaves existing input intact', done => { + $(FORM_SELECTOR).val('This text was already here.'); + + expect($(FORM_SELECTOR).val()).toBe('This text was already here.'); + + ShortcutsIssuable.replyWithSelectedText(true); + + setImmediate(() => { + expect($(FORM_SELECTOR).val()).toBe( + 'This text was already here.\n\n> Selected text.\n\n', + ); + done(); + }); + }); + + it('triggers `input`', done => { + let triggered = false; + $(FORM_SELECTOR).on('input', () => { + triggered = true; + }); + + ShortcutsIssuable.replyWithSelectedText(true); + + setImmediate(() => { + expect(triggered).toBe(true); + done(); + }); + }); + + it('triggers `focus`', done => { + const spy = jest.spyOn(document.querySelector(FORM_SELECTOR), 'focus'); + ShortcutsIssuable.replyWithSelectedText(true); + + setImmediate(() => { + expect(spy).toHaveBeenCalled(); + done(); + }); + }); + }); + + describe('with a one-line selection', () => { + it('quotes the selection', done => { + stubSelection('<p>This text has been selected.</p>'); + ShortcutsIssuable.replyWithSelectedText(true); + + setImmediate(() => { + expect($(FORM_SELECTOR).val()).toBe('> This text has been selected.\n\n'); + done(); + }); + }); + }); + + describe('with a multi-line selection', () => { + it('quotes the selected lines as a group', done => { + stubSelection( + '<p>Selected line one.</p>\n<p>Selected line two.</p>\n<p>Selected line three.</p>', + ); + ShortcutsIssuable.replyWithSelectedText(true); + + setImmediate(() => { + expect($(FORM_SELECTOR).val()).toBe( + '> Selected line one.\n>\n> Selected line two.\n>\n> Selected line three.\n\n', + ); + done(); + }); + }); + }); + + describe('with an invalid selection', () => { + beforeEach(() => { + stubSelection('<p>Selected text.</p>', true); + }); + + it('does not add anything to the input', done => { + ShortcutsIssuable.replyWithSelectedText(true); + + setImmediate(() => { + expect($(FORM_SELECTOR).val()).toBe(''); + done(); + }); + }); + + it('triggers `focus`', done => { + const spy = jest.spyOn(document.querySelector(FORM_SELECTOR), 'focus'); + ShortcutsIssuable.replyWithSelectedText(true); + + setImmediate(() => { + expect(spy).toHaveBeenCalled(); + done(); + }); + }); + }); + + describe('with a semi-valid selection', () => { + beforeEach(() => { + stubSelection('<div class="md">Selected text.</div><p>Invalid selected text.</p>', true); + }); + + it('only adds the valid part to the input', done => { + ShortcutsIssuable.replyWithSelectedText(true); + + setImmediate(() => { + expect($(FORM_SELECTOR).val()).toBe('> Selected text.\n\n'); + done(); + }); + }); + + it('triggers `focus`', done => { + const spy = jest.spyOn(document.querySelector(FORM_SELECTOR), 'focus'); + ShortcutsIssuable.replyWithSelectedText(true); + + setImmediate(() => { + expect(spy).toHaveBeenCalled(); + done(); + }); + }); + + it('triggers `input`', done => { + let triggered = false; + $(FORM_SELECTOR).on('input', () => { + triggered = true; + }); + + ShortcutsIssuable.replyWithSelectedText(true); + + setImmediate(() => { + expect(triggered).toBe(true); + done(); + }); + }); + }); + + describe('with a selection in a valid block', () => { + beforeEach(() => { + getSelectedFragment.mockImplementation(() => { + const documentFragment = document.createDocumentFragment(); + const node = document.createElement('div'); + const originalNode = document.createElement('body'); + originalNode.innerHTML = `<div class="issue"> + <div class="otherElem">Text...</div> + <div class="md"><p><em>Selected text.</em></p></div> + </div>`; + documentFragment.originalNodes = [originalNode.querySelector('em')]; + + node.innerHTML = '<em>Selected text.</em>'; + + documentFragment.appendChild(node); + + return documentFragment; + }); + }); + + it('adds the quoted selection to the input', done => { + ShortcutsIssuable.replyWithSelectedText(true); + + setImmediate(() => { + expect($(FORM_SELECTOR).val()).toBe('> *Selected text.*\n\n'); + done(); + }); + }); + + it('triggers `focus`', done => { + const spy = jest.spyOn(document.querySelector(FORM_SELECTOR), 'focus'); + ShortcutsIssuable.replyWithSelectedText(true); + + setImmediate(() => { + expect(spy).toHaveBeenCalled(); + done(); + }); + }); + + it('triggers `input`', done => { + let triggered = false; + $(FORM_SELECTOR).on('input', () => { + triggered = true; + }); + + ShortcutsIssuable.replyWithSelectedText(true); + + setImmediate(() => { + expect(triggered).toBe(true); + done(); + }); + }); + }); + + describe('with a selection in an invalid block', () => { + beforeEach(() => { + getSelectedFragment.mockImplementation(() => { + const documentFragment = document.createDocumentFragment(); + const node = document.createElement('div'); + const originalNode = document.createElement('body'); + originalNode.innerHTML = `<div class="issue"> + <div class="otherElem"><div><b>Selected text.</b></div></div> + <div class="md"><p><em>Valid text</em></p></div> + </div>`; + documentFragment.originalNodes = [originalNode.querySelector('b')]; + + node.innerHTML = '<b>Selected text.</b>'; + + documentFragment.appendChild(node); + + return documentFragment; + }); + }); + + it('does not add anything to the input', done => { + ShortcutsIssuable.replyWithSelectedText(true); + + setImmediate(() => { + expect($(FORM_SELECTOR).val()).toBe(''); + done(); + }); + }); + + it('triggers `focus`', done => { + const spy = jest.spyOn(document.querySelector(FORM_SELECTOR), 'focus'); + ShortcutsIssuable.replyWithSelectedText(true); + + setImmediate(() => { + expect(spy).toHaveBeenCalled(); + done(); + }); + }); + }); + + describe('with a valid selection with no text content', () => { + it('returns the proper markdown', done => { + stubSelection('<img src="https://gitlab.com/logo.png" alt="logo" />'); + ShortcutsIssuable.replyWithSelectedText(true); + + setImmediate(() => { + expect($(FORM_SELECTOR).val()).toBe('> \n\n'); + + done(); + }); + }); + }); + }); +}); diff --git a/spec/frontend/blob/components/__snapshots__/blob_header_filepath_spec.js.snap b/spec/frontend/blob/components/__snapshots__/blob_header_filepath_spec.js.snap index 2ac6e0d5d24..005b2c5da1c 100644 --- a/spec/frontend/blob/components/__snapshots__/blob_header_filepath_spec.js.snap +++ b/spec/frontend/blob/components/__snapshots__/blob_header_filepath_spec.js.snap @@ -14,7 +14,7 @@ exports[`Blob Header Filepath rendering matches the snapshot 1`] = ` <strong class="file-title-name mr-1 js-blob-header-filepath" - data-qa-selector="file_title_name" + data-qa-selector="file_title_content" > foo/bar/dummy.md </strong> diff --git a/spec/frontend/blob/components/blob_header_default_actions_spec.js b/spec/frontend/blob/components/blob_header_default_actions_spec.js index 684840afe1c..0247a12d8d3 100644 --- a/spec/frontend/blob/components/blob_header_default_actions_spec.js +++ b/spec/frontend/blob/components/blob_header_default_actions_spec.js @@ -66,5 +66,13 @@ describe('Blob Header Default Actions', () => { expect(buttons.at(0).attributes('disabled')).toBeTruthy(); }); + + it('does not render the copy button if a rendering error is set', () => { + createComponent({ + hasRenderError: true, + }); + + expect(wrapper.find('[data-testid="copyContentsButton"]').exists()).toBe(false); + }); }); }); diff --git a/spec/frontend/blob/components/blob_header_filepath_spec.js b/spec/frontend/blob/components/blob_header_filepath_spec.js index 3a53208f357..43057353051 100644 --- a/spec/frontend/blob/components/blob_header_filepath_spec.js +++ b/spec/frontend/blob/components/blob_header_filepath_spec.js @@ -4,9 +4,8 @@ import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; import { Blob as MockBlob } from './mock_data'; import { numberToHumanSize } from '~/lib/utils/number_utils'; -const mockHumanReadableSize = 'a lot'; jest.mock('~/lib/utils/number_utils', () => ({ - numberToHumanSize: jest.fn(() => mockHumanReadableSize), + numberToHumanSize: jest.fn(() => 'a lot'), })); describe('Blob Header Filepath', () => { @@ -57,7 +56,7 @@ describe('Blob Header Filepath', () => { it('renders filesize in a human-friendly format', () => { createComponent(); expect(numberToHumanSize).toHaveBeenCalled(); - expect(wrapper.vm.blobSize).toBe(mockHumanReadableSize); + expect(wrapper.vm.blobSize).toBe('a lot'); }); it('renders a slot and prepends its contents to the existing one', () => { diff --git a/spec/frontend/blob/components/blob_header_spec.js b/spec/frontend/blob/components/blob_header_spec.js index 0e7d2f6516a..01d4bf834d2 100644 --- a/spec/frontend/blob/components/blob_header_spec.js +++ b/spec/frontend/blob/components/blob_header_spec.js @@ -87,6 +87,17 @@ describe('Blob Header Default Actions', () => { expect(wrapper.text()).toContain(slotContent); }); }); + + it('passes information about render error down to default actions', () => { + createComponent( + {}, + {}, + { + hasRenderError: true, + }, + ); + expect(wrapper.find(DefaultActions).props('hasRenderError')).toBe(true); + }); }); describe('functionality', () => { diff --git a/spec/frontend/boards/board_list_helper.js b/spec/frontend/boards/board_list_helper.js new file mode 100644 index 00000000000..b51a82f2a35 --- /dev/null +++ b/spec/frontend/boards/board_list_helper.js @@ -0,0 +1,66 @@ +/* global List */ +/* global ListIssue */ + +import MockAdapter from 'axios-mock-adapter'; +import Vue from 'vue'; +import Sortable from 'sortablejs'; +import axios from '~/lib/utils/axios_utils'; +import BoardList from '~/boards/components/board_list.vue'; + +import '~/boards/models/issue'; +import '~/boards/models/list'; +import { listObj, boardsMockInterceptor } from './mock_data'; +import store from '~/boards/stores'; +import boardsStore from '~/boards/stores/boards_store'; + +window.Sortable = Sortable; + +export default function createComponent({ + done, + listIssueProps = {}, + componentProps = {}, + listProps = {}, +}) { + const el = document.createElement('div'); + + document.body.appendChild(el); + const mock = new MockAdapter(axios); + mock.onAny().reply(boardsMockInterceptor); + boardsStore.create(); + + const BoardListComp = Vue.extend(BoardList); + const list = new List({ ...listObj, ...listProps }); + const issue = new ListIssue({ + title: 'Testing', + id: 1, + iid: 1, + confidential: false, + labels: [], + assignees: [], + ...listIssueProps, + }); + if (!Object.prototype.hasOwnProperty.call(listProps, 'issuesSize')) { + list.issuesSize = 1; + } + list.issues.push(issue); + + const component = new BoardListComp({ + el, + store, + propsData: { + disabled: false, + list, + issues: list.issues, + loading: false, + issueLinkBase: '/issues', + rootPath: '/', + ...componentProps, + }, + }).$mount(); + + Vue.nextTick(() => { + done(); + }); + + return { component, mock }; +} diff --git a/spec/frontend/boards/board_list_spec.js b/spec/frontend/boards/board_list_spec.js index fa21053e2de..3a64b004847 100644 --- a/spec/frontend/boards/board_list_spec.js +++ b/spec/frontend/boards/board_list_spec.js @@ -118,7 +118,7 @@ describe('Board list component', () => { }); it('shows new issue form after eventhub event', () => { - eventHub.$emit(`hide-issue-form-${component.list.id}`); + eventHub.$emit(`toggle-issue-form-${component.list.id}`); return Vue.nextTick().then(() => { expect(component.$el.querySelector('.board-new-issue-form')).not.toBeNull(); diff --git a/spec/frontend/boards/components/board_column_spec.js b/spec/frontend/boards/components/board_column_spec.js index 7cf6ec913b4..6853fe2559d 100644 --- a/spec/frontend/boards/components/board_column_spec.js +++ b/spec/frontend/boards/components/board_column_spec.js @@ -70,37 +70,6 @@ describe('Board Column Component', () => { const isExpandable = () => wrapper.classes('is-expandable'); const isCollapsed = () => wrapper.classes('is-collapsed'); - const findAddIssueButton = () => wrapper.find({ ref: 'newIssueBtn' }); - - describe('Add issue button', () => { - const hasNoAddButton = [ListType.promotion, ListType.blank, ListType.closed]; - const hasAddButton = [ListType.backlog, ListType.label, ListType.milestone, ListType.assignee]; - - it.each(hasNoAddButton)('does not render when List Type is `%s`', listType => { - createComponent({ listType }); - - expect(findAddIssueButton().exists()).toBe(false); - }); - - it.each(hasAddButton)('does render when List Type is `%s`', listType => { - createComponent({ listType }); - - expect(findAddIssueButton().exists()).toBe(true); - }); - - it('has a test for each list type', () => { - Object.values(ListType).forEach(value => { - expect([...hasAddButton, ...hasNoAddButton]).toContain(value); - }); - }); - - it('does render when logged out', () => { - createComponent(); - - expect(findAddIssueButton().exists()).toBe(true); - }); - }); - describe('Given different list types', () => { it('is expandable when List Type is `backlog`', () => { createComponent({ listType: ListType.backlog }); @@ -109,64 +78,17 @@ describe('Board Column Component', () => { }); }); - describe('expanding / collapsing the column', () => { - it('does not collapse when clicking the header', () => { - createComponent(); - expect(isCollapsed()).toBe(false); - wrapper.find('.board-header').trigger('click'); + describe('expanded / collaped column', () => { + it('has class is-collapsed when list is collapsed', () => { + createComponent({ collapsed: false }); - return wrapper.vm.$nextTick().then(() => { - expect(isCollapsed()).toBe(false); - }); - }); - - it('collapses expanded Column when clicking the collapse icon', () => { - createComponent(); expect(wrapper.vm.list.isExpanded).toBe(true); - wrapper.find('.board-title-caret').trigger('click'); - - return wrapper.vm.$nextTick().then(() => { - expect(isCollapsed()).toBe(true); - }); }); - it('expands collapsed Column when clicking the expand icon', () => { + it('does not have class is-collapsed when list is expanded', () => { createComponent({ collapsed: true }); - expect(isCollapsed()).toBe(true); - wrapper.find('.board-title-caret').trigger('click'); - - return wrapper.vm.$nextTick().then(() => { - expect(isCollapsed()).toBe(false); - }); - }); - - it("when logged in it calls list update and doesn't set localStorage", () => { - jest.spyOn(List.prototype, 'update'); - window.gon.current_user_id = 1; - - createComponent({ withLocalStorage: false }); - wrapper.find('.board-title-caret').trigger('click'); - - return wrapper.vm.$nextTick().then(() => { - expect(wrapper.vm.list.update).toHaveBeenCalledTimes(1); - expect(localStorage.getItem(`${wrapper.vm.uniqueKey}.expanded`)).toBe(null); - }); - }); - - it("when logged out it doesn't call list update and sets localStorage", () => { - jest.spyOn(List.prototype, 'update'); - - createComponent(); - - wrapper.find('.board-title-caret').trigger('click'); - - return wrapper.vm.$nextTick().then(() => { - expect(wrapper.vm.list.update).toHaveBeenCalledTimes(0); - expect(localStorage.getItem(`${wrapper.vm.uniqueKey}.expanded`)).toBe( - String(wrapper.vm.list.isExpanded), - ); - }); + expect(isCollapsed()).toBe(true); }); }); }); diff --git a/spec/frontend/boards/components/board_list_header_spec.js b/spec/frontend/boards/components/board_list_header_spec.js new file mode 100644 index 00000000000..95673da1c56 --- /dev/null +++ b/spec/frontend/boards/components/board_list_header_spec.js @@ -0,0 +1,166 @@ +import Vue from 'vue'; +import { shallowMount } from '@vue/test-utils'; +import AxiosMockAdapter from 'axios-mock-adapter'; + +import BoardListHeader from '~/boards/components/board_list_header.vue'; +import List from '~/boards/models/list'; +import { ListType } from '~/boards/constants'; +import axios from '~/lib/utils/axios_utils'; + +import { TEST_HOST } from 'helpers/test_constants'; +import { listObj } from 'jest/boards/mock_data'; + +describe('Board List Header Component', () => { + let wrapper; + let axiosMock; + + beforeEach(() => { + window.gon = {}; + axiosMock = new AxiosMockAdapter(axios); + axiosMock.onGet(`${TEST_HOST}/lists/1/issues`).reply(200, { issues: [] }); + }); + + afterEach(() => { + axiosMock.restore(); + + wrapper.destroy(); + + localStorage.clear(); + }); + + const createComponent = ({ + listType = ListType.backlog, + collapsed = false, + withLocalStorage = true, + } = {}) => { + const boardId = '1'; + + const listMock = { + ...listObj, + list_type: listType, + collapsed, + }; + + if (listType === ListType.assignee) { + delete listMock.label; + listMock.user = {}; + } + + // Making List reactive + const list = Vue.observable(new List(listMock)); + + if (withLocalStorage) { + localStorage.setItem( + `boards.${boardId}.${list.type}.${list.id}.expanded`, + (!collapsed).toString(), + ); + } + + wrapper = shallowMount(BoardListHeader, { + propsData: { + boardId, + disabled: false, + issueLinkBase: '/', + rootPath: '/', + list, + }, + }); + }; + + const isCollapsed = () => !wrapper.props().list.isExpanded; + const isExpanded = () => wrapper.vm.list.isExpanded; + + const findAddIssueButton = () => wrapper.find({ ref: 'newIssueBtn' }); + const findCaret = () => wrapper.find('.board-title-caret'); + + describe('Add issue button', () => { + const hasNoAddButton = [ListType.promotion, ListType.blank, ListType.closed]; + const hasAddButton = [ListType.backlog, ListType.label, ListType.milestone, ListType.assignee]; + + it.each(hasNoAddButton)('does not render when List Type is `%s`', listType => { + createComponent({ listType }); + + expect(findAddIssueButton().exists()).toBe(false); + }); + + it.each(hasAddButton)('does render when List Type is `%s`', listType => { + createComponent({ listType }); + + expect(findAddIssueButton().exists()).toBe(true); + }); + + it('has a test for each list type', () => { + Object.values(ListType).forEach(value => { + expect([...hasAddButton, ...hasNoAddButton]).toContain(value); + }); + }); + + it('does render when logged out', () => { + createComponent(); + + expect(findAddIssueButton().exists()).toBe(true); + }); + }); + + describe('expanding / collapsing the column', () => { + it('does not collapse when clicking the header', () => { + createComponent(); + + expect(isCollapsed()).toBe(false); + wrapper.find('[data-testid="board-list-header"]').vm.$emit('click'); + + return wrapper.vm.$nextTick().then(() => { + expect(isCollapsed()).toBe(false); + }); + }); + + it('collapses expanded Column when clicking the collapse icon', () => { + createComponent(); + + expect(isExpanded()).toBe(true); + findCaret().vm.$emit('click'); + + return wrapper.vm.$nextTick().then(() => { + expect(isCollapsed()).toBe(true); + }); + }); + + it('expands collapsed Column when clicking the expand icon', () => { + createComponent({ collapsed: true }); + + expect(isCollapsed()).toBe(true); + findCaret().vm.$emit('click'); + + return wrapper.vm.$nextTick().then(() => { + expect(isCollapsed()).toBe(false); + }); + }); + + it("when logged in it calls list update and doesn't set localStorage", () => { + jest.spyOn(List.prototype, 'update'); + window.gon.current_user_id = 1; + + createComponent({ withLocalStorage: false }); + + findCaret().vm.$emit('click'); + + return wrapper.vm.$nextTick().then(() => { + expect(wrapper.vm.list.update).toHaveBeenCalledTimes(1); + expect(localStorage.getItem(`${wrapper.vm.uniqueKey}.expanded`)).toBe(null); + }); + }); + + it("when logged out it doesn't call list update and sets localStorage", () => { + jest.spyOn(List.prototype, 'update'); + + createComponent(); + + findCaret().vm.$emit('click'); + + return wrapper.vm.$nextTick().then(() => { + expect(wrapper.vm.list.update).not.toHaveBeenCalled(); + expect(localStorage.getItem(`${wrapper.vm.uniqueKey}.expanded`)).toBe(String(isExpanded())); + }); + }); + }); +}); diff --git a/spec/frontend/boards/stores/actions_spec.js b/spec/frontend/boards/stores/actions_spec.js index d23393db60d..0debca1310a 100644 --- a/spec/frontend/boards/stores/actions_spec.js +++ b/spec/frontend/boards/stores/actions_spec.js @@ -1,4 +1,6 @@ import actions from '~/boards/stores/actions'; +import * as types from '~/boards/stores/mutation_types'; +import testAction from 'helpers/vuex_action_helper'; const expectNotImplemented = action => { it('is not implemented', () => { @@ -7,7 +9,20 @@ const expectNotImplemented = action => { }; describe('setEndpoints', () => { - expectNotImplemented(actions.setEndpoints); + it('sets endpoints object', () => { + const mockEndpoints = { + foo: 'bar', + bar: 'baz', + }; + + return testAction( + actions.setEndpoints, + mockEndpoints, + {}, + [{ type: types.SET_ENDPOINTS, payload: mockEndpoints }], + [], + ); + }); }); describe('fetchLists', () => { diff --git a/spec/frontend/boards/stores/mutations_spec.js b/spec/frontend/boards/stores/mutations_spec.js index aa477766978..bc57c30b354 100644 --- a/spec/frontend/boards/stores/mutations_spec.js +++ b/spec/frontend/boards/stores/mutations_spec.js @@ -1,4 +1,6 @@ import mutations from '~/boards/stores/mutations'; +import * as types from '~/boards/stores/mutation_types'; +import defaultState from '~/boards/stores/state'; const expectNotImplemented = action => { it('is not implemented', () => { @@ -6,86 +8,107 @@ const expectNotImplemented = action => { }); }; -describe('SET_ENDPOINTS', () => { - expectNotImplemented(mutations.SET_ENDPOINTS); -}); +describe('Board Store Mutations', () => { + let state; -describe('REQUEST_ADD_LIST', () => { - expectNotImplemented(mutations.REQUEST_ADD_LIST); -}); + beforeEach(() => { + state = defaultState(); + }); -describe('RECEIVE_ADD_LIST_SUCCESS', () => { - expectNotImplemented(mutations.RECEIVE_ADD_LIST_SUCCESS); -}); + describe('SET_ENDPOINTS', () => { + it('Should set initial Boards data to state', () => { + const endpoints = { + boardsEndpoint: '/boards/', + recentBoardsEndpoint: '/boards/', + listsEndpoint: '/boards/lists', + bulkUpdatePath: '/boards/bulkUpdate', + boardId: 1, + fullPath: 'gitlab-org', + }; + + mutations[types.SET_ENDPOINTS](state, endpoints); + + expect(state.endpoints).toEqual(endpoints); + }); + }); -describe('RECEIVE_ADD_LIST_ERROR', () => { - expectNotImplemented(mutations.RECEIVE_ADD_LIST_ERROR); -}); + describe('REQUEST_ADD_LIST', () => { + expectNotImplemented(mutations.REQUEST_ADD_LIST); + }); -describe('REQUEST_UPDATE_LIST', () => { - expectNotImplemented(mutations.REQUEST_UPDATE_LIST); -}); + describe('RECEIVE_ADD_LIST_SUCCESS', () => { + expectNotImplemented(mutations.RECEIVE_ADD_LIST_SUCCESS); + }); -describe('RECEIVE_UPDATE_LIST_SUCCESS', () => { - expectNotImplemented(mutations.RECEIVE_UPDATE_LIST_SUCCESS); -}); + describe('RECEIVE_ADD_LIST_ERROR', () => { + expectNotImplemented(mutations.RECEIVE_ADD_LIST_ERROR); + }); -describe('RECEIVE_UPDATE_LIST_ERROR', () => { - expectNotImplemented(mutations.RECEIVE_UPDATE_LIST_ERROR); -}); + describe('REQUEST_UPDATE_LIST', () => { + expectNotImplemented(mutations.REQUEST_UPDATE_LIST); + }); -describe('REQUEST_REMOVE_LIST', () => { - expectNotImplemented(mutations.REQUEST_REMOVE_LIST); -}); + describe('RECEIVE_UPDATE_LIST_SUCCESS', () => { + expectNotImplemented(mutations.RECEIVE_UPDATE_LIST_SUCCESS); + }); -describe('RECEIVE_REMOVE_LIST_SUCCESS', () => { - expectNotImplemented(mutations.RECEIVE_REMOVE_LIST_SUCCESS); -}); + describe('RECEIVE_UPDATE_LIST_ERROR', () => { + expectNotImplemented(mutations.RECEIVE_UPDATE_LIST_ERROR); + }); -describe('RECEIVE_REMOVE_LIST_ERROR', () => { - expectNotImplemented(mutations.RECEIVE_REMOVE_LIST_ERROR); -}); + describe('REQUEST_REMOVE_LIST', () => { + expectNotImplemented(mutations.REQUEST_REMOVE_LIST); + }); -describe('REQUEST_ADD_ISSUE', () => { - expectNotImplemented(mutations.REQUEST_ADD_ISSUE); -}); + describe('RECEIVE_REMOVE_LIST_SUCCESS', () => { + expectNotImplemented(mutations.RECEIVE_REMOVE_LIST_SUCCESS); + }); -describe('RECEIVE_ADD_ISSUE_SUCCESS', () => { - expectNotImplemented(mutations.RECEIVE_ADD_ISSUE_SUCCESS); -}); + describe('RECEIVE_REMOVE_LIST_ERROR', () => { + expectNotImplemented(mutations.RECEIVE_REMOVE_LIST_ERROR); + }); -describe('RECEIVE_ADD_ISSUE_ERROR', () => { - expectNotImplemented(mutations.RECEIVE_ADD_ISSUE_ERROR); -}); + describe('REQUEST_ADD_ISSUE', () => { + expectNotImplemented(mutations.REQUEST_ADD_ISSUE); + }); -describe('REQUEST_MOVE_ISSUE', () => { - expectNotImplemented(mutations.REQUEST_MOVE_ISSUE); -}); + describe('RECEIVE_ADD_ISSUE_SUCCESS', () => { + expectNotImplemented(mutations.RECEIVE_ADD_ISSUE_SUCCESS); + }); -describe('RECEIVE_MOVE_ISSUE_SUCCESS', () => { - expectNotImplemented(mutations.RECEIVE_MOVE_ISSUE_SUCCESS); -}); + describe('RECEIVE_ADD_ISSUE_ERROR', () => { + expectNotImplemented(mutations.RECEIVE_ADD_ISSUE_ERROR); + }); -describe('RECEIVE_MOVE_ISSUE_ERROR', () => { - expectNotImplemented(mutations.RECEIVE_MOVE_ISSUE_ERROR); -}); + describe('REQUEST_MOVE_ISSUE', () => { + expectNotImplemented(mutations.REQUEST_MOVE_ISSUE); + }); -describe('REQUEST_UPDATE_ISSUE', () => { - expectNotImplemented(mutations.REQUEST_UPDATE_ISSUE); -}); + describe('RECEIVE_MOVE_ISSUE_SUCCESS', () => { + expectNotImplemented(mutations.RECEIVE_MOVE_ISSUE_SUCCESS); + }); -describe('RECEIVE_UPDATE_ISSUE_SUCCESS', () => { - expectNotImplemented(mutations.RECEIVE_UPDATE_ISSUE_SUCCESS); -}); + describe('RECEIVE_MOVE_ISSUE_ERROR', () => { + expectNotImplemented(mutations.RECEIVE_MOVE_ISSUE_ERROR); + }); -describe('RECEIVE_UPDATE_ISSUE_ERROR', () => { - expectNotImplemented(mutations.RECEIVE_UPDATE_ISSUE_ERROR); -}); + describe('REQUEST_UPDATE_ISSUE', () => { + expectNotImplemented(mutations.REQUEST_UPDATE_ISSUE); + }); -describe('SET_CURRENT_PAGE', () => { - expectNotImplemented(mutations.SET_CURRENT_PAGE); -}); + describe('RECEIVE_UPDATE_ISSUE_SUCCESS', () => { + expectNotImplemented(mutations.RECEIVE_UPDATE_ISSUE_SUCCESS); + }); -describe('TOGGLE_EMPTY_STATE', () => { - expectNotImplemented(mutations.TOGGLE_EMPTY_STATE); + describe('RECEIVE_UPDATE_ISSUE_ERROR', () => { + expectNotImplemented(mutations.RECEIVE_UPDATE_ISSUE_ERROR); + }); + + describe('SET_CURRENT_PAGE', () => { + expectNotImplemented(mutations.SET_CURRENT_PAGE); + }); + + describe('TOGGLE_EMPTY_STATE', () => { + expectNotImplemented(mutations.TOGGLE_EMPTY_STATE); + }); }); diff --git a/spec/frontend/ci_variable_list/components/ci_variable_modal_spec.js b/spec/frontend/ci_variable_list/components/ci_variable_modal_spec.js index 9179302f786..094fdcdc185 100644 --- a/spec/frontend/ci_variable_list/components/ci_variable_modal_spec.js +++ b/spec/frontend/ci_variable_list/components/ci_variable_modal_spec.js @@ -105,6 +105,46 @@ describe('Ci variable modal', () => { }); }); + describe('Adding a new non-AWS variable', () => { + beforeEach(() => { + const [variable] = mockData.mockVariables; + const invalidKeyVariable = { + ...variable, + key: 'key', + value: 'value', + secret_value: 'secret_value', + }; + createComponent(mount); + store.state.variable = invalidKeyVariable; + }); + + it('does not show AWS guidance tip', () => { + const tip = wrapper.find(`div[data-testid='aws-guidance-tip']`); + expect(tip.exists()).toBe(true); + expect(tip.isVisible()).toBe(false); + }); + }); + + describe('Adding a new AWS variable', () => { + beforeEach(() => { + const [variable] = mockData.mockVariables; + const invalidKeyVariable = { + ...variable, + key: AWS_ACCESS_KEY_ID, + value: 'AKIAIOSFODNN7EXAMPLEjdhy', + secret_value: 'AKIAIOSFODNN7EXAMPLEjdhy', + }; + createComponent(mount); + store.state.variable = invalidKeyVariable; + }); + + it('shows AWS guidance tip', () => { + const tip = wrapper.find(`[data-testid='aws-guidance-tip']`); + expect(tip.exists()).toBe(true); + expect(tip.isVisible()).toBe(true); + }); + }); + describe('Editing a variable', () => { beforeEach(() => { const [variable] = mockData.mockVariables; diff --git a/spec/frontend/clusters/clusters_bundle_spec.js b/spec/frontend/clusters/clusters_bundle_spec.js index 9d0ed423759..a9870e4db57 100644 --- a/spec/frontend/clusters/clusters_bundle_spec.js +++ b/spec/frontend/clusters/clusters_bundle_spec.js @@ -268,13 +268,18 @@ describe('Clusters', () => { cluster.store.state.applications[applicationId].status = INSTALLABLE; + const params = {}; + if (applicationId === 'knative') { + params.hostname = 'test-example.com'; + } + // eslint-disable-next-line promise/valid-params cluster - .installApplication({ id: applicationId }) + .installApplication({ id: applicationId, params }) .then(() => { expect(cluster.store.state.applications[applicationId].status).toEqual(INSTALLING); expect(cluster.store.state.applications[applicationId].requestReason).toEqual(null); - expect(cluster.service.installApplication).toHaveBeenCalledWith(applicationId, undefined); + expect(cluster.service.installApplication).toHaveBeenCalledWith(applicationId, params); done(); }) .catch(); diff --git a/spec/frontend/clusters/components/__snapshots__/applications_spec.js.snap b/spec/frontend/clusters/components/__snapshots__/applications_spec.js.snap new file mode 100644 index 00000000000..92237590550 --- /dev/null +++ b/spec/frontend/clusters/components/__snapshots__/applications_spec.js.snap @@ -0,0 +1,89 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Applications Cert-Manager application shows the correct description 1`] = ` +<p + data-testid="certManagerDescription" +> + Cert-Manager is a native Kubernetes certificate management controller that helps with issuing certificates. Installing Cert-Manager on your cluster will issue a certificate by + <a + class="gl-link" + href="https://letsencrypt.org/" + rel="noopener noreferrer" + target="_blank" + > + Let's Encrypt + </a> + and ensure that certificates are valid and up-to-date. +</p> +`; + +exports[`Applications Crossplane application shows the correct description 1`] = ` +<p + data-testid="crossplaneDescription" +> + Crossplane enables declarative provisioning of managed services from your cloud of choice using + <code> + kubectl + </code> + or + <a + class="gl-link" + href="https://docs.gitlab.com/ee/user/clusters/applications.html#crossplane" + rel="noopener noreferrer" + target="_blank" + > + GitLab Integration + </a> + . Crossplane runs inside your Kubernetes cluster and supports secure connectivity and secrets management between app containers and the cloud services they depend on. +</p> +`; + +exports[`Applications Ingress application shows the correct warning message 1`] = ` +<strong + data-testid="ingressCostWarning" +> + Installing Ingress may incur additional costs. Learn more about + <a + class="gl-link" + href="https://cloud.google.com/compute/pricing#lb" + rel="noopener noreferrer" + target="_blank" + > + pricing + </a> + . +</strong> +`; + +exports[`Applications Knative application shows the correct description 1`] = ` +<span + data-testid="installedVia" +> + installed via + <a + class="gl-link" + href="" + rel="noopener" + target="_blank" + > + Cloud Run + </a> +</span> +`; + +exports[`Applications Prometheus application shows the correct description 1`] = ` +<span + data-testid="prometheusDescription" +> + Prometheus is an open-source monitoring system with + <a + class="gl-link" + href="https://docs.gitlab.com/ce/user/project/integrations/prometheus.html" + rel="noopener noreferrer" + target="_blank" + > + GitLab Integration + </a> + to monitor deployed applications. +</span> +`; diff --git a/spec/frontend/clusters/components/application_row_spec.js b/spec/frontend/clusters/components/application_row_spec.js index 33ff1424c61..94bdd7b7778 100644 --- a/spec/frontend/clusters/components/application_row_spec.js +++ b/spec/frontend/clusters/components/application_row_spec.js @@ -1,242 +1,194 @@ -import Vue from 'vue'; import { shallowMount } from '@vue/test-utils'; -import mountComponent from 'helpers/vue_mount_component_helper'; +import { GlSprintf } from '@gitlab/ui'; import eventHub from '~/clusters/event_hub'; -import { APPLICATION_STATUS } from '~/clusters/constants'; -import applicationRow from '~/clusters/components/application_row.vue'; +import { APPLICATION_STATUS, ELASTIC_STACK } from '~/clusters/constants'; +import ApplicationRow from '~/clusters/components/application_row.vue'; import UninstallApplicationConfirmationModal from '~/clusters/components/uninstall_application_confirmation_modal.vue'; +import UpdateApplicationConfirmationModal from '~/clusters/components/update_application_confirmation_modal.vue'; import { DEFAULT_APPLICATION_STATE } from '../services/mock_data'; describe('Application Row', () => { - let vm; - let ApplicationRow; - - beforeEach(() => { - ApplicationRow = Vue.extend(applicationRow); - }); + let wrapper; afterEach(() => { - vm.$destroy(); + wrapper.destroy(); }); + const mountComponent = data => { + wrapper = shallowMount(ApplicationRow, { + stubs: { GlSprintf }, + propsData: { + ...DEFAULT_APPLICATION_STATE, + ...data, + }, + }); + }; + describe('Title', () => { it('shows title', () => { - vm = mountComponent(ApplicationRow, { - ...DEFAULT_APPLICATION_STATE, - titleLink: null, - }); - const title = vm.$el.querySelector('.js-cluster-application-title'); + mountComponent({ titleLink: null }); + + const title = wrapper.find('.js-cluster-application-title'); - expect(title.tagName).toEqual('SPAN'); - expect(title.textContent.trim()).toEqual(DEFAULT_APPLICATION_STATE.title); + expect(title.element).toBeInstanceOf(HTMLSpanElement); + expect(title.text()).toEqual(DEFAULT_APPLICATION_STATE.title); }); it('shows title link', () => { expect(DEFAULT_APPLICATION_STATE.titleLink).toBeDefined(); + mountComponent(); + const title = wrapper.find('.js-cluster-application-title'); - vm = mountComponent(ApplicationRow, { - ...DEFAULT_APPLICATION_STATE, - }); - const title = vm.$el.querySelector('.js-cluster-application-title'); - - expect(title.tagName).toEqual('A'); - expect(title.textContent.trim()).toEqual(DEFAULT_APPLICATION_STATE.title); + expect(title.element).toBeInstanceOf(HTMLAnchorElement); + expect(title.text()).toEqual(DEFAULT_APPLICATION_STATE.title); }); }); describe('Install button', () => { + const button = () => wrapper.find('.js-cluster-application-install-button'); + const checkButtonState = (label, loading, disabled) => { + expect(button().props('label')).toEqual(label); + expect(button().props('loading')).toEqual(loading); + expect(button().props('disabled')).toEqual(disabled); + }; + it('has indeterminate state on page load', () => { - vm = mountComponent(ApplicationRow, { - ...DEFAULT_APPLICATION_STATE, - status: null, - }); + mountComponent({ status: null }); - expect(vm.installButtonLabel).toBeUndefined(); + expect(button().props('label')).toBeUndefined(); }); it('has install button', () => { - const installationBtn = vm.$el.querySelector('.js-cluster-application-install-button'); + mountComponent(); - expect(installationBtn).not.toBe(null); + expect(button().exists()).toBe(true); }); it('has disabled "Install" when APPLICATION_STATUS.NOT_INSTALLABLE', () => { - vm = mountComponent(ApplicationRow, { - ...DEFAULT_APPLICATION_STATE, - status: APPLICATION_STATUS.NOT_INSTALLABLE, - }); + mountComponent({ status: APPLICATION_STATUS.NOT_INSTALLABLE }); - expect(vm.installButtonLabel).toEqual('Install'); - expect(vm.installButtonLoading).toEqual(false); - expect(vm.installButtonDisabled).toEqual(true); + checkButtonState('Install', false, true); }); it('has enabled "Install" when APPLICATION_STATUS.INSTALLABLE', () => { - vm = mountComponent(ApplicationRow, { - ...DEFAULT_APPLICATION_STATE, - status: APPLICATION_STATUS.INSTALLABLE, - }); + mountComponent({ status: APPLICATION_STATUS.INSTALLABLE }); - expect(vm.installButtonLabel).toEqual('Install'); - expect(vm.installButtonLoading).toEqual(false); - expect(vm.installButtonDisabled).toEqual(false); + checkButtonState('Install', false, false); }); it('has loading "Installing" when APPLICATION_STATUS.INSTALLING', () => { - vm = mountComponent(ApplicationRow, { - ...DEFAULT_APPLICATION_STATE, - status: APPLICATION_STATUS.INSTALLING, - }); + mountComponent({ status: APPLICATION_STATUS.INSTALLING }); - expect(vm.installButtonLabel).toEqual('Installing'); - expect(vm.installButtonLoading).toEqual(true); - expect(vm.installButtonDisabled).toEqual(true); + checkButtonState('Installing', true, true); }); it('has disabled "Installed" when application is installed and not uninstallable', () => { - vm = mountComponent(ApplicationRow, { - ...DEFAULT_APPLICATION_STATE, + mountComponent({ status: APPLICATION_STATUS.INSTALLED, installed: true, uninstallable: false, }); - expect(vm.installButtonLabel).toEqual('Installed'); - expect(vm.installButtonLoading).toEqual(false); - expect(vm.installButtonDisabled).toEqual(true); + checkButtonState('Installed', false, true); }); it('hides when application is installed and uninstallable', () => { - vm = mountComponent(ApplicationRow, { - ...DEFAULT_APPLICATION_STATE, + mountComponent({ status: APPLICATION_STATUS.INSTALLED, installed: true, uninstallable: true, }); - const installBtn = vm.$el.querySelector('.js-cluster-application-install-button'); - expect(installBtn).toBe(null); + expect(button().exists()).toBe(false); }); it('has enabled "Install" when install fails', () => { - vm = mountComponent(ApplicationRow, { - ...DEFAULT_APPLICATION_STATE, + mountComponent({ status: APPLICATION_STATUS.INSTALLABLE, installFailed: true, }); - expect(vm.installButtonLabel).toEqual('Install'); - expect(vm.installButtonLoading).toEqual(false); - expect(vm.installButtonDisabled).toEqual(false); + checkButtonState('Install', false, false); }); it('has enabled "Install" when REQUEST_FAILURE (so you can try installing again)', () => { - vm = mountComponent(ApplicationRow, { - ...DEFAULT_APPLICATION_STATE, - status: APPLICATION_STATUS.INSTALLABLE, - }); + mountComponent({ status: APPLICATION_STATUS.INSTALLABLE }); - expect(vm.installButtonLabel).toEqual('Install'); - expect(vm.installButtonLoading).toEqual(false); - expect(vm.installButtonDisabled).toEqual(false); + checkButtonState('Install', false, false); }); it('clicking install button emits event', () => { - jest.spyOn(eventHub, '$emit'); - vm = mountComponent(ApplicationRow, { - ...DEFAULT_APPLICATION_STATE, - status: APPLICATION_STATUS.INSTALLABLE, - }); - const installButton = vm.$el.querySelector('.js-cluster-application-install-button'); + const spy = jest.spyOn(eventHub, '$emit'); + mountComponent({ status: APPLICATION_STATUS.INSTALLABLE }); - installButton.click(); + button().vm.$emit('click'); - expect(eventHub.$emit).toHaveBeenCalledWith('installApplication', { + expect(spy).toHaveBeenCalledWith('installApplication', { id: DEFAULT_APPLICATION_STATE.id, params: {}, }); }); it('clicking install button when installApplicationRequestParams are provided emits event', () => { - jest.spyOn(eventHub, '$emit'); - vm = mountComponent(ApplicationRow, { - ...DEFAULT_APPLICATION_STATE, + const spy = jest.spyOn(eventHub, '$emit'); + mountComponent({ status: APPLICATION_STATUS.INSTALLABLE, installApplicationRequestParams: { hostname: 'jupyter' }, }); - const installButton = vm.$el.querySelector('.js-cluster-application-install-button'); - installButton.click(); + button().vm.$emit('click'); - expect(eventHub.$emit).toHaveBeenCalledWith('installApplication', { + expect(spy).toHaveBeenCalledWith('installApplication', { id: DEFAULT_APPLICATION_STATE.id, params: { hostname: 'jupyter' }, }); }); it('clicking disabled install button emits nothing', () => { - jest.spyOn(eventHub, '$emit'); - vm = mountComponent(ApplicationRow, { - ...DEFAULT_APPLICATION_STATE, - status: APPLICATION_STATUS.INSTALLING, - }); - const installButton = vm.$el.querySelector('.js-cluster-application-install-button'); + const spy = jest.spyOn(eventHub, '$emit'); + mountComponent({ status: APPLICATION_STATUS.INSTALLING }); - expect(vm.installButtonDisabled).toEqual(true); + expect(button().props('disabled')).toEqual(true); - installButton.click(); + button().vm.$emit('click'); - expect(eventHub.$emit).not.toHaveBeenCalled(); + expect(spy).not.toHaveBeenCalled(); }); }); describe('Uninstall button', () => { it('displays button when app is installed and uninstallable', () => { - vm = mountComponent(ApplicationRow, { - ...DEFAULT_APPLICATION_STATE, + mountComponent({ installed: true, uninstallable: true, status: APPLICATION_STATUS.NOT_INSTALLABLE, }); - const uninstallButton = vm.$el.querySelector('.js-cluster-application-uninstall-button'); + const uninstallButton = wrapper.find('.js-cluster-application-uninstall-button'); - expect(uninstallButton).toBeTruthy(); + expect(uninstallButton.exists()).toBe(true); }); - it('displays a success toast message if application uninstall was successful', () => { - vm = mountComponent(ApplicationRow, { - ...DEFAULT_APPLICATION_STATE, + it('displays a success toast message if application uninstall was successful', async () => { + mountComponent({ title: 'GitLab Runner', uninstallSuccessful: false, }); - vm.$toast = { show: jest.fn() }; - vm.uninstallSuccessful = true; + wrapper.vm.$toast = { show: jest.fn() }; + wrapper.setProps({ uninstallSuccessful: true }); - return vm.$nextTick(() => { - expect(vm.$toast.show).toHaveBeenCalledWith('GitLab Runner uninstalled successfully.'); - }); + await wrapper.vm.$nextTick(); + expect(wrapper.vm.$toast.show).toHaveBeenCalledWith( + 'GitLab Runner uninstalled successfully.', + ); }); }); describe('when confirmation modal triggers confirm event', () => { - let wrapper; - - beforeEach(() => { - wrapper = shallowMount(ApplicationRow, { - propsData: { - ...DEFAULT_APPLICATION_STATE, - }, - }); - }); - - afterEach(() => { - wrapper.destroy(); - }); - it('triggers uninstallApplication event', () => { jest.spyOn(eventHub, '$emit'); + mountComponent(); wrapper.find(UninstallApplicationConfirmationModal).vm.$emit('confirm'); expect(eventHub.$emit).toHaveBeenCalledWith('uninstallApplication', { @@ -246,172 +198,226 @@ describe('Application Row', () => { }); describe('Update button', () => { + const button = () => wrapper.find('.js-cluster-application-update-button'); + it('has indeterminate state on page load', () => { - vm = mountComponent(ApplicationRow, { - ...DEFAULT_APPLICATION_STATE, - status: null, - }); - const updateBtn = vm.$el.querySelector('.js-cluster-application-update-button'); + mountComponent(); - expect(updateBtn).toBe(null); + expect(button().exists()).toBe(false); }); it('has enabled "Update" when "updateAvailable" is true', () => { - vm = mountComponent(ApplicationRow, { - ...DEFAULT_APPLICATION_STATE, - updateAvailable: true, - }); - const updateBtn = vm.$el.querySelector('.js-cluster-application-update-button'); + mountComponent({ updateAvailable: true }); - expect(updateBtn).not.toBe(null); - expect(updateBtn.innerHTML).toContain('Update'); + expect(button().exists()).toBe(true); + expect(button().props('label')).toContain('Update'); }); it('has enabled "Retry update" when update process fails', () => { - vm = mountComponent(ApplicationRow, { - ...DEFAULT_APPLICATION_STATE, + mountComponent({ status: APPLICATION_STATUS.INSTALLED, updateFailed: true, }); - const updateBtn = vm.$el.querySelector('.js-cluster-application-update-button'); - expect(updateBtn).not.toBe(null); - expect(updateBtn.innerHTML).toContain('Retry update'); + expect(button().exists()).toBe(true); + expect(button().props('label')).toContain('Retry update'); }); it('has disabled "Updating" when APPLICATION_STATUS.UPDATING', () => { - vm = mountComponent(ApplicationRow, { - ...DEFAULT_APPLICATION_STATE, - status: APPLICATION_STATUS.UPDATING, - }); - const updateBtn = vm.$el.querySelector('.js-cluster-application-update-button'); + mountComponent({ status: APPLICATION_STATUS.UPDATING }); - expect(updateBtn).not.toBe(null); - expect(vm.isUpdating).toBe(true); - expect(updateBtn.innerHTML).toContain('Updating'); + expect(button().exists()).toBe(true); + expect(button().props('label')).toContain('Updating'); }); it('clicking update button emits event', () => { - jest.spyOn(eventHub, '$emit'); - vm = mountComponent(ApplicationRow, { - ...DEFAULT_APPLICATION_STATE, + const spy = jest.spyOn(eventHub, '$emit'); + mountComponent({ status: APPLICATION_STATUS.INSTALLED, updateAvailable: true, }); - const updateBtn = vm.$el.querySelector('.js-cluster-application-update-button'); - updateBtn.click(); + button().vm.$emit('click'); - expect(eventHub.$emit).toHaveBeenCalledWith('updateApplication', { + expect(spy).toHaveBeenCalledWith('updateApplication', { id: DEFAULT_APPLICATION_STATE.id, params: {}, }); }); it('clicking disabled update button emits nothing', () => { - jest.spyOn(eventHub, '$emit'); - vm = mountComponent(ApplicationRow, { - ...DEFAULT_APPLICATION_STATE, - status: APPLICATION_STATUS.UPDATING, - }); - const updateBtn = vm.$el.querySelector('.js-cluster-application-update-button'); + const spy = jest.spyOn(eventHub, '$emit'); + mountComponent({ status: APPLICATION_STATUS.UPDATING }); - updateBtn.click(); + button().vm.$emit('click'); - expect(eventHub.$emit).not.toHaveBeenCalled(); + expect(spy).not.toHaveBeenCalled(); }); it('displays an error message if application update failed', () => { - vm = mountComponent(ApplicationRow, { - ...DEFAULT_APPLICATION_STATE, + mountComponent({ title: 'GitLab Runner', status: APPLICATION_STATUS.INSTALLED, updateFailed: true, }); - const failureMessage = vm.$el.querySelector('.js-cluster-application-update-details'); + const failureMessage = wrapper.find('.js-cluster-application-update-details'); - expect(failureMessage).not.toBe(null); - expect(failureMessage.innerHTML).toContain( + expect(failureMessage.exists()).toBe(true); + expect(failureMessage.text()).toContain( 'Update failed. Please check the logs and try again.', ); }); - it('displays a success toast message if application update was successful', () => { - vm = mountComponent(ApplicationRow, { - ...DEFAULT_APPLICATION_STATE, + it('displays a success toast message if application update was successful', async () => { + mountComponent({ title: 'GitLab Runner', updateSuccessful: false, }); - vm.$toast = { show: jest.fn() }; - vm.updateSuccessful = true; + wrapper.vm.$toast = { show: jest.fn() }; + wrapper.setProps({ updateSuccessful: true }); - return vm.$nextTick(() => { - expect(vm.$toast.show).toHaveBeenCalledWith('GitLab Runner updated successfully.'); + await wrapper.vm.$nextTick(); + expect(wrapper.vm.$toast.show).toHaveBeenCalledWith('GitLab Runner updated successfully.'); + }); + + describe('when updating does not require confirmation', () => { + beforeEach(() => mountComponent({ updateAvailable: true })); + + it('the modal is not rendered', () => { + expect(wrapper.contains(UpdateApplicationConfirmationModal)).toBe(false); + }); + + it('the correct button is rendered', () => { + expect(wrapper.contains("[data-qa-selector='update_button']")).toBe(true); + }); + }); + + describe('when updating requires confirmation', () => { + beforeEach(() => { + mountComponent({ + updateAvailable: true, + id: ELASTIC_STACK, + version: '1.1.2', + }); + }); + + it('displays a modal', () => { + expect(wrapper.contains(UpdateApplicationConfirmationModal)).toBe(true); + }); + + it('the correct button is rendered', () => { + expect(wrapper.contains("[data-qa-selector='update_button_with_confirmation']")).toBe(true); + }); + + it('triggers updateApplication event', () => { + jest.spyOn(eventHub, '$emit'); + wrapper.find(UpdateApplicationConfirmationModal).vm.$emit('confirm'); + + expect(eventHub.$emit).toHaveBeenCalledWith('updateApplication', { + id: ELASTIC_STACK, + params: {}, + }); + }); + }); + + describe('updating Elastic Stack special case', () => { + it('needs confirmation if version is lower than 3.0.0', () => { + mountComponent({ + updateAvailable: true, + id: ELASTIC_STACK, + version: '1.1.2', + }); + + expect(wrapper.contains("[data-qa-selector='update_button_with_confirmation']")).toBe(true); + expect(wrapper.contains(UpdateApplicationConfirmationModal)).toBe(true); + }); + + it('does not need confirmation is version is 3.0.0', () => { + mountComponent({ + updateAvailable: true, + id: ELASTIC_STACK, + version: '3.0.0', + }); + + expect(wrapper.contains("[data-qa-selector='update_button']")).toBe(true); + expect(wrapper.contains(UpdateApplicationConfirmationModal)).toBe(false); + }); + + it('does not need confirmation if version is higher than 3.0.0', () => { + mountComponent({ + updateAvailable: true, + id: ELASTIC_STACK, + version: '5.2.1', + }); + + expect(wrapper.contains("[data-qa-selector='update_button']")).toBe(true); + expect(wrapper.contains(UpdateApplicationConfirmationModal)).toBe(false); }); }); }); describe('Version', () => { + const updateDetails = () => wrapper.find('.js-cluster-application-update-details'); + const versionEl = () => wrapper.find('.js-cluster-application-update-version'); + it('displays a version number if application has been updated', () => { const version = '0.1.45'; - vm = mountComponent(ApplicationRow, { - ...DEFAULT_APPLICATION_STATE, + mountComponent({ status: APPLICATION_STATUS.INSTALLED, updateSuccessful: true, version, }); - const updateDetails = vm.$el.querySelector('.js-cluster-application-update-details'); - const versionEl = vm.$el.querySelector('.js-cluster-application-update-version'); - expect(updateDetails.innerHTML).toContain('Updated'); - expect(versionEl).not.toBe(null); - expect(versionEl.innerHTML).toContain(version); + expect(updateDetails().text()).toBe(`Updated to chart v${version}`); }); it('contains a link to the chart repo if application has been updated', () => { const version = '0.1.45'; const chartRepo = 'https://gitlab.com/gitlab-org/charts/gitlab-runner'; - vm = mountComponent(ApplicationRow, { - ...DEFAULT_APPLICATION_STATE, + mountComponent({ status: APPLICATION_STATUS.INSTALLED, updateSuccessful: true, chartRepo, version, }); - const versionEl = vm.$el.querySelector('.js-cluster-application-update-version'); - expect(versionEl.href).toEqual(chartRepo); - expect(versionEl.target).toEqual('_blank'); + expect(versionEl().attributes('href')).toEqual(chartRepo); + expect(versionEl().props('target')).toEqual('_blank'); }); it('does not display a version number if application update failed', () => { const version = '0.1.45'; - vm = mountComponent(ApplicationRow, { - ...DEFAULT_APPLICATION_STATE, + mountComponent({ status: APPLICATION_STATUS.INSTALLED, updateFailed: true, version, }); - const updateDetails = vm.$el.querySelector('.js-cluster-application-update-details'); - const versionEl = vm.$el.querySelector('.js-cluster-application-update-version'); - expect(updateDetails.innerHTML).toContain('failed'); - expect(versionEl).toBe(null); + expect(updateDetails().text()).toBe('Update failed'); + expect(versionEl().exists()).toBe(false); + }); + + it('displays updating when the application update is currently updating', () => { + mountComponent({ + status: APPLICATION_STATUS.UPDATING, + updateSuccessful: true, + version: '1.2.3', + }); + + expect(updateDetails().text()).toBe('Updating'); + expect(versionEl().exists()).toBe(false); }); }); describe('Error block', () => { + const generalErrorMessage = () => wrapper.find('.js-cluster-application-general-error-message'); + describe('when nothing fails', () => { it('does not show error block', () => { - vm = mountComponent(ApplicationRow, { - ...DEFAULT_APPLICATION_STATE, - }); - const generalErrorMessage = vm.$el.querySelector( - '.js-cluster-application-general-error-message', - ); + mountComponent(); - expect(generalErrorMessage).toBeNull(); + expect(generalErrorMessage().exists()).toBe(false); }); }); @@ -420,8 +426,7 @@ describe('Application Row', () => { const requestReason = 'We broke the request 0.0'; beforeEach(() => { - vm = mountComponent(ApplicationRow, { - ...DEFAULT_APPLICATION_STATE, + mountComponent({ status: APPLICATION_STATUS.ERROR, statusReason, requestReason, @@ -430,37 +435,28 @@ describe('Application Row', () => { }); it('shows status reason if it is available', () => { - const statusErrorMessage = vm.$el.querySelector( - '.js-cluster-application-status-error-message', - ); + const statusErrorMessage = wrapper.find('.js-cluster-application-status-error-message'); - expect(statusErrorMessage.textContent.trim()).toEqual(statusReason); + expect(statusErrorMessage.text()).toEqual(statusReason); }); it('shows request reason if it is available', () => { - const requestErrorMessage = vm.$el.querySelector( - '.js-cluster-application-request-error-message', - ); + const requestErrorMessage = wrapper.find('.js-cluster-application-request-error-message'); - expect(requestErrorMessage.textContent.trim()).toEqual(requestReason); + expect(requestErrorMessage.text()).toEqual(requestReason); }); }); describe('when install fails', () => { beforeEach(() => { - vm = mountComponent(ApplicationRow, { - ...DEFAULT_APPLICATION_STATE, + mountComponent({ status: APPLICATION_STATUS.ERROR, installFailed: true, }); }); it('shows a general message indicating the installation failed', () => { - const generalErrorMessage = vm.$el.querySelector( - '.js-cluster-application-general-error-message', - ); - - expect(generalErrorMessage.textContent.trim()).toEqual( + expect(generalErrorMessage().text()).toEqual( `Something went wrong while installing ${DEFAULT_APPLICATION_STATE.title}`, ); }); @@ -468,19 +464,14 @@ describe('Application Row', () => { describe('when uninstall fails', () => { beforeEach(() => { - vm = mountComponent(ApplicationRow, { - ...DEFAULT_APPLICATION_STATE, + mountComponent({ status: APPLICATION_STATUS.ERROR, uninstallFailed: true, }); }); it('shows a general message indicating the uninstalling failed', () => { - const generalErrorMessage = vm.$el.querySelector( - '.js-cluster-application-general-error-message', - ); - - expect(generalErrorMessage.textContent.trim()).toEqual( + expect(generalErrorMessage().text()).toEqual( `Something went wrong while uninstalling ${DEFAULT_APPLICATION_STATE.title}`, ); }); diff --git a/spec/frontend/clusters/components/applications_spec.js b/spec/frontend/clusters/components/applications_spec.js index 33b30891d5e..7fc771201c1 100644 --- a/spec/frontend/clusters/components/applications_spec.js +++ b/spec/frontend/clusters/components/applications_spec.js @@ -1,174 +1,175 @@ -import Vue from 'vue'; -import mountComponent from 'helpers/vue_mount_component_helper'; -import { shallowMount } from '@vue/test-utils'; -import applications from '~/clusters/components/applications.vue'; -import { CLUSTER_TYPE } from '~/clusters/constants'; +import { shallowMount, mount } from '@vue/test-utils'; +import Applications from '~/clusters/components/applications.vue'; +import { CLUSTER_TYPE, PROVIDER_TYPE } from '~/clusters/constants'; import { APPLICATIONS_MOCK_STATE } from '../services/mock_data'; import eventHub from '~/clusters/event_hub'; +import ApplicationRow from '~/clusters/components/application_row.vue'; import KnativeDomainEditor from '~/clusters/components/knative_domain_editor.vue'; import CrossplaneProviderStack from '~/clusters/components/crossplane_provider_stack.vue'; import IngressModsecuritySettings from '~/clusters/components/ingress_modsecurity_settings.vue'; import FluentdOutputSettings from '~/clusters/components/fluentd_output_settings.vue'; describe('Applications', () => { - let vm; - let Applications; + let wrapper; beforeEach(() => { - Applications = Vue.extend(applications); - gon.features = gon.features || {}; gon.features.managedAppsLocalTiller = false; }); + const createApp = ({ applications, type } = {}, isShallow) => { + const mountMethod = isShallow ? shallowMount : mount; + + wrapper = mountMethod(Applications, { + stubs: { ApplicationRow }, + propsData: { + type, + applications: { ...APPLICATIONS_MOCK_STATE, ...applications }, + }, + }); + }; + + const createShallowApp = options => createApp(options, true); + const findByTestId = id => wrapper.find(`[data-testid="${id}"]`); afterEach(() => { - vm.$destroy(); + wrapper.destroy(); }); describe('Project cluster applications', () => { beforeEach(() => { - vm = mountComponent(Applications, { - applications: APPLICATIONS_MOCK_STATE, - type: CLUSTER_TYPE.PROJECT, - }); + createApp({ type: CLUSTER_TYPE.PROJECT }); }); it('renders a row for Helm Tiller', () => { - expect(vm.$el.querySelector('.js-cluster-application-row-helm')).not.toBeNull(); + expect(wrapper.find('.js-cluster-application-row-helm').exists()).toBe(true); }); it('renders a row for Ingress', () => { - expect(vm.$el.querySelector('.js-cluster-application-row-ingress')).not.toBeNull(); + expect(wrapper.find('.js-cluster-application-row-ingress').exists()).toBe(true); }); it('renders a row for Cert-Manager', () => { - expect(vm.$el.querySelector('.js-cluster-application-row-cert_manager')).not.toBeNull(); + expect(wrapper.find('.js-cluster-application-row-cert_manager').exists()).toBe(true); }); it('renders a row for Crossplane', () => { - expect(vm.$el.querySelector('.js-cluster-application-row-crossplane')).not.toBeNull(); + expect(wrapper.find('.js-cluster-application-row-crossplane').exists()).toBe(true); }); it('renders a row for Prometheus', () => { - expect(vm.$el.querySelector('.js-cluster-application-row-prometheus')).not.toBeNull(); + expect(wrapper.find('.js-cluster-application-row-prometheus').exists()).toBe(true); }); it('renders a row for GitLab Runner', () => { - expect(vm.$el.querySelector('.js-cluster-application-row-runner')).not.toBeNull(); + expect(wrapper.find('.js-cluster-application-row-runner').exists()).toBe(true); }); it('renders a row for Jupyter', () => { - expect(vm.$el.querySelector('.js-cluster-application-row-jupyter')).not.toBeNull(); + expect(wrapper.find('.js-cluster-application-row-jupyter').exists()).toBe(true); }); it('renders a row for Knative', () => { - expect(vm.$el.querySelector('.js-cluster-application-row-knative')).not.toBeNull(); + expect(wrapper.find('.js-cluster-application-row-knative').exists()).toBe(true); }); it('renders a row for Elastic Stack', () => { - expect(vm.$el.querySelector('.js-cluster-application-row-elastic_stack')).not.toBeNull(); + expect(wrapper.find('.js-cluster-application-row-elastic_stack').exists()).toBe(true); }); it('renders a row for Fluentd', () => { - expect(vm.$el.querySelector('.js-cluster-application-row-fluentd')).not.toBeNull(); + expect(wrapper.find('.js-cluster-application-row-fluentd').exists()).toBe(true); }); }); describe('Group cluster applications', () => { beforeEach(() => { - vm = mountComponent(Applications, { - type: CLUSTER_TYPE.GROUP, - applications: APPLICATIONS_MOCK_STATE, - }); + createApp({ type: CLUSTER_TYPE.GROUP }); }); it('renders a row for Helm Tiller', () => { - expect(vm.$el.querySelector('.js-cluster-application-row-helm')).not.toBeNull(); + expect(wrapper.find('.js-cluster-application-row-helm').exists()).toBe(true); }); it('renders a row for Ingress', () => { - expect(vm.$el.querySelector('.js-cluster-application-row-ingress')).not.toBeNull(); + expect(wrapper.find('.js-cluster-application-row-ingress').exists()).toBe(true); }); it('renders a row for Cert-Manager', () => { - expect(vm.$el.querySelector('.js-cluster-application-row-cert_manager')).not.toBeNull(); + expect(wrapper.find('.js-cluster-application-row-cert_manager').exists()).toBe(true); }); it('renders a row for Crossplane', () => { - expect(vm.$el.querySelector('.js-cluster-application-row-crossplane')).not.toBeNull(); + expect(wrapper.find('.js-cluster-application-row-crossplane').exists()).toBe(true); }); it('renders a row for Prometheus', () => { - expect(vm.$el.querySelector('.js-cluster-application-row-prometheus')).not.toBeNull(); + expect(wrapper.find('.js-cluster-application-row-prometheus').exists()).toBe(true); }); it('renders a row for GitLab Runner', () => { - expect(vm.$el.querySelector('.js-cluster-application-row-runner')).not.toBeNull(); + expect(wrapper.find('.js-cluster-application-row-runner').exists()).toBe(true); }); it('renders a row for Jupyter', () => { - expect(vm.$el.querySelector('.js-cluster-application-row-jupyter')).not.toBeNull(); + expect(wrapper.find('.js-cluster-application-row-jupyter').exists()).toBe(true); }); it('renders a row for Knative', () => { - expect(vm.$el.querySelector('.js-cluster-application-row-knative')).not.toBeNull(); + expect(wrapper.find('.js-cluster-application-row-knative').exists()).toBe(true); }); it('renders a row for Elastic Stack', () => { - expect(vm.$el.querySelector('.js-cluster-application-row-elastic_stack')).not.toBeNull(); + expect(wrapper.find('.js-cluster-application-row-elastic_stack').exists()).toBe(true); }); it('renders a row for Fluentd', () => { - expect(vm.$el.querySelector('.js-cluster-application-row-fluentd')).not.toBeNull(); + expect(wrapper.find('.js-cluster-application-row-fluentd').exists()).toBe(true); }); }); describe('Instance cluster applications', () => { beforeEach(() => { - vm = mountComponent(Applications, { - type: CLUSTER_TYPE.INSTANCE, - applications: APPLICATIONS_MOCK_STATE, - }); + createApp({ type: CLUSTER_TYPE.INSTANCE }); }); it('renders a row for Helm Tiller', () => { - expect(vm.$el.querySelector('.js-cluster-application-row-helm')).not.toBeNull(); + expect(wrapper.find('.js-cluster-application-row-helm').exists()).toBe(true); }); it('renders a row for Ingress', () => { - expect(vm.$el.querySelector('.js-cluster-application-row-ingress')).not.toBeNull(); + expect(wrapper.find('.js-cluster-application-row-ingress').exists()).toBe(true); }); it('renders a row for Cert-Manager', () => { - expect(vm.$el.querySelector('.js-cluster-application-row-cert_manager')).not.toBeNull(); + expect(wrapper.find('.js-cluster-application-row-cert_manager').exists()).toBe(true); }); it('renders a row for Crossplane', () => { - expect(vm.$el.querySelector('.js-cluster-application-row-crossplane')).not.toBeNull(); + expect(wrapper.find('.js-cluster-application-row-crossplane').exists()).toBe(true); }); it('renders a row for Prometheus', () => { - expect(vm.$el.querySelector('.js-cluster-application-row-prometheus')).not.toBeNull(); + expect(wrapper.find('.js-cluster-application-row-prometheus').exists()).toBe(true); }); it('renders a row for GitLab Runner', () => { - expect(vm.$el.querySelector('.js-cluster-application-row-runner')).not.toBeNull(); + expect(wrapper.find('.js-cluster-application-row-runner').exists()).toBe(true); }); it('renders a row for Jupyter', () => { - expect(vm.$el.querySelector('.js-cluster-application-row-jupyter')).not.toBeNull(); + expect(wrapper.find('.js-cluster-application-row-jupyter').exists()).toBe(true); }); it('renders a row for Knative', () => { - expect(vm.$el.querySelector('.js-cluster-application-row-knative')).not.toBeNull(); + expect(wrapper.find('.js-cluster-application-row-knative').exists()).toBe(true); }); it('renders a row for Elastic Stack', () => { - expect(vm.$el.querySelector('.js-cluster-application-row-elastic_stack')).not.toBeNull(); + expect(wrapper.find('.js-cluster-application-row-elastic_stack').exists()).toBe(true); }); it('renders a row for Fluentd', () => { - expect(vm.$el.querySelector('.js-cluster-application-row-fluentd')).not.toBeNull(); + expect(wrapper.find('.js-cluster-application-row-fluentd').exists()).toBe(true); }); }); @@ -179,20 +180,21 @@ describe('Applications', () => { }); it('does not render a row for Helm Tiller', () => { - vm = mountComponent(Applications, { - applications: APPLICATIONS_MOCK_STATE, - }); - - expect(vm.$el.querySelector('.js-cluster-application-row-helm')).toBeNull(); + createApp(); + expect(wrapper.find('.js-cluster-application-row-helm').exists()).toBe(false); }); }); }); describe('Ingress application', () => { + it('shows the correct warning message', () => { + createApp(); + expect(findByTestId('ingressCostWarning').element).toMatchSnapshot(); + }); + describe('with nested component', () => { const propsData = { applications: { - ...APPLICATIONS_MOCK_STATE, ingress: { title: 'Ingress', status: 'installed', @@ -200,13 +202,8 @@ describe('Applications', () => { }, }; - let wrapper; - beforeEach(() => { - wrapper = shallowMount(Applications, { propsData }); - }); - afterEach(() => { - wrapper.destroy(); - }); + beforeEach(() => createShallowApp(propsData)); + it('renders IngressModsecuritySettings', () => { const modsecuritySettings = wrapper.find(IngressModsecuritySettings); expect(modsecuritySettings.exists()).toBe(true); @@ -216,9 +213,8 @@ describe('Applications', () => { describe('when installed', () => { describe('with ip address', () => { it('renders ip address with a clipboard button', () => { - vm = mountComponent(Applications, { + createApp({ applications: { - ...APPLICATIONS_MOCK_STATE, ingress: { title: 'Ingress', status: 'installed', @@ -227,17 +223,16 @@ describe('Applications', () => { }, }); - expect(vm.$el.querySelector('.js-endpoint').value).toEqual('0.0.0.0'); - - expect( - vm.$el.querySelector('.js-clipboard-btn').getAttribute('data-clipboard-text'), - ).toEqual('0.0.0.0'); + expect(wrapper.find('.js-endpoint').element.value).toEqual('0.0.0.0'); + expect(wrapper.find('.js-clipboard-btn').attributes('data-clipboard-text')).toEqual( + '0.0.0.0', + ); }); }); describe('with hostname', () => { it('renders hostname with a clipboard button', () => { - vm = mountComponent(Applications, { + createApp({ applications: { ingress: { title: 'Ingress', @@ -257,19 +252,18 @@ describe('Applications', () => { }, }); - expect(vm.$el.querySelector('.js-endpoint').value).toEqual('localhost.localdomain'); + expect(wrapper.find('.js-endpoint').element.value).toEqual('localhost.localdomain'); - expect( - vm.$el.querySelector('.js-clipboard-btn').getAttribute('data-clipboard-text'), - ).toEqual('localhost.localdomain'); + expect(wrapper.find('.js-clipboard-btn').attributes('data-clipboard-text')).toEqual( + 'localhost.localdomain', + ); }); }); describe('without ip address', () => { it('renders an input text with a loading icon and an alert text', () => { - vm = mountComponent(Applications, { + createApp({ applications: { - ...APPLICATIONS_MOCK_STATE, ingress: { title: 'Ingress', status: 'installed', @@ -277,142 +271,139 @@ describe('Applications', () => { }, }); - expect(vm.$el.querySelector('.js-ingress-ip-loading-icon')).not.toBe(null); - expect(vm.$el.querySelector('.js-no-endpoint-message')).not.toBe(null); + expect(wrapper.find('.js-ingress-ip-loading-icon').exists()).toBe(true); + expect(wrapper.find('.js-no-endpoint-message').exists()).toBe(true); }); }); }); describe('before installing', () => { it('does not render the IP address', () => { - vm = mountComponent(Applications, { - applications: APPLICATIONS_MOCK_STATE, - }); + createApp(); - expect(vm.$el.textContent).not.toContain('Ingress IP Address'); - expect(vm.$el.querySelector('.js-endpoint')).toBe(null); + expect(wrapper.text()).not.toContain('Ingress IP Address'); + expect(wrapper.find('.js-endpoint').exists()).toBe(false); }); }); + }); - describe('Cert-Manager application', () => { - describe('when not installed', () => { - it('renders email & allows editing', () => { - vm = mountComponent(Applications, { - applications: { - ...APPLICATIONS_MOCK_STATE, - cert_manager: { - title: 'Cert-Manager', - email: 'before@example.com', - status: 'installable', - }, - }, - }); + describe('Cert-Manager application', () => { + it('shows the correct description', () => { + createApp(); + expect(findByTestId('certManagerDescription').element).toMatchSnapshot(); + }); - expect(vm.$el.querySelector('.js-email').value).toEqual('before@example.com'); - expect(vm.$el.querySelector('.js-email').getAttribute('readonly')).toBe(null); + describe('when not installed', () => { + it('renders email & allows editing', () => { + createApp({ + applications: { + cert_manager: { + title: 'Cert-Manager', + email: 'before@example.com', + status: 'installable', + }, + }, }); + + expect(wrapper.find('.js-email').element.value).toEqual('before@example.com'); + expect(wrapper.find('.js-email').attributes('readonly')).toBe(undefined); }); + }); - describe('when installed', () => { - it('renders email in readonly', () => { - vm = mountComponent(Applications, { - applications: { - ...APPLICATIONS_MOCK_STATE, - cert_manager: { - title: 'Cert-Manager', - email: 'after@example.com', - status: 'installed', - }, + describe('when installed', () => { + it('renders email in readonly', () => { + createApp({ + applications: { + cert_manager: { + title: 'Cert-Manager', + email: 'after@example.com', + status: 'installed', }, - }); - - expect(vm.$el.querySelector('.js-email').value).toEqual('after@example.com'); - expect(vm.$el.querySelector('.js-email').getAttribute('readonly')).toEqual('readonly'); + }, }); + + expect(wrapper.find('.js-email').element.value).toEqual('after@example.com'); + expect(wrapper.find('.js-email').attributes('readonly')).toEqual('readonly'); }); }); + }); - describe('Jupyter application', () => { - describe('with ingress installed with ip & jupyter installable', () => { - it('renders hostname active input', () => { - vm = mountComponent(Applications, { - applications: { - ...APPLICATIONS_MOCK_STATE, - ingress: { - title: 'Ingress', - status: 'installed', - externalIp: '1.1.1.1', - }, + describe('Jupyter application', () => { + describe('with ingress installed with ip & jupyter installable', () => { + it('renders hostname active input', () => { + createApp({ + applications: { + ingress: { + title: 'Ingress', + status: 'installed', + externalIp: '1.1.1.1', }, - }); - - expect( - vm.$el - .querySelector('.js-cluster-application-row-jupyter .js-hostname') - .getAttribute('readonly'), - ).toEqual(null); + }, }); - }); - describe('with ingress installed without external ip', () => { - it('does not render hostname input', () => { - vm = mountComponent(Applications, { - applications: { - ...APPLICATIONS_MOCK_STATE, - ingress: { title: 'Ingress', status: 'installed' }, - }, - }); + expect( + wrapper.find('.js-cluster-application-row-jupyter .js-hostname').attributes('readonly'), + ).toEqual(undefined); + }); + }); - expect(vm.$el.querySelector('.js-cluster-application-row-jupyter .js-hostname')).toBe( - null, - ); + describe('with ingress installed without external ip', () => { + it('does not render hostname input', () => { + createApp({ + applications: { + ingress: { title: 'Ingress', status: 'installed' }, + }, }); - }); - describe('with ingress & jupyter installed', () => { - it('renders readonly input', () => { - vm = mountComponent(Applications, { - applications: { - ...APPLICATIONS_MOCK_STATE, - ingress: { title: 'Ingress', status: 'installed', externalIp: '1.1.1.1' }, - jupyter: { title: 'JupyterHub', status: 'installed', hostname: '' }, - }, - }); + expect(wrapper.find('.js-cluster-application-row-jupyter .js-hostname').exists()).toBe( + false, + ); + }); + }); - expect( - vm.$el - .querySelector('.js-cluster-application-row-jupyter .js-hostname') - .getAttribute('readonly'), - ).toEqual('readonly'); + describe('with ingress & jupyter installed', () => { + it('renders readonly input', () => { + createApp({ + applications: { + ingress: { title: 'Ingress', status: 'installed', externalIp: '1.1.1.1' }, + jupyter: { title: 'JupyterHub', status: 'installed', hostname: '' }, + }, }); + + expect( + wrapper.find('.js-cluster-application-row-jupyter .js-hostname').attributes('readonly'), + ).toEqual('readonly'); }); + }); - describe('without ingress installed', () => { - beforeEach(() => { - vm = mountComponent(Applications, { - applications: APPLICATIONS_MOCK_STATE, - }); - }); + describe('without ingress installed', () => { + beforeEach(() => { + createApp(); + }); - it('does not render input', () => { - expect(vm.$el.querySelector('.js-cluster-application-row-jupyter .js-hostname')).toBe( - null, - ); - }); + it('does not render input', () => { + expect(wrapper.find('.js-cluster-application-row-jupyter .js-hostname').exists()).toBe( + false, + ); + }); - it('renders disabled install button', () => { - expect( - vm.$el - .querySelector( - '.js-cluster-application-row-jupyter .js-cluster-application-install-button', - ) - .getAttribute('disabled'), - ).toEqual('disabled'); - }); + it('renders disabled install button', () => { + expect( + wrapper + .find('.js-cluster-application-row-jupyter .js-cluster-application-install-button') + .attributes('disabled'), + ).toEqual('disabled'); }); }); }); + describe('Prometheus application', () => { + it('shows the correct description', () => { + createApp(); + expect(findByTestId('prometheusDescription').element).toMatchSnapshot(); + }); + }); + describe('Knative application', () => { const availableDomain = { id: 4, @@ -420,7 +411,6 @@ describe('Applications', () => { }; const propsData = { applications: { - ...APPLICATIONS_MOCK_STATE, knative: { title: 'Knative', hostname: 'example.com', @@ -432,18 +422,25 @@ describe('Applications', () => { }, }, }; - let wrapper; let knativeDomainEditor; beforeEach(() => { - wrapper = shallowMount(Applications, { propsData }); + createShallowApp(propsData); jest.spyOn(eventHub, '$emit'); knativeDomainEditor = wrapper.find(KnativeDomainEditor); }); - afterEach(() => { - wrapper.destroy(); + it('shows the correct description', async () => { + createApp(); + wrapper.setProps({ + providerType: PROVIDER_TYPE.GCP, + preInstalledKnative: true, + }); + + await wrapper.vm.$nextTick(); + + expect(findByTestId('installedVia').element).toMatchSnapshot(); }); it('emits saveKnativeDomain event when knative domain editor emits save event', () => { @@ -492,7 +489,6 @@ describe('Applications', () => { describe('Crossplane application', () => { const propsData = { applications: { - ...APPLICATIONS_MOCK_STATE, crossplane: { title: 'Crossplane', stack: { @@ -502,74 +498,58 @@ describe('Applications', () => { }, }; - let wrapper; - beforeEach(() => { - wrapper = shallowMount(Applications, { propsData }); - }); - afterEach(() => { - wrapper.destroy(); - }); + beforeEach(() => createShallowApp(propsData)); + it('renders the correct Component', () => { const crossplane = wrapper.find(CrossplaneProviderStack); expect(crossplane.exists()).toBe(true); }); + + it('shows the correct description', () => { + createApp(); + expect(findByTestId('crossplaneDescription').element).toMatchSnapshot(); + }); }); describe('Elastic Stack application', () => { describe('with elastic stack installable', () => { it('renders hostname active input', () => { - vm = mountComponent(Applications, { - applications: { - ...APPLICATIONS_MOCK_STATE, - }, - }); + createApp(); expect( - vm.$el - .querySelector( + wrapper + .find( '.js-cluster-application-row-elastic_stack .js-cluster-application-install-button', ) - .getAttribute('disabled'), + .attributes('disabled'), ).toEqual('disabled'); }); }); describe('elastic stack installed', () => { it('renders uninstall button', () => { - vm = mountComponent(Applications, { + createApp({ applications: { - ...APPLICATIONS_MOCK_STATE, elastic_stack: { title: 'Elastic Stack', status: 'installed' }, }, }); expect( - vm.$el - .querySelector( + wrapper + .find( '.js-cluster-application-row-elastic_stack .js-cluster-application-install-button', ) - .getAttribute('disabled'), + .attributes('disabled'), ).toEqual('disabled'); }); }); }); describe('Fluentd application', () => { - const propsData = { - applications: { - ...APPLICATIONS_MOCK_STATE, - }, - }; + beforeEach(() => createShallowApp()); - let wrapper; - beforeEach(() => { - wrapper = shallowMount(Applications, { propsData }); - }); - afterEach(() => { - wrapper.destroy(); - }); it('renders the correct Component', () => { - expect(wrapper.contains(FluentdOutputSettings)).toBe(true); + expect(wrapper.find(FluentdOutputSettings).exists()).toBe(true); }); }); }); diff --git a/spec/frontend/clusters/components/fluentd_output_settings_spec.js b/spec/frontend/clusters/components/fluentd_output_settings_spec.js index 5e27cc49049..f03f2535947 100644 --- a/spec/frontend/clusters/components/fluentd_output_settings_spec.js +++ b/spec/frontend/clusters/components/fluentd_output_settings_spec.js @@ -70,12 +70,12 @@ describe('FluentdOutputSettings', () => { }); describe.each` - desc | changeFn | key | value - ${'when protocol dropdown is triggered'} | ${() => changeProtocol(1)} | ${'protocol'} | ${'udp'} - ${'when host is changed'} | ${() => changeHost('test-host')} | ${'host'} | ${'test-host'} - ${'when port is changed'} | ${() => changePort(123)} | ${'port'} | ${123} - ${'when wafLogEnabled changes'} | ${() => changeCheckbox(findCheckbox('Send ModSecurity Logs'))} | ${'wafLogEnabled'} | ${!defaultSettings.wafLogEnabled} - ${'when ciliumLogEnabled changes'} | ${() => changeCheckbox(findCheckbox('Send Cilium Logs'))} | ${'ciliumLogEnabled'} | ${!defaultSettings.ciliumLogEnabled} + desc | changeFn | key | value + ${'when protocol dropdown is triggered'} | ${() => changeProtocol(1)} | ${'protocol'} | ${'udp'} + ${'when host is changed'} | ${() => changeHost('test-host')} | ${'host'} | ${'test-host'} + ${'when port is changed'} | ${() => changePort(123)} | ${'port'} | ${123} + ${'when wafLogEnabled changes'} | ${() => changeCheckbox(findCheckbox('Send Web Application Firewall Logs'))} | ${'wafLogEnabled'} | ${!defaultSettings.wafLogEnabled} + ${'when ciliumLogEnabled changes'} | ${() => changeCheckbox(findCheckbox('Send Container Network Policies Logs'))} | ${'ciliumLogEnabled'} | ${!defaultSettings.ciliumLogEnabled} `('$desc', ({ changeFn, key, value }) => { beforeEach(() => { changeFn(); diff --git a/spec/frontend/clusters/components/update_application_confirmation_modal_spec.js b/spec/frontend/clusters/components/update_application_confirmation_modal_spec.js new file mode 100644 index 00000000000..dd3aaf6f946 --- /dev/null +++ b/spec/frontend/clusters/components/update_application_confirmation_modal_spec.js @@ -0,0 +1,52 @@ +import { shallowMount } from '@vue/test-utils'; +import { GlModal } from '@gitlab/ui'; +import UpdateApplicationConfirmationModal from '~/clusters/components/update_application_confirmation_modal.vue'; +import { ELASTIC_STACK } from '~/clusters/constants'; + +describe('UpdateApplicationConfirmationModal', () => { + let wrapper; + const appTitle = 'Elastic stack'; + + const createComponent = (props = {}) => { + wrapper = shallowMount(UpdateApplicationConfirmationModal, { + propsData: { ...props }, + }); + }; + + afterEach(() => { + wrapper.destroy(); + }); + + beforeEach(() => { + createComponent({ application: ELASTIC_STACK, applicationTitle: appTitle }); + }); + + it(`renders a modal with a title "Update ${appTitle}"`, () => { + expect(wrapper.find(GlModal).attributes('title')).toEqual(`Update ${appTitle}`); + }); + + it(`renders a modal with an ok button labeled "Update ${appTitle}"`, () => { + expect(wrapper.find(GlModal).attributes('ok-title')).toEqual(`Update ${appTitle}`); + }); + + describe('when ok button is clicked', () => { + beforeEach(() => { + wrapper.find(GlModal).vm.$emit('ok'); + }); + + it('emits confirm event', () => + wrapper.vm.$nextTick().then(() => { + expect(wrapper.emitted('confirm')).toBeTruthy(); + })); + + it('displays a warning text indicating the app will be updated', () => { + expect(wrapper.text()).toContain(`You are about to update ${appTitle} on your cluster.`); + }); + + it('displays a custom warning text depending on the application', () => { + expect(wrapper.text()).toContain( + `Your Elasticsearch cluster will be re-created during this upgrade. Your logs will be re-indexed, and you will lose historical logs from hosts terminated in the last 30 days.`, + ); + }); + }); +}); diff --git a/spec/frontend/clusters_list/components/clusters_spec.js b/spec/frontend/clusters_list/components/clusters_spec.js index e2d2e4b73b3..07faee7e50b 100644 --- a/spec/frontend/clusters_list/components/clusters_spec.js +++ b/spec/frontend/clusters_list/components/clusters_spec.js @@ -5,6 +5,7 @@ import MockAdapter from 'axios-mock-adapter'; import { apiData } from '../mock_data'; import { mount } from '@vue/test-utils'; import { GlLoadingIcon, GlTable, GlPagination } from '@gitlab/ui'; +import * as Sentry from '@sentry/browser'; describe('Clusters', () => { let mock; @@ -13,6 +14,13 @@ describe('Clusters', () => { const endpoint = 'some/endpoint'; + const entryData = { + endpoint, + imgTagsAwsText: 'AWS Icon', + imgTagsDefaultText: 'Default Icon', + imgTagsGcpText: 'GCP Icon', + }; + const findLoader = () => wrapper.find(GlLoadingIcon); const findPaginatedButtons = () => wrapper.find(GlPagination); const findTable = () => wrapper.find(GlTable); @@ -23,18 +31,26 @@ describe('Clusters', () => { }; const mountWrapper = () => { - store = ClusterStore({ endpoint }); + store = ClusterStore(entryData); wrapper = mount(Clusters, { store }); return axios.waitForAll(); }; + const paginationHeader = (total = apiData.clusters.length, perPage = 20, currentPage = 1) => { + return { + 'x-total': total, + 'x-per-page': perPage, + 'x-page': currentPage, + }; + }; + + let captureException; + beforeEach(() => { + captureException = jest.spyOn(Sentry, 'captureException'); + mock = new MockAdapter(axios); - mockPollingApi(200, apiData, { - 'x-total': apiData.clusters.length, - 'x-per-page': 20, - 'x-page': 1, - }); + mockPollingApi(200, apiData, paginationHeader()); return mountWrapper(); }); @@ -42,6 +58,7 @@ describe('Clusters', () => { afterEach(() => { wrapper.destroy(); mock.restore(); + captureException.mockRestore(); }); describe('clusters table', () => { @@ -77,25 +94,108 @@ describe('Clusters', () => { }); }); + describe('cluster icon', () => { + it.each` + providerText | lineNumber + ${'GCP Icon'} | ${0} + ${'AWS Icon'} | ${1} + ${'Default Icon'} | ${2} + ${'Default Icon'} | ${3} + ${'Default Icon'} | ${4} + ${'Default Icon'} | ${5} + `('renders provider image and alt text for each cluster', ({ providerText, lineNumber }) => { + const images = findTable().findAll('.js-status img'); + const image = images.at(lineNumber); + + expect(image.attributes('alt')).toBe(providerText); + }); + }); + describe('cluster status', () => { it.each` - statusName | className | lineNumber - ${'disabled'} | ${'disabled'} | ${0} - ${'unreachable'} | ${'bg-danger'} | ${1} - ${'authentication_failure'} | ${'bg-warning'} | ${2} - ${'deleting'} | ${null} | ${3} - ${'created'} | ${'bg-success'} | ${4} - ${'default'} | ${'bg-white'} | ${5} - `('renders a status for each cluster', ({ statusName, className, lineNumber }) => { - const statuses = findStatuses(); - const status = statuses.at(lineNumber); - if (statusName !== 'deleting') { - const statusIndicator = status.find('.cluster-status-indicator'); - expect(statusIndicator.exists()).toBe(true); - expect(statusIndicator.classes()).toContain(className); - } else { - expect(status.find(GlLoadingIcon).exists()).toBe(true); - } + statusName | lineNumber | result + ${'creating'} | ${0} | ${true} + ${null} | ${1} | ${false} + ${null} | ${2} | ${false} + ${'deleting'} | ${3} | ${true} + ${null} | ${4} | ${false} + ${null} | ${5} | ${false} + `( + 'renders $result when status=$statusName and lineNumber=$lineNumber', + ({ lineNumber, result }) => { + const statuses = findStatuses(); + const status = statuses.at(lineNumber); + expect(status.find(GlLoadingIcon).exists()).toBe(result); + }, + ); + }); + + describe('nodes present', () => { + it.each` + nodeSize | lineNumber + ${'Unknown'} | ${0} + ${'1'} | ${1} + ${'2'} | ${2} + ${'1'} | ${3} + ${'1'} | ${4} + ${'Unknown'} | ${5} + `('renders node size for each cluster', ({ nodeSize, lineNumber }) => { + const sizes = findTable().findAll('td:nth-child(3)'); + const size = sizes.at(lineNumber); + + expect(size.text()).toBe(nodeSize); + }); + + describe('nodes with unknown quantity', () => { + it('notifies Sentry about all missing quantity types', () => { + expect(captureException).toHaveBeenCalledTimes(8); + }); + + it('notifies Sentry about CPU missing quantity types', () => { + const missingCpuTypeError = new Error('UnknownK8sCpuQuantity:1missingCpuUnit'); + + expect(captureException).toHaveBeenCalledWith(missingCpuTypeError); + }); + + it('notifies Sentry about Memory missing quantity types', () => { + const missingMemoryTypeError = new Error('UnknownK8sMemoryQuantity:1missingMemoryUnit'); + + expect(captureException).toHaveBeenCalledWith(missingMemoryTypeError); + }); + }); + }); + + describe('cluster CPU', () => { + it.each` + clusterCpu | lineNumber + ${''} | ${0} + ${'1.93 (87% free)'} | ${1} + ${'3.87 (86% free)'} | ${2} + ${'(% free)'} | ${3} + ${'(% free)'} | ${4} + ${''} | ${5} + `('renders total cpu for each cluster', ({ clusterCpu, lineNumber }) => { + const clusterCpus = findTable().findAll('td:nth-child(4)'); + const cpuData = clusterCpus.at(lineNumber); + + expect(cpuData.text()).toBe(clusterCpu); + }); + }); + + describe('cluster Memory', () => { + it.each` + clusterMemory | lineNumber + ${''} | ${0} + ${'5.92 (78% free)'} | ${1} + ${'12.86 (79% free)'} | ${2} + ${'(% free)'} | ${3} + ${'(% free)'} | ${4} + ${''} | ${5} + `('renders total memory for each cluster', ({ clusterMemory, lineNumber }) => { + const clusterMemories = findTable().findAll('td:nth-child(5)'); + const memoryData = clusterMemories.at(lineNumber); + + expect(memoryData.text()).toBe(clusterMemory); }); }); @@ -105,11 +205,7 @@ describe('Clusters', () => { const totalSecondPage = 500; beforeEach(() => { - mockPollingApi(200, apiData, { - 'x-total': totalFirstPage, - 'x-per-page': perPage, - 'x-page': 1, - }); + mockPollingApi(200, apiData, paginationHeader(totalFirstPage, perPage, 1)); return mountWrapper(); }); @@ -123,11 +219,7 @@ describe('Clusters', () => { describe('when updating currentPage', () => { beforeEach(() => { - mockPollingApi(200, apiData, { - 'x-total': totalSecondPage, - 'x-per-page': perPage, - 'x-page': 2, - }); + mockPollingApi(200, apiData, paginationHeader(totalSecondPage, perPage, 2)); wrapper.setData({ currentPage: 2 }); return axios.waitForAll(); }); diff --git a/spec/frontend/clusters_list/mock_data.js b/spec/frontend/clusters_list/mock_data.js index 9a90a378f31..48af3b91c94 100644 --- a/spec/frontend/clusters_list/mock_data.js +++ b/spec/frontend/clusters_list/mock_data.js @@ -1,57 +1,70 @@ export const clusterList = [ { name: 'My Cluster 1', - environmentScope: '*', - size: '3', - clusterType: 'group_type', - status: 'disabled', - cpu: '6 (100% free)', - memory: '22.50 (30% free)', + environment_scope: '*', + cluster_type: 'group_type', + provider_type: 'gcp', + status: 'creating', + nodes: null, }, { name: 'My Cluster 2', - environmentScope: 'development', - size: '12', - clusterType: 'project_type', + environment_scope: 'development', + cluster_type: 'project_type', + provider_type: 'aws', status: 'unreachable', - cpu: '3 (50% free)', - memory: '11 (60% free)', + nodes: [ + { + status: { allocatable: { cpu: '1930m', memory: '5777156Ki' } }, + usage: { cpu: '246155922n', memory: '1255212Ki' }, + }, + ], }, { name: 'My Cluster 3', - environmentScope: 'development', - size: '12', - clusterType: 'project_type', + environment_scope: 'development', + cluster_type: 'project_type', + provider_type: 'none', status: 'authentication_failure', - cpu: '1 (0% free)', - memory: '22 (33% free)', + nodes: [ + { + status: { allocatable: { cpu: '1930m', memory: '5777156Ki' } }, + usage: { cpu: '246155922n', memory: '1255212Ki' }, + }, + { + status: { allocatable: { cpu: '1940m', memory: '6777156Ki' } }, + usage: { cpu: '307051934n', memory: '1379136Ki' }, + }, + ], }, { name: 'My Cluster 4', - environmentScope: 'production', - size: '12', - clusterType: 'project_type', + environment_scope: 'production', + cluster_type: 'project_type', status: 'deleting', - cpu: '6 (100% free)', - memory: '45 (15% free)', + nodes: [ + { + status: { allocatable: { cpu: '1missingCpuUnit', memory: '1missingMemoryUnit' } }, + usage: { cpu: '1missingCpuUnit', memory: '1missingMemoryUnit' }, + }, + ], }, { name: 'My Cluster 5', - environmentScope: 'development', - size: '12', - clusterType: 'project_type', + environment_scope: 'development', + cluster_type: 'project_type', status: 'created', - cpu: '6 (100% free)', - memory: '20.12 (35% free)', + nodes: [ + { + status: { allocatable: { cpu: '1missingCpuUnit', memory: '1missingMemoryUnit' } }, + }, + ], }, { name: 'My Cluster 6', - environmentScope: '*', - size: '1', - clusterType: 'project_type', + environment_scope: '*', + cluster_type: 'project_type', status: 'cleanup_ongoing', - cpu: '6 (100% free)', - memory: '20.12 (35% free)', }, ]; diff --git a/spec/frontend/clusters_list/store/actions_spec.js b/spec/frontend/clusters_list/store/actions_spec.js index 70766af3ec4..74e351a3704 100644 --- a/spec/frontend/clusters_list/store/actions_spec.js +++ b/spec/frontend/clusters_list/store/actions_spec.js @@ -1,10 +1,14 @@ import MockAdapter from 'axios-mock-adapter'; +import Poll from '~/lib/utils/poll'; import flashError from '~/flash'; import testAction from 'helpers/vuex_action_helper'; import axios from '~/lib/utils/axios_utils'; +import waitForPromises from 'helpers/wait_for_promises'; import { apiData } from '../mock_data'; +import { MAX_REQUESTS } from '~/clusters_list/constants'; import * as types from '~/clusters_list/store/mutation_types'; import * as actions from '~/clusters_list/store/actions'; +import * as Sentry from '@sentry/browser'; jest.mock('~/flash.js'); @@ -12,6 +16,24 @@ describe('Clusters store actions', () => { describe('fetchClusters', () => { let mock; + const headers = { + 'x-next-page': 1, + 'x-total': apiData.clusters.length, + 'x-total-pages': 1, + 'x-per-page': 20, + 'x-page': 1, + 'x-prev-page': 1, + }; + + const paginationInformation = { + nextPage: 1, + page: 1, + perPage: 20, + previousPage: 1, + total: apiData.clusters.length, + totalPages: 1, + }; + beforeEach(() => { mock = new MockAdapter(axios); }); @@ -19,21 +41,6 @@ describe('Clusters store actions', () => { afterEach(() => mock.restore()); it('should commit SET_CLUSTERS_DATA with received response', done => { - const headers = { - 'x-total': apiData.clusters.length, - 'x-per-page': 20, - 'x-page': 1, - }; - - const paginationInformation = { - nextPage: NaN, - page: 1, - perPage: 20, - previousPage: NaN, - total: apiData.clusters.length, - totalPages: NaN, - }; - mock.onGet().reply(200, apiData, headers); testAction( @@ -52,9 +59,110 @@ describe('Clusters store actions', () => { it('should show flash on API error', done => { mock.onGet().reply(400, 'Not Found'); - testAction(actions.fetchClusters, { endpoint: apiData.endpoint }, {}, [], [], () => { - expect(flashError).toHaveBeenCalledWith(expect.stringMatching('error')); - done(); + testAction( + actions.fetchClusters, + { endpoint: apiData.endpoint }, + {}, + [{ type: types.SET_LOADING_STATE, payload: false }], + [], + () => { + expect(flashError).toHaveBeenCalledWith(expect.stringMatching('error')); + done(); + }, + ); + }); + + describe('multiple api requests', () => { + let captureException; + let pollRequest; + let pollStop; + + const pollInterval = 10; + const pollHeaders = { 'poll-interval': pollInterval, ...headers }; + + beforeEach(() => { + captureException = jest.spyOn(Sentry, 'captureException'); + pollRequest = jest.spyOn(Poll.prototype, 'makeRequest'); + pollStop = jest.spyOn(Poll.prototype, 'stop'); + + mock.onGet().reply(200, apiData, pollHeaders); + }); + + afterEach(() => { + captureException.mockRestore(); + pollRequest.mockRestore(); + pollStop.mockRestore(); + }); + + it('should stop polling after MAX Requests', done => { + testAction( + actions.fetchClusters, + { endpoint: apiData.endpoint }, + {}, + [ + { type: types.SET_CLUSTERS_DATA, payload: { data: apiData, paginationInformation } }, + { type: types.SET_LOADING_STATE, payload: false }, + ], + [], + () => { + expect(pollRequest).toHaveBeenCalledTimes(1); + expect(pollStop).toHaveBeenCalledTimes(0); + jest.advanceTimersByTime(pollInterval); + + waitForPromises() + .then(() => { + expect(pollRequest).toHaveBeenCalledTimes(2); + expect(pollStop).toHaveBeenCalledTimes(0); + jest.advanceTimersByTime(pollInterval); + }) + .then(() => waitForPromises()) + .then(() => { + expect(pollRequest).toHaveBeenCalledTimes(MAX_REQUESTS); + expect(pollStop).toHaveBeenCalledTimes(0); + jest.advanceTimersByTime(pollInterval); + }) + .then(() => waitForPromises()) + .then(() => { + expect(pollRequest).toHaveBeenCalledTimes(MAX_REQUESTS + 1); + // Stops poll once it exceeds the MAX_REQUESTS limit + expect(pollStop).toHaveBeenCalledTimes(1); + jest.advanceTimersByTime(pollInterval); + }) + .then(() => waitForPromises()) + .then(() => { + // Additional poll requests are not made once pollStop is called + expect(pollRequest).toHaveBeenCalledTimes(MAX_REQUESTS + 1); + expect(pollStop).toHaveBeenCalledTimes(1); + }) + .then(done) + .catch(done.fail); + }, + ); + }); + + it('should stop polling and report to Sentry when data is invalid', done => { + const badApiResponse = { clusters: {} }; + mock.onGet().reply(200, badApiResponse, pollHeaders); + + testAction( + actions.fetchClusters, + { endpoint: apiData.endpoint }, + {}, + [ + { + type: types.SET_CLUSTERS_DATA, + payload: { data: badApiResponse, paginationInformation }, + }, + { type: types.SET_LOADING_STATE, payload: false }, + ], + [], + () => { + expect(pollRequest).toHaveBeenCalledTimes(1); + expect(pollStop).toHaveBeenCalledTimes(1); + expect(captureException).toHaveBeenCalledTimes(1); + done(); + }, + ); }); }); }); diff --git a/spec/frontend/code_navigation/components/__snapshots__/popover_spec.js.snap b/spec/frontend/code_navigation/components/__snapshots__/popover_spec.js.snap index c9fdd388585..7079ddfc2ab 100644 --- a/spec/frontend/code_navigation/components/__snapshots__/popover_spec.js.snap +++ b/spec/frontend/code_navigation/components/__snapshots__/popover_spec.js.snap @@ -16,7 +16,27 @@ exports[`Code navigation popover component renders popover 1`] = ` <pre class="border-0 bg-transparent m-0 code highlight" > - console.log + <span + class="line" + lang="javascript" + > + <span + class="k" + > + function + </span> + <span> + main() { + </span> + </span> + <span + class="line" + lang="javascript" + > + <span> + } + </span> + </span> </pre> </div> diff --git a/spec/frontend/code_navigation/components/popover_spec.js b/spec/frontend/code_navigation/components/popover_spec.js index 858e94cf155..b3f814f1be4 100644 --- a/spec/frontend/code_navigation/components/popover_spec.js +++ b/spec/frontend/code_navigation/components/popover_spec.js @@ -1,5 +1,6 @@ import { shallowMount } from '@vue/test-utils'; import Popover from '~/code_navigation/components/popover.vue'; +import DocLine from '~/code_navigation/components/doc_line.vue'; const DEFINITION_PATH_PREFIX = 'http://gitlab.com'; @@ -7,7 +8,22 @@ const MOCK_CODE_DATA = Object.freeze({ hover: [ { language: 'javascript', - value: 'console.log', + tokens: [ + [ + { + class: 'k', + value: 'function', + }, + { + value: ' main() {', + }, + ], + [ + { + value: '}', + }, + ], + ], }, ], definition_path: 'test.js#L20', @@ -28,6 +44,7 @@ let wrapper; function factory({ position, data, definitionPathPrefix, blobPath = 'index.js' }) { wrapper = shallowMount(Popover, { propsData: { position, data, definitionPathPrefix, blobPath }, + stubs: { DocLine }, }); } diff --git a/spec/frontend/collapsed_sidebar_todo_spec.js b/spec/frontend/collapsed_sidebar_todo_spec.js new file mode 100644 index 00000000000..0ea797ce4b3 --- /dev/null +++ b/spec/frontend/collapsed_sidebar_todo_spec.js @@ -0,0 +1,172 @@ +/* eslint-disable no-new */ +import { clone } from 'lodash'; +import MockAdapter from 'axios-mock-adapter'; +import axios from '~/lib/utils/axios_utils'; +import Sidebar from '~/right_sidebar'; +import waitForPromises from './helpers/wait_for_promises'; +import { TEST_HOST } from 'spec/test_constants'; + +describe('Issuable right sidebar collapsed todo toggle', () => { + const fixtureName = 'issues/open-issue.html'; + const jsonFixtureName = 'todos/todos.json'; + let mock; + + preloadFixtures(fixtureName); + preloadFixtures(jsonFixtureName); + + beforeEach(() => { + const todoData = getJSONFixture(jsonFixtureName); + new Sidebar(); + loadFixtures(fixtureName); + + document.querySelector('.js-right-sidebar').classList.toggle('right-sidebar-expanded'); + document.querySelector('.js-right-sidebar').classList.toggle('right-sidebar-collapsed'); + + mock = new MockAdapter(axios); + + mock.onPost(`${TEST_HOST}/frontend-fixtures/issues-project/todos`).reply(() => { + const response = clone(todoData); + + return [200, response]; + }); + + mock.onDelete(/(.*)\/dashboard\/todos\/\d+$/).reply(() => { + const response = clone(todoData); + delete response.delete_path; + + return [200, response]; + }); + }); + + afterEach(() => { + mock.restore(); + }); + + it('shows add todo button', () => { + expect(document.querySelector('.js-issuable-todo.sidebar-collapsed-icon')).not.toBeNull(); + + expect( + document + .querySelector('.js-issuable-todo.sidebar-collapsed-icon svg use') + .getAttribute('xlink:href'), + ).toContain('todo-add'); + + expect( + document.querySelector('.js-issuable-todo.sidebar-collapsed-icon .todo-undone'), + ).toBeNull(); + }); + + it('sets default tooltip title', () => { + expect( + document.querySelector('.js-issuable-todo.sidebar-collapsed-icon').getAttribute('title'), + ).toBe('Add a To Do'); + }); + + it('toggle todo state', done => { + document.querySelector('.js-issuable-todo.sidebar-collapsed-icon').click(); + + setImmediate(() => { + expect( + document.querySelector('.js-issuable-todo.sidebar-collapsed-icon .todo-undone'), + ).not.toBeNull(); + + expect( + document + .querySelector('.js-issuable-todo.sidebar-collapsed-icon svg.todo-undone use') + .getAttribute('xlink:href'), + ).toContain('todo-done'); + + done(); + }); + }); + + it('toggle todo state of expanded todo toggle', done => { + document.querySelector('.js-issuable-todo.sidebar-collapsed-icon').click(); + + setImmediate(() => { + expect( + document.querySelector('.issuable-sidebar-header .js-issuable-todo').textContent.trim(), + ).toBe('Mark as done'); + + done(); + }); + }); + + it('toggles todo button tooltip', done => { + document.querySelector('.js-issuable-todo.sidebar-collapsed-icon').click(); + + setImmediate(() => { + expect( + document + .querySelector('.js-issuable-todo.sidebar-collapsed-icon') + .getAttribute('data-original-title'), + ).toBe('Mark as done'); + + done(); + }); + }); + + it('marks todo as done', done => { + document.querySelector('.js-issuable-todo.sidebar-collapsed-icon').click(); + + waitForPromises() + .then(() => { + expect( + document.querySelector('.js-issuable-todo.sidebar-collapsed-icon .todo-undone'), + ).not.toBeNull(); + + document.querySelector('.js-issuable-todo.sidebar-collapsed-icon').click(); + }) + .then(waitForPromises) + .then(() => { + expect( + document.querySelector('.js-issuable-todo.sidebar-collapsed-icon .todo-undone'), + ).toBeNull(); + + expect( + document.querySelector('.issuable-sidebar-header .js-issuable-todo').textContent.trim(), + ).toBe('Add a To Do'); + }) + .then(done) + .catch(done.fail); + }); + + it('updates aria-label to Mark as done', done => { + document.querySelector('.js-issuable-todo.sidebar-collapsed-icon').click(); + + setImmediate(() => { + expect( + document + .querySelector('.js-issuable-todo.sidebar-collapsed-icon') + .getAttribute('aria-label'), + ).toBe('Mark as done'); + + done(); + }); + }); + + it('updates aria-label to add todo', done => { + document.querySelector('.js-issuable-todo.sidebar-collapsed-icon').click(); + + waitForPromises() + .then(() => { + expect( + document + .querySelector('.js-issuable-todo.sidebar-collapsed-icon') + .getAttribute('aria-label'), + ).toBe('Mark as done'); + + document.querySelector('.js-issuable-todo.sidebar-collapsed-icon').click(); + }) + .then(waitForPromises) + .then(() => { + expect( + document + .querySelector('.js-issuable-todo.sidebar-collapsed-icon') + .getAttribute('aria-label'), + ).toBe('Add a To Do'); + }) + .then(done) + .catch(done.fail); + }); +}); diff --git a/spec/frontend/comment_type_toggle_spec.js b/spec/frontend/comment_type_toggle_spec.js new file mode 100644 index 00000000000..06dbfac1803 --- /dev/null +++ b/spec/frontend/comment_type_toggle_spec.js @@ -0,0 +1,169 @@ +import CommentTypeToggle from '~/comment_type_toggle'; +import DropLab from '~/droplab/drop_lab'; +import InputSetter from '~/droplab/plugins/input_setter'; + +describe('CommentTypeToggle', () => { + const testContext = {}; + + describe('class constructor', () => { + beforeEach(() => { + testContext.dropdownTrigger = {}; + testContext.dropdownList = {}; + testContext.noteTypeInput = {}; + testContext.submitButton = {}; + testContext.closeButton = {}; + + testContext.commentTypeToggle = new CommentTypeToggle({ + dropdownTrigger: testContext.dropdownTrigger, + dropdownList: testContext.dropdownList, + noteTypeInput: testContext.noteTypeInput, + submitButton: testContext.submitButton, + closeButton: testContext.closeButton, + }); + }); + + it('should set .dropdownTrigger', () => { + expect(testContext.commentTypeToggle.dropdownTrigger).toBe(testContext.dropdownTrigger); + }); + + it('should set .dropdownList', () => { + expect(testContext.commentTypeToggle.dropdownList).toBe(testContext.dropdownList); + }); + + it('should set .noteTypeInput', () => { + expect(testContext.commentTypeToggle.noteTypeInput).toBe(testContext.noteTypeInput); + }); + + it('should set .submitButton', () => { + expect(testContext.commentTypeToggle.submitButton).toBe(testContext.submitButton); + }); + + it('should set .closeButton', () => { + expect(testContext.commentTypeToggle.closeButton).toBe(testContext.closeButton); + }); + + it('should set .reopenButton', () => { + expect(testContext.commentTypeToggle.reopenButton).toBe(testContext.reopenButton); + }); + }); + + describe('initDroplab', () => { + beforeEach(() => { + testContext.commentTypeToggle = { + dropdownTrigger: {}, + dropdownList: {}, + noteTypeInput: {}, + submitButton: {}, + closeButton: {}, + setConfig: () => {}, + }; + testContext.config = {}; + + jest.spyOn(DropLab.prototype, 'init').mockImplementation(); + jest.spyOn(DropLab.prototype, 'constructor').mockImplementation(); + + jest.spyOn(testContext.commentTypeToggle, 'setConfig').mockReturnValue(testContext.config); + + CommentTypeToggle.prototype.initDroplab.call(testContext.commentTypeToggle); + }); + + it('should instantiate a DropLab instance and set .droplab', () => { + expect(testContext.commentTypeToggle.droplab instanceof DropLab).toBe(true); + }); + + it('should call .setConfig', () => { + expect(testContext.commentTypeToggle.setConfig).toHaveBeenCalled(); + }); + + it('should call DropLab.prototype.init', () => { + expect(DropLab.prototype.init).toHaveBeenCalledWith( + testContext.commentTypeToggle.dropdownTrigger, + testContext.commentTypeToggle.dropdownList, + [InputSetter], + testContext.config, + ); + }); + }); + + describe('setConfig', () => { + describe('if no .closeButton is provided', () => { + beforeEach(() => { + testContext.commentTypeToggle = { + dropdownTrigger: {}, + dropdownList: {}, + noteTypeInput: {}, + submitButton: {}, + reopenButton: {}, + }; + + testContext.setConfig = CommentTypeToggle.prototype.setConfig.call( + testContext.commentTypeToggle, + ); + }); + + it('should not add .closeButton related InputSetter config', () => { + expect(testContext.setConfig).toEqual({ + InputSetter: [ + { + input: testContext.commentTypeToggle.noteTypeInput, + valueAttribute: 'data-value', + }, + { + input: testContext.commentTypeToggle.submitButton, + valueAttribute: 'data-submit-text', + }, + { + input: testContext.commentTypeToggle.reopenButton, + valueAttribute: 'data-reopen-text', + }, + { + input: testContext.commentTypeToggle.reopenButton, + valueAttribute: 'data-reopen-text', + inputAttribute: 'data-alternative-text', + }, + ], + }); + }); + }); + + describe('if no .reopenButton is provided', () => { + beforeEach(() => { + testContext.commentTypeToggle = { + dropdownTrigger: {}, + dropdownList: {}, + noteTypeInput: {}, + submitButton: {}, + closeButton: {}, + }; + + testContext.setConfig = CommentTypeToggle.prototype.setConfig.call( + testContext.commentTypeToggle, + ); + }); + + it('should not add .reopenButton related InputSetter config', () => { + expect(testContext.setConfig).toEqual({ + InputSetter: [ + { + input: testContext.commentTypeToggle.noteTypeInput, + valueAttribute: 'data-value', + }, + { + input: testContext.commentTypeToggle.submitButton, + valueAttribute: 'data-submit-text', + }, + { + input: testContext.commentTypeToggle.closeButton, + valueAttribute: 'data-close-text', + }, + { + input: testContext.commentTypeToggle.closeButton, + valueAttribute: 'data-close-text', + inputAttribute: 'data-alternative-text', + }, + ], + }); + }); + }); + }); +}); diff --git a/spec/frontend/confirm_modal_spec.js b/spec/frontend/confirm_modal_spec.js index 89cfc3ef3a3..b14d1c3e01d 100644 --- a/spec/frontend/confirm_modal_spec.js +++ b/spec/frontend/confirm_modal_spec.js @@ -51,7 +51,7 @@ describe('ConfirmModal', () => { const findModalOkButton = (modal, variant) => modal.querySelector(`.modal-footer .btn-${variant}`); const findModalCancelButton = modal => modal.querySelector('.modal-footer .btn-secondary'); - const modalIsHidden = () => findModal().getAttribute('aria-hidden') === 'true'; + const modalIsHidden = () => findModal() === null; const serializeModal = (modal, buttonIndex) => { const { modalAttributes } = buttons[buttonIndex]; @@ -101,7 +101,9 @@ describe('ConfirmModal', () => { }); it('closes the modal', () => { - expect(modalIsHidden()).toBe(true); + setImmediate(() => { + expect(modalIsHidden()).toBe(true); + }); }); }); }); diff --git a/spec/frontend/contributors/component/__snapshots__/contributors_spec.js.snap b/spec/frontend/contributors/component/__snapshots__/contributors_spec.js.snap index fafffcb6e0c..a5eb42e0f08 100644 --- a/spec/frontend/contributors/component/__snapshots__/contributors_spec.js.snap +++ b/spec/frontend/contributors/component/__snapshots__/contributors_spec.js.snap @@ -20,7 +20,10 @@ exports[`Contributors charts should render charts when loading completed and the height="264" includelegendavgmax="true" legendaveragetext="Avg" + legendcurrenttext="Current" + legendlayout="inline" legendmaxtext="Max" + legendmintext="Min" option="[object Object]" thresholds="" width="0" @@ -48,7 +51,10 @@ exports[`Contributors charts should render charts when loading completed and the height="216" includelegendavgmax="true" legendaveragetext="Avg" + legendcurrenttext="Current" + legendlayout="inline" legendmaxtext="Max" + legendmintext="Min" option="[object Object]" thresholds="" width="0" diff --git a/spec/frontend/create_cluster/eks_cluster/store/actions_spec.js b/spec/frontend/create_cluster/eks_cluster/store/actions_spec.js index 1139f094705..01f7ada9cd6 100644 --- a/spec/frontend/create_cluster/eks_cluster/store/actions_spec.js +++ b/spec/frontend/create_cluster/eks_cluster/store/actions_spec.js @@ -1,4 +1,5 @@ import testAction from 'helpers/vuex_action_helper'; +import { useMockLocationHelper } from 'helpers/mock_window_location_helper'; import MockAdapter from 'axios-mock-adapter'; import createState from '~/create_cluster/eks_cluster/store/state'; import * as actions from '~/create_cluster/eks_cluster/store/actions'; @@ -251,12 +252,7 @@ describe('EKS Cluster Store Actions', () => { }); describe('createClusterSuccess', () => { - beforeEach(() => { - jest.spyOn(window.location, 'assign').mockImplementation(() => {}); - }); - afterEach(() => { - window.location.assign.mockRestore(); - }); + useMockLocationHelper(); it('redirects to the new cluster URL', () => { actions.createClusterSuccess(null, newClusterUrl); diff --git a/spec/frontend/design_management/components/__snapshots__/design_note_pin_spec.js.snap b/spec/frontend/design_management/components/__snapshots__/design_note_pin_spec.js.snap index 4828e8cb3c2..4c848256e5b 100644 --- a/spec/frontend/design_management/components/__snapshots__/design_note_pin_spec.js.snap +++ b/spec/frontend/design_management/components/__snapshots__/design_note_pin_spec.js.snap @@ -1,9 +1,9 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Design discussions component should match the snapshot of note when repositioning 1`] = ` +exports[`Design note pin component should match the snapshot of note when repositioning 1`] = ` <button aria-label="Comment form position" - class="position-absolute btn-transparent comment-indicator" + class="design-pin gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center btn-transparent comment-indicator" style="left: 10px; top: 10px; cursor: move;" type="button" > @@ -14,10 +14,10 @@ exports[`Design discussions component should match the snapshot of note when rep </button> `; -exports[`Design discussions component should match the snapshot of note with index 1`] = ` +exports[`Design note pin component should match the snapshot of note with index 1`] = ` <button aria-label="Comment '1' position" - class="position-absolute js-image-badge badge badge-pill" + class="design-pin gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center js-image-badge badge badge-pill" style="left: 10px; top: 10px;" type="button" > @@ -27,10 +27,10 @@ exports[`Design discussions component should match the snapshot of note with ind </button> `; -exports[`Design discussions component should match the snapshot of note without index 1`] = ` +exports[`Design note pin component should match the snapshot of note without index 1`] = ` <button aria-label="Comment form position" - class="position-absolute btn-transparent comment-indicator" + class="design-pin gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center btn-transparent comment-indicator" style="left: 10px; top: 10px;" type="button" > diff --git a/spec/frontend/design_management/components/design_note_pin_spec.js b/spec/frontend/design_management/components/design_note_pin_spec.js index 4f7260b1363..4e045b58a35 100644 --- a/spec/frontend/design_management/components/design_note_pin_spec.js +++ b/spec/frontend/design_management/components/design_note_pin_spec.js @@ -1,7 +1,7 @@ import { shallowMount } from '@vue/test-utils'; import DesignNotePin from '~/design_management/components/design_note_pin.vue'; -describe('Design discussions component', () => { +describe('Design note pin component', () => { let wrapper; function createComponent(propsData = {}) { @@ -26,7 +26,7 @@ describe('Design discussions component', () => { }); it('should match the snapshot of note with index', () => { - createComponent({ label: '1' }); + createComponent({ label: 1 }); expect(wrapper.element).toMatchSnapshot(); }); diff --git a/spec/frontend/design_management/components/design_notes/__snapshots__/design_note_spec.js.snap b/spec/frontend/design_management/components/design_notes/__snapshots__/design_note_spec.js.snap index e071274cc81..b55bacb6fc5 100644 --- a/spec/frontend/design_management/components/design_notes/__snapshots__/design_note_spec.js.snap +++ b/spec/frontend/design_management/components/design_notes/__snapshots__/design_note_spec.js.snap @@ -50,12 +50,18 @@ exports[`Design note component should match the snapshot 1`] = ` </span> </div> - <!----> + <div + class="gl-display-flex" + > + + <!----> + </div> </div> <div class="note-text js-note-text md" data-qa-selector="note_content" /> + </timeline-entry-item-stub> `; diff --git a/spec/frontend/design_management/components/design_notes/design_discussion_spec.js b/spec/frontend/design_management/components/design_notes/design_discussion_spec.js index b16b26ff82f..557f53e864f 100644 --- a/spec/frontend/design_management/components/design_notes/design_discussion_spec.js +++ b/spec/frontend/design_management/components/design_notes/design_discussion_spec.js @@ -1,16 +1,33 @@ -import { shallowMount } from '@vue/test-utils'; -import { ApolloMutation } from 'vue-apollo'; +import { mount } from '@vue/test-utils'; +import { GlLoadingIcon } from '@gitlab/ui'; +import notes from '../../mock_data/notes'; import DesignDiscussion from '~/design_management/components/design_notes/design_discussion.vue'; import DesignNote from '~/design_management/components/design_notes/design_note.vue'; import DesignReplyForm from '~/design_management/components/design_notes/design_reply_form.vue'; import createNoteMutation from '~/design_management/graphql/mutations/createNote.mutation.graphql'; +import toggleResolveDiscussionMutation from '~/design_management/graphql/mutations/toggle_resolve_discussion.mutation.graphql'; import ReplyPlaceholder from '~/notes/components/discussion_reply_placeholder.vue'; +import ToggleRepliesWidget from '~/design_management/components/design_notes/toggle_replies_widget.vue'; + +const discussion = { + id: '0', + resolved: false, + resolvable: true, + notes, +}; describe('Design discussions component', () => { let wrapper; + const findDesignNotes = () => wrapper.findAll(DesignNote); const findReplyPlaceholder = () => wrapper.find(ReplyPlaceholder); const findReplyForm = () => wrapper.find(DesignReplyForm); + const findRepliesWidget = () => wrapper.find(ToggleRepliesWidget); + const findResolveButton = () => wrapper.find('[data-testid="resolve-button"]'); + const findResolveIcon = () => wrapper.find('[data-testid="resolve-icon"]'); + const findResolvedMessage = () => wrapper.find('[data-testid="resolved-message"]'); + const findResolveLoadingIcon = () => wrapper.find(GlLoadingIcon); + const findResolveCheckbox = () => wrapper.find('[data-testid="resolve-checkbox"]'); const mutationVariables = { mutation: createNoteMutation, @@ -29,22 +46,14 @@ describe('Design discussions component', () => { }; function createComponent(props = {}, data = {}) { - wrapper = shallowMount(DesignDiscussion, { + wrapper = mount(DesignDiscussion, { propsData: { - discussion: { - id: '0', - notes: [ - { - id: '1', - }, - { - id: '2', - }, - ], - }, + resolvedDiscussionsExpanded: true, + discussion, noteableId: 'noteable-id', designId: 'design-id', discussionIndex: 1, + discussionWithOpenForm: '', ...props, }, data() { @@ -52,11 +61,12 @@ describe('Design discussions component', () => { ...data, }; }, - stubs: { - ReplyPlaceholder, - ApolloMutation, + mocks: { + $apollo, + $route: { + hash: '#note_1', + }, }, - mocks: { $apollo }, }); } @@ -64,19 +74,147 @@ describe('Design discussions component', () => { wrapper.destroy(); }); - it('renders correct amount of discussion notes', () => { - createComponent(); - expect(wrapper.findAll(DesignNote)).toHaveLength(2); + describe('when discussion is not resolvable', () => { + beforeEach(() => { + createComponent({ + discussion: { + ...discussion, + resolvable: false, + }, + }); + }); + + it('does not render an icon to resolve a thread', () => { + expect(findResolveIcon().exists()).toBe(false); + }); + + it('does not render a checkbox in reply form', () => { + findReplyPlaceholder().vm.$emit('onMouseDown'); + + return wrapper.vm.$nextTick().then(() => { + expect(findResolveCheckbox().exists()).toBe(false); + }); + }); }); - it('renders reply placeholder by default', () => { - createComponent(); - expect(findReplyPlaceholder().exists()).toBe(true); + describe('when discussion is unresolved', () => { + beforeEach(() => { + createComponent(); + }); + + it('renders correct amount of discussion notes', () => { + expect(findDesignNotes()).toHaveLength(2); + expect(findDesignNotes().wrappers.every(w => w.isVisible())).toBe(true); + }); + + it('renders reply placeholder', () => { + expect(findReplyPlaceholder().isVisible()).toBe(true); + }); + + it('does not render toggle replies widget', () => { + expect(findRepliesWidget().exists()).toBe(false); + }); + + it('renders a correct icon to resolve a thread', () => { + expect(findResolveIcon().props('name')).toBe('check-circle'); + }); + + it('renders a checkbox with Resolve thread text in reply form', () => { + findReplyPlaceholder().vm.$emit('onClick'); + wrapper.setProps({ discussionWithOpenForm: discussion.id }); + + return wrapper.vm.$nextTick().then(() => { + expect(findResolveCheckbox().text()).toBe('Resolve thread'); + }); + }); + + it('does not render resolved message', () => { + expect(findResolvedMessage().exists()).toBe(false); + }); + }); + + describe('when discussion is resolved', () => { + beforeEach(() => { + createComponent({ + discussion: { + ...discussion, + resolved: true, + resolvedBy: notes[0].author, + resolvedAt: '2020-05-08T07:10:45Z', + }, + }); + }); + + it('shows only the first note', () => { + expect( + findDesignNotes() + .at(0) + .isVisible(), + ).toBe(true); + expect( + findDesignNotes() + .at(1) + .isVisible(), + ).toBe(false); + }); + + it('renders resolved message', () => { + expect(findResolvedMessage().exists()).toBe(true); + }); + + it('does not show renders reply placeholder', () => { + expect(findReplyPlaceholder().isVisible()).toBe(false); + }); + + it('renders toggle replies widget with correct props', () => { + expect(findRepliesWidget().exists()).toBe(true); + expect(findRepliesWidget().props()).toEqual({ + collapsed: true, + replies: notes.slice(1), + }); + }); + + it('renders a correct icon to resolve a thread', () => { + expect(findResolveIcon().props('name')).toBe('check-circle-filled'); + }); + + describe('when replies are expanded', () => { + beforeEach(() => { + findRepliesWidget().vm.$emit('toggle'); + return wrapper.vm.$nextTick(); + }); + + it('renders replies widget with collapsed prop equal to false', () => { + expect(findRepliesWidget().props('collapsed')).toBe(false); + }); + + it('renders the second note', () => { + expect( + findDesignNotes() + .at(1) + .isVisible(), + ).toBe(true); + }); + + it('renders a reply placeholder', () => { + expect(findReplyPlaceholder().isVisible()).toBe(true); + }); + + it('renders a checkbox with Unresolve thread text in reply form', () => { + findReplyPlaceholder().vm.$emit('onClick'); + wrapper.setProps({ discussionWithOpenForm: discussion.id }); + + return wrapper.vm.$nextTick().then(() => { + expect(findResolveCheckbox().text()).toBe('Unresolve thread'); + }); + }); + }); }); it('hides reply placeholder and opens form on placeholder click', () => { createComponent(); - findReplyPlaceholder().trigger('click'); + findReplyPlaceholder().vm.$emit('onClick'); + wrapper.setProps({ discussionWithOpenForm: discussion.id }); return wrapper.vm.$nextTick().then(() => { expect(findReplyPlaceholder().exists()).toBe(false); @@ -85,7 +223,10 @@ describe('Design discussions component', () => { }); it('calls mutation on submitting form and closes the form', () => { - createComponent({}, { discussionComment: 'test', isFormRendered: true }); + createComponent( + { discussionWithOpenForm: discussion.id }, + { discussionComment: 'test', isFormRendered: true }, + ); findReplyForm().vm.$emit('submitForm'); expect(mutate).toHaveBeenCalledWith(mutationVariables); @@ -100,7 +241,10 @@ describe('Design discussions component', () => { }); it('clears the discussion comment on closing comment form', () => { - createComponent({}, { discussionComment: 'test', isFormRendered: true }); + createComponent( + { discussionWithOpenForm: discussion.id }, + { discussionComment: 'test', isFormRendered: true }, + ); return wrapper.vm .$nextTick() @@ -120,7 +264,7 @@ describe('Design discussions component', () => { {}, { activeDiscussion: { - id: '1', + id: notes[0].id, source: 'pin', }, }, @@ -130,4 +274,45 @@ describe('Design discussions component', () => { true, ); }); + + it('calls toggleResolveDiscussion mutation on resolve thread button click', () => { + createComponent(); + findResolveButton().trigger('click'); + expect(mutate).toHaveBeenCalledWith({ + mutation: toggleResolveDiscussionMutation, + variables: { + id: discussion.id, + resolve: true, + }, + }); + return wrapper.vm.$nextTick(() => { + expect(findResolveLoadingIcon().exists()).toBe(true); + }); + }); + + it('calls toggleResolveDiscussion mutation after adding a note if checkbox was checked', () => { + createComponent( + { discussionWithOpenForm: discussion.id }, + { discussionComment: 'test', isFormRendered: true }, + ); + findResolveButton().trigger('click'); + findReplyForm().vm.$emit('submitForm'); + + return mutate().then(() => { + expect(mutate).toHaveBeenCalledWith({ + mutation: toggleResolveDiscussionMutation, + variables: { + id: discussion.id, + resolve: true, + }, + }); + }); + }); + + it('emits openForm event on opening the form', () => { + createComponent(); + findReplyPlaceholder().vm.$emit('onClick'); + + expect(wrapper.emitted('openForm')).toBeTruthy(); + }); }); diff --git a/spec/frontend/design_management/components/design_notes/design_reply_form_spec.js b/spec/frontend/design_management/components/design_notes/design_reply_form_spec.js index 34b8f1f9fa8..16b34f150b8 100644 --- a/spec/frontend/design_management/components/design_notes/design_reply_form_spec.js +++ b/spec/frontend/design_management/components/design_notes/design_reply_form_spec.js @@ -18,7 +18,7 @@ describe('Design reply form component', () => { const findCancelButton = () => wrapper.find({ ref: 'cancelButton' }); const findModal = () => wrapper.find({ ref: 'cancelCommentModal' }); - function createComponent(props = {}) { + function createComponent(props = {}, mountOptions = {}) { wrapper = mount(DesignReplyForm, { propsData: { value: '', @@ -26,6 +26,7 @@ describe('Design reply form component', () => { ...props, }, stubs: { GlModal }, + ...mountOptions, }); } @@ -34,7 +35,8 @@ describe('Design reply form component', () => { }); it('textarea has focus after component mount', () => { - createComponent(); + // We need to attach to document, so that `document.activeElement` is properly set in jsdom + createComponent({}, { attachToDocument: true }); expect(findTextarea().element).toEqual(document.activeElement); }); diff --git a/spec/frontend/design_management/components/design_notes/toggle_replies_widget_spec.js b/spec/frontend/design_management/components/design_notes/toggle_replies_widget_spec.js new file mode 100644 index 00000000000..7eda294d2d3 --- /dev/null +++ b/spec/frontend/design_management/components/design_notes/toggle_replies_widget_spec.js @@ -0,0 +1,98 @@ +import { shallowMount } from '@vue/test-utils'; +import { GlIcon, GlButton, GlLink } from '@gitlab/ui'; +import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue'; +import ToggleRepliesWidget from '~/design_management/components/design_notes/toggle_replies_widget.vue'; +import notes from '../../mock_data/notes'; + +describe('Toggle replies widget component', () => { + let wrapper; + + const findToggleWrapper = () => wrapper.find('[data-testid="toggle-comments-wrapper"]'); + const findIcon = () => wrapper.find(GlIcon); + const findButton = () => wrapper.find(GlButton); + const findAuthorLink = () => wrapper.find(GlLink); + const findTimeAgo = () => wrapper.find(TimeAgoTooltip); + + function createComponent(props = {}) { + wrapper = shallowMount(ToggleRepliesWidget, { + propsData: { + collapsed: true, + replies: notes, + ...props, + }, + }); + } + + afterEach(() => { + wrapper.destroy(); + }); + + describe('when replies are collapsed', () => { + beforeEach(() => { + createComponent(); + }); + + it('should not have expanded class', () => { + expect(findToggleWrapper().classes()).not.toContain('expanded'); + }); + + it('should render chevron-right icon', () => { + expect(findIcon().props('name')).toBe('chevron-right'); + }); + + it('should have replies length on button', () => { + expect(findButton().text()).toBe('2 replies'); + }); + + it('should render a link to the last reply author', () => { + expect(findAuthorLink().exists()).toBe(true); + expect(findAuthorLink().text()).toBe(notes[1].author.name); + expect(findAuthorLink().attributes('href')).toBe(notes[1].author.webUrl); + }); + + it('should render correct time ago tooltip', () => { + expect(findTimeAgo().exists()).toBe(true); + expect(findTimeAgo().props('time')).toBe(notes[1].createdAt); + }); + }); + + describe('when replies are expanded', () => { + beforeEach(() => { + createComponent({ collapsed: false }); + }); + + it('should have expanded class', () => { + expect(findToggleWrapper().classes()).toContain('expanded'); + }); + + it('should render chevron-down icon', () => { + expect(findIcon().props('name')).toBe('chevron-down'); + }); + + it('should have Collapse replies text on button', () => { + expect(findButton().text()).toBe('Collapse replies'); + }); + + it('should not have a link to the last reply author', () => { + expect(findAuthorLink().exists()).toBe(false); + }); + + it('should not render time ago tooltip', () => { + expect(findTimeAgo().exists()).toBe(false); + }); + }); + + it('should emit toggle event on icon click', () => { + createComponent(); + findIcon().vm.$emit('click', new MouseEvent('click')); + + expect(wrapper.emitted('toggle')).toHaveLength(1); + }); + + it('should emit toggle event on button click', () => { + createComponent(); + findButton().vm.$emit('click', new MouseEvent('click')); + + expect(wrapper.emitted('toggle')).toHaveLength(1); + }); +}); diff --git a/spec/frontend/design_management/components/design_overlay_spec.js b/spec/frontend/design_management/components/design_overlay_spec.js index 1c9b130aca6..f243323b162 100644 --- a/spec/frontend/design_management/components/design_overlay_spec.js +++ b/spec/frontend/design_management/components/design_overlay_spec.js @@ -10,16 +10,6 @@ describe('Design overlay component', () => { let wrapper; const mockDimensions = { width: 100, height: 100 }; - const mockNoteNotAuthorised = { - id: 'note-not-authorised', - discussion: { id: 'discussion-not-authorised' }, - position: { - x: 1, - y: 80, - ...mockDimensions, - }, - userPermissions: {}, - }; const findOverlay = () => wrapper.find('.image-diff-overlay'); const findAllNotes = () => wrapper.findAll('.js-image-badge'); @@ -43,6 +33,7 @@ describe('Design overlay component', () => { top: '0', left: '0', }, + resolvedDiscussionsExpanded: false, ...props, }, data() { @@ -88,19 +79,46 @@ describe('Design overlay component', () => { }); describe('with notes', () => { - beforeEach(() => { + it('should render only the first note', () => { createComponent({ notes, }); + expect(findAllNotes()).toHaveLength(1); }); - it('should render a correct amount of notes', () => { - expect(findAllNotes()).toHaveLength(notes.length); - }); + describe('with resolved discussions toggle expanded', () => { + beforeEach(() => { + createComponent({ + notes, + resolvedDiscussionsExpanded: true, + }); + }); + + it('should render all notes', () => { + expect(findAllNotes()).toHaveLength(notes.length); + }); + + it('should have set the correct position for each note badge', () => { + expect(findFirstBadge().attributes().style).toBe('left: 10px; top: 15px;'); + expect(findSecondBadge().attributes().style).toBe('left: 50px; top: 50px;'); + }); + + it('should apply resolved class to the resolved note pin', () => { + expect(findSecondBadge().classes()).toContain('resolved'); + }); + + it('when there is an active discussion, should apply inactive class to all pins besides the active one', () => { + wrapper.setData({ + activeDiscussion: { + id: notes[0].id, + source: 'discussion', + }, + }); - it('should have a correct style for each note badge', () => { - expect(findFirstBadge().attributes().style).toBe('left: 10px; top: 15px;'); - expect(findSecondBadge().attributes().style).toBe('left: 50px; top: 50px;'); + return wrapper.vm.$nextTick().then(() => { + expect(findSecondBadge().classes()).toContain('inactive'); + }); + }); }); it('should recalculate badges positions on window resize', () => { @@ -144,19 +162,6 @@ describe('Design overlay component', () => { expect(mutate).toHaveBeenCalledWith(mutationVariables); }); }); - - it('when there is an active discussion, should apply inactive class to all pins besides the active one', () => { - wrapper.setData({ - activeDiscussion: { - id: notes[0].id, - source: 'discussion', - }, - }); - - return wrapper.vm.$nextTick().then(() => { - expect(findSecondBadge().classes()).toContain('inactive'); - }); - }); }); describe('when moving notes', () => { @@ -213,20 +218,32 @@ describe('Design overlay component', () => { }); }); - it('should do nothing if [adminNote] permission is not present', () => { - createComponent({ - dimensions: mockDimensions, - notes: [mockNoteNotAuthorised], - }); + describe('without [adminNote] permission', () => { + const mockNoteNotAuthorised = { + ...notes[0], + userPermissions: { + adminNote: false, + }, + }; - const badge = findAllNotes().at(0); - return clickAndDragBadge( - badge, - { x: mockNoteNotAuthorised.x, y: mockNoteNotAuthorised.y }, - { x: 20, y: 20 }, - ).then(() => { - expect(wrapper.vm.movingNoteStartPosition).toBeNull(); - expect(findFirstBadge().attributes().style).toBe('left: 1px; top: 80px;'); + const mockNoteCoordinates = { + x: mockNoteNotAuthorised.position.x, + y: mockNoteNotAuthorised.position.y, + }; + + it('should be unable to move a note', () => { + createComponent({ + dimensions: mockDimensions, + notes: [mockNoteNotAuthorised], + }); + + const badge = findAllNotes().at(0); + return clickAndDragBadge(badge, { ...mockNoteCoordinates }, { x: 20, y: 20 }).then(() => { + // note position should not change after a click-and-drag attempt + expect(findFirstBadge().attributes().style).toContain( + `left: ${mockNoteCoordinates.x}px; top: ${mockNoteCoordinates.y}px;`, + ); + }); }); }); }); diff --git a/spec/frontend/design_management/components/design_presentation_spec.js b/spec/frontend/design_management/components/design_presentation_spec.js index 8a709393d92..7e513182589 100644 --- a/spec/frontend/design_management/components/design_presentation_spec.js +++ b/spec/frontend/design_management/components/design_presentation_spec.js @@ -17,7 +17,13 @@ describe('Design management design presentation component', () => { let wrapper; function createComponent( - { image, imageName, discussions = [], isAnnotating = false } = {}, + { + image, + imageName, + discussions = [], + isAnnotating = false, + resolvedDiscussionsExpanded = false, + } = {}, data = {}, stubs = {}, ) { @@ -27,6 +33,7 @@ describe('Design management design presentation component', () => { imageName, discussions, isAnnotating, + resolvedDiscussionsExpanded, }, stubs, }); diff --git a/spec/frontend/design_management/components/design_sidebar_spec.js b/spec/frontend/design_management/components/design_sidebar_spec.js new file mode 100644 index 00000000000..e098e7de867 --- /dev/null +++ b/spec/frontend/design_management/components/design_sidebar_spec.js @@ -0,0 +1,236 @@ +import { shallowMount } from '@vue/test-utils'; +import { GlCollapse, GlPopover } from '@gitlab/ui'; +import Cookies from 'js-cookie'; +import DesignSidebar from '~/design_management/components/design_sidebar.vue'; +import Participants from '~/sidebar/components/participants/participants.vue'; +import DesignDiscussion from '~/design_management/components/design_notes/design_discussion.vue'; +import design from '../mock_data/design'; +import updateActiveDiscussionMutation from '~/design_management/graphql/mutations/update_active_discussion.mutation.graphql'; + +const updateActiveDiscussionMutationVariables = { + mutation: updateActiveDiscussionMutation, + variables: { + id: design.discussions.nodes[0].notes.nodes[0].id, + source: 'discussion', + }, +}; + +const $route = { + params: { + id: '1', + }, +}; + +const cookieKey = 'hide_design_resolved_comments_popover'; + +const mutate = jest.fn().mockResolvedValue(); + +describe('Design management design sidebar component', () => { + let wrapper; + + const findDiscussions = () => wrapper.findAll(DesignDiscussion); + const findFirstDiscussion = () => findDiscussions().at(0); + const findUnresolvedDiscussions = () => wrapper.findAll('[data-testid="unresolved-discussion"]'); + const findResolvedDiscussions = () => wrapper.findAll('[data-testid="resolved-discussion"]'); + const findParticipants = () => wrapper.find(Participants); + const findCollapsible = () => wrapper.find(GlCollapse); + const findToggleResolvedCommentsButton = () => wrapper.find('[data-testid="resolved-comments"]'); + const findPopover = () => wrapper.find(GlPopover); + const findNewDiscussionDisclaimer = () => + wrapper.find('[data-testid="new-discussion-disclaimer"]'); + + function createComponent(props = {}) { + wrapper = shallowMount(DesignSidebar, { + propsData: { + design, + resolvedDiscussionsExpanded: false, + markdownPreviewPath: '', + ...props, + }, + mocks: { + $route, + $apollo: { + mutate, + }, + }, + }); + } + + afterEach(() => { + wrapper.destroy(); + }); + + it('renders participants', () => { + createComponent(); + + expect(findParticipants().exists()).toBe(true); + }); + + it('passes the correct amount of participants to the Participants component', () => { + createComponent(); + + expect(findParticipants().props('participants')).toHaveLength(1); + }); + + describe('when has no discussions', () => { + beforeEach(() => { + createComponent({ + design: { + ...design, + discussions: { + nodes: [], + }, + }, + }); + }); + + it('does not render discussions', () => { + expect(findDiscussions().exists()).toBe(false); + }); + + it('renders a message about possibility to create a new discussion', () => { + expect(findNewDiscussionDisclaimer().exists()).toBe(true); + }); + }); + + describe('when has discussions', () => { + beforeEach(() => { + Cookies.set(cookieKey, true); + createComponent(); + }); + + it('renders correct amount of unresolved discussions', () => { + expect(findUnresolvedDiscussions()).toHaveLength(1); + }); + + it('renders correct amount of resolved discussions', () => { + expect(findResolvedDiscussions()).toHaveLength(1); + }); + + it('has resolved comments collapsible collapsed', () => { + expect(findCollapsible().attributes('visible')).toBeUndefined(); + }); + + it('emits toggleResolveComments event on resolve comments button click', () => { + findToggleResolvedCommentsButton().vm.$emit('click'); + expect(wrapper.emitted('toggleResolvedComments')).toHaveLength(1); + }); + + it('opens a collapsible when resolvedDiscussionsExpanded prop changes to true', () => { + expect(findCollapsible().attributes('visible')).toBeUndefined(); + wrapper.setProps({ + resolvedDiscussionsExpanded: true, + }); + return wrapper.vm.$nextTick().then(() => { + expect(findCollapsible().attributes('visible')).toBe('true'); + }); + }); + + it('does not popover about resolved comments', () => { + expect(findPopover().exists()).toBe(false); + }); + + it('sends a mutation to set an active discussion when clicking on a discussion', () => { + findFirstDiscussion().trigger('click'); + + expect(mutate).toHaveBeenCalledWith(updateActiveDiscussionMutationVariables); + }); + + it('sends a mutation to reset an active discussion when clicking outside of discussion', () => { + wrapper.trigger('click'); + + expect(mutate).toHaveBeenCalledWith({ + ...updateActiveDiscussionMutationVariables, + variables: { id: undefined, source: 'discussion' }, + }); + }); + + it('emits correct event on discussion create note error', () => { + findFirstDiscussion().vm.$emit('createNoteError', 'payload'); + expect(wrapper.emitted('onDesignDiscussionError')).toEqual([['payload']]); + }); + + it('emits correct event on discussion update note error', () => { + findFirstDiscussion().vm.$emit('updateNoteError', 'payload'); + expect(wrapper.emitted('updateNoteError')).toEqual([['payload']]); + }); + + it('emits correct event on discussion resolve error', () => { + findFirstDiscussion().vm.$emit('resolveDiscussionError', 'payload'); + expect(wrapper.emitted('resolveDiscussionError')).toEqual([['payload']]); + }); + + it('changes prop correctly on opening discussion form', () => { + findFirstDiscussion().vm.$emit('openForm', 'some-id'); + + return wrapper.vm.$nextTick().then(() => { + expect(findFirstDiscussion().props('discussionWithOpenForm')).toBe('some-id'); + }); + }); + }); + + describe('when all discussions are resolved', () => { + beforeEach(() => { + createComponent({ + design: { + ...design, + discussions: { + nodes: [ + { + id: 'discussion-id', + replyId: 'discussion-reply-id', + resolved: true, + notes: { + nodes: [ + { + id: 'note-id', + body: '123', + author: { + name: 'Administrator', + username: 'root', + webUrl: 'link-to-author', + avatarUrl: 'link-to-avatar', + }, + }, + ], + }, + }, + ], + }, + }, + }); + }); + + it('renders a message about possibility to create a new discussion', () => { + expect(findNewDiscussionDisclaimer().exists()).toBe(true); + }); + + it('does not render unresolved discussions', () => { + expect(findUnresolvedDiscussions()).toHaveLength(0); + }); + }); + + describe('when showing resolved discussions for the first time', () => { + beforeEach(() => { + Cookies.set(cookieKey, false); + createComponent(); + }); + + it('renders a popover if we show resolved comments collapsible for the first time', () => { + expect(findPopover().exists()).toBe(true); + }); + + it('dismisses a popover on the outside click', () => { + wrapper.trigger('click'); + return wrapper.vm.$nextTick(() => { + expect(findPopover().exists()).toBe(false); + }); + }); + + it(`sets a ${cookieKey} cookie on clicking outside the popover`, () => { + jest.spyOn(Cookies, 'set'); + wrapper.trigger('click'); + expect(Cookies.set).toHaveBeenCalledWith(cookieKey, 'true', { expires: 365 * 10 }); + }); + }); +}); diff --git a/spec/frontend/design_management/components/upload/__snapshots__/button_spec.js.snap b/spec/frontend/design_management/components/upload/__snapshots__/button_spec.js.snap index 185bf4a48f7..27c0ba589e6 100644 --- a/spec/frontend/design_management/components/upload/__snapshots__/button_spec.js.snap +++ b/spec/frontend/design_management/components/upload/__snapshots__/button_spec.js.snap @@ -10,7 +10,7 @@ exports[`Design management upload button component renders inverted upload desig variant="success" > - Add designs + Upload designs <!----> </gl-deprecated-button-stub> @@ -34,7 +34,7 @@ exports[`Design management upload button component renders loading icon 1`] = ` variant="success" > - Add designs + Upload designs <gl-loading-icon-stub class="ml-1" @@ -63,7 +63,7 @@ exports[`Design management upload button component renders upload design button variant="success" > - Add designs + Upload designs <!----> </gl-deprecated-button-stub> diff --git a/spec/frontend/design_management/mock_data/design.js b/spec/frontend/design_management/mock_data/design.js index 34e3077f4a2..675198b9408 100644 --- a/spec/frontend/design_management/mock_data/design.js +++ b/spec/frontend/design_management/mock_data/design.js @@ -29,6 +29,7 @@ export default { { id: 'discussion-id', replyId: 'discussion-reply-id', + resolved: false, notes: { nodes: [ { @@ -44,6 +45,25 @@ export default { ], }, }, + { + id: 'discussion-resolved', + replyId: 'discussion-reply-resolved', + resolved: true, + notes: { + nodes: [ + { + id: 'note-resolved', + body: '123', + author: { + name: 'Administrator', + username: 'root', + webUrl: 'link-to-author', + avatarUrl: 'link-to-avatar', + }, + }, + ], + }, + }, ], }, diffRefs: { diff --git a/spec/frontend/design_management/mock_data/notes.js b/spec/frontend/design_management/mock_data/notes.js index db4624c8524..80cb3944786 100644 --- a/spec/frontend/design_management/mock_data/notes.js +++ b/spec/frontend/design_management/mock_data/notes.js @@ -1,32 +1,46 @@ export default [ { id: 'note-id-1', + index: 1, position: { height: 100, width: 100, x: 10, y: 15, }, + author: { + name: 'John', + webUrl: 'link-to-john-profile', + }, + createdAt: '2020-05-08T07:10:45Z', userPermissions: { adminNote: true, }, discussion: { id: 'discussion-id-1', }, + resolved: false, }, { id: 'note-id-2', + index: 2, position: { height: 50, width: 50, x: 25, y: 25, }, + author: { + name: 'Mary', + webUrl: 'link-to-mary-profile', + }, + createdAt: '2020-05-08T07:10:45Z', userPermissions: { adminNote: true, }, discussion: { id: 'discussion-id-2', }, + resolved: true, }, ]; diff --git a/spec/frontend/design_management/pages/design/__snapshots__/index_spec.js.snap b/spec/frontend/design_management/pages/design/__snapshots__/index_spec.js.snap index 76e481ee518..65c4811536e 100644 --- a/spec/frontend/design_management/pages/design/__snapshots__/index_spec.js.snap +++ b/spec/frontend/design_management/pages/design/__snapshots__/index_spec.js.snap @@ -16,7 +16,7 @@ exports[`Design management design index page renders design index 1`] = ` <!----> <design-presentation-stub - discussions="[object Object]" + discussions="[object Object],[object Object]" image="test.jpg" imagename="test.jpg" scale="1" @@ -33,58 +33,86 @@ exports[`Design management design index page renders design index 1`] = ` class="image-notes" > <h2 - class="gl-font-size-20-deprecated-no-really-do-not-use-me font-weight-bold mt-0" + class="gl-font-weight-bold gl-mt-0" > - My precious issue - + My precious issue + </h2> <a - class="text-tertiary text-decoration-none mb-3 d-block" + class="gl-text-gray-600 gl-text-decoration-none gl-mb-6 gl-display-block" href="full-issue-url" > ull-issue-path </a> <participants-stub - class="mb-4" + class="gl-mb-4" numberoflessparticipants="7" participants="[object Object]" /> - <div - class="design-discussion-wrapper" + <!----> + + <design-discussion-stub + data-testid="unresolved-discussion" + designid="test" + discussion="[object Object]" + discussionwithopenform="" + markdownpreviewpath="//preview_markdown?target_type=Issue" + noteableid="design-id" + /> + + <gl-button-stub + category="tertiary" + class="link-inherit-color gl-text-black-normal gl-text-decoration-none gl-font-weight-bold gl-mb-4" + data-testid="resolved-comments" + icon="chevron-right" + id="resolved-comments" + size="medium" + variant="link" > - <div - class="badge badge-pill" - type="button" - > - 1 - </div> + Resolved Comments (1) + + </gl-button-stub> + + <gl-popover-stub + container="popovercontainer" + cssclasses="" + placement="top" + show="true" + target="resolved-comments" + title="Resolved Comments" + > + <p> + + Comments you resolve can be viewed and unresolved by going to the "Resolved Comments" section below + + </p> - <div - class="design-discussion bordered-box position-relative" - data-qa-selector="design_discussion_content" + <a + href="#" + rel="noopener noreferrer" + target="_blank" > - <design-note-stub - class="" - markdownpreviewpath="//preview_markdown?target_type=Issue" - note="[object Object]" - /> - - <div - class="reply-wrapper" - > - <reply-placeholder-stub - buttontext="Reply..." - class="qa-discussion-reply" - /> - </div> - </div> - </div> + Learn more about resolving comments + </a> + </gl-popover-stub> + + <gl-collapse-stub + class="gl-mt-3" + > + <design-discussion-stub + data-testid="resolved-discussion" + designid="test" + discussion="[object Object]" + discussionwithopenform="" + markdownpreviewpath="//preview_markdown?target_type=Issue" + noteableid="design-id" + /> + </gl-collapse-stub> - <!----> </div> </div> `; @@ -152,33 +180,37 @@ exports[`Design management design index page with error GlAlert is rendered in c class="image-notes" > <h2 - class="gl-font-size-20-deprecated-no-really-do-not-use-me font-weight-bold mt-0" + class="gl-font-weight-bold gl-mt-0" > - My precious issue - + My precious issue + </h2> <a - class="text-tertiary text-decoration-none mb-3 d-block" + class="gl-text-gray-600 gl-text-decoration-none gl-mb-6 gl-display-block" href="full-issue-url" > ull-issue-path </a> <participants-stub - class="mb-4" + class="gl-mb-4" numberoflessparticipants="7" participants="[object Object]" /> <h2 - class="new-discussion-disclaimer gl-font-base m-0" + class="new-discussion-disclaimer gl-font-base gl-m-0 gl-mb-4" + data-testid="new-discussion-disclaimer" > - Click the image where you'd like to start a new discussion - + Click the image where you'd like to start a new discussion + </h2> + + <!----> + </div> </div> `; diff --git a/spec/frontend/design_management/pages/design/index_spec.js b/spec/frontend/design_management/pages/design/index_spec.js index 9e2f071a983..430cf8722fe 100644 --- a/spec/frontend/design_management/pages/design/index_spec.js +++ b/spec/frontend/design_management/pages/design/index_spec.js @@ -1,13 +1,12 @@ -import { shallowMount } from '@vue/test-utils'; +import { shallowMount, createLocalVue } from '@vue/test-utils'; +import VueRouter from 'vue-router'; import { GlAlert } from '@gitlab/ui'; import { ApolloMutation } from 'vue-apollo'; import createFlash from '~/flash'; import DesignIndex from '~/design_management/pages/design/index.vue'; -import DesignDiscussion from '~/design_management/components/design_notes/design_discussion.vue'; +import DesignSidebar from '~/design_management/components/design_sidebar.vue'; import DesignReplyForm from '~/design_management/components/design_notes/design_reply_form.vue'; -import Participants from '~/sidebar/components/participants/participants.vue'; import createImageDiffNoteMutation from '~/design_management/graphql/mutations/createImageDiffNote.mutation.graphql'; -import updateActiveDiscussionMutation from '~/design_management/graphql/mutations/update_active_discussion.mutation.graphql'; import design from '../../mock_data/design'; import mockResponseWithDesigns from '../../mock_data/designs'; import mockResponseNoDesigns from '../../mock_data/no_designs'; @@ -17,6 +16,9 @@ import { DESIGN_VERSION_NOT_EXIST_ERROR, } from '~/design_management/utils/error_messages'; import { DESIGNS_ROUTE_NAME } from '~/design_management/router/constants'; +import createRouter from '~/design_management/router'; +import * as utils from '~/design_management/utils/design_management_utils'; +import { DESIGN_DETAIL_LAYOUT_CLASSLIST } from '~/design_management/constants'; jest.mock('~/flash'); jest.mock('mousetrap', () => ({ @@ -24,8 +26,13 @@ jest.mock('mousetrap', () => ({ unbind: jest.fn(), })); +const localVue = createLocalVue(); +localVue.use(VueRouter); + describe('Design management design index page', () => { let wrapper; + let router; + const newComment = 'new comment'; const annotationCoordinates = { x: 10, @@ -53,23 +60,12 @@ describe('Design management design index page', () => { }, }; - const updateActiveDiscussionMutationVariables = { - mutation: updateActiveDiscussionMutation, - variables: { - id: design.discussions.nodes[0].notes.nodes[0].id, - source: 'discussion', - }, - }; - const mutate = jest.fn().mockResolvedValue(); - const routerPush = jest.fn(); - const findDiscussions = () => wrapper.findAll(DesignDiscussion); const findDiscussionForm = () => wrapper.find(DesignReplyForm); - const findParticipants = () => wrapper.find(Participants); - const findDiscussionsWrapper = () => wrapper.find('.image-notes'); + const findSidebar = () => wrapper.find(DesignSidebar); - function createComponent(loading = false, data = {}, { routeQuery = {} } = {}) { + function createComponent(loading = false, data = {}) { const $apollo = { queries: { design: { @@ -79,20 +75,14 @@ describe('Design management design index page', () => { mutate, }; - const $router = { - push: routerPush, - }; - - const $route = { - query: routeQuery, - }; + router = createRouter(); wrapper = shallowMount(DesignIndex, { propsData: { id: '1' }, - mocks: { $apollo, $router, $route }, + mocks: { $apollo }, stubs: { ApolloMutation, - DesignDiscussion, + DesignSidebar, }, data() { return { @@ -104,6 +94,8 @@ describe('Design management design index page', () => { ...data, }; }, + localVue, + router, }); } @@ -111,6 +103,23 @@ describe('Design management design index page', () => { wrapper.destroy(); }); + describe('when navigating', () => { + it('applies fullscreen layout', () => { + const mockEl = { + classList: { + add: jest.fn(), + remove: jest.fn(), + }, + }; + jest.spyOn(utils, 'getPageLayoutElement').mockReturnValue(mockEl); + createComponent(true); + + wrapper.vm.$router.push('/designs/test'); + expect(mockEl.classList.add).toHaveBeenCalledTimes(1); + expect(mockEl.classList.add).toHaveBeenCalledWith(...DESIGN_DETAIL_LAYOUT_CLASSLIST); + }); + }); + it('sets loading state', () => { createComponent(true); @@ -124,63 +133,13 @@ describe('Design management design index page', () => { expect(wrapper.find(GlAlert).exists()).toBe(false); }); - it('renders participants', () => { - createComponent(false, { design }); - - expect(findParticipants().exists()).toBe(true); - }); - - it('passes the correct amount of participants to the Participants component', () => { + it('passes correct props to sidebar component', () => { createComponent(false, { design }); - expect(findParticipants().props('participants')).toHaveLength(1); - }); - - describe('when has no discussions', () => { - beforeEach(() => { - createComponent(false, { - design: { - ...design, - discussions: { - nodes: [], - }, - }, - }); - }); - - it('does not render discussions', () => { - expect(findDiscussions().exists()).toBe(false); - }); - - it('renders a message about possibility to create a new discussion', () => { - expect(wrapper.find('.new-discussion-disclaimer').exists()).toBe(true); - }); - }); - - describe('when has discussions', () => { - beforeEach(() => { - createComponent(false, { design }); - }); - - it('renders correct amount of discussions', () => { - expect(findDiscussions()).toHaveLength(1); - }); - - it('sends a mutation to set an active discussion when clicking on a discussion', () => { - findDiscussions() - .at(0) - .trigger('click'); - - expect(mutate).toHaveBeenCalledWith(updateActiveDiscussionMutationVariables); - }); - - it('sends a mutation to reset an active discussion when clicking outside of discussion', () => { - findDiscussionsWrapper().trigger('click'); - - expect(mutate).toHaveBeenCalledWith({ - ...updateActiveDiscussionMutationVariables, - variables: { id: undefined, source: 'discussion' }, - }); + expect(findSidebar().props()).toEqual({ + design, + markdownPreviewPath: '//preview_markdown?target_type=Issue', + resolvedDiscussionsExpanded: false, }); }); @@ -269,31 +228,35 @@ describe('Design management design index page', () => { describe('with no designs', () => { it('redirects to /designs', () => { createComponent(true); + router.push = jest.fn(); wrapper.vm.onDesignQueryResult({ data: mockResponseNoDesigns, loading: false }); return wrapper.vm.$nextTick().then(() => { expect(createFlash).toHaveBeenCalledTimes(1); expect(createFlash).toHaveBeenCalledWith(DESIGN_NOT_FOUND_ERROR); - expect(routerPush).toHaveBeenCalledTimes(1); - expect(routerPush).toHaveBeenCalledWith({ name: DESIGNS_ROUTE_NAME }); + expect(router.push).toHaveBeenCalledTimes(1); + expect(router.push).toHaveBeenCalledWith({ name: DESIGNS_ROUTE_NAME }); }); }); }); describe('when no design exists for given version', () => { it('redirects to /designs', () => { - // attempt to query for a version of the design that doesn't exist - createComponent(true, {}, { routeQuery: { version: '999' } }); + createComponent(true); wrapper.setData({ allVersions: mockAllVersions, }); + // attempt to query for a version of the design that doesn't exist + router.push({ query: { version: '999' } }); + router.push = jest.fn(); + wrapper.vm.onDesignQueryResult({ data: mockResponseWithDesigns, loading: false }); return wrapper.vm.$nextTick().then(() => { expect(createFlash).toHaveBeenCalledTimes(1); expect(createFlash).toHaveBeenCalledWith(DESIGN_VERSION_NOT_EXIST_ERROR); - expect(routerPush).toHaveBeenCalledTimes(1); - expect(routerPush).toHaveBeenCalledWith({ name: DESIGNS_ROUTE_NAME }); + expect(router.push).toHaveBeenCalledTimes(1); + expect(router.push).toHaveBeenCalledWith({ name: DESIGNS_ROUTE_NAME }); }); }); }); diff --git a/spec/frontend/design_management/pages/index_spec.js b/spec/frontend/design_management/pages/index_spec.js index 2299b858da9..d4e9bae3e89 100644 --- a/spec/frontend/design_management/pages/index_spec.js +++ b/spec/frontend/design_management/pages/index_spec.js @@ -2,7 +2,6 @@ import { createLocalVue, shallowMount } from '@vue/test-utils'; import { ApolloMutation } from 'vue-apollo'; import VueRouter from 'vue-router'; import { GlEmptyState } from '@gitlab/ui'; - import Index from '~/design_management/pages/index.vue'; import uploadDesignQuery from '~/design_management/graphql/mutations/uploadDesign.mutation.graphql'; import DesignDestroyer from '~/design_management/components/design_destroyer.vue'; @@ -14,20 +13,21 @@ import { EXISTING_DESIGN_DROP_INVALID_FILENAME_MESSAGE, } from '~/design_management/utils/error_messages'; import createFlash from '~/flash'; +import createRouter from '~/design_management/router'; +import * as utils from '~/design_management/utils/design_management_utils'; +import { DESIGN_DETAIL_LAYOUT_CLASSLIST } from '~/design_management/constants'; + +jest.mock('~/flash.js'); +const mockPageEl = { + classList: { + remove: jest.fn(), + }, +}; +jest.spyOn(utils, 'getPageLayoutElement').mockReturnValue(mockPageEl); const localVue = createLocalVue(); +const router = createRouter(); localVue.use(VueRouter); -const router = new VueRouter({ - routes: [ - { - name: DESIGNS_ROUTE_NAME, - path: '/designs', - component: Index, - }, - ], -}); - -jest.mock('~/flash.js'); const mockDesigns = [ { @@ -530,4 +530,14 @@ describe('Design management index page', () => { expect(wrapper.vm.onUploadDesign).not.toHaveBeenCalled(); }); }); + + describe('when navigating', () => { + it('ensures fullscreen layout is not applied', () => { + createComponent(true); + + wrapper.vm.$router.push('/designs'); + expect(mockPageEl.classList.remove).toHaveBeenCalledTimes(1); + expect(mockPageEl.classList.remove).toHaveBeenCalledWith(...DESIGN_DETAIL_LAYOUT_CLASSLIST); + }); + }); }); diff --git a/spec/frontend/design_management/router_spec.js b/spec/frontend/design_management/router_spec.js index 0f4afa5e288..d6488d3837a 100644 --- a/spec/frontend/design_management/router_spec.js +++ b/spec/frontend/design_management/router_spec.js @@ -33,6 +33,7 @@ function factory(routeArg) { design: { loading: true }, permissions: { loading: true }, }, + mutate: jest.fn(), }, }, }); diff --git a/spec/frontend/design_management/utils/design_management_utils_spec.js b/spec/frontend/design_management/utils/design_management_utils_spec.js index af631073df6..478ebadc8f6 100644 --- a/spec/frontend/design_management/utils/design_management_utils_spec.js +++ b/spec/frontend/design_management/utils/design_management_utils_spec.js @@ -53,10 +53,10 @@ describe('extractDiscussions', () => { it('discards the edges.node artifacts of GraphQL', () => { expect(extractDiscussions(discussions)).toEqual([ - { id: 1, notes: ['a'] }, - { id: 2, notes: ['b'] }, - { id: 3, notes: ['c'] }, - { id: 4, notes: ['d'] }, + { id: 1, notes: ['a'], index: 1 }, + { id: 2, notes: ['b'], index: 2 }, + { id: 3, notes: ['c'], index: 3 }, + { id: 4, notes: ['d'], index: 4 }, ]); }); }); diff --git a/spec/frontend/diffs/components/diff_file_spec.js b/spec/frontend/diffs/components/diff_file_spec.js index d0ba71fce47..71e975f2409 100644 --- a/spec/frontend/diffs/components/diff_file_spec.js +++ b/spec/frontend/diffs/components/diff_file_spec.js @@ -1,5 +1,5 @@ import Vue from 'vue'; -import { createStore } from 'ee_else_ce/mr_notes/stores'; +import { createStore } from '~/mr_notes/stores'; import { createComponentWithStore } from 'helpers/vue_mount_component_helper'; import { mockTracking, triggerEvent } from 'helpers/tracking_helper'; import DiffFileComponent from '~/diffs/components/diff_file.vue'; diff --git a/spec/frontend/diffs/components/diff_line_note_form_spec.js b/spec/frontend/diffs/components/diff_line_note_form_spec.js index 3e0acd0dace..623df8bd55e 100644 --- a/spec/frontend/diffs/components/diff_line_note_form_spec.js +++ b/spec/frontend/diffs/components/diff_line_note_form_spec.js @@ -77,12 +77,24 @@ describe('DiffLineNoteForm', () => { .spyOn(wrapper.vm, 'saveDiffDiscussion') .mockReturnValue(Promise.resolve()); + const lineRange = { + start_line_code: wrapper.vm.commentLineStart.lineCode, + start_line_type: wrapper.vm.commentLineStart.type, + end_line_code: wrapper.vm.line.line_code, + end_line_type: wrapper.vm.line.type, + }; + + const formData = { + ...wrapper.vm.formData, + lineRange, + }; + wrapper.vm .handleSaveNote('note body') .then(() => { expect(saveDiffDiscussionSpy).toHaveBeenCalledWith({ note: 'note body', - formData: wrapper.vm.formData, + formData, }); }) .then(done) diff --git a/spec/frontend/diffs/components/inline_diff_view_spec.js b/spec/frontend/diffs/components/inline_diff_view_spec.js index 9b0cf6a84d9..eeef8e5a7b0 100644 --- a/spec/frontend/diffs/components/inline_diff_view_spec.js +++ b/spec/frontend/diffs/components/inline_diff_view_spec.js @@ -1,6 +1,6 @@ import Vue from 'vue'; import '~/behaviors/markdown/render_gfm'; -import { createStore } from 'ee_else_ce/mr_notes/stores'; +import { createStore } from '~/mr_notes/stores'; import { createComponentWithStore } from 'helpers/vue_mount_component_helper'; import InlineDiffView from '~/diffs/components/inline_diff_view.vue'; import diffFileMockData from '../mock_data/diff_file'; diff --git a/spec/frontend/diffs/components/parallel_diff_view_spec.js b/spec/frontend/diffs/components/parallel_diff_view_spec.js index 03cf1b72b62..30231f0ba71 100644 --- a/spec/frontend/diffs/components/parallel_diff_view_spec.js +++ b/spec/frontend/diffs/components/parallel_diff_view_spec.js @@ -1,5 +1,5 @@ import Vue from 'vue'; -import { createStore } from 'ee_else_ce/mr_notes/stores'; +import { createStore } from '~/mr_notes/stores'; import { createComponentWithStore } from 'helpers/vue_mount_component_helper'; import ParallelDiffView from '~/diffs/components/parallel_diff_view.vue'; import * as constants from '~/diffs/constants'; diff --git a/spec/frontend/diffs/mock_data/diff_file.js b/spec/frontend/diffs/mock_data/diff_file.js index 27428197c1c..e4b2fdf6ede 100644 --- a/spec/frontend/diffs/mock_data/diff_file.js +++ b/spec/frontend/diffs/mock_data/diff_file.js @@ -13,6 +13,7 @@ export default { 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_identifier_hash: '928f8286952bda02d674b692addcbe077084663a', file_path: 'CHANGELOG', new_file: false, deleted_file: false, diff --git a/spec/frontend/diffs/mock_data/diff_metadata.js b/spec/frontend/diffs/mock_data/diff_metadata.js new file mode 100644 index 00000000000..b73b29e4bc8 --- /dev/null +++ b/spec/frontend/diffs/mock_data/diff_metadata.js @@ -0,0 +1,58 @@ +/* eslint-disable import/prefer-default-export */ +/* https://gitlab.com/gitlab-org/frontend/rfcs/-/issues/20 */ + +export const diffMetadata = { + real_size: '1', + size: 1, + branch_name: 'update-changelog', + source_branch_exists: true, + target_branch_name: 'master', + commit: null, + context_commits: null, + merge_request_diff: { + version_index: null, + created_at: '2019-11-07T06:48:35.202Z', + commits_count: 1, + latest: true, + short_commit_sha: 'eb227b3e', + base_version_path: '/gitlab-org/gitlab-test/-/merge_requests/4/diffs?diff_id=4', + head_version_path: '/gitlab-org/gitlab-test/-/merge_requests/4/diffs?diff_head=true', + version_path: '/gitlab-org/gitlab-test/-/merge_requests/4/diffs?diff_id=4', + compare_path: + '/gitlab-org/gitlab-test/-/merge_requests/4/diffs?diff_id=4\u0026start_sha=eb227b3e214624708c474bdab7bde7afc17cefcc', + }, + start_version: null, + latest_diff: true, + latest_version_path: '/gitlab-org/gitlab-test/-/merge_requests/4/diffs', + added_lines: 2, + removed_lines: 0, + render_overflow_warning: false, + email_patch_path: '/gitlab-org/gitlab-test/-/merge_requests/4.patch', + plain_diff_path: '/gitlab-org/gitlab-test/-/merge_requests/4.diff', + merge_request_diffs: [ + { + version_index: null, + created_at: '2019-11-07T06:48:35.202Z', + commits_count: 1, + latest: true, + short_commit_sha: 'eb227b3e', + base_version_path: '/gitlab-org/gitlab-test/-/merge_requests/4/diffs?diff_id=4', + head_version_path: '/gitlab-org/gitlab-test/-/merge_requests/4/diffs?diff_head=true', + version_path: '/gitlab-org/gitlab-test/-/merge_requests/4/diffs?diff_id=4', + compare_path: + '/gitlab-org/gitlab-test/-/merge_requests/4/diffs?diff_id=4\u0026start_sha=eb227b3e214624708c474bdab7bde7afc17cefcc', + }, + ], + diff_files: [ + { + added_lines: 2, + removed_lines: 0, + new_path: 'CHANGELOG', + old_path: 'CHANGELOG', + new_file: false, + deleted_file: false, + file_identifier_hash: '928f8286952bda02d674b692addcbe077084663a', + file_hash: '1c497fbb3a46b78edf04cc2a2fa33f67e3ffbe2a', + }, + ], +}; diff --git a/spec/frontend/diffs/store/actions_spec.js b/spec/frontend/diffs/store/actions_spec.js index 3fba661da44..7d79dcfbfe3 100644 --- a/spec/frontend/diffs/store/actions_spec.js +++ b/spec/frontend/diffs/store/actions_spec.js @@ -35,8 +35,6 @@ import { setRenderTreeList, setShowWhitespace, setRenderIt, - requestFullDiff, - receiveFullDiffSucess, receiveFullDiffError, fetchFullDiff, toggleFullDiff, @@ -53,7 +51,9 @@ import axios from '~/lib/utils/axios_utils'; import testAction from '../../helpers/vuex_action_helper'; import * as utils from '~/diffs/store/utils'; import * as commonUtils from '~/lib/utils/common_utils'; +import { mergeUrlParams } from '~/lib/utils/url_utility'; import { useLocalStorageSpy } from 'helpers/local_storage_helper'; +import { diffMetadata } from '../mock_data/diff_metadata'; import createFlash from '~/flash'; jest.mock('~/flash', () => jest.fn()); @@ -175,19 +175,44 @@ describe('DiffsStoreActions', () => { }); describe('fetchDiffFilesBatch', () => { + let mock; + + beforeEach(() => { + mock = new MockAdapter(axios); + }); + + afterEach(() => { + mock.restore(); + }); + it('should fetch batch diff files', done => { const endpointBatch = '/fetch/diffs_batch'; - const mock = new MockAdapter(axios); const res1 = { diff_files: [], pagination: { next_page: 2 } }; const res2 = { diff_files: [], pagination: {} }; mock - .onGet(endpointBatch, { - params: { page: 1, per_page: DIFFS_PER_PAGE, w: '1', view: 'inline' }, - }) + .onGet( + mergeUrlParams( + { + per_page: DIFFS_PER_PAGE, + w: '1', + view: 'inline', + page: 1, + }, + endpointBatch, + ), + ) .reply(200, res1) - .onGet(endpointBatch, { - params: { page: 2, per_page: DIFFS_PER_PAGE, w: '1', view: 'inline' }, - }) + .onGet( + mergeUrlParams( + { + per_page: DIFFS_PER_PAGE, + w: '1', + view: 'inline', + page: 2, + }, + endpointBatch, + ), + ) .reply(200, res2); testAction( @@ -204,22 +229,50 @@ describe('DiffsStoreActions', () => { { type: types.SET_RETRIEVING_BATCHES, payload: false }, ], [], - () => { - mock.restore(); - done(); - }, + done, ); }); + + it.each` + viewStyle | otherView + ${'inline'} | ${'parallel'} + ${'parallel'} | ${'inline'} + `( + 'should make a request with the view parameter "$viewStyle" when the batchEndpoint already contains "$otherView"', + ({ viewStyle, otherView }) => { + const endpointBatch = '/fetch/diffs_batch'; + + fetchDiffFilesBatch({ + commit: () => {}, + state: { + endpointBatch: `${endpointBatch}?view=${otherView}`, + useSingleDiffStyle: true, + diffViewType: viewStyle, + }, + }) + .then(() => { + expect(mock.history.get[0].url).toContain(`view=${viewStyle}`); + expect(mock.history.get[0].url).not.toContain(`view=${otherView}`); + }) + .catch(() => {}); + }, + ); }); describe('fetchDiffFilesMeta', () => { - it('should fetch diff meta information', done => { - const endpointMetadata = '/fetch/diffs_meta?view=inline'; - const mock = new MockAdapter(axios); - const data = { diff_files: [] }; - const res = { data }; - mock.onGet(endpointMetadata).reply(200, res); + const endpointMetadata = '/fetch/diffs_metadata.json?view=inline'; + const noFilesData = { ...diffMetadata }; + let mock; + + beforeEach(() => { + mock = new MockAdapter(axios); + + delete noFilesData.diff_files; + + mock.onGet(endpointMetadata).reply(200, diffMetadata); + }); + it('should fetch diff meta information', done => { testAction( fetchDiffFilesMeta, {}, @@ -227,8 +280,8 @@ describe('DiffsStoreActions', () => { [ { type: types.SET_LOADING, payload: true }, { type: types.SET_LOADING, payload: false }, - { type: types.SET_MERGE_REQUEST_DIFFS, payload: [] }, - { type: types.SET_DIFF_DATA, payload: { data } }, + { type: types.SET_MERGE_REQUEST_DIFFS, payload: diffMetadata.merge_request_diffs }, + { type: types.SET_DIFF_DATA, payload: noFilesData }, ], [], () => { @@ -280,15 +333,24 @@ describe('DiffsStoreActions', () => { }); describe('fetchDiffFilesBatch', () => { + let mock; + + beforeEach(() => { + mock = new MockAdapter(axios); + }); + + afterEach(() => { + mock.restore(); + }); + it('should fetch batch diff files', done => { const endpointBatch = '/fetch/diffs_batch'; - const mock = new MockAdapter(axios); const res1 = { diff_files: [], pagination: { next_page: 2 } }; const res2 = { diff_files: [], pagination: {} }; mock - .onGet(endpointBatch, { params: { page: 1, per_page: DIFFS_PER_PAGE, w: '1' } }) + .onGet(mergeUrlParams({ per_page: DIFFS_PER_PAGE, w: '1', page: 1 }, endpointBatch)) .reply(200, res1) - .onGet(endpointBatch, { params: { page: 2, per_page: DIFFS_PER_PAGE, w: '1' } }) + .onGet(mergeUrlParams({ per_page: DIFFS_PER_PAGE, w: '1', page: 2 }, endpointBatch)) .reply(200, res2); testAction( @@ -305,22 +367,48 @@ describe('DiffsStoreActions', () => { { type: types.SET_RETRIEVING_BATCHES, payload: false }, ], [], - () => { - mock.restore(); - done(); - }, + done, ); }); + + it.each` + querystrings | requestUrl + ${'?view=parallel'} | ${'/fetch/diffs_batch?view=parallel'} + ${'?view=inline'} | ${'/fetch/diffs_batch?view=inline'} + ${''} | ${'/fetch/diffs_batch'} + `( + 'should use the endpoint $requestUrl if the endpointBatch in state includes `$querystrings` as a querystring', + ({ querystrings, requestUrl }) => { + const endpointBatch = '/fetch/diffs_batch'; + + fetchDiffFilesBatch({ + commit: () => {}, + state: { + endpointBatch: `${endpointBatch}${querystrings}`, + diffViewType: 'inline', + }, + }) + .then(() => { + expect(mock.history.get[0].url).toEqual(requestUrl); + }) + .catch(() => {}); + }, + ); }); describe('fetchDiffFilesMeta', () => { - it('should fetch diff meta information', done => { - const endpointMetadata = '/fetch/diffs_meta'; - const mock = new MockAdapter(axios); - const data = { diff_files: [] }; - const res = { data }; - mock.onGet(endpointMetadata).reply(200, res); + const endpointMetadata = '/fetch/diffs_metadata.json'; + const noFilesData = { ...diffMetadata }; + let mock; + + beforeEach(() => { + mock = new MockAdapter(axios); + + delete noFilesData.diff_files; + mock.onGet(endpointMetadata).reply(200, diffMetadata); + }); + it('should fetch diff meta information', done => { testAction( fetchDiffFilesMeta, {}, @@ -328,8 +416,8 @@ describe('DiffsStoreActions', () => { [ { type: types.SET_LOADING, payload: true }, { type: types.SET_LOADING, payload: false }, - { type: types.SET_MERGE_REQUEST_DIFFS, payload: [] }, - { type: types.SET_DIFF_DATA, payload: { data } }, + { type: types.SET_MERGE_REQUEST_DIFFS, payload: diffMetadata.merge_request_diffs }, + { type: types.SET_DIFF_DATA, payload: noFilesData }, ], [], () => { @@ -467,9 +555,9 @@ describe('DiffsStoreActions', () => { new_path: 'file1', old_line: 5, old_path: 'file2', + line_range: null, line_code: 'ABC_1_1', position_type: 'text', - line_range: null, }, }, hash: 'ABC_123', @@ -1136,34 +1224,8 @@ describe('DiffsStoreActions', () => { }); }); - describe('requestFullDiff', () => { - it('commits REQUEST_FULL_DIFF', done => { - testAction( - requestFullDiff, - 'file', - {}, - [{ type: types.REQUEST_FULL_DIFF, payload: 'file' }], - [], - done, - ); - }); - }); - - describe('receiveFullDiffSucess', () => { - it('commits REQUEST_FULL_DIFF', done => { - testAction( - receiveFullDiffSucess, - { filePath: 'test' }, - {}, - [{ type: types.RECEIVE_FULL_DIFF_SUCCESS, payload: { filePath: 'test' } }], - [], - done, - ); - }); - }); - describe('receiveFullDiffError', () => { - it('commits REQUEST_FULL_DIFF', done => { + it('updates state with the file that did not load', done => { testAction( receiveFullDiffError, 'file', @@ -1191,7 +1253,7 @@ describe('DiffsStoreActions', () => { mock.onGet(`${gl.TEST_HOST}/context`).replyOnce(200, ['test']); }); - it('dispatches receiveFullDiffSucess', done => { + it('commits the success and dispatches an action to expand the new lines', done => { const file = { context_lines_path: `${gl.TEST_HOST}/context`, file_path: 'test', @@ -1201,11 +1263,8 @@ describe('DiffsStoreActions', () => { fetchFullDiff, file, null, - [], - [ - { type: 'receiveFullDiffSucess', payload: { filePath: 'test' } }, - { type: 'setExpandedDiffLines', payload: { file, data: ['test'] } }, - ], + [{ type: types.RECEIVE_FULL_DIFF_SUCCESS, payload: { filePath: 'test' } }], + [{ type: 'setExpandedDiffLines', payload: { file, data: ['test'] } }], done, ); }); @@ -1243,11 +1302,8 @@ describe('DiffsStoreActions', () => { toggleFullDiff, 'test', state, - [], - [ - { type: 'requestFullDiff', payload: 'test' }, - { type: 'fetchFullDiff', payload: state.diffFiles[0] }, - ], + [{ type: types.REQUEST_FULL_DIFF, payload: 'test' }], + [{ type: 'fetchFullDiff', payload: state.diffFiles[0] }], done, ); }); @@ -1255,7 +1311,6 @@ describe('DiffsStoreActions', () => { describe('switchToFullDiffFromRenamedFile', () => { const SUCCESS_URL = 'fakehost/context.success'; - const ERROR_URL = 'fakehost/context.error'; const testFilePath = 'testpath'; const updatedViewerName = 'testviewer'; const preparedLine = { prepared: 'in-a-test' }; @@ -1311,27 +1366,6 @@ describe('DiffsStoreActions', () => { }, ); }); - - describe('error', () => { - beforeEach(() => { - renamedFile = { ...testFile, context_lines_path: ERROR_URL }; - mock.onGet(ERROR_URL).reply(500); - }); - - it('dispatches the error handling action', () => { - const rejected = testAction( - switchToFullDiffFromRenamedFile, - { diffFile: renamedFile }, - null, - [], - [{ type: 'receiveFullDiffError', payload: testFilePath }], - ); - - return rejected.catch(error => - expect(error).toEqual(new Error('Request failed with status code 500')), - ); - }); - }); }); describe('setFileCollapsed', () => { diff --git a/spec/frontend/diffs/store/utils_spec.js b/spec/frontend/diffs/store/utils_spec.js index 641373e666f..891de45e268 100644 --- a/spec/frontend/diffs/store/utils_spec.js +++ b/spec/frontend/diffs/store/utils_spec.js @@ -14,9 +14,11 @@ import { } from '~/diffs/constants'; import { MERGE_REQUEST_NOTEABLE_TYPE } from '~/notes/constants'; import diffFileMockData from '../mock_data/diff_file'; +import { diffMetadata } from '../mock_data/diff_metadata'; import { noteableDataMock } from '../../notes/mock_data'; const getDiffFileMock = () => JSON.parse(JSON.stringify(diffFileMockData)); +const getDiffMetadataMock = () => JSON.parse(JSON.stringify(diffMetadata)); describe('DiffsStoreUtils', () => { describe('findDiffFile', () => { @@ -187,6 +189,7 @@ describe('DiffsStoreUtils', () => { }, diffViewType: PARALLEL_DIFF_VIEW_TYPE, linePosition: LINE_POSITION_LEFT, + lineRange: { start_line_code: 'abc_1_1', end_line_code: 'abc_2_2' }, }; const position = JSON.stringify({ @@ -198,6 +201,7 @@ describe('DiffsStoreUtils', () => { position_type: TEXT_DIFF_POSITION_TYPE, old_line: options.noteTargetLine.old_line, new_line: options.noteTargetLine.new_line, + line_range: options.lineRange, }); const postData = { @@ -428,112 +432,177 @@ describe('DiffsStoreUtils', () => { }); describe('prepareDiffData', () => { - let mock; - let preparedDiff; - let splitInlineDiff; - let splitParallelDiff; - let completedDiff; + describe('for regular diff files', () => { + let mock; + let preparedDiff; + let splitInlineDiff; + let splitParallelDiff; + let completedDiff; + + beforeEach(() => { + mock = getDiffFileMock(); + + preparedDiff = { diff_files: [mock] }; + splitInlineDiff = { + diff_files: [{ ...mock, parallel_diff_lines: undefined }], + }; + splitParallelDiff = { + diff_files: [{ ...mock, highlighted_diff_lines: undefined }], + }; + completedDiff = { + diff_files: [{ ...mock, highlighted_diff_lines: undefined }], + }; - beforeEach(() => { - mock = getDiffFileMock(); - preparedDiff = { diff_files: [mock] }; - splitInlineDiff = { - diff_files: [{ ...mock, parallel_diff_lines: undefined }], - }; - splitParallelDiff = { - diff_files: [{ ...mock, highlighted_diff_lines: undefined }], - }; - completedDiff = { - diff_files: [{ ...mock, highlighted_diff_lines: undefined }], - }; + preparedDiff.diff_files = utils.prepareDiffData(preparedDiff); + splitInlineDiff.diff_files = utils.prepareDiffData(splitInlineDiff); + splitParallelDiff.diff_files = utils.prepareDiffData(splitParallelDiff); + completedDiff.diff_files = utils.prepareDiffData(completedDiff, [mock]); + }); - preparedDiff.diff_files = utils.prepareDiffData(preparedDiff); - splitInlineDiff.diff_files = utils.prepareDiffData(splitInlineDiff); - splitParallelDiff.diff_files = utils.prepareDiffData(splitParallelDiff); - completedDiff.diff_files = utils.prepareDiffData(completedDiff, [mock]); - }); + it('sets the renderIt and collapsed attribute on files', () => { + const firstParallelDiffLine = preparedDiff.diff_files[0].parallel_diff_lines[2]; - it('sets the renderIt and collapsed attribute on files', () => { - const firstParallelDiffLine = preparedDiff.diff_files[0].parallel_diff_lines[2]; + expect(firstParallelDiffLine.left.discussions.length).toBe(0); + expect(firstParallelDiffLine.left).not.toHaveAttr('text'); + expect(firstParallelDiffLine.right.discussions.length).toBe(0); + expect(firstParallelDiffLine.right).not.toHaveAttr('text'); + const firstParallelChar = firstParallelDiffLine.right.rich_text.charAt(0); - expect(firstParallelDiffLine.left.discussions.length).toBe(0); - expect(firstParallelDiffLine.left).not.toHaveAttr('text'); - expect(firstParallelDiffLine.right.discussions.length).toBe(0); - expect(firstParallelDiffLine.right).not.toHaveAttr('text'); - const firstParallelChar = firstParallelDiffLine.right.rich_text.charAt(0); + expect(firstParallelChar).not.toBe(' '); + expect(firstParallelChar).not.toBe('+'); + expect(firstParallelChar).not.toBe('-'); - expect(firstParallelChar).not.toBe(' '); - expect(firstParallelChar).not.toBe('+'); - expect(firstParallelChar).not.toBe('-'); + const checkLine = preparedDiff.diff_files[0].highlighted_diff_lines[0]; - const checkLine = preparedDiff.diff_files[0].highlighted_diff_lines[0]; + expect(checkLine.discussions.length).toBe(0); + expect(checkLine).not.toHaveAttr('text'); + const firstChar = checkLine.rich_text.charAt(0); - expect(checkLine.discussions.length).toBe(0); - expect(checkLine).not.toHaveAttr('text'); - const firstChar = checkLine.rich_text.charAt(0); + expect(firstChar).not.toBe(' '); + expect(firstChar).not.toBe('+'); + expect(firstChar).not.toBe('-'); - expect(firstChar).not.toBe(' '); - expect(firstChar).not.toBe('+'); - expect(firstChar).not.toBe('-'); + expect(preparedDiff.diff_files[0].renderIt).toBeTruthy(); + expect(preparedDiff.diff_files[0].collapsed).toBeFalsy(); + }); - expect(preparedDiff.diff_files[0].renderIt).toBeTruthy(); - expect(preparedDiff.diff_files[0].collapsed).toBeFalsy(); - }); + it('adds line_code to all lines', () => { + expect( + preparedDiff.diff_files[0].parallel_diff_lines.filter(line => !line.line_code), + ).toHaveLength(0); + }); - it('adds line_code to all lines', () => { - expect( - preparedDiff.diff_files[0].parallel_diff_lines.filter(line => !line.line_code), - ).toHaveLength(0); - }); + it('uses right line code if left has none', () => { + const firstLine = preparedDiff.diff_files[0].parallel_diff_lines[0]; - it('uses right line code if left has none', () => { - const firstLine = preparedDiff.diff_files[0].parallel_diff_lines[0]; + expect(firstLine.line_code).toEqual(firstLine.right.line_code); + }); - expect(firstLine.line_code).toEqual(firstLine.right.line_code); - }); + it('guarantees an empty array for both diff styles', () => { + expect(splitInlineDiff.diff_files[0].parallel_diff_lines.length).toEqual(0); + expect(splitInlineDiff.diff_files[0].highlighted_diff_lines.length).toBeGreaterThan(0); + expect(splitParallelDiff.diff_files[0].parallel_diff_lines.length).toBeGreaterThan(0); + expect(splitParallelDiff.diff_files[0].highlighted_diff_lines.length).toEqual(0); + }); - it('guarantees an empty array for both diff styles', () => { - expect(splitInlineDiff.diff_files[0].parallel_diff_lines.length).toEqual(0); - expect(splitInlineDiff.diff_files[0].highlighted_diff_lines.length).toBeGreaterThan(0); - expect(splitParallelDiff.diff_files[0].parallel_diff_lines.length).toBeGreaterThan(0); - expect(splitParallelDiff.diff_files[0].highlighted_diff_lines.length).toEqual(0); - }); + it('merges existing diff files with newly loaded diff files to ensure split diffs are eventually completed', () => { + expect(completedDiff.diff_files.length).toEqual(1); + expect(completedDiff.diff_files[0].parallel_diff_lines.length).toBeGreaterThan(0); + expect(completedDiff.diff_files[0].highlighted_diff_lines.length).toBeGreaterThan(0); + }); - it('merges existing diff files with newly loaded diff files to ensure split diffs are eventually completed', () => { - expect(completedDiff.diff_files.length).toEqual(1); - expect(completedDiff.diff_files[0].parallel_diff_lines.length).toBeGreaterThan(0); - expect(completedDiff.diff_files[0].highlighted_diff_lines.length).toBeGreaterThan(0); - }); + it('leaves files in the existing state', () => { + const priorFiles = [mock]; + const fakeNewFile = { + ...mock, + content_sha: 'ABC', + file_hash: 'DEF', + }; + const updatedFilesList = utils.prepareDiffData({ diff_files: [fakeNewFile] }, priorFiles); - it('leaves files in the existing state', () => { - const priorFiles = [mock]; - const fakeNewFile = { - ...mock, - content_sha: 'ABC', - file_hash: 'DEF', - }; - const updatedFilesList = utils.prepareDiffData({ diff_files: [fakeNewFile] }, priorFiles); + expect(updatedFilesList).toEqual([mock, fakeNewFile]); + }); - expect(updatedFilesList).toEqual([mock, fakeNewFile]); + it('completes an existing split diff without overwriting existing diffs', () => { + // The current state has a file that has only loaded inline lines + const priorFiles = [{ ...mock, parallel_diff_lines: [] }]; + // The next (batch) load loads two files: the other half of that file, and a new file + const fakeBatch = [ + { ...mock, highlighted_diff_lines: undefined }, + { ...mock, highlighted_diff_lines: undefined, content_sha: 'ABC', file_hash: 'DEF' }, + ]; + const updatedFilesList = utils.prepareDiffData({ diff_files: fakeBatch }, priorFiles); + + expect(updatedFilesList).toEqual([ + mock, + expect.objectContaining({ + content_sha: 'ABC', + file_hash: 'DEF', + }), + ]); + }); }); - it('completes an existing split diff without overwriting existing diffs', () => { - // The current state has a file that has only loaded inline lines - const priorFiles = [{ ...mock, parallel_diff_lines: [] }]; - // The next (batch) load loads two files: the other half of that file, and a new file - const fakeBatch = [ - { ...mock, highlighted_diff_lines: undefined }, - { ...mock, highlighted_diff_lines: undefined, content_sha: 'ABC', file_hash: 'DEF' }, - ]; - const updatedFilesList = utils.prepareDiffData({ diff_files: fakeBatch }, priorFiles); + describe('for diff metadata', () => { + let mock; + let preparedDiffFiles; - expect(updatedFilesList).toEqual([ - mock, - expect.objectContaining({ - content_sha: 'ABC', - file_hash: 'DEF', - }), - ]); + beforeEach(() => { + mock = getDiffMetadataMock(); + + preparedDiffFiles = utils.prepareDiffData(mock); + }); + + it('sets the renderIt and collapsed attribute on files', () => { + expect(preparedDiffFiles[0].renderIt).toBeTruthy(); + expect(preparedDiffFiles[0].collapsed).toBeFalsy(); + }); + + it('guarantees an empty array of lines for both diff styles', () => { + expect(preparedDiffFiles[0].parallel_diff_lines.length).toEqual(0); + expect(preparedDiffFiles[0].highlighted_diff_lines.length).toEqual(0); + }); + + it('leaves files in the existing state', () => { + const fileMock = getDiffFileMock(); + const metaData = getDiffMetadataMock(); + const priorFiles = [fileMock]; + const updatedFilesList = utils.prepareDiffData(metaData, priorFiles); + + expect(updatedFilesList.length).toEqual(2); + expect(updatedFilesList[0]).toEqual(fileMock); + }); + + it('adds a new file to the file that already exists in state', () => { + // This is actually buggy behavior: + // Because the metadata doesn't include a content_sha, + // the de-duplicator in prepareDiffData doesn't realize it + // should combine these two. + + // This buggy behavior hasn't caused a defect YET, because + // `diffs_metadata.json` is only called the first time the + // diffs app starts up, which is: + // - after a fresh page load + // - after you switch to the changes tab *the first time* + + // This test should begin FAILING and can be reversed to check + // for just a single file when this is implemented: + // https://gitlab.com/groups/gitlab-org/-/epics/2852#note_304803233 + + const fileMock = getDiffFileMock(); + const metaMock = getDiffMetadataMock(); + const priorFiles = [{ ...fileMock }]; + const updatedFilesList = utils.prepareDiffData(metaMock, priorFiles); + + expect(updatedFilesList).toEqual([ + fileMock, + { + ...metaMock.diff_files[0], + highlighted_diff_lines: [], + parallel_diff_lines: [], + }, + ]); + }); }); }); diff --git a/spec/frontend/diffs/utils/uuids_spec.js b/spec/frontend/diffs/utils/uuids_spec.js new file mode 100644 index 00000000000..79d3ebadd4f --- /dev/null +++ b/spec/frontend/diffs/utils/uuids_spec.js @@ -0,0 +1,92 @@ +import { uuids } from '~/diffs/utils/uuids'; + +const HEX = /[a-f0-9]/i; +const HEX_RE = HEX.source; +const UUIDV4 = new RegExp( + `${HEX_RE}{8}-${HEX_RE}{4}-4${HEX_RE}{3}-[89ab]${HEX_RE}{3}-${HEX_RE}{12}`, + 'i', +); + +describe('UUIDs Util', () => { + describe('uuids', () => { + const SEQUENCE_FOR_GITLAB_SEED = [ + 'a1826a44-316c-480e-a93d-8cdfeb36617c', + 'e049db1f-a4cf-4cba-aa60-6d95e3b547dc', + '6e3c737c-13a7-4380-b17d-601f187d7e69', + 'bee5cc7f-c486-45c0-8ad3-d1ac5402632d', + 'af248c9f-a3a6-4d4f-a311-fe151ffab25a', + ]; + const SEQUENCE_FOR_12345_SEED = [ + 'edfb51e2-e3e1-4de5-90fd-fd1d21760881', + '2f154da4-0a2d-4da9-b45e-0ffed391517e', + '91566d65-8836-4222-9875-9e1df4d0bb01', + 'f6ea6c76-7640-4d71-a736-9d3bec7a1a8e', + 'bfb85869-5fb9-4c5b-a750-5af727ac5576', + ]; + + it('returns version 4 UUIDs', () => { + expect(uuids()[0]).toMatch(UUIDV4); + }); + + it('outputs an array of UUIDs', () => { + const ids = uuids({ count: 11 }); + + expect(ids.length).toEqual(11); + expect(ids.every(id => UUIDV4.test(id))).toEqual(true); + }); + + it.each` + seeds | uuid + ${['some', 'special', 'seed']} | ${'6fa53e51-0f70-4072-9c84-1c1eee1b9934'} + ${['magic']} | ${'fafae8cd-7083-44f3-b82d-43b30bd27486'} + ${['seeded']} | ${'e06ed291-46c5-4e42-836b-e7c772d48b49'} + ${['GitLab']} | ${'a1826a44-316c-480e-a93d-8cdfeb36617c'} + ${['JavaScript']} | ${'12dfb297-1560-4c38-9775-7178ef8472fb'} + ${[99, 169834, 2619]} | ${'3ecc8ad6-5b7c-4c9b-94a8-c7271c2fa083'} + ${[12]} | ${'2777374b-723b-469b-bd73-e586df964cfd'} + ${[9876, 'mixed!', 7654]} | ${'865212e0-4a16-4934-96f9-103cf36a6931'} + ${[123, 1234, 12345, 6]} | ${'40aa2ee6-0a11-4e67-8f09-72f5eba04244'} + ${[0]} | ${'8c7f0aac-97c4-4a2f-b716-a675d821ccc0'} + `( + 'should always output the UUID $uuid when the options.seeds argument is $seeds', + ({ uuid, seeds }) => { + expect(uuids({ seeds })[0]).toEqual(uuid); + }, + ); + + describe('unseeded UUID randomness', () => { + const nonRandom = Array(6) + .fill(0) + .map((_, i) => uuids({ seeds: [i] })[0]); + const random = uuids({ count: 6 }); + const moreRandom = uuids({ count: 6 }); + + it('is different from a seeded result', () => { + random.forEach((id, i) => { + expect(id).not.toEqual(nonRandom[i]); + }); + }); + + it('is different from other random results', () => { + random.forEach((id, i) => { + expect(id).not.toEqual(moreRandom[i]); + }); + }); + + it('never produces any duplicates', () => { + expect(new Set(random).size).toEqual(random.length); + }); + }); + + it.each` + seed | sequence + ${'GitLab'} | ${SEQUENCE_FOR_GITLAB_SEED} + ${12345} | ${SEQUENCE_FOR_12345_SEED} + `( + 'should output the same sequence of UUIDs for the given seed "$seed"', + ({ seed, sequence }) => { + expect(uuids({ seeds: [seed], count: 5 })).toEqual(sequence); + }, + ); + }); +}); diff --git a/spec/frontend/droplab/drop_down_spec.js b/spec/frontend/droplab/drop_down_spec.js new file mode 100644 index 00000000000..d33d6bb70f1 --- /dev/null +++ b/spec/frontend/droplab/drop_down_spec.js @@ -0,0 +1,662 @@ +import DropDown from '~/droplab/drop_down'; +import utils from '~/droplab/utils'; +import { SELECTED_CLASS } from '~/droplab/constants'; + +describe('DropLab DropDown', () => { + let testContext; + + beforeEach(() => { + testContext = {}; + }); + + describe('class constructor', () => { + beforeEach(() => { + jest.spyOn(DropDown.prototype, 'getItems').mockImplementation(() => {}); + jest.spyOn(DropDown.prototype, 'initTemplateString').mockImplementation(() => {}); + jest.spyOn(DropDown.prototype, 'addEvents').mockImplementation(() => {}); + + testContext.list = { innerHTML: 'innerHTML' }; + testContext.dropdown = new DropDown(testContext.list); + }); + + it('sets the .hidden property to true', () => { + expect(testContext.dropdown.hidden).toBe(true); + }); + + it('sets the .list property', () => { + expect(testContext.dropdown.list).toBe(testContext.list); + }); + + it('calls .getItems', () => { + expect(DropDown.prototype.getItems).toHaveBeenCalled(); + }); + + it('calls .initTemplateString', () => { + expect(DropDown.prototype.initTemplateString).toHaveBeenCalled(); + }); + + it('calls .addEvents', () => { + expect(DropDown.prototype.addEvents).toHaveBeenCalled(); + }); + + it('sets the .initialState property to the .list.innerHTML', () => { + expect(testContext.dropdown.initialState).toBe(testContext.list.innerHTML); + }); + + describe('if the list argument is a string', () => { + beforeEach(() => { + testContext.element = {}; + testContext.selector = '.selector'; + + jest.spyOn(Document.prototype, 'querySelector').mockReturnValue(testContext.element); + + testContext.dropdown = new DropDown(testContext.selector); + }); + + it('calls .querySelector with the selector string', () => { + expect(Document.prototype.querySelector).toHaveBeenCalledWith(testContext.selector); + }); + + it('sets the .list property element', () => { + expect(testContext.dropdown.list).toBe(testContext.element); + }); + }); + }); + + describe('getItems', () => { + beforeEach(() => { + testContext.list = { querySelectorAll: () => {} }; + testContext.dropdown = { list: testContext.list }; + testContext.nodeList = []; + + jest.spyOn(testContext.list, 'querySelectorAll').mockReturnValue(testContext.nodeList); + + testContext.getItems = DropDown.prototype.getItems.call(testContext.dropdown); + }); + + it('calls .querySelectorAll with a list item query', () => { + expect(testContext.list.querySelectorAll).toHaveBeenCalledWith('li'); + }); + + it('sets the .items property to the returned list items', () => { + expect(testContext.dropdown.items).toEqual(expect.any(Array)); + }); + + it('returns the .items', () => { + expect(testContext.getItems).toEqual(expect.any(Array)); + }); + }); + + describe('initTemplateString', () => { + beforeEach(() => { + testContext.items = [{ outerHTML: '<a></a>' }, { outerHTML: '<img>' }]; + testContext.dropdown = { items: testContext.items }; + + DropDown.prototype.initTemplateString.call(testContext.dropdown); + }); + + it('should set .templateString to the last items .outerHTML', () => { + expect(testContext.dropdown.templateString).toBe(testContext.items[1].outerHTML); + }); + + it('should not set .templateString to a non-last items .outerHTML', () => { + expect(testContext.dropdown.templateString).not.toBe(testContext.items[0].outerHTML); + }); + + describe('if .items is not set', () => { + beforeEach(() => { + testContext.dropdown = { getItems: () => {} }; + + jest.spyOn(testContext.dropdown, 'getItems').mockReturnValue([]); + + DropDown.prototype.initTemplateString.call(testContext.dropdown); + }); + + it('should call .getItems', () => { + expect(testContext.dropdown.getItems).toHaveBeenCalled(); + }); + }); + + describe('if items array is empty', () => { + beforeEach(() => { + testContext.dropdown = { items: [] }; + + DropDown.prototype.initTemplateString.call(testContext.dropdown); + }); + + it('should set .templateString to an empty string', () => { + expect(testContext.dropdown.templateString).toBe(''); + }); + }); + }); + + describe('clickEvent', () => { + beforeEach(() => { + testContext.classList = { + contains: jest.fn(), + }; + testContext.list = { dispatchEvent: () => {} }; + testContext.dropdown = { + hideOnClick: true, + hide: () => {}, + list: testContext.list, + addSelectedClass: () => {}, + }; + testContext.event = { + preventDefault: () => {}, + target: { + classList: testContext.classList, + closest: () => null, + }, + }; + + testContext.dummyListItem = document.createElement('li'); + jest.spyOn(testContext.event.target, 'closest').mockImplementation(selector => { + if (selector === 'li') { + return testContext.dummyListItem; + } + + return null; + }); + + jest.spyOn(testContext.dropdown, 'hide').mockImplementation(() => {}); + jest.spyOn(testContext.dropdown, 'addSelectedClass').mockImplementation(() => {}); + jest.spyOn(testContext.list, 'dispatchEvent').mockImplementation(() => {}); + jest.spyOn(testContext.event, 'preventDefault').mockImplementation(() => {}); + window.CustomEvent = jest.fn(); + testContext.classList.contains.mockReturnValue(false); + }); + + describe('normal click event', () => { + beforeEach(() => { + DropDown.prototype.clickEvent.call(testContext.dropdown, testContext.event); + }); + it('should call event.target.closest', () => { + expect(testContext.event.target.closest).toHaveBeenCalledWith('.droplab-item-ignore'); + expect(testContext.event.target.closest).toHaveBeenCalledWith('li'); + }); + + it('should call addSelectedClass', () => { + expect(testContext.dropdown.addSelectedClass).toHaveBeenCalledWith( + testContext.dummyListItem, + ); + }); + + it('should call .preventDefault', () => { + expect(testContext.event.preventDefault).toHaveBeenCalled(); + }); + + it('should call .hide', () => { + expect(testContext.dropdown.hide).toHaveBeenCalled(); + }); + + it('should construct CustomEvent', () => { + expect(window.CustomEvent).toHaveBeenCalledWith('click.dl', expect.any(Object)); + }); + + it('should call .dispatchEvent with the customEvent', () => { + expect(testContext.list.dispatchEvent).toHaveBeenCalledWith({}); + }); + }); + + describe('if the target is a UL element', () => { + beforeEach(() => { + testContext.event.target = document.createElement('ul'); + + jest.spyOn(testContext.event.target, 'closest').mockImplementation(() => {}); + }); + + it('should return immediately', () => { + DropDown.prototype.clickEvent.call(testContext.dropdown, testContext.event); + + expect(testContext.event.target.closest).not.toHaveBeenCalled(); + expect(testContext.dropdown.addSelectedClass).not.toHaveBeenCalled(); + }); + }); + + describe('if the target has the droplab-item-ignore class', () => { + beforeEach(() => { + testContext.ignoredButton = document.createElement('button'); + testContext.ignoredButton.classList.add('droplab-item-ignore'); + testContext.event.target = testContext.ignoredButton; + + jest.spyOn(testContext.ignoredButton, 'closest'); + }); + + it('does not select element', () => { + DropDown.prototype.clickEvent.call(testContext.dropdown, testContext.event); + + expect(testContext.ignoredButton.closest.mock.calls.length).toBe(1); + expect(testContext.ignoredButton.closest).toHaveBeenCalledWith('.droplab-item-ignore'); + expect(testContext.dropdown.addSelectedClass).not.toHaveBeenCalled(); + }); + }); + + describe('if no selected element exists', () => { + beforeEach(() => { + testContext.event.preventDefault.mockReset(); + testContext.dummyListItem = null; + }); + + it('should return before .preventDefault is called', () => { + DropDown.prototype.clickEvent.call(testContext.dropdown, testContext.event); + + expect(testContext.event.preventDefault).not.toHaveBeenCalled(); + expect(testContext.dropdown.addSelectedClass).not.toHaveBeenCalled(); + }); + }); + + describe('if hideOnClick is false', () => { + beforeEach(() => { + testContext.dropdown.hideOnClick = false; + testContext.dropdown.hide.mockReset(); + }); + + it('should not call .hide', () => { + DropDown.prototype.clickEvent.call(testContext.dropdown, testContext.event); + + expect(testContext.dropdown.hide).not.toHaveBeenCalled(); + }); + }); + }); + + describe('addSelectedClass', () => { + beforeEach(() => { + testContext.items = Array(4).forEach((item, i) => { + testContext.items[i] = { classList: { add: () => {} } }; + jest.spyOn(testContext.items[i].classList, 'add').mockImplementation(() => {}); + }); + testContext.selected = { classList: { add: () => {} } }; + testContext.dropdown = { removeSelectedClasses: () => {} }; + + jest.spyOn(testContext.dropdown, 'removeSelectedClasses').mockImplementation(() => {}); + jest.spyOn(testContext.selected.classList, 'add').mockImplementation(() => {}); + + DropDown.prototype.addSelectedClass.call(testContext.dropdown, testContext.selected); + }); + + it('should call .removeSelectedClasses', () => { + expect(testContext.dropdown.removeSelectedClasses).toHaveBeenCalled(); + }); + + it('should call .classList.add', () => { + expect(testContext.selected.classList.add).toHaveBeenCalledWith(SELECTED_CLASS); + }); + }); + + describe('removeSelectedClasses', () => { + beforeEach(() => { + testContext.items = [...Array(4)]; + testContext.items.forEach((item, i) => { + testContext.items[i] = { classList: { add: jest.fn(), remove: jest.fn() } }; + }); + testContext.dropdown = { items: testContext.items }; + + DropDown.prototype.removeSelectedClasses.call(testContext.dropdown); + }); + + it('should call .classList.remove for all items', () => { + testContext.items.forEach((_, i) => { + expect(testContext.items[i].classList.remove).toHaveBeenCalledWith(SELECTED_CLASS); + }); + }); + + describe('if .items is not set', () => { + beforeEach(() => { + testContext.dropdown = { getItems: () => {} }; + + jest.spyOn(testContext.dropdown, 'getItems').mockReturnValue([]); + + DropDown.prototype.removeSelectedClasses.call(testContext.dropdown); + }); + + it('should call .getItems', () => { + expect(testContext.dropdown.getItems).toHaveBeenCalled(); + }); + }); + }); + + describe('addEvents', () => { + beforeEach(() => { + testContext.list = { + addEventListener: () => {}, + querySelectorAll: () => [], + }; + testContext.dropdown = { + list: testContext.list, + clickEvent: () => {}, + closeDropdown: () => {}, + eventWrapper: {}, + }; + }); + + it('should call .addEventListener', () => { + jest.spyOn(testContext.list, 'addEventListener').mockImplementation(() => {}); + + DropDown.prototype.addEvents.call(testContext.dropdown); + + expect(testContext.list.addEventListener).toHaveBeenCalledWith('click', expect.any(Function)); + expect(testContext.list.addEventListener).toHaveBeenCalledWith('keyup', expect.any(Function)); + }); + }); + + describe('setData', () => { + beforeEach(() => { + testContext.dropdown = { render: () => {} }; + testContext.data = ['data']; + + jest.spyOn(testContext.dropdown, 'render').mockImplementation(() => {}); + + DropDown.prototype.setData.call(testContext.dropdown, testContext.data); + }); + + it('should set .data', () => { + expect(testContext.dropdown.data).toBe(testContext.data); + }); + + it('should call .render with the .data', () => { + expect(testContext.dropdown.render).toHaveBeenCalledWith(testContext.data); + }); + }); + + describe('addData', () => { + beforeEach(() => { + testContext.dropdown = { render: () => {}, data: ['data1'] }; + testContext.data = ['data2']; + + jest.spyOn(testContext.dropdown, 'render').mockImplementation(() => {}); + jest.spyOn(Array.prototype, 'concat'); + + DropDown.prototype.addData.call(testContext.dropdown, testContext.data); + }); + + it('should call .concat with data', () => { + expect(Array.prototype.concat).toHaveBeenCalledWith(testContext.data); + }); + + it('should set .data with concatination', () => { + expect(testContext.dropdown.data).toStrictEqual(['data1', 'data2']); + }); + + it('should call .render with the .data', () => { + expect(testContext.dropdown.render).toHaveBeenCalledWith(['data1', 'data2']); + }); + + describe('if .data is undefined', () => { + beforeEach(() => { + testContext.dropdown = { render: () => {}, data: undefined }; + testContext.data = ['data2']; + + jest.spyOn(testContext.dropdown, 'render').mockImplementation(() => {}); + + DropDown.prototype.addData.call(testContext.dropdown, testContext.data); + }); + + it('should set .data with concatination', () => { + expect(testContext.dropdown.data).toStrictEqual(['data2']); + }); + }); + }); + + describe('render', () => { + beforeEach(() => { + testContext.renderableList = {}; + testContext.list = { + querySelector: q => { + if (q === '.filter-dropdown-loading') { + return false; + } + return testContext.renderableList; + }, + dispatchEvent: () => {}, + }; + testContext.dropdown = { renderChildren: () => {}, list: testContext.list }; + testContext.data = [0, 1]; + testContext.customEvent = {}; + + jest.spyOn(testContext.dropdown, 'renderChildren').mockImplementation(data => data); + jest.spyOn(testContext.list, 'dispatchEvent').mockImplementation(() => {}); + jest.spyOn(testContext.data, 'map'); + jest.spyOn(window, 'CustomEvent').mockReturnValue(testContext.customEvent); + + DropDown.prototype.render.call(testContext.dropdown, testContext.data); + }); + + it('should call .map', () => { + expect(testContext.data.map).toHaveBeenCalledWith(expect.any(Function)); + }); + + it('should call .renderChildren for each data item', () => { + expect(testContext.dropdown.renderChildren.mock.calls.length).toBe(testContext.data.length); + }); + + it('sets the renderableList .innerHTML', () => { + expect(testContext.renderableList.innerHTML).toBe('01'); + }); + + it('should call render.dl', () => { + expect(window.CustomEvent).toHaveBeenCalledWith('render.dl', expect.any(Object)); + }); + + it('should call dispatchEvent with the customEvent', () => { + expect(testContext.list.dispatchEvent).toHaveBeenCalledWith(testContext.customEvent); + }); + + describe('if no data argument is passed', () => { + beforeEach(() => { + testContext.data.map.mockReset(); + testContext.dropdown.renderChildren.mockReset(); + + DropDown.prototype.render.call(testContext.dropdown, undefined); + }); + + it('should not call .map', () => { + expect(testContext.data.map).not.toHaveBeenCalled(); + }); + + it('should not call .renderChildren', () => { + expect(testContext.dropdown.renderChildren).not.toHaveBeenCalled(); + }); + }); + + describe('if no dynamic list is present', () => { + beforeEach(() => { + testContext.list = { querySelector: () => {}, dispatchEvent: () => {} }; + testContext.dropdown = { renderChildren: () => {}, list: testContext.list }; + testContext.data = [0, 1]; + + jest.spyOn(testContext.dropdown, 'renderChildren').mockImplementation(data => data); + jest.spyOn(testContext.list, 'querySelector').mockImplementation(() => {}); + jest.spyOn(testContext.data, 'map'); + + DropDown.prototype.render.call(testContext.dropdown, testContext.data); + }); + + it('sets the .list .innerHTML', () => { + expect(testContext.list.innerHTML).toBe('01'); + }); + }); + }); + + describe('renderChildren', () => { + beforeEach(() => { + testContext.templateString = 'templateString'; + testContext.dropdown = { templateString: testContext.templateString }; + testContext.data = { droplab_hidden: true }; + testContext.html = 'html'; + testContext.template = { firstChild: { outerHTML: 'outerHTML', style: {} } }; + + jest.spyOn(utils, 'template').mockReturnValue(testContext.html); + jest.spyOn(document, 'createElement').mockReturnValue(testContext.template); + jest.spyOn(DropDown, 'setImagesSrc').mockImplementation(() => {}); + + testContext.renderChildren = DropDown.prototype.renderChildren.call( + testContext.dropdown, + testContext.data, + ); + }); + + it('should call utils.t with .templateString and data', () => { + expect(utils.template).toHaveBeenCalledWith(testContext.templateString, testContext.data); + }); + + it('should call document.createElement', () => { + expect(document.createElement).toHaveBeenCalledWith('div'); + }); + + it('should set the templates .innerHTML to the HTML', () => { + expect(testContext.template.innerHTML).toBe(testContext.html); + }); + + it('should call .setImagesSrc with the template', () => { + expect(DropDown.setImagesSrc).toHaveBeenCalledWith(testContext.template); + }); + + it('should set the template display to none', () => { + expect(testContext.template.firstChild.style.display).toBe('none'); + }); + + it('should return the templates .firstChild.outerHTML', () => { + expect(testContext.renderChildren).toBe(testContext.template.firstChild.outerHTML); + }); + + describe('if droplab_hidden is false', () => { + beforeEach(() => { + testContext.data = { droplab_hidden: false }; + testContext.renderChildren = DropDown.prototype.renderChildren.call( + testContext.dropdown, + testContext.data, + ); + }); + + it('should set the template display to block', () => { + expect(testContext.template.firstChild.style.display).toBe('block'); + }); + }); + }); + + describe('setImagesSrc', () => { + beforeEach(() => { + testContext.template = { querySelectorAll: () => {} }; + + jest.spyOn(testContext.template, 'querySelectorAll').mockReturnValue([]); + + DropDown.setImagesSrc(testContext.template); + }); + + it('should call .querySelectorAll', () => { + expect(testContext.template.querySelectorAll).toHaveBeenCalledWith('img[data-src]'); + }); + }); + + describe('show', () => { + beforeEach(() => { + testContext.list = { style: {} }; + testContext.dropdown = { list: testContext.list, hidden: true }; + + DropDown.prototype.show.call(testContext.dropdown); + }); + + it('it should set .list display to block', () => { + expect(testContext.list.style.display).toBe('block'); + }); + + it('it should set .hidden to false', () => { + expect(testContext.dropdown.hidden).toBe(false); + }); + + describe('if .hidden is false', () => { + beforeEach(() => { + testContext.list = { style: {} }; + testContext.dropdown = { list: testContext.list, hidden: false }; + + testContext.show = DropDown.prototype.show.call(testContext.dropdown); + }); + + it('should return undefined', () => { + expect(testContext.show).toBeUndefined(); + }); + + it('should not set .list display to block', () => { + expect(testContext.list.style.display).not.toBe('block'); + }); + }); + }); + + describe('hide', () => { + beforeEach(() => { + testContext.list = { style: {} }; + testContext.dropdown = { list: testContext.list }; + + DropDown.prototype.hide.call(testContext.dropdown); + }); + + it('it should set .list display to none', () => { + expect(testContext.list.style.display).toBe('none'); + }); + + it('it should set .hidden to true', () => { + expect(testContext.dropdown.hidden).toBe(true); + }); + }); + + describe('toggle', () => { + beforeEach(() => { + testContext.hidden = true; + testContext.dropdown = { hidden: testContext.hidden, show: () => {}, hide: () => {} }; + + jest.spyOn(testContext.dropdown, 'show').mockImplementation(() => {}); + jest.spyOn(testContext.dropdown, 'hide').mockImplementation(() => {}); + + DropDown.prototype.toggle.call(testContext.dropdown); + }); + + it('should call .show', () => { + expect(testContext.dropdown.show).toHaveBeenCalled(); + }); + + describe('if .hidden is false', () => { + beforeEach(() => { + testContext.hidden = false; + testContext.dropdown = { hidden: testContext.hidden, show: () => {}, hide: () => {} }; + + jest.spyOn(testContext.dropdown, 'show').mockImplementation(() => {}); + jest.spyOn(testContext.dropdown, 'hide').mockImplementation(() => {}); + + DropDown.prototype.toggle.call(testContext.dropdown); + }); + + it('should call .hide', () => { + expect(testContext.dropdown.hide).toHaveBeenCalled(); + }); + }); + }); + + describe('destroy', () => { + beforeEach(() => { + testContext.list = { removeEventListener: () => {} }; + testContext.eventWrapper = { clickEvent: 'clickEvent' }; + testContext.dropdown = { + list: testContext.list, + hide: () => {}, + eventWrapper: testContext.eventWrapper, + }; + + jest.spyOn(testContext.list, 'removeEventListener').mockImplementation(() => {}); + jest.spyOn(testContext.dropdown, 'hide').mockImplementation(() => {}); + + DropDown.prototype.destroy.call(testContext.dropdown); + }); + + it('it should call .hide', () => { + expect(testContext.dropdown.hide).toHaveBeenCalled(); + }); + + it('it should call .removeEventListener', () => { + expect(testContext.list.removeEventListener).toHaveBeenCalledWith( + 'click', + testContext.eventWrapper.clickEvent, + ); + }); + }); +}); diff --git a/spec/frontend/droplab/hook_spec.js b/spec/frontend/droplab/hook_spec.js new file mode 100644 index 00000000000..11488cab521 --- /dev/null +++ b/spec/frontend/droplab/hook_spec.js @@ -0,0 +1,94 @@ +import Hook from '~/droplab/hook'; +import DropDown from '~/droplab/drop_down'; + +jest.mock('~/droplab/drop_down', () => jest.fn()); + +describe('Hook', () => { + let testContext; + + beforeEach(() => { + testContext = {}; + }); + + describe('class constructor', () => { + beforeEach(() => { + testContext.trigger = { id: 'id' }; + testContext.list = {}; + testContext.plugins = {}; + testContext.config = {}; + + testContext.hook = new Hook( + testContext.trigger, + testContext.list, + testContext.plugins, + testContext.config, + ); + }); + + it('should set .trigger', () => { + expect(testContext.hook.trigger).toBe(testContext.trigger); + }); + + it('should set .list', () => { + expect(testContext.hook.list).toEqual({}); + }); + + it('should call DropDown constructor', () => { + expect(DropDown).toHaveBeenCalledWith(testContext.list, testContext.config); + }); + + it('should set .type', () => { + expect(testContext.hook.type).toBe('Hook'); + }); + + it('should set .event', () => { + expect(testContext.hook.event).toBe('click'); + }); + + it('should set .plugins', () => { + expect(testContext.hook.plugins).toBe(testContext.plugins); + }); + + it('should set .config', () => { + expect(testContext.hook.config).toBe(testContext.config); + }); + + it('should set .id', () => { + expect(testContext.hook.id).toBe(testContext.trigger.id); + }); + + describe('if config argument is undefined', () => { + beforeEach(() => { + testContext.config = undefined; + + testContext.hook = new Hook( + testContext.trigger, + testContext.list, + testContext.plugins, + testContext.config, + ); + }); + + it('should set .config to an empty object', () => { + expect(testContext.hook.config).toEqual({}); + }); + }); + + describe('if plugins argument is undefined', () => { + beforeEach(() => { + testContext.plugins = undefined; + + testContext.hook = new Hook( + testContext.trigger, + testContext.list, + testContext.plugins, + testContext.config, + ); + }); + + it('should set .plugins to an empty array', () => { + expect(testContext.hook.plugins).toEqual([]); + }); + }); + }); +}); diff --git a/spec/frontend/droplab/plugins/input_setter_spec.js b/spec/frontend/droplab/plugins/input_setter_spec.js new file mode 100644 index 00000000000..eebde018fa1 --- /dev/null +++ b/spec/frontend/droplab/plugins/input_setter_spec.js @@ -0,0 +1,259 @@ +import InputSetter from '~/droplab/plugins/input_setter'; + +describe('InputSetter', () => { + let testContext; + + beforeEach(() => { + testContext = {}; + }); + + describe('init', () => { + beforeEach(() => { + testContext.config = { InputSetter: {} }; + testContext.hook = { config: testContext.config }; + testContext.inputSetter = { + addEvents: jest.fn(), + }; + + InputSetter.init.call(testContext.inputSetter, testContext.hook); + }); + + it('should set .hook', () => { + expect(testContext.inputSetter.hook).toBe(testContext.hook); + }); + + it('should set .config', () => { + expect(testContext.inputSetter.config).toBe(testContext.config.InputSetter); + }); + + it('should set .eventWrapper', () => { + expect(testContext.inputSetter.eventWrapper).toEqual({}); + }); + + it('should call .addEvents', () => { + expect(testContext.inputSetter.addEvents).toHaveBeenCalled(); + }); + + describe('if config.InputSetter is not set', () => { + beforeEach(() => { + testContext.config = { InputSetter: undefined }; + testContext.hook = { config: testContext.config }; + + InputSetter.init.call(testContext.inputSetter, testContext.hook); + }); + + it('should set .config to an empty object', () => { + expect(testContext.inputSetter.config).toEqual({}); + }); + + it('should set hook.config to an empty object', () => { + expect(testContext.hook.config.InputSetter).toEqual({}); + }); + }); + }); + + describe('addEvents', () => { + beforeEach(() => { + testContext.hook = { + list: { + list: { + addEventListener: jest.fn(), + }, + }, + }; + testContext.inputSetter = { eventWrapper: {}, hook: testContext.hook, setInputs: () => {} }; + + InputSetter.addEvents.call(testContext.inputSetter); + }); + + it('should set .eventWrapper.setInputs', () => { + expect(testContext.inputSetter.eventWrapper.setInputs).toEqual(expect.any(Function)); + }); + + it('should call .addEventListener', () => { + expect(testContext.hook.list.list.addEventListener).toHaveBeenCalledWith( + 'click.dl', + testContext.inputSetter.eventWrapper.setInputs, + ); + }); + }); + + describe('removeEvents', () => { + beforeEach(() => { + testContext.hook = { + list: { + list: { + removeEventListener: jest.fn(), + }, + }, + }; + testContext.eventWrapper = { + setInputs: jest.fn(), + }; + testContext.inputSetter = { eventWrapper: testContext.eventWrapper, hook: testContext.hook }; + + InputSetter.removeEvents.call(testContext.inputSetter); + }); + + it('should call .removeEventListener', () => { + expect(testContext.hook.list.list.removeEventListener).toHaveBeenCalledWith( + 'click.dl', + testContext.eventWrapper.setInputs, + ); + }); + }); + + describe('setInputs', () => { + beforeEach(() => { + testContext.event = { detail: { selected: {} } }; + testContext.config = [0, 1]; + testContext.inputSetter = { config: testContext.config, setInput: () => {} }; + + jest.spyOn(testContext.inputSetter, 'setInput').mockImplementation(() => {}); + + InputSetter.setInputs.call(testContext.inputSetter, testContext.event); + }); + + it('should call .setInput for each config element', () => { + const allArgs = testContext.inputSetter.setInput.mock.calls; + + expect(allArgs.length).toEqual(2); + + allArgs.forEach((args, i) => { + expect(args[0]).toBe(testContext.config[i]); + expect(args[1]).toBe(testContext.event.detail.selected); + }); + }); + + describe('if config isnt an array', () => { + beforeEach(() => { + testContext.inputSetter = { config: {}, setInput: () => {} }; + + InputSetter.setInputs.call(testContext.inputSetter, testContext.event); + }); + + it('should set .config to an array with .config as the first element', () => { + expect(testContext.inputSetter.config).toEqual([{}]); + }); + }); + }); + + describe('setInput', () => { + beforeEach(() => { + testContext.selectedItem = { getAttribute: () => {} }; + testContext.input = { value: 'oldValue', tagName: 'INPUT', hasAttribute: () => {} }; + testContext.config = { valueAttribute: {}, input: testContext.input }; + testContext.inputSetter = { hook: { trigger: {} } }; + testContext.newValue = 'newValue'; + + jest.spyOn(testContext.selectedItem, 'getAttribute').mockReturnValue(testContext.newValue); + jest.spyOn(testContext.input, 'hasAttribute').mockReturnValue(false); + + InputSetter.setInput.call( + testContext.inputSetter, + testContext.config, + testContext.selectedItem, + ); + }); + + it('should call .getAttribute', () => { + expect(testContext.selectedItem.getAttribute).toHaveBeenCalledWith( + testContext.config.valueAttribute, + ); + }); + + it('should call .hasAttribute', () => { + expect(testContext.input.hasAttribute).toHaveBeenCalledWith(undefined); + }); + + it('should set the value of the input', () => { + expect(testContext.input.value).toBe(testContext.newValue); + }); + + describe('if no config.input is provided', () => { + beforeEach(() => { + testContext.config = { valueAttribute: {} }; + testContext.trigger = { value: 'oldValue', tagName: 'INPUT', hasAttribute: () => {} }; + testContext.inputSetter = { hook: { trigger: testContext.trigger } }; + + InputSetter.setInput.call( + testContext.inputSetter, + testContext.config, + testContext.selectedItem, + ); + }); + + it('should set the value of the hook.trigger', () => { + expect(testContext.trigger.value).toBe(testContext.newValue); + }); + }); + + describe('if the input tag is not INPUT', () => { + beforeEach(() => { + testContext.input = { textContent: 'oldValue', tagName: 'SPAN', hasAttribute: () => {} }; + testContext.config = { valueAttribute: {}, input: testContext.input }; + + InputSetter.setInput.call( + testContext.inputSetter, + testContext.config, + testContext.selectedItem, + ); + }); + + it('should set the textContent of the input', () => { + expect(testContext.input.textContent).toBe(testContext.newValue); + }); + }); + + describe('if there is an inputAttribute', () => { + beforeEach(() => { + testContext.selectedItem = { getAttribute: () => {} }; + testContext.input = { id: 'oldValue', hasAttribute: () => {}, setAttribute: () => {} }; + testContext.inputSetter = { hook: { trigger: {} } }; + testContext.newValue = 'newValue'; + testContext.inputAttribute = 'id'; + testContext.config = { + valueAttribute: {}, + input: testContext.input, + inputAttribute: testContext.inputAttribute, + }; + + jest.spyOn(testContext.selectedItem, 'getAttribute').mockReturnValue(testContext.newValue); + jest.spyOn(testContext.input, 'hasAttribute').mockReturnValue(true); + jest.spyOn(testContext.input, 'setAttribute').mockImplementation(() => {}); + + InputSetter.setInput.call( + testContext.inputSetter, + testContext.config, + testContext.selectedItem, + ); + }); + + it('should call setAttribute', () => { + expect(testContext.input.setAttribute).toHaveBeenCalledWith( + testContext.inputAttribute, + testContext.newValue, + ); + }); + + it('should not set the value or textContent of the input', () => { + expect(testContext.input.value).not.toBe('newValue'); + expect(testContext.input.textContent).not.toBe('newValue'); + }); + }); + }); + + describe('destroy', () => { + beforeEach(() => { + testContext.inputSetter = { + removeEvents: jest.fn(), + }; + + InputSetter.destroy.call(testContext.inputSetter); + }); + + it('should call .removeEvents', () => { + expect(testContext.inputSetter.removeEvents).toHaveBeenCalled(); + }); + }); +}); diff --git a/spec/frontend/dropzone_input_spec.js b/spec/frontend/dropzone_input_spec.js new file mode 100644 index 00000000000..688b9164e5f --- /dev/null +++ b/spec/frontend/dropzone_input_spec.js @@ -0,0 +1,97 @@ +import $ from 'jquery'; +import mock from 'xhr-mock'; +import { TEST_HOST } from 'spec/test_constants'; +import dropzoneInput from '~/dropzone_input'; +import PasteMarkdownTable from '~/behaviors/markdown/paste_markdown_table'; +import waitForPromises from 'helpers/wait_for_promises'; + +const TEST_FILE = new File([], 'somefile.jpg'); +TEST_FILE.upload = {}; + +const TEST_UPLOAD_PATH = `${TEST_HOST}/upload/file`; +const TEST_ERROR_MESSAGE = 'A big error occurred!'; +const TEMPLATE = `<form class="gfm-form" data-uploads-path="${TEST_UPLOAD_PATH}"> + <textarea class="js-gfm-input"></textarea> + <div class="uploading-error-message"></div> +</form>`; + +describe('dropzone_input', () => { + it('returns null when failed to initialize', () => { + const dropzone = dropzoneInput($('<form class="gfm-form"></form>')); + + expect(dropzone).toBeNull(); + }); + + it('returns valid dropzone when successfully initialize', () => { + const dropzone = dropzoneInput($(TEMPLATE)); + + expect(dropzone.version).toBeTruthy(); + }); + + describe('handlePaste', () => { + beforeEach(() => { + loadFixtures('issues/new-issue.html'); + + const form = $('#new_issue'); + form.data('uploads-path', TEST_UPLOAD_PATH); + dropzoneInput(form); + }); + + it('pastes Markdown tables', () => { + const event = $.Event('paste'); + const origEvent = new Event('paste'); + + origEvent.clipboardData = { + types: ['text/plain', 'text/html'], + getData: () => '<table><tr><td>Hello World</td></tr></table>', + items: [], + }; + event.originalEvent = origEvent; + + jest.spyOn(PasteMarkdownTable.prototype, 'isTable'); + jest.spyOn(PasteMarkdownTable.prototype, 'convertToTableMarkdown'); + + $('.js-gfm-input').trigger(event); + + expect(PasteMarkdownTable.prototype.isTable).toHaveBeenCalled(); + expect(PasteMarkdownTable.prototype.convertToTableMarkdown).toHaveBeenCalled(); + }); + }); + + describe('shows error message', () => { + let form; + let dropzone; + + beforeEach(() => { + mock.setup(); + + form = $(TEMPLATE); + + dropzone = dropzoneInput(form); + }); + + afterEach(() => { + mock.teardown(); + }); + + beforeEach(() => {}); + + it.each` + responseType | responseBody + ${'application/json'} | ${JSON.stringify({ message: TEST_ERROR_MESSAGE })} + ${'text/plain'} | ${TEST_ERROR_MESSAGE} + `('when AJAX fails with json', ({ responseType, responseBody }) => { + mock.post(TEST_UPLOAD_PATH, { + status: 400, + body: responseBody, + headers: { 'Content-Type': responseType }, + }); + + dropzone.processFile(TEST_FILE); + + return waitForPromises().then(() => { + expect(form.find('.uploading-error-message').text()).toEqual(TEST_ERROR_MESSAGE); + }); + }); + }); +}); diff --git a/spec/frontend/environment.js b/spec/frontend/environment.js index cd4fae60049..08da34aa27a 100644 --- a/spec/frontend/environment.js +++ b/spec/frontend/environment.js @@ -2,7 +2,7 @@ const path = require('path'); const { ErrorWithStack } = require('jest-util'); -const JSDOMEnvironment = require('jest-environment-jsdom'); +const JSDOMEnvironment = require('jest-environment-jsdom-sixteen'); const ROOT_PATH = path.resolve(__dirname, '../..'); diff --git a/spec/frontend/environments/environments_app_spec.js b/spec/frontend/environments/environments_app_spec.js index f3d2bd2462e..c0bf0dca176 100644 --- a/spec/frontend/environments/environments_app_spec.js +++ b/spec/frontend/environments/environments_app_spec.js @@ -53,7 +53,7 @@ describe('Environment', () => { describe('without environments', () => { beforeEach(() => { mockRequest(200, { environments: [] }); - return createWrapper(true); + return createWrapper(); }); it('should render the empty state', () => { @@ -118,7 +118,7 @@ describe('Environment', () => { describe('unsuccessful request', () => { beforeEach(() => { mockRequest(500, {}); - return createWrapper(true); + return createWrapper(); }); it('should render empty state', () => { diff --git a/spec/frontend/error_tracking/components/error_details_spec.js b/spec/frontend/error_tracking/components/error_details_spec.js index adbbc04ce78..fd2164d05fc 100644 --- a/spec/frontend/error_tracking/components/error_details_spec.js +++ b/spec/frontend/error_tracking/components/error_details_spec.js @@ -18,6 +18,12 @@ import { severityLevelVariant, errorStatus, } from '~/error_tracking/components/constants'; +import Tracking from '~/tracking'; +import { + trackClickErrorLinkToSentryOptions, + trackErrorDetailsViewsOptions, + trackErrorStatusUpdateOptions, +} from '~/error_tracking/utils'; jest.mock('~/flash'); @@ -30,12 +36,19 @@ describe('ErrorDetails', () => { let actions; let getters; let mocks; + const externalUrl = 'https://sentry.io/organizations/test-sentry-nk/issues/1/?project=1'; const findInput = name => { const inputs = wrapper.findAll(GlFormInput).filter(c => c.attributes('name') === name); return inputs.length ? inputs.at(0) : inputs; }; + const findUpdateIgnoreStatusButton = () => + wrapper.find('[data-testid="update-ignore-status-btn"]'); + const findUpdateResolveStatusButton = () => + wrapper.find('[data-testid="update-resolve-status-btn"]'); + const findExternalUrl = () => wrapper.find('[data-testid="external-url-link"]'); + function mountComponent() { wrapper = shallowMount(ErrorDetails, { stubs: { GlDeprecatedButton, GlSprintf }, @@ -57,7 +70,7 @@ describe('ErrorDetails', () => { beforeEach(() => { actions = { startPollingStacktrace: () => {}, - updateIgnoreStatus: jest.fn(), + updateIgnoreStatus: jest.fn().mockResolvedValue({}), updateResolveStatus: jest.fn().mockResolvedValue({ closed_issue_iid: 1 }), }; @@ -170,6 +183,9 @@ describe('ErrorDetails', () => { count: 12, userCount: 2, }, + stacktraceData: { + date_received: '2020-05-20', + }, }); }); @@ -235,7 +251,7 @@ describe('ErrorDetails', () => { }, }); return wrapper.vm.$nextTick().then(() => { - expect(wrapper.find(GlBadge).attributes('variant')).toEqual( + expect(wrapper.find(GlBadge).props('variant')).toEqual( severityLevelVariant[severityLevel[level]], ); }); @@ -249,7 +265,7 @@ describe('ErrorDetails', () => { }, }); return wrapper.vm.$nextTick().then(() => { - expect(wrapper.find(GlBadge).attributes('variant')).toEqual( + expect(wrapper.find(GlBadge).props('variant')).toEqual( severityLevelVariant[severityLevel.ERROR], ); }); @@ -302,11 +318,6 @@ describe('ErrorDetails', () => { }); describe('Status update', () => { - const findUpdateIgnoreStatusButton = () => - wrapper.find('[data-qa-selector="update_ignore_status_button"]'); - const findUpdateResolveStatusButton = () => - wrapper.find('[data-qa-selector="update_resolve_status_button"]'); - afterEach(() => { actions.updateIgnoreStatus.mockClear(); actions.updateResolveStatus.mockClear(); @@ -491,4 +502,49 @@ describe('ErrorDetails', () => { }); }); }); + + describe('Snowplow tracking', () => { + beforeEach(() => { + jest.spyOn(Tracking, 'event'); + mocks.$apollo.queries.error.loading = false; + mountComponent(); + wrapper.setData({ + error: { externalUrl }, + }); + }); + + it('should track detail page views', () => { + const { category, action } = trackErrorDetailsViewsOptions; + expect(Tracking.event).toHaveBeenCalledWith(category, action); + }); + + it('should track IGNORE status update', () => { + Tracking.event.mockClear(); + findUpdateIgnoreStatusButton().vm.$emit('click'); + setImmediate(() => { + const { category, action } = trackErrorStatusUpdateOptions('ignored'); + expect(Tracking.event).toHaveBeenCalledWith(category, action); + }); + }); + + it('should track RESOLVE status update', () => { + Tracking.event.mockClear(); + findUpdateResolveStatusButton().vm.$emit('click'); + setImmediate(() => { + const { category, action } = trackErrorStatusUpdateOptions('resolved'); + expect(Tracking.event).toHaveBeenCalledWith(category, action); + }); + }); + + it('should track external Sentry link views', () => { + Tracking.event.mockClear(); + findExternalUrl().trigger('click'); + setImmediate(() => { + const { category, action, label, property } = trackClickErrorLinkToSentryOptions( + externalUrl, + ); + expect(Tracking.event).toHaveBeenCalledWith(category, action, { label, property }); + }); + }); + }); }); diff --git a/spec/frontend/error_tracking/components/error_tracking_list_spec.js b/spec/frontend/error_tracking/components/error_tracking_list_spec.js index a6cb074f481..d88a412fb50 100644 --- a/spec/frontend/error_tracking/components/error_tracking_list_spec.js +++ b/spec/frontend/error_tracking/components/error_tracking_list_spec.js @@ -4,7 +4,9 @@ import { GlEmptyState, GlLoadingIcon, GlFormInput, GlPagination, GlDropdown } fr import stubChildren from 'helpers/stub_children'; import ErrorTrackingList from '~/error_tracking/components/error_tracking_list.vue'; import ErrorTrackingActions from '~/error_tracking/components/error_tracking_actions.vue'; +import { trackErrorListViewsOptions, trackErrorStatusUpdateOptions } from '~/error_tracking/utils'; import errorsList from './list_mock.json'; +import Tracking from '~/tracking'; const localVue = createLocalVue(); localVue.use(Vuex); @@ -460,4 +462,38 @@ describe('ErrorTrackingList', () => { }); }); }); + + describe('Snowplow tracking', () => { + beforeEach(() => { + jest.spyOn(Tracking, 'event'); + store.state.list.loading = false; + store.state.list.errors = errorsList; + mountComponent({ + stubs: { + GlTable: false, + GlLink: false, + GlDeprecatedButton: false, + }, + }); + }); + + it('should track list views', () => { + const { category, action } = trackErrorListViewsOptions; + expect(Tracking.event).toHaveBeenCalledWith(category, action); + }); + + it('should track status updates', () => { + Tracking.event.mockClear(); + const status = 'ignored'; + findErrorActions().vm.$emit('update-issue-status', { + errorId: 1, + status, + }); + + setImmediate(() => { + const { category, action } = trackErrorStatusUpdateOptions(status); + expect(Tracking.event).toHaveBeenCalledWith(category, action); + }); + }); + }); }); diff --git a/spec/frontend/filtered_search/filtered_search_dropdown_manager_spec.js b/spec/frontend/filtered_search/filtered_search_dropdown_manager_spec.js new file mode 100644 index 00000000000..e9ee69ca163 --- /dev/null +++ b/spec/frontend/filtered_search/filtered_search_dropdown_manager_spec.js @@ -0,0 +1,130 @@ +import axios from 'axios'; +import MockAdapter from 'axios-mock-adapter'; +import FilteredSearchDropdownManager from '~/filtered_search/filtered_search_dropdown_manager'; + +describe('Filtered Search Dropdown Manager', () => { + let mock; + + beforeEach(() => { + mock = new MockAdapter(axios); + mock.onGet().reply(200); + }); + + describe('addWordToInput', () => { + function getInputValue() { + return document.querySelector('.filtered-search').value; + } + + function setInputValue(value) { + document.querySelector('.filtered-search').value = value; + } + + beforeEach(() => { + setFixtures(` + <ul class="tokens-container"> + <li class="input-token"> + <input class="filtered-search"> + </li> + </ul> + `); + }); + + describe('input has no existing value', () => { + it('should add just tokenName', () => { + FilteredSearchDropdownManager.addWordToInput({ tokenName: 'milestone' }); + + const token = document.querySelector('.tokens-container .js-visual-token'); + + expect(token.classList.contains('filtered-search-token')).toEqual(true); + expect(token.querySelector('.name').textContent).toBe('milestone'); + expect(getInputValue()).toBe(''); + }); + + it('should add tokenName, tokenOperator, and tokenValue', () => { + FilteredSearchDropdownManager.addWordToInput({ tokenName: 'label' }); + + let token = document.querySelector('.tokens-container .js-visual-token'); + + expect(token.classList.contains('filtered-search-token')).toEqual(true); + expect(token.querySelector('.name').textContent).toBe('label'); + expect(getInputValue()).toBe(''); + + FilteredSearchDropdownManager.addWordToInput({ tokenName: 'label', tokenOperator: '=' }); + + token = document.querySelector('.tokens-container .js-visual-token'); + + expect(token.classList.contains('filtered-search-token')).toEqual(true); + expect(token.querySelector('.name').textContent).toBe('label'); + expect(token.querySelector('.operator').textContent).toBe('='); + expect(getInputValue()).toBe(''); + + FilteredSearchDropdownManager.addWordToInput({ + tokenName: 'label', + tokenOperator: '=', + tokenValue: 'none', + }); + // We have to get that reference again + // Because FilteredSearchDropdownManager deletes the previous token + token = document.querySelector('.tokens-container .js-visual-token'); + + expect(token.classList.contains('filtered-search-token')).toEqual(true); + expect(token.querySelector('.name').textContent).toBe('label'); + expect(token.querySelector('.operator').textContent).toBe('='); + expect(token.querySelector('.value').textContent).toBe('none'); + expect(getInputValue()).toBe(''); + }); + }); + + describe('input has existing value', () => { + it('should be able to just add tokenName', () => { + setInputValue('a'); + FilteredSearchDropdownManager.addWordToInput({ tokenName: 'author' }); + + const token = document.querySelector('.tokens-container .js-visual-token'); + + expect(token.classList.contains('filtered-search-token')).toEqual(true); + expect(token.querySelector('.name').textContent).toBe('author'); + expect(getInputValue()).toBe(''); + }); + + it('should replace tokenValue', () => { + FilteredSearchDropdownManager.addWordToInput({ tokenName: 'author' }); + FilteredSearchDropdownManager.addWordToInput({ tokenName: 'author', tokenOperator: '=' }); + + setInputValue('roo'); + FilteredSearchDropdownManager.addWordToInput({ + tokenName: null, + tokenOperator: '=', + tokenValue: '@root', + }); + + const token = document.querySelector('.tokens-container .js-visual-token'); + + expect(token.classList.contains('filtered-search-token')).toEqual(true); + expect(token.querySelector('.name').textContent).toBe('author'); + expect(token.querySelector('.operator').textContent).toBe('='); + expect(token.querySelector('.value').textContent).toBe('@root'); + expect(getInputValue()).toBe(''); + }); + + it('should add tokenValues containing spaces', () => { + FilteredSearchDropdownManager.addWordToInput({ tokenName: 'label' }); + + setInputValue('"test '); + FilteredSearchDropdownManager.addWordToInput({ + tokenName: 'label', + tokenOperator: '=', + tokenValue: '~\'"test me"\'', + }); + + const token = document.querySelector('.tokens-container .js-visual-token'); + + expect(token.classList.contains('filtered-search-token')).toEqual(true); + expect(token.querySelector('.name').textContent).toBe('label'); + expect(token.querySelector('.operator').textContent).toBe('='); + expect(token.querySelector('.value').textContent).toBe('~\'"test me"\''); + expect(getInputValue()).toBe(''); + }); + }); + }); +}); diff --git a/spec/frontend/filtered_search/filtered_search_visual_tokens_spec.js b/spec/frontend/filtered_search/filtered_search_visual_tokens_spec.js new file mode 100644 index 00000000000..e59ee925cc7 --- /dev/null +++ b/spec/frontend/filtered_search/filtered_search_visual_tokens_spec.js @@ -0,0 +1,732 @@ +import axios from 'axios'; +import MockAdapter from 'axios-mock-adapter'; +import FilteredSearchVisualTokens from '~/filtered_search/filtered_search_visual_tokens'; +import FilteredSearchSpecHelper from '../helpers/filtered_search_spec_helper'; + +describe('Filtered Search Visual Tokens', () => { + let mock; + const subject = FilteredSearchVisualTokens; + + const findElements = tokenElement => { + const tokenNameElement = tokenElement.querySelector('.name'); + const tokenOperatorElement = tokenElement.querySelector('.operator'); + const tokenValueContainer = tokenElement.querySelector('.value-container'); + const tokenValueElement = tokenValueContainer.querySelector('.value'); + return { tokenNameElement, tokenOperatorElement, tokenValueContainer, tokenValueElement }; + }; + + let tokensContainer; + let authorToken; + let bugLabelToken; + + beforeEach(() => { + mock = new MockAdapter(axios); + mock.onGet().reply(200); + + setFixtures(` + <ul class="tokens-container"> + ${FilteredSearchSpecHelper.createInputHTML()} + </ul> + `); + tokensContainer = document.querySelector('.tokens-container'); + + authorToken = FilteredSearchSpecHelper.createFilterVisualToken('author', '=', '@user'); + bugLabelToken = FilteredSearchSpecHelper.createFilterVisualToken('label', '=', '~bug'); + }); + + describe('getLastVisualTokenBeforeInput', () => { + it('returns when there are no visual tokens', () => { + const { lastVisualToken, isLastVisualTokenValid } = subject.getLastVisualTokenBeforeInput(); + + expect(lastVisualToken).toEqual(null); + expect(isLastVisualTokenValid).toEqual(true); + }); + + describe('input is the last item in tokensContainer', () => { + it('returns when there is one visual token', () => { + tokensContainer.innerHTML = FilteredSearchSpecHelper.createTokensContainerHTML( + bugLabelToken.outerHTML, + ); + + const { lastVisualToken, isLastVisualTokenValid } = subject.getLastVisualTokenBeforeInput(); + + expect(lastVisualToken).toEqual(document.querySelector('.filtered-search-token')); + expect(isLastVisualTokenValid).toEqual(true); + }); + + it('returns when there is an incomplete visual token', () => { + tokensContainer.innerHTML = FilteredSearchSpecHelper.createTokensContainerHTML( + FilteredSearchSpecHelper.createNameFilterVisualTokenHTML('Author'), + ); + + const { lastVisualToken, isLastVisualTokenValid } = subject.getLastVisualTokenBeforeInput(); + + expect(lastVisualToken).toEqual(document.querySelector('.filtered-search-token')); + expect(isLastVisualTokenValid).toEqual(false); + }); + + it('returns when there are multiple visual tokens', () => { + tokensContainer.innerHTML = FilteredSearchSpecHelper.createTokensContainerHTML(` + ${bugLabelToken.outerHTML} + ${FilteredSearchSpecHelper.createSearchVisualTokenHTML('search term')} + ${FilteredSearchSpecHelper.createFilterVisualTokenHTML('author', '=', '@root')} + `); + + const { lastVisualToken, isLastVisualTokenValid } = subject.getLastVisualTokenBeforeInput(); + const items = document.querySelectorAll('.tokens-container .js-visual-token'); + + expect(lastVisualToken.isEqualNode(items[items.length - 1])).toEqual(true); + expect(isLastVisualTokenValid).toEqual(true); + }); + + it('returns when there are multiple visual tokens and an incomplete visual token', () => { + tokensContainer.innerHTML = FilteredSearchSpecHelper.createTokensContainerHTML(` + ${bugLabelToken.outerHTML} + ${FilteredSearchSpecHelper.createSearchVisualTokenHTML('search term')} + ${FilteredSearchSpecHelper.createNameFilterVisualTokenHTML('assignee')} + `); + + const { lastVisualToken, isLastVisualTokenValid } = subject.getLastVisualTokenBeforeInput(); + const items = document.querySelectorAll('.tokens-container .js-visual-token'); + + expect(lastVisualToken.isEqualNode(items[items.length - 1])).toEqual(true); + expect(isLastVisualTokenValid).toEqual(false); + }); + }); + + describe('input is a middle item in tokensContainer', () => { + it('returns last token before input', () => { + tokensContainer.innerHTML = FilteredSearchSpecHelper.createTokensContainerHTML(` + ${bugLabelToken.outerHTML} + ${FilteredSearchSpecHelper.createInputHTML()} + ${FilteredSearchSpecHelper.createFilterVisualTokenHTML('author', '=', '@root')} + `); + + const { lastVisualToken, isLastVisualTokenValid } = subject.getLastVisualTokenBeforeInput(); + + expect(lastVisualToken).toEqual(document.querySelector('.filtered-search-token')); + expect(isLastVisualTokenValid).toEqual(true); + }); + + it('returns last partial token before input', () => { + tokensContainer.innerHTML = FilteredSearchSpecHelper.createTokensContainerHTML(` + ${FilteredSearchSpecHelper.createNameFilterVisualTokenHTML('label')} + ${FilteredSearchSpecHelper.createInputHTML()} + ${FilteredSearchSpecHelper.createFilterVisualTokenHTML('author', '=', '@root')} + `); + + const { lastVisualToken, isLastVisualTokenValid } = subject.getLastVisualTokenBeforeInput(); + + expect(lastVisualToken).toEqual(document.querySelector('.filtered-search-token')); + expect(isLastVisualTokenValid).toEqual(false); + }); + }); + }); + + describe('getEndpointWithQueryParams', () => { + it('returns `endpoint` string as is when second param `endpointQueryParams` is undefined, null or empty string', () => { + const endpoint = 'foo/bar/-/labels.json'; + + expect(subject.getEndpointWithQueryParams(endpoint)).toBe(endpoint); + expect(subject.getEndpointWithQueryParams(endpoint, null)).toBe(endpoint); + expect(subject.getEndpointWithQueryParams(endpoint, '')).toBe(endpoint); + }); + + it('returns `endpoint` string with values of `endpointQueryParams`', () => { + const endpoint = 'foo/bar/-/labels.json'; + const singleQueryParams = '{"foo":"true"}'; + const multipleQueryParams = '{"foo":"true","bar":"true"}'; + + expect(subject.getEndpointWithQueryParams(endpoint, singleQueryParams)).toBe( + `${endpoint}?foo=true`, + ); + + expect(subject.getEndpointWithQueryParams(endpoint, multipleQueryParams)).toBe( + `${endpoint}?foo=true&bar=true`, + ); + }); + }); + + describe('unselectTokens', () => { + it('does nothing when there are no tokens', () => { + const beforeHTML = tokensContainer.innerHTML; + subject.unselectTokens(); + + expect(tokensContainer.innerHTML).toEqual(beforeHTML); + }); + + it('removes the selected class from buttons', () => { + tokensContainer.innerHTML = FilteredSearchSpecHelper.createTokensContainerHTML(` + ${FilteredSearchSpecHelper.createFilterVisualTokenHTML('author', '=', '@author')} + ${FilteredSearchSpecHelper.createFilterVisualTokenHTML('milestone', '=', '%123', true)} + `); + + const selected = tokensContainer.querySelector('.js-visual-token .selected'); + + expect(selected.classList.contains('selected')).toEqual(true); + + subject.unselectTokens(); + + expect(selected.classList.contains('selected')).toEqual(false); + }); + }); + + describe('selectToken', () => { + beforeEach(() => { + tokensContainer.innerHTML = FilteredSearchSpecHelper.createTokensContainerHTML(` + ${bugLabelToken.outerHTML} + ${FilteredSearchSpecHelper.createSearchVisualTokenHTML('search term')} + ${FilteredSearchSpecHelper.createFilterVisualTokenHTML('label', '=', '~awesome')} + `); + }); + + it('removes the selected class if it has selected class', () => { + const firstTokenButton = tokensContainer.querySelector('.js-visual-token .selectable'); + firstTokenButton.classList.add('selected'); + + subject.selectToken(firstTokenButton); + + expect(firstTokenButton.classList.contains('selected')).toEqual(false); + }); + + describe('has no selected class', () => { + it('adds selected class', () => { + const firstTokenButton = tokensContainer.querySelector('.js-visual-token .selectable'); + + subject.selectToken(firstTokenButton); + + expect(firstTokenButton.classList.contains('selected')).toEqual(true); + }); + + it('removes selected class from other tokens', () => { + const tokenButtons = tokensContainer.querySelectorAll('.js-visual-token .selectable'); + tokenButtons[1].classList.add('selected'); + + subject.selectToken(tokenButtons[0]); + + expect(tokenButtons[0].classList.contains('selected')).toEqual(true); + expect(tokenButtons[1].classList.contains('selected')).toEqual(false); + }); + }); + }); + + describe('removeSelectedToken', () => { + it('does not remove when there are no selected tokens', () => { + tokensContainer.innerHTML = FilteredSearchSpecHelper.createTokensContainerHTML( + FilteredSearchSpecHelper.createFilterVisualTokenHTML('milestone', '=', 'none'), + ); + + expect(tokensContainer.querySelector('.js-visual-token .selectable')).not.toEqual(null); + + subject.removeSelectedToken(); + + expect(tokensContainer.querySelector('.js-visual-token .selectable')).not.toEqual(null); + }); + + it('removes selected token', () => { + tokensContainer.innerHTML = FilteredSearchSpecHelper.createTokensContainerHTML( + FilteredSearchSpecHelper.createFilterVisualTokenHTML('milestone', '=', 'none', true), + ); + + expect(tokensContainer.querySelector('.js-visual-token .selectable')).not.toEqual(null); + + subject.removeSelectedToken(); + + expect(tokensContainer.querySelector('.js-visual-token .selectable')).toEqual(null); + }); + }); + + describe('createVisualTokenElementHTML', () => { + let tokenElement; + + beforeEach(() => { + setFixtures(` + <div class="test-area"> + ${subject.createVisualTokenElementHTML('custom-token')} + </div> + `); + + tokenElement = document.querySelector('.test-area').firstElementChild; + }); + + it('should add class name to token element', () => { + expect(document.querySelector('.test-area .custom-token')).toBeDefined(); + }); + + it('contains name div', () => { + expect(tokenElement.querySelector('.name')).toEqual(expect.anything()); + }); + + it('contains value container div', () => { + expect(tokenElement.querySelector('.value-container')).toEqual(expect.anything()); + }); + + it('contains value div', () => { + expect(tokenElement.querySelector('.value-container .value')).toEqual(expect.anything()); + }); + + it('contains selectable class', () => { + expect(tokenElement.classList.contains('selectable')).toEqual(true); + }); + + it('contains button role', () => { + expect(tokenElement.getAttribute('role')).toEqual('button'); + }); + + describe('remove token', () => { + it('contains remove-token button', () => { + expect(tokenElement.querySelector('.value-container .remove-token')).toEqual( + expect.anything(), + ); + }); + + it('contains fa-close icon', () => { + expect(tokenElement.querySelector('.remove-token .fa-close')).toEqual(expect.anything()); + }); + }); + }); + + describe('addVisualTokenElement', () => { + it('renders search visual tokens', () => { + subject.addVisualTokenElement({ + name: 'search term', + operator: '=', + value: null, + options: { isSearchTerm: true }, + }); + const token = tokensContainer.querySelector('.js-visual-token'); + + expect(token.classList.contains('filtered-search-term')).toEqual(true); + expect(token.querySelector('.name').innerText).toEqual('search term'); + expect(token.querySelector('.operator').innerText).toEqual('='); + expect(token.querySelector('.value')).toEqual(null); + }); + + it('renders filter visual token name', () => { + subject.addVisualTokenElement({ name: 'milestone' }); + const token = tokensContainer.querySelector('.js-visual-token'); + + expect(token.classList.contains('search-token-milestone')).toEqual(true); + expect(token.classList.contains('filtered-search-token')).toEqual(true); + expect(token.querySelector('.name').innerText).toEqual('milestone'); + expect(token.querySelector('.value')).toEqual(null); + }); + + it('renders filter visual token name, operator, and value', () => { + subject.addVisualTokenElement({ name: 'label', operator: '!=', value: 'Frontend' }); + const token = tokensContainer.querySelector('.js-visual-token'); + + expect(token.classList.contains('search-token-label')).toEqual(true); + expect(token.classList.contains('filtered-search-token')).toEqual(true); + expect(token.querySelector('.name').innerText).toEqual('label'); + expect(token.querySelector('.operator').innerText).toEqual('!='); + expect(token.querySelector('.value').innerText).toEqual('Frontend'); + }); + + it('inserts visual token before input', () => { + tokensContainer.appendChild( + FilteredSearchSpecHelper.createFilterVisualToken('assignee', '=', '@root'), + ); + + subject.addVisualTokenElement({ name: 'label', operator: '!=', value: 'Frontend' }); + const tokens = tokensContainer.querySelectorAll('.js-visual-token'); + const labelToken = tokens[0]; + const assigneeToken = tokens[1]; + + expect(labelToken.classList.contains('search-token-label')).toEqual(true); + expect(labelToken.classList.contains('filtered-search-token')).toEqual(true); + expect(labelToken.querySelector('.name').innerText).toEqual('label'); + expect(labelToken.querySelector('.value').innerText).toEqual('Frontend'); + expect(labelToken.querySelector('.operator').innerText).toEqual('!='); + + expect(assigneeToken.classList.contains('search-token-assignee')).toEqual(true); + expect(assigneeToken.classList.contains('filtered-search-token')).toEqual(true); + expect(assigneeToken.querySelector('.name').innerText).toEqual('assignee'); + expect(assigneeToken.querySelector('.value').innerText).toEqual('@root'); + expect(assigneeToken.querySelector('.operator').innerText).toEqual('='); + }); + }); + + describe('addValueToPreviousVisualTokenElement', () => { + it('does not add when previous visual token element has no value', () => { + tokensContainer.innerHTML = FilteredSearchSpecHelper.createTokensContainerHTML( + FilteredSearchSpecHelper.createFilterVisualTokenHTML('author', '=', '@root'), + ); + + const original = tokensContainer.innerHTML; + subject.addValueToPreviousVisualTokenElement('value'); + + expect(original).toEqual(tokensContainer.innerHTML); + }); + + it('does not add when previous visual token element is a search', () => { + tokensContainer.innerHTML = FilteredSearchSpecHelper.createTokensContainerHTML(` + ${FilteredSearchSpecHelper.createFilterVisualTokenHTML('author', '=', '@root')} + ${FilteredSearchSpecHelper.createSearchVisualTokenHTML('search term')} + `); + + const original = tokensContainer.innerHTML; + subject.addValueToPreviousVisualTokenElement('value'); + + expect(original).toEqual(tokensContainer.innerHTML); + }); + + it('adds value to previous visual filter token', () => { + tokensContainer.innerHTML = FilteredSearchSpecHelper.createTokensContainerHTML( + FilteredSearchSpecHelper.createNameOperatorFilterVisualTokenHTML('label', '='), + ); + + const original = tokensContainer.innerHTML; + subject.addValueToPreviousVisualTokenElement('value'); + const updatedToken = tokensContainer.querySelector('.js-visual-token'); + + expect(updatedToken.querySelector('.name').innerText).toEqual('label'); + expect(updatedToken.querySelector('.value').innerText).toEqual('value'); + expect(original).not.toEqual(tokensContainer.innerHTML); + }); + }); + + describe('addFilterVisualToken', () => { + it('creates visual token with just tokenName', () => { + subject.addFilterVisualToken('milestone'); + const token = tokensContainer.querySelector('.js-visual-token'); + + expect(token.classList.contains('filtered-search-token')).toEqual(true); + expect(token.querySelector('.name').innerText).toEqual('milestone'); + expect(token.querySelector('.operator')).toEqual(null); + expect(token.querySelector('.value')).toEqual(null); + }); + + it('creates visual token with just tokenValue', () => { + subject.addFilterVisualToken('milestone', '='); + subject.addFilterVisualToken('%8.17'); + const token = tokensContainer.querySelector('.js-visual-token'); + + expect(token.classList.contains('filtered-search-token')).toEqual(true); + expect(token.querySelector('.name').innerText).toEqual('milestone'); + expect(token.querySelector('.operator').innerText).toEqual('='); + expect(token.querySelector('.value').innerText).toEqual('%8.17'); + }); + + it('creates full visual token', () => { + subject.addFilterVisualToken('assignee', '=', '@john'); + const token = tokensContainer.querySelector('.js-visual-token'); + + expect(token.classList.contains('filtered-search-token')).toEqual(true); + expect(token.querySelector('.name').innerText).toEqual('assignee'); + expect(token.querySelector('.operator').innerText).toEqual('='); + expect(token.querySelector('.value').innerText).toEqual('@john'); + }); + }); + + describe('addSearchVisualToken', () => { + it('creates search visual token', () => { + subject.addSearchVisualToken('search term'); + const token = tokensContainer.querySelector('.js-visual-token'); + + expect(token.classList.contains('filtered-search-term')).toEqual(true); + expect(token.querySelector('.name').innerText).toEqual('search term'); + expect(token.querySelector('.value')).toEqual(null); + }); + + it('appends to previous search visual token if previous token was a search token', () => { + tokensContainer.innerHTML = FilteredSearchSpecHelper.createTokensContainerHTML(` + ${FilteredSearchSpecHelper.createFilterVisualTokenHTML('author', '=', '@root')} + ${FilteredSearchSpecHelper.createSearchVisualTokenHTML('search term')} + `); + + subject.addSearchVisualToken('append this'); + const token = tokensContainer.querySelector('.filtered-search-term'); + + expect(token.querySelector('.name').innerText).toEqual('search term append this'); + expect(token.querySelector('.value')).toEqual(null); + }); + }); + + describe('getLastTokenPartial', () => { + it('should get last token value', () => { + const value = '~bug'; + tokensContainer.innerHTML = FilteredSearchSpecHelper.createTokensContainerHTML( + bugLabelToken.outerHTML, + ); + + expect(subject.getLastTokenPartial()).toEqual(value); + }); + + it('should get last token original value if available', () => { + const originalValue = '@user'; + const valueContainer = authorToken.querySelector('.value-container'); + valueContainer.dataset.originalValue = originalValue; + const avatar = document.createElement('img'); + const valueElement = valueContainer.querySelector('.value'); + valueElement.appendChild(avatar); + tokensContainer.innerHTML = FilteredSearchSpecHelper.createTokensContainerHTML( + authorToken.outerHTML, + ); + + const lastTokenValue = subject.getLastTokenPartial(); + + expect(lastTokenValue).toEqual(originalValue); + }); + + it('should get last token name if there is no value', () => { + const name = 'assignee'; + tokensContainer.innerHTML = FilteredSearchSpecHelper.createTokensContainerHTML( + FilteredSearchSpecHelper.createNameFilterVisualTokenHTML(name), + ); + + expect(subject.getLastTokenPartial()).toEqual(name); + }); + + it('should return empty when there are no tokens', () => { + expect(subject.getLastTokenPartial()).toEqual(''); + }); + }); + + describe('removeLastTokenPartial', () => { + it('should remove the last token value if it exists', () => { + tokensContainer.innerHTML = FilteredSearchSpecHelper.createTokensContainerHTML( + FilteredSearchSpecHelper.createFilterVisualTokenHTML( + 'label', + '=', + '~"Community Contribution"', + ), + ); + + expect(tokensContainer.querySelector('.js-visual-token .value')).not.toEqual(null); + + subject.removeLastTokenPartial(); + + expect(tokensContainer.querySelector('.js-visual-token .value')).toEqual(null); + }); + + it('should remove the last token name if there is no value', () => { + tokensContainer.innerHTML = FilteredSearchSpecHelper.createTokensContainerHTML( + FilteredSearchSpecHelper.createNameFilterVisualTokenHTML('milestone'), + ); + + expect(tokensContainer.querySelector('.js-visual-token .name')).not.toEqual(null); + + subject.removeLastTokenPartial(); + + expect(tokensContainer.querySelector('.js-visual-token .name')).toEqual(null); + }); + + it('should not remove anything when there are no tokens', () => { + const html = tokensContainer.innerHTML; + subject.removeLastTokenPartial(); + + expect(tokensContainer.innerHTML).toEqual(html); + }); + }); + + describe('tokenizeInput', () => { + it('does not do anything if there is no input', () => { + const original = tokensContainer.innerHTML; + subject.tokenizeInput(); + + expect(tokensContainer.innerHTML).toEqual(original); + }); + + it('adds search visual token if previous visual token is valid', () => { + tokensContainer.innerHTML = FilteredSearchSpecHelper.createTokensContainerHTML( + FilteredSearchSpecHelper.createFilterVisualTokenHTML('assignee', '=', 'none'), + ); + + const input = document.querySelector('.filtered-search'); + input.value = 'some value'; + subject.tokenizeInput(); + + const newToken = tokensContainer.querySelector('.filtered-search-term'); + + expect(input.value).toEqual(''); + expect(newToken.querySelector('.name').innerText).toEqual('some value'); + expect(newToken.querySelector('.value')).toEqual(null); + }); + + it('adds value to previous visual token element if previous visual token is invalid', () => { + tokensContainer.innerHTML = FilteredSearchSpecHelper.createTokensContainerHTML( + FilteredSearchSpecHelper.createNameOperatorFilterVisualTokenHTML('assignee', '='), + ); + + const input = document.querySelector('.filtered-search'); + input.value = '@john'; + subject.tokenizeInput(); + + const updatedToken = tokensContainer.querySelector('.filtered-search-token'); + + expect(input.value).toEqual(''); + expect(updatedToken.querySelector('.name').innerText).toEqual('assignee'); + expect(updatedToken.querySelector('.operator').innerText).toEqual('='); + expect(updatedToken.querySelector('.value').innerText).toEqual('@john'); + }); + }); + + describe('editToken', () => { + let input; + let token; + + beforeEach(() => { + tokensContainer.innerHTML = FilteredSearchSpecHelper.createTokensContainerHTML(` + ${FilteredSearchSpecHelper.createFilterVisualTokenHTML('label', '=', 'none')} + ${FilteredSearchSpecHelper.createSearchVisualTokenHTML('search')} + ${FilteredSearchSpecHelper.createFilterVisualTokenHTML('milestone', '=', 'upcoming')} + `); + + input = document.querySelector('.filtered-search'); + token = document.querySelector('.js-visual-token'); + }); + + it("tokenize's existing input", () => { + input.value = 'some text'; + jest.spyOn(subject, 'tokenizeInput'); + + subject.editToken(token); + + expect(subject.tokenizeInput).toHaveBeenCalled(); + expect(input.value).not.toEqual('some text'); + }); + + it('moves input to the token position', () => { + expect(tokensContainer.children[3].querySelector('.filtered-search')).not.toEqual(null); + + subject.editToken(token); + + expect(tokensContainer.children[1].querySelector('.filtered-search')).not.toEqual(null); + expect(tokensContainer.children[3].querySelector('.filtered-search')).toEqual(null); + }); + + it('input contains the visual token value', () => { + subject.editToken(token); + + expect(input.value).toEqual('none'); + }); + + it('input contains the original value if present', () => { + const originalValue = '@user'; + const valueContainer = token.querySelector('.value-container'); + valueContainer.dataset.originalValue = originalValue; + + subject.editToken(token); + + expect(input.value).toEqual(originalValue); + }); + + describe('selected token is a search term token', () => { + beforeEach(() => { + token = document.querySelector('.filtered-search-term'); + }); + + it('token is removed', () => { + expect(tokensContainer.querySelector('.filtered-search-term')).not.toEqual(null); + + subject.editToken(token); + + expect(tokensContainer.querySelector('.filtered-search-term')).toEqual(null); + }); + + it('input has the same value as removed token', () => { + expect(input.value).toEqual(''); + + subject.editToken(token); + + expect(input.value).toEqual('search'); + }); + }); + }); + + describe('moveInputTotheRight', () => { + it('does nothing if the input is already the right most element', () => { + tokensContainer.innerHTML = FilteredSearchSpecHelper.createTokensContainerHTML( + FilteredSearchSpecHelper.createFilterVisualTokenHTML('label', '=', 'none'), + ); + + jest.spyOn(subject, 'tokenizeInput').mockImplementation(() => {}); + jest.spyOn(subject, 'getLastVisualTokenBeforeInput'); + + subject.moveInputToTheRight(); + + expect(subject.tokenizeInput).toHaveBeenCalled(); + expect(subject.getLastVisualTokenBeforeInput).not.toHaveBeenCalled(); + }); + + it("tokenize's input", () => { + tokensContainer.innerHTML = ` + ${FilteredSearchSpecHelper.createNameOperatorFilterVisualTokenHTML('label', '=')} + ${FilteredSearchSpecHelper.createInputHTML()} + ${bugLabelToken.outerHTML} + `; + + tokensContainer.querySelector('.filtered-search').value = 'none'; + + subject.moveInputToTheRight(); + const value = tokensContainer.querySelector('.js-visual-token .value'); + + expect(value.innerText).toEqual('none'); + }); + + it('converts input into search term token if last token is valid', () => { + tokensContainer.innerHTML = ` + ${FilteredSearchSpecHelper.createFilterVisualTokenHTML('label', '=', 'none')} + ${FilteredSearchSpecHelper.createInputHTML()} + ${bugLabelToken.outerHTML} + `; + + document.querySelector('.filtered-search').value = 'test'; + + subject.moveInputToTheRight(); + const searchValue = tokensContainer.querySelector('.filtered-search-term .name'); + + expect(searchValue.innerText).toEqual('test'); + }); + + it('moves the input to the right most element', () => { + tokensContainer.innerHTML = ` + ${FilteredSearchSpecHelper.createFilterVisualTokenHTML('label', '=', 'none')} + ${FilteredSearchSpecHelper.createInputHTML()} + ${bugLabelToken.outerHTML} + `; + + subject.moveInputToTheRight(); + + expect(tokensContainer.children[2].querySelector('.filtered-search')).not.toEqual(null); + }); + + it('tokenizes input even if input is the right most element', () => { + tokensContainer.innerHTML = ` + ${FilteredSearchSpecHelper.createFilterVisualTokenHTML('label', '=', 'none')} + ${FilteredSearchSpecHelper.createNameOperatorFilterVisualTokenHTML('label')} + ${FilteredSearchSpecHelper.createInputHTML('', '~bug')} + `; + + subject.moveInputToTheRight(); + + const token = tokensContainer.children[1]; + + expect(token.querySelector('.value').innerText).toEqual('~bug'); + }); + }); + + describe('renderVisualTokenValue', () => { + beforeEach(() => { + tokensContainer.innerHTML = FilteredSearchSpecHelper.createTokensContainerHTML(` + ${authorToken.outerHTML} + ${bugLabelToken.outerHTML} + `); + }); + + it('renders a author token value element', () => { + const { tokenNameElement, tokenValueElement } = findElements(authorToken); + const tokenName = tokenNameElement.textContent; + const tokenValue = 'new value'; + + subject.renderVisualTokenValue(authorToken, tokenName, tokenValue); + + jest.runOnlyPendingTimers(); + + setImmediate(() => { + expect(tokenValueElement.textContent).toBe(tokenValue); + }); + }); + }); +}); diff --git a/spec/frontend/fixtures/abuse_reports.rb b/spec/frontend/fixtures/abuse_reports.rb index 712ed2e8d7e..48b055fcda5 100644 --- a/spec/frontend/fixtures/abuse_reports.rb +++ b/spec/frontend/fixtures/abuse_reports.rb @@ -2,7 +2,7 @@ require 'spec_helper' -describe Admin::AbuseReportsController, '(JavaScript fixtures)', type: :controller do +RSpec.describe Admin::AbuseReportsController, '(JavaScript fixtures)', type: :controller do include JavaScriptFixturesHelpers let(:admin) { create(:admin) } diff --git a/spec/frontend/fixtures/admin_users.rb b/spec/frontend/fixtures/admin_users.rb index b0f7d69f091..f068ada53e1 100644 --- a/spec/frontend/fixtures/admin_users.rb +++ b/spec/frontend/fixtures/admin_users.rb @@ -2,7 +2,7 @@ require 'spec_helper' -describe Admin::UsersController, '(JavaScript fixtures)', type: :controller do +RSpec.describe Admin::UsersController, '(JavaScript fixtures)', type: :controller do include StubENV include JavaScriptFixturesHelpers diff --git a/spec/frontend/fixtures/application_settings.rb b/spec/frontend/fixtures/application_settings.rb index a16888d8f03..6156e6a43bc 100644 --- a/spec/frontend/fixtures/application_settings.rb +++ b/spec/frontend/fixtures/application_settings.rb @@ -2,7 +2,7 @@ require 'spec_helper' -describe Admin::ApplicationSettingsController, '(JavaScript fixtures)', type: :controller do +RSpec.describe Admin::ApplicationSettingsController, '(JavaScript fixtures)', type: :controller do include StubENV include JavaScriptFixturesHelpers diff --git a/spec/frontend/fixtures/autocomplete_sources.rb b/spec/frontend/fixtures/autocomplete_sources.rb index 812364c8b06..8858d69a939 100644 --- a/spec/frontend/fixtures/autocomplete_sources.rb +++ b/spec/frontend/fixtures/autocomplete_sources.rb @@ -2,7 +2,7 @@ require 'spec_helper' -describe Projects::AutocompleteSourcesController, '(JavaScript fixtures)', type: :controller do +RSpec.describe Projects::AutocompleteSourcesController, '(JavaScript fixtures)', type: :controller do include JavaScriptFixturesHelpers let_it_be(:admin) { create(:admin) } diff --git a/spec/frontend/fixtures/blob.rb b/spec/frontend/fixtures/blob.rb index 28a3badaa17..712c3bd9b23 100644 --- a/spec/frontend/fixtures/blob.rb +++ b/spec/frontend/fixtures/blob.rb @@ -2,7 +2,7 @@ require 'spec_helper' -describe Projects::BlobController, '(JavaScript fixtures)', type: :controller do +RSpec.describe Projects::BlobController, '(JavaScript fixtures)', type: :controller do include JavaScriptFixturesHelpers let(:admin) { create(:admin) } diff --git a/spec/frontend/fixtures/boards.rb b/spec/frontend/fixtures/boards.rb index b3c7865a088..90e2ca4db63 100644 --- a/spec/frontend/fixtures/boards.rb +++ b/spec/frontend/fixtures/boards.rb @@ -2,7 +2,7 @@ require 'spec_helper' -describe Projects::BoardsController, '(JavaScript fixtures)', type: :controller do +RSpec.describe Projects::BoardsController, '(JavaScript fixtures)', type: :controller do include JavaScriptFixturesHelpers let(:admin) { create(:admin) } diff --git a/spec/frontend/fixtures/branches.rb b/spec/frontend/fixtures/branches.rb index 2dc8cde625a..4667dfb69f8 100644 --- a/spec/frontend/fixtures/branches.rb +++ b/spec/frontend/fixtures/branches.rb @@ -2,7 +2,7 @@ require 'spec_helper' -describe Projects::BranchesController, '(JavaScript fixtures)', type: :controller do +RSpec.describe Projects::BranchesController, '(JavaScript fixtures)', type: :controller do include JavaScriptFixturesHelpers let(:admin) { create(:admin) } diff --git a/spec/frontend/fixtures/clusters.rb b/spec/frontend/fixtures/clusters.rb index fd64d3c0e28..d0940c7dc7f 100644 --- a/spec/frontend/fixtures/clusters.rb +++ b/spec/frontend/fixtures/clusters.rb @@ -2,7 +2,7 @@ require 'spec_helper' -describe Projects::ClustersController, '(JavaScript fixtures)', type: :controller do +RSpec.describe Projects::ClustersController, '(JavaScript fixtures)', type: :controller do include JavaScriptFixturesHelpers let(:admin) { create(:admin) } diff --git a/spec/frontend/fixtures/commit.rb b/spec/frontend/fixtures/commit.rb index c9a5aa9a67c..c5c00afd4ca 100644 --- a/spec/frontend/fixtures/commit.rb +++ b/spec/frontend/fixtures/commit.rb @@ -2,7 +2,7 @@ require 'spec_helper' -describe Projects::CommitController, '(JavaScript fixtures)', type: :controller do +RSpec.describe Projects::CommitController, '(JavaScript fixtures)', type: :controller do include JavaScriptFixturesHelpers let_it_be(:project) { create(:project, :repository) } diff --git a/spec/frontend/fixtures/deploy_keys.rb b/spec/frontend/fixtures/deploy_keys.rb index f491c424bcf..e87600e9d24 100644 --- a/spec/frontend/fixtures/deploy_keys.rb +++ b/spec/frontend/fixtures/deploy_keys.rb @@ -2,7 +2,7 @@ require 'spec_helper' -describe Projects::DeployKeysController, '(JavaScript fixtures)', type: :controller do +RSpec.describe Projects::DeployKeysController, '(JavaScript fixtures)', type: :controller do include JavaScriptFixturesHelpers let(:admin) { create(:admin) } diff --git a/spec/frontend/fixtures/groups.rb b/spec/frontend/fixtures/groups.rb index 2421b67a130..6f0d7aa1f7c 100644 --- a/spec/frontend/fixtures/groups.rb +++ b/spec/frontend/fixtures/groups.rb @@ -2,7 +2,7 @@ require 'spec_helper' -describe 'Groups (JavaScript fixtures)', type: :controller do +RSpec.describe 'Groups (JavaScript fixtures)', type: :controller do include JavaScriptFixturesHelpers let(:admin) { create(:admin) } diff --git a/spec/frontend/fixtures/issues.rb b/spec/frontend/fixtures/issues.rb index 9a194e5ca84..2c380ba6a96 100644 --- a/spec/frontend/fixtures/issues.rb +++ b/spec/frontend/fixtures/issues.rb @@ -2,7 +2,7 @@ require 'spec_helper' -describe Projects::IssuesController, '(JavaScript fixtures)', type: :controller do +RSpec.describe Projects::IssuesController, '(JavaScript fixtures)', type: :controller do include JavaScriptFixturesHelpers let(:admin) { create(:admin, feed_token: 'feedtoken:coldfeed') } @@ -75,7 +75,7 @@ describe Projects::IssuesController, '(JavaScript fixtures)', type: :controller end end -describe API::Issues, '(JavaScript fixtures)', type: :request do +RSpec.describe API::Issues, '(JavaScript fixtures)', type: :request do include ApiHelpers include JavaScriptFixturesHelpers diff --git a/spec/frontend/fixtures/jobs.rb b/spec/frontend/fixtures/jobs.rb index 787ab517f75..64197a62301 100644 --- a/spec/frontend/fixtures/jobs.rb +++ b/spec/frontend/fixtures/jobs.rb @@ -2,7 +2,7 @@ require 'spec_helper' -describe Projects::JobsController, '(JavaScript fixtures)', type: :controller do +RSpec.describe Projects::JobsController, '(JavaScript fixtures)', type: :controller do include JavaScriptFixturesHelpers let(:admin) { create(:admin) } diff --git a/spec/frontend/fixtures/labels.rb b/spec/frontend/fixtures/labels.rb index e5a0501ac03..2b7babb2e52 100644 --- a/spec/frontend/fixtures/labels.rb +++ b/spec/frontend/fixtures/labels.rb @@ -2,7 +2,7 @@ require 'spec_helper' -describe 'Labels (JavaScript fixtures)' do +RSpec.describe 'Labels (JavaScript fixtures)' do include JavaScriptFixturesHelpers let(:admin) { create(:admin) } diff --git a/spec/frontend/fixtures/merge_requests.rb b/spec/frontend/fixtures/merge_requests.rb index a347ef683e7..7801eb27ce8 100644 --- a/spec/frontend/fixtures/merge_requests.rb +++ b/spec/frontend/fixtures/merge_requests.rb @@ -2,7 +2,7 @@ require 'spec_helper' -describe Projects::MergeRequestsController, '(JavaScript fixtures)', type: :controller do +RSpec.describe Projects::MergeRequestsController, '(JavaScript fixtures)', type: :controller do include JavaScriptFixturesHelpers let(:admin) { create(:admin) } diff --git a/spec/frontend/fixtures/merge_requests_diffs.rb b/spec/frontend/fixtures/merge_requests_diffs.rb index 76bb8567a64..63bd02d0fbd 100644 --- a/spec/frontend/fixtures/merge_requests_diffs.rb +++ b/spec/frontend/fixtures/merge_requests_diffs.rb @@ -2,7 +2,7 @@ require 'spec_helper' -describe Projects::MergeRequests::DiffsController, '(JavaScript fixtures)', type: :controller do +RSpec.describe Projects::MergeRequests::DiffsController, '(JavaScript fixtures)', type: :controller do include JavaScriptFixturesHelpers let(:admin) { create(:admin) } diff --git a/spec/frontend/fixtures/metrics_dashboard.rb b/spec/frontend/fixtures/metrics_dashboard.rb index f0c741af37d..b5dee7525f6 100644 --- a/spec/frontend/fixtures/metrics_dashboard.rb +++ b/spec/frontend/fixtures/metrics_dashboard.rb @@ -2,7 +2,7 @@ require 'spec_helper' -describe MetricsDashboard, '(JavaScript fixtures)', type: :controller do +RSpec.describe MetricsDashboard, '(JavaScript fixtures)', type: :controller do include JavaScriptFixturesHelpers include MetricsDashboardHelpers diff --git a/spec/frontend/fixtures/pipeline_schedules.rb b/spec/frontend/fixtures/pipeline_schedules.rb index e00a35d5362..e47bb25ec0a 100644 --- a/spec/frontend/fixtures/pipeline_schedules.rb +++ b/spec/frontend/fixtures/pipeline_schedules.rb @@ -2,7 +2,7 @@ require 'spec_helper' -describe Projects::PipelineSchedulesController, '(JavaScript fixtures)', type: :controller do +RSpec.describe Projects::PipelineSchedulesController, '(JavaScript fixtures)', type: :controller do include JavaScriptFixturesHelpers let(:admin) { create(:admin) } diff --git a/spec/frontend/fixtures/pipelines.rb b/spec/frontend/fixtures/pipelines.rb index 83fc13af7d3..93e2c19fc27 100644 --- a/spec/frontend/fixtures/pipelines.rb +++ b/spec/frontend/fixtures/pipelines.rb @@ -2,7 +2,7 @@ require 'spec_helper' -describe Projects::PipelinesController, '(JavaScript fixtures)', type: :controller do +RSpec.describe Projects::PipelinesController, '(JavaScript fixtures)', type: :controller do include JavaScriptFixturesHelpers let(:admin) { create(:admin) } diff --git a/spec/frontend/fixtures/projects.rb b/spec/frontend/fixtures/projects.rb index ff21dbaebe8..d33909fb98b 100644 --- a/spec/frontend/fixtures/projects.rb +++ b/spec/frontend/fixtures/projects.rb @@ -2,7 +2,7 @@ require 'spec_helper' -describe 'Projects (JavaScript fixtures)', type: :controller do +RSpec.describe 'Projects (JavaScript fixtures)', type: :controller do include JavaScriptFixturesHelpers runners_token = 'runnerstoken:intabulasreferre' diff --git a/spec/frontend/fixtures/prometheus_service.rb b/spec/frontend/fixtures/prometheus_service.rb index c404b8260d2..8c923d91d08 100644 --- a/spec/frontend/fixtures/prometheus_service.rb +++ b/spec/frontend/fixtures/prometheus_service.rb @@ -2,7 +2,7 @@ require 'spec_helper' -describe Projects::ServicesController, '(JavaScript fixtures)', type: :controller do +RSpec.describe Projects::ServicesController, '(JavaScript fixtures)', type: :controller do include JavaScriptFixturesHelpers let(:admin) { create(:admin) } diff --git a/spec/frontend/fixtures/raw.rb b/spec/frontend/fixtures/raw.rb index 9c9fa4ec40b..337067121d0 100644 --- a/spec/frontend/fixtures/raw.rb +++ b/spec/frontend/fixtures/raw.rb @@ -2,7 +2,7 @@ require 'spec_helper' -describe 'Raw files', '(JavaScript fixtures)' do +RSpec.describe 'Raw files', '(JavaScript fixtures)' do include JavaScriptFixturesHelpers let(:namespace) { create(:namespace, name: 'frontend-fixtures' )} diff --git a/spec/frontend/fixtures/search.rb b/spec/frontend/fixtures/search.rb index cbe3e373986..fcd68662acc 100644 --- a/spec/frontend/fixtures/search.rb +++ b/spec/frontend/fixtures/search.rb @@ -2,7 +2,7 @@ require 'spec_helper' -describe SearchController, '(JavaScript fixtures)', type: :controller do +RSpec.describe SearchController, '(JavaScript fixtures)', type: :controller do include JavaScriptFixturesHelpers render_views diff --git a/spec/frontend/fixtures/services.rb b/spec/frontend/fixtures/services.rb index 1b81a83ca49..0877998cc9d 100644 --- a/spec/frontend/fixtures/services.rb +++ b/spec/frontend/fixtures/services.rb @@ -2,7 +2,7 @@ require 'spec_helper' -describe Projects::ServicesController, '(JavaScript fixtures)', type: :controller do +RSpec.describe Projects::ServicesController, '(JavaScript fixtures)', type: :controller do include JavaScriptFixturesHelpers let(:admin) { create(:admin) } diff --git a/spec/frontend/fixtures/sessions.rb b/spec/frontend/fixtures/sessions.rb index a4dc0aef79c..0ef14c1d4fa 100644 --- a/spec/frontend/fixtures/sessions.rb +++ b/spec/frontend/fixtures/sessions.rb @@ -2,7 +2,7 @@ require 'spec_helper' -describe 'Sessions (JavaScript fixtures)' do +RSpec.describe 'Sessions (JavaScript fixtures)' do include JavaScriptFixturesHelpers before(:all) do diff --git a/spec/frontend/fixtures/snippet.rb b/spec/frontend/fixtures/snippet.rb index d27c2fbe68b..26b088bbd88 100644 --- a/spec/frontend/fixtures/snippet.rb +++ b/spec/frontend/fixtures/snippet.rb @@ -2,7 +2,7 @@ require 'spec_helper' -describe SnippetsController, '(JavaScript fixtures)', type: :controller do +RSpec.describe SnippetsController, '(JavaScript fixtures)', type: :controller do include JavaScriptFixturesHelpers let(:admin) { create(:admin) } diff --git a/spec/frontend/fixtures/static/search_autocomplete.html b/spec/frontend/fixtures/static/global_search_input.html index 29db9020424..29db9020424 100644 --- a/spec/frontend/fixtures/static/search_autocomplete.html +++ b/spec/frontend/fixtures/static/global_search_input.html diff --git a/spec/frontend/fixtures/static/oauth_remember_me.html b/spec/frontend/fixtures/static/oauth_remember_me.html index 9ba1ffc72fe..c6af8129b4d 100644 --- a/spec/frontend/fixtures/static/oauth_remember_me.html +++ b/spec/frontend/fixtures/static/oauth_remember_me.html @@ -1,6 +1,22 @@ <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> + +<form method="post" action="http://example.com/"> + <button class="oauth-login twitter" type="submit"> + <span>Twitter</span> + </button> +</form> + +<form method="post" action="http://example.com/"> + <button class="oauth-login github" type="submit"> + <span>GitHub</span> + </button> +</form> + +<form method="post" action="http://example.com/?redirect_fragment=L1"> + <button class="oauth-login facebook" type="submit"> + <span>Facebook</span> + </button> +</form> + </div> diff --git a/spec/frontend/fixtures/test_report.rb b/spec/frontend/fixtures/test_report.rb index d0ecaf11994..16496aa901b 100644 --- a/spec/frontend/fixtures/test_report.rb +++ b/spec/frontend/fixtures/test_report.rb @@ -2,7 +2,7 @@ require "spec_helper" -describe Projects::PipelinesController, "(JavaScript fixtures)", type: :controller do +RSpec.describe Projects::PipelinesController, "(JavaScript fixtures)", type: :controller do include JavaScriptFixturesHelpers let(:namespace) { create(:namespace, name: "frontend-fixtures") } diff --git a/spec/frontend/fixtures/todos.rb b/spec/frontend/fixtures/todos.rb index e5bdb4998ed..399be272e9b 100644 --- a/spec/frontend/fixtures/todos.rb +++ b/spec/frontend/fixtures/todos.rb @@ -2,7 +2,7 @@ require 'spec_helper' -describe 'Todos (JavaScript fixtures)' do +RSpec.describe 'Todos (JavaScript fixtures)' do include JavaScriptFixturesHelpers let(:admin) { create(:admin) } diff --git a/spec/frontend/fixtures/u2f.rb b/spec/frontend/fixtures/u2f.rb index 9710fbbc181..be3874d7c42 100644 --- a/spec/frontend/fixtures/u2f.rb +++ b/spec/frontend/fixtures/u2f.rb @@ -2,7 +2,7 @@ require 'spec_helper' -context 'U2F' do +RSpec.context 'U2F' do include JavaScriptFixturesHelpers let(:user) { create(:user, :two_factor_via_u2f, otp_secret: 'otpsecret:coolkids') } diff --git a/spec/frontend/gl_dropdown_spec.js b/spec/frontend/gl_dropdown_spec.js new file mode 100644 index 00000000000..8bfe7f56e37 --- /dev/null +++ b/spec/frontend/gl_dropdown_spec.js @@ -0,0 +1,345 @@ +/* eslint-disable no-param-reassign */ + +import $ from 'jquery'; +import '~/gl_dropdown'; +import '~/lib/utils/common_utils'; +import { visitUrl } from '~/lib/utils/url_utility'; + +jest.mock('~/lib/utils/url_utility', () => ({ + visitUrl: jest.fn().mockName('visitUrl'), +})); + +describe('glDropdown', () => { + preloadFixtures('static/gl_dropdown.html'); + + const NON_SELECTABLE_CLASSES = + '.divider, .separator, .dropdown-header, .dropdown-menu-empty-item'; + const SEARCH_INPUT_SELECTOR = '.dropdown-input-field'; + const ITEM_SELECTOR = `.dropdown-content li:not(${NON_SELECTABLE_CLASSES})`; + const FOCUSED_ITEM_SELECTOR = `${ITEM_SELECTOR} a.is-focused`; + const ARROW_KEYS = { + DOWN: 40, + UP: 38, + ENTER: 13, + ESC: 27, + }; + + let remoteCallback; + + const test = {}; + + const navigateWithKeys = (direction, steps, cb, i) => { + i = i || 0; + if (!i) direction = direction.toUpperCase(); + $('body').trigger({ + type: 'keydown', + which: ARROW_KEYS[direction], + keyCode: ARROW_KEYS[direction], + }); + i += 1; + if (i <= steps) { + navigateWithKeys(direction, steps, cb, i); + } else { + cb(); + } + }; + + const remoteMock = (data, term, callback) => { + remoteCallback = callback.bind({}, data); + }; + + function initDropDown(hasRemote, isFilterable, extraOpts = {}) { + const options = { + selectable: true, + filterable: isFilterable, + data: hasRemote ? remoteMock.bind({}, test.projectsData) : test.projectsData, + search: { + fields: ['name'], + }, + text: project => project.name_with_namespace || project.name, + id: project => project.id, + ...extraOpts, + }; + test.dropdownButtonElement = $( + '#js-project-dropdown', + test.dropdownContainerElement, + ).glDropdown(options); + } + + beforeEach(() => { + loadFixtures('static/gl_dropdown.html'); + test.dropdownContainerElement = $('.dropdown.inline'); + test.$dropdownMenuElement = $('.dropdown-menu', test.dropdownContainerElement); + test.projectsData = getJSONFixture('static/projects.json'); + }); + + afterEach(() => { + $('body').off('keydown'); + test.dropdownContainerElement.off('keyup'); + }); + + it('should open on click', () => { + initDropDown.call(this, false); + + expect(test.dropdownContainerElement).not.toHaveClass('show'); + test.dropdownButtonElement.click(); + + expect(test.dropdownContainerElement).toHaveClass('show'); + }); + + it('escapes HTML as text', () => { + test.projectsData[0].name_with_namespace = '<script>alert("testing");</script>'; + + initDropDown.call(this, false); + + test.dropdownButtonElement.click(); + + expect($('.dropdown-content li:first-child').text()).toBe('<script>alert("testing");</script>'); + }); + + it('should output HTML when highlighting', () => { + test.projectsData[0].name_with_namespace = 'testing'; + $('.dropdown-input .dropdown-input-field').val('test'); + + initDropDown.call(this, false, true, { + highlight: true, + }); + + test.dropdownButtonElement.click(); + + expect($('.dropdown-content li:first-child').text()).toBe('testing'); + + expect($('.dropdown-content li:first-child a').html()).toBe( + '<b>t</b><b>e</b><b>s</b><b>t</b>ing', + ); + }); + + describe('that is open', () => { + beforeEach(() => { + initDropDown.call(this, false, false); + test.dropdownButtonElement.click(); + }); + + it('should select a following item on DOWN keypress', () => { + expect($(FOCUSED_ITEM_SELECTOR, test.$dropdownMenuElement).length).toBe(0); + const randomIndex = Math.floor(Math.random() * (test.projectsData.length - 1)) + 0; + navigateWithKeys('down', randomIndex, () => { + expect($(FOCUSED_ITEM_SELECTOR, test.$dropdownMenuElement).length).toBe(1); + expect($(`${ITEM_SELECTOR}:eq(${randomIndex}) a`, test.$dropdownMenuElement)).toHaveClass( + 'is-focused', + ); + }); + }); + + it('should select a previous item on UP keypress', () => { + expect($(FOCUSED_ITEM_SELECTOR, test.$dropdownMenuElement).length).toBe(0); + navigateWithKeys('down', test.projectsData.length - 1, () => { + expect($(FOCUSED_ITEM_SELECTOR, test.$dropdownMenuElement).length).toBe(1); + const randomIndex = Math.floor(Math.random() * (test.projectsData.length - 2)) + 0; + navigateWithKeys('up', randomIndex, () => { + expect($(FOCUSED_ITEM_SELECTOR, test.$dropdownMenuElement).length).toBe(1); + expect( + $( + `${ITEM_SELECTOR}:eq(${test.projectsData.length - 2 - randomIndex}) a`, + test.$dropdownMenuElement, + ), + ).toHaveClass('is-focused'); + }); + }); + }); + + it('should click the selected item on ENTER keypress', () => { + expect(test.dropdownContainerElement).toHaveClass('show'); + const randomIndex = Math.floor(Math.random() * (test.projectsData.length - 1)) + 0; + navigateWithKeys('down', randomIndex, () => { + navigateWithKeys('enter', null, () => { + expect(test.dropdownContainerElement).not.toHaveClass('show'); + const link = $(`${ITEM_SELECTOR}:eq(${randomIndex}) a`, test.$dropdownMenuElement); + + expect(link).toHaveClass('is-active'); + const linkedLocation = link.attr('href'); + if (linkedLocation && linkedLocation !== '#') { + expect(visitUrl).toHaveBeenCalledWith(linkedLocation); + } + }); + }); + }); + + it('should close on ESC keypress', () => { + expect(test.dropdownContainerElement).toHaveClass('show'); + test.dropdownContainerElement.trigger({ + type: 'keyup', + which: ARROW_KEYS.ESC, + keyCode: ARROW_KEYS.ESC, + }); + + expect(test.dropdownContainerElement).not.toHaveClass('show'); + }); + }); + + describe('opened and waiting for a remote callback', () => { + beforeEach(() => { + initDropDown.call(this, true, true); + test.dropdownButtonElement.click(); + }); + + it('should show loading indicator while search results are being fetched by backend', () => { + const dropdownMenu = document.querySelector('.dropdown-menu'); + + expect(dropdownMenu.className.indexOf('is-loading')).not.toBe(-1); + remoteCallback(); + + expect(dropdownMenu.className.indexOf('is-loading')).toBe(-1); + }); + + it('should not focus search input while remote task is not complete', () => { + expect($(document.activeElement)).not.toEqual($(SEARCH_INPUT_SELECTOR)); + remoteCallback(); + + expect($(document.activeElement)).toEqual($(SEARCH_INPUT_SELECTOR)); + }); + + it('should focus search input after remote task is complete', () => { + remoteCallback(); + + expect($(document.activeElement)).toEqual($(SEARCH_INPUT_SELECTOR)); + }); + + it('should focus on input when opening for the second time after transition', () => { + remoteCallback(); + test.dropdownContainerElement.trigger({ + type: 'keyup', + which: ARROW_KEYS.ESC, + keyCode: ARROW_KEYS.ESC, + }); + test.dropdownButtonElement.click(); + test.dropdownContainerElement.trigger('transitionend'); + + expect($(document.activeElement)).toEqual($(SEARCH_INPUT_SELECTOR)); + }); + }); + + describe('input focus with array data', () => { + it('should focus input when passing array data to drop down', () => { + initDropDown.call(this, false, true); + test.dropdownButtonElement.click(); + test.dropdownContainerElement.trigger('transitionend'); + + expect($(document.activeElement)).toEqual($(SEARCH_INPUT_SELECTOR)); + }); + }); + + it('should still have input value on close and restore', () => { + const $searchInput = $(SEARCH_INPUT_SELECTOR); + initDropDown.call(this, false, true); + $searchInput + .trigger('focus') + .val('g') + .trigger('input'); + + expect($searchInput.val()).toEqual('g'); + test.dropdownButtonElement.trigger('hidden.bs.dropdown'); + $searchInput.trigger('blur').trigger('focus'); + + expect($searchInput.val()).toEqual('g'); + }); + + describe('renderItem', () => { + function dropdownWithOptions(options) { + const $dropdownDiv = $('<div />'); + + $dropdownDiv.glDropdown(options); + + return $dropdownDiv.data('glDropdown'); + } + + function basicDropdown() { + return dropdownWithOptions({}); + } + + describe('without selected value', () => { + let dropdown; + + beforeEach(() => { + dropdown = basicDropdown(); + }); + + it('marks items without ID as active', () => { + const dummyData = {}; + + const html = dropdown.renderItem(dummyData, null, null); + + const link = html.querySelector('a'); + + expect(link).toHaveClass('is-active'); + }); + + it('does not mark items with ID as active', () => { + const dummyData = { + id: 'ea', + }; + + const html = dropdown.renderItem(dummyData, null, null); + + const link = html.querySelector('a'); + + expect(link).not.toHaveClass('is-active'); + }); + }); + + it('should return an empty .separator li when when appropriate', () => { + const dropdown = basicDropdown(); + const sep = { type: 'separator' }; + const li = dropdown.renderItem(sep); + + expect(li).toHaveClass('separator'); + expect(li.childNodes.length).toEqual(0); + }); + + it('should return an empty .divider li when when appropriate', () => { + const dropdown = basicDropdown(); + const div = { type: 'divider' }; + const li = dropdown.renderItem(div); + + expect(li).toHaveClass('divider'); + expect(li.childNodes.length).toEqual(0); + }); + + it('should return a .dropdown-header li with the correct content when when appropriate', () => { + const dropdown = basicDropdown(); + const text = 'My Header'; + const header = { type: 'header', content: text }; + const li = dropdown.renderItem(header); + + expect(li).toHaveClass('dropdown-header'); + expect(li.childNodes.length).toEqual(1); + expect(li.textContent).toEqual(text); + }); + }); + + it('should keep selected item after selecting a second time', () => { + const options = { + isSelectable(item, $el) { + return !$el.hasClass('is-active'); + }, + toggleLabel(item) { + return item && item.id; + }, + }; + initDropDown.call(this, false, false, options); + const $item = $(`${ITEM_SELECTOR}:first() a`, test.$dropdownMenuElement); + + // select item the first time + test.dropdownButtonElement.click(); + $item.click(); + + expect($item).toHaveClass('is-active'); + // select item the second time + test.dropdownButtonElement.click(); + $item.click(); + + expect($item).toHaveClass('is-active'); + + expect($('.dropdown-toggle-text')).toHaveText(test.projectsData[0].id.toString()); + }); +}); diff --git a/spec/frontend/gl_form_spec.js b/spec/frontend/gl_form_spec.js new file mode 100644 index 00000000000..150d8a053d5 --- /dev/null +++ b/spec/frontend/gl_form_spec.js @@ -0,0 +1,115 @@ +import $ from 'jquery'; +import autosize from 'autosize'; +import GLForm from '~/gl_form'; +import '~/lib/utils/text_utility'; +import '~/lib/utils/common_utils'; + +describe('GLForm', () => { + const testContext = {}; + + describe('when instantiated', () => { + beforeEach(done => { + testContext.form = $('<form class="gfm-form"><textarea class="js-gfm-input"></form>'); + testContext.textarea = testContext.form.find('textarea'); + jest.spyOn($.prototype, 'off').mockReturnValue(testContext.textarea); + jest.spyOn($.prototype, 'on').mockReturnValue(testContext.textarea); + jest.spyOn($.prototype, 'css').mockImplementation(() => {}); + + testContext.glForm = new GLForm(testContext.form, false); + + setImmediate(() => { + $.prototype.off.mockClear(); + $.prototype.on.mockClear(); + $.prototype.css.mockClear(); + done(); + }); + }); + + describe('setupAutosize', () => { + beforeEach(done => { + testContext.glForm.setupAutosize(); + + setImmediate(() => { + done(); + }); + }); + + it('should register an autosize event handler on the textarea', () => { + expect($.prototype.off).toHaveBeenCalledWith('autosize:resized'); + expect($.prototype.on).toHaveBeenCalledWith('autosize:resized', expect.any(Function)); + }); + + it('should register a mouseup event handler on the textarea', () => { + expect($.prototype.off).toHaveBeenCalledWith('mouseup.autosize'); + expect($.prototype.on).toHaveBeenCalledWith('mouseup.autosize', expect.any(Function)); + }); + + it('should set the resize css property to vertical', () => { + jest.runOnlyPendingTimers(); + expect($.prototype.css).toHaveBeenCalledWith('resize', 'vertical'); + }); + }); + + describe('setHeightData', () => { + beforeEach(() => { + jest.spyOn($.prototype, 'data').mockImplementation(() => {}); + jest.spyOn($.prototype, 'outerHeight').mockReturnValue(200); + testContext.glForm.setHeightData(); + }); + + it('should set the height data attribute', () => { + expect($.prototype.data).toHaveBeenCalledWith('height', 200); + }); + + it('should call outerHeight', () => { + expect($.prototype.outerHeight).toHaveBeenCalled(); + }); + }); + + describe('destroyAutosize', () => { + describe('when called', () => { + beforeEach(() => { + jest.spyOn($.prototype, 'data').mockImplementation(() => {}); + jest.spyOn($.prototype, 'outerHeight').mockReturnValue(200); + window.outerHeight = () => 400; + jest.spyOn(autosize, 'destroy').mockImplementation(() => {}); + + testContext.glForm.destroyAutosize(); + }); + + it('should call outerHeight', () => { + expect($.prototype.outerHeight).toHaveBeenCalled(); + }); + + it('should get data-height attribute', () => { + expect($.prototype.data).toHaveBeenCalledWith('height'); + }); + + it('should call autosize destroy', () => { + expect(autosize.destroy).toHaveBeenCalledWith(testContext.textarea); + }); + + it('should set the data-height attribute', () => { + expect($.prototype.data).toHaveBeenCalledWith('height', 200); + }); + + it('should set the outerHeight', () => { + expect($.prototype.outerHeight).toHaveBeenCalledWith(200); + }); + + it('should set the css', () => { + expect($.prototype.css).toHaveBeenCalledWith('max-height', window.outerHeight); + }); + }); + + it('should return undefined if the data-height equals the outerHeight', () => { + jest.spyOn($.prototype, 'outerHeight').mockReturnValue(200); + jest.spyOn($.prototype, 'data').mockReturnValue(200); + jest.spyOn(autosize, 'destroy').mockImplementation(() => {}); + + expect(testContext.glForm.destroyAutosize()).toBeUndefined(); + expect(autosize.destroy).not.toHaveBeenCalled(); + }); + }); + }); +}); diff --git a/spec/frontend/global_search_input_spec.js b/spec/frontend/global_search_input_spec.js new file mode 100644 index 00000000000..8c00ea5f193 --- /dev/null +++ b/spec/frontend/global_search_input_spec.js @@ -0,0 +1,215 @@ +/* eslint-disable no-unused-expressions, consistent-return, no-param-reassign, default-case, no-return-assign */ + +import $ from 'jquery'; +import '~/gl_dropdown'; +import initGlobalSearchInput from '~/global_search_input'; +import '~/lib/utils/common_utils'; + +describe('Global search input dropdown', () => { + let widget = null; + + const userName = 'root'; + + const userId = 1; + + const dashboardIssuesPath = '/dashboard/issues'; + + const dashboardMRsPath = '/dashboard/merge_requests'; + + const projectIssuesPath = '/gitlab-org/gitlab-foss/issues'; + + const projectMRsPath = '/gitlab-org/gitlab-foss/-/merge_requests'; + + const groupIssuesPath = '/groups/gitlab-org/-/issues'; + + const groupMRsPath = '/groups/gitlab-org/-/merge_requests'; + + const projectName = 'GitLab Community Edition'; + + const groupName = 'Gitlab Org'; + + const removeBodyAttributes = () => { + const $body = $('body'); + + $body.removeAttr('data-page'); + $body.removeAttr('data-project'); + $body.removeAttr('data-group'); + }; + + // Add required attributes to body before starting the test. + // section would be dashboard|group|project + const addBodyAttributes = section => { + if (section == null) { + section = 'dashboard'; + } + + const $body = $('body'); + removeBodyAttributes(); + switch (section) { + case 'dashboard': + return $body.attr('data-page', 'root:index'); + case 'group': + $body.attr('data-page', 'groups:show'); + return $body.data('group', 'gitlab-org'); + case 'project': + $body.attr('data-page', 'projects:show'); + return $body.data('project', 'gitlab-ce'); + } + }; + + const disableProjectIssues = () => { + document.querySelector('.js-search-project-options').setAttribute('data-issues-disabled', true); + }; + + // Mock `gl` object in window for dashboard specific page. App code will need it. + const mockDashboardOptions = () => { + window.gl || (window.gl = {}); + return (window.gl.dashboardOptions = { + issuesPath: dashboardIssuesPath, + mrPath: dashboardMRsPath, + }); + }; + + // Mock `gl` object in window for project specific page. App code will need it. + const mockProjectOptions = () => { + window.gl || (window.gl = {}); + return (window.gl.projectOptions = { + 'gitlab-ce': { + issuesPath: projectIssuesPath, + mrPath: projectMRsPath, + projectName, + }, + }); + }; + + const mockGroupOptions = () => { + window.gl || (window.gl = {}); + return (window.gl.groupOptions = { + 'gitlab-org': { + issuesPath: groupIssuesPath, + mrPath: groupMRsPath, + projectName: groupName, + }, + }); + }; + + const assertLinks = (list, issuesPath, mrsPath) => { + if (issuesPath) { + const issuesAssignedToMeLink = `a[href="${issuesPath}/?assignee_username=${userName}"]`; + const issuesIHaveCreatedLink = `a[href="${issuesPath}/?author_username=${userName}"]`; + + expect(list.find(issuesAssignedToMeLink).length).toBe(1); + expect(list.find(issuesAssignedToMeLink).text()).toBe('Issues assigned to me'); + expect(list.find(issuesIHaveCreatedLink).length).toBe(1); + expect(list.find(issuesIHaveCreatedLink).text()).toBe("Issues I've created"); + } + const mrsAssignedToMeLink = `a[href="${mrsPath}/?assignee_username=${userName}"]`; + const mrsIHaveCreatedLink = `a[href="${mrsPath}/?author_username=${userName}"]`; + + expect(list.find(mrsAssignedToMeLink).length).toBe(1); + expect(list.find(mrsAssignedToMeLink).text()).toBe('Merge requests assigned to me'); + expect(list.find(mrsIHaveCreatedLink).length).toBe(1); + expect(list.find(mrsIHaveCreatedLink).text()).toBe("Merge requests I've created"); + }; + + preloadFixtures('static/global_search_input.html'); + beforeEach(() => { + loadFixtures('static/global_search_input.html'); + + window.gon = {}; + window.gon.current_user_id = userId; + window.gon.current_username = userName; + + return (widget = initGlobalSearchInput()); + }); + + afterEach(() => { + // Undo what we did to the shared <body> + removeBodyAttributes(); + window.gon = {}; + }); + + it('should show Dashboard specific dropdown menu', () => { + addBodyAttributes(); + mockDashboardOptions(); + widget.searchInput.triggerHandler('focus'); + const list = widget.wrap.find('.dropdown-menu').find('ul'); + return assertLinks(list, dashboardIssuesPath, dashboardMRsPath); + }); + + it('should show Group specific dropdown menu', () => { + addBodyAttributes('group'); + mockGroupOptions(); + widget.searchInput.triggerHandler('focus'); + const list = widget.wrap.find('.dropdown-menu').find('ul'); + return assertLinks(list, groupIssuesPath, groupMRsPath); + }); + + it('should show Project specific dropdown menu', () => { + addBodyAttributes('project'); + mockProjectOptions(); + widget.searchInput.triggerHandler('focus'); + const list = widget.wrap.find('.dropdown-menu').find('ul'); + return assertLinks(list, projectIssuesPath, projectMRsPath); + }); + + it('should show only Project mergeRequest dropdown menu items when project issues are disabled', () => { + addBodyAttributes('project'); + disableProjectIssues(); + mockProjectOptions(); + widget.searchInput.triggerHandler('focus'); + const list = widget.wrap.find('.dropdown-menu').find('ul'); + assertLinks(list, null, projectMRsPath); + }); + + it('should not show category related menu if there is text in the input', () => { + addBodyAttributes('project'); + mockProjectOptions(); + widget.searchInput.val('help'); + widget.searchInput.triggerHandler('focus'); + const list = widget.wrap.find('.dropdown-menu').find('ul'); + const link = `a[href='${projectIssuesPath}/?assignee_username=${userName}']`; + + expect(list.find(link).length).toBe(0); + }); + + it('should not submit the search form when selecting an autocomplete row with the keyboard', () => { + const ENTER = 13; + const DOWN = 40; + addBodyAttributes(); + mockDashboardOptions(true); + const submitSpy = jest.spyOn(document.querySelector('form'), 'submit'); + widget.searchInput.triggerHandler('focus'); + widget.wrap.trigger($.Event('keydown', { which: DOWN })); + const enterKeyEvent = $.Event('keydown', { which: ENTER }); + widget.searchInput.trigger(enterKeyEvent); + // This does not currently catch failing behavior. For security reasons, + // browsers will not trigger default behavior (form submit, in this + // example) on JavaScript-created keypresses. + expect(submitSpy).not.toHaveBeenCalled(); + }); + + describe('disableDropdown', () => { + beforeEach(() => { + widget.enableDropdown(); + }); + + it('should close the Dropdown', () => { + const toggleSpy = jest.spyOn(widget.dropdownToggle, 'dropdown'); + + widget.dropdown.addClass('show'); + widget.disableDropdown(); + + expect(toggleSpy).toHaveBeenCalledWith('toggle'); + }); + }); + + describe('enableDropdown', () => { + it('should open the Dropdown', () => { + const toggleSpy = jest.spyOn(widget.dropdownToggle, 'dropdown'); + widget.enableDropdown(); + + expect(toggleSpy).toHaveBeenCalledWith('toggle'); + }); + }); +}); diff --git a/spec/frontend/header_spec.js b/spec/frontend/header_spec.js index 6d2d7976196..467d9678f69 100644 --- a/spec/frontend/header_spec.js +++ b/spec/frontend/header_spec.js @@ -60,7 +60,7 @@ describe('Header', () => { beforeEach(() => { setFixtures(` <li class="js-nav-user-dropdown"> - <a class="js-buy-ci-minutes-link" data-track-event="click_buy_ci_minutes" data-track-label="free" data-track-property="user_dropdown">Buy CI minutes</a> + <a class="js-buy-pipeline-minutes-link" data-track-event="click_buy_ci_minutes" data-track-label="free" data-track-property="user_dropdown">Buy Pipeline minutes</a> <a class="js-upgrade-plan-link" data-track-event="click_upgrade_link" data-track-label="free" data-track-property="user_dropdown">Upgrade</a> </li>`); @@ -74,7 +74,7 @@ describe('Header', () => { unmockTracking(); }); - it('sends a tracking event when the dropdown is opened and contains Buy CI minutes link', () => { + it('sends a tracking event when the dropdown is opened and contains Buy Pipeline minutes link', () => { $('.js-nav-user-dropdown').trigger('shown.bs.dropdown'); expect(trackingSpy).toHaveBeenCalledWith('some:page', 'show_buy_ci_minutes', { diff --git a/spec/frontend/helpers/dom_shims/element_scroll_to.js b/spec/frontend/helpers/dom_shims/element_scroll_to.js new file mode 100644 index 00000000000..68f8a115865 --- /dev/null +++ b/spec/frontend/helpers/dom_shims/element_scroll_to.js @@ -0,0 +1,6 @@ +Element.prototype.scrollTo = jest.fn().mockImplementation(function scrollTo(x, y) { + this.scrollLeft = x; + this.scrollTop = y; + + this.dispatchEvent(new Event('scroll')); +}); diff --git a/spec/frontend/helpers/dom_shims/image_element_properties.js b/spec/frontend/helpers/dom_shims/image_element_properties.js index 525246e6ade..d94c157e44d 100644 --- a/spec/frontend/helpers/dom_shims/image_element_properties.js +++ b/spec/frontend/helpers/dom_shims/image_element_properties.js @@ -1,6 +1,6 @@ Object.defineProperty(global.HTMLImageElement.prototype, 'src', { get() { - return this.$_jest_src; + return this.$_jest_src || this.getAttribute('src'); }, set(val) { this.$_jest_src = val; diff --git a/spec/frontend/helpers/dom_shims/index.js b/spec/frontend/helpers/dom_shims/index.js index 17a2090d2f1..d18bb94c107 100644 --- a/spec/frontend/helpers/dom_shims/index.js +++ b/spec/frontend/helpers/dom_shims/index.js @@ -1,8 +1,10 @@ import './element_scroll_into_view'; import './element_scroll_by'; +import './element_scroll_to'; import './form_element'; import './get_client_rects'; import './inner_text'; +import './mutation_observer'; import './window_scroll_to'; import './scroll_by'; import './size_properties'; diff --git a/spec/frontend/helpers/dom_shims/mutation_observer.js b/spec/frontend/helpers/dom_shims/mutation_observer.js new file mode 100644 index 00000000000..68c494f19ea --- /dev/null +++ b/spec/frontend/helpers/dom_shims/mutation_observer.js @@ -0,0 +1,7 @@ +/* eslint-disable class-methods-use-this */ +class MutationObserverStub { + disconnect() {} + observe() {} +} + +global.MutationObserver = MutationObserverStub; diff --git a/spec/frontend/helpers/local_storage_helper.js b/spec/frontend/helpers/local_storage_helper.js index 48e66b11767..a66c31d1353 100644 --- a/spec/frontend/helpers/local_storage_helper.js +++ b/spec/frontend/helpers/local_storage_helper.js @@ -28,12 +28,20 @@ const useLocalStorage = fn => { /** * Create an object with the localStorage interface but `jest.fn()` implementations. */ -export const createLocalStorageSpy = () => ({ - clear: jest.fn(), - getItem: jest.fn(), - setItem: jest.fn(), - removeItem: jest.fn(), -}); +export const createLocalStorageSpy = () => { + let storage = {}; + + return { + clear: jest.fn(() => { + storage = {}; + }), + getItem: jest.fn(key => storage[key]), + setItem: jest.fn((key, value) => { + storage[key] = value; + }), + removeItem: jest.fn(key => delete storage[key]), + }; +}; /** * Before each test, overwrite `window.localStorage` with a spy implementation. diff --git a/spec/frontend/helpers/local_storage_helper_spec.js b/spec/frontend/helpers/local_storage_helper_spec.js new file mode 100644 index 00000000000..18aec0f329a --- /dev/null +++ b/spec/frontend/helpers/local_storage_helper_spec.js @@ -0,0 +1,21 @@ +import { useLocalStorageSpy } from './local_storage_helper'; + +useLocalStorageSpy(); + +describe('localStorage helper', () => { + it('mocks localStorage but works exactly like original localStorage', () => { + localStorage.setItem('test', 'testing'); + localStorage.setItem('test2', 'testing'); + + expect(localStorage.getItem('test')).toBe('testing'); + + localStorage.removeItem('test', 'testing'); + + expect(localStorage.getItem('test')).toBeUndefined(); + expect(localStorage.getItem('test2')).toBe('testing'); + + localStorage.clear(); + + expect(localStorage.getItem('test2')).toBeUndefined(); + }); +}); diff --git a/spec/frontend/helpers/mock_dom_observer.js b/spec/frontend/helpers/mock_dom_observer.js new file mode 100644 index 00000000000..7aac51f6264 --- /dev/null +++ b/spec/frontend/helpers/mock_dom_observer.js @@ -0,0 +1,94 @@ +/* eslint-disable class-methods-use-this, max-classes-per-file */ +import { isMatch } from 'lodash'; + +/** + * This class gives us a JSDom friendly DOM observer which we can manually trigger in tests + * + * Use this in place of MutationObserver or IntersectionObserver + */ +class MockObserver { + constructor(cb) { + this.$_cb = cb; + this.$_observers = []; + } + + observe(node, options = {}) { + this.$_observers.push([node, options]); + } + + disconnect() { + this.$_observers = []; + } + + takeRecords() {} + + // eslint-disable-next-line babel/camelcase + $_triggerObserve(node, { entry = {}, options = {} } = {}) { + if (this.$_hasObserver(node, options)) { + this.$_cb([{ target: node, ...entry }]); + } + } + + // eslint-disable-next-line babel/camelcase + $_hasObserver(node, options = {}) { + return this.$_observers.some( + ([obvNode, obvOptions]) => node === obvNode && isMatch(options, obvOptions), + ); + } +} + +class MockIntersectionObserver extends MockObserver { + unobserve(node) { + this.$_observers = this.$_observers.filter(([obvNode]) => node === obvNode); + } +} + +/** + * Use this function to setup a mock observer instance in place of the given DOM Observer + * + * Example: + * ``` + * describe('', () => { + * const { trigger: triggerMutate } = useMockMutationObserver(); + * + * it('test', () => { + * trigger(el, { options: { childList: true }, entry: { } }); + * }); + * }) + * ``` + * + * @param {String} key + */ +const useMockObserver = (key, createMock) => { + let mockObserver; + let origObserver; + + beforeEach(() => { + origObserver = global[key]; + global[key] = jest.fn().mockImplementation((...args) => { + mockObserver = createMock(...args); + return mockObserver; + }); + }); + + afterEach(() => { + mockObserver = null; + global[key] = origObserver; + }); + + const trigger = (...args) => { + if (!mockObserver) { + return; + } + + mockObserver.$_triggerObserve(...args); + }; + + return { trigger }; +}; + +export const useMockIntersectionObserver = () => + useMockObserver('IntersectionObserver', (...args) => new MockIntersectionObserver(...args)); + +export const useMockMutationObserver = () => + useMockObserver('MutationObserver', (...args) => new MockObserver(...args)); diff --git a/spec/frontend/helpers/mock_window_location_helper.js b/spec/frontend/helpers/mock_window_location_helper.js new file mode 100644 index 00000000000..175044d1fce --- /dev/null +++ b/spec/frontend/helpers/mock_window_location_helper.js @@ -0,0 +1,43 @@ +/** + * Manage the instance of a custom `window.location` + * + * This only encapsulates the setup / teardown logic so that it can easily be + * reused with different implementations (i.e. a spy or a [fake][1]) + * + * [1]: https://stackoverflow.com/a/41434763/1708147 + * + * @param {() => any} fn Function that returns the object to use for window.location + */ +const useMockLocation = fn => { + const origWindowLocation = window.location; + let currentWindowLocation; + + Object.defineProperty(window, 'location', { + get: () => currentWindowLocation, + }); + + beforeEach(() => { + currentWindowLocation = fn(); + }); + + afterEach(() => { + currentWindowLocation = origWindowLocation; + }); +}; + +/** + * Create an object with the location interface but `jest.fn()` implementations. + */ +export const createWindowLocationSpy = () => { + return { + assign: jest.fn(), + reload: jest.fn(), + replace: jest.fn(), + toString: jest.fn(), + }; +}; + +/** + * Before each test, overwrite `window.location` with a spy implementation. + */ +export const useMockLocationHelper = () => useMockLocation(createWindowLocationSpy); diff --git a/spec/frontend/helpers/scroll_into_view_promise.js b/spec/frontend/helpers/scroll_into_view_promise.js deleted file mode 100644 index 0edea2103da..00000000000 --- a/spec/frontend/helpers/scroll_into_view_promise.js +++ /dev/null @@ -1,28 +0,0 @@ -export default function scrollIntoViewPromise(intersectionTarget, timeout = 100, maxTries = 5) { - return new Promise((resolve, reject) => { - let intersectionObserver; - let retry = 0; - - const intervalId = setInterval(() => { - if (retry >= maxTries) { - intersectionObserver.disconnect(); - clearInterval(intervalId); - reject(new Error(`Could not scroll target into viewPort within ${timeout * maxTries} ms`)); - } - retry += 1; - intersectionTarget.scrollIntoView(); - }, timeout); - - intersectionObserver = new IntersectionObserver(entries => { - if (entries[0].isIntersecting) { - intersectionObserver.disconnect(); - clearInterval(intervalId); - resolve(); - } - }); - - intersectionObserver.observe(intersectionTarget); - - intersectionTarget.scrollIntoView(); - }); -} diff --git a/spec/frontend/helpers/set_window_location_helper_spec.js b/spec/frontend/helpers/set_window_location_helper_spec.js index 2a2c024c824..da609b6bbf0 100644 --- a/spec/frontend/helpers/set_window_location_helper_spec.js +++ b/spec/frontend/helpers/set_window_location_helper_spec.js @@ -33,7 +33,7 @@ describe('setWindowLocation', () => { it.each([null, 1, undefined, false, '', 'gitlab.com'])( 'throws an error when called with an invalid url: "%s"', invalidUrl => { - expect(() => setWindowLocation(invalidUrl)).toThrow(new TypeError('Invalid URL')); + expect(() => setWindowLocation(invalidUrl)).toThrow(/Invalid URL/); expect(window.location).toBe(originalLocation); }, ); diff --git a/spec/frontend/helpers/vue_mock_directive.js b/spec/frontend/helpers/vue_mock_directive.js new file mode 100644 index 00000000000..699fe3eab26 --- /dev/null +++ b/spec/frontend/helpers/vue_mock_directive.js @@ -0,0 +1,17 @@ +export const getKey = name => `$_gl_jest_${name}`; + +export const getBinding = (el, name) => el[getKey(name)]; + +export const createMockDirective = () => ({ + bind(el, { name, value, arg, modifiers }) { + el[getKey(name)] = { + value, + arg, + modifiers, + }; + }, + + unbind(el, { name }) { + delete el[getKey(name)]; + }, +}); diff --git a/spec/frontend/helpers/wait_for_attribute_change.js b/spec/frontend/helpers/wait_for_attribute_change.js deleted file mode 100644 index 8f22d569222..00000000000 --- a/spec/frontend/helpers/wait_for_attribute_change.js +++ /dev/null @@ -1,16 +0,0 @@ -export default (domElement, attributes, timeout = 1500) => - new Promise((resolve, reject) => { - let observer; - const timeoutId = setTimeout(() => { - observer.disconnect(); - reject(new Error(`Could not see an attribute update within ${timeout} ms`)); - }, timeout); - - observer = new MutationObserver(() => { - clearTimeout(timeoutId); - observer.disconnect(); - resolve(); - }); - - observer.observe(domElement, { attributes: true, attributeFilter: attributes }); - }); diff --git a/spec/frontend/ide/commit_icon_spec.js b/spec/frontend/ide/commit_icon_spec.js new file mode 100644 index 00000000000..90b8e34497c --- /dev/null +++ b/spec/frontend/ide/commit_icon_spec.js @@ -0,0 +1,45 @@ +import { commitItemIconMap } from '~/ide/constants'; +import { decorateData } from '~/ide/stores/utils'; +import getCommitIconMap from '~/ide/commit_icon'; + +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/ide/components/branches/item_spec.js b/spec/frontend/ide/components/branches/item_spec.js index 138443b715e..d8175025755 100644 --- a/spec/frontend/ide/components/branches/item_spec.js +++ b/spec/frontend/ide/components/branches/item_spec.js @@ -1,5 +1,6 @@ import { shallowMount } from '@vue/test-utils'; -import router from '~/ide/ide_router'; +import { createStore } from '~/ide/stores'; +import { createRouter } from '~/ide/ide_router'; import Item from '~/ide/components/branches/item.vue'; import Icon from '~/vue_shared/components/icon.vue'; import Timeago from '~/vue_shared/components/time_ago_tooltip.vue'; @@ -13,6 +14,8 @@ const TEST_PROJECT_ID = projectData.name_with_namespace; describe('IDE branch item', () => { let wrapper; + let store; + let router; function createComponent(props = {}) { wrapper = shallowMount(Item, { @@ -22,9 +25,15 @@ describe('IDE branch item', () => { isActive: false, ...props, }, + router, }); } + beforeEach(() => { + store = createStore(); + router = createRouter(store); + }); + afterEach(() => { wrapper.destroy(); }); diff --git a/spec/frontend/ide/components/commit_sidebar/form_spec.js b/spec/frontend/ide/components/commit_sidebar/form_spec.js index 129180bb46e..c62df4a3795 100644 --- a/spec/frontend/ide/components/commit_sidebar/form_spec.js +++ b/spec/frontend/ide/components/commit_sidebar/form_spec.js @@ -5,11 +5,14 @@ import store from '~/ide/stores'; import CommitForm from '~/ide/components/commit_sidebar/form.vue'; import { leftSidebarViews } from '~/ide/constants'; import { resetStore } from '../../helpers'; +import waitForPromises from 'helpers/wait_for_promises'; describe('IDE commit form', () => { const Component = Vue.extend(CommitForm); let vm; + const beginCommitButton = () => vm.$el.querySelector('[data-testid="begin-commit-button"]'); + beforeEach(() => { store.state.changedFiles.push('test'); store.state.currentProjectId = 'abcproject'; @@ -25,8 +28,15 @@ describe('IDE commit form', () => { resetStore(vm.$store); }); - it('enables button when has changes', () => { - expect(vm.$el.querySelector('[disabled]')).toBe(null); + it('enables begin commit button when there are changes', () => { + expect(beginCommitButton()).not.toHaveAttr('disabled'); + }); + + it('disables begin commit button when there are no changes', async () => { + store.state.changedFiles = []; + await vm.$nextTick(); + + expect(beginCommitButton()).toHaveAttr('disabled'); }); describe('compact', () => { @@ -37,8 +47,8 @@ describe('IDE commit form', () => { }); it('renders commit button in compact mode', () => { - expect(vm.$el.querySelector('.btn-primary')).not.toBeNull(); - expect(vm.$el.querySelector('.btn-primary').textContent).toContain('Commit'); + expect(beginCommitButton()).not.toBeNull(); + expect(beginCommitButton().textContent).toContain('Commit'); }); it('does not render form', () => { @@ -54,7 +64,7 @@ describe('IDE commit form', () => { }); it('shows form when clicking commit button', () => { - vm.$el.querySelector('.btn-primary').click(); + beginCommitButton().click(); return vm.$nextTick(() => { expect(vm.$el.querySelector('form')).not.toBeNull(); @@ -62,31 +72,117 @@ describe('IDE commit form', () => { }); it('toggles activity bar view when clicking commit button', () => { - vm.$el.querySelector('.btn-primary').click(); + beginCommitButton().click(); return vm.$nextTick(() => { expect(store.state.currentActivityView).toBe(leftSidebarViews.commit.name); }); }); - it('collapses if lastCommitMsg is set to empty and current view is not commit view', () => { + it('collapses if lastCommitMsg is set to empty and current view is not commit view', async () => { store.state.lastCommitMsg = 'abc'; store.state.currentActivityView = leftSidebarViews.edit.name; + await vm.$nextTick(); - return vm - .$nextTick() - .then(() => { - // if commit message is set, form is uncollapsed - expect(vm.isCompact).toBe(false); + // if commit message is set, form is uncollapsed + expect(vm.isCompact).toBe(false); - store.state.lastCommitMsg = ''; + store.state.lastCommitMsg = ''; + await vm.$nextTick(); - return vm.$nextTick(); - }) - .then(() => { - // collapsed when set to empty - expect(vm.isCompact).toBe(true); - }); + // collapsed when set to empty + expect(vm.isCompact).toBe(true); + }); + + it('collapses if in commit view but there are no changes and vice versa', async () => { + store.state.currentActivityView = leftSidebarViews.commit.name; + await vm.$nextTick(); + + // expanded by default if there are changes + expect(vm.isCompact).toBe(false); + + store.state.changedFiles = []; + await vm.$nextTick(); + + expect(vm.isCompact).toBe(true); + + store.state.changedFiles.push('test'); + await vm.$nextTick(); + + // uncollapsed once again + expect(vm.isCompact).toBe(false); + }); + + it('collapses if switched from commit view to edit view and vice versa', async () => { + store.state.currentActivityView = leftSidebarViews.edit.name; + await vm.$nextTick(); + + expect(vm.isCompact).toBe(true); + + store.state.currentActivityView = leftSidebarViews.commit.name; + await vm.$nextTick(); + + expect(vm.isCompact).toBe(false); + + store.state.currentActivityView = leftSidebarViews.edit.name; + await vm.$nextTick(); + + expect(vm.isCompact).toBe(true); + }); + + describe('when window height is less than MAX_WINDOW_HEIGHT', () => { + let oldHeight; + + beforeEach(() => { + oldHeight = window.innerHeight; + window.innerHeight = 700; + }); + + afterEach(() => { + window.innerHeight = oldHeight; + }); + + it('stays collapsed when switching from edit view to commit view and back', async () => { + store.state.currentActivityView = leftSidebarViews.edit.name; + await vm.$nextTick(); + + expect(vm.isCompact).toBe(true); + + store.state.currentActivityView = leftSidebarViews.commit.name; + await vm.$nextTick(); + + expect(vm.isCompact).toBe(true); + + store.state.currentActivityView = leftSidebarViews.edit.name; + await vm.$nextTick(); + + expect(vm.isCompact).toBe(true); + }); + + it('stays uncollapsed if changes are added or removed', async () => { + store.state.currentActivityView = leftSidebarViews.commit.name; + await vm.$nextTick(); + + expect(vm.isCompact).toBe(true); + + store.state.changedFiles = []; + await vm.$nextTick(); + + expect(vm.isCompact).toBe(true); + + store.state.changedFiles.push('test'); + await vm.$nextTick(); + + expect(vm.isCompact).toBe(true); + }); + + it('uncollapses when clicked on Commit button in the edit view', async () => { + store.state.currentActivityView = leftSidebarViews.edit.name; + beginCommitButton().click(); + await waitForPromises(); + + expect(vm.isCompact).toBe(false); + }); }); }); @@ -118,7 +214,7 @@ describe('IDE commit form', () => { }); it('always opens itself in full view current activity view is not commit view when clicking commit button', () => { - vm.$el.querySelector('.btn-primary').click(); + beginCommitButton().click(); return vm.$nextTick(() => { expect(store.state.currentActivityView).toBe(leftSidebarViews.commit.name); diff --git a/spec/frontend/ide/components/commit_sidebar/list_item_spec.js b/spec/frontend/ide/components/commit_sidebar/list_item_spec.js index ebb41448905..7ce628d4da7 100644 --- a/spec/frontend/ide/components/commit_sidebar/list_item_spec.js +++ b/spec/frontend/ide/components/commit_sidebar/list_item_spec.js @@ -1,17 +1,22 @@ import Vue from 'vue'; import { trimText } from 'helpers/text_helper'; import { createComponentWithStore } from 'helpers/vue_mount_component_helper'; -import store from '~/ide/stores'; +import { createStore } from '~/ide/stores'; import listItem from '~/ide/components/commit_sidebar/list_item.vue'; -import router from '~/ide/ide_router'; -import { file, resetStore } from '../../helpers'; +import { createRouter } from '~/ide/ide_router'; +import { file } from '../../helpers'; describe('Multi-file editor commit sidebar list item', () => { let vm; let f; let findPathEl; + let store; + let router; beforeEach(() => { + store = createStore(); + router = createRouter(store); + const Component = Vue.extend(listItem); f = file('test-file'); @@ -28,8 +33,6 @@ describe('Multi-file editor commit sidebar list item', () => { afterEach(() => { vm.$destroy(); - - resetStore(store); }); const findPathText = () => trimText(findPathEl.textContent); diff --git a/spec/frontend/ide/components/commit_sidebar/message_field_spec.js b/spec/frontend/ide/components/commit_sidebar/message_field_spec.js new file mode 100644 index 00000000000..d6ea8b9a4bd --- /dev/null +++ b/spec/frontend/ide/components/commit_sidebar/message_field_spec.js @@ -0,0 +1,170 @@ +import Vue from 'vue'; +import createComponent from 'helpers/vue_mount_component_helper'; +import CommitMessageField from '~/ide/components/commit_sidebar/message_field.vue'; + +describe('IDE commit message field', () => { + const Component = Vue.extend(CommitMessageField); + let vm; + + beforeEach(() => { + setFixtures('<div id="app"></div>'); + + vm = createComponent( + Component, + { + text: '', + placeholder: 'testing', + }, + '#app', + ); + }); + + afterEach(() => { + vm.$destroy(); + }); + + it('adds is-focused class on focus', done => { + vm.$el.querySelector('textarea').focus(); + + vm.$nextTick(() => { + expect(vm.$el.querySelector('.is-focused')).not.toBeNull(); + + done(); + }); + }); + + it('removed is-focused class on blur', done => { + vm.$el.querySelector('textarea').focus(); + + vm.$nextTick() + .then(() => { + expect(vm.$el.querySelector('.is-focused')).not.toBeNull(); + + vm.$el.querySelector('textarea').blur(); + + return vm.$nextTick(); + }) + .then(() => { + expect(vm.$el.querySelector('.is-focused')).toBeNull(); + + done(); + }) + .then(done) + .catch(done.fail); + }); + + it('emits input event on input', () => { + jest.spyOn(vm, '$emit').mockImplementation(); + + const textarea = vm.$el.querySelector('textarea'); + textarea.value = 'testing'; + + textarea.dispatchEvent(new Event('input')); + + expect(vm.$emit).toHaveBeenCalledWith('input', 'testing'); + }); + + describe('highlights', () => { + describe('subject line', () => { + it('does not highlight less than 50 characters', done => { + vm.text = 'text less than 50 chars'; + + vm.$nextTick() + .then(() => { + expect(vm.$el.querySelector('.highlights span').textContent).toContain( + 'text less than 50 chars', + ); + + expect(vm.$el.querySelector('mark').style.display).toBe('none'); + }) + .then(done) + .catch(done.fail); + }); + + it('highlights characters over 50 length', done => { + vm.text = + 'text less than 50 chars that should not highlighted. text more than 50 should be highlighted'; + + vm.$nextTick() + .then(() => { + expect(vm.$el.querySelector('.highlights span').textContent).toContain( + 'text less than 50 chars that should not highlighte', + ); + + expect(vm.$el.querySelector('mark').style.display).not.toBe('none'); + expect(vm.$el.querySelector('mark').textContent).toBe( + 'd. text more than 50 should be highlighted', + ); + }) + .then(done) + .catch(done.fail); + }); + }); + + describe('body text', () => { + it('does not highlight body text less tan 72 characters', done => { + vm.text = 'subject line\nbody content'; + + vm.$nextTick() + .then(() => { + expect(vm.$el.querySelectorAll('.highlights span').length).toBe(2); + expect(vm.$el.querySelectorAll('mark')[1].style.display).toBe('none'); + }) + .then(done) + .catch(done.fail); + }); + + it('highlights body text more than 72 characters', done => { + vm.text = + 'subject line\nbody content that will be highlighted when it is more than 72 characters in length'; + + vm.$nextTick() + .then(() => { + expect(vm.$el.querySelectorAll('.highlights span').length).toBe(2); + expect(vm.$el.querySelectorAll('mark')[1].style.display).not.toBe('none'); + expect(vm.$el.querySelectorAll('mark')[1].textContent).toBe(' in length'); + }) + .then(done) + .catch(done.fail); + }); + + it('highlights body text & subject line', done => { + vm.text = + 'text less than 50 chars that should not highlighted\nbody content that will be highlighted when it is more than 72 characters in length'; + + vm.$nextTick() + .then(() => { + expect(vm.$el.querySelectorAll('.highlights span').length).toBe(2); + expect(vm.$el.querySelectorAll('mark').length).toBe(2); + + expect(vm.$el.querySelectorAll('mark')[0].textContent).toContain('d'); + expect(vm.$el.querySelectorAll('mark')[1].textContent).toBe(' in length'); + }) + .then(done) + .catch(done.fail); + }); + }); + }); + + describe('scrolling textarea', () => { + it('updates transform of highlights', done => { + vm.text = 'subject line\n\n\n\n\n\n\n\n\n\n\nbody content'; + + vm.$nextTick() + .then(() => { + vm.$el.querySelector('textarea').scrollTo(0, 50); + + vm.handleScroll(); + }) + .then(vm.$nextTick) + .then(() => { + expect(vm.scrollTop).toBe(50); + expect(vm.$el.querySelector('.highlights').style.transform).toBe( + 'translate3d(0, -50px, 0)', + ); + }) + .then(done) + .catch(done.fail); + }); + }); +}); diff --git a/spec/frontend/ide/components/ide_sidebar_nav_spec.js b/spec/frontend/ide/components/ide_sidebar_nav_spec.js new file mode 100644 index 00000000000..49d476b56e4 --- /dev/null +++ b/spec/frontend/ide/components/ide_sidebar_nav_spec.js @@ -0,0 +1,118 @@ +import { shallowMount } from '@vue/test-utils'; +import { GlIcon } from '@gitlab/ui'; +import { createMockDirective, getBinding } from 'helpers/vue_mock_directive'; +import IdeSidebarNav from '~/ide/components/ide_sidebar_nav.vue'; +import { SIDE_RIGHT, SIDE_LEFT } from '~/ide/constants'; + +const TEST_TABS = [ + { + title: 'Lorem', + icon: 'angle-up', + views: [{ name: 'lorem-1' }, { name: 'lorem-2' }], + }, + { + title: 'Ipsum', + icon: 'angle-down', + views: [{ name: 'ipsum-1' }, { name: 'ipsum-2' }], + }, +]; +const TEST_CURRENT_INDEX = 1; +const TEST_CURRENT_VIEW = TEST_TABS[TEST_CURRENT_INDEX].views[1].name; +const TEST_OPEN_VIEW = TEST_TABS[TEST_CURRENT_INDEX].views[0]; + +describe('ide/components/ide_sidebar_nav', () => { + let wrapper; + + const createComponent = (props = {}) => { + if (wrapper) { + throw new Error('wrapper already exists'); + } + + wrapper = shallowMount(IdeSidebarNav, { + propsData: { + tabs: TEST_TABS, + currentView: TEST_CURRENT_VIEW, + isOpen: false, + ...props, + }, + directives: { + tooltip: createMockDirective(), + }, + }); + }; + + afterEach(() => { + wrapper.destroy(); + wrapper = null; + }); + + const findButtons = () => wrapper.findAll('li button'); + const findButtonsData = () => + findButtons().wrappers.map(button => { + return { + title: button.attributes('title'), + ariaLabel: button.attributes('aria-label'), + classes: button.classes(), + qaSelector: button.attributes('data-qa-selector'), + icon: button.find(GlIcon).props('name'), + tooltip: getBinding(button.element, 'tooltip').value, + }; + }); + const clickTab = () => + findButtons() + .at(TEST_CURRENT_INDEX) + .trigger('click'); + + describe.each` + isOpen | side | otherSide | classes | classesObj | emitEvent | emitArg + ${false} | ${SIDE_LEFT} | ${SIDE_RIGHT} | ${[]} | ${{}} | ${'open'} | ${[TEST_OPEN_VIEW]} + ${false} | ${SIDE_RIGHT} | ${SIDE_LEFT} | ${['is-right']} | ${{}} | ${'open'} | ${[TEST_OPEN_VIEW]} + ${true} | ${SIDE_RIGHT} | ${SIDE_LEFT} | ${['is-right']} | ${{ [TEST_CURRENT_INDEX]: ['active'] }} | ${'close'} | ${[]} + `( + 'with side = $side, isOpen = $isOpen', + ({ isOpen, side, otherSide, classes, classesObj, emitEvent, emitArg }) => { + let bsTooltipHide; + + beforeEach(() => { + createComponent({ isOpen, side }); + + bsTooltipHide = jest.fn(); + wrapper.vm.$root.$on('bv::hide::tooltip', bsTooltipHide); + }); + + it('renders buttons', () => { + expect(findButtonsData()).toEqual( + TEST_TABS.map((tab, index) => ({ + title: tab.title, + ariaLabel: tab.title, + classes: ['ide-sidebar-link', ...classes, ...(classesObj[index] || [])], + qaSelector: `${tab.title.toLowerCase()}_tab_button`, + icon: tab.icon, + tooltip: { + container: 'body', + placement: otherSide, + }, + })), + ); + }); + + it('when tab clicked, emits event', () => { + expect(wrapper.emitted()).toEqual({}); + + clickTab(); + + expect(wrapper.emitted()).toEqual({ + [emitEvent]: [emitArg], + }); + }); + + it('when tab clicked, hides tooltip', () => { + expect(bsTooltipHide).not.toHaveBeenCalled(); + + clickTab(); + + expect(bsTooltipHide).toHaveBeenCalled(); + }); + }, + ); +}); diff --git a/spec/frontend/ide/components/ide_spec.js b/spec/frontend/ide/components/ide_spec.js index 78a280e6304..efc1d984dec 100644 --- a/spec/frontend/ide/components/ide_spec.js +++ b/spec/frontend/ide/components/ide_spec.js @@ -1,11 +1,18 @@ import Vue from 'vue'; import { createComponentWithStore } from 'helpers/vue_mount_component_helper'; -import store from '~/ide/stores'; +import { createStore } from '~/ide/stores'; import ide from '~/ide/components/ide.vue'; import { file, resetStore } from '../helpers'; import { projectData } from '../mock_data'; +import extendStore from '~/ide/stores/extend'; + +let store; function bootstrap(projData) { + store = createStore(); + + extendStore(store, document.createElement('div')); + const Component = Vue.extend(ide); store.state.currentProjectId = 'abcproject'; diff --git a/spec/frontend/ide/components/ide_status_list_spec.js b/spec/frontend/ide/components/ide_status_list_spec.js index 99c27ca30fb..847464ed806 100644 --- a/spec/frontend/ide/components/ide_status_list_spec.js +++ b/spec/frontend/ide/components/ide_status_list_spec.js @@ -1,13 +1,14 @@ import Vuex from 'vuex'; import { createLocalVue, shallowMount } from '@vue/test-utils'; import IdeStatusList from '~/ide/components/ide_status_list.vue'; +import TerminalSyncStatusSafe from '~/ide/components/terminal_sync/terminal_sync_status_safe.vue'; const TEST_FILE = { name: 'lorem.md', - eol: 'LF', editorRow: 3, editorColumn: 23, fileLanguage: 'markdown', + content: 'abc\nndef', }; const localVue = createLocalVue(); @@ -55,7 +56,8 @@ describe('ide/components/ide_status_list', () => { }); it('shows file eol', () => { - expect(wrapper.text()).toContain(TEST_FILE.name); + expect(wrapper.text()).not.toContain('CRLF'); + expect(wrapper.text()).toContain('LF'); }); it('shows file editor position', () => { @@ -78,13 +80,9 @@ describe('ide/components/ide_status_list', () => { }); }); - it('adds slot as child of list', () => { - createComponent({ - slots: { - default: ['<div class="js-test">Hello</div>', '<div class="js-test">World</div>'], - }, - }); + it('renders terminal sync status', () => { + createComponent(); - expect(wrapper.find('.ide-status-list').findAll('.js-test').length).toEqual(2); + expect(wrapper.find(TerminalSyncStatusSafe).exists()).toBe(true); }); }); diff --git a/spec/frontend/ide/components/jobs/__snapshots__/stage_spec.js.snap b/spec/frontend/ide/components/jobs/__snapshots__/stage_spec.js.snap index db5175c3f7b..bdd3d439fd4 100644 --- a/spec/frontend/ide/components/jobs/__snapshots__/stage_spec.js.snap +++ b/spec/frontend/ide/components/jobs/__snapshots__/stage_spec.js.snap @@ -14,7 +14,7 @@ exports[`IDE pipeline stage renders stage details & icon 1`] = ` /> <strong - class="prepend-left-8 text-truncate" + class="gl-ml-3 text-truncate" data-container="body" data-original-title="" title="" @@ -25,7 +25,7 @@ exports[`IDE pipeline stage renders stage details & icon 1`] = ` </strong> <div - class="append-right-8 prepend-left-4" + class="gl-mr-3 gl-ml-2" > <span class="badge badge-pill" diff --git a/spec/frontend/ide/components/jobs/detail_spec.js b/spec/frontend/ide/components/jobs/detail_spec.js new file mode 100644 index 00000000000..8f3815d5aab --- /dev/null +++ b/spec/frontend/ide/components/jobs/detail_spec.js @@ -0,0 +1,187 @@ +import Vue from 'vue'; +import JobDetail from '~/ide/components/jobs/detail.vue'; +import { createStore } from '~/ide/stores'; +import { createComponentWithStore } from '../../../helpers/vue_mount_component_helper'; +import { jobs } from '../../mock_data'; +import { TEST_HOST } from 'helpers/test_constants'; + +describe('IDE jobs detail view', () => { + let vm; + + const createComponent = () => { + const store = createStore(); + + store.state.pipelines.detailJob = { + ...jobs[0], + isLoading: true, + output: 'testing', + rawPath: `${TEST_HOST}/raw`, + }; + + return createComponentWithStore(Vue.extend(JobDetail), store); + }; + + beforeEach(() => { + vm = createComponent(); + + jest.spyOn(vm, 'fetchJobTrace').mockResolvedValue(); + }); + + afterEach(() => { + vm.$destroy(); + }); + + describe('mounted', () => { + beforeEach(() => { + vm = vm.$mount(); + }); + + it('calls fetchJobTrace', () => { + expect(vm.fetchJobTrace).toHaveBeenCalled(); + }); + + it('scrolls to bottom', () => { + expect(vm.$refs.buildTrace.scrollTo).toHaveBeenCalled(); + }); + + it('renders job output', () => { + expect(vm.$el.querySelector('.bash').textContent).toContain('testing'); + }); + + it('renders empty message output', done => { + vm.$store.state.pipelines.detailJob.output = ''; + + vm.$nextTick(() => { + expect(vm.$el.querySelector('.bash').textContent).toContain('No messages were logged'); + + done(); + }); + }); + + it('renders loading icon', () => { + expect(vm.$el.querySelector('.build-loader-animation')).not.toBe(null); + expect(vm.$el.querySelector('.build-loader-animation').style.display).toBe(''); + }); + + it('hides output when loading', () => { + expect(vm.$el.querySelector('.bash')).not.toBe(null); + expect(vm.$el.querySelector('.bash').style.display).toBe('none'); + }); + + it('hide loading icon when isLoading is false', done => { + vm.$store.state.pipelines.detailJob.isLoading = false; + + vm.$nextTick(() => { + expect(vm.$el.querySelector('.build-loader-animation').style.display).toBe('none'); + + done(); + }); + }); + + it('resets detailJob when clicking header button', () => { + jest.spyOn(vm, 'setDetailJob').mockImplementation(); + + vm.$el.querySelector('.btn').click(); + + expect(vm.setDetailJob).toHaveBeenCalledWith(null); + }); + + it('renders raw path link', () => { + expect(vm.$el.querySelector('.controllers-buttons').getAttribute('href')).toBe( + `${TEST_HOST}/raw`, + ); + }); + }); + + describe('scroll buttons', () => { + beforeEach(() => { + vm = createComponent(); + jest.spyOn(vm, 'fetchJobTrace').mockResolvedValue(); + }); + + afterEach(() => { + vm.$destroy(); + }); + + it.each` + fnName | btnName | scrollPos + ${'scrollDown'} | ${'down'} | ${0} + ${'scrollUp'} | ${'up'} | ${1} + `('triggers $fnName when clicking $btnName button', ({ fnName, scrollPos }) => { + jest.spyOn(vm, fnName).mockImplementation(); + + vm = vm.$mount(); + + vm.scrollPos = scrollPos; + + return vm.$nextTick().then(() => { + vm.$el.querySelector('.btn-scroll:not([disabled])').click(); + expect(vm[fnName]).toHaveBeenCalled(); + }); + }); + }); + + describe('scrollDown', () => { + beforeEach(() => { + vm = vm.$mount(); + + jest.spyOn(vm.$refs.buildTrace, 'scrollTo').mockImplementation(); + }); + + it('scrolls build trace to bottom', () => { + jest.spyOn(vm.$refs.buildTrace, 'scrollHeight', 'get').mockReturnValue(1000); + + vm.scrollDown(); + + expect(vm.$refs.buildTrace.scrollTo).toHaveBeenCalledWith(0, 1000); + }); + }); + + describe('scrollUp', () => { + beforeEach(() => { + vm = vm.$mount(); + + jest.spyOn(vm.$refs.buildTrace, 'scrollTo').mockImplementation(); + }); + + it('scrolls build trace to top', () => { + vm.scrollUp(); + + expect(vm.$refs.buildTrace.scrollTo).toHaveBeenCalledWith(0, 0); + }); + }); + + describe('scrollBuildLog', () => { + beforeEach(() => { + vm = vm.$mount(); + jest.spyOn(vm.$refs.buildTrace, 'scrollTo').mockImplementation(); + jest.spyOn(vm.$refs.buildTrace, 'offsetHeight', 'get').mockReturnValue(100); + jest.spyOn(vm.$refs.buildTrace, 'scrollHeight', 'get').mockReturnValue(200); + }); + + it('sets scrollPos to bottom when at the bottom', () => { + jest.spyOn(vm.$refs.buildTrace, 'scrollTop', 'get').mockReturnValue(100); + + vm.scrollBuildLog(); + + expect(vm.scrollPos).toBe(1); + }); + + it('sets scrollPos to top when at the top', () => { + jest.spyOn(vm.$refs.buildTrace, 'scrollTop', 'get').mockReturnValue(0); + vm.scrollPos = 1; + + vm.scrollBuildLog(); + + expect(vm.scrollPos).toBe(0); + }); + + it('resets scrollPos when not at top or bottom', () => { + jest.spyOn(vm.$refs.buildTrace, 'scrollTop', 'get').mockReturnValue(10); + + vm.scrollBuildLog(); + + expect(vm.scrollPos).toBe(''); + }); + }); +}); diff --git a/spec/frontend/ide/components/merge_requests/item_spec.js b/spec/frontend/ide/components/merge_requests/item_spec.js index 6a2451ad263..b1da89d7a9b 100644 --- a/spec/frontend/ide/components/merge_requests/item_spec.js +++ b/spec/frontend/ide/components/merge_requests/item_spec.js @@ -1,63 +1,91 @@ -import Vue from 'vue'; -import router from '~/ide/ide_router'; +import Vuex from 'vuex'; +import { mount, createLocalVue } from '@vue/test-utils'; +import { createStore } from '~/ide/stores'; +import { createRouter } from '~/ide/ide_router'; import Item from '~/ide/components/merge_requests/item.vue'; -import mountCompontent from '../../../helpers/vue_mount_component_helper'; + +const TEST_ITEM = { + iid: 1, + projectPathWithNamespace: 'gitlab-org/gitlab-ce', + title: 'Merge request title', +}; describe('IDE merge request item', () => { - const Component = Vue.extend(Item); - let vm; + const localVue = createLocalVue(); + localVue.use(Vuex); - beforeEach(() => { - vm = mountCompontent(Component, { - item: { - iid: 1, - projectPathWithNamespace: 'gitlab-org/gitlab-ce', - title: 'Merge request title', + let wrapper; + let store; + let router; + + const createComponent = (props = {}) => { + wrapper = mount(Item, { + propsData: { + item: { + ...TEST_ITEM, + }, + currentId: `${TEST_ITEM.iid}`, + currentProjectId: TEST_ITEM.projectPathWithNamespace, + ...props, }, - currentId: '1', - currentProjectId: 'gitlab-org/gitlab-ce', + localVue, + router, + store, }); + }; + const findIcon = () => wrapper.find('.ic-mobile-issue-close'); + + beforeEach(() => { + store = createStore(); + router = createRouter(store); }); afterEach(() => { - vm.$destroy(); + wrapper.destroy(); + wrapper = null; }); - it('renders merge requests data', () => { - expect(vm.$el.textContent).toContain('Merge request title'); - expect(vm.$el.textContent).toContain('gitlab-org/gitlab-ce!1'); - }); + describe('default', () => { + beforeEach(() => { + createComponent(); + }); + + it('renders merge requests data', () => { + expect(wrapper.text()).toContain('Merge request title'); + expect(wrapper.text()).toContain('gitlab-org/gitlab-ce!1'); + }); - it('renders link with href', () => { - const expectedHref = router.resolve( - `/project/${vm.item.projectPathWithNamespace}/merge_requests/${vm.item.iid}`, - ).href; + it('renders link with href', () => { + const expectedHref = router.resolve( + `/project/${TEST_ITEM.projectPathWithNamespace}/merge_requests/${TEST_ITEM.iid}`, + ).href; - expect(vm.$el.tagName.toLowerCase()).toBe('a'); - expect(vm.$el).toHaveAttr('href', expectedHref); - }); + expect(wrapper.element.tagName.toLowerCase()).toBe('a'); + expect(wrapper.attributes('href')).toBe(expectedHref); + }); - it('renders icon if ID matches currentId', () => { - expect(vm.$el.querySelector('.ic-mobile-issue-close')).not.toBe(null); + it('renders icon if ID matches currentId', () => { + expect(findIcon().exists()).toBe(true); + }); }); - it('does not render icon if ID does not match currentId', done => { - vm.currentId = '2'; - - vm.$nextTick(() => { - expect(vm.$el.querySelector('.ic-mobile-issue-close')).toBe(null); + describe('with different currentId', () => { + beforeEach(() => { + createComponent({ currentId: `${TEST_ITEM.iid + 1}` }); + }); - done(); + it('does not render icon', () => { + expect(findIcon().exists()).toBe(false); }); }); - it('does not render icon if project ID does not match', done => { - vm.currentProjectId = 'test/test'; - - vm.$nextTick(() => { - expect(vm.$el.querySelector('.ic-mobile-issue-close')).toBe(null); + describe('with different project ID', () => { + beforeEach(() => { + createComponent({ currentProjectId: 'test/test' }); + }); - done(); + it('does not render icon', () => { + expect(findIcon().exists()).toBe(false); }); }); }); diff --git a/spec/frontend/ide/components/new_dropdown/modal_spec.js b/spec/frontend/ide/components/new_dropdown/modal_spec.js index 62a59a76bf4..da17cc3601e 100644 --- a/spec/frontend/ide/components/new_dropdown/modal_spec.js +++ b/spec/frontend/ide/components/new_dropdown/modal_spec.js @@ -120,6 +120,46 @@ describe('new file modal component', () => { }); }); + describe('createFromTemplate', () => { + let store; + + beforeEach(() => { + store = createStore(); + store.state.entries = { + 'test-path/test': { + name: 'test', + deleted: false, + }, + }; + + vm = createComponentWithStore(Component, store).$mount(); + vm.open('blob'); + + jest.spyOn(vm, 'createTempEntry').mockImplementation(); + }); + + it.each` + entryName | newFilePath + ${''} | ${'.gitignore'} + ${'README.md'} | ${'.gitignore'} + ${'test-path/test/'} | ${'test-path/test/.gitignore'} + ${'test-path/test'} | ${'test-path/.gitignore'} + ${'test-path/test/abc.md'} | ${'test-path/test/.gitignore'} + `( + 'creates a new file with the given template name in appropriate directory for path: $path', + ({ entryName, newFilePath }) => { + vm.entryName = entryName; + + vm.createFromTemplate({ name: '.gitignore' }); + + expect(vm.createTempEntry).toHaveBeenCalledWith({ + name: newFilePath, + type: 'blob', + }); + }, + ); + }); + describe('submitForm', () => { let store; diff --git a/spec/frontend/ide/components/new_dropdown/upload_spec.js b/spec/frontend/ide/components/new_dropdown/upload_spec.js index a418fdeb572..ad27954cd10 100644 --- a/spec/frontend/ide/components/new_dropdown/upload_spec.js +++ b/spec/frontend/ide/components/new_dropdown/upload_spec.js @@ -85,7 +85,6 @@ describe('new dropdown upload', () => { name: textFile.name, type: 'blob', content: 'plain text', - base64: false, binary: false, rawPath: '', }); @@ -103,7 +102,6 @@ describe('new dropdown upload', () => { name: binaryFile.name, type: 'blob', content: binaryTarget.result.split('base64,')[1], - base64: true, binary: true, rawPath: binaryTarget.result, }); diff --git a/spec/frontend/ide/components/panes/collapsible_sidebar_spec.js b/spec/frontend/ide/components/panes/collapsible_sidebar_spec.js index 3bc89996978..e32abc98aae 100644 --- a/spec/frontend/ide/components/panes/collapsible_sidebar_spec.js +++ b/spec/frontend/ide/components/panes/collapsible_sidebar_spec.js @@ -2,6 +2,7 @@ import { createLocalVue, shallowMount } from '@vue/test-utils'; import { createStore } from '~/ide/stores'; import paneModule from '~/ide/stores/modules/pane'; import CollapsibleSidebar from '~/ide/components/panes/collapsible_sidebar.vue'; +import IdeSidebarNav from '~/ide/components/ide_sidebar_nav.vue'; import Vuex from 'vuex'; const localVue = createLocalVue(); @@ -24,19 +25,15 @@ describe('ide/components/panes/collapsible_sidebar.vue', () => { width, ...props, }, - slots: { - 'header-icon': '<div class=".header-icon-slot">SLOT ICON</div>', - header: '<div class=".header-slot"/>', - footer: '<div class=".footer-slot"/>', - }, }); }; - const findTabButton = () => wrapper.find(`[data-qa-selector="${fakeComponentName}_tab_button"]`); + const findSidebarNav = () => wrapper.find(IdeSidebarNav); beforeEach(() => { store = createStore(); store.registerModule('leftPane', paneModule()); + jest.spyOn(store, 'dispatch').mockImplementation(); }); afterEach(() => { @@ -75,92 +72,60 @@ describe('ide/components/panes/collapsible_sidebar.vue', () => { ${'left'} ${'right'} `('when side=$side', ({ side }) => { - it('correctly renders side specific attributes', () => { + beforeEach(() => { createComponent({ extensionTabs, side }); - const button = findTabButton(); - - return wrapper.vm.$nextTick().then(() => { - expect(wrapper.classes()).toContain('multi-file-commit-panel'); - expect(wrapper.classes()).toContain(`ide-${side}-sidebar`); - expect(wrapper.find('.multi-file-commit-panel-inner')).not.toBe(null); - expect(wrapper.find(`.ide-${side}-sidebar-${fakeComponentName}`)).not.toBe(null); - expect(button.attributes('data-placement')).toEqual(side === 'left' ? 'right' : 'left'); - if (side === 'right') { - // this class is only needed on the right side; there is no 'is-left' - expect(button.classes()).toContain('is-right'); - } else { - expect(button.classes()).not.toContain('is-right'); - } - }); }); - }); - - describe('when default side', () => { - let button; - beforeEach(() => { - createComponent({ extensionTabs }); - - button = findTabButton(); + it('correctly renders side specific attributes', () => { + expect(wrapper.classes()).toContain('multi-file-commit-panel'); + expect(wrapper.classes()).toContain(`ide-${side}-sidebar`); + expect(wrapper.find('.multi-file-commit-panel-inner')).not.toBe(null); + expect(wrapper.find(`.ide-${side}-sidebar-${fakeComponentName}`)).not.toBe(null); + expect(findSidebarNav().props('side')).toBe(side); }); - it('correctly renders tab-specific classes', () => { - store.state.rightPane.currentView = fakeComponentName; - - return wrapper.vm.$nextTick().then(() => { - expect(button.classes()).toContain('button-class-1'); - expect(button.classes()).toContain('button-class-2'); - }); + it('nothing is dispatched', () => { + expect(store.dispatch).not.toHaveBeenCalled(); }); - it('can show an open pane tab with an active view', () => { - store.state.rightPane.isOpen = true; - store.state.rightPane.currentView = fakeComponentName; + it('when sidebar emits open, dispatch open', () => { + const view = 'lorem-view'; - return wrapper.vm.$nextTick().then(() => { - expect(button.classes()).toEqual(expect.arrayContaining(['ide-sidebar-link', 'active'])); - expect(button.attributes('data-original-title')).toEqual(fakeComponentName); - expect(wrapper.find('.js-tab-view').exists()).toBe(true); - }); - }); - - it('does not show a pane which is not open', () => { - store.state.rightPane.isOpen = false; - store.state.rightPane.currentView = fakeComponentName; + findSidebarNav().vm.$emit('open', view); - return wrapper.vm.$nextTick().then(() => { - expect(button.classes()).not.toEqual( - expect.arrayContaining(['ide-sidebar-link', 'active']), - ); - expect(wrapper.find('.js-tab-view').exists()).toBe(false); - }); + expect(store.dispatch).toHaveBeenCalledWith(`${side}Pane/open`, view); }); - describe('when button is clicked', () => { - it('opens view', () => { - button.trigger('click'); - expect(store.state.rightPane.isOpen).toBeTruthy(); - }); - - it('toggles open view if tab is currently active', () => { - button.trigger('click'); - expect(store.state.rightPane.isOpen).toBeTruthy(); + it('when sidebar emits close, dispatch toggleOpen', () => { + findSidebarNav().vm.$emit('close'); - button.trigger('click'); - expect(store.state.rightPane.isOpen).toBeFalsy(); - }); + expect(store.dispatch).toHaveBeenCalledWith(`${side}Pane/toggleOpen`); }); + }); - it('shows header-icon', () => { - expect(wrapper.find('.header-icon-slot')).not.toBeNull(); + describe.each` + isOpen + ${true} + ${false} + `('when isOpen=$isOpen', ({ isOpen }) => { + beforeEach(() => { + store.state.rightPane.isOpen = isOpen; + store.state.rightPane.currentView = fakeComponentName; + + createComponent({ extensionTabs }); }); - it('shows header', () => { - expect(wrapper.find('.header-slot')).not.toBeNull(); + it(`tab view is shown=${isOpen}`, () => { + expect(wrapper.find('.js-tab-view').exists()).toBe(isOpen); }); - it('shows footer', () => { - expect(wrapper.find('.footer-slot')).not.toBeNull(); + it('renders sidebar nav', () => { + expect(findSidebarNav().props()).toEqual({ + tabs: extensionTabs, + side: 'right', + currentView: fakeComponentName, + isOpen, + }); }); }); }); diff --git a/spec/frontend/ide/components/panes/right_spec.js b/spec/frontend/ide/components/panes/right_spec.js index 84b2d440b60..203d35ed335 100644 --- a/spec/frontend/ide/components/panes/right_spec.js +++ b/spec/frontend/ide/components/panes/right_spec.js @@ -5,6 +5,7 @@ import { createStore } from '~/ide/stores'; import RightPane from '~/ide/components/panes/right.vue'; import CollapsibleSidebar from '~/ide/components/panes/collapsible_sidebar.vue'; import { rightSidebarViews } from '~/ide/constants'; +import extendStore from '~/ide/stores/extend'; const localVue = createLocalVue(); localVue.use(Vuex); @@ -14,6 +15,8 @@ describe('ide/components/panes/right.vue', () => { let store; const createComponent = props => { + extendStore(store, document.createElement('div')); + wrapper = shallowMount(RightPane, { localVue, store, @@ -32,26 +35,6 @@ describe('ide/components/panes/right.vue', () => { wrapper = null; }); - it('allows tabs to be added via extensionTabs prop', () => { - createComponent({ - extensionTabs: [ - { - show: true, - title: 'FakeTab', - }, - ], - }); - - expect(wrapper.find(CollapsibleSidebar).props('extensionTabs')).toEqual( - expect.arrayContaining([ - expect.objectContaining({ - show: true, - title: 'FakeTab', - }), - ]), - ); - }); - describe('pipelines tab', () => { it('is always shown', () => { createComponent(); @@ -99,4 +82,38 @@ describe('ide/components/panes/right.vue', () => { ); }); }); + + describe('terminal tab', () => { + beforeEach(() => { + createComponent(); + }); + + it('adds terminal tab', () => { + store.state.terminal.isVisible = true; + + return wrapper.vm.$nextTick().then(() => { + expect(wrapper.find(CollapsibleSidebar).props('extensionTabs')).toEqual( + expect.arrayContaining([ + expect.objectContaining({ + show: true, + title: 'Terminal', + }), + ]), + ); + }); + }); + + it('hides terminal tab when not visible', () => { + store.state.terminal.isVisible = false; + + expect(wrapper.find(CollapsibleSidebar).props('extensionTabs')).toEqual( + expect.arrayContaining([ + expect.objectContaining({ + show: false, + title: 'Terminal', + }), + ]), + ); + }); + }); }); diff --git a/spec/frontend/ide/components/pipelines/list_spec.js b/spec/frontend/ide/components/pipelines/list_spec.js index d909a5e478e..795ded35d20 100644 --- a/spec/frontend/ide/components/pipelines/list_spec.js +++ b/spec/frontend/ide/components/pipelines/list_spec.js @@ -6,7 +6,7 @@ import List from '~/ide/components/pipelines/list.vue'; import JobsList from '~/ide/components/jobs/list.vue'; import Tab from '~/vue_shared/components/tabs/tab.vue'; import CiIcon from '~/vue_shared/components/ci_icon.vue'; -import { pipelines } from '../../../../javascripts/ide/mock_data'; +import { pipelines } from 'jest/ide/mock_data'; import IDEServices from '~/ide/services'; const localVue = createLocalVue(); diff --git a/spec/frontend/ide/components/repo_commit_section_spec.js b/spec/frontend/ide/components/repo_commit_section_spec.js index 237be018807..3b837622720 100644 --- a/spec/frontend/ide/components/repo_commit_section_spec.js +++ b/spec/frontend/ide/components/repo_commit_section_spec.js @@ -1,7 +1,8 @@ import { mount } from '@vue/test-utils'; import { createStore } from '~/ide/stores'; -import router from '~/ide/ide_router'; +import { createRouter } from '~/ide/ide_router'; import RepoCommitSection from '~/ide/components/repo_commit_section.vue'; +import EmptyState from '~/ide/components/commit_sidebar/empty_state.vue'; import { stageKeys } from '~/ide/constants'; import { file } from '../helpers'; @@ -9,6 +10,7 @@ const TEST_NO_CHANGES_SVG = 'nochangessvg'; describe('RepoCommitSection', () => { let wrapper; + let router; let store; function createComponent() { @@ -54,6 +56,7 @@ describe('RepoCommitSection', () => { beforeEach(() => { store = createStore(); + router = createRouter(store); jest.spyOn(store, 'dispatch'); jest.spyOn(router, 'push').mockImplementation(); @@ -63,7 +66,7 @@ describe('RepoCommitSection', () => { wrapper.destroy(); }); - describe('empty Stage', () => { + describe('empty state', () => { beforeEach(() => { store.state.noChangesStateSvgPath = TEST_NO_CHANGES_SVG; store.state.committedStateSvgPath = 'svg'; @@ -74,11 +77,16 @@ describe('RepoCommitSection', () => { it('renders no changes text', () => { expect( wrapper - .find('.js-empty-state') + .find(EmptyState) .text() .trim(), ).toContain('No changes'); - expect(wrapper.find('.js-empty-state img').attributes('src')).toBe(TEST_NO_CHANGES_SVG); + expect( + wrapper + .find(EmptyState) + .find('img') + .attributes('src'), + ).toBe(TEST_NO_CHANGES_SVG); }); }); @@ -109,6 +117,32 @@ describe('RepoCommitSection', () => { expect(changedFileNames).toEqual(allFiles.map(x => x.path)); }); + + it('does not show empty state', () => { + expect(wrapper.find(EmptyState).exists()).toBe(false); + }); + }); + + describe('if nothing is changed or staged', () => { + beforeEach(() => { + setupDefaultState(); + + store.state.openFiles = [...Object.values(store.state.entries)]; + store.state.openFiles[0].active = true; + store.state.stagedFiles = []; + + createComponent(); + }); + + it('opens currently active file', () => { + expect(store.state.openFiles.length).toBe(1); + expect(store.state.openFiles[0].pending).toBe(true); + + expect(store.dispatch).toHaveBeenCalledWith('openPendingTab', { + file: store.state.entries[store.getters.activeFile.path], + keyPrefix: stageKeys.unstaged, + }); + }); }); describe('with unstaged file', () => { @@ -129,5 +163,9 @@ describe('RepoCommitSection', () => { keyPrefix: stageKeys.unstaged, }); }); + + it('does not show empty state', () => { + expect(wrapper.find(EmptyState).exists()).toBe(false); + }); }); }); diff --git a/spec/frontend/ide/components/repo_editor_spec.js b/spec/frontend/ide/components/repo_editor_spec.js new file mode 100644 index 00000000000..4967434dfd7 --- /dev/null +++ b/spec/frontend/ide/components/repo_editor_spec.js @@ -0,0 +1,664 @@ +import Vuex from 'vuex'; +import Vue from 'vue'; +import MockAdapter from 'axios-mock-adapter'; +import '~/behaviors/markdown/render_gfm'; +import { Range } from 'monaco-editor'; +import axios from '~/lib/utils/axios_utils'; +import { createStoreOptions } from '~/ide/stores'; +import RepoEditor from '~/ide/components/repo_editor.vue'; +import Editor from '~/ide/lib/editor'; +import { leftSidebarViews, FILE_VIEW_MODE_EDITOR, FILE_VIEW_MODE_PREVIEW } from '~/ide/constants'; +import { createComponentWithStore } from '../../helpers/vue_mount_component_helper'; +import waitForPromises from 'helpers/wait_for_promises'; +import { file } from '../helpers'; +import { exampleConfigs, exampleFiles } from '../lib/editorconfig/mock_data'; + +describe('RepoEditor', () => { + let vm; + let store; + let mockActions; + + const waitForEditorSetup = () => + new Promise(resolve => { + vm.$once('editorSetup', resolve); + }); + + const createComponent = () => { + if (vm) { + throw new Error('vm already exists'); + } + vm = createComponentWithStore(Vue.extend(RepoEditor), store, { + file: store.state.openFiles[0], + }); + vm.$mount(); + }; + + const createOpenFile = path => { + const origFile = store.state.openFiles[0]; + const newFile = { ...origFile, path, key: path }; + + store.state.entries[path] = newFile; + + store.state.openFiles = [newFile]; + }; + + beforeEach(() => { + mockActions = { + getFileData: jest.fn().mockResolvedValue(), + getRawFileData: jest.fn().mockResolvedValue(), + }; + + const f = { + ...file(), + viewMode: FILE_VIEW_MODE_EDITOR, + }; + + const storeOptions = createStoreOptions(); + storeOptions.actions = { + ...storeOptions.actions, + ...mockActions, + }; + store = new Vuex.Store(storeOptions); + + f.active = true; + f.tempFile = true; + + store.state.openFiles.push(f); + store.state.projects = { + 'gitlab-org/gitlab': { + branches: { + master: { + name: 'master', + commit: { + id: 'abcdefgh', + }, + }, + }, + }, + }; + store.state.currentProjectId = 'gitlab-org/gitlab'; + store.state.currentBranchId = 'master'; + + Vue.set(store.state.entries, f.path, f); + }); + + afterEach(() => { + vm.$destroy(); + vm = null; + + Editor.editorInstance.dispose(); + }); + + const findEditor = () => vm.$el.querySelector('.multi-file-editor-holder'); + + describe('default', () => { + beforeEach(() => { + createComponent(); + + return waitForEditorSetup(); + }); + + it('sets renderWhitespace to `all`', () => { + vm.$store.state.renderWhitespaceInCode = true; + + expect(vm.editorOptions.renderWhitespace).toEqual('all'); + }); + + it('sets renderWhitespace to `none`', () => { + vm.$store.state.renderWhitespaceInCode = false; + + expect(vm.editorOptions.renderWhitespace).toEqual('none'); + }); + + it('renders an ide container', () => { + expect(vm.shouldHideEditor).toBeFalsy(); + expect(vm.showEditor).toBe(true); + expect(findEditor()).not.toHaveCss({ display: 'none' }); + }); + + it('renders only an edit tab', done => { + Vue.nextTick(() => { + const tabs = vm.$el.querySelectorAll('.ide-mode-tabs .nav-links li'); + + expect(tabs.length).toBe(1); + expect(tabs[0].textContent.trim()).toBe('Edit'); + + done(); + }); + }); + + describe('when file is markdown', () => { + let mock; + + beforeEach(() => { + mock = new MockAdapter(axios); + + mock.onPost(/(.*)\/preview_markdown/).reply(200, { + body: '<p>testing 123</p>', + }); + + Vue.set(vm, 'file', { + ...vm.file, + projectId: 'namespace/project', + path: 'sample.md', + content: 'testing 123', + }); + + vm.$store.state.entries[vm.file.path] = vm.file; + + return vm.$nextTick(); + }); + + afterEach(() => { + mock.restore(); + }); + + it('renders an Edit and a Preview Tab', done => { + Vue.nextTick(() => { + const tabs = vm.$el.querySelectorAll('.ide-mode-tabs .nav-links li'); + + expect(tabs.length).toBe(2); + expect(tabs[0].textContent.trim()).toBe('Edit'); + expect(tabs[1].textContent.trim()).toBe('Preview Markdown'); + + done(); + }); + }); + + it('renders markdown for tempFile', done => { + vm.file.tempFile = true; + + vm.$nextTick() + .then(() => { + vm.$el.querySelectorAll('.ide-mode-tabs .nav-links a')[1].click(); + }) + .then(waitForPromises) + .then(() => { + expect(vm.$el.querySelector('.preview-container').innerHTML).toContain( + '<p>testing 123</p>', + ); + }) + .then(done) + .catch(done.fail); + }); + + describe('when not in edit mode', () => { + beforeEach(async () => { + await vm.$nextTick(); + + vm.$store.state.currentActivityView = leftSidebarViews.review.name; + + return vm.$nextTick(); + }); + + it('shows no tabs', () => { + expect(vm.$el.querySelectorAll('.ide-mode-tabs .nav-links a')).toHaveLength(0); + }); + }); + }); + + describe('when open file is binary and not raw', () => { + beforeEach(done => { + vm.file.binary = true; + + vm.$nextTick(done); + }); + + it('does not render the IDE', () => { + expect(vm.shouldHideEditor).toBeTruthy(); + }); + }); + + describe('createEditorInstance', () => { + it('calls createInstance when viewer is editor', done => { + jest.spyOn(vm.editor, 'createInstance').mockImplementation(); + + vm.createEditorInstance(); + + vm.$nextTick(() => { + expect(vm.editor.createInstance).toHaveBeenCalled(); + + done(); + }); + }); + + it('calls createDiffInstance when viewer is diff', done => { + vm.$store.state.viewer = 'diff'; + + jest.spyOn(vm.editor, 'createDiffInstance').mockImplementation(); + + vm.createEditorInstance(); + + vm.$nextTick(() => { + expect(vm.editor.createDiffInstance).toHaveBeenCalled(); + + done(); + }); + }); + + it('calls createDiffInstance when viewer is a merge request diff', done => { + vm.$store.state.viewer = 'mrdiff'; + + jest.spyOn(vm.editor, 'createDiffInstance').mockImplementation(); + + vm.createEditorInstance(); + + vm.$nextTick(() => { + expect(vm.editor.createDiffInstance).toHaveBeenCalled(); + + done(); + }); + }); + }); + + describe('setupEditor', () => { + it('creates new model', () => { + jest.spyOn(vm.editor, 'createModel'); + + Editor.editorInstance.modelManager.dispose(); + + vm.setupEditor(); + + expect(vm.editor.createModel).toHaveBeenCalledWith(vm.file, null); + expect(vm.model).not.toBeNull(); + }); + + it('attaches model to editor', () => { + jest.spyOn(vm.editor, 'attachModel'); + + Editor.editorInstance.modelManager.dispose(); + + vm.setupEditor(); + + expect(vm.editor.attachModel).toHaveBeenCalledWith(vm.model); + }); + + it('attaches model to merge request editor', () => { + vm.$store.state.viewer = 'mrdiff'; + vm.file.mrChange = true; + jest.spyOn(vm.editor, 'attachMergeRequestModel').mockImplementation(); + + Editor.editorInstance.modelManager.dispose(); + + vm.setupEditor(); + + expect(vm.editor.attachMergeRequestModel).toHaveBeenCalledWith(vm.model); + }); + + it('does not attach model to merge request editor when not a MR change', () => { + vm.$store.state.viewer = 'mrdiff'; + vm.file.mrChange = false; + jest.spyOn(vm.editor, 'attachMergeRequestModel').mockImplementation(); + + Editor.editorInstance.modelManager.dispose(); + + vm.setupEditor(); + + expect(vm.editor.attachMergeRequestModel).not.toHaveBeenCalledWith(vm.model); + }); + + it('adds callback methods', () => { + jest.spyOn(vm.editor, 'onPositionChange'); + + Editor.editorInstance.modelManager.dispose(); + + vm.setupEditor(); + + expect(vm.editor.onPositionChange).toHaveBeenCalled(); + expect(vm.model.events.size).toBe(2); + }); + + it('updates state with the value of the model', () => { + vm.model.setValue('testing 1234\n'); + + vm.setupEditor(); + + expect(vm.file.content).toBe('testing 1234\n'); + }); + + it('sets head model as staged file', () => { + jest.spyOn(vm.editor, 'createModel'); + + Editor.editorInstance.modelManager.dispose(); + + vm.$store.state.stagedFiles.push({ ...vm.file, key: 'staged' }); + vm.file.staged = true; + vm.file.key = `unstaged-${vm.file.key}`; + + vm.setupEditor(); + + expect(vm.editor.createModel).toHaveBeenCalledWith(vm.file, vm.$store.state.stagedFiles[0]); + }); + }); + + describe('editor updateDimensions', () => { + beforeEach(() => { + jest.spyOn(vm.editor, 'updateDimensions'); + jest.spyOn(vm.editor, 'updateDiffView').mockImplementation(); + }); + + it('calls updateDimensions when panelResizing is false', done => { + vm.$store.state.panelResizing = true; + + vm.$nextTick() + .then(() => { + vm.$store.state.panelResizing = false; + }) + .then(vm.$nextTick) + .then(() => { + expect(vm.editor.updateDimensions).toHaveBeenCalled(); + expect(vm.editor.updateDiffView).toHaveBeenCalled(); + }) + .then(done) + .catch(done.fail); + }); + + it('does not call updateDimensions when panelResizing is true', done => { + vm.$store.state.panelResizing = true; + + vm.$nextTick(() => { + expect(vm.editor.updateDimensions).not.toHaveBeenCalled(); + expect(vm.editor.updateDiffView).not.toHaveBeenCalled(); + + done(); + }); + }); + + it('calls updateDimensions when rightPane is opened', done => { + vm.$store.state.rightPane.isOpen = true; + + vm.$nextTick(() => { + expect(vm.editor.updateDimensions).toHaveBeenCalled(); + expect(vm.editor.updateDiffView).toHaveBeenCalled(); + + done(); + }); + }); + }); + + describe('show tabs', () => { + it('shows tabs in edit mode', () => { + expect(vm.$el.querySelector('.nav-links')).not.toBe(null); + }); + + it('hides tabs in review mode', done => { + vm.$store.state.currentActivityView = leftSidebarViews.review.name; + + vm.$nextTick(() => { + expect(vm.$el.querySelector('.nav-links')).toBe(null); + + done(); + }); + }); + + it('hides tabs in commit mode', done => { + vm.$store.state.currentActivityView = leftSidebarViews.commit.name; + + vm.$nextTick(() => { + expect(vm.$el.querySelector('.nav-links')).toBe(null); + + done(); + }); + }); + }); + + describe('when files view mode is preview', () => { + beforeEach(done => { + jest.spyOn(vm.editor, 'updateDimensions').mockImplementation(); + vm.file.viewMode = FILE_VIEW_MODE_PREVIEW; + vm.$nextTick(done); + }); + + it('should hide editor', () => { + expect(vm.showEditor).toBe(false); + expect(findEditor()).toHaveCss({ display: 'none' }); + }); + + describe('when file view mode changes to editor', () => { + it('should update dimensions', () => { + vm.file.viewMode = FILE_VIEW_MODE_EDITOR; + + return vm.$nextTick().then(() => { + expect(vm.editor.updateDimensions).toHaveBeenCalled(); + }); + }); + }); + }); + + describe('initEditor', () => { + beforeEach(() => { + vm.file.tempFile = false; + jest.spyOn(vm.editor, 'createInstance').mockImplementation(); + jest.spyOn(vm, 'shouldHideEditor', 'get').mockReturnValue(true); + }); + + it('does not fetch file information for temp entries', done => { + vm.file.tempFile = true; + + vm.initEditor(); + vm.$nextTick() + .then(() => { + expect(mockActions.getFileData).not.toHaveBeenCalled(); + }) + .then(done) + .catch(done.fail); + }); + + it('is being initialised for files without content even if shouldHideEditor is `true`', done => { + vm.file.content = ''; + vm.file.raw = ''; + + vm.initEditor(); + vm.$nextTick() + .then(() => { + expect(mockActions.getFileData).toHaveBeenCalled(); + expect(mockActions.getRawFileData).toHaveBeenCalled(); + }) + .then(done) + .catch(done.fail); + }); + + it('does not initialize editor for files already with content', done => { + vm.file.content = 'foo'; + + vm.initEditor(); + vm.$nextTick() + .then(() => { + expect(mockActions.getFileData).not.toHaveBeenCalled(); + expect(mockActions.getRawFileData).not.toHaveBeenCalled(); + expect(vm.editor.createInstance).not.toHaveBeenCalled(); + }) + .then(done) + .catch(done.fail); + }); + }); + + describe('updates on file changes', () => { + beforeEach(() => { + jest.spyOn(vm, 'initEditor').mockImplementation(); + }); + + it('calls removePendingTab when old file is pending', done => { + jest.spyOn(vm, 'shouldHideEditor', 'get').mockReturnValue(true); + jest.spyOn(vm, 'removePendingTab').mockImplementation(); + + vm.file.pending = true; + + vm.$nextTick() + .then(() => { + vm.file = file('testing'); + vm.file.content = 'foo'; // need to prevent full cycle of initEditor + + return vm.$nextTick(); + }) + .then(() => { + expect(vm.removePendingTab).toHaveBeenCalled(); + }) + .then(done) + .catch(done.fail); + }); + + it('does not call initEditor if the file did not change', done => { + Vue.set(vm, 'file', vm.file); + + vm.$nextTick() + .then(() => { + expect(vm.initEditor).not.toHaveBeenCalled(); + }) + .then(done) + .catch(done.fail); + }); + + it('calls initEditor when file key is changed', done => { + expect(vm.initEditor).not.toHaveBeenCalled(); + + Vue.set(vm, 'file', { + ...vm.file, + key: 'new', + }); + + vm.$nextTick() + .then(() => { + expect(vm.initEditor).toHaveBeenCalled(); + }) + .then(done) + .catch(done.fail); + }); + }); + + describe('onPaste', () => { + const setFileName = name => { + Vue.set(vm, 'file', { + ...vm.file, + content: 'hello world\n', + name, + path: `foo/${name}`, + key: 'new', + }); + + vm.$store.state.entries[vm.file.path] = vm.file; + }; + + const pasteImage = () => { + window.dispatchEvent( + Object.assign(new Event('paste'), { + clipboardData: { + files: [new File(['foo'], 'foo.png', { type: 'image/png' })], + }, + }), + ); + }; + + const watchState = watched => + new Promise(resolve => { + const unwatch = vm.$store.watch(watched, () => { + unwatch(); + resolve(); + }); + }); + + beforeEach(() => { + setFileName('bar.md'); + + vm.$store.state.trees['gitlab-org/gitlab'] = { tree: [] }; + vm.$store.state.currentProjectId = 'gitlab-org'; + vm.$store.state.currentBranchId = 'gitlab'; + + // create a new model each time, otherwise tests conflict with each other + // because of same model being used in multiple tests + Editor.editorInstance.modelManager.dispose(); + vm.setupEditor(); + + return waitForPromises().then(() => { + // set cursor to line 2, column 1 + vm.editor.instance.setSelection(new Range(2, 1, 2, 1)); + vm.editor.instance.focus(); + }); + }); + + it('adds an image entry to the same folder for a pasted image in a markdown file', () => { + pasteImage(); + + return waitForPromises().then(() => { + expect(vm.$store.state.entries['foo/foo.png']).toMatchObject({ + path: 'foo/foo.png', + type: 'blob', + content: 'Zm9v', + binary: true, + rawPath: 'data:image/png;base64,Zm9v', + }); + }); + }); + + it("adds a markdown image tag to the file's contents", () => { + pasteImage(); + + // Pasting an image does a lot of things like using the FileReader API, + // so, waitForPromises isn't very reliable (and causes a flaky spec) + // Read more about state.watch: https://vuex.vuejs.org/api/#watch + return watchState(s => s.entries['foo/bar.md'].content).then(() => { + expect(vm.file.content).toBe('hello world\n'); + }); + }); + + it("does not add file to state or set markdown image syntax if the file isn't markdown", () => { + setFileName('myfile.txt'); + pasteImage(); + + return waitForPromises().then(() => { + expect(vm.$store.state.entries['foo/foo.png']).toBeUndefined(); + expect(vm.file.content).toBe('hello world\n'); + }); + }); + }); + }); + + describe('fetchEditorconfigRules', () => { + beforeEach(() => { + exampleConfigs.forEach(({ path, content }) => { + store.state.entries[path] = { ...file(), path, content }; + }); + }); + + it.each(exampleFiles)( + 'does not fetch content from remote for .editorconfig files present locally (case %#)', + ({ path, monacoRules }) => { + createOpenFile(path); + createComponent(); + + return waitForEditorSetup().then(() => { + expect(vm.rules).toEqual(monacoRules); + expect(vm.model.options).toMatchObject(monacoRules); + expect(mockActions.getFileData).not.toHaveBeenCalled(); + expect(mockActions.getRawFileData).not.toHaveBeenCalled(); + }); + }, + ); + + it('fetches content from remote for .editorconfig files not available locally', () => { + exampleConfigs.forEach(({ path }) => { + delete store.state.entries[path].content; + delete store.state.entries[path].raw; + }); + + // Include a "test" directory which does not exist in store. This one should be skipped. + createOpenFile('foo/bar/baz/test/my_spec.js'); + createComponent(); + + return waitForEditorSetup().then(() => { + expect(mockActions.getFileData.mock.calls.map(([, args]) => args)).toEqual([ + { makeFileActive: false, path: 'foo/bar/baz/.editorconfig' }, + { makeFileActive: false, path: 'foo/bar/.editorconfig' }, + { makeFileActive: false, path: 'foo/.editorconfig' }, + { makeFileActive: false, path: '.editorconfig' }, + ]); + expect(mockActions.getRawFileData.mock.calls.map(([, args]) => args)).toEqual([ + { path: 'foo/bar/baz/.editorconfig' }, + { path: 'foo/bar/.editorconfig' }, + { path: 'foo/.editorconfig' }, + { path: '.editorconfig' }, + ]); + }); + }); + }); +}); diff --git a/spec/frontend/ide/components/repo_tab_spec.js b/spec/frontend/ide/components/repo_tab_spec.js index 82ea73ffbb1..5a591d3dcd0 100644 --- a/spec/frontend/ide/components/repo_tab_spec.js +++ b/spec/frontend/ide/components/repo_tab_spec.js @@ -1,11 +1,13 @@ import Vue from 'vue'; -import store from '~/ide/stores'; +import { createStore } from '~/ide/stores'; import repoTab from '~/ide/components/repo_tab.vue'; -import router from '~/ide/ide_router'; -import { file, resetStore } from '../helpers'; +import { createRouter } from '~/ide/ide_router'; +import { file } from '../helpers'; describe('RepoTab', () => { let vm; + let store; + let router; function createComponent(propsData) { const RepoTab = Vue.extend(repoTab); @@ -17,13 +19,13 @@ describe('RepoTab', () => { } beforeEach(() => { + store = createStore(); + router = createRouter(store); jest.spyOn(router, 'push').mockImplementation(() => {}); }); afterEach(() => { vm.$destroy(); - - resetStore(vm.$store); }); it('renders a close link and a name link', () => { diff --git a/spec/frontend/ide/components/repo_tabs_spec.js b/spec/frontend/ide/components/repo_tabs_spec.js index 583f71e6121..df5b01770f5 100644 --- a/spec/frontend/ide/components/repo_tabs_spec.js +++ b/spec/frontend/ide/components/repo_tabs_spec.js @@ -16,9 +16,7 @@ describe('RepoTabs', () => { vm = createComponent(RepoTabs, { files: openedFiles, viewer: 'editor', - hasChanges: false, activeFile: file('activeFile'), - hasMergeRequest: false, }); openedFiles[0].active = true; diff --git a/spec/frontend/ide/components/resizable_panel_spec.js b/spec/frontend/ide/components/resizable_panel_spec.js new file mode 100644 index 00000000000..7368de0cee7 --- /dev/null +++ b/spec/frontend/ide/components/resizable_panel_spec.js @@ -0,0 +1,114 @@ +import Vuex from 'vuex'; +import { shallowMount, createLocalVue } from '@vue/test-utils'; +import ResizablePanel from '~/ide/components/resizable_panel.vue'; +import PanelResizer from '~/vue_shared/components/panel_resizer.vue'; +import { SIDE_LEFT, SIDE_RIGHT } from '~/ide/constants'; + +const TEST_WIDTH = 500; +const TEST_MIN_WIDTH = 400; + +describe('~/ide/components/resizable_panel', () => { + const localVue = createLocalVue(); + localVue.use(Vuex); + + let wrapper; + let store; + + beforeEach(() => { + store = new Vuex.Store({}); + jest.spyOn(store, 'dispatch').mockImplementation(); + }); + + afterEach(() => { + wrapper.destroy(); + wrapper = null; + }); + + const createComponent = (props = {}) => { + wrapper = shallowMount(ResizablePanel, { + propsData: { + initialWidth: TEST_WIDTH, + minSize: TEST_MIN_WIDTH, + side: SIDE_LEFT, + ...props, + }, + store, + localVue, + }); + }; + const findResizer = () => wrapper.find(PanelResizer); + const findInlineStyle = () => wrapper.element.style.cssText; + const createInlineStyle = width => `width: ${width}px;`; + + describe.each` + props | showResizer | resizerSide | expectedStyle + ${{ resizable: true, side: SIDE_LEFT }} | ${true} | ${SIDE_RIGHT} | ${createInlineStyle(TEST_WIDTH)} + ${{ resizable: true, side: SIDE_RIGHT }} | ${true} | ${SIDE_LEFT} | ${createInlineStyle(TEST_WIDTH)} + ${{ resizable: false, side: SIDE_LEFT }} | ${false} | ${SIDE_RIGHT} | ${''} + `('with props $props', ({ props, showResizer, resizerSide, expectedStyle }) => { + beforeEach(() => { + createComponent(props); + }); + + it(`show resizer is ${showResizer}`, () => { + const expectedDisplay = showResizer ? '' : 'none'; + const resizer = findResizer(); + + expect(resizer.exists()).toBe(true); + expect(resizer.element.style.display).toBe(expectedDisplay); + }); + + it(`resizer side is '${resizerSide}'`, () => { + const resizer = findResizer(); + + expect(resizer.props('side')).toBe(resizerSide); + }); + + it(`has style '${expectedStyle}'`, () => { + expect(findInlineStyle()).toBe(expectedStyle); + }); + }); + + describe('default', () => { + beforeEach(() => { + createComponent(); + }); + + it('does not dispatch anything', () => { + expect(store.dispatch).not.toHaveBeenCalled(); + }); + + it.each` + event | dispatchArgs + ${'resize-start'} | ${['setResizingStatus', true]} + ${'resize-end'} | ${['setResizingStatus', false]} + `('when resizer emits $event, dispatch $dispatchArgs', ({ event, dispatchArgs }) => { + const resizer = findResizer(); + + resizer.vm.$emit(event); + + expect(store.dispatch).toHaveBeenCalledWith(...dispatchArgs); + }); + + it('renders resizer', () => { + const resizer = findResizer(); + + expect(resizer.props()).toMatchObject({ + maxSize: window.innerWidth / 2, + minSize: TEST_MIN_WIDTH, + startSize: TEST_WIDTH, + }); + }); + + it('when resizer emits update:size, changes inline width', () => { + const newSize = TEST_WIDTH - 100; + const resizer = findResizer(); + + resizer.vm.$emit('update:size', newSize); + + return wrapper.vm.$nextTick().then(() => { + expect(findInlineStyle()).toBe(createInlineStyle(newSize)); + }); + }); + }); +}); diff --git a/spec/frontend/ide/components/terminal/empty_state_spec.js b/spec/frontend/ide/components/terminal/empty_state_spec.js new file mode 100644 index 00000000000..a3f2089608d --- /dev/null +++ b/spec/frontend/ide/components/terminal/empty_state_spec.js @@ -0,0 +1,107 @@ +import { shallowMount } from '@vue/test-utils'; +import { GlLoadingIcon } from '@gitlab/ui'; +import { TEST_HOST } from 'spec/test_constants'; +import TerminalEmptyState from '~/ide/components/terminal/empty_state.vue'; + +const TEST_HELP_PATH = `${TEST_HOST}/help/test`; +const TEST_PATH = `${TEST_HOST}/home.png`; +const TEST_HTML_MESSAGE = 'lorem <strong>ipsum</strong>'; + +describe('IDE TerminalEmptyState', () => { + let wrapper; + + const factory = (options = {}) => { + wrapper = shallowMount(TerminalEmptyState, { + ...options, + }); + }; + + afterEach(() => { + wrapper.destroy(); + }); + + it('does not show illustration, if no path specified', () => { + factory(); + + expect(wrapper.find('.svg-content').exists()).toBe(false); + }); + + it('shows illustration with path', () => { + factory({ + propsData: { + illustrationPath: TEST_PATH, + }, + }); + + const img = wrapper.find('.svg-content img'); + + expect(img.exists()).toBe(true); + expect(img.attributes('src')).toEqual(TEST_PATH); + }); + + it('when loading, shows loading icon', () => { + factory({ + propsData: { + isLoading: true, + }, + }); + + expect(wrapper.find(GlLoadingIcon).exists()).toBe(true); + }); + + it('when not loading, does not show loading icon', () => { + factory({ + propsData: { + isLoading: false, + }, + }); + + expect(wrapper.find(GlLoadingIcon).exists()).toBe(false); + }); + + describe('when valid', () => { + let button; + + beforeEach(() => { + factory({ + propsData: { + isLoading: false, + isValid: true, + helpPath: TEST_HELP_PATH, + }, + }); + + button = wrapper.find('button'); + }); + + it('shows button', () => { + expect(button.text()).toEqual('Start Web Terminal'); + expect(button.attributes('disabled')).toBeFalsy(); + }); + + it('emits start when button is clicked', () => { + expect(wrapper.emitted().start).toBeFalsy(); + + button.trigger('click'); + + expect(wrapper.emitted().start).toHaveLength(1); + }); + + it('shows help path link', () => { + expect(wrapper.find('a').attributes('href')).toEqual(TEST_HELP_PATH); + }); + }); + + it('when not valid, shows disabled button and message', () => { + factory({ + propsData: { + isLoading: false, + isValid: false, + message: TEST_HTML_MESSAGE, + }, + }); + + expect(wrapper.find('button').attributes('disabled')).not.toBe(null); + expect(wrapper.find('.bs-callout').element.innerHTML).toEqual(TEST_HTML_MESSAGE); + }); +}); diff --git a/spec/frontend/ide/components/terminal/session_spec.js b/spec/frontend/ide/components/terminal/session_spec.js new file mode 100644 index 00000000000..2399446ed15 --- /dev/null +++ b/spec/frontend/ide/components/terminal/session_spec.js @@ -0,0 +1,96 @@ +import { createLocalVue, shallowMount } from '@vue/test-utils'; +import Vuex from 'vuex'; +import TerminalSession from '~/ide/components/terminal/session.vue'; +import Terminal from '~/ide/components/terminal/terminal.vue'; +import { + STARTING, + PENDING, + RUNNING, + STOPPING, + STOPPED, +} from '~/ide/stores/modules/terminal/constants'; + +const TEST_TERMINAL_PATH = 'terminal/path'; + +const localVue = createLocalVue(); +localVue.use(Vuex); + +describe('IDE TerminalSession', () => { + let wrapper; + let actions; + let state; + + const factory = (options = {}) => { + const store = new Vuex.Store({ + modules: { + terminal: { + namespaced: true, + actions, + state, + }, + }, + }); + + wrapper = shallowMount(TerminalSession, { + localVue, + store, + ...options, + }); + }; + + beforeEach(() => { + state = { + session: { status: RUNNING, terminalPath: TEST_TERMINAL_PATH }, + }; + actions = { + restartSession: jest.fn(), + stopSession: jest.fn(), + }; + }); + + it('is empty if session is falsey', () => { + state.session = null; + factory(); + + expect(wrapper.isEmpty()).toBe(true); + }); + + it('shows terminal', () => { + factory(); + + expect(wrapper.find(Terminal).props()).toEqual({ + terminalPath: TEST_TERMINAL_PATH, + status: RUNNING, + }); + }); + + [STARTING, PENDING, RUNNING].forEach(status => { + it(`show stop button when status is ${status}`, () => { + state.session = { status }; + factory(); + + const button = wrapper.find('button'); + button.trigger('click'); + + return wrapper.vm.$nextTick().then(() => { + expect(button.text()).toEqual('Stop Terminal'); + expect(actions.stopSession).toHaveBeenCalled(); + }); + }); + }); + + [STOPPING, STOPPED].forEach(status => { + it(`show stop button when status is ${status}`, () => { + state.session = { status }; + factory(); + + const button = wrapper.find('button'); + button.trigger('click'); + + return wrapper.vm.$nextTick().then(() => { + expect(button.text()).toEqual('Restart Terminal'); + expect(actions.restartSession).toHaveBeenCalled(); + }); + }); + }); +}); diff --git a/spec/frontend/ide/components/terminal/terminal_controls_spec.js b/spec/frontend/ide/components/terminal/terminal_controls_spec.js new file mode 100644 index 00000000000..6c2871abb46 --- /dev/null +++ b/spec/frontend/ide/components/terminal/terminal_controls_spec.js @@ -0,0 +1,65 @@ +import { shallowMount } from '@vue/test-utils'; +import TerminalControls from '~/ide/components/terminal/terminal_controls.vue'; +import ScrollButton from '~/ide/components/jobs/detail/scroll_button.vue'; + +describe('IDE TerminalControls', () => { + let wrapper; + let buttons; + + const factory = (options = {}) => { + wrapper = shallowMount(TerminalControls, { + ...options, + }); + + buttons = wrapper.findAll(ScrollButton); + }; + + it('shows an up and down scroll button', () => { + factory(); + + expect(buttons.wrappers.map(x => x.props())).toEqual([ + expect.objectContaining({ direction: 'up', disabled: true }), + expect.objectContaining({ direction: 'down', disabled: true }), + ]); + }); + + it('enables up button with prop', () => { + factory({ propsData: { canScrollUp: true } }); + + expect(buttons.at(0).props()).toEqual( + expect.objectContaining({ direction: 'up', disabled: false }), + ); + }); + + it('enables down button with prop', () => { + factory({ propsData: { canScrollDown: true } }); + + expect(buttons.at(1).props()).toEqual( + expect.objectContaining({ direction: 'down', disabled: false }), + ); + }); + + it('emits "scroll-up" when click up button', () => { + factory({ propsData: { canScrollUp: true } }); + + expect(wrapper.emittedByOrder()).toEqual([]); + + buttons.at(0).vm.$emit('click'); + + return wrapper.vm.$nextTick().then(() => { + expect(wrapper.emittedByOrder()).toEqual([{ name: 'scroll-up', args: [] }]); + }); + }); + + it('emits "scroll-down" when click down button', () => { + factory({ propsData: { canScrollDown: true } }); + + expect(wrapper.emittedByOrder()).toEqual([]); + + buttons.at(1).vm.$emit('click'); + + return wrapper.vm.$nextTick().then(() => { + expect(wrapper.emittedByOrder()).toEqual([{ name: 'scroll-down', args: [] }]); + }); + }); +}); diff --git a/spec/frontend/ide/components/terminal/terminal_spec.js b/spec/frontend/ide/components/terminal/terminal_spec.js new file mode 100644 index 00000000000..3095288bb28 --- /dev/null +++ b/spec/frontend/ide/components/terminal/terminal_spec.js @@ -0,0 +1,225 @@ +import { createLocalVue, shallowMount } from '@vue/test-utils'; +import Vuex from 'vuex'; +import { GlLoadingIcon } from '@gitlab/ui'; +import Terminal from '~/ide/components/terminal/terminal.vue'; +import TerminalControls from '~/ide/components/terminal/terminal_controls.vue'; +import { + STARTING, + PENDING, + RUNNING, + STOPPING, + STOPPED, +} from '~/ide/stores/modules/terminal/constants'; +import GLTerminal from '~/terminal/terminal'; + +const TEST_TERMINAL_PATH = 'terminal/path'; + +const localVue = createLocalVue(); +localVue.use(Vuex); + +jest.mock('~/terminal/terminal', () => + jest.fn().mockImplementation(() => ({ + dispose: jest.fn(), + disable: jest.fn(), + addScrollListener: jest.fn(), + scrollToTop: jest.fn(), + scrollToBottom: jest.fn(), + })), +); + +describe('IDE Terminal', () => { + let wrapper; + let state; + + const factory = propsData => { + const store = new Vuex.Store({ + state, + mutations: { + set(prevState, newState) { + Object.assign(prevState, newState); + }, + }, + }); + + wrapper = shallowMount(localVue.extend(Terminal), { + propsData: { + status: RUNNING, + terminalPath: TEST_TERMINAL_PATH, + ...propsData, + }, + localVue, + store, + }); + }; + + beforeEach(() => { + state = { + panelResizing: false, + }; + }); + + afterEach(() => { + wrapper.destroy(); + }); + + describe('loading text', () => { + [STARTING, PENDING].forEach(status => { + it(`shows when starting (${status})`, () => { + factory({ status }); + + expect(wrapper.find(GlLoadingIcon).exists()).toBe(true); + expect(wrapper.find('.top-bar').text()).toBe('Starting...'); + }); + }); + + it(`shows when stopping`, () => { + factory({ status: STOPPING }); + + expect(wrapper.find(GlLoadingIcon).exists()).toBe(true); + expect(wrapper.find('.top-bar').text()).toBe('Stopping...'); + }); + + [RUNNING, STOPPED].forEach(status => { + it('hides when not loading', () => { + factory({ status }); + + expect(wrapper.find(GlLoadingIcon).exists()).toBe(false); + expect(wrapper.find('.top-bar').text()).toBe(''); + }); + }); + }); + + describe('refs.terminal', () => { + it('has terminal path in data', () => { + factory(); + + expect(wrapper.vm.$refs.terminal.dataset.projectPath).toBe(TEST_TERMINAL_PATH); + }); + }); + + describe('terminal controls', () => { + beforeEach(() => { + factory(); + wrapper.vm.createTerminal(); + + return localVue.nextTick(); + }); + + it('is visible if terminal is created', () => { + expect(wrapper.find(TerminalControls).exists()).toBe(true); + }); + + it('scrolls glterminal on scroll-up', () => { + wrapper.find(TerminalControls).vm.$emit('scroll-up'); + + expect(wrapper.vm.glterminal.scrollToTop).toHaveBeenCalled(); + }); + + it('scrolls glterminal on scroll-down', () => { + wrapper.find(TerminalControls).vm.$emit('scroll-down'); + + expect(wrapper.vm.glterminal.scrollToBottom).toHaveBeenCalled(); + }); + + it('has props set', () => { + expect(wrapper.find(TerminalControls).props()).toEqual({ + canScrollUp: false, + canScrollDown: false, + }); + + wrapper.setData({ canScrollUp: true, canScrollDown: true }); + + return localVue.nextTick().then(() => { + expect(wrapper.find(TerminalControls).props()).toEqual({ + canScrollUp: true, + canScrollDown: true, + }); + }); + }); + }); + + describe('refresh', () => { + let createTerminal; + let stopTerminal; + + beforeEach(() => { + createTerminal = jest.fn().mockName('createTerminal'); + stopTerminal = jest.fn().mockName('stopTerminal'); + }); + + it('creates the terminal if running', () => { + factory({ status: RUNNING, terminalPath: TEST_TERMINAL_PATH }); + + wrapper.setMethods({ createTerminal }); + wrapper.vm.refresh(); + + expect(createTerminal).toHaveBeenCalled(); + }); + + it('stops the terminal if stopping', () => { + factory({ status: STOPPING }); + + wrapper.setMethods({ stopTerminal }); + wrapper.vm.refresh(); + + expect(stopTerminal).toHaveBeenCalled(); + }); + }); + + describe('createTerminal', () => { + beforeEach(() => { + factory(); + wrapper.vm.createTerminal(); + }); + + it('creates the terminal', () => { + expect(GLTerminal).toHaveBeenCalledWith(wrapper.vm.$refs.terminal); + expect(wrapper.vm.glterminal).toBeTruthy(); + }); + + describe('scroll listener', () => { + it('has been called', () => { + expect(wrapper.vm.glterminal.addScrollListener).toHaveBeenCalled(); + }); + + it('updates scroll data when called', () => { + expect(wrapper.vm.canScrollUp).toBe(false); + expect(wrapper.vm.canScrollDown).toBe(false); + + const listener = wrapper.vm.glterminal.addScrollListener.mock.calls[0][0]; + listener({ canScrollUp: true, canScrollDown: true }); + + expect(wrapper.vm.canScrollUp).toBe(true); + expect(wrapper.vm.canScrollDown).toBe(true); + }); + }); + }); + + describe('destroyTerminal', () => { + it('calls dispose', () => { + factory(); + wrapper.vm.createTerminal(); + const disposeSpy = wrapper.vm.glterminal.dispose; + + expect(disposeSpy).not.toHaveBeenCalled(); + + wrapper.vm.destroyTerminal(); + + expect(disposeSpy).toHaveBeenCalled(); + expect(wrapper.vm.glterminal).toBe(null); + }); + }); + + describe('stopTerminal', () => { + it('calls disable', () => { + factory(); + wrapper.vm.createTerminal(); + + expect(wrapper.vm.glterminal.disable).not.toHaveBeenCalled(); + + wrapper.vm.stopTerminal(); + + expect(wrapper.vm.glterminal.disable).toHaveBeenCalled(); + }); + }); +}); diff --git a/spec/frontend/ide/components/terminal/view_spec.js b/spec/frontend/ide/components/terminal/view_spec.js new file mode 100644 index 00000000000..eff200550da --- /dev/null +++ b/spec/frontend/ide/components/terminal/view_spec.js @@ -0,0 +1,91 @@ +import { shallowMount, createLocalVue } from '@vue/test-utils'; +import Vuex from 'vuex'; +import { TEST_HOST } from 'spec/test_constants'; +import TerminalEmptyState from '~/ide/components/terminal/empty_state.vue'; +import TerminalView from '~/ide/components/terminal/view.vue'; +import TerminalSession from '~/ide/components/terminal/session.vue'; + +const TEST_HELP_PATH = `${TEST_HOST}/help`; +const TEST_SVG_PATH = `${TEST_HOST}/illustration.svg`; + +const localVue = createLocalVue(); +localVue.use(Vuex); + +describe('IDE TerminalView', () => { + let state; + let actions; + let getters; + let wrapper; + + const factory = () => { + const store = new Vuex.Store({ + modules: { + terminal: { + namespaced: true, + state, + actions, + getters, + }, + }, + }); + + wrapper = shallowMount(TerminalView, { localVue, store }); + }; + + beforeEach(() => { + state = { + isShowSplash: true, + paths: { + webTerminalHelpPath: TEST_HELP_PATH, + webTerminalSvgPath: TEST_SVG_PATH, + }, + }; + + actions = { + hideSplash: jest.fn().mockName('hideSplash'), + startSession: jest.fn().mockName('startSession'), + }; + + getters = { + allCheck: () => ({ + isLoading: false, + isValid: false, + message: 'bad', + }), + }; + }); + + afterEach(() => { + wrapper.destroy(); + }); + + it('renders empty state', () => { + factory(); + + expect(wrapper.find(TerminalEmptyState).props()).toEqual({ + helpPath: TEST_HELP_PATH, + illustrationPath: TEST_SVG_PATH, + ...getters.allCheck(), + }); + }); + + it('hides splash and starts, when started', () => { + factory(); + + expect(actions.startSession).not.toHaveBeenCalled(); + expect(actions.hideSplash).not.toHaveBeenCalled(); + + wrapper.find(TerminalEmptyState).vm.$emit('start'); + + expect(actions.startSession).toHaveBeenCalled(); + expect(actions.hideSplash).toHaveBeenCalled(); + }); + + it('shows Web Terminal when started', () => { + state.isShowSplash = false; + factory(); + + expect(wrapper.find(TerminalEmptyState).exists()).toBe(false); + expect(wrapper.find(TerminalSession).exists()).toBe(true); + }); +}); diff --git a/spec/frontend/ide/components/terminal_sync/terminal_sync_status_safe_spec.js b/spec/frontend/ide/components/terminal_sync/terminal_sync_status_safe_spec.js new file mode 100644 index 00000000000..afdecb7bbbd --- /dev/null +++ b/spec/frontend/ide/components/terminal_sync/terminal_sync_status_safe_spec.js @@ -0,0 +1,47 @@ +import Vuex from 'vuex'; +import { createLocalVue, shallowMount } from '@vue/test-utils'; +import TerminalSyncStatus from '~/ide/components/terminal_sync/terminal_sync_status.vue'; +import TerminalSyncStatusSafe from '~/ide/components/terminal_sync/terminal_sync_status_safe.vue'; + +const localVue = createLocalVue(); +localVue.use(Vuex); + +describe('ide/components/terminal_sync/terminal_sync_status_safe', () => { + let store; + let wrapper; + + const createComponent = () => { + store = new Vuex.Store({ + state: {}, + }); + + wrapper = shallowMount(TerminalSyncStatusSafe, { + localVue, + store, + }); + }; + + beforeEach(createComponent); + + afterEach(() => { + wrapper.destroy(); + }); + + describe('with terminal sync module in store', () => { + beforeEach(() => { + store.registerModule('terminalSync', { + state: {}, + }); + }); + + it('renders terminal sync status', () => { + expect(wrapper.find(TerminalSyncStatus).exists()).toBe(true); + }); + }); + + describe('without terminal sync module', () => { + it('does not render terminal sync status', () => { + expect(wrapper.find(TerminalSyncStatus).exists()).toBe(false); + }); + }); +}); diff --git a/spec/frontend/ide/components/terminal_sync/terminal_sync_status_spec.js b/spec/frontend/ide/components/terminal_sync/terminal_sync_status_spec.js new file mode 100644 index 00000000000..16a76fae1dd --- /dev/null +++ b/spec/frontend/ide/components/terminal_sync/terminal_sync_status_spec.js @@ -0,0 +1,99 @@ +import Vuex from 'vuex'; +import { createLocalVue, shallowMount } from '@vue/test-utils'; +import { GlLoadingIcon } from '@gitlab/ui'; +import TerminalSyncStatus from '~/ide/components/terminal_sync/terminal_sync_status.vue'; +import { + MSG_TERMINAL_SYNC_CONNECTING, + MSG_TERMINAL_SYNC_UPLOADING, + MSG_TERMINAL_SYNC_RUNNING, +} from '~/ide/stores/modules/terminal_sync/messages'; +import Icon from '~/vue_shared/components/icon.vue'; + +const TEST_MESSAGE = 'lorem ipsum dolar sit'; +const START_LOADING = 'START_LOADING'; + +const localVue = createLocalVue(); +localVue.use(Vuex); + +describe('ide/components/terminal_sync/terminal_sync_status', () => { + let moduleState; + let store; + let wrapper; + + const createComponent = () => { + store = new Vuex.Store({ + modules: { + terminalSync: { + namespaced: true, + state: moduleState, + mutations: { + [START_LOADING]: state => { + state.isLoading = true; + }, + }, + }, + }, + }); + + wrapper = shallowMount(TerminalSyncStatus, { + localVue, + store, + }); + }; + + beforeEach(() => { + moduleState = { + isLoading: false, + isStarted: false, + isError: false, + message: '', + }; + }); + + afterEach(() => { + wrapper.destroy(); + }); + + describe('when doing nothing', () => { + it('shows nothing', () => { + createComponent(); + + expect(wrapper.isEmpty()).toBe(true); + }); + }); + + describe.each` + description | state | statusMessage | icon + ${'when loading'} | ${{ isLoading: true }} | ${MSG_TERMINAL_SYNC_CONNECTING} | ${''} + ${'when loading and started'} | ${{ isLoading: true, isStarted: true }} | ${MSG_TERMINAL_SYNC_UPLOADING} | ${''} + ${'when error'} | ${{ isError: true, message: TEST_MESSAGE }} | ${TEST_MESSAGE} | ${'warning'} + ${'when started'} | ${{ isStarted: true }} | ${MSG_TERMINAL_SYNC_RUNNING} | ${'mobile-issue-close'} + `('$description', ({ state, statusMessage, icon }) => { + beforeEach(() => { + Object.assign(moduleState, state); + createComponent(); + }); + + it('shows message', () => { + expect(wrapper.attributes('title')).toContain(statusMessage); + }); + + if (!icon) { + it('does not render icon', () => { + expect(wrapper.find(Icon).exists()).toBe(false); + }); + + it('renders loading icon', () => { + expect(wrapper.find(GlLoadingIcon).exists()).toBe(true); + }); + } else { + it('renders icon', () => { + expect(wrapper.find(Icon).props('name')).toEqual(icon); + }); + + it('does not render loading icon', () => { + expect(wrapper.find(GlLoadingIcon).exists()).toBe(false); + }); + } + }); +}); diff --git a/spec/frontend/ide/file_helpers.js b/spec/frontend/ide/file_helpers.js new file mode 100644 index 00000000000..326f8b9716d --- /dev/null +++ b/spec/frontend/ide/file_helpers.js @@ -0,0 +1,35 @@ +export const createFile = (path, content = '') => ({ + id: path, + path, + content, + raw: content, +}); + +export const createNewFile = (path, content) => + Object.assign(createFile(path, content), { + tempFile: true, + raw: '', + }); + +export const createDeletedFile = (path, content) => + Object.assign(createFile(path, content), { + deleted: true, + }); + +export const createUpdatedFile = (path, oldContent, content) => + Object.assign(createFile(path, content), { + raw: oldContent, + }); + +export const createMovedFile = (path, prevPath, content) => + Object.assign(createNewFile(path, content), { + prevPath, + }); + +export const createEntries = path => + path.split('/').reduce((acc, part, idx, parts) => { + const parentPath = parts.slice(0, idx).join('/'); + const fullPath = parentPath ? `${parentPath}/${part}` : part; + + return Object.assign(acc, { [fullPath]: { ...createFile(fullPath), parentPath } }); + }, {}); diff --git a/spec/frontend/ide/ide_router_spec.js b/spec/frontend/ide/ide_router_spec.js index 1461b756d13..b53e2019819 100644 --- a/spec/frontend/ide/ide_router_spec.js +++ b/spec/frontend/ide/ide_router_spec.js @@ -1,17 +1,20 @@ -import router from '~/ide/ide_router'; -import store from '~/ide/stores'; +import { createRouter } from '~/ide/ide_router'; +import { createStore } from '~/ide/stores'; +import waitForPromises from 'helpers/wait_for_promises'; describe('IDE router', () => { const PROJECT_NAMESPACE = 'my-group/sub-group'; const PROJECT_NAME = 'my-project'; + const TEST_PATH = `/project/${PROJECT_NAMESPACE}/${PROJECT_NAME}/merge_requests/2`; - afterEach(() => { - router.push('/'); - }); + let store; + let router; - afterAll(() => { - // VueRouter leaves this window.history at the "base" url. We need to clean this up. + beforeEach(() => { window.history.replaceState({}, '', '/'); + store = createStore(); + router = createRouter(store); + jest.spyOn(store, 'dispatch').mockReturnValue(new Promise(() => {})); }); [ @@ -31,8 +34,6 @@ describe('IDE router', () => { `/project/${PROJECT_NAMESPACE}/${PROJECT_NAME}`, ].forEach(route => { it(`finds project path when route is "${route}"`, () => { - jest.spyOn(store, 'dispatch').mockReturnValue(new Promise(() => {})); - router.push(route); expect(store.dispatch).toHaveBeenCalledWith('getProjectData', { @@ -41,4 +42,22 @@ describe('IDE router', () => { }); }); }); + + it('keeps router in sync when store changes', async () => { + expect(router.currentRoute.fullPath).toBe('/'); + + store.state.router.fullPath = TEST_PATH; + + await waitForPromises(); + + expect(router.currentRoute.fullPath).toBe(TEST_PATH); + }); + + it('keeps store in sync when router changes', () => { + expect(store.dispatch).not.toHaveBeenCalled(); + + router.push(TEST_PATH); + + expect(store.dispatch).toHaveBeenCalledWith('router/push', TEST_PATH, { root: true }); + }); }); diff --git a/spec/frontend/ide/lib/common/model_spec.js b/spec/frontend/ide/lib/common/model_spec.js index 2ef2f0da6da..df46b7774b0 100644 --- a/spec/frontend/ide/lib/common/model_spec.js +++ b/spec/frontend/ide/lib/common/model_spec.js @@ -133,5 +133,77 @@ describe('Multi-file editor library model', () => { expect(disposeSpy).toHaveBeenCalled(); }); + + it('applies custom options and triggers onChange callback', () => { + const changeSpy = jest.fn(); + jest.spyOn(model, 'applyCustomOptions'); + + model.onChange(changeSpy); + + model.dispose(); + + expect(model.applyCustomOptions).toHaveBeenCalled(); + expect(changeSpy).toHaveBeenCalled(); + }); + }); + + describe('updateOptions', () => { + it('sets the options on the options object', () => { + model.updateOptions({ insertSpaces: true, someOption: 'some value' }); + + expect(model.options).toEqual({ + endOfLine: 0, + insertFinalNewline: true, + insertSpaces: true, + someOption: 'some value', + trimTrailingWhitespace: false, + }); + }); + + it.each` + option | value + ${'insertSpaces'} | ${true} + ${'insertSpaces'} | ${false} + ${'indentSize'} | ${4} + ${'tabSize'} | ${3} + `("correctly sets option: $option=$value to Monaco's TextModel", ({ option, value }) => { + model.updateOptions({ [option]: value }); + + expect(model.getModel().getOptions()).toMatchObject({ [option]: value }); + }); + + it('applies custom options immediately', () => { + jest.spyOn(model, 'applyCustomOptions'); + + model.updateOptions({ trimTrailingWhitespace: true, someOption: 'some value' }); + + expect(model.applyCustomOptions).toHaveBeenCalled(); + }); + }); + + describe('applyCustomOptions', () => { + it.each` + option | value | contentBefore | contentAfter + ${'endOfLine'} | ${0} | ${'hello\nworld\n'} | ${'hello\nworld\n'} + ${'endOfLine'} | ${0} | ${'hello\r\nworld\r\n'} | ${'hello\nworld\n'} + ${'endOfLine'} | ${1} | ${'hello\nworld\n'} | ${'hello\r\nworld\r\n'} + ${'endOfLine'} | ${1} | ${'hello\r\nworld\r\n'} | ${'hello\r\nworld\r\n'} + ${'insertFinalNewline'} | ${true} | ${'hello\nworld'} | ${'hello\nworld\n'} + ${'insertFinalNewline'} | ${true} | ${'hello\nworld\n'} | ${'hello\nworld\n'} + ${'insertFinalNewline'} | ${false} | ${'hello\nworld'} | ${'hello\nworld'} + ${'trimTrailingWhitespace'} | ${true} | ${'hello \t\nworld \t\n'} | ${'hello\nworld\n'} + ${'trimTrailingWhitespace'} | ${true} | ${'hello \t\r\nworld \t\r\n'} | ${'hello\nworld\n'} + ${'trimTrailingWhitespace'} | ${false} | ${'hello \t\r\nworld \t\r\n'} | ${'hello \t\nworld \t\n'} + `( + 'correctly applies custom option $option=$value to content', + ({ option, value, contentBefore, contentAfter }) => { + model.options[option] = value; + + model.updateNewContent(contentBefore); + model.applyCustomOptions(); + + expect(model.getModel().getValue()).toEqual(contentAfter); + }, + ); }); }); diff --git a/spec/frontend/ide/lib/create_diff_spec.js b/spec/frontend/ide/lib/create_diff_spec.js new file mode 100644 index 00000000000..273f9ee27bd --- /dev/null +++ b/spec/frontend/ide/lib/create_diff_spec.js @@ -0,0 +1,182 @@ +import createDiff from '~/ide/lib/create_diff'; +import createFileDiff from '~/ide/lib/create_file_diff'; +import { commitActionTypes } from '~/ide/constants'; +import { + createNewFile, + createUpdatedFile, + createDeletedFile, + createMovedFile, + createEntries, +} from '../file_helpers'; + +const PATH_FOO = 'test/foo.md'; +const PATH_BAR = 'test/bar.md'; +const PATH_ZED = 'test/zed.md'; +const PATH_LOREM = 'test/lipsum/nested/lorem.md'; +const PATH_IPSUM = 'test/lipsum/ipsum.md'; +const TEXT = `Lorem ipsum dolor sit amet, +consectetur adipiscing elit. +Morbi ex dolor, euismod nec rutrum nec, egestas at ligula. +Praesent scelerisque ut nisi eu eleifend. +Suspendisse potenti. +`; +const LINES = TEXT.trim().split('\n'); + +const joinDiffs = (...patches) => patches.join(''); + +describe('IDE lib/create_diff', () => { + it('with created files, generates patch', () => { + const changedFiles = [createNewFile(PATH_FOO, TEXT), createNewFile(PATH_BAR, '')]; + const result = createDiff({ changedFiles }); + + expect(result).toEqual({ + patch: joinDiffs( + createFileDiff(changedFiles[0], commitActionTypes.create), + createFileDiff(changedFiles[1], commitActionTypes.create), + ), + toDelete: [], + }); + }); + + it('with deleted files, adds to delete', () => { + const changedFiles = [createDeletedFile(PATH_FOO, TEXT), createDeletedFile(PATH_BAR, '')]; + + const result = createDiff({ changedFiles }); + + expect(result).toEqual({ + patch: '', + toDelete: [PATH_FOO, PATH_BAR], + }); + }); + + it('with updated files, generates patch', () => { + const changedFiles = [createUpdatedFile(PATH_FOO, TEXT, 'A change approaches!')]; + + const result = createDiff({ changedFiles }); + + expect(result).toEqual({ + patch: createFileDiff(changedFiles[0], commitActionTypes.update), + toDelete: [], + }); + }); + + it('with files in both staged and changed, prefer changed', () => { + const changedFiles = [ + createUpdatedFile(PATH_FOO, TEXT, 'Do a change!'), + createDeletedFile(PATH_LOREM), + ]; + + const result = createDiff({ + changedFiles, + stagedFiles: [createUpdatedFile(PATH_LOREM, TEXT, ''), createDeletedFile(PATH_FOO, TEXT)], + }); + + expect(result).toEqual({ + patch: createFileDiff(changedFiles[0], commitActionTypes.update), + toDelete: [PATH_LOREM], + }); + }); + + it('with file created in staging and deleted in changed, do nothing', () => { + const result = createDiff({ + changedFiles: [createDeletedFile(PATH_FOO)], + stagedFiles: [createNewFile(PATH_FOO, TEXT)], + }); + + expect(result).toEqual({ + patch: '', + toDelete: [], + }); + }); + + it('with file deleted in both staged and changed, delete', () => { + const result = createDiff({ + changedFiles: [createDeletedFile(PATH_LOREM)], + stagedFiles: [createDeletedFile(PATH_LOREM)], + }); + + expect(result).toEqual({ + patch: '', + toDelete: [PATH_LOREM], + }); + }); + + it('with file moved, create and delete', () => { + const changedFiles = [createMovedFile(PATH_BAR, PATH_FOO, TEXT)]; + + const result = createDiff({ + changedFiles, + stagedFiles: [createDeletedFile(PATH_FOO)], + }); + + expect(result).toEqual({ + patch: createFileDiff(changedFiles[0], commitActionTypes.create), + toDelete: [PATH_FOO], + }); + }); + + it('with file moved and no content, move', () => { + const changedFiles = [createMovedFile(PATH_BAR, PATH_FOO)]; + + const result = createDiff({ + changedFiles, + stagedFiles: [createDeletedFile(PATH_FOO)], + }); + + expect(result).toEqual({ + patch: createFileDiff(changedFiles[0], commitActionTypes.move), + toDelete: [], + }); + }); + + it('creates a well formatted patch', () => { + const changedFiles = [ + createMovedFile(PATH_BAR, PATH_FOO), + createDeletedFile(PATH_ZED), + createNewFile(PATH_LOREM, TEXT), + createUpdatedFile(PATH_IPSUM, TEXT, "That's all folks!"), + ]; + + const expectedPatch = `diff --git "a/${PATH_FOO}" "b/${PATH_BAR}" +rename from ${PATH_FOO} +rename to ${PATH_BAR} +diff --git "a/${PATH_LOREM}" "b/${PATH_LOREM}" +new file mode 100644 +--- /dev/null ++++ b/${PATH_LOREM} +@@ -0,0 +1,${LINES.length} @@ +${LINES.map(line => `+${line}`).join('\n')} +diff --git "a/${PATH_IPSUM}" "b/${PATH_IPSUM}" +--- a/${PATH_IPSUM} ++++ b/${PATH_IPSUM} +@@ -1,${LINES.length} +1,1 @@ +${LINES.map(line => `-${line}`).join('\n')} ++That's all folks! +\\ No newline at end of file +`; + + const result = createDiff({ changedFiles }); + + expect(result).toEqual({ + patch: expectedPatch, + toDelete: [PATH_ZED], + }); + }); + + it('deletes deleted parent directories', () => { + const deletedFiles = ['foo/bar/zed/test.md', 'foo/bar/zed/test2.md']; + const entries = deletedFiles.reduce((acc, path) => Object.assign(acc, createEntries(path)), {}); + const allDeleted = [...deletedFiles, 'foo/bar/zed', 'foo/bar']; + allDeleted.forEach(path => { + entries[path].deleted = true; + }); + const changedFiles = deletedFiles.map(x => entries[x]); + + const result = createDiff({ changedFiles, entries }); + + expect(result).toEqual({ + patch: '', + toDelete: allDeleted, + }); + }); +}); diff --git a/spec/frontend/ide/lib/create_file_diff_spec.js b/spec/frontend/ide/lib/create_file_diff_spec.js new file mode 100644 index 00000000000..4b428468a6d --- /dev/null +++ b/spec/frontend/ide/lib/create_file_diff_spec.js @@ -0,0 +1,163 @@ +import createFileDiff from '~/ide/lib/create_file_diff'; +import { commitActionTypes } from '~/ide/constants'; +import { + createUpdatedFile, + createNewFile, + createMovedFile, + createDeletedFile, +} from '../file_helpers'; + +const PATH = 'test/numbers.md'; +const PATH_FOO = 'test/foo.md'; +const TEXT_LINE_COUNT = 100; +const TEXT = Array(TEXT_LINE_COUNT) + .fill(0) + .map((_, idx) => `${idx + 1}`) + .join('\n'); + +const spliceLines = (content, lineNumber, deleteCount = 0, newLines = []) => { + const lines = content.split('\n'); + lines.splice(lineNumber, deleteCount, ...newLines); + return lines.join('\n'); +}; + +const mapLines = (content, mapFn) => + content + .split('\n') + .map(mapFn) + .join('\n'); + +describe('IDE lib/create_file_diff', () => { + it('returns empty string with "garbage" action', () => { + const result = createFileDiff(createNewFile(PATH, ''), 'garbage'); + + expect(result).toBe(''); + }); + + it('preserves ending whitespace in file', () => { + const oldContent = spliceLines(TEXT, 99, 1, ['100 ']); + const newContent = spliceLines(oldContent, 99, 0, ['Lorem', 'Ipsum']); + const expected = ` + 99 ++Lorem ++Ipsum + 100 `; + + const result = createFileDiff( + createUpdatedFile(PATH, oldContent, newContent), + commitActionTypes.update, + ); + + expect(result).toContain(expected); + }); + + describe('with "create" action', () => { + const expectedHead = `diff --git "a/${PATH}" "b/${PATH}" +new file mode 100644`; + + const expectedChunkHead = lineCount => `--- /dev/null ++++ b/${PATH} +@@ -0,0 +1,${lineCount} @@`; + + it('with empty file, does not include diff body', () => { + const result = createFileDiff(createNewFile(PATH, ''), commitActionTypes.create); + + expect(result).toBe(`${expectedHead}\n`); + }); + + it('with single line, includes diff body', () => { + const result = createFileDiff(createNewFile(PATH, '\n'), commitActionTypes.create); + + expect(result).toBe(`${expectedHead} +${expectedChunkHead(1)} ++ +`); + }); + + it('without newline, includes no newline comment', () => { + const result = createFileDiff(createNewFile(PATH, 'Lorem ipsum'), commitActionTypes.create); + + expect(result).toBe(`${expectedHead} +${expectedChunkHead(1)} ++Lorem ipsum +\\ No newline at end of file +`); + }); + + it('with content, includes diff body', () => { + const content = `${TEXT}\n`; + const result = createFileDiff(createNewFile(PATH, content), commitActionTypes.create); + + expect(result).toBe(`${expectedHead} +${expectedChunkHead(TEXT_LINE_COUNT)} +${mapLines(TEXT, line => `+${line}`)} +`); + }); + }); + + describe('with "delete" action', () => { + const expectedHead = `diff --git "a/${PATH}" "b/${PATH}" +deleted file mode 100644`; + + const expectedChunkHead = lineCount => `--- a/${PATH} ++++ /dev/null +@@ -1,${lineCount} +0,0 @@`; + + it('with empty file, does not include diff body', () => { + const result = createFileDiff(createDeletedFile(PATH, ''), commitActionTypes.delete); + + expect(result).toBe(`${expectedHead}\n`); + }); + + it('with content, includes diff body', () => { + const content = `${TEXT}\n`; + const result = createFileDiff(createDeletedFile(PATH, content), commitActionTypes.delete); + + expect(result).toBe(`${expectedHead} +${expectedChunkHead(TEXT_LINE_COUNT)} +${mapLines(TEXT, line => `-${line}`)} +`); + }); + }); + + describe('with "update" action', () => { + it('includes diff body', () => { + const oldContent = `${TEXT}\n`; + const newContent = `${spliceLines(TEXT, 50, 3, ['Lorem'])}\n`; + + const result = createFileDiff( + createUpdatedFile(PATH, oldContent, newContent), + commitActionTypes.update, + ); + + expect(result).toBe(`diff --git "a/${PATH}" "b/${PATH}" +--- a/${PATH} ++++ b/${PATH} +@@ -47,11 +47,9 @@ + 47 + 48 + 49 + 50 +-51 +-52 +-53 ++Lorem + 54 + 55 + 56 + 57 +`); + }); + }); + + describe('with "move" action', () => { + it('returns rename head', () => { + const result = createFileDiff(createMovedFile(PATH, PATH_FOO), commitActionTypes.move); + + expect(result).toBe(`diff --git "a/${PATH_FOO}" "b/${PATH}" +rename from ${PATH_FOO} +rename to ${PATH} +`); + }); + }); +}); diff --git a/spec/frontend/ide/lib/diff/diff_spec.js b/spec/frontend/ide/lib/diff/diff_spec.js index d9b088e2c12..901f9e7cfd1 100644 --- a/spec/frontend/ide/lib/diff/diff_spec.js +++ b/spec/frontend/ide/lib/diff/diff_spec.js @@ -73,5 +73,13 @@ describe('Multi-file editor library diff calculator', () => { expect(diff.endLineNumber).toBe(1); }); + + it('disregards changes for EOL type changes', () => { + const text1 = 'line1\nline2\nline3\n'; + const text2 = 'line1\r\nline2\r\nline3\r\n'; + + expect(computeDiff(text1, text2)).toEqual([]); + expect(computeDiff(text2, text1)).toEqual([]); + }); }); }); diff --git a/spec/frontend/ide/lib/editor_options_spec.js b/spec/frontend/ide/lib/editor_options_spec.js deleted file mode 100644 index b07a583b7c8..00000000000 --- a/spec/frontend/ide/lib/editor_options_spec.js +++ /dev/null @@ -1,11 +0,0 @@ -import editorOptions from '~/ide/lib/editor_options'; - -describe('Multi-file editor library editor options', () => { - it('returns an array', () => { - expect(editorOptions).toEqual(expect.any(Array)); - }); - - it('contains readOnly option', () => { - expect(editorOptions[0].readOnly).toBeDefined(); - }); -}); diff --git a/spec/frontend/ide/lib/editor_spec.js b/spec/frontend/ide/lib/editor_spec.js index 36d4c3c26ee..f5815771cdf 100644 --- a/spec/frontend/ide/lib/editor_spec.js +++ b/spec/frontend/ide/lib/editor_spec.js @@ -1,4 +1,9 @@ -import { editor as monacoEditor, languages as monacoLanguages } from 'monaco-editor'; +import { + editor as monacoEditor, + languages as monacoLanguages, + Range, + Selection, +} from 'monaco-editor'; import Editor from '~/ide/lib/editor'; import { defaultEditorOptions } from '~/ide/lib/editor_options'; import { file } from '../helpers'; @@ -72,12 +77,13 @@ describe('Multi-file editor library', () => { expect(monacoEditor.createDiffEditor).toHaveBeenCalledWith(holder, { ...defaultEditorOptions, + ignoreTrimWhitespace: false, quickSuggestions: false, occurrencesHighlight: false, renderSideBySide: false, - readOnly: true, - renderLineHighlight: 'all', - hideCursorInOverviewRuler: false, + readOnly: false, + renderLineHighlight: 'none', + hideCursorInOverviewRuler: true, }); }); }); @@ -193,6 +199,38 @@ describe('Multi-file editor library', () => { }); }); + describe('replaceSelectedText', () => { + let model; + let editor; + + beforeEach(() => { + instance.createInstance(holder); + + model = instance.createModel({ + ...file(), + key: 'index.md', + path: 'index.md', + }); + + instance.attachModel(model); + + editor = instance.instance; + editor.getModel().setValue('foo bar baz'); + editor.setSelection(new Range(1, 5, 1, 8)); + + instance.replaceSelectedText('hello'); + }); + + it('replaces the text selected in editor with the one provided', () => { + expect(editor.getModel().getValue()).toBe('foo hello baz'); + }); + + it('sets cursor to end of the replaced string', () => { + const selection = editor.getSelection(); + expect(selection).toEqual(new Selection(1, 10, 1, 10)); + }); + }); + describe('dispose', () => { it('calls disposble dispose method', () => { jest.spyOn(instance.disposable, 'dispose'); diff --git a/spec/frontend/ide/lib/editorconfig/mock_data.js b/spec/frontend/ide/lib/editorconfig/mock_data.js new file mode 100644 index 00000000000..b21f4a5b735 --- /dev/null +++ b/spec/frontend/ide/lib/editorconfig/mock_data.js @@ -0,0 +1,146 @@ +export const exampleConfigs = [ + { + path: 'foo/bar/baz/.editorconfig', + content: ` +[*] +tab_width = 6 +indent_style = tab +`, + }, + { + path: 'foo/bar/.editorconfig', + content: ` +root = false + +[*] +indent_size = 5 +indent_style = space +trim_trailing_whitespace = true + +[*_spec.{js,py}] +end_of_line = crlf + `, + }, + { + path: 'foo/.editorconfig', + content: ` +[*] +tab_width = 4 +indent_style = tab + `, + }, + { + path: '.editorconfig', + content: ` +root = true + +[*] +indent_size = 3 +indent_style = space +end_of_line = lf +insert_final_newline = true + +[*.js] +indent_size = 2 +indent_style = space +trim_trailing_whitespace = true + +[*.txt] +end_of_line = crlf + `, + }, + { + path: 'foo/bar/root/.editorconfig', + content: ` +root = true + +[*] +tab_width = 1 +indent_style = tab + `, + }, +]; + +export const exampleFiles = [ + { + path: 'foo/bar/root/README.md', + rules: { + indent_style: 'tab', // foo/bar/root/.editorconfig + tab_width: '1', // foo/bar/root/.editorconfig + }, + monacoRules: { + insertSpaces: false, + tabSize: 1, + }, + }, + { + path: 'foo/bar/baz/my_spec.js', + rules: { + end_of_line: 'crlf', // foo/bar/.editorconfig (for _spec.js files) + indent_size: '5', // foo/bar/.editorconfig + indent_style: 'tab', // foo/bar/baz/.editorconfig + insert_final_newline: 'true', // .editorconfig + tab_width: '6', // foo/bar/baz/.editorconfig + trim_trailing_whitespace: 'true', // .editorconfig (for .js files) + }, + monacoRules: { + endOfLine: 1, + insertFinalNewline: true, + insertSpaces: false, + tabSize: 6, + trimTrailingWhitespace: true, + }, + }, + { + path: 'foo/my_file.js', + rules: { + end_of_line: 'lf', // .editorconfig + indent_size: '2', // .editorconfig (for .js files) + indent_style: 'tab', // foo/.editorconfig + insert_final_newline: 'true', // .editorconfig + tab_width: '4', // foo/.editorconfig + trim_trailing_whitespace: 'true', // .editorconfig (for .js files) + }, + monacoRules: { + endOfLine: 0, + insertFinalNewline: true, + insertSpaces: false, + tabSize: 4, + trimTrailingWhitespace: true, + }, + }, + { + path: 'foo/my_file.md', + rules: { + end_of_line: 'lf', // .editorconfig + indent_size: '3', // .editorconfig + indent_style: 'tab', // foo/.editorconfig + insert_final_newline: 'true', // .editorconfig + tab_width: '4', // foo/.editorconfig + }, + monacoRules: { + endOfLine: 0, + insertFinalNewline: true, + insertSpaces: false, + tabSize: 4, + }, + }, + { + path: 'foo/bar/my_file.txt', + rules: { + end_of_line: 'crlf', // .editorconfig (for .txt files) + indent_size: '5', // foo/bar/.editorconfig + indent_style: 'space', // foo/bar/.editorconfig + insert_final_newline: 'true', // .editorconfig + tab_width: '4', // foo/.editorconfig + trim_trailing_whitespace: 'true', // foo/bar/.editorconfig + }, + monacoRules: { + endOfLine: 1, + insertFinalNewline: true, + insertSpaces: true, + tabSize: 4, + trimTrailingWhitespace: true, + }, + }, +]; diff --git a/spec/frontend/ide/lib/editorconfig/parser_spec.js b/spec/frontend/ide/lib/editorconfig/parser_spec.js new file mode 100644 index 00000000000..f99410236e1 --- /dev/null +++ b/spec/frontend/ide/lib/editorconfig/parser_spec.js @@ -0,0 +1,18 @@ +import { getRulesWithTraversal } from '~/ide/lib/editorconfig/parser'; +import { exampleConfigs, exampleFiles } from './mock_data'; + +describe('~/ide/lib/editorconfig/parser', () => { + const getExampleConfigContent = path => + Promise.resolve(exampleConfigs.find(x => x.path === path)?.content); + + describe('getRulesWithTraversal', () => { + it.each(exampleFiles)( + 'traverses through all editorconfig files in parent directories (until root=true is hit) and finds rules for this file (case %#)', + ({ path, rules }) => { + return getRulesWithTraversal(path, getExampleConfigContent).then(result => { + expect(result).toEqual(rules); + }); + }, + ); + }); +}); diff --git a/spec/frontend/ide/lib/editorconfig/rules_mapper_spec.js b/spec/frontend/ide/lib/editorconfig/rules_mapper_spec.js new file mode 100644 index 00000000000..536b1409435 --- /dev/null +++ b/spec/frontend/ide/lib/editorconfig/rules_mapper_spec.js @@ -0,0 +1,43 @@ +import mapRulesToMonaco from '~/ide/lib/editorconfig/rules_mapper'; + +describe('mapRulesToMonaco', () => { + const multipleEntries = { + input: { indent_style: 'tab', indent_size: '4', insert_final_newline: 'true' }, + output: { insertSpaces: false, tabSize: 4, insertFinalNewline: true }, + }; + + // tab width takes precedence + const tabWidthAndIndent = { + input: { indent_style: 'tab', indent_size: '4', tab_width: '3' }, + output: { insertSpaces: false, tabSize: 3 }, + }; + + it.each` + rule | monacoOption + ${{ indent_style: 'tab' }} | ${{ insertSpaces: false }} + ${{ indent_style: 'space' }} | ${{ insertSpaces: true }} + ${{ indent_style: 'unset' }} | ${{}} + ${{ indent_size: '4' }} | ${{ tabSize: 4 }} + ${{ indent_size: '4.4' }} | ${{ tabSize: 4 }} + ${{ indent_size: '0' }} | ${{}} + ${{ indent_size: '-10' }} | ${{}} + ${{ indent_size: 'NaN' }} | ${{}} + ${{ tab_width: '4' }} | ${{ tabSize: 4 }} + ${{ tab_width: '5.4' }} | ${{ tabSize: 5 }} + ${{ tab_width: '-10' }} | ${{}} + ${{ trim_trailing_whitespace: 'true' }} | ${{ trimTrailingWhitespace: true }} + ${{ trim_trailing_whitespace: 'false' }} | ${{ trimTrailingWhitespace: false }} + ${{ trim_trailing_whitespace: 'unset' }} | ${{}} + ${{ end_of_line: 'lf' }} | ${{ endOfLine: 0 }} + ${{ end_of_line: 'crlf' }} | ${{ endOfLine: 1 }} + ${{ end_of_line: 'cr' }} | ${{}} + ${{ end_of_line: 'unset' }} | ${{}} + ${{ insert_final_newline: 'true' }} | ${{ insertFinalNewline: true }} + ${{ insert_final_newline: 'false' }} | ${{ insertFinalNewline: false }} + ${{ insert_final_newline: 'unset' }} | ${{}} + ${multipleEntries.input} | ${multipleEntries.output} + ${tabWidthAndIndent.input} | ${tabWidthAndIndent.output} + `('correctly maps editorconfig rule to monaco option: $rule', ({ rule, monacoOption }) => { + expect(mapRulesToMonaco(rule)).toEqual(monacoOption); + }); +}); diff --git a/spec/frontend/ide/lib/files_spec.js b/spec/frontend/ide/lib/files_spec.js index 2b15aef6454..6974cdc4074 100644 --- a/spec/frontend/ide/lib/files_spec.js +++ b/spec/frontend/ide/lib/files_spec.js @@ -11,7 +11,6 @@ const createEntries = paths => { const createUrl = base => (type === 'tree' ? `${base}/` : base); const { name, parent } = splitParent(path); - const parentEntry = acc[parent]; const previewMode = viewerInformationForPath(name); acc[path] = { @@ -26,9 +25,6 @@ const createEntries = paths => { previewMode, binary: (previewMode && previewMode.binary) || false, parentPath: parent, - parentTreeUrl: parentEntry - ? parentEntry.url - : createUrl(`/${TEST_PROJECT_ID}/${type}/${TEST_BRANCH_ID}`), }), tree: children.map(childName => expect.objectContaining({ name: childName })), }; diff --git a/spec/frontend/ide/lib/mirror_spec.js b/spec/frontend/ide/lib/mirror_spec.js new file mode 100644 index 00000000000..21bed5948f3 --- /dev/null +++ b/spec/frontend/ide/lib/mirror_spec.js @@ -0,0 +1,184 @@ +import createDiff from '~/ide/lib/create_diff'; +import { + canConnect, + createMirror, + SERVICE_NAME, + PROTOCOL, + MSG_CONNECTION_ERROR, + SERVICE_DELAY, +} from '~/ide/lib/mirror'; +import { getWebSocketUrl } from '~/lib/utils/url_utility'; + +jest.mock('~/ide/lib/create_diff', () => jest.fn()); + +const TEST_PATH = '/project/ide/proxy/path'; +const TEST_DIFF = { + patch: 'lorem ipsum', + toDelete: ['foo.md'], +}; +const TEST_ERROR = 'Something bad happened...'; +const TEST_SUCCESS_RESPONSE = { + data: JSON.stringify({ error: { code: 0 }, payload: { status_code: 200 } }), +}; +const TEST_ERROR_RESPONSE = { + data: JSON.stringify({ error: { code: 1, Message: TEST_ERROR }, payload: { status_code: 200 } }), +}; +const TEST_ERROR_PAYLOAD_RESPONSE = { + data: JSON.stringify({ + error: { code: 0 }, + payload: { status_code: 500, error_message: TEST_ERROR }, + }), +}; + +const buildUploadMessage = ({ toDelete, patch }) => + JSON.stringify({ + code: 'EVENT', + namespace: '/files', + event: 'PATCH', + payload: { diff: patch, delete_files: toDelete }, + }); + +describe('ide/lib/mirror', () => { + describe('canConnect', () => { + it('can connect if the session has the expected service', () => { + const result = canConnect({ services: ['test1', SERVICE_NAME, 'test2'] }); + + expect(result).toBe(true); + }); + + it('cannot connect if the session does not have the expected service', () => { + const result = canConnect({ services: ['test1', 'test2'] }); + + expect(result).toBe(false); + }); + }); + + describe('createMirror', () => { + const origWebSocket = global.WebSocket; + let mirror; + let mockWebSocket; + + beforeEach(() => { + mockWebSocket = { + close: jest.fn(), + send: jest.fn(), + }; + global.WebSocket = jest.fn().mockImplementation(() => mockWebSocket); + mirror = createMirror(); + }); + + afterEach(() => { + global.WebSocket = origWebSocket; + }); + + const waitForConnection = (delay = SERVICE_DELAY) => { + const wait = new Promise(resolve => { + setTimeout(resolve, 10); + }); + + jest.advanceTimersByTime(delay); + + return wait; + }; + const connectPass = () => waitForConnection().then(() => mockWebSocket.onopen()); + const connectFail = () => waitForConnection().then(() => mockWebSocket.onerror()); + const sendResponse = msg => { + mockWebSocket.onmessage(msg); + }; + + describe('connect', () => { + let connection; + + beforeEach(() => { + connection = mirror.connect(TEST_PATH); + }); + + it('waits before creating web socket', () => { + // ignore error when test suite terminates + connection.catch(() => {}); + + return waitForConnection(SERVICE_DELAY - 10).then(() => { + expect(global.WebSocket).not.toHaveBeenCalled(); + }); + }); + + it('is canceled when disconnected before finished waiting', () => { + mirror.disconnect(); + + return waitForConnection(SERVICE_DELAY).then(() => { + expect(global.WebSocket).not.toHaveBeenCalled(); + }); + }); + + describe('when connection is successful', () => { + beforeEach(connectPass); + + it('connects to service', () => { + const expectedPath = `${getWebSocketUrl(TEST_PATH)}?service=${SERVICE_NAME}`; + + return connection.then(() => { + expect(global.WebSocket).toHaveBeenCalledWith(expectedPath, [PROTOCOL]); + }); + }); + + it('disconnects when connected again', () => { + const result = connection + .then(() => { + // https://gitlab.com/gitlab-org/gitlab/issues/33024 + // eslint-disable-next-line promise/no-nesting + mirror.connect(TEST_PATH).catch(() => {}); + }) + .then(() => { + expect(mockWebSocket.close).toHaveBeenCalled(); + }); + + return result; + }); + }); + + describe('when connection fails', () => { + beforeEach(connectFail); + + it('rejects with error', () => { + return expect(connection).rejects.toEqual(new Error(MSG_CONNECTION_ERROR)); + }); + }); + }); + + describe('upload', () => { + let state; + + beforeEach(() => { + state = { changedFiles: [] }; + createDiff.mockReturnValue(TEST_DIFF); + + const connection = mirror.connect(TEST_PATH); + + return connectPass().then(() => connection); + }); + + it('creates a diff from the given state', () => { + const result = mirror.upload(state); + + sendResponse(TEST_SUCCESS_RESPONSE); + + return result.then(() => { + expect(createDiff).toHaveBeenCalledWith(state); + expect(mockWebSocket.send).toHaveBeenCalledWith(buildUploadMessage(TEST_DIFF)); + }); + }); + + it.each` + response | description + ${TEST_ERROR_RESPONSE} | ${'error in error'} + ${TEST_ERROR_PAYLOAD_RESPONSE} | ${'error in payload'} + `('rejects if response has $description', ({ response }) => { + const result = mirror.upload(state); + + sendResponse(response); + + return expect(result).rejects.toEqual({ message: TEST_ERROR }); + }); + }); + }); +}); diff --git a/spec/frontend/ide/stores/actions/file_spec.js b/spec/frontend/ide/stores/actions/file_spec.js index 43cb06f5d92..e2dc7626c67 100644 --- a/spec/frontend/ide/stores/actions/file_spec.js +++ b/spec/frontend/ide/stores/actions/file_spec.js @@ -5,7 +5,7 @@ import { createStore } from '~/ide/stores'; import * as actions from '~/ide/stores/actions/file'; import * as types from '~/ide/stores/mutation_types'; import service from '~/ide/services'; -import router from '~/ide/ide_router'; +import { createRouter } from '~/ide/ide_router'; import eventHub from '~/ide/eventhub'; import { file } from '../../helpers'; @@ -16,6 +16,7 @@ describe('IDE store file actions', () => { let mock; let originalGon; let store; + let router; beforeEach(() => { mock = new MockAdapter(axios); @@ -26,6 +27,7 @@ describe('IDE store file actions', () => { }; store = createStore(); + router = createRouter(store); jest.spyOn(store, 'commit'); jest.spyOn(store, 'dispatch'); @@ -44,7 +46,6 @@ describe('IDE store file actions', () => { localFile = file('testFile'); localFile.active = true; localFile.opened = true; - localFile.parentTreeUrl = 'parentTreeUrl'; store.state.openFiles.push(localFile); store.state.entries[localFile.path] = localFile; @@ -254,13 +255,8 @@ describe('IDE store file actions', () => { mock.onGet(`${RELATIVE_URL_ROOT}/test/test/-/7297abc/${localFile.path}`).replyOnce( 200, { - blame_path: 'blame_path', - commits_path: 'commits_path', - permalink: 'permalink', raw_path: 'raw_path', binary: false, - html: '123', - render_error: '', }, { 'page-title': 'testing getFileData', @@ -281,17 +277,6 @@ describe('IDE store file actions', () => { .catch(done.fail); }); - it('sets the file data', done => { - store - .dispatch('getFileData', { path: localFile.path }) - .then(() => { - expect(localFile.blamePath).toBe('blame_path'); - - done(); - }) - .catch(done.fail); - }); - it('sets document title with the branchId', done => { store .dispatch('getFileData', { path: localFile.path }) @@ -348,13 +333,8 @@ describe('IDE store file actions', () => { mock.onGet(`${RELATIVE_URL_ROOT}/test/test/-/7297abc/old-dull-file`).replyOnce( 200, { - blame_path: 'blame_path', - commits_path: 'commits_path', - permalink: 'permalink', raw_path: 'raw_path', binary: false, - html: '123', - render_error: '', }, { 'page-title': 'testing old-dull-file', @@ -587,20 +567,6 @@ describe('IDE store file actions', () => { }) .catch(done.fail); }); - - it('bursts unused seal', done => { - store - .dispatch('changeFileContent', { - path: tmpFile.path, - content: 'content', - }) - .then(() => { - expect(store.state.unusedSeal).toBe(false); - - done(); - }) - .catch(done.fail); - }); }); describe('with changed file', () => { diff --git a/spec/frontend/ide/stores/actions/merge_request_spec.js b/spec/frontend/ide/stores/actions/merge_request_spec.js new file mode 100644 index 00000000000..cb4eebd97d9 --- /dev/null +++ b/spec/frontend/ide/stores/actions/merge_request_spec.js @@ -0,0 +1,504 @@ +import MockAdapter from 'axios-mock-adapter'; +import axios from '~/lib/utils/axios_utils'; +import store from '~/ide/stores'; +import createFlash from '~/flash'; +import { + getMergeRequestData, + getMergeRequestChanges, + getMergeRequestVersions, + openMergeRequest, +} from '~/ide/stores/actions/merge_request'; +import service from '~/ide/services'; +import { leftSidebarViews, PERMISSION_READ_MR } from '~/ide/constants'; +import { resetStore } from '../../helpers'; + +const TEST_PROJECT = 'abcproject'; +const TEST_PROJECT_ID = 17; + +jest.mock('~/flash'); + +describe('IDE store merge request actions', () => { + let mock; + + beforeEach(() => { + mock = new MockAdapter(axios); + + store.state.projects[TEST_PROJECT] = { + id: TEST_PROJECT_ID, + mergeRequests: {}, + userPermissions: { + [PERMISSION_READ_MR]: true, + }, + }; + }); + + afterEach(() => { + mock.restore(); + resetStore(store); + }); + + describe('getMergeRequestsForBranch', () => { + describe('success', () => { + const mrData = { iid: 2, source_branch: 'bar' }; + const mockData = [mrData]; + + describe('base case', () => { + beforeEach(() => { + jest.spyOn(service, 'getProjectMergeRequests'); + mock.onGet(/api\/(.*)\/projects\/abcproject\/merge_requests/).reply(200, mockData); + }); + + it('calls getProjectMergeRequests service method', done => { + store + .dispatch('getMergeRequestsForBranch', { projectId: TEST_PROJECT, branchId: 'bar' }) + .then(() => { + expect(service.getProjectMergeRequests).toHaveBeenCalledWith(TEST_PROJECT, { + source_branch: 'bar', + source_project_id: TEST_PROJECT_ID, + order_by: 'created_at', + per_page: 1, + }); + + done(); + }) + .catch(done.fail); + }); + + it('sets the "Merge Request" Object', done => { + store + .dispatch('getMergeRequestsForBranch', { projectId: TEST_PROJECT, branchId: 'bar' }) + .then(() => { + expect(store.state.projects.abcproject.mergeRequests).toEqual({ + '2': expect.objectContaining(mrData), + }); + done(); + }) + .catch(done.fail); + }); + + it('sets "Current Merge Request" object to the most recent MR', done => { + store + .dispatch('getMergeRequestsForBranch', { projectId: TEST_PROJECT, branchId: 'bar' }) + .then(() => { + expect(store.state.currentMergeRequestId).toEqual('2'); + done(); + }) + .catch(done.fail); + }); + + it('does nothing if user cannot read MRs', done => { + store.state.projects[TEST_PROJECT].userPermissions[PERMISSION_READ_MR] = false; + + store + .dispatch('getMergeRequestsForBranch', { projectId: TEST_PROJECT, branchId: 'bar' }) + .then(() => { + expect(service.getProjectMergeRequests).not.toHaveBeenCalled(); + expect(store.state.currentMergeRequestId).toBe(''); + }) + .then(done) + .catch(done.fail); + }); + }); + + describe('no merge requests for branch available case', () => { + beforeEach(() => { + jest.spyOn(service, 'getProjectMergeRequests'); + mock.onGet(/api\/(.*)\/projects\/abcproject\/merge_requests/).reply(200, []); + }); + + it('does not fail if there are no merge requests for current branch', done => { + store + .dispatch('getMergeRequestsForBranch', { projectId: TEST_PROJECT, branchId: 'foo' }) + .then(() => { + expect(store.state.projects[TEST_PROJECT].mergeRequests).toEqual({}); + expect(store.state.currentMergeRequestId).toEqual(''); + done(); + }) + .catch(done.fail); + }); + }); + }); + + describe('error', () => { + beforeEach(() => { + mock.onGet(/api\/(.*)\/projects\/abcproject\/merge_requests/).networkError(); + }); + + it('flashes message, if error', done => { + store + .dispatch('getMergeRequestsForBranch', { projectId: TEST_PROJECT, branchId: 'bar' }) + .catch(() => { + expect(createFlash).toHaveBeenCalled(); + expect(createFlash.mock.calls[0][0]).toBe('Error fetching merge requests for bar'); + }) + .then(done) + .catch(done.fail); + }); + }); + }); + + describe('getMergeRequestData', () => { + describe('success', () => { + beforeEach(() => { + jest.spyOn(service, 'getProjectMergeRequestData'); + + mock + .onGet(/api\/(.*)\/projects\/abcproject\/merge_requests\/1/) + .reply(200, { title: 'mergerequest' }); + }); + + it('calls getProjectMergeRequestData service method', done => { + store + .dispatch('getMergeRequestData', { projectId: TEST_PROJECT, mergeRequestId: 1 }) + .then(() => { + expect(service.getProjectMergeRequestData).toHaveBeenCalledWith(TEST_PROJECT, 1); + + done(); + }) + .catch(done.fail); + }); + + it('sets the Merge Request Object', done => { + store + .dispatch('getMergeRequestData', { projectId: TEST_PROJECT, mergeRequestId: 1 }) + .then(() => { + expect(store.state.currentMergeRequestId).toBe(1); + expect(store.state.projects[TEST_PROJECT].mergeRequests['1'].title).toBe( + 'mergerequest', + ); + + done(); + }) + .catch(done.fail); + }); + }); + + describe('error', () => { + beforeEach(() => { + mock.onGet(/api\/(.*)\/projects\/abcproject\/merge_requests\/1/).networkError(); + }); + + it('dispatches error action', done => { + const dispatch = jest.fn(); + + getMergeRequestData( + { + commit() {}, + dispatch, + state: store.state, + }, + { projectId: TEST_PROJECT, mergeRequestId: 1 }, + ) + .then(done.fail) + .catch(() => { + expect(dispatch).toHaveBeenCalledWith('setErrorMessage', { + text: 'An error occurred while loading the merge request.', + action: expect.any(Function), + actionText: 'Please try again', + actionPayload: { + projectId: TEST_PROJECT, + mergeRequestId: 1, + force: false, + }, + }); + + done(); + }); + }); + }); + }); + + describe('getMergeRequestChanges', () => { + beforeEach(() => { + store.state.projects[TEST_PROJECT].mergeRequests['1'] = { changes: [] }; + }); + + describe('success', () => { + beforeEach(() => { + jest.spyOn(service, 'getProjectMergeRequestChanges'); + + mock + .onGet(/api\/(.*)\/projects\/abcproject\/merge_requests\/1\/changes/) + .reply(200, { title: 'mergerequest' }); + }); + + it('calls getProjectMergeRequestChanges service method', done => { + store + .dispatch('getMergeRequestChanges', { projectId: TEST_PROJECT, mergeRequestId: 1 }) + .then(() => { + expect(service.getProjectMergeRequestChanges).toHaveBeenCalledWith(TEST_PROJECT, 1); + + done(); + }) + .catch(done.fail); + }); + + it('sets the Merge Request Changes Object', done => { + store + .dispatch('getMergeRequestChanges', { projectId: TEST_PROJECT, mergeRequestId: 1 }) + .then(() => { + expect(store.state.projects[TEST_PROJECT].mergeRequests['1'].changes.title).toBe( + 'mergerequest', + ); + done(); + }) + .catch(done.fail); + }); + }); + + describe('error', () => { + beforeEach(() => { + mock.onGet(/api\/(.*)\/projects\/abcproject\/merge_requests\/1\/changes/).networkError(); + }); + + it('dispatches error action', done => { + const dispatch = jest.fn(); + + getMergeRequestChanges( + { + commit() {}, + dispatch, + state: store.state, + }, + { projectId: TEST_PROJECT, mergeRequestId: 1 }, + ) + .then(done.fail) + .catch(() => { + expect(dispatch).toHaveBeenCalledWith('setErrorMessage', { + text: 'An error occurred while loading the merge request changes.', + action: expect.any(Function), + actionText: 'Please try again', + actionPayload: { + projectId: TEST_PROJECT, + mergeRequestId: 1, + force: false, + }, + }); + + done(); + }); + }); + }); + }); + + describe('getMergeRequestVersions', () => { + beforeEach(() => { + store.state.projects[TEST_PROJECT].mergeRequests['1'] = { versions: [] }; + }); + + describe('success', () => { + beforeEach(() => { + mock + .onGet(/api\/(.*)\/projects\/abcproject\/merge_requests\/1\/versions/) + .reply(200, [{ id: 789 }]); + jest.spyOn(service, 'getProjectMergeRequestVersions'); + }); + + it('calls getProjectMergeRequestVersions service method', done => { + store + .dispatch('getMergeRequestVersions', { projectId: TEST_PROJECT, mergeRequestId: 1 }) + .then(() => { + expect(service.getProjectMergeRequestVersions).toHaveBeenCalledWith(TEST_PROJECT, 1); + + done(); + }) + .catch(done.fail); + }); + + it('sets the Merge Request Versions Object', done => { + store + .dispatch('getMergeRequestVersions', { projectId: TEST_PROJECT, mergeRequestId: 1 }) + .then(() => { + expect(store.state.projects[TEST_PROJECT].mergeRequests['1'].versions.length).toBe(1); + done(); + }) + .catch(done.fail); + }); + }); + + describe('error', () => { + beforeEach(() => { + mock.onGet(/api\/(.*)\/projects\/abcproject\/merge_requests\/1\/versions/).networkError(); + }); + + it('dispatches error action', done => { + const dispatch = jest.fn(); + + getMergeRequestVersions( + { + commit() {}, + dispatch, + state: store.state, + }, + { projectId: TEST_PROJECT, mergeRequestId: 1 }, + ) + .then(done.fail) + .catch(() => { + expect(dispatch).toHaveBeenCalledWith('setErrorMessage', { + text: 'An error occurred while loading the merge request version data.', + action: expect.any(Function), + actionText: 'Please try again', + actionPayload: { + projectId: TEST_PROJECT, + mergeRequestId: 1, + force: false, + }, + }); + + done(); + }); + }); + }); + }); + + describe('openMergeRequest', () => { + const mr = { + projectId: TEST_PROJECT, + targetProjectId: 'defproject', + mergeRequestId: 2, + }; + let testMergeRequest; + let testMergeRequestChanges; + + const mockGetters = { findBranch: () => ({ commit: { id: 'abcd2322' } }) }; + + beforeEach(() => { + testMergeRequest = { + source_branch: 'abcbranch', + }; + testMergeRequestChanges = { + changes: [], + }; + store.state.entries = { + foo: { + type: 'blob', + }, + bar: { + type: 'blob', + }, + }; + + store.state.currentProjectId = 'test/test'; + store.state.currentBranchId = 'master'; + + store.state.projects['test/test'] = { + branches: { + master: { + commit: { + id: '7297abc', + }, + }, + abcbranch: { + commit: { + id: '29020fc', + }, + }, + }, + }; + + const originalDispatch = store.dispatch; + + jest.spyOn(store, 'dispatch').mockImplementation((type, payload) => { + switch (type) { + case 'getMergeRequestData': + return Promise.resolve(testMergeRequest); + case 'getMergeRequestChanges': + return Promise.resolve(testMergeRequestChanges); + case 'getFiles': + case 'getMergeRequestVersions': + case 'getBranchData': + case 'setFileMrChange': + return Promise.resolve(); + default: + return originalDispatch(type, payload); + } + }); + jest.spyOn(service, 'getFileData').mockImplementation(() => + Promise.resolve({ + headers: {}, + }), + ); + }); + + it('dispatches actions for merge request data', done => { + openMergeRequest({ state: store.state, dispatch: store.dispatch, getters: mockGetters }, mr) + .then(() => { + expect(store.dispatch.mock.calls).toEqual([ + ['getMergeRequestData', mr], + ['setCurrentBranchId', testMergeRequest.source_branch], + [ + 'getBranchData', + { + projectId: mr.projectId, + branchId: testMergeRequest.source_branch, + }, + ], + [ + 'getFiles', + { + projectId: mr.projectId, + branchId: testMergeRequest.source_branch, + ref: 'abcd2322', + }, + ], + ['getMergeRequestVersions', mr], + ['getMergeRequestChanges', mr], + ]); + }) + .then(done) + .catch(done.fail); + }); + + it('updates activity bar view and gets file data, if changes are found', done => { + store.state.entries.foo = { + url: 'test', + type: 'blob', + }; + store.state.entries.bar = { + url: 'test', + type: 'blob', + }; + + testMergeRequestChanges.changes = [ + { new_path: 'foo', path: 'foo' }, + { new_path: 'bar', path: 'bar' }, + ]; + + openMergeRequest({ state: store.state, dispatch: store.dispatch, getters: mockGetters }, mr) + .then(() => { + expect(store.dispatch).toHaveBeenCalledWith( + 'updateActivityBarView', + leftSidebarViews.review.name, + ); + + testMergeRequestChanges.changes.forEach((change, i) => { + expect(store.dispatch).toHaveBeenCalledWith('setFileMrChange', { + file: store.state.entries[change.new_path], + mrChange: change, + }); + + expect(store.dispatch).toHaveBeenCalledWith('getFileData', { + path: change.new_path, + makeFileActive: i === 0, + openFile: true, + }); + }); + + expect(store.state.openFiles.length).toBe(testMergeRequestChanges.changes.length); + }) + .then(done) + .catch(done.fail); + }); + + it('flashes message, if error', done => { + store.dispatch.mockRejectedValue(); + + openMergeRequest(store, mr) + .catch(() => { + expect(createFlash).toHaveBeenCalledWith(expect.any(String)); + }) + .then(done) + .catch(done.fail); + }); + }); +}); diff --git a/spec/frontend/ide/stores/actions/project_spec.js b/spec/frontend/ide/stores/actions/project_spec.js new file mode 100644 index 00000000000..64024c12903 --- /dev/null +++ b/spec/frontend/ide/stores/actions/project_spec.js @@ -0,0 +1,397 @@ +import MockAdapter from 'axios-mock-adapter'; +import axios from '~/lib/utils/axios_utils'; +import { createStore } from '~/ide/stores'; +import { + refreshLastCommitData, + showBranchNotFoundError, + createNewBranchFromDefault, + loadEmptyBranch, + openBranch, + loadFile, + loadBranch, +} from '~/ide/stores/actions'; +import service from '~/ide/services'; +import api from '~/api'; +import testAction from 'helpers/vuex_action_helper'; +import { useMockLocationHelper } from 'helpers/mock_window_location_helper'; + +const TEST_PROJECT_ID = 'abc/def'; + +describe('IDE store project actions', () => { + let mock; + let store; + + beforeEach(() => { + store = createStore(); + mock = new MockAdapter(axios); + + store.state.projects[TEST_PROJECT_ID] = { + branches: {}, + }; + }); + + afterEach(() => { + mock.restore(); + }); + + describe('refreshLastCommitData', () => { + beforeEach(() => { + store.state.currentProjectId = 'abc/def'; + store.state.currentBranchId = 'master'; + store.state.projects['abc/def'] = { + id: 4, + branches: { + master: { + commit: null, + }, + }, + }; + jest.spyOn(service, 'getBranchData').mockResolvedValue({ + data: { + commit: { id: '123' }, + }, + }); + }); + + it('calls the service', done => { + store + .dispatch('refreshLastCommitData', { + projectId: store.state.currentProjectId, + branchId: store.state.currentBranchId, + }) + .then(() => { + expect(service.getBranchData).toHaveBeenCalledWith('abc/def', 'master'); + + done(); + }) + .catch(done.fail); + }); + + it('commits getBranchData', done => { + testAction( + refreshLastCommitData, + { + projectId: store.state.currentProjectId, + branchId: store.state.currentBranchId, + }, + store.state, + // mutations + [ + { + type: 'SET_BRANCH_COMMIT', + payload: { + projectId: TEST_PROJECT_ID, + branchId: 'master', + commit: { id: '123' }, + }, + }, + ], + // action + [], + done, + ); + }); + }); + + describe('showBranchNotFoundError', () => { + it('dispatches setErrorMessage', done => { + testAction( + showBranchNotFoundError, + 'master', + null, + [], + [ + { + type: 'setErrorMessage', + payload: { + text: "Branch <strong>master</strong> was not found in this project's repository.", + action: expect.any(Function), + actionText: 'Create branch', + actionPayload: 'master', + }, + }, + ], + done, + ); + }); + }); + + describe('createNewBranchFromDefault', () => { + useMockLocationHelper(); + + beforeEach(() => { + jest.spyOn(api, 'createBranch').mockResolvedValue(); + }); + + it('calls API', done => { + createNewBranchFromDefault( + { + state: { + currentProjectId: 'project-path', + }, + getters: { + currentProject: { + default_branch: 'master', + }, + }, + dispatch() {}, + }, + 'new-branch-name', + ) + .then(() => { + expect(api.createBranch).toHaveBeenCalledWith('project-path', { + ref: 'master', + branch: 'new-branch-name', + }); + }) + .then(done) + .catch(done.fail); + }); + + it('clears error message', done => { + const dispatchSpy = jest.fn().mockName('dispatch'); + + createNewBranchFromDefault( + { + state: { + currentProjectId: 'project-path', + }, + getters: { + currentProject: { + default_branch: 'master', + }, + }, + dispatch: dispatchSpy, + }, + 'new-branch-name', + ) + .then(() => { + expect(dispatchSpy).toHaveBeenCalledWith('setErrorMessage', null); + }) + .then(done) + .catch(done.fail); + }); + + it('reloads window', done => { + createNewBranchFromDefault( + { + state: { + currentProjectId: 'project-path', + }, + getters: { + currentProject: { + default_branch: 'master', + }, + }, + dispatch() {}, + }, + 'new-branch-name', + ) + .then(() => { + expect(window.location.reload).toHaveBeenCalled(); + }) + .then(done) + .catch(done.fail); + }); + }); + + describe('loadEmptyBranch', () => { + it('creates a blank tree and sets loading state to false', done => { + testAction( + loadEmptyBranch, + { projectId: TEST_PROJECT_ID, branchId: 'master' }, + store.state, + [ + { type: 'CREATE_TREE', payload: { treePath: `${TEST_PROJECT_ID}/master` } }, + { + type: 'TOGGLE_LOADING', + payload: { entry: store.state.trees[`${TEST_PROJECT_ID}/master`], forceValue: false }, + }, + ], + expect.any(Object), + done, + ); + }); + + it('does nothing, if tree already exists', done => { + const trees = { [`${TEST_PROJECT_ID}/master`]: [] }; + + testAction( + loadEmptyBranch, + { projectId: TEST_PROJECT_ID, branchId: 'master' }, + { trees }, + [], + [], + done, + ); + }); + }); + + describe('loadFile', () => { + beforeEach(() => { + Object.assign(store.state, { + entries: { + foo: { pending: false }, + 'foo/bar-pending': { pending: true }, + 'foo/bar': { pending: false }, + }, + }); + jest.spyOn(store, 'dispatch').mockImplementation(); + }); + + it('does nothing, if basePath is not given', () => { + loadFile(store, { basePath: undefined }); + + expect(store.dispatch).not.toHaveBeenCalled(); + }); + + it('handles tree entry action, if basePath is given and the entry is not pending', () => { + loadFile(store, { basePath: 'foo/bar/' }); + + expect(store.dispatch).toHaveBeenCalledWith( + 'handleTreeEntryAction', + store.state.entries['foo/bar'], + ); + }); + + it('does not handle tree entry action, if entry is pending', () => { + loadFile(store, { basePath: 'foo/bar-pending/' }); + + expect(store.dispatch).not.toHaveBeenCalledWith('handleTreeEntryAction', expect.anything()); + }); + + it('creates a new temp file supplied via URL if the file does not exist yet', () => { + loadFile(store, { basePath: 'not-existent.md' }); + + expect(store.dispatch.mock.calls).toHaveLength(1); + + expect(store.dispatch).not.toHaveBeenCalledWith('handleTreeEntryAction', expect.anything()); + + expect(store.dispatch).toHaveBeenCalledWith('createTempEntry', { + name: 'not-existent.md', + type: 'blob', + }); + }); + }); + + describe('loadBranch', () => { + const projectId = TEST_PROJECT_ID; + const branchId = '123-lorem'; + const ref = 'abcd2322'; + + it('when empty repo, loads empty branch', done => { + const mockGetters = { emptyRepo: true }; + + testAction( + loadBranch, + { projectId, branchId }, + { ...store.state, ...mockGetters }, + [], + [{ type: 'loadEmptyBranch', payload: { projectId, branchId } }], + done, + ); + }); + + it('when branch already exists, does nothing', done => { + store.state.projects[projectId].branches[branchId] = {}; + + testAction(loadBranch, { projectId, branchId }, store.state, [], [], done); + }); + + it('fetches branch data', done => { + const mockGetters = { findBranch: () => ({ commit: { id: ref } }) }; + jest.spyOn(store, 'dispatch').mockResolvedValue(); + + loadBranch( + { getters: mockGetters, state: store.state, dispatch: store.dispatch }, + { projectId, branchId }, + ) + .then(() => { + expect(store.dispatch.mock.calls).toEqual([ + ['getBranchData', { projectId, branchId }], + ['getMergeRequestsForBranch', { projectId, branchId }], + ['getFiles', { projectId, branchId, ref }], + ]); + }) + .then(done) + .catch(done.fail); + }); + + it('shows an error if branch can not be fetched', done => { + jest.spyOn(store, 'dispatch').mockReturnValue(Promise.reject()); + + loadBranch(store, { projectId, branchId }) + .then(done.fail) + .catch(() => { + expect(store.dispatch.mock.calls).toEqual([ + ['getBranchData', { projectId, branchId }], + ['showBranchNotFoundError', branchId], + ]); + done(); + }); + }); + }); + + describe('openBranch', () => { + const projectId = TEST_PROJECT_ID; + const branchId = '123-lorem'; + + const branch = { + projectId, + branchId, + }; + + beforeEach(() => { + Object.assign(store.state, { + entries: { + foo: { pending: false }, + 'foo/bar-pending': { pending: true }, + 'foo/bar': { pending: false }, + }, + }); + }); + + describe('existing branch', () => { + beforeEach(() => { + jest.spyOn(store, 'dispatch').mockResolvedValue(); + }); + + it('dispatches branch actions', done => { + openBranch(store, branch) + .then(() => { + expect(store.dispatch.mock.calls).toEqual([ + ['setCurrentBranchId', branchId], + ['loadBranch', { projectId, branchId }], + ['loadFile', { basePath: undefined }], + ]); + }) + .then(done) + .catch(done.fail); + }); + }); + + describe('non-existent branch', () => { + beforeEach(() => { + jest.spyOn(store, 'dispatch').mockReturnValue(Promise.reject()); + }); + + it('dispatches correct branch actions', done => { + openBranch(store, branch) + .then(val => { + expect(store.dispatch.mock.calls).toEqual([ + ['setCurrentBranchId', branchId], + ['loadBranch', { projectId, branchId }], + ]); + + expect(val).toEqual( + new Error( + `An error occurred while getting files for - <strong>${projectId}/${branchId}</strong>`, + ), + ); + }) + .then(done) + .catch(done.fail); + }); + }); + }); +}); diff --git a/spec/frontend/ide/stores/actions/tree_spec.js b/spec/frontend/ide/stores/actions/tree_spec.js new file mode 100644 index 00000000000..44e2fcab436 --- /dev/null +++ b/spec/frontend/ide/stores/actions/tree_spec.js @@ -0,0 +1,218 @@ +import MockAdapter from 'axios-mock-adapter'; +import testAction from 'helpers/vuex_action_helper'; +import { showTreeEntry, getFiles, setDirectoryData } from '~/ide/stores/actions/tree'; +import * as types from '~/ide/stores/mutation_types'; +import axios from '~/lib/utils/axios_utils'; +import { createStore } from '~/ide/stores'; +import service from '~/ide/services'; +import { createRouter } from '~/ide/ide_router'; +import { file, createEntriesFromPaths } from '../../helpers'; + +describe('Multi-file store tree actions', () => { + let projectTree; + let mock; + let store; + let router; + + const basicCallParameters = { + endpoint: 'rootEndpoint', + projectId: 'abcproject', + branch: 'master', + branchId: 'master', + ref: '12345678', + }; + + beforeEach(() => { + store = createStore(); + router = createRouter(store); + jest.spyOn(router, 'push').mockImplementation(); + + mock = new MockAdapter(axios); + + store.state.currentProjectId = 'abcproject'; + store.state.currentBranchId = 'master'; + store.state.projects.abcproject = { + web_url: '', + path_with_namespace: 'foo/abcproject', + }; + }); + + afterEach(() => { + mock.restore(); + }); + + describe('getFiles', () => { + describe('success', () => { + beforeEach(() => { + jest.spyOn(service, 'getFiles'); + + mock + .onGet(/(.*)/) + .replyOnce(200, [ + 'file.txt', + 'folder/fileinfolder.js', + 'folder/subfolder/fileinsubfolder.js', + ]); + }); + + it('calls service getFiles', () => { + return ( + store + .dispatch('getFiles', basicCallParameters) + // getFiles actions calls lodash.defer + .then(() => jest.runOnlyPendingTimers()) + .then(() => { + expect(service.getFiles).toHaveBeenCalledWith('foo/abcproject', '12345678'); + }) + ); + }); + + it('adds data into tree', done => { + store + .dispatch('getFiles', basicCallParameters) + .then(() => { + // The populating of the tree is deferred for performance reasons. + // See this merge request for details: https://gitlab.com/gitlab-org/gitlab-foss/merge_requests/25700 + jest.advanceTimersByTime(1); + }) + .then(() => { + projectTree = store.state.trees['abcproject/master']; + + expect(projectTree.tree.length).toBe(2); + expect(projectTree.tree[0].type).toBe('tree'); + expect(projectTree.tree[0].tree[1].name).toBe('fileinfolder.js'); + expect(projectTree.tree[1].type).toBe('blob'); + expect(projectTree.tree[0].tree[0].tree[0].type).toBe('blob'); + expect(projectTree.tree[0].tree[0].tree[0].name).toBe('fileinsubfolder.js'); + + done(); + }) + .catch(done.fail); + }); + }); + + describe('error', () => { + it('dispatches error action', done => { + const dispatch = jest.fn(); + + store.state.projects = { + 'abc/def': { + web_url: `${gl.TEST_HOST}/files`, + branches: { + 'master-testing': { + commit: { + id: '12345', + }, + }, + }, + }, + }; + const getters = { + findBranch: () => store.state.projects['abc/def'].branches['master-testing'], + }; + + mock.onGet(/(.*)/).replyOnce(500); + + getFiles( + { + commit() {}, + dispatch, + state: store.state, + getters, + }, + { + projectId: 'abc/def', + branchId: 'master-testing', + }, + ) + .then(done.fail) + .catch(() => { + expect(dispatch).toHaveBeenCalledWith('setErrorMessage', { + text: 'An error occurred while loading all the files.', + action: expect.any(Function), + actionText: 'Please try again', + actionPayload: { projectId: 'abc/def', branchId: 'master-testing' }, + }); + done(); + }); + }); + }); + }); + + describe('toggleTreeOpen', () => { + let tree; + + beforeEach(() => { + tree = file('testing', '1', 'tree'); + store.state.entries[tree.path] = tree; + }); + + it('toggles the tree open', done => { + store + .dispatch('toggleTreeOpen', tree.path) + .then(() => { + expect(tree.opened).toBeTruthy(); + + done(); + }) + .catch(done.fail); + }); + }); + + describe('showTreeEntry', () => { + beforeEach(() => { + const paths = [ + 'grandparent', + 'ancestor', + 'grandparent/parent', + 'grandparent/aunt', + 'grandparent/parent/child.txt', + 'grandparent/aunt/cousing.txt', + ]; + + Object.assign(store.state.entries, createEntriesFromPaths(paths)); + }); + + it('opens the parents', done => { + testAction( + showTreeEntry, + 'grandparent/parent/child.txt', + store.state, + [{ type: types.SET_TREE_OPEN, payload: 'grandparent/parent' }], + [{ type: 'showTreeEntry', payload: 'grandparent/parent' }], + done, + ); + }); + }); + + describe('setDirectoryData', () => { + it('sets tree correctly if there are no opened files yet', done => { + const treeFile = file({ name: 'README.md' }); + store.state.trees['abcproject/master'] = {}; + + testAction( + setDirectoryData, + { projectId: 'abcproject', branchId: 'master', treeList: [treeFile] }, + store.state, + [ + { + type: types.SET_DIRECTORY_DATA, + payload: { + treePath: 'abcproject/master', + data: [treeFile], + }, + }, + { + type: types.TOGGLE_LOADING, + payload: { + entry: {}, + forceValue: false, + }, + }, + ], + [], + done, + ); + }); + }); +}); diff --git a/spec/frontend/ide/stores/actions_spec.js b/spec/frontend/ide/stores/actions_spec.js new file mode 100644 index 00000000000..f77dbd80025 --- /dev/null +++ b/spec/frontend/ide/stores/actions_spec.js @@ -0,0 +1,1062 @@ +import MockAdapter from 'axios-mock-adapter'; +import { visitUrl } from '~/lib/utils/url_utility'; +import { createStore } from '~/ide/stores'; +import { createRouter } from '~/ide/ide_router'; +import { + stageAllChanges, + unstageAllChanges, + toggleFileFinder, + setCurrentBranchId, + setEmptyStateSvgs, + updateActivityBarView, + updateTempFlagForEntry, + setErrorMessage, + deleteEntry, + renameEntry, + getBranchData, + createTempEntry, + discardAllChanges, +} from '~/ide/stores/actions'; +import axios from '~/lib/utils/axios_utils'; +import * as types from '~/ide/stores/mutation_types'; +import { file } from '../helpers'; +import testAction from '../../helpers/vuex_action_helper'; +import eventHub from '~/ide/eventhub'; + +jest.mock('~/lib/utils/url_utility', () => ({ + visitUrl: jest.fn(), + joinPaths: jest.requireActual('~/lib/utils/url_utility').joinPaths, +})); + +describe('Multi-file store actions', () => { + let store; + let router; + + beforeEach(() => { + store = createStore(); + router = createRouter(store); + + jest.spyOn(store, 'commit'); + jest.spyOn(store, 'dispatch'); + jest.spyOn(router, 'push').mockImplementation(); + }); + + describe('redirectToUrl', () => { + it('calls visitUrl', done => { + store + .dispatch('redirectToUrl', 'test') + .then(() => { + expect(visitUrl).toHaveBeenCalledWith('test'); + + done(); + }) + .catch(done.fail); + }); + }); + + describe('setInitialData', () => { + it('commits initial data', done => { + store + .dispatch('setInitialData', { canCommit: true }) + .then(() => { + expect(store.state.canCommit).toBeTruthy(); + done(); + }) + .catch(done.fail); + }); + }); + + describe('discardAllChanges', () => { + const paths = ['to_discard', 'another_one_to_discard']; + + beforeEach(() => { + paths.forEach(path => { + const f = file(path); + f.changed = true; + + store.state.openFiles.push(f); + store.state.changedFiles.push(f); + store.state.entries[f.path] = f; + }); + }); + + it('discards all changes in file', () => { + const expectedCalls = paths.map(path => ['restoreOriginalFile', path]); + + discardAllChanges(store); + + expect(store.dispatch.mock.calls).toEqual(expect.arrayContaining(expectedCalls)); + }); + + it('removes all files from changedFiles state', done => { + store + .dispatch('discardAllChanges') + .then(() => { + expect(store.state.changedFiles.length).toBe(0); + expect(store.state.openFiles.length).toBe(2); + }) + .then(done) + .catch(done.fail); + }); + }); + + describe('createTempEntry', () => { + beforeEach(() => { + document.body.innerHTML += '<div class="flash-container"></div>'; + + store.state.currentProjectId = 'abcproject'; + store.state.currentBranchId = 'mybranch'; + + store.state.trees['abcproject/mybranch'] = { + tree: [], + }; + store.state.projects.abcproject = { + web_url: '', + }; + }); + + afterEach(() => { + document.querySelector('.flash-container').remove(); + }); + + describe('tree', () => { + it('creates temp tree', done => { + store + .dispatch('createTempEntry', { + branchId: store.state.currentBranchId, + name: 'test', + type: 'tree', + }) + .then(() => { + const entry = store.state.entries.test; + + expect(entry).not.toBeNull(); + expect(entry.type).toBe('tree'); + + done(); + }) + .catch(done.fail); + }); + + it('creates new folder inside another tree', done => { + const tree = { + type: 'tree', + name: 'testing', + path: 'testing', + tree: [], + }; + + store.state.entries[tree.path] = tree; + + store + .dispatch('createTempEntry', { + branchId: store.state.currentBranchId, + name: 'testing/test', + type: 'tree', + }) + .then(() => { + expect(tree.tree[0].tempFile).toBeTruthy(); + expect(tree.tree[0].name).toBe('test'); + expect(tree.tree[0].type).toBe('tree'); + + done(); + }) + .catch(done.fail); + }); + + it('does not create new tree if already exists', done => { + const tree = { + type: 'tree', + path: 'testing', + tempFile: false, + tree: [], + }; + + store.state.entries[tree.path] = tree; + + store + .dispatch('createTempEntry', { + branchId: store.state.currentBranchId, + name: 'testing', + type: 'tree', + }) + .then(() => { + expect(store.state.entries[tree.path].tempFile).toEqual(false); + expect(document.querySelector('.flash-alert')).not.toBeNull(); + + done(); + }) + .catch(done.fail); + }); + }); + + describe('blob', () => { + it('creates temp file', done => { + const name = 'test'; + + store + .dispatch('createTempEntry', { + name, + branchId: 'mybranch', + type: 'blob', + }) + .then(() => { + const f = store.state.entries[name]; + + expect(f.tempFile).toBeTruthy(); + expect(store.state.trees['abcproject/mybranch'].tree.length).toBe(1); + + done(); + }) + .catch(done.fail); + }); + + it('adds tmp file to open files', done => { + const name = 'test'; + + store + .dispatch('createTempEntry', { + name, + branchId: 'mybranch', + type: 'blob', + }) + .then(() => { + const f = store.state.entries[name]; + + expect(store.state.openFiles.length).toBe(1); + expect(store.state.openFiles[0].name).toBe(f.name); + + done(); + }) + .catch(done.fail); + }); + + it('adds tmp file to staged files', done => { + const name = 'test'; + + store + .dispatch('createTempEntry', { + name, + branchId: 'mybranch', + type: 'blob', + }) + .then(() => { + expect(store.state.stagedFiles).toEqual([expect.objectContaining({ name })]); + + done(); + }) + .catch(done.fail); + }); + + it('sets tmp file as active', () => { + createTempEntry(store, { name: 'test', branchId: 'mybranch', type: 'blob' }); + + expect(store.dispatch).toHaveBeenCalledWith('setFileActive', 'test'); + }); + + it('creates flash message if file already exists', done => { + const f = file('test', '1', 'blob'); + store.state.trees['abcproject/mybranch'].tree = [f]; + store.state.entries[f.path] = f; + + store + .dispatch('createTempEntry', { + name: 'test', + branchId: 'mybranch', + type: 'blob', + }) + .then(() => { + expect(document.querySelector('.flash-alert')?.textContent.trim()).toEqual( + `The name "${f.name}" is already taken in this directory.`, + ); + + done(); + }) + .catch(done.fail); + }); + }); + }); + + describe('scrollToTab', () => { + it('focuses the current active element', done => { + document.body.innerHTML += + '<div id="tabs"><div class="active"><div class="repo-tab"></div></div></div>'; + const el = document.querySelector('.repo-tab'); + jest.spyOn(el, 'focus').mockImplementation(); + + store + .dispatch('scrollToTab') + .then(() => { + setImmediate(() => { + expect(el.focus).toHaveBeenCalled(); + + document.getElementById('tabs').remove(); + + done(); + }); + }) + .catch(done.fail); + }); + }); + + describe('stage/unstageAllChanges', () => { + let file1; + let file2; + + beforeEach(() => { + file1 = { ...file('test'), content: 'changed test', raw: 'test' }; + file2 = { ...file('test2'), content: 'changed test2', raw: 'test2' }; + + store.state.openFiles = [file1]; + store.state.changedFiles = [file1]; + store.state.stagedFiles = [{ ...file2, content: 'staged test' }]; + + store.state.entries = { + [file1.path]: { ...file1 }, + [file2.path]: { ...file2 }, + }; + }); + + describe('stageAllChanges', () => { + it('adds all files from changedFiles to stagedFiles', () => { + stageAllChanges(store); + + expect(store.commit.mock.calls).toEqual( + expect.arrayContaining([ + [types.SET_LAST_COMMIT_MSG, ''], + [types.STAGE_CHANGE, expect.objectContaining({ path: file1.path })], + ]), + ); + }); + + it('opens pending tab if a change exists in that file', () => { + stageAllChanges(store); + + expect(store.dispatch.mock.calls).toEqual([ + [ + 'openPendingTab', + { file: { ...file1, staged: true, changed: true }, keyPrefix: 'staged' }, + ], + ]); + }); + + it('does not open pending tab if no change exists in that file', () => { + store.state.entries[file1.path].content = 'test'; + store.state.stagedFiles = [file1]; + store.state.changedFiles = [store.state.entries[file1.path]]; + + stageAllChanges(store); + + expect(store.dispatch).not.toHaveBeenCalled(); + }); + }); + + describe('unstageAllChanges', () => { + it('removes all files from stagedFiles after unstaging', () => { + unstageAllChanges(store); + + expect(store.commit.mock.calls).toEqual( + expect.arrayContaining([ + [types.UNSTAGE_CHANGE, expect.objectContaining({ path: file2.path })], + ]), + ); + }); + + it('opens pending tab if a change exists in that file', () => { + unstageAllChanges(store); + + expect(store.dispatch.mock.calls).toEqual([ + ['openPendingTab', { file: file1, keyPrefix: 'unstaged' }], + ]); + }); + + it('does not open pending tab if no change exists in that file', () => { + store.state.entries[file1.path].content = 'test'; + store.state.stagedFiles = [file1]; + store.state.changedFiles = [store.state.entries[file1.path]]; + + unstageAllChanges(store); + + expect(store.dispatch).not.toHaveBeenCalled(); + }); + }); + }); + + describe('updateViewer', () => { + it('updates viewer state', done => { + store + .dispatch('updateViewer', 'diff') + .then(() => { + expect(store.state.viewer).toBe('diff'); + }) + .then(done) + .catch(done.fail); + }); + }); + + describe('updateActivityBarView', () => { + it('commits UPDATE_ACTIVITY_BAR_VIEW', done => { + testAction( + updateActivityBarView, + 'test', + {}, + [{ type: 'UPDATE_ACTIVITY_BAR_VIEW', payload: 'test' }], + [], + done, + ); + }); + }); + + describe('setEmptyStateSvgs', () => { + it('commits setEmptyStateSvgs', done => { + testAction( + setEmptyStateSvgs, + 'svg', + {}, + [{ type: 'SET_EMPTY_STATE_SVGS', payload: 'svg' }], + [], + done, + ); + }); + }); + + describe('updateTempFlagForEntry', () => { + it('commits UPDATE_TEMP_FLAG', done => { + const f = { + ...file(), + path: 'test', + tempFile: true, + }; + store.state.entries[f.path] = f; + + testAction( + updateTempFlagForEntry, + { file: f, tempFile: false }, + store.state, + [{ type: 'UPDATE_TEMP_FLAG', payload: { path: f.path, tempFile: false } }], + [], + done, + ); + }); + + it('commits UPDATE_TEMP_FLAG and dispatches for parent', done => { + const parent = { + ...file(), + path: 'testing', + }; + const f = { + ...file(), + path: 'test', + parentPath: 'testing', + }; + store.state.entries[parent.path] = parent; + store.state.entries[f.path] = f; + + testAction( + updateTempFlagForEntry, + { file: f, tempFile: false }, + store.state, + [{ type: 'UPDATE_TEMP_FLAG', payload: { path: f.path, tempFile: false } }], + [{ type: 'updateTempFlagForEntry', payload: { file: parent, tempFile: false } }], + done, + ); + }); + + it('does not dispatch for parent, if parent does not exist', done => { + const f = { + ...file(), + path: 'test', + parentPath: 'testing', + }; + store.state.entries[f.path] = f; + + testAction( + updateTempFlagForEntry, + { file: f, tempFile: false }, + store.state, + [{ type: 'UPDATE_TEMP_FLAG', payload: { path: f.path, tempFile: false } }], + [], + done, + ); + }); + }); + + describe('setCurrentBranchId', () => { + it('commits setCurrentBranchId', done => { + testAction( + setCurrentBranchId, + 'branchId', + {}, + [{ type: 'SET_CURRENT_BRANCH', payload: 'branchId' }], + [], + done, + ); + }); + }); + + describe('toggleFileFinder', () => { + it('commits TOGGLE_FILE_FINDER', done => { + testAction( + toggleFileFinder, + true, + null, + [{ type: 'TOGGLE_FILE_FINDER', payload: true }], + [], + done, + ); + }); + }); + + describe('setErrorMessage', () => { + it('commis error messsage', done => { + testAction( + setErrorMessage, + 'error', + null, + [{ type: types.SET_ERROR_MESSAGE, payload: 'error' }], + [], + done, + ); + }); + }); + + describe('deleteEntry', () => { + it('commits entry deletion', done => { + store.state.entries.path = 'testing'; + + testAction( + deleteEntry, + 'path', + store.state, + [{ type: types.DELETE_ENTRY, payload: 'path' }], + [{ type: 'stageChange', payload: 'path' }, { type: 'triggerFilesChange' }], + done, + ); + }); + + it('does not delete a folder after it is emptied', done => { + const testFolder = { + type: 'tree', + tree: [], + }; + const testEntry = { + path: 'testFolder/entry-to-delete', + parentPath: 'testFolder', + opened: false, + tree: [], + }; + testFolder.tree.push(testEntry); + store.state.entries = { + testFolder, + 'testFolder/entry-to-delete': testEntry, + }; + + testAction( + deleteEntry, + 'testFolder/entry-to-delete', + store.state, + [{ type: types.DELETE_ENTRY, payload: 'testFolder/entry-to-delete' }], + [ + { type: 'stageChange', payload: 'testFolder/entry-to-delete' }, + { type: 'triggerFilesChange' }, + ], + done, + ); + }); + + describe('when renamed', () => { + let testEntry; + + beforeEach(() => { + testEntry = { + path: 'test', + name: 'test', + prevPath: 'test_old', + prevName: 'test_old', + prevParentPath: '', + }; + + store.state.entries = { test: testEntry }; + }); + + describe('and previous does not exist', () => { + it('reverts the rename before deleting', done => { + testAction( + deleteEntry, + testEntry.path, + store.state, + [], + [ + { + type: 'renameEntry', + payload: { + path: testEntry.path, + name: testEntry.prevName, + parentPath: testEntry.prevParentPath, + }, + }, + { + type: 'deleteEntry', + payload: testEntry.prevPath, + }, + ], + done, + ); + }); + }); + + describe('and previous exists', () => { + beforeEach(() => { + const oldEntry = { + path: testEntry.prevPath, + name: testEntry.prevName, + }; + + store.state.entries[oldEntry.path] = oldEntry; + }); + + it('does not revert rename before deleting', done => { + testAction( + deleteEntry, + testEntry.path, + store.state, + [{ type: types.DELETE_ENTRY, payload: testEntry.path }], + [{ type: 'stageChange', payload: testEntry.path }, { type: 'triggerFilesChange' }], + done, + ); + }); + + it('when previous is deleted, it reverts rename before deleting', done => { + store.state.entries[testEntry.prevPath].deleted = true; + + testAction( + deleteEntry, + testEntry.path, + store.state, + [], + [ + { + type: 'renameEntry', + payload: { + path: testEntry.path, + name: testEntry.prevName, + parentPath: testEntry.prevParentPath, + }, + }, + { + type: 'deleteEntry', + payload: testEntry.prevPath, + }, + ], + done, + ); + }); + }); + }); + }); + + describe('renameEntry', () => { + describe('purging of file model cache', () => { + beforeEach(() => { + jest.spyOn(eventHub, '$emit').mockImplementation(); + }); + + it('does not purge model cache for temporary entries that got renamed', done => { + Object.assign(store.state.entries, { + test: { + ...file('test'), + key: 'foo-key', + type: 'blob', + tempFile: true, + }, + }); + + store + .dispatch('renameEntry', { + path: 'test', + name: 'new', + }) + .then(() => { + expect(eventHub.$emit.mock.calls).not.toContain('editor.update.model.dispose.foo-bar'); + }) + .then(done) + .catch(done.fail); + }); + + it('purges model cache for renamed entry', done => { + Object.assign(store.state.entries, { + test: { + ...file('test'), + key: 'foo-key', + type: 'blob', + tempFile: false, + }, + }); + + store + .dispatch('renameEntry', { + path: 'test', + name: 'new', + }) + .then(() => { + expect(eventHub.$emit).toHaveBeenCalled(); + expect(eventHub.$emit).toHaveBeenCalledWith(`editor.update.model.dispose.foo-key`); + }) + .then(done) + .catch(done.fail); + }); + }); + + describe('single entry', () => { + let origEntry; + let renamedEntry; + + beforeEach(() => { + // Need to insert both because `testAction` doesn't actually call the mutation + origEntry = file('orig', 'orig', 'blob'); + renamedEntry = { + ...file('renamed', 'renamed', 'blob'), + prevKey: origEntry.key, + prevName: origEntry.name, + prevPath: origEntry.path, + }; + + Object.assign(store.state.entries, { + orig: origEntry, + renamed: renamedEntry, + }); + }); + + it('by default renames an entry and stages it', () => { + const dispatch = jest.fn(); + const commit = jest.fn(); + + renameEntry( + { dispatch, commit, state: store.state, getters: store.getters }, + { path: 'orig', name: 'renamed' }, + ); + + expect(commit.mock.calls).toEqual([ + [types.RENAME_ENTRY, { path: 'orig', name: 'renamed', parentPath: undefined }], + [types.STAGE_CHANGE, expect.objectContaining({ path: 'renamed' })], + ]); + }); + + it('if not changed, completely unstages and discards entry if renamed to original', done => { + testAction( + renameEntry, + { path: 'renamed', name: 'orig' }, + store.state, + [ + { + type: types.RENAME_ENTRY, + payload: { + path: 'renamed', + name: 'orig', + parentPath: undefined, + }, + }, + { + type: types.REMOVE_FILE_FROM_STAGED_AND_CHANGED, + payload: origEntry, + }, + ], + [{ type: 'triggerFilesChange' }], + done, + ); + }); + + it('if already in changed, does not add to change', done => { + store.state.changedFiles.push(renamedEntry); + + testAction( + renameEntry, + { path: 'orig', name: 'renamed' }, + store.state, + [expect.objectContaining({ type: types.RENAME_ENTRY })], + [{ type: 'triggerFilesChange' }], + done, + ); + }); + + it('routes to the renamed file if the original file has been opened', done => { + Object.assign(store.state.entries.orig, { + opened: true, + url: '/foo-bar.md', + }); + + store + .dispatch('renameEntry', { + path: 'orig', + name: 'renamed', + }) + .then(() => { + expect(router.push.mock.calls).toHaveLength(1); + expect(router.push).toHaveBeenCalledWith(`/project/foo-bar.md`); + }) + .then(done) + .catch(done.fail); + }); + }); + + describe('folder', () => { + let folder; + let file1; + let file2; + + beforeEach(() => { + folder = file('folder', 'folder', 'tree'); + file1 = file('file-1', 'file-1', 'blob', folder); + file2 = file('file-2', 'file-2', 'blob', folder); + + folder.tree = [file1, file2]; + + Object.assign(store.state.entries, { + [folder.path]: folder, + [file1.path]: file1, + [file2.path]: file2, + }); + }); + + it('updates entries in a folder correctly, when folder is renamed', done => { + store + .dispatch('renameEntry', { + path: 'folder', + name: 'new-folder', + }) + .then(() => { + const keys = Object.keys(store.state.entries); + + expect(keys.length).toBe(3); + expect(keys.indexOf('new-folder')).toBe(0); + expect(keys.indexOf('new-folder/file-1')).toBe(1); + expect(keys.indexOf('new-folder/file-2')).toBe(2); + }) + .then(done) + .catch(done.fail); + }); + + it('discards renaming of an entry if the root folder is renamed back to a previous name', done => { + const rootFolder = file('old-folder', 'old-folder', 'tree'); + const testEntry = file('test', 'test', 'blob', rootFolder); + + Object.assign(store.state, { + entries: { + 'old-folder': { + ...rootFolder, + tree: [testEntry], + }, + 'old-folder/test': testEntry, + }, + }); + + store + .dispatch('renameEntry', { + path: 'old-folder', + name: 'new-folder', + }) + .then(() => { + const { entries } = store.state; + + expect(Object.keys(entries).length).toBe(2); + expect(entries['old-folder']).toBeUndefined(); + expect(entries['old-folder/test']).toBeUndefined(); + + expect(entries['new-folder']).toBeDefined(); + expect(entries['new-folder/test']).toEqual( + expect.objectContaining({ + path: 'new-folder/test', + name: 'test', + prevPath: 'old-folder/test', + prevName: 'test', + }), + ); + }) + .then(() => + store.dispatch('renameEntry', { + path: 'new-folder', + name: 'old-folder', + }), + ) + .then(() => { + const { entries } = store.state; + + expect(Object.keys(entries).length).toBe(2); + expect(entries['new-folder']).toBeUndefined(); + expect(entries['new-folder/test']).toBeUndefined(); + + expect(entries['old-folder']).toBeDefined(); + expect(entries['old-folder/test']).toEqual( + expect.objectContaining({ + path: 'old-folder/test', + name: 'test', + prevPath: undefined, + prevName: undefined, + }), + ); + }) + .then(done) + .catch(done.fail); + }); + + describe('with file in directory', () => { + const parentPath = 'original-dir'; + const newParentPath = 'new-dir'; + const fileName = 'test.md'; + const filePath = `${parentPath}/${fileName}`; + + let rootDir; + + beforeEach(() => { + const parentEntry = file(parentPath, parentPath, 'tree'); + const fileEntry = file(filePath, filePath, 'blob', parentEntry); + rootDir = { + tree: [], + }; + + Object.assign(store.state, { + entries: { + [parentPath]: { + ...parentEntry, + tree: [fileEntry], + }, + [filePath]: fileEntry, + }, + trees: { + '/': rootDir, + }, + }); + }); + + it('creates new directory', done => { + expect(store.state.entries[newParentPath]).toBeUndefined(); + + store + .dispatch('renameEntry', { path: filePath, name: fileName, parentPath: newParentPath }) + .then(() => { + expect(store.state.entries[newParentPath]).toEqual( + expect.objectContaining({ + path: newParentPath, + type: 'tree', + tree: expect.arrayContaining([ + store.state.entries[`${newParentPath}/${fileName}`], + ]), + }), + ); + }) + .then(done) + .catch(done.fail); + }); + + describe('when new directory exists', () => { + let newDir; + + beforeEach(() => { + newDir = file(newParentPath, newParentPath, 'tree'); + + store.state.entries[newDir.path] = newDir; + rootDir.tree.push(newDir); + }); + + it('inserts in new directory', done => { + expect(newDir.tree).toEqual([]); + + store + .dispatch('renameEntry', { + path: filePath, + name: fileName, + parentPath: newParentPath, + }) + .then(() => { + expect(newDir.tree).toEqual([store.state.entries[`${newParentPath}/${fileName}`]]); + }) + .then(done) + .catch(done.fail); + }); + + it('when new directory is deleted, it undeletes it', done => { + store.dispatch('deleteEntry', newParentPath); + + expect(store.state.entries[newParentPath].deleted).toBe(true); + expect(rootDir.tree.some(x => x.path === newParentPath)).toBe(false); + + store + .dispatch('renameEntry', { + path: filePath, + name: fileName, + parentPath: newParentPath, + }) + .then(() => { + expect(store.state.entries[newParentPath].deleted).toBe(false); + expect(rootDir.tree.some(x => x.path === newParentPath)).toBe(true); + }) + .then(done) + .catch(done.fail); + }); + }); + }); + }); + }); + + describe('getBranchData', () => { + let mock; + + beforeEach(() => { + mock = new MockAdapter(axios); + }); + + afterEach(() => { + mock.restore(); + }); + + describe('error', () => { + let dispatch; + let callParams; + + beforeEach(() => { + callParams = [ + { + commit() {}, + state: store.state, + }, + { + projectId: 'abc/def', + branchId: 'master-testing', + }, + ]; + dispatch = jest.fn(); + document.body.innerHTML += '<div class="flash-container"></div>'; + }); + + afterEach(() => { + document.querySelector('.flash-container').remove(); + }); + + it('passes the error further unchanged without dispatching any action when response is 404', done => { + mock.onGet(/(.*)/).replyOnce(404); + + getBranchData(...callParams) + .then(done.fail) + .catch(e => { + expect(dispatch.mock.calls).toHaveLength(0); + expect(e.response.status).toEqual(404); + expect(document.querySelector('.flash-alert')).toBeNull(); + done(); + }); + }); + + it('does not pass the error further and flashes an alert if error is not 404', done => { + mock.onGet(/(.*)/).replyOnce(418); + + getBranchData(...callParams) + .then(done.fail) + .catch(e => { + expect(dispatch.mock.calls).toHaveLength(0); + expect(e.response).toBeUndefined(); + expect(document.querySelector('.flash-alert')).not.toBeNull(); + done(); + }); + }); + }); + }); +}); diff --git a/spec/frontend/ide/stores/extend_spec.js b/spec/frontend/ide/stores/extend_spec.js new file mode 100644 index 00000000000..b0f1063153e --- /dev/null +++ b/spec/frontend/ide/stores/extend_spec.js @@ -0,0 +1,74 @@ +import extendStore from '~/ide/stores/extend'; +import terminalPlugin from '~/ide/stores/plugins/terminal'; +import terminalSyncPlugin from '~/ide/stores/plugins/terminal_sync'; + +jest.mock('~/ide/stores/plugins/terminal', () => jest.fn()); +jest.mock('~/ide/stores/plugins/terminal_sync', () => jest.fn()); + +describe('ide/stores/extend', () => { + let prevGon; + let store; + let el; + + beforeEach(() => { + prevGon = global.gon; + store = {}; + el = {}; + + [terminalPlugin, terminalSyncPlugin].forEach(x => { + const plugin = jest.fn(); + + x.mockImplementation(() => plugin); + }); + }); + + afterEach(() => { + global.gon = prevGon; + terminalPlugin.mockClear(); + terminalSyncPlugin.mockClear(); + }); + + const withGonFeatures = features => { + global.gon = { ...global.gon, features }; + }; + + describe('terminalPlugin', () => { + beforeEach(() => { + extendStore(store, el); + }); + + it('is created', () => { + expect(terminalPlugin).toHaveBeenCalledWith(el); + }); + + it('is called with store', () => { + expect(terminalPlugin()).toHaveBeenCalledWith(store); + }); + }); + + describe('terminalSyncPlugin', () => { + describe('when buildServiceProxy feature is enabled', () => { + beforeEach(() => { + withGonFeatures({ buildServiceProxy: true }); + + extendStore(store, el); + }); + + it('is created', () => { + expect(terminalSyncPlugin).toHaveBeenCalledWith(el); + }); + + it('is called with store', () => { + expect(terminalSyncPlugin()).toHaveBeenCalledWith(store); + }); + }); + + describe('when buildServiceProxy feature is disabled', () => { + it('is not created', () => { + extendStore(store, el); + + expect(terminalSyncPlugin).not.toHaveBeenCalled(); + }); + }); + }); +}); diff --git a/spec/frontend/ide/stores/getters_spec.js b/spec/frontend/ide/stores/getters_spec.js index 408ea2b2939..dcf05329ce0 100644 --- a/spec/frontend/ide/stores/getters_spec.js +++ b/spec/frontend/ide/stores/getters_spec.js @@ -417,4 +417,69 @@ describe('IDE store getters', () => { expect(localStore.getters[getterName]).toBe(val); }); }); + + describe('entryExists', () => { + beforeEach(() => { + localState.entries = { + foo: file('foo', 'foo', 'tree'), + 'foo/bar.png': file(), + }; + }); + + it.each` + path | deleted | value + ${'foo/bar.png'} | ${false} | ${true} + ${'foo/bar.png'} | ${true} | ${false} + ${'foo'} | ${false} | ${true} + `( + 'returns $value for an existing entry path: $path (deleted: $deleted)', + ({ path, deleted, value }) => { + localState.entries[path].deleted = deleted; + + expect(localStore.getters.entryExists(path)).toBe(value); + }, + ); + + it('returns false for a non existing entry path', () => { + expect(localStore.getters.entryExists('bar.baz')).toBe(false); + }); + }); + + describe('getAvailableFileName', () => { + it.each` + path | newPath + ${'foo'} | ${'foo_1'} + ${'foo__93.png'} | ${'foo__94.png'} + ${'foo/bar.png'} | ${'foo/bar_1.png'} + ${'foo/bar--34.png'} | ${'foo/bar--35.png'} + ${'foo/bar 2.png'} | ${'foo/bar 3.png'} + ${'foo/bar-621.png'} | ${'foo/bar-622.png'} + ${'jquery.min.js'} | ${'jquery_1.min.js'} + ${'my_spec_22.js.snap'} | ${'my_spec_23.js.snap'} + ${'subtitles5.mp4.srt'} | ${'subtitles_6.mp4.srt'} + ${'sample_file.mp3'} | ${'sample_file_1.mp3'} + ${'Screenshot 2020-05-26 at 10.53.08 PM.png'} | ${'Screenshot 2020-05-26 at 11.53.08 PM.png'} + `('suffixes the path with a number if the path already exists', ({ path, newPath }) => { + localState.entries[path] = file(); + + expect(localStore.getters.getAvailableFileName(path)).toBe(newPath); + }); + + it('loops through all incremented entries and keeps trying until a file path that does not exist is found', () => { + localState.entries = { + 'bar/baz_1.png': file(), + 'bar/baz_2.png': file(), + 'bar/baz_3.png': file(), + 'bar/baz_4.png': file(), + 'bar/baz_5.png': file(), + 'bar/baz_72.png': file(), + }; + + expect(localStore.getters.getAvailableFileName('bar/baz_1.png')).toBe('bar/baz_6.png'); + }); + + it('returns the entry path as is if the path does not exist', () => { + expect(localStore.getters.getAvailableFileName('foo-bar1.jpg')).toBe('foo-bar1.jpg'); + }); + }); }); diff --git a/spec/frontend/ide/stores/modules/commit/actions_spec.js b/spec/frontend/ide/stores/modules/commit/actions_spec.js new file mode 100644 index 00000000000..a14879112fd --- /dev/null +++ b/spec/frontend/ide/stores/modules/commit/actions_spec.js @@ -0,0 +1,598 @@ +import { file } from 'jest/ide/helpers'; +import axios from 'axios'; +import MockAdapter from 'axios-mock-adapter'; +import { visitUrl } from '~/lib/utils/url_utility'; +import { createStore } from '~/ide/stores'; +import service from '~/ide/services'; +import { createRouter } from '~/ide/ide_router'; +import eventHub from '~/ide/eventhub'; +import consts from '~/ide/stores/modules/commit/constants'; +import * as mutationTypes from '~/ide/stores/modules/commit/mutation_types'; +import * as actions from '~/ide/stores/modules/commit/actions'; +import { commitActionTypes, PERMISSION_CREATE_MR } from '~/ide/constants'; +import testAction from '../../../../helpers/vuex_action_helper'; + +jest.mock('~/lib/utils/url_utility', () => ({ + ...jest.requireActual('~/lib/utils/url_utility'), + visitUrl: jest.fn(), +})); + +const TEST_COMMIT_SHA = '123456789'; + +describe('IDE commit module actions', () => { + let mock; + let store; + let router; + + beforeEach(() => { + store = createStore(); + router = createRouter(store); + gon.api_version = 'v1'; + mock = new MockAdapter(axios); + jest.spyOn(router, 'push').mockImplementation(); + + mock.onGet('/api/v1/projects/abcproject/repository/branches/master').reply(200); + }); + + afterEach(() => { + delete gon.api_version; + mock.restore(); + }); + + describe('updateCommitMessage', () => { + it('updates store with new commit message', done => { + store + .dispatch('commit/updateCommitMessage', 'testing') + .then(() => { + expect(store.state.commit.commitMessage).toBe('testing'); + }) + .then(done) + .catch(done.fail); + }); + }); + + describe('discardDraft', () => { + it('resets commit message to blank', done => { + store.state.commit.commitMessage = 'testing'; + + store + .dispatch('commit/discardDraft') + .then(() => { + expect(store.state.commit.commitMessage).not.toBe('testing'); + }) + .then(done) + .catch(done.fail); + }); + }); + + describe('updateCommitAction', () => { + it('updates store with new commit action', done => { + store + .dispatch('commit/updateCommitAction', '1') + .then(() => { + expect(store.state.commit.commitAction).toBe('1'); + }) + .then(done) + .catch(done.fail); + }); + + it('sets shouldCreateMR to true if "Create new MR" option is visible', done => { + Object.assign(store.state, { + shouldHideNewMrOption: false, + }); + + testAction( + actions.updateCommitAction, + {}, + store.state, + [ + { + type: mutationTypes.UPDATE_COMMIT_ACTION, + payload: { commitAction: expect.anything() }, + }, + { type: mutationTypes.TOGGLE_SHOULD_CREATE_MR, payload: true }, + ], + [], + done, + ); + }); + + it('sets shouldCreateMR to false if "Create new MR" option is hidden', done => { + Object.assign(store.state, { + shouldHideNewMrOption: true, + }); + + testAction( + actions.updateCommitAction, + {}, + store.state, + [ + { + type: mutationTypes.UPDATE_COMMIT_ACTION, + payload: { commitAction: expect.anything() }, + }, + { type: mutationTypes.TOGGLE_SHOULD_CREATE_MR, payload: false }, + ], + [], + done, + ); + }); + }); + + describe('updateBranchName', () => { + it('updates store with new branch name', done => { + store + .dispatch('commit/updateBranchName', 'branch-name') + .then(() => { + expect(store.state.commit.newBranchName).toBe('branch-name'); + }) + .then(done) + .catch(done.fail); + }); + }); + + describe('setLastCommitMessage', () => { + beforeEach(() => { + Object.assign(store.state, { + currentProjectId: 'abcproject', + projects: { + abcproject: { + web_url: 'http://testing', + }, + }, + }); + }); + + it('updates commit message with short_id', done => { + store + .dispatch('commit/setLastCommitMessage', { short_id: '123' }) + .then(() => { + expect(store.state.lastCommitMsg).toContain( + 'Your changes have been committed. Commit <a href="http://testing/-/commit/123" class="commit-sha">123</a>', + ); + }) + .then(done) + .catch(done.fail); + }); + + it('updates commit message with stats', done => { + store + .dispatch('commit/setLastCommitMessage', { + short_id: '123', + stats: { + additions: '1', + deletions: '2', + }, + }) + .then(() => { + expect(store.state.lastCommitMsg).toBe( + 'Your changes have been committed. Commit <a href="http://testing/-/commit/123" class="commit-sha">123</a> with 1 additions, 2 deletions.', + ); + }) + .then(done) + .catch(done.fail); + }); + }); + + describe('updateFilesAfterCommit', () => { + const data = { + id: '123', + message: 'testing commit message', + committed_date: '123', + committer_name: 'root', + }; + const branch = 'master'; + let f; + + beforeEach(() => { + jest.spyOn(eventHub, '$emit').mockImplementation(); + + f = file('changedFile'); + Object.assign(f, { + active: true, + changed: true, + content: 'file content', + }); + + Object.assign(store.state, { + currentProjectId: 'abcproject', + currentBranchId: 'master', + projects: { + abcproject: { + web_url: 'web_url', + branches: { + master: { + workingReference: '', + commit: { + short_id: TEST_COMMIT_SHA, + }, + }, + }, + }, + }, + stagedFiles: [ + f, + { + ...file('changedFile2'), + changed: true, + }, + ], + }); + + store.state.openFiles = store.state.stagedFiles; + store.state.stagedFiles.forEach(stagedFile => { + store.state.entries[stagedFile.path] = stagedFile; + }); + }); + + it('updates stores working reference', done => { + store + .dispatch('commit/updateFilesAfterCommit', { + data, + branch, + }) + .then(() => { + expect(store.state.projects.abcproject.branches.master.workingReference).toBe(data.id); + }) + .then(done) + .catch(done.fail); + }); + + it('resets all files changed status', done => { + store + .dispatch('commit/updateFilesAfterCommit', { + data, + branch, + }) + .then(() => { + store.state.openFiles.forEach(entry => { + expect(entry.changed).toBeFalsy(); + }); + }) + .then(done) + .catch(done.fail); + }); + + it('sets files commit data', done => { + store + .dispatch('commit/updateFilesAfterCommit', { + data, + branch, + }) + .then(() => { + expect(f.lastCommitSha).toBe(data.id); + }) + .then(done) + .catch(done.fail); + }); + + it('updates raw content for changed file', done => { + store + .dispatch('commit/updateFilesAfterCommit', { + data, + branch, + }) + .then(() => { + expect(f.raw).toBe(f.content); + }) + .then(done) + .catch(done.fail); + }); + + it('emits changed event for file', done => { + store + .dispatch('commit/updateFilesAfterCommit', { + data, + branch, + }) + .then(() => { + expect(eventHub.$emit).toHaveBeenCalledWith(`editor.update.model.content.${f.key}`, { + content: f.content, + changed: false, + }); + }) + .then(done) + .catch(done.fail); + }); + }); + + describe('commitChanges', () => { + beforeEach(() => { + document.body.innerHTML += '<div class="flash-container"></div>'; + + const f = { + ...file('changed'), + type: 'blob', + active: true, + lastCommitSha: TEST_COMMIT_SHA, + content: '\n', + raw: '\n', + }; + + Object.assign(store.state, { + stagedFiles: [f], + changedFiles: [f], + openFiles: [f], + currentProjectId: 'abcproject', + currentBranchId: 'master', + projects: { + abcproject: { + web_url: 'webUrl', + branches: { + master: { + workingReference: '1', + commit: { + id: TEST_COMMIT_SHA, + }, + }, + }, + userPermissions: { + [PERMISSION_CREATE_MR]: true, + }, + }, + }, + }); + + store.state.commit.commitAction = '2'; + store.state.commit.commitMessage = 'testing 123'; + + store.state.openFiles.forEach(localF => { + store.state.entries[localF.path] = localF; + }); + }); + + afterEach(() => { + document.querySelector('.flash-container').remove(); + }); + + describe('success', () => { + const COMMIT_RESPONSE = { + id: '123456', + short_id: '123', + message: 'test message', + committed_date: 'date', + parent_ids: '321', + stats: { + additions: '1', + deletions: '2', + }, + }; + + beforeEach(() => { + jest.spyOn(service, 'commit').mockResolvedValue({ data: COMMIT_RESPONSE }); + }); + + it('calls service', done => { + store + .dispatch('commit/commitChanges') + .then(() => { + expect(service.commit).toHaveBeenCalledWith('abcproject', { + branch: expect.anything(), + commit_message: 'testing 123', + actions: [ + { + action: commitActionTypes.update, + file_path: expect.anything(), + content: '\n', + encoding: expect.anything(), + last_commit_id: undefined, + previous_path: undefined, + }, + ], + start_sha: TEST_COMMIT_SHA, + }); + + done(); + }) + .catch(done.fail); + }); + + it('sends lastCommit ID when not creating new branch', done => { + store.state.commit.commitAction = '1'; + + store + .dispatch('commit/commitChanges') + .then(() => { + expect(service.commit).toHaveBeenCalledWith('abcproject', { + branch: expect.anything(), + commit_message: 'testing 123', + actions: [ + { + action: commitActionTypes.update, + file_path: expect.anything(), + content: '\n', + encoding: expect.anything(), + last_commit_id: TEST_COMMIT_SHA, + previous_path: undefined, + }, + ], + start_sha: undefined, + }); + + done(); + }) + .catch(done.fail); + }); + + it('sets last Commit Msg', done => { + store + .dispatch('commit/commitChanges') + .then(() => { + expect(store.state.lastCommitMsg).toBe( + 'Your changes have been committed. Commit <a href="webUrl/-/commit/123" class="commit-sha">123</a> with 1 additions, 2 deletions.', + ); + + done(); + }) + .catch(done.fail); + }); + + it('adds commit data to files', done => { + store + .dispatch('commit/commitChanges') + .then(() => { + expect(store.state.entries[store.state.openFiles[0].path].lastCommitSha).toBe( + COMMIT_RESPONSE.id, + ); + + done(); + }) + .catch(done.fail); + }); + + it('resets stores commit actions', done => { + store.state.commit.commitAction = consts.COMMIT_TO_NEW_BRANCH; + + store + .dispatch('commit/commitChanges') + .then(() => { + expect(store.state.commit.commitAction).not.toBe(consts.COMMIT_TO_NEW_BRANCH); + }) + .then(done) + .catch(done.fail); + }); + + it('removes all staged files', done => { + store + .dispatch('commit/commitChanges') + .then(() => { + expect(store.state.stagedFiles.length).toBe(0); + }) + .then(done) + .catch(done.fail); + }); + + describe('merge request', () => { + it('redirects to new merge request page', done => { + jest.spyOn(eventHub, '$on').mockImplementation(); + + store.state.commit.commitAction = consts.COMMIT_TO_NEW_BRANCH; + store.state.commit.shouldCreateMR = true; + + store + .dispatch('commit/commitChanges') + .then(() => { + expect(visitUrl).toHaveBeenCalledWith( + `webUrl/-/merge_requests/new?merge_request[source_branch]=${ + store.getters['commit/placeholderBranchName'] + }&merge_request[target_branch]=master&nav_source=webide`, + ); + + done(); + }) + .catch(done.fail); + }); + + it('does not redirect to new merge request page when shouldCreateMR is not checked', done => { + jest.spyOn(eventHub, '$on').mockImplementation(); + + store.state.commit.commitAction = consts.COMMIT_TO_NEW_BRANCH; + store.state.commit.shouldCreateMR = false; + + store + .dispatch('commit/commitChanges') + .then(() => { + expect(visitUrl).not.toHaveBeenCalled(); + done(); + }) + .catch(done.fail); + }); + + it('resets changed files before redirecting', () => { + jest.spyOn(eventHub, '$on').mockImplementation(); + + store.state.commit.commitAction = '3'; + + return store.dispatch('commit/commitChanges').then(() => { + expect(store.state.stagedFiles.length).toBe(0); + }); + }); + }); + }); + + describe('failed', () => { + beforeEach(() => { + jest.spyOn(service, 'commit').mockResolvedValue({ + data: { + message: 'failed message', + }, + }); + }); + + it('shows failed message', done => { + store + .dispatch('commit/commitChanges') + .then(() => { + const alert = document.querySelector('.flash-container'); + + expect(alert.textContent.trim()).toBe('failed message'); + + done(); + }) + .catch(done.fail); + }); + }); + + describe('first commit of a branch', () => { + const COMMIT_RESPONSE = { + id: '123456', + short_id: '123', + message: 'test message', + committed_date: 'date', + parent_ids: [], + stats: { + additions: '1', + deletions: '2', + }, + }; + + it('commits TOGGLE_EMPTY_STATE mutation on empty repo', done => { + jest.spyOn(service, 'commit').mockResolvedValue({ data: COMMIT_RESPONSE }); + jest.spyOn(store, 'commit'); + + store + .dispatch('commit/commitChanges') + .then(() => { + expect(store.commit.mock.calls).toEqual( + expect.arrayContaining([ + ['TOGGLE_EMPTY_STATE', expect.any(Object), expect.any(Object)], + ]), + ); + done(); + }) + .catch(done.fail); + }); + + it('does not commmit TOGGLE_EMPTY_STATE mutation on existing project', done => { + COMMIT_RESPONSE.parent_ids.push('1234'); + jest.spyOn(service, 'commit').mockResolvedValue({ data: COMMIT_RESPONSE }); + jest.spyOn(store, 'commit'); + + store + .dispatch('commit/commitChanges') + .then(() => { + expect(store.commit.mock.calls).not.toEqual( + expect.arrayContaining([ + ['TOGGLE_EMPTY_STATE', expect.any(Object), expect.any(Object)], + ]), + ); + done(); + }) + .catch(done.fail); + }); + }); + }); + + describe('toggleShouldCreateMR', () => { + it('commits both toggle and interacting with MR checkbox actions', done => { + testAction( + actions.toggleShouldCreateMR, + {}, + store.state, + [{ type: mutationTypes.TOGGLE_SHOULD_CREATE_MR }], + [], + done, + ); + }); + }); +}); diff --git a/spec/frontend/ide/stores/modules/pane/getters_spec.js b/spec/frontend/ide/stores/modules/pane/getters_spec.js index 8a213323de0..a321571f058 100644 --- a/spec/frontend/ide/stores/modules/pane/getters_spec.js +++ b/spec/frontend/ide/stores/modules/pane/getters_spec.js @@ -7,20 +7,6 @@ describe('IDE pane module getters', () => { [TEST_VIEW]: true, }; - describe('isActiveView', () => { - it('returns true if given view matches currentView', () => { - const result = getters.isActiveView({ currentView: 'A' })('A'); - - expect(result).toBe(true); - }); - - it('returns false if given view does not match currentView', () => { - const result = getters.isActiveView({ currentView: 'A' })('B'); - - expect(result).toBe(false); - }); - }); - describe('isAliveView', () => { it('returns true if given view is in keepAliveViews', () => { const result = getters.isAliveView({ keepAliveViews: TEST_KEEP_ALIVE_VIEWS }, {})(TEST_VIEW); @@ -29,25 +15,25 @@ describe('IDE pane module getters', () => { }); it('returns true if given view is active view and open', () => { - const result = getters.isAliveView( - { ...state(), isOpen: true }, - { isActiveView: () => true }, - )(TEST_VIEW); + const result = getters.isAliveView({ ...state(), isOpen: true, currentView: TEST_VIEW })( + TEST_VIEW, + ); expect(result).toBe(true); }); it('returns false if given view is active view and closed', () => { - const result = getters.isAliveView(state(), { isActiveView: () => true })(TEST_VIEW); + const result = getters.isAliveView({ ...state(), currentView: TEST_VIEW })(TEST_VIEW); expect(result).toBe(false); }); it('returns false if given view is not activeView', () => { - const result = getters.isAliveView( - { ...state(), isOpen: true }, - { isActiveView: () => false }, - )(TEST_VIEW); + const result = getters.isAliveView({ + ...state(), + isOpen: true, + currentView: `${TEST_VIEW}_other`, + })(TEST_VIEW); expect(result).toBe(false); }); diff --git a/spec/frontend/ide/stores/modules/router/actions_spec.js b/spec/frontend/ide/stores/modules/router/actions_spec.js new file mode 100644 index 00000000000..4795eae2b79 --- /dev/null +++ b/spec/frontend/ide/stores/modules/router/actions_spec.js @@ -0,0 +1,19 @@ +import * as actions from '~/ide/stores/modules/router/actions'; +import * as types from '~/ide/stores/modules/router/mutation_types'; +import testAction from 'helpers/vuex_action_helper'; + +const TEST_PATH = 'test/path/abc'; + +describe('ide/stores/modules/router/actions', () => { + describe('push', () => { + it('commits mutation', () => { + return testAction( + actions.push, + TEST_PATH, + {}, + [{ type: types.PUSH, payload: TEST_PATH }], + [], + ); + }); + }); +}); diff --git a/spec/frontend/ide/stores/modules/router/mutations_spec.js b/spec/frontend/ide/stores/modules/router/mutations_spec.js new file mode 100644 index 00000000000..a4a83c9344d --- /dev/null +++ b/spec/frontend/ide/stores/modules/router/mutations_spec.js @@ -0,0 +1,23 @@ +import mutations from '~/ide/stores/modules/router/mutations'; +import * as types from '~/ide/stores/modules/router/mutation_types'; +import createState from '~/ide/stores/modules/router/state'; + +const TEST_PATH = 'test/path/abc'; + +describe('ide/stores/modules/router/mutations', () => { + let state; + + beforeEach(() => { + state = createState(); + }); + + describe(types.PUSH, () => { + it('updates state', () => { + expect(state.fullPath).toBe(''); + + mutations[types.PUSH](state, TEST_PATH); + + expect(state.fullPath).toBe(TEST_PATH); + }); + }); +}); diff --git a/spec/frontend/ide/stores/modules/terminal/actions/checks_spec.js b/spec/frontend/ide/stores/modules/terminal/actions/checks_spec.js new file mode 100644 index 00000000000..242b1579be7 --- /dev/null +++ b/spec/frontend/ide/stores/modules/terminal/actions/checks_spec.js @@ -0,0 +1,289 @@ +import MockAdapter from 'axios-mock-adapter'; +import testAction from 'helpers/vuex_action_helper'; +import { TEST_HOST } from 'spec/test_constants'; +import { + CHECK_CONFIG, + CHECK_RUNNERS, + RETRY_RUNNERS_INTERVAL, +} from '~/ide/stores/modules/terminal/constants'; +import * as mutationTypes from '~/ide/stores/modules/terminal/mutation_types'; +import * as messages from '~/ide/stores/modules/terminal/messages'; +import * as actions from '~/ide/stores/modules/terminal/actions/checks'; +import axios from '~/lib/utils/axios_utils'; +import httpStatus from '~/lib/utils/http_status'; + +const TEST_PROJECT_PATH = 'lorem/root'; +const TEST_BRANCH_ID = 'master'; +const TEST_YAML_HELP_PATH = `${TEST_HOST}/test/yaml/help`; +const TEST_RUNNERS_HELP_PATH = `${TEST_HOST}/test/runners/help`; + +describe('IDE store terminal check actions', () => { + let mock; + let state; + let rootState; + let rootGetters; + + beforeEach(() => { + mock = new MockAdapter(axios); + state = { + paths: { + webTerminalConfigHelpPath: TEST_YAML_HELP_PATH, + webTerminalRunnersHelpPath: TEST_RUNNERS_HELP_PATH, + }, + checks: { + config: { isLoading: true }, + }, + }; + rootState = { + currentBranchId: TEST_BRANCH_ID, + }; + rootGetters = { + currentProject: { + id: 7, + path_with_namespace: TEST_PROJECT_PATH, + }, + }; + }); + + afterEach(() => { + mock.restore(); + }); + + describe('requestConfigCheck', () => { + it('handles request loading', () => { + return testAction( + actions.requestConfigCheck, + null, + {}, + [{ type: mutationTypes.REQUEST_CHECK, payload: CHECK_CONFIG }], + [], + ); + }); + }); + + describe('receiveConfigCheckSuccess', () => { + it('handles successful response', () => { + return testAction( + actions.receiveConfigCheckSuccess, + null, + {}, + [ + { type: mutationTypes.SET_VISIBLE, payload: true }, + { type: mutationTypes.RECEIVE_CHECK_SUCCESS, payload: CHECK_CONFIG }, + ], + [], + ); + }); + }); + + describe('receiveConfigCheckError', () => { + it('handles error response', () => { + const status = httpStatus.UNPROCESSABLE_ENTITY; + const payload = { response: { status } }; + + return testAction( + actions.receiveConfigCheckError, + payload, + state, + [ + { + type: mutationTypes.SET_VISIBLE, + payload: true, + }, + { + type: mutationTypes.RECEIVE_CHECK_ERROR, + payload: { + type: CHECK_CONFIG, + message: messages.configCheckError(status, TEST_YAML_HELP_PATH), + }, + }, + ], + [], + ); + }); + + [httpStatus.FORBIDDEN, httpStatus.NOT_FOUND].forEach(status => { + it(`hides tab, when status is ${status}`, () => { + const payload = { response: { status } }; + + return testAction( + actions.receiveConfigCheckError, + payload, + state, + [ + { + type: mutationTypes.SET_VISIBLE, + payload: false, + }, + expect.objectContaining({ type: mutationTypes.RECEIVE_CHECK_ERROR }), + ], + [], + ); + }); + }); + }); + + describe('fetchConfigCheck', () => { + it('dispatches request and receive', () => { + mock.onPost(/.*\/ide_terminals\/check_config/).reply(200, {}); + + return testAction( + actions.fetchConfigCheck, + null, + { + ...rootGetters, + ...rootState, + }, + [], + [{ type: 'requestConfigCheck' }, { type: 'receiveConfigCheckSuccess' }], + ); + }); + + it('when error, dispatches request and receive', () => { + mock.onPost(/.*\/ide_terminals\/check_config/).reply(400, {}); + + return testAction( + actions.fetchConfigCheck, + null, + { + ...rootGetters, + ...rootState, + }, + [], + [ + { type: 'requestConfigCheck' }, + { type: 'receiveConfigCheckError', payload: expect.any(Error) }, + ], + ); + }); + }); + + describe('requestRunnersCheck', () => { + it('handles request loading', () => { + return testAction( + actions.requestRunnersCheck, + null, + {}, + [{ type: mutationTypes.REQUEST_CHECK, payload: CHECK_RUNNERS }], + [], + ); + }); + }); + + describe('receiveRunnersCheckSuccess', () => { + it('handles successful response, with data', () => { + const payload = [{}]; + + return testAction( + actions.receiveRunnersCheckSuccess, + payload, + state, + [{ type: mutationTypes.RECEIVE_CHECK_SUCCESS, payload: CHECK_RUNNERS }], + [], + ); + }); + + it('handles successful response, with empty data', () => { + const commitPayload = { + type: CHECK_RUNNERS, + message: messages.runnersCheckEmpty(TEST_RUNNERS_HELP_PATH), + }; + + return testAction( + actions.receiveRunnersCheckSuccess, + [], + state, + [{ type: mutationTypes.RECEIVE_CHECK_ERROR, payload: commitPayload }], + [{ type: 'retryRunnersCheck' }], + ); + }); + }); + + describe('receiveRunnersCheckError', () => { + it('dispatches handle with message', () => { + const commitPayload = { + type: CHECK_RUNNERS, + message: messages.UNEXPECTED_ERROR_RUNNERS, + }; + + return testAction( + actions.receiveRunnersCheckError, + null, + {}, + [{ type: mutationTypes.RECEIVE_CHECK_ERROR, payload: commitPayload }], + [], + ); + }); + }); + + describe('retryRunnersCheck', () => { + it('dispatches fetch again after timeout', () => { + const dispatch = jest.fn().mockName('dispatch'); + + actions.retryRunnersCheck({ dispatch, state }); + + expect(dispatch).not.toHaveBeenCalled(); + + jest.advanceTimersByTime(RETRY_RUNNERS_INTERVAL + 1); + + expect(dispatch).toHaveBeenCalledWith('fetchRunnersCheck', { background: true }); + }); + + it('does not dispatch fetch if config check is error', () => { + const dispatch = jest.fn().mockName('dispatch'); + state.checks.config = { + isLoading: false, + isValid: false, + }; + + actions.retryRunnersCheck({ dispatch, state }); + + expect(dispatch).not.toHaveBeenCalled(); + + jest.advanceTimersByTime(RETRY_RUNNERS_INTERVAL + 1); + + expect(dispatch).not.toHaveBeenCalled(); + }); + }); + + describe('fetchRunnersCheck', () => { + it('dispatches request and receive', () => { + mock.onGet(/api\/.*\/projects\/.*\/runners/, { params: { scope: 'active' } }).reply(200, []); + + return testAction( + actions.fetchRunnersCheck, + {}, + rootGetters, + [], + [{ type: 'requestRunnersCheck' }, { type: 'receiveRunnersCheckSuccess', payload: [] }], + ); + }); + + it('does not dispatch request when background is true', () => { + mock.onGet(/api\/.*\/projects\/.*\/runners/, { params: { scope: 'active' } }).reply(200, []); + + return testAction( + actions.fetchRunnersCheck, + { background: true }, + rootGetters, + [], + [{ type: 'receiveRunnersCheckSuccess', payload: [] }], + ); + }); + + it('dispatches request and receive, when error', () => { + mock.onGet(/api\/.*\/projects\/.*\/runners/, { params: { scope: 'active' } }).reply(500, []); + + return testAction( + actions.fetchRunnersCheck, + {}, + rootGetters, + [], + [ + { type: 'requestRunnersCheck' }, + { type: 'receiveRunnersCheckError', payload: expect.any(Error) }, + ], + ); + }); + }); +}); diff --git a/spec/frontend/ide/stores/modules/terminal/actions/session_controls_spec.js b/spec/frontend/ide/stores/modules/terminal/actions/session_controls_spec.js new file mode 100644 index 00000000000..4bc937b4784 --- /dev/null +++ b/spec/frontend/ide/stores/modules/terminal/actions/session_controls_spec.js @@ -0,0 +1,300 @@ +import MockAdapter from 'axios-mock-adapter'; +import testAction from 'helpers/vuex_action_helper'; +import { STARTING, PENDING, STOPPING, STOPPED } from '~/ide/stores/modules/terminal/constants'; +import * as messages from '~/ide/stores/modules/terminal/messages'; +import * as mutationTypes from '~/ide/stores/modules/terminal/mutation_types'; +import * as actions from '~/ide/stores/modules/terminal/actions/session_controls'; +import httpStatus from '~/lib/utils/http_status'; +import axios from '~/lib/utils/axios_utils'; +import createFlash from '~/flash'; + +jest.mock('~/flash'); + +const TEST_PROJECT_PATH = 'lorem/root'; +const TEST_BRANCH_ID = 'master'; +const TEST_SESSION = { + id: 7, + status: PENDING, + show_path: 'path/show', + cancel_path: 'path/cancel', + retry_path: 'path/retry', + terminal_path: 'path/terminal', + proxy_websocket_path: 'path/proxy', + services: ['test-service'], +}; + +describe('IDE store terminal session controls actions', () => { + let mock; + let dispatch; + let rootState; + let rootGetters; + + beforeEach(() => { + mock = new MockAdapter(axios); + dispatch = jest.fn().mockName('dispatch'); + rootState = { + currentBranchId: TEST_BRANCH_ID, + }; + rootGetters = { + currentProject: { + id: 7, + path_with_namespace: TEST_PROJECT_PATH, + }, + }; + }); + + afterEach(() => { + mock.restore(); + }); + + describe('requestStartSession', () => { + it('sets session status', () => { + return testAction( + actions.requestStartSession, + null, + {}, + [{ type: mutationTypes.SET_SESSION_STATUS, payload: STARTING }], + [], + ); + }); + }); + + describe('receiveStartSessionSuccess', () => { + it('sets session and starts polling status', () => { + return testAction( + actions.receiveStartSessionSuccess, + TEST_SESSION, + {}, + [ + { + type: mutationTypes.SET_SESSION, + payload: { + id: TEST_SESSION.id, + status: TEST_SESSION.status, + showPath: TEST_SESSION.show_path, + cancelPath: TEST_SESSION.cancel_path, + retryPath: TEST_SESSION.retry_path, + terminalPath: TEST_SESSION.terminal_path, + proxyWebsocketPath: TEST_SESSION.proxy_websocket_path, + services: TEST_SESSION.services, + }, + }, + ], + [{ type: 'pollSessionStatus' }], + ); + }); + }); + + describe('receiveStartSessionError', () => { + it('flashes message', () => { + actions.receiveStartSessionError({ dispatch }); + + expect(createFlash).toHaveBeenCalledWith(messages.UNEXPECTED_ERROR_STARTING); + }); + + it('sets session status', () => { + return testAction(actions.receiveStartSessionError, null, {}, [], [{ type: 'killSession' }]); + }); + }); + + describe('startSession', () => { + it('does nothing if session is already starting', () => { + const state = { + session: { status: STARTING }, + }; + + actions.startSession({ state, dispatch }); + + expect(dispatch).not.toHaveBeenCalled(); + }); + + it('dispatches request and receive on success', () => { + mock.onPost(/.*\/ide_terminals/).reply(200, TEST_SESSION); + + return testAction( + actions.startSession, + null, + { ...rootGetters, ...rootState }, + [], + [ + { type: 'requestStartSession' }, + { type: 'receiveStartSessionSuccess', payload: TEST_SESSION }, + ], + ); + }); + + it('dispatches request and receive on error', () => { + mock.onPost(/.*\/ide_terminals/).reply(400); + + return testAction( + actions.startSession, + null, + { ...rootGetters, ...rootState }, + [], + [ + { type: 'requestStartSession' }, + { type: 'receiveStartSessionError', payload: expect.any(Error) }, + ], + ); + }); + }); + + describe('requestStopSession', () => { + it('sets session status', () => { + return testAction( + actions.requestStopSession, + null, + {}, + [{ type: mutationTypes.SET_SESSION_STATUS, payload: STOPPING }], + [], + ); + }); + }); + + describe('receiveStopSessionSuccess', () => { + it('kills the session', () => { + return testAction(actions.receiveStopSessionSuccess, null, {}, [], [{ type: 'killSession' }]); + }); + }); + + describe('receiveStopSessionError', () => { + it('flashes message', () => { + actions.receiveStopSessionError({ dispatch }); + + expect(createFlash).toHaveBeenCalledWith(messages.UNEXPECTED_ERROR_STOPPING); + }); + + it('kills the session', () => { + return testAction(actions.receiveStopSessionError, null, {}, [], [{ type: 'killSession' }]); + }); + }); + + describe('stopSession', () => { + it('dispatches request and receive on success', () => { + mock.onPost(TEST_SESSION.cancel_path).reply(200, {}); + + const state = { + session: { cancelPath: TEST_SESSION.cancel_path }, + }; + + return testAction( + actions.stopSession, + null, + state, + [], + [{ type: 'requestStopSession' }, { type: 'receiveStopSessionSuccess' }], + ); + }); + + it('dispatches request and receive on error', () => { + mock.onPost(TEST_SESSION.cancel_path).reply(400); + + const state = { + session: { cancelPath: TEST_SESSION.cancel_path }, + }; + + return testAction( + actions.stopSession, + null, + state, + [], + [ + { type: 'requestStopSession' }, + { type: 'receiveStopSessionError', payload: expect.any(Error) }, + ], + ); + }); + }); + + describe('killSession', () => { + it('stops polling and sets status', () => { + return testAction( + actions.killSession, + null, + {}, + [{ type: mutationTypes.SET_SESSION_STATUS, payload: STOPPED }], + [{ type: 'stopPollingSessionStatus' }], + ); + }); + }); + + describe('restartSession', () => { + let state; + + beforeEach(() => { + state = { + session: { status: STOPPED, retryPath: 'test/retry' }, + }; + }); + + it('does nothing if current not stopped', () => { + state.session.status = STOPPING; + + actions.restartSession({ state, dispatch, rootState }); + + expect(dispatch).not.toHaveBeenCalled(); + }); + + it('dispatches startSession if retryPath is empty', () => { + state.session.retryPath = ''; + + return testAction( + actions.restartSession, + null, + { ...state, ...rootState }, + [], + [{ type: 'startSession' }], + ); + }); + + it('dispatches request and receive on success', () => { + mock + .onPost(state.session.retryPath, { branch: rootState.currentBranchId, format: 'json' }) + .reply(200, TEST_SESSION); + + return testAction( + actions.restartSession, + null, + { ...state, ...rootState }, + [], + [ + { type: 'requestStartSession' }, + { type: 'receiveStartSessionSuccess', payload: TEST_SESSION }, + ], + ); + }); + + it('dispatches request and receive on error', () => { + mock + .onPost(state.session.retryPath, { branch: rootState.currentBranchId, format: 'json' }) + .reply(400); + + return testAction( + actions.restartSession, + null, + { ...state, ...rootState }, + [], + [ + { type: 'requestStartSession' }, + { type: 'receiveStartSessionError', payload: expect.any(Error) }, + ], + ); + }); + + [httpStatus.NOT_FOUND, httpStatus.UNPROCESSABLE_ENTITY].forEach(status => { + it(`dispatches request and startSession on ${status}`, () => { + mock + .onPost(state.session.retryPath, { branch: rootState.currentBranchId, format: 'json' }) + .reply(status); + + return testAction( + actions.restartSession, + null, + { ...state, ...rootState }, + [], + [{ type: 'requestStartSession' }, { type: 'startSession' }], + ); + }); + }); + }); +}); diff --git a/spec/frontend/ide/stores/modules/terminal/actions/session_status_spec.js b/spec/frontend/ide/stores/modules/terminal/actions/session_status_spec.js new file mode 100644 index 00000000000..7909f828124 --- /dev/null +++ b/spec/frontend/ide/stores/modules/terminal/actions/session_status_spec.js @@ -0,0 +1,169 @@ +import MockAdapter from 'axios-mock-adapter'; +import testAction from 'helpers/vuex_action_helper'; +import { PENDING, RUNNING, STOPPING, STOPPED } from '~/ide/stores/modules/terminal/constants'; +import * as messages from '~/ide/stores/modules/terminal/messages'; +import * as mutationTypes from '~/ide/stores/modules/terminal/mutation_types'; +import * as actions from '~/ide/stores/modules/terminal/actions/session_status'; +import axios from '~/lib/utils/axios_utils'; +import createFlash from '~/flash'; + +jest.mock('~/flash'); + +const TEST_SESSION = { + id: 7, + status: PENDING, + show_path: 'path/show', + cancel_path: 'path/cancel', + retry_path: 'path/retry', + terminal_path: 'path/terminal', +}; + +describe('IDE store terminal session controls actions', () => { + let mock; + let dispatch; + let commit; + + beforeEach(() => { + mock = new MockAdapter(axios); + dispatch = jest.fn().mockName('dispatch'); + commit = jest.fn().mockName('commit'); + }); + + afterEach(() => { + mock.restore(); + }); + + describe('pollSessionStatus', () => { + it('starts interval to poll status', () => { + return testAction( + actions.pollSessionStatus, + null, + {}, + [{ type: mutationTypes.SET_SESSION_STATUS_INTERVAL, payload: expect.any(Number) }], + [{ type: 'stopPollingSessionStatus' }, { type: 'fetchSessionStatus' }], + ); + }); + + it('on interval, stops polling if no session', () => { + const state = { + session: null, + }; + + actions.pollSessionStatus({ state, dispatch, commit }); + dispatch.mockClear(); + + jest.advanceTimersByTime(5001); + + expect(dispatch).toHaveBeenCalledWith('stopPollingSessionStatus'); + }); + + it('on interval, fetches status', () => { + const state = { + session: TEST_SESSION, + }; + + actions.pollSessionStatus({ state, dispatch, commit }); + dispatch.mockClear(); + + jest.advanceTimersByTime(5001); + + expect(dispatch).toHaveBeenCalledWith('fetchSessionStatus'); + }); + }); + + describe('stopPollingSessionStatus', () => { + it('does nothing if sessionStatusInterval is empty', () => { + return testAction(actions.stopPollingSessionStatus, null, {}, [], []); + }); + + it('clears interval', () => { + return testAction( + actions.stopPollingSessionStatus, + null, + { sessionStatusInterval: 7 }, + [{ type: mutationTypes.SET_SESSION_STATUS_INTERVAL, payload: 0 }], + [], + ); + }); + }); + + describe('receiveSessionStatusSuccess', () => { + it('sets session status', () => { + return testAction( + actions.receiveSessionStatusSuccess, + { status: RUNNING }, + {}, + [{ type: mutationTypes.SET_SESSION_STATUS, payload: RUNNING }], + [], + ); + }); + + [STOPPING, STOPPED, 'unexpected'].forEach(status => { + it(`kills session if status is ${status}`, () => { + return testAction( + actions.receiveSessionStatusSuccess, + { status }, + {}, + [{ type: mutationTypes.SET_SESSION_STATUS, payload: status }], + [{ type: 'killSession' }], + ); + }); + }); + }); + + describe('receiveSessionStatusError', () => { + it('flashes message', () => { + actions.receiveSessionStatusError({ dispatch }); + + expect(createFlash).toHaveBeenCalledWith(messages.UNEXPECTED_ERROR_STATUS); + }); + + it('kills the session', () => { + return testAction(actions.receiveSessionStatusError, null, {}, [], [{ type: 'killSession' }]); + }); + }); + + describe('fetchSessionStatus', () => { + let state; + + beforeEach(() => { + state = { + session: { + showPath: TEST_SESSION.show_path, + }, + }; + }); + + it('does nothing if session is falsey', () => { + state.session = null; + + actions.fetchSessionStatus({ dispatch, state }); + + expect(dispatch).not.toHaveBeenCalled(); + }); + + it('dispatches success on success', () => { + mock.onGet(state.session.showPath).reply(200, TEST_SESSION); + + return testAction( + actions.fetchSessionStatus, + null, + state, + [], + [{ type: 'receiveSessionStatusSuccess', payload: TEST_SESSION }], + ); + }); + + it('dispatches error on error', () => { + mock.onGet(state.session.showPath).reply(400); + + return testAction( + actions.fetchSessionStatus, + null, + state, + [], + [{ type: 'receiveSessionStatusError', payload: expect.any(Error) }], + ); + }); + }); +}); diff --git a/spec/frontend/ide/stores/modules/terminal/actions/setup_spec.js b/spec/frontend/ide/stores/modules/terminal/actions/setup_spec.js new file mode 100644 index 00000000000..8bf3b58228e --- /dev/null +++ b/spec/frontend/ide/stores/modules/terminal/actions/setup_spec.js @@ -0,0 +1,40 @@ +import testAction from 'helpers/vuex_action_helper'; +import * as mutationTypes from '~/ide/stores/modules/terminal/mutation_types'; +import * as actions from '~/ide/stores/modules/terminal/actions/setup'; + +describe('IDE store terminal setup actions', () => { + describe('init', () => { + it('dispatches checks', () => { + return testAction( + actions.init, + null, + {}, + [], + [{ type: 'fetchConfigCheck' }, { type: 'fetchRunnersCheck' }], + ); + }); + }); + + describe('hideSplash', () => { + it('commits HIDE_SPLASH', () => { + return testAction(actions.hideSplash, null, {}, [{ type: mutationTypes.HIDE_SPLASH }], []); + }); + }); + + describe('setPaths', () => { + it('commits SET_PATHS', () => { + const paths = { + foo: 'bar', + lorem: 'ipsum', + }; + + return testAction( + actions.setPaths, + paths, + {}, + [{ type: mutationTypes.SET_PATHS, payload: paths }], + [], + ); + }); + }); +}); diff --git a/spec/frontend/ide/stores/modules/terminal/getters_spec.js b/spec/frontend/ide/stores/modules/terminal/getters_spec.js new file mode 100644 index 00000000000..b5d6a4bc746 --- /dev/null +++ b/spec/frontend/ide/stores/modules/terminal/getters_spec.js @@ -0,0 +1,50 @@ +import { CHECK_CONFIG, CHECK_RUNNERS } from '~/ide/stores/modules/terminal/constants'; +import * as getters from '~/ide/stores/modules/terminal/getters'; + +describe('IDE store terminal getters', () => { + describe('allCheck', () => { + it('is loading if one check is loading', () => { + const checks = { + [CHECK_CONFIG]: { isLoading: false, isValid: true }, + [CHECK_RUNNERS]: { isLoading: true }, + }; + + const result = getters.allCheck({ checks }); + + expect(result).toEqual({ + isLoading: true, + }); + }); + + it('is invalid if one check is invalid', () => { + const message = 'lorem ipsum'; + const checks = { + [CHECK_CONFIG]: { isLoading: false, isValid: false, message }, + [CHECK_RUNNERS]: { isLoading: false, isValid: true }, + }; + + const result = getters.allCheck({ checks }); + + expect(result).toEqual({ + isLoading: false, + isValid: false, + message, + }); + }); + + it('is valid if all checks are valid', () => { + const checks = { + [CHECK_CONFIG]: { isLoading: false, isValid: true }, + [CHECK_RUNNERS]: { isLoading: false, isValid: true }, + }; + + const result = getters.allCheck({ checks }); + + expect(result).toEqual({ + isLoading: false, + isValid: true, + message: '', + }); + }); + }); +}); diff --git a/spec/frontend/ide/stores/modules/terminal/messages_spec.js b/spec/frontend/ide/stores/modules/terminal/messages_spec.js new file mode 100644 index 00000000000..966158999da --- /dev/null +++ b/spec/frontend/ide/stores/modules/terminal/messages_spec.js @@ -0,0 +1,38 @@ +import { escape } from 'lodash'; +import { TEST_HOST } from 'spec/test_constants'; +import * as messages from '~/ide/stores/modules/terminal/messages'; +import { sprintf } from '~/locale'; +import httpStatus from '~/lib/utils/http_status'; + +const TEST_HELP_URL = `${TEST_HOST}/help`; + +describe('IDE store terminal messages', () => { + describe('configCheckError', () => { + it('returns job error, with status UNPROCESSABLE_ENTITY', () => { + const result = messages.configCheckError(httpStatus.UNPROCESSABLE_ENTITY, TEST_HELP_URL); + + expect(result).toBe( + sprintf( + messages.ERROR_CONFIG, + { + helpStart: `<a href="${escape(TEST_HELP_URL)}" target="_blank">`, + helpEnd: '</a>', + }, + false, + ), + ); + }); + + it('returns permission error, with status FORBIDDEN', () => { + const result = messages.configCheckError(httpStatus.FORBIDDEN, TEST_HELP_URL); + + expect(result).toBe(messages.ERROR_PERMISSION); + }); + + it('returns unexpected error, with unexpected status', () => { + const result = messages.configCheckError(httpStatus.NOT_FOUND, TEST_HELP_URL); + + expect(result).toBe(messages.UNEXPECTED_ERROR_CONFIG); + }); + }); +}); diff --git a/spec/frontend/ide/stores/modules/terminal/mutations_spec.js b/spec/frontend/ide/stores/modules/terminal/mutations_spec.js new file mode 100644 index 00000000000..e9933bdd7be --- /dev/null +++ b/spec/frontend/ide/stores/modules/terminal/mutations_spec.js @@ -0,0 +1,142 @@ +import { + CHECK_CONFIG, + CHECK_RUNNERS, + RUNNING, + STOPPING, +} from '~/ide/stores/modules/terminal/constants'; +import createState from '~/ide/stores/modules/terminal/state'; +import * as types from '~/ide/stores/modules/terminal/mutation_types'; +import mutations from '~/ide/stores/modules/terminal/mutations'; + +describe('IDE store terminal mutations', () => { + let state; + + beforeEach(() => { + state = createState(); + }); + + describe(types.SET_VISIBLE, () => { + it('sets isVisible', () => { + state.isVisible = false; + + mutations[types.SET_VISIBLE](state, true); + + expect(state.isVisible).toBe(true); + }); + }); + + describe(types.HIDE_SPLASH, () => { + it('sets isShowSplash', () => { + state.isShowSplash = true; + + mutations[types.HIDE_SPLASH](state); + + expect(state.isShowSplash).toBe(false); + }); + }); + + describe(types.SET_PATHS, () => { + it('sets paths', () => { + const paths = { + test: 'foo', + }; + + mutations[types.SET_PATHS](state, paths); + + expect(state.paths).toBe(paths); + }); + }); + + describe(types.REQUEST_CHECK, () => { + it('sets isLoading for check', () => { + const type = CHECK_CONFIG; + + state.checks[type] = {}; + mutations[types.REQUEST_CHECK](state, type); + + expect(state.checks[type]).toEqual({ + isLoading: true, + }); + }); + }); + + describe(types.RECEIVE_CHECK_ERROR, () => { + it('sets error for check', () => { + const type = CHECK_RUNNERS; + const message = 'lorem ipsum'; + + state.checks[type] = {}; + mutations[types.RECEIVE_CHECK_ERROR](state, { type, message }); + + expect(state.checks[type]).toEqual({ + isLoading: false, + isValid: false, + message, + }); + }); + }); + + describe(types.RECEIVE_CHECK_SUCCESS, () => { + it('sets success for check', () => { + const type = CHECK_CONFIG; + + state.checks[type] = {}; + mutations[types.RECEIVE_CHECK_SUCCESS](state, type); + + expect(state.checks[type]).toEqual({ + isLoading: false, + isValid: true, + message: null, + }); + }); + }); + + describe(types.SET_SESSION, () => { + it('sets session', () => { + const session = { + terminalPath: 'terminal/foo', + status: RUNNING, + }; + + mutations[types.SET_SESSION](state, session); + + expect(state.session).toBe(session); + }); + }); + + describe(types.SET_SESSION_STATUS, () => { + it('sets session if a session does not exists', () => { + const status = RUNNING; + + mutations[types.SET_SESSION_STATUS](state, status); + + expect(state.session).toEqual({ + status, + }); + }); + + it('sets session status', () => { + state.session = { + terminalPath: 'terminal/foo', + status: RUNNING, + }; + + mutations[types.SET_SESSION_STATUS](state, STOPPING); + + expect(state.session).toEqual({ + terminalPath: 'terminal/foo', + status: STOPPING, + }); + }); + }); + + describe(types.SET_SESSION_STATUS_INTERVAL, () => { + it('sets sessionStatusInterval', () => { + const val = 7; + + mutations[types.SET_SESSION_STATUS_INTERVAL](state, val); + + expect(state.sessionStatusInterval).toEqual(val); + }); + }); +}); diff --git a/spec/frontend/ide/stores/modules/terminal_sync/actions_spec.js b/spec/frontend/ide/stores/modules/terminal_sync/actions_spec.js new file mode 100644 index 00000000000..ac976300ed0 --- /dev/null +++ b/spec/frontend/ide/stores/modules/terminal_sync/actions_spec.js @@ -0,0 +1,118 @@ +import * as actions from '~/ide/stores/modules/terminal_sync/actions'; +import mirror, { canConnect, SERVICE_NAME } from '~/ide/lib/mirror'; +import * as types from '~/ide/stores/modules/terminal_sync/mutation_types'; +import testAction from 'helpers/vuex_action_helper'; + +jest.mock('~/ide/lib/mirror'); + +const TEST_SESSION = { + proxyWebsocketPath: 'test/path', + services: [SERVICE_NAME], +}; + +describe('ide/stores/modules/terminal_sync/actions', () => { + let rootState; + + beforeEach(() => { + canConnect.mockReturnValue(true); + rootState = { + changedFiles: [], + terminal: {}, + }; + }); + + describe('upload', () => { + it('uploads to mirror and sets success', done => { + mirror.upload.mockReturnValue(Promise.resolve()); + + testAction( + actions.upload, + null, + rootState, + [{ type: types.START_LOADING }, { type: types.SET_SUCCESS }], + [], + () => { + expect(mirror.upload).toHaveBeenCalledWith(rootState); + done(); + }, + ); + }); + + it('sets error when failed', done => { + const err = { message: 'it failed!' }; + mirror.upload.mockReturnValue(Promise.reject(err)); + + testAction( + actions.upload, + null, + rootState, + [{ type: types.START_LOADING }, { type: types.SET_ERROR, payload: err }], + [], + done, + ); + }); + }); + + describe('stop', () => { + it('disconnects from mirror', done => { + testAction(actions.stop, null, rootState, [{ type: types.STOP }], [], () => { + expect(mirror.disconnect).toHaveBeenCalled(); + done(); + }); + }); + }); + + describe('start', () => { + it.each` + session | canConnectMock | description + ${null} | ${true} | ${'does not exist'} + ${{}} | ${true} | ${'does not have proxyWebsocketPath'} + ${{ proxyWebsocketPath: 'test/path' }} | ${false} | ${'can not connect service'} + `('rejects if session $description', ({ session, canConnectMock }) => { + canConnect.mockReturnValue(canConnectMock); + + const result = actions.start({ rootState: { terminal: { session } } }); + + return expect(result).rejects.toBe(undefined); + }); + + describe('with terminal session in state', () => { + beforeEach(() => { + rootState = { + terminal: { session: TEST_SESSION }, + }; + }); + + it('connects to mirror and sets success', done => { + mirror.connect.mockReturnValue(Promise.resolve()); + + testAction( + actions.start, + null, + rootState, + [{ type: types.START_LOADING }, { type: types.SET_SUCCESS }], + [], + () => { + expect(mirror.connect).toHaveBeenCalledWith(TEST_SESSION.proxyWebsocketPath); + done(); + }, + ); + }); + + it('sets error if connection fails', () => { + const commit = jest.fn(); + const err = new Error('test'); + mirror.connect.mockReturnValue(Promise.reject(err)); + + const result = actions.start({ rootState, commit }); + + return Promise.all([ + expect(result).rejects.toEqual(err), + result.catch(() => { + expect(commit).toHaveBeenCalledWith(types.SET_ERROR, err); + }), + ]); + }); + }); + }); +}); diff --git a/spec/frontend/ide/stores/modules/terminal_sync/mutations_spec.js b/spec/frontend/ide/stores/modules/terminal_sync/mutations_spec.js new file mode 100644 index 00000000000..ecf35d60e96 --- /dev/null +++ b/spec/frontend/ide/stores/modules/terminal_sync/mutations_spec.js @@ -0,0 +1,89 @@ +import createState from '~/ide/stores/modules/terminal_sync/state'; +import * as types from '~/ide/stores/modules/terminal_sync/mutation_types'; +import mutations from '~/ide/stores/modules/terminal_sync/mutations'; + +const TEST_MESSAGE = 'lorem ipsum dolar sit'; + +describe('ide/stores/modules/terminal_sync/mutations', () => { + let state; + + beforeEach(() => { + state = createState(); + }); + + describe(types.START_LOADING, () => { + it('sets isLoading and resets error', () => { + Object.assign(state, { + isLoading: false, + isError: true, + }); + + mutations[types.START_LOADING](state); + + expect(state).toEqual( + expect.objectContaining({ + isLoading: true, + isError: false, + }), + ); + }); + }); + + describe(types.SET_ERROR, () => { + it('sets isLoading and error message', () => { + Object.assign(state, { + isLoading: true, + isError: false, + message: '', + }); + + mutations[types.SET_ERROR](state, { message: TEST_MESSAGE }); + + expect(state).toEqual( + expect.objectContaining({ + isLoading: false, + isError: true, + message: TEST_MESSAGE, + }), + ); + }); + }); + + describe(types.SET_SUCCESS, () => { + it('sets isLoading and resets error and is started', () => { + Object.assign(state, { + isLoading: true, + isError: true, + isStarted: false, + }); + + mutations[types.SET_SUCCESS](state); + + expect(state).toEqual( + expect.objectContaining({ + isLoading: false, + isError: false, + isStarted: true, + }), + ); + }); + }); + + describe(types.STOP, () => { + it('sets stop values', () => { + Object.assign(state, { + isLoading: true, + isStarted: true, + }); + + mutations[types.STOP](state); + + expect(state).toEqual( + expect.objectContaining({ + isLoading: false, + isStarted: false, + }), + ); + }); + }); +}); diff --git a/spec/frontend/ide/stores/mutations/file_spec.js b/spec/frontend/ide/stores/mutations/file_spec.js index 9b96b910fcb..ff904bbc9cd 100644 --- a/spec/frontend/ide/stores/mutations/file_spec.js +++ b/spec/frontend/ide/stores/mutations/file_spec.js @@ -60,22 +60,14 @@ describe('IDE store file mutations', () => { it('sets extra file data', () => { mutations.SET_FILE_DATA(localState, { data: { - blame_path: 'blame', - commits_path: 'commits', - permalink: 'permalink', raw_path: 'raw', binary: true, - render_error: 'render_error', }, file: localFile, }); - expect(localFile.blamePath).toBe('blame'); - expect(localFile.commitsPath).toBe('commits'); - expect(localFile.permalink).toBe('permalink'); expect(localFile.rawPath).toBe('raw'); expect(localFile.binary).toBeTruthy(); - expect(localFile.renderError).toBe('render_error'); expect(localFile.raw).toBeNull(); expect(localFile.baseRaw).toBeNull(); }); @@ -356,14 +348,6 @@ describe('IDE store file mutations', () => { expect(localState.changedFiles.length).toBe(1); }); - - it('bursts unused seal', () => { - expect(localState.unusedSeal).toBe(true); - - mutations.ADD_FILE_TO_CHANGED(localState, localFile.path); - - expect(localState.unusedSeal).toBe(false); - }); }); describe('REMOVE_FILE_FROM_CHANGED', () => { @@ -374,14 +358,6 @@ describe('IDE store file mutations', () => { expect(localState.changedFiles.length).toBe(0); }); - - it('bursts unused seal', () => { - expect(localState.unusedSeal).toBe(true); - - mutations.REMOVE_FILE_FROM_CHANGED(localState, localFile.path); - - expect(localState.unusedSeal).toBe(false); - }); }); describe.each` @@ -533,19 +509,6 @@ describe('IDE store file mutations', () => { }, ); - describe('STAGE_CHANGE', () => { - it('bursts unused seal', () => { - expect(localState.unusedSeal).toBe(true); - - mutations.STAGE_CHANGE(localState, { - path: localFile.path, - diffInfo: localStore.getters.getDiffInfo(localFile.path), - }); - - expect(localState.unusedSeal).toBe(false); - }); - }); - describe('TOGGLE_FILE_CHANGED', () => { it('updates file changed status', () => { mutations.TOGGLE_FILE_CHANGED(localState, { diff --git a/spec/frontend/ide/stores/mutations_spec.js b/spec/frontend/ide/stores/mutations_spec.js index 2eca9acb8d8..1b29648fb8b 100644 --- a/spec/frontend/ide/stores/mutations_spec.js +++ b/spec/frontend/ide/stores/mutations_spec.js @@ -120,24 +120,6 @@ describe('Multi-file store mutations', () => { expect(localState.trees['gitlab-ce/master'].tree.length).toEqual(1); expect(localState.entries.test.tempFile).toEqual(true); }); - - it('marks entry as replacing previous entry if the old one has been deleted', () => { - const tmpFile = file('test'); - localState.entries.test = { ...tmpFile, deleted: true }; - mutations.CREATE_TMP_ENTRY(localState, { - data: { - entries: { - test: { ...tmpFile, tempFile: true, changed: true }, - }, - treeList: [tmpFile], - }, - projectId: 'gitlab-ce', - branchId: 'master', - }); - - expect(localState.trees['gitlab-ce/master'].tree.length).toEqual(1); - expect(localState.entries.test.replaces).toEqual(true); - }); }); describe('UPDATE_TEMP_FLAG', () => { @@ -265,16 +247,6 @@ describe('Multi-file store mutations', () => { expect(localState.changedFiles).toEqual([]); expect(localState.stagedFiles).toEqual([]); }); - - it('bursts unused seal', () => { - localState.entries.test = file('test'); - - expect(localState.unusedSeal).toBe(true); - - mutations.DELETE_ENTRY(localState, 'test'); - - expect(localState.unusedSeal).toBe(false); - }); }); describe('UPDATE_FILE_AFTER_COMMIT', () => { @@ -283,10 +255,6 @@ describe('Multi-file store mutations', () => { ...file('test'), prevPath: 'testing-123', rawPath: `${TEST_HOST}/testing-123`, - permalink: `${TEST_HOST}/testing-123`, - commitsPath: `${TEST_HOST}/testing-123`, - blamePath: `${TEST_HOST}/testing-123`, - replaces: true, }; localState.entries.test = f; localState.changedFiles.push(f); @@ -301,10 +269,6 @@ describe('Multi-file store mutations', () => { expect(f).toEqual( expect.objectContaining({ rawPath: `${TEST_HOST}/test`, - permalink: `${TEST_HOST}/test`, - commitsPath: `${TEST_HOST}/test`, - blamePath: `${TEST_HOST}/test`, - replaces: false, prevId: undefined, prevPath: undefined, prevName: undefined, diff --git a/spec/frontend/ide/stores/plugins/terminal_spec.js b/spec/frontend/ide/stores/plugins/terminal_spec.js new file mode 100644 index 00000000000..948c2131fd8 --- /dev/null +++ b/spec/frontend/ide/stores/plugins/terminal_spec.js @@ -0,0 +1,58 @@ +import { createLocalVue } from '@vue/test-utils'; +import Vuex from 'vuex'; +import { TEST_HOST } from 'helpers/test_constants'; +import terminalModule from '~/ide/stores/modules/terminal'; +import createTerminalPlugin from '~/ide/stores/plugins/terminal'; +import { SET_BRANCH_WORKING_REFERENCE } from '~/ide/stores/mutation_types'; + +const TEST_DATASET = { + eeWebTerminalSvgPath: `${TEST_HOST}/web/terminal/svg`, + eeWebTerminalHelpPath: `${TEST_HOST}/web/terminal/help`, + eeWebTerminalConfigHelpPath: `${TEST_HOST}/web/terminal/config/help`, + eeWebTerminalRunnersHelpPath: `${TEST_HOST}/web/terminal/runners/help`, +}; +const localVue = createLocalVue(); +localVue.use(Vuex); + +describe('ide/stores/extend', () => { + let store; + + beforeEach(() => { + const el = document.createElement('div'); + Object.assign(el.dataset, TEST_DATASET); + + store = new Vuex.Store({ + mutations: { + [SET_BRANCH_WORKING_REFERENCE]: () => {}, + }, + }); + + jest.spyOn(store, 'registerModule').mockImplementation(); + jest.spyOn(store, 'dispatch').mockImplementation(); + + const plugin = createTerminalPlugin(el); + + plugin(store); + }); + + it('registers terminal module', () => { + expect(store.registerModule).toHaveBeenCalledWith('terminal', terminalModule()); + }); + + it('dispatches terminal/setPaths', () => { + expect(store.dispatch).toHaveBeenCalledWith('terminal/setPaths', { + webTerminalSvgPath: TEST_DATASET.eeWebTerminalSvgPath, + webTerminalHelpPath: TEST_DATASET.eeWebTerminalHelpPath, + webTerminalConfigHelpPath: TEST_DATASET.eeWebTerminalConfigHelpPath, + webTerminalRunnersHelpPath: TEST_DATASET.eeWebTerminalRunnersHelpPath, + }); + }); + + it(`dispatches terminal/init on ${SET_BRANCH_WORKING_REFERENCE}`, () => { + store.dispatch.mockReset(); + + store.commit(SET_BRANCH_WORKING_REFERENCE); + + expect(store.dispatch).toHaveBeenCalledWith('terminal/init'); + }); +}); diff --git a/spec/frontend/ide/stores/plugins/terminal_sync_spec.js b/spec/frontend/ide/stores/plugins/terminal_sync_spec.js new file mode 100644 index 00000000000..2aa3e770e7d --- /dev/null +++ b/spec/frontend/ide/stores/plugins/terminal_sync_spec.js @@ -0,0 +1,72 @@ +import createTerminalPlugin from '~/ide/stores/plugins/terminal'; +import createTerminalSyncPlugin from '~/ide/stores/plugins/terminal_sync'; +import { SET_SESSION_STATUS } from '~/ide/stores/modules/terminal/mutation_types'; +import { RUNNING, STOPPING } from '~/ide/stores/modules/terminal/constants'; +import { createStore } from '~/ide/stores'; +import eventHub from '~/ide/eventhub'; + +jest.mock('~/ide/lib/mirror'); + +const ACTION_START = 'terminalSync/start'; +const ACTION_STOP = 'terminalSync/stop'; +const ACTION_UPLOAD = 'terminalSync/upload'; +const FILES_CHANGE_EVENT = 'ide.files.change'; + +describe('IDE stores/plugins/mirror', () => { + let store; + + beforeEach(() => { + const root = document.createElement('div'); + + store = createStore(); + createTerminalPlugin(root)(store); + + store.dispatch = jest.fn(() => Promise.resolve()); + + createTerminalSyncPlugin(root)(store); + }); + + it('does nothing on ide.files.change event', () => { + eventHub.$emit(FILES_CHANGE_EVENT); + + expect(store.dispatch).not.toHaveBeenCalled(); + }); + + describe('when session starts running', () => { + beforeEach(() => { + store.commit(`terminal/${SET_SESSION_STATUS}`, RUNNING); + }); + + it('starts', () => { + expect(store.dispatch).toHaveBeenCalledWith(ACTION_START); + }); + + it('uploads when ide.files.change is emitted', () => { + expect(store.dispatch).not.toHaveBeenCalledWith(ACTION_UPLOAD); + + eventHub.$emit(FILES_CHANGE_EVENT); + + jest.runAllTimers(); + + expect(store.dispatch).toHaveBeenCalledWith(ACTION_UPLOAD); + }); + + describe('when session stops', () => { + beforeEach(() => { + store.commit(`terminal/${SET_SESSION_STATUS}`, STOPPING); + }); + + it('stops', () => { + expect(store.dispatch).toHaveBeenCalledWith(ACTION_STOP); + }); + + it('does not upload anymore', () => { + eventHub.$emit(FILES_CHANGE_EVENT); + + jest.runAllTimers(); + + expect(store.dispatch).not.toHaveBeenCalledWith(ACTION_UPLOAD); + }); + }); + }); +}); diff --git a/spec/frontend/ide/stores/utils_spec.js b/spec/frontend/ide/stores/utils_spec.js index b87f6c1f05a..d1eb4304c79 100644 --- a/spec/frontend/ide/stores/utils_spec.js +++ b/spec/frontend/ide/stores/utils_spec.js @@ -28,61 +28,6 @@ describe('Multi-file store utils', () => { }); }); - describe('findIndexOfFile', () => { - let localState; - - beforeEach(() => { - localState = [ - { - path: '1', - }, - { - path: '2', - }, - ]; - }); - - it('finds in the index of an entry by path', () => { - const index = utils.findIndexOfFile(localState, { - path: '2', - }); - - expect(index).toBe(1); - }); - }); - - describe('findEntry', () => { - let localState; - - beforeEach(() => { - localState = { - tree: [ - { - type: 'tree', - name: 'test', - }, - { - type: 'blob', - name: 'file', - }, - ], - }; - }); - - it('returns an entry found by name', () => { - const foundEntry = utils.findEntry(localState.tree, 'tree', 'test'); - - expect(foundEntry.type).toBe('tree'); - expect(foundEntry.name).toBe('test'); - }); - - it('returns undefined when no entry found', () => { - const foundEntry = utils.findEntry(localState.tree, 'blob', 'test'); - - expect(foundEntry).toBeUndefined(); - }); - }); - describe('createCommitPayload', () => { it('returns API payload', () => { const state = { @@ -101,12 +46,11 @@ describe('Multi-file store utils', () => { path: 'added', tempFile: true, content: 'new file content', - base64: true, + rawPath: 'data:image/png;base64,abc', lastCommitSha: '123456789', }, { ...file('deletedFile'), path: 'deletedFile', deleted: true }, { ...file('renamedFile'), path: 'renamedFile', prevPath: 'prevPath' }, - { ...file('replacingFile'), path: 'replacingFile', replaces: true }, ], currentBranchId: 'master', }; @@ -154,14 +98,6 @@ describe('Multi-file store utils', () => { last_commit_id: undefined, previous_path: 'prevPath', }, - { - action: commitActionTypes.update, - file_path: 'replacingFile', - content: undefined, - encoding: 'text', - last_commit_id: undefined, - previous_path: undefined, - }, ], start_sha: undefined, }); @@ -181,7 +117,7 @@ describe('Multi-file store utils', () => { path: 'added', tempFile: true, content: 'new file content', - base64: true, + rawPath: 'data:image/png;base64,abc', lastCommitSha: '123456789', }, ], @@ -661,31 +597,6 @@ describe('Multi-file store utils', () => { }); }); - describe('addFinalNewlineIfNeeded', () => { - it('adds a newline if it doesnt already exist', () => { - [ - { - input: 'some text', - output: 'some text\n', - }, - { - input: 'some text\n', - output: 'some text\n', - }, - { - input: 'some text\n\n', - output: 'some text\n\n', - }, - { - input: 'some\n text', - output: 'some\n text\n', - }, - ].forEach(({ input, output }) => { - expect(utils.addFinalNewlineIfNeeded(input)).toEqual(output); - }); - }); - }); - describe('extractMarkdownImagesFromEntries', () => { let mdFile; let entries; diff --git a/spec/frontend/ide/sync_router_and_store_spec.js b/spec/frontend/ide/sync_router_and_store_spec.js new file mode 100644 index 00000000000..c4ce92b99cc --- /dev/null +++ b/spec/frontend/ide/sync_router_and_store_spec.js @@ -0,0 +1,150 @@ +import VueRouter from 'vue-router'; +import { createStore } from '~/ide/stores'; +import { syncRouterAndStore } from '~/ide/sync_router_and_store'; +import waitForPromises from 'helpers/wait_for_promises'; + +const TEST_ROUTE = '/test/lorem/ipsum'; + +describe('~/ide/sync_router_and_store', () => { + let unsync; + let router; + let store; + let onRouterChange; + + const createSync = () => { + unsync = syncRouterAndStore(router, store); + }; + + const getRouterCurrentPath = () => router.currentRoute.fullPath; + const getStoreCurrentPath = () => store.state.router.fullPath; + const updateRouter = path => { + router.push(path); + return waitForPromises(); + }; + const updateStore = path => { + store.dispatch('router/push', path); + return waitForPromises(); + }; + + beforeEach(() => { + router = new VueRouter(); + store = createStore(); + jest.spyOn(store, 'dispatch'); + + onRouterChange = jest.fn(); + router.beforeEach((to, from, next) => { + onRouterChange(to, from); + next(); + }); + }); + + afterEach(() => { + unsync(); + unsync = null; + }); + + it('keeps store and router in sync', async () => { + createSync(); + + await updateRouter('/test/test'); + await updateRouter('/test/test'); + await updateStore('123/abc'); + await updateRouter('def'); + + // Even though we pused relative paths, the store and router kept track of the resulting fullPath + expect(getRouterCurrentPath()).toBe('/test/123/def'); + expect(getStoreCurrentPath()).toBe('/test/123/def'); + }); + + describe('default', () => { + beforeEach(() => { + createSync(); + }); + + it('store is default', () => { + expect(store.dispatch).not.toHaveBeenCalled(); + expect(getStoreCurrentPath()).toBe(''); + }); + + it('router is default', () => { + expect(onRouterChange).not.toHaveBeenCalled(); + expect(getRouterCurrentPath()).toBe('/'); + }); + + describe('when store changes', () => { + beforeEach(() => { + updateStore(TEST_ROUTE); + }); + + it('store is updated', () => { + // let's make sure the action isn't dispatched more than necessary + expect(store.dispatch).toHaveBeenCalledTimes(1); + expect(getStoreCurrentPath()).toBe(TEST_ROUTE); + }); + + it('router is updated', () => { + expect(onRouterChange).toHaveBeenCalledTimes(1); + expect(getRouterCurrentPath()).toBe(TEST_ROUTE); + }); + + describe('when store changes again to the same thing', () => { + beforeEach(() => { + onRouterChange.mockClear(); + updateStore(TEST_ROUTE); + }); + + it('doesnt change router again', () => { + expect(onRouterChange).not.toHaveBeenCalled(); + }); + }); + }); + + describe('when router changes', () => { + beforeEach(() => { + updateRouter(TEST_ROUTE); + }); + + it('store is updated', () => { + expect(store.dispatch).toHaveBeenCalledTimes(1); + expect(getStoreCurrentPath()).toBe(TEST_ROUTE); + }); + + it('router is updated', () => { + // let's make sure the router change isn't triggered more than necessary + expect(onRouterChange).toHaveBeenCalledTimes(1); + expect(getRouterCurrentPath()).toBe(TEST_ROUTE); + }); + + describe('when router changes again to the same thing', () => { + beforeEach(() => { + store.dispatch.mockClear(); + updateRouter(TEST_ROUTE); + }); + + it('doesnt change store again', () => { + expect(store.dispatch).not.toHaveBeenCalled(); + }); + }); + }); + + describe('when disposed', () => { + beforeEach(() => { + unsync(); + }); + + it('a store change does not trigger a router change', () => { + updateStore(TEST_ROUTE); + + expect(getRouterCurrentPath()).toBe('/'); + expect(onRouterChange).not.toHaveBeenCalled(); + }); + + it('a router change does not trigger a store change', () => { + updateRouter(TEST_ROUTE); + + expect(getStoreCurrentPath()).toBe(''); + expect(store.dispatch).not.toHaveBeenCalled(); + }); + }); + }); +}); diff --git a/spec/frontend/ide/utils_spec.js b/spec/frontend/ide/utils_spec.js index ea975500e8d..15baeca7f36 100644 --- a/spec/frontend/ide/utils_spec.js +++ b/spec/frontend/ide/utils_spec.js @@ -1,6 +1,13 @@ -import { commitItemIconMap } from '~/ide/constants'; -import { getCommitIconMap, isTextFile, registerLanguages, trimPathComponents } from '~/ide/utils'; -import { decorateData } from '~/ide/stores/utils'; +import { + isTextFile, + registerLanguages, + trimPathComponents, + insertFinalNewline, + trimTrailingWhitespace, + getPathParents, + getPathParent, + readFileAsDataURL, +} from '~/ide/utils'; import { languages } from 'monaco-editor'; describe('WebIDE utils', () => { @@ -62,48 +69,6 @@ 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); - }); - }); - describe('trimPathComponents', () => { it.each` input | output @@ -192,4 +157,86 @@ describe('WebIDE utils', () => { ]); }); }); + + describe('trimTrailingWhitespace', () => { + it.each` + input | output + ${'text \n more text \n'} | ${'text\n more text\n'} + ${'text \n more text \n\n \n'} | ${'text\n more text\n\n\n'} + ${'text \t\t \n more text \n\t\ttext\n \n\t\t'} | ${'text\n more text\n\t\ttext\n\n'} + ${'text \r\n more text \r\n'} | ${'text\r\n more text\r\n'} + ${'text \r\n more text \r\n\r\n \r\n'} | ${'text\r\n more text\r\n\r\n\r\n'} + ${'text \t\t \r\n more text \r\n\t\ttext\r\n \r\n\t\t'} | ${'text\r\n more text\r\n\t\ttext\r\n\r\n'} + `("trims trailing whitespace in each line of file's contents: $input", ({ input, output }) => { + expect(trimTrailingWhitespace(input)).toBe(output); + }); + }); + + describe('addFinalNewline', () => { + it.each` + input | output + ${'some text'} | ${'some text\n'} + ${'some text\n'} | ${'some text\n'} + ${'some text\n\n'} | ${'some text\n\n'} + ${'some\n text'} | ${'some\n text\n'} + `('adds a newline if it doesnt already exist for input: $input', ({ input, output }) => { + expect(insertFinalNewline(input)).toBe(output); + }); + + it.each` + input | output + ${'some text'} | ${'some text\r\n'} + ${'some text\r\n'} | ${'some text\r\n'} + ${'some text\n'} | ${'some text\n\r\n'} + ${'some text\r\n\r\n'} | ${'some text\r\n\r\n'} + ${'some\r\n text'} | ${'some\r\n text\r\n'} + `('works with CRLF newline style; input: $input', ({ input, output }) => { + expect(insertFinalNewline(input, '\r\n')).toBe(output); + }); + }); + + describe('getPathParents', () => { + it.each` + path | parents + ${'foo/bar/baz/index.md'} | ${['foo/bar/baz', 'foo/bar', 'foo']} + ${'foo/bar/baz'} | ${['foo/bar', 'foo']} + ${'index.md'} | ${[]} + ${'path with/spaces to/something.md'} | ${['path with/spaces to', 'path with']} + `('gets all parent directory names for path: $path', ({ path, parents }) => { + expect(getPathParents(path)).toEqual(parents); + }); + + it.each` + path | depth | parents + ${'foo/bar/baz/index.md'} | ${0} | ${[]} + ${'foo/bar/baz/index.md'} | ${1} | ${['foo/bar/baz']} + ${'foo/bar/baz/index.md'} | ${2} | ${['foo/bar/baz', 'foo/bar']} + ${'foo/bar/baz/index.md'} | ${3} | ${['foo/bar/baz', 'foo/bar', 'foo']} + ${'foo/bar/baz/index.md'} | ${4} | ${['foo/bar/baz', 'foo/bar', 'foo']} + `('gets only the immediate $depth parents if when depth=$depth', ({ path, depth, parents }) => { + expect(getPathParents(path, depth)).toEqual(parents); + }); + }); + + describe('getPathParent', () => { + it.each` + path | parents + ${'foo/bar/baz/index.md'} | ${'foo/bar/baz'} + ${'foo/bar/baz'} | ${'foo/bar'} + ${'index.md'} | ${undefined} + ${'path with/spaces to/something.md'} | ${'path with/spaces to'} + `('gets the immediate parent for path: $path', ({ path, parents }) => { + expect(getPathParent(path)).toEqual(parents); + }); + }); + + describe('readFileAsDataURL', () => { + it('reads a file and returns its output as a data url', () => { + const file = new File(['foo'], 'foo.png', { type: 'image/png' }); + + return readFileAsDataURL(file).then(contents => { + expect(contents).toBe('data:image/png;base64,Zm9v'); + }); + }); + }); }); diff --git a/spec/frontend/import_projects/components/bitbucket_status_table_spec.js b/spec/frontend/import_projects/components/bitbucket_status_table_spec.js new file mode 100644 index 00000000000..132ccd0e324 --- /dev/null +++ b/spec/frontend/import_projects/components/bitbucket_status_table_spec.js @@ -0,0 +1,59 @@ +import { nextTick } from 'vue'; +import { shallowMount } from '@vue/test-utils'; + +import { GlAlert } from '@gitlab/ui'; +import BitbucketStatusTable from '~/import_projects/components/bitbucket_status_table.vue'; +import ImportProjectsTable from '~/import_projects/components/import_projects_table.vue'; + +const ImportProjectsTableStub = { + name: 'ImportProjectsTable', + template: + '<div><slot name="incompatible-repos-warning"></slot><slot name="actions"></slot></div>', +}; + +describe('BitbucketStatusTable', () => { + let wrapper; + + afterEach(() => { + if (wrapper) { + wrapper.destroy(); + wrapper = null; + } + }); + + function createComponent(propsData, importProjectsTableStub = true, slots) { + wrapper = shallowMount(BitbucketStatusTable, { + propsData, + stubs: { + ImportProjectsTable: importProjectsTableStub, + }, + slots, + }); + } + + it('renders import table component', () => { + createComponent({ providerTitle: 'Test' }); + expect(wrapper.contains(ImportProjectsTable)).toBe(true); + }); + + it('passes alert in incompatible-repos-warning slot', () => { + createComponent({ providerTitle: 'Test' }, ImportProjectsTableStub); + expect(wrapper.find(GlAlert).exists()).toBe(true); + }); + + it('passes actions slot to import project table component', () => { + const actionsSlotContent = 'DEMO'; + createComponent({ providerTitle: 'Test' }, ImportProjectsTableStub, { + actions: actionsSlotContent, + }); + expect(wrapper.find(ImportProjectsTable).text()).toBe(actionsSlotContent); + }); + + it('dismisses alert when requested', async () => { + createComponent({ providerTitle: 'Test' }, ImportProjectsTableStub); + wrapper.find(GlAlert).vm.$emit('dismiss'); + await nextTick(); + + expect(wrapper.find(GlAlert).exists()).toBe(false); + }); +}); diff --git a/spec/frontend/import_projects/components/import_projects_table_spec.js b/spec/frontend/import_projects/components/import_projects_table_spec.js index 9491b52c888..419d67e239f 100644 --- a/spec/frontend/import_projects/components/import_projects_table_spec.js +++ b/spec/frontend/import_projects/components/import_projects_table_spec.js @@ -1,11 +1,24 @@ +import { nextTick } from 'vue'; import Vuex from 'vuex'; -import { createLocalVue, mount } from '@vue/test-utils'; -import { state, actions, getters, mutations } from '~/import_projects/store'; -import importProjectsTable from '~/import_projects/components/import_projects_table.vue'; -import STATUS_MAP from '~/import_projects/constants'; +import { createLocalVue, shallowMount } from '@vue/test-utils'; +import { GlLoadingIcon, GlButton } from '@gitlab/ui'; +import { state, getters } from '~/import_projects/store'; +import eventHub from '~/import_projects/event_hub'; +import ImportProjectsTable from '~/import_projects/components/import_projects_table.vue'; +import ImportedProjectTableRow from '~/import_projects/components/imported_project_table_row.vue'; +import ProviderRepoTableRow from '~/import_projects/components/provider_repo_table_row.vue'; +import IncompatibleRepoTableRow from '~/import_projects/components/incompatible_repo_table_row.vue'; + +jest.mock('~/import_projects/event_hub', () => ({ + $emit: jest.fn(), +})); describe('ImportProjectsTable', () => { - let vm; + let wrapper; + + const findFilterField = () => + wrapper.find('input[data-qa-selector="githubish_import_filter_field"]'); + const providerTitle = 'THE PROVIDER'; const providerRepo = { id: 10, sanitizedName: 'sanitizedName', fullName: 'fullName' }; const importedProject = { @@ -16,176 +29,175 @@ describe('ImportProjectsTable', () => { importSource: 'importSource', }; - function initStore() { - const stubbedActions = { - ...actions, - fetchJobs: jest.fn(), - fetchRepos: jest.fn(actions.requestRepos), - fetchImport: jest.fn(actions.requestImport), - }; - - const store = new Vuex.Store({ - state: state(), - actions: stubbedActions, - mutations, - getters, - }); - - return store; - } - - function mountComponent() { + const findImportAllButton = () => + wrapper + .findAll(GlButton) + .filter(w => w.props().variant === 'success') + .at(0); + + function createComponent({ + state: initialState, + getters: customGetters, + slots, + filterable, + } = {}) { const localVue = createLocalVue(); localVue.use(Vuex); - const store = initStore(); + const store = new Vuex.Store({ + state: { ...state(), ...initialState }, + getters: { + ...getters, + ...customGetters, + }, + actions: { + fetchRepos: jest.fn(), + fetchReposFiltered: jest.fn(), + fetchJobs: jest.fn(), + stopJobsPolling: jest.fn(), + clearJobsEtagPoll: jest.fn(), + setFilter: jest.fn(), + }, + }); - const component = mount(importProjectsTable, { + wrapper = shallowMount(ImportProjectsTable, { localVue, store, propsData: { providerTitle, + filterable, }, + slots, }); - - return component.vm; } - beforeEach(() => { - vm = mountComponent(); - }); - afterEach(() => { - vm.$destroy(); + if (wrapper) { + wrapper.destroy(); + wrapper = null; + } }); - it('renders a loading icon while repos are loading', () => - vm.$nextTick().then(() => { - expect(vm.$el.querySelector('.js-loading-button-icon')).not.toBeNull(); - })); - - it('renders a table with imported projects and provider repos', () => { - vm.$store.dispatch('receiveReposSuccess', { - importedProjects: [importedProject], - providerRepos: [providerRepo], - namespaces: [{ path: 'path' }], + it('renders a loading icon while repos are loading', () => { + createComponent({ + state: { + isLoadingRepos: true, + }, }); - return vm.$nextTick().then(() => { - expect(vm.$el.querySelector('.js-loading-button-icon')).toBeNull(); - expect(vm.$el.querySelector('.table')).not.toBeNull(); - expect(vm.$el.querySelector('.import-jobs-from-col').innerText).toMatch( - `From ${providerTitle}`, - ); - - expect(vm.$el.querySelector('.js-imported-project')).not.toBeNull(); - expect(vm.$el.querySelector('.js-provider-repo')).not.toBeNull(); - }); + expect(wrapper.contains(GlLoadingIcon)).toBe(true); }); - it('renders an empty state if there are no imported projects or provider repos', () => { - vm.$store.dispatch('receiveReposSuccess', { - importedProjects: [], - providerRepos: [], - namespaces: [], + it('renders a table with imported projects and provider repos', () => { + createComponent({ + state: { + importedProjects: [importedProject], + providerRepos: [providerRepo], + incompatibleRepos: [{ ...providerRepo, id: 11 }], + namespaces: [{ path: 'path' }], + }, }); - return vm.$nextTick().then(() => { - expect(vm.$el.querySelector('.js-loading-button-icon')).toBeNull(); - expect(vm.$el.querySelector('.table')).toBeNull(); - expect(vm.$el.innerText).toMatch(`No ${providerTitle} repositories found`); - }); + expect(wrapper.contains(GlLoadingIcon)).toBe(false); + expect(wrapper.contains('table')).toBe(true); + expect( + wrapper + .findAll('th') + .filter(w => w.text() === `From ${providerTitle}`) + .isEmpty(), + ).toBe(false); + + expect(wrapper.contains(ProviderRepoTableRow)).toBe(true); + expect(wrapper.contains(ImportedProjectTableRow)).toBe(true); + expect(wrapper.contains(IncompatibleRepoTableRow)).toBe(true); }); - it('shows loading spinner when bulk import button is clicked', () => { - vm.$store.dispatch('receiveReposSuccess', { - importedProjects: [], - providerRepos: [providerRepo], - namespaces: [{ path: 'path' }], - }); - - return vm - .$nextTick() - .then(() => { - expect(vm.$el.querySelector('.js-imported-project')).toBeNull(); - expect(vm.$el.querySelector('.js-provider-repo')).not.toBeNull(); - - vm.$el.querySelector('.js-import-all').click(); - }) - .then(() => vm.$nextTick()) - .then(() => { - expect(vm.$el.querySelector('.js-import-all .js-loading-button-icon')).not.toBeNull(); + it.each` + hasIncompatibleRepos | buttonText + ${false} | ${'Import all repositories'} + ${true} | ${'Import all compatible repositories'} + `( + 'import all button has "$buttonText" text when hasIncompatibleRepos is $hasIncompatibleRepos', + ({ hasIncompatibleRepos, buttonText }) => { + createComponent({ + state: { + providerRepos: [providerRepo], + }, + getters: { + hasIncompatibleRepos: () => hasIncompatibleRepos, + }, }); - }); - it('imports provider repos if bulk import button is clicked', () => { - mountComponent(); + expect(findImportAllButton().text()).toBe(buttonText); + }, + ); - vm.$store.dispatch('receiveReposSuccess', { - importedProjects: [], - providerRepos: [providerRepo], - namespaces: [{ path: 'path' }], + it('renders an empty state if there are no projects available', () => { + createComponent({ + state: { + importedProjects: [], + providerRepos: [], + incompatibleProjects: [], + }, }); - return vm - .$nextTick() - .then(() => { - expect(vm.$el.querySelector('.js-imported-project')).toBeNull(); - expect(vm.$el.querySelector('.js-provider-repo')).not.toBeNull(); - - vm.$store.dispatch('receiveImportSuccess', { importedProject, repoId: providerRepo.id }); - }) - .then(() => vm.$nextTick()) - .then(() => { - expect(vm.$el.querySelector('.js-imported-project')).not.toBeNull(); - expect(vm.$el.querySelector('.js-provider-repo')).toBeNull(); - }); + expect(wrapper.contains(ProviderRepoTableRow)).toBe(false); + expect(wrapper.contains(ImportedProjectTableRow)).toBe(false); + expect(wrapper.text()).toContain(`No ${providerTitle} repositories found`); }); - it('polls to update the status of imported projects', () => { - const updatedProjects = [ - { - id: importedProject.id, - importStatus: 'finished', + it('sends importAll event when import button is clicked', async () => { + createComponent({ + state: { + providerRepos: [providerRepo], }, - ]; - - vm.$store.dispatch('receiveReposSuccess', { - importedProjects: [importedProject], - providerRepos: [], - namespaces: [{ path: 'path' }], }); - return vm - .$nextTick() - .then(() => { - const statusObject = STATUS_MAP[importedProject.importStatus]; + findImportAllButton().vm.$emit('click'); + await nextTick(); + expect(eventHub.$emit).toHaveBeenCalledWith('importAll'); + }); - expect(vm.$el.querySelector('.js-imported-project')).not.toBeNull(); - expect(vm.$el.querySelector(`.${statusObject.textClass}`).textContent).toMatch( - statusObject.text, - ); + it('shows loading spinner when import is in progress', () => { + createComponent({ + getters: { + isImportingAnyRepo: () => true, + }, + }); - expect(vm.$el.querySelector(`.ic-status_${statusObject.icon}`)).not.toBeNull(); + expect(findImportAllButton().props().loading).toBe(true); + }); - vm.$store.dispatch('receiveJobsSuccess', updatedProjects); - }) - .then(() => vm.$nextTick()) - .then(() => { - const statusObject = STATUS_MAP[updatedProjects[0].importStatus]; + it('renders filtering input field by default', () => { + createComponent(); + expect(findFilterField().exists()).toBe(true); + }); - expect(vm.$el.querySelector('.js-imported-project')).not.toBeNull(); - expect(vm.$el.querySelector(`.${statusObject.textClass}`).textContent).toMatch( - statusObject.text, - ); + it('does not render filtering input field when filterable is false', () => { + createComponent({ filterable: false }); + expect(findFilterField().exists()).toBe(false); + }); - expect(vm.$el.querySelector(`.ic-status_${statusObject.icon}`)).not.toBeNull(); + it.each` + hasIncompatibleRepos | shouldRenderSlot | action + ${false} | ${false} | ${'does not render'} + ${true} | ${true} | ${'render'} + `( + '$action incompatible-repos-warning slot if hasIncompatibleRepos is $hasIncompatibleRepos', + ({ hasIncompatibleRepos, shouldRenderSlot }) => { + const INCOMPATIBLE_TEXT = 'INCOMPATIBLE!'; + + createComponent({ + getters: { + hasIncompatibleRepos: () => hasIncompatibleRepos, + }, + + slots: { + 'incompatible-repos-warning': INCOMPATIBLE_TEXT, + }, }); - }); - it('renders filtering input field', () => { - expect( - vm.$el.querySelector('input[data-qa-selector="githubish_import_filter_field"]'), - ).not.toBeNull(); - }); + expect(wrapper.text().includes(INCOMPATIBLE_TEXT)).toBe(shouldRenderSlot); + }, + ); }); diff --git a/spec/frontend/import_projects/components/provider_repo_table_row_spec.js b/spec/frontend/import_projects/components/provider_repo_table_row_spec.js index 8be645c496f..f5e5141eac8 100644 --- a/spec/frontend/import_projects/components/provider_repo_table_row_spec.js +++ b/spec/frontend/import_projects/components/provider_repo_table_row_spec.js @@ -6,7 +6,7 @@ import STATUS_MAP, { STATUSES } from '~/import_projects/constants'; describe('ProviderRepoTableRow', () => { let vm; - const fetchImport = jest.fn((context, data) => actions.requestImport(context, data)); + const fetchImport = jest.fn(); const importPath = '/import-path'; const defaultTargetNamespace = 'user'; const ciCdOnly = true; @@ -17,11 +17,11 @@ describe('ProviderRepoTableRow', () => { providerLink: 'providerLink', }; - function initStore() { + function initStore(initialState) { const stubbedActions = { ...actions, fetchImport }; const store = new Vuex.Store({ - state: state(), + state: { ...state(), ...initialState }, actions: stubbedActions, mutations, getters, @@ -30,12 +30,11 @@ describe('ProviderRepoTableRow', () => { return store; } - function mountComponent() { + function mountComponent(initialState) { const localVue = createLocalVue(); localVue.use(Vuex); - const store = initStore(); - store.dispatch('setInitialData', { importPath, defaultTargetNamespace, ciCdOnly }); + const store = initStore({ importPath, defaultTargetNamespace, ciCdOnly, ...initialState }); const component = mount(providerRepoTableRow, { localVue, diff --git a/spec/frontend/import_projects/store/actions_spec.js b/spec/frontend/import_projects/store/actions_spec.js index 4954513715e..1f2882a2532 100644 --- a/spec/frontend/import_projects/store/actions_spec.js +++ b/spec/frontend/import_projects/store/actions_spec.js @@ -4,7 +4,6 @@ import { TEST_HOST } from 'helpers/test_constants'; import axios from '~/lib/utils/axios_utils'; import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils'; import { - SET_INITIAL_DATA, REQUEST_REPOS, RECEIVE_REPOS_SUCCESS, RECEIVE_REPOS_ERROR, @@ -14,14 +13,7 @@ import { RECEIVE_JOBS_SUCCESS, } from '~/import_projects/store/mutation_types'; import { - setInitialData, - requestRepos, - receiveReposSuccess, - receiveReposError, fetchRepos, - requestImport, - receiveImportSuccess, - receiveImportError, fetchImport, receiveJobsSuccess, fetchJobs, @@ -32,7 +24,6 @@ import state from '~/import_projects/store/state'; describe('import_projects store actions', () => { let localState; - const repoId = 1; const repos = [{ id: 1 }, { id: 2 }]; const importPayload = { newName: 'newName', targetNamespace: 'targetNamespace', repo: { id: 1 } }; @@ -40,61 +31,6 @@ describe('import_projects store actions', () => { localState = state(); }); - describe('setInitialData', () => { - it(`commits ${SET_INITIAL_DATA} mutation`, done => { - const initialData = { - reposPath: 'reposPath', - provider: 'provider', - jobsPath: 'jobsPath', - importPath: 'impapp/assets/javascripts/vue_shared/components/select2_select.vueortPath', - defaultTargetNamespace: 'defaultTargetNamespace', - ciCdOnly: 'ciCdOnly', - canSelectNamespace: 'canSelectNamespace', - }; - - testAction( - setInitialData, - initialData, - localState, - [{ type: SET_INITIAL_DATA, payload: initialData }], - [], - done, - ); - }); - }); - - describe('requestRepos', () => { - it(`requestRepos commits ${REQUEST_REPOS} mutation`, done => { - testAction( - requestRepos, - null, - localState, - [{ type: REQUEST_REPOS, payload: null }], - [], - done, - ); - }); - }); - - describe('receiveReposSuccess', () => { - it(`commits ${RECEIVE_REPOS_SUCCESS} mutation`, done => { - testAction( - receiveReposSuccess, - repos, - localState, - [{ type: RECEIVE_REPOS_SUCCESS, payload: repos }], - [], - done, - ); - }); - }); - - describe('receiveReposError', () => { - it(`commits ${RECEIVE_REPOS_ERROR} mutation`, done => { - testAction(receiveReposError, repos, localState, [{ type: RECEIVE_REPOS_ERROR }], [], done); - }); - }); - describe('fetchRepos', () => { let mock; const payload = { imported_projects: [{}], provider_repos: [{}], namespaces: [{}] }; @@ -106,39 +42,33 @@ describe('import_projects store actions', () => { afterEach(() => mock.restore()); - it('dispatches stopJobsPolling, requestRepos and receiveReposSuccess actions on a successful request', done => { + it('dispatches stopJobsPolling actions and commits REQUEST_REPOS, RECEIVE_REPOS_SUCCESS mutations on a successful request', () => { mock.onGet(`${TEST_HOST}/endpoint.json`).reply(200, payload); - testAction( + return testAction( fetchRepos, null, localState, - [], [ - { type: 'stopJobsPolling' }, - { type: 'requestRepos' }, + { type: REQUEST_REPOS }, { - type: 'receiveReposSuccess', + type: RECEIVE_REPOS_SUCCESS, payload: convertObjectPropsToCamelCase(payload, { deep: true }), }, - { - type: 'fetchJobs', - }, ], - done, + [{ type: 'stopJobsPolling' }, { type: 'fetchJobs' }], ); }); - it('dispatches stopJobsPolling, requestRepos and receiveReposError actions on an unsuccessful request', done => { + it('dispatches stopJobsPolling action and commits REQUEST_REPOS, RECEIVE_REPOS_ERROR mutations on an unsuccessful request', () => { mock.onGet(`${TEST_HOST}/endpoint.json`).reply(500); - testAction( + return testAction( fetchRepos, null, localState, - [], - [{ type: 'stopJobsPolling' }, { type: 'requestRepos' }, { type: 'receiveReposError' }], - done, + [{ type: REQUEST_REPOS }, { type: RECEIVE_REPOS_ERROR }], + [{ type: 'stopJobsPolling' }], ); }); @@ -147,72 +77,26 @@ describe('import_projects store actions', () => { localState.filter = 'filter'; }); - it('fetches repos with filter applied', done => { + it('fetches repos with filter applied', () => { mock.onGet(`${TEST_HOST}/endpoint.json?filter=filter`).reply(200, payload); - testAction( + return testAction( fetchRepos, null, localState, - [], [ - { type: 'stopJobsPolling' }, - { type: 'requestRepos' }, + { type: REQUEST_REPOS }, { - type: 'receiveReposSuccess', + type: RECEIVE_REPOS_SUCCESS, payload: convertObjectPropsToCamelCase(payload, { deep: true }), }, - { - type: 'fetchJobs', - }, ], - done, + [{ type: 'stopJobsPolling' }, { type: 'fetchJobs' }], ); }); }); }); - describe('requestImport', () => { - it(`commits ${REQUEST_IMPORT} mutation`, done => { - testAction( - requestImport, - repoId, - localState, - [{ type: REQUEST_IMPORT, payload: repoId }], - [], - done, - ); - }); - }); - - describe('receiveImportSuccess', () => { - it(`commits ${RECEIVE_IMPORT_SUCCESS} mutation`, done => { - const payload = { importedProject: { name: 'imported/project' }, repoId: 2 }; - - testAction( - receiveImportSuccess, - payload, - localState, - [{ type: RECEIVE_IMPORT_SUCCESS, payload }], - [], - done, - ); - }); - }); - - describe('receiveImportError', () => { - it(`commits ${RECEIVE_IMPORT_ERROR} mutation`, done => { - testAction( - receiveImportError, - repoId, - localState, - [{ type: RECEIVE_IMPORT_ERROR, payload: repoId }], - [], - done, - ); - }); - }); - describe('fetchImport', () => { let mock; @@ -223,56 +107,53 @@ describe('import_projects store actions', () => { afterEach(() => mock.restore()); - it('dispatches requestImport and receiveImportSuccess actions on a successful request', done => { + it('commits REQUEST_IMPORT and REQUEST_IMPORT_SUCCESS mutations on a successful request', () => { const importedProject = { name: 'imported/project' }; const importRepoId = importPayload.repo.id; mock.onPost(`${TEST_HOST}/endpoint.json`).reply(200, importedProject); - testAction( + return testAction( fetchImport, importPayload, localState, - [], [ - { type: 'requestImport', payload: importRepoId }, + { type: REQUEST_IMPORT, payload: importRepoId }, { - type: 'receiveImportSuccess', + type: RECEIVE_IMPORT_SUCCESS, payload: { importedProject: convertObjectPropsToCamelCase(importedProject, { deep: true }), repoId: importRepoId, }, }, ], - done, + [], ); }); - it('dispatches requestImport and receiveImportSuccess actions on an unsuccessful request', done => { + it('commits REQUEST_IMPORT and RECEIVE_IMPORT_ERROR on an unsuccessful request', () => { mock.onPost(`${TEST_HOST}/endpoint.json`).reply(500); - testAction( + return testAction( fetchImport, importPayload, localState, - [], [ - { type: 'requestImport', payload: importPayload.repo.id }, - { type: 'receiveImportError', payload: { repoId: importPayload.repo.id } }, + { type: REQUEST_IMPORT, payload: importPayload.repo.id }, + { type: RECEIVE_IMPORT_ERROR, payload: importPayload.repo.id }, ], - done, + [], ); }); }); describe('receiveJobsSuccess', () => { - it(`commits ${RECEIVE_JOBS_SUCCESS} mutation`, done => { - testAction( + it(`commits ${RECEIVE_JOBS_SUCCESS} mutation`, () => { + return testAction( receiveJobsSuccess, repos, localState, [{ type: RECEIVE_JOBS_SUCCESS, payload: repos }], [], - done, ); }); }); @@ -293,21 +174,20 @@ describe('import_projects store actions', () => { afterEach(() => mock.restore()); - it('dispatches requestJobs and receiveJobsSuccess actions on a successful request', done => { + it('commits RECEIVE_JOBS_SUCCESS mutation on a successful request', async () => { mock.onGet(`${TEST_HOST}/endpoint.json`).reply(200, updatedProjects); - testAction( + await testAction( fetchJobs, null, localState, - [], [ { - type: 'receiveJobsSuccess', + type: RECEIVE_JOBS_SUCCESS, payload: convertObjectPropsToCamelCase(updatedProjects, { deep: true }), }, ], - done, + [], ); }); @@ -316,21 +196,20 @@ describe('import_projects store actions', () => { localState.filter = 'filter'; }); - it('fetches realtime changes with filter applied', done => { + it('fetches realtime changes with filter applied', () => { mock.onGet(`${TEST_HOST}/endpoint.json?filter=filter`).reply(200, updatedProjects); - testAction( + return testAction( fetchJobs, null, localState, - [], [ { - type: 'receiveJobsSuccess', + type: RECEIVE_JOBS_SUCCESS, payload: convertObjectPropsToCamelCase(updatedProjects, { deep: true }), }, ], - done, + [], ); }); }); diff --git a/spec/frontend/import_projects/store/getters_spec.js b/spec/frontend/import_projects/store/getters_spec.js index e5e4a95f473..93d1ed89783 100644 --- a/spec/frontend/import_projects/store/getters_spec.js +++ b/spec/frontend/import_projects/store/getters_spec.js @@ -2,6 +2,7 @@ import { namespaceSelectOptions, isImportingAnyRepo, hasProviderRepos, + hasIncompatibleRepos, hasImportedProjects, } from '~/import_projects/store/getters'; import state from '~/import_projects/store/state'; @@ -80,4 +81,18 @@ describe('import_projects store getters', () => { expect(hasImportedProjects(localState)).toBe(false); }); }); + + describe('hasIncompatibleRepos', () => { + it('returns true if there are any incompatibleProjects', () => { + localState.incompatibleRepos = new Array(1); + + expect(hasIncompatibleRepos(localState)).toBe(true); + }); + + it('returns false if there are no incompatibleProjects', () => { + localState.incompatibleRepos = []; + + expect(hasIncompatibleRepos(localState)).toBe(false); + }); + }); }); diff --git a/spec/frontend/importer_status_spec.js b/spec/frontend/importer_status_spec.js new file mode 100644 index 00000000000..4ef74a2fe84 --- /dev/null +++ b/spec/frontend/importer_status_spec.js @@ -0,0 +1,141 @@ +import MockAdapter from 'axios-mock-adapter'; +import { ImporterStatus } from '~/importer_status'; +import axios from '~/lib/utils/axios_utils'; + +describe('Importer Status', () => { + let instance; + let mock; + + beforeEach(() => { + mock = new MockAdapter(axios); + }); + + afterEach(() => { + mock.restore(); + }); + + describe('addToImport', () => { + const importUrl = '/import_url'; + const fixtures = ` + <table> + <tr id="repo_123"> + <td class="import-target"></td> + <td class="import-actions job-status"> + <button name="button" type="submit" class="btn btn-import js-add-to-import"> + </button> + </td> + </tr> + </table> + `; + + beforeEach(() => { + setFixtures(fixtures); + jest.spyOn(ImporterStatus.prototype, 'initStatusPage').mockImplementation(() => {}); + jest.spyOn(ImporterStatus.prototype, 'setAutoUpdate').mockImplementation(() => {}); + instance = new ImporterStatus({ + jobsUrl: '', + importUrl, + }); + }); + + it('sets table row to active after post request', done => { + mock.onPost(importUrl).reply(200, { + id: 1, + full_path: '/full_path', + }); + + instance + .addToImport({ + currentTarget: document.querySelector('.js-add-to-import'), + }) + .then(() => { + expect(document.querySelector('tr').classList.contains('table-active')).toEqual(true); + done(); + }) + .catch(done.fail); + }); + + it('shows error message after failed POST request', done => { + setFixtures(`${fixtures}<div class="flash-container"></div>`); + + mock.onPost(importUrl).reply(422, { + errors: 'You forgot your lunch', + }); + + instance + .addToImport({ + currentTarget: document.querySelector('.js-add-to-import'), + }) + .then(() => { + const flashMessage = document.querySelector('.flash-text'); + + expect(flashMessage.textContent.trim()).toEqual( + 'An error occurred while importing project: You forgot your lunch', + ); + done(); + }) + .catch(done.fail); + }); + }); + + describe('autoUpdate', () => { + const jobsUrl = '/jobs_url'; + + beforeEach(() => { + const div = document.createElement('div'); + div.innerHTML = ` + <div id="project_1"> + <div class="job-status"> + </div> + </div> + `; + + document.body.appendChild(div); + + jest.spyOn(ImporterStatus.prototype, 'initStatusPage').mockImplementation(() => {}); + jest.spyOn(ImporterStatus.prototype, 'setAutoUpdate').mockImplementation(() => {}); + instance = new ImporterStatus({ + jobsUrl, + }); + }); + + function setupMock(importStatus) { + mock.onGet(jobsUrl).reply(200, [ + { + id: 1, + import_status: importStatus, + }, + ]); + } + + function expectJobStatus(done, status) { + instance + .autoUpdate() + .then(() => { + expect(document.querySelector('#project_1').innerText.trim()).toEqual(status); + done(); + }) + .catch(done.fail); + } + + it('sets the job status to done', done => { + setupMock('finished'); + expectJobStatus(done, 'Done'); + }); + + it('sets the job status to scheduled', done => { + setupMock('scheduled'); + expectJobStatus(done, 'Scheduled'); + }); + + it('sets the job status to started', done => { + setupMock('started'); + expectJobStatus(done, 'Started'); + }); + + it('sets the job status to custom status', done => { + setupMock('custom status'); + expectJobStatus(done, 'custom status'); + }); + }); +}); diff --git a/spec/frontend/integrations/edit/components/dynamic_field_spec.js b/spec/frontend/integrations/edit/components/dynamic_field_spec.js new file mode 100644 index 00000000000..e5710641f81 --- /dev/null +++ b/spec/frontend/integrations/edit/components/dynamic_field_spec.js @@ -0,0 +1,179 @@ +import { mount } from '@vue/test-utils'; +import DynamicField from '~/integrations/edit/components/dynamic_field.vue'; +import { GlFormGroup, GlFormCheckbox, GlFormInput, GlFormSelect, GlFormTextarea } from '@gitlab/ui'; + +describe('DynamicField', () => { + let wrapper; + + const defaultProps = { + help: 'The URL of the project', + name: 'project_url', + placeholder: 'https://jira.example.com', + title: 'Project URL', + type: 'text', + value: '1', + }; + + const createComponent = props => { + wrapper = mount(DynamicField, { + propsData: { ...defaultProps, ...props }, + }); + }; + + afterEach(() => { + if (wrapper) { + wrapper.destroy(); + wrapper = null; + } + }); + + const findGlFormGroup = () => wrapper.find(GlFormGroup); + const findGlFormCheckbox = () => wrapper.find(GlFormCheckbox); + const findGlFormInput = () => wrapper.find(GlFormInput); + const findGlFormSelect = () => wrapper.find(GlFormSelect); + const findGlFormTextarea = () => wrapper.find(GlFormTextarea); + + describe('template', () => { + describe('dynamic field', () => { + describe('type is checkbox', () => { + beforeEach(() => { + createComponent({ + type: 'checkbox', + }); + }); + + it('renders GlFormCheckbox', () => { + expect(findGlFormCheckbox().exists()).toBe(true); + }); + + it('does not render other types of input', () => { + expect(findGlFormSelect().exists()).toBe(false); + expect(findGlFormTextarea().exists()).toBe(false); + expect(findGlFormInput().exists()).toBe(false); + }); + }); + + describe('type is select', () => { + beforeEach(() => { + createComponent({ + type: 'select', + choices: [['all', 'All details'], ['standard', 'Standard']], + }); + }); + + it('renders findGlFormSelect', () => { + expect(findGlFormSelect().exists()).toBe(true); + expect(findGlFormSelect().findAll('option')).toHaveLength(2); + }); + + it('does not render other types of input', () => { + expect(findGlFormCheckbox().exists()).toBe(false); + expect(findGlFormTextarea().exists()).toBe(false); + expect(findGlFormInput().exists()).toBe(false); + }); + }); + + describe('type is textarea', () => { + beforeEach(() => { + createComponent({ + type: 'textarea', + }); + }); + + it('renders findGlFormTextarea', () => { + expect(findGlFormTextarea().exists()).toBe(true); + }); + + it('does not render other types of input', () => { + expect(findGlFormCheckbox().exists()).toBe(false); + expect(findGlFormSelect().exists()).toBe(false); + expect(findGlFormInput().exists()).toBe(false); + }); + }); + + describe('type is password', () => { + beforeEach(() => { + createComponent({ + type: 'password', + }); + }); + + it('renders GlFormInput', () => { + expect(findGlFormInput().exists()).toBe(true); + expect(findGlFormInput().attributes('type')).toBe('password'); + }); + + it('does not render other types of input', () => { + expect(findGlFormCheckbox().exists()).toBe(false); + expect(findGlFormSelect().exists()).toBe(false); + expect(findGlFormTextarea().exists()).toBe(false); + }); + }); + + describe('type is text', () => { + beforeEach(() => { + createComponent({ + type: 'text', + required: true, + }); + }); + + it('renders GlFormInput', () => { + expect(findGlFormInput().exists()).toBe(true); + expect(findGlFormInput().attributes()).toMatchObject({ + type: 'text', + id: 'service_project_url', + name: 'service[project_url]', + placeholder: defaultProps.placeholder, + required: 'required', + }); + }); + + it('does not render other types of input', () => { + expect(findGlFormCheckbox().exists()).toBe(false); + expect(findGlFormSelect().exists()).toBe(false); + expect(findGlFormTextarea().exists()).toBe(false); + }); + }); + }); + + describe('help text', () => { + it('renders description with help text', () => { + createComponent(); + + expect( + findGlFormGroup() + .find('small') + .text(), + ).toBe(defaultProps.help); + }); + }); + + describe('label text', () => { + it('renders label with title', () => { + createComponent(); + + expect( + findGlFormGroup() + .find('label') + .text(), + ).toBe(defaultProps.title); + }); + + describe('for password field with some value (hidden by backend)', () => { + it('renders label with new password title', () => { + createComponent({ + type: 'password', + value: 'true', + }); + + expect( + findGlFormGroup() + .find('label') + .text(), + ).toBe(`Enter new ${defaultProps.title}`); + }); + }); + }); + }); +}); diff --git a/spec/frontend/integrations/edit/components/integration_form_spec.js b/spec/frontend/integrations/edit/components/integration_form_spec.js index c93f63b11d0..b598a71cea8 100644 --- a/spec/frontend/integrations/edit/components/integration_form_spec.js +++ b/spec/frontend/integrations/edit/components/integration_form_spec.js @@ -3,6 +3,7 @@ import IntegrationForm from '~/integrations/edit/components/integration_form.vue import ActiveToggle from '~/integrations/edit/components/active_toggle.vue'; import JiraTriggerFields from '~/integrations/edit/components/jira_trigger_fields.vue'; import TriggerFields from '~/integrations/edit/components/trigger_fields.vue'; +import DynamicField from '~/integrations/edit/components/dynamic_field.vue'; describe('IntegrationForm', () => { let wrapper; @@ -95,5 +96,25 @@ describe('IntegrationForm', () => { expect(findTriggerFields().props('type')).toBe(type); }); }); + + describe('fields is present', () => { + it('renders DynamicField for each field', () => { + const fields = [ + { name: 'username', type: 'text' }, + { name: 'API token', type: 'password' }, + ]; + + createComponent({ + fields, + }); + + const dynamicFields = wrapper.findAll(DynamicField); + + expect(dynamicFields).toHaveLength(2); + dynamicFields.wrappers.forEach((field, index) => { + expect(field.props()).toMatchObject(fields[index]); + }); + }); + }); }); }); diff --git a/spec/frontend/issue_show/components/app_spec.js b/spec/frontend/issue_show/components/app_spec.js index a59d6d35ded..d970fd349e7 100644 --- a/spec/frontend/issue_show/components/app_spec.js +++ b/spec/frontend/issue_show/components/app_spec.js @@ -1,10 +1,11 @@ -import Vue from 'vue'; +import { GlIntersectionObserver } from '@gitlab/ui'; +import { mount } from '@vue/test-utils'; import MockAdapter from 'axios-mock-adapter'; import { TEST_HOST } from 'helpers/test_constants'; import axios from '~/lib/utils/axios_utils'; import { visitUrl } from '~/lib/utils/url_utility'; import '~/behaviors/markdown/render_gfm'; -import issuableApp from '~/issue_show/components/app.vue'; +import IssuableApp from '~/issue_show/components/app.vue'; import eventHub from '~/issue_show/event_hub'; import { initialRequest, secondRequest } from '../mock_data'; @@ -17,10 +18,15 @@ jest.mock('~/issue_show/event_hub'); const REALTIME_REQUEST_STACK = [initialRequest, secondRequest]; +const zoomMeetingUrl = 'https://gitlab.zoom.us/j/95919234811'; +const publishedIncidentUrl = 'https://status.com/'; + describe('Issuable output', () => { let mock; let realtimeRequestCount = 0; - let vm; + let wrapper; + + const findStickyHeader = () => wrapper.find('[data-testid="issue-sticky-header"]'); beforeEach(() => { setFixtures(` @@ -39,7 +45,10 @@ describe('Issuable output', () => { </div> `); - const IssuableDescriptionComponent = Vue.extend(issuableApp); + window.IntersectionObserver = class { + disconnect = jest.fn(); + observe = jest.fn(); + }; mock = new MockAdapter(axios); mock @@ -50,13 +59,14 @@ describe('Issuable output', () => { return res; }); - vm = new IssuableDescriptionComponent({ + wrapper = mount(IssuableApp, { propsData: { canUpdate: true, canDestroy: true, endpoint: '/gitlab-org/gitlab-shell/-/issues/9/realtime_changes', updateEndpoint: TEST_HOST, issuableRef: '#1', + issuableStatus: 'opened', initialTitleHtml: '', initialTitleText: '', initialDescriptionHtml: 'test', @@ -67,16 +77,20 @@ describe('Issuable output', () => { projectNamespace: '/', projectPath: '/', issuableTemplateNamesPath: '/issuable-templates-path', + zoomMeetingUrl, + publishedIncidentUrl, }, - }).$mount(); + }); }); afterEach(() => { + delete window.IntersectionObserver; mock.restore(); realtimeRequestCount = 0; - vm.poll.stop(); - vm.$destroy(); + wrapper.vm.poll.stop(); + wrapper.destroy(); + wrapper = null; }); it('should render a title/description/edited and update title/description/edited on update', () => { @@ -84,196 +98,209 @@ describe('Issuable output', () => { return axios .waitForAll() .then(() => { - editedText = vm.$el.querySelector('.edited-text'); + editedText = wrapper.find('.edited-text'); }) .then(() => { expect(document.querySelector('title').innerText).toContain('this is a title (#1)'); - expect(vm.$el.querySelector('.title').innerHTML).toContain('<p>this is a title</p>'); - expect(vm.$el.querySelector('.md').innerHTML).toContain('<p>this is a description!</p>'); - expect(vm.$el.querySelector('.js-task-list-field').value).toContain( + expect(wrapper.find('.title').text()).toContain('this is a title'); + expect(wrapper.find('.md').text()).toContain('this is a description!'); + expect(wrapper.find('.js-task-list-field').element.value).toContain( 'this is a description', ); - expect(formatText(editedText.innerText)).toMatch(/Edited[\s\S]+?by Some User/); - expect(editedText.querySelector('.author-link').href).toMatch(/\/some_user$/); - expect(editedText.querySelector('time')).toBeTruthy(); - expect(vm.state.lock_version).toEqual(1); + expect(formatText(editedText.text())).toMatch(/Edited[\s\S]+?by Some User/); + expect(editedText.find('.author-link').attributes('href')).toMatch(/\/some_user$/); + expect(editedText.find('time').text()).toBeTruthy(); + expect(wrapper.vm.state.lock_version).toEqual(1); }) .then(() => { - vm.poll.makeRequest(); + wrapper.vm.poll.makeRequest(); return axios.waitForAll(); }) .then(() => { expect(document.querySelector('title').innerText).toContain('2 (#1)'); - expect(vm.$el.querySelector('.title').innerHTML).toContain('<p>2</p>'); - expect(vm.$el.querySelector('.md').innerHTML).toContain('<p>42</p>'); - expect(vm.$el.querySelector('.js-task-list-field').value).toContain('42'); - expect(vm.$el.querySelector('.edited-text')).toBeTruthy(); - expect(formatText(vm.$el.querySelector('.edited-text').innerText)).toMatch( + expect(wrapper.find('.title').text()).toContain('2'); + expect(wrapper.find('.md').text()).toContain('42'); + expect(wrapper.find('.js-task-list-field').element.value).toContain('42'); + expect(wrapper.find('.edited-text').text()).toBeTruthy(); + expect(formatText(wrapper.find('.edited-text').text())).toMatch( /Edited[\s\S]+?by Other User/, ); - expect(editedText.querySelector('.author-link').href).toMatch(/\/other_user$/); - expect(editedText.querySelector('time')).toBeTruthy(); - expect(vm.state.lock_version).toEqual(2); + expect(editedText.find('.author-link').attributes('href')).toMatch(/\/other_user$/); + expect(editedText.find('time').text()).toBeTruthy(); + expect(wrapper.vm.state.lock_version).toEqual(2); }); }); it('shows actions if permissions are correct', () => { - vm.showForm = true; + wrapper.vm.showForm = true; - return vm.$nextTick().then(() => { - expect(vm.$el.querySelector('.btn')).not.toBeNull(); + return wrapper.vm.$nextTick().then(() => { + expect(wrapper.contains('.markdown-selector')).toBe(true); }); }); it('does not show actions if permissions are incorrect', () => { - vm.showForm = true; - vm.canUpdate = false; + wrapper.vm.showForm = true; + wrapper.setProps({ canUpdate: false }); - return vm.$nextTick().then(() => { - expect(vm.$el.querySelector('.btn')).toBeNull(); + return wrapper.vm.$nextTick().then(() => { + expect(wrapper.contains('.markdown-selector')).toBe(false); }); }); it('does not update formState if form is already open', () => { - vm.updateAndShowForm(); + wrapper.vm.updateAndShowForm(); - vm.state.titleText = 'testing 123'; + wrapper.vm.state.titleText = 'testing 123'; - vm.updateAndShowForm(); + wrapper.vm.updateAndShowForm(); - return vm.$nextTick().then(() => { - expect(vm.store.formState.title).not.toBe('testing 123'); + return wrapper.vm.$nextTick().then(() => { + expect(wrapper.vm.store.formState.title).not.toBe('testing 123'); }); }); it('opens reCAPTCHA modal if update rejected as spam', () => { let modal; - jest.spyOn(vm.service, 'updateIssuable').mockResolvedValue({ + jest.spyOn(wrapper.vm.service, 'updateIssuable').mockResolvedValue({ data: { recaptcha_html: '<div class="g-recaptcha">recaptcha_html</div>', }, }); - vm.canUpdate = true; - vm.showForm = true; + wrapper.vm.canUpdate = true; + wrapper.vm.showForm = true; - return vm + return wrapper.vm .$nextTick() .then(() => { - vm.$refs.recaptchaModal.scriptSrc = '//scriptsrc'; - return vm.updateIssuable(); + wrapper.vm.$refs.recaptchaModal.scriptSrc = '//scriptsrc'; + return wrapper.vm.updateIssuable(); }) .then(() => { - modal = vm.$el.querySelector('.js-recaptcha-modal'); - - expect(modal.style.display).not.toEqual('none'); - expect(modal.querySelector('.g-recaptcha').textContent).toEqual('recaptcha_html'); + modal = wrapper.find('.js-recaptcha-modal'); + expect(modal.isVisible()).toBe(true); + expect(modal.find('.g-recaptcha').text()).toEqual('recaptcha_html'); expect(document.body.querySelector('.js-recaptcha-script').src).toMatch('//scriptsrc'); }) .then(() => { - modal.querySelector('.close').click(); - return vm.$nextTick(); + modal.find('.close').trigger('click'); + return wrapper.vm.$nextTick(); }) .then(() => { - expect(modal.style.display).toEqual('none'); + expect(modal.isVisible()).toBe(false); expect(document.body.querySelector('.js-recaptcha-script')).toBeNull(); }); }); + describe('Pinned links propagated', () => { + it.each` + prop | value + ${'zoomMeetingUrl'} | ${zoomMeetingUrl} + ${'publishedIncidentUrl'} | ${publishedIncidentUrl} + `('sets the $prop correctly on underlying pinned links', ({ prop, value }) => { + expect(wrapper.vm[prop]).toEqual(value); + expect(wrapper.find(`[data-testid="${prop}"]`).attributes('href')).toBe(value); + }); + }); + describe('updateIssuable', () => { it('fetches new data after update', () => { - const updateStoreSpy = jest.spyOn(vm, 'updateStoreState'); - const getDataSpy = jest.spyOn(vm.service, 'getData'); - jest.spyOn(vm.service, 'updateIssuable').mockResolvedValue({ + const updateStoreSpy = jest.spyOn(wrapper.vm, 'updateStoreState'); + const getDataSpy = jest.spyOn(wrapper.vm.service, 'getData'); + jest.spyOn(wrapper.vm.service, 'updateIssuable').mockResolvedValue({ data: { web_url: window.location.pathname }, }); - return vm.updateIssuable().then(() => { + return wrapper.vm.updateIssuable().then(() => { expect(updateStoreSpy).toHaveBeenCalled(); expect(getDataSpy).toHaveBeenCalled(); }); }); it('correctly updates issuable data', () => { - const spy = jest.spyOn(vm.service, 'updateIssuable').mockResolvedValue({ + const spy = jest.spyOn(wrapper.vm.service, 'updateIssuable').mockResolvedValue({ data: { web_url: window.location.pathname }, }); - return vm.updateIssuable().then(() => { - expect(spy).toHaveBeenCalledWith(vm.formState); + return wrapper.vm.updateIssuable().then(() => { + expect(spy).toHaveBeenCalledWith(wrapper.vm.formState); expect(eventHub.$emit).toHaveBeenCalledWith('close.form'); }); }); it('does not redirect if issue has not moved', () => { - jest.spyOn(vm.service, 'updateIssuable').mockResolvedValue({ + jest.spyOn(wrapper.vm.service, 'updateIssuable').mockResolvedValue({ data: { web_url: window.location.pathname, - confidential: vm.isConfidential, + confidential: wrapper.vm.isConfidential, }, }); - return vm.updateIssuable().then(() => { + return wrapper.vm.updateIssuable().then(() => { expect(visitUrl).not.toHaveBeenCalled(); }); }); it('does not redirect if issue has not moved and user has switched tabs', () => { - jest.spyOn(vm.service, 'updateIssuable').mockResolvedValue({ + jest.spyOn(wrapper.vm.service, 'updateIssuable').mockResolvedValue({ data: { web_url: '', - confidential: vm.isConfidential, + confidential: wrapper.vm.isConfidential, }, }); - return vm.updateIssuable().then(() => { + return wrapper.vm.updateIssuable().then(() => { expect(visitUrl).not.toHaveBeenCalled(); }); }); it('redirects if returned web_url has changed', () => { - jest.spyOn(vm.service, 'updateIssuable').mockResolvedValue({ + jest.spyOn(wrapper.vm.service, 'updateIssuable').mockResolvedValue({ data: { web_url: '/testing-issue-move', - confidential: vm.isConfidential, + confidential: wrapper.vm.isConfidential, }, }); - vm.updateIssuable(); + wrapper.vm.updateIssuable(); - return vm.updateIssuable().then(() => { + return wrapper.vm.updateIssuable().then(() => { expect(visitUrl).toHaveBeenCalledWith('/testing-issue-move'); }); }); describe('shows dialog when issue has unsaved changed', () => { it('confirms on title change', () => { - vm.showForm = true; - vm.state.titleText = 'title has changed'; + wrapper.vm.showForm = true; + wrapper.vm.state.titleText = 'title has changed'; const e = { returnValue: null }; - vm.handleBeforeUnloadEvent(e); - return vm.$nextTick().then(() => { + wrapper.vm.handleBeforeUnloadEvent(e); + + return wrapper.vm.$nextTick().then(() => { expect(e.returnValue).not.toBeNull(); }); }); it('confirms on description change', () => { - vm.showForm = true; - vm.state.descriptionText = 'description has changed'; + wrapper.vm.showForm = true; + wrapper.vm.state.descriptionText = 'description has changed'; const e = { returnValue: null }; - vm.handleBeforeUnloadEvent(e); - return vm.$nextTick().then(() => { + wrapper.vm.handleBeforeUnloadEvent(e); + + return wrapper.vm.$nextTick().then(() => { expect(e.returnValue).not.toBeNull(); }); }); it('does nothing when nothing has changed', () => { const e = { returnValue: null }; - vm.handleBeforeUnloadEvent(e); - return vm.$nextTick().then(() => { + wrapper.vm.handleBeforeUnloadEvent(e); + + return wrapper.vm.$nextTick().then(() => { expect(e.returnValue).toBeNull(); }); }); @@ -281,8 +308,9 @@ describe('Issuable output', () => { describe('error when updating', () => { it('closes form on error', () => { - jest.spyOn(vm.service, 'updateIssuable').mockRejectedValue(); - return vm.updateIssuable().then(() => { + jest.spyOn(wrapper.vm.service, 'updateIssuable').mockRejectedValue(); + + return wrapper.vm.updateIssuable().then(() => { expect(eventHub.$emit).not.toHaveBeenCalledWith('close.form'); expect(document.querySelector('.flash-container .flash-text').innerText.trim()).toBe( `Error updating issue`, @@ -291,12 +319,12 @@ describe('Issuable output', () => { }); it('returns the correct error message for issuableType', () => { - jest.spyOn(vm.service, 'updateIssuable').mockRejectedValue(); - vm.issuableType = 'merge request'; + jest.spyOn(wrapper.vm.service, 'updateIssuable').mockRejectedValue(); + wrapper.setProps({ issuableType: 'merge request' }); - return vm + return wrapper.vm .$nextTick() - .then(vm.updateIssuable) + .then(wrapper.vm.updateIssuable) .then(() => { expect(eventHub.$emit).not.toHaveBeenCalledWith('close.form'); expect(document.querySelector('.flash-container .flash-text').innerText.trim()).toBe( @@ -308,12 +336,12 @@ describe('Issuable output', () => { it('shows error message from backend if exists', () => { const msg = 'Custom error message from backend'; jest - .spyOn(vm.service, 'updateIssuable') + .spyOn(wrapper.vm.service, 'updateIssuable') .mockRejectedValue({ response: { data: { errors: [msg] } } }); - return vm.updateIssuable().then(() => { + return wrapper.vm.updateIssuable().then(() => { expect(document.querySelector('.flash-container .flash-text').innerText.trim()).toBe( - `${vm.defaultErrorMessage}. ${msg}`, + `${wrapper.vm.defaultErrorMessage}. ${msg}`, ); }); }); @@ -322,34 +350,34 @@ describe('Issuable output', () => { describe('deleteIssuable', () => { it('changes URL when deleted', () => { - jest.spyOn(vm.service, 'deleteIssuable').mockResolvedValue({ + jest.spyOn(wrapper.vm.service, 'deleteIssuable').mockResolvedValue({ data: { web_url: '/test', }, }); - return vm.deleteIssuable().then(() => { + return wrapper.vm.deleteIssuable().then(() => { expect(visitUrl).toHaveBeenCalledWith('/test'); }); }); it('stops polling when deleting', () => { - const spy = jest.spyOn(vm.poll, 'stop'); - jest.spyOn(vm.service, 'deleteIssuable').mockResolvedValue({ + const spy = jest.spyOn(wrapper.vm.poll, 'stop'); + jest.spyOn(wrapper.vm.service, 'deleteIssuable').mockResolvedValue({ data: { web_url: '/test', }, }); - return vm.deleteIssuable().then(() => { + return wrapper.vm.deleteIssuable().then(() => { expect(spy).toHaveBeenCalledWith(); }); }); it('closes form on error', () => { - jest.spyOn(vm.service, 'deleteIssuable').mockRejectedValue(); + jest.spyOn(wrapper.vm.service, 'deleteIssuable').mockRejectedValue(); - return vm.deleteIssuable().then(() => { + return wrapper.vm.deleteIssuable().then(() => { expect(eventHub.$emit).not.toHaveBeenCalledWith('close.form'); expect(document.querySelector('.flash-container .flash-text').innerText.trim()).toBe( 'Error deleting issue', @@ -360,23 +388,25 @@ describe('Issuable output', () => { describe('updateAndShowForm', () => { it('shows locked warning if form is open & data is different', () => { - return vm + return wrapper.vm .$nextTick() .then(() => { - vm.updateAndShowForm(); + wrapper.vm.updateAndShowForm(); - vm.poll.makeRequest(); + wrapper.vm.poll.makeRequest(); return new Promise(resolve => { - vm.$watch('formState.lockedWarningVisible', value => { - if (value) resolve(); + wrapper.vm.$watch('formState.lockedWarningVisible', value => { + if (value) { + resolve(); + } }); }); }) .then(() => { - expect(vm.formState.lockedWarningVisible).toEqual(true); - expect(vm.formState.lock_version).toEqual(1); - expect(vm.$el.querySelector('.alert')).not.toBeNull(); + expect(wrapper.vm.formState.lockedWarningVisible).toEqual(true); + expect(wrapper.vm.formState.lock_version).toEqual(1); + expect(wrapper.contains('.alert')).toBe(true); }); }); }); @@ -385,14 +415,14 @@ describe('Issuable output', () => { let formSpy; beforeEach(() => { - formSpy = jest.spyOn(vm, 'updateAndShowForm'); + formSpy = jest.spyOn(wrapper.vm, 'updateAndShowForm'); }); it('shows the form if template names request is successful', () => { const mockData = [{ name: 'Bug' }]; mock.onGet('/issuable-templates-path').reply(() => Promise.resolve([200, mockData])); - return vm.requestTemplatesAndShowForm().then(() => { + return wrapper.vm.requestTemplatesAndShowForm().then(() => { expect(formSpy).toHaveBeenCalledWith(mockData); }); }); @@ -402,7 +432,7 @@ describe('Issuable output', () => { .onGet('/issuable-templates-path') .reply(() => Promise.reject(new Error('something went wrong'))); - return vm.requestTemplatesAndShowForm().then(() => { + return wrapper.vm.requestTemplatesAndShowForm().then(() => { expect(document.querySelector('.flash-container .flash-text').textContent).toContain( 'Error updating issue', ); @@ -414,35 +444,39 @@ describe('Issuable output', () => { describe('show inline edit button', () => { it('should not render by default', () => { - expect(vm.$el.querySelector('.title-container .note-action-button')).toBeDefined(); + expect(wrapper.contains('.btn-edit')).toBe(true); }); it('should render if showInlineEditButton', () => { - vm.showInlineEditButton = true; + wrapper.setProps({ showInlineEditButton: true }); - expect(vm.$el.querySelector('.title-container .note-action-button')).toBeDefined(); + return wrapper.vm.$nextTick(() => { + expect(wrapper.contains('.btn-edit')).toBe(true); + }); }); }); describe('updateStoreState', () => { it('should make a request and update the state of the store', () => { const data = { foo: 1 }; - const getDataSpy = jest.spyOn(vm.service, 'getData').mockResolvedValue({ data }); - const updateStateSpy = jest.spyOn(vm.store, 'updateState').mockImplementation(jest.fn); + const getDataSpy = jest.spyOn(wrapper.vm.service, 'getData').mockResolvedValue({ data }); + const updateStateSpy = jest + .spyOn(wrapper.vm.store, 'updateState') + .mockImplementation(jest.fn); - return vm.updateStoreState().then(() => { + return wrapper.vm.updateStoreState().then(() => { expect(getDataSpy).toHaveBeenCalled(); expect(updateStateSpy).toHaveBeenCalledWith(data); }); }); it('should show error message if store update fails', () => { - jest.spyOn(vm.service, 'getData').mockRejectedValue(); - vm.issuableType = 'merge request'; + jest.spyOn(wrapper.vm.service, 'getData').mockRejectedValue(); + wrapper.setProps({ issuableType: 'merge request' }); - return vm.updateStoreState().then(() => { + return wrapper.vm.updateStoreState().then(() => { expect(document.querySelector('.flash-container .flash-text').innerText.trim()).toBe( - `Error updating ${vm.issuableType}`, + `Error updating ${wrapper.vm.issuableType}`, ); }); }); @@ -450,48 +484,85 @@ describe('Issuable output', () => { describe('issueChanged', () => { beforeEach(() => { - vm.store.formState.title = ''; - vm.store.formState.description = ''; - vm.initialDescriptionText = ''; - vm.initialTitleText = ''; + wrapper.vm.store.formState.title = ''; + wrapper.vm.store.formState.description = ''; + wrapper.setProps({ + initialDescriptionText: '', + initialTitleText: '', + }); }); it('returns true when title is changed', () => { - vm.store.formState.title = 'RandomText'; + wrapper.vm.store.formState.title = 'RandomText'; - expect(vm.issueChanged).toBe(true); + expect(wrapper.vm.issueChanged).toBe(true); }); it('returns false when title is empty null', () => { - vm.store.formState.title = null; + wrapper.vm.store.formState.title = null; - expect(vm.issueChanged).toBe(false); + expect(wrapper.vm.issueChanged).toBe(false); }); it('returns false when `initialTitleText` is null and `formState.title` is empty string', () => { - vm.store.formState.title = ''; - vm.initialTitleText = null; + wrapper.vm.store.formState.title = ''; + wrapper.setProps({ initialTitleText: null }); - expect(vm.issueChanged).toBe(false); + expect(wrapper.vm.issueChanged).toBe(false); }); it('returns true when description is changed', () => { - vm.store.formState.description = 'RandomText'; + wrapper.vm.store.formState.description = 'RandomText'; - expect(vm.issueChanged).toBe(true); + expect(wrapper.vm.issueChanged).toBe(true); }); it('returns false when description is empty null', () => { - vm.store.formState.title = null; + wrapper.vm.store.formState.description = null; - expect(vm.issueChanged).toBe(false); + expect(wrapper.vm.issueChanged).toBe(false); }); it('returns false when `initialDescriptionText` is null and `formState.description` is empty string', () => { - vm.store.formState.description = ''; - vm.initialDescriptionText = null; + wrapper.vm.store.formState.description = ''; + wrapper.setProps({ initialDescriptionText: null }); - expect(vm.issueChanged).toBe(false); + expect(wrapper.vm.issueChanged).toBe(false); + }); + }); + + describe('sticky header', () => { + describe('when title is in view', () => { + it('is not shown', () => { + expect(wrapper.contains('.issue-sticky-header')).toBe(false); + }); + }); + + describe('when title is not in view', () => { + beforeEach(() => { + wrapper.vm.state.titleText = 'Sticky header title'; + wrapper.find(GlIntersectionObserver).vm.$emit('disappear'); + }); + + it('is shown with title', () => { + expect(findStickyHeader().text()).toContain('Sticky header title'); + }); + + it('is shown with Open when status is opened', () => { + wrapper.setProps({ issuableStatus: 'opened' }); + + return wrapper.vm.$nextTick(() => { + expect(findStickyHeader().text()).toContain('Open'); + }); + }); + + it('is shown with Closed when status is closed', () => { + wrapper.setProps({ issuableStatus: 'closed' }); + + return wrapper.vm.$nextTick(() => { + expect(findStickyHeader().text()).toContain('Closed'); + }); + }); }); }); }); diff --git a/spec/frontend/issue_show/components/pinned_links_spec.js b/spec/frontend/issue_show/components/pinned_links_spec.js index 59c919c85d5..007ad4c9a1b 100644 --- a/spec/frontend/issue_show/components/pinned_links_spec.js +++ b/spec/frontend/issue_show/components/pinned_links_spec.js @@ -3,23 +3,18 @@ import { GlLink } from '@gitlab/ui'; import PinnedLinks from '~/issue_show/components/pinned_links.vue'; const plainZoomUrl = 'https://zoom.us/j/123456789'; +const plainStatusUrl = 'https://status.com'; describe('PinnedLinks', () => { let wrapper; - const link = { - get text() { - return wrapper.find(GlLink).text(); - }, - get href() { - return wrapper.find(GlLink).attributes('href'); - }, - }; + const findLinks = () => wrapper.findAll(GlLink); const createComponent = props => { wrapper = shallowMount(PinnedLinks, { propsData: { - zoomMeetingUrl: null, + zoomMeetingUrl: '', + publishedIncidentUrl: '', ...props, }, }); @@ -30,12 +25,29 @@ describe('PinnedLinks', () => { zoomMeetingUrl: `<a href="${plainZoomUrl}">Zoom</a>`, }); - expect(link.text).toBe('Join Zoom meeting'); + expect( + findLinks() + .at(0) + .text(), + ).toBe('Join Zoom meeting'); + }); + + it('displays Status link', () => { + createComponent({ + publishedIncidentUrl: `<a href="${plainStatusUrl}">Status</a>`, + }); + + expect( + findLinks() + .at(0) + .text(), + ).toBe('Published on status page'); }); it('does not render if there are no links', () => { createComponent({ - zoomMeetingUrl: null, + zoomMeetingUrl: '', + publishedIncidentUrl: '', }); expect(wrapper.find(GlLink).exists()).toBe(false); diff --git a/spec/frontend/jira_import/components/jira_import_app_spec.js b/spec/frontend/jira_import/components/jira_import_app_spec.js index 0040e71c192..a21b89f6517 100644 --- a/spec/frontend/jira_import/components/jira_import_app_spec.js +++ b/spec/frontend/jira_import/components/jira_import_app_spec.js @@ -6,14 +6,13 @@ import JiraImportForm from '~/jira_import/components/jira_import_form.vue'; import JiraImportProgress from '~/jira_import/components/jira_import_progress.vue'; import JiraImportSetup from '~/jira_import/components/jira_import_setup.vue'; import initiateJiraImportMutation from '~/jira_import/queries/initiate_jira_import.mutation.graphql'; -import { IMPORT_STATE } from '~/jira_import/utils'; const mountComponent = ({ isJiraConfigured = true, errorMessage = '', selectedProject = 'MTG', showAlert = false, - status = IMPORT_STATE.NONE, + isInProgress = false, loading = false, mutate = jest.fn(() => Promise.resolve()), mountType, @@ -22,14 +21,9 @@ const mountComponent = ({ return mountFunction(JiraImportApp, { propsData: { - isJiraConfigured, inProgressIllustration: 'in-progress-illustration.svg', + isJiraConfigured, issuesPath: 'gitlab-org/gitlab-test/-/issues', - jiraProjects: [ - ['My Jira Project', 'MJP'], - ['My Second Jira Project', 'MSJP'], - ['Migrate to GitLab', 'MTG'], - ], jiraIntegrationPath: 'gitlab-org/gitlab-test/-/services/jira/edit', projectPath: 'gitlab-org/gitlab-test', setupIllustration: 'setup-illustration.svg', @@ -40,7 +34,7 @@ const mountComponent = ({ showAlert, selectedProject, jiraImportDetails: { - status, + isInProgress, imports: [ { jiraProjectKey: 'MTG', @@ -64,6 +58,18 @@ const mountComponent = ({ }, }, ], + mostRecentImport: { + jiraProjectKey: 'MTG', + scheduledAt: '2020-04-09T16:17:18+00:00', + scheduledBy: { + name: 'Jane Doe', + }, + }, + projects: [ + { text: 'My Jira Project (MJP)', value: 'MJP' }, + { text: 'My Second Jira Project (MSJP)', value: 'MSJP' }, + { text: 'Migrate to GitLab (MTG)', value: 'MTG' }, + ], }, }; }, @@ -140,7 +146,7 @@ describe('JiraImportApp', () => { describe('when Jira integration is configured but import is in progress', () => { beforeEach(() => { - wrapper = mountComponent({ status: IMPORT_STATE.SCHEDULED }); + wrapper = mountComponent({ isInProgress: true }); }); it('does not show the "Set up Jira integration" screen', () => { @@ -184,7 +190,7 @@ describe('JiraImportApp', () => { describe('import in progress screen', () => { beforeEach(() => { - wrapper = mountComponent({ status: IMPORT_STATE.SCHEDULED }); + wrapper = mountComponent({ isInProgress: true }); }); it('shows the illustration', () => { diff --git a/spec/frontend/jira_import/mock_data.js b/spec/frontend/jira_import/mock_data.js new file mode 100644 index 00000000000..e82ab53cb6f --- /dev/null +++ b/spec/frontend/jira_import/mock_data.js @@ -0,0 +1,72 @@ +import getJiraImportDetailsQuery from '~/jira_import/queries/get_jira_import_details.query.graphql'; +import { IMPORT_STATE } from '~/jira_import/utils/jira_import_utils'; + +export const fullPath = 'gitlab-org/gitlab-test'; + +export const queryDetails = { + query: getJiraImportDetailsQuery, + variables: { + fullPath, + }, +}; + +export const jiraImportDetailsQueryResponse = { + project: { + jiraImportStatus: IMPORT_STATE.NONE, + jiraImports: { + nodes: [ + { + jiraProjectKey: 'MJP', + scheduledAt: '2020-01-01T12:34:56Z', + scheduledBy: { + name: 'Jane Doe', + __typename: 'User', + }, + __typename: 'JiraImport', + }, + ], + __typename: 'JiraImportConnection', + }, + services: { + nodes: [ + { + projects: { + nodes: [ + { + key: 'MJP', + name: 'My Jira Project', + __typename: 'JiraProject', + }, + { + key: 'MTG', + name: 'Migrate To GitLab', + __typename: 'JiraProject', + }, + ], + __typename: 'JiraProjectConnection', + }, + __typename: 'JiraService', + }, + ], + __typename: 'ServiceConnection', + }, + __typename: 'Project', + }, +}; + +export const jiraImportMutationResponse = { + jiraImportStart: { + clientMutationId: null, + jiraImport: { + jiraProjectKey: 'MTG', + scheduledAt: '2020-02-02T20:20:20Z', + scheduledBy: { + name: 'John Doe', + __typename: 'User', + }, + __typename: 'JiraImport', + }, + errors: [], + __typename: 'JiraImportStartPayload', + }, +}; diff --git a/spec/frontend/jira_import/utils/cache_update_spec.js b/spec/frontend/jira_import/utils/cache_update_spec.js new file mode 100644 index 00000000000..4812510f9b8 --- /dev/null +++ b/spec/frontend/jira_import/utils/cache_update_spec.js @@ -0,0 +1,64 @@ +import { addInProgressImportToStore } from '~/jira_import/utils/cache_update'; +import { IMPORT_STATE } from '~/jira_import/utils/jira_import_utils'; +import { + fullPath, + queryDetails, + jiraImportDetailsQueryResponse, + jiraImportMutationResponse, +} from '../mock_data'; + +describe('addInProgressImportToStore', () => { + const store = { + readQuery: jest.fn(() => jiraImportDetailsQueryResponse), + writeQuery: jest.fn(), + }; + + describe('when updating the cache', () => { + beforeEach(() => { + addInProgressImportToStore(store, jiraImportMutationResponse.jiraImportStart, fullPath); + }); + + it('reads the cache with the correct query', () => { + expect(store.readQuery).toHaveBeenCalledWith(queryDetails); + }); + + it('writes to the cache with the expected arguments', () => { + const expected = { + ...queryDetails, + data: { + project: { + ...jiraImportDetailsQueryResponse.project, + jiraImportStatus: IMPORT_STATE.SCHEDULED, + jiraImports: { + ...jiraImportDetailsQueryResponse.project.jiraImports, + nodes: jiraImportDetailsQueryResponse.project.jiraImports.nodes.concat( + jiraImportMutationResponse.jiraImportStart.jiraImport, + ), + }, + }, + }, + }; + + expect(store.writeQuery).toHaveBeenCalledWith(expected); + }); + }); + + describe('when there are errors', () => { + beforeEach(() => { + const jiraImportStart = { + ...jiraImportMutationResponse.jiraImportStart, + errors: ['There was an error'], + }; + + addInProgressImportToStore(store, jiraImportStart, fullPath); + }); + + it('does not read from the store', () => { + expect(store.readQuery).not.toHaveBeenCalled(); + }); + + it('does not write to the store', () => { + expect(store.writeQuery).not.toHaveBeenCalled(); + }); + }); +}); diff --git a/spec/frontend/jira_import/utils_spec.js b/spec/frontend/jira_import/utils/jira_import_utils_spec.js index 0b1edd6550a..504d399217a 100644 --- a/spec/frontend/jira_import/utils_spec.js +++ b/spec/frontend/jira_import/utils/jira_import_utils_spec.js @@ -1,9 +1,10 @@ import { calculateJiraImportLabel, + extractJiraProjectsOptions, IMPORT_STATE, isFinished, isInProgress, -} from '~/jira_import/utils'; +} from '~/jira_import/utils/jira_import_utils'; describe('isInProgress', () => { it.each` @@ -33,6 +34,34 @@ describe('isFinished', () => { }); }); +describe('extractJiraProjectsOptions', () => { + const jiraProjects = [ + { + key: 'MJP', + name: 'My Jira project', + }, + { + key: 'MTG', + name: 'Migrate to GitLab', + }, + ]; + + const expected = [ + { + text: 'My Jira project (MJP)', + value: 'MJP', + }, + { + text: 'Migrate to GitLab (MTG)', + value: 'MTG', + }, + ]; + + it('returns a list of Jira projects in a format suitable for GlFormSelect', () => { + expect(extractJiraProjectsOptions(jiraProjects)).toEqual(expected); + }); +}); + describe('calculateJiraImportLabel', () => { const jiraImports = [ { jiraProjectKey: 'MTG' }, diff --git a/spec/frontend/jobs/components/artifacts_block_spec.js b/spec/frontend/jobs/components/artifacts_block_spec.js index 9cb56737f3e..11bd645916e 100644 --- a/spec/frontend/jobs/components/artifacts_block_spec.js +++ b/spec/frontend/jobs/components/artifacts_block_spec.js @@ -1,20 +1,32 @@ -import Vue from 'vue'; +import { mount } from '@vue/test-utils'; import { getTimeago } from '~/lib/utils/datetime_utility'; -import component from '~/jobs/components/artifacts_block.vue'; -import mountComponent from '../../helpers/vue_mount_component_helper'; +import ArtifactsBlock from '~/jobs/components/artifacts_block.vue'; import { trimText } from '../../helpers/text_helper'; describe('Artifacts block', () => { - const Component = Vue.extend(component); - let vm; + let wrapper; + + const createWrapper = propsData => + mount(ArtifactsBlock, { + propsData, + }); + + const findArtifactRemoveElt = () => wrapper.find('[data-testid="artifacts-remove-timeline"]'); + const findJobLockedElt = () => wrapper.find('[data-testid="job-locked-message"]'); + const findKeepBtn = () => wrapper.find('[data-testid="keep-artifacts"]'); + const findDownloadBtn = () => wrapper.find('[data-testid="download-artifacts"]'); + const findBrowseBtn = () => wrapper.find('[data-testid="browse-artifacts"]'); const expireAt = '2018-08-14T09:38:49.157Z'; const timeago = getTimeago(); const formattedDate = timeago.format(expireAt); + const lockedText = + 'These artifacts are the latest. They will not be deleted (even if expired) until newer artifacts are available.'; const expiredArtifact = { expire_at: expireAt, expired: true, + locked: false, }; const nonExpiredArtifact = { @@ -23,97 +35,127 @@ describe('Artifacts block', () => { keep_path: '/gitlab-org/gitlab-foss/-/jobs/98314558/artifacts/keep', expire_at: expireAt, expired: false, + locked: false, + }; + + const lockedExpiredArtifact = { + ...expiredArtifact, + download_path: '/gitlab-org/gitlab-foss/-/jobs/98314558/artifacts/download', + browse_path: '/gitlab-org/gitlab-foss/-/jobs/98314558/artifacts/browse', + expired: true, + locked: true, + }; + + const lockedNonExpiredArtifact = { + ...nonExpiredArtifact, + keep_path: undefined, + locked: true, }; afterEach(() => { - vm.$destroy(); + wrapper.destroy(); + wrapper = null; }); - describe('with expired artifacts', () => { - it('renders expired artifact date and info', () => { - vm = mountComponent(Component, { + describe('with expired artifacts that are not locked', () => { + beforeEach(() => { + wrapper = createWrapper({ artifact: expiredArtifact, }); + }); - expect(vm.$el.querySelector('.js-artifacts-removed')).not.toBeNull(); - expect(vm.$el.querySelector('.js-artifacts-will-be-removed')).toBeNull(); - expect(trimText(vm.$el.querySelector('.js-artifacts-removed').textContent)).toEqual( + it('renders expired artifact date and info', () => { + expect(trimText(findArtifactRemoveElt().text())).toBe( `The artifacts were removed ${formattedDate}`, ); }); + + it('does not show the keep button', () => { + expect(findKeepBtn().exists()).toBe(false); + }); + + it('does not show the download button', () => { + expect(findDownloadBtn().exists()).toBe(false); + }); + + it('does not show the browse button', () => { + expect(findBrowseBtn().exists()).toBe(false); + }); }); describe('with artifacts that will expire', () => { - it('renders will expire artifact date and info', () => { - vm = mountComponent(Component, { + beforeEach(() => { + wrapper = createWrapper({ artifact: nonExpiredArtifact, }); + }); - expect(vm.$el.querySelector('.js-artifacts-removed')).toBeNull(); - expect(vm.$el.querySelector('.js-artifacts-will-be-removed')).not.toBeNull(); - expect(trimText(vm.$el.querySelector('.js-artifacts-will-be-removed').textContent)).toEqual( + it('renders will expire artifact date and info', () => { + expect(trimText(findArtifactRemoveElt().text())).toBe( `The artifacts will be removed ${formattedDate}`, ); }); - }); - describe('with keep path', () => { it('renders the keep button', () => { - vm = mountComponent(Component, { - artifact: nonExpiredArtifact, - }); - - expect(vm.$el.querySelector('.js-keep-artifacts')).not.toBeNull(); + expect(findKeepBtn().exists()).toBe(true); }); - }); - describe('without keep path', () => { - it('does not render the keep button', () => { - vm = mountComponent(Component, { - artifact: expiredArtifact, - }); + it('renders the download button', () => { + expect(findDownloadBtn().exists()).toBe(true); + }); - expect(vm.$el.querySelector('.js-keep-artifacts')).toBeNull(); + it('renders the browse button', () => { + expect(findBrowseBtn().exists()).toBe(true); }); }); - describe('with download path', () => { - it('renders the download button', () => { - vm = mountComponent(Component, { - artifact: nonExpiredArtifact, + describe('with expired locked artifacts', () => { + beforeEach(() => { + wrapper = createWrapper({ + artifact: lockedExpiredArtifact, }); + }); - expect(vm.$el.querySelector('.js-download-artifacts')).not.toBeNull(); + it('renders the information that the artefacts are locked', () => { + expect(findArtifactRemoveElt().exists()).toBe(false); + expect(trimText(findJobLockedElt().text())).toBe(lockedText); }); - }); - describe('without download path', () => { it('does not render the keep button', () => { - vm = mountComponent(Component, { - artifact: expiredArtifact, - }); + expect(findKeepBtn().exists()).toBe(false); + }); - expect(vm.$el.querySelector('.js-download-artifacts')).toBeNull(); + it('renders the download button', () => { + expect(findDownloadBtn().exists()).toBe(true); + }); + + it('renders the browse button', () => { + expect(findBrowseBtn().exists()).toBe(true); }); }); - describe('with browse path', () => { - it('does not render the browse button', () => { - vm = mountComponent(Component, { - artifact: nonExpiredArtifact, + describe('with non expired locked artifacts', () => { + beforeEach(() => { + wrapper = createWrapper({ + artifact: lockedNonExpiredArtifact, }); + }); - expect(vm.$el.querySelector('.js-browse-artifacts')).not.toBeNull(); + it('renders the information that the artefacts are locked', () => { + expect(findArtifactRemoveElt().exists()).toBe(false); + expect(trimText(findJobLockedElt().text())).toBe(lockedText); }); - }); - describe('without browse path', () => { - it('does not render the browse button', () => { - vm = mountComponent(Component, { - artifact: expiredArtifact, - }); + it('does not render the keep button', () => { + expect(findKeepBtn().exists()).toBe(false); + }); + + it('renders the download button', () => { + expect(findDownloadBtn().exists()).toBe(true); + }); - expect(vm.$el.querySelector('.js-browse-artifacts')).toBeNull(); + it('renders the browse button', () => { + expect(findBrowseBtn().exists()).toBe(true); }); }); }); diff --git a/spec/frontend/jobs/components/job_log_spec.js b/spec/frontend/jobs/components/job_log_spec.js index 2bb1e0af3a2..a167fe8a134 100644 --- a/spec/frontend/jobs/components/job_log_spec.js +++ b/spec/frontend/jobs/components/job_log_spec.js @@ -10,7 +10,7 @@ describe('Job Log', () => { let vm; const trace = - '<span>Running with gitlab-runner 12.1.0 (de7731dd)<br/></span><span> on docker-auto-scale-com d5ae8d25<br/></span><div class="append-right-8" data-timestamp="1565502765" data-section="prepare-executor" role="button"></div><span class="section section-header js-s-prepare-executor">Using Docker executor with image ruby:2.6 ...<br/></span>'; + '<span>Running with gitlab-runner 12.1.0 (de7731dd)<br/></span><span> on docker-auto-scale-com d5ae8d25<br/></span><div class="gl-mr-3" data-timestamp="1565502765" data-section="prepare-executor" role="button"></div><span class="section section-header js-s-prepare-executor">Using Docker executor with image ruby:2.6 ...<br/></span>'; beforeEach(() => { store = createStore(); diff --git a/spec/frontend/jobs/components/log/mock_data.js b/spec/frontend/jobs/components/log/mock_data.js index d92c009756a..a6a767f7921 100644 --- a/spec/frontend/jobs/components/log/mock_data.js +++ b/spec/frontend/jobs/components/log/mock_data.js @@ -34,7 +34,7 @@ export const utilsMockData = [ content: [ { text: - 'Using Docker executor with image dev.gitlab.org:5005/gitlab/gitlab-build-images:ruby-2.6.5-golang-1.12-git-2.26-lfs-2.9-chrome-73.0-node-12.x-yarn-1.16-postgresql-9.6-graphicsmagick-1.3.34', + 'Using Docker executor with image dev.gitlab.org:5005/gitlab/gitlab-build-images:ruby-2.6.6-golang-1.14-git-2.27-lfs-2.9-chrome-83-node-12.x-yarn-1.21-postgresql-11-graphicsmagick-1.3.34', }, ], section: 'prepare-executor', diff --git a/spec/frontend/labels_issue_sidebar_spec.js b/spec/frontend/labels_issue_sidebar_spec.js new file mode 100644 index 00000000000..fafefca94df --- /dev/null +++ b/spec/frontend/labels_issue_sidebar_spec.js @@ -0,0 +1,99 @@ +/* eslint-disable no-new */ + +import $ from 'jquery'; +import MockAdapter from 'axios-mock-adapter'; +import { shuffle } from 'lodash'; +import axios from '~/lib/utils/axios_utils'; +import IssuableContext from '~/issuable_context'; +import LabelsSelect from '~/labels_select'; + +import '~/gl_dropdown'; +import 'select2'; +import '~/api'; +import '~/create_label'; +import '~/users_select'; + +let saveLabelCount = 0; +let mock; + +function testLabelClicks(labelOrder, done) { + $('.edit-link') + .get(0) + .click(); + + jest.runOnlyPendingTimers(); + + setImmediate(() => { + const labelsInDropdown = $('.dropdown-content a'); + + expect(labelsInDropdown.length).toBe(10); + + const arrayOfLabels = labelsInDropdown.get(); + const randomArrayOfLabels = shuffle(arrayOfLabels); + randomArrayOfLabels.forEach((label, i) => { + if (i < saveLabelCount) { + $(label).click(); + } + }); + + $('.edit-link') + .get(0) + .click(); + + setImmediate(() => { + expect($('.sidebar-collapsed-icon').attr('data-original-title')).toBe(labelOrder); + done(); + }); + }); +} + +describe('Issue dropdown sidebar', () => { + preloadFixtures('static/issue_sidebar_label.html'); + + beforeEach(() => { + loadFixtures('static/issue_sidebar_label.html'); + + mock = new MockAdapter(axios); + + new IssuableContext('{"id":1,"name":"Administrator","username":"root"}'); + new LabelsSelect(); + + mock.onGet('/root/test/labels.json').reply(() => { + const labels = Array(10) + .fill() + .map((_val, i) => ({ + id: i, + title: `test ${i}`, + color: '#5CB85C', + })); + + return [200, labels]; + }); + + mock.onPut('/root/test/issues/2.json').reply(() => { + const labels = Array(saveLabelCount) + .fill() + .map((_val, i) => ({ + id: i, + title: `test ${i}`, + color: '#5CB85C', + })); + + return [200, { labels }]; + }); + }); + + afterEach(() => { + mock.restore(); + }); + + it('changes collapsed tooltip when changing labels when less than 5', done => { + saveLabelCount = 5; + testLabelClicks('test 0, test 1, test 2, test 3, test 4', done); + }); + + it('changes collapsed tooltip when changing labels when more than 5', done => { + saveLabelCount = 6; + testLabelClicks('test 0, test 1, test 2, test 3, test 4, and 1 more', done); + }); +}); diff --git a/spec/frontend/lazy_loader_spec.js b/spec/frontend/lazy_loader_spec.js new file mode 100644 index 00000000000..79a49aedf37 --- /dev/null +++ b/spec/frontend/lazy_loader_spec.js @@ -0,0 +1,153 @@ +import { noop } from 'lodash'; +import LazyLoader from '~/lazy_loader'; +import { TEST_HOST } from 'helpers/test_constants'; +import waitForPromises from './helpers/wait_for_promises'; +import { useMockMutationObserver, useMockIntersectionObserver } from 'helpers/mock_dom_observer'; + +const execImmediately = callback => { + callback(); +}; + +const TEST_PATH = `${TEST_HOST}/img/testimg.png`; + +describe('LazyLoader', () => { + let lazyLoader = null; + + const { trigger: triggerMutation } = useMockMutationObserver(); + const { trigger: triggerIntersection } = useMockIntersectionObserver(); + + const triggerChildMutation = () => { + triggerMutation(document.body, { options: { childList: true, subtree: true } }); + }; + + const triggerIntersectionWithRatio = img => { + triggerIntersection(img, { entry: { intersectionRatio: 0.1 } }); + }; + + const createLazyLoadImage = () => { + const newImg = document.createElement('img'); + newImg.className = 'lazy'; + newImg.setAttribute('data-src', TEST_PATH); + + document.body.appendChild(newImg); + triggerChildMutation(); + + return newImg; + }; + + const createImage = () => { + const newImg = document.createElement('img'); + newImg.setAttribute('src', TEST_PATH); + + document.body.appendChild(newImg); + triggerChildMutation(); + + return newImg; + }; + + beforeEach(() => { + jest.spyOn(window, 'requestAnimationFrame').mockImplementation(execImmediately); + jest.spyOn(window, 'requestIdleCallback').mockImplementation(execImmediately); + jest.spyOn(LazyLoader, 'loadImage'); + }); + + afterEach(() => { + document.body.innerHTML = ''; + }); + + describe.each` + hasIntersectionObserver | trigger + ${true} | ${triggerIntersectionWithRatio} + ${false} | ${noop} + `( + 'with hasIntersectionObserver=$hasIntersectionObserver', + ({ hasIntersectionObserver, trigger }) => { + let origIntersectionObserver; + + beforeEach(() => { + origIntersectionObserver = global.IntersectionObserver; + global.IntersectionObserver = hasIntersectionObserver + ? global.IntersectionObserver + : undefined; + + lazyLoader = new LazyLoader({ + observerNode: 'foobar', + }); + }); + + afterEach(() => { + global.IntersectionObserver = origIntersectionObserver; + lazyLoader.unregister(); + }); + + it('determines intersection observer support', () => { + expect(LazyLoader.supportsIntersectionObserver()).toBe(hasIntersectionObserver); + }); + + it('should copy value from data-src to src for img 1', () => { + const img = createLazyLoadImage(); + + // Doing everything that happens normally in onload + lazyLoader.register(); + + trigger(img); + + expect(LazyLoader.loadImage).toHaveBeenCalledWith(img); + expect(img.getAttribute('src')).toBe(TEST_PATH); + expect(img.getAttribute('data-src')).toBe(null); + expect(img).toHaveClass('js-lazy-loaded'); + }); + + it('should lazy load dynamically added data-src images', async () => { + lazyLoader.register(); + + const newImg = createLazyLoadImage(); + + trigger(newImg); + + await waitForPromises(); + + expect(LazyLoader.loadImage).toHaveBeenCalledWith(newImg); + expect(newImg.getAttribute('src')).toBe(TEST_PATH); + expect(newImg).toHaveClass('js-lazy-loaded'); + }); + + it('should not alter normal images', () => { + const newImg = createImage(); + + lazyLoader.register(); + + expect(LazyLoader.loadImage).not.toHaveBeenCalled(); + expect(newImg).not.toHaveClass('js-lazy-loaded'); + }); + + it('should not load dynamically added pictures if content observer is turned off', async () => { + lazyLoader.register(); + lazyLoader.stopContentObserver(); + + const newImg = createLazyLoadImage(); + + await waitForPromises(); + + expect(LazyLoader.loadImage).not.toHaveBeenCalledWith(newImg); + expect(newImg).not.toHaveClass('js-lazy-loaded'); + }); + + it('should load dynamically added pictures if content observer is turned off and on again', async () => { + lazyLoader.register(); + lazyLoader.stopContentObserver(); + lazyLoader.startContentObserver(); + + const newImg = createLazyLoadImage(); + + trigger(newImg); + + await waitForPromises(); + + expect(LazyLoader.loadImage).toHaveBeenCalledWith(newImg); + expect(newImg.getAttribute('src')).toBe(TEST_PATH); + expect(newImg).toHaveClass('js-lazy-loaded'); + }); + }, + ); +}); diff --git a/spec/frontend/lib/utils/common_utils_spec.js b/spec/frontend/lib/utils/common_utils_spec.js index c8dc90c9ace..f597255538c 100644 --- a/spec/frontend/lib/utils/common_utils_spec.js +++ b/spec/frontend/lib/utils/common_utils_spec.js @@ -1,4 +1,5 @@ import * as commonUtils from '~/lib/utils/common_utils'; +import $ from 'jquery'; describe('common_utils', () => { describe('parseUrl', () => { @@ -211,6 +212,59 @@ describe('common_utils', () => { }); }); + describe('scrollToElement*', () => { + let elem; + const windowHeight = 1000; + const elemTop = 100; + + beforeEach(() => { + elem = document.createElement('div'); + window.innerHeight = windowHeight; + jest.spyOn($.fn, 'animate'); + jest.spyOn($.fn, 'offset').mockReturnValue({ top: elemTop }); + }); + + afterEach(() => { + $.fn.animate.mockRestore(); + $.fn.offset.mockRestore(); + }); + + describe('scrollToElement', () => { + it('scrolls to element', () => { + commonUtils.scrollToElement(elem); + expect($.fn.animate).toHaveBeenCalledWith( + { + scrollTop: elemTop, + }, + expect.any(Number), + ); + }); + + it('scrolls to element with offset', () => { + const offset = 50; + commonUtils.scrollToElement(elem, { offset }); + expect($.fn.animate).toHaveBeenCalledWith( + { + scrollTop: elemTop + offset, + }, + expect.any(Number), + ); + }); + }); + + describe('scrollToElementWithContext', () => { + it('scrolls with context', () => { + commonUtils.scrollToElementWithContext(); + expect($.fn.animate).toHaveBeenCalledWith( + { + scrollTop: elemTop - windowHeight * 0.1, + }, + expect.any(Number), + ); + }); + }); + }); + describe('debounceByAnimationFrame', () => { it('debounces a function to allow a maximum of one call per animation frame', done => { const spy = jest.fn(); @@ -535,6 +589,7 @@ describe('common_utils', () => { id: 1, group_name: 'GitLab.org', absolute_web_url: 'https://gitlab.com/gitlab-org/', + milestones: ['12.3', '12.4'], }, objNested: { project_name: 'GitLab CE', @@ -545,6 +600,7 @@ describe('common_utils', () => { frontend_framework: 'Vue', database: 'PostgreSQL', }, + milestones: ['12.3', '12.4'], }, }, convertObjectPropsToCamelCase: { @@ -552,6 +608,7 @@ describe('common_utils', () => { id: 1, group_name: 'GitLab.org', absolute_web_url: 'https://gitlab.com/gitlab-org/', + milestones: ['12.3', '12.4'], }, objNested: { project_name: 'GitLab CE', @@ -562,6 +619,7 @@ describe('common_utils', () => { frontend_framework: 'Vue', database: 'PostgreSQL', }, + milestones: ['12.3', '12.4'], }, }, convertObjectPropsToSnakeCase: { @@ -569,6 +627,7 @@ describe('common_utils', () => { id: 1, groupName: 'GitLab.org', absoluteWebUrl: 'https://gitlab.com/gitlab-org/', + milestones: ['12.3', '12.4'], }, objNested: { projectName: 'GitLab CE', @@ -579,6 +638,7 @@ describe('common_utils', () => { frontendFramework: 'Vue', database: 'PostgreSQL', }, + milestones: ['12.3', '12.4'], }, }, }; @@ -615,16 +675,19 @@ describe('common_utils', () => { id_converted: 1, group_name_converted: 'GitLab.org', absolute_web_url_converted: 'https://gitlab.com/gitlab-org/', + milestones_converted: ['12.3', '12.4'], }, convertObjectPropsToCamelCase: { id: 1, groupName: 'GitLab.org', absoluteWebUrl: 'https://gitlab.com/gitlab-org/', + milestones: ['12.3', '12.4'], }, convertObjectPropsToSnakeCase: { id: 1, group_name: 'GitLab.org', absolute_web_url: 'https://gitlab.com/gitlab-org/', + milestones: ['12.3', '12.4'], }, }; @@ -642,6 +705,7 @@ describe('common_utils', () => { frontend_framework: 'Vue', database: 'PostgreSQL', }, + milestones_converted: ['12.3', '12.4'], }, convertObjectPropsToCamelCase: { projectName: 'GitLab CE', @@ -652,6 +716,7 @@ describe('common_utils', () => { frontend_framework: 'Vue', database: 'PostgreSQL', }, + milestones: ['12.3', '12.4'], }, convertObjectPropsToSnakeCase: { project_name: 'GitLab CE', @@ -662,6 +727,7 @@ describe('common_utils', () => { frontendFramework: 'Vue', database: 'PostgreSQL', }, + milestones: ['12.3', '12.4'], }, }; @@ -680,6 +746,7 @@ describe('common_utils', () => { frontend_framework_converted: 'Vue', database_converted: 'PostgreSQL', }, + milestones_converted: ['12.3', '12.4'], }, convertObjectPropsToCamelCase: { projectName: 'GitLab CE', @@ -690,6 +757,7 @@ describe('common_utils', () => { frontendFramework: 'Vue', database: 'PostgreSQL', }, + milestones: ['12.3', '12.4'], }, convertObjectPropsToSnakeCase: { project_name: 'GitLab CE', @@ -700,6 +768,7 @@ describe('common_utils', () => { frontend_framework: 'Vue', database: 'PostgreSQL', }, + milestones: ['12.3', '12.4'], }, }; @@ -729,6 +798,7 @@ describe('common_utils', () => { frontend_framework: 'Vue', database: 'PostgreSQL', }, + milestones_converted: ['12.3', '12.4'], }, convertObjectPropsToCamelCase: { projectName: 'GitLab CE', @@ -738,6 +808,7 @@ describe('common_utils', () => { frontend_framework: 'Vue', database: 'PostgreSQL', }, + milestones: ['12.3', '12.4'], }, convertObjectPropsToSnakeCase: { project_name: 'GitLab CE', @@ -747,6 +818,7 @@ describe('common_utils', () => { frontendFramework: 'Vue', database: 'PostgreSQL', }, + milestones: ['12.3', '12.4'], }, }; @@ -772,6 +844,7 @@ describe('common_utils', () => { backend_converted: 'Ruby', frontend_framework_converted: 'Vue', }, + milestones_converted: ['12.3', '12.4'], }, convertObjectPropsToCamelCase: { projectName: 'GitLab CE', @@ -780,6 +853,7 @@ describe('common_utils', () => { backend: 'Ruby', frontendFramework: 'Vue', }, + milestones: ['12.3', '12.4'], }, convertObjectPropsToSnakeCase: { project_name: 'GitLab CE', @@ -788,6 +862,7 @@ describe('common_utils', () => { backend: 'Ruby', frontend_framework: 'Vue', }, + milestones: ['12.3', '12.4'], }, }; @@ -818,6 +893,7 @@ describe('common_utils', () => { frontend_framework: 'Vue', database: 'PostgreSQL', }, + milestones_converted: ['12.3', '12.4'], }, convertObjectPropsToCamelCase: { projectName: 'GitLab CE', @@ -828,6 +904,7 @@ describe('common_utils', () => { frontend_framework: 'Vue', database: 'PostgreSQL', }, + milestones: ['12.3', '12.4'], }, convertObjectPropsToSnakeCase: { project_name: 'GitLab CE', @@ -838,6 +915,7 @@ describe('common_utils', () => { frontendFramework: 'Vue', database: 'PostgreSQL', }, + milestones: ['12.3', '12.4'], }, }; @@ -865,6 +943,7 @@ describe('common_utils', () => { frontend_framework: 'Vue', database_converted: 'PostgreSQL', }, + milestones_converted: ['12.3', '12.4'], }, convertObjectPropsToCamelCase: { projectName: 'GitLab CE', @@ -875,6 +954,7 @@ describe('common_utils', () => { frontend_framework: 'Vue', database: 'PostgreSQL', }, + milestones: ['12.3', '12.4'], }, convertObjectPropsToSnakeCase: { project_name: 'GitLab CE', @@ -885,6 +965,7 @@ describe('common_utils', () => { frontendFramework: 'Vue', database: 'PostgreSQL', }, + milestones: ['12.3', '12.4'], }, }; diff --git a/spec/frontend/lib/utils/text_markdown_spec.js b/spec/frontend/lib/utils/text_markdown_spec.js index 1d616a7da0b..aca299aea0f 100644 --- a/spec/frontend/lib/utils/text_markdown_spec.js +++ b/spec/frontend/lib/utils/text_markdown_spec.js @@ -25,13 +25,13 @@ describe('init markdown', () => { insertMarkdownText({ textArea, text: textArea.value, - tag: '* ', + tag: '- ', blockTag: null, selected: '', wrap: false, }); - expect(textArea.value).toEqual(`${initialValue}* `); + expect(textArea.value).toEqual(`${initialValue}- `); }); it('inserts the tag on a new line if the current one is not empty', () => { @@ -43,13 +43,13 @@ describe('init markdown', () => { insertMarkdownText({ textArea, text: textArea.value, - tag: '* ', + tag: '- ', blockTag: null, selected: '', wrap: false, }); - expect(textArea.value).toEqual(`${initialValue}\n* `); + expect(textArea.value).toEqual(`${initialValue}\n- `); }); it('inserts the tag on the same line if the current line only contains spaces', () => { @@ -61,13 +61,13 @@ describe('init markdown', () => { insertMarkdownText({ textArea, text: textArea.value, - tag: '* ', + tag: '- ', blockTag: null, selected: '', wrap: false, }); - expect(textArea.value).toEqual(`${initialValue}* `); + expect(textArea.value).toEqual(`${initialValue}- `); }); it('inserts the tag on the same line if the current line only contains tabs', () => { @@ -79,13 +79,13 @@ describe('init markdown', () => { insertMarkdownText({ textArea, text: textArea.value, - tag: '* ', + tag: '- ', blockTag: null, selected: '', wrap: false, }); - expect(textArea.value).toEqual(`${initialValue}* `); + expect(textArea.value).toEqual(`${initialValue}- `); }); it('places the cursor inside the tags', () => { diff --git a/spec/frontend/lib/utils/text_utility_spec.js b/spec/frontend/lib/utils/text_utility_spec.js index 4969c591dcd..76e0e435860 100644 --- a/spec/frontend/lib/utils/text_utility_spec.js +++ b/spec/frontend/lib/utils/text_utility_spec.js @@ -126,6 +126,8 @@ describe('text_utility', () => { ${'snake case'} | ${'snake_case'} ${'snake_case'} | ${'snake_case'} ${'snakeCasesnake Case'} | ${'snake_casesnake_case'} + ${'123'} | ${'123'} + ${'123 456'} | ${'123_456'} `('converts string $txt to $result string', ({ txt, result }) => { expect(textUtils.convertToSnakeCase(txt)).toEqual(result); }); @@ -190,6 +192,20 @@ describe('text_utility', () => { 'app/…/…/diff', ); }); + + describe('given a path too long for the maxWidth', () => { + it.each` + path | maxWidth | result + ${'aa/bb/cc'} | ${1} | ${'…'} + ${'aa/bb/cc'} | ${2} | ${'…'} + ${'aa/bb/cc'} | ${3} | ${'…/…'} + ${'aa/bb/cc'} | ${4} | ${'…/…'} + ${'aa/bb/cc'} | ${5} | ${'…/…/…'} + `('truncates ($path, $maxWidth) to $result', ({ path, maxWidth, result }) => { + expect(result.length).toBeLessThanOrEqual(maxWidth); + expect(textUtils.truncatePathMiddleToLength(path, maxWidth)).toEqual(result); + }); + }); }); describe('slugifyWithUnderscore', () => { diff --git a/spec/frontend/lib/utils/url_utility_spec.js b/spec/frontend/lib/utils/url_utility_spec.js index c494033badd..85e680fe216 100644 --- a/spec/frontend/lib/utils/url_utility_spec.js +++ b/spec/frontend/lib/utils/url_utility_spec.js @@ -371,6 +371,23 @@ describe('URL utility', () => { }); }); + describe('isBase64DataUrl', () => { + it.each` + url | valid + ${undefined} | ${false} + ${'http://gitlab.com'} | ${false} + ${'data:image/png;base64,abcdef'} | ${true} + ${'data:application/smil+xml;base64,abcdef'} | ${true} + ${'data:application/vnd.syncml+xml;base64,abcdef'} | ${true} + ${'data:application/vnd.3m.post-it-notes;base64,abcdef'} | ${true} + ${'notaurl'} | ${false} + ${'../relative_url'} | ${false} + ${'<a></a>'} | ${false} + `('returns $valid for $url', ({ url, valid }) => { + expect(urlUtils.isBase64DataUrl(url)).toBe(valid); + }); + }); + describe('relativePathToAbsolute', () => { it.each` path | base | result diff --git a/spec/frontend/line_highlighter_spec.js b/spec/frontend/line_highlighter_spec.js new file mode 100644 index 00000000000..0da1ea1df2d --- /dev/null +++ b/spec/frontend/line_highlighter_spec.js @@ -0,0 +1,268 @@ +/* eslint-disable no-return-assign, no-new, no-underscore-dangle */ + +import $ from 'jquery'; +import LineHighlighter from '~/line_highlighter'; + +describe('LineHighlighter', () => { + const testContext = {}; + + preloadFixtures('static/line_highlighter.html'); + const clickLine = (number, eventData = {}) => { + if ($.isEmptyObject(eventData)) { + return $(`#L${number}`).click(); + } + const e = $.Event('click', eventData); + return $(`#L${number}`).trigger(e); + }; + beforeEach(() => { + loadFixtures('static/line_highlighter.html'); + testContext.class = new LineHighlighter(); + testContext.css = testContext.class.highlightLineClass; + return (testContext.spies = { + __setLocationHash__: jest + .spyOn(testContext.class, '__setLocationHash__') + .mockImplementation(() => {}), + }); + }); + + describe('behavior', () => { + it('highlights one line given in the URL hash', () => { + new LineHighlighter({ hash: '#L13' }); + + expect($('#LC13')).toHaveClass(testContext.css); + }); + + it('highlights one line given in the URL hash with given CSS class name', () => { + const hiliter = new LineHighlighter({ hash: '#L13', highlightLineClass: 'hilite' }); + + expect(hiliter.highlightLineClass).toBe('hilite'); + expect($('#LC13')).toHaveClass('hilite'); + expect($('#LC13')).not.toHaveClass('hll'); + }); + + it('highlights a range of lines given in the URL hash', () => { + new LineHighlighter({ hash: '#L5-25' }); + + expect($(`.${testContext.css}`).length).toBe(21); + for (let line = 5; line <= 25; line += 1) { + expect($(`#LC${line}`)).toHaveClass(testContext.css); + } + }); + + it('scrolls to the first highlighted line on initial load', () => { + const spy = jest.spyOn($, 'scrollTo'); + new LineHighlighter({ hash: '#L5-25' }); + + expect(spy).toHaveBeenCalledWith('#L5', expect.anything()); + }); + + it('discards click events', () => { + const clickSpy = jest.fn(); + + $('a[data-line-number]').click(clickSpy); + + clickLine(13); + + expect(clickSpy.mock.calls[0][0].isDefaultPrevented()).toEqual(true); + }); + + it('handles garbage input from the hash', () => { + const func = () => { + return new LineHighlighter({ fileHolderSelector: '#blob-content-holder' }); + }; + + expect(func).not.toThrow(); + }); + + it('handles hashchange event', () => { + const highlighter = new LineHighlighter(); + + jest.spyOn(highlighter, 'highlightHash').mockImplementation(() => {}); + + window.dispatchEvent(new Event('hashchange'), 'L15'); + + expect(highlighter.highlightHash).toHaveBeenCalled(); + }); + }); + + describe('clickHandler', () => { + it('handles clicking on a child icon element', () => { + const spy = jest.spyOn(testContext.class, 'setHash'); + $('#L13 i') + .mousedown() + .click(); + + expect(spy).toHaveBeenCalledWith(13); + expect($('#LC13')).toHaveClass(testContext.css); + }); + + describe('without shiftKey', () => { + it('highlights one line when clicked', () => { + clickLine(13); + + expect($('#LC13')).toHaveClass(testContext.css); + }); + + it('unhighlights previously highlighted lines', () => { + clickLine(13); + clickLine(20); + + expect($('#LC13')).not.toHaveClass(testContext.css); + expect($('#LC20')).toHaveClass(testContext.css); + }); + + it('sets the hash', () => { + const spy = jest.spyOn(testContext.class, 'setHash'); + clickLine(13); + + expect(spy).toHaveBeenCalledWith(13); + }); + }); + + describe('with shiftKey', () => { + it('sets the hash', () => { + const spy = jest.spyOn(testContext.class, 'setHash'); + clickLine(13); + clickLine(20, { + shiftKey: true, + }); + + expect(spy).toHaveBeenCalledWith(13); + expect(spy).toHaveBeenCalledWith(13, 20); + }); + + describe('without existing highlight', () => { + it('highlights the clicked line', () => { + clickLine(13, { + shiftKey: true, + }); + + expect($('#LC13')).toHaveClass(testContext.css); + expect($(`.${testContext.css}`).length).toBe(1); + }); + + it('sets the hash', () => { + const spy = jest.spyOn(testContext.class, 'setHash'); + clickLine(13, { + shiftKey: true, + }); + + expect(spy).toHaveBeenCalledWith(13); + }); + }); + + describe('with existing single-line highlight', () => { + it('uses existing line as last line when target is lesser', () => { + clickLine(20); + clickLine(15, { + shiftKey: true, + }); + + expect($(`.${testContext.css}`).length).toBe(6); + for (let line = 15; line <= 20; line += 1) { + expect($(`#LC${line}`)).toHaveClass(testContext.css); + } + }); + + it('uses existing line as first line when target is greater', () => { + clickLine(5); + clickLine(10, { + shiftKey: true, + }); + + expect($(`.${testContext.css}`).length).toBe(6); + for (let line = 5; line <= 10; line += 1) { + expect($(`#LC${line}`)).toHaveClass(testContext.css); + } + }); + }); + + describe('with existing multi-line highlight', () => { + beforeEach(() => { + clickLine(10, { + shiftKey: true, + }); + clickLine(13, { + shiftKey: true, + }); + }); + + it('uses target as first line when it is less than existing first line', () => { + clickLine(5, { + shiftKey: true, + }); + + expect($(`.${testContext.css}`).length).toBe(6); + for (let line = 5; line <= 10; line += 1) { + expect($(`#LC${line}`)).toHaveClass(testContext.css); + } + }); + + it('uses target as last line when it is greater than existing first line', () => { + clickLine(15, { + shiftKey: true, + }); + + expect($(`.${testContext.css}`).length).toBe(6); + for (let line = 10; line <= 15; line += 1) { + expect($(`#LC${line}`)).toHaveClass(testContext.css); + } + }); + }); + }); + }); + + describe('hashToRange', () => { + beforeEach(() => { + testContext.subject = testContext.class.hashToRange; + }); + + it('extracts a single line number from the hash', () => { + expect(testContext.subject('#L5')).toEqual([5, null]); + }); + + it('extracts a range of line numbers from the hash', () => { + expect(testContext.subject('#L5-15')).toEqual([5, 15]); + }); + + it('returns [null, null] when the hash is not a line number', () => { + expect(testContext.subject('#foo')).toEqual([null, null]); + }); + }); + + describe('highlightLine', () => { + beforeEach(() => { + testContext.subject = testContext.class.highlightLine; + }); + + it('highlights the specified line', () => { + testContext.subject(13); + + expect($('#LC13')).toHaveClass(testContext.css); + }); + + it('accepts a String-based number', () => { + testContext.subject('13'); + + expect($('#LC13')).toHaveClass(testContext.css); + }); + }); + + describe('setHash', () => { + beforeEach(() => { + testContext.subject = testContext.class.setHash; + }); + + it('sets the location hash for a single line', () => { + testContext.subject(5); + + expect(testContext.spies.__setLocationHash__).toHaveBeenCalledWith('#L5'); + }); + + it('sets the location hash for a range', () => { + testContext.subject(5, 15); + + expect(testContext.spies.__setLocationHash__).toHaveBeenCalledWith('#L5-15'); + }); + }); +}); diff --git a/spec/frontend/logs/components/environment_logs_spec.js b/spec/frontend/logs/components/environment_logs_spec.js index 9046253bdc6..62f3e8a755d 100644 --- a/spec/frontend/logs/components/environment_logs_spec.js +++ b/spec/frontend/logs/components/environment_logs_spec.js @@ -301,11 +301,11 @@ describe('EnvironmentLogs', () => { }); it('refresh button, trace is refreshed', () => { - expect(dispatch).not.toHaveBeenCalledWith(`${module}/fetchLogs`, undefined); + expect(dispatch).not.toHaveBeenCalledWith(`${module}/refreshPodLogs`, undefined); findLogControlButtons().vm.$emit('refresh'); - expect(dispatch).toHaveBeenCalledWith(`${module}/fetchLogs`, undefined); + expect(dispatch).toHaveBeenCalledWith(`${module}/refreshPodLogs`, undefined); }); }); }); diff --git a/spec/frontend/logs/stores/actions_spec.js b/spec/frontend/logs/stores/actions_spec.js index 6199c400e16..e2e3c3d23c6 100644 --- a/spec/frontend/logs/stores/actions_spec.js +++ b/spec/frontend/logs/stores/actions_spec.js @@ -1,6 +1,6 @@ import MockAdapter from 'axios-mock-adapter'; - import testAction from 'helpers/vuex_action_helper'; +import Tracking from '~/tracking'; import * as types from '~/logs/stores/mutation_types'; import { convertToFixedRange } from '~/lib/utils/datetime_range'; import logsPageState from '~/logs/stores/state'; @@ -104,7 +104,7 @@ describe('Logs Store actions', () => { { type: types.SET_CURRENT_POD_NAME, payload: null }, { type: types.SET_SEARCH, payload: '' }, ], - [{ type: 'fetchLogs' }], + [{ type: 'fetchLogs', payload: 'used_search_bar' }], )); it('text search should filter with a search term', () => @@ -116,7 +116,7 @@ describe('Logs Store actions', () => { { type: types.SET_CURRENT_POD_NAME, payload: null }, { type: types.SET_SEARCH, payload: mockSearch }, ], - [{ type: 'fetchLogs' }], + [{ type: 'fetchLogs', payload: 'used_search_bar' }], )); it('pod search should filter with a search term', () => @@ -128,7 +128,7 @@ describe('Logs Store actions', () => { { type: types.SET_CURRENT_POD_NAME, payload: mockPodName }, { type: types.SET_SEARCH, payload: '' }, ], - [{ type: 'fetchLogs' }], + [{ type: 'fetchLogs', payload: 'used_search_bar' }], )); it('pod search should filter with a pod selection and a search term', () => @@ -140,7 +140,7 @@ describe('Logs Store actions', () => { { type: types.SET_CURRENT_POD_NAME, payload: mockPodName }, { type: types.SET_SEARCH, payload: mockSearch }, ], - [{ type: 'fetchLogs' }], + [{ type: 'fetchLogs', payload: 'used_search_bar' }], )); it('pod search should filter with a pod selection and two search terms', () => @@ -152,7 +152,7 @@ describe('Logs Store actions', () => { { type: types.SET_CURRENT_POD_NAME, payload: null }, { type: types.SET_SEARCH, payload: `term1 term2` }, ], - [{ type: 'fetchLogs' }], + [{ type: 'fetchLogs', payload: 'used_search_bar' }], )); it('pod search should filter with a pod selection and a search terms before and after', () => @@ -168,7 +168,7 @@ describe('Logs Store actions', () => { { type: types.SET_CURRENT_POD_NAME, payload: mockPodName }, { type: types.SET_SEARCH, payload: `term1 term2` }, ], - [{ type: 'fetchLogs' }], + [{ type: 'fetchLogs', payload: 'used_search_bar' }], )); }); @@ -179,7 +179,7 @@ describe('Logs Store actions', () => { mockPodName, state, [{ type: types.SET_CURRENT_POD_NAME, payload: mockPodName }], - [{ type: 'fetchLogs' }], + [{ type: 'fetchLogs', payload: 'pod_log_changed' }], )); }); @@ -198,7 +198,7 @@ describe('Logs Store actions', () => { { type: types.REQUEST_ENVIRONMENTS_DATA }, { type: types.RECEIVE_ENVIRONMENTS_DATA_SUCCESS, payload: mockEnvironments }, ], - [{ type: 'fetchLogs' }], + [{ type: 'fetchLogs', payload: 'environment_selected' }], ); }); @@ -471,3 +471,58 @@ describe('Logs Store actions', () => { }); }); }); + +describe('Tracking user interaction', () => { + let commit; + let dispatch; + let state; + let mock; + + beforeEach(() => { + jest.spyOn(Tracking, 'event'); + commit = jest.fn(); + dispatch = jest.fn(); + state = logsPageState(); + state.environments.options = mockEnvironments; + state.environments.current = mockEnvName; + + mock = new MockAdapter(axios); + }); + + afterEach(() => { + mock.reset(); + }); + + describe('Logs with data', () => { + beforeEach(() => { + mock.onGet(mockLogsEndpoint).reply(200, mockResponse); + mock.onGet(mockLogsEndpoint).replyOnce(202); // mock reactive cache + }); + + it('tracks fetched logs with data', () => { + return fetchLogs({ state, commit, dispatch }, 'environment_selected').then(() => { + expect(Tracking.event).toHaveBeenCalledWith(document.body.dataset.page, 'logs_view', { + label: 'environment_selected', + property: 'count', + value: 1, + }); + }); + }); + }); + + describe('Logs without data', () => { + beforeEach(() => { + mock.onGet(mockLogsEndpoint).reply(200, { + ...mockResponse, + logs: [], + }); + mock.onGet(mockLogsEndpoint).replyOnce(202); // mock reactive cache + }); + + it('does not track empty log responses', () => { + return fetchLogs({ state, commit, dispatch }).then(() => { + expect(Tracking.event).not.toHaveBeenCalled(); + }); + }); + }); +}); diff --git a/spec/frontend/matchers.js b/spec/frontend/matchers.js index 35c362d0bf5..53c6a72eea0 100644 --- a/spec/frontend/matchers.js +++ b/spec/frontend/matchers.js @@ -35,4 +35,37 @@ export default { message: () => message, }; }, + toMatchInterpolatedText(received, match) { + let clearReceived; + let clearMatch; + + try { + clearReceived = received + .replace(/\s\s+/gm, ' ') + .replace(/\s\./gm, '.') + .trim(); + } catch (e) { + return { actual: received, message: 'The received value is not a string', pass: false }; + } + try { + clearMatch = match.replace(/%{\w+}/gm, '').trim(); + } catch (e) { + return { message: 'The comparator value is not a string', pass: false }; + } + const pass = clearReceived === clearMatch; + const message = pass + ? () => ` + \n\n + Expected: ${this.utils.printExpected(clearReceived)} + To not equal: ${this.utils.printReceived(clearMatch)} + ` + : () => + ` + \n\n + Expected: ${this.utils.printExpected(clearReceived)} + To equal: ${this.utils.printReceived(clearMatch)} + `; + + return { actual: received, message, pass }; + }, }; diff --git a/spec/frontend/matchers_spec.js b/spec/frontend/matchers_spec.js new file mode 100644 index 00000000000..0a2478f978a --- /dev/null +++ b/spec/frontend/matchers_spec.js @@ -0,0 +1,48 @@ +describe('Custom jest matchers', () => { + describe('toMatchInterpolatedText', () => { + describe('malformed input', () => { + it.each([null, 1, Symbol, Array, Object])( + 'fails graciously if the expected value is %s', + expected => { + expect(expected).not.toMatchInterpolatedText('null'); + }, + ); + }); + describe('malformed matcher', () => { + it.each([null, 1, Symbol, Array, Object])( + 'fails graciously if the matcher is %s', + matcher => { + expect('null').not.toMatchInterpolatedText(matcher); + }, + ); + }); + + describe('positive assertion', () => { + it.each` + htmlString | templateString + ${'foo'} | ${'foo'} + ${'foo'} | ${'foo%{foo}'} + ${'foo '} | ${'foo'} + ${'foo '} | ${'foo%{foo}'} + ${'foo . '} | ${'foo%{foo}.'} + ${'foo bar . '} | ${'foo%{foo} bar.'} + ${'foo\n\nbar . '} | ${'foo%{foo} bar.'} + ${'foo bar . .'} | ${'foo%{fooStart} bar.%{fooEnd}.'} + `('$htmlString equals $templateString', ({ htmlString, templateString }) => { + expect(htmlString).toMatchInterpolatedText(templateString); + }); + }); + + describe('negative assertion', () => { + it.each` + htmlString | templateString + ${'foo'} | ${'bar'} + ${'foo'} | ${'bar%{foo}'} + ${'foo'} | ${'@{lol}foo%{foo}'} + ${' fo o '} | ${'foo'} + `('$htmlString does not equal $templateString', ({ htmlString, templateString }) => { + expect(htmlString).not.toMatchInterpolatedText(templateString); + }); + }); + }); +}); diff --git a/spec/frontend/merge_request_spec.js b/spec/frontend/merge_request_spec.js new file mode 100644 index 00000000000..f4f2a78f5f7 --- /dev/null +++ b/spec/frontend/merge_request_spec.js @@ -0,0 +1,191 @@ +import $ from 'jquery'; +import MockAdapter from 'axios-mock-adapter'; +import axios from '~/lib/utils/axios_utils'; +import MergeRequest from '~/merge_request'; +import CloseReopenReportToggle from '~/close_reopen_report_toggle'; +import IssuablesHelper from '~/helpers/issuables_helper'; +import { TEST_HOST } from 'spec/test_constants'; + +describe('MergeRequest', () => { + const test = {}; + describe('task lists', () => { + let mock; + + preloadFixtures('merge_requests/merge_request_with_task_list.html'); + beforeEach(() => { + loadFixtures('merge_requests/merge_request_with_task_list.html'); + + jest.spyOn(axios, 'patch'); + mock = new MockAdapter(axios); + + mock + .onPatch(`${TEST_HOST}/frontend-fixtures/merge-requests-project/-/merge_requests/1.json`) + .reply(200, {}); + + test.merge = new MergeRequest(); + return test.merge; + }); + + afterEach(() => { + mock.restore(); + }); + + it('modifies the Markdown field', done => { + jest.spyOn($, 'ajax').mockImplementation(); + const changeEvent = document.createEvent('HTMLEvents'); + changeEvent.initEvent('change', true, true); + $('input[type=checkbox]') + .first() + .attr('checked', true)[0] + .dispatchEvent(changeEvent); + setImmediate(() => { + expect($('.js-task-list-field').val()).toBe( + '- [x] Task List Item\n- [ ] \n- [ ] Task List Item 2\n', + ); + done(); + }); + }); + + it('ensure that task with only spaces does not get checked incorrectly', done => { + // fixed in 'deckar01-task_list', '2.2.1' gem + jest.spyOn($, 'ajax').mockImplementation(); + const changeEvent = document.createEvent('HTMLEvents'); + changeEvent.initEvent('change', true, true); + $('input[type=checkbox]') + .last() + .attr('checked', true)[0] + .dispatchEvent(changeEvent); + setImmediate(() => { + expect($('.js-task-list-field').val()).toBe( + '- [ ] Task List Item\n- [ ] \n- [x] Task List Item 2\n', + ); + done(); + }); + }); + + describe('tasklist', () => { + const lineNumber = 8; + const lineSource = '- [ ] item 8'; + const index = 3; + const checked = true; + + it('submits an ajax request on tasklist:changed', done => { + $('.js-task-list-field').trigger({ + type: 'tasklist:changed', + detail: { lineNumber, lineSource, index, checked }, + }); + + setImmediate(() => { + expect(axios.patch).toHaveBeenCalledWith( + `${TEST_HOST}/frontend-fixtures/merge-requests-project/-/merge_requests/1.json`, + { + merge_request: { + description: '- [ ] Task List Item\n- [ ] \n- [ ] Task List Item 2\n', + lock_version: 0, + update_task: { line_number: lineNumber, line_source: lineSource, index, checked }, + }, + }, + ); + + done(); + }); + }); + + it('shows an error notification when tasklist update failed', done => { + mock + .onPatch(`${TEST_HOST}/frontend-fixtures/merge-requests-project/-/merge_requests/1.json`) + .reply(409, {}); + + $('.js-task-list-field').trigger({ + type: 'tasklist:changed', + detail: { lineNumber, lineSource, index, checked }, + }); + + setImmediate(() => { + expect(document.querySelector('.flash-container .flash-text').innerText.trim()).toBe( + 'Someone edited this merge request at the same time you did. Please refresh the page to see changes.', + ); + + done(); + }); + }); + }); + }); + + describe('class constructor', () => { + beforeEach(() => { + jest.spyOn($, 'ajax').mockImplementation(); + }); + + it('calls .initCloseReopenReport', () => { + jest.spyOn(IssuablesHelper, 'initCloseReopenReport').mockImplementation(() => {}); + + new MergeRequest(); // eslint-disable-line no-new + + expect(IssuablesHelper.initCloseReopenReport).toHaveBeenCalled(); + }); + + it('calls .initDroplab', () => { + const container = { + querySelector: jest.fn().mockName('container.querySelector'), + }; + const dropdownTrigger = {}; + const dropdownList = {}; + const button = {}; + + jest.spyOn(CloseReopenReportToggle.prototype, 'initDroplab').mockImplementation(() => {}); + jest.spyOn(document, 'querySelector').mockReturnValue(container); + + container.querySelector + .mockReturnValueOnce(dropdownTrigger) + .mockReturnValueOnce(dropdownList) + .mockReturnValueOnce(button); + + new MergeRequest(); // eslint-disable-line no-new + + expect(document.querySelector).toHaveBeenCalledWith('.js-issuable-close-dropdown'); + expect(container.querySelector).toHaveBeenCalledWith('.js-issuable-close-toggle'); + expect(container.querySelector).toHaveBeenCalledWith('.js-issuable-close-menu'); + expect(container.querySelector).toHaveBeenCalledWith('.js-issuable-close-button'); + expect(CloseReopenReportToggle.prototype.initDroplab).toHaveBeenCalled(); + }); + }); + + describe('hideCloseButton', () => { + describe('merge request of another user', () => { + beforeEach(() => { + loadFixtures('merge_requests/merge_request_with_task_list.html'); + test.el = document.querySelector('.js-issuable-actions'); + new MergeRequest(); // eslint-disable-line no-new + MergeRequest.hideCloseButton(); + }); + + it('hides the dropdown close item and selects the next item', () => { + const closeItem = test.el.querySelector('li.close-item'); + const smallCloseItem = test.el.querySelector('.js-close-item'); + const reportItem = test.el.querySelector('li.report-item'); + + expect(closeItem).toHaveClass('hidden'); + expect(smallCloseItem).toHaveClass('hidden'); + expect(reportItem).toHaveClass('droplab-item-selected'); + expect(reportItem).not.toHaveClass('hidden'); + }); + }); + + describe('merge request of current_user', () => { + beforeEach(() => { + loadFixtures('merge_requests/merge_request_of_current_user.html'); + test.el = document.querySelector('.js-issuable-actions'); + MergeRequest.hideCloseButton(); + }); + + it('hides the close button', () => { + const closeButton = test.el.querySelector('.btn-close'); + const smallCloseItem = test.el.querySelector('.js-close-item'); + + expect(closeButton).toHaveClass('hidden'); + expect(smallCloseItem).toHaveClass('hidden'); + }); + }); + }); +}); diff --git a/spec/frontend/merge_request_tabs_spec.js b/spec/frontend/merge_request_tabs_spec.js new file mode 100644 index 00000000000..3d3be647d12 --- /dev/null +++ b/spec/frontend/merge_request_tabs_spec.js @@ -0,0 +1,293 @@ +import $ from 'jquery'; +import MockAdapter from 'axios-mock-adapter'; +import axios from '~/lib/utils/axios_utils'; +import MergeRequestTabs from '~/merge_request_tabs'; +import '~/commit/pipelines/pipelines_bundle'; +import '~/lib/utils/common_utils'; +import 'vendor/jquery.scrollTo'; +import initMrPage from '../javascripts/helpers/init_vue_mr_page_helper'; + +jest.mock('~/lib/utils/webpack', () => ({ + resetServiceWorkersPublicPath: jest.fn(), +})); + +describe('MergeRequestTabs', () => { + const testContext = {}; + const stubLocation = {}; + const setLocation = stubs => { + const defaults = { + pathname: '', + search: '', + hash: '', + }; + $.extend(stubLocation, defaults, stubs || {}); + }; + + preloadFixtures( + 'merge_requests/merge_request_with_task_list.html', + 'merge_requests/diff_comment.html', + ); + + beforeEach(() => { + initMrPage(); + + testContext.class = new MergeRequestTabs({ stubLocation }); + setLocation(); + + testContext.spies = { + history: jest.spyOn(window.history, 'pushState').mockImplementation(() => {}), + }; + + gl.mrWidget = {}; + }); + + describe('opensInNewTab', () => { + const windowTarget = '_blank'; + let clickTabParams; + let tabUrl; + + beforeEach(() => { + loadFixtures('merge_requests/merge_request_with_task_list.html'); + + tabUrl = $('.commits-tab a').attr('href'); + + clickTabParams = { + metaKey: false, + ctrlKey: false, + which: 1, + stopImmediatePropagation() {}, + preventDefault() {}, + currentTarget: { + getAttribute(attr) { + return attr === 'href' ? tabUrl : null; + }, + }, + }; + }); + + describe('meta click', () => { + let metakeyEvent; + + beforeEach(() => { + metakeyEvent = $.Event('click', { keyCode: 91, ctrlKey: true }); + }); + + it('opens page when commits link is clicked', () => { + jest.spyOn(window, 'open').mockImplementation((url, name) => { + expect(url).toEqual(tabUrl); + expect(name).toEqual(windowTarget); + }); + + testContext.class.bindEvents(); + $('.merge-request-tabs .commits-tab a').trigger(metakeyEvent); + + expect(window.open).toHaveBeenCalled(); + }); + + it('opens page when commits badge is clicked', () => { + jest.spyOn(window, 'open').mockImplementation((url, name) => { + expect(url).toEqual(tabUrl); + expect(name).toEqual(windowTarget); + }); + + testContext.class.bindEvents(); + $('.merge-request-tabs .commits-tab a .badge').trigger(metakeyEvent); + + expect(window.open).toHaveBeenCalled(); + }); + }); + + it('opens page tab in a new browser tab with Ctrl+Click - Windows/Linux', () => { + jest.spyOn(window, 'open').mockImplementation((url, name) => { + expect(url).toEqual(tabUrl); + expect(name).toEqual(windowTarget); + }); + + testContext.class.clickTab({ ...clickTabParams, metaKey: true }); + + expect(window.open).toHaveBeenCalled(); + }); + + it('opens page tab in a new browser tab with Cmd+Click - Mac', () => { + jest.spyOn(window, 'open').mockImplementation((url, name) => { + expect(url).toEqual(tabUrl); + expect(name).toEqual(windowTarget); + }); + + testContext.class.clickTab({ ...clickTabParams, ctrlKey: true }); + + expect(window.open).toHaveBeenCalled(); + }); + + it('opens page tab in a new browser tab with Middle-click - Mac/PC', () => { + jest.spyOn(window, 'open').mockImplementation((url, name) => { + expect(url).toEqual(tabUrl); + expect(name).toEqual(windowTarget); + }); + + testContext.class.clickTab({ ...clickTabParams, which: 2 }); + + expect(window.open).toHaveBeenCalled(); + }); + }); + + describe('setCurrentAction', () => { + let mock; + + beforeEach(() => { + mock = new MockAdapter(axios); + mock.onAny().reply({ data: {} }); + testContext.subject = testContext.class.setCurrentAction; + }); + + afterEach(() => { + mock.restore(); + window.history.replaceState({}, '', '/'); + }); + + it('changes from commits', () => { + setLocation({ + pathname: '/foo/bar/-/merge_requests/1/commits', + }); + + expect(testContext.subject('show')).toBe('/foo/bar/-/merge_requests/1'); + expect(testContext.subject('diffs')).toBe('/foo/bar/-/merge_requests/1/diffs'); + }); + + it('changes from diffs', () => { + setLocation({ + pathname: '/foo/bar/-/merge_requests/1/diffs', + }); + + expect(testContext.subject('show')).toBe('/foo/bar/-/merge_requests/1'); + expect(testContext.subject('commits')).toBe('/foo/bar/-/merge_requests/1/commits'); + }); + + it('changes from diffs.html', () => { + setLocation({ + pathname: '/foo/bar/-/merge_requests/1/diffs.html', + }); + + expect(testContext.subject('show')).toBe('/foo/bar/-/merge_requests/1'); + expect(testContext.subject('commits')).toBe('/foo/bar/-/merge_requests/1/commits'); + }); + + it('changes from notes', () => { + setLocation({ + pathname: '/foo/bar/-/merge_requests/1', + }); + + expect(testContext.subject('diffs')).toBe('/foo/bar/-/merge_requests/1/diffs'); + expect(testContext.subject('commits')).toBe('/foo/bar/-/merge_requests/1/commits'); + }); + + it('includes search parameters and hash string', () => { + setLocation({ + pathname: '/foo/bar/-/merge_requests/1/diffs', + search: '?view=parallel', + hash: '#L15-35', + }); + + expect(testContext.subject('show')).toBe('/foo/bar/-/merge_requests/1?view=parallel#L15-35'); + }); + + it('replaces the current history state', () => { + setLocation({ + pathname: '/foo/bar/-/merge_requests/1', + }); + window.history.replaceState( + { + url: window.location.href, + action: 'show', + }, + document.title, + window.location.href, + ); + + const newState = testContext.subject('commits'); + + expect(testContext.spies.history).toHaveBeenCalledWith( + { + url: newState, + action: 'commits', + }, + document.title, + newState, + ); + }); + + it('treats "show" like "notes"', () => { + setLocation({ + pathname: '/foo/bar/-/merge_requests/1/commits', + }); + + expect(testContext.subject('show')).toBe('/foo/bar/-/merge_requests/1'); + }); + }); + + describe('expandViewContainer', () => { + beforeEach(() => { + $('body').append( + '<div class="content-wrapper"><div class="container-fluid container-limited"></div></div>', + ); + }); + + afterEach(() => { + $('.content-wrapper').remove(); + }); + + it('removes container-limited from containers', () => { + testContext.class.expandViewContainer(); + + expect($('.content-wrapper .container-limited')).toHaveLength(0); + }); + + it('does not add container-limited when fluid layout is prefered', () => { + $('.content-wrapper .container-fluid').removeClass('container-limited'); + + testContext.class.expandViewContainer(false); + + expect($('.content-wrapper .container-limited')).toHaveLength(0); + }); + + it('does remove container-limited from breadcrumbs', () => { + $('.container-limited').addClass('breadcrumbs'); + testContext.class.expandViewContainer(); + + expect($('.content-wrapper .container-limited')).toHaveLength(1); + }); + }); + + describe('tabShown', () => { + const mainContent = document.createElement('div'); + const tabContent = document.createElement('div'); + + beforeEach(() => { + jest.spyOn(mainContent, 'getBoundingClientRect').mockReturnValue({ top: 10 }); + jest.spyOn(tabContent, 'getBoundingClientRect').mockReturnValue({ top: 100 }); + jest.spyOn(document, 'querySelector').mockImplementation(selector => { + return selector === '.content-wrapper' ? mainContent : tabContent; + }); + testContext.class.currentAction = 'commits'; + }); + + it('calls window scrollTo with options if document has scrollBehavior', () => { + document.documentElement.style.scrollBehavior = ''; + + jest.spyOn(window, 'scrollTo').mockImplementation(() => {}); + + testContext.class.tabShown('commits', 'foobar'); + + expect(window.scrollTo.mock.calls[0][0]).toEqual({ top: 39, behavior: 'smooth' }); + }); + + it('calls window scrollTo with two args if document does not have scrollBehavior', () => { + jest.spyOn(document.documentElement, 'style', 'get').mockReturnValue({}); + jest.spyOn(window, 'scrollTo').mockImplementation(() => {}); + + testContext.class.tabShown('commits', 'foobar'); + + expect(window.scrollTo.mock.calls[0]).toEqual([0, 39]); + }); + }); +}); diff --git a/spec/frontend/mini_pipeline_graph_dropdown_spec.js b/spec/frontend/mini_pipeline_graph_dropdown_spec.js new file mode 100644 index 00000000000..506290834c8 --- /dev/null +++ b/spec/frontend/mini_pipeline_graph_dropdown_spec.js @@ -0,0 +1,106 @@ +import $ from 'jquery'; +import MockAdapter from 'axios-mock-adapter'; +import axios from '~/lib/utils/axios_utils'; +import MiniPipelineGraph from '~/mini_pipeline_graph_dropdown'; +import waitForPromises from './helpers/wait_for_promises'; + +describe('Mini Pipeline Graph Dropdown', () => { + preloadFixtures('static/mini_dropdown_graph.html'); + + beforeEach(() => { + loadFixtures('static/mini_dropdown_graph.html'); + }); + + describe('When is initialized', () => { + it('should initialize without errors when no options are given', () => { + const miniPipelineGraph = new MiniPipelineGraph(); + + expect(miniPipelineGraph.dropdownListSelector).toEqual('.js-builds-dropdown-container'); + }); + + it('should set the container as the given prop', () => { + const container = '.foo'; + + const miniPipelineGraph = new MiniPipelineGraph({ container }); + + expect(miniPipelineGraph.container).toEqual(container); + }); + }); + + describe('When dropdown is clicked', () => { + let mock; + + beforeEach(() => { + mock = new MockAdapter(axios); + }); + + afterEach(() => { + mock.restore(); + }); + + it('should call getBuildsList', () => { + const getBuildsListSpy = jest + .spyOn(MiniPipelineGraph.prototype, 'getBuildsList') + .mockImplementation(() => {}); + + new MiniPipelineGraph({ container: '.js-builds-dropdown-tests' }).bindEvents(); + + document.querySelector('.js-builds-dropdown-button').click(); + + expect(getBuildsListSpy).toHaveBeenCalled(); + }); + + it('should make a request to the endpoint provided in the html', () => { + const ajaxSpy = jest.spyOn(axios, 'get'); + + mock.onGet('foobar').reply(200, { + html: '', + }); + + new MiniPipelineGraph({ container: '.js-builds-dropdown-tests' }).bindEvents(); + + document.querySelector('.js-builds-dropdown-button').click(); + + expect(ajaxSpy.mock.calls[0][0]).toEqual('foobar'); + }); + + it('should not close when user uses cmd/ctrl + click', done => { + mock.onGet('foobar').reply(200, { + html: `<li> + <a class="mini-pipeline-graph-dropdown-item" href="#"> + <span class="ci-status-icon ci-status-icon-failed"></span> + <span class="ci-build-text">build</span> + </a> + <a class="ci-action-icon-wrapper js-ci-action-icon" href="#"></a> + </li>`, + }); + new MiniPipelineGraph({ container: '.js-builds-dropdown-tests' }).bindEvents(); + + document.querySelector('.js-builds-dropdown-button').click(); + + waitForPromises() + .then(() => { + document.querySelector('a.mini-pipeline-graph-dropdown-item').click(); + }) + .then(waitForPromises) + .then(() => { + expect($('.js-builds-dropdown-list').is(':visible')).toEqual(true); + }) + .then(done) + .catch(done.fail); + }); + + it('should close the dropdown when request returns an error', done => { + mock.onGet('foobar').networkError(); + + new MiniPipelineGraph({ container: '.js-builds-dropdown-tests' }).bindEvents(); + + document.querySelector('.js-builds-dropdown-button').click(); + + setImmediate(() => { + expect($('.js-builds-dropdown-tests .dropdown').hasClass('open')).toEqual(false); + done(); + }); + }); + }); +}); diff --git a/spec/frontend/monitoring/__snapshots__/alert_widget_spec.js.snap b/spec/frontend/monitoring/__snapshots__/alert_widget_spec.js.snap index 2179e7b4ab5..59c17daacff 100644 --- a/spec/frontend/monitoring/__snapshots__/alert_widget_spec.js.snap +++ b/spec/frontend/monitoring/__snapshots__/alert_widget_spec.js.snap @@ -3,7 +3,7 @@ exports[`AlertWidget Alert firing displays a warning icon and matches snapshot 1`] = ` <gl-badge-stub class="d-flex-center text-truncate" - pill="" + size="md" variant="danger" > <gl-icon-stub @@ -25,8 +25,8 @@ exports[`AlertWidget Alert firing displays a warning icon and matches snapshot 1 exports[`AlertWidget Alert not firing displays a warning icon and matches snapshot 1`] = ` <gl-badge-stub class="d-flex-center text-truncate" - pill="" - variant="secondary" + size="md" + variant="neutral" > <gl-icon-stub class="flex-shrink-0" diff --git a/spec/frontend/monitoring/components/__snapshots__/dashboard_template_spec.js.snap b/spec/frontend/monitoring/components/__snapshots__/dashboard_template_spec.js.snap index 9be5fa72110..4b08163f30a 100644 --- a/spec/frontend/monitoring/components/__snapshots__/dashboard_template_spec.js.snap +++ b/spec/frontend/monitoring/components/__snapshots__/dashboard_template_spec.js.snap @@ -38,8 +38,8 @@ exports[`Dashboard template matches the default snapshot 1`] = ` class="monitor-environment-dropdown-header text-center" > - Environment - + Environment + </gl-dropdown-header-stub> <gl-dropdown-divider-stub /> @@ -58,8 +58,8 @@ exports[`Dashboard template matches the default snapshot 1`] = ` class="text-secondary no-matches-message" > - No matching results - + No matching results + </div> </div> </gl-dropdown-stub> @@ -132,6 +132,8 @@ exports[`Dashboard template matches the default snapshot 1`] = ` <!----> + <!----> + <empty-state-stub clusterspath="/path/to/clusters" documentationpath="/path/to/docs" diff --git a/spec/frontend/monitoring/components/charts/anomaly_spec.js b/spec/frontend/monitoring/components/charts/anomaly_spec.js index e2d001c3058..4178d3f0d2d 100644 --- a/spec/frontend/monitoring/components/charts/anomaly_spec.js +++ b/spec/frontend/monitoring/components/charts/anomaly_spec.js @@ -13,8 +13,6 @@ import MonitorTimeSeriesChart from '~/monitoring/components/charts/time_series.v const mockProjectPath = `${TEST_HOST}${mockProjectDir}`; -jest.mock('~/lib/utils/icon_utils'); // mock getSvgIconPathContent - const makeAnomalyGraphData = (datasetName, template = anomalyMockGraphData) => { const metrics = anomalyMockResultValues[datasetName].map((values, index) => ({ ...template.metrics[index], diff --git a/spec/frontend/monitoring/components/charts/column_spec.js b/spec/frontend/monitoring/components/charts/column_spec.js index f368cb7916c..89739a7485d 100644 --- a/spec/frontend/monitoring/components/charts/column_spec.js +++ b/spec/frontend/monitoring/components/charts/column_spec.js @@ -1,4 +1,5 @@ import { shallowMount } from '@vue/test-utils'; +import timezoneMock from 'timezone-mock'; import { GlColumnChart } from '@gitlab/ui/dist/charts'; import ColumnChart from '~/monitoring/components/charts/column.vue'; @@ -18,10 +19,7 @@ const dataValues = [ describe('Column component', () => { let wrapper; - const findChart = () => wrapper.find(GlColumnChart); - const chartProps = prop => findChart().props(prop); - - beforeEach(() => { + const createWrapper = (props = {}) => { wrapper = shallowMount(ColumnChart, { propsData: { graphData: { @@ -41,14 +39,60 @@ describe('Column component', () => { }, ], }, + ...props, }, }); + }; + const findChart = () => wrapper.find(GlColumnChart); + const chartProps = prop => findChart().props(prop); + + beforeEach(() => { + createWrapper(); }); afterEach(() => { wrapper.destroy(); }); + describe('xAxisLabel', () => { + const mockDate = Date.UTC(2020, 4, 26, 20); // 8:00 PM in GMT + + const useXAxisFormatter = date => { + const { xAxis } = chartProps('option'); + const { formatter } = xAxis.axisLabel; + return formatter(date); + }; + + it('x-axis is formatted correctly in AM/PM format', () => { + expect(useXAxisFormatter(mockDate)).toEqual('8:00 PM'); + }); + + describe('when in PT timezone', () => { + beforeAll(() => { + timezoneMock.register('US/Pacific'); + }); + + afterAll(() => { + timezoneMock.unregister(); + }); + + it('by default, values are formatted in PT', () => { + createWrapper(); + expect(useXAxisFormatter(mockDate)).toEqual('1:00 PM'); + }); + + it('when the chart uses local timezone, y-axis is formatted in PT', () => { + createWrapper({ timezone: 'LOCAL' }); + expect(useXAxisFormatter(mockDate)).toEqual('1:00 PM'); + }); + + it('when the chart uses UTC, y-axis is formatted in UTC', () => { + createWrapper({ timezone: 'UTC' }); + expect(useXAxisFormatter(mockDate)).toEqual('8:00 PM'); + }); + }); + }); + describe('wrapped components', () => { describe('GitLab UI column chart', () => { it('is a Vue instance', () => { diff --git a/spec/frontend/monitoring/components/charts/heatmap_spec.js b/spec/frontend/monitoring/components/charts/heatmap_spec.js index 5e2c1932e9e..2a1c78025ae 100644 --- a/spec/frontend/monitoring/components/charts/heatmap_spec.js +++ b/spec/frontend/monitoring/components/charts/heatmap_spec.js @@ -1,68 +1,101 @@ import { shallowMount } from '@vue/test-utils'; import { GlHeatmap } from '@gitlab/ui/dist/charts'; +import timezoneMock from 'timezone-mock'; import Heatmap from '~/monitoring/components/charts/heatmap.vue'; import { graphDataPrometheusQueryRangeMultiTrack } from '../../mock_data'; describe('Heatmap component', () => { - let heatmapChart; + let wrapper; let store; - beforeEach(() => { - heatmapChart = shallowMount(Heatmap, { + const findChart = () => wrapper.find(GlHeatmap); + + const createWrapper = (props = {}) => { + wrapper = shallowMount(Heatmap, { propsData: { graphData: graphDataPrometheusQueryRangeMultiTrack, containerWidth: 100, + ...props, }, store, }); - }); + }; - afterEach(() => { - heatmapChart.destroy(); - }); + describe('wrapped chart', () => { + let glHeatmapChart; - describe('wrapped components', () => { - describe('GitLab UI heatmap chart', () => { - let glHeatmapChart; + beforeEach(() => { + createWrapper(); + glHeatmapChart = findChart(); + }); - beforeEach(() => { - glHeatmapChart = heatmapChart.find(GlHeatmap); - }); + afterEach(() => { + wrapper.destroy(); + }); - it('is a Vue instance', () => { - expect(glHeatmapChart.isVueInstance()).toBe(true); - }); + it('is a Vue instance', () => { + expect(glHeatmapChart.isVueInstance()).toBe(true); + }); - it('should display a label on the x axis', () => { - expect(heatmapChart.vm.xAxisName).toBe(graphDataPrometheusQueryRangeMultiTrack.x_label); - }); + it('should display a label on the x axis', () => { + expect(wrapper.vm.xAxisName).toBe(graphDataPrometheusQueryRangeMultiTrack.x_label); + }); - it('should display a label on the y axis', () => { - expect(heatmapChart.vm.yAxisName).toBe(graphDataPrometheusQueryRangeMultiTrack.y_label); - }); + it('should display a label on the y axis', () => { + expect(wrapper.vm.yAxisName).toBe(graphDataPrometheusQueryRangeMultiTrack.y_label); + }); - // According to the echarts docs https://echarts.apache.org/en/option.html#series-heatmap.data - // each row of the heatmap chart is represented by an array inside another parent array - // e.g. [[0, 0, 10]], the format represents the column, the row and finally the value - // corresponding to the cell + // According to the echarts docs https://echarts.apache.org/en/option.html#series-heatmap.data + // each row of the heatmap chart is represented by an array inside another parent array + // e.g. [[0, 0, 10]], the format represents the column, the row and finally the value + // corresponding to the cell - it('should return chartData with a length of x by y, with a length of 3 per array', () => { - const row = heatmapChart.vm.chartData[0]; + it('should return chartData with a length of x by y, with a length of 3 per array', () => { + const row = wrapper.vm.chartData[0]; - expect(row.length).toBe(3); - expect(heatmapChart.vm.chartData.length).toBe(30); - }); + expect(row.length).toBe(3); + expect(wrapper.vm.chartData.length).toBe(30); + }); + + it('returns a series of labels for the x axis', () => { + const { xAxisLabels } = wrapper.vm; + + expect(xAxisLabels.length).toBe(5); + }); - it('returns a series of labels for the x axis', () => { - const { xAxisLabels } = heatmapChart.vm; + describe('y axis labels', () => { + const gmtLabels = ['3:00 PM', '4:00 PM', '5:00 PM', '6:00 PM', '7:00 PM', '8:00 PM']; - expect(xAxisLabels.length).toBe(5); + it('y-axis labels are formatted in AM/PM format', () => { + expect(findChart().props('yAxisLabels')).toEqual(gmtLabels); }); - it('returns a series of labels for the y axis', () => { - const { yAxisLabels } = heatmapChart.vm; + describe('when in PT timezone', () => { + const ptLabels = ['8:00 AM', '9:00 AM', '10:00 AM', '11:00 AM', '12:00 PM', '1:00 PM']; + const utcLabels = gmtLabels; // Identical in this case + + beforeAll(() => { + timezoneMock.register('US/Pacific'); + }); + + afterAll(() => { + timezoneMock.unregister(); + }); + + it('by default, y-axis is formatted in PT', () => { + createWrapper(); + expect(findChart().props('yAxisLabels')).toEqual(ptLabels); + }); + + it('when the chart uses local timezone, y-axis is formatted in PT', () => { + createWrapper({ timezone: 'LOCAL' }); + expect(findChart().props('yAxisLabels')).toEqual(ptLabels); + }); - expect(yAxisLabels.length).toBe(6); + it('when the chart uses UTC, y-axis is formatted in UTC', () => { + createWrapper({ timezone: 'UTC' }); + expect(findChart().props('yAxisLabels')).toEqual(utcLabels); + }); }); }); }); diff --git a/spec/frontend/monitoring/components/charts/stacked_column_spec.js b/spec/frontend/monitoring/components/charts/stacked_column_spec.js index abb89ac15ef..bb2fbc68eaa 100644 --- a/spec/frontend/monitoring/components/charts/stacked_column_spec.js +++ b/spec/frontend/monitoring/components/charts/stacked_column_spec.js @@ -1,45 +1,192 @@ -import { shallowMount } from '@vue/test-utils'; -import { GlStackedColumnChart } from '@gitlab/ui/dist/charts'; +import { shallowMount, mount } from '@vue/test-utils'; +import timezoneMock from 'timezone-mock'; +import { cloneDeep } from 'lodash'; +import { GlStackedColumnChart, GlChartLegend } from '@gitlab/ui/dist/charts'; import StackedColumnChart from '~/monitoring/components/charts/stacked_column.vue'; import { stackedColumnMockedData } from '../../mock_data'; jest.mock('~/lib/utils/icon_utils', () => ({ - getSvgIconPathContent: jest.fn().mockResolvedValue('mockSvgPathContent'), + getSvgIconPathContent: jest.fn().mockImplementation(icon => Promise.resolve(`${icon}-content`)), })); describe('Stacked column chart component', () => { let wrapper; - const glStackedColumnChart = () => wrapper.find(GlStackedColumnChart); - beforeEach(() => { - wrapper = shallowMount(StackedColumnChart, { + const findChart = () => wrapper.find(GlStackedColumnChart); + const findLegend = () => wrapper.find(GlChartLegend); + + const createWrapper = (props = {}, mountingMethod = shallowMount) => + mountingMethod(StackedColumnChart, { propsData: { graphData: stackedColumnMockedData, + ...props, + }, + stubs: { + GlPopover: true, }, + attachToDocument: true, + }); + + beforeEach(() => { + wrapper = createWrapper({}, mount); + }); + + describe('when graphData is present', () => { + beforeEach(() => { + createWrapper(); + return wrapper.vm.$nextTick(); + }); + + it('chart is rendered', () => { + expect(findChart().exists()).toBe(true); + }); + + it('data should match the graphData y value for each series', () => { + const data = findChart().props('data'); + + data.forEach((series, index) => { + const { values } = stackedColumnMockedData.metrics[index].result[0]; + expect(series).toEqual(values.map(value => value[1])); + }); + }); + + it('series names should be the same as the graphData metrics labels', () => { + const seriesNames = findChart().props('seriesNames'); + + expect(seriesNames).toHaveLength(stackedColumnMockedData.metrics.length); + seriesNames.forEach((name, index) => { + expect(stackedColumnMockedData.metrics[index].label).toBe(name); + }); + }); + + it('group by should be the same as the graphData first metric results', () => { + const groupBy = findChart().props('groupBy'); + + expect(groupBy).toEqual([ + '2020-01-30T12:00:00.000Z', + '2020-01-30T12:01:00.000Z', + '2020-01-30T12:02:00.000Z', + ]); + }); + + it('chart options should configure data zoom and axis label ', () => { + const chartOptions = findChart().props('option'); + const xAxisType = findChart().props('xAxisType'); + + expect(chartOptions).toMatchObject({ + dataZoom: [{ handleIcon: 'path://scroll-handle-content' }], + xAxis: { + axisLabel: { formatter: expect.any(Function) }, + }, + }); + + expect(xAxisType).toBe('category'); + }); + + it('chart options should configure category as x axis type', () => { + const chartOptions = findChart().props('option'); + const xAxisType = findChart().props('xAxisType'); + + expect(chartOptions).toMatchObject({ + xAxis: { + type: 'category', + }, + }); + expect(xAxisType).toBe('category'); + }); + + it('format date is correct', () => { + const { xAxis } = findChart().props('option'); + expect(xAxis.axisLabel.formatter('2020-01-30T12:01:00.000Z')).toBe('12:01 PM'); + }); + + describe('when in PT timezone', () => { + beforeAll(() => { + timezoneMock.register('US/Pacific'); + }); + + afterAll(() => { + timezoneMock.unregister(); + }); + + it('date is shown in local time', () => { + const { xAxis } = findChart().props('option'); + expect(xAxis.axisLabel.formatter('2020-01-30T12:01:00.000Z')).toBe('4:01 AM'); + }); + + it('date is shown in UTC', () => { + wrapper.setProps({ timezone: 'UTC' }); + + return wrapper.vm.$nextTick().then(() => { + const { xAxis } = findChart().props('option'); + expect(xAxis.axisLabel.formatter('2020-01-30T12:01:00.000Z')).toBe('12:01 PM'); + }); + }); }); }); - afterEach(() => { - wrapper.destroy(); + describe('when graphData has results missing', () => { + beforeEach(() => { + const graphData = cloneDeep(stackedColumnMockedData); + + graphData.metrics[0].result = null; + + createWrapper({ graphData }); + return wrapper.vm.$nextTick(); + }); + + it('chart is rendered', () => { + expect(findChart().exists()).toBe(true); + }); }); - describe('with graphData present', () => { - it('is a Vue instance', () => { - expect(glStackedColumnChart().exists()).toBe(true); + describe('legend', () => { + beforeEach(() => { + wrapper = createWrapper({}, mount); + }); + + it('allows user to override legend label texts using props', () => { + const legendRelatedProps = { + legendMinText: 'legendMinText', + legendMaxText: 'legendMaxText', + legendAverageText: 'legendAverageText', + legendCurrentText: 'legendCurrentText', + }; + wrapper.setProps({ + ...legendRelatedProps, + }); + + return wrapper.vm.$nextTick().then(() => { + expect(findChart().props()).toMatchObject(legendRelatedProps); + }); }); - it('should contain the same number of elements in the seriesNames computed prop as the graphData metrics prop', () => - wrapper.vm - .$nextTick() - .then(expect(wrapper.vm.seriesNames).toHaveLength(stackedColumnMockedData.metrics.length))); + it('should render a tabular legend layout by default', () => { + expect(findLegend().props('layout')).toBe('table'); + }); + + describe('when inline legend layout prop is set', () => { + beforeEach(() => { + wrapper.setProps({ + legendLayout: 'inline', + }); + }); + + it('should render an inline legend layout', () => { + expect(findLegend().props('layout')).toBe('inline'); + }); + }); + + describe('when table legend layout prop is set', () => { + beforeEach(() => { + wrapper.setProps({ + legendLayout: 'table', + }); + }); - it('should contain the same number of elements in the groupBy computed prop as the graphData result prop', () => - wrapper.vm - .$nextTick() - .then( - expect(wrapper.vm.groupBy).toHaveLength( - stackedColumnMockedData.metrics[0].result[0].values.length, - ), - )); + it('should render a tabular legend layout', () => { + expect(findLegend().props('layout')).toBe('table'); + }); + }); }); }); diff --git a/spec/frontend/monitoring/components/charts/time_series_spec.js b/spec/frontend/monitoring/components/charts/time_series_spec.js index 7d5a08bc4a1..50d2c9c80b2 100644 --- a/spec/frontend/monitoring/components/charts/time_series_spec.js +++ b/spec/frontend/monitoring/components/charts/time_series_spec.js @@ -1,5 +1,6 @@ import { mount, shallowMount } from '@vue/test-utils'; import { setTestTimeout } from 'helpers/timeout'; +import timezoneMock from 'timezone-mock'; import { GlLink } from '@gitlab/ui'; import { TEST_HOST } from 'jest/helpers/test_constants'; import { @@ -20,9 +21,6 @@ import { metricsDashboardViewModel, metricResultStatus, } from '../../fixture_data'; -import * as iconUtils from '~/lib/utils/icon_utils'; - -const mockSvgPathContent = 'mockSvgPathContent'; jest.mock('lodash/throttle', () => // this throttle mock executes immediately @@ -33,26 +31,33 @@ jest.mock('lodash/throttle', () => }), ); jest.mock('~/lib/utils/icon_utils', () => ({ - getSvgIconPathContent: jest.fn().mockImplementation(() => Promise.resolve(mockSvgPathContent)), + getSvgIconPathContent: jest.fn().mockImplementation(icon => Promise.resolve(`${icon}-content`)), })); describe('Time series component', () => { let mockGraphData; let store; + let wrapper; - const createWrapper = (graphData = mockGraphData, mountingMethod = shallowMount) => - mountingMethod(TimeSeries, { + const createWrapper = ( + { graphData = mockGraphData, ...props } = {}, + mountingMethod = shallowMount, + ) => { + wrapper = mountingMethod(TimeSeries, { propsData: { graphData, deploymentData: store.state.monitoringDashboard.deploymentData, annotations: store.state.monitoringDashboard.annotations, projectPath: `${TEST_HOST}${mockProjectDir}`, + ...props, }, store, stubs: { GlPopover: true, }, + attachToDocument: true, }); + }; describe('With a single time series', () => { beforeEach(() => { @@ -76,39 +81,41 @@ describe('Time series component', () => { }); describe('general functions', () => { - let timeSeriesChart; - - const findChart = () => timeSeriesChart.find({ ref: 'chart' }); + const findChart = () => wrapper.find({ ref: 'chart' }); beforeEach(() => { - timeSeriesChart = createWrapper(mockGraphData, mount); - return timeSeriesChart.vm.$nextTick(); + createWrapper({}, mount); + return wrapper.vm.$nextTick(); }); - it('allows user to override max value label text using prop', () => { - timeSeriesChart.setProps({ legendMaxText: 'legendMaxText' }); - - return timeSeriesChart.vm.$nextTick().then(() => { - expect(timeSeriesChart.props().legendMaxText).toBe('legendMaxText'); - }); + afterEach(() => { + wrapper.destroy(); }); - it('allows user to override average value label text using prop', () => { - timeSeriesChart.setProps({ legendAverageText: 'averageText' }); + it('allows user to override legend label texts using props', () => { + const legendRelatedProps = { + legendMinText: 'legendMinText', + legendMaxText: 'legendMaxText', + legendAverageText: 'legendAverageText', + legendCurrentText: 'legendCurrentText', + }; + wrapper.setProps({ + ...legendRelatedProps, + }); - return timeSeriesChart.vm.$nextTick().then(() => { - expect(timeSeriesChart.props().legendAverageText).toBe('averageText'); + return wrapper.vm.$nextTick().then(() => { + expect(findChart().props()).toMatchObject(legendRelatedProps); }); }); it('chart sets a default height', () => { - const wrapper = createWrapper(); + createWrapper(); expect(wrapper.props('height')).toBe(chartHeight); }); it('chart has a configurable height', () => { const mockHeight = 599; - const wrapper = createWrapper(); + createWrapper(); wrapper.setProps({ height: mockHeight }); return wrapper.vm.$nextTick().then(() => { @@ -122,7 +129,7 @@ describe('Time series component', () => { let startValue; let endValue; - beforeEach(done => { + beforeEach(() => { eChartMock = { handlers: {}, getOption: () => ({ @@ -141,10 +148,9 @@ describe('Time series component', () => { }), }; - timeSeriesChart = createWrapper(mockGraphData, mount); - timeSeriesChart.vm.$nextTick(() => { + createWrapper({}, mount); + return wrapper.vm.$nextTick(() => { findChart().vm.$emit('created', eChartMock); - done(); }); }); @@ -153,8 +159,8 @@ describe('Time series component', () => { endValue = 1577840400000; // 2020-01-01T01:00:00.000Z eChartMock.handlers.datazoom(); - expect(timeSeriesChart.emitted('datazoom')).toHaveLength(1); - expect(timeSeriesChart.emitted('datazoom')[0]).toEqual([ + expect(wrapper.emitted('datazoom')).toHaveLength(1); + expect(wrapper.emitted('datazoom')[0]).toEqual([ { start: new Date(startValue).toISOString(), end: new Date(endValue).toISOString(), @@ -172,7 +178,7 @@ describe('Time series component', () => { const mockLineSeriesData = () => ({ seriesData: [ { - seriesName: timeSeriesChart.vm.chartData[0].name, + seriesName: wrapper.vm.chartData[0].name, componentSubType: 'line', value: [mockDate, 5.55555], dataIndex: 0, @@ -210,86 +216,118 @@ describe('Time series component', () => { value: undefined, })), }; - expect(timeSeriesChart.vm.formatTooltipText(seriesDataWithoutValue)).toBeUndefined(); + expect(wrapper.vm.formatTooltipText(seriesDataWithoutValue)).toBeUndefined(); }); describe('when series is of line type', () => { - beforeEach(done => { - timeSeriesChart.vm.formatTooltipText(mockLineSeriesData()); - timeSeriesChart.vm.$nextTick(done); + beforeEach(() => { + createWrapper(); + wrapper.vm.formatTooltipText(mockLineSeriesData()); + return wrapper.vm.$nextTick(); }); it('formats tooltip title', () => { - expect(timeSeriesChart.vm.tooltip.title).toBe('16 Jul 2019, 10:14AM'); + expect(wrapper.vm.tooltip.title).toBe('16 Jul 2019, 10:14AM (GMT+0000)'); }); it('formats tooltip content', () => { const name = 'Status Code'; const value = '5.556'; const dataIndex = 0; - const seriesLabel = timeSeriesChart.find(GlChartSeriesLabel); + const seriesLabel = wrapper.find(GlChartSeriesLabel); expect(seriesLabel.vm.color).toBe(''); expect(shallowWrapperContainsSlotText(seriesLabel, 'default', name)).toBe(true); - expect(timeSeriesChart.vm.tooltip.content).toEqual([ + expect(wrapper.vm.tooltip.content).toEqual([ { name, value, dataIndex, color: undefined }, ]); expect( - shallowWrapperContainsSlotText( - timeSeriesChart.find(GlAreaChart), - 'tooltipContent', - value, - ), + shallowWrapperContainsSlotText(wrapper.find(GlAreaChart), 'tooltipContent', value), ).toBe(true); }); + + describe('when in PT timezone', () => { + beforeAll(() => { + // Note: node.js env renders (GMT-0700), in the browser we see (PDT) + timezoneMock.register('US/Pacific'); + }); + + afterAll(() => { + timezoneMock.unregister(); + }); + + it('formats tooltip title in local timezone by default', () => { + createWrapper(); + wrapper.vm.formatTooltipText(mockLineSeriesData()); + return wrapper.vm.$nextTick().then(() => { + expect(wrapper.vm.tooltip.title).toBe('16 Jul 2019, 3:14AM (GMT-0700)'); + }); + }); + + it('formats tooltip title in local timezone', () => { + createWrapper({ timezone: 'LOCAL' }); + wrapper.vm.formatTooltipText(mockLineSeriesData()); + return wrapper.vm.$nextTick().then(() => { + expect(wrapper.vm.tooltip.title).toBe('16 Jul 2019, 3:14AM (GMT-0700)'); + }); + }); + + it('formats tooltip title in UTC format', () => { + createWrapper({ timezone: 'UTC' }); + wrapper.vm.formatTooltipText(mockLineSeriesData()); + return wrapper.vm.$nextTick().then(() => { + expect(wrapper.vm.tooltip.title).toBe('16 Jul 2019, 10:14AM (UTC)'); + }); + }); + }); }); describe('when series is of scatter type, for deployments', () => { beforeEach(() => { - timeSeriesChart.vm.formatTooltipText({ + wrapper.vm.formatTooltipText({ ...mockAnnotationsSeriesData, seriesData: mockAnnotationsSeriesData.seriesData.map(data => ({ ...data, data: annotationsMetadata, })), }); - return timeSeriesChart.vm.$nextTick; + return wrapper.vm.$nextTick; }); it('set tooltip type to deployments', () => { - expect(timeSeriesChart.vm.tooltip.type).toBe('deployments'); + expect(wrapper.vm.tooltip.type).toBe('deployments'); }); it('formats tooltip title', () => { - expect(timeSeriesChart.vm.tooltip.title).toBe('16 Jul 2019, 10:14AM'); + expect(wrapper.vm.tooltip.title).toBe('16 Jul 2019, 10:14AM (GMT+0000)'); }); it('formats tooltip sha', () => { - expect(timeSeriesChart.vm.tooltip.sha).toBe('f5bcd1d9'); + expect(wrapper.vm.tooltip.sha).toBe('f5bcd1d9'); }); it('formats tooltip commit url', () => { - expect(timeSeriesChart.vm.tooltip.commitUrl).toBe(mockCommitUrl); + expect(wrapper.vm.tooltip.commitUrl).toBe(mockCommitUrl); }); }); describe('when series is of scatter type and deployments data is missing', () => { beforeEach(() => { - timeSeriesChart.vm.formatTooltipText(mockAnnotationsSeriesData); - return timeSeriesChart.vm.$nextTick; + wrapper.vm.formatTooltipText(mockAnnotationsSeriesData); + return wrapper.vm.$nextTick; }); it('formats tooltip title', () => { - expect(timeSeriesChart.vm.tooltip.title).toBe('16 Jul 2019, 10:14AM'); + expect(wrapper.vm.tooltip.title).toBe('16 Jul 2019, 10:14AM (GMT+0000)'); }); it('formats tooltip sha', () => { - expect(timeSeriesChart.vm.tooltip.sha).toBeUndefined(); + expect(wrapper.vm.tooltip.sha).toBeUndefined(); }); it('formats tooltip commit url', () => { - expect(timeSeriesChart.vm.tooltip.commitUrl).toBeUndefined(); + expect(wrapper.vm.tooltip.commitUrl).toBeUndefined(); }); }); }); @@ -313,43 +351,12 @@ describe('Time series component', () => { }; it('formats tooltip title and sets tooltip content', () => { - const formattedTooltipData = timeSeriesChart.vm.formatAnnotationsTooltipText( - mockMarkPoint, - ); - expect(formattedTooltipData.title).toBe('19 Feb 2020, 10:01AM'); + const formattedTooltipData = wrapper.vm.formatAnnotationsTooltipText(mockMarkPoint); + expect(formattedTooltipData.title).toBe('19 Feb 2020, 10:01AM (GMT+0000)'); expect(formattedTooltipData.content).toBe(annotationsMetadata.tooltipData.content); }); }); - describe('setSvg', () => { - const mockSvgName = 'mockSvgName'; - - beforeEach(done => { - timeSeriesChart.vm.setSvg(mockSvgName); - timeSeriesChart.vm.$nextTick(done); - }); - - it('gets svg path content', () => { - expect(iconUtils.getSvgIconPathContent).toHaveBeenCalledWith(mockSvgName); - }); - - it('sets svg path content', () => { - timeSeriesChart.vm.$nextTick(() => { - expect(timeSeriesChart.vm.svgs[mockSvgName]).toBe(`path://${mockSvgPathContent}`); - }); - }); - - it('contains an svg object within an array to properly render icon', () => { - timeSeriesChart.vm.$nextTick(() => { - expect(timeSeriesChart.vm.chartOptions.dataZoom).toEqual([ - { - handleIcon: `path://${mockSvgPathContent}`, - }, - ]); - }); - }); - }); - describe('onResize', () => { const mockWidth = 233; @@ -357,11 +364,11 @@ describe('Time series component', () => { jest.spyOn(Element.prototype, 'getBoundingClientRect').mockImplementation(() => ({ width: mockWidth, })); - timeSeriesChart.vm.onResize(); + wrapper.vm.onResize(); }); it('sets area chart width', () => { - expect(timeSeriesChart.vm.width).toBe(mockWidth); + expect(wrapper.vm.width).toBe(mockWidth); }); }); }); @@ -374,7 +381,7 @@ describe('Time series component', () => { const seriesData = () => chartData[0]; beforeEach(() => { - ({ chartData } = timeSeriesChart.vm); + ({ chartData } = wrapper.vm); }); it('utilizes all data points', () => { @@ -400,6 +407,21 @@ describe('Time series component', () => { }); describe('chartOptions', () => { + describe('dataZoom', () => { + it('renders with scroll handle icons', () => { + expect(getChartOptions().dataZoom).toHaveLength(1); + expect(getChartOptions().dataZoom[0]).toMatchObject({ + handleIcon: 'path://scroll-handle-content', + }); + }); + }); + + describe('xAxis pointer', () => { + it('snap is set to false by default', () => { + expect(getChartOptions().xAxis.axisPointer.snap).toBe(false); + }); + }); + describe('are extended by `option`', () => { const mockSeriesName = 'Extra series 1'; const mockOption = { @@ -408,17 +430,17 @@ describe('Time series component', () => { }; it('arbitrary options', () => { - timeSeriesChart.setProps({ + wrapper.setProps({ option: mockOption, }); - return timeSeriesChart.vm.$nextTick().then(() => { + return wrapper.vm.$nextTick().then(() => { expect(getChartOptions()).toEqual(expect.objectContaining(mockOption)); }); }); it('additional series', () => { - timeSeriesChart.setProps({ + wrapper.setProps({ option: { series: [ { @@ -430,7 +452,7 @@ describe('Time series component', () => { }, }); - return timeSeriesChart.vm.$nextTick().then(() => { + return wrapper.vm.$nextTick().then(() => { const optionSeries = getChartOptions().series; expect(optionSeries.length).toEqual(2); @@ -446,13 +468,13 @@ describe('Time series component', () => { }, }; - timeSeriesChart.setProps({ + wrapper.setProps({ option: { yAxis: mockCustomYAxisOption, }, }); - return timeSeriesChart.vm.$nextTick().then(() => { + return wrapper.vm.$nextTick().then(() => { const { yAxis } = getChartOptions(); expect(yAxis[0]).toMatchObject(mockCustomYAxisOption); @@ -464,13 +486,13 @@ describe('Time series component', () => { name: 'Custom x axis label', }; - timeSeriesChart.setProps({ + wrapper.setProps({ option: { xAxis: mockCustomXAxisOption, }, }); - return timeSeriesChart.vm.$nextTick().then(() => { + return wrapper.vm.$nextTick().then(() => { const { xAxis } = getChartOptions(); expect(xAxis).toMatchObject(mockCustomXAxisOption); @@ -499,25 +521,67 @@ describe('Time series component', () => { describe('annotationSeries', () => { it('utilizes deployment data', () => { - const annotationSeries = timeSeriesChart.vm.chartOptionSeries[0]; + const annotationSeries = wrapper.vm.chartOptionSeries[0]; expect(annotationSeries.yAxisIndex).toBe(1); // same as annotations y axis expect(annotationSeries.data).toEqual([ expect.objectContaining({ symbolSize: 14, + symbol: 'path://rocket-content', value: ['2019-07-16T10:14:25.589Z', expect.any(Number)], }), expect.objectContaining({ symbolSize: 14, + symbol: 'path://rocket-content', value: ['2019-07-16T11:14:25.589Z', expect.any(Number)], }), expect.objectContaining({ symbolSize: 14, + symbol: 'path://rocket-content', value: ['2019-07-16T12:14:25.589Z', expect.any(Number)], }), ]); }); }); + describe('xAxisLabel', () => { + const mockDate = Date.UTC(2020, 4, 26, 20); // 8:00 PM in GMT + + const useXAxisFormatter = date => { + const { xAxis } = getChartOptions(); + const { formatter } = xAxis.axisLabel; + return formatter(date); + }; + + it('x-axis is formatted correctly in AM/PM format', () => { + expect(useXAxisFormatter(mockDate)).toEqual('8:00 PM'); + }); + + describe('when in PT timezone', () => { + beforeAll(() => { + timezoneMock.register('US/Pacific'); + }); + + afterAll(() => { + timezoneMock.unregister(); + }); + + it('by default, values are formatted in PT', () => { + createWrapper(); + expect(useXAxisFormatter(mockDate)).toEqual('1:00 PM'); + }); + + it('when the chart uses local timezone, y-axis is formatted in PT', () => { + createWrapper({ timezone: 'LOCAL' }); + expect(useXAxisFormatter(mockDate)).toEqual('1:00 PM'); + }); + + it('when the chart uses UTC, y-axis is formatted in UTC', () => { + createWrapper({ timezone: 'UTC' }); + expect(useXAxisFormatter(mockDate)).toEqual('8:00 PM'); + }); + }); + }); + describe('yAxisLabel', () => { it('y-axis is configured correctly', () => { const { yAxis } = getChartOptions(); @@ -544,7 +608,7 @@ describe('Time series component', () => { }); afterEach(() => { - timeSeriesChart.destroy(); + wrapper.destroy(); }); }); @@ -562,19 +626,14 @@ describe('Time series component', () => { glChartComponents.forEach(dynamicComponent => { describe(`GitLab UI: ${dynamicComponent.chartType}`, () => { - let timeSeriesAreaChart; - const findChartComponent = () => timeSeriesAreaChart.find(dynamicComponent.component); + const findChartComponent = () => wrapper.find(dynamicComponent.component); - beforeEach(done => { - timeSeriesAreaChart = createWrapper( - { ...mockGraphData, type: dynamicComponent.chartType }, + beforeEach(() => { + createWrapper( + { graphData: { ...mockGraphData, type: dynamicComponent.chartType } }, mount, ); - timeSeriesAreaChart.vm.$nextTick(done); - }); - - afterEach(() => { - timeSeriesAreaChart.destroy(); + return wrapper.vm.$nextTick(); }); it('is a Vue instance', () => { @@ -585,21 +644,20 @@ describe('Time series component', () => { it('receives data properties needed for proper chart render', () => { const props = findChartComponent().props(); - expect(props.data).toBe(timeSeriesAreaChart.vm.chartData); - expect(props.option).toBe(timeSeriesAreaChart.vm.chartOptions); - expect(props.formatTooltipText).toBe(timeSeriesAreaChart.vm.formatTooltipText); - expect(props.thresholds).toBe(timeSeriesAreaChart.vm.thresholds); + expect(props.data).toBe(wrapper.vm.chartData); + expect(props.option).toBe(wrapper.vm.chartOptions); + expect(props.formatTooltipText).toBe(wrapper.vm.formatTooltipText); + expect(props.thresholds).toBe(wrapper.vm.thresholds); }); - it('recieves a tooltip title', done => { + it('receives a tooltip title', () => { const mockTitle = 'mockTitle'; - timeSeriesAreaChart.vm.tooltip.title = mockTitle; + wrapper.vm.tooltip.title = mockTitle; - timeSeriesAreaChart.vm.$nextTick(() => { + return wrapper.vm.$nextTick(() => { expect( shallowWrapperContainsSlotText(findChartComponent(), 'tooltipTitle', mockTitle), ).toBe(true); - done(); }); }); @@ -607,13 +665,13 @@ describe('Time series component', () => { const mockSha = 'mockSha'; const commitUrl = `${mockProjectDir}/-/commit/${mockSha}`; - beforeEach(done => { - timeSeriesAreaChart.setData({ + beforeEach(() => { + wrapper.setData({ tooltip: { type: 'deployments', }, }); - timeSeriesAreaChart.vm.$nextTick(done); + return wrapper.vm.$nextTick(); }); it('uses deployment title', () => { @@ -622,16 +680,15 @@ describe('Time series component', () => { ).toBe(true); }); - it('renders clickable commit sha in tooltip content', done => { - timeSeriesAreaChart.vm.tooltip.sha = mockSha; - timeSeriesAreaChart.vm.tooltip.commitUrl = commitUrl; + it('renders clickable commit sha in tooltip content', () => { + wrapper.vm.tooltip.sha = mockSha; + wrapper.vm.tooltip.commitUrl = commitUrl; - timeSeriesAreaChart.vm.$nextTick(() => { - const commitLink = timeSeriesAreaChart.find(GlLink); + return wrapper.vm.$nextTick(() => { + const commitLink = wrapper.find(GlLink); expect(shallowWrapperContainsSlotText(commitLink, 'default', mockSha)).toBe(true); expect(commitLink.attributes('href')).toEqual(commitUrl); - done(); }); }); }); @@ -642,30 +699,26 @@ describe('Time series component', () => { describe('with multiple time series', () => { describe('General functions', () => { - let timeSeriesChart; - - beforeEach(done => { + beforeEach(() => { store = createStore(); const graphData = cloneDeep(metricsDashboardViewModel.panelGroups[0].panels[3]); graphData.metrics.forEach(metric => Object.assign(metric, { result: metricResultStatus.result }), ); - timeSeriesChart = createWrapper({ ...graphData, type: 'area-chart' }, mount); - timeSeriesChart.vm.$nextTick(done); + createWrapper({ graphData: { ...graphData, type: 'area-chart' } }, mount); + return wrapper.vm.$nextTick(); }); afterEach(() => { - timeSeriesChart.destroy(); + wrapper.destroy(); }); describe('Color match', () => { let lineColors; beforeEach(() => { - lineColors = timeSeriesChart - .find(GlAreaChart) - .vm.series.map(item => item.lineStyle.color); + lineColors = wrapper.find(GlAreaChart).vm.series.map(item => item.lineStyle.color); }); it('should contain different colors for contiguous time series', () => { @@ -675,7 +728,7 @@ describe('Time series component', () => { }); it('should match series color with tooltip label color', () => { - const labels = timeSeriesChart.findAll(GlChartSeriesLabel); + const labels = wrapper.findAll(GlChartSeriesLabel); lineColors.forEach((color, index) => { const labelColor = labels.at(index).props('color'); @@ -684,7 +737,7 @@ describe('Time series component', () => { }); it('should match series color with legend color', () => { - const legendColors = timeSeriesChart + const legendColors = wrapper .find(GlChartLegend) .props('seriesInfo') .map(item => item.color); @@ -696,4 +749,45 @@ describe('Time series component', () => { }); }); }); + + describe('legend layout', () => { + const findLegend = () => wrapper.find(GlChartLegend); + + beforeEach(() => { + createWrapper(mockGraphData, mount); + return wrapper.vm.$nextTick(); + }); + + afterEach(() => { + wrapper.destroy(); + }); + + it('should render a tabular legend layout by default', () => { + expect(findLegend().props('layout')).toBe('table'); + }); + + describe('when inline legend layout prop is set', () => { + beforeEach(() => { + wrapper.setProps({ + legendLayout: 'inline', + }); + }); + + it('should render an inline legend layout', () => { + expect(findLegend().props('layout')).toBe('inline'); + }); + }); + + describe('when table legend layout prop is set', () => { + beforeEach(() => { + wrapper.setProps({ + legendLayout: 'table', + }); + }); + + it('should render a tabular legend layout', () => { + expect(findLegend().props('layout')).toBe('table'); + }); + }); + }); }); diff --git a/spec/frontend/monitoring/components/dashboard_panel_spec.js b/spec/frontend/monitoring/components/dashboard_panel_spec.js index f8c9bd56721..0ad6e04588f 100644 --- a/spec/frontend/monitoring/components/dashboard_panel_spec.js +++ b/spec/frontend/monitoring/components/dashboard_panel_spec.js @@ -4,7 +4,7 @@ import AxiosMockAdapter from 'axios-mock-adapter'; import { setTestTimeout } from 'helpers/timeout'; import invalidUrl from '~/lib/utils/invalid_url'; import axios from '~/lib/utils/axios_utils'; -import { GlDropdownItem } from '@gitlab/ui'; +import { GlNewDropdownItem as GlDropdownItem } from '@gitlab/ui'; import AlertWidget from '~/monitoring/components/alert_widget.vue'; import DashboardPanel from '~/monitoring/components/dashboard_panel.vue'; @@ -55,7 +55,9 @@ describe('Dashboard Panel', () => { const findCopyLink = () => wrapper.find({ ref: 'copyChartLink' }); const findTimeChart = () => wrapper.find({ ref: 'timeSeriesChart' }); const findTitle = () => wrapper.find({ ref: 'graphTitle' }); - const findContextualMenu = () => wrapper.find({ ref: 'contextualMenu' }); + const findCtxMenu = () => wrapper.find({ ref: 'contextualMenu' }); + const findMenuItems = () => wrapper.findAll(GlDropdownItem); + const findMenuItemByText = text => findMenuItems().filter(i => i.text() === text); const createWrapper = (props, options) => { wrapper = shallowMount(DashboardPanel, { @@ -70,6 +72,15 @@ describe('Dashboard Panel', () => { }); }; + const mockGetterReturnValue = (getter, value) => { + jest.spyOn(monitoringDashboard.getters, getter).mockReturnValue(value); + store = new Vuex.Store({ + modules: { + monitoringDashboard, + }, + }); + }; + beforeEach(() => { setTestTimeout(1000); @@ -119,13 +130,17 @@ describe('Dashboard Panel', () => { }); it('does not contain graph widgets', () => { - expect(findContextualMenu().exists()).toBe(false); + expect(findCtxMenu().exists()).toBe(false); }); it('The Empty Chart component is rendered and is a Vue instance', () => { expect(wrapper.find(MonitorEmptyChart).exists()).toBe(true); expect(wrapper.find(MonitorEmptyChart).isVueInstance()).toBe(true); }); + + it('does not contain a tabindex attribute', () => { + expect(wrapper.find(MonitorEmptyChart).contains('[tabindex]')).toBe(false); + }); }); describe('When graphData is null', () => { @@ -148,7 +163,7 @@ describe('Dashboard Panel', () => { }); it('does not contain graph widgets', () => { - expect(findContextualMenu().exists()).toBe(false); + expect(findCtxMenu().exists()).toBe(false); }); it('The Empty Chart component is rendered and is a Vue instance', () => { @@ -171,7 +186,7 @@ describe('Dashboard Panel', () => { }); it('contains graph widgets', () => { - expect(findContextualMenu().exists()).toBe(true); + expect(findCtxMenu().exists()).toBe(true); expect(wrapper.find({ ref: 'downloadCsvLink' }).exists()).toBe(true); }); @@ -367,7 +382,7 @@ describe('Dashboard Panel', () => { }); }); - describe('when cliboard data is available', () => { + describe('when clipboard data is available', () => { const clipboardText = 'A value to copy.'; beforeEach(() => { @@ -392,7 +407,7 @@ describe('Dashboard Panel', () => { }); }); - describe('when cliboard data is not available', () => { + describe('when clipboard data is not available', () => { it('there is no "copy to clipboard" link for a null value', () => { createWrapper({ clipboardText: null }); expect(findCopyLink().exists()).toBe(false); @@ -498,6 +513,34 @@ describe('Dashboard Panel', () => { }); }); + describe('panel timezone', () => { + it('displays a time chart in local timezone', () => { + createWrapper(); + expect(findTimeChart().props('timezone')).toBe('LOCAL'); + }); + + it('displays a heatmap in local timezone', () => { + createWrapper({ graphData: graphDataPrometheusQueryRangeMultiTrack }); + expect(wrapper.find(MonitorHeatmapChart).props('timezone')).toBe('LOCAL'); + }); + + describe('when timezone is set to UTC', () => { + beforeEach(() => { + store = createStore({ dashboardTimezone: 'UTC' }); + }); + + it('displays a time chart with UTC', () => { + createWrapper(); + expect(findTimeChart().props('timezone')).toBe('UTC'); + }); + + it('displays a heatmap with UTC', () => { + createWrapper({ graphData: graphDataPrometheusQueryRangeMultiTrack }); + expect(wrapper.find(MonitorHeatmapChart).props('timezone')).toBe('UTC'); + }); + }); + }); + describe('Expand to full screen', () => { const findExpandBtn = () => wrapper.find({ ref: 'expandBtn' }); @@ -530,17 +573,9 @@ describe('Dashboard Panel', () => { const setMetricsSavedToDb = val => monitoringDashboard.getters.metricsSavedToDb.mockReturnValue(val); const findAlertsWidget = () => wrapper.find(AlertWidget); - const findMenuItemAlert = () => - wrapper.findAll(GlDropdownItem).filter(i => i.text() === 'Alerts'); beforeEach(() => { - jest.spyOn(monitoringDashboard.getters, 'metricsSavedToDb').mockReturnValue([]); - - store = new Vuex.Store({ - modules: { - monitoringDashboard, - }, - }); + mockGetterReturnValue('metricsSavedToDb', []); createWrapper(); }); @@ -569,8 +604,99 @@ describe('Dashboard Panel', () => { }); it(`${showsDesc} alert configuration`, () => { - expect(findMenuItemAlert().exists()).toBe(isShown); + expect(findMenuItemByText('Alerts').exists()).toBe(isShown); }); }); }); + + describe('When graphData contains links', () => { + const findManageLinksItem = () => wrapper.find({ ref: 'manageLinksItem' }); + const mockLinks = [ + { + url: 'https://example.com', + title: 'Example 1', + }, + { + url: 'https://gitlab.com', + title: 'Example 2', + }, + ]; + const createWrapperWithLinks = (links = mockLinks) => { + createWrapper({ + graphData: { + ...graphData, + links, + }, + }); + }; + + it('custom links are shown', () => { + createWrapperWithLinks(); + + mockLinks.forEach(({ url, title }) => { + const link = findMenuItemByText(title).at(0); + + expect(link.exists()).toBe(true); + expect(link.attributes('href')).toBe(url); + }); + }); + + it("custom links don't show unsecure content", () => { + createWrapperWithLinks([ + { + title: '<script>alert("XSS")</script>', + url: 'http://example.com', + }, + ]); + + expect(findMenuItems().at(1).element.innerHTML).toBe( + '<script>alert("XSS")</script>', + ); + }); + + it("custom links don't show unsecure href attributes", () => { + const title = 'Owned!'; + + createWrapperWithLinks([ + { + title, + // eslint-disable-next-line no-script-url + url: 'javascript:alert("Evil")', + }, + ]); + + const link = findMenuItemByText(title).at(0); + expect(link.attributes('href')).toBe('#'); + }); + + it('when an editable dashboard is selected, shows `Manage chart links` link to the blob path', () => { + const editUrl = '/edit'; + mockGetterReturnValue('selectedDashboard', { + can_edit: true, + project_blob_path: editUrl, + }); + createWrapperWithLinks(); + + expect(findManageLinksItem().exists()).toBe(true); + expect(findManageLinksItem().attributes('href')).toBe(editUrl); + }); + + it('when no dashboard is selected, does not show `Manage chart links`', () => { + mockGetterReturnValue('selectedDashboard', null); + createWrapperWithLinks(); + + expect(findManageLinksItem().exists()).toBe(false); + }); + + it('when non-editable dashboard is selected, does not show `Manage chart links`', () => { + const editUrl = '/edit'; + mockGetterReturnValue('selectedDashboard', { + can_edit: false, + project_blob_path: editUrl, + }); + createWrapperWithLinks(); + + expect(findManageLinksItem().exists()).toBe(false); + }); + }); }); diff --git a/spec/frontend/monitoring/components/dashboard_spec.js b/spec/frontend/monitoring/components/dashboard_spec.js index b2c9fe93cde..7bb4c68b4cd 100644 --- a/spec/frontend/monitoring/components/dashboard_spec.js +++ b/spec/frontend/monitoring/components/dashboard_spec.js @@ -6,16 +6,17 @@ import { objectToQuery } from '~/lib/utils/url_utility'; import VueDraggable from 'vuedraggable'; import MockAdapter from 'axios-mock-adapter'; import axios from '~/lib/utils/axios_utils'; -import statusCodes from '~/lib/utils/http_status'; import { metricStates } from '~/monitoring/constants'; import Dashboard from '~/monitoring/components/dashboard.vue'; +import DashboardHeader from '~/monitoring/components/dashboard_header.vue'; import DateTimePicker from '~/vue_shared/components/date_time_picker/date_time_picker.vue'; import CustomMetricsFormFields from '~/custom_metrics/components/custom_metrics_form_fields.vue'; import DashboardsDropdown from '~/monitoring/components/dashboards_dropdown.vue'; import EmptyState from '~/monitoring/components/empty_state.vue'; import GroupEmptyState from '~/monitoring/components/group_empty_state.vue'; import DashboardPanel from '~/monitoring/components/dashboard_panel.vue'; +import LinksSection from '~/monitoring/components/links_section.vue'; import { createStore } from '~/monitoring/stores'; import * as types from '~/monitoring/stores/mutation_types'; import { @@ -24,6 +25,7 @@ import { setMetricResult, setupStoreWithData, setupStoreWithVariable, + setupStoreWithLinks, } from '../store_utils'; import { environmentData, dashboardGitResponse, propsData } from '../mock_data'; import { metricsDashboardViewModel, metricsDashboardPanelCount } from '../fixture_data'; @@ -36,7 +38,9 @@ describe('Dashboard', () => { let wrapper; let mock; - const findEnvironmentsDropdown = () => wrapper.find({ ref: 'monitorEnvironmentsDropdown' }); + const findDashboardHeader = () => wrapper.find(DashboardHeader); + const findEnvironmentsDropdown = () => + findDashboardHeader().find({ ref: 'monitorEnvironmentsDropdown' }); const findAllEnvironmentsDropdownItems = () => findEnvironmentsDropdown().findAll(GlDropdownItem); const setSearchTerm = searchTerm => { store.commit(`monitoringDashboard/${types.SET_ENVIRONMENTS_FILTER}`, searchTerm); @@ -46,6 +50,9 @@ describe('Dashboard', () => { wrapper = shallowMount(Dashboard, { propsData: { ...propsData, ...props }, store, + stubs: { + DashboardHeader, + }, ...options, }); }; @@ -54,7 +61,11 @@ describe('Dashboard', () => { wrapper = mount(Dashboard, { propsData: { ...propsData, ...props }, store, - stubs: ['graph-group', 'dashboard-panel'], + stubs: { + 'graph-group': true, + 'dashboard-panel': true, + 'dashboard-header': DashboardHeader, + }, ...options, }); }; @@ -80,19 +91,6 @@ describe('Dashboard', () => { it('shows the environment selector', () => { expect(findEnvironmentsDropdown().exists()).toBe(true); }); - - it('sets initial state', () => { - expect(store.dispatch).toHaveBeenCalledWith('monitoringDashboard/setInitialState', { - currentDashboard: '', - currentEnvironmentName: 'production', - dashboardEndpoint: 'https://invalid', - dashboardsEndpoint: 'https://invalid', - deploymentsEndpoint: null, - logsPath: '/path/to/logs', - metricsEndpoint: 'http://test.host/monitoring/mock', - projectPath: '/path/to/project', - }); - }); }); describe('no data found', () => { @@ -288,7 +286,10 @@ describe('Dashboard', () => { it('URL is updated with panel parameters and custom dashboard', () => { const dashboard = 'dashboard.yml'; - createMountedWrapper({ hasMetrics: true, currentDashboard: dashboard }); + store.commit(`monitoringDashboard/${types.SET_INITIAL_STATE}`, { + currentDashboard: dashboard, + }); + createMountedWrapper({ hasMetrics: true }); expandPanel(group, panel); const expectedSearch = objectToQuery({ @@ -326,8 +327,10 @@ describe('Dashboard', () => { describe('when all requests have been commited by the store', () => { beforeEach(() => { + store.commit(`monitoringDashboard/${types.SET_INITIAL_STATE}`, { + currentEnvironmentName: 'production', + }); createMountedWrapper({ hasMetrics: true }); - setupStoreWithData(store); return wrapper.vm.$nextTick(); @@ -345,7 +348,9 @@ describe('Dashboard', () => { }); }); - it('renders the environments dropdown with a single active element', () => { + // Note: This test is not working, .active does not show the active environment + // eslint-disable-next-line jest/no-disabled-tests + it.skip('renders the environments dropdown with a single active element', () => { const activeItem = findAllEnvironmentsDropdownItems().wrappers.filter(itemWrapper => itemWrapper.find('.active').exists(), ); @@ -355,7 +360,7 @@ describe('Dashboard', () => { }); describe('star dashboards', () => { - const findToggleStar = () => wrapper.find({ ref: 'toggleStarBtn' }); + const findToggleStar = () => wrapper.find(DashboardHeader).find({ ref: 'toggleStarBtn' }); const findToggleStarIcon = () => findToggleStar().find(GlIcon); beforeEach(() => { @@ -459,7 +464,7 @@ describe('Dashboard', () => { setupStoreWithData(store); return wrapper.vm.$nextTick().then(() => { - const refreshBtn = wrapper.findAll({ ref: 'refreshDashboardBtn' }); + const refreshBtn = wrapper.find(DashboardHeader).findAll({ ref: 'refreshDashboardBtn' }); expect(refreshBtn).toHaveLength(1); expect(refreshBtn.is(GlDeprecatedButton)).toBe(true); @@ -480,6 +485,21 @@ describe('Dashboard', () => { }); }); + describe('links section', () => { + beforeEach(() => { + createShallowWrapper({ hasMetrics: true }); + setupStoreWithData(store); + setupStoreWithLinks(store); + + return wrapper.vm.$nextTick(); + }); + + it('shows the links section', () => { + expect(wrapper.vm.shouldShowLinksSection).toBe(true); + expect(wrapper.find(LinksSection)).toExist(); + }); + }); + describe('single panel expands to "full screen" mode', () => { const findExpandedPanel = () => wrapper.find({ ref: 'expandedPanel' }); @@ -630,7 +650,12 @@ describe('Dashboard', () => { }); it('renders a search input', () => { - expect(wrapper.find({ ref: 'monitorEnvironmentsDropdownSearch' }).exists()).toBe(true); + expect( + wrapper + .find(DashboardHeader) + .find({ ref: 'monitorEnvironmentsDropdownSearch' }) + .exists(), + ).toBe(true); }); it('renders dropdown items', () => { @@ -666,7 +691,12 @@ describe('Dashboard', () => { setSearchTerm(searchTerm); return wrapper.vm.$nextTick(() => { - expect(wrapper.find({ ref: 'monitorEnvironmentsDropdownMsg' }).isVisible()).toBe(true); + expect( + wrapper + .find(DashboardHeader) + .find({ ref: 'monitorEnvironmentsDropdownMsg' }) + .isVisible(), + ).toBe(true); }); }); @@ -676,7 +706,12 @@ describe('Dashboard', () => { return wrapper.vm .$nextTick() .then(() => { - expect(wrapper.find({ ref: 'monitorEnvironmentsDropdownLoading' }).exists()).toBe(true); + expect( + wrapper + .find(DashboardHeader) + .find({ ref: 'monitorEnvironmentsDropdownLoading' }) + .exists(), + ).toBe(true); }) .then(() => { store.commit( @@ -685,7 +720,12 @@ describe('Dashboard', () => { ); }) .then(() => { - expect(wrapper.find({ ref: 'monitorEnvironmentsDropdownLoading' }).exists()).toBe(false); + expect( + wrapper + .find(DashboardHeader) + .find({ ref: 'monitorEnvironmentsDropdownLoading' }) + .exists(), + ).toBe(false); }); }); }); @@ -783,9 +823,59 @@ describe('Dashboard', () => { }); }); + describe('dashboard timezone', () => { + const setupWithTimezone = value => { + store = createStore({ dashboardTimezone: value }); + setupStoreWithData(store); + createShallowWrapper({ hasMetrics: true }); + return wrapper.vm.$nextTick; + }; + + describe('local timezone is enabled by default', () => { + beforeEach(() => { + return setupWithTimezone(); + }); + + it('shows the data time picker in local timezone', () => { + expect( + findDashboardHeader() + .find(DateTimePicker) + .props('utc'), + ).toBe(false); + }); + }); + + describe('when LOCAL timezone is enabled', () => { + beforeEach(() => { + return setupWithTimezone('LOCAL'); + }); + + it('shows the data time picker in local timezone', () => { + expect( + findDashboardHeader() + .find(DateTimePicker) + .props('utc'), + ).toBe(false); + }); + }); + + describe('when UTC timezone is enabled', () => { + beforeEach(() => { + return setupWithTimezone('UTC'); + }); + + it('shows the data time picker in UTC format', () => { + expect( + findDashboardHeader() + .find(DateTimePicker) + .props('utc'), + ).toBe(true); + }); + }); + }); + describe('cluster health', () => { beforeEach(() => { - mock.onGet(propsData.metricsEndpoint).reply(statusCodes.OK, JSON.stringify({})); createShallowWrapper({ hasMetrics: true, showHeader: false }); // all_dashboards is not defined in health dashboards @@ -830,6 +920,62 @@ describe('Dashboard', () => { }); }); + describe('document title', () => { + const originalTitle = 'Original Title'; + const defaultDashboardName = dashboardGitResponse[0].display_name; + + beforeEach(() => { + document.title = originalTitle; + createShallowWrapper({ hasMetrics: true }); + }); + + afterAll(() => { + document.title = ''; + }); + + it('is prepended with default dashboard name by default', () => { + setupAllDashboards(store); + + return wrapper.vm.$nextTick().then(() => { + expect(document.title.startsWith(`${defaultDashboardName} · `)).toBe(true); + }); + }); + + it('is prepended with dashboard name if path is known', () => { + const dashboard = dashboardGitResponse[1]; + const currentDashboard = dashboard.path; + + setupAllDashboards(store, currentDashboard); + + return wrapper.vm.$nextTick().then(() => { + expect(document.title.startsWith(`${dashboard.display_name} · `)).toBe(true); + }); + }); + + it('is prepended with default dashboard name is path is not known', () => { + setupAllDashboards(store, 'unknown/path'); + + return wrapper.vm.$nextTick().then(() => { + expect(document.title.startsWith(`${defaultDashboardName} · `)).toBe(true); + }); + }); + + it('is not modified when dashboard name is not provided', () => { + const dashboard = { ...dashboardGitResponse[1], display_name: null }; + const currentDashboard = dashboard.path; + + store.commit(`monitoringDashboard/${types.SET_ALL_DASHBOARDS}`, [dashboard]); + + store.commit(`monitoringDashboard/${types.SET_INITIAL_STATE}`, { + currentDashboard, + }); + + return wrapper.vm.$nextTick().then(() => { + expect(document.title).toBe(originalTitle); + }); + }); + }); + describe('Dashboard dropdown', () => { beforeEach(() => { createMountedWrapper({ hasMetrics: true }); @@ -877,7 +1023,10 @@ describe('Dashboard', () => { beforeEach(() => { setupStoreWithData(store); - createShallowWrapper({ hasMetrics: true, currentDashboard }); + store.commit(`monitoringDashboard/${types.SET_INITIAL_STATE}`, { + currentDashboard, + }); + createShallowWrapper({ hasMetrics: true }); return wrapper.vm.$nextTick(); }); @@ -893,7 +1042,8 @@ describe('Dashboard', () => { }); describe('add custom metrics', () => { - const findAddMetricButton = () => wrapper.vm.$refs.addMetricBtn; + const findAddMetricButton = () => wrapper.find(DashboardHeader).find({ ref: 'addMetricBtn' }); + describe('when not available', () => { beforeEach(() => { createShallowWrapper({ @@ -902,7 +1052,7 @@ describe('Dashboard', () => { }); }); it('does not render add button on the dashboard', () => { - expect(findAddMetricButton()).toBeUndefined(); + expect(findAddMetricButton().exists()).toBe(false); }); }); @@ -935,10 +1085,9 @@ describe('Dashboard', () => { expect(wrapper.find(GlModal).attributes().modalid).toBe('add-metric'); }); it('adding new metric is tracked', done => { - const submitButton = wrapper.vm.$refs.submitCustomMetricsFormBtn; - wrapper.setData({ - formIsValid: true, - }); + const submitButton = wrapper + .find(DashboardHeader) + .find({ ref: 'submitCustomMetricsFormBtn' }).vm; wrapper.vm.$nextTick(() => { submitButton.$el.click(); wrapper.vm.$nextTick(() => { diff --git a/spec/frontend/monitoring/components/dashboard_template_spec.js b/spec/frontend/monitoring/components/dashboard_template_spec.js index cc0ac348b11..a1a450d4abe 100644 --- a/spec/frontend/monitoring/components/dashboard_template_spec.js +++ b/spec/frontend/monitoring/components/dashboard_template_spec.js @@ -2,6 +2,7 @@ import { shallowMount } from '@vue/test-utils'; import MockAdapter from 'axios-mock-adapter'; import axios from '~/lib/utils/axios_utils'; import Dashboard from '~/monitoring/components/dashboard.vue'; +import DashboardHeader from '~/monitoring/components/dashboard_header.vue'; import { createStore } from '~/monitoring/stores'; import { setupAllDashboards } from '../store_utils'; import { propsData } from '../mock_data'; @@ -14,7 +15,9 @@ describe('Dashboard template', () => { let mock; beforeEach(() => { - store = createStore(); + store = createStore({ + currentEnvironmentName: 'production', + }); mock = new MockAdapter(axios); setupAllDashboards(store); @@ -25,7 +28,13 @@ describe('Dashboard template', () => { }); it('matches the default snapshot', () => { - wrapper = shallowMount(Dashboard, { propsData: { ...propsData }, store }); + wrapper = shallowMount(Dashboard, { + propsData: { ...propsData }, + store, + stubs: { + DashboardHeader, + }, + }); expect(wrapper.element).toMatchSnapshot(); }); diff --git a/spec/frontend/monitoring/components/dashboard_url_time_spec.js b/spec/frontend/monitoring/components/dashboard_url_time_spec.js index 9bba5280007..a74c621db9b 100644 --- a/spec/frontend/monitoring/components/dashboard_url_time_spec.js +++ b/spec/frontend/monitoring/components/dashboard_url_time_spec.js @@ -12,6 +12,7 @@ import axios from '~/lib/utils/axios_utils'; import { mockProjectDir, propsData } from '../mock_data'; import Dashboard from '~/monitoring/components/dashboard.vue'; +import DashboardHeader from '~/monitoring/components/dashboard_header.vue'; import { createStore } from '~/monitoring/stores'; import { defaultTimeRange } from '~/vue_shared/constants'; @@ -27,12 +28,12 @@ describe('dashboard invalid url parameters', () => { wrapper = mount(Dashboard, { propsData: { ...propsData, ...props }, store, - stubs: ['graph-group', 'dashboard-panel'], + stubs: { 'graph-group': true, 'dashboard-panel': true, 'dashboard-header': DashboardHeader }, ...options, }); }; - const findDateTimePicker = () => wrapper.find({ ref: 'dateTimePicker' }); + const findDateTimePicker = () => wrapper.find(DashboardHeader).find({ ref: 'dateTimePicker' }); beforeEach(() => { store = createStore(); diff --git a/spec/frontend/monitoring/components/duplicate_dashboard_form_spec.js b/spec/frontend/monitoring/components/duplicate_dashboard_form_spec.js index 8ab7c8b9e50..29e4c4514fe 100644 --- a/spec/frontend/monitoring/components/duplicate_dashboard_form_spec.js +++ b/spec/frontend/monitoring/components/duplicate_dashboard_form_spec.js @@ -10,6 +10,8 @@ const createMountedWrapper = (props = {}) => { wrapper = mount(DuplicateDashboardForm, { propsData: { ...props }, sync: false, + // We need to attach to document, so that `document.activeElement` is properly set in jsdom + attachToDocument: true, }); }; diff --git a/spec/frontend/monitoring/components/embeds/metric_embed_spec.js b/spec/frontend/monitoring/components/embeds/metric_embed_spec.js index f23823ccad6..4e7fee81d66 100644 --- a/spec/frontend/monitoring/components/embeds/metric_embed_spec.js +++ b/spec/frontend/monitoring/components/embeds/metric_embed_spec.js @@ -4,6 +4,7 @@ import DashboardPanel from '~/monitoring/components/dashboard_panel.vue'; import { TEST_HOST } from 'helpers/test_constants'; import MetricEmbed from '~/monitoring/components/embeds/metric_embed.vue'; import { groups, initialState, metricsData, metricsWithData } from './mock_data'; +import { setHTMLFixture } from 'helpers/fixtures'; const localVue = createLocalVue(); localVue.use(Vuex); @@ -25,6 +26,8 @@ describe('MetricEmbed', () => { } beforeEach(() => { + setHTMLFixture('<div class="layout-page"></div>'); + actions = { setInitialState: jest.fn(), setShowErrorBanner: jest.fn(), diff --git a/spec/frontend/monitoring/components/embeds/mock_data.js b/spec/frontend/monitoring/components/embeds/mock_data.js index 9cf66e52d22..e32e1a08cdb 100644 --- a/spec/frontend/monitoring/components/embeds/mock_data.js +++ b/spec/frontend/monitoring/components/embeds/mock_data.js @@ -52,7 +52,6 @@ export const initialState = () => ({ dashboard: { panel_groups: [], }, - useDashboardEndpoint: true, }); export const initialEmbedGroupState = () => ({ diff --git a/spec/frontend/monitoring/components/graph_group_spec.js b/spec/frontend/monitoring/components/graph_group_spec.js index 28a6af64394..92829135c0f 100644 --- a/spec/frontend/monitoring/components/graph_group_spec.js +++ b/spec/frontend/monitoring/components/graph_group_spec.js @@ -8,6 +8,7 @@ describe('Graph group component', () => { const findGroup = () => wrapper.find({ ref: 'graph-group' }); const findContent = () => wrapper.find({ ref: 'graph-group-content' }); const findCaretIcon = () => wrapper.find(Icon); + const findToggleButton = () => wrapper.find('[data-testid="group-toggle-button"]'); const createComponent = propsData => { wrapper = shallowMount(GraphGroup, { @@ -41,6 +42,16 @@ describe('Graph group component', () => { }); }); + it('should contain a tabindex', () => { + expect(findGroup().contains('[tabindex]')).toBe(true); + }); + + it('should contain a tab index for the collapse button', () => { + const groupToggle = findToggleButton(); + + expect(groupToggle.contains('[tabindex]')).toBe(true); + }); + it('should show the open the group when collapseGroup is set to true', () => { wrapper.setProps({ collapseGroup: true, @@ -69,6 +80,15 @@ describe('Graph group component', () => { expect(wrapper.vm.caretIcon).toBe('angle-down'); }); + + it('should call collapse the graph group content when enter is pressed on the caret icon', () => { + const graphGroupContent = findContent(); + const button = findToggleButton(); + + button.trigger('keyup.enter'); + + expect(graphGroupContent.isVisible()).toBe(false); + }); }); describe('When groups can not be collapsed', () => { diff --git a/spec/frontend/monitoring/components/links_section_spec.js b/spec/frontend/monitoring/components/links_section_spec.js new file mode 100644 index 00000000000..3b5b72d84ee --- /dev/null +++ b/spec/frontend/monitoring/components/links_section_spec.js @@ -0,0 +1,64 @@ +import { shallowMount } from '@vue/test-utils'; +import { GlLink } from '@gitlab/ui'; +import { createStore } from '~/monitoring/stores'; +import LinksSection from '~/monitoring/components/links_section.vue'; + +describe('Links Section component', () => { + let store; + let wrapper; + + const createShallowWrapper = () => { + wrapper = shallowMount(LinksSection, { + store, + }); + }; + const setState = links => { + store.state.monitoringDashboard = { + ...store.state.monitoringDashboard, + showEmptyState: false, + links, + }; + }; + const findLinks = () => wrapper.findAll(GlLink); + + beforeEach(() => { + store = createStore(); + createShallowWrapper(); + }); + + it('does not render a section if no links are present', () => { + setState(); + + return wrapper.vm.$nextTick(() => { + expect(findLinks()).not.toExist(); + }); + }); + + it('renders a link inside a section', () => { + setState([ + { + title: 'GitLab Website', + url: 'https://gitlab.com', + }, + ]); + + return wrapper.vm.$nextTick(() => { + expect(findLinks()).toHaveLength(1); + const firstLink = findLinks().at(0); + + expect(firstLink.attributes('href')).toBe('https://gitlab.com'); + expect(firstLink.text()).toBe('GitLab Website'); + }); + }); + + it('renders multiple links inside a section', () => { + const links = new Array(10) + .fill(null) + .map((_, i) => ({ title: `Title ${i}`, url: `https://gitlab.com/projects/${i}` })); + setState(links); + + return wrapper.vm.$nextTick(() => { + expect(findLinks()).toHaveLength(10); + }); + }); +}); diff --git a/spec/frontend/monitoring/components/variables_section_spec.js b/spec/frontend/monitoring/components/variables_section_spec.js index 095d89c9231..fd814e81c8f 100644 --- a/spec/frontend/monitoring/components/variables_section_spec.js +++ b/spec/frontend/monitoring/components/variables_section_spec.js @@ -57,8 +57,7 @@ describe('Metrics dashboard/variables section component', () => { }); describe('when changing the variable inputs', () => { - const fetchDashboardData = jest.fn(); - const updateVariableValues = jest.fn(); + const updateVariablesAndFetchData = jest.fn(); beforeEach(() => { store = new Vuex.Store({ @@ -67,11 +66,10 @@ describe('Metrics dashboard/variables section component', () => { namespaced: true, state: { showEmptyState: false, - promVariables: sampleVariables, + variables: sampleVariables, }, actions: { - fetchDashboardData, - updateVariableValues, + updateVariablesAndFetchData, }, }, }, @@ -86,13 +84,12 @@ describe('Metrics dashboard/variables section component', () => { firstInput.vm.$emit('onUpdate', 'label1', 'test'); return wrapper.vm.$nextTick(() => { - expect(updateVariableValues).toHaveBeenCalled(); + expect(updateVariablesAndFetchData).toHaveBeenCalled(); expect(mergeUrlParams).toHaveBeenCalledWith( convertVariablesForURL(sampleVariables), window.location.href, ); expect(updateHistory).toHaveBeenCalled(); - expect(fetchDashboardData).toHaveBeenCalled(); }); }); @@ -102,13 +99,12 @@ describe('Metrics dashboard/variables section component', () => { firstInput.vm.$emit('onUpdate', 'label1', 'test'); return wrapper.vm.$nextTick(() => { - expect(updateVariableValues).toHaveBeenCalled(); + expect(updateVariablesAndFetchData).toHaveBeenCalled(); expect(mergeUrlParams).toHaveBeenCalledWith( convertVariablesForURL(sampleVariables), window.location.href, ); expect(updateHistory).toHaveBeenCalled(); - expect(fetchDashboardData).toHaveBeenCalled(); }); }); @@ -117,10 +113,9 @@ describe('Metrics dashboard/variables section component', () => { firstInput.vm.$emit('onUpdate', 'label1', 'Simple text'); - expect(updateVariableValues).not.toHaveBeenCalled(); + expect(updateVariablesAndFetchData).not.toHaveBeenCalled(); expect(mergeUrlParams).not.toHaveBeenCalled(); expect(updateHistory).not.toHaveBeenCalled(); - expect(fetchDashboardData).not.toHaveBeenCalled(); }); }); }); diff --git a/spec/frontend/monitoring/mock_data.js b/spec/frontend/monitoring/mock_data.js index 4611e6f1b18..05b29e78ecd 100644 --- a/spec/frontend/monitoring/mock_data.js +++ b/spec/frontend/monitoring/mock_data.js @@ -11,17 +11,12 @@ export const propsData = { settingsPath: '/path/to/settings', clustersPath: '/path/to/clusters', tagsPath: '/path/to/tags', - projectPath: '/path/to/project', - logsPath: '/path/to/logs', defaultBranch: 'master', - metricsEndpoint: mockApiEndpoint, - deploymentsEndpoint: null, emptyGettingStartedSvgPath: '/path/to/getting-started.svg', emptyLoadingSvgPath: '/path/to/loading.svg', emptyNoDataSvgPath: '/path/to/no-data.svg', emptyNoDataSmallSvgPath: '/path/to/no-data-small.svg', emptyUnableToConnectSvgPath: '/path/to/unable-to-connect.svg', - currentEnvironmentName: 'production', customMetricsAvailable: false, customMetricsPath: '', validateQueryPath: '', @@ -472,9 +467,9 @@ export const stackedColumnMockedData = { { metric: {}, values: [ - ['2020-01-30 12:00:00', '5'], - ['2020-01-30 12:01:00', '10'], - ['2020-01-30 12:02:00', '15'], + ['2020-01-30T12:00:00.000Z', '5'], + ['2020-01-30T12:01:00.000Z', '10'], + ['2020-01-30T12:02:00.000Z', '15'], ], }, ], @@ -490,9 +485,9 @@ export const stackedColumnMockedData = { { metric: {}, values: [ - ['2020-01-30 12:00:00', '20'], - ['2020-01-30 12:01:00', '25'], - ['2020-01-30 12:02:00', '30'], + ['2020-01-30T12:00:00.000Z', '20'], + ['2020-01-30T12:01:00.000Z', '25'], + ['2020-01-30T12:02:00.000Z', '30'], ], }, ], @@ -563,6 +558,89 @@ export const mockLogsPath = '/mockLogsPath'; export const mockLogsHref = `${mockLogsPath}?duration_seconds=${mockTimeRange.duration.seconds}`; +export const mockLinks = [ + { + title: 'Job', + url: 'http://intel.com/bibendum/felis/sed/interdum/venenatis.png', + }, + { + title: 'Solarbreeze', + url: 'http://ebay.co.uk/primis/in/faucibus.jsp', + }, + { + title: 'Bentosanzap', + url: 'http://cargocollective.com/sociis/natoque/penatibus/et/magnis/dis.js', + }, + { + title: 'Wrapsafe', + url: 'https://bloomberg.com/tempus/vel/pede/morbi.aspx', + }, + { + title: 'Stronghold', + url: 'https://networkadvertising.org/primis/in/faucibus/orci/luctus/et/ultrices.html', + }, + { + title: 'Lotstring', + url: + 'https://huffingtonpost.com/sapien/a/libero.aspx?et=lacus&ultrices=at&posuere=velit&cubilia=vivamus&curae=vel&duis=nulla&faucibus=eget&accumsan=eros&odio=elementum&curabitur=pellentesque&convallis=quisque&duis=porta&consequat=volutpat&dui=erat&nec=quisque&nisi=erat&volutpat=eros&eleifend=viverra&donec=eget&ut=congue&dolor=eget&morbi=semper&vel=rutrum&lectus=nulla&in=nunc&quam=purus&fringilla=phasellus&rhoncus=in&mauris=felis&enim=donec&leo=semper&rhoncus=sapien&sed=a&vestibulum=libero&sit=nam&amet=dui&cursus=proin&id=leo&turpis=odio&integer=porttitor&aliquet=id&massa=consequat&id=in&lobortis=consequat&convallis=ut&tortor=nulla&risus=sed&dapibus=accumsan&augue=felis&vel=ut&accumsan=at&tellus=dolor&nisi=quis&eu=odio', + }, + { + title: 'Cardify', + url: + 'http://nature.com/imperdiet/et/commodo/vulputate/justo/in/blandit.json?tempus=posuere&semper=felis&est=sed&quam=lacus&pharetra=morbi&magna=sem&ac=mauris&consequat=laoreet&metus=ut&sapien=rhoncus&ut=aliquet&nunc=pulvinar&vestibulum=sed&ante=nisl&ipsum=nunc&primis=rhoncus&in=dui&faucibus=vel&orci=sem&luctus=sed&et=sagittis&ultrices=nam&posuere=congue&cubilia=risus&curae=semper&mauris=porta&viverra=volutpat&diam=quam&vitae=pede&quam=lobortis&suspendisse=ligula&potenti=sit&nullam=amet&porttitor=eleifend&lacus=pede&at=libero&turpis=quis', + }, + { + title: 'Ventosanzap', + url: + 'http://stanford.edu/augue/vestibulum/ante/ipsum/primis/in/faucibus.xml?metus=morbi&sapien=quis&ut=tortor&nunc=id&vestibulum=nulla&ante=ultrices&ipsum=aliquet&primis=maecenas&in=leo&faucibus=odio&orci=condimentum&luctus=id&et=luctus&ultrices=nec&posuere=molestie&cubilia=sed&curae=justo&mauris=pellentesque&viverra=viverra&diam=pede&vitae=ac&quam=diam&suspendisse=cras&potenti=pellentesque&nullam=volutpat&porttitor=dui&lacus=maecenas&at=tristique&turpis=est&donec=et&posuere=tempus&metus=semper&vitae=est&ipsum=quam&aliquam=pharetra&non=magna&mauris=ac&morbi=consequat&non=metus', + }, + { + title: 'Cardguard', + url: + 'https://google.com.hk/lacinia/eget/tincidunt/eget/tempus/vel.js?at=eget&turpis=nunc&a=donec', + }, + { + title: 'Namfix', + url: + 'https://fotki.com/eget/rutrum/at/lorem.jsp?at=id&vulputate=nulla&vitae=ultrices&nisl=aliquet&aenean=maecenas&lectus=leo&pellentesque=odio&eget=condimentum&nunc=id&donec=luctus&quis=nec&orci=molestie&eget=sed&orci=justo&vehicula=pellentesque&condimentum=viverra&curabitur=pede&in=ac&libero=diam&ut=cras&massa=pellentesque&volutpat=volutpat&convallis=dui&morbi=maecenas&odio=tristique&odio=est&elementum=et&eu=tempus&interdum=semper&eu=est&tincidunt=quam&in=pharetra&leo=magna&maecenas=ac&pulvinar=consequat&lobortis=metus&est=sapien&phasellus=ut&sit=nunc&amet=vestibulum&erat=ante&nulla=ipsum&tempus=primis&vivamus=in&in=faucibus&felis=orci&eu=luctus&sapien=et&cursus=ultrices&vestibulum=posuere&proin=cubilia&eu=curae&mi=mauris&nulla=viverra&ac=diam&enim=vitae&in=quam&tempor=suspendisse&turpis=potenti&nec=nullam&euismod=porttitor&scelerisque=lacus&quam=at&turpis=turpis&adipiscing=donec&lorem=posuere&vitae=metus&mattis=vitae&nibh=ipsum&ligula=aliquam&nec=non&sem=mauris&duis=morbi&aliquam=non&convallis=lectus&nunc=aliquam&proin=sit&at=amet', + }, + { + title: 'Alpha', + url: + 'http://bravesites.com/tempus/vel.jpg?risus=est&auctor=phasellus&sed=sit&tristique=amet&in=erat&tempus=nulla&sit=tempus&amet=vivamus&sem=in&fusce=felis&consequat=eu&nulla=sapien&nisl=cursus&nunc=vestibulum&nisl=proin&duis=eu&bibendum=mi&felis=nulla&sed=ac&interdum=enim&venenatis=in&turpis=tempor&enim=turpis&blandit=nec&mi=euismod&in=scelerisque&porttitor=quam&pede=turpis&justo=adipiscing&eu=lorem&massa=vitae&donec=mattis&dapibus=nibh&duis=ligula', + }, + { + title: 'Sonsing', + url: + 'http://microsoft.com/blandit.js?quis=ante&lectus=vestibulum&suspendisse=ante&potenti=ipsum&in=primis&eleifend=in&quam=faucibus&a=orci&odio=luctus&in=et&hac=ultrices&habitasse=posuere&platea=cubilia&dictumst=curae&maecenas=duis&ut=faucibus&massa=accumsan&quis=odio&augue=curabitur&luctus=convallis&tincidunt=duis&nulla=consequat&mollis=dui&molestie=nec&lorem=nisi&quisque=volutpat&ut=eleifend&erat=donec&curabitur=ut&gravida=dolor&nisi=morbi&at=vel&nibh=lectus&in=in&hac=quam&habitasse=fringilla&platea=rhoncus&dictumst=mauris&aliquam=enim&augue=leo&quam=rhoncus&sollicitudin=sed&vitae=vestibulum&consectetuer=sit&eget=amet&rutrum=cursus&at=id&lorem=turpis&integer=integer&tincidunt=aliquet&ante=massa&vel=id&ipsum=lobortis&praesent=convallis&blandit=tortor&lacinia=risus&erat=dapibus&vestibulum=augue&sed=vel&magna=accumsan&at=tellus&nunc=nisi&commodo=eu&placerat=orci&praesent=mauris&blandit=lacinia&nam=sapien&nulla=quis&integer=libero', + }, + { + title: 'Fintone', + url: + 'https://linkedin.com/duis/bibendum/felis/sed/interdum/venenatis.json?ut=justo&suscipit=sollicitudin&a=ut&feugiat=suscipit&et=a&eros=feugiat&vestibulum=et&ac=eros&est=vestibulum&lacinia=ac&nisi=est&venenatis=lacinia&tristique=nisi&fusce=venenatis&congue=tristique&diam=fusce&id=congue&ornare=diam&imperdiet=id&sapien=ornare&urna=imperdiet&pretium=sapien&nisl=urna&ut=pretium&volutpat=nisl&sapien=ut&arcu=volutpat&sed=sapien&augue=arcu&aliquam=sed&erat=augue&volutpat=aliquam&in=erat&congue=volutpat&etiam=in&justo=congue&etiam=etiam&pretium=justo&iaculis=etiam&justo=pretium&in=iaculis&hac=justo&habitasse=in&platea=hac&dictumst=habitasse&etiam=platea&faucibus=dictumst&cursus=etiam&urna=faucibus&ut=cursus&tellus=urna&nulla=ut&ut=tellus&erat=nulla&id=ut&mauris=erat&vulputate=id&elementum=mauris&nullam=vulputate&varius=elementum&nulla=nullam&facilisi=varius&cras=nulla&non=facilisi&velit=cras&nec=non&nisi=velit&vulputate=nec&nonummy=nisi&maecenas=vulputate&tincidunt=nonummy&lacus=maecenas&at=tincidunt&velit=lacus&vivamus=at&vel=velit&nulla=vivamus&eget=vel&eros=nulla&elementum=eget', + }, + { + title: 'Fix San', + url: + 'http://pinterest.com/mi/in/porttitor/pede.png?varius=nibh&integer=quisque&ac=id&leo=justo&pellentesque=sit&ultrices=amet&mattis=sapien&odio=dignissim&donec=vestibulum&vitae=vestibulum&nisi=ante&nam=ipsum&ultrices=primis&libero=in&non=faucibus&mattis=orci&pulvinar=luctus&nulla=et&pede=ultrices&ullamcorper=posuere&augue=cubilia&a=curae&suscipit=nulla&nulla=dapibus&elit=dolor&ac=vel&nulla=est&sed=donec&vel=odio&enim=justo&sit=sollicitudin&amet=ut&nunc=suscipit&viverra=a&dapibus=feugiat&nulla=et&suscipit=eros&ligula=vestibulum&in=ac&lacus=est&curabitur=lacinia&at=nisi&ipsum=venenatis&ac=tristique&tellus=fusce&semper=congue&interdum=diam&mauris=id&ullamcorper=ornare&purus=imperdiet&sit=sapien&amet=urna&nulla=pretium&quisque=nisl&arcu=ut&libero=volutpat&rutrum=sapien&ac=arcu&lobortis=sed&vel=augue&dapibus=aliquam&at=erat&diam=volutpat&nam=in&tristique=congue&tortor=etiam', + }, + { + title: 'Ronstring', + url: + 'https://ebay.com/ut/erat.aspx?nulla=sed&eget=nisl&eros=nunc&elementum=rhoncus&pellentesque=dui&quisque=vel&porta=sem&volutpat=sed&erat=sagittis&quisque=nam&erat=congue&eros=risus&viverra=semper&eget=porta&congue=volutpat&eget=quam&semper=pede&rutrum=lobortis&nulla=ligula', + }, + { + title: 'It', + url: + 'http://symantec.com/tortor/sollicitudin/mi/sit/amet.json?in=nullam&libero=varius&ut=nulla&massa=facilisi&volutpat=cras&convallis=non&morbi=velit&odio=nec&odio=nisi&elementum=vulputate&eu=nonummy&interdum=maecenas&eu=tincidunt&tincidunt=lacus&in=at&leo=velit&maecenas=vivamus&pulvinar=vel&lobortis=nulla&est=eget&phasellus=eros&sit=elementum&amet=pellentesque&erat=quisque&nulla=porta&tempus=volutpat&vivamus=erat&in=quisque&felis=erat&eu=eros&sapien=viverra&cursus=eget&vestibulum=congue&proin=eget&eu=semper', + }, + { + title: 'Andalax', + url: + 'https://acquirethisname.com/tortor/eu.js?volutpat=mauris&dui=laoreet&maecenas=ut&tristique=rhoncus&est=aliquet&et=pulvinar&tempus=sed&semper=nisl&est=nunc&quam=rhoncus&pharetra=dui&magna=vel&ac=sem&consequat=sed&metus=sagittis&sapien=nam&ut=congue&nunc=risus&vestibulum=semper&ante=porta&ipsum=volutpat&primis=quam&in=pede&faucibus=lobortis&orci=ligula&luctus=sit&et=amet&ultrices=eleifend&posuere=pede&cubilia=libero&curae=quis&mauris=orci&viverra=nullam&diam=molestie&vitae=nibh&quam=in&suspendisse=lectus&potenti=pellentesque&nullam=at&porttitor=nulla&lacus=suspendisse&at=potenti&turpis=cras&donec=in&posuere=purus&metus=eu&vitae=magna&ipsum=vulputate&aliquam=luctus&non=cum&mauris=sociis&morbi=natoque&non=penatibus&lectus=et&aliquam=magnis&sit=dis&amet=parturient&diam=montes&in=nascetur&magna=ridiculus&bibendum=mus', + }, +]; + const templatingVariableTypes = { text: { simple: 'Simple text', @@ -621,6 +699,19 @@ const templatingVariableTypes = { ], }, }, + withoutOptText: { + label: 'Options without text', + type: 'custom', + options: { + values: [ + { value: 'value1' }, + { + value: 'value2', + default: true, + }, + ], + }, + }, }, }, }; @@ -709,6 +800,26 @@ const responseForAdvancedCustomVariableWithoutLabel = { }, }; +const responseForAdvancedCustomVariableWithoutOptText = { + advCustomWithoutOptText: { + label: 'Options without text', + value: 'value2', + options: [ + { + default: false, + text: 'value1', + value: 'value1', + }, + { + default: true, + text: 'value2', + value: 'value2', + }, + ], + type: 'custom', + }, +}; + const responseForAdvancedCustomVariable = { ...responseForSimpleCustomVariable, advCustomNormal: { @@ -752,6 +863,9 @@ export const mockTemplatingData = { advCustomWithoutLabel: generateMockTemplatingData({ advCustomWithoutLabel: templatingVariableTypes.custom.advanced.withoutLabel, }), + advCustomWithoutOptText: generateMockTemplatingData({ + advCustomWithoutOptText: templatingVariableTypes.custom.advanced.withoutOptText, + }), simpleAndAdv: generateMockTemplatingData({ simpleCustom: templatingVariableTypes.custom.simple, advCustomNormal: templatingVariableTypes.custom.advanced.normal, @@ -773,6 +887,7 @@ export const mockTemplatingDataResponses = { advCustomWithoutOpts: responseForAdvancedCustomVariableWithoutOptions, advCustomWithoutType: {}, advCustomWithoutLabel: responseForAdvancedCustomVariableWithoutLabel, + advCustomWithoutOptText: responseForAdvancedCustomVariableWithoutOptText, simpleAndAdv: responseForAdvancedCustomVariable, allVariableTypes: responsesForAllVariableTypes, }; diff --git a/spec/frontend/monitoring/pages/dashboard_page_spec.js b/spec/frontend/monitoring/pages/dashboard_page_spec.js new file mode 100644 index 00000000000..e3c56ef4cbf --- /dev/null +++ b/spec/frontend/monitoring/pages/dashboard_page_spec.js @@ -0,0 +1,36 @@ +import { shallowMount } from '@vue/test-utils'; +import DashboardPage from '~/monitoring/pages/dashboard_page.vue'; +import Dashboard from '~/monitoring/components/dashboard.vue'; +import { propsData } from '../mock_data'; + +describe('monitoring/pages/dashboard_page', () => { + let wrapper; + + const buildWrapper = (props = {}) => { + wrapper = shallowMount(DashboardPage, { + propsData: { + ...props, + }, + }); + }; + + const findDashboardComponent = () => wrapper.find(Dashboard); + + afterEach(() => { + if (wrapper) { + wrapper.destroy(); + wrapper = null; + } + }); + + it('throws errors if dashboard props are not passed', () => { + expect(() => buildWrapper()).toThrow('Missing required prop: "dashboardProps"'); + }); + + it('renders the dashboard page with dashboard component', () => { + buildWrapper({ dashboardProps: propsData }); + + expect(findDashboardComponent().props()).toMatchObject(propsData); + expect(findDashboardComponent()).toExist(); + }); +}); diff --git a/spec/frontend/monitoring/store/actions_spec.js b/spec/frontend/monitoring/store/actions_spec.js index 8914f2e66ea..d0290386f12 100644 --- a/spec/frontend/monitoring/store/actions_spec.js +++ b/spec/frontend/monitoring/store/actions_spec.js @@ -8,7 +8,7 @@ import createFlash from '~/flash'; import { defaultTimeRange } from '~/vue_shared/constants'; import { ENVIRONMENT_AVAILABLE_STATE } from '~/monitoring/constants'; -import store from '~/monitoring/stores'; +import { createStore } from '~/monitoring/stores'; import * as types from '~/monitoring/stores/mutation_types'; import { fetchData, @@ -26,7 +26,7 @@ import { clearExpandedPanel, setGettingStartedEmptyState, duplicateSystemDashboard, - updateVariableValues, + updateVariablesAndFetchData, } from '~/monitoring/stores/actions'; import { gqClient, @@ -52,20 +52,16 @@ import { jest.mock('~/flash'); -const resetStore = str => { - str.replaceState({ - showEmptyState: true, - emptyState: 'loading', - groups: [], - }); -}; - describe('Monitoring store actions', () => { const { convertObjectPropsToCamelCase } = commonUtils; let mock; + let store; + let state; beforeEach(() => { + store = createStore(); + state = store.state.monitoringDashboard; mock = new MockAdapter(axios); jest.spyOn(commonUtils, 'backOff').mockImplementation(callback => { @@ -83,7 +79,6 @@ describe('Monitoring store actions', () => { }); }); afterEach(() => { - resetStore(store); mock.reset(); commonUtils.backOff.mockReset(); @@ -92,8 +87,6 @@ describe('Monitoring store actions', () => { describe('fetchData', () => { it('dispatches fetchEnvironmentsData and fetchEnvironmentsData', () => { - const { state } = store; - return testAction( fetchData, null, @@ -111,8 +104,6 @@ describe('Monitoring store actions', () => { const origGon = window.gon; window.gon = { features: { metricsDashboardAnnotations: true } }; - const { state } = store; - return testAction( fetchData, null, @@ -131,7 +122,6 @@ describe('Monitoring store actions', () => { describe('fetchDeploymentsData', () => { it('dispatches receiveDeploymentsDataSuccess on success', () => { - const { state } = store; state.deploymentsEndpoint = '/success'; mock.onGet(state.deploymentsEndpoint).reply(200, { deployments: deploymentData, @@ -146,7 +136,6 @@ describe('Monitoring store actions', () => { ); }); it('dispatches receiveDeploymentsDataFailure on error', () => { - const { state } = store; state.deploymentsEndpoint = '/error'; mock.onGet(state.deploymentsEndpoint).reply(500); @@ -164,11 +153,8 @@ describe('Monitoring store actions', () => { }); describe('fetchEnvironmentsData', () => { - const { state } = store; - state.projectPath = 'gitlab-org/gitlab-test'; - - afterEach(() => { - resetStore(store); + beforeEach(() => { + state.projectPath = 'gitlab-org/gitlab-test'; }); it('setting SET_ENVIRONMENTS_FILTER should dispatch fetchEnvironmentsData', () => { @@ -269,17 +255,14 @@ describe('Monitoring store actions', () => { }); describe('fetchAnnotations', () => { - const { state } = store; - state.timeRange = { - start: '2020-04-15T12:54:32.137Z', - end: '2020-08-15T12:54:32.137Z', - }; - state.projectPath = 'gitlab-org/gitlab-test'; - state.currentEnvironmentName = 'production'; - state.currentDashboard = '.gitlab/dashboards/custom_dashboard.yml'; - - afterEach(() => { - resetStore(store); + beforeEach(() => { + state.timeRange = { + start: '2020-04-15T12:54:32.137Z', + end: '2020-08-15T12:54:32.137Z', + }; + state.projectPath = 'gitlab-org/gitlab-test'; + state.currentEnvironmentName = 'production'; + state.currentDashboard = '.gitlab/dashboards/custom_dashboard.yml'; }); it('fetches annotations data and dispatches receiveAnnotationsSuccess', () => { @@ -353,7 +336,6 @@ describe('Monitoring store actions', () => { }); describe('Toggles starred value of current dashboard', () => { - const { state } = store; let unstarredDashboard; let starredDashboard; @@ -379,7 +361,13 @@ describe('Monitoring store actions', () => { return testAction(toggleStarredValue, null, state, [ { type: types.REQUEST_DASHBOARD_STARRING }, - { type: types.RECEIVE_DASHBOARD_STARRING_SUCCESS, payload: true }, + { + type: types.RECEIVE_DASHBOARD_STARRING_SUCCESS, + payload: { + newStarredValue: true, + selectedDashboard: unstarredDashboard, + }, + }, ]); }); @@ -396,23 +384,19 @@ describe('Monitoring store actions', () => { }); describe('Set initial state', () => { - let mockedState; - beforeEach(() => { - mockedState = storeState(); - }); it('should commit SET_INITIAL_STATE mutation', done => { testAction( setInitialState, { - metricsEndpoint: 'additional_metrics.json', + currentDashboard: '.gitlab/dashboards/dashboard.yml', deploymentsEndpoint: 'deployments.json', }, - mockedState, + state, [ { type: types.SET_INITIAL_STATE, payload: { - metricsEndpoint: 'additional_metrics.json', + currentDashboard: '.gitlab/dashboards/dashboard.yml', deploymentsEndpoint: 'deployments.json', }, }, @@ -423,15 +407,11 @@ describe('Monitoring store actions', () => { }); }); describe('Set empty states', () => { - let mockedState; - beforeEach(() => { - mockedState = storeState(); - }); it('should commit SET_METRICS_ENDPOINT mutation', done => { testAction( setGettingStartedEmptyState, null, - mockedState, + state, [ { type: types.SET_GETTING_STARTED_EMPTY_STATE, @@ -443,23 +423,23 @@ describe('Monitoring store actions', () => { }); }); - describe('updateVariableValues', () => { - let mockedState; - beforeEach(() => { - mockedState = storeState(); - }); - it('should commit UPDATE_VARIABLE_VALUES mutation', done => { + describe('updateVariablesAndFetchData', () => { + it('should commit UPDATE_VARIABLES mutation and fetch data', done => { testAction( - updateVariableValues, + updateVariablesAndFetchData, { pod: 'POD' }, - mockedState, + state, [ { - type: types.UPDATE_VARIABLE_VALUES, + type: types.UPDATE_VARIABLES, payload: { pod: 'POD' }, }, ], - [], + [ + { + type: 'fetchDashboardData', + }, + ], done, ); }); @@ -467,13 +447,11 @@ describe('Monitoring store actions', () => { describe('fetchDashboard', () => { let dispatch; - let state; let commit; const response = metricsDashboardResponse; beforeEach(() => { dispatch = jest.fn(); commit = jest.fn(); - state = storeState(); state.dashboardEndpoint = '/dashboard'; }); @@ -557,12 +535,10 @@ describe('Monitoring store actions', () => { describe('receiveMetricsDashboardSuccess', () => { let commit; let dispatch; - let state; beforeEach(() => { commit = jest.fn(); dispatch = jest.fn(); - state = storeState(); }); it('stores groups', () => { @@ -623,13 +599,11 @@ describe('Monitoring store actions', () => { describe('fetchDashboardData', () => { let commit; let dispatch; - let state; beforeEach(() => { jest.spyOn(Tracking, 'event'); commit = jest.fn(); dispatch = jest.fn(); - state = storeState(); state.timeRange = defaultTimeRange; }); @@ -731,7 +705,6 @@ describe('Monitoring store actions', () => { step: 60, }; let metric; - let state; let data; let prometheusEndpointPath; @@ -929,10 +902,7 @@ describe('Monitoring store actions', () => { }); describe('duplicateSystemDashboard', () => { - let state; - beforeEach(() => { - state = storeState(); state.dashboardsEndpoint = '/dashboards.json'; }); @@ -1010,12 +980,6 @@ describe('Monitoring store actions', () => { }); describe('setExpandedPanel', () => { - let state; - - beforeEach(() => { - state = storeState(); - }); - it('Sets a panel as expanded', () => { const group = 'group_1'; const panel = { title: 'A Panel' }; @@ -1031,12 +995,6 @@ describe('Monitoring store actions', () => { }); describe('clearExpandedPanel', () => { - let state; - - beforeEach(() => { - state = storeState(); - }); - it('Clears a panel as expanded', () => { return testAction( clearExpandedPanel, diff --git a/spec/frontend/monitoring/store/getters_spec.js b/spec/frontend/monitoring/store/getters_spec.js index 19ca001c281..933ccb1e46c 100644 --- a/spec/frontend/monitoring/store/getters_spec.js +++ b/spec/frontend/monitoring/store/getters_spec.js @@ -8,6 +8,7 @@ import { metricsResult, dashboardGitResponse, mockTemplatingDataResponses, + mockLinks, } from '../mock_data'; import { metricsDashboardPayload, @@ -334,11 +335,11 @@ describe('Monitoring store Getters', () => { beforeEach(() => { state = { - promVariables: {}, + variables: {}, }; }); - it('transforms the promVariables object to an array in the [variable, variable_value] format for all variable types', () => { + it('transforms the variables object to an array in the [variable, variable_value] format for all variable types', () => { mutations[types.SET_VARIABLES](state, mockTemplatingDataResponses.allVariableTypes); const variablesArray = getters.getCustomVariablesParams(state); @@ -350,7 +351,7 @@ describe('Monitoring store Getters', () => { }); }); - it('transforms the promVariables object to an empty array when no keys are present', () => { + it('transforms the variables object to an empty array when no keys are present', () => { mutations[types.SET_VARIABLES](state, {}); const variablesArray = getters.getCustomVariablesParams(state); @@ -401,4 +402,37 @@ describe('Monitoring store Getters', () => { expect(selectedDashboard(state)).toEqual(null); }); }); + + describe('linksWithMetadata', () => { + let state; + const setupState = (initState = {}) => { + state = { + ...state, + ...initState, + }; + }; + + beforeAll(() => { + setupState({ + links: mockLinks, + }); + }); + + afterAll(() => { + state = null; + }); + + it.each` + timeRange | output + ${{}} | ${''} + ${{ start: '2020-01-01T00:00:00.000Z', end: '2020-01-31T23:59:00.000Z' }} | ${'start=2020-01-01T00%3A00%3A00.000Z&end=2020-01-31T23%3A59%3A00.000Z'} + ${{ duration: { seconds: 86400 } }} | ${'duration_seconds=86400'} + `('linksWithMetadata returns URLs with time range', ({ timeRange, output }) => { + setupState({ timeRange }); + const links = getters.linksWithMetadata(state); + links.forEach(({ url }) => { + expect(url).toMatch(output); + }); + }); + }); }); diff --git a/spec/frontend/monitoring/store/index_spec.js b/spec/frontend/monitoring/store/index_spec.js new file mode 100644 index 00000000000..4184687eec8 --- /dev/null +++ b/spec/frontend/monitoring/store/index_spec.js @@ -0,0 +1,23 @@ +import { createStore } from '~/monitoring/stores'; + +describe('Monitoring Store Index', () => { + it('creates store with a `monitoringDashboard` namespace', () => { + expect(createStore().state).toEqual({ + monitoringDashboard: expect.any(Object), + }); + }); + + it('creates store with initial values', () => { + const defaults = { + deploymentsEndpoint: '/mock/deployments', + dashboardEndpoint: '/mock/dashboard', + dashboardsEndpoint: '/mock/dashboards', + }; + + const { state } = createStore(defaults); + + expect(state).toEqual({ + monitoringDashboard: expect.objectContaining(defaults), + }); + }); +}); diff --git a/spec/frontend/monitoring/store/mutations_spec.js b/spec/frontend/monitoring/store/mutations_spec.js index 4306243689a..0283f1a86a4 100644 --- a/spec/frontend/monitoring/store/mutations_spec.js +++ b/spec/frontend/monitoring/store/mutations_spec.js @@ -93,14 +93,20 @@ describe('Monitoring mutations', () => { }); it('sets a dashboard as starred', () => { - mutations[types.RECEIVE_DASHBOARD_STARRING_SUCCESS](stateCopy, true); + mutations[types.RECEIVE_DASHBOARD_STARRING_SUCCESS](stateCopy, { + selectedDashboard: stateCopy.allDashboards[1], + newStarredValue: true, + }); expect(stateCopy.isUpdatingStarredValue).toBe(false); expect(stateCopy.allDashboards[1].starred).toBe(true); }); it('sets a dashboard as unstarred', () => { - mutations[types.RECEIVE_DASHBOARD_STARRING_SUCCESS](stateCopy, false); + mutations[types.RECEIVE_DASHBOARD_STARRING_SUCCESS](stateCopy, { + selectedDashboard: stateCopy.allDashboards[1], + newStarredValue: false, + }); expect(stateCopy.isUpdatingStarredValue).toBe(false); expect(stateCopy.allDashboards[1].starred).toBe(false); @@ -128,13 +134,11 @@ describe('Monitoring mutations', () => { describe('SET_INITIAL_STATE', () => { it('should set all the endpoints', () => { mutations[types.SET_INITIAL_STATE](stateCopy, { - metricsEndpoint: 'additional_metrics.json', deploymentsEndpoint: 'deployments.json', dashboardEndpoint: 'dashboard.json', projectPath: '/gitlab-org/gitlab-foss', currentEnvironmentName: 'production', }); - expect(stateCopy.metricsEndpoint).toEqual('additional_metrics.json'); expect(stateCopy.deploymentsEndpoint).toEqual('deployments.json'); expect(stateCopy.dashboardEndpoint).toEqual('dashboard.json'); expect(stateCopy.projectPath).toEqual('/gitlab-org/gitlab-foss'); @@ -179,12 +183,10 @@ describe('Monitoring mutations', () => { describe('SET_ENDPOINTS', () => { it('should set all the endpoints', () => { mutations[types.SET_ENDPOINTS](stateCopy, { - metricsEndpoint: 'additional_metrics.json', deploymentsEndpoint: 'deployments.json', dashboardEndpoint: 'dashboard.json', projectPath: '/gitlab-org/gitlab-foss', }); - expect(stateCopy.metricsEndpoint).toEqual('additional_metrics.json'); expect(stateCopy.deploymentsEndpoint).toEqual('deployments.json'); expect(stateCopy.dashboardEndpoint).toEqual('dashboard.json'); expect(stateCopy.projectPath).toEqual('/gitlab-org/gitlab-foss'); @@ -412,26 +414,26 @@ describe('Monitoring mutations', () => { it('stores an empty variables array when no custom variables are given', () => { mutations[types.SET_VARIABLES](stateCopy, {}); - expect(stateCopy.promVariables).toEqual({}); + expect(stateCopy.variables).toEqual({}); }); it('stores variables in the key key_value format in the array', () => { mutations[types.SET_VARIABLES](stateCopy, { pod: 'POD', stage: 'main ops' }); - expect(stateCopy.promVariables).toEqual({ pod: 'POD', stage: 'main ops' }); + expect(stateCopy.variables).toEqual({ pod: 'POD', stage: 'main ops' }); }); }); - describe('UPDATE_VARIABLE_VALUES', () => { + describe('UPDATE_VARIABLES', () => { afterEach(() => { mutations[types.SET_VARIABLES](stateCopy, {}); }); - it('updates only the value of the variable in promVariables', () => { + it('updates only the value of the variable in variables', () => { mutations[types.SET_VARIABLES](stateCopy, { environment: { value: 'prod', type: 'text' } }); - mutations[types.UPDATE_VARIABLE_VALUES](stateCopy, { key: 'environment', value: 'new prod' }); + mutations[types.UPDATE_VARIABLES](stateCopy, { key: 'environment', value: 'new prod' }); - expect(stateCopy.promVariables).toEqual({ environment: { value: 'new prod', type: 'text' } }); + expect(stateCopy.variables).toEqual({ environment: { value: 'new prod', type: 'text' } }); }); }); }); diff --git a/spec/frontend/monitoring/store/utils_spec.js b/spec/frontend/monitoring/store/utils_spec.js index fe5754e1216..3a70bda51da 100644 --- a/spec/frontend/monitoring/store/utils_spec.js +++ b/spec/frontend/monitoring/store/utils_spec.js @@ -5,6 +5,9 @@ import { parseAnnotationsResponse, removeLeadingSlash, mapToDashboardViewModel, + normalizeQueryResult, + convertToGrafanaTimeRange, + addDashboardMetaDataToLink, } from '~/monitoring/stores/utils'; import { annotationsData } from '../mock_data'; import { NOT_IN_DB_PREFIX } from '~/monitoring/constants'; @@ -16,6 +19,8 @@ describe('mapToDashboardViewModel', () => { expect(mapToDashboardViewModel({})).toEqual({ dashboard: '', panelGroups: [], + links: [], + variables: {}, }); }); @@ -44,6 +49,8 @@ describe('mapToDashboardViewModel', () => { expect(mapToDashboardViewModel(response)).toEqual({ dashboard: 'Dashboard Name', + links: [], + variables: {}, panelGroups: [ { group: 'Group 1', @@ -63,6 +70,7 @@ describe('mapToDashboardViewModel', () => { format: 'engineering', precision: 2, }, + links: [], metrics: [], }, ], @@ -75,6 +83,8 @@ describe('mapToDashboardViewModel', () => { it('key', () => { const response = { dashboard: 'Dashboard Name', + links: [], + variables: {}, panel_groups: [ { group: 'Group A', @@ -147,6 +157,7 @@ describe('mapToDashboardViewModel', () => { format: SUPPORTED_FORMATS.engineering, precision: 2, }, + links: [], metrics: [], }); }); @@ -170,6 +181,7 @@ describe('mapToDashboardViewModel', () => { format: SUPPORTED_FORMATS.engineering, precision: 2, }, + links: [], metrics: [], }); }); @@ -238,6 +250,77 @@ describe('mapToDashboardViewModel', () => { expect(getMappedPanel().maxValue).toBe(100); }); + + describe('panel with links', () => { + const title = 'Example'; + const url = 'https://example.com'; + + it('maps an empty link collection', () => { + setupWithPanel({ + links: undefined, + }); + + expect(getMappedPanel().links).toEqual([]); + }); + + it('maps a link', () => { + setupWithPanel({ links: [{ title, url }] }); + + expect(getMappedPanel().links).toEqual([{ title, url }]); + }); + + it('maps a link without a title', () => { + setupWithPanel({ + links: [{ url }], + }); + + expect(getMappedPanel().links).toEqual([{ title: url, url }]); + }); + + it('maps a link without a url', () => { + setupWithPanel({ + links: [{ title }], + }); + + expect(getMappedPanel().links).toEqual([{ title, url: '#' }]); + }); + + it('maps a link without a url or title', () => { + setupWithPanel({ + links: [{}], + }); + + expect(getMappedPanel().links).toEqual([{ title: 'null', url: '#' }]); + }); + + it('maps a link with an unsafe url safely', () => { + // eslint-disable-next-line no-script-url + const unsafeUrl = 'javascript:alert("XSS")'; + + setupWithPanel({ + links: [ + { + title, + url: unsafeUrl, + }, + ], + }); + + expect(getMappedPanel().links).toEqual([{ title, url: '#' }]); + }); + + it('maps multple links', () => { + setupWithPanel({ + links: [{ title, url }, { url }, { title }], + }); + + expect(getMappedPanel().links).toEqual([ + { title, url }, + { title: url, url }, + { title, url: '#' }, + ]); + }); + }); }); describe('metrics mapping', () => { @@ -317,6 +400,28 @@ describe('mapToDashboardViewModel', () => { }); }); +describe('normalizeQueryResult', () => { + const testData = { + metric: { + __name__: 'up', + job: 'prometheus', + instance: 'localhost:9090', + }, + values: [[1435781430.781, '1'], [1435781445.781, '1'], [1435781460.781, '1']], + }; + + it('processes a simple matrix result', () => { + expect(normalizeQueryResult(testData)).toEqual({ + metric: { __name__: 'up', job: 'prometheus', instance: 'localhost:9090' }, + values: [ + ['2015-07-01T20:10:30.781Z', 1], + ['2015-07-01T20:10:45.781Z', 1], + ['2015-07-01T20:11:00.781Z', 1], + ], + }); + }); +}); + describe('uniqMetricsId', () => { [ { input: { id: 1 }, expected: `${NOT_IN_DB_PREFIX}_1` }, @@ -419,3 +524,86 @@ describe('removeLeadingSlash', () => { }); }); }); + +describe('user-defined links utils', () => { + const mockRelativeTimeRange = { + metricsDashboard: { + duration: { + seconds: 86400, + }, + }, + grafana: { + from: 'now-86400s', + to: 'now', + }, + }; + const mockAbsoluteTimeRange = { + metricsDashboard: { + start: '2020-06-08T16:13:01.995Z', + end: '2020-06-08T21:12:32.243Z', + }, + grafana: { + from: 1591632781995, + to: 1591650752243, + }, + }; + describe('convertToGrafanaTimeRange', () => { + it('converts relative timezone to grafana timezone', () => { + expect(convertToGrafanaTimeRange(mockRelativeTimeRange.metricsDashboard)).toEqual( + mockRelativeTimeRange.grafana, + ); + }); + + it('converts absolute timezone to grafana timezone', () => { + expect(convertToGrafanaTimeRange(mockAbsoluteTimeRange.metricsDashboard)).toEqual( + mockAbsoluteTimeRange.grafana, + ); + }); + }); + + describe('addDashboardMetaDataToLink', () => { + const link = { title: 'title', url: 'https://gitlab.com' }; + const grafanaLink = { ...link, type: 'grafana' }; + + it('adds relative time range to link w/o type for metrics dashboards', () => { + const adder = addDashboardMetaDataToLink({ + timeRange: mockRelativeTimeRange.metricsDashboard, + }); + expect(adder(link)).toMatchObject({ + title: 'title', + url: 'https://gitlab.com?duration_seconds=86400', + }); + }); + + it('adds relative time range to Grafana type links', () => { + const adder = addDashboardMetaDataToLink({ + timeRange: mockRelativeTimeRange.metricsDashboard, + }); + expect(adder(grafanaLink)).toMatchObject({ + title: 'title', + url: 'https://gitlab.com?from=now-86400s&to=now', + }); + }); + + it('adds absolute time range to link w/o type for metrics dashboard', () => { + const adder = addDashboardMetaDataToLink({ + timeRange: mockAbsoluteTimeRange.metricsDashboard, + }); + expect(adder(link)).toMatchObject({ + title: 'title', + url: + 'https://gitlab.com?start=2020-06-08T16%3A13%3A01.995Z&end=2020-06-08T21%3A12%3A32.243Z', + }); + }); + + it('adds absolute time range to Grafana type links', () => { + const adder = addDashboardMetaDataToLink({ + timeRange: mockAbsoluteTimeRange.metricsDashboard, + }); + expect(adder(grafanaLink)).toMatchObject({ + title: 'title', + url: 'https://gitlab.com?from=1591632781995&to=1591650752243', + }); + }); + }); +}); diff --git a/spec/frontend/monitoring/store/variable_mapping_spec.js b/spec/frontend/monitoring/store/variable_mapping_spec.js index 47681ac7c65..c44bb957166 100644 --- a/spec/frontend/monitoring/store/variable_mapping_spec.js +++ b/spec/frontend/monitoring/store/variable_mapping_spec.js @@ -3,19 +3,20 @@ import { mockTemplatingData, mockTemplatingDataResponses } from '../mock_data'; describe('parseTemplatingVariables', () => { it.each` - case | input | expected - ${'Returns empty object for no dashboard input'} | ${{}} | ${{}} - ${'Returns empty object for empty dashboard input'} | ${{ dashboard: {} }} | ${{}} - ${'Returns empty object for empty templating prop'} | ${mockTemplatingData.emptyTemplatingProp} | ${{}} - ${'Returns empty object for empty variables prop'} | ${mockTemplatingData.emptyVariablesProp} | ${{}} - ${'Returns parsed object for simple text variable'} | ${mockTemplatingData.simpleText} | ${mockTemplatingDataResponses.simpleText} - ${'Returns parsed object for advanced text variable'} | ${mockTemplatingData.advText} | ${mockTemplatingDataResponses.advText} - ${'Returns parsed object for simple custom variable'} | ${mockTemplatingData.simpleCustom} | ${mockTemplatingDataResponses.simpleCustom} - ${'Returns parsed object for advanced custom variable without options'} | ${mockTemplatingData.advCustomWithoutOpts} | ${mockTemplatingDataResponses.advCustomWithoutOpts} - ${'Returns parsed object for advanced custom variable without type'} | ${mockTemplatingData.advCustomWithoutType} | ${{}} - ${'Returns parsed object for advanced custom variable without label'} | ${mockTemplatingData.advCustomWithoutLabel} | ${mockTemplatingDataResponses.advCustomWithoutLabel} - ${'Returns parsed object for simple and advanced custom variables'} | ${mockTemplatingData.simpleAndAdv} | ${mockTemplatingDataResponses.simpleAndAdv} - ${'Returns parsed object for all variable types'} | ${mockTemplatingData.allVariableTypes} | ${mockTemplatingDataResponses.allVariableTypes} + case | input | expected + ${'Returns empty object for no dashboard input'} | ${{}} | ${{}} + ${'Returns empty object for empty dashboard input'} | ${{ dashboard: {} }} | ${{}} + ${'Returns empty object for empty templating prop'} | ${mockTemplatingData.emptyTemplatingProp} | ${{}} + ${'Returns empty object for empty variables prop'} | ${mockTemplatingData.emptyVariablesProp} | ${{}} + ${'Returns parsed object for simple text variable'} | ${mockTemplatingData.simpleText} | ${mockTemplatingDataResponses.simpleText} + ${'Returns parsed object for advanced text variable'} | ${mockTemplatingData.advText} | ${mockTemplatingDataResponses.advText} + ${'Returns parsed object for simple custom variable'} | ${mockTemplatingData.simpleCustom} | ${mockTemplatingDataResponses.simpleCustom} + ${'Returns parsed object for advanced custom variable without options'} | ${mockTemplatingData.advCustomWithoutOpts} | ${mockTemplatingDataResponses.advCustomWithoutOpts} + ${'Returns parsed object for advanced custom variable for option without text'} | ${mockTemplatingData.advCustomWithoutOptText} | ${mockTemplatingDataResponses.advCustomWithoutOptText} + ${'Returns parsed object for advanced custom variable without type'} | ${mockTemplatingData.advCustomWithoutType} | ${{}} + ${'Returns parsed object for advanced custom variable without label'} | ${mockTemplatingData.advCustomWithoutLabel} | ${mockTemplatingDataResponses.advCustomWithoutLabel} + ${'Returns parsed object for simple and advanced custom variables'} | ${mockTemplatingData.simpleAndAdv} | ${mockTemplatingDataResponses.simpleAndAdv} + ${'Returns parsed object for all variable types'} | ${mockTemplatingData.allVariableTypes} | ${mockTemplatingDataResponses.allVariableTypes} `('$case', ({ input, expected }) => { expect(parseTemplatingVariables(input?.dashboard?.templating)).toEqual(expected); }); diff --git a/spec/frontend/monitoring/store_utils.js b/spec/frontend/monitoring/store_utils.js index 338af79dbbe..eb2578aa9db 100644 --- a/spec/frontend/monitoring/store_utils.js +++ b/spec/frontend/monitoring/store_utils.js @@ -16,8 +16,13 @@ const setEnvironmentData = store => { store.commit(`monitoringDashboard/${types.RECEIVE_ENVIRONMENTS_DATA_SUCCESS}`, environmentData); }; -export const setupAllDashboards = store => { +export const setupAllDashboards = (store, path) => { store.commit(`monitoringDashboard/${types.SET_ALL_DASHBOARDS}`, dashboardGitResponse); + if (path) { + store.commit(`monitoringDashboard/${types.SET_INITIAL_STATE}`, { + currentDashboard: path, + }); + } }; export const setupStoreWithDashboard = store => { @@ -25,10 +30,6 @@ export const setupStoreWithDashboard = store => { `monitoringDashboard/${types.RECEIVE_METRICS_DASHBOARD_SUCCESS}`, metricsDashboardPayload, ); - store.commit( - `monitoringDashboard/${types.RECEIVE_METRICS_DASHBOARD_SUCCESS}`, - metricsDashboardPayload, - ); }; export const setupStoreWithVariable = store => { @@ -37,6 +38,18 @@ export const setupStoreWithVariable = store => { }); }; +export const setupStoreWithLinks = store => { + store.commit(`monitoringDashboard/${types.RECEIVE_METRICS_DASHBOARD_SUCCESS}`, { + ...metricsDashboardPayload, + links: [ + { + title: 'GitLab Website', + url: `https://gitlab.com/website`, + }, + ], + }); +}; + export const setupStoreWithData = store => { setupAllDashboards(store); setupStoreWithDashboard(store); diff --git a/spec/frontend/namespace_storage_limit_alert_spec.js b/spec/frontend/namespace_storage_limit_alert_spec.js new file mode 100644 index 00000000000..ef398b12e1f --- /dev/null +++ b/spec/frontend/namespace_storage_limit_alert_spec.js @@ -0,0 +1,36 @@ +import Cookies from 'js-cookie'; +import initNamespaceStorageLimitAlert from '~/namespace_storage_limit_alert'; + +describe('broadcast message on dismiss', () => { + const dismiss = () => { + const button = document.querySelector('.js-namespace-storage-alert-dismiss'); + button.click(); + }; + + beforeEach(() => { + setFixtures(` + <div class="js-namespace-storage-alert"> + <button class="js-namespace-storage-alert-dismiss" data-id="1" data-level="info"></button> + </div> + `); + + initNamespaceStorageLimitAlert(); + }); + + it('removes alert', () => { + expect(document.querySelector('.js-namespace-storage-alert')).toBeTruthy(); + + dismiss(); + + expect(document.querySelector('.js-namespace-storage-alert')).toBeNull(); + }); + + it('calls Cookies.set', () => { + jest.spyOn(Cookies, 'set'); + dismiss(); + + expect(Cookies.set).toHaveBeenCalledWith('hide_storage_limit_alert_1_info', true, { + expires: 365, + }); + }); +}); diff --git a/spec/frontend/notes/components/diff_with_note_spec.js b/spec/frontend/notes/components/diff_with_note_spec.js index d6d42e1988d..6480af015db 100644 --- a/spec/frontend/notes/components/diff_with_note_spec.js +++ b/spec/frontend/notes/components/diff_with_note_spec.js @@ -1,4 +1,4 @@ -import { mount } from '@vue/test-utils'; +import { shallowMount } from '@vue/test-utils'; import DiffWithNote from '~/notes/components/diff_with_note.vue'; import { createStore } from '~/mr_notes/stores'; @@ -37,7 +37,7 @@ describe('diff_with_note', () => { beforeEach(() => { const diffDiscussion = getJSONFixture(discussionFixture)[0]; - wrapper = mount(DiffWithNote, { + wrapper = shallowMount(DiffWithNote, { propsData: { discussion: diffDiscussion, }, @@ -76,7 +76,10 @@ describe('diff_with_note', () => { describe('image diff', () => { beforeEach(() => { const imageDiscussion = getJSONFixture(imageDiscussionFixture)[0]; - wrapper = mount(DiffWithNote, { propsData: { discussion: imageDiscussion }, store }); + wrapper = shallowMount(DiffWithNote, { + propsData: { discussion: imageDiscussion, diffFile: {} }, + store, + }); }); it('shows image diff', () => { diff --git a/spec/frontend/notes/components/discussion_reply_placeholder_spec.js b/spec/frontend/notes/components/discussion_reply_placeholder_spec.js index a881e44a007..b7b7ec08867 100644 --- a/spec/frontend/notes/components/discussion_reply_placeholder_spec.js +++ b/spec/frontend/notes/components/discussion_reply_placeholder_spec.js @@ -20,7 +20,7 @@ describe('ReplyPlaceholder', () => { wrapper.destroy(); }); - it('emits onClick even on button click', () => { + it('emits onClick event on button click', () => { findButton().trigger('click'); return wrapper.vm.$nextTick().then(() => { diff --git a/spec/frontend/notes/components/multiline_comment_utils_spec.js b/spec/frontend/notes/components/multiline_comment_utils_spec.js new file mode 100644 index 00000000000..261bfb106e7 --- /dev/null +++ b/spec/frontend/notes/components/multiline_comment_utils_spec.js @@ -0,0 +1,49 @@ +import { + getSymbol, + getStartLineNumber, + getEndLineNumber, +} from '~/notes/components/multiline_comment_utils'; + +describe('Multiline comment utilities', () => { + describe('getStartLineNumber', () => { + it.each` + lineCode | type | result + ${'abcdef_1_1'} | ${'old'} | ${'-1'} + ${'abcdef_1_1'} | ${'new'} | ${'+1'} + ${'abcdef_1_1'} | ${null} | ${'1'} + ${'abcdef'} | ${'new'} | ${''} + ${'abcdef'} | ${'old'} | ${''} + ${'abcdef'} | ${null} | ${''} + `('returns line number', ({ lineCode, type, result }) => { + expect(getStartLineNumber({ start_line_code: lineCode, start_line_type: type })).toEqual( + result, + ); + }); + }); + describe('getEndLineNumber', () => { + it.each` + lineCode | type | result + ${'abcdef_1_1'} | ${'old'} | ${'-1'} + ${'abcdef_1_1'} | ${'new'} | ${'+1'} + ${'abcdef_1_1'} | ${null} | ${'1'} + ${'abcdef'} | ${'new'} | ${''} + ${'abcdef'} | ${'old'} | ${''} + ${'abcdef'} | ${null} | ${''} + `('returns line number', ({ lineCode, type, result }) => { + expect(getEndLineNumber({ end_line_code: lineCode, end_line_type: type })).toEqual(result); + }); + }); + describe('getSymbol', () => { + it.each` + type | result + ${'new'} | ${'+'} + ${'old'} | ${'-'} + ${'unused'} | ${''} + ${''} | ${''} + ${null} | ${''} + ${undefined} | ${''} + `('`$type` returns `$result`', ({ type, result }) => { + expect(getSymbol(type)).toEqual(result); + }); + }); +}); diff --git a/spec/frontend/notes/components/note_actions_spec.js b/spec/frontend/notes/components/note_actions_spec.js index 5d13f587ca7..220ac22d8eb 100644 --- a/spec/frontend/notes/components/note_actions_spec.js +++ b/spec/frontend/notes/components/note_actions_spec.js @@ -4,26 +4,33 @@ import { TEST_HOST } from 'spec/test_constants'; import createStore from '~/notes/stores'; import noteActions from '~/notes/components/note_actions.vue'; import { userDataMock } from '../mock_data'; +import AxiosMockAdapter from 'axios-mock-adapter'; +import axios from '~/lib/utils/axios_utils'; describe('noteActions', () => { let wrapper; let store; let props; + let actions; + let axiosMock; - const shallowMountNoteActions = propsData => { + const shallowMountNoteActions = (propsData, computed) => { const localVue = createLocalVue(); return shallowMount(localVue.extend(noteActions), { store, propsData, localVue, + computed, }); }; beforeEach(() => { store = createStore(); + props = { accessLevel: 'Maintainer', - authorId: 26, + authorId: 1, + author: userDataMock, canDelete: true, canEdit: true, canAwardEmoji: true, @@ -33,10 +40,17 @@ describe('noteActions', () => { reportAbusePath: `${TEST_HOST}/abuse_reports/new?ref_url=http%3A%2F%2Flocalhost%3A3000%2Fgitlab-org%2Fgitlab-ce%2Fissues%2F7%23note_539&user_id=26`, showReply: false, }; + + actions = { + updateAssignees: jest.fn(), + }; + + axiosMock = new AxiosMockAdapter(axios); }); afterEach(() => { wrapper.destroy(); + axiosMock.restore(); }); describe('user is logged in', () => { @@ -76,6 +90,14 @@ describe('noteActions', () => { it('should not show copy link action when `noteUrl` prop is empty', done => { wrapper.setProps({ ...props, + author: { + avatar_url: 'mock_path', + id: 26, + name: 'Example Maintainer', + path: '/ExampleMaintainer', + state: 'active', + username: 'ExampleMaintainer', + }, noteUrl: '', }); @@ -104,6 +126,25 @@ describe('noteActions', () => { }) .catch(done.fail); }); + + it('should be possible to assign or unassign the comment author', () => { + wrapper = shallowMountNoteActions(props, { + targetType: () => 'issue', + }); + + const assignUserButton = wrapper.find('[data-testid="assign-user"]'); + expect(assignUserButton.exists()).toBe(true); + + assignUserButton.trigger('click'); + axiosMock.onPut(`${TEST_HOST}/api/v4/projects/group/project/issues/1`).reply(() => { + expect(actions.updateAssignees).toHaveBeenCalled(); + }); + }); + + it('should not be possible to assign or unassign the comment author in a merge request', () => { + const assignUserButton = wrapper.find('[data-testid="assign-user"]'); + expect(assignUserButton.exists()).toBe(false); + }); }); }); @@ -157,4 +198,19 @@ describe('noteActions', () => { expect(replyButton.exists()).toBe(false); }); }); + + describe('Draft notes', () => { + beforeEach(() => { + store.dispatch('setUserData', userDataMock); + + wrapper = shallowMountNoteActions({ ...props, canResolve: true, isDraft: true }); + }); + + it('should render the right resolve button title', () => { + const resolveButton = wrapper.find({ ref: 'resolveButton' }); + + expect(resolveButton.exists()).toBe(true); + expect(resolveButton.attributes('title')).toBe('Thread stays unresolved'); + }); + }); }); diff --git a/spec/frontend/notes/components/note_form_spec.js b/spec/frontend/notes/components/note_form_spec.js index 8270c148fb5..15802841c57 100644 --- a/spec/frontend/notes/components/note_form_spec.js +++ b/spec/frontend/notes/components/note_form_spec.js @@ -1,8 +1,9 @@ import { shallowMount, createLocalVue } from '@vue/test-utils'; import createStore from '~/notes/stores'; import NoteForm from '~/notes/components/note_form.vue'; +import batchComments from '~/batch_comments/stores/modules/batch_comments'; import MarkdownField from '~/vue_shared/components/markdown/field.vue'; -import { noteableDataMock, notesDataMock } from '../mock_data'; +import { noteableDataMock, notesDataMock, discussionMock } from '../mock_data'; import { getDraft, updateDraft } from '~/lib/utils/autosave'; @@ -245,4 +246,55 @@ describe('issue_note_form component', () => { expect(updateDraft).toHaveBeenCalledWith(dummyAutosaveKey, dummyContent); }); }); + + describe('with batch comments', () => { + beforeEach(() => { + store.registerModule('batchComments', batchComments()); + + wrapper = createComponentWrapper(); + wrapper.setProps({ + ...props, + noteId: '', + discussion: { ...discussionMock, for_commit: false }, + }); + }); + + it('should be possible to cancel', () => { + jest.spyOn(wrapper.vm, 'cancelHandler'); + + return wrapper.vm.$nextTick().then(() => { + const cancelButton = wrapper.find('[data-testid="cancelBatchCommentsEnabled"]'); + cancelButton.trigger('click'); + + expect(wrapper.vm.cancelHandler).toHaveBeenCalledWith(true); + }); + }); + + it('shows resolve checkbox', () => { + expect(wrapper.find('.js-resolve-checkbox').exists()).toBe(true); + }); + + it('hides actions for commits', () => { + wrapper.setProps({ discussion: { for_commit: true } }); + + return wrapper.vm.$nextTick(() => { + expect(wrapper.find('.note-form-actions').text()).not.toContain('Start a review'); + }); + }); + + describe('on enter', () => { + it('should start review or add to review when cmd+enter is pressed', () => { + const textarea = wrapper.find('textarea'); + + jest.spyOn(wrapper.vm, 'handleAddToReview'); + + textarea.setValue('Foo'); + textarea.trigger('keydown.enter', { metaKey: true }); + + return wrapper.vm.$nextTick(() => { + expect(wrapper.vm.handleAddToReview).toHaveBeenCalled(); + }); + }); + }); + }); }); diff --git a/spec/frontend/notes/components/noteable_note_spec.js b/spec/frontend/notes/components/noteable_note_spec.js index 0d67b1d87a9..aa3eaa97e20 100644 --- a/spec/frontend/notes/components/noteable_note_spec.js +++ b/spec/frontend/notes/components/noteable_note_spec.js @@ -1,5 +1,5 @@ import { escape } from 'lodash'; -import { shallowMount, createLocalVue } from '@vue/test-utils'; +import { mount, createLocalVue } from '@vue/test-utils'; import createStore from '~/notes/stores'; import issueNote from '~/notes/components/noteable_note.vue'; import NoteHeader from '~/notes/components/note_header.vue'; @@ -8,9 +8,19 @@ import NoteActions from '~/notes/components/note_actions.vue'; import NoteBody from '~/notes/components/note_body.vue'; import { noteableDataMock, notesDataMock, note } from '../mock_data'; +jest.mock('~/vue_shared/mixins/gl_feature_flags_mixin', () => () => ({ + inject: { + glFeatures: { + from: 'glFeatures', + default: () => ({ multilineComments: true }), + }, + }, +})); + describe('issue_note', () => { let store; let wrapper; + const findMultilineComment = () => wrapper.find('[data-testid="multiline-comment"]'); beforeEach(() => { store = createStore(); @@ -18,12 +28,13 @@ describe('issue_note', () => { store.dispatch('setNotesData', notesDataMock); const localVue = createLocalVue(); - wrapper = shallowMount(localVue.extend(issueNote), { + wrapper = mount(localVue.extend(issueNote), { store, propsData: { note, }, localVue, + stubs: ['note-header', 'user-avatar-link', 'note-actions', 'note-body'], }); }); @@ -31,6 +42,44 @@ describe('issue_note', () => { wrapper.destroy(); }); + describe('mutiline comments', () => { + it('should render if has multiline comment', () => { + const position = { + line_range: { + start_line_code: 'abc_1_1', + end_line_code: 'abc_2_2', + }, + }; + wrapper.setProps({ + note: { ...note, position }, + }); + + return wrapper.vm.$nextTick().then(() => { + expect(findMultilineComment().text()).toEqual('Comment on lines 1 to 2'); + }); + }); + + it('should not render if has single line comment', () => { + const position = { + line_range: { + start_line_code: 'abc_1_1', + end_line_code: 'abc_1_1', + }, + }; + wrapper.setProps({ + note: { ...note, position }, + }); + + return wrapper.vm.$nextTick().then(() => { + expect(findMultilineComment().exists()).toBe(false); + }); + }); + + it('should not render if `line_range` is unavailable', () => { + expect(findMultilineComment().exists()).toBe(false); + }); + }); + it('should render user information', () => { const { author } = note; const avatar = wrapper.find(UserAvatarLink); diff --git a/spec/frontend/notes/mixins/discussion_navigation_spec.js b/spec/frontend/notes/mixins/discussion_navigation_spec.js index 120de023099..ae30a36fc81 100644 --- a/spec/frontend/notes/mixins/discussion_navigation_spec.js +++ b/spec/frontend/notes/mixins/discussion_navigation_spec.js @@ -41,7 +41,7 @@ describe('Discussion navigation mixin', () => { .join(''), ); - jest.spyOn(utils, 'scrollToElement'); + jest.spyOn(utils, 'scrollToElementWithContext'); expandDiscussion = jest.fn(); const { actions, ...notesRest } = notesModule(); @@ -102,7 +102,7 @@ describe('Discussion navigation mixin', () => { }); it('scrolls to element', () => { - expect(utils.scrollToElement).toHaveBeenCalledWith( + expect(utils.scrollToElementWithContext).toHaveBeenCalledWith( findDiscussion('div.discussion', expected), ); }); @@ -123,11 +123,13 @@ describe('Discussion navigation mixin', () => { }); it('scrolls when scrollToDiscussion is emitted', () => { - expect(utils.scrollToElement).not.toHaveBeenCalled(); + expect(utils.scrollToElementWithContext).not.toHaveBeenCalled(); eventHub.$emit('scrollToDiscussion'); - expect(utils.scrollToElement).toHaveBeenCalledWith(findDiscussion('ul.notes', expected)); + expect(utils.scrollToElementWithContext).toHaveBeenCalledWith( + findDiscussion('ul.notes', expected), + ); }); }); @@ -167,7 +169,7 @@ describe('Discussion navigation mixin', () => { }); it('scrolls to discussion', () => { - expect(utils.scrollToElement).toHaveBeenCalledWith( + expect(utils.scrollToElementWithContext).toHaveBeenCalledWith( findDiscussion('div.discussion', expected), ); }); diff --git a/spec/frontend/notes/mock_data.js b/spec/frontend/notes/mock_data.js index 980faac2b04..4ff64abe4cc 100644 --- a/spec/frontend/notes/mock_data.js +++ b/spec/frontend/notes/mock_data.js @@ -1254,3 +1254,16 @@ export const discussionFiltersMock = [ value: 2, }, ]; + +export const batchSuggestionsInfoMock = [ + { + suggestionId: 'a123', + noteId: 'b456', + discussionId: 'c789', + }, + { + suggestionId: 'a001', + noteId: 'b002', + discussionId: 'c003', + }, +]; diff --git a/spec/frontend/notes/stores/actions_spec.js b/spec/frontend/notes/stores/actions_spec.js index cbfb9597159..ef87cb3bee7 100644 --- a/spec/frontend/notes/stores/actions_spec.js +++ b/spec/frontend/notes/stores/actions_spec.js @@ -15,6 +15,7 @@ import { userDataMock, noteableDataMock, individualNote, + batchSuggestionsInfoMock, } from '../mock_data'; import axios from '~/lib/utils/axios_utils'; @@ -890,7 +891,23 @@ describe('Actions Notes Store', () => { testSubmitSuggestion(done, () => { expect(commit).not.toHaveBeenCalled(); expect(dispatch).not.toHaveBeenCalled(); - expect(Flash).toHaveBeenCalledWith(`${TEST_ERROR_MESSAGE}.`, 'alert', flashContainer); + expect(Flash).toHaveBeenCalledWith(TEST_ERROR_MESSAGE, 'alert', flashContainer); + }); + }); + + it('when service fails, and no error message available, uses default message', done => { + const response = { response: 'foo' }; + + Api.applySuggestion.mockReturnValue(Promise.reject(response)); + + testSubmitSuggestion(done, () => { + expect(commit).not.toHaveBeenCalled(); + expect(dispatch).not.toHaveBeenCalled(); + expect(Flash).toHaveBeenCalledWith( + 'Something went wrong while applying the suggestion. Please try again.', + 'alert', + flashContainer, + ); }); }); @@ -903,6 +920,130 @@ describe('Actions Notes Store', () => { }); }); + describe('submitSuggestionBatch', () => { + const discussionIds = batchSuggestionsInfoMock.map(({ discussionId }) => discussionId); + const batchSuggestionsInfo = batchSuggestionsInfoMock; + + let flashContainer; + + beforeEach(() => { + jest.spyOn(Api, 'applySuggestionBatch'); + dispatch.mockReturnValue(Promise.resolve()); + Api.applySuggestionBatch.mockReturnValue(Promise.resolve()); + state = { batchSuggestionsInfo }; + flashContainer = {}; + }); + + const testSubmitSuggestionBatch = (done, expectFn) => { + actions + .submitSuggestionBatch({ commit, dispatch, state }, { flashContainer }) + .then(expectFn) + .then(done) + .catch(done.fail); + }; + + it('when service succeeds, commits, resolves discussions, resets batch and applying batch state', done => { + testSubmitSuggestionBatch(done, () => { + expect(commit.mock.calls).toEqual([ + [mutationTypes.SET_APPLYING_BATCH_STATE, true], + [mutationTypes.APPLY_SUGGESTION, batchSuggestionsInfo[0]], + [mutationTypes.APPLY_SUGGESTION, batchSuggestionsInfo[1]], + [mutationTypes.CLEAR_SUGGESTION_BATCH], + [mutationTypes.SET_APPLYING_BATCH_STATE, false], + ]); + + expect(dispatch.mock.calls).toEqual([ + ['resolveDiscussion', { discussionId: discussionIds[0] }], + ['resolveDiscussion', { discussionId: discussionIds[1] }], + ]); + + expect(Flash).not.toHaveBeenCalled(); + }); + }); + + it('when service fails, flashes error message, resets applying batch state', done => { + const response = { response: { data: { message: TEST_ERROR_MESSAGE } } }; + + Api.applySuggestionBatch.mockReturnValue(Promise.reject(response)); + + testSubmitSuggestionBatch(done, () => { + expect(commit.mock.calls).toEqual([ + [mutationTypes.SET_APPLYING_BATCH_STATE, true], + [mutationTypes.SET_APPLYING_BATCH_STATE, false], + ]); + + expect(dispatch).not.toHaveBeenCalled(); + expect(Flash).toHaveBeenCalledWith(TEST_ERROR_MESSAGE, 'alert', flashContainer); + }); + }); + + it('when service fails, and no error message available, uses default message', done => { + const response = { response: 'foo' }; + + Api.applySuggestionBatch.mockReturnValue(Promise.reject(response)); + + testSubmitSuggestionBatch(done, () => { + expect(commit.mock.calls).toEqual([ + [mutationTypes.SET_APPLYING_BATCH_STATE, true], + [mutationTypes.SET_APPLYING_BATCH_STATE, false], + ]); + + expect(dispatch).not.toHaveBeenCalled(); + expect(Flash).toHaveBeenCalledWith( + 'Something went wrong while applying the batch of suggestions. Please try again.', + 'alert', + flashContainer, + ); + }); + }); + + it('when resolve discussions fails, fails gracefully, resets batch and applying batch state', done => { + dispatch.mockReturnValue(Promise.reject()); + + testSubmitSuggestionBatch(done, () => { + expect(commit.mock.calls).toEqual([ + [mutationTypes.SET_APPLYING_BATCH_STATE, true], + [mutationTypes.APPLY_SUGGESTION, batchSuggestionsInfo[0]], + [mutationTypes.APPLY_SUGGESTION, batchSuggestionsInfo[1]], + [mutationTypes.CLEAR_SUGGESTION_BATCH], + [mutationTypes.SET_APPLYING_BATCH_STATE, false], + ]); + + expect(Flash).not.toHaveBeenCalled(); + }); + }); + }); + + describe('addSuggestionInfoToBatch', () => { + const suggestionInfo = batchSuggestionsInfoMock[0]; + + it("adds a suggestion's info to the current batch", done => { + testAction( + actions.addSuggestionInfoToBatch, + suggestionInfo, + { batchSuggestionsInfo: [] }, + [{ type: 'ADD_SUGGESTION_TO_BATCH', payload: suggestionInfo }], + [], + done, + ); + }); + }); + + describe('removeSuggestionInfoFromBatch', () => { + const suggestionInfo = batchSuggestionsInfoMock[0]; + + it("removes a suggestion's info the current batch", done => { + testAction( + actions.removeSuggestionInfoFromBatch, + suggestionInfo.suggestionId, + { batchSuggestionsInfo: [suggestionInfo] }, + [{ type: 'REMOVE_SUGGESTION_FROM_BATCH', payload: suggestionInfo.suggestionId }], + [], + done, + ); + }); + }); + describe('filterDiscussion', () => { const path = 'some-discussion-path'; const filter = 0; @@ -942,4 +1083,75 @@ describe('Actions Notes Store', () => { ); }); }); + + describe('softDeleteDescriptionVersion', () => { + const endpoint = '/path/to/diff/1'; + const payload = { + endpoint, + startingVersion: undefined, + versionId: 1, + }; + + describe('if response contains no errors', () => { + it('dispatches requestDeleteDescriptionVersion', done => { + axiosMock.onDelete(endpoint).replyOnce(200); + testAction( + actions.softDeleteDescriptionVersion, + payload, + {}, + [], + [ + { + type: 'requestDeleteDescriptionVersion', + }, + { + type: 'receiveDeleteDescriptionVersion', + payload: payload.versionId, + }, + ], + done, + ); + }); + }); + + describe('if response contains errors', () => { + const errorMessage = 'Request failed with status code 503'; + it('dispatches receiveDeleteDescriptionVersionError and throws an error', done => { + axiosMock.onDelete(endpoint).replyOnce(503); + testAction( + actions.softDeleteDescriptionVersion, + payload, + {}, + [], + [ + { + type: 'requestDeleteDescriptionVersion', + }, + { + type: 'receiveDeleteDescriptionVersionError', + payload: new Error(errorMessage), + }, + ], + ) + .then(() => done.fail('Expected error to be thrown')) + .catch(() => { + expect(Flash).toHaveBeenCalled(); + done(); + }); + }); + }); + }); + + describe('updateAssignees', () => { + it('update the assignees state', done => { + testAction( + actions.updateAssignees, + [userDataMock.id], + { state: noteableDataMock }, + [{ type: mutationTypes.UPDATE_ASSIGNEES, payload: [userDataMock.id] }], + [], + done, + ); + }); + }); }); diff --git a/spec/frontend/notes/stores/mutation_spec.js b/spec/frontend/notes/stores/mutation_spec.js index 27e3490d64b..75ef007b78d 100644 --- a/spec/frontend/notes/stores/mutation_spec.js +++ b/spec/frontend/notes/stores/mutation_spec.js @@ -9,6 +9,7 @@ import { noteableDataMock, individualNote, notesWithDescriptionChanges, + batchSuggestionsInfoMock, } from '../mock_data'; const RESOLVED_NOTE = { resolvable: true, resolved: true }; @@ -700,4 +701,120 @@ describe('Notes Store mutations', () => { expect(state.isToggleBlockedIssueWarning).toEqual(false); }); }); + + describe('SET_APPLYING_BATCH_STATE', () => { + const buildDiscussions = suggestionsInfo => { + const suggestions = suggestionsInfo.map(({ suggestionId }) => ({ id: suggestionId })); + + const notes = suggestionsInfo.map(({ noteId }, index) => ({ + id: noteId, + suggestions: [suggestions[index]], + })); + + return suggestionsInfo.map(({ discussionId }, index) => ({ + id: discussionId, + notes: [notes[index]], + })); + }; + + let state; + let batchedSuggestionInfo; + let discussions; + let suggestions; + + beforeEach(() => { + [batchedSuggestionInfo] = batchSuggestionsInfoMock; + suggestions = batchSuggestionsInfoMock.map(({ suggestionId }) => ({ id: suggestionId })); + discussions = buildDiscussions(batchSuggestionsInfoMock); + state = { + batchSuggestionsInfo: [batchedSuggestionInfo], + discussions, + }; + }); + + it('sets is_applying_batch to a boolean value for all batched suggestions', () => { + mutations.SET_APPLYING_BATCH_STATE(state, true); + + const updatedSuggestion = { + ...suggestions[0], + is_applying_batch: true, + }; + + const expectedSuggestions = [updatedSuggestion, suggestions[1]]; + + const actualSuggestions = state.discussions + .map(discussion => discussion.notes.map(n => n.suggestions)) + .flat(2); + + expect(actualSuggestions).toEqual(expectedSuggestions); + }); + }); + + describe('ADD_SUGGESTION_TO_BATCH', () => { + let state; + + beforeEach(() => { + state = { batchSuggestionsInfo: [] }; + }); + + it("adds a suggestion's info to a batch", () => { + const suggestionInfo = { + suggestionId: 'a123', + noteId: 'b456', + discussionId: 'c789', + }; + + mutations.ADD_SUGGESTION_TO_BATCH(state, suggestionInfo); + + expect(state.batchSuggestionsInfo).toEqual([suggestionInfo]); + }); + }); + + describe('REMOVE_SUGGESTION_FROM_BATCH', () => { + let state; + let suggestionInfo1; + let suggestionInfo2; + + beforeEach(() => { + [suggestionInfo1, suggestionInfo2] = batchSuggestionsInfoMock; + + state = { + batchSuggestionsInfo: [suggestionInfo1, suggestionInfo2], + }; + }); + + it("removes a suggestion's info from a batch", () => { + mutations.REMOVE_SUGGESTION_FROM_BATCH(state, suggestionInfo1.suggestionId); + + expect(state.batchSuggestionsInfo).toEqual([suggestionInfo2]); + }); + }); + + describe('CLEAR_SUGGESTION_BATCH', () => { + let state; + + beforeEach(() => { + state = { + batchSuggestionsInfo: batchSuggestionsInfoMock, + }; + }); + + it('removes info for all suggestions from a batch', () => { + mutations.CLEAR_SUGGESTION_BATCH(state); + + expect(state.batchSuggestionsInfo.length).toEqual(0); + }); + }); + + describe('UPDATE_ASSIGNEES', () => { + it('should update assignees', () => { + const state = { + noteableData: noteableDataMock, + }; + + mutations.UPDATE_ASSIGNEES(state, [userDataMock.id]); + + expect(state.noteableData.assignees).toEqual([userDataMock.id]); + }); + }); }); diff --git a/spec/frontend/oauth_remember_me_spec.js b/spec/frontend/oauth_remember_me_spec.js index 381be82697e..e12db05ac43 100644 --- a/spec/frontend/oauth_remember_me_spec.js +++ b/spec/frontend/oauth_remember_me_spec.js @@ -2,6 +2,12 @@ import $ from 'jquery'; import OAuthRememberMe from '~/pages/sessions/new/oauth_remember_me'; describe('OAuthRememberMe', () => { + const findFormAction = selector => { + return $(`#oauth-container .oauth-login${selector}`) + .parent('form') + .attr('action'); + }; + preloadFixtures('static/oauth_remember_me.html'); beforeEach(() => { @@ -13,15 +19,9 @@ describe('OAuthRememberMe', () => { it('adds the "remember_me" query parameter to all OAuth login buttons', () => { $('#oauth-container #remember_me').click(); - expect($('#oauth-container .oauth-login.twitter').attr('href')).toBe( - 'http://example.com/?remember_me=1', - ); - - expect($('#oauth-container .oauth-login.github').attr('href')).toBe( - 'http://example.com/?remember_me=1', - ); - - expect($('#oauth-container .oauth-login.facebook').attr('href')).toBe( + expect(findFormAction('.twitter')).toBe('http://example.com/?remember_me=1'); + expect(findFormAction('.github')).toBe('http://example.com/?remember_me=1'); + expect(findFormAction('.facebook')).toBe( 'http://example.com/?redirect_fragment=L1&remember_me=1', ); }); @@ -30,10 +30,8 @@ describe('OAuthRememberMe', () => { $('#oauth-container #remember_me').click(); $('#oauth-container #remember_me').click(); - expect($('#oauth-container .oauth-login.twitter').attr('href')).toBe('http://example.com/'); - expect($('#oauth-container .oauth-login.github').attr('href')).toBe('http://example.com/'); - expect($('#oauth-container .oauth-login.facebook').attr('href')).toBe( - 'http://example.com/?redirect_fragment=L1', - ); + expect(findFormAction('.twitter')).toBe('http://example.com/'); + expect(findFormAction('.github')).toBe('http://example.com/'); + expect(findFormAction('.facebook')).toBe('http://example.com/?redirect_fragment=L1'); }); }); diff --git a/spec/frontend/onboarding_issues/index_spec.js b/spec/frontend/onboarding_issues/index_spec.js new file mode 100644 index 00000000000..b844caa07aa --- /dev/null +++ b/spec/frontend/onboarding_issues/index_spec.js @@ -0,0 +1,137 @@ +import $ from 'jquery'; +import { showLearnGitLabIssuesPopover } from '~/onboarding_issues'; +import { getCookie, setCookie, removeCookie } from '~/lib/utils/common_utils'; +import setWindowLocation from 'helpers/set_window_location_helper'; +import Tracking from '~/tracking'; + +describe('Onboarding Issues Popovers', () => { + const COOKIE_NAME = 'onboarding_issues_settings'; + const getCookieValue = () => JSON.parse(getCookie(COOKIE_NAME)); + + beforeEach(() => { + jest.spyOn($.fn, 'popover'); + }); + + afterEach(() => { + $.fn.popover.mockRestore(); + document.getElementsByTagName('html')[0].innerHTML = ''; + removeCookie(COOKIE_NAME); + }); + + const setupShowLearnGitLabIssuesPopoverTest = ({ + currentPath = 'group/learn-gitlab', + isIssuesBoardsLinkShown = true, + isCookieSet = true, + cookieValue = true, + } = {}) => { + setWindowLocation(`http://example.com/${currentPath}`); + + if (isIssuesBoardsLinkShown) { + const elem = document.createElement('a'); + elem.setAttribute('data-qa-selector', 'issue_boards_link'); + document.body.appendChild(elem); + } + + if (isCookieSet) { + setCookie(COOKIE_NAME, { previous: true, 'issues#index': cookieValue }); + } + + showLearnGitLabIssuesPopover(); + }; + + describe('showLearnGitLabIssuesPopover', () => { + describe('when on another project', () => { + beforeEach(() => { + setupShowLearnGitLabIssuesPopoverTest({ + currentPath: 'group/another-project', + }); + }); + + it('does not show a popover', () => { + expect($.fn.popover).not.toHaveBeenCalled(); + }); + }); + + describe('when the issues boards link is not shown', () => { + beforeEach(() => { + setupShowLearnGitLabIssuesPopoverTest({ + isIssuesBoardsLinkShown: false, + }); + }); + + it('does not show a popover', () => { + expect($.fn.popover).not.toHaveBeenCalled(); + }); + }); + + describe('when the cookie is not set', () => { + beforeEach(() => { + setupShowLearnGitLabIssuesPopoverTest({ + isCookieSet: false, + }); + }); + + it('does not show a popover', () => { + expect($.fn.popover).not.toHaveBeenCalled(); + }); + }); + + describe('when the cookie value is false', () => { + beforeEach(() => { + setupShowLearnGitLabIssuesPopoverTest({ + cookieValue: false, + }); + }); + + it('does not show a popover', () => { + expect($.fn.popover).not.toHaveBeenCalled(); + }); + }); + + describe('with all the right conditions', () => { + beforeEach(() => { + setupShowLearnGitLabIssuesPopoverTest(); + }); + + it('shows a popover', () => { + expect($.fn.popover).toHaveBeenCalled(); + }); + + it('does not change the cookie value', () => { + expect(getCookieValue()['issues#index']).toBe(true); + }); + + it('disables the previous popover', () => { + expect(getCookieValue().previous).toBe(false); + }); + + describe('when clicking the issues boards link', () => { + beforeEach(() => { + document.querySelector('a[data-qa-selector="issue_boards_link"]').click(); + }); + + it('deletes the cookie', () => { + expect(getCookie(COOKIE_NAME)).toBe(undefined); + }); + }); + + describe('when dismissing the popover', () => { + beforeEach(() => { + jest.spyOn(Tracking, 'event'); + document.querySelector('.learn-gitlab.popover .close').click(); + }); + + it('deletes the cookie', () => { + expect(getCookie(COOKIE_NAME)).toBe(undefined); + }); + + it('sends a tracking event', () => { + expect(Tracking.event).toHaveBeenCalledWith( + 'Growth::Conversion::Experiment::OnboardingIssues', + 'dismiss_popover', + ); + }); + }); + }); + }); +}); diff --git a/spec/frontend/operation_settings/components/external_dashboard_spec.js b/spec/frontend/operation_settings/components/metrics_settings_spec.js index 19214d1d954..398b61ec693 100644 --- a/spec/frontend/operation_settings/components/external_dashboard_spec.js +++ b/spec/frontend/operation_settings/components/metrics_settings_spec.js @@ -1,7 +1,11 @@ import { mount, shallowMount } from '@vue/test-utils'; -import { GlDeprecatedButton, GlLink, GlFormGroup, GlFormInput } from '@gitlab/ui'; +import { GlDeprecatedButton, GlLink, GlFormGroup, GlFormInput, GlFormSelect } from '@gitlab/ui'; import { TEST_HOST } from 'helpers/test_constants'; -import ExternalDashboard from '~/operation_settings/components/external_dashboard.vue'; +import MetricsSettings from '~/operation_settings/components/metrics_settings.vue'; + +import ExternalDashboard from '~/operation_settings/components/form_group/external_dashboard.vue'; +import DashboardTimezone from '~/operation_settings/components/form_group/dashboard_timezone.vue'; +import { timezones } from '~/monitoring/format_date'; import store from '~/operation_settings/store'; import axios from '~/lib/utils/axios_utils'; import { refreshCurrentPage } from '~/lib/utils/url_utility'; @@ -12,18 +16,26 @@ jest.mock('~/flash'); describe('operation settings external dashboard component', () => { let wrapper; + const operationsSettingsEndpoint = `${TEST_HOST}/mock/ops/settings/endpoint`; + const helpPage = `${TEST_HOST}/help/metrics/page/path`; const externalDashboardUrl = `http://mock-external-domain.com/external/dashboard/url`; - const externalDashboardHelpPagePath = `${TEST_HOST}/help/page/path`; + const dashboardTimezoneSetting = timezones.LOCAL; + const mountComponent = (shallow = true) => { const config = [ - ExternalDashboard, + MetricsSettings, { store: store({ operationsSettingsEndpoint, + helpPage, externalDashboardUrl, - externalDashboardHelpPagePath, + dashboardTimezoneSetting, }), + stubs: { + ExternalDashboard, + DashboardTimezone, + }, }, ]; wrapper = shallow ? shallowMount(...config) : mount(...config); @@ -44,7 +56,7 @@ describe('operation settings external dashboard component', () => { it('renders header text', () => { mountComponent(); - expect(wrapper.find('.js-section-header').text()).toBe('External Dashboard'); + expect(wrapper.find('.js-section-header').text()).toBe('Metrics Dashboard'); }); describe('expand/collapse button', () => { @@ -64,53 +76,86 @@ describe('operation settings external dashboard component', () => { }); it('renders descriptive text', () => { - expect(subHeader.text()).toContain( - 'Add a button to the metrics dashboard linking directly to your existing external dashboards.', - ); + expect(subHeader.text()).toContain('Manage Metrics Dashboard settings.'); }); it('renders help page link', () => { const link = subHeader.find(GlLink); expect(link.text()).toBe('Learn more'); - expect(link.attributes().href).toBe(externalDashboardHelpPagePath); + expect(link.attributes().href).toBe(helpPage); }); }); describe('form', () => { - describe('input label', () => { - let formGroup; - - beforeEach(() => { - mountComponent(); - formGroup = wrapper.find(GlFormGroup); + describe('dashboard timezone', () => { + describe('field label', () => { + let formGroup; + + beforeEach(() => { + mountComponent(false); + formGroup = wrapper.find(DashboardTimezone).find(GlFormGroup); + }); + + it('uses label text', () => { + expect(formGroup.find('label').text()).toBe('Dashboard timezone'); + }); + + it('uses description text', () => { + const description = formGroup.find('small'); + expect(description.text()).not.toBeFalsy(); + }); }); - it('uses label text', () => { - expect(formGroup.attributes().label).toBe('Full dashboard URL'); - }); + describe('select field', () => { + let select; - it('uses description text', () => { - expect(formGroup.attributes().description).toBe( - 'Enter the URL of the dashboard you want to link to', - ); + beforeEach(() => { + mountComponent(); + select = wrapper.find(DashboardTimezone).find(GlFormSelect); + }); + + it('defaults to externalDashboardUrl', () => { + expect(select.attributes('value')).toBe(dashboardTimezoneSetting); + }); }); }); - describe('input field', () => { - let input; + describe('external dashboard', () => { + describe('input label', () => { + let formGroup; - beforeEach(() => { - mountComponent(); - input = wrapper.find(GlFormInput); - }); + beforeEach(() => { + mountComponent(false); + formGroup = wrapper.find(ExternalDashboard).find(GlFormGroup); + }); + + it('uses label text', () => { + expect(formGroup.find('label').text()).toBe('External dashboard URL'); + }); - it('defaults to externalDashboardUrl', () => { - expect(input.attributes().value).toBe(externalDashboardUrl); + it('uses description text', () => { + const description = formGroup.find('small'); + expect(description.text()).not.toBeFalsy(); + }); }); - it('uses a placeholder', () => { - expect(input.attributes().placeholder).toBe('https://my-org.gitlab.io/my-dashboards'); + describe('input field', () => { + let input; + + beforeEach(() => { + mountComponent(); + input = wrapper.find(ExternalDashboard).find(GlFormInput); + }); + + it('defaults to externalDashboardUrl', () => { + expect(input.attributes().value).toBeTruthy(); + expect(input.attributes().value).toBe(externalDashboardUrl); + }); + + it('uses a placeholder', () => { + expect(input.attributes().placeholder).toBe('https://my-org.gitlab.io/my-dashboards'); + }); }); }); @@ -123,6 +168,7 @@ describe('operation settings external dashboard component', () => { { project: { metrics_setting_attributes: { + dashboard_timezone: dashboardTimezoneSetting, external_dashboard_url: externalDashboardUrl, }, }, diff --git a/spec/frontend/operation_settings/store/mutations_spec.js b/spec/frontend/operation_settings/store/mutations_spec.js index 1854142c89a..88eb66095ad 100644 --- a/spec/frontend/operation_settings/store/mutations_spec.js +++ b/spec/frontend/operation_settings/store/mutations_spec.js @@ -1,5 +1,6 @@ import mutations from '~/operation_settings/store/mutations'; import createState from '~/operation_settings/store/state'; +import { timezones } from '~/monitoring/format_date'; describe('operation settings mutations', () => { let localState; @@ -13,7 +14,16 @@ describe('operation settings mutations', () => { const mockUrl = 'mockUrl'; mutations.SET_EXTERNAL_DASHBOARD_URL(localState, mockUrl); - expect(localState.externalDashboardUrl).toBe(mockUrl); + expect(localState.externalDashboard.url).toBe(mockUrl); + }); + }); + + describe('SET_DASHBOARD_TIMEZONE', () => { + it('sets dashboardTimezoneSetting', () => { + mutations.SET_DASHBOARD_TIMEZONE(localState, timezones.LOCAL); + + expect(localState.dashboardTimezone.selected).not.toBeUndefined(); + expect(localState.dashboardTimezone.selected).toBe(timezones.LOCAL); }); }); }); diff --git a/spec/frontend/pager_spec.js b/spec/frontend/pager_spec.js new file mode 100644 index 00000000000..d7177a32cde --- /dev/null +++ b/spec/frontend/pager_spec.js @@ -0,0 +1,167 @@ +import $ from 'jquery'; +import MockAdapter from 'axios-mock-adapter'; +import axios from '~/lib/utils/axios_utils'; +import Pager from '~/pager'; +import { removeParams } from '~/lib/utils/url_utility'; + +jest.mock('~/lib/utils/url_utility', () => ({ + removeParams: jest.fn().mockName('removeParams'), +})); + +describe('pager', () => { + let axiosMock; + + beforeEach(() => { + axiosMock = new MockAdapter(axios); + }); + + afterEach(() => { + axiosMock.restore(); + }); + + describe('init', () => { + const originalHref = window.location.href; + + beforeEach(() => { + setFixtures('<div class="content_list"></div><div class="loading"></div>'); + jest.spyOn($.fn, 'endlessScroll').mockImplementation(); + }); + + afterEach(() => { + window.history.replaceState({}, null, originalHref); + }); + + it('should use data-href attribute from list element', () => { + const href = `${gl.TEST_HOST}/some_list.json`; + setFixtures(`<div class="content_list" data-href="${href}"></div>`); + Pager.init(); + + expect(Pager.url).toBe(href); + }); + + it('should use current url if data-href attribute not provided', () => { + const href = `${gl.TEST_HOST}/some_list`; + removeParams.mockReturnValue(href); + Pager.init(); + + expect(Pager.url).toBe(href); + }); + + it('should get initial offset from query parameter', () => { + window.history.replaceState({}, null, '?offset=100'); + Pager.init(); + + expect(Pager.offset).toBe(100); + }); + + it('keeps extra query parameters from url', () => { + window.history.replaceState({}, null, '?filter=test&offset=100'); + const href = `${gl.TEST_HOST}/some_list?filter=test`; + removeParams.mockReturnValue(href); + Pager.init(); + + expect(removeParams).toHaveBeenCalledWith(['limit', 'offset']); + expect(Pager.url).toEqual(href); + }); + }); + + describe('getOld', () => { + const urlRegex = /(.*)some_list(.*)$/; + + function mockSuccess(count = 0) { + axiosMock.onGet(urlRegex).reply(200, { + count, + html: '', + }); + } + + function mockError() { + axiosMock.onGet(urlRegex).networkError(); + } + + beforeEach(() => { + setFixtures( + '<div class="content_list" data-href="/some_list"></div><div class="loading"></div>', + ); + jest.spyOn(axios, 'get'); + + Pager.init(); + }); + + it('shows loader while loading next page', done => { + mockSuccess(); + + jest.spyOn(Pager.loading, 'show').mockImplementation(() => {}); + Pager.getOld(); + + setImmediate(() => { + expect(Pager.loading.show).toHaveBeenCalled(); + + done(); + }); + }); + + it('hides loader on success', done => { + mockSuccess(); + + jest.spyOn(Pager.loading, 'hide').mockImplementation(() => {}); + Pager.getOld(); + + setImmediate(() => { + expect(Pager.loading.hide).toHaveBeenCalled(); + + done(); + }); + }); + + it('hides loader on error', done => { + mockError(); + + jest.spyOn(Pager.loading, 'hide').mockImplementation(() => {}); + Pager.getOld(); + + setImmediate(() => { + expect(Pager.loading.hide).toHaveBeenCalled(); + + done(); + }); + }); + + it('sends request to url with offset and limit params', done => { + Pager.offset = 100; + Pager.limit = 20; + Pager.getOld(); + + setImmediate(() => { + const [url, params] = axios.get.mock.calls[0]; + + expect(params).toEqual({ + params: { + limit: 20, + offset: 100, + }, + }); + + expect(url).toBe('/some_list'); + + done(); + }); + }); + + it('disables if return count is less than limit', done => { + Pager.offset = 0; + Pager.limit = 20; + + mockSuccess(1); + jest.spyOn(Pager.loading, 'hide').mockImplementation(() => {}); + Pager.getOld(); + + setImmediate(() => { + expect(Pager.loading.hide).toHaveBeenCalled(); + expect(Pager.disable).toBe(true); + + done(); + }); + }); + }); +}); diff --git a/spec/frontend/pages/dashboard/todos/index/todos_spec.js b/spec/frontend/pages/dashboard/todos/index/todos_spec.js new file mode 100644 index 00000000000..204fe3d0a68 --- /dev/null +++ b/spec/frontend/pages/dashboard/todos/index/todos_spec.js @@ -0,0 +1,111 @@ +import $ from 'jquery'; +import MockAdapter from 'axios-mock-adapter'; +import Todos from '~/pages/dashboard/todos/index/todos'; +import '~/lib/utils/common_utils'; +import '~/gl_dropdown'; +import axios from '~/lib/utils/axios_utils'; +import { addDelimiter } from '~/lib/utils/text_utility'; +import { visitUrl } from '~/lib/utils/url_utility'; + +jest.mock('~/lib/utils/url_utility', () => ({ + visitUrl: jest.fn().mockName('visitUrl'), +})); + +const TEST_COUNT_BIG = 2000; +const TEST_DONE_COUNT_BIG = 7300; + +describe('Todos', () => { + preloadFixtures('todos/todos.html'); + let todoItem; + let mock; + + beforeEach(() => { + loadFixtures('todos/todos.html'); + todoItem = document.querySelector('.todos-list .todo'); + mock = new MockAdapter(axios); + + return new Todos(); + }); + + afterEach(() => { + mock.restore(); + }); + + describe('goToTodoUrl', () => { + it('opens the todo url', done => { + const todoLink = todoItem.dataset.url; + + visitUrl.mockImplementation(url => { + expect(url).toEqual(todoLink); + done(); + }); + + todoItem.click(); + }); + + describe('meta click', () => { + let windowOpenSpy; + let metakeyEvent; + + beforeEach(() => { + metakeyEvent = $.Event('click', { keyCode: 91, ctrlKey: true }); + windowOpenSpy = jest.spyOn(window, 'open').mockImplementation(() => {}); + }); + + it('opens the todo url in another tab', () => { + const todoLink = todoItem.dataset.url; + + $('.todos-list .todo').trigger(metakeyEvent); + + expect(visitUrl).not.toHaveBeenCalled(); + expect(windowOpenSpy).toHaveBeenCalledWith(todoLink, '_blank'); + }); + + it('run native funcionality when avatar is clicked', () => { + $('.todos-list a').on('click', e => e.preventDefault()); + $('.todos-list img').trigger(metakeyEvent); + + expect(visitUrl).not.toHaveBeenCalled(); + expect(windowOpenSpy).not.toHaveBeenCalled(); + }); + }); + + describe('on done todo click', () => { + let onToggleSpy; + + beforeEach(done => { + const el = document.querySelector('.js-done-todo'); + const path = el.dataset.href; + + // Arrange + mock + .onDelete(path) + .replyOnce(200, { count: TEST_COUNT_BIG, done_count: TEST_DONE_COUNT_BIG }); + onToggleSpy = jest.fn(); + $(document).on('todo:toggle', onToggleSpy); + + // Act + el.click(); + + // Wait for axios and HTML to udpate + setImmediate(done); + }); + + it('dispatches todo:toggle', () => { + expect(onToggleSpy).toHaveBeenCalledWith(expect.anything(), TEST_COUNT_BIG); + }); + + it('updates pending text', () => { + expect(document.querySelector('.todos-pending .badge').innerHTML).toEqual( + addDelimiter(TEST_COUNT_BIG), + ); + }); + + it('updates done text', () => { + expect(document.querySelector('.todos-done .badge').innerHTML).toEqual( + addDelimiter(TEST_DONE_COUNT_BIG), + ); + }); + }); + }); +}); diff --git a/spec/frontend/pages/import/bitbucket_server/components/bitbucket_server_status_table_spec.js b/spec/frontend/pages/import/bitbucket_server/components/bitbucket_server_status_table_spec.js new file mode 100644 index 00000000000..0bb96ee33d4 --- /dev/null +++ b/spec/frontend/pages/import/bitbucket_server/components/bitbucket_server_status_table_spec.js @@ -0,0 +1,47 @@ +import { shallowMount } from '@vue/test-utils'; + +import { GlButton } from '@gitlab/ui'; +import BitbucketServerStatusTable from '~/pages/import/bitbucket_server/status/components/bitbucket_server_status_table.vue'; +import BitbucketStatusTable from '~/import_projects/components/bitbucket_status_table.vue'; + +const BitbucketStatusTableStub = { + name: 'BitbucketStatusTable', + template: '<div><slot name="actions"></slot></div>', +}; + +describe('BitbucketServerStatusTable', () => { + let wrapper; + + const findReconfigureButton = () => + wrapper + .findAll(GlButton) + .filter(w => w.props().variant === 'info') + .at(0); + + afterEach(() => { + if (wrapper) { + wrapper.destroy(); + wrapper = null; + } + }); + + function createComponent(bitbucketStatusTableStub = true) { + wrapper = shallowMount(BitbucketServerStatusTable, { + propsData: { providerTitle: 'Test', reconfigurePath: '/reconfigure' }, + stubs: { + BitbucketStatusTable: bitbucketStatusTableStub, + }, + }); + } + + it('renders bitbucket status table component', () => { + createComponent(); + expect(wrapper.contains(BitbucketStatusTable)).toBe(true); + }); + + it('renders Reconfigure button', async () => { + createComponent(BitbucketStatusTableStub); + expect(findReconfigureButton().attributes().href).toBe('/reconfigure'); + expect(findReconfigureButton().text()).toBe('Reconfigure'); + }); +}); diff --git a/spec/frontend/pages/projects/graphs/__snapshots__/code_coverage_spec.js.snap b/spec/frontend/pages/projects/graphs/__snapshots__/code_coverage_spec.js.snap new file mode 100644 index 00000000000..94089ea922b --- /dev/null +++ b/spec/frontend/pages/projects/graphs/__snapshots__/code_coverage_spec.js.snap @@ -0,0 +1,88 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Code Coverage when fetching data is successful matches the snapshot 1`] = ` +<div> + <div + class="gl-mt-3 gl-mb-3" + > + <!----> + + <!----> + + <gl-dropdown-stub + text="rspec" + > + <gl-dropdown-item-stub + value="rspec" + > + <div + class="gl-display-flex" + > + <gl-icon-stub + class="gl-absolute" + name="mobile-issue-close" + size="16" + /> + + <span + class="gl-display-flex align-items-center ml-4" + > + + rspec + + </span> + </div> + </gl-dropdown-item-stub> + <gl-dropdown-item-stub + value="cypress" + > + <div + class="gl-display-flex" + > + <!----> + + <span + class="gl-display-flex align-items-center ml-4" + > + + cypress + + </span> + </div> + </gl-dropdown-item-stub> + <gl-dropdown-item-stub + value="karma" + > + <div + class="gl-display-flex" + > + <!----> + + <span + class="gl-display-flex align-items-center ml-4" + > + + karma + + </span> + </div> + </gl-dropdown-item-stub> + </gl-dropdown-stub> + </div> + + <gl-area-chart-stub + annotations="" + data="[object Object]" + formattooltiptext="function () { [native code] }" + height="200" + includelegendavgmax="true" + legendaveragetext="Avg" + legendcurrenttext="Current" + legendlayout="inline" + legendmaxtext="Max" + legendmintext="Min" + option="[object Object]" + thresholds="" + /> +</div> +`; diff --git a/spec/frontend/pages/projects/graphs/code_coverage_spec.js b/spec/frontend/pages/projects/graphs/code_coverage_spec.js new file mode 100644 index 00000000000..4990985b076 --- /dev/null +++ b/spec/frontend/pages/projects/graphs/code_coverage_spec.js @@ -0,0 +1,164 @@ +import MockAdapter from 'axios-mock-adapter'; +import { shallowMount } from '@vue/test-utils'; +import { GlAlert, GlIcon, GlDropdown, GlDropdownItem } from '@gitlab/ui'; +import { GlAreaChart } from '@gitlab/ui/dist/charts'; + +import axios from '~/lib/utils/axios_utils'; +import CodeCoverage from '~/pages/projects/graphs/components/code_coverage.vue'; +import codeCoverageMockData from './mock_data'; +import waitForPromises from 'helpers/wait_for_promises'; +import httpStatusCodes from '~/lib/utils/http_status'; + +describe('Code Coverage', () => { + let wrapper; + let mockAxios; + + const graphEndpoint = '/graph'; + + const findAlert = () => wrapper.find(GlAlert); + const findAreaChart = () => wrapper.find(GlAreaChart); + const findAllDropdownItems = () => wrapper.findAll(GlDropdownItem); + const findFirstDropdownItem = () => findAllDropdownItems().at(0); + const findSecondDropdownItem = () => findAllDropdownItems().at(1); + + const createComponent = () => { + wrapper = shallowMount(CodeCoverage, { + propsData: { + graphEndpoint, + }, + }); + }; + + afterEach(() => { + wrapper.destroy(); + wrapper = null; + }); + + describe('when fetching data is successful', () => { + beforeEach(() => { + mockAxios = new MockAdapter(axios); + mockAxios.onGet().replyOnce(httpStatusCodes.OK, codeCoverageMockData); + + createComponent(); + + return waitForPromises(); + }); + + afterEach(() => { + mockAxios.restore(); + }); + + it('renders the area chart', () => { + expect(findAreaChart().exists()).toBe(true); + }); + + it('matches the snapshot', () => { + expect(wrapper.element).toMatchSnapshot(); + }); + + it('shows no error messages', () => { + expect(findAlert().exists()).toBe(false); + }); + }); + + describe('when fetching data fails', () => { + beforeEach(() => { + mockAxios = new MockAdapter(axios); + mockAxios.onGet().replyOnce(httpStatusCodes.BAD_REQUEST); + + createComponent(); + + return waitForPromises(); + }); + + afterEach(() => { + mockAxios.restore(); + }); + + it('renders an error message', () => { + expect(findAlert().exists()).toBe(true); + expect(findAlert().attributes().variant).toBe('danger'); + }); + + it('still renders an empty graph', () => { + expect(findAreaChart().exists()).toBe(true); + }); + }); + + describe('when fetching data succeed but returns an empty state', () => { + beforeEach(() => { + mockAxios = new MockAdapter(axios); + mockAxios.onGet().replyOnce(httpStatusCodes.OK, []); + + createComponent(); + + return waitForPromises(); + }); + + afterEach(() => { + mockAxios.restore(); + }); + + it('renders an information message', () => { + expect(findAlert().exists()).toBe(true); + expect(findAlert().attributes().variant).toBe('info'); + }); + + it('still renders an empty graph', () => { + expect(findAreaChart().exists()).toBe(true); + }); + }); + + describe('dropdown options', () => { + beforeEach(() => { + mockAxios = new MockAdapter(axios); + mockAxios.onGet().replyOnce(httpStatusCodes.OK, codeCoverageMockData); + + createComponent(); + + return waitForPromises(); + }); + + it('renders the dropdown with all custom names as options', () => { + expect(wrapper.contains(GlDropdown)).toBeDefined(); + expect(findAllDropdownItems()).toHaveLength(codeCoverageMockData.length); + expect(findFirstDropdownItem().text()).toBe(codeCoverageMockData[0].group_name); + }); + }); + + describe('interactions', () => { + beforeEach(() => { + mockAxios = new MockAdapter(axios); + mockAxios.onGet().replyOnce(httpStatusCodes.OK, codeCoverageMockData); + + createComponent(); + + return waitForPromises(); + }); + + it('updates the selected dropdown option with an icon', async () => { + findSecondDropdownItem().vm.$emit('click'); + + await wrapper.vm.$nextTick(); + + expect( + findFirstDropdownItem() + .find(GlIcon) + .exists(), + ).toBe(false); + expect(findSecondDropdownItem().contains(GlIcon)).toBe(true); + }); + + it('updates the graph data when selecting a different option in dropdown', async () => { + const originalSelectedData = wrapper.vm.selectedDailyCoverage; + const expectedData = codeCoverageMockData[1]; + + findSecondDropdownItem().vm.$emit('click'); + + await wrapper.vm.$nextTick(); + + expect(wrapper.vm.selectedDailyCoverage).not.toBe(originalSelectedData); + expect(wrapper.vm.selectedDailyCoverage).toBe(expectedData); + }); + }); +}); diff --git a/spec/frontend/pages/projects/graphs/mock_data.js b/spec/frontend/pages/projects/graphs/mock_data.js new file mode 100644 index 00000000000..a15f861ee7a --- /dev/null +++ b/spec/frontend/pages/projects/graphs/mock_data.js @@ -0,0 +1,60 @@ +export default [ + { + group_name: 'rspec', + data: [ + { date: '2020-04-30', coverage: 40.0 }, + { date: '2020-05-01', coverage: 80.0 }, + { date: '2020-05-02', coverage: 99.0 }, + { date: '2020-05-10', coverage: 80.0 }, + { date: '2020-05-15', coverage: 70.0 }, + { date: '2020-05-20', coverage: 69.0 }, + ], + }, + { + group_name: 'cypress', + data: [ + { date: '2022-07-30', coverage: 1.0 }, + { date: '2022-08-01', coverage: 2.4 }, + { date: '2022-08-02', coverage: 5.0 }, + { date: '2022-08-10', coverage: 15.0 }, + { date: '2022-08-15', coverage: 30.0 }, + { date: '2022-08-20', coverage: 40.0 }, + ], + }, + { + group_name: 'karma', + data: [ + { date: '2020-05-01', coverage: 94.0 }, + { date: '2020-05-02', coverage: 94.0 }, + { date: '2020-05-03', coverage: 94.0 }, + { date: '2020-05-04', coverage: 94.0 }, + { date: '2020-05-05', coverage: 92.0 }, + { date: '2020-05-06', coverage: 91.0 }, + { date: '2020-05-07', coverage: 78.0 }, + { date: '2020-05-08', coverage: 94.0 }, + { date: '2020-05-09', coverage: 94.0 }, + { date: '2020-05-10', coverage: 94.0 }, + { date: '2020-05-11', coverage: 94.0 }, + { date: '2020-05-12', coverage: 94.0 }, + { date: '2020-05-13', coverage: 92.0 }, + { date: '2020-05-14', coverage: 91.0 }, + { date: '2020-05-15', coverage: 78.0 }, + { date: '2020-05-16', coverage: 94.0 }, + { date: '2020-05-17', coverage: 94.0 }, + { date: '2020-05-18', coverage: 93.0 }, + { date: '2020-05-19', coverage: 92.0 }, + { date: '2020-05-20', coverage: 91.0 }, + { date: '2020-05-21', coverage: 90.0 }, + { date: '2020-05-22', coverage: 91.0 }, + { date: '2020-05-23', coverage: 92.0 }, + { date: '2020-05-24', coverage: 75.0 }, + { date: '2020-05-25', coverage: 74.0 }, + { date: '2020-05-26', coverage: 74.0 }, + { date: '2020-05-27', coverage: 74.0 }, + { date: '2020-05-28', coverage: 80.0 }, + { date: '2020-05-29', coverage: 85.0 }, + { date: '2020-05-30', coverage: 92.0 }, + { date: '2020-05-31', coverage: 91.0 }, + ], + }, +]; diff --git a/spec/frontend/pages/sessions/new/preserve_url_fragment_spec.js b/spec/frontend/pages/sessions/new/preserve_url_fragment_spec.js index 1809e92e1d9..0d9af0cb856 100644 --- a/spec/frontend/pages/sessions/new/preserve_url_fragment_spec.js +++ b/spec/frontend/pages/sessions/new/preserve_url_fragment_spec.js @@ -2,6 +2,12 @@ import $ from 'jquery'; import preserveUrlFragment from '~/pages/sessions/new/preserve_url_fragment'; describe('preserve_url_fragment', () => { + const findFormAction = selector => { + return $(`.omniauth-container ${selector}`) + .parent('form') + .attr('action'); + }; + preloadFixtures('sessions/new.html'); beforeEach(() => { @@ -25,35 +31,36 @@ describe('preserve_url_fragment', () => { it('does not add an empty query parameter to OmniAuth login buttons', () => { preserveUrlFragment(); - expect($('#oauth-login-cas3').attr('href')).toBe('http://test.host/users/auth/cas3'); + expect(findFormAction('#oauth-login-cas3')).toBe('http://test.host/users/auth/cas3'); - expect($('.omniauth-container #oauth-login-auth0').attr('href')).toBe( - 'http://test.host/users/auth/auth0', - ); + expect(findFormAction('#oauth-login-auth0')).toBe('http://test.host/users/auth/auth0'); }); describe('adds "redirect_fragment" query parameter to OmniAuth login buttons', () => { it('when "remember_me" is not present', () => { preserveUrlFragment('#L65'); - expect($('#oauth-login-cas3').attr('href')).toBe( + expect(findFormAction('#oauth-login-cas3')).toBe( 'http://test.host/users/auth/cas3?redirect_fragment=L65', ); - expect($('.omniauth-container #oauth-login-auth0').attr('href')).toBe( + expect(findFormAction('#oauth-login-auth0')).toBe( 'http://test.host/users/auth/auth0?redirect_fragment=L65', ); }); it('when "remember-me" is present', () => { - $('a.omniauth-btn').attr('href', (i, href) => `${href}?remember_me=1`); + $('.omniauth-btn') + .parent('form') + .attr('action', (i, href) => `${href}?remember_me=1`); + preserveUrlFragment('#L65'); - expect($('#oauth-login-cas3').attr('href')).toBe( + expect(findFormAction('#oauth-login-cas3')).toBe( 'http://test.host/users/auth/cas3?remember_me=1&redirect_fragment=L65', ); - expect($('#oauth-login-auth0').attr('href')).toBe( + expect(findFormAction('#oauth-login-auth0')).toBe( 'http://test.host/users/auth/auth0?remember_me=1&redirect_fragment=L65', ); }); diff --git a/spec/frontend/pages/sessions/new/signin_tabs_memoizer_spec.js b/spec/frontend/pages/sessions/new/signin_tabs_memoizer_spec.js new file mode 100644 index 00000000000..738498edbd3 --- /dev/null +++ b/spec/frontend/pages/sessions/new/signin_tabs_memoizer_spec.js @@ -0,0 +1,218 @@ +import AccessorUtilities from '~/lib/utils/accessor'; +import SigninTabsMemoizer from '~/pages/sessions/new/signin_tabs_memoizer'; +import trackData from '~/pages/sessions/new/index'; +import Tracking from '~/tracking'; +import { useLocalStorageSpy } from 'helpers/local_storage_helper'; + +useLocalStorageSpy(); + +describe('SigninTabsMemoizer', () => { + const fixtureTemplate = 'static/signin_tabs.html'; + const tabSelector = 'ul.new-session-tabs'; + const currentTabKey = 'current_signin_tab'; + let memo; + + function createMemoizer() { + memo = new SigninTabsMemoizer({ + currentTabKey, + tabSelector, + }); + return memo; + } + + preloadFixtures(fixtureTemplate); + + beforeEach(() => { + loadFixtures(fixtureTemplate); + + jest.spyOn(AccessorUtilities, 'isLocalStorageAccessSafe').mockReturnValue(true); + }); + + it('does nothing if no tab was previously selected', () => { + createMemoizer(); + + expect(document.querySelector(`${tabSelector} > li.active a`).getAttribute('href')).toEqual( + '#ldap', + ); + }); + + it('shows last selected tab on boot', () => { + createMemoizer().saveData('#ldap'); + const fakeTab = { + click: () => {}, + }; + jest.spyOn(document, 'querySelector').mockReturnValue(fakeTab); + jest.spyOn(fakeTab, 'click').mockImplementation(() => {}); + + memo.bootstrap(); + + // verify that triggers click on the last selected tab + expect(document.querySelector).toHaveBeenCalledWith(`${tabSelector} a[href="#ldap"]`); + expect(fakeTab.click).toHaveBeenCalled(); + }); + + it('clicks the first tab if value in local storage is bad', () => { + createMemoizer().saveData('#bogus'); + const fakeTab = { + click: jest.fn().mockName('fakeTab_click'), + }; + jest + .spyOn(document, 'querySelector') + .mockImplementation(selector => + selector === `${tabSelector} a[href="#bogus"]` ? null : fakeTab, + ); + + memo.bootstrap(); + + // verify that triggers click on stored selector and fallback + expect(document.querySelector.mock.calls).toEqual([ + ['ul.new-session-tabs a[href="#bogus"]'], + ['ul.new-session-tabs a'], + ]); + + expect(fakeTab.click).toHaveBeenCalled(); + }); + + it('saves last selected tab on change', () => { + createMemoizer(); + + document.querySelector('a[href="#login-pane"]').click(); + + expect(memo.readData()).toEqual('#login-pane'); + }); + + it('overrides last selected tab with hash tag when given', () => { + window.location.hash = '#ldap'; + createMemoizer(); + + expect(memo.readData()).toEqual('#ldap'); + }); + + describe('class constructor', () => { + beforeEach(() => { + memo = createMemoizer(); + }); + + it('should set .isLocalStorageAvailable', () => { + expect(AccessorUtilities.isLocalStorageAccessSafe).toHaveBeenCalled(); + expect(memo.isLocalStorageAvailable).toBe(true); + }); + }); + + describe('trackData', () => { + beforeEach(() => { + jest.spyOn(Tracking, 'event').mockImplementation(() => {}); + }); + + describe('with tracking data', () => { + beforeEach(() => { + gon.tracking_data = { + category: 'Growth::Acquisition::Experiment::SignUpFlow', + action: 'start', + label: 'uuid', + property: 'control_group', + }; + trackData(); + }); + + it('should track data when the "click" event of the register tab is triggered', () => { + document.querySelector('a[href="#register-pane"]').click(); + + expect(Tracking.event).toHaveBeenCalledWith( + 'Growth::Acquisition::Experiment::SignUpFlow', + 'start', + { + label: 'uuid', + property: 'control_group', + }, + ); + }); + }); + + describe('without tracking data', () => { + beforeEach(() => { + gon.tracking_data = undefined; + trackData(); + }); + + it('should not track data when the "click" event of the register tab is triggered', () => { + document.querySelector('a[href="#register-pane"]').click(); + + expect(Tracking.event).not.toHaveBeenCalled(); + }); + }); + }); + + describe('saveData', () => { + beforeEach(() => { + memo = { + currentTabKey, + }; + }); + + describe('if .isLocalStorageAvailable is `false`', () => { + beforeEach(() => { + memo.isLocalStorageAvailable = false; + + SigninTabsMemoizer.prototype.saveData.call(memo); + }); + + it('should not call .setItem', () => { + expect(localStorage.setItem).not.toHaveBeenCalled(); + }); + }); + + describe('if .isLocalStorageAvailable is `true`', () => { + const value = 'value'; + + beforeEach(() => { + memo.isLocalStorageAvailable = true; + + SigninTabsMemoizer.prototype.saveData.call(memo, value); + }); + + it('should call .setItem', () => { + expect(localStorage.setItem).toHaveBeenCalledWith(currentTabKey, value); + }); + }); + }); + + describe('readData', () => { + const itemValue = 'itemValue'; + let readData; + + beforeEach(() => { + memo = { + currentTabKey, + }; + + localStorage.getItem.mockReturnValue(itemValue); + }); + + describe('if .isLocalStorageAvailable is `false`', () => { + beforeEach(() => { + memo.isLocalStorageAvailable = false; + + readData = SigninTabsMemoizer.prototype.readData.call(memo); + }); + + it('should not call .getItem and should return `null`', () => { + expect(localStorage.getItem).not.toHaveBeenCalled(); + expect(readData).toBe(null); + }); + }); + + describe('if .isLocalStorageAvailable is `true`', () => { + beforeEach(() => { + memo.isLocalStorageAvailable = true; + + readData = SigninTabsMemoizer.prototype.readData.call(memo); + }); + + it('should call .getItem and return the localStorage value', () => { + expect(window.localStorage.getItem).toHaveBeenCalledWith(currentTabKey); + expect(readData).toBe(itemValue); + }); + }); + }); +}); diff --git a/spec/frontend/pdf/index_spec.js b/spec/frontend/pdf/index_spec.js new file mode 100644 index 00000000000..0d8caa28fd1 --- /dev/null +++ b/spec/frontend/pdf/index_spec.js @@ -0,0 +1,62 @@ +import Vue from 'vue'; + +import { FIXTURES_PATH } from 'spec/test_constants'; +import PDFLab from '~/pdf/index.vue'; + +jest.mock('pdfjs-dist/webpack', () => { + return { default: jest.requireActual('pdfjs-dist/build/pdf') }; +}); + +const pdf = `${FIXTURES_PATH}/blob/pdf/test.pdf`; + +const Component = Vue.extend(PDFLab); + +describe('PDF component', () => { + let vm; + + const checkLoaded = done => { + if (vm.loading) { + setTimeout(() => { + checkLoaded(done); + }, 100); + } else { + done(); + } + }; + + describe('without PDF data', () => { + beforeEach(done => { + vm = new Component({ + propsData: { + pdf: '', + }, + }); + + vm.$mount(); + + checkLoaded(done); + }); + + it('does not render', () => { + expect(vm.$el.tagName).toBeUndefined(); + }); + }); + + describe('with PDF data', () => { + beforeEach(done => { + vm = new Component({ + propsData: { + pdf, + }, + }); + + vm.$mount(); + + checkLoaded(done); + }); + + it('renders pdf component', () => { + expect(vm.$el.tagName).toBeDefined(); + }); + }); +}); diff --git a/spec/frontend/pdf/page_spec.js b/spec/frontend/pdf/page_spec.js new file mode 100644 index 00000000000..4e24b0696ec --- /dev/null +++ b/spec/frontend/pdf/page_spec.js @@ -0,0 +1,39 @@ +import Vue from 'vue'; +import PageComponent from '~/pdf/page/index.vue'; +import mountComponent from 'helpers/vue_mount_component_helper'; + +jest.mock('pdfjs-dist/webpack', () => { + return { default: jest.requireActual('pdfjs-dist/build/pdf') }; +}); + +describe('Page component', () => { + const Component = Vue.extend(PageComponent); + let vm; + + afterEach(() => { + vm.$destroy(); + }); + + it('renders the page when mounting', done => { + const promise = Promise.resolve(); + const testPage = { + render: jest.fn().mockReturnValue({ promise: Promise.resolve() }), + getViewport: jest.fn().mockReturnValue({}), + }; + + vm = mountComponent(Component, { + page: testPage, + number: 1, + }); + + expect(vm.rendering).toBe(true); + + promise + .then(() => { + expect(testPage.render).toHaveBeenCalledWith(vm.renderContext); + expect(vm.rendering).toBe(false); + }) + .then(done) + .catch(done.fail); + }); +}); diff --git a/spec/frontend/performance_bar/components/detailed_metric_spec.js b/spec/frontend/performance_bar/components/detailed_metric_spec.js index 01b6b7b043c..f040dcfdea4 100644 --- a/spec/frontend/performance_bar/components/detailed_metric_spec.js +++ b/spec/frontend/performance_bar/components/detailed_metric_spec.js @@ -1,22 +1,32 @@ import { shallowMount } from '@vue/test-utils'; import DetailedMetric from '~/performance_bar/components/detailed_metric.vue'; import RequestWarning from '~/performance_bar/components/request_warning.vue'; +import { trimText } from 'helpers/text_helper'; describe('detailedMetric', () => { - const createComponent = props => - shallowMount(DetailedMetric, { + let wrapper; + + const createComponent = props => { + wrapper = shallowMount(DetailedMetric, { propsData: { ...props, }, }); + }; + + afterEach(() => { + wrapper.destroy(); + }); describe('when the current request has no details', () => { - const wrapper = createComponent({ - currentRequest: {}, - metric: 'gitaly', - header: 'Gitaly calls', - details: 'details', - keys: ['feature', 'request'], + beforeEach(() => { + createComponent({ + currentRequest: {}, + metric: 'gitaly', + header: 'Gitaly calls', + details: 'details', + keys: ['feature', 'request'], + }); }); it('does not render the element', () => { @@ -31,20 +41,22 @@ describe('detailedMetric', () => { ]; describe('with a default metric name', () => { - const wrapper = createComponent({ - currentRequest: { - details: { - gitaly: { - duration: '123ms', - calls: '456', - details: requestDetails, - warnings: ['gitaly calls: 456 over 30'], + beforeEach(() => { + createComponent({ + currentRequest: { + details: { + gitaly: { + duration: '123ms', + calls: '456', + details: requestDetails, + warnings: ['gitaly calls: 456 over 30'], + }, }, }, - }, - metric: 'gitaly', - header: 'Gitaly calls', - keys: ['feature', 'request'], + metric: 'gitaly', + header: 'Gitaly calls', + keys: ['feature', 'request'], + }); }); it('displays details', () => { @@ -87,25 +99,49 @@ describe('detailedMetric', () => { }); describe('when using a custom metric title', () => { - const wrapper = createComponent({ + beforeEach(() => { + createComponent({ + currentRequest: { + details: { + gitaly: { + duration: '123ms', + calls: '456', + details: requestDetails, + }, + }, + }, + metric: 'gitaly', + title: 'custom', + header: 'Gitaly calls', + keys: ['feature', 'request'], + }); + }); + + it('displays the custom title', () => { + expect(wrapper.text()).toContain('custom'); + }); + }); + }); + + describe('when the details has no duration', () => { + beforeEach(() => { + createComponent({ currentRequest: { details: { - gitaly: { - duration: '123ms', + bullet: { calls: '456', - details: requestDetails, + details: [{ notification: 'notification', backtrace: 'backtrace' }], }, }, }, - metric: 'gitaly', - title: 'custom', - header: 'Gitaly calls', - keys: ['feature', 'request'], + metric: 'bullet', + header: 'Bullet notifications', + keys: ['notification'], }); + }); - it('displays the custom title', () => { - expect(wrapper.text()).toContain('custom'); - }); + it('renders only the number of calls', () => { + expect(trimText(wrapper.text())).toEqual('456 notification backtrace bullet'); }); }); }); diff --git a/spec/frontend/performance_bar/index_spec.js b/spec/frontend/performance_bar/index_spec.js new file mode 100644 index 00000000000..621c7d87a7e --- /dev/null +++ b/spec/frontend/performance_bar/index_spec.js @@ -0,0 +1,85 @@ +import MockAdapter from 'axios-mock-adapter'; +import axios from '~/lib/utils/axios_utils'; +import '~/performance_bar/components/performance_bar_app.vue'; +import performanceBar from '~/performance_bar'; +import PerformanceBarService from '~/performance_bar/services/performance_bar_service'; + +describe('performance bar wrapper', () => { + let mock; + let vm; + + beforeEach(() => { + URL.createObjectURL = jest.fn(); + performance.getEntriesByType = jest.fn().mockReturnValue([]); + + // clear html so that elements from previous tests don't mess with this test + document.body.innerHTML = ''; + const peekWrapper = document.createElement('div'); + + peekWrapper.setAttribute('id', 'js-peek'); + peekWrapper.setAttribute('data-env', 'development'); + peekWrapper.setAttribute('data-request-id', '123'); + peekWrapper.setAttribute('data-peek-url', '/-/peek/results'); + peekWrapper.setAttribute('data-profile-url', '?lineprofiler=true'); + + document.body.appendChild(peekWrapper); + + mock = new MockAdapter(axios); + + mock.onGet('/-/peek/results').reply( + 200, + { + data: { + gc: { + invokes: 0, + invoke_time: '0.00', + use_size: 0, + total_size: 0, + total_object: 0, + gc_time: '0.00', + }, + host: { hostname: 'web-01' }, + }, + }, + {}, + ); + + vm = performanceBar({ container: '#js-peek' }); + }); + + afterEach(() => { + vm.$destroy(); + mock.restore(); + }); + + describe('loadRequestDetails', () => { + beforeEach(() => { + jest.spyOn(vm.store, 'addRequest'); + }); + + it('does nothing if the request cannot be tracked', () => { + jest.spyOn(vm.store, 'canTrackRequest').mockImplementation(() => false); + + vm.loadRequestDetails('123', 'https://gitlab.com/'); + + expect(vm.store.addRequest).not.toHaveBeenCalled(); + }); + + it('adds the request immediately', () => { + vm.loadRequestDetails('123', 'https://gitlab.com/'); + + expect(vm.store.addRequest).toHaveBeenCalledWith('123', 'https://gitlab.com/'); + }); + + it('makes an HTTP request for the request details', () => { + jest.spyOn(PerformanceBarService, 'fetchRequestDetails'); + + vm.loadRequestDetails('456', 'https://gitlab.com/'); + + expect(PerformanceBarService.fetchRequestDetails).toHaveBeenCalledWith( + '/-/peek/results', + '456', + ); + }); + }); +}); diff --git a/spec/frontend/persistent_user_callout_spec.js b/spec/frontend/persistent_user_callout_spec.js new file mode 100644 index 00000000000..db324990e71 --- /dev/null +++ b/spec/frontend/persistent_user_callout_spec.js @@ -0,0 +1,158 @@ +import MockAdapter from 'axios-mock-adapter'; +import waitForPromises from 'helpers/wait_for_promises'; +import axios from '~/lib/utils/axios_utils'; +import PersistentUserCallout from '~/persistent_user_callout'; +import Flash from '~/flash'; + +jest.mock('~/flash'); + +describe('PersistentUserCallout', () => { + const dismissEndpoint = '/dismiss'; + const featureName = 'feature'; + + function createFixture() { + const fixture = document.createElement('div'); + fixture.innerHTML = ` + <div + class="container" + data-dismiss-endpoint="${dismissEndpoint}" + data-feature-id="${featureName}" + > + <button type="button" class="js-close"></button> + </div> + `; + + return fixture; + } + + function createDeferredLinkFixture() { + const fixture = document.createElement('div'); + fixture.innerHTML = ` + <div + class="container" + data-dismiss-endpoint="${dismissEndpoint}" + data-feature-id="${featureName}" + data-defer-links="true" + > + <button type="button" class="js-close"></button> + <a href="/somewhere-pleasant" target="_blank" class="deferred-link">A link</a> + <a href="/somewhere-else" target="_blank" class="normal-link">Another link</a> + </div> + `; + + return fixture; + } + + describe('dismiss', () => { + let button; + let mockAxios; + let persistentUserCallout; + + beforeEach(() => { + const fixture = createFixture(); + const container = fixture.querySelector('.container'); + button = fixture.querySelector('.js-close'); + mockAxios = new MockAdapter(axios); + persistentUserCallout = new PersistentUserCallout(container); + jest.spyOn(persistentUserCallout.container, 'remove').mockImplementation(() => {}); + }); + + afterEach(() => { + mockAxios.restore(); + }); + + it('POSTs endpoint and removes container when clicking close', () => { + mockAxios.onPost(dismissEndpoint).replyOnce(200); + + button.click(); + + return waitForPromises().then(() => { + expect(persistentUserCallout.container.remove).toHaveBeenCalled(); + expect(mockAxios.history.post[0].data).toBe(JSON.stringify({ feature_name: featureName })); + }); + }); + + it('invokes Flash when the dismiss request fails', () => { + mockAxios.onPost(dismissEndpoint).replyOnce(500); + + button.click(); + + return waitForPromises().then(() => { + expect(persistentUserCallout.container.remove).not.toHaveBeenCalled(); + expect(Flash).toHaveBeenCalledWith( + 'An error occurred while dismissing the alert. Refresh the page and try again.', + ); + }); + }); + }); + + describe('deferred links', () => { + let button; + let deferredLink; + let normalLink; + let mockAxios; + let persistentUserCallout; + let windowSpy; + + beforeEach(() => { + const fixture = createDeferredLinkFixture(); + const container = fixture.querySelector('.container'); + button = fixture.querySelector('.js-close'); + deferredLink = fixture.querySelector('.deferred-link'); + normalLink = fixture.querySelector('.normal-link'); + mockAxios = new MockAdapter(axios); + persistentUserCallout = new PersistentUserCallout(container); + jest.spyOn(persistentUserCallout.container, 'remove').mockImplementation(() => {}); + windowSpy = jest.spyOn(window, 'open').mockImplementation(() => {}); + }); + + afterEach(() => { + mockAxios.restore(); + }); + + it('defers loading of a link until callout is dismissed', () => { + const { href, target } = deferredLink; + mockAxios.onPost(dismissEndpoint).replyOnce(200); + + deferredLink.click(); + + return waitForPromises().then(() => { + expect(windowSpy).toHaveBeenCalledWith(href, target); + expect(persistentUserCallout.container.remove).toHaveBeenCalled(); + expect(mockAxios.history.post[0].data).toBe(JSON.stringify({ feature_name: featureName })); + }); + }); + + it('does not dismiss callout on non-deferred links', () => { + normalLink.click(); + + return waitForPromises().then(() => { + expect(windowSpy).not.toHaveBeenCalled(); + expect(persistentUserCallout.container.remove).not.toHaveBeenCalled(); + }); + }); + + it('does not follow link when notification is closed', () => { + mockAxios.onPost(dismissEndpoint).replyOnce(200); + + button.click(); + + return waitForPromises().then(() => { + expect(windowSpy).not.toHaveBeenCalled(); + expect(persistentUserCallout.container.remove).toHaveBeenCalled(); + }); + }); + }); + + describe('factory', () => { + it('returns an instance of PersistentUserCallout with the provided container property', () => { + const fixture = createFixture(); + + expect(PersistentUserCallout.factory(fixture) instanceof PersistentUserCallout).toBe(true); + }); + + it('returns undefined if container is falsey', () => { + expect(PersistentUserCallout.factory()).toBe(undefined); + }); + }); +}); diff --git a/spec/frontend/pipelines/components/dag/__snapshots__/dag_graph_spec.js.snap b/spec/frontend/pipelines/components/dag/__snapshots__/dag_graph_spec.js.snap new file mode 100644 index 00000000000..629efc6d3fa --- /dev/null +++ b/spec/frontend/pipelines/components/dag/__snapshots__/dag_graph_spec.js.snap @@ -0,0 +1,230 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`The DAG graph in the basic case renders the graph svg 1`] = ` +"<svg viewBox=\\"0,0,1000,540\\" width=\\"1000\\" height=\\"540\\"> + <g fill=\\"none\\" stroke-opacity=\\"0.8\\"> + <g id=\\"dag-link43\\" class=\\"dag-link gl-cursor-pointer\\"> + <linearGradient id=\\"dag-grad53\\" gradientUnits=\\"userSpaceOnUse\\" x1=\\"116\\" x2=\\"361.3333333333333\\"> + <stop offset=\\"0%\\" stop-color=\\"#e17223\\"></stop> + <stop offset=\\"100%\\" stop-color=\\"#83ab4a\\"></stop> + </linearGradient> + <clipPath id=\\"dag-clip63\\"> + <path d=\\" + M100, 129 + V158 + H377.3333333333333 + V100 + H100 + Z + \\"></path> + </clipPath> + <path d=\\"M108,129L190,129L190,129L369.3333333333333,129\\" stroke=\\"url(#dag-grad53)\\" style=\\"stroke-linejoin: round;\\" stroke-width=\\"56\\" clip-path=\\"url(#dag-clip63)\\"></path> + </g> + <g id=\\"dag-link44\\" class=\\"dag-link gl-cursor-pointer\\"> + <linearGradient id=\\"dag-grad54\\" gradientUnits=\\"userSpaceOnUse\\" x1=\\"377.3333333333333\\" x2=\\"622.6666666666666\\"> + <stop offset=\\"0%\\" stop-color=\\"#83ab4a\\"></stop> + <stop offset=\\"100%\\" stop-color=\\"#6f3500\\"></stop> + </linearGradient> + <clipPath id=\\"dag-clip64\\"> + <path d=\\" + M361.3333333333333, 129.0000000000002 + V158.0000000000002 + H638.6666666666666 + V100 + H361.3333333333333 + Z + \\"></path> + </clipPath> + <path d=\\"M369.3333333333333,129L509.3333333333333,129L509.3333333333333,129.0000000000002L630.6666666666666,129.0000000000002\\" stroke=\\"url(#dag-grad54)\\" style=\\"stroke-linejoin: round;\\" stroke-width=\\"56\\" clip-path=\\"url(#dag-clip64)\\"></path> + </g> + <g id=\\"dag-link45\\" class=\\"dag-link gl-cursor-pointer\\"> + <linearGradient id=\\"dag-grad55\\" gradientUnits=\\"userSpaceOnUse\\" x1=\\"116\\" x2=\\"622.6666666666666\\"> + <stop offset=\\"0%\\" stop-color=\\"#5772ff\\"></stop> + <stop offset=\\"100%\\" stop-color=\\"#6f3500\\"></stop> + </linearGradient> + <clipPath id=\\"dag-clip65\\"> + <path d=\\" + M100, 187.0000000000002 + V241.00000000000003 + H638.6666666666666 + V158.0000000000002 + H100 + Z + \\"></path> + </clipPath> + <path d=\\"M108,212.00000000000003L306,212.00000000000003L306,187.0000000000002L630.6666666666666,187.0000000000002\\" stroke=\\"url(#dag-grad55)\\" style=\\"stroke-linejoin: round;\\" stroke-width=\\"56\\" clip-path=\\"url(#dag-clip65)\\"></path> + </g> + <g id=\\"dag-link46\\" class=\\"dag-link gl-cursor-pointer\\"> + <linearGradient id=\\"dag-grad56\\" gradientUnits=\\"userSpaceOnUse\\" x1=\\"116\\" x2=\\"361.3333333333333\\"> + <stop offset=\\"0%\\" stop-color=\\"#b24800\\"></stop> + <stop offset=\\"100%\\" stop-color=\\"#006887\\"></stop> + </linearGradient> + <clipPath id=\\"dag-clip66\\"> + <path d=\\" + M100, 269.9999999999998 + V324 + H377.3333333333333 + V240.99999999999977 + H100 + Z + \\"></path> + </clipPath> + <path d=\\"M108,295L338.93333333333334,295L338.93333333333334,269.9999999999998L369.3333333333333,269.9999999999998\\" stroke=\\"url(#dag-grad56)\\" style=\\"stroke-linejoin: round;\\" stroke-width=\\"56\\" clip-path=\\"url(#dag-clip66)\\"></path> + </g> + <g id=\\"dag-link47\\" class=\\"dag-link gl-cursor-pointer\\"> + <linearGradient id=\\"dag-grad57\\" gradientUnits=\\"userSpaceOnUse\\" x1=\\"116\\" x2=\\"361.3333333333333\\"> + <stop offset=\\"0%\\" stop-color=\\"#25d2d2\\"></stop> + <stop offset=\\"100%\\" stop-color=\\"#487900\\"></stop> + </linearGradient> + <clipPath id=\\"dag-clip67\\"> + <path d=\\" + M100, 352.99999999999994 + V407.00000000000006 + H377.3333333333333 + V323.99999999999994 + H100 + Z + \\"></path> + </clipPath> + <path d=\\"M108,378.00000000000006L144.66666666666669,378.00000000000006L144.66666666666669,352.99999999999994L369.3333333333333,352.99999999999994\\" stroke=\\"url(#dag-grad57)\\" style=\\"stroke-linejoin: round;\\" stroke-width=\\"56\\" clip-path=\\"url(#dag-clip67)\\"></path> + </g> + <g id=\\"dag-link48\\" class=\\"dag-link gl-cursor-pointer\\"> + <linearGradient id=\\"dag-grad58\\" gradientUnits=\\"userSpaceOnUse\\" x1=\\"377.3333333333333\\" x2=\\"622.6666666666666\\"> + <stop offset=\\"0%\\" stop-color=\\"#006887\\"></stop> + <stop offset=\\"100%\\" stop-color=\\"#d84280\\"></stop> + </linearGradient> + <clipPath id=\\"dag-clip68\\"> + <path d=\\" + M361.3333333333333, 270.0000000000001 + V299.0000000000001 + H638.6666666666666 + V240.99999999999977 + H361.3333333333333 + Z + \\"></path> + </clipPath> + <path d=\\"M369.3333333333333,269.9999999999998L464,269.9999999999998L464,270.0000000000001L630.6666666666666,270.0000000000001\\" stroke=\\"url(#dag-grad58)\\" style=\\"stroke-linejoin: round;\\" stroke-width=\\"56\\" clip-path=\\"url(#dag-clip68)\\"></path> + </g> + <g id=\\"dag-link49\\" class=\\"dag-link gl-cursor-pointer\\"> + <linearGradient id=\\"dag-grad59\\" gradientUnits=\\"userSpaceOnUse\\" x1=\\"377.3333333333333\\" x2=\\"622.6666666666666\\"> + <stop offset=\\"0%\\" stop-color=\\"#487900\\"></stop> + <stop offset=\\"100%\\" stop-color=\\"#d84280\\"></stop> + </linearGradient> + <clipPath id=\\"dag-clip69\\"> + <path d=\\" + M361.3333333333333, 328.0000000000001 + V381.99999999999994 + H638.6666666666666 + V299.0000000000001 + H361.3333333333333 + Z + \\"></path> + </clipPath> + <path d=\\"M369.3333333333333,352.99999999999994L522,352.99999999999994L522,328.0000000000001L630.6666666666666,328.0000000000001\\" stroke=\\"url(#dag-grad59)\\" style=\\"stroke-linejoin: round;\\" stroke-width=\\"56\\" clip-path=\\"url(#dag-clip69)\\"></path> + </g> + <g id=\\"dag-link50\\" class=\\"dag-link gl-cursor-pointer\\"> + <linearGradient id=\\"dag-grad60\\" gradientUnits=\\"userSpaceOnUse\\" x1=\\"377.3333333333333\\" x2=\\"622.6666666666666\\"> + <stop offset=\\"0%\\" stop-color=\\"#487900\\"></stop> + <stop offset=\\"100%\\" stop-color=\\"#3547de\\"></stop> + </linearGradient> + <clipPath id=\\"dag-clip70\\"> + <path d=\\" + M361.3333333333333, 411 + V440 + H638.6666666666666 + V381.99999999999994 + H361.3333333333333 + Z + \\"></path> + </clipPath> + <path d=\\"M369.3333333333333,410.99999999999994L580,410.99999999999994L580,411L630.6666666666666,411\\" stroke=\\"url(#dag-grad60)\\" style=\\"stroke-linejoin: round;\\" stroke-width=\\"56\\" clip-path=\\"url(#dag-clip70)\\"></path> + </g> + <g id=\\"dag-link51\\" class=\\"dag-link gl-cursor-pointer\\"> + <linearGradient id=\\"dag-grad61\\" gradientUnits=\\"userSpaceOnUse\\" x1=\\"638.6666666666666\\" x2=\\"884\\"> + <stop offset=\\"0%\\" stop-color=\\"#d84280\\"></stop> + <stop offset=\\"100%\\" stop-color=\\"#006887\\"></stop> + </linearGradient> + <clipPath id=\\"dag-clip71\\"> + <path d=\\" + M622.6666666666666, 270.1890725105691 + V299.1890725105691 + H900 + V241.0000000000001 + H622.6666666666666 + Z + \\"></path> + </clipPath> + <path d=\\"M630.6666666666666,270.0000000000001L861.6,270.0000000000001L861.6,270.1890725105691L892,270.1890725105691\\" stroke=\\"url(#dag-grad61)\\" style=\\"stroke-linejoin: round;\\" stroke-width=\\"56\\" clip-path=\\"url(#dag-clip71)\\"></path> + </g> + <g id=\\"dag-link52\\" class=\\"dag-link gl-cursor-pointer\\"> + <linearGradient id=\\"dag-grad62\\" gradientUnits=\\"userSpaceOnUse\\" x1=\\"638.6666666666666\\" x2=\\"884\\"> + <stop offset=\\"0%\\" stop-color=\\"#3547de\\"></stop> + <stop offset=\\"100%\\" stop-color=\\"#275600\\"></stop> + </linearGradient> + <clipPath id=\\"dag-clip72\\"> + <path d=\\" + M622.6666666666666, 411 + V440 + H900 + V382 + H622.6666666666666 + Z + \\"></path> + </clipPath> + <path d=\\"M630.6666666666666,411L679.9999999999999,411L679.9999999999999,411L892,411\\" stroke=\\"url(#dag-grad62)\\" style=\\"stroke-linejoin: round;\\" stroke-width=\\"56\\" clip-path=\\"url(#dag-clip72)\\"></path> + </g> + </g> + <g> + <line class=\\"dag-node gl-cursor-pointer\\" id=\\"dag-node73\\" stroke=\\"#e17223\\" stroke-width=\\"16\\" stroke-linecap=\\"round\\" x1=\\"108\\" x2=\\"108\\" y1=\\"104\\" y2=\\"154.00000000000003\\"></line> + <line class=\\"dag-node gl-cursor-pointer\\" id=\\"dag-node74\\" stroke=\\"#83ab4a\\" stroke-width=\\"16\\" stroke-linecap=\\"round\\" x1=\\"369\\" x2=\\"369\\" y1=\\"104\\" y2=\\"154\\"></line> + <line class=\\"dag-node gl-cursor-pointer\\" id=\\"dag-node75\\" stroke=\\"#5772ff\\" stroke-width=\\"16\\" stroke-linecap=\\"round\\" x1=\\"108\\" x2=\\"108\\" y1=\\"187.00000000000003\\" y2=\\"237.00000000000003\\"></line> + <line class=\\"dag-node gl-cursor-pointer\\" id=\\"dag-node76\\" stroke=\\"#b24800\\" stroke-width=\\"16\\" stroke-linecap=\\"round\\" x1=\\"108\\" x2=\\"108\\" y1=\\"270\\" y2=\\"320.00000000000006\\"></line> + <line class=\\"dag-node gl-cursor-pointer\\" id=\\"dag-node77\\" stroke=\\"#25d2d2\\" stroke-width=\\"16\\" stroke-linecap=\\"round\\" x1=\\"108\\" x2=\\"108\\" y1=\\"353.00000000000006\\" y2=\\"403.0000000000001\\"></line> + <line class=\\"dag-node gl-cursor-pointer\\" id=\\"dag-node78\\" stroke=\\"#6f3500\\" stroke-width=\\"16\\" stroke-linecap=\\"round\\" x1=\\"630\\" x2=\\"630\\" y1=\\"104.0000000000002\\" y2=\\"212.00000000000009\\"></line> + <line class=\\"dag-node gl-cursor-pointer\\" id=\\"dag-node79\\" stroke=\\"#006887\\" stroke-width=\\"16\\" stroke-linecap=\\"round\\" x1=\\"369\\" x2=\\"369\\" y1=\\"244.99999999999977\\" y2=\\"294.99999999999994\\"></line> + <line class=\\"dag-node gl-cursor-pointer\\" id=\\"dag-node80\\" stroke=\\"#487900\\" stroke-width=\\"16\\" stroke-linecap=\\"round\\" x1=\\"369\\" x2=\\"369\\" y1=\\"327.99999999999994\\" y2=\\"436\\"></line> + <line class=\\"dag-node gl-cursor-pointer\\" id=\\"dag-node81\\" stroke=\\"#d84280\\" stroke-width=\\"16\\" stroke-linecap=\\"round\\" x1=\\"630\\" x2=\\"630\\" y1=\\"245.00000000000009\\" y2=\\"353\\"></line> + <line class=\\"dag-node gl-cursor-pointer\\" id=\\"dag-node82\\" stroke=\\"#3547de\\" stroke-width=\\"16\\" stroke-linecap=\\"round\\" x1=\\"630\\" x2=\\"630\\" y1=\\"386\\" y2=\\"436\\"></line> + <line class=\\"dag-node gl-cursor-pointer\\" id=\\"dag-node83\\" stroke=\\"#006887\\" stroke-width=\\"16\\" stroke-linecap=\\"round\\" x1=\\"892\\" x2=\\"892\\" y1=\\"245.18907251056908\\" y2=\\"295.1890725105691\\"></line> + <line class=\\"dag-node gl-cursor-pointer\\" id=\\"dag-node84\\" stroke=\\"#275600\\" stroke-width=\\"16\\" stroke-linecap=\\"round\\" x1=\\"892\\" x2=\\"892\\" y1=\\"386\\" y2=\\"436\\"></line> + </g> + <g class=\\"gl-font-sm\\"> + <foreignObject requiredFeatures=\\"http://www.w3.org/TR/SVG11/feature#Extensibility\\" height=\\"58.00000000000003px\\" width=\\"84\\" x=\\"8\\" y=\\"100\\" class=\\"gl-overflow-visible\\"> + <div class=\\"gl-display-flex gl-pointer-events-none gl-flex-direction-column gl-justify-content-center gl-overflow-wrap-break\\" style=\\"height: 58.00000000000003px; text-align: right;\\">build_a</div> + </foreignObject> + <foreignObject requiredFeatures=\\"http://www.w3.org/TR/SVG11/feature#Extensibility\\" height=\\"25px\\" width=\\"84\\" x=\\"369.3333333333333\\" y=\\"75\\" class=\\"gl-overflow-visible\\"> + <div class=\\"gl-display-flex gl-pointer-events-none gl-flex-direction-column gl-justify-content-center gl-overflow-wrap-break\\" style=\\"height: 25px; text-align: left;\\">test_a</div> + </foreignObject> + <foreignObject requiredFeatures=\\"http://www.w3.org/TR/SVG11/feature#Extensibility\\" height=\\"58px\\" width=\\"84\\" x=\\"8\\" y=\\"183.00000000000003\\" class=\\"gl-overflow-visible\\"> + <div class=\\"gl-display-flex gl-pointer-events-none gl-flex-direction-column gl-justify-content-center gl-overflow-wrap-break\\" style=\\"height: 58px; text-align: right;\\">test_b</div> + </foreignObject> + <foreignObject requiredFeatures=\\"http://www.w3.org/TR/SVG11/feature#Extensibility\\" height=\\"58.00000000000006px\\" width=\\"84\\" x=\\"8\\" y=\\"266\\" class=\\"gl-overflow-visible\\"> + <div class=\\"gl-display-flex gl-pointer-events-none gl-flex-direction-column gl-justify-content-center gl-overflow-wrap-break\\" style=\\"height: 58.00000000000006px; text-align: right;\\">post_test_a</div> + </foreignObject> + <foreignObject requiredFeatures=\\"http://www.w3.org/TR/SVG11/feature#Extensibility\\" height=\\"58.00000000000006px\\" width=\\"84\\" x=\\"8\\" y=\\"349.00000000000006\\" class=\\"gl-overflow-visible\\"> + <div class=\\"gl-display-flex gl-pointer-events-none gl-flex-direction-column gl-justify-content-center gl-overflow-wrap-break\\" style=\\"height: 58.00000000000006px; text-align: right;\\">post_test_b</div> + </foreignObject> + <foreignObject requiredFeatures=\\"http://www.w3.org/TR/SVG11/feature#Extensibility\\" height=\\"25px\\" width=\\"84\\" x=\\"630.6666666666666\\" y=\\"75.0000000000002\\" class=\\"gl-overflow-visible\\"> + <div class=\\"gl-display-flex gl-pointer-events-none gl-flex-direction-column gl-justify-content-center gl-overflow-wrap-break\\" style=\\"height: 25px; text-align: right;\\">post_test_c</div> + </foreignObject> + <foreignObject requiredFeatures=\\"http://www.w3.org/TR/SVG11/feature#Extensibility\\" height=\\"25px\\" width=\\"84\\" x=\\"369.3333333333333\\" y=\\"215.99999999999977\\" class=\\"gl-overflow-visible\\"> + <div class=\\"gl-display-flex gl-pointer-events-none gl-flex-direction-column gl-justify-content-center gl-overflow-wrap-break\\" style=\\"height: 25px; text-align: left;\\">staging_a</div> + </foreignObject> + <foreignObject requiredFeatures=\\"http://www.w3.org/TR/SVG11/feature#Extensibility\\" height=\\"25px\\" width=\\"84\\" x=\\"369.3333333333333\\" y=\\"298.99999999999994\\" class=\\"gl-overflow-visible\\"> + <div class=\\"gl-display-flex gl-pointer-events-none gl-flex-direction-column gl-justify-content-center gl-overflow-wrap-break\\" style=\\"height: 25px; text-align: left;\\">staging_b</div> + </foreignObject> + <foreignObject requiredFeatures=\\"http://www.w3.org/TR/SVG11/feature#Extensibility\\" height=\\"25px\\" width=\\"84\\" x=\\"630.6666666666666\\" y=\\"216.00000000000009\\" class=\\"gl-overflow-visible\\"> + <div class=\\"gl-display-flex gl-pointer-events-none gl-flex-direction-column gl-justify-content-center gl-overflow-wrap-break\\" style=\\"height: 25px; text-align: right;\\">canary_a</div> + </foreignObject> + <foreignObject requiredFeatures=\\"http://www.w3.org/TR/SVG11/feature#Extensibility\\" height=\\"25px\\" width=\\"84\\" x=\\"630.6666666666666\\" y=\\"357\\" class=\\"gl-overflow-visible\\"> + <div class=\\"gl-display-flex gl-pointer-events-none gl-flex-direction-column gl-justify-content-center gl-overflow-wrap-break\\" style=\\"height: 25px; text-align: right;\\">canary_c</div> + </foreignObject> + <foreignObject requiredFeatures=\\"http://www.w3.org/TR/SVG11/feature#Extensibility\\" height=\\"58px\\" width=\\"84\\" x=\\"908\\" y=\\"241.18907251056908\\" class=\\"gl-overflow-visible\\"> + <div class=\\"gl-display-flex gl-pointer-events-none gl-flex-direction-column gl-justify-content-center gl-overflow-wrap-break\\" style=\\"height: 58px; text-align: left;\\">production_a</div> + </foreignObject> + <foreignObject requiredFeatures=\\"http://www.w3.org/TR/SVG11/feature#Extensibility\\" height=\\"58px\\" width=\\"84\\" x=\\"908\\" y=\\"382\\" class=\\"gl-overflow-visible\\"> + <div class=\\"gl-display-flex gl-pointer-events-none gl-flex-direction-column gl-justify-content-center gl-overflow-wrap-break\\" style=\\"height: 58px; text-align: left;\\">production_d</div> + </foreignObject> + </g> +</svg>" +`; diff --git a/spec/frontend/pipelines/components/dag/dag_graph_spec.js b/spec/frontend/pipelines/components/dag/dag_graph_spec.js new file mode 100644 index 00000000000..017461dfb84 --- /dev/null +++ b/spec/frontend/pipelines/components/dag/dag_graph_spec.js @@ -0,0 +1,218 @@ +import { mount } from '@vue/test-utils'; +import DagGraph from '~/pipelines/components/dag/dag_graph.vue'; +import { IS_HIGHLIGHTED, LINK_SELECTOR, NODE_SELECTOR } from '~/pipelines/components/dag/constants'; +import { highlightIn, highlightOut } from '~/pipelines/components/dag/interactions'; +import { createSankey } from '~/pipelines/components/dag/drawing_utils'; +import { removeOrphanNodes } from '~/pipelines/components/dag/parsing_utils'; +import { parsedData } from './mock_data'; + +describe('The DAG graph', () => { + let wrapper; + + const getGraph = () => wrapper.find('.dag-graph-container > svg'); + const getAllLinks = () => wrapper.findAll(`.${LINK_SELECTOR}`); + const getAllNodes = () => wrapper.findAll(`.${NODE_SELECTOR}`); + const getAllLabels = () => wrapper.findAll('foreignObject'); + + const createComponent = (propsData = {}) => { + if (wrapper?.destroy) { + wrapper.destroy(); + } + + wrapper = mount(DagGraph, { + attachToDocument: true, + propsData, + data() { + return { + color: () => {}, + width: 0, + height: 0, + }; + }, + }); + }; + + beforeEach(() => { + createComponent({ graphData: parsedData }); + }); + + afterEach(() => { + wrapper.destroy(); + wrapper = null; + }); + + describe('in the basic case', () => { + beforeEach(() => { + /* + The graph uses random to offset links. To keep the snapshot consistent, + we mock Math.random. Wheeeee! + */ + const randomNumber = jest.spyOn(global.Math, 'random'); + randomNumber.mockImplementation(() => 0.2); + createComponent({ graphData: parsedData }); + }); + + it('renders the graph svg', () => { + expect(getGraph().exists()).toBe(true); + expect(getGraph().html()).toMatchSnapshot(); + }); + }); + + describe('links', () => { + it('renders the expected number of links', () => { + expect(getAllLinks()).toHaveLength(parsedData.links.length); + }); + + it('renders the expected number of gradients', () => { + expect(wrapper.findAll('linearGradient')).toHaveLength(parsedData.links.length); + }); + + it('renders the expected number of clip paths', () => { + expect(wrapper.findAll('clipPath')).toHaveLength(parsedData.links.length); + }); + }); + + describe('nodes and labels', () => { + const sankeyNodes = createSankey()(parsedData).nodes; + const processedNodes = removeOrphanNodes(sankeyNodes); + + describe('nodes', () => { + it('renders the expected number of nodes', () => { + expect(getAllNodes()).toHaveLength(processedNodes.length); + }); + }); + + describe('labels', () => { + it('renders the expected number of labels as foreignObjects', () => { + expect(getAllLabels()).toHaveLength(processedNodes.length); + }); + + it('renders the title as text', () => { + expect( + getAllLabels() + .at(0) + .text(), + ).toBe(parsedData.nodes[0].name); + }); + }); + }); + + describe('interactions', () => { + const strokeOpacity = opacity => `stroke-opacity: ${opacity};`; + const baseOpacity = () => wrapper.vm.$options.viewOptions.baseOpacity; + + describe('links', () => { + const liveLink = () => getAllLinks().at(4); + const otherLink = () => getAllLinks().at(1); + + describe('on hover', () => { + it('sets the link opacity to baseOpacity and background links to 0.2', () => { + liveLink().trigger('mouseover'); + expect(liveLink().attributes('style')).toBe(strokeOpacity(highlightIn)); + expect(otherLink().attributes('style')).toBe(strokeOpacity(highlightOut)); + }); + + it('reverts the styles on mouseout', () => { + liveLink().trigger('mouseover'); + liveLink().trigger('mouseout'); + expect(liveLink().attributes('style')).toBe(strokeOpacity(baseOpacity())); + expect(otherLink().attributes('style')).toBe(strokeOpacity(baseOpacity())); + }); + }); + + describe('on click', () => { + describe('toggles link liveness', () => { + it('turns link on', () => { + liveLink().trigger('click'); + expect(liveLink().attributes('style')).toBe(strokeOpacity(highlightIn)); + expect(otherLink().attributes('style')).toBe(strokeOpacity(highlightOut)); + }); + + it('turns link off on second click', () => { + liveLink().trigger('click'); + liveLink().trigger('click'); + expect(liveLink().attributes('style')).toBe(strokeOpacity(baseOpacity())); + expect(otherLink().attributes('style')).toBe(strokeOpacity(baseOpacity())); + }); + }); + + it('the link remains live even after mouseout', () => { + liveLink().trigger('click'); + liveLink().trigger('mouseout'); + expect(liveLink().attributes('style')).toBe(strokeOpacity(highlightIn)); + expect(otherLink().attributes('style')).toBe(strokeOpacity(highlightOut)); + }); + + it('preserves state when multiple links are toggled on and off', () => { + const anotherLiveLink = () => getAllLinks().at(2); + + liveLink().trigger('click'); + anotherLiveLink().trigger('click'); + expect(liveLink().attributes('style')).toBe(strokeOpacity(highlightIn)); + expect(anotherLiveLink().attributes('style')).toBe(strokeOpacity(highlightIn)); + expect(otherLink().attributes('style')).toBe(strokeOpacity(highlightOut)); + + anotherLiveLink().trigger('click'); + expect(liveLink().attributes('style')).toBe(strokeOpacity(highlightIn)); + expect(anotherLiveLink().attributes('style')).toBe(strokeOpacity(highlightOut)); + expect(otherLink().attributes('style')).toBe(strokeOpacity(highlightOut)); + + liveLink().trigger('click'); + expect(liveLink().attributes('style')).toBe(strokeOpacity(baseOpacity())); + expect(anotherLiveLink().attributes('style')).toBe(strokeOpacity(baseOpacity())); + expect(otherLink().attributes('style')).toBe(strokeOpacity(baseOpacity())); + }); + }); + }); + + describe('nodes', () => { + const liveNode = () => getAllNodes().at(10); + const anotherLiveNode = () => getAllNodes().at(5); + const nodesNotHighlighted = () => getAllNodes().filter(n => !n.classes(IS_HIGHLIGHTED)); + const linksNotHighlighted = () => getAllLinks().filter(n => !n.classes(IS_HIGHLIGHTED)); + const nodesHighlighted = () => getAllNodes().filter(n => n.classes(IS_HIGHLIGHTED)); + const linksHighlighted = () => getAllLinks().filter(n => n.classes(IS_HIGHLIGHTED)); + + describe('on click', () => { + it('highlights the clicked node and predecessors', () => { + liveNode().trigger('click'); + + expect(nodesNotHighlighted().length < getAllNodes().length).toBe(true); + expect(linksNotHighlighted().length < getAllLinks().length).toBe(true); + + linksHighlighted().wrappers.forEach(link => { + expect(link.attributes('style')).toBe(strokeOpacity(highlightIn)); + }); + + nodesHighlighted().wrappers.forEach(node => { + expect(node.attributes('stroke')).not.toBe('#f2f2f2'); + }); + + linksNotHighlighted().wrappers.forEach(link => { + expect(link.attributes('style')).toBe(strokeOpacity(highlightOut)); + }); + + nodesNotHighlighted().wrappers.forEach(node => { + expect(node.attributes('stroke')).toBe('#f2f2f2'); + }); + }); + + it('toggles path off on second click', () => { + liveNode().trigger('click'); + liveNode().trigger('click'); + + expect(nodesNotHighlighted().length).toBe(getAllNodes().length); + expect(linksNotHighlighted().length).toBe(getAllLinks().length); + }); + + it('preserves state when multiple nodes are toggled on and off', () => { + anotherLiveNode().trigger('click'); + liveNode().trigger('click'); + anotherLiveNode().trigger('click'); + expect(nodesNotHighlighted().length < getAllNodes().length).toBe(true); + expect(linksNotHighlighted().length < getAllLinks().length).toBe(true); + }); + }); + }); + }); +}); diff --git a/spec/frontend/pipelines/components/dag/dag_spec.js b/spec/frontend/pipelines/components/dag/dag_spec.js new file mode 100644 index 00000000000..666b4cfaa2f --- /dev/null +++ b/spec/frontend/pipelines/components/dag/dag_spec.js @@ -0,0 +1,137 @@ +import { mount, shallowMount } from '@vue/test-utils'; +import MockAdapter from 'axios-mock-adapter'; +import axios from '~/lib/utils/axios_utils'; +import waitForPromises from 'helpers/wait_for_promises'; +import { GlAlert } from '@gitlab/ui'; +import Dag from '~/pipelines/components/dag/dag.vue'; +import DagGraph from '~/pipelines/components/dag/dag_graph.vue'; + +import { + DEFAULT, + PARSE_FAILURE, + LOAD_FAILURE, + UNSUPPORTED_DATA, +} from '~/pipelines/components/dag//constants'; +import { mockBaseData, tooSmallGraph, unparseableGraph } from './mock_data'; + +describe('Pipeline DAG graph wrapper', () => { + let wrapper; + let mock; + const getAlert = () => wrapper.find(GlAlert); + const getAllAlerts = () => wrapper.findAll(GlAlert); + const getGraph = () => wrapper.find(DagGraph); + const getErrorText = type => wrapper.vm.$options.errorTexts[type]; + + const dataPath = '/root/test/pipelines/90/dag.json'; + + const createComponent = (propsData = {}, method = shallowMount) => { + if (wrapper?.destroy) { + wrapper.destroy(); + } + + wrapper = method(Dag, { + propsData, + data() { + return { + showFailureAlert: false, + }; + }, + }); + }; + + beforeEach(() => { + mock = new MockAdapter(axios); + }); + + afterEach(() => { + mock.restore(); + wrapper.destroy(); + wrapper = null; + }); + + describe('when there is no dataUrl', () => { + beforeEach(() => { + createComponent({ graphUrl: undefined }); + }); + + it('shows the DEFAULT alert and not the graph', () => { + expect(getAlert().exists()).toBe(true); + expect(getAlert().text()).toBe(getErrorText(DEFAULT)); + expect(getGraph().exists()).toBe(false); + }); + }); + + describe('when there is a dataUrl', () => { + describe('but the data fetch fails', () => { + beforeEach(() => { + mock.onGet(dataPath).replyOnce(500); + createComponent({ graphUrl: dataPath }); + }); + + it('shows the LOAD_FAILURE alert and not the graph', () => { + return wrapper.vm + .$nextTick() + .then(waitForPromises) + .then(() => { + expect(getAlert().exists()).toBe(true); + expect(getAlert().text()).toBe(getErrorText(LOAD_FAILURE)); + expect(getGraph().exists()).toBe(false); + }); + }); + }); + + describe('the data fetch succeeds but the parse fails', () => { + beforeEach(() => { + mock.onGet(dataPath).replyOnce(200, unparseableGraph); + createComponent({ graphUrl: dataPath }); + }); + + it('shows the PARSE_FAILURE alert and not the graph', () => { + return wrapper.vm + .$nextTick() + .then(waitForPromises) + .then(() => { + expect(getAlert().exists()).toBe(true); + expect(getAlert().text()).toBe(getErrorText(PARSE_FAILURE)); + expect(getGraph().exists()).toBe(false); + }); + }); + }); + + describe('and the data fetch and parse succeeds', () => { + beforeEach(() => { + mock.onGet(dataPath).replyOnce(200, mockBaseData); + createComponent({ graphUrl: dataPath }, mount); + }); + + it('shows the graph and not the beta alert', () => { + return wrapper.vm + .$nextTick() + .then(waitForPromises) + .then(() => { + expect(getAllAlerts().length).toBe(1); + expect(getAlert().text()).toContain('This feature is currently in beta.'); + expect(getGraph().exists()).toBe(true); + }); + }); + }); + + describe('the data fetch and parse succeeds, but the resulting graph is too small', () => { + beforeEach(() => { + mock.onGet(dataPath).replyOnce(200, tooSmallGraph); + createComponent({ graphUrl: dataPath }); + }); + + it('shows the UNSUPPORTED_DATA alert and not the graph', () => { + return wrapper.vm + .$nextTick() + .then(waitForPromises) + .then(() => { + expect(getAlert().exists()).toBe(true); + expect(getAlert().text()).toBe(getErrorText(UNSUPPORTED_DATA)); + expect(getGraph().exists()).toBe(false); + }); + }); + }); + }); +}); diff --git a/spec/frontend/pipelines/components/dag/drawing_utils_spec.js b/spec/frontend/pipelines/components/dag/drawing_utils_spec.js new file mode 100644 index 00000000000..a50163411ed --- /dev/null +++ b/spec/frontend/pipelines/components/dag/drawing_utils_spec.js @@ -0,0 +1,57 @@ +import { createSankey } from '~/pipelines/components/dag/drawing_utils'; +import { parseData } from '~/pipelines/components/dag/parsing_utils'; +import { mockBaseData } from './mock_data'; + +describe('DAG visualization drawing utilities', () => { + const parsed = parseData(mockBaseData.stages); + + const layoutSettings = { + width: 200, + height: 200, + nodeWidth: 10, + nodePadding: 20, + paddingForLabels: 100, + }; + + const sankeyLayout = createSankey(layoutSettings)(parsed); + + describe('createSankey', () => { + it('returns a nodes data structure with expected d3-added properties', () => { + const exampleNode = sankeyLayout.nodes[0]; + expect(exampleNode).toHaveProperty('sourceLinks'); + expect(exampleNode).toHaveProperty('targetLinks'); + expect(exampleNode).toHaveProperty('depth'); + expect(exampleNode).toHaveProperty('layer'); + expect(exampleNode).toHaveProperty('x0'); + expect(exampleNode).toHaveProperty('x1'); + expect(exampleNode).toHaveProperty('y0'); + expect(exampleNode).toHaveProperty('y1'); + }); + + it('returns a links data structure with expected d3-added properties', () => { + const exampleLink = sankeyLayout.links[0]; + expect(exampleLink).toHaveProperty('source'); + expect(exampleLink).toHaveProperty('target'); + expect(exampleLink).toHaveProperty('width'); + expect(exampleLink).toHaveProperty('y0'); + expect(exampleLink).toHaveProperty('y1'); + }); + + describe('data structure integrity', () => { + const newObject = { name: 'bad-actor' }; + + beforeEach(() => { + sankeyLayout.nodes.unshift(newObject); + }); + + it('sankey does not propagate changes back to the original', () => { + expect(sankeyLayout.nodes[0]).toBe(newObject); + expect(parsed.nodes[0]).not.toBe(newObject); + }); + + afterEach(() => { + sankeyLayout.nodes.shift(); + }); + }); + }); +}); diff --git a/spec/frontend/pipelines/components/dag/mock_data.js b/spec/frontend/pipelines/components/dag/mock_data.js new file mode 100644 index 00000000000..5de8697170a --- /dev/null +++ b/spec/frontend/pipelines/components/dag/mock_data.js @@ -0,0 +1,390 @@ +/* + It is important that the simple base include parallel jobs + as well as non-parallel jobs with spaces in the name to prevent + us relying on spaces as an indicator. +*/ +export const mockBaseData = { + stages: [ + { + name: 'test', + groups: [ + { + name: 'jest', + size: 2, + jobs: [{ name: 'jest 1/2', needs: ['frontend fixtures'] }, { name: 'jest 2/2' }], + }, + { + name: 'rspec', + size: 1, + jobs: [{ name: 'rspec', needs: ['frontend fixtures'] }], + }, + ], + }, + { + name: 'fixtures', + groups: [ + { + name: 'frontend fixtures', + size: 1, + jobs: [{ name: 'frontend fixtures' }], + }, + ], + }, + { + name: 'un-needed', + groups: [ + { + name: 'un-needed', + size: 1, + jobs: [{ name: 'un-needed' }], + }, + ], + }, + ], +}; + +export const tooSmallGraph = { + stages: [ + { + name: 'test', + groups: [ + { + name: 'jest', + size: 2, + jobs: [{ name: 'jest 1/2' }, { name: 'jest 2/2' }], + }, + { + name: 'rspec', + size: 1, + jobs: [{ name: 'rspec', needs: ['frontend fixtures'] }], + }, + ], + }, + { + name: 'fixtures', + groups: [ + { + name: 'frontend fixtures', + size: 1, + jobs: [{ name: 'frontend fixtures' }], + }, + ], + }, + { + name: 'un-needed', + groups: [ + { + name: 'un-needed', + size: 1, + jobs: [{ name: 'un-needed' }], + }, + ], + }, + ], +}; + +export const unparseableGraph = [ + { + name: 'test', + groups: [ + { + name: 'jest', + size: 2, + jobs: [{ name: 'jest 1/2', needs: ['frontend fixtures'] }, { name: 'jest 2/2' }], + }, + { + name: 'rspec', + size: 1, + jobs: [{ name: 'rspec', needs: ['frontend fixtures'] }], + }, + ], + }, + { + name: 'un-needed', + groups: [ + { + name: 'un-needed', + size: 1, + jobs: [{ name: 'un-needed' }], + }, + ], + }, +]; + +/* + This represents data that has been parsed by the wrapper +*/ +export const parsedData = { + nodes: [ + { + name: 'build_a', + size: 1, + jobs: [ + { + name: 'build_a', + }, + ], + category: 'build', + }, + { + name: 'build_b', + size: 1, + jobs: [ + { + name: 'build_b', + }, + ], + category: 'build', + }, + { + name: 'test_a', + size: 1, + jobs: [ + { + name: 'test_a', + needs: ['build_a'], + }, + ], + category: 'test', + }, + { + name: 'test_b', + size: 1, + jobs: [ + { + name: 'test_b', + }, + ], + category: 'test', + }, + { + name: 'test_c', + size: 1, + jobs: [ + { + name: 'test_c', + }, + ], + category: 'test', + }, + { + name: 'test_d', + size: 1, + jobs: [ + { + name: 'test_d', + }, + ], + category: 'test', + }, + { + name: 'post_test_a', + size: 1, + jobs: [ + { + name: 'post_test_a', + }, + ], + category: 'post-test', + }, + { + name: 'post_test_b', + size: 1, + jobs: [ + { + name: 'post_test_b', + }, + ], + category: 'post-test', + }, + { + name: 'post_test_c', + size: 1, + jobs: [ + { + name: 'post_test_c', + needs: ['test_a', 'test_b'], + }, + ], + category: 'post-test', + }, + { + name: 'staging_a', + size: 1, + jobs: [ + { + name: 'staging_a', + needs: ['post_test_a'], + }, + ], + category: 'staging', + }, + { + name: 'staging_b', + size: 1, + jobs: [ + { + name: 'staging_b', + needs: ['post_test_b'], + }, + ], + category: 'staging', + }, + { + name: 'staging_c', + size: 1, + jobs: [ + { + name: 'staging_c', + }, + ], + category: 'staging', + }, + { + name: 'staging_d', + size: 1, + jobs: [ + { + name: 'staging_d', + }, + ], + category: 'staging', + }, + { + name: 'staging_e', + size: 1, + jobs: [ + { + name: 'staging_e', + }, + ], + category: 'staging', + }, + { + name: 'canary_a', + size: 1, + jobs: [ + { + name: 'canary_a', + needs: ['staging_a', 'staging_b'], + }, + ], + category: 'canary', + }, + { + name: 'canary_b', + size: 1, + jobs: [ + { + name: 'canary_b', + }, + ], + category: 'canary', + }, + { + name: 'canary_c', + size: 1, + jobs: [ + { + name: 'canary_c', + needs: ['staging_b'], + }, + ], + category: 'canary', + }, + { + name: 'production_a', + size: 1, + jobs: [ + { + name: 'production_a', + needs: ['canary_a'], + }, + ], + category: 'production', + }, + { + name: 'production_b', + size: 1, + jobs: [ + { + name: 'production_b', + }, + ], + category: 'production', + }, + { + name: 'production_c', + size: 1, + jobs: [ + { + name: 'production_c', + }, + ], + category: 'production', + }, + { + name: 'production_d', + size: 1, + jobs: [ + { + name: 'production_d', + needs: ['canary_c'], + }, + ], + category: 'production', + }, + ], + links: [ + { + source: 'build_a', + target: 'test_a', + value: 10, + }, + { + source: 'test_a', + target: 'post_test_c', + value: 10, + }, + { + source: 'test_b', + target: 'post_test_c', + value: 10, + }, + { + source: 'post_test_a', + target: 'staging_a', + value: 10, + }, + { + source: 'post_test_b', + target: 'staging_b', + value: 10, + }, + { + source: 'staging_a', + target: 'canary_a', + value: 10, + }, + { + source: 'staging_b', + target: 'canary_a', + value: 10, + }, + { + source: 'staging_b', + target: 'canary_c', + value: 10, + }, + { + source: 'canary_a', + target: 'production_a', + value: 10, + }, + { + source: 'canary_c', + target: 'production_d', + value: 10, + }, + ], +}; diff --git a/spec/frontend/pipelines/components/dag/parsing_utils_spec.js b/spec/frontend/pipelines/components/dag/parsing_utils_spec.js new file mode 100644 index 00000000000..d9a1296e572 --- /dev/null +++ b/spec/frontend/pipelines/components/dag/parsing_utils_spec.js @@ -0,0 +1,133 @@ +import { + createNodesStructure, + makeLinksFromNodes, + filterByAncestors, + parseData, + removeOrphanNodes, + getMaxNodes, +} from '~/pipelines/components/dag/parsing_utils'; + +import { createSankey } from '~/pipelines/components/dag/drawing_utils'; +import { mockBaseData } from './mock_data'; + +describe('DAG visualization parsing utilities', () => { + const { nodes, nodeDict } = createNodesStructure(mockBaseData.stages); + const unfilteredLinks = makeLinksFromNodes(nodes, nodeDict); + const parsed = parseData(mockBaseData.stages); + + const layoutSettings = { + width: 200, + height: 200, + nodeWidth: 10, + nodePadding: 20, + paddingForLabels: 100, + }; + + const sankeyLayout = createSankey(layoutSettings)(parsed); + + describe('createNodesStructure', () => { + const parallelGroupName = 'jest'; + const parallelJobName = 'jest 1/2'; + const singleJobName = 'frontend fixtures'; + + const { name, jobs, size } = mockBaseData.stages[0].groups[0]; + + it('returns the expected node structure', () => { + expect(nodes[0]).toHaveProperty('category', mockBaseData.stages[0].name); + expect(nodes[0]).toHaveProperty('name', name); + expect(nodes[0]).toHaveProperty('jobs', jobs); + expect(nodes[0]).toHaveProperty('size', size); + }); + + it('adds needs to top level of nodeDict entries', () => { + expect(nodeDict[parallelGroupName]).toHaveProperty('needs'); + expect(nodeDict[parallelJobName]).toHaveProperty('needs'); + expect(nodeDict[singleJobName]).toHaveProperty('needs'); + }); + + it('makes entries in nodeDict for jobs and parallel jobs', () => { + const nodeNames = Object.keys(nodeDict); + + expect(nodeNames.includes(parallelGroupName)).toBe(true); + expect(nodeNames.includes(parallelJobName)).toBe(true); + expect(nodeNames.includes(singleJobName)).toBe(true); + }); + }); + + describe('makeLinksFromNodes', () => { + it('returns the expected link structure', () => { + expect(unfilteredLinks[0]).toHaveProperty('source', 'frontend fixtures'); + expect(unfilteredLinks[0]).toHaveProperty('target', 'jest'); + expect(unfilteredLinks[0]).toHaveProperty('value', 10); + }); + }); + + describe('filterByAncestors', () => { + const allLinks = [ + { source: 'job1', target: 'job4' }, + { source: 'job1', target: 'job2' }, + { source: 'job2', target: 'job4' }, + ]; + + const dedupedLinks = [{ source: 'job1', target: 'job2' }, { source: 'job2', target: 'job4' }]; + + const nodeLookup = { + job1: { + name: 'job1', + }, + job2: { + name: 'job2', + needs: ['job1'], + }, + job4: { + name: 'job4', + needs: ['job1', 'job2'], + category: 'build', + }, + }; + + it('dedupes links', () => { + expect(filterByAncestors(allLinks, nodeLookup)).toMatchObject(dedupedLinks); + }); + }); + + describe('parseData parent function', () => { + it('returns an object containing a list of nodes and links', () => { + // an array of nodes exist and the values are defined + expect(parsed).toHaveProperty('nodes'); + expect(Array.isArray(parsed.nodes)).toBe(true); + expect(parsed.nodes.filter(Boolean)).not.toHaveLength(0); + + // an array of links exist and the values are defined + expect(parsed).toHaveProperty('links'); + expect(Array.isArray(parsed.links)).toBe(true); + expect(parsed.links.filter(Boolean)).not.toHaveLength(0); + }); + }); + + describe('removeOrphanNodes', () => { + it('removes sankey nodes that have no needs and are not needed', () => { + const cleanedNodes = removeOrphanNodes(sankeyLayout.nodes); + expect(cleanedNodes).toHaveLength(sankeyLayout.nodes.length - 1); + }); + }); + + describe('getMaxNodes', () => { + it('returns the number of nodes in the most populous generation', () => { + const layerNodes = [ + { layer: 0 }, + { layer: 0 }, + { layer: 1 }, + { layer: 1 }, + { layer: 0 }, + { layer: 3 }, + { layer: 2 }, + { layer: 4 }, + { layer: 1 }, + { layer: 3 }, + { layer: 4 }, + ]; + expect(getMaxNodes(layerNodes)).toBe(3); + }); + }); +}); diff --git a/spec/frontend/pipelines/components/pipelines_filtered_search_spec.js b/spec/frontend/pipelines/components/pipelines_filtered_search_spec.js index 12c6fab9c41..bdc807fcbfe 100644 --- a/spec/frontend/pipelines/components/pipelines_filtered_search_spec.js +++ b/spec/frontend/pipelines/components/pipelines_filtered_search_spec.js @@ -3,13 +3,7 @@ import { mount } from '@vue/test-utils'; import MockAdapter from 'axios-mock-adapter'; import axios from '~/lib/utils/axios_utils'; import PipelinesFilteredSearch from '~/pipelines/components/pipelines_filtered_search.vue'; -import { - users, - mockSearch, - pipelineWithStages, - branches, - mockBranchesAfterMap, -} from '../mock_data'; +import { users, mockSearch, branches, tags } from '../mock_data'; import { GlFilteredSearch } from '@gitlab/ui'; describe('Pipelines filtered search', () => { @@ -21,12 +15,16 @@ describe('Pipelines filtered search', () => { findFilteredSearch() .props('availableTokens') .find(token => token.type === type); + const findBranchToken = () => getSearchToken('ref'); + const findTagToken = () => getSearchToken('tag'); + const findUserToken = () => getSearchToken('username'); + const findStatusToken = () => getSearchToken('status'); - const createComponent = () => { + const createComponent = (params = {}) => { wrapper = mount(PipelinesFilteredSearch, { propsData: { - pipelines: [pipelineWithStages], projectId: '21', + params, }, attachToDocument: true, }); @@ -37,6 +35,7 @@ describe('Pipelines filtered search', () => { jest.spyOn(Api, 'projectUsers').mockResolvedValue(users); jest.spyOn(Api, 'branches').mockResolvedValue({ data: branches }); + jest.spyOn(Api, 'tags').mockResolvedValue({ data: tags }); createComponent(); }); @@ -55,37 +54,39 @@ describe('Pipelines filtered search', () => { }); it('displays search tokens', () => { - expect(getSearchToken('username')).toMatchObject({ + expect(findUserToken()).toMatchObject({ type: 'username', icon: 'user', title: 'Trigger author', unique: true, - triggerAuthors: users, projectId: '21', operators: [expect.objectContaining({ value: '=' })], }); - expect(getSearchToken('ref')).toMatchObject({ + expect(findBranchToken()).toMatchObject({ type: 'ref', icon: 'branch', title: 'Branch name', unique: true, - branches: mockBranchesAfterMap, projectId: '21', operators: [expect.objectContaining({ value: '=' })], }); - }); - - it('fetches and sets project users', () => { - expect(Api.projectUsers).toHaveBeenCalled(); - - expect(wrapper.vm.projectUsers).toEqual(users); - }); - it('fetches and sets branches', () => { - expect(Api.branches).toHaveBeenCalled(); + expect(findStatusToken()).toMatchObject({ + type: 'status', + icon: 'status', + title: 'Status', + unique: true, + operators: [expect.objectContaining({ value: '=' })], + }); - expect(wrapper.vm.projectBranches).toEqual(mockBranchesAfterMap); + expect(findTagToken()).toMatchObject({ + type: 'tag', + icon: 'tag', + title: 'Tag name', + unique: true, + operators: [expect.objectContaining({ value: '=' })], + }); }); it('emits filterPipelines on submit with correct filter', () => { @@ -94,4 +95,80 @@ describe('Pipelines filtered search', () => { expect(wrapper.emitted('filterPipelines')).toBeTruthy(); expect(wrapper.emitted('filterPipelines')[0]).toEqual([mockSearch]); }); + + it('disables tag name token when branch name token is active', () => { + findFilteredSearch().vm.$emit('input', [ + { type: 'ref', value: { data: 'branch-1', operator: '=' } }, + { type: 'filtered-search-term', value: { data: '' } }, + ]); + + return wrapper.vm.$nextTick().then(() => { + expect(findBranchToken().disabled).toBe(false); + expect(findTagToken().disabled).toBe(true); + }); + }); + + it('disables branch name token when tag name token is active', () => { + findFilteredSearch().vm.$emit('input', [ + { type: 'tag', value: { data: 'tag-1', operator: '=' } }, + { type: 'filtered-search-term', value: { data: '' } }, + ]); + + return wrapper.vm.$nextTick().then(() => { + expect(findBranchToken().disabled).toBe(true); + expect(findTagToken().disabled).toBe(false); + }); + }); + + it('resets tokens disabled state on clear', () => { + findFilteredSearch().vm.$emit('clearInput'); + + return wrapper.vm.$nextTick().then(() => { + expect(findBranchToken().disabled).toBe(false); + expect(findTagToken().disabled).toBe(false); + }); + }); + + it('resets tokens disabled state when clearing tokens by backspace', () => { + findFilteredSearch().vm.$emit('input', [{ type: 'filtered-search-term', value: { data: '' } }]); + + return wrapper.vm.$nextTick().then(() => { + expect(findBranchToken().disabled).toBe(false); + expect(findTagToken().disabled).toBe(false); + }); + }); + + describe('Url query params', () => { + const params = { + username: 'deja.green', + ref: 'master', + }; + + beforeEach(() => { + createComponent(params); + }); + + it('sets default value if url query params', () => { + const expectedValueProp = [ + { + type: 'username', + value: { + data: params.username, + operator: '=', + }, + }, + { + type: 'ref', + value: { + data: params.ref, + operator: '=', + }, + }, + { type: 'filtered-search-term', value: { data: '' } }, + ]; + + expect(findFilteredSearch().props('value')).toEqual(expectedValueProp); + expect(findFilteredSearch().props('value')).toHaveLength(expectedValueProp.length); + }); + }); }); diff --git a/spec/frontend/pipelines/graph/graph_component_spec.js b/spec/frontend/pipelines/graph/graph_component_spec.js index a9b06eab3fa..9731ce3f8a6 100644 --- a/spec/frontend/pipelines/graph/graph_component_spec.js +++ b/spec/frontend/pipelines/graph/graph_component_spec.js @@ -7,6 +7,7 @@ import linkedPipelinesColumn from '~/pipelines/components/graph/linked_pipelines import graphJSON from './mock_data'; import linkedPipelineJSON from './linked_pipelines_mock_data'; import PipelinesMediator from '~/pipelines/pipeline_details_mediator'; +import { setHTMLFixture } from 'helpers/fixtures'; describe('graph component', () => { const store = new PipelineStore(); @@ -15,6 +16,10 @@ describe('graph component', () => { let wrapper; + beforeEach(() => { + setHTMLFixture('<div class="layout-page"></div>'); + }); + afterEach(() => { wrapper.destroy(); wrapper = null; diff --git a/spec/frontend/pipelines/mock_data.js b/spec/frontend/pipelines/mock_data.js index 37c1e471415..e63efc543f1 100644 --- a/spec/frontend/pipelines/mock_data.js +++ b/spec/frontend/pipelines/mock_data.js @@ -560,9 +560,107 @@ export const branches = [ }, ]; +export const tags = [ + { + name: 'tag-3', + message: '', + target: '66673b07efef254dab7d537f0433a40e61cf84fe', + commit: { + id: '66673b07efef254dab7d537f0433a40e61cf84fe', + short_id: '66673b07', + created_at: '2020-03-16T11:04:46.000-04:00', + parent_ids: ['def28bf679235071140180495f25b657e2203587'], + title: 'Update .gitlab-ci.yml', + message: 'Update .gitlab-ci.yml', + author_name: 'Administrator', + author_email: 'admin@example.com', + authored_date: '2020-03-16T11:04:46.000-04:00', + committer_name: 'Administrator', + committer_email: 'admin@example.com', + committed_date: '2020-03-16T11:04:46.000-04:00', + web_url: + 'http://192.168.1.22:3000/root/dag-pipeline/-/commit/66673b07efef254dab7d537f0433a40e61cf84fe', + }, + release: null, + protected: false, + }, + { + name: 'tag-2', + message: '', + target: '66673b07efef254dab7d537f0433a40e61cf84fe', + commit: { + id: '66673b07efef254dab7d537f0433a40e61cf84fe', + short_id: '66673b07', + created_at: '2020-03-16T11:04:46.000-04:00', + parent_ids: ['def28bf679235071140180495f25b657e2203587'], + title: 'Update .gitlab-ci.yml', + message: 'Update .gitlab-ci.yml', + author_name: 'Administrator', + author_email: 'admin@example.com', + authored_date: '2020-03-16T11:04:46.000-04:00', + committer_name: 'Administrator', + committer_email: 'admin@example.com', + committed_date: '2020-03-16T11:04:46.000-04:00', + web_url: + 'http://192.168.1.22:3000/root/dag-pipeline/-/commit/66673b07efef254dab7d537f0433a40e61cf84fe', + }, + release: null, + protected: false, + }, + { + name: 'tag-1', + message: '', + target: '66673b07efef254dab7d537f0433a40e61cf84fe', + commit: { + id: '66673b07efef254dab7d537f0433a40e61cf84fe', + short_id: '66673b07', + created_at: '2020-03-16T11:04:46.000-04:00', + parent_ids: ['def28bf679235071140180495f25b657e2203587'], + title: 'Update .gitlab-ci.yml', + message: 'Update .gitlab-ci.yml', + author_name: 'Administrator', + author_email: 'admin@example.com', + authored_date: '2020-03-16T11:04:46.000-04:00', + committer_name: 'Administrator', + committer_email: 'admin@example.com', + committed_date: '2020-03-16T11:04:46.000-04:00', + web_url: + 'http://192.168.1.22:3000/root/dag-pipeline/-/commit/66673b07efef254dab7d537f0433a40e61cf84fe', + }, + release: null, + protected: false, + }, + { + name: 'master-tag', + message: '', + target: '66673b07efef254dab7d537f0433a40e61cf84fe', + commit: { + id: '66673b07efef254dab7d537f0433a40e61cf84fe', + short_id: '66673b07', + created_at: '2020-03-16T11:04:46.000-04:00', + parent_ids: ['def28bf679235071140180495f25b657e2203587'], + title: 'Update .gitlab-ci.yml', + message: 'Update .gitlab-ci.yml', + author_name: 'Administrator', + author_email: 'admin@example.com', + authored_date: '2020-03-16T11:04:46.000-04:00', + committer_name: 'Administrator', + committer_email: 'admin@example.com', + committed_date: '2020-03-16T11:04:46.000-04:00', + web_url: + 'http://192.168.1.22:3000/root/dag-pipeline/-/commit/66673b07efef254dab7d537f0433a40e61cf84fe', + }, + release: null, + protected: false, + }, +]; + export const mockSearch = [ { type: 'username', value: { data: 'root', operator: '=' } }, { type: 'ref', value: { data: 'master', operator: '=' } }, + { type: 'status', value: { data: 'pending', operator: '=' } }, ]; export const mockBranchesAfterMap = ['branch-1', 'branch-10', 'branch-11']; + +export const mockTagsAfterMap = ['tag-3', 'tag-2', 'tag-1', 'master-tag']; diff --git a/spec/frontend/pipelines/pipelines_spec.js b/spec/frontend/pipelines/pipelines_spec.js index 2ddd2116e2c..0eeaef01a2d 100644 --- a/spec/frontend/pipelines/pipelines_spec.js +++ b/spec/frontend/pipelines/pipelines_spec.js @@ -56,6 +56,7 @@ describe('Pipelines', () => { propsData: { store: new Store(), projectId: '21', + params: {}, ...props, }, methods: { @@ -683,7 +684,13 @@ describe('Pipelines', () => { }); it('updates request data and query params on filter submit', () => { - const expectedQueryParams = { page: '1', scope: 'all', username: 'root', ref: 'master' }; + const expectedQueryParams = { + page: '1', + scope: 'all', + username: 'root', + ref: 'master', + status: 'pending', + }; findFilteredSearch().vm.$emit('submit', mockSearch); diff --git a/spec/frontend/pipelines/tokens/pipeline_branch_name_token_spec.js b/spec/frontend/pipelines/tokens/pipeline_branch_name_token_spec.js index a6753600792..1a85221581e 100644 --- a/spec/frontend/pipelines/tokens/pipeline_branch_name_token_spec.js +++ b/spec/frontend/pipelines/tokens/pipeline_branch_name_token_spec.js @@ -1,7 +1,8 @@ +import Api from '~/api'; import { GlFilteredSearchToken, GlFilteredSearchSuggestion, GlLoadingIcon } from '@gitlab/ui'; import { shallowMount } from '@vue/test-utils'; import PipelineBranchNameToken from '~/pipelines/components/tokens/pipeline_branch_name_token.vue'; -import { branches } from '../mock_data'; +import { branches, mockBranchesAfterMap } from '../mock_data'; describe('Pipeline Branch Name Token', () => { let wrapper; @@ -21,10 +22,9 @@ describe('Pipeline Branch Name Token', () => { type: 'ref', icon: 'branch', title: 'Branch name', - dataType: 'ref', unique: true, - branches, projectId: '21', + disabled: false, }, value: { data: '', @@ -46,6 +46,8 @@ describe('Pipeline Branch Name Token', () => { }; beforeEach(() => { + jest.spyOn(Api, 'branches').mockResolvedValue({ data: branches }); + createComponent(); }); @@ -58,6 +60,13 @@ describe('Pipeline Branch Name Token', () => { expect(findFilteredSearchToken().props('config')).toEqual(defaultProps.config); }); + it('fetches and sets project branches', () => { + expect(Api.branches).toHaveBeenCalled(); + + expect(wrapper.vm.branches).toEqual(mockBranchesAfterMap); + expect(findLoadingIcon().exists()).toBe(false); + }); + describe('displays loading icon correctly', () => { it('shows loading icon', () => { createComponent({ stubs }, { loading: true }); @@ -73,7 +82,7 @@ describe('Pipeline Branch Name Token', () => { }); describe('shows branches correctly', () => { - it('renders all trigger authors', () => { + it('renders all branches', () => { createComponent({ stubs }, { branches, loading: false }); expect(findAllFilteredSearchSuggestions()).toHaveLength(branches.length); diff --git a/spec/frontend/pipelines/tokens/pipeline_status_token_spec.js b/spec/frontend/pipelines/tokens/pipeline_status_token_spec.js new file mode 100644 index 00000000000..ee3694868a5 --- /dev/null +++ b/spec/frontend/pipelines/tokens/pipeline_status_token_spec.js @@ -0,0 +1,62 @@ +import { GlFilteredSearchToken, GlFilteredSearchSuggestion, GlIcon } from '@gitlab/ui'; +import { shallowMount } from '@vue/test-utils'; +import PipelineStatusToken from '~/pipelines/components/tokens/pipeline_status_token.vue'; + +describe('Pipeline Status Token', () => { + let wrapper; + + const findFilteredSearchToken = () => wrapper.find(GlFilteredSearchToken); + const findAllFilteredSearchSuggestions = () => wrapper.findAll(GlFilteredSearchSuggestion); + const findAllGlIcons = () => wrapper.findAll(GlIcon); + + const stubs = { + GlFilteredSearchToken: { + template: `<div><slot name="suggestions"></slot></div>`, + }, + }; + + const defaultProps = { + config: { + type: 'status', + icon: 'status', + title: 'Status', + unique: true, + }, + value: { + data: '', + }, + }; + + const createComponent = options => { + wrapper = shallowMount(PipelineStatusToken, { + propsData: { + ...defaultProps, + }, + ...options, + }); + }; + + beforeEach(() => { + createComponent(); + }); + + afterEach(() => { + wrapper.destroy(); + wrapper = null; + }); + + it('passes config correctly', () => { + expect(findFilteredSearchToken().props('config')).toEqual(defaultProps.config); + }); + + describe('shows statuses correctly', () => { + beforeEach(() => { + createComponent({ stubs }); + }); + + it('renders all pipeline statuses available', () => { + expect(findAllFilteredSearchSuggestions()).toHaveLength(wrapper.vm.statuses.length); + expect(findAllGlIcons()).toHaveLength(wrapper.vm.statuses.length); + }); + }); +}); diff --git a/spec/frontend/pipelines/tokens/pipeline_tag_name_token_spec.js b/spec/frontend/pipelines/tokens/pipeline_tag_name_token_spec.js new file mode 100644 index 00000000000..9fecc9412b7 --- /dev/null +++ b/spec/frontend/pipelines/tokens/pipeline_tag_name_token_spec.js @@ -0,0 +1,98 @@ +import Api from '~/api'; +import { GlFilteredSearchToken, GlFilteredSearchSuggestion, GlLoadingIcon } from '@gitlab/ui'; +import { shallowMount } from '@vue/test-utils'; +import PipelineTagNameToken from '~/pipelines/components/tokens/pipeline_tag_name_token.vue'; +import { tags, mockTagsAfterMap } from '../mock_data'; + +describe('Pipeline Branch Name Token', () => { + let wrapper; + + const findFilteredSearchToken = () => wrapper.find(GlFilteredSearchToken); + const findAllFilteredSearchSuggestions = () => wrapper.findAll(GlFilteredSearchSuggestion); + const findLoadingIcon = () => wrapper.find(GlLoadingIcon); + + const stubs = { + GlFilteredSearchToken: { + template: `<div><slot name="suggestions"></slot></div>`, + }, + }; + + const defaultProps = { + config: { + type: 'tag', + icon: 'tag', + title: 'Tag name', + unique: true, + projectId: '21', + disabled: false, + }, + value: { + data: '', + }, + }; + + const createComponent = (options, data) => { + wrapper = shallowMount(PipelineTagNameToken, { + propsData: { + ...defaultProps, + }, + data() { + return { + ...data, + }; + }, + ...options, + }); + }; + + beforeEach(() => { + jest.spyOn(Api, 'tags').mockResolvedValue({ data: tags }); + + createComponent(); + }); + + afterEach(() => { + wrapper.destroy(); + wrapper = null; + }); + + it('passes config correctly', () => { + expect(findFilteredSearchToken().props('config')).toEqual(defaultProps.config); + }); + + it('fetches and sets project tags', () => { + expect(Api.tags).toHaveBeenCalled(); + + expect(wrapper.vm.tags).toEqual(mockTagsAfterMap); + expect(findLoadingIcon().exists()).toBe(false); + }); + + describe('displays loading icon correctly', () => { + it('shows loading icon', () => { + createComponent({ stubs }, { loading: true }); + + expect(findLoadingIcon().exists()).toBe(true); + }); + + it('does not show loading icon', () => { + createComponent({ stubs }, { loading: false }); + + expect(findLoadingIcon().exists()).toBe(false); + }); + }); + + describe('shows tags correctly', () => { + it('renders all tags', () => { + createComponent({ stubs }, { tags, loading: false }); + + expect(findAllFilteredSearchSuggestions()).toHaveLength(tags.length); + }); + + it('renders only the tag searched for', () => { + const mockTags = ['master-tag']; + createComponent({ stubs }, { tags: mockTags, loading: false }); + + expect(findAllFilteredSearchSuggestions()).toHaveLength(mockTags.length); + }); + }); +}); diff --git a/spec/frontend/pipelines/tokens/pipeline_trigger_author_token_spec.js b/spec/frontend/pipelines/tokens/pipeline_trigger_author_token_spec.js index 00a9ff04e75..98de4f40c51 100644 --- a/spec/frontend/pipelines/tokens/pipeline_trigger_author_token_spec.js +++ b/spec/frontend/pipelines/tokens/pipeline_trigger_author_token_spec.js @@ -1,3 +1,4 @@ +import Api from '~/api'; import { GlFilteredSearchToken, GlFilteredSearchSuggestion, GlLoadingIcon } from '@gitlab/ui'; import { shallowMount } from '@vue/test-utils'; import PipelineTriggerAuthorToken from '~/pipelines/components/tokens/pipeline_trigger_author_token.vue'; @@ -45,6 +46,8 @@ describe('Pipeline Trigger Author Token', () => { }; beforeEach(() => { + jest.spyOn(Api, 'projectUsers').mockResolvedValue(users); + createComponent(); }); @@ -57,6 +60,13 @@ describe('Pipeline Trigger Author Token', () => { expect(findFilteredSearchToken().props('config')).toEqual(defaultProps.config); }); + it('fetches and sets project users', () => { + expect(Api.projectUsers).toHaveBeenCalled(); + + expect(wrapper.vm.users).toEqual(users); + expect(findLoadingIcon().exists()).toBe(false); + }); + describe('displays loading icon correctly', () => { it('shows loading icon', () => { createComponent({ stubs }, { loading: true }); diff --git a/spec/frontend/projects/experiment_new_project_creation/components/app_spec.js b/spec/frontend/projects/experiment_new_project_creation/components/app_spec.js new file mode 100644 index 00000000000..a1e1e4554e2 --- /dev/null +++ b/spec/frontend/projects/experiment_new_project_creation/components/app_spec.js @@ -0,0 +1,70 @@ +import { shallowMount } from '@vue/test-utils'; +import { GlBreadcrumb } from '@gitlab/ui'; +import App from '~/projects/experiment_new_project_creation/components/app.vue'; +import WelcomePage from '~/projects/experiment_new_project_creation/components/welcome.vue'; +import LegacyContainer from '~/projects/experiment_new_project_creation/components/legacy_container.vue'; + +describe('Experimental new project creation app', () => { + let wrapper; + + const createComponent = propsData => { + wrapper = shallowMount(App, { propsData }); + }; + + afterEach(() => { + wrapper.destroy(); + window.location.hash = ''; + wrapper = null; + }); + + describe('with empty hash', () => { + beforeEach(() => { + createComponent(); + }); + + it('renders welcome page', () => { + expect(wrapper.find(WelcomePage).exists()).toBe(true); + }); + + it('does not render breadcrumbs', () => { + expect(wrapper.find(GlBreadcrumb).exists()).toBe(false); + }); + }); + + it('renders blank project container if there are errors', () => { + createComponent({ hasErrors: true }); + expect(wrapper.find(WelcomePage).exists()).toBe(false); + expect(wrapper.find(LegacyContainer).exists()).toBe(true); + }); + + describe('when hash is not empty on load', () => { + beforeEach(() => { + window.location.hash = '#blank_project'; + createComponent(); + }); + + it('renders relevant container', () => { + expect(wrapper.find(WelcomePage).exists()).toBe(false); + expect(wrapper.find(LegacyContainer).exists()).toBe(true); + }); + + it('renders breadcrumbs', () => { + expect(wrapper.find(GlBreadcrumb).exists()).toBe(true); + }); + }); + + it('renders relevant container when hash changes', () => { + createComponent(); + expect(wrapper.find(WelcomePage).exists()).toBe(true); + + window.location.hash = '#blank_project'; + const ev = document.createEvent('HTMLEvents'); + ev.initEvent('hashchange', false, false); + window.dispatchEvent(ev); + + return wrapper.vm.$nextTick().then(() => { + expect(wrapper.find(WelcomePage).exists()).toBe(false); + expect(wrapper.find(LegacyContainer).exists()).toBe(true); + }); + }); +}); diff --git a/spec/frontend/projects/experiment_new_project_creation/components/legacy_container_spec.js b/spec/frontend/projects/experiment_new_project_creation/components/legacy_container_spec.js new file mode 100644 index 00000000000..cd8b39f0426 --- /dev/null +++ b/spec/frontend/projects/experiment_new_project_creation/components/legacy_container_spec.js @@ -0,0 +1,63 @@ +import { shallowMount } from '@vue/test-utils'; +import LegacyContainer from '~/projects/experiment_new_project_creation/components/legacy_container.vue'; +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; + +describe('Legacy container component', () => { + let wrapper; + let dummy; + + const createComponent = propsData => { + wrapper = shallowMount(LegacyContainer, { propsData }); + }; + + afterEach(() => { + wrapper.destroy(); + resetHTMLFixture(); + wrapper = null; + }); + + describe('when selector targets real node', () => { + beforeEach(() => { + setHTMLFixture('<div class="dummy-target"></div>'); + dummy = document.querySelector('.dummy-target'); + createComponent({ selector: '.dummy-target' }); + }); + + describe('when mounted', () => { + it('moves node inside component', () => { + expect(dummy.parentNode).toBe(wrapper.element); + }); + + it('sets active class', () => { + expect(dummy.classList.contains('active')).toBe(true); + }); + }); + + describe('when unmounted', () => { + beforeEach(() => { + wrapper.destroy(); + }); + + it('moves node back', () => { + expect(dummy.parentNode).toBe(document.body); + }); + + it('removes active class', () => { + expect(dummy.classList.contains('active')).toBe(false); + }); + }); + }); + + describe('when selector targets template node', () => { + beforeEach(() => { + setHTMLFixture('<template class="dummy-target">content</template>'); + dummy = document.querySelector('.dummy-target'); + createComponent({ selector: '.dummy-target' }); + }); + + it('copies node content when mounted', () => { + expect(dummy.innerHTML).toEqual(wrapper.element.innerHTML); + expect(dummy.parentNode).toBe(document.body); + }); + }); +}); diff --git a/spec/frontend/projects/experiment_new_project_creation/components/welcome_spec.js b/spec/frontend/projects/experiment_new_project_creation/components/welcome_spec.js new file mode 100644 index 00000000000..acd142fa5ba --- /dev/null +++ b/spec/frontend/projects/experiment_new_project_creation/components/welcome_spec.js @@ -0,0 +1,31 @@ +import { shallowMount } from '@vue/test-utils'; +import WelcomePage from '~/projects/experiment_new_project_creation/components/welcome.vue'; +import { mockTracking } from 'helpers/tracking_helper'; + +describe('Welcome page', () => { + let wrapper; + let trackingSpy; + + const createComponent = propsData => { + wrapper = shallowMount(WelcomePage, { propsData }); + }; + + beforeEach(() => { + trackingSpy = mockTracking('_category_', document, jest.spyOn); + trackingSpy.mockImplementation(() => {}); + }); + + afterEach(() => { + wrapper.destroy(); + window.location.hash = ''; + wrapper = null; + }); + + it('tracks link clicks', () => { + createComponent({ panels: [{ name: 'test', href: '#' }] }); + wrapper.find('a').trigger('click'); + return wrapper.vm.$nextTick().then(() => { + expect(trackingSpy).toHaveBeenCalledWith(undefined, 'click_tab', { label: 'test' }); + }); + }); +}); diff --git a/spec/frontend/projects/pipelines/charts/components/__snapshots__/pipelines_area_chart_spec.js.snap b/spec/frontend/projects/pipelines/charts/components/__snapshots__/pipelines_area_chart_spec.js.snap index 3222b92d23f..f280ecaa0bc 100644 --- a/spec/frontend/projects/pipelines/charts/components/__snapshots__/pipelines_area_chart_spec.js.snap +++ b/spec/frontend/projects/pipelines/charts/components/__snapshots__/pipelines_area_chart_spec.js.snap @@ -14,7 +14,10 @@ exports[`PipelinesAreaChart matches the snapshot 1`] = ` data="[object Object],[object Object]" height="300" legendaveragetext="Avg" + legendcurrenttext="Current" + legendlayout="inline" legendmaxtext="Max" + legendmintext="Min" option="[object Object]" thresholds="" width="0" diff --git a/spec/frontend/read_more_spec.js b/spec/frontend/read_more_spec.js new file mode 100644 index 00000000000..d1d01272403 --- /dev/null +++ b/spec/frontend/read_more_spec.js @@ -0,0 +1,23 @@ +import initReadMore from '~/read_more'; + +describe('Read more click-to-expand functionality', () => { + const fixtureName = 'projects/overview.html'; + + preloadFixtures(fixtureName); + + beforeEach(() => { + loadFixtures(fixtureName); + }); + + describe('expands target element', () => { + it('adds "is-expanded" class to target element', () => { + const target = document.querySelector('.read-more-container'); + const trigger = document.querySelector('.js-read-more-trigger'); + initReadMore(); + + trigger.click(); + + expect(target.classList.contains('is-expanded')).toEqual(true); + }); + }); +}); diff --git a/spec/frontend/registry/explorer/components/details_page/__snapshots__/tags_loader_spec.js.snap b/spec/frontend/registry/explorer/components/details_page/__snapshots__/tags_loader_spec.js.snap new file mode 100644 index 00000000000..aeb49f88770 --- /dev/null +++ b/spec/frontend/registry/explorer/components/details_page/__snapshots__/tags_loader_spec.js.snap @@ -0,0 +1,63 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`TagsLoader component has the correct markup 1`] = ` +<div> + <div + preserve-aspect-ratio="xMinYMax meet" + > + <rect + height="15" + rx="4" + width="15" + x="0" + y="12.5" + /> + + <rect + height="20" + rx="4" + width="250" + x="25" + y="10" + /> + + <circle + cx="290" + cy="20" + r="10" + /> + + <rect + height="20" + rx="4" + width="100" + x="315" + y="10" + /> + + <rect + height="20" + rx="4" + width="100" + x="500" + y="10" + /> + + <rect + height="20" + rx="4" + width="100" + x="630" + y="10" + /> + + <rect + height="40" + rx="4" + width="40" + x="960" + y="0" + /> + </div> +</div> +`; diff --git a/spec/frontend/registry/explorer/components/details_page/delete_alert_spec.js b/spec/frontend/registry/explorer/components/details_page/delete_alert_spec.js new file mode 100644 index 00000000000..5d54986978b --- /dev/null +++ b/spec/frontend/registry/explorer/components/details_page/delete_alert_spec.js @@ -0,0 +1,116 @@ +import { shallowMount } from '@vue/test-utils'; +import { GlAlert, GlSprintf, GlLink } from '@gitlab/ui'; +import component from '~/registry/explorer/components/details_page/delete_alert.vue'; +import { + DELETE_TAG_SUCCESS_MESSAGE, + DELETE_TAG_ERROR_MESSAGE, + DELETE_TAGS_SUCCESS_MESSAGE, + DELETE_TAGS_ERROR_MESSAGE, + ADMIN_GARBAGE_COLLECTION_TIP, +} from '~/registry/explorer/constants'; + +describe('Delete alert', () => { + let wrapper; + + const findAlert = () => wrapper.find(GlAlert); + const findLink = () => wrapper.find(GlLink); + + const mountComponent = propsData => { + wrapper = shallowMount(component, { stubs: { GlSprintf }, propsData }); + }; + + afterEach(() => { + wrapper.destroy(); + wrapper = null; + }); + + describe('when deleteAlertType is null', () => { + it('does not show the alert', () => { + mountComponent(); + expect(findAlert().exists()).toBe(false); + }); + }); + + describe('when deleteAlertType is not null', () => { + describe('success states', () => { + describe.each` + deleteAlertType | message + ${'success_tag'} | ${DELETE_TAG_SUCCESS_MESSAGE} + ${'success_tags'} | ${DELETE_TAGS_SUCCESS_MESSAGE} + `('when deleteAlertType is $deleteAlertType', ({ deleteAlertType, message }) => { + it('alert exists', () => { + mountComponent({ deleteAlertType }); + expect(findAlert().exists()).toBe(true); + }); + + describe('when the user is an admin', () => { + beforeEach(() => { + mountComponent({ + deleteAlertType, + isAdmin: true, + garbageCollectionHelpPagePath: 'foo', + }); + }); + + it(`alert title is ${message}`, () => { + expect(findAlert().attributes('title')).toBe(message); + }); + + it('alert body contains admin tip', () => { + expect(findAlert().text()).toMatchInterpolatedText(ADMIN_GARBAGE_COLLECTION_TIP); + }); + + it('alert body contains link', () => { + const alertLink = findLink(); + expect(alertLink.exists()).toBe(true); + expect(alertLink.attributes('href')).toBe('foo'); + }); + }); + + describe('when the user is not an admin', () => { + it('alert exist and text is appropriate', () => { + mountComponent({ deleteAlertType }); + expect(findAlert().exists()).toBe(true); + expect(findAlert().text()).toBe(message); + }); + }); + }); + }); + describe('error states', () => { + describe.each` + deleteAlertType | message + ${'danger_tag'} | ${DELETE_TAG_ERROR_MESSAGE} + ${'danger_tags'} | ${DELETE_TAGS_ERROR_MESSAGE} + `('when deleteAlertType is $deleteAlertType', ({ deleteAlertType, message }) => { + it('alert exists', () => { + mountComponent({ deleteAlertType }); + expect(findAlert().exists()).toBe(true); + }); + + describe('when the user is an admin', () => { + it('alert exist and text is appropriate', () => { + mountComponent({ deleteAlertType }); + expect(findAlert().exists()).toBe(true); + expect(findAlert().text()).toBe(message); + }); + }); + + describe('when the user is not an admin', () => { + it('alert exist and text is appropriate', () => { + mountComponent({ deleteAlertType }); + expect(findAlert().exists()).toBe(true); + expect(findAlert().text()).toBe(message); + }); + }); + }); + }); + + describe('dismissing alert', () => { + it('GlAlert dismiss event triggers a change event', () => { + mountComponent({ deleteAlertType: 'success_tags' }); + findAlert().vm.$emit('dismiss'); + expect(wrapper.emitted('change')).toEqual([[null]]); + }); + }); + }); +}); diff --git a/spec/frontend/registry/explorer/components/details_page/delete_modal_spec.js b/spec/frontend/registry/explorer/components/details_page/delete_modal_spec.js new file mode 100644 index 00000000000..c77f7a54d34 --- /dev/null +++ b/spec/frontend/registry/explorer/components/details_page/delete_modal_spec.js @@ -0,0 +1,79 @@ +import { shallowMount } from '@vue/test-utils'; +import { GlSprintf } from '@gitlab/ui'; +import component from '~/registry/explorer/components/details_page/delete_modal.vue'; +import { + REMOVE_TAG_CONFIRMATION_TEXT, + REMOVE_TAGS_CONFIRMATION_TEXT, +} from '~/registry/explorer/constants'; +import { GlModal } from '../../stubs'; + +describe('Delete Modal', () => { + let wrapper; + + const findModal = () => wrapper.find(GlModal); + const findDescription = () => wrapper.find('[data-testid="description"]'); + + const mountComponent = propsData => { + wrapper = shallowMount(component, { + propsData, + stubs: { + GlSprintf, + GlModal, + }, + }); + }; + + afterEach(() => { + wrapper.destroy(); + wrapper = null; + }); + + it('contains a GlModal', () => { + mountComponent(); + expect(findModal().exists()).toBe(true); + }); + + describe('events', () => { + it.each` + glEvent | localEvent + ${'ok'} | ${'confirmDelete'} + ${'cancel'} | ${'cancelDelete'} + `('GlModal $glEvent emits $localEvent', ({ glEvent, localEvent }) => { + mountComponent(); + findModal().vm.$emit(glEvent); + expect(wrapper.emitted(localEvent)).toBeTruthy(); + }); + }); + + describe('methods', () => { + it('show calls gl-modal show', () => { + mountComponent(); + wrapper.vm.show(); + expect(GlModal.methods.show).toHaveBeenCalled(); + }); + }); + + describe('itemsToBeDeleted contains one element', () => { + beforeEach(() => { + mountComponent({ itemsToBeDeleted: [{ path: 'foo' }] }); + }); + it(`has the correct description`, () => { + expect(findDescription().text()).toBe(REMOVE_TAG_CONFIRMATION_TEXT.replace('%{item}', 'foo')); + }); + it('has the correct action', () => { + expect(wrapper.text()).toContain('Remove tag'); + }); + }); + + describe('itemsToBeDeleted contains more than element', () => { + beforeEach(() => { + mountComponent({ itemsToBeDeleted: [{ path: 'foo' }, { path: 'bar' }] }); + }); + it(`has the correct description`, () => { + expect(findDescription().text()).toBe(REMOVE_TAGS_CONFIRMATION_TEXT.replace('%{item}', '2')); + }); + it('has the correct action', () => { + expect(wrapper.text()).toContain('Remove tags'); + }); + }); +}); diff --git a/spec/frontend/registry/explorer/components/details_page/details_header_spec.js b/spec/frontend/registry/explorer/components/details_page/details_header_spec.js new file mode 100644 index 00000000000..cb31efa428f --- /dev/null +++ b/spec/frontend/registry/explorer/components/details_page/details_header_spec.js @@ -0,0 +1,32 @@ +import { shallowMount } from '@vue/test-utils'; +import { GlSprintf } from '@gitlab/ui'; +import component from '~/registry/explorer/components/details_page/details_header.vue'; +import { DETAILS_PAGE_TITLE } from '~/registry/explorer/constants'; + +describe('Details Header', () => { + let wrapper; + + const mountComponent = propsData => { + wrapper = shallowMount(component, { + propsData, + stubs: { + GlSprintf, + }, + }); + }; + + afterEach(() => { + wrapper.destroy(); + wrapper = null; + }); + + it('has the correct title ', () => { + mountComponent(); + expect(wrapper.text()).toMatchInterpolatedText(DETAILS_PAGE_TITLE); + }); + + it('shows imageName in the title', () => { + mountComponent({ imageName: 'foo' }); + expect(wrapper.text()).toContain('foo'); + }); +}); diff --git a/spec/frontend/registry/explorer/components/details_page/empty_tags_state.js b/spec/frontend/registry/explorer/components/details_page/empty_tags_state.js new file mode 100644 index 00000000000..da80c75a26a --- /dev/null +++ b/spec/frontend/registry/explorer/components/details_page/empty_tags_state.js @@ -0,0 +1,43 @@ +import { shallowMount } from '@vue/test-utils'; +import { GlEmptyState } from '@gitlab/ui'; +import component from '~/registry/explorer/components/details_page/empty_tags_state.vue'; +import { + EMPTY_IMAGE_REPOSITORY_TITLE, + EMPTY_IMAGE_REPOSITORY_MESSAGE, +} from '~/registry/explorer/constants'; + +describe('EmptyTagsState component', () => { + let wrapper; + + const findEmptyState = () => wrapper.find(GlEmptyState); + + const mountComponent = () => { + wrapper = shallowMount(component, { + stubs: { + GlEmptyState, + }, + propsData: { + noContainersImage: 'foo', + }, + }); + }; + + afterEach(() => { + wrapper.destroy(); + wrapper = null; + }); + + it('contains gl-empty-state', () => { + mountComponent(); + expect(findEmptyState().exist()).toBe(true); + }); + + it('has the correct props', () => { + mountComponent(); + expect(findEmptyState().props()).toMatchObject({ + title: EMPTY_IMAGE_REPOSITORY_TITLE, + description: EMPTY_IMAGE_REPOSITORY_MESSAGE, + svgPath: 'foo', + }); + }); +}); diff --git a/spec/frontend/registry/explorer/components/details_page/tags_loader_spec.js b/spec/frontend/registry/explorer/components/details_page/tags_loader_spec.js new file mode 100644 index 00000000000..b27d3e2c042 --- /dev/null +++ b/spec/frontend/registry/explorer/components/details_page/tags_loader_spec.js @@ -0,0 +1,49 @@ +import { shallowMount } from '@vue/test-utils'; +import component from '~/registry/explorer/components/details_page/tags_loader.vue'; +import { GlSkeletonLoader } from '../../stubs'; + +describe('TagsLoader component', () => { + let wrapper; + + const findGlSkeletonLoaders = () => wrapper.findAll(GlSkeletonLoader); + + const mountComponent = () => { + wrapper = shallowMount(component, { + stubs: { + GlSkeletonLoader, + }, + // set the repeat to 1 to avoid a long and verbose snapshot + loader: { + ...component.loader, + repeat: 1, + }, + }); + }; + + afterEach(() => { + wrapper.destroy(); + wrapper = null; + }); + + it('produces the correct amount of loaders ', () => { + mountComponent(); + expect(findGlSkeletonLoaders().length).toBe(1); + }); + + it('has the correct props', () => { + mountComponent(); + expect( + findGlSkeletonLoaders() + .at(0) + .props(), + ).toMatchObject({ + width: component.loader.width, + height: component.loader.height, + }); + }); + + it('has the correct markup', () => { + mountComponent(); + expect(wrapper.element).toMatchSnapshot(); + }); +}); diff --git a/spec/frontend/registry/explorer/components/details_page/tags_table_spec.js b/spec/frontend/registry/explorer/components/details_page/tags_table_spec.js new file mode 100644 index 00000000000..a60a362dcfe --- /dev/null +++ b/spec/frontend/registry/explorer/components/details_page/tags_table_spec.js @@ -0,0 +1,286 @@ +import { mount } from '@vue/test-utils'; +import stubChildren from 'helpers/stub_children'; +import component from '~/registry/explorer/components/details_page/tags_table.vue'; +import { tagsListResponse } from '../../mock_data'; + +describe('tags_table', () => { + let wrapper; + const tags = [...tagsListResponse.data]; + + const findMainCheckbox = () => wrapper.find('[data-testid="mainCheckbox"]'); + const findFirstRowItem = testid => wrapper.find(`[data-testid="${testid}"]`); + const findBulkDeleteButton = () => wrapper.find('[data-testid="bulkDeleteButton"]'); + const findAllDeleteButtons = () => wrapper.findAll('[data-testid="singleDeleteButton"]'); + const findAllCheckboxes = () => wrapper.findAll('[data-testid="rowCheckbox"]'); + const findCheckedCheckboxes = () => findAllCheckboxes().filter(c => c.attributes('checked')); + const findFirsTagColumn = () => wrapper.find('.js-tag-column'); + const findFirstTagNameText = () => wrapper.find('[data-testid="rowNameText"]'); + + const findLoaderSlot = () => wrapper.find('[data-testid="loaderSlot"]'); + const findEmptySlot = () => wrapper.find('[data-testid="emptySlot"]'); + + const mountComponent = (propsData = { tags, isDesktop: true }) => { + wrapper = mount(component, { + stubs: { + ...stubChildren(component), + GlTable: false, + }, + propsData, + slots: { + loader: '<div data-testid="loaderSlot"></div>', + empty: '<div data-testid="emptySlot"></div>', + }, + }); + }; + + afterEach(() => { + wrapper.destroy(); + wrapper = null; + }); + + it.each([ + 'rowCheckbox', + 'rowName', + 'rowShortRevision', + 'rowSize', + 'rowTime', + 'singleDeleteButton', + ])('%s exist in the table', element => { + mountComponent(); + + expect(findFirstRowItem(element).exists()).toBe(true); + }); + + describe('header checkbox', () => { + it('exists', () => { + mountComponent(); + expect(findMainCheckbox().exists()).toBe(true); + }); + + it('if selected selects all the rows', () => { + mountComponent(); + findMainCheckbox().vm.$emit('change'); + return wrapper.vm.$nextTick().then(() => { + expect(findMainCheckbox().attributes('checked')).toBeTruthy(); + expect(findCheckedCheckboxes()).toHaveLength(tags.length); + }); + }); + + it('if deselect deselects all the row', () => { + mountComponent(); + findMainCheckbox().vm.$emit('change'); + return wrapper.vm + .$nextTick() + .then(() => { + expect(findMainCheckbox().attributes('checked')).toBeTruthy(); + findMainCheckbox().vm.$emit('change'); + return wrapper.vm.$nextTick(); + }) + .then(() => { + expect(findMainCheckbox().attributes('checked')).toBe(undefined); + expect(findCheckedCheckboxes()).toHaveLength(0); + }); + }); + }); + + describe('row checkbox', () => { + beforeEach(() => { + mountComponent(); + }); + + it('selecting and deselecting the checkbox works as intended', () => { + findFirstRowItem('rowCheckbox').vm.$emit('change'); + return wrapper.vm + .$nextTick() + .then(() => { + expect(wrapper.vm.selectedItems).toEqual([tags[0].name]); + expect(findFirstRowItem('rowCheckbox').attributes('checked')).toBeTruthy(); + findFirstRowItem('rowCheckbox').vm.$emit('change'); + return wrapper.vm.$nextTick(); + }) + .then(() => { + expect(wrapper.vm.selectedItems.length).toBe(0); + expect(findFirstRowItem('rowCheckbox').attributes('checked')).toBe(undefined); + }); + }); + }); + + describe('header delete button', () => { + beforeEach(() => { + mountComponent(); + }); + + it('exists', () => { + expect(findBulkDeleteButton().exists()).toBe(true); + }); + + it('is disabled if no item is selected', () => { + expect(findBulkDeleteButton().attributes('disabled')).toBe('true'); + }); + + it('is enabled if at least one item is selected', () => { + expect(findBulkDeleteButton().attributes('disabled')).toBe('true'); + findFirstRowItem('rowCheckbox').vm.$emit('change'); + return wrapper.vm.$nextTick().then(() => { + expect(findBulkDeleteButton().attributes('disabled')).toBeFalsy(); + }); + }); + + describe('on click', () => { + it('when one item is selected', () => { + findFirstRowItem('rowCheckbox').vm.$emit('change'); + findBulkDeleteButton().vm.$emit('click'); + expect(wrapper.emitted('delete')).toEqual([[['centos6']]]); + }); + + it('when multiple items are selected', () => { + findMainCheckbox().vm.$emit('change'); + findBulkDeleteButton().vm.$emit('click'); + + expect(wrapper.emitted('delete')).toEqual([[tags.map(t => t.name)]]); + }); + }); + }); + + describe('row delete button', () => { + beforeEach(() => { + mountComponent(); + }); + + it('exists', () => { + expect( + findAllDeleteButtons() + .at(0) + .exists(), + ).toBe(true); + }); + + it('is disabled if the item has no destroy_path', () => { + expect( + findAllDeleteButtons() + .at(1) + .attributes('disabled'), + ).toBe('true'); + }); + + it('on click', () => { + findAllDeleteButtons() + .at(0) + .vm.$emit('click'); + + expect(wrapper.emitted('delete')).toEqual([[['centos6']]]); + }); + }); + + describe('name cell', () => { + it('tag column has a tooltip with the tag name', () => { + mountComponent(); + expect(findFirstTagNameText().attributes('title')).toBe(tagsListResponse.data[0].name); + }); + + describe('on desktop viewport', () => { + beforeEach(() => { + mountComponent(); + }); + + it('table header has class w-25', () => { + expect(findFirsTagColumn().classes()).toContain('w-25'); + }); + + it('tag column has the mw-m class', () => { + expect(findFirstRowItem('rowName').classes()).toContain('mw-m'); + }); + }); + + describe('on mobile viewport', () => { + beforeEach(() => { + mountComponent({ tags, isDesktop: false }); + }); + + it('table header does not have class w-25', () => { + expect(findFirsTagColumn().classes()).not.toContain('w-25'); + }); + + it('tag column has the gl-justify-content-end class', () => { + expect(findFirstRowItem('rowName').classes()).toContain('gl-justify-content-end'); + }); + }); + }); + + describe('last updated cell', () => { + let timeCell; + + beforeEach(() => { + mountComponent(); + timeCell = findFirstRowItem('rowTime'); + }); + + it('displays the time in string format', () => { + expect(timeCell.text()).toBe('2 years ago'); + }); + + it('has a tooltip timestamp', () => { + expect(timeCell.attributes('title')).toBe('Sep 19, 2017 1:45pm GMT+0000'); + }); + }); + + describe('empty state slot', () => { + describe('when the table is empty', () => { + beforeEach(() => { + mountComponent({ tags: [], isDesktop: true }); + }); + + it('does not show table rows', () => { + expect(findFirstTagNameText().exists()).toBe(false); + }); + + it('has the empty state slot', () => { + expect(findEmptySlot().exists()).toBe(true); + }); + }); + + describe('when the table is not empty', () => { + beforeEach(() => { + mountComponent({ tags, isDesktop: true }); + }); + + it('does show table rows', () => { + expect(findFirstTagNameText().exists()).toBe(true); + }); + + it('does not show the empty state', () => { + expect(findEmptySlot().exists()).toBe(false); + }); + }); + }); + + describe('loader slot', () => { + describe('when the data is loading', () => { + beforeEach(() => { + mountComponent({ isLoading: true, tags }); + }); + + it('show the loader', () => { + expect(findLoaderSlot().exists()).toBe(true); + }); + + it('does not show the table rows', () => { + expect(findFirstTagNameText().exists()).toBe(false); + }); + }); + + describe('when the data is not loading', () => { + beforeEach(() => { + mountComponent({ isLoading: false, tags }); + }); + + it('does not show the loader', () => { + expect(findLoaderSlot().exists()).toBe(false); + }); + + it('shows the table rows', () => { + expect(findFirstTagNameText().exists()).toBe(true); + }); + }); + }); +}); diff --git a/spec/frontend/registry/explorer/components/image_list_spec.js b/spec/frontend/registry/explorer/components/image_list_spec.js deleted file mode 100644 index 12f0fbe0c87..00000000000 --- a/spec/frontend/registry/explorer/components/image_list_spec.js +++ /dev/null @@ -1,74 +0,0 @@ -import { shallowMount } from '@vue/test-utils'; -import { GlPagination } from '@gitlab/ui'; -import Component from '~/registry/explorer/components/image_list.vue'; -import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; -import { RouterLink } from '../stubs'; -import { imagesListResponse, imagePagination } from '../mock_data'; - -describe('Image List', () => { - let wrapper; - - const firstElement = imagesListResponse.data[0]; - - const findDeleteBtn = () => wrapper.find('[data-testid="deleteImageButton"]'); - const findRowItems = () => wrapper.findAll('[data-testid="rowItem"]'); - const findDetailsLink = () => wrapper.find('[data-testid="detailsLink"]'); - const findClipboardButton = () => wrapper.find(ClipboardButton); - const findPagination = () => wrapper.find(GlPagination); - - const mountComponent = () => { - wrapper = shallowMount(Component, { - stubs: { - RouterLink, - }, - propsData: { - images: imagesListResponse.data, - pagination: imagePagination, - }, - }); - }; - - beforeEach(() => { - mountComponent(); - }); - - it('contains one list element for each image', () => { - expect(findRowItems().length).toBe(imagesListResponse.data.length); - }); - - it('contains a link to the details page', () => { - const link = findDetailsLink(); - expect(link.html()).toContain(firstElement.path); - expect(link.props('to').name).toBe('details'); - }); - - it('contains a clipboard button', () => { - const button = findClipboardButton(); - expect(button.exists()).toBe(true); - expect(button.props('text')).toBe(firstElement.location); - expect(button.props('title')).toBe(firstElement.location); - }); - - it('should be possible to delete a repo', () => { - const deleteBtn = findDeleteBtn(); - expect(deleteBtn.exists()).toBe(true); - }); - - describe('pagination', () => { - it('exists', () => { - expect(findPagination().exists()).toBe(true); - }); - - it('is wired to the correct pagination props', () => { - const pagination = findPagination(); - expect(pagination.props('perPage')).toBe(imagePagination.perPage); - expect(pagination.props('totalItems')).toBe(imagePagination.total); - expect(pagination.props('value')).toBe(imagePagination.page); - }); - - it('emits a pageChange event when the page change', () => { - wrapper.setData({ currentPage: 2 }); - expect(wrapper.emitted('pageChange')).toEqual([[2]]); - }); - }); -}); diff --git a/spec/frontend/registry/explorer/components/__snapshots__/group_empty_state_spec.js.snap b/spec/frontend/registry/explorer/components/list_page/__snapshots__/group_empty_state_spec.js.snap index 3761369c944..3761369c944 100644 --- a/spec/frontend/registry/explorer/components/__snapshots__/group_empty_state_spec.js.snap +++ b/spec/frontend/registry/explorer/components/list_page/__snapshots__/group_empty_state_spec.js.snap diff --git a/spec/frontend/registry/explorer/components/__snapshots__/project_empty_state_spec.js.snap b/spec/frontend/registry/explorer/components/list_page/__snapshots__/project_empty_state_spec.js.snap index 19767aefd1a..d8ec9c3ca4d 100644 --- a/spec/frontend/registry/explorer/components/__snapshots__/project_empty_state_spec.js.snap +++ b/spec/frontend/registry/explorer/components/list_page/__snapshots__/project_empty_state_spec.js.snap @@ -19,7 +19,7 @@ exports[`Registry Project Empty state to match the default snapshot 1`] = ` </p> <h5> - Quick Start + CLI Commands </h5> <p diff --git a/spec/frontend/registry/explorer/components/quickstart_dropdown_spec.js b/spec/frontend/registry/explorer/components/list_page/cli_commands_spec.js index 0c3baefbc58..a556be12089 100644 --- a/spec/frontend/registry/explorer/components/quickstart_dropdown_spec.js +++ b/spec/frontend/registry/explorer/components/list_page/cli_commands_spec.js @@ -3,7 +3,7 @@ import { mount, createLocalVue } from '@vue/test-utils'; import { GlDropdown, GlFormGroup, GlFormInputGroup } from '@gitlab/ui'; import Tracking from '~/tracking'; import * as getters from '~/registry/explorer/stores/getters'; -import QuickstartDropdown from '~/registry/explorer/components/quickstart_dropdown.vue'; +import QuickstartDropdown from '~/registry/explorer/components/list_page/cli_commands.vue'; import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; import { @@ -19,7 +19,7 @@ import { const localVue = createLocalVue(); localVue.use(Vuex); -describe('quickstart_dropdown', () => { +describe('cli_commands', () => { let wrapper; let store; diff --git a/spec/frontend/registry/explorer/components/group_empty_state_spec.js b/spec/frontend/registry/explorer/components/list_page/group_empty_state_spec.js index 1b4de534317..2f51e875672 100644 --- a/spec/frontend/registry/explorer/components/group_empty_state_spec.js +++ b/spec/frontend/registry/explorer/components/list_page/group_empty_state_spec.js @@ -1,8 +1,8 @@ import Vuex from 'vuex'; import { shallowMount, createLocalVue } from '@vue/test-utils'; import { GlSprintf } from '@gitlab/ui'; -import { GlEmptyState } from '../stubs'; -import groupEmptyState from '~/registry/explorer/components/group_empty_state.vue'; +import { GlEmptyState } from '../../stubs'; +import groupEmptyState from '~/registry/explorer/components/list_page/group_empty_state.vue'; const localVue = createLocalVue(); localVue.use(Vuex); diff --git a/spec/frontend/registry/explorer/components/list_page/image_list_row_spec.js b/spec/frontend/registry/explorer/components/list_page/image_list_row_spec.js new file mode 100644 index 00000000000..78de35ae1dc --- /dev/null +++ b/spec/frontend/registry/explorer/components/list_page/image_list_row_spec.js @@ -0,0 +1,140 @@ +import { shallowMount } from '@vue/test-utils'; +import { GlIcon, GlSprintf } from '@gitlab/ui'; +import { createMockDirective, getBinding } from 'helpers/vue_mock_directive'; +import Component from '~/registry/explorer/components/list_page/image_list_row.vue'; +import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; +import { + ROW_SCHEDULED_FOR_DELETION, + LIST_DELETE_BUTTON_DISABLED, +} from '~/registry/explorer/constants'; +import { RouterLink } from '../../stubs'; +import { imagesListResponse } from '../../mock_data'; + +describe('Image List Row', () => { + let wrapper; + const item = imagesListResponse.data[0]; + const findDeleteBtn = () => wrapper.find('[data-testid="deleteImageButton"]'); + const findDetailsLink = () => wrapper.find('[data-testid="detailsLink"]'); + const findTagsCount = () => wrapper.find('[data-testid="tagsCount"]'); + const findDeleteButtonWrapper = () => wrapper.find('[data-testid="deleteButtonWrapper"]'); + const findClipboardButton = () => wrapper.find(ClipboardButton); + + const mountComponent = props => { + wrapper = shallowMount(Component, { + stubs: { + RouterLink, + GlSprintf, + }, + propsData: { + item, + ...props, + }, + directives: { + GlTooltip: createMockDirective(), + }, + }); + }; + + afterEach(() => { + wrapper.destroy(); + wrapper = null; + }); + + describe('main tooltip', () => { + it(`the title is ${ROW_SCHEDULED_FOR_DELETION}`, () => { + mountComponent(); + const tooltip = getBinding(wrapper.element, 'gl-tooltip'); + expect(tooltip).toBeDefined(); + expect(tooltip.value.title).toBe(ROW_SCHEDULED_FOR_DELETION); + }); + + it('is disabled when item is being deleted', () => { + mountComponent({ item: { ...item, deleting: true } }); + const tooltip = getBinding(wrapper.element, 'gl-tooltip'); + expect(tooltip.value.disabled).toBe(false); + }); + }); + + describe('image title and path', () => { + it('contains a link to the details page', () => { + mountComponent(); + const link = findDetailsLink(); + expect(link.html()).toContain(item.path); + expect(link.props('to').name).toBe('details'); + }); + + it('contains a clipboard button', () => { + mountComponent(); + const button = findClipboardButton(); + expect(button.exists()).toBe(true); + expect(button.props('text')).toBe(item.location); + expect(button.props('title')).toBe(item.location); + }); + }); + + describe('delete button wrapper', () => { + it('has a tooltip', () => { + mountComponent(); + const tooltip = getBinding(findDeleteButtonWrapper().element, 'gl-tooltip'); + expect(tooltip).toBeDefined(); + expect(tooltip.value.title).toBe(LIST_DELETE_BUTTON_DISABLED); + }); + it('tooltip is enabled when destroy_path is falsy', () => { + mountComponent({ item: { ...item, destroy_path: null } }); + const tooltip = getBinding(findDeleteButtonWrapper().element, 'gl-tooltip'); + expect(tooltip.value.disabled).toBeFalsy(); + }); + }); + + describe('delete button', () => { + it('exists', () => { + mountComponent(); + expect(findDeleteBtn().exists()).toBe(true); + }); + + it('emits a delete event', () => { + mountComponent(); + findDeleteBtn().vm.$emit('click'); + expect(wrapper.emitted('delete')).toEqual([[item]]); + }); + + it.each` + destroy_path | deleting | state + ${null} | ${null} | ${'true'} + ${null} | ${true} | ${'true'} + ${'foo'} | ${true} | ${'true'} + ${'foo'} | ${false} | ${undefined} + `( + 'disabled is $state when destroy_path is $destroy_path and deleting is $deleting', + ({ destroy_path, deleting, state }) => { + mountComponent({ item: { ...item, destroy_path, deleting } }); + expect(findDeleteBtn().attributes('disabled')).toBe(state); + }, + ); + }); + + describe('tags count', () => { + it('exists', () => { + mountComponent(); + expect(findTagsCount().exists()).toBe(true); + }); + + it('contains a tag icon', () => { + mountComponent(); + const icon = findTagsCount().find(GlIcon); + expect(icon.exists()).toBe(true); + expect(icon.props('name')).toBe('tag'); + }); + + describe('tags count text', () => { + it('with one tag in the image', () => { + mountComponent({ item: { ...item, tags_count: 1 } }); + expect(findTagsCount().text()).toMatchInterpolatedText('1 Tag'); + }); + it('with more than one tag in the image', () => { + mountComponent({ item: { ...item, tags_count: 3 } }); + expect(findTagsCount().text()).toMatchInterpolatedText('3 Tags'); + }); + }); + }); +}); diff --git a/spec/frontend/registry/explorer/components/list_page/image_list_spec.js b/spec/frontend/registry/explorer/components/list_page/image_list_spec.js new file mode 100644 index 00000000000..03ba6ad7f80 --- /dev/null +++ b/spec/frontend/registry/explorer/components/list_page/image_list_spec.js @@ -0,0 +1,62 @@ +import { shallowMount } from '@vue/test-utils'; +import { GlPagination } from '@gitlab/ui'; +import Component from '~/registry/explorer/components/list_page/image_list.vue'; +import ImageListRow from '~/registry/explorer/components/list_page/image_list_row.vue'; + +import { imagesListResponse, imagePagination } from '../../mock_data'; + +describe('Image List', () => { + let wrapper; + + const findRow = () => wrapper.findAll(ImageListRow); + const findPagination = () => wrapper.find(GlPagination); + + const mountComponent = () => { + wrapper = shallowMount(Component, { + propsData: { + images: imagesListResponse.data, + pagination: imagePagination, + }, + }); + }; + + beforeEach(() => { + mountComponent(); + }); + + afterEach(() => { + wrapper.destroy(); + wrapper = null; + }); + + describe('list', () => { + it('contains one list element for each image', () => { + expect(findRow().length).toBe(imagesListResponse.data.length); + }); + + it('when delete event is emitted on the row it emits up a delete event', () => { + findRow() + .at(0) + .vm.$emit('delete', 'foo'); + expect(wrapper.emitted('delete')).toEqual([['foo']]); + }); + }); + + describe('pagination', () => { + it('exists', () => { + expect(findPagination().exists()).toBe(true); + }); + + it('is wired to the correct pagination props', () => { + const pagination = findPagination(); + expect(pagination.props('perPage')).toBe(imagePagination.perPage); + expect(pagination.props('totalItems')).toBe(imagePagination.total); + expect(pagination.props('value')).toBe(imagePagination.page); + }); + + it('emits a pageChange event when the page change', () => { + findPagination().vm.$emit(GlPagination.model.event, 2); + expect(wrapper.emitted('pageChange')).toEqual([[2]]); + }); + }); +}); diff --git a/spec/frontend/registry/explorer/components/project_empty_state_spec.js b/spec/frontend/registry/explorer/components/list_page/project_empty_state_spec.js index 4b209646da9..73746c545cb 100644 --- a/spec/frontend/registry/explorer/components/project_empty_state_spec.js +++ b/spec/frontend/registry/explorer/components/list_page/project_empty_state_spec.js @@ -1,8 +1,8 @@ import Vuex from 'vuex'; import { shallowMount, createLocalVue } from '@vue/test-utils'; import { GlSprintf } from '@gitlab/ui'; -import { GlEmptyState } from '../stubs'; -import projectEmptyState from '~/registry/explorer/components/project_empty_state.vue'; +import { GlEmptyState } from '../../stubs'; +import projectEmptyState from '~/registry/explorer/components/list_page/project_empty_state.vue'; import * as getters from '~/registry/explorer/stores/getters'; const localVue = createLocalVue(); diff --git a/spec/frontend/registry/explorer/components/list_page/registry_header_spec.js b/spec/frontend/registry/explorer/components/list_page/registry_header_spec.js new file mode 100644 index 00000000000..7484fccbea7 --- /dev/null +++ b/spec/frontend/registry/explorer/components/list_page/registry_header_spec.js @@ -0,0 +1,221 @@ +import { shallowMount } from '@vue/test-utils'; +import { GlSprintf, GlLink } from '@gitlab/ui'; +import Component from '~/registry/explorer/components/list_page/registry_header.vue'; +import { + CONTAINER_REGISTRY_TITLE, + LIST_INTRO_TEXT, + EXPIRATION_POLICY_DISABLED_MESSAGE, + EXPIRATION_POLICY_DISABLED_TEXT, + EXPIRATION_POLICY_WILL_RUN_IN, +} from '~/registry/explorer/constants'; + +jest.mock('~/lib/utils/datetime_utility', () => ({ + approximateDuration: jest.fn(), + calculateRemainingMilliseconds: jest.fn(), +})); + +describe('registry_header', () => { + let wrapper; + + const findHeader = () => wrapper.find('[data-testid="header"]'); + const findTitle = () => wrapper.find('[data-testid="title"]'); + const findCommandsSlot = () => wrapper.find('[data-testid="commands-slot"]'); + const findInfoArea = () => wrapper.find('[data-testid="info-area"]'); + const findIntroText = () => wrapper.find('[data-testid="default-intro"]'); + const findSubHeader = () => wrapper.find('[data-testid="subheader"]'); + const findImagesCountSubHeader = () => wrapper.find('[data-testid="images-count"]'); + const findExpirationPolicySubHeader = () => wrapper.find('[data-testid="expiration-policy"]'); + const findDisabledExpirationPolicyMessage = () => + wrapper.find('[data-testid="expiration-disabled-message"]'); + + const mountComponent = (propsData, slots) => { + wrapper = shallowMount(Component, { + stubs: { + GlSprintf, + }, + propsData, + slots, + }); + }; + + afterEach(() => { + wrapper.destroy(); + wrapper = null; + }); + + describe('header', () => { + it('exists', () => { + mountComponent(); + expect(findHeader().exists()).toBe(true); + }); + + it('contains the title of the page', () => { + mountComponent(); + const title = findTitle(); + expect(title.exists()).toBe(true); + expect(title.text()).toBe(CONTAINER_REGISTRY_TITLE); + }); + + it('has a commands slot', () => { + mountComponent(null, { commands: 'baz' }); + expect(findCommandsSlot().text()).toBe('baz'); + }); + }); + + describe('subheader', () => { + describe('when there are no images', () => { + it('is hidden ', () => { + mountComponent(); + expect(findSubHeader().exists()).toBe(false); + }); + }); + + describe('when there are images', () => { + it('is visible', () => { + mountComponent({ imagesCount: 1 }); + expect(findSubHeader().exists()).toBe(true); + }); + + describe('sub header parts', () => { + describe('images count', () => { + it('exists', () => { + mountComponent({ imagesCount: 1 }); + expect(findImagesCountSubHeader().exists()).toBe(true); + }); + + it('when there is one image', () => { + mountComponent({ imagesCount: 1 }); + expect(findImagesCountSubHeader().text()).toMatchInterpolatedText('1 Image repository'); + }); + + it('when there is more than one image', () => { + mountComponent({ imagesCount: 3 }); + expect(findImagesCountSubHeader().text()).toMatchInterpolatedText( + '3 Image repositories', + ); + }); + }); + + describe('expiration policy', () => { + it('when is disabled', () => { + mountComponent({ + expirationPolicy: { enabled: false }, + expirationPolicyHelpPagePath: 'foo', + imagesCount: 1, + }); + const text = findExpirationPolicySubHeader(); + expect(text.exists()).toBe(true); + expect(text.text()).toMatchInterpolatedText(EXPIRATION_POLICY_DISABLED_TEXT); + }); + + it('when is enabled', () => { + mountComponent({ + expirationPolicy: { enabled: true }, + expirationPolicyHelpPagePath: 'foo', + imagesCount: 1, + }); + const text = findExpirationPolicySubHeader(); + expect(text.exists()).toBe(true); + expect(text.text()).toMatchInterpolatedText(EXPIRATION_POLICY_WILL_RUN_IN); + }); + it('when the expiration policy is completely disabled', () => { + mountComponent({ + expirationPolicy: { enabled: true }, + expirationPolicyHelpPagePath: 'foo', + imagesCount: 1, + hideExpirationPolicyData: true, + }); + const text = findExpirationPolicySubHeader(); + expect(text.exists()).toBe(false); + }); + }); + }); + }); + }); + + describe('info area', () => { + it('exists', () => { + mountComponent(); + expect(findInfoArea().exists()).toBe(true); + }); + + describe('default message', () => { + beforeEach(() => { + mountComponent({ helpPagePath: 'bar' }); + }); + + it('exists', () => { + expect(findIntroText().exists()).toBe(true); + }); + + it('has the correct copy', () => { + expect(findIntroText().text()).toMatchInterpolatedText(LIST_INTRO_TEXT); + }); + + it('has the correct link', () => { + expect( + findIntroText() + .find(GlLink) + .attributes('href'), + ).toBe('bar'); + }); + }); + + describe('expiration policy info message', () => { + describe('when there are no images', () => { + it('is hidden', () => { + mountComponent(); + expect(findDisabledExpirationPolicyMessage().exists()).toBe(false); + }); + }); + + describe('when there are images', () => { + describe('when expiration policy is disabled', () => { + beforeEach(() => { + mountComponent({ + expirationPolicy: { enabled: false }, + expirationPolicyHelpPagePath: 'foo', + imagesCount: 1, + }); + }); + it('message exist', () => { + expect(findDisabledExpirationPolicyMessage().exists()).toBe(true); + }); + it('has the correct copy', () => { + expect(findDisabledExpirationPolicyMessage().text()).toMatchInterpolatedText( + EXPIRATION_POLICY_DISABLED_MESSAGE, + ); + }); + + it('has the correct link', () => { + expect( + findDisabledExpirationPolicyMessage() + .find(GlLink) + .attributes('href'), + ).toBe('foo'); + }); + }); + + describe('when expiration policy is enabled', () => { + it('message does not exist', () => { + mountComponent({ + expirationPolicy: { enabled: true }, + imagesCount: 1, + }); + expect(findDisabledExpirationPolicyMessage().exists()).toBe(false); + }); + }); + describe('when the expiration policy is completely disabled', () => { + it('message does not exist', () => { + mountComponent({ + expirationPolicy: { enabled: true }, + imagesCount: 1, + hideExpirationPolicyData: true, + }); + expect(findDisabledExpirationPolicyMessage().exists()).toBe(false); + }); + }); + }); + }); + }); +}); diff --git a/spec/frontend/registry/explorer/components/project_policy_alert_spec.js b/spec/frontend/registry/explorer/components/project_policy_alert_spec.js deleted file mode 100644 index 89c37e55398..00000000000 --- a/spec/frontend/registry/explorer/components/project_policy_alert_spec.js +++ /dev/null @@ -1,132 +0,0 @@ -import Vuex from 'vuex'; -import { shallowMount, createLocalVue } from '@vue/test-utils'; -import { GlSprintf, GlAlert, GlLink } from '@gitlab/ui'; -import * as dateTimeUtils from '~/lib/utils/datetime_utility'; -import component from '~/registry/explorer/components/project_policy_alert.vue'; -import { - EXPIRATION_POLICY_ALERT_TITLE, - EXPIRATION_POLICY_ALERT_PRIMARY_BUTTON, -} from '~/registry/explorer/constants'; - -const localVue = createLocalVue(); -localVue.use(Vuex); - -describe('Project Policy Alert', () => { - let wrapper; - let store; - - const defaultState = { - config: { - expirationPolicy: { - enabled: true, - }, - settingsPath: 'foo', - expirationPolicyHelpPagePath: 'bar', - }, - images: [], - isLoading: false, - }; - - const findAlert = () => wrapper.find(GlAlert); - const findLink = () => wrapper.find(GlLink); - - const createComponent = (state = defaultState) => { - store = new Vuex.Store({ - state, - }); - wrapper = shallowMount(component, { - localVue, - store, - stubs: { - GlSprintf, - }, - }); - }; - - const documentationExpectation = () => { - it('contain a documentation link', () => { - createComponent(); - expect(findLink().attributes('href')).toBe(defaultState.config.expirationPolicyHelpPagePath); - expect(findLink().text()).toBe('documentation'); - }); - }; - - beforeEach(() => { - jest.spyOn(dateTimeUtils, 'approximateDuration').mockReturnValue('1 day'); - }); - - afterEach(() => { - wrapper.destroy(); - }); - - describe('is hidden', () => { - it('when expiration policy does not exist', () => { - createComponent({ config: {} }); - expect(findAlert().exists()).toBe(false); - }); - - it('when expiration policy exist but is disabled', () => { - createComponent({ - ...defaultState, - config: { - expirationPolicy: { - enabled: false, - }, - }, - }); - expect(findAlert().exists()).toBe(false); - }); - }); - - describe('is visible', () => { - it('when expiration policy exists and is enabled', () => { - createComponent(); - expect(findAlert().exists()).toBe(true); - }); - }); - - describe('full info alert', () => { - beforeEach(() => { - createComponent({ ...defaultState, images: [1] }); - }); - - it('has a primary button', () => { - const alert = findAlert(); - expect(alert.props('primaryButtonText')).toBe(EXPIRATION_POLICY_ALERT_PRIMARY_BUTTON); - expect(alert.props('primaryButtonLink')).toBe(defaultState.config.settingsPath); - }); - - it('has a title', () => { - const alert = findAlert(); - expect(alert.props('title')).toBe(EXPIRATION_POLICY_ALERT_TITLE); - }); - - it('has the full message', () => { - expect(findAlert().html()).toContain('<strong>1 day</strong>'); - }); - - documentationExpectation(); - }); - - describe('compact info alert', () => { - beforeEach(() => { - createComponent({ ...defaultState, images: [] }); - }); - - it('does not have a button', () => { - const alert = findAlert(); - expect(alert.props('primaryButtonText')).toBe(null); - }); - - it('does not have a title', () => { - const alert = findAlert(); - expect(alert.props('title')).toBe(null); - }); - - it('has the short message', () => { - expect(findAlert().html()).not.toContain('<strong>1 day</strong>'); - }); - - documentationExpectation(); - }); -}); diff --git a/spec/frontend/registry/explorer/mock_data.js b/spec/frontend/registry/explorer/mock_data.js index f6beccda9b1..e2b33826503 100644 --- a/spec/frontend/registry/explorer/mock_data.js +++ b/spec/frontend/registry/explorer/mock_data.js @@ -64,7 +64,7 @@ export const imagesListResponse = { export const tagsListResponse = { data: [ { - tag: 'centos6', + name: 'centos6', revision: 'b118ab5b0e90b7cb5127db31d5321ac14961d097516a8e0e72084b6cdc783b43', short_revision: 'b118ab5b0', size: 19, @@ -75,7 +75,7 @@ export const tagsListResponse = { destroy_path: 'path', }, { - tag: 'test-image', + name: 'test-tag', revision: 'b969de599faea2b3d9b6605a8b0897261c571acaa36db1bdc7349b5775b4e0b4', short_revision: 'b969de599', size: 19, diff --git a/spec/frontend/registry/explorer/pages/details_spec.js b/spec/frontend/registry/explorer/pages/details_spec.js index 93098403a28..b7e01cad9bc 100644 --- a/spec/frontend/registry/explorer/pages/details_spec.js +++ b/spec/frontend/registry/explorer/pages/details_spec.js @@ -1,55 +1,43 @@ -import { mount } from '@vue/test-utils'; -import { GlTable, GlPagination, GlSkeletonLoader, GlAlert, GlLink } from '@gitlab/ui'; +import { shallowMount } from '@vue/test-utils'; +import { GlPagination } from '@gitlab/ui'; import Tracking from '~/tracking'; -import stubChildren from 'helpers/stub_children'; import component from '~/registry/explorer/pages/details.vue'; +import DeleteAlert from '~/registry/explorer/components/details_page/delete_alert.vue'; +import DetailsHeader from '~/registry/explorer/components/details_page/details_header.vue'; +import TagsLoader from '~/registry/explorer/components/details_page/tags_loader.vue'; +import EmptyTagsState from '~/registry/explorer/components/details_page/empty_tags_state.vue'; import { createStore } from '~/registry/explorer/stores/'; import { SET_MAIN_LOADING, - SET_INITIAL_STATE, SET_TAGS_LIST_SUCCESS, SET_TAGS_PAGINATION, + SET_INITIAL_STATE, } from '~/registry/explorer/stores/mutation_types/'; -import { - DELETE_TAG_SUCCESS_MESSAGE, - DELETE_TAG_ERROR_MESSAGE, - DELETE_TAGS_SUCCESS_MESSAGE, - DELETE_TAGS_ERROR_MESSAGE, - ADMIN_GARBAGE_COLLECTION_TIP, -} from '~/registry/explorer/constants'; + import { tagsListResponse } from '../mock_data'; -import { GlModal } from '../stubs'; -import { $toast } from '../../shared/mocks'; +import { TagsTable, DeleteModal } from '../stubs'; describe('Details Page', () => { let wrapper; let dispatchSpy; let store; - const findDeleteModal = () => wrapper.find(GlModal); + const findDeleteModal = () => wrapper.find(DeleteModal); const findPagination = () => wrapper.find(GlPagination); - const findSkeletonLoader = () => wrapper.find(GlSkeletonLoader); - const findMainCheckbox = () => wrapper.find({ ref: 'mainCheckbox' }); - const findFirstRowItem = ref => wrapper.find({ ref }); - const findBulkDeleteButton = () => wrapper.find({ ref: 'bulkDeleteButton' }); - // findAll and refs seems to no work falling back to class - const findAllDeleteButtons = () => wrapper.findAll('.js-delete-registry'); - const findAllCheckboxes = () => wrapper.findAll('.js-row-checkbox'); - const findCheckedCheckboxes = () => findAllCheckboxes().filter(c => c.attributes('checked')); - const findFirsTagColumn = () => wrapper.find('.js-tag-column'); - const findFirstTagNameText = () => wrapper.find('[data-testid="rowNameText"]'); - const findAlert = () => wrapper.find(GlAlert); + const findTagsLoader = () => wrapper.find(TagsLoader); + const findTagsTable = () => wrapper.find(TagsTable); + const findDeleteAlert = () => wrapper.find(DeleteAlert); + const findDetailsHeader = () => wrapper.find(DetailsHeader); + const findEmptyTagsState = () => wrapper.find(EmptyTagsState); const routeId = window.btoa(JSON.stringify({ name: 'foo', tags_path: 'bar' })); const mountComponent = options => { - wrapper = mount(component, { + wrapper = shallowMount(component, { store, stubs: { - ...stubChildren(component), - GlModal, - GlSprintf: false, - GlTable, + TagsTable, + DeleteModal, }, mocks: { $route: { @@ -57,7 +45,6 @@ describe('Details Page', () => { id: routeId, }, }, - $toast, }, ...options, }); @@ -80,18 +67,14 @@ describe('Details Page', () => { describe('when isLoading is true', () => { beforeEach(() => { mountComponent(); - store.dispatch('receiveTagsListSuccess', { ...tagsListResponse, data: [] }); store.commit(SET_MAIN_LOADING, true); + return wrapper.vm.$nextTick(); }); - afterAll(() => store.commit(SET_MAIN_LOADING, false)); + afterEach(() => store.commit(SET_MAIN_LOADING, false)); - it('has a skeleton loader', () => { - expect(findSkeletonLoader().exists()).toBe(true); - }); - - it('does not have list items', () => { - expect(findFirstRowItem('rowCheckbox').exists()).toBe(false); + it('binds isLoading to tags-table', () => { + expect(findTagsTable().props('isLoading')).toBe(true); }); it('does not show pagination', () => { @@ -99,207 +82,76 @@ describe('Details Page', () => { }); }); - describe('table', () => { + describe('table slots', () => { beforeEach(() => { mountComponent(); }); - it.each([ - 'rowCheckbox', - 'rowName', - 'rowShortRevision', - 'rowSize', - 'rowTime', - 'singleDeleteButton', - ])('%s exist in the table', element => { - expect(findFirstRowItem(element).exists()).toBe(true); + it('has the empty state', () => { + expect(findEmptyTagsState().exists()).toBe(true); }); - describe('header checkbox', () => { - beforeEach(() => { - mountComponent(); - }); - - it('exists', () => { - expect(findMainCheckbox().exists()).toBe(true); - }); - - it('if selected set selectedItem and allSelected', () => { - findMainCheckbox().vm.$emit('change'); - return wrapper.vm.$nextTick().then(() => { - expect(findMainCheckbox().attributes('checked')).toBeTruthy(); - expect(findCheckedCheckboxes()).toHaveLength(store.state.tags.length); - }); - }); - - it('if deselect unset selectedItem and allSelected', () => { - wrapper.setData({ selectedItems: [1, 2], selectAllChecked: true }); - findMainCheckbox().vm.$emit('change'); - return wrapper.vm.$nextTick().then(() => { - expect(findMainCheckbox().attributes('checked')).toBe(undefined); - expect(findCheckedCheckboxes()).toHaveLength(0); - }); - }); + it('has a skeleton loader', () => { + expect(findTagsLoader().exists()).toBe(true); }); + }); - describe('row checkbox', () => { - it('if selected adds item to selectedItems', () => { - findFirstRowItem('rowCheckbox').vm.$emit('change'); - return wrapper.vm.$nextTick().then(() => { - expect(wrapper.vm.selectedItems).toEqual([1]); - expect(findFirstRowItem('rowCheckbox').attributes('checked')).toBeTruthy(); - }); - }); - - it('if deselect remove index from selectedItems', () => { - wrapper.setData({ selectedItems: [1] }); - findFirstRowItem('rowCheckbox').vm.$emit('change'); - return wrapper.vm.$nextTick().then(() => { - expect(wrapper.vm.selectedItems.length).toBe(0); - expect(findFirstRowItem('rowCheckbox').attributes('checked')).toBe(undefined); - }); - }); + describe('table', () => { + beforeEach(() => { + mountComponent(); }); - describe('header delete button', () => { - beforeEach(() => { - mountComponent(); - }); - - it('exists', () => { - expect(findBulkDeleteButton().exists()).toBe(true); - }); + it('exists', () => { + expect(findTagsTable().exists()).toBe(true); + }); - it('is disabled if no item is selected', () => { - expect(findBulkDeleteButton().attributes('disabled')).toBe('true'); + it('has the correct props bound', () => { + expect(findTagsTable().props()).toMatchObject({ + isDesktop: true, + isLoading: false, + tags: store.state.tags, }); + }); - it('is enabled if at least one item is selected', () => { - wrapper.setData({ selectedItems: [1] }); - return wrapper.vm.$nextTick().then(() => { - expect(findBulkDeleteButton().attributes('disabled')).toBeFalsy(); + describe('deleteEvent', () => { + describe('single item', () => { + beforeEach(() => { + findTagsTable().vm.$emit('delete', [store.state.tags[0].name]); }); - }); - describe('on click', () => { - it('when one item is selected', () => { - wrapper.setData({ selectedItems: [1] }); - findBulkDeleteButton().vm.$emit('click'); - return wrapper.vm.$nextTick().then(() => { - expect(findDeleteModal().html()).toContain( - 'You are about to remove <b>foo</b>. Are you sure?', - ); - expect(GlModal.methods.show).toHaveBeenCalled(); - expect(Tracking.event).toHaveBeenCalledWith(undefined, 'click_button', { - label: 'registry_tag_delete', - }); - }); + it('open the modal', () => { + expect(DeleteModal.methods.show).toHaveBeenCalled(); }); - it('when multiple items are selected', () => { - wrapper.setData({ selectedItems: [0, 1] }); - findBulkDeleteButton().vm.$emit('click'); - return wrapper.vm.$nextTick().then(() => { - expect(findDeleteModal().html()).toContain( - 'You are about to remove <b>2</b> tags. Are you sure?', - ); - expect(GlModal.methods.show).toHaveBeenCalled(); - expect(Tracking.event).toHaveBeenCalledWith(undefined, 'click_button', { - label: 'bulk_registry_tag_delete', - }); - }); + it('maps the selection to itemToBeDeleted', () => { + expect(wrapper.vm.itemsToBeDeleted).toEqual([store.state.tags[0]]); }); - }); - }); - describe('row delete button', () => { - beforeEach(() => { - mountComponent(); - }); - - it('exists', () => { - expect( - findAllDeleteButtons() - .at(0) - .exists(), - ).toBe(true); - }); - - it('is disabled if the item has no destroy_path', () => { - expect( - findAllDeleteButtons() - .at(1) - .attributes('disabled'), - ).toBe('true'); - }); - - it('on click', () => { - findAllDeleteButtons() - .at(0) - .vm.$emit('click'); - return wrapper.vm.$nextTick().then(() => { - expect(findDeleteModal().html()).toContain( - 'You are about to remove <b>bar</b>. Are you sure?', - ); - expect(GlModal.methods.show).toHaveBeenCalled(); + it('tracks a single delete event', () => { expect(Tracking.event).toHaveBeenCalledWith(undefined, 'click_button', { label: 'registry_tag_delete', }); }); }); - }); - - describe('name cell', () => { - it('tag column has a tooltip with the tag name', () => { - mountComponent(); - expect(findFirstTagNameText().attributes('title')).toBe(tagsListResponse.data[0].name); - }); - describe('on desktop viewport', () => { + describe('multiple items', () => { beforeEach(() => { - mountComponent(); + findTagsTable().vm.$emit('delete', store.state.tags.map(t => t.name)); }); - it('table header has class w-25', () => { - expect(findFirsTagColumn().classes()).toContain('w-25'); + it('open the modal', () => { + expect(DeleteModal.methods.show).toHaveBeenCalled(); }); - it('tag column has the mw-m class', () => { - expect(findFirstRowItem('rowName').classes()).toContain('mw-m'); + it('maps the selection to itemToBeDeleted', () => { + expect(wrapper.vm.itemsToBeDeleted).toEqual(store.state.tags); }); - }); - describe('on mobile viewport', () => { - beforeEach(() => { - mountComponent({ - data() { - return { isDesktop: false }; - }, + it('tracks a single delete event', () => { + expect(Tracking.event).toHaveBeenCalledWith(undefined, 'click_button', { + label: 'bulk_registry_tag_delete', }); }); - - it('table header does not have class w-25', () => { - expect(findFirsTagColumn().classes()).not.toContain('w-25'); - }); - - it('tag column has the gl-justify-content-end class', () => { - expect(findFirstRowItem('rowName').classes()).toContain('gl-justify-content-end'); - }); - }); - }); - - describe('last updated cell', () => { - let timeCell; - - beforeEach(() => { - timeCell = findFirstRowItem('rowTime'); - }); - - it('displays the time in string format', () => { - expect(timeCell.text()).toBe('2 years ago'); - }); - it('has a tooltip timestamp', () => { - expect(timeCell.attributes('title')).toBe('Sep 19, 2017 1:45pm GMT+0000'); }); }); }); @@ -322,7 +174,7 @@ describe('Details Page', () => { it('fetch the data from the API when the v-model changes', () => { dispatchSpy.mockResolvedValue(); - wrapper.setData({ currentPage: 2 }); + findPagination().vm.$emit(GlPagination.model.event, 2); expect(store.dispatch).toHaveBeenCalledWith('requestTagsList', { params: wrapper.vm.$route.params.id, pagination: { page: 2 }, @@ -331,176 +183,86 @@ describe('Details Page', () => { }); describe('modal', () => { - beforeEach(() => { - mountComponent(); - }); - it('exists', () => { + mountComponent(); expect(findDeleteModal().exists()).toBe(true); }); - describe('when ok event is emitted', () => { - beforeEach(() => { - dispatchSpy.mockResolvedValue(); - }); - - it('tracks confirm_delete', () => { - const deleteModal = findDeleteModal(); - deleteModal.vm.$emit('ok'); - return wrapper.vm.$nextTick().then(() => { - expect(Tracking.event).toHaveBeenCalledWith(undefined, 'confirm_delete', { - label: 'registry_tag_delete', - }); + describe('cancel event', () => { + it('tracks cancel_delete', () => { + mountComponent(); + findDeleteModal().vm.$emit('cancel'); + expect(Tracking.event).toHaveBeenCalledWith(undefined, 'cancel_delete', { + label: 'registry_tag_delete', }); }); + }); - describe('when only one element is selected', () => { - it('execute the delete and remove selection', () => { - wrapper.setData({ itemsToBeDeleted: [0] }); - findDeleteModal().vm.$emit('ok'); + describe('confirmDelete event', () => { + describe('when one item is selected to be deleted', () => { + beforeEach(() => { + mountComponent(); + findTagsTable().vm.$emit('delete', [store.state.tags[0].name]); + }); - expect(store.dispatch).toHaveBeenCalledWith('requestDeleteTag', { + it('dispatch requestDeleteTag with the right parameters', () => { + findDeleteModal().vm.$emit('confirmDelete'); + expect(dispatchSpy).toHaveBeenCalledWith('requestDeleteTag', { tag: store.state.tags[0], - params: wrapper.vm.$route.params.id, + params: routeId, }); - // itemsToBeDeleted is not represented in the DOM, is used as parking variable between selected and deleted items - expect(wrapper.vm.itemsToBeDeleted).toEqual([]); - expect(wrapper.vm.selectedItems).toEqual([]); - expect(findCheckedCheckboxes()).toHaveLength(0); }); }); - describe('when multiple elements are selected', () => { + describe('when more than one item is selected to be deleted', () => { beforeEach(() => { - wrapper.setData({ itemsToBeDeleted: [0, 1] }); + mountComponent(); + findTagsTable().vm.$emit('delete', store.state.tags.map(t => t.name)); }); - it('execute the delete and remove selection', () => { - findDeleteModal().vm.$emit('ok'); - - expect(store.dispatch).toHaveBeenCalledWith('requestDeleteTags', { + it('dispatch requestDeleteTags with the right parameters', () => { + findDeleteModal().vm.$emit('confirmDelete'); + expect(dispatchSpy).toHaveBeenCalledWith('requestDeleteTags', { ids: store.state.tags.map(t => t.name), - params: wrapper.vm.$route.params.id, + params: routeId, }); - // itemsToBeDeleted is not represented in the DOM, is used as parking variable between selected and deleted items - expect(wrapper.vm.itemsToBeDeleted).toEqual([]); - expect(findCheckedCheckboxes()).toHaveLength(0); }); }); }); + }); - it('tracks cancel_delete when cancel event is emitted', () => { - const deleteModal = findDeleteModal(); - deleteModal.vm.$emit('cancel'); - return wrapper.vm.$nextTick().then(() => { - expect(Tracking.event).toHaveBeenCalledWith(undefined, 'cancel_delete', { - label: 'registry_tag_delete', - }); - }); + describe('Header', () => { + it('exists', () => { + mountComponent(); + expect(findDetailsHeader().exists()).toBe(true); + }); + + it('has the correct props', () => { + mountComponent(); + expect(findDetailsHeader().props()).toEqual({ imageName: 'foo' }); }); }); - describe('Delete alert', () => { + describe('Delete Alert', () => { const config = { - garbageCollectionHelpPagePath: 'foo', + isAdmin: true, + garbageCollectionHelpPagePath: 'baz', }; + const deleteAlertType = 'success_tag'; - describe('when the user is an admin', () => { - beforeEach(() => { - store.commit(SET_INITIAL_STATE, { ...config, isAdmin: true }); - }); - - afterEach(() => { - store.commit(SET_INITIAL_STATE, config); - }); - - describe.each` - deleteType | successTitle | errorTitle - ${'handleSingleDelete'} | ${DELETE_TAG_SUCCESS_MESSAGE} | ${DELETE_TAG_ERROR_MESSAGE} - ${'handleMultipleDelete'} | ${DELETE_TAGS_SUCCESS_MESSAGE} | ${DELETE_TAGS_ERROR_MESSAGE} - `('behaves correctly on $deleteType', ({ deleteType, successTitle, errorTitle }) => { - describe('when delete is successful', () => { - beforeEach(() => { - dispatchSpy.mockResolvedValue(); - mountComponent(); - return wrapper.vm[deleteType]('foo'); - }); - - it('alert exists', () => { - expect(findAlert().exists()).toBe(true); - }); - - it('alert body contains admin tip', () => { - expect( - findAlert() - .text() - .replace(/\s\s+/gm, ' '), - ).toBe(ADMIN_GARBAGE_COLLECTION_TIP.replace(/%{\w+}/gm, '')); - }); - - it('alert body contains link', () => { - const alertLink = findAlert().find(GlLink); - expect(alertLink.exists()).toBe(true); - expect(alertLink.attributes('href')).toBe(config.garbageCollectionHelpPagePath); - }); - - it('alert title is appropriate', () => { - expect(findAlert().attributes('title')).toBe(successTitle); - }); - }); - - describe('when delete is not successful', () => { - beforeEach(() => { - mountComponent(); - dispatchSpy.mockRejectedValue(); - return wrapper.vm[deleteType]('foo'); - }); + it('exists', () => { + mountComponent(); + expect(findDeleteAlert().exists()).toBe(true); + }); - it('alert exist and text is appropriate', () => { - expect(findAlert().exists()).toBe(true); - expect(findAlert().text()).toBe(errorTitle); - }); - }); + it('has the correct props', () => { + store.commit(SET_INITIAL_STATE, { ...config }); + mountComponent({ + data: () => ({ + deleteAlertType, + }), }); + expect(findDeleteAlert().props()).toEqual({ ...config, deleteAlertType }); }); - - describe.each` - deleteType | successTitle | errorTitle - ${'handleSingleDelete'} | ${DELETE_TAG_SUCCESS_MESSAGE} | ${DELETE_TAG_ERROR_MESSAGE} - ${'handleMultipleDelete'} | ${DELETE_TAGS_SUCCESS_MESSAGE} | ${DELETE_TAGS_ERROR_MESSAGE} - `( - 'when the user is not an admin alert behaves correctly on $deleteType', - ({ deleteType, successTitle, errorTitle }) => { - beforeEach(() => { - store.commit('SET_INITIAL_STATE', { ...config }); - }); - - describe('when delete is successful', () => { - beforeEach(() => { - dispatchSpy.mockResolvedValue(); - mountComponent(); - return wrapper.vm[deleteType]('foo'); - }); - - it('alert exist and text is appropriate', () => { - expect(findAlert().exists()).toBe(true); - expect(findAlert().text()).toBe(successTitle); - }); - }); - - describe('when delete is not successful', () => { - beforeEach(() => { - mountComponent(); - dispatchSpy.mockRejectedValue(); - return wrapper.vm[deleteType]('foo'); - }); - - it('alert exist and text is appropriate', () => { - expect(findAlert().exists()).toBe(true); - expect(findAlert().text()).toBe(errorTitle); - }); - }); - }, - ); }); }); diff --git a/spec/frontend/registry/explorer/pages/index_spec.js b/spec/frontend/registry/explorer/pages/index_spec.js index b558727ed5e..1dc5376cacf 100644 --- a/spec/frontend/registry/explorer/pages/index_spec.js +++ b/spec/frontend/registry/explorer/pages/index_spec.js @@ -1,9 +1,10 @@ import { shallowMount } from '@vue/test-utils'; import component from '~/registry/explorer/pages/index.vue'; -import store from '~/registry/explorer/stores/'; +import { createStore } from '~/registry/explorer/stores/'; describe('List Page', () => { let wrapper; + let store; const findRouterView = () => wrapper.find({ ref: 'router-view' }); @@ -17,6 +18,7 @@ describe('List Page', () => { }; beforeEach(() => { + store = createStore(); mountComponent(); }); diff --git a/spec/frontend/registry/explorer/pages/list_spec.js b/spec/frontend/registry/explorer/pages/list_spec.js index 97742b9e9b3..2ece7593b41 100644 --- a/spec/frontend/registry/explorer/pages/list_spec.js +++ b/spec/frontend/registry/explorer/pages/list_spec.js @@ -3,11 +3,11 @@ import { GlSkeletonLoader, GlSprintf, GlAlert, GlSearchBoxByClick } from '@gitla import Tracking from '~/tracking'; import waitForPromises from 'helpers/wait_for_promises'; import component from '~/registry/explorer/pages/list.vue'; -import QuickstartDropdown from '~/registry/explorer/components/quickstart_dropdown.vue'; -import GroupEmptyState from '~/registry/explorer/components/group_empty_state.vue'; -import ProjectEmptyState from '~/registry/explorer/components/project_empty_state.vue'; -import ProjectPolicyAlert from '~/registry/explorer/components/project_policy_alert.vue'; -import ImageList from '~/registry/explorer/components/image_list.vue'; +import CliCommands from '~/registry/explorer/components/list_page/cli_commands.vue'; +import GroupEmptyState from '~/registry/explorer/components/list_page/group_empty_state.vue'; +import ProjectEmptyState from '~/registry/explorer/components/list_page/project_empty_state.vue'; +import RegistryHeader from '~/registry/explorer/components/list_page/registry_header.vue'; +import ImageList from '~/registry/explorer/components/list_page/image_list.vue'; import { createStore } from '~/registry/explorer/stores/'; import { SET_MAIN_LOADING, @@ -32,14 +32,14 @@ describe('List Page', () => { const findDeleteModal = () => wrapper.find(GlModal); const findSkeletonLoader = () => wrapper.find(GlSkeletonLoader); - const findImagesList = () => wrapper.find({ ref: 'imagesList' }); const findEmptyState = () => wrapper.find(GlEmptyState); - const findQuickStartDropdown = () => wrapper.find(QuickstartDropdown); + const findCliCommands = () => wrapper.find(CliCommands); const findProjectEmptyState = () => wrapper.find(ProjectEmptyState); const findGroupEmptyState = () => wrapper.find(GroupEmptyState); - const findProjectPolicyAlert = () => wrapper.find(ProjectPolicyAlert); + const findRegistryHeader = () => wrapper.find(RegistryHeader); + const findDeleteAlert = () => wrapper.find(GlAlert); const findImageList = () => wrapper.find(ImageList); const findListHeader = () => wrapper.find('[data-testid="listHeader"]'); @@ -53,6 +53,7 @@ describe('List Page', () => { GlModal, GlEmptyState, GlSprintf, + RegistryHeader, }, mocks: { $toast, @@ -76,21 +77,6 @@ describe('List Page', () => { wrapper.destroy(); }); - describe('Expiration policy notification', () => { - beforeEach(() => { - mountComponent(); - }); - it('shows up on project page', () => { - expect(findProjectPolicyAlert().exists()).toBe(true); - }); - it('does show up on group page', () => { - store.commit(SET_INITIAL_STATE, { isGroupPage: true }); - return wrapper.vm.$nextTick().then(() => { - expect(findProjectPolicyAlert().exists()).toBe(false); - }); - }); - }); - describe('API calls', () => { it.each` imageList | name | called @@ -109,6 +95,11 @@ describe('List Page', () => { ); }); + it('contains registry header', () => { + mountComponent(); + expect(findRegistryHeader().exists()).toBe(true); + }); + describe('connection error', () => { const config = { characterError: true, @@ -139,7 +130,7 @@ describe('List Page', () => { it('should not show the loading or default state', () => { expect(findSkeletonLoader().exists()).toBe(false); - expect(findImagesList().exists()).toBe(false); + expect(findImageList().exists()).toBe(false); }); }); @@ -156,11 +147,11 @@ describe('List Page', () => { }); it('imagesList is not visible', () => { - expect(findImagesList().exists()).toBe(false); + expect(findImageList().exists()).toBe(false); }); - it('quick start is not visible', () => { - expect(findQuickStartDropdown().exists()).toBe(false); + it('cli commands is not visible', () => { + expect(findCliCommands().exists()).toBe(false); }); }); @@ -171,8 +162,8 @@ describe('List Page', () => { return waitForPromises(); }); - it('quick start is not visible', () => { - expect(findQuickStartDropdown().exists()).toBe(false); + it('cli commands is not visible', () => { + expect(findCliCommands().exists()).toBe(false); }); it('project empty state is visible', () => { @@ -193,8 +184,8 @@ describe('List Page', () => { expect(findGroupEmptyState().exists()).toBe(true); }); - it('quick start is not visible', () => { - expect(findQuickStartDropdown().exists()).toBe(false); + it('cli commands is not visible', () => { + expect(findCliCommands().exists()).toBe(false); }); it('list header is not visible', () => { @@ -210,7 +201,7 @@ describe('List Page', () => { }); it('quick start is visible', () => { - expect(findQuickStartDropdown().exists()).toBe(true); + expect(findCliCommands().exists()).toBe(true); }); it('list component is visible', () => { @@ -311,7 +302,7 @@ describe('List Page', () => { }); it('contains a description with the path of the item to delete', () => { - wrapper.setData({ itemToDelete: { path: 'foo' } }); + findImageList().vm.$emit('delete', { path: 'foo' }); return wrapper.vm.$nextTick().then(() => { expect(findDeleteModal().html()).toContain('foo'); }); diff --git a/spec/frontend/registry/explorer/stores/getters_spec.js b/spec/frontend/registry/explorer/stores/getters_spec.js index cd053ea8edc..4cab65d2bb0 100644 --- a/spec/frontend/registry/explorer/stores/getters_spec.js +++ b/spec/frontend/registry/explorer/stores/getters_spec.js @@ -2,35 +2,6 @@ import * as getters from '~/registry/explorer/stores/getters'; describe('Getters RegistryExplorer store', () => { let state; - const tags = ['foo', 'bar']; - - describe('tags', () => { - describe('when isLoading is false', () => { - beforeEach(() => { - state = { - tags, - isLoading: false, - }; - }); - - it('returns tags', () => { - expect(getters.tags(state)).toEqual(state.tags); - }); - }); - - describe('when isLoading is true', () => { - beforeEach(() => { - state = { - tags, - isLoading: true, - }; - }); - - it('returns empty array', () => { - expect(getters.tags(state)).toEqual([]); - }); - }); - }); describe.each` getter | prefix | configParameter | suffix diff --git a/spec/frontend/registry/explorer/stores/mutations_spec.js b/spec/frontend/registry/explorer/stores/mutations_spec.js index 43b2ba84218..4ca0211cdc3 100644 --- a/spec/frontend/registry/explorer/stores/mutations_spec.js +++ b/spec/frontend/registry/explorer/stores/mutations_spec.js @@ -12,11 +12,14 @@ describe('Mutations Registry Explorer Store', () => { it('should set the initial state', () => { const payload = { endpoint: 'foo', - isGroupPage: true, + isGroupPage: '', expirationPolicy: { foo: 'bar' }, - isAdmin: true, + isAdmin: '', + }; + const expectedState = { + ...mockState, + config: { ...payload, isGroupPage: false, isAdmin: false }, }; - const expectedState = { ...mockState, config: payload }; mutations[types.SET_INITIAL_STATE](mockState, { ...payload, expirationPolicy: JSON.stringify(payload.expirationPolicy), diff --git a/spec/frontend/registry/explorer/stubs.js b/spec/frontend/registry/explorer/stubs.js index 0e178abfbed..d3518c36c82 100644 --- a/spec/frontend/registry/explorer/stubs.js +++ b/spec/frontend/registry/explorer/stubs.js @@ -1,3 +1,6 @@ +import RealTagsTable from '~/registry/explorer/components/details_page/tags_table.vue'; +import RealDeleteModal from '~/registry/explorer/components/details_page/delete_modal.vue'; + export const GlModal = { template: '<div><slot name="modal-title"></slot><slot></slot><slot name="modal-ok"></slot></div>', methods: { @@ -14,3 +17,21 @@ export const RouterLink = { template: `<div><slot></slot></div>`, props: ['to'], }; + +export const TagsTable = { + props: RealTagsTable.props, + template: `<div><slot name="empty"></slot><slot name="loader"></slot></div>`, +}; + +export const DeleteModal = { + template: '<div></div>', + methods: { + show: jest.fn(), + }, + props: RealDeleteModal.props, +}; + +export const GlSkeletonLoader = { + template: `<div><slot></slot></div>`, + props: ['width', 'height'], +}; diff --git a/spec/frontend/releases/components/app_index_spec.js b/spec/frontend/releases/components/app_index_spec.js new file mode 100644 index 00000000000..91beb5b1418 --- /dev/null +++ b/spec/frontend/releases/components/app_index_spec.js @@ -0,0 +1,150 @@ +import { range as rge } from 'lodash'; +import Vue from 'vue'; +import { mountComponentWithStore } from 'helpers/vue_mount_component_helper'; +import app from '~/releases/components/app_index.vue'; +import createStore from '~/releases/stores'; +import listModule from '~/releases/stores/modules/list'; +import api from '~/api'; +import { resetStore } from '../stores/modules/list/helpers'; +import { + pageInfoHeadersWithoutPagination, + pageInfoHeadersWithPagination, + release2 as release, + releases, +} from '../mock_data'; +import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils'; +import waitForPromises from 'helpers/wait_for_promises'; + +describe('Releases App ', () => { + const Component = Vue.extend(app); + let store; + let vm; + let releasesPagination; + + const props = { + projectId: 'gitlab-ce', + documentationPath: 'help/releases', + illustrationPath: 'illustration/path', + }; + + beforeEach(() => { + store = createStore({ modules: { list: listModule } }); + releasesPagination = rge(21).map(index => ({ + ...convertObjectPropsToCamelCase(release, { deep: true }), + tagName: `${index}.00`, + })); + }); + + afterEach(() => { + resetStore(store); + vm.$destroy(); + }); + + describe('while loading', () => { + beforeEach(() => { + jest + .spyOn(api, 'releases') + // Need to defer the return value here to the next stack, + // otherwise the loading state disappears before our test even starts. + .mockImplementation(() => waitForPromises().then(() => ({ data: [], headers: {} }))); + vm = mountComponentWithStore(Component, { props, store }); + }); + + it('renders loading icon', () => { + expect(vm.$el.querySelector('.js-loading')).not.toBeNull(); + expect(vm.$el.querySelector('.js-empty-state')).toBeNull(); + expect(vm.$el.querySelector('.js-success-state')).toBeNull(); + expect(vm.$el.querySelector('.gl-pagination')).toBeNull(); + + return waitForPromises(); + }); + }); + + describe('with successful request', () => { + beforeEach(() => { + jest + .spyOn(api, 'releases') + .mockResolvedValue({ data: releases, headers: pageInfoHeadersWithoutPagination }); + vm = mountComponentWithStore(Component, { props, store }); + }); + + it('renders success state', () => { + expect(vm.$el.querySelector('.js-loading')).toBeNull(); + expect(vm.$el.querySelector('.js-empty-state')).toBeNull(); + expect(vm.$el.querySelector('.js-success-state')).not.toBeNull(); + expect(vm.$el.querySelector('.gl-pagination')).toBeNull(); + }); + }); + + describe('with successful request and pagination', () => { + beforeEach(() => { + jest + .spyOn(api, 'releases') + .mockResolvedValue({ data: releasesPagination, headers: pageInfoHeadersWithPagination }); + vm = mountComponentWithStore(Component, { props, store }); + }); + + it('renders success state', () => { + expect(vm.$el.querySelector('.js-loading')).toBeNull(); + expect(vm.$el.querySelector('.js-empty-state')).toBeNull(); + expect(vm.$el.querySelector('.js-success-state')).not.toBeNull(); + expect(vm.$el.querySelector('.gl-pagination')).not.toBeNull(); + }); + }); + + describe('with empty request', () => { + beforeEach(() => { + jest.spyOn(api, 'releases').mockResolvedValue({ data: [], headers: {} }); + vm = mountComponentWithStore(Component, { props, store }); + }); + + it('renders empty state', () => { + expect(vm.$el.querySelector('.js-loading')).toBeNull(); + expect(vm.$el.querySelector('.js-empty-state')).not.toBeNull(); + expect(vm.$el.querySelector('.js-success-state')).toBeNull(); + expect(vm.$el.querySelector('.gl-pagination')).toBeNull(); + }); + }); + + describe('"New release" button', () => { + const findNewReleaseButton = () => vm.$el.querySelector('.js-new-release-btn'); + + beforeEach(() => { + jest.spyOn(api, 'releases').mockResolvedValue({ data: [], headers: {} }); + }); + + const factory = additionalProps => { + vm = mountComponentWithStore(Component, { + props: { + ...props, + ...additionalProps, + }, + store, + }); + }; + + describe('when the user is allowed to create a new Release', () => { + const newReleasePath = 'path/to/new/release'; + + beforeEach(() => { + factory({ newReleasePath }); + }); + + it('renders the "New release" button', () => { + expect(findNewReleaseButton()).not.toBeNull(); + }); + + it('renders the "New release" button with the correct href', () => { + expect(findNewReleaseButton().getAttribute('href')).toBe(newReleasePath); + }); + }); + + describe('when the user is not allowed to create a new Release', () => { + beforeEach(() => factory()); + + it('does not render the "New release" button', () => { + expect(findNewReleaseButton()).toBeNull(); + }); + }); + }); +}); diff --git a/spec/frontend/releases/components/asset_links_form_spec.js b/spec/frontend/releases/components/asset_links_form_spec.js index 44542868cfe..e1f8592270e 100644 --- a/spec/frontend/releases/components/asset_links_form_spec.js +++ b/spec/frontend/releases/components/asset_links_form_spec.js @@ -3,6 +3,7 @@ import { mount, createLocalVue } from '@vue/test-utils'; import AssetLinksForm from '~/releases/components/asset_links_form.vue'; import { release as originalRelease } from '../mock_data'; import * as commonUtils from '~/lib/utils/common_utils'; +import { ASSET_LINK_TYPE, DEFAULT_ASSET_LINK_TYPE } from '~/releases/constants'; const localVue = createLocalVue(); localVue.use(Vuex); @@ -24,6 +25,7 @@ describe('Release edit component', () => { addEmptyAssetLink: jest.fn(), updateAssetLinkUrl: jest.fn(), updateAssetLinkName: jest.fn(), + updateAssetLinkType: jest.fn(), removeAssetLink: jest.fn().mockImplementation((_context, linkId) => { state.release.assets.links = state.release.assets.links.filter(l => l.id !== linkId); }), @@ -51,6 +53,11 @@ describe('Release edit component', () => { wrapper = mount(AssetLinksForm, { localVue, store, + provide: { + glFeatures: { + releaseAssetLinkType: true, + }, + }, }); }; @@ -103,7 +110,7 @@ describe('Release edit component', () => { ); }); - it('calls the "updateAssetLinName" store method when text is entered into the "Link title" input field', () => { + it('calls the "updateAssetLinkName" store method when text is entered into the "Link title" input field', () => { const linkIdToUpdate = release.assets.links[0].id; const newName = 'updated name'; @@ -121,6 +128,31 @@ describe('Release edit component', () => { undefined, ); }); + + it('calls the "updateAssetLinkType" store method when an option is selected from the "Type" dropdown', () => { + const linkIdToUpdate = release.assets.links[0].id; + const newType = ASSET_LINK_TYPE.RUNBOOK; + + expect(actions.updateAssetLinkType).not.toHaveBeenCalled(); + + wrapper.find({ ref: 'typeSelect' }).vm.$emit('change', newType); + + expect(actions.updateAssetLinkType).toHaveBeenCalledTimes(1); + expect(actions.updateAssetLinkType).toHaveBeenCalledWith( + expect.anything(), + { + linkIdToUpdate, + newType, + }, + undefined, + ); + }); + + it('selects the default asset type if no type was provided by the backend', () => { + const selected = wrapper.find({ ref: 'typeSelect' }).element.value; + + expect(selected).toBe(DEFAULT_ASSET_LINK_TYPE); + }); }); describe('validation', () => { diff --git a/spec/frontend/releases/components/release_block_assets_spec.js b/spec/frontend/releases/components/release_block_assets_spec.js new file mode 100644 index 00000000000..44b190b0d19 --- /dev/null +++ b/spec/frontend/releases/components/release_block_assets_spec.js @@ -0,0 +1,137 @@ +import { mount } from '@vue/test-utils'; +import { GlCollapse } from '@gitlab/ui'; +import ReleaseBlockAssets from '~/releases/components/release_block_assets.vue'; +import { ASSET_LINK_TYPE } from '~/releases/constants'; +import { trimText } from 'helpers/text_helper'; +import { assets } from '../mock_data'; + +describe('Release block assets', () => { + let wrapper; + let defaultProps; + + // A map of types to the expected section heading text + const sections = { + [ASSET_LINK_TYPE.IMAGE]: 'Images', + [ASSET_LINK_TYPE.PACKAGE]: 'Packages', + [ASSET_LINK_TYPE.RUNBOOK]: 'Runbooks', + [ASSET_LINK_TYPE.OTHER]: 'Other', + }; + + const createComponent = (propsData = defaultProps) => { + wrapper = mount(ReleaseBlockAssets, { + provide: { + glFeatures: { releaseAssetLinkType: true }, + }, + propsData, + }); + }; + + const findSectionHeading = type => + wrapper.findAll('h5').filter(h5 => h5.text() === sections[type]); + + beforeEach(() => { + defaultProps = { assets }; + }); + + describe('with default props', () => { + beforeEach(() => createComponent()); + + const findAccordionButton = () => wrapper.find('[data-testid="accordion-button"]'); + + it('renders an "Assets" accordion with the asset count', () => { + const accordionButton = findAccordionButton(); + + expect(accordionButton.exists()).toBe(true); + expect(trimText(accordionButton.text())).toBe('Assets 5'); + }); + + it('renders the accordion as expanded by default', () => { + const accordion = wrapper.find(GlCollapse); + + expect(accordion.exists()).toBe(true); + expect(accordion.isVisible()).toBe(true); + }); + + it('renders sources with the expected text and URL', () => { + defaultProps.assets.sources.forEach(s => { + const sourceLink = wrapper.find(`li>a[href="${s.url}"]`); + + expect(sourceLink.exists()).toBe(true); + expect(sourceLink.text()).toBe(`Source code (${s.format})`); + }); + }); + + it('renders a heading for each assets type (except sources)', () => { + Object.keys(sections).forEach(type => { + const sectionHeadings = findSectionHeading(type); + + expect(sectionHeadings).toHaveLength(1); + }); + }); + + it('renders asset links with the expected text and URL', () => { + defaultProps.assets.links.forEach(l => { + const sourceLink = wrapper.find(`li>a[href="${l.directAssetUrl}"]`); + + expect(sourceLink.exists()).toBe(true); + expect(sourceLink.text()).toBe(l.name); + }); + }); + }); + + describe("when a release doesn't have a link with a certain asset type", () => { + const typeToExclude = ASSET_LINK_TYPE.IMAGE; + + beforeEach(() => { + defaultProps.assets.links = defaultProps.assets.links.filter( + l => l.linkType !== typeToExclude, + ); + createComponent(defaultProps); + }); + + it('does not render a section heading if there are no links of that type', () => { + const sectionHeadings = findSectionHeading(typeToExclude); + + expect(sectionHeadings).toHaveLength(0); + }); + }); + + describe('external vs internal links', () => { + const containsExternalSourceIndicator = () => + wrapper.contains('[data-testid="external-link-indicator"]'); + + describe('when a link is external', () => { + beforeEach(() => { + defaultProps.assets.sources = []; + defaultProps.assets.links = [ + { + ...defaultProps.assets.links[0], + external: true, + }, + ]; + createComponent(defaultProps); + }); + + it('renders the link with an "external source" indicator', () => { + expect(containsExternalSourceIndicator()).toBe(true); + }); + }); + + describe('when a link is internal', () => { + beforeEach(() => { + defaultProps.assets.sources = []; + defaultProps.assets.links = [ + { + ...defaultProps.assets.links[0], + external: false, + }, + ]; + createComponent(defaultProps); + }); + + it('renders the link without the "external source" indicator', () => { + expect(containsExternalSourceIndicator()).toBe(false); + }); + }); + }); +}); diff --git a/spec/frontend/releases/mock_data.js b/spec/frontend/releases/mock_data.js index bd5fc86275e..b97385154bd 100644 --- a/spec/frontend/releases/mock_data.js +++ b/spec/frontend/releases/mock_data.js @@ -1,3 +1,5 @@ +import { ASSET_LINK_TYPE } from '~/releases/constants'; + export const milestones = [ { id: 50, @@ -131,3 +133,92 @@ export const release = { edit_url: 'http://0.0.0.0:3001/root/release-test/-/releases/v0.3/edit', }, }; + +export const pageInfoHeadersWithoutPagination = { + 'X-NEXT-PAGE': '', + 'X-PAGE': '1', + 'X-PER-PAGE': '20', + 'X-PREV-PAGE': '', + 'X-TOTAL': '19', + 'X-TOTAL-PAGES': '1', +}; + +export const pageInfoHeadersWithPagination = { + 'X-NEXT-PAGE': '2', + 'X-PAGE': '1', + 'X-PER-PAGE': '20', + 'X-PREV-PAGE': '', + 'X-TOTAL': '21', + 'X-TOTAL-PAGES': '2', +}; + +export const assets = { + count: 5, + sources: [ + { + format: 'zip', + url: 'https://example.gitlab.com/path/to/zip', + }, + ], + links: [ + { + linkType: ASSET_LINK_TYPE.IMAGE, + url: 'https://example.gitlab.com/path/to/image', + directAssetUrl: 'https://example.gitlab.com/path/to/image', + name: 'Example image link', + }, + { + linkType: ASSET_LINK_TYPE.PACKAGE, + url: 'https://example.gitlab.com/path/to/package', + directAssetUrl: 'https://example.gitlab.com/path/to/package', + name: 'Example package link', + }, + { + linkType: ASSET_LINK_TYPE.RUNBOOK, + url: 'https://example.gitlab.com/path/to/runbook', + directAssetUrl: 'https://example.gitlab.com/path/to/runbook', + name: 'Example runbook link', + }, + { + linkType: ASSET_LINK_TYPE.OTHER, + url: 'https://example.gitlab.com/path/to/link', + directAssetUrl: 'https://example.gitlab.com/path/to/link', + name: 'Example link', + }, + ], +}; + +export const release2 = { + name: 'Bionic Beaver', + tag_name: '18.04', + description: '## changelog\n\n* line 1\n* line2', + description_html: '<div><h2>changelog</h2><ul><li>line1</li<li>line 2</li></ul></div>', + author_name: 'Release bot', + author_email: 'release-bot@example.com', + created_at: '2012-05-28T05:00:00-07:00', + commit: { + id: '2695effb5807a22ff3d138d593fd856244e155e7', + short_id: '2695effb', + title: 'Initial commit', + created_at: '2017-07-26T11:08:53.000+02:00', + parent_ids: ['2a4b78934375d7f53875269ffd4f45fd83a84ebe'], + message: 'Initial commit', + author: { + avatar_url: 'uploads/-/system/user/avatar/johndoe/avatar.png', + id: 482476, + name: 'John Doe', + path: '/johndoe', + state: 'active', + status_tooltip_html: null, + username: 'johndoe', + web_url: 'https://gitlab.com/johndoe', + }, + authored_date: '2012-05-28T04:42:42-07:00', + committer_name: 'Jack Smith', + committer_email: 'jack@example.com', + committed_date: '2012-05-28T04:42:42-07:00', + }, + assets, +}; + +export const releases = [release, release2]; diff --git a/spec/frontend/releases/stores/modules/detail/actions_spec.js b/spec/frontend/releases/stores/modules/detail/actions_spec.js index 854f06821be..345be2acc71 100644 --- a/spec/frontend/releases/stores/modules/detail/actions_spec.js +++ b/spec/frontend/releases/stores/modules/detail/actions_spec.js @@ -10,6 +10,7 @@ import createFlash from '~/flash'; import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils'; import { redirectTo } from '~/lib/utils/url_utility'; import api from '~/api'; +import { ASSET_LINK_TYPE } from '~/releases/constants'; jest.mock('~/flash', () => jest.fn()); @@ -130,6 +131,54 @@ describe('Release detail actions', () => { }); }); + describe('updateAssetLinkUrl', () => { + it(`commits ${types.UPDATE_ASSET_LINK_URL} with the updated link URL`, () => { + const params = { + linkIdToUpdate: 2, + newUrl: 'https://example.com/updated', + }; + + return testAction(actions.updateAssetLinkUrl, params, state, [ + { type: types.UPDATE_ASSET_LINK_URL, payload: params }, + ]); + }); + }); + + describe('updateAssetLinkName', () => { + it(`commits ${types.UPDATE_ASSET_LINK_NAME} with the updated link name`, () => { + const params = { + linkIdToUpdate: 2, + newName: 'Updated link name', + }; + + return testAction(actions.updateAssetLinkName, params, state, [ + { type: types.UPDATE_ASSET_LINK_NAME, payload: params }, + ]); + }); + }); + + describe('updateAssetLinkType', () => { + it(`commits ${types.UPDATE_ASSET_LINK_TYPE} with the updated link type`, () => { + const params = { + linkIdToUpdate: 2, + newType: ASSET_LINK_TYPE.RUNBOOK, + }; + + return testAction(actions.updateAssetLinkType, params, state, [ + { type: types.UPDATE_ASSET_LINK_TYPE, payload: params }, + ]); + }); + }); + + describe('removeAssetLink', () => { + it(`commits ${types.REMOVE_ASSET_LINK} with the ID of the asset link to remove`, () => { + const idToRemove = 2; + return testAction(actions.removeAssetLink, idToRemove, state, [ + { type: types.REMOVE_ASSET_LINK, payload: idToRemove }, + ]); + }); + }); + describe('updateReleaseMilestones', () => { it(`commits ${types.UPDATE_RELEASE_MILESTONES} with the updated release milestones`, () => { const newReleaseMilestones = ['v0.0', 'v0.1']; diff --git a/spec/frontend/releases/stores/modules/detail/mutations_spec.js b/spec/frontend/releases/stores/modules/detail/mutations_spec.js index f3f7ca797b4..a34c1be64d9 100644 --- a/spec/frontend/releases/stores/modules/detail/mutations_spec.js +++ b/spec/frontend/releases/stores/modules/detail/mutations_spec.js @@ -3,6 +3,7 @@ import mutations from '~/releases/stores/modules/detail/mutations'; import * as types from '~/releases/stores/modules/detail/mutation_types'; import { release as originalRelease } from '../../../mock_data'; import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils'; +import { ASSET_LINK_TYPE, DEFAULT_ASSET_LINK_TYPE } from '~/releases/constants'; describe('Release detail mutations', () => { let state; @@ -24,7 +25,7 @@ describe('Release detail mutations', () => { it('set state.isFetchingRelease to true', () => { mutations[types.REQUEST_RELEASE](state); - expect(state.isFetchingRelease).toEqual(true); + expect(state.isFetchingRelease).toBe(true); }); }); @@ -32,9 +33,9 @@ describe('Release detail mutations', () => { it('handles a successful response from the server', () => { mutations[types.RECEIVE_RELEASE_SUCCESS](state, release); - expect(state.fetchError).toEqual(undefined); + expect(state.fetchError).toBeUndefined(); - expect(state.isFetchingRelease).toEqual(false); + expect(state.isFetchingRelease).toBe(false); expect(state.release).toEqual(release); @@ -47,7 +48,7 @@ describe('Release detail mutations', () => { const error = { message: 'An error occurred!' }; mutations[types.RECEIVE_RELEASE_ERROR](state, error); - expect(state.isFetchingRelease).toEqual(false); + expect(state.isFetchingRelease).toBe(false); expect(state.release).toBeUndefined(); @@ -61,7 +62,7 @@ describe('Release detail mutations', () => { const newTitle = 'The new release title'; mutations[types.UPDATE_RELEASE_TITLE](state, newTitle); - expect(state.release.name).toEqual(newTitle); + expect(state.release.name).toBe(newTitle); }); }); @@ -71,7 +72,7 @@ describe('Release detail mutations', () => { const newNotes = 'The new release notes'; mutations[types.UPDATE_RELEASE_NOTES](state, newNotes); - expect(state.release.description).toEqual(newNotes); + expect(state.release.description).toBe(newNotes); }); }); @@ -79,7 +80,7 @@ describe('Release detail mutations', () => { it('set state.isUpdatingRelease to true', () => { mutations[types.REQUEST_UPDATE_RELEASE](state); - expect(state.isUpdatingRelease).toEqual(true); + expect(state.isUpdatingRelease).toBe(true); }); }); @@ -87,9 +88,9 @@ describe('Release detail mutations', () => { it('handles a successful response from the server', () => { mutations[types.RECEIVE_UPDATE_RELEASE_SUCCESS](state, release); - expect(state.updateError).toEqual(undefined); + expect(state.updateError).toBeUndefined(); - expect(state.isUpdatingRelease).toEqual(false); + expect(state.isUpdatingRelease).toBe(false); }); }); @@ -98,7 +99,7 @@ describe('Release detail mutations', () => { const error = { message: 'An error occurred!' }; mutations[types.RECEIVE_UPDATE_RELEASE_ERROR](state, error); - expect(state.isUpdatingRelease).toEqual(false); + expect(state.isUpdatingRelease).toBe(false); expect(state.updateError).toEqual(error); }); @@ -118,6 +119,7 @@ describe('Release detail mutations', () => { id: expect.stringMatching(/^new-link-/), url: '', name: '', + linkType: DEFAULT_ASSET_LINK_TYPE, }, ]); }); @@ -134,7 +136,7 @@ describe('Release detail mutations', () => { newUrl, }); - expect(state.release.assets.links[0].url).toEqual(newUrl); + expect(state.release.assets.links[0].url).toBe(newUrl); }); }); @@ -149,7 +151,22 @@ describe('Release detail mutations', () => { newName, }); - expect(state.release.assets.links[0].name).toEqual(newName); + expect(state.release.assets.links[0].name).toBe(newName); + }); + }); + + describe(`${types.UPDATE_ASSET_LINK_TYPE}`, () => { + it('updates an asset link with a new type', () => { + state.release = release; + + const newType = ASSET_LINK_TYPE.RUNBOOK; + + mutations[types.UPDATE_ASSET_LINK_TYPE](state, { + linkIdToUpdate: state.release.assets.links[0].id, + newType, + }); + + expect(state.release.assets.links[0].linkType).toBe(newType); }); }); diff --git a/spec/frontend/releases/stores/modules/list/actions_spec.js b/spec/frontend/releases/stores/modules/list/actions_spec.js new file mode 100644 index 00000000000..4c3af157684 --- /dev/null +++ b/spec/frontend/releases/stores/modules/list/actions_spec.js @@ -0,0 +1,131 @@ +import testAction from 'helpers/vuex_action_helper'; +import { + requestReleases, + fetchReleases, + receiveReleasesSuccess, + receiveReleasesError, +} from '~/releases/stores/modules/list/actions'; +import state from '~/releases/stores/modules/list/state'; +import * as types from '~/releases/stores/modules/list/mutation_types'; +import api from '~/api'; +import { parseIntPagination, convertObjectPropsToCamelCase } from '~/lib/utils/common_utils'; +import { pageInfoHeadersWithoutPagination, releases as originalReleases } from '../../../mock_data'; + +describe('Releases State actions', () => { + let mockedState; + let pageInfo; + let releases; + + beforeEach(() => { + mockedState = state(); + pageInfo = parseIntPagination(pageInfoHeadersWithoutPagination); + releases = convertObjectPropsToCamelCase(originalReleases, { deep: true }); + }); + + describe('requestReleases', () => { + it('should commit REQUEST_RELEASES mutation', done => { + testAction(requestReleases, null, mockedState, [{ type: types.REQUEST_RELEASES }], [], done); + }); + }); + + describe('fetchReleases', () => { + describe('success', () => { + it('dispatches requestReleases and receiveReleasesSuccess', done => { + jest.spyOn(api, 'releases').mockImplementation((id, options) => { + expect(id).toEqual(1); + expect(options.page).toEqual('1'); + return Promise.resolve({ data: releases, headers: pageInfoHeadersWithoutPagination }); + }); + + testAction( + fetchReleases, + { projectId: 1 }, + mockedState, + [], + [ + { + type: 'requestReleases', + }, + { + payload: { data: releases, headers: pageInfoHeadersWithoutPagination }, + type: 'receiveReleasesSuccess', + }, + ], + done, + ); + }); + + it('dispatches requestReleases and receiveReleasesSuccess on page two', done => { + jest.spyOn(api, 'releases').mockImplementation((_, options) => { + expect(options.page).toEqual('2'); + return Promise.resolve({ data: releases, headers: pageInfoHeadersWithoutPagination }); + }); + + testAction( + fetchReleases, + { page: '2', projectId: 1 }, + mockedState, + [], + [ + { + type: 'requestReleases', + }, + { + payload: { data: releases, headers: pageInfoHeadersWithoutPagination }, + type: 'receiveReleasesSuccess', + }, + ], + done, + ); + }); + }); + + describe('error', () => { + it('dispatches requestReleases and receiveReleasesError', done => { + jest.spyOn(api, 'releases').mockReturnValue(Promise.reject()); + + testAction( + fetchReleases, + { projectId: null }, + mockedState, + [], + [ + { + type: 'requestReleases', + }, + { + type: 'receiveReleasesError', + }, + ], + done, + ); + }); + }); + }); + + describe('receiveReleasesSuccess', () => { + it('should commit RECEIVE_RELEASES_SUCCESS mutation', done => { + testAction( + receiveReleasesSuccess, + { data: releases, headers: pageInfoHeadersWithoutPagination }, + mockedState, + [{ type: types.RECEIVE_RELEASES_SUCCESS, payload: { pageInfo, data: releases } }], + [], + done, + ); + }); + }); + + describe('receiveReleasesError', () => { + it('should commit RECEIVE_RELEASES_ERROR mutation', done => { + testAction( + receiveReleasesError, + null, + mockedState, + [{ type: types.RECEIVE_RELEASES_ERROR }], + [], + done, + ); + }); + }); +}); diff --git a/spec/frontend/releases/stores/modules/list/helpers.js b/spec/frontend/releases/stores/modules/list/helpers.js new file mode 100644 index 00000000000..435ca36047e --- /dev/null +++ b/spec/frontend/releases/stores/modules/list/helpers.js @@ -0,0 +1,6 @@ +import state from '~/releases/stores/modules/list/state'; + +// eslint-disable-next-line import/prefer-default-export +export const resetStore = store => { + store.replaceState(state()); +}; diff --git a/spec/frontend/releases/stores/modules/list/mutations_spec.js b/spec/frontend/releases/stores/modules/list/mutations_spec.js new file mode 100644 index 00000000000..3035b916ff6 --- /dev/null +++ b/spec/frontend/releases/stores/modules/list/mutations_spec.js @@ -0,0 +1,55 @@ +import state from '~/releases/stores/modules/list/state'; +import mutations from '~/releases/stores/modules/list/mutations'; +import * as types from '~/releases/stores/modules/list/mutation_types'; +import { parseIntPagination } from '~/lib/utils/common_utils'; +import { pageInfoHeadersWithoutPagination, releases } from '../../../mock_data'; + +describe('Releases Store Mutations', () => { + let stateCopy; + let pageInfo; + + beforeEach(() => { + stateCopy = state(); + pageInfo = parseIntPagination(pageInfoHeadersWithoutPagination); + }); + + describe('REQUEST_RELEASES', () => { + it('sets isLoading to true', () => { + mutations[types.REQUEST_RELEASES](stateCopy); + + expect(stateCopy.isLoading).toEqual(true); + }); + }); + + describe('RECEIVE_RELEASES_SUCCESS', () => { + beforeEach(() => { + mutations[types.RECEIVE_RELEASES_SUCCESS](stateCopy, { pageInfo, data: releases }); + }); + + it('sets is loading to false', () => { + expect(stateCopy.isLoading).toEqual(false); + }); + + it('sets hasError to false', () => { + expect(stateCopy.hasError).toEqual(false); + }); + + it('sets data', () => { + expect(stateCopy.releases).toEqual(releases); + }); + + it('sets pageInfo', () => { + expect(stateCopy.pageInfo).toEqual(pageInfo); + }); + }); + + describe('RECEIVE_RELEASES_ERROR', () => { + it('resets data', () => { + mutations[types.RECEIVE_RELEASES_ERROR](stateCopy); + + expect(stateCopy.isLoading).toEqual(false); + expect(stateCopy.releases).toEqual([]); + expect(stateCopy.pageInfo).toEqual({}); + }); + }); +}); diff --git a/spec/frontend/reports/components/grouped_test_reports_app_spec.js b/spec/frontend/reports/components/grouped_test_reports_app_spec.js index 1a01db391da..6a402277f52 100644 --- a/spec/frontend/reports/components/grouped_test_reports_app_spec.js +++ b/spec/frontend/reports/components/grouped_test_reports_app_spec.js @@ -1,260 +1,214 @@ -import Vue from 'vue'; -import MockAdapter from 'axios-mock-adapter'; -import axios from '~/lib/utils/axios_utils'; -import state from '~/reports/store/state'; -import component from '~/reports/components/grouped_test_reports_app.vue'; -import mountComponent from '../../helpers/vue_mount_component_helper'; +import { mount, createLocalVue } from '@vue/test-utils'; +import Vuex from 'vuex'; +import GroupedTestReportsApp from '~/reports/components/grouped_test_reports_app.vue'; +import store from '~/reports/store'; + import { failedReport } from '../mock_data/mock_data'; +import successTestReports from '../mock_data/no_failures_report.json'; import newFailedTestReports from '../mock_data/new_failures_report.json'; import newErrorsTestReports from '../mock_data/new_errors_report.json'; -import successTestReports from '../mock_data/no_failures_report.json'; import mixedResultsTestReports from '../mock_data/new_and_fixed_failures_report.json'; import resolvedFailures from '../mock_data/resolved_failures.json'; -describe('Grouped Test Reports App', () => { - let vm; - let mock; - const Component = Vue.extend(component); +const localVue = createLocalVue(); +localVue.use(Vuex); + +describe('Grouped test reports app', () => { + const endpoint = 'endpoint.json'; + const Component = localVue.extend(GroupedTestReportsApp); + let wrapper; + let mockStore; + + const mountComponent = () => { + wrapper = mount(Component, { + store: mockStore, + localVue, + propsData: { + endpoint, + }, + methods: { + fetchReports: () => {}, + }, + }); + }; + + const setReports = reports => { + mockStore.state.status = reports.status; + mockStore.state.summary = reports.summary; + mockStore.state.reports = reports.suites; + }; + + const findHeader = () => wrapper.find('[data-testid="report-section-code-text"]'); + const findSummaryDescription = () => wrapper.find('[data-testid="test-summary-row-description"]'); + const findIssueDescription = () => wrapper.find('[data-testid="test-issue-body-description"]'); + const findAllIssueDescriptions = () => + wrapper.findAll('[data-testid="test-issue-body-description"]'); beforeEach(() => { - mock = new MockAdapter(axios); + mockStore = store(); + mountComponent(); }); afterEach(() => { - vm.$store.replaceState(state()); - vm.$destroy(); - mock.restore(); + wrapper.destroy(); + wrapper = null; }); describe('with success result', () => { beforeEach(() => { - mock.onGet('test_results.json').reply(200, successTestReports, {}); - vm = mountComponent(Component, { - endpoint: 'test_results.json', - }); + setReports(successTestReports); + mountComponent(); }); - it('renders success summary text', done => { - setImmediate(() => { - expect(vm.$el.querySelector('.gl-spinner')).toBeNull(); - expect(vm.$el.querySelector('.js-code-text').textContent.trim()).toEqual( - 'Test summary contained no changed test results out of 11 total tests', - ); - - expect(vm.$el.textContent).toContain( - 'rspec:pg found no changed test results out of 8 total tests', - ); - - expect(vm.$el.textContent).toContain( - 'java ant found no changed test results out of 3 total tests', - ); - done(); - }); + it('renders success summary text', () => { + expect(findHeader().text()).toBe( + 'Test summary contained no changed test results out of 11 total tests', + ); }); }); - describe('with 204 result', () => { + describe('with new failed result', () => { beforeEach(() => { - mock.onGet('test_results.json').reply(204, {}, {}); - vm = mountComponent(Component, { - endpoint: 'test_results.json', - }); + setReports(newFailedTestReports); + mountComponent(); }); - it('renders success summary text', done => { - setImmediate(() => { - expect(vm.$el.querySelector('.gl-spinner')).not.toBeNull(); - expect(vm.$el.querySelector('.js-code-text').textContent.trim()).toEqual( - 'Test summary results are being parsed', - ); - - done(); - }); + it('renders failed summary text', () => { + expect(findHeader().text()).toBe('Test summary contained 2 failed out of 11 total tests'); }); - }); - describe('with new failed result', () => { - beforeEach(() => { - mock.onGet('test_results.json').reply(200, newFailedTestReports, {}); - vm = mountComponent(Component, { - endpoint: 'test_results.json', - }); + it('renders failed test suite', () => { + expect(findSummaryDescription().text()).toContain( + 'rspec:pg found 2 failed out of 8 total tests', + ); }); - it('renders failed summary text + new badge', done => { - setImmediate(() => { - expect(vm.$el.querySelector('.gl-spinner')).toBeNull(); - expect(vm.$el.querySelector('.js-code-text').textContent.trim()).toEqual( - 'Test summary contained 2 failed out of 11 total tests', - ); - - expect(vm.$el.textContent).toContain('rspec:pg found 2 failed out of 8 total tests'); - - expect(vm.$el.textContent).toContain('New'); - expect(vm.$el.textContent).toContain( - 'java ant found no changed test results out of 3 total tests', - ); - done(); - }); + it('renders failed issue in list', () => { + expect(findIssueDescription().text()).toContain('New'); + expect(findIssueDescription().text()).toContain( + 'Test#sum when a is 1 and b is 2 returns summary', + ); }); }); describe('with new error result', () => { beforeEach(() => { - mock.onGet('test_results.json').reply(200, newErrorsTestReports, {}); - vm = mountComponent(Component, { - endpoint: 'test_results.json', - }); + setReports(newErrorsTestReports); + mountComponent(); + }); + + it('renders error summary text', () => { + expect(findHeader().text()).toBe('Test summary contained 2 errors out of 11 total tests'); + }); + + it('renders error test suite', () => { + expect(findSummaryDescription().text()).toContain( + 'karma found 2 errors out of 3 total tests', + ); }); - it('renders error summary text + new badge', done => { - setImmediate(() => { - expect(vm.$el.querySelector('.gl-spinner')).toBeNull(); - expect(vm.$el.querySelector('.js-code-text').textContent.trim()).toEqual( - 'Test summary contained 2 errors out of 11 total tests', - ); - - expect(vm.$el.textContent).toContain('karma found 2 errors out of 3 total tests'); - - expect(vm.$el.textContent).toContain('New'); - expect(vm.$el.textContent).toContain( - 'rspec:pg found no changed test results out of 8 total tests', - ); - done(); - }); + it('renders error issue in list', () => { + expect(findIssueDescription().text()).toContain('New'); + expect(findIssueDescription().text()).toContain( + 'Test#sum when a is 1 and b is 2 returns summary', + ); }); }); describe('with mixed results', () => { beforeEach(() => { - mock.onGet('test_results.json').reply(200, mixedResultsTestReports, {}); - vm = mountComponent(Component, { - endpoint: 'test_results.json', - }); + setReports(mixedResultsTestReports); + mountComponent(); + }); + + it('renders summary text', () => { + expect(findHeader().text()).toBe( + 'Test summary contained 2 failed and 2 fixed test results out of 11 total tests', + ); }); - it('renders summary text', done => { - setImmediate(() => { - expect(vm.$el.querySelector('.gl-spinner')).toBeNull(); - expect(vm.$el.querySelector('.js-code-text').textContent.trim()).toEqual( - 'Test summary contained 2 failed and 2 fixed test results out of 11 total tests', - ); - - expect(vm.$el.textContent).toContain( - 'rspec:pg found 1 failed and 2 fixed test results out of 8 total tests', - ); - - expect(vm.$el.textContent).toContain('New'); - expect(vm.$el.textContent).toContain(' java ant found 1 failed out of 3 total tests'); - done(); - }); + it('renders failed test suite', () => { + expect(findSummaryDescription().text()).toContain( + 'rspec:pg found 1 failed and 2 fixed test results out of 8 total tests', + ); + }); + + it('renders failed issue in list', () => { + expect(findIssueDescription().text()).toContain('New'); + expect(findIssueDescription().text()).toContain( + 'Test#subtract when a is 2 and b is 1 returns correct result', + ); }); }); describe('with resolved failures and resolved errors', () => { beforeEach(() => { - mock.onGet('test_results.json').reply(200, resolvedFailures, {}); - vm = mountComponent(Component, { - endpoint: 'test_results.json', - }); + setReports(resolvedFailures); + mountComponent(); }); - it('renders summary text', done => { - setImmediate(() => { - expect(vm.$el.querySelector('.gl-spinner')).toBeNull(); - expect(vm.$el.querySelector('.js-code-text').textContent.trim()).toEqual( - 'Test summary contained 4 fixed test results out of 11 total tests', - ); - - expect(vm.$el.textContent).toContain( - 'rspec:pg found 4 fixed test results out of 8 total tests', - ); - done(); - }); + it('renders summary text', () => { + expect(findHeader().text()).toBe( + 'Test summary contained 4 fixed test results out of 11 total tests', + ); + }); + + it('renders resolved test suite', () => { + expect(findSummaryDescription().text()).toContain( + 'rspec:pg found 4 fixed test results out of 8 total tests', + ); }); - it('renders resolved failures', done => { - setImmediate(() => { - expect(vm.$el.querySelector('.report-block-container').textContent).toContain( - resolvedFailures.suites[0].resolved_failures[0].name, - ); - - expect(vm.$el.querySelector('.report-block-container').textContent).toContain( - resolvedFailures.suites[0].resolved_failures[1].name, - ); - done(); - }); + it('renders resolved failures', () => { + expect(findIssueDescription().text()).toContain( + resolvedFailures.suites[0].resolved_failures[0].name, + ); }); - it('renders resolved errors', done => { - setImmediate(() => { - expect(vm.$el.querySelector('.report-block-container').textContent).toContain( - resolvedFailures.suites[0].resolved_errors[0].name, - ); - - expect(vm.$el.querySelector('.report-block-container').textContent).toContain( - resolvedFailures.suites[0].resolved_errors[1].name, - ); - done(); - }); + it('renders resolved errors', () => { + expect( + findAllIssueDescriptions() + .at(2) + .text(), + ).toContain(resolvedFailures.suites[0].resolved_errors[0].name); }); }); describe('with a report that failed to load', () => { beforeEach(() => { - mock.onGet('test_results.json').reply(200, failedReport, {}); - vm = mountComponent(Component, { - endpoint: 'test_results.json', - }); + setReports(failedReport); + mountComponent(); }); - it('renders an error status for the report', done => { - setImmediate(() => { - const { name } = failedReport.suites[0]; + it('renders an error status for the report', () => { + const { name } = failedReport.suites[0]; - expect(vm.$el.querySelector('.report-block-list-issue').textContent).toContain( - `An error occurred while loading ${name} results`, - ); - done(); - }); + expect(findSummaryDescription().text()).toContain( + `An error occurred while loading ${name} result`, + ); }); }); describe('with error', () => { beforeEach(() => { - mock.onGet('test_results.json').reply(500, {}, {}); - vm = mountComponent(Component, { - endpoint: 'test_results.json', - }); + mockStore.state.isLoading = false; + mockStore.state.hasError = true; + mountComponent(); }); - it('renders loading summary text with loading icon', done => { - setImmediate(() => { - expect(vm.$el.querySelector('.js-code-text').textContent.trim()).toEqual( - 'Test summary failed loading results', - ); - done(); - }); + it('renders loading state', () => { + expect(findHeader().text()).toBe('Test summary failed loading results'); }); }); describe('while loading', () => { beforeEach(() => { - mock.onGet('test_results.json').reply(200, {}, {}); - vm = mountComponent(Component, { - endpoint: 'test_results.json', - }); + mockStore.state.isLoading = true; + mountComponent(); }); - it('renders loading summary text with loading icon', done => { - expect(vm.$el.querySelector('.gl-spinner')).not.toBeNull(); - expect(vm.$el.querySelector('.js-code-text').textContent.trim()).toEqual( - 'Test summary results are being parsed', - ); - - setImmediate(() => { - done(); - }); + it('renders loading state', () => { + expect(findHeader().text()).toBe('Test summary results are being parsed'); }); }); }); diff --git a/spec/frontend/reports/mock_data/new_errors_report.json b/spec/frontend/reports/mock_data/new_errors_report.json index cebf98fdb63..6573d23ee50 100644 --- a/spec/frontend/reports/mock_data/new_errors_report.json +++ b/spec/frontend/reports/mock_data/new_errors_report.json @@ -2,16 +2,6 @@ "summary": { "total": 11, "resolved": 0, "errored": 2, "failed": 0 }, "suites": [ { - "name": "rspec:pg", - "summary": { "total": 8, "resolved": 0, "errored": 0, "failed": 0 }, - "new_failures": [], - "resolved_failures": [], - "existing_failures": [], - "new_errors": [], - "resolved_errors": [], - "existing_errors": [] - }, - { "name": "karma", "summary": { "total": 3, "resolved": 0, "errored": 2, "failed": 0 }, "new_failures": [], @@ -33,6 +23,16 @@ ], "resolved_errors": [], "existing_errors": [] + }, + { + "name": "rspec:pg", + "summary": { "total": 8, "resolved": 0, "errored": 0, "failed": 0 }, + "new_failures": [], + "resolved_failures": [], + "existing_failures": [], + "new_errors": [], + "resolved_errors": [], + "existing_errors": [] } ] } diff --git a/spec/frontend/right_sidebar_spec.js b/spec/frontend/right_sidebar_spec.js new file mode 100644 index 00000000000..d80d80152a5 --- /dev/null +++ b/spec/frontend/right_sidebar_spec.js @@ -0,0 +1,87 @@ +import $ from 'jquery'; +import MockAdapter from 'axios-mock-adapter'; +import '~/commons/bootstrap'; +import axios from '~/lib/utils/axios_utils'; +import Sidebar from '~/right_sidebar'; + +let $aside = null; +let $toggle = null; +let $icon = null; +let $page = null; +let $labelsIcon = null; + +const assertSidebarState = state => { + const shouldBeExpanded = state === 'expanded'; + const shouldBeCollapsed = state === 'collapsed'; + expect($aside.hasClass('right-sidebar-expanded')).toBe(shouldBeExpanded); + expect($page.hasClass('right-sidebar-expanded')).toBe(shouldBeExpanded); + expect($icon.hasClass('fa-angle-double-right')).toBe(shouldBeExpanded); + expect($aside.hasClass('right-sidebar-collapsed')).toBe(shouldBeCollapsed); + expect($page.hasClass('right-sidebar-collapsed')).toBe(shouldBeCollapsed); + expect($icon.hasClass('fa-angle-double-left')).toBe(shouldBeCollapsed); +}; + +describe('RightSidebar', () => { + describe('fixture tests', () => { + const fixtureName = 'issues/open-issue.html'; + preloadFixtures(fixtureName); + let mock; + + beforeEach(() => { + loadFixtures(fixtureName); + mock = new MockAdapter(axios); + new Sidebar(); // eslint-disable-line no-new + $aside = $('.right-sidebar'); + $page = $('.layout-page'); + $icon = $aside.find('i'); + $toggle = $aside.find('.js-sidebar-toggle'); + $labelsIcon = $aside.find('.sidebar-collapsed-icon'); + }); + + afterEach(() => { + mock.restore(); + }); + + it('should expand/collapse the sidebar when arrow is clicked', () => { + assertSidebarState('expanded'); + $toggle.click(); + assertSidebarState('collapsed'); + $toggle.click(); + assertSidebarState('expanded'); + }); + + it('should float over the page and when sidebar icons clicked', () => { + $labelsIcon.click(); + assertSidebarState('expanded'); + }); + + it('should collapse when the icon arrow clicked while it is floating on page', () => { + $labelsIcon.click(); + assertSidebarState('expanded'); + $toggle.click(); + assertSidebarState('collapsed'); + }); + + it('should broadcast todo:toggle event when add todo clicked', done => { + const todos = getJSONFixture('todos/todos.json'); + mock.onPost(/(.*)\/todos$/).reply(200, todos); + + const todoToggleSpy = jest.fn(); + $(document).on('todo:toggle', todoToggleSpy); + + $('.issuable-sidebar-header .js-issuable-todo').click(); + + setImmediate(() => { + expect(todoToggleSpy.mock.calls.length).toEqual(1); + + done(); + }); + }); + + it('should not hide collapsed icons', () => { + [].forEach.call(document.querySelectorAll('.sidebar-collapsed-icon'), el => { + expect(el.querySelector('.fa, svg').classList.contains('hidden')).toBeFalsy(); + }); + }); + }); +}); diff --git a/spec/frontend/shortcuts_spec.js b/spec/frontend/shortcuts_spec.js new file mode 100644 index 00000000000..3d16074154c --- /dev/null +++ b/spec/frontend/shortcuts_spec.js @@ -0,0 +1,46 @@ +import $ from 'jquery'; +import Shortcuts from '~/behaviors/shortcuts/shortcuts'; + +describe('Shortcuts', () => { + const fixtureName = 'snippets/show.html'; + const createEvent = (type, target) => + $.Event(type, { + target, + }); + + preloadFixtures(fixtureName); + + describe('toggleMarkdownPreview', () => { + beforeEach(() => { + loadFixtures(fixtureName); + + jest.spyOn(document.querySelector('.js-new-note-form .js-md-preview-button'), 'focus'); + jest.spyOn(document.querySelector('.edit-note .js-md-preview-button'), 'focus'); + + new Shortcuts(); // eslint-disable-line no-new + }); + + it('focuses preview button in form', () => { + Shortcuts.toggleMarkdownPreview( + createEvent('KeyboardEvent', document.querySelector('.js-new-note-form .js-note-text')), + ); + + expect( + document.querySelector('.js-new-note-form .js-md-preview-button').focus, + ).toHaveBeenCalled(); + }); + + it('focues preview button inside edit comment form', () => { + document.querySelector('.js-note-edit').click(); + + Shortcuts.toggleMarkdownPreview( + createEvent('KeyboardEvent', document.querySelector('.edit-note .js-note-text')), + ); + + expect( + document.querySelector('.js-new-note-form .js-md-preview-button').focus, + ).not.toHaveBeenCalled(); + expect(document.querySelector('.edit-note .js-md-preview-button').focus).toHaveBeenCalled(); + }); + }); +}); diff --git a/spec/frontend/sidebar/confidential_issue_sidebar_spec.js b/spec/frontend/sidebar/confidential_issue_sidebar_spec.js index e7a64ec5ed9..fe7c3aadeeb 100644 --- a/spec/frontend/sidebar/confidential_issue_sidebar_spec.js +++ b/spec/frontend/sidebar/confidential_issue_sidebar_spec.js @@ -6,11 +6,14 @@ import SidebarService from '~/sidebar/services/sidebar_service'; import createFlash from '~/flash'; import RecaptchaModal from '~/vue_shared/components/recaptcha_modal.vue'; import createStore from '~/notes/stores'; +import { useMockLocationHelper } from 'helpers/mock_window_location_helper'; jest.mock('~/flash'); jest.mock('~/sidebar/services/sidebar_service'); describe('Confidential Issue Sidebar Block', () => { + useMockLocationHelper(); + let wrapper; const findRecaptchaModal = () => wrapper.find(RecaptchaModal); @@ -43,10 +46,6 @@ describe('Confidential Issue Sidebar Block', () => { }); }; - beforeEach(() => { - jest.spyOn(window.location, 'reload').mockImplementation(); - }); - afterEach(() => { wrapper.destroy(); }); diff --git a/spec/frontend/snippets/components/__snapshots__/snippet_blob_edit_spec.js.snap b/spec/frontend/snippets/components/__snapshots__/snippet_blob_edit_spec.js.snap index 301ec5652a9..959bc24eef6 100644 --- a/spec/frontend/snippets/components/__snapshots__/snippet_blob_edit_spec.js.snap +++ b/spec/frontend/snippets/components/__snapshots__/snippet_blob_edit_spec.js.snap @@ -12,7 +12,7 @@ exports[`Snippet Blob Edit component rendering matches the snapshot 1`] = ` class="file-holder snippet" > <blob-header-edit-stub - data-qa-selector="snippet_file_name" + data-qa-selector="file_name_field" value="lorem.txt" /> diff --git a/spec/frontend/snippets/components/__snapshots__/snippet_description_edit_spec.js.snap b/spec/frontend/snippets/components/__snapshots__/snippet_description_edit_spec.js.snap index 9fd4cba5b87..297ad16b681 100644 --- a/spec/frontend/snippets/components/__snapshots__/snippet_description_edit_spec.js.snap +++ b/spec/frontend/snippets/components/__snapshots__/snippet_description_edit_spec.js.snap @@ -4,7 +4,9 @@ exports[`Snippet Description Edit component rendering matches the snapshot 1`] = <div class="form-group js-description-input" > - <label> + <label + for="snippet-description" + > Description (optional) </label> @@ -21,27 +23,67 @@ exports[`Snippet Description Edit component rendering matches the snapshot 1`] = /> </div> - <markdown-field-stub - addspacingclasses="true" - canattachfile="true" - class="js-expanded" - enableautocomplete="true" - helppagepath="" - markdowndocspath="help/" - markdownpreviewpath="foo/" - note="[object Object]" - quickactionsdocspath="" - textareavalue="" + <div + class="js-vue-markdown-field md-area position-relative js-expanded gfm-form" > - <textarea - aria-label="Description" - class="note-textarea js-gfm-input js-autosize markdown-area" - data-qa-selector="snippet_description_field" - data-supports-quick-actions="false" - dir="auto" - placeholder="Write a comment or drag your files here…" + <markdown-header-stub + linecontent="" /> - </markdown-field-stub> + + <div + class="md-write-holder" + > + <div + class="zen-backdrop div-dropzone-wrapper" + > + <div + class="div-dropzone js-invalid-dropzone" + > + <textarea + aria-label="Description" + class="note-textarea js-gfm-input js-autosize markdown-area" + data-qa-selector="snippet_description_field" + data-supports-quick-actions="false" + dir="auto" + id="snippet-description" + placeholder="Write a comment or drag your files here…" + style="overflow-x: hidden; word-wrap: break-word; overflow-y: hidden;" + /> + <div + class="div-dropzone-hover" + > + <i + class="fa fa-paperclip div-dropzone-icon" + /> + </div> + </div> + + <a + aria-label="Leave zen mode" + class="zen-control zen-control-leave js-zen-leave gl-text-gray-700" + href="#" + > + <icon-stub + name="screen-normal" + size="16" + /> + </a> + + <markdown-toolbar-stub + canattachfile="true" + markdowndocspath="help/" + quickactionsdocspath="" + /> + </div> + </div> + + <div + class="js-vue-md-preview md md-preview-holder" + style="display: none;" + /> + + <!----> + </div> </div> </div> `; diff --git a/spec/frontend/snippets/components/__snapshots__/snippet_description_view_spec.js.snap b/spec/frontend/snippets/components/__snapshots__/snippet_description_view_spec.js.snap index 9ebc4e81baf..9fb43815cbc 100644 --- a/spec/frontend/snippets/components/__snapshots__/snippet_description_view_spec.js.snap +++ b/spec/frontend/snippets/components/__snapshots__/snippet_description_view_spec.js.snap @@ -3,7 +3,7 @@ exports[`Snippet Description component matches the snapshot 1`] = ` <markdown-field-view-stub class="snippet-description" - data-qa-selector="snippet_description_field" + data-qa-selector="snippet_description_content" > <div class="md js-snippet-description" diff --git a/spec/frontend/snippets/components/edit_spec.js b/spec/frontend/snippets/components/edit_spec.js index ba62a0a92ca..83f46dd347f 100644 --- a/spec/frontend/snippets/components/edit_spec.js +++ b/spec/frontend/snippets/components/edit_spec.js @@ -1,5 +1,6 @@ import { shallowMount } from '@vue/test-utils'; import axios from '~/lib/utils/axios_utils'; +import Flash from '~/flash'; import { GlLoadingIcon } from '@gitlab/ui'; import { joinPaths, redirectTo } from '~/lib/utils/url_utility'; @@ -10,6 +11,7 @@ import SnippetVisibilityEdit from '~/snippets/components/snippet_visibility_edit import SnippetBlobEdit from '~/snippets/components/snippet_blob_edit.vue'; import TitleField from '~/vue_shared/components/form/title.vue'; import FormFooterActions from '~/vue_shared/components/form/form_footer_actions.vue'; +import { SNIPPET_CREATE_MUTATION_ERROR, SNIPPET_UPDATE_MUTATION_ERROR } from '~/snippets/constants'; import UpdateSnippetMutation from '~/snippets/mutations/updateSnippet.mutation.graphql'; import CreateSnippetMutation from '~/snippets/mutations/createSnippet.mutation.graphql'; @@ -27,6 +29,8 @@ jest.mock('~/lib/utils/url_utility', () => ({ .mockReturnValue('contentApiURL'), })); +jest.mock('~/flash'); + let flashSpy; const contentMock = 'Foo Bar'; @@ -34,6 +38,10 @@ const rawPathMock = '/foo/bar'; const rawProjectPathMock = '/project/path'; const newlyEditedSnippetUrl = 'http://foo.bar'; const apiError = { message: 'Ufff' }; +const mutationError = 'Bummer'; + +const attachedFilePath1 = 'foo/bar'; +const attachedFilePath2 = 'alpha/beta'; const defaultProps = { snippetGid: 'gid://gitlab/PersonalSnippet/42', @@ -56,10 +64,26 @@ describe('Snippet Edit app', () => { }, }); + const resolveMutateWithErrors = jest.fn().mockResolvedValue({ + data: { + updateSnippet: { + errors: [mutationError], + snippet: { + webUrl: newlyEditedSnippetUrl, + }, + }, + createSnippet: { + errors: [mutationError], + snippet: null, + }, + }, + }); + const rejectMutation = jest.fn().mockRejectedValue(apiError); const mutationTypes = { RESOLVE: resolveMutate, + RESOLVE_WITH_ERRORS: resolveMutateWithErrors, REJECT: rejectMutation, }; @@ -99,8 +123,9 @@ describe('Snippet Edit app', () => { wrapper.destroy(); }); - const findSubmitButton = () => wrapper.find('[type=submit]'); + const findSubmitButton = () => wrapper.find('[data-testid="snippet-submit-btn"]'); const findCancellButton = () => wrapper.find('[data-testid="snippet-cancel-btn"]'); + const clickSubmitBtn = () => wrapper.find('[data-testid="snippet-edit-form"]').trigger('submit'); describe('rendering', () => { it('renders loader while the query is in flight', () => { @@ -268,28 +293,131 @@ describe('Snippet Edit app', () => { }, }; - wrapper.vm.handleFormSubmit(); + clickSubmitBtn(); + expect(resolveMutate).toHaveBeenCalledWith(mutationPayload); }); it('redirects to snippet view on successful mutation', () => { createComponent(); - wrapper.vm.handleFormSubmit(); + clickSubmitBtn(); + return waitForPromises().then(() => { expect(redirectTo).toHaveBeenCalledWith(newlyEditedSnippetUrl); }); }); + it.each` + newSnippet | projectPath | mutationName + ${true} | ${rawProjectPathMock} | ${'CreateSnippetMutation with projectPath'} + ${true} | ${''} | ${'CreateSnippetMutation without projectPath'} + ${false} | ${rawProjectPathMock} | ${'UpdateSnippetMutation with projectPath'} + ${false} | ${''} | ${'UpdateSnippetMutation without projectPath'} + `( + 'does not redirect to snippet view if the seemingly successful' + + ' $mutationName response contains errors', + ({ newSnippet, projectPath }) => { + createComponent({ + data: { + newSnippet, + }, + props: { + ...defaultProps, + projectPath, + }, + mutationRes: mutationTypes.RESOLVE_WITH_ERRORS, + }); + + clickSubmitBtn(); + + return waitForPromises().then(() => { + expect(redirectTo).not.toHaveBeenCalled(); + expect(flashSpy).toHaveBeenCalledWith(mutationError); + }); + }, + ); + it('flashes an error if mutation failed', () => { createComponent({ mutationRes: mutationTypes.REJECT, }); - wrapper.vm.handleFormSubmit(); + + clickSubmitBtn(); + return waitForPromises().then(() => { expect(redirectTo).not.toHaveBeenCalled(); expect(flashSpy).toHaveBeenCalledWith(apiError); }); }); + + it.each` + isNew | status | expectation + ${true} | ${`new`} | ${SNIPPET_CREATE_MUTATION_ERROR.replace('%{err}', '')} + ${false} | ${`existing`} | ${SNIPPET_UPDATE_MUTATION_ERROR.replace('%{err}', '')} + `( + `renders the correct error message if mutation fails for $status snippet`, + ({ isNew, expectation }) => { + createComponent({ + data: { + newSnippet: isNew, + }, + mutationRes: mutationTypes.REJECT, + }); + + clickSubmitBtn(); + + return waitForPromises().then(() => { + expect(Flash).toHaveBeenCalledWith(expect.stringContaining(expectation)); + }); + }, + ); + }); + + describe('correctly includes attached files into the mutation', () => { + const createMutationPayload = expectation => { + return expect.objectContaining({ + variables: { + input: expect.objectContaining({ uploadedFiles: expectation }), + }, + }); + }; + + const updateMutationPayload = () => { + return expect.objectContaining({ + variables: { + input: expect.not.objectContaining({ uploadedFiles: expect.anything() }), + }, + }); + }; + + it.each` + paths | expectation + ${[attachedFilePath1]} | ${[attachedFilePath1]} + ${[attachedFilePath1, attachedFilePath2]} | ${[attachedFilePath1, attachedFilePath2]} + ${[]} | ${[]} + `(`correctly sends paths for $paths.length files`, ({ paths, expectation }) => { + createComponent({ + data: { + newSnippet: true, + }, + }); + + const fixtures = paths.map(path => { + return path ? `<input name="files[]" value="${path}">` : undefined; + }); + wrapper.vm.$el.innerHTML += fixtures.join(''); + + clickSubmitBtn(); + + expect(resolveMutate).toHaveBeenCalledWith(createMutationPayload(expectation)); + }); + + it(`neither fails nor sends 'uploadedFiles' to update mutation`, () => { + createComponent(); + + clickSubmitBtn(); + expect(resolveMutate).toHaveBeenCalledWith(updateMutationPayload()); + }); }); }); }); diff --git a/spec/frontend/snippets/components/snippet_blob_view_spec.js b/spec/frontend/snippets/components/snippet_blob_view_spec.js index d06489cffa9..e4d8ee9b7df 100644 --- a/spec/frontend/snippets/components/snippet_blob_view_spec.js +++ b/spec/frontend/snippets/components/snippet_blob_view_spec.js @@ -3,7 +3,11 @@ import SnippetBlobView from '~/snippets/components/snippet_blob_view.vue'; import BlobHeader from '~/blob/components/blob_header.vue'; import BlobEmbeddable from '~/blob/components/blob_embeddable.vue'; import BlobContent from '~/blob/components/blob_content.vue'; -import { BLOB_RENDER_EVENT_LOAD, BLOB_RENDER_EVENT_SHOW_SOURCE } from '~/blob/components/constants'; +import { + BLOB_RENDER_EVENT_LOAD, + BLOB_RENDER_EVENT_SHOW_SOURCE, + BLOB_RENDER_ERRORS, +} from '~/blob/components/constants'; import { RichViewer, SimpleViewer } from '~/vue_shared/components/blob_viewers'; import { SNIPPET_VISIBILITY_PRIVATE, @@ -109,6 +113,20 @@ describe('Blob Embeddable', () => { }); }); + it('passes information about render error down to blob header', () => { + createComponent({ + blob: { + ...BlobMock, + simpleViewer: { + ...SimpleViewerMock, + renderError: BLOB_RENDER_ERRORS.REASONS.COLLAPSED.id, + }, + }, + }); + + expect(wrapper.find(BlobHeader).props('hasRenderError')).toBe(true); + }); + describe('URLS with hash', () => { beforeEach(() => { window.location.hash = '#LC2'; diff --git a/spec/frontend/snippets/components/snippet_description_edit_spec.js b/spec/frontend/snippets/components/snippet_description_edit_spec.js index c5e667747c6..816ab4e48de 100644 --- a/spec/frontend/snippets/components/snippet_description_edit_spec.js +++ b/spec/frontend/snippets/components/snippet_description_edit_spec.js @@ -1,4 +1,5 @@ import SnippetDescriptionEdit from '~/snippets/components/snippet_description_edit.vue'; +import MarkdownField from '~/vue_shared/components/markdown/field.vue'; import { shallowMount } from '@vue/test-utils'; describe('Snippet Description Edit component', () => { @@ -15,6 +16,9 @@ describe('Snippet Description Edit component', () => { markdownPreviewPath, markdownDocsPath, }, + stubs: { + MarkdownField, + }, }); } diff --git a/spec/frontend/static_site_editor/components/edit_area_spec.js b/spec/frontend/static_site_editor/components/edit_area_spec.js index bfe41f65d6e..d7c798e6620 100644 --- a/spec/frontend/static_site_editor/components/edit_area_spec.js +++ b/spec/frontend/static_site_editor/components/edit_area_spec.js @@ -5,13 +5,19 @@ import RichContentEditor from '~/vue_shared/components/rich_content_editor/rich_ import EditArea from '~/static_site_editor/components/edit_area.vue'; import PublishToolbar from '~/static_site_editor/components/publish_toolbar.vue'; import EditHeader from '~/static_site_editor/components/edit_header.vue'; +import UnsavedChangesConfirmDialog from '~/static_site_editor/components/unsaved_changes_confirm_dialog.vue'; -import { sourceContentTitle as title, sourceContent as content, returnUrl } from '../mock_data'; +import { + sourceContentTitle as title, + sourceContent as content, + sourceContentBody as body, + returnUrl, +} from '../mock_data'; describe('~/static_site_editor/components/edit_area.vue', () => { let wrapper; const savingChanges = true; - const newContent = `new ${content}`; + const newBody = `new ${body}`; const buildWrapper = (propsData = {}) => { wrapper = shallowMount(EditArea, { @@ -28,6 +34,7 @@ describe('~/static_site_editor/components/edit_area.vue', () => { const findEditHeader = () => wrapper.find(EditHeader); const findRichContentEditor = () => wrapper.find(RichContentEditor); const findPublishToolbar = () => wrapper.find(PublishToolbar); + const findUnsavedChangesConfirmDialog = () => wrapper.find(UnsavedChangesConfirmDialog); beforeEach(() => { buildWrapper(); @@ -44,29 +51,40 @@ describe('~/static_site_editor/components/edit_area.vue', () => { it('renders rich content editor', () => { expect(findRichContentEditor().exists()).toBe(true); - expect(findRichContentEditor().props('value')).toBe(content); + expect(findRichContentEditor().props('value')).toBe(body); }); it('renders publish toolbar', () => { expect(findPublishToolbar().exists()).toBe(true); - expect(findPublishToolbar().props('returnUrl')).toBe(returnUrl); - expect(findPublishToolbar().props('savingChanges')).toBe(savingChanges); - expect(findPublishToolbar().props('saveable')).toBe(false); + expect(findPublishToolbar().props()).toMatchObject({ + returnUrl, + savingChanges, + saveable: false, + }); + }); + + it('renders unsaved changes confirm dialog', () => { + expect(findUnsavedChangesConfirmDialog().exists()).toBe(true); + expect(findUnsavedChangesConfirmDialog().props('modified')).toBe(false); }); describe('when content changes', () => { beforeEach(() => { - findRichContentEditor().vm.$emit('input', newContent); + findRichContentEditor().vm.$emit('input', newBody); return wrapper.vm.$nextTick(); }); - it('sets publish toolbar as saveable when content changes', () => { + it('sets publish toolbar as saveable', () => { expect(findPublishToolbar().props('saveable')).toBe(true); }); + it('sets unsaved changes confirm dialog as modified', () => { + expect(findUnsavedChangesConfirmDialog().props('modified')).toBe(true); + }); + it('sets publish toolbar as not saveable when content changes are rollback', () => { - findRichContentEditor().vm.$emit('input', content); + findRichContentEditor().vm.$emit('input', body); return wrapper.vm.$nextTick().then(() => { expect(findPublishToolbar().props('saveable')).toBe(false); diff --git a/spec/frontend/static_site_editor/components/unsaved_changes_confirm_dialog_spec.js b/spec/frontend/static_site_editor/components/unsaved_changes_confirm_dialog_spec.js new file mode 100644 index 00000000000..9b8b22da693 --- /dev/null +++ b/spec/frontend/static_site_editor/components/unsaved_changes_confirm_dialog_spec.js @@ -0,0 +1,44 @@ +import { shallowMount } from '@vue/test-utils'; + +import UnsavedChangesConfirmDialog from '~/static_site_editor/components/unsaved_changes_confirm_dialog.vue'; + +describe('static_site_editor/components/unsaved_changes_confirm_dialog', () => { + let wrapper; + let event; + let returnValueSetter; + + const buildWrapper = (propsData = {}) => { + wrapper = shallowMount(UnsavedChangesConfirmDialog, { + propsData, + }); + }; + + beforeEach(() => { + event = new Event('beforeunload'); + + jest.spyOn(event, 'preventDefault'); + returnValueSetter = jest.spyOn(event, 'returnValue', 'set'); + }); + + afterEach(() => { + event.preventDefault.mockRestore(); + returnValueSetter.mockRestore(); + wrapper.destroy(); + }); + + it('displays confirmation dialog when modified = true', () => { + buildWrapper({ modified: true }); + window.dispatchEvent(event); + + expect(event.preventDefault).toHaveBeenCalled(); + expect(returnValueSetter).toHaveBeenCalledWith(''); + }); + + it('does not display confirmation dialog when modified = false', () => { + buildWrapper(); + window.dispatchEvent(event); + + expect(event.preventDefault).not.toHaveBeenCalled(); + expect(returnValueSetter).not.toHaveBeenCalled(); + }); +}); diff --git a/spec/frontend/static_site_editor/mock_data.js b/spec/frontend/static_site_editor/mock_data.js index 371695e913e..422048a5f69 100644 --- a/spec/frontend/static_site_editor/mock_data.js +++ b/spec/frontend/static_site_editor/mock_data.js @@ -1,16 +1,17 @@ -export const sourceContent = ` ---- +export const sourceContentHeader = `--- layout: handbook-page-toc title: Handbook twitter_image: '/images/tweets/handbook-gitlab.png' ---- - -## On this page +---`; +export const sourceContentSpacing = ` +`; +export const sourceContentBody = `## On this page {:.no_toc .hidden-md .hidden-lg} - TOC {:toc .hidden-md .hidden-lg} `; +export const sourceContent = `${sourceContentHeader}${sourceContentSpacing}${sourceContentBody}`; export const sourceContentTitle = 'Handbook'; export const username = 'gitlabuser'; diff --git a/spec/frontend/static_site_editor/pages/home_spec.js b/spec/frontend/static_site_editor/pages/home_spec.js index 8c9c54f593e..d3ee70785d1 100644 --- a/spec/frontend/static_site_editor/pages/home_spec.js +++ b/spec/frontend/static_site_editor/pages/home_spec.js @@ -7,6 +7,8 @@ import InvalidContentMessage from '~/static_site_editor/components/invalid_conte import SubmitChangesError from '~/static_site_editor/components/submit_changes_error.vue'; import submitContentChangesMutation from '~/static_site_editor/graphql/mutations/submit_content_changes.mutation.graphql'; import { SUCCESS_ROUTE } from '~/static_site_editor/router/constants'; +import { mockTracking, unmockTracking } from 'helpers/tracking_helper'; +import { TRACKING_ACTION_INITIALIZE_EDITOR } from '~/static_site_editor/constants'; import { projectId as project, @@ -17,6 +19,7 @@ import { username, savedContentMeta, submitChangesError, + trackingCategory, } from '../mock_data'; const localVue = createLocalVue(); @@ -29,6 +32,7 @@ describe('static_site_editor/pages/home', () => { let $apollo; let $router; let mutateMock; + let trackingSpy; const buildApollo = (queries = {}) => { mutateMock = jest.fn(); @@ -76,10 +80,14 @@ describe('static_site_editor/pages/home', () => { beforeEach(() => { buildApollo(); buildRouter(); + + document.body.dataset.page = trackingCategory; + trackingSpy = mockTracking(document.body.dataset.page, undefined, jest.spyOn); }); afterEach(() => { wrapper.destroy(); + unmockTracking(); wrapper = null; $apollo = null; }); @@ -208,4 +216,12 @@ describe('static_site_editor/pages/home', () => { expect($router.push).toHaveBeenCalledWith(SUCCESS_ROUTE); }); }); + + it('tracks when editor is initialized on the mounted lifecycle hook', () => { + buildWrapper(); + expect(trackingSpy).toHaveBeenCalledWith( + document.body.dataset.page, + TRACKING_ACTION_INITIALIZE_EDITOR, + ); + }); }); diff --git a/spec/frontend/static_site_editor/services/parse_source_file_spec.js b/spec/frontend/static_site_editor/services/parse_source_file_spec.js new file mode 100644 index 00000000000..fe99c4f5334 --- /dev/null +++ b/spec/frontend/static_site_editor/services/parse_source_file_spec.js @@ -0,0 +1,64 @@ +import { + sourceContent as content, + sourceContentHeader as header, + sourceContentSpacing as spacing, + sourceContentBody as body, +} from '../mock_data'; + +import parseSourceFile from '~/static_site_editor/services/parse_source_file'; + +describe('parseSourceFile', () => { + const contentSimple = content; + const contentComplex = [content, content, content].join(''); + + describe('the editable shape and its expected values', () => { + it.each` + sourceContent | sourceHeader | sourceSpacing | sourceBody | desc + ${contentSimple} | ${header} | ${spacing} | ${body} | ${'extracts header'} + ${contentComplex} | ${header} | ${spacing} | ${[body, content, content].join('')} | ${'extracts body'} + `('$desc', ({ sourceContent, sourceHeader, sourceSpacing, sourceBody }) => { + const { editable } = parseSourceFile(sourceContent); + + expect(editable).toMatchObject({ + raw: sourceContent, + header: sourceHeader, + spacing: sourceSpacing, + body: sourceBody, + }); + }); + + it('returns the same front matter regardless of front matter duplication', () => { + const parsedSourceSimple = parseSourceFile(contentSimple); + const parsedSourceComplex = parseSourceFile(contentComplex); + + expect(parsedSourceSimple.editable.header).toBe(parsedSourceComplex.editable.header); + }); + }); + + describe('editable body to raw content default and changes', () => { + it.each` + sourceContent | desc + ${contentSimple} | ${'returns false by default for both raw and body'} + ${contentComplex} | ${'returns false by default for both raw and body'} + `('$desc', ({ sourceContent }) => { + const parsedSource = parseSourceFile(sourceContent); + + expect(parsedSource.isModifiedRaw()).toBe(false); + expect(parsedSource.isModifiedBody()).toBe(false); + }); + + it.each` + sourceContent | editableKey | syncKey | isModifiedKey | desc + ${contentSimple} | ${'body'} | ${'syncRaw'} | ${'isModifiedRaw'} | ${'returns true after modification and sync'} + ${contentSimple} | ${'raw'} | ${'syncBody'} | ${'isModifiedBody'} | ${'returns true after modification and sync'} + ${contentComplex} | ${'body'} | ${'syncRaw'} | ${'isModifiedRaw'} | ${'returns true after modification and sync'} + ${contentComplex} | ${'raw'} | ${'syncBody'} | ${'isModifiedBody'} | ${'returns true after modification and sync'} + `('$desc', ({ sourceContent, editableKey, syncKey, isModifiedKey }) => { + const parsedSource = parseSourceFile(sourceContent); + parsedSource.editable[editableKey] += 'Added content'; + parsedSource[syncKey](); + + expect(parsedSource[isModifiedKey]()).toBe(true); + }); + }); +}); diff --git a/spec/frontend/static_site_editor/services/submit_content_changes_spec.js b/spec/frontend/static_site_editor/services/submit_content_changes_spec.js index a1e9ff4ec4c..3636de3fe70 100644 --- a/spec/frontend/static_site_editor/services/submit_content_changes_spec.js +++ b/spec/frontend/static_site_editor/services/submit_content_changes_spec.js @@ -8,6 +8,7 @@ import { SUBMIT_CHANGES_COMMIT_ERROR, SUBMIT_CHANGES_MERGE_REQUEST_ERROR, TRACKING_ACTION_CREATE_COMMIT, + TRACKING_ACTION_CREATE_MERGE_REQUEST, } from '~/static_site_editor/constants'; import generateBranchName from '~/static_site_editor/services/generate_branch_name'; import submitContentChanges from '~/static_site_editor/services/submit_content_changes'; @@ -83,15 +84,6 @@ describe('submitContentChanges', () => { }); }); - it('sends the correct tracking event when committing content changes', () => { - return submitContentChanges({ username, projectId, sourcePath, content }).then(() => { - expect(trackingSpy).toHaveBeenCalledWith( - document.body.dataset.page, - TRACKING_ACTION_CREATE_COMMIT, - ); - }); - }); - it('notifies error when content could not be committed', () => { Api.commitMultiple.mockRejectedValueOnce(); @@ -152,4 +144,24 @@ describe('submitContentChanges', () => { }); }); }); + + describe('sends the correct tracking event', () => { + beforeEach(() => { + return submitContentChanges({ username, projectId, sourcePath, content }); + }); + + it('for committing changes', () => { + expect(trackingSpy).toHaveBeenCalledWith( + document.body.dataset.page, + TRACKING_ACTION_CREATE_COMMIT, + ); + }); + + it('for creating a merge request', () => { + expect(trackingSpy).toHaveBeenCalledWith( + document.body.dataset.page, + TRACKING_ACTION_CREATE_MERGE_REQUEST, + ); + }); + }); }); diff --git a/spec/frontend/test_setup.js b/spec/frontend/test_setup.js index e216f49630f..49eae715a45 100644 --- a/spec/frontend/test_setup.js +++ b/spec/frontend/test_setup.js @@ -43,15 +43,6 @@ 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]) => { // Don't override existing Jest matcher @@ -69,12 +60,6 @@ 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(); diff --git a/spec/frontend/toggle_buttons_spec.js b/spec/frontend/toggle_buttons_spec.js new file mode 100644 index 00000000000..09a4bd53c09 --- /dev/null +++ b/spec/frontend/toggle_buttons_spec.js @@ -0,0 +1,115 @@ +import $ from 'jquery'; +import setupToggleButtons from '~/toggle_buttons'; +import waitForPromises from './helpers/wait_for_promises'; + +function generateMarkup(isChecked = true) { + return ` + <button type="button" class="${isChecked ? 'is-checked' : ''} js-project-feature-toggle"> + <input type="hidden" class="js-project-feature-toggle-input" value="${isChecked}" /> + </button> + `; +} + +function setupFixture(isChecked, clickCallback) { + const wrapper = document.createElement('div'); + wrapper.innerHTML = generateMarkup(isChecked); + + setupToggleButtons(wrapper, clickCallback); + + return wrapper; +} + +describe('ToggleButtons', () => { + describe('when input value is true', () => { + it('should initialize as checked', () => { + const wrapper = setupFixture(true); + + expect( + wrapper.querySelector('.js-project-feature-toggle').classList.contains('is-checked'), + ).toEqual(true); + + expect(wrapper.querySelector('.js-project-feature-toggle-input').value).toEqual('true'); + }); + + it('should toggle to unchecked when clicked', () => { + const wrapper = setupFixture(true); + const toggleButton = wrapper.querySelector('.js-project-feature-toggle'); + + toggleButton.click(); + + return waitForPromises().then(() => { + expect(toggleButton.classList.contains('is-checked')).toEqual(false); + expect(wrapper.querySelector('.js-project-feature-toggle-input').value).toEqual('false'); + }); + }); + }); + + describe('when input value is false', () => { + it('should initialize as unchecked', () => { + const wrapper = setupFixture(false); + + expect( + wrapper.querySelector('.js-project-feature-toggle').classList.contains('is-checked'), + ).toEqual(false); + + expect(wrapper.querySelector('.js-project-feature-toggle-input').value).toEqual('false'); + }); + + it('should toggle to checked when clicked', () => { + const wrapper = setupFixture(false); + const toggleButton = wrapper.querySelector('.js-project-feature-toggle'); + + toggleButton.click(); + + return waitForPromises().then(() => { + expect(toggleButton.classList.contains('is-checked')).toEqual(true); + expect(wrapper.querySelector('.js-project-feature-toggle-input').value).toEqual('true'); + }); + }); + }); + + it('should emit `trigger-change` event', () => { + const changeSpy = jest.fn(); + const wrapper = setupFixture(false); + const toggleButton = wrapper.querySelector('.js-project-feature-toggle'); + const input = wrapper.querySelector('.js-project-feature-toggle-input'); + + $(input).on('trigger-change', changeSpy); + + toggleButton.click(); + + return waitForPromises().then(() => { + expect(changeSpy).toHaveBeenCalled(); + }); + }); + + describe('clickCallback', () => { + it('should show loading indicator while waiting', () => { + const isChecked = true; + const clickCallback = (newValue, toggleButton) => { + const input = toggleButton.querySelector('.js-project-feature-toggle-input'); + + expect(newValue).toEqual(false); + + // Check for the loading state + expect(toggleButton.classList.contains('is-checked')).toEqual(false); + expect(toggleButton.classList.contains('is-loading')).toEqual(true); + expect(toggleButton.disabled).toEqual(true); + expect(input.value).toEqual('true'); + + // After the callback finishes, check that the loading state is gone + return waitForPromises().then(() => { + expect(toggleButton.classList.contains('is-checked')).toEqual(false); + expect(toggleButton.classList.contains('is-loading')).toEqual(false); + expect(toggleButton.disabled).toEqual(false); + expect(input.value).toEqual('false'); + }); + }; + + const wrapper = setupFixture(isChecked, clickCallback); + const toggleButton = wrapper.querySelector('.js-project-feature-toggle'); + + toggleButton.click(); + }); + }); +}); diff --git a/spec/frontend/tracking_spec.js b/spec/frontend/tracking_spec.js index 08a26d46618..8acfa655c2c 100644 --- a/spec/frontend/tracking_spec.js +++ b/spec/frontend/tracking_spec.js @@ -121,11 +121,6 @@ describe('Tracking', () => { describe('tracking interface events', () => { let eventSpy; - const trigger = (selector, eventName = 'click') => { - const event = new Event(eventName, { bubbles: true }); - document.querySelector(selector).dispatchEvent(event); - }; - beforeEach(() => { eventSpy = jest.spyOn(Tracking, 'event'); Tracking.bindDocument('_category_'); // only happens once @@ -140,7 +135,7 @@ describe('Tracking', () => { }); it('binds to clicks on elements matching [data-track-event]', () => { - trigger('[data-track-event="click_input1"]'); + document.querySelector('[data-track-event="click_input1"]').click(); expect(eventSpy).toHaveBeenCalledWith('_category_', 'click_input1', { label: '_label_', @@ -149,13 +144,13 @@ describe('Tracking', () => { }); it('does not bind to clicks on elements without [data-track-event]', () => { - trigger('[data-track-eventbogus="click_bogusinput"]'); + document.querySelector('[data-track-eventbogus="click_bogusinput"]').click(); expect(eventSpy).not.toHaveBeenCalled(); }); it('allows value override with the data-track-value attribute', () => { - trigger('[data-track-event="click_input2"]'); + document.querySelector('[data-track-event="click_input2"]').click(); expect(eventSpy).toHaveBeenCalledWith('_category_', 'click_input2', { value: '_value_override_', @@ -163,13 +158,15 @@ describe('Tracking', () => { }); it('handles checkbox values correctly', () => { - trigger('[data-track-event="toggle_checkbox"]'); // checking + const checkbox = document.querySelector('[data-track-event="toggle_checkbox"]'); + + checkbox.click(); // unchecking expect(eventSpy).toHaveBeenCalledWith('_category_', 'toggle_checkbox', { value: false, }); - trigger('[data-track-event="toggle_checkbox"]'); // unchecking + checkbox.click(); // checking expect(eventSpy).toHaveBeenCalledWith('_category_', 'toggle_checkbox', { value: '_value_', @@ -177,17 +174,19 @@ describe('Tracking', () => { }); it('handles bootstrap dropdowns', () => { - trigger('[data-track-event="toggle_dropdown"]', 'show.bs.dropdown'); // showing + const dropdown = document.querySelector('[data-track-event="toggle_dropdown"]'); + + dropdown.dispatchEvent(new Event('show.bs.dropdown', { bubbles: true })); expect(eventSpy).toHaveBeenCalledWith('_category_', 'toggle_dropdown_show', {}); - trigger('[data-track-event="toggle_dropdown"]', 'hide.bs.dropdown'); // hiding + dropdown.dispatchEvent(new Event('hide.bs.dropdown', { bubbles: true })); expect(eventSpy).toHaveBeenCalledWith('_category_', 'toggle_dropdown_hide', {}); }); it('handles nested elements inside an element with tracking', () => { - trigger('span.nested', 'click'); + document.querySelector('span.nested').click(); expect(eventSpy).toHaveBeenCalledWith('_category_', 'nested_event', {}); }); diff --git a/spec/frontend/user_popovers_spec.js b/spec/frontend/user_popovers_spec.js new file mode 100644 index 00000000000..0367b9cc924 --- /dev/null +++ b/spec/frontend/user_popovers_spec.js @@ -0,0 +1,99 @@ +import initUserPopovers from '~/user_popovers'; +import UsersCache from '~/lib/utils/users_cache'; + +describe('User Popovers', () => { + const fixtureTemplate = 'merge_requests/merge_request_with_mentions.html'; + preloadFixtures(fixtureTemplate); + + const selector = '.js-user-link, .gfm-project_member'; + + const dummyUser = { name: 'root' }; + const dummyUserStatus = { message: 'active' }; + + let popovers; + + const triggerEvent = (eventName, el) => { + const event = new MouseEvent(eventName, { + bubbles: true, + cancelable: true, + view: window, + }); + + el.dispatchEvent(event); + }; + + beforeEach(() => { + loadFixtures(fixtureTemplate); + + const usersCacheSpy = () => Promise.resolve(dummyUser); + jest.spyOn(UsersCache, 'retrieveById').mockImplementation(userId => usersCacheSpy(userId)); + + const userStatusCacheSpy = () => Promise.resolve(dummyUserStatus); + jest + .spyOn(UsersCache, 'retrieveStatusById') + .mockImplementation(userId => userStatusCacheSpy(userId)); + + popovers = initUserPopovers(document.querySelectorAll(selector)); + }); + + it('initializes a popover for each user link with a user id', () => { + const linksWithUsers = Array.from(document.querySelectorAll(selector)).filter( + ({ dataset }) => dataset.user || dataset.userId, + ); + + expect(linksWithUsers.length).toBe(popovers.length); + }); + + it('does not initialize the user popovers twice for the same element', () => { + const newPopovers = initUserPopovers(document.querySelectorAll(selector)); + const samePopovers = popovers.every((popover, index) => newPopovers[index] === popover); + + expect(samePopovers).toBe(true); + }); + + describe('when user link emits mouseenter event', () => { + let userLink; + + beforeEach(() => { + UsersCache.retrieveById.mockReset(); + + userLink = document.querySelector(selector); + + triggerEvent('mouseenter', userLink); + }); + + it('removes title attribute from user links', () => { + expect(userLink.getAttribute('title')).toBeFalsy(); + expect(userLink.dataset.originalTitle).toBeFalsy(); + }); + + it('populates popovers with preloaded user data', () => { + const { name, userId, username } = userLink.dataset; + const [firstPopover] = popovers; + + expect(firstPopover.$props.user).toEqual( + expect.objectContaining({ + name, + userId, + username, + }), + ); + }); + + it('fetches user info and status from the user cache', () => { + const { userId } = userLink.dataset; + + expect(UsersCache.retrieveById).toHaveBeenCalledWith(userId); + expect(UsersCache.retrieveStatusById).toHaveBeenCalledWith(userId); + }); + }); + + it('removes aria-describedby attribute from the user link on mouseleave', () => { + const userLink = document.querySelector(selector); + + userLink.setAttribute('aria-describedby', 'popover'); + triggerEvent('mouseleave', userLink); + + expect(userLink.getAttribute('aria-describedby')).toBe(null); + }); +}); diff --git a/spec/frontend/vue_mr_widget/components/mr_widget_alert_message_spec.js b/spec/frontend/vue_mr_widget/components/mr_widget_alert_message_spec.js new file mode 100644 index 00000000000..f78fcfb52b4 --- /dev/null +++ b/spec/frontend/vue_mr_widget/components/mr_widget_alert_message_spec.js @@ -0,0 +1,76 @@ +import { shallowMount, createLocalVue } from '@vue/test-utils'; +import { GlLink } from '@gitlab/ui'; +import MrWidgetAlertMessage from '~/vue_merge_request_widget/components/mr_widget_alert_message.vue'; + +describe('MrWidgetAlertMessage', () => { + let wrapper; + + beforeEach(() => { + const localVue = createLocalVue(); + + wrapper = shallowMount(localVue.extend(MrWidgetAlertMessage), { + propsData: {}, + localVue, + }); + }); + + afterEach(() => { + wrapper.destroy(); + }); + + describe('when type is not provided', () => { + it('should render a red message', done => { + wrapper.vm.$nextTick(() => { + expect(wrapper.classes()).toContain('danger_message'); + expect(wrapper.classes()).not.toContain('warning_message'); + done(); + }); + }); + }); + + describe('when type === "danger"', () => { + it('should render a red message', done => { + wrapper.setProps({ type: 'danger' }); + wrapper.vm.$nextTick(() => { + expect(wrapper.classes()).toContain('danger_message'); + expect(wrapper.classes()).not.toContain('warning_message'); + done(); + }); + }); + }); + + describe('when type === "warning"', () => { + it('should render a red message', done => { + wrapper.setProps({ type: 'warning' }); + wrapper.vm.$nextTick(() => { + expect(wrapper.classes()).toContain('warning_message'); + expect(wrapper.classes()).not.toContain('danger_message'); + done(); + }); + }); + }); + + describe('when helpPath is not provided', () => { + it('should not render a help icon/link', done => { + wrapper.vm.$nextTick(() => { + const link = wrapper.find(GlLink); + + expect(link.exists()).toBe(false); + done(); + }); + }); + }); + + describe('when helpPath is provided', () => { + it('should render a help icon/link', done => { + wrapper.setProps({ helpPath: '/path/to/help/docs' }); + wrapper.vm.$nextTick(() => { + const link = wrapper.find(GlLink); + + expect(link.exists()).toBe(true); + expect(link.attributes().href).toBe('/path/to/help/docs'); + done(); + }); + }); + }); +}); diff --git a/spec/frontend/vue_mr_widget/components/mr_widget_author_spec.js b/spec/frontend/vue_mr_widget/components/mr_widget_author_spec.js new file mode 100644 index 00000000000..05690aa1248 --- /dev/null +++ b/spec/frontend/vue_mr_widget/components/mr_widget_author_spec.js @@ -0,0 +1,39 @@ +import Vue from 'vue'; +import mountComponent from 'helpers/vue_mount_component_helper'; +import MrWidgetAuthor from '~/vue_merge_request_widget/components/mr_widget_author.vue'; + +describe('MrWidgetAuthor', () => { + let vm; + + beforeEach(() => { + const Component = Vue.extend(MrWidgetAuthor); + + vm = mountComponent(Component, { + author: { + name: 'Administrator', + username: 'root', + webUrl: 'http://localhost:3000/root', + avatarUrl: + 'http://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon', + }, + }); + }); + + afterEach(() => { + vm.$destroy(); + }); + + it('renders link with the author web url', () => { + expect(vm.$el.getAttribute('href')).toEqual('http://localhost:3000/root'); + }); + + it('renders image with avatar url', () => { + expect(vm.$el.querySelector('img').getAttribute('src')).toEqual( + 'http://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon', + ); + }); + + it('renders author name', () => { + expect(vm.$el.textContent.trim()).toEqual('Administrator'); + }); +}); diff --git a/spec/frontend/vue_mr_widget/components/mr_widget_author_time_spec.js b/spec/frontend/vue_mr_widget/components/mr_widget_author_time_spec.js new file mode 100644 index 00000000000..58ed92298bf --- /dev/null +++ b/spec/frontend/vue_mr_widget/components/mr_widget_author_time_spec.js @@ -0,0 +1,44 @@ +import Vue from 'vue'; +import mountComponent from 'helpers/vue_mount_component_helper'; +import MrWidgetAuthorTime from '~/vue_merge_request_widget/components/mr_widget_author_time.vue'; + +describe('MrWidgetAuthorTime', () => { + let vm; + + beforeEach(() => { + const Component = Vue.extend(MrWidgetAuthorTime); + + vm = mountComponent(Component, { + actionText: 'Merged by', + author: { + name: 'Administrator', + username: 'root', + webUrl: 'http://localhost:3000/root', + avatarUrl: + 'http://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon', + }, + dateTitle: '2017-03-23T23:02:00.807Z', + dateReadable: '12 hours ago', + }); + }); + + afterEach(() => { + vm.$destroy(); + }); + + it('renders provided action text', () => { + expect(vm.$el.textContent).toContain('Merged by'); + }); + + it('renders author', () => { + expect(vm.$el.textContent).toContain('Administrator'); + }); + + it('renders provided time', () => { + expect(vm.$el.querySelector('time').getAttribute('data-original-title')).toEqual( + '2017-03-23T23:02:00.807Z', + ); + + expect(vm.$el.querySelector('time').textContent.trim()).toEqual('12 hours ago'); + }); +}); diff --git a/spec/frontend/vue_mr_widget/components/mr_widget_header_spec.js b/spec/frontend/vue_mr_widget/components/mr_widget_header_spec.js new file mode 100644 index 00000000000..b492a69fb3d --- /dev/null +++ b/spec/frontend/vue_mr_widget/components/mr_widget_header_spec.js @@ -0,0 +1,313 @@ +import Vue from 'vue'; +import mountComponent from 'helpers/vue_mount_component_helper'; +import headerComponent from '~/vue_merge_request_widget/components/mr_widget_header.vue'; + +describe('MRWidgetHeader', () => { + let vm; + let Component; + + beforeEach(() => { + Component = Vue.extend(headerComponent); + }); + + afterEach(() => { + vm.$destroy(); + gon.relative_url_root = ''; + }); + + const expectDownloadDropdownItems = () => { + const downloadEmailPatchesEl = vm.$el.querySelector('.js-download-email-patches'); + const downloadPlainDiffEl = vm.$el.querySelector('.js-download-plain-diff'); + + expect(downloadEmailPatchesEl.textContent.trim()).toEqual('Email patches'); + expect(downloadEmailPatchesEl.getAttribute('href')).toEqual('/mr/email-patches'); + expect(downloadPlainDiffEl.textContent.trim()).toEqual('Plain diff'); + expect(downloadPlainDiffEl.getAttribute('href')).toEqual('/mr/plainDiffPath'); + }; + + describe('computed', () => { + describe('shouldShowCommitsBehindText', () => { + it('return true when there are divergedCommitsCount', () => { + vm = mountComponent(Component, { + mr: { + divergedCommitsCount: 12, + sourceBranch: 'mr-widget-refactor', + sourceBranchLink: '<a href="/foo/bar/mr-widget-refactor">Link</a>', + targetBranch: 'master', + statusPath: 'abc', + }, + }); + + expect(vm.shouldShowCommitsBehindText).toEqual(true); + }); + + it('returns false where there are no divergedComits count', () => { + vm = mountComponent(Component, { + mr: { + divergedCommitsCount: 0, + sourceBranch: 'mr-widget-refactor', + sourceBranchLink: '<a href="/foo/bar/mr-widget-refactor">Link</a>', + targetBranch: 'master', + statusPath: 'abc', + }, + }); + + expect(vm.shouldShowCommitsBehindText).toEqual(false); + }); + }); + + describe('commitsBehindText', () => { + it('returns singular when there is one commit', () => { + vm = mountComponent(Component, { + mr: { + divergedCommitsCount: 1, + sourceBranch: 'mr-widget-refactor', + sourceBranchLink: '<a href="/foo/bar/mr-widget-refactor">Link</a>', + targetBranch: 'master', + targetBranchPath: '/foo/bar/master', + statusPath: 'abc', + }, + }); + + expect(vm.commitsBehindText).toEqual( + 'The source branch is <a href="/foo/bar/master">1 commit behind</a> the target branch', + ); + }); + + it('returns plural when there is more than one commit', () => { + vm = mountComponent(Component, { + mr: { + divergedCommitsCount: 2, + sourceBranch: 'mr-widget-refactor', + sourceBranchLink: '<a href="/foo/bar/mr-widget-refactor">Link</a>', + targetBranch: 'master', + targetBranchPath: '/foo/bar/master', + statusPath: 'abc', + }, + }); + + expect(vm.commitsBehindText).toEqual( + 'The source branch is <a href="/foo/bar/master">2 commits behind</a> the target branch', + ); + }); + }); + }); + + describe('template', () => { + describe('common elements', () => { + beforeEach(() => { + vm = mountComponent(Component, { + mr: { + divergedCommitsCount: 12, + sourceBranch: 'mr-widget-refactor', + sourceBranchLink: '<a href="/foo/bar/mr-widget-refactor">mr-widget-refactor</a>', + sourceBranchRemoved: false, + targetBranchPath: 'foo/bar/commits-path', + targetBranchTreePath: 'foo/bar/tree/path', + targetBranch: 'master', + isOpen: true, + emailPatchesPath: '/mr/email-patches', + plainDiffPath: '/mr/plainDiffPath', + statusPath: 'abc', + }, + }); + }); + + it('renders source branch link', () => { + expect(vm.$el.querySelector('.js-source-branch').innerHTML).toEqual( + '<a href="/foo/bar/mr-widget-refactor">mr-widget-refactor</a>', + ); + }); + + it('renders clipboard button', () => { + expect(vm.$el.querySelector('.btn-clipboard')).not.toEqual(null); + }); + + it('renders target branch', () => { + expect(vm.$el.querySelector('.js-target-branch').textContent.trim()).toEqual('master'); + }); + }); + + describe('with an open merge request', () => { + const mrDefaultOptions = { + iid: 1, + divergedCommitsCount: 12, + sourceBranch: 'mr-widget-refactor', + sourceBranchLink: '<a href="/foo/bar/mr-widget-refactor">mr-widget-refactor</a>', + sourceBranchRemoved: false, + targetBranchPath: 'foo/bar/commits-path', + targetBranchTreePath: 'foo/bar/tree/path', + targetBranch: 'master', + isOpen: true, + canPushToSourceBranch: true, + emailPatchesPath: '/mr/email-patches', + plainDiffPath: '/mr/plainDiffPath', + statusPath: 'abc', + sourceProjectFullPath: 'root/gitlab-ce', + targetProjectFullPath: 'gitlab-org/gitlab-ce', + }; + + afterEach(() => { + vm.$destroy(); + }); + + beforeEach(() => { + vm = mountComponent(Component, { + mr: { ...mrDefaultOptions }, + }); + }); + + it('renders checkout branch button with modal trigger', () => { + const button = vm.$el.querySelector('.js-check-out-branch'); + + expect(button.textContent.trim()).toEqual('Check out branch'); + expect(button.getAttribute('data-target')).toEqual('#modal_merge_info'); + expect(button.getAttribute('data-toggle')).toEqual('modal'); + }); + + it('renders web ide button', () => { + const button = vm.$el.querySelector('.js-web-ide'); + + expect(button.textContent.trim()).toEqual('Open in Web IDE'); + expect(button.classList.contains('disabled')).toBe(false); + expect(button.getAttribute('href')).toEqual( + '/-/ide/project/root/gitlab-ce/merge_requests/1?target_project=gitlab-org%2Fgitlab-ce', + ); + }); + + it('renders web ide button in disabled state with no href', () => { + const mr = { ...mrDefaultOptions, canPushToSourceBranch: false }; + vm = mountComponent(Component, { mr }); + + const link = vm.$el.querySelector('.js-web-ide'); + + expect(link.classList.contains('disabled')).toBe(true); + expect(link.getAttribute('href')).toBeNull(); + }); + + it('renders web ide button with blank query string if target & source project branch', done => { + vm.mr.targetProjectFullPath = 'root/gitlab-ce'; + + vm.$nextTick(() => { + const button = vm.$el.querySelector('.js-web-ide'); + + expect(button.textContent.trim()).toEqual('Open in Web IDE'); + expect(button.getAttribute('href')).toEqual( + '/-/ide/project/root/gitlab-ce/merge_requests/1?target_project=', + ); + + done(); + }); + }); + + it('renders web ide button with relative URL', done => { + gon.relative_url_root = '/gitlab'; + vm.mr.iid = 2; + + vm.$nextTick(() => { + const button = vm.$el.querySelector('.js-web-ide'); + + expect(button.textContent.trim()).toEqual('Open in Web IDE'); + expect(button.getAttribute('href')).toEqual( + '/gitlab/-/ide/project/root/gitlab-ce/merge_requests/2?target_project=gitlab-org%2Fgitlab-ce', + ); + + done(); + }); + }); + + it('renders download dropdown with links', () => { + expectDownloadDropdownItems(); + }); + }); + + describe('with a closed merge request', () => { + beforeEach(() => { + vm = mountComponent(Component, { + mr: { + divergedCommitsCount: 12, + sourceBranch: 'mr-widget-refactor', + sourceBranchLink: '<a href="/foo/bar/mr-widget-refactor">mr-widget-refactor</a>', + sourceBranchRemoved: false, + targetBranchPath: 'foo/bar/commits-path', + targetBranchTreePath: 'foo/bar/tree/path', + targetBranch: 'master', + isOpen: false, + emailPatchesPath: '/mr/email-patches', + plainDiffPath: '/mr/plainDiffPath', + statusPath: 'abc', + }, + }); + }); + + it('does not render checkout branch button with modal trigger', () => { + const button = vm.$el.querySelector('.js-check-out-branch'); + + expect(button).toEqual(null); + }); + + it('renders download dropdown with links', () => { + expectDownloadDropdownItems(); + }); + }); + + describe('without diverged commits', () => { + beforeEach(() => { + vm = mountComponent(Component, { + mr: { + divergedCommitsCount: 0, + sourceBranch: 'mr-widget-refactor', + sourceBranchLink: '<a href="/foo/bar/mr-widget-refactor">mr-widget-refactor</a>', + sourceBranchRemoved: false, + targetBranchPath: 'foo/bar/commits-path', + targetBranchTreePath: 'foo/bar/tree/path', + targetBranch: 'master', + isOpen: true, + emailPatchesPath: '/mr/email-patches', + plainDiffPath: '/mr/plainDiffPath', + statusPath: 'abc', + }, + }); + }); + + it('does not render diverged commits info', () => { + expect(vm.$el.querySelector('.diverged-commits-count')).toEqual(null); + }); + }); + + describe('with diverged commits', () => { + beforeEach(() => { + vm = mountComponent(Component, { + mr: { + divergedCommitsCount: 12, + sourceBranch: 'mr-widget-refactor', + sourceBranchLink: '<a href="/foo/bar/mr-widget-refactor">mr-widget-refactor</a>', + sourceBranchRemoved: false, + targetBranchPath: 'foo/bar/commits-path', + targetBranchTreePath: 'foo/bar/tree/path', + targetBranch: 'master', + isOpen: true, + emailPatchesPath: '/mr/email-patches', + plainDiffPath: '/mr/plainDiffPath', + statusPath: 'abc', + }, + }); + }); + + it('renders diverged commits info', () => { + expect(vm.$el.querySelector('.diverged-commits-count').textContent).toEqual( + 'The source branch is 12 commits behind the target branch', + ); + + expect(vm.$el.querySelector('.diverged-commits-count a').textContent).toEqual( + '12 commits behind', + ); + + expect(vm.$el.querySelector('.diverged-commits-count a')).toHaveAttr( + 'href', + vm.mr.targetBranchPath, + ); + }); + }); + }); +}); diff --git a/spec/frontend/vue_mr_widget/components/mr_widget_memory_usage_spec.js b/spec/frontend/vue_mr_widget/components/mr_widget_memory_usage_spec.js new file mode 100644 index 00000000000..7a932feb3a7 --- /dev/null +++ b/spec/frontend/vue_mr_widget/components/mr_widget_memory_usage_spec.js @@ -0,0 +1,239 @@ +import Vue from 'vue'; +import axios from 'axios'; +import MockAdapter from 'axios-mock-adapter'; +import MemoryUsage from '~/vue_merge_request_widget/components/deployment/memory_usage.vue'; +import MRWidgetService from '~/vue_merge_request_widget/services/mr_widget_service'; + +const url = '/root/acets-review-apps/environments/15/deployments/1/metrics'; +const monitoringUrl = '/root/acets-review-apps/environments/15/metrics'; + +const metricsMockData = { + success: true, + metrics: { + memory_before: [ + { + metric: {}, + value: [1495785220.607, '9572875.906976745'], + }, + ], + memory_after: [ + { + metric: {}, + value: [1495787020.607, '4485853.130206379'], + }, + ], + memory_values: [ + { + metric: {}, + values: [[1493716685, '4.30859375']], + }, + ], + }, + last_update: '2017-05-02T12:34:49.628Z', + deployment_time: 1493718485, +}; + +const createComponent = () => { + const Component = Vue.extend(MemoryUsage); + + return new Component({ + el: document.createElement('div'), + propsData: { + metricsUrl: url, + metricsMonitoringUrl: monitoringUrl, + memoryMetrics: [], + deploymentTime: 0, + hasMetrics: false, + loadFailed: false, + loadingMetrics: true, + backOffRequestCounter: 0, + }, + }); +}; + +const messages = { + loadingMetrics: 'Loading deployment statistics', + hasMetrics: 'Memory usage is unchanged at 0MB', + loadFailed: 'Failed to load deployment statistics', + metricsUnavailable: 'Deployment statistics are not available currently', +}; + +describe('MemoryUsage', () => { + let vm; + let el; + let mock; + + beforeEach(() => { + mock = new MockAdapter(axios); + mock.onGet(`${url}.json`).reply(200); + + vm = createComponent(); + el = vm.$el; + }); + + afterEach(() => { + mock.restore(); + }); + + describe('data', () => { + it('should have default data', () => { + const data = MemoryUsage.data(); + + expect(Array.isArray(data.memoryMetrics)).toBeTruthy(); + expect(data.memoryMetrics.length).toBe(0); + + expect(typeof data.deploymentTime).toBe('number'); + expect(data.deploymentTime).toBe(0); + + expect(typeof data.hasMetrics).toBe('boolean'); + expect(data.hasMetrics).toBeFalsy(); + + expect(typeof data.loadFailed).toBe('boolean'); + expect(data.loadFailed).toBeFalsy(); + + expect(typeof data.loadingMetrics).toBe('boolean'); + expect(data.loadingMetrics).toBeTruthy(); + + expect(typeof data.backOffRequestCounter).toBe('number'); + expect(data.backOffRequestCounter).toBe(0); + }); + }); + + describe('computed', () => { + describe('memoryChangeMessage', () => { + it('should contain "increased" if memoryFrom value is less than memoryTo value', () => { + vm.memoryFrom = 4.28; + vm.memoryTo = 9.13; + + expect(vm.memoryChangeMessage.indexOf('increased')).not.toEqual('-1'); + }); + + it('should contain "decreased" if memoryFrom value is less than memoryTo value', () => { + vm.memoryFrom = 9.13; + vm.memoryTo = 4.28; + + expect(vm.memoryChangeMessage.indexOf('decreased')).not.toEqual('-1'); + }); + + it('should contain "unchanged" if memoryFrom value equal to memoryTo value', () => { + vm.memoryFrom = 1; + vm.memoryTo = 1; + + expect(vm.memoryChangeMessage.indexOf('unchanged')).not.toEqual('-1'); + }); + }); + }); + + describe('methods', () => { + const { metrics, deployment_time } = metricsMockData; + + describe('getMegabytes', () => { + it('should return Megabytes from provided Bytes value', () => { + const memoryInBytes = '9572875.906976745'; + + expect(vm.getMegabytes(memoryInBytes)).toEqual('9.13'); + }); + }); + + describe('computeGraphData', () => { + it('should populate sparkline graph', () => { + // ignore BoostrapVue warnings + jest.spyOn(console, 'warn').mockImplementation(); + + vm.computeGraphData(metrics, deployment_time); + const { hasMetrics, memoryMetrics, deploymentTime, memoryFrom, memoryTo } = vm; + + expect(hasMetrics).toBeTruthy(); + expect(memoryMetrics.length).toBeGreaterThan(0); + expect(deploymentTime).toEqual(deployment_time); + expect(memoryFrom).toEqual('9.13'); + expect(memoryTo).toEqual('4.28'); + }); + }); + + describe('loadMetrics', () => { + const returnServicePromise = () => + new Promise(resolve => { + resolve({ + data: metricsMockData, + }); + }); + + it('should load metrics data using MRWidgetService', done => { + jest.spyOn(MRWidgetService, 'fetchMetrics').mockReturnValue(returnServicePromise(true)); + jest.spyOn(vm, 'computeGraphData').mockImplementation(() => {}); + + vm.loadMetrics(); + setImmediate(() => { + expect(MRWidgetService.fetchMetrics).toHaveBeenCalledWith(url); + expect(vm.computeGraphData).toHaveBeenCalledWith(metrics, deployment_time); + done(); + }); + }); + }); + }); + + describe('template', () => { + it('should render template elements correctly', () => { + expect(el.classList.contains('mr-memory-usage')).toBeTruthy(); + expect(el.querySelector('.js-usage-info')).toBeDefined(); + }); + + it('should show loading metrics message while metrics are being loaded', done => { + vm.loadingMetrics = true; + vm.hasMetrics = false; + vm.loadFailed = false; + + Vue.nextTick(() => { + expect(el.querySelector('.js-usage-info.usage-info-loading')).toBeDefined(); + + expect(el.querySelector('.js-usage-info .usage-info-load-spinner')).toBeDefined(); + + expect(el.querySelector('.js-usage-info').innerText).toContain(messages.loadingMetrics); + done(); + }); + }); + + it('should show deployment memory usage when metrics are loaded', done => { + // ignore BoostrapVue warnings + jest.spyOn(console, 'warn').mockImplementation(); + + vm.loadingMetrics = false; + vm.hasMetrics = true; + vm.loadFailed = false; + vm.memoryMetrics = metricsMockData.metrics.memory_values[0].values; + + Vue.nextTick(() => { + expect(el.querySelector('.memory-graph-container')).toBeDefined(); + expect(el.querySelector('.js-usage-info').innerText).toContain(messages.hasMetrics); + done(); + }); + }); + + it('should show failure message when metrics loading failed', done => { + vm.loadingMetrics = false; + vm.hasMetrics = false; + vm.loadFailed = true; + + Vue.nextTick(() => { + expect(el.querySelector('.js-usage-info.usage-info-failed')).toBeDefined(); + + expect(el.querySelector('.js-usage-info').innerText).toContain(messages.loadFailed); + done(); + }); + }); + + it('should show metrics unavailable message when metrics loading failed', done => { + vm.loadingMetrics = false; + vm.hasMetrics = false; + vm.loadFailed = false; + + Vue.nextTick(() => { + expect(el.querySelector('.js-usage-info.usage-info-unavailable')).toBeDefined(); + + expect(el.querySelector('.js-usage-info').innerText).toContain(messages.metricsUnavailable); + done(); + }); + }); + }); +}); diff --git a/spec/frontend/vue_mr_widget/components/mr_widget_merge_help_spec.js b/spec/frontend/vue_mr_widget/components/mr_widget_merge_help_spec.js new file mode 100644 index 00000000000..00e79a22485 --- /dev/null +++ b/spec/frontend/vue_mr_widget/components/mr_widget_merge_help_spec.js @@ -0,0 +1,70 @@ +import Vue from 'vue'; +import mountComponent from 'helpers/vue_mount_component_helper'; +import mergeHelpComponent from '~/vue_merge_request_widget/components/mr_widget_merge_help.vue'; + +describe('MRWidgetMergeHelp', () => { + let vm; + let Component; + + beforeEach(() => { + Component = Vue.extend(mergeHelpComponent); + }); + + afterEach(() => { + vm.$destroy(); + }); + + describe('with missing branch', () => { + beforeEach(() => { + vm = mountComponent(Component, { + missingBranch: 'this-is-not-the-branch-you-are-looking-for', + }); + }); + + it('renders missing branch information', () => { + expect( + vm.$el.textContent + .trim() + .replace(/[\r\n]+/g, ' ') + .replace(/\s\s+/g, ' '), + ).toEqual( + 'If the this-is-not-the-branch-you-are-looking-for branch exists in your local repository, you can merge this merge request manually using the command line', + ); + }); + + it('renders button to open help modal', () => { + expect(vm.$el.querySelector('.js-open-modal-help').getAttribute('data-target')).toEqual( + '#modal_merge_info', + ); + + expect(vm.$el.querySelector('.js-open-modal-help').getAttribute('data-toggle')).toEqual( + 'modal', + ); + }); + }); + + describe('without missing branch', () => { + beforeEach(() => { + vm = mountComponent(Component); + }); + + it('renders information about how to merge manually', () => { + expect( + vm.$el.textContent + .trim() + .replace(/[\r\n]+/g, ' ') + .replace(/\s\s+/g, ' '), + ).toEqual('You can merge this merge request manually using the command line'); + }); + + it('renders element to open a modal', () => { + expect(vm.$el.querySelector('.js-open-modal-help').getAttribute('data-target')).toEqual( + '#modal_merge_info', + ); + + expect(vm.$el.querySelector('.js-open-modal-help').getAttribute('data-toggle')).toEqual( + 'modal', + ); + }); + }); +}); diff --git a/spec/frontend/vue_mr_widget/components/mr_widget_pipeline_spec.js b/spec/frontend/vue_mr_widget/components/mr_widget_pipeline_spec.js new file mode 100644 index 00000000000..309aec179d9 --- /dev/null +++ b/spec/frontend/vue_mr_widget/components/mr_widget_pipeline_spec.js @@ -0,0 +1,326 @@ +import Vue from 'vue'; +import mountComponent from 'helpers/vue_mount_component_helper'; +import { trimText } from 'helpers/text_helper'; +import pipelineComponent from '~/vue_merge_request_widget/components/mr_widget_pipeline.vue'; +import mockData from '../mock_data'; + +describe('MRWidgetPipeline', () => { + let vm; + let Component; + + beforeEach(() => { + Component = Vue.extend(pipelineComponent); + }); + + afterEach(() => { + vm.$destroy(); + }); + + describe('computed', () => { + describe('hasPipeline', () => { + it('should return true when there is a pipeline', () => { + vm = mountComponent(Component, { + pipeline: mockData.pipeline, + ciStatus: 'success', + hasCi: true, + troubleshootingDocsPath: 'help', + }); + + expect(vm.hasPipeline).toEqual(true); + }); + + it('should return false when there is no pipeline', () => { + vm = mountComponent(Component, { + pipeline: {}, + troubleshootingDocsPath: 'help', + }); + + expect(vm.hasPipeline).toEqual(false); + }); + }); + + describe('hasCIError', () => { + it('should return false when there is no CI error', () => { + vm = mountComponent(Component, { + pipeline: mockData.pipeline, + hasCi: true, + ciStatus: 'success', + troubleshootingDocsPath: 'help', + }); + + expect(vm.hasCIError).toEqual(false); + }); + + it('should return true when there is a CI error', () => { + vm = mountComponent(Component, { + pipeline: mockData.pipeline, + hasCi: true, + ciStatus: null, + troubleshootingDocsPath: 'help', + }); + + expect(vm.hasCIError).toEqual(true); + }); + }); + + describe('coverageDeltaClass', () => { + it('should return no class if there is no coverage change', () => { + vm = mountComponent(Component, { + pipeline: mockData.pipeline, + pipelineCoverageDelta: '0', + troubleshootingDocsPath: 'help', + }); + + expect(vm.coverageDeltaClass).toEqual(''); + }); + + it('should return text-success if the coverage increased', () => { + vm = mountComponent(Component, { + pipeline: mockData.pipeline, + pipelineCoverageDelta: '10', + troubleshootingDocsPath: 'help', + }); + + expect(vm.coverageDeltaClass).toEqual('text-success'); + }); + + it('should return text-danger if the coverage decreased', () => { + vm = mountComponent(Component, { + pipeline: mockData.pipeline, + pipelineCoverageDelta: '-12', + troubleshootingDocsPath: 'help', + }); + + expect(vm.coverageDeltaClass).toEqual('text-danger'); + }); + }); + }); + + describe('rendered output', () => { + it('should render CI error', () => { + vm = mountComponent(Component, { + pipeline: mockData.pipeline, + hasCi: true, + troubleshootingDocsPath: 'help', + }); + + expect(vm.$el.querySelector('.media-body').textContent.trim()).toContain( + 'Could not retrieve the pipeline status. For troubleshooting steps, read the documentation.', + ); + }); + + it('should render CI error when no pipeline is provided', () => { + vm = mountComponent(Component, { + pipeline: {}, + hasCi: true, + ciStatus: 'success', + troubleshootingDocsPath: 'help', + }); + + expect(vm.$el.querySelector('.media-body').textContent.trim()).toContain( + 'Could not retrieve the pipeline status. For troubleshooting steps, read the documentation.', + ); + }); + + it('should render CI error when no CI is provided and pipeline must succeed is turned on', () => { + vm = mountComponent(Component, { + pipeline: {}, + hasCi: false, + pipelineMustSucceed: true, + troubleshootingDocsPath: 'help', + }); + + expect(vm.$el.querySelector('.media-body').textContent.trim()).toContain( + 'No pipeline has been run for this commit.', + ); + }); + + describe('with a pipeline', () => { + beforeEach(() => { + vm = mountComponent(Component, { + pipeline: mockData.pipeline, + hasCi: true, + ciStatus: 'success', + pipelineCoverageDelta: mockData.pipelineCoverageDelta, + troubleshootingDocsPath: 'help', + }); + }); + + it('should render pipeline ID', () => { + expect(vm.$el.querySelector('.pipeline-id').textContent.trim()).toEqual( + `#${mockData.pipeline.id}`, + ); + }); + + it('should render pipeline status and commit id', () => { + expect(vm.$el.querySelector('.media-body').textContent.trim()).toContain( + mockData.pipeline.details.status.label, + ); + + expect(vm.$el.querySelector('.js-commit-link').textContent.trim()).toEqual( + mockData.pipeline.commit.short_id, + ); + + expect(vm.$el.querySelector('.js-commit-link').getAttribute('href')).toEqual( + mockData.pipeline.commit.commit_path, + ); + }); + + it('should render pipeline graph', () => { + expect(vm.$el.querySelector('.mr-widget-pipeline-graph')).toBeDefined(); + expect(vm.$el.querySelectorAll('.stage-container').length).toEqual( + mockData.pipeline.details.stages.length, + ); + }); + + it('should render coverage information', () => { + expect(vm.$el.querySelector('.media-body').textContent).toContain( + `Coverage ${mockData.pipeline.coverage}`, + ); + }); + + it('should render pipeline coverage delta information', () => { + expect(vm.$el.querySelector('.js-pipeline-coverage-delta.text-danger')).toBeDefined(); + expect(vm.$el.querySelector('.js-pipeline-coverage-delta').textContent).toContain( + `(${mockData.pipelineCoverageDelta}%)`, + ); + }); + }); + + describe('without commit path', () => { + beforeEach(() => { + const mockCopy = JSON.parse(JSON.stringify(mockData)); + delete mockCopy.pipeline.commit; + + vm = mountComponent(Component, { + pipeline: mockCopy.pipeline, + hasCi: true, + ciStatus: 'success', + troubleshootingDocsPath: 'help', + }); + }); + + it('should render pipeline ID', () => { + expect(vm.$el.querySelector('.pipeline-id').textContent.trim()).toEqual( + `#${mockData.pipeline.id}`, + ); + }); + + it('should render pipeline status', () => { + expect(vm.$el.querySelector('.media-body').textContent.trim()).toContain( + mockData.pipeline.details.status.label, + ); + + expect(vm.$el.querySelector('.js-commit-link')).toBeNull(); + }); + + it('should render pipeline graph', () => { + expect(vm.$el.querySelector('.mr-widget-pipeline-graph')).toBeDefined(); + expect(vm.$el.querySelectorAll('.stage-container').length).toEqual( + mockData.pipeline.details.stages.length, + ); + }); + + it('should render coverage information', () => { + expect(vm.$el.querySelector('.media-body').textContent).toContain( + `Coverage ${mockData.pipeline.coverage}`, + ); + }); + }); + + describe('without coverage', () => { + it('should not render a coverage', () => { + const mockCopy = JSON.parse(JSON.stringify(mockData)); + delete mockCopy.pipeline.coverage; + + vm = mountComponent(Component, { + pipeline: mockCopy.pipeline, + hasCi: true, + ciStatus: 'success', + troubleshootingDocsPath: 'help', + }); + + expect(vm.$el.querySelector('.media-body').textContent).not.toContain('Coverage'); + }); + }); + + describe('without a pipeline graph', () => { + it('should not render a pipeline graph', () => { + const mockCopy = JSON.parse(JSON.stringify(mockData)); + delete mockCopy.pipeline.details.stages; + + vm = mountComponent(Component, { + pipeline: mockCopy.pipeline, + hasCi: true, + ciStatus: 'success', + troubleshootingDocsPath: 'help', + }); + + expect(vm.$el.querySelector('.js-mini-pipeline-graph')).toEqual(null); + }); + }); + + describe('for each type of pipeline', () => { + let pipeline; + + beforeEach(() => { + ({ pipeline } = JSON.parse(JSON.stringify(mockData))); + + pipeline.details.name = 'Pipeline'; + pipeline.merge_request_event_type = undefined; + pipeline.ref.tag = false; + pipeline.ref.branch = false; + }); + + const factory = () => { + vm = mountComponent(Component, { + pipeline, + hasCi: true, + ciStatus: 'success', + troubleshootingDocsPath: 'help', + sourceBranchLink: mockData.source_branch_link, + }); + }; + + describe('for a branch pipeline', () => { + it('renders a pipeline widget that reads "Pipeline <ID> <status> for <SHA> on <branch>"', () => { + pipeline.ref.branch = true; + + factory(); + + const expected = `Pipeline #${pipeline.id} ${pipeline.details.status.label} for ${pipeline.commit.short_id} on ${mockData.source_branch_link}`; + const actual = trimText(vm.$el.querySelector('.js-pipeline-info-container').innerText); + + expect(actual).toBe(expected); + }); + }); + + describe('for a tag pipeline', () => { + it('renders a pipeline widget that reads "Pipeline <ID> <status> for <SHA> on <branch>"', () => { + pipeline.ref.tag = true; + + factory(); + + const expected = `Pipeline #${pipeline.id} ${pipeline.details.status.label} for ${pipeline.commit.short_id}`; + const actual = trimText(vm.$el.querySelector('.js-pipeline-info-container').innerText); + + expect(actual).toBe(expected); + }); + }); + + describe('for a detached merge request pipeline', () => { + it('renders a pipeline widget that reads "Detached merge request pipeline <ID> <status> for <SHA>"', () => { + pipeline.details.name = 'Detached merge request pipeline'; + pipeline.merge_request_event_type = 'detached'; + + factory(); + + const expected = `Detached merge request pipeline #${pipeline.id} ${pipeline.details.status.label} for ${pipeline.commit.short_id}`; + const actual = trimText(vm.$el.querySelector('.js-pipeline-info-container').innerText); + + expect(actual).toBe(expected); + }); + }); + }); + }); +}); diff --git a/spec/frontend/vue_mr_widget/components/mr_widget_rebase_spec.js b/spec/frontend/vue_mr_widget/components/mr_widget_rebase_spec.js new file mode 100644 index 00000000000..6ec30493f8b --- /dev/null +++ b/spec/frontend/vue_mr_widget/components/mr_widget_rebase_spec.js @@ -0,0 +1,139 @@ +import Vue from 'vue'; +import mountComponent from 'helpers/vue_mount_component_helper'; +import eventHub from '~/vue_merge_request_widget/event_hub'; +import component from '~/vue_merge_request_widget/components/states/mr_widget_rebase.vue'; + +describe('Merge request widget rebase component', () => { + let Component; + let vm; + beforeEach(() => { + Component = Vue.extend(component); + }); + + afterEach(() => { + vm.$destroy(); + }); + + describe('While rebasing', () => { + it('should show progress message', () => { + vm = mountComponent(Component, { + mr: { rebaseInProgress: true }, + service: {}, + }); + + expect( + vm.$el.querySelector('.rebase-state-find-class-convention span').textContent.trim(), + ).toContain('Rebase in progress'); + }); + }); + + describe('With permissions', () => { + beforeEach(() => { + vm = mountComponent(Component, { + mr: { + rebaseInProgress: false, + canPushToSourceBranch: true, + }, + service: {}, + }); + }); + + it('it should render rebase button and warning message', () => { + const text = vm.$el + .querySelector('.rebase-state-find-class-convention span') + .textContent.trim(); + + expect(text).toContain('Fast-forward merge is not possible.'); + expect(text.replace(/\s\s+/g, ' ')).toContain( + 'Rebase the source branch onto the target branch.', + ); + }); + + it('it should render error message when it fails', done => { + vm.rebasingError = 'Something went wrong!'; + + Vue.nextTick(() => { + expect( + vm.$el.querySelector('.rebase-state-find-class-convention span').textContent.trim(), + ).toContain('Something went wrong!'); + done(); + }); + }); + }); + + describe('Without permissions', () => { + it('should render a message explaining user does not have permissions', () => { + vm = mountComponent(Component, { + mr: { + rebaseInProgress: false, + canPushToSourceBranch: false, + targetBranch: 'foo', + }, + service: {}, + }); + + const text = vm.$el + .querySelector('.rebase-state-find-class-convention span') + .textContent.trim(); + + expect(text).toContain('Fast-forward merge is not possible.'); + expect(text).toContain('Rebase the source branch onto'); + expect(text).toContain('foo'); + expect(text.replace(/\s\s+/g, ' ')).toContain('to allow this merge request to be merged.'); + }); + + it('should render the correct target branch name', () => { + const targetBranch = 'fake-branch-to-test-with'; + vm = mountComponent(Component, { + mr: { + rebaseInProgress: false, + canPushToSourceBranch: false, + targetBranch, + }, + service: {}, + }); + + const elem = vm.$el.querySelector('.rebase-state-find-class-convention span'); + + expect(elem.innerHTML).toContain( + `Fast-forward merge is not possible. Rebase the source branch onto <span class="label-branch">${targetBranch}</span> to allow this merge request to be merged.`, + ); + }); + }); + + describe('methods', () => { + it('checkRebaseStatus', done => { + jest.spyOn(eventHub, '$emit').mockImplementation(() => {}); + vm = mountComponent(Component, { + mr: {}, + service: { + rebase() { + return Promise.resolve(); + }, + poll() { + return Promise.resolve({ + data: { + rebase_in_progress: false, + merge_error: null, + }, + }); + }, + }, + }); + + vm.rebase(); + + // Wait for the rebase request + vm.$nextTick() + // Wait for the polling request + .then(vm.$nextTick()) + // Wait for the eventHub to be called + .then(vm.$nextTick()) + .then(() => { + expect(eventHub.$emit).toHaveBeenCalledWith('MRWidgetRebaseSuccess'); + }) + .then(done) + .catch(done.fail); + }); + }); +}); diff --git a/spec/frontend/vue_mr_widget/components/mr_widget_related_links_spec.js b/spec/frontend/vue_mr_widget/components/mr_widget_related_links_spec.js new file mode 100644 index 00000000000..0c4ec7ed99b --- /dev/null +++ b/spec/frontend/vue_mr_widget/components/mr_widget_related_links_spec.js @@ -0,0 +1,85 @@ +import Vue from 'vue'; +import mountComponent from 'helpers/vue_mount_component_helper'; +import relatedLinksComponent from '~/vue_merge_request_widget/components/mr_widget_related_links.vue'; + +describe('MRWidgetRelatedLinks', () => { + let vm; + + const createComponent = data => { + const Component = Vue.extend(relatedLinksComponent); + + return mountComponent(Component, data); + }; + + afterEach(() => { + vm.$destroy(); + }); + + describe('computed', () => { + describe('closesText', () => { + it('returns Closes text for open merge request', () => { + vm = createComponent({ state: 'open', relatedLinks: {} }); + + expect(vm.closesText).toEqual('Closes'); + }); + + it('returns correct text for closed merge request', () => { + vm = createComponent({ state: 'closed', relatedLinks: {} }); + + expect(vm.closesText).toEqual('Did not close'); + }); + + it('returns correct tense for merged request', () => { + vm = createComponent({ state: 'merged', relatedLinks: {} }); + + expect(vm.closesText).toEqual('Closed'); + }); + }); + }); + + it('should have only have closing issues text', () => { + vm = createComponent({ + relatedLinks: { + closing: '<a href="#">#23</a> and <a>#42</a>', + }, + }); + const content = vm.$el.textContent.replace(/\n(\s)+/g, ' ').trim(); + + expect(content).toContain('Closes #23 and #42'); + expect(content).not.toContain('Mentions'); + }); + + it('should have only have mentioned issues text', () => { + vm = createComponent({ + relatedLinks: { + mentioned: '<a href="#">#7</a>', + }, + }); + + expect(vm.$el.innerText).toContain('Mentions #7'); + expect(vm.$el.innerText).not.toContain('Closes'); + }); + + it('should have closing and mentioned issues at the same time', () => { + vm = createComponent({ + relatedLinks: { + closing: '<a href="#">#7</a>', + mentioned: '<a href="#">#23</a> and <a>#42</a>', + }, + }); + const content = vm.$el.textContent.replace(/\n(\s)+/g, ' ').trim(); + + expect(content).toContain('Closes #7'); + expect(content).toContain('Mentions #23 and #42'); + }); + + it('should have assing issues link', () => { + vm = createComponent({ + relatedLinks: { + assignToMe: '<a href="#">Assign yourself to these issues</a>', + }, + }); + + expect(vm.$el.innerText).toContain('Assign yourself to these issues'); + }); +}); diff --git a/spec/frontend/vue_mr_widget/components/mr_widget_status_icon_spec.js b/spec/frontend/vue_mr_widget/components/mr_widget_status_icon_spec.js new file mode 100644 index 00000000000..6c3b4a01659 --- /dev/null +++ b/spec/frontend/vue_mr_widget/components/mr_widget_status_icon_spec.js @@ -0,0 +1,48 @@ +import Vue from 'vue'; +import mountComponent from 'helpers/vue_mount_component_helper'; +import mrStatusIcon from '~/vue_merge_request_widget/components/mr_widget_status_icon.vue'; + +describe('MR widget status icon component', () => { + let vm; + let Component; + + beforeEach(() => { + Component = Vue.extend(mrStatusIcon); + }); + + afterEach(() => { + vm.$destroy(); + }); + + describe('while loading', () => { + it('renders loading icon', () => { + vm = mountComponent(Component, { status: 'loading' }); + + expect(vm.$el.querySelector('.mr-widget-icon span').classList).toContain('gl-spinner'); + }); + }); + + describe('with status icon', () => { + it('renders ci status icon', () => { + vm = mountComponent(Component, { status: 'failed' }); + + expect(vm.$el.querySelector('.js-ci-status-icon-failed')).not.toBeNull(); + }); + }); + + describe('with disabled button', () => { + it('renders a disabled button', () => { + vm = mountComponent(Component, { status: 'failed', showDisabledButton: true }); + + expect(vm.$el.querySelector('.js-disabled-merge-button').textContent.trim()).toEqual('Merge'); + }); + }); + + describe('without disabled button', () => { + it('does not render a disabled button', () => { + vm = mountComponent(Component, { status: 'failed' }); + + expect(vm.$el.querySelector('.js-disabled-merge-button')).toBeNull(); + }); + }); +}); diff --git a/spec/frontend/vue_mr_widget/components/mr_widget_terraform_plan_spec.js b/spec/frontend/vue_mr_widget/components/mr_widget_terraform_plan_spec.js index 91e95b2bdb1..62c5c8e8531 100644 --- a/spec/frontend/vue_mr_widget/components/mr_widget_terraform_plan_spec.js +++ b/spec/frontend/vue_mr_widget/components/mr_widget_terraform_plan_spec.js @@ -1,4 +1,4 @@ -import { GlLoadingIcon, GlSprintf } from '@gitlab/ui'; +import { GlLink, GlLoadingIcon, GlSprintf } from '@gitlab/ui'; import { shallowMount } from '@vue/test-utils'; import axios from '~/lib/utils/axios_utils'; import MockAdapter from 'axios-mock-adapter'; @@ -38,7 +38,7 @@ describe('MrWidgetTerraformPlan', () => { describe('loading poll', () => { beforeEach(() => { - mockPollingApi(200, { 'tfplan.json': plan }, {}); + mockPollingApi(200, { '123': plan }, {}); return mountWrapper().then(() => { wrapper.setData({ loading: true }); @@ -65,7 +65,7 @@ describe('MrWidgetTerraformPlan', () => { pollRequest = jest.spyOn(Poll.prototype, 'makeRequest'); pollStop = jest.spyOn(Poll.prototype, 'stop'); - mockPollingApi(200, { 'tfplan.json': plan }, {}); + mockPollingApi(200, { '123': plan }, {}); return mountWrapper(); }); @@ -80,7 +80,7 @@ describe('MrWidgetTerraformPlan', () => { }); it('renders button when url is found', () => { - expect(wrapper.find('a').text()).toContain('View full log'); + expect(wrapper.find(GlLink).exists()).toBe(true); }); it('does not make additional requests after poll is successful', () => { @@ -101,7 +101,7 @@ describe('MrWidgetTerraformPlan', () => { ); expect(wrapper.find('.js-terraform-report-link').exists()).toBe(false); - expect(wrapper.text()).not.toContain('View full log'); + expect(wrapper.find(GlLink).exists()).toBe(false); }); }); }); diff --git a/spec/frontend/vue_mr_widget/components/review_app_link_spec.js b/spec/frontend/vue_mr_widget/components/review_app_link_spec.js new file mode 100644 index 00000000000..7b063653a93 --- /dev/null +++ b/spec/frontend/vue_mr_widget/components/review_app_link_spec.js @@ -0,0 +1,52 @@ +import Vue from 'vue'; +import { mockTracking, triggerEvent } from 'helpers/tracking_helper'; +import component from '~/vue_merge_request_widget/components/review_app_link.vue'; +import mountComponent from '../../helpers/vue_mount_component_helper'; + +describe('review app link', () => { + const Component = Vue.extend(component); + const props = { + link: '/review', + cssClass: 'js-link', + display: { + text: 'View app', + tooltip: '', + }, + }; + let vm; + let el; + + beforeEach(() => { + vm = mountComponent(Component, props); + el = vm.$el; + }); + + afterEach(() => { + vm.$destroy(); + }); + + it('renders provided link as href attribute', () => { + expect(el.getAttribute('href')).toEqual(props.link); + }); + + it('renders provided cssClass as class attribute', () => { + expect(el.getAttribute('class')).toEqual(props.cssClass); + }); + + it('renders View app text', () => { + expect(el.textContent.trim()).toEqual('View app'); + }); + + it('renders svg icon', () => { + expect(el.querySelector('svg')).not.toBeNull(); + }); + + it('tracks an event when clicked', () => { + const spy = mockTracking('_category_', el, jest.spyOn); + triggerEvent(el); + + expect(spy).toHaveBeenCalledWith('_category_', 'open_review_app', { + label: 'review_app', + }); + }); +}); diff --git a/spec/frontend/vue_mr_widget/components/states/mr_widget_archived_spec.js b/spec/frontend/vue_mr_widget/components/states/mr_widget_archived_spec.js new file mode 100644 index 00000000000..4bdc6c95f22 --- /dev/null +++ b/spec/frontend/vue_mr_widget/components/states/mr_widget_archived_spec.js @@ -0,0 +1,31 @@ +import Vue from 'vue'; +import mountComponent from 'helpers/vue_mount_component_helper'; +import archivedComponent from '~/vue_merge_request_widget/components/states/mr_widget_archived.vue'; + +describe('MRWidgetArchived', () => { + let vm; + + beforeEach(() => { + const Component = Vue.extend(archivedComponent); + vm = mountComponent(Component); + }); + + afterEach(() => { + vm.$destroy(); + }); + + it('renders a ci status failed icon', () => { + expect(vm.$el.querySelector('.ci-status-icon')).not.toBeNull(); + }); + + it('renders a disabled button', () => { + expect(vm.$el.querySelector('button').getAttribute('disabled')).toEqual('disabled'); + expect(vm.$el.querySelector('button').textContent.trim()).toEqual('Merge'); + }); + + it('renders information', () => { + expect(vm.$el.querySelector('.bold').textContent.trim()).toEqual( + 'This project is archived, write access has been disabled', + ); + }); +}); diff --git a/spec/frontend/vue_mr_widget/components/states/mr_widget_auto_merge_enabled_spec.js b/spec/frontend/vue_mr_widget/components/states/mr_widget_auto_merge_enabled_spec.js new file mode 100644 index 00000000000..e2caa6e8092 --- /dev/null +++ b/spec/frontend/vue_mr_widget/components/states/mr_widget_auto_merge_enabled_spec.js @@ -0,0 +1,230 @@ +import Vue from 'vue'; +import mountComponent from 'helpers/vue_mount_component_helper'; +import { trimText } from 'helpers/text_helper'; +import autoMergeEnabledComponent from '~/vue_merge_request_widget/components/states/mr_widget_auto_merge_enabled.vue'; +import MRWidgetService from '~/vue_merge_request_widget/services/mr_widget_service'; +import eventHub from '~/vue_merge_request_widget/event_hub'; +import { MWPS_MERGE_STRATEGY } from '~/vue_merge_request_widget/constants'; + +describe('MRWidgetAutoMergeEnabled', () => { + let vm; + const targetBranchPath = '/foo/bar'; + const targetBranch = 'foo'; + const sha = '1EA2EZ34'; + + beforeEach(() => { + const Component = Vue.extend(autoMergeEnabledComponent); + jest.spyOn(eventHub, '$emit').mockImplementation(() => {}); + + vm = mountComponent(Component, { + mr: { + shouldRemoveSourceBranch: false, + canRemoveSourceBranch: true, + canCancelAutomaticMerge: true, + mergeUserId: 1, + currentUserId: 1, + setToAutoMergeBy: {}, + sha, + targetBranchPath, + targetBranch, + autoMergeStrategy: MWPS_MERGE_STRATEGY, + }, + service: new MRWidgetService({}), + }); + }); + + afterEach(() => { + vm.$destroy(); + }); + + describe('computed', () => { + describe('canRemoveSourceBranch', () => { + it('should return true when user is able to remove source branch', () => { + expect(vm.canRemoveSourceBranch).toBeTruthy(); + }); + + it('should return false when user id is not the same with who set the MWPS', () => { + vm.mr.mergeUserId = 2; + + expect(vm.canRemoveSourceBranch).toBeFalsy(); + + vm.mr.currentUserId = 2; + + expect(vm.canRemoveSourceBranch).toBeTruthy(); + + vm.mr.currentUserId = 3; + + expect(vm.canRemoveSourceBranch).toBeFalsy(); + }); + + it('should return false when shouldRemoveSourceBranch set to false', () => { + vm.mr.shouldRemoveSourceBranch = true; + + expect(vm.canRemoveSourceBranch).toBeFalsy(); + }); + + it('should return false if user is not able to remove the source branch', () => { + vm.mr.canRemoveSourceBranch = false; + + expect(vm.canRemoveSourceBranch).toBeFalsy(); + }); + }); + + describe('statusTextBeforeAuthor', () => { + it('should return "Set by" if the MWPS is selected', () => { + Vue.set(vm.mr, 'autoMergeStrategy', MWPS_MERGE_STRATEGY); + + expect(vm.statusTextBeforeAuthor).toBe('Set by'); + }); + }); + + describe('statusTextAfterAuthor', () => { + it('should return "to be merged automatically..." if MWPS is selected', () => { + Vue.set(vm.mr, 'autoMergeStrategy', MWPS_MERGE_STRATEGY); + + expect(vm.statusTextAfterAuthor).toBe( + 'to be merged automatically when the pipeline succeeds', + ); + }); + }); + + describe('cancelButtonText', () => { + it('should return "Cancel automatic merge" if MWPS is selected', () => { + Vue.set(vm.mr, 'autoMergeStrategy', MWPS_MERGE_STRATEGY); + + expect(vm.cancelButtonText).toBe('Cancel automatic merge'); + }); + }); + }); + + describe('methods', () => { + describe('cancelAutomaticMerge', () => { + it('should set flag and call service then tell main component to update the widget with data', done => { + const mrObj = { + is_new_mr_data: true, + }; + jest.spyOn(vm.service, 'cancelAutomaticMerge').mockReturnValue( + new Promise(resolve => { + resolve({ + data: mrObj, + }); + }), + ); + + vm.cancelAutomaticMerge(); + setImmediate(() => { + expect(vm.isCancellingAutoMerge).toBeTruthy(); + expect(eventHub.$emit).toHaveBeenCalledWith('UpdateWidgetData', mrObj); + done(); + }); + }); + }); + + describe('removeSourceBranch', () => { + it('should set flag and call service then request main component to update the widget', done => { + jest.spyOn(vm.service, 'merge').mockReturnValue( + Promise.resolve({ + data: { + status: MWPS_MERGE_STRATEGY, + }, + }), + ); + + vm.removeSourceBranch(); + setImmediate(() => { + expect(eventHub.$emit).toHaveBeenCalledWith('MRWidgetUpdateRequested'); + expect(vm.service.merge).toHaveBeenCalledWith({ + sha, + auto_merge_strategy: MWPS_MERGE_STRATEGY, + should_remove_source_branch: true, + }); + done(); + }); + }); + }); + }); + + describe('template', () => { + it('should have correct elements', () => { + expect(vm.$el.classList.contains('mr-widget-body')).toBeTruthy(); + expect(vm.$el.innerText).toContain('to be merged automatically when the pipeline succeeds'); + + expect(vm.$el.innerText).toContain('The changes will be merged into'); + expect(vm.$el.innerText).toContain(targetBranch); + expect(vm.$el.innerText).toContain('The source branch will not be deleted'); + expect(vm.$el.querySelector('.js-cancel-auto-merge').innerText).toContain( + 'Cancel automatic merge', + ); + + expect(vm.$el.querySelector('.js-cancel-auto-merge').getAttribute('disabled')).toBeFalsy(); + expect(vm.$el.querySelector('.js-remove-source-branch').innerText).toContain( + 'Delete source branch', + ); + + expect(vm.$el.querySelector('.js-remove-source-branch').getAttribute('disabled')).toBeFalsy(); + }); + + it('should disable cancel auto merge button when the action is in progress', done => { + vm.isCancellingAutoMerge = true; + + Vue.nextTick(() => { + expect(vm.$el.querySelector('.js-cancel-auto-merge').getAttribute('disabled')).toBeTruthy(); + done(); + }); + }); + + it('should show source branch will be deleted text when it source branch set to remove', done => { + vm.mr.shouldRemoveSourceBranch = true; + + Vue.nextTick(() => { + const normalizedText = vm.$el.innerText.replace(/\s+/g, ' '); + + expect(normalizedText).toContain('The source branch will be deleted'); + expect(normalizedText).not.toContain('The source branch will not be deleted'); + done(); + }); + }); + + it('should not show delete source branch button when user not able to delete source branch', done => { + vm.mr.currentUserId = 4; + + Vue.nextTick(() => { + expect(vm.$el.querySelector('.js-remove-source-branch')).toEqual(null); + done(); + }); + }); + + it('should disable delete source branch button when the action is in progress', done => { + vm.isRemovingSourceBranch = true; + + Vue.nextTick(() => { + expect( + vm.$el.querySelector('.js-remove-source-branch').getAttribute('disabled'), + ).toBeTruthy(); + done(); + }); + }); + + it('should render the status text as "...to merged automatically" if MWPS is selected', done => { + Vue.set(vm.mr, 'autoMergeStrategy', MWPS_MERGE_STRATEGY); + + Vue.nextTick(() => { + const statusText = trimText(vm.$el.querySelector('.js-status-text-after-author').innerText); + + expect(statusText).toBe('to be merged automatically when the pipeline succeeds'); + done(); + }); + }); + + it('should render the cancel button as "Cancel automatic merge" if MWPS is selected', done => { + Vue.set(vm.mr, 'autoMergeStrategy', MWPS_MERGE_STRATEGY); + + Vue.nextTick(() => { + const cancelButtonText = trimText(vm.$el.querySelector('.js-cancel-auto-merge').innerText); + + expect(cancelButtonText).toBe('Cancel automatic merge'); + done(); + }); + }); + }); +}); diff --git a/spec/frontend/vue_mr_widget/components/states/mr_widget_checking_spec.js b/spec/frontend/vue_mr_widget/components/states/mr_widget_checking_spec.js new file mode 100644 index 00000000000..56d55c9afac --- /dev/null +++ b/spec/frontend/vue_mr_widget/components/states/mr_widget_checking_spec.js @@ -0,0 +1,31 @@ +import Vue from 'vue'; +import mountComponent from 'helpers/vue_mount_component_helper'; +import checkingComponent from '~/vue_merge_request_widget/components/states/mr_widget_checking.vue'; + +describe('MRWidgetChecking', () => { + let Component; + let vm; + + beforeEach(() => { + Component = Vue.extend(checkingComponent); + vm = mountComponent(Component); + }); + + afterEach(() => { + vm.$destroy(); + }); + + it('renders disabled button', () => { + expect(vm.$el.querySelector('button').getAttribute('disabled')).toEqual('disabled'); + }); + + it('renders loading icon', () => { + expect(vm.$el.querySelector('.mr-widget-icon span').classList).toContain('gl-spinner'); + }); + + it('renders information about merging', () => { + expect(vm.$el.querySelector('.media-body').textContent.trim()).toEqual( + 'Checking ability to merge automatically…', + ); + }); +}); diff --git a/spec/frontend/vue_mr_widget/components/states/mr_widget_closed_spec.js b/spec/frontend/vue_mr_widget/components/states/mr_widget_closed_spec.js new file mode 100644 index 00000000000..322f440763c --- /dev/null +++ b/spec/frontend/vue_mr_widget/components/states/mr_widget_closed_spec.js @@ -0,0 +1,69 @@ +import Vue from 'vue'; +import mountComponent from 'helpers/vue_mount_component_helper'; +import closedComponent from '~/vue_merge_request_widget/components/states/mr_widget_closed.vue'; + +describe('MRWidgetClosed', () => { + let vm; + + beforeEach(() => { + const Component = Vue.extend(closedComponent); + vm = mountComponent(Component, { + mr: { + metrics: { + mergedBy: {}, + closedBy: { + name: 'Administrator', + username: 'root', + webUrl: 'http://localhost:3000/root', + avatarUrl: + 'http://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon', + }, + mergedAt: 'Jan 24, 2018 1:02pm GMT+0000', + closedAt: 'Jan 24, 2018 1:02pm GMT+0000', + readableMergedAt: '', + readableClosedAt: 'less than a minute ago', + }, + targetBranchPath: '/twitter/flight/commits/so_long_jquery', + targetBranch: 'so_long_jquery', + }, + }); + }); + + afterEach(() => { + vm.$destroy(); + }); + + it('renders warning icon', () => { + expect(vm.$el.querySelector('.js-ci-status-icon-warning')).not.toBeNull(); + }); + + it('renders closed by information with author and time', () => { + expect( + vm.$el + .querySelector('.js-mr-widget-author') + .textContent.trim() + .replace(/\s\s+/g, ' '), + ).toContain('Closed by Administrator less than a minute ago'); + }); + + it('links to the user that closed the MR', () => { + expect(vm.$el.querySelector('.author-link').getAttribute('href')).toEqual( + 'http://localhost:3000/root', + ); + }); + + it('renders information about the changes not being merged', () => { + expect( + vm.$el + .querySelector('.mr-info-list') + .textContent.trim() + .replace(/\s\s+/g, ' '), + ).toContain('The changes were not merged into so_long_jquery'); + }); + + it('renders link for target branch', () => { + expect(vm.$el.querySelector('.label-branch').getAttribute('href')).toEqual( + '/twitter/flight/commits/so_long_jquery', + ); + }); +}); diff --git a/spec/frontend/vue_mr_widget/components/states/mr_widget_conflicts_spec.js b/spec/frontend/vue_mr_widget/components/states/mr_widget_conflicts_spec.js new file mode 100644 index 00000000000..d3482b457ad --- /dev/null +++ b/spec/frontend/vue_mr_widget/components/states/mr_widget_conflicts_spec.js @@ -0,0 +1,226 @@ +import $ from 'jquery'; +import { createLocalVue, shallowMount } from '@vue/test-utils'; +import { removeBreakLine } from 'helpers/text_helper'; +import ConflictsComponent from '~/vue_merge_request_widget/components/states/mr_widget_conflicts.vue'; +import { TEST_HOST } from 'helpers/test_constants'; + +describe('MRWidgetConflicts', () => { + let vm; + const path = '/conflicts'; + + function createComponent(propsData = {}) { + const localVue = createLocalVue(); + + vm = shallowMount(localVue.extend(ConflictsComponent), { + propsData, + }); + } + + beforeEach(() => { + jest.spyOn($.fn, 'popover'); + }); + + afterEach(() => { + vm.destroy(); + }); + + // There are two permissions we need to consider: + // + // 1. Is the user allowed to merge to the target branch? + // 2. Is the user allowed to push to the source branch? + // + // This yields 4 possible permutations that we need to test, and + // we test them below. A user who can push to the source + // branch should be allowed to resolve conflicts. This is + // consistent with what the backend does. + describe('when allowed to merge but not allowed to push to source branch', () => { + beforeEach(() => { + createComponent({ + mr: { + canMerge: true, + canPushToSourceBranch: false, + conflictResolutionPath: path, + conflictsDocsPath: '', + }, + }); + }); + + it('should tell you about conflicts without bothering other people', () => { + expect(vm.text()).toContain('There are merge conflicts'); + expect(vm.text()).not.toContain('ask someone with write access'); + }); + + it('should not allow you to resolve the conflicts', () => { + expect(vm.text()).not.toContain('Resolve conflicts'); + }); + + it('should have merge buttons', () => { + const mergeLocallyButton = vm.find('.js-merge-locally-button'); + + expect(mergeLocallyButton.text()).toContain('Merge locally'); + }); + }); + + describe('when not allowed to merge but allowed to push to source branch', () => { + beforeEach(() => { + createComponent({ + mr: { + canMerge: false, + canPushToSourceBranch: true, + conflictResolutionPath: path, + conflictsDocsPath: '', + }, + }); + }); + + it('should tell you about conflicts', () => { + expect(vm.text()).toContain('There are merge conflicts'); + expect(vm.text()).toContain('ask someone with write access'); + }); + + it('should allow you to resolve the conflicts', () => { + const resolveButton = vm.find('.js-resolve-conflicts-button'); + + expect(resolveButton.text()).toContain('Resolve conflicts'); + expect(resolveButton.attributes('href')).toEqual(path); + }); + + it('should not have merge buttons', () => { + expect(vm.text()).not.toContain('Merge locally'); + }); + }); + + describe('when allowed to merge and push to source branch', () => { + beforeEach(() => { + createComponent({ + mr: { + canMerge: true, + canPushToSourceBranch: true, + conflictResolutionPath: path, + conflictsDocsPath: '', + }, + }); + }); + + it('should tell you about conflicts without bothering other people', () => { + expect(vm.text()).toContain('There are merge conflicts'); + expect(vm.text()).not.toContain('ask someone with write access'); + }); + + it('should allow you to resolve the conflicts', () => { + const resolveButton = vm.find('.js-resolve-conflicts-button'); + + expect(resolveButton.text()).toContain('Resolve conflicts'); + expect(resolveButton.attributes('href')).toEqual(path); + }); + + it('should have merge buttons', () => { + const mergeLocallyButton = vm.find('.js-merge-locally-button'); + + expect(mergeLocallyButton.text()).toContain('Merge locally'); + }); + }); + + describe('when user does not have permission to push to source branch', () => { + it('should show proper message', () => { + createComponent({ + mr: { + canMerge: false, + canPushToSourceBranch: false, + conflictsDocsPath: '', + }, + }); + + expect( + vm + .text() + .trim() + .replace(/\s\s+/g, ' '), + ).toContain('ask someone with write access'); + }); + + it('should not have action buttons', () => { + createComponent({ + mr: { + canMerge: false, + canPushToSourceBranch: false, + conflictsDocsPath: '', + }, + }); + + expect(vm.contains('.js-resolve-conflicts-button')).toBe(false); + expect(vm.contains('.js-merge-locally-button')).toBe(false); + }); + + it('should not have resolve button when no conflict resolution path', () => { + createComponent({ + mr: { + canMerge: true, + conflictResolutionPath: null, + conflictsDocsPath: '', + }, + }); + + expect(vm.contains('.js-resolve-conflicts-button')).toBe(false); + }); + }); + + describe('when fast-forward or semi-linear merge enabled', () => { + it('should tell you to rebase locally', () => { + createComponent({ + mr: { + shouldBeRebased: true, + conflictsDocsPath: '', + }, + }); + + expect(removeBreakLine(vm.text()).trim()).toContain( + 'Fast-forward merge is not possible. To merge this request, first rebase locally.', + ); + }); + }); + + describe('when source branch protected', () => { + beforeEach(() => { + createComponent({ + mr: { + canMerge: true, + canPushToSourceBranch: true, + conflictResolutionPath: TEST_HOST, + sourceBranchProtected: true, + conflictsDocsPath: '', + }, + }); + }); + + it('sets resolve button as disabled', () => { + expect(vm.find('.js-resolve-conflicts-button').attributes('disabled')).toBe('disabled'); + }); + + it('renders popover', () => { + expect($.fn.popover).toHaveBeenCalled(); + }); + }); + + describe('when source branch not protected', () => { + beforeEach(() => { + createComponent({ + mr: { + canMerge: true, + canPushToSourceBranch: true, + conflictResolutionPath: TEST_HOST, + sourceBranchProtected: false, + conflictsDocsPath: '', + }, + }); + }); + + it('sets resolve button as disabled', () => { + expect(vm.find('.js-resolve-conflicts-button').attributes('disabled')).toBe(undefined); + }); + + it('renders popover', () => { + expect($.fn.popover).not.toHaveBeenCalled(); + }); + }); +}); diff --git a/spec/frontend/vue_mr_widget/components/states/mr_widget_failed_to_merge_spec.js b/spec/frontend/vue_mr_widget/components/states/mr_widget_failed_to_merge_spec.js new file mode 100644 index 00000000000..f591393d721 --- /dev/null +++ b/spec/frontend/vue_mr_widget/components/states/mr_widget_failed_to_merge_spec.js @@ -0,0 +1,156 @@ +import Vue from 'vue'; +import mountComponent from 'helpers/vue_mount_component_helper'; +import failedToMergeComponent from '~/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.vue'; +import eventHub from '~/vue_merge_request_widget/event_hub'; + +describe('MRWidgetFailedToMerge', () => { + const dummyIntervalId = 1337; + let Component; + let mr; + let vm; + + beforeEach(() => { + Component = Vue.extend(failedToMergeComponent); + jest.spyOn(eventHub, '$emit').mockImplementation(() => {}); + jest.spyOn(window, 'setInterval').mockReturnValue(dummyIntervalId); + jest.spyOn(window, 'clearInterval').mockImplementation(); + mr = { + mergeError: 'Merge error happened', + }; + vm = mountComponent(Component, { + mr, + }); + }); + + afterEach(() => { + vm.$destroy(); + }); + + it('sets interval to refresh', () => { + expect(window.setInterval).toHaveBeenCalledWith(vm.updateTimer, 1000); + expect(vm.intervalId).toBe(dummyIntervalId); + }); + + it('clears interval when destroying ', () => { + vm.$destroy(); + + expect(window.clearInterval).toHaveBeenCalledWith(dummyIntervalId); + }); + + describe('computed', () => { + describe('timerText', () => { + it('should return correct timer text', () => { + expect(vm.timerText).toEqual('Refreshing in 10 seconds to show the updated status...'); + + vm.timer = 1; + + expect(vm.timerText).toEqual('Refreshing in a second to show the updated status...'); + }); + }); + + describe('mergeError', () => { + it('removes forced line breaks', done => { + mr.mergeError = 'contains<br />line breaks<br />'; + + Vue.nextTick() + .then(() => { + expect(vm.mergeError).toBe('contains line breaks'); + }) + .then(done) + .catch(done.fail); + }); + }); + }); + + describe('created', () => { + it('should disable polling', () => { + expect(eventHub.$emit).toHaveBeenCalledWith('DisablePolling'); + }); + }); + + describe('methods', () => { + describe('refresh', () => { + it('should emit event to request component refresh', () => { + expect(vm.isRefreshing).toEqual(false); + + vm.refresh(); + + expect(vm.isRefreshing).toEqual(true); + expect(eventHub.$emit).toHaveBeenCalledWith('MRWidgetUpdateRequested'); + expect(eventHub.$emit).toHaveBeenCalledWith('EnablePolling'); + }); + }); + + describe('updateTimer', () => { + it('should update timer and emit event when timer end', () => { + jest.spyOn(vm, 'refresh').mockImplementation(() => {}); + + expect(vm.timer).toEqual(10); + + for (let i = 0; i < 10; i += 1) { + expect(vm.timer).toEqual(10 - i); + vm.updateTimer(); + } + + expect(vm.refresh).toHaveBeenCalled(); + }); + }); + }); + + describe('while it is refreshing', () => { + it('renders Refresing now', done => { + vm.isRefreshing = true; + + Vue.nextTick(() => { + expect(vm.$el.querySelector('.js-refresh-label').textContent.trim()).toEqual( + 'Refreshing now', + ); + done(); + }); + }); + }); + + describe('while it is not regresing', () => { + it('renders warning icon and disabled merge button', () => { + expect(vm.$el.querySelector('.js-ci-status-icon-warning')).not.toBeNull(); + expect(vm.$el.querySelector('.js-disabled-merge-button').getAttribute('disabled')).toEqual( + 'disabled', + ); + }); + + it('renders given error', () => { + expect(vm.$el.querySelector('.has-error-message').textContent.trim()).toEqual( + 'Merge error happened', + ); + }); + + it('renders refresh button', () => { + expect(vm.$el.querySelector('.js-refresh-button').textContent.trim()).toEqual('Refresh now'); + }); + + it('renders remaining time', () => { + expect(vm.$el.querySelector('.has-custom-error').textContent.trim()).toEqual( + 'Refreshing in 10 seconds to show the updated status...', + ); + }); + }); + + it('should just generic merge failed message if merge_error is not available', done => { + vm.mr.mergeError = null; + + Vue.nextTick(() => { + expect(vm.$el.innerText).toContain('Merge failed.'); + expect(vm.$el.innerText).not.toContain('Merge error happened.'); + done(); + }); + }); + + it('should show refresh label when refresh requested', done => { + vm.refresh(); + Vue.nextTick(() => { + expect(vm.$el.innerText).not.toContain('Merge failed. Refreshing'); + expect(vm.$el.innerText).toContain('Refreshing now'); + done(); + }); + }); +}); diff --git a/spec/frontend/vue_mr_widget/components/states/mr_widget_merged_spec.js b/spec/frontend/vue_mr_widget/components/states/mr_widget_merged_spec.js new file mode 100644 index 00000000000..1921599ae95 --- /dev/null +++ b/spec/frontend/vue_mr_widget/components/states/mr_widget_merged_spec.js @@ -0,0 +1,219 @@ +import Vue from 'vue'; +import mountComponent from 'helpers/vue_mount_component_helper'; +import mergedComponent from '~/vue_merge_request_widget/components/states/mr_widget_merged.vue'; +import eventHub from '~/vue_merge_request_widget/event_hub'; + +describe('MRWidgetMerged', () => { + let vm; + const targetBranch = 'foo'; + const selectors = { + get copyMergeShaButton() { + return vm.$el.querySelector('button.js-mr-merged-copy-sha'); + }, + get mergeCommitShaLink() { + return vm.$el.querySelector('a.js-mr-merged-commit-sha'); + }, + }; + + beforeEach(() => { + const Component = Vue.extend(mergedComponent); + const mr = { + isRemovingSourceBranch: false, + cherryPickInForkPath: false, + canCherryPickInCurrentMR: true, + revertInForkPath: false, + canRevertInCurrentMR: true, + canRemoveSourceBranch: true, + sourceBranchRemoved: true, + metrics: { + mergedBy: { + name: 'Administrator', + username: 'root', + webUrl: 'http://localhost:3000/root', + avatarUrl: + 'http://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon', + }, + mergedAt: 'Jan 24, 2018 1:02pm GMT+0000', + readableMergedAt: '', + closedBy: {}, + closedAt: 'Jan 24, 2018 1:02pm GMT+0000', + readableClosedAt: '', + }, + updatedAt: 'mergedUpdatedAt', + shortMergeCommitSha: '958c0475', + mergeCommitSha: '958c047516e182dfc52317f721f696e8a1ee85ed', + mergeCommitPath: + 'http://localhost:3000/root/nautilus/commit/f7ce827c314c9340b075657fd61c789fb01cf74d', + sourceBranch: 'bar', + targetBranch, + }; + + const service = { + removeSourceBranch() {}, + }; + + jest.spyOn(eventHub, '$emit').mockImplementation(() => {}); + + vm = mountComponent(Component, { mr, service }); + }); + + afterEach(() => { + vm.$destroy(); + }); + + describe('computed', () => { + describe('shouldShowRemoveSourceBranch', () => { + it('returns true when sourceBranchRemoved is false', () => { + vm.mr.sourceBranchRemoved = false; + + expect(vm.shouldShowRemoveSourceBranch).toEqual(true); + }); + + it('returns false when sourceBranchRemoved is true', () => { + vm.mr.sourceBranchRemoved = true; + + expect(vm.shouldShowRemoveSourceBranch).toEqual(false); + }); + + it('returns false when canRemoveSourceBranch is false', () => { + vm.mr.sourceBranchRemoved = false; + vm.mr.canRemoveSourceBranch = false; + + expect(vm.shouldShowRemoveSourceBranch).toEqual(false); + }); + + it('returns false when is making request', () => { + vm.mr.canRemoveSourceBranch = true; + vm.isMakingRequest = true; + + expect(vm.shouldShowRemoveSourceBranch).toEqual(false); + }); + + it('returns true when all are true', () => { + vm.mr.isRemovingSourceBranch = true; + vm.mr.canRemoveSourceBranch = true; + vm.isMakingRequest = true; + + expect(vm.shouldShowRemoveSourceBranch).toEqual(false); + }); + }); + + describe('shouldShowSourceBranchRemoving', () => { + it('should correct value when fields changed', () => { + vm.mr.sourceBranchRemoved = false; + + expect(vm.shouldShowSourceBranchRemoving).toEqual(false); + + vm.mr.sourceBranchRemoved = true; + + expect(vm.shouldShowRemoveSourceBranch).toEqual(false); + + vm.mr.sourceBranchRemoved = false; + vm.isMakingRequest = true; + + expect(vm.shouldShowSourceBranchRemoving).toEqual(true); + + vm.isMakingRequest = false; + vm.mr.isRemovingSourceBranch = true; + + expect(vm.shouldShowSourceBranchRemoving).toEqual(true); + }); + }); + }); + + describe('methods', () => { + describe('removeSourceBranch', () => { + it('should set flag and call service then request main component to update the widget', done => { + jest.spyOn(vm.service, 'removeSourceBranch').mockReturnValue( + new Promise(resolve => { + resolve({ + data: { + message: 'Branch was deleted', + }, + }); + }), + ); + + vm.removeSourceBranch(); + setImmediate(() => { + const args = eventHub.$emit.mock.calls[0]; + + expect(vm.isMakingRequest).toEqual(true); + expect(args[0]).toEqual('MRWidgetUpdateRequested'); + expect(args[1]).not.toThrow(); + done(); + }); + }); + }); + }); + + it('has merged by information', () => { + expect(vm.$el.textContent).toContain('Merged by'); + expect(vm.$el.textContent).toContain('Administrator'); + }); + + it('renders branch information', () => { + expect(vm.$el.textContent).toContain('The changes were merged into'); + expect(vm.$el.textContent).toContain(targetBranch); + }); + + it('renders information about branch being deleted', () => { + expect(vm.$el.textContent).toContain('The source branch has been deleted'); + }); + + it('shows revert and cherry-pick buttons', () => { + expect(vm.$el.textContent).toContain('Revert'); + expect(vm.$el.textContent).toContain('Cherry-pick'); + }); + + it('shows button to copy commit SHA to clipboard', () => { + expect(selectors.copyMergeShaButton).toExist(); + expect(selectors.copyMergeShaButton.getAttribute('data-clipboard-text')).toBe( + vm.mr.mergeCommitSha, + ); + }); + + it('hides button to copy commit SHA if SHA does not exist', done => { + vm.mr.mergeCommitSha = null; + + Vue.nextTick(() => { + expect(selectors.copyMergeShaButton).not.toExist(); + expect(vm.$el.querySelector('.mr-info-list').innerText).not.toContain('with'); + done(); + }); + }); + + it('shows merge commit SHA link', () => { + expect(selectors.mergeCommitShaLink).toExist(); + expect(selectors.mergeCommitShaLink.text).toContain(vm.mr.shortMergeCommitSha); + expect(selectors.mergeCommitShaLink.href).toBe(vm.mr.mergeCommitPath); + }); + + it('should not show source branch deleted text', done => { + vm.mr.sourceBranchRemoved = false; + + Vue.nextTick(() => { + expect(vm.$el.innerText).toContain('You can delete the source branch now'); + expect(vm.$el.innerText).not.toContain('The source branch has been deleted'); + done(); + }); + }); + + it('should show source branch deleting text', done => { + vm.mr.isRemovingSourceBranch = true; + vm.mr.sourceBranchRemoved = false; + + Vue.nextTick(() => { + expect(vm.$el.innerText).toContain('The source branch is being deleted'); + expect(vm.$el.innerText).not.toContain('You can delete the source branch now'); + expect(vm.$el.innerText).not.toContain('The source branch has been deleted'); + done(); + }); + }); + + it('should use mergedEvent mergedAt as tooltip title', () => { + expect(vm.$el.querySelector('time').getAttribute('data-original-title')).toBe( + 'Jan 24, 2018 1:02pm GMT+0000', + ); + }); +}); diff --git a/spec/frontend/vue_mr_widget/components/states/mr_widget_merging_spec.js b/spec/frontend/vue_mr_widget/components/states/mr_widget_merging_spec.js new file mode 100644 index 00000000000..222cb74cc66 --- /dev/null +++ b/spec/frontend/vue_mr_widget/components/states/mr_widget_merging_spec.js @@ -0,0 +1,43 @@ +import Vue from 'vue'; +import mountComponent from 'helpers/vue_mount_component_helper'; +import mergingComponent from '~/vue_merge_request_widget/components/states/mr_widget_merging.vue'; + +describe('MRWidgetMerging', () => { + let vm; + beforeEach(() => { + const Component = Vue.extend(mergingComponent); + + vm = mountComponent(Component, { + mr: { + targetBranchPath: '/branch-path', + targetBranch: 'branch', + }, + }); + }); + + afterEach(() => { + vm.$destroy(); + }); + + it('renders information about merge request being merged', () => { + expect( + vm.$el + .querySelector('.media-body') + .textContent.trim() + .replace(/\s\s+/g, ' ') + .replace(/[\r\n]+/g, ' '), + ).toContain('This merge request is in the process of being merged'); + }); + + it('renders branch information', () => { + expect( + vm.$el + .querySelector('.mr-info-list') + .textContent.trim() + .replace(/\s\s+/g, ' ') + .replace(/[\r\n]+/g, ' '), + ).toEqual('The changes will be merged into branch'); + + expect(vm.$el.querySelector('a').getAttribute('href')).toEqual('/branch-path'); + }); +}); diff --git a/spec/frontend/vue_mr_widget/components/states/mr_widget_missing_branch_spec.js b/spec/frontend/vue_mr_widget/components/states/mr_widget_missing_branch_spec.js new file mode 100644 index 00000000000..3f03ebdb047 --- /dev/null +++ b/spec/frontend/vue_mr_widget/components/states/mr_widget_missing_branch_spec.js @@ -0,0 +1,40 @@ +import Vue from 'vue'; +import mountComponent from 'helpers/vue_mount_component_helper'; +import missingBranchComponent from '~/vue_merge_request_widget/components/states/mr_widget_missing_branch.vue'; + +describe('MRWidgetMissingBranch', () => { + let vm; + + beforeEach(() => { + const Component = Vue.extend(missingBranchComponent); + vm = mountComponent(Component, { mr: { sourceBranchRemoved: true } }); + }); + + afterEach(() => { + vm.$destroy(); + }); + + describe('computed', () => { + describe('missingBranchName', () => { + it('should return proper branch name', () => { + expect(vm.missingBranchName).toEqual('source'); + + vm.mr.sourceBranchRemoved = false; + + expect(vm.missingBranchName).toEqual('target'); + }); + }); + }); + + describe('template', () => { + it('should have correct elements', () => { + const el = vm.$el; + const content = el.textContent.replace(/\n(\s)+/g, ' ').trim(); + + expect(el.classList.contains('mr-widget-body')).toBeTruthy(); + expect(el.querySelector('button').getAttribute('disabled')).toBeTruthy(); + expect(content.replace(/\s\s+/g, ' ')).toContain('source branch does not exist.'); + expect(content).toContain('Please restore it or use a different source branch'); + }); + }); +}); diff --git a/spec/frontend/vue_mr_widget/components/states/mr_widget_not_allowed_spec.js b/spec/frontend/vue_mr_widget/components/states/mr_widget_not_allowed_spec.js new file mode 100644 index 00000000000..63e93074857 --- /dev/null +++ b/spec/frontend/vue_mr_widget/components/states/mr_widget_not_allowed_spec.js @@ -0,0 +1,26 @@ +import Vue from 'vue'; +import mountComponent from 'helpers/vue_mount_component_helper'; +import notAllowedComponent from '~/vue_merge_request_widget/components/states/mr_widget_not_allowed.vue'; + +describe('MRWidgetNotAllowed', () => { + let vm; + beforeEach(() => { + const Component = Vue.extend(notAllowedComponent); + vm = mountComponent(Component); + }); + + afterEach(() => { + vm.$destroy(); + }); + + it('renders success icon', () => { + expect(vm.$el.querySelector('.ci-status-icon-success')).not.toBe(null); + }); + + it('renders informative text', () => { + expect(vm.$el.innerText).toContain('Ready to be merged automatically.'); + expect(vm.$el.innerText).toContain( + 'Ask someone with write access to this repository to merge this request', + ); + }); +}); diff --git a/spec/frontend/vue_mr_widget/components/states/mr_widget_nothing_to_merge_spec.js b/spec/frontend/vue_mr_widget/components/states/mr_widget_nothing_to_merge_spec.js new file mode 100644 index 00000000000..bd0bd36ebc2 --- /dev/null +++ b/spec/frontend/vue_mr_widget/components/states/mr_widget_nothing_to_merge_spec.js @@ -0,0 +1,34 @@ +import Vue from 'vue'; +import NothingToMerge from '~/vue_merge_request_widget/components/states/nothing_to_merge.vue'; + +describe('NothingToMerge', () => { + describe('template', () => { + const Component = Vue.extend(NothingToMerge); + const newBlobPath = '/foo'; + const vm = new Component({ + el: document.createElement('div'), + propsData: { + mr: { newBlobPath }, + }, + }); + + it('should have correct elements', () => { + expect(vm.$el.classList.contains('mr-widget-body')).toBeTruthy(); + expect(vm.$el.querySelector('a').href).toContain(newBlobPath); + expect(vm.$el.innerText).toContain( + "Currently there are no changes in this merge request's source branch", + ); + + expect(vm.$el.innerText.replace(/\s\s+/g, ' ')).toContain( + 'Please push new commits or use a different branch.', + ); + }); + + it('should not show new blob link if there is no link available', () => { + vm.mr.newBlobPath = null; + Vue.nextTick(() => { + expect(vm.$el.querySelector('a')).toEqual(null); + }); + }); + }); +}); diff --git a/spec/frontend/vue_mr_widget/components/states/mr_widget_pipeline_blocked_spec.js b/spec/frontend/vue_mr_widget/components/states/mr_widget_pipeline_blocked_spec.js new file mode 100644 index 00000000000..8847e4e6bdd --- /dev/null +++ b/spec/frontend/vue_mr_widget/components/states/mr_widget_pipeline_blocked_spec.js @@ -0,0 +1,26 @@ +import Vue from 'vue'; +import mountComponent from 'helpers/vue_mount_component_helper'; +import { removeBreakLine } from 'helpers/text_helper'; +import pipelineBlockedComponent from '~/vue_merge_request_widget/components/states/mr_widget_pipeline_blocked.vue'; + +describe('MRWidgetPipelineBlocked', () => { + let vm; + beforeEach(() => { + const Component = Vue.extend(pipelineBlockedComponent); + vm = mountComponent(Component); + }); + + afterEach(() => { + vm.$destroy(); + }); + + it('renders warning icon', () => { + expect(vm.$el.querySelector('.ci-status-icon-warning')).not.toBe(null); + }); + + it('renders information text', () => { + expect(removeBreakLine(vm.$el.textContent).trim()).toContain( + 'Pipeline blocked. The pipeline for this merge request requires a manual action to proceed', + ); + }); +}); diff --git a/spec/frontend/vue_mr_widget/components/states/mr_widget_pipeline_failed_spec.js b/spec/frontend/vue_mr_widget/components/states/mr_widget_pipeline_failed_spec.js new file mode 100644 index 00000000000..179adef12d9 --- /dev/null +++ b/spec/frontend/vue_mr_widget/components/states/mr_widget_pipeline_failed_spec.js @@ -0,0 +1,19 @@ +import Vue from 'vue'; +import { removeBreakLine } from 'helpers/text_helper'; +import PipelineFailed from '~/vue_merge_request_widget/components/states/pipeline_failed.vue'; + +describe('PipelineFailed', () => { + describe('template', () => { + const Component = Vue.extend(PipelineFailed); + const vm = new Component({ + el: document.createElement('div'), + }); + it('should have correct elements', () => { + expect(vm.$el.classList.contains('mr-widget-body')).toBeTruthy(); + expect(vm.$el.querySelector('button').getAttribute('disabled')).toBeTruthy(); + expect(removeBreakLine(vm.$el.innerText).trim()).toContain( + 'The pipeline for this merge request failed. Please retry the job or push a new commit to fix the failure', + ); + }); + }); +}); diff --git a/spec/frontend/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js b/spec/frontend/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js new file mode 100644 index 00000000000..1f0d6a7378c --- /dev/null +++ b/spec/frontend/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js @@ -0,0 +1,981 @@ +import Vue from 'vue'; +import { createLocalVue, shallowMount } from '@vue/test-utils'; +import ReadyToMerge from '~/vue_merge_request_widget/components/states/ready_to_merge.vue'; +import SquashBeforeMerge from '~/vue_merge_request_widget/components/states/squash_before_merge.vue'; +import CommitsHeader from '~/vue_merge_request_widget/components/states/commits_header.vue'; +import CommitEdit from '~/vue_merge_request_widget/components/states/commit_edit.vue'; +import CommitMessageDropdown from '~/vue_merge_request_widget/components/states/commit_message_dropdown.vue'; +import eventHub from '~/vue_merge_request_widget/event_hub'; +import { MWPS_MERGE_STRATEGY, MTWPS_MERGE_STRATEGY } from '~/vue_merge_request_widget/constants'; +import { refreshUserMergeRequestCounts } from '~/commons/nav/user_merge_requests'; +import simplePoll from '~/lib/utils/simple_poll'; + +jest.mock('~/lib/utils/simple_poll', () => + jest.fn().mockImplementation(jest.requireActual('~/lib/utils/simple_poll').default), +); +jest.mock('~/commons/nav/user_merge_requests', () => ({ + refreshUserMergeRequestCounts: jest.fn(), +})); + +const commitMessage = 'This is the commit message'; +const squashCommitMessage = 'This is the squash commit message'; +const commitMessageWithDescription = 'This is the commit message description'; +const createTestMr = customConfig => { + const mr = { + isPipelineActive: false, + pipeline: null, + isPipelineFailed: false, + isPipelinePassing: false, + isMergeAllowed: true, + isApproved: true, + onlyAllowMergeIfPipelineSucceeds: false, + ffOnlyEnabled: false, + hasCI: false, + ciStatus: null, + sha: '12345678', + squash: false, + commitMessage, + squashCommitMessage, + commitMessageWithDescription, + shouldRemoveSourceBranch: true, + canRemoveSourceBranch: false, + targetBranch: 'master', + preferredAutoMergeStrategy: MWPS_MERGE_STRATEGY, + availableAutoMergeStrategies: [MWPS_MERGE_STRATEGY], + mergeImmediatelyDocsPath: 'path/to/merge/immediately/docs', + }; + + Object.assign(mr, customConfig.mr); + + return mr; +}; + +const createTestService = () => ({ + merge: jest.fn(), + poll: jest.fn().mockResolvedValue(), +}); + +const createComponent = (customConfig = {}) => { + const Component = Vue.extend(ReadyToMerge); + + return new Component({ + el: document.createElement('div'), + propsData: { + mr: createTestMr(customConfig), + service: createTestService(), + }, + }); +}; + +describe('ReadyToMerge', () => { + let vm; + + beforeEach(() => { + vm = createComponent(); + }); + + afterEach(() => { + vm.$destroy(); + }); + + describe('props', () => { + it('should have props', () => { + const { mr, service } = ReadyToMerge.props; + + expect(mr.type instanceof Object).toBeTruthy(); + expect(mr.required).toBeTruthy(); + + expect(service.type instanceof Object).toBeTruthy(); + expect(service.required).toBeTruthy(); + }); + }); + + describe('data', () => { + it('should have default data', () => { + expect(vm.mergeWhenBuildSucceeds).toBeFalsy(); + expect(vm.useCommitMessageWithDescription).toBeFalsy(); + expect(vm.showCommitMessageEditor).toBeFalsy(); + expect(vm.isMakingRequest).toBeFalsy(); + expect(vm.isMergingImmediately).toBeFalsy(); + expect(vm.commitMessage).toBe(vm.mr.commitMessage); + expect(vm.successSvg).toBeDefined(); + expect(vm.warningSvg).toBeDefined(); + }); + }); + + describe('computed', () => { + describe('isAutoMergeAvailable', () => { + it('should return true when at least one merge strategy is available', () => { + vm.mr.availableAutoMergeStrategies = [MWPS_MERGE_STRATEGY]; + + expect(vm.isAutoMergeAvailable).toBe(true); + }); + + it('should return false when no merge strategies are available', () => { + vm.mr.availableAutoMergeStrategies = []; + + expect(vm.isAutoMergeAvailable).toBe(false); + }); + }); + + describe('status', () => { + it('defaults to success', () => { + Vue.set(vm.mr, 'pipeline', true); + Vue.set(vm.mr, 'availableAutoMergeStrategies', []); + + expect(vm.status).toEqual('success'); + }); + + it('returns failed when MR has CI but also has an unknown status', () => { + Vue.set(vm.mr, 'hasCI', true); + + expect(vm.status).toEqual('failed'); + }); + + it('returns default when MR has no pipeline', () => { + Vue.set(vm.mr, 'availableAutoMergeStrategies', []); + + expect(vm.status).toEqual('success'); + }); + + it('returns pending when pipeline is active', () => { + Vue.set(vm.mr, 'pipeline', {}); + Vue.set(vm.mr, 'isPipelineActive', true); + + expect(vm.status).toEqual('pending'); + }); + + it('returns failed when pipeline is failed', () => { + Vue.set(vm.mr, 'pipeline', {}); + Vue.set(vm.mr, 'isPipelineFailed', true); + Vue.set(vm.mr, 'availableAutoMergeStrategies', []); + + expect(vm.status).toEqual('failed'); + }); + }); + + describe('mergeButtonVariant', () => { + it('defaults to success class', () => { + Vue.set(vm.mr, 'availableAutoMergeStrategies', []); + + expect(vm.mergeButtonVariant).toEqual('success'); + }); + + it('returns success class for success status', () => { + Vue.set(vm.mr, 'availableAutoMergeStrategies', []); + Vue.set(vm.mr, 'pipeline', true); + + expect(vm.mergeButtonVariant).toEqual('success'); + }); + + it('returns info class for pending status', () => { + Vue.set(vm.mr, 'availableAutoMergeStrategies', [MTWPS_MERGE_STRATEGY]); + + expect(vm.mergeButtonVariant).toEqual('info'); + }); + + it('returns danger class for failed status', () => { + vm.mr.hasCI = true; + + expect(vm.mergeButtonVariant).toEqual('danger'); + }); + }); + + describe('status icon', () => { + it('defaults to tick icon', () => { + expect(vm.iconClass).toEqual('success'); + }); + + it('shows tick for success status', () => { + vm.mr.pipeline = true; + + expect(vm.iconClass).toEqual('success'); + }); + + it('shows tick for pending status', () => { + vm.mr.pipeline = {}; + vm.mr.isPipelineActive = true; + + expect(vm.iconClass).toEqual('success'); + }); + + it('shows warning icon for failed status', () => { + vm.mr.hasCI = true; + + expect(vm.iconClass).toEqual('warning'); + }); + + it('shows warning icon for merge not allowed', () => { + vm.mr.hasCI = true; + + expect(vm.iconClass).toEqual('warning'); + }); + }); + + describe('mergeButtonText', () => { + it('should return "Merge" when no auto merge strategies are available', () => { + Vue.set(vm.mr, 'availableAutoMergeStrategies', []); + + expect(vm.mergeButtonText).toEqual('Merge'); + }); + + it('should return "Merge in progress"', () => { + Vue.set(vm, 'isMergingImmediately', true); + + expect(vm.mergeButtonText).toEqual('Merge in progress'); + }); + + it('should return "Merge when pipeline succeeds" when the MWPS auto merge strategy is available', () => { + Vue.set(vm, 'isMergingImmediately', false); + Vue.set(vm.mr, 'preferredAutoMergeStrategy', MWPS_MERGE_STRATEGY); + + expect(vm.mergeButtonText).toEqual('Merge when pipeline succeeds'); + }); + }); + + describe('autoMergeText', () => { + it('should return Merge when pipeline succeeds', () => { + Vue.set(vm.mr, 'preferredAutoMergeStrategy', MWPS_MERGE_STRATEGY); + + expect(vm.autoMergeText).toEqual('Merge when pipeline succeeds'); + }); + }); + + describe('shouldShowMergeImmediatelyDropdown', () => { + it('should return false if no pipeline is active', () => { + Vue.set(vm.mr, 'isPipelineActive', false); + Vue.set(vm.mr, 'onlyAllowMergeIfPipelineSucceeds', false); + + expect(vm.shouldShowMergeImmediatelyDropdown).toBe(false); + }); + + it('should return false if "Pipelines must succeed" is enabled for the current project', () => { + Vue.set(vm.mr, 'isPipelineActive', true); + Vue.set(vm.mr, 'onlyAllowMergeIfPipelineSucceeds', true); + + expect(vm.shouldShowMergeImmediatelyDropdown).toBe(false); + }); + + it('should return true if the MR\'s pipeline is active and "Pipelines must succeed" is not enabled for the current project', () => { + Vue.set(vm.mr, 'isPipelineActive', true); + Vue.set(vm.mr, 'onlyAllowMergeIfPipelineSucceeds', false); + + expect(vm.shouldShowMergeImmediatelyDropdown).toBe(true); + }); + }); + + describe('isMergeButtonDisabled', () => { + it('should return false with initial data', () => { + Vue.set(vm.mr, 'isMergeAllowed', true); + + expect(vm.isMergeButtonDisabled).toBe(false); + }); + + it('should return true when there is no commit message', () => { + Vue.set(vm.mr, 'isMergeAllowed', true); + Vue.set(vm, 'commitMessage', ''); + + expect(vm.isMergeButtonDisabled).toBe(true); + }); + + it('should return true if merge is not allowed', () => { + Vue.set(vm.mr, 'isMergeAllowed', false); + Vue.set(vm.mr, 'availableAutoMergeStrategies', []); + Vue.set(vm.mr, 'onlyAllowMergeIfPipelineSucceeds', true); + + expect(vm.isMergeButtonDisabled).toBe(true); + }); + + it('should return true when the vm instance is making request', () => { + Vue.set(vm.mr, 'isMergeAllowed', true); + Vue.set(vm, 'isMakingRequest', true); + + expect(vm.isMergeButtonDisabled).toBe(true); + }); + }); + + describe('isMergeImmediatelyDangerous', () => { + it('should always return false in CE', () => { + expect(vm.isMergeImmediatelyDangerous).toBe(false); + }); + }); + }); + + describe('methods', () => { + describe('shouldShowMergeControls', () => { + it('should return false when an external pipeline is running and required to succeed', () => { + Vue.set(vm.mr, 'isMergeAllowed', false); + Vue.set(vm.mr, 'availableAutoMergeStrategies', []); + + expect(vm.shouldShowMergeControls).toBe(false); + }); + + it('should return true when the build succeeded or build not required to succeed', () => { + Vue.set(vm.mr, 'isMergeAllowed', true); + Vue.set(vm.mr, 'availableAutoMergeStrategies', []); + + expect(vm.shouldShowMergeControls).toBe(true); + }); + + it('should return true when showing the MWPS button and a pipeline is running that needs to be successful', () => { + Vue.set(vm.mr, 'isMergeAllowed', false); + Vue.set(vm.mr, 'availableAutoMergeStrategies', [MWPS_MERGE_STRATEGY]); + + expect(vm.shouldShowMergeControls).toBe(true); + }); + + it('should return true when showing the MWPS button but not required for the pipeline to succeed', () => { + Vue.set(vm.mr, 'isMergeAllowed', true); + Vue.set(vm.mr, 'availableAutoMergeStrategies', [MWPS_MERGE_STRATEGY]); + + expect(vm.shouldShowMergeControls).toBe(true); + }); + }); + + describe('updateMergeCommitMessage', () => { + it('should revert flag and change commitMessage', () => { + expect(vm.commitMessage).toEqual(commitMessage); + vm.updateMergeCommitMessage(true); + + expect(vm.commitMessage).toEqual(commitMessageWithDescription); + vm.updateMergeCommitMessage(false); + + expect(vm.commitMessage).toEqual(commitMessage); + }); + }); + + describe('handleMergeButtonClick', () => { + const returnPromise = status => + new Promise(resolve => { + resolve({ + data: { + status, + }, + }); + }); + + it('should handle merge when pipeline succeeds', done => { + jest.spyOn(eventHub, '$emit').mockImplementation(() => {}); + jest + .spyOn(vm.service, 'merge') + .mockReturnValue(returnPromise('merge_when_pipeline_succeeds')); + vm.removeSourceBranch = false; + vm.handleMergeButtonClick(true); + + setImmediate(() => { + expect(vm.isMakingRequest).toBeTruthy(); + expect(eventHub.$emit).toHaveBeenCalledWith('MRWidgetUpdateRequested'); + + const params = vm.service.merge.mock.calls[0][0]; + + expect(params).toEqual( + expect.objectContaining({ + sha: vm.mr.sha, + commit_message: vm.mr.commitMessage, + should_remove_source_branch: false, + auto_merge_strategy: 'merge_when_pipeline_succeeds', + }), + ); + done(); + }); + }); + + it('should handle merge failed', done => { + jest.spyOn(eventHub, '$emit').mockImplementation(() => {}); + jest.spyOn(vm.service, 'merge').mockReturnValue(returnPromise('failed')); + vm.handleMergeButtonClick(false, true); + + setImmediate(() => { + expect(vm.isMakingRequest).toBeTruthy(); + expect(eventHub.$emit).toHaveBeenCalledWith('FailedToMerge', undefined); + + const params = vm.service.merge.mock.calls[0][0]; + + expect(params.should_remove_source_branch).toBeTruthy(); + expect(params.auto_merge_strategy).toBeUndefined(); + done(); + }); + }); + + it('should handle merge action accepted case', done => { + jest.spyOn(vm.service, 'merge').mockReturnValue(returnPromise('success')); + jest.spyOn(vm, 'initiateMergePolling').mockImplementation(() => {}); + vm.handleMergeButtonClick(); + + setImmediate(() => { + expect(vm.isMakingRequest).toBeTruthy(); + expect(vm.initiateMergePolling).toHaveBeenCalled(); + + const params = vm.service.merge.mock.calls[0][0]; + + expect(params.should_remove_source_branch).toBeTruthy(); + expect(params.auto_merge_strategy).toBeUndefined(); + done(); + }); + }); + }); + + describe('initiateMergePolling', () => { + it('should call simplePoll', () => { + vm.initiateMergePolling(); + + expect(simplePoll).toHaveBeenCalledWith(expect.any(Function), { timeout: 0 }); + }); + + it('should call handleMergePolling', () => { + jest.spyOn(vm, 'handleMergePolling').mockImplementation(() => {}); + + vm.initiateMergePolling(); + + expect(vm.handleMergePolling).toHaveBeenCalled(); + }); + }); + + describe('handleMergePolling', () => { + const returnPromise = state => + new Promise(resolve => { + resolve({ + data: { + state, + source_branch_exists: true, + }, + }); + }); + + beforeEach(() => { + loadFixtures('merge_requests/merge_request_of_current_user.html'); + }); + + it('should call start and stop polling when MR merged', done => { + jest.spyOn(eventHub, '$emit').mockImplementation(() => {}); + jest.spyOn(vm.service, 'poll').mockReturnValue(returnPromise('merged')); + jest.spyOn(vm, 'initiateRemoveSourceBranchPolling').mockImplementation(() => {}); + + let cpc = false; // continuePollingCalled + let spc = false; // stopPollingCalled + + vm.handleMergePolling( + () => { + cpc = true; + }, + () => { + spc = true; + }, + ); + setImmediate(() => { + expect(vm.service.poll).toHaveBeenCalled(); + expect(eventHub.$emit).toHaveBeenCalledWith('MRWidgetUpdateRequested'); + expect(eventHub.$emit).toHaveBeenCalledWith('FetchActionsContent'); + expect(vm.initiateRemoveSourceBranchPolling).toHaveBeenCalled(); + expect(refreshUserMergeRequestCounts).toHaveBeenCalled(); + expect(cpc).toBeFalsy(); + expect(spc).toBeTruthy(); + + done(); + }); + }); + + it('updates status box', done => { + jest.spyOn(vm.service, 'poll').mockReturnValue(returnPromise('merged')); + jest.spyOn(vm, 'initiateRemoveSourceBranchPolling').mockImplementation(() => {}); + + vm.handleMergePolling(() => {}, () => {}); + + setImmediate(() => { + const statusBox = document.querySelector('.status-box'); + + expect(statusBox.classList.contains('status-box-mr-merged')).toBeTruthy(); + expect(statusBox.textContent).toContain('Merged'); + + done(); + }); + }); + + it('hides close button', done => { + jest.spyOn(vm.service, 'poll').mockReturnValue(returnPromise('merged')); + jest.spyOn(vm, 'initiateRemoveSourceBranchPolling').mockImplementation(() => {}); + + vm.handleMergePolling(() => {}, () => {}); + + setImmediate(() => { + expect(document.querySelector('.btn-close').classList.contains('hidden')).toBeTruthy(); + + done(); + }); + }); + + it('updates merge request count badge', done => { + jest.spyOn(vm.service, 'poll').mockReturnValue(returnPromise('merged')); + jest.spyOn(vm, 'initiateRemoveSourceBranchPolling').mockImplementation(() => {}); + + vm.handleMergePolling(() => {}, () => {}); + + setImmediate(() => { + expect(document.querySelector('.js-merge-counter').textContent).toBe('0'); + + done(); + }); + }); + + it('should continue polling until MR is merged', done => { + jest.spyOn(vm.service, 'poll').mockReturnValue(returnPromise('some_other_state')); + jest.spyOn(vm, 'initiateRemoveSourceBranchPolling').mockImplementation(() => {}); + + let cpc = false; // continuePollingCalled + let spc = false; // stopPollingCalled + + vm.handleMergePolling( + () => { + cpc = true; + }, + () => { + spc = true; + }, + ); + setImmediate(() => { + expect(cpc).toBeTruthy(); + expect(spc).toBeFalsy(); + + done(); + }); + }); + }); + + describe('initiateRemoveSourceBranchPolling', () => { + it('should emit event and call simplePoll', () => { + jest.spyOn(eventHub, '$emit').mockImplementation(() => {}); + + vm.initiateRemoveSourceBranchPolling(); + + expect(eventHub.$emit).toHaveBeenCalledWith('SetBranchRemoveFlag', [true]); + expect(simplePoll).toHaveBeenCalled(); + }); + }); + + describe('handleRemoveBranchPolling', () => { + const returnPromise = state => + new Promise(resolve => { + resolve({ + data: { + source_branch_exists: state, + }, + }); + }); + + it('should call start and stop polling when MR merged', done => { + jest.spyOn(eventHub, '$emit').mockImplementation(() => {}); + jest.spyOn(vm.service, 'poll').mockReturnValue(returnPromise(false)); + + let cpc = false; // continuePollingCalled + let spc = false; // stopPollingCalled + + vm.handleRemoveBranchPolling( + () => { + cpc = true; + }, + () => { + spc = true; + }, + ); + setImmediate(() => { + expect(vm.service.poll).toHaveBeenCalled(); + + const args = eventHub.$emit.mock.calls[0]; + + expect(args[0]).toEqual('MRWidgetUpdateRequested'); + expect(args[1]).toBeDefined(); + args[1](); + + expect(eventHub.$emit).toHaveBeenCalledWith('SetBranchRemoveFlag', [false]); + + expect(cpc).toBeFalsy(); + expect(spc).toBeTruthy(); + + done(); + }); + }); + + it('should continue polling until MR is merged', done => { + jest.spyOn(vm.service, 'poll').mockReturnValue(returnPromise(true)); + + let cpc = false; // continuePollingCalled + let spc = false; // stopPollingCalled + + vm.handleRemoveBranchPolling( + () => { + cpc = true; + }, + () => { + spc = true; + }, + ); + setImmediate(() => { + expect(cpc).toBeTruthy(); + expect(spc).toBeFalsy(); + + done(); + }); + }); + }); + }); + + describe('Remove source branch checkbox', () => { + describe('when user can merge but cannot delete branch', () => { + it('should be disabled in the rendered output', () => { + const checkboxElement = vm.$el.querySelector('#remove-source-branch-input'); + + expect(checkboxElement).toBeNull(); + }); + }); + + describe('when user can merge and can delete branch', () => { + beforeEach(() => { + vm = createComponent({ + mr: { canRemoveSourceBranch: true }, + }); + }); + + it('isRemoveSourceBranchButtonDisabled should be false', () => { + expect(vm.isRemoveSourceBranchButtonDisabled).toBe(false); + }); + + it('removed source branch should be enabled in rendered output', () => { + const checkboxElement = vm.$el.querySelector('#remove-source-branch-input'); + + expect(checkboxElement).not.toBeNull(); + }); + }); + }); + + describe('render children components', () => { + let wrapper; + const localVue = createLocalVue(); + + const createLocalComponent = (customConfig = {}) => { + wrapper = shallowMount(localVue.extend(ReadyToMerge), { + localVue, + propsData: { + mr: createTestMr(customConfig), + service: createTestService(), + }, + }); + }; + + afterEach(() => { + wrapper.destroy(); + }); + + const findCheckboxElement = () => wrapper.find(SquashBeforeMerge); + const findCommitsHeaderElement = () => wrapper.find(CommitsHeader); + const findCommitEditElements = () => wrapper.findAll(CommitEdit); + const findCommitDropdownElement = () => wrapper.find(CommitMessageDropdown); + const findFirstCommitEditLabel = () => + findCommitEditElements() + .at(0) + .props('label'); + + describe('squash checkbox', () => { + it('should be rendered when squash before merge is enabled and there is more than 1 commit', () => { + createLocalComponent({ + mr: { commitsCount: 2, enableSquashBeforeMerge: true }, + }); + + expect(findCheckboxElement().exists()).toBeTruthy(); + }); + + it('should not be rendered when squash before merge is disabled', () => { + createLocalComponent({ mr: { commitsCount: 2, enableSquashBeforeMerge: false } }); + + expect(findCheckboxElement().exists()).toBeFalsy(); + }); + + it('should not be rendered when there is only 1 commit', () => { + createLocalComponent({ mr: { commitsCount: 1, enableSquashBeforeMerge: true } }); + + expect(findCheckboxElement().exists()).toBeFalsy(); + }); + }); + + describe('commits count collapsible header', () => { + it('should be rendered when fast-forward is disabled', () => { + createLocalComponent(); + + expect(findCommitsHeaderElement().exists()).toBeTruthy(); + }); + + describe('when fast-forward is enabled', () => { + it('should be rendered if squash and squash before are enabled and there is more than 1 commit', () => { + createLocalComponent({ + mr: { + ffOnlyEnabled: true, + enableSquashBeforeMerge: true, + squash: true, + commitsCount: 2, + }, + }); + + expect(findCommitsHeaderElement().exists()).toBeTruthy(); + }); + + it('should not be rendered if squash before merge is disabled', () => { + createLocalComponent({ + mr: { + ffOnlyEnabled: true, + enableSquashBeforeMerge: false, + squash: true, + commitsCount: 2, + }, + }); + + expect(findCommitsHeaderElement().exists()).toBeFalsy(); + }); + + it('should not be rendered if squash is disabled', () => { + createLocalComponent({ + mr: { + ffOnlyEnabled: true, + squash: false, + enableSquashBeforeMerge: true, + commitsCount: 2, + }, + }); + + expect(findCommitsHeaderElement().exists()).toBeFalsy(); + }); + + it('should not be rendered if commits count is 1', () => { + createLocalComponent({ + mr: { + ffOnlyEnabled: true, + squash: true, + enableSquashBeforeMerge: true, + commitsCount: 1, + }, + }); + + expect(findCommitsHeaderElement().exists()).toBeFalsy(); + }); + }); + }); + + describe('commits edit components', () => { + describe('when fast-forward merge is enabled', () => { + it('should not be rendered if squash is disabled', () => { + createLocalComponent({ + mr: { + ffOnlyEnabled: true, + squash: false, + enableSquashBeforeMerge: true, + commitsCount: 2, + }, + }); + + expect(findCommitEditElements().length).toBe(0); + }); + + it('should not be rendered if squash before merge is disabled', () => { + createLocalComponent({ + mr: { + ffOnlyEnabled: true, + squash: true, + enableSquashBeforeMerge: false, + commitsCount: 2, + }, + }); + + expect(findCommitEditElements().length).toBe(0); + }); + + it('should not be rendered if there is only one commit', () => { + createLocalComponent({ + mr: { + ffOnlyEnabled: true, + squash: true, + enableSquashBeforeMerge: true, + commitsCount: 1, + }, + }); + + expect(findCommitEditElements().length).toBe(0); + }); + + it('should have one edit component if squash is enabled and there is more than 1 commit', () => { + createLocalComponent({ + mr: { + ffOnlyEnabled: true, + squash: true, + enableSquashBeforeMerge: true, + commitsCount: 2, + }, + }); + + expect(findCommitEditElements().length).toBe(1); + expect(findFirstCommitEditLabel()).toBe('Squash commit message'); + }); + }); + + it('should have one edit component when squash is disabled', () => { + createLocalComponent(); + + expect(findCommitEditElements().length).toBe(1); + }); + + it('should have two edit components when squash is enabled and there is more than 1 commit', () => { + createLocalComponent({ + mr: { + commitsCount: 2, + squash: true, + enableSquashBeforeMerge: true, + }, + }); + + expect(findCommitEditElements().length).toBe(2); + }); + + it('should have one edit components when squash is enabled and there is 1 commit only', () => { + createLocalComponent({ + mr: { + commitsCount: 1, + squash: true, + enableSquashBeforeMerge: true, + }, + }); + + expect(findCommitEditElements().length).toBe(1); + }); + + it('should have correct edit merge commit label', () => { + createLocalComponent(); + + expect(findFirstCommitEditLabel()).toBe('Merge commit message'); + }); + + it('should have correct edit squash commit label', () => { + createLocalComponent({ + mr: { + commitsCount: 2, + squash: true, + enableSquashBeforeMerge: true, + }, + }); + + expect(findFirstCommitEditLabel()).toBe('Squash commit message'); + }); + }); + + describe('commits dropdown', () => { + it('should not be rendered if squash is disabled', () => { + createLocalComponent(); + + expect(findCommitDropdownElement().exists()).toBeFalsy(); + }); + + it('should be rendered if squash is enabled and there is more than 1 commit', () => { + createLocalComponent({ + mr: { enableSquashBeforeMerge: true, squash: true, commitsCount: 2 }, + }); + + expect(findCommitDropdownElement().exists()).toBeTruthy(); + }); + }); + }); + + describe('Merge controls', () => { + describe('when allowed to merge', () => { + beforeEach(() => { + vm = createComponent({ + mr: { isMergeAllowed: true, canRemoveSourceBranch: true }, + }); + }); + + it('shows remove source branch checkbox', () => { + expect(vm.$el.querySelector('.js-remove-source-branch-checkbox')).not.toBeNull(); + }); + + it('shows modify commit message button', () => { + expect(vm.$el.querySelector('.js-modify-commit-message-button')).toBeDefined(); + }); + + it('does not show message about needing to resolve items', () => { + expect(vm.$el.querySelector('.js-resolve-mr-widget-items-message')).toBeNull(); + }); + }); + + describe('when not allowed to merge', () => { + beforeEach(() => { + vm = createComponent({ + mr: { isMergeAllowed: false }, + }); + }); + + it('does not show remove source branch checkbox', () => { + expect(vm.$el.querySelector('.js-remove-source-branch-checkbox')).toBeNull(); + }); + + it('shows message to resolve all items before being allowed to merge', () => { + expect(vm.$el.querySelector('.js-resolve-mr-widget-items-message')).toBeDefined(); + }); + }); + }); + + describe('Merge request project settings', () => { + describe('when the merge commit merge method is enabled', () => { + beforeEach(() => { + vm = createComponent({ + mr: { ffOnlyEnabled: false }, + }); + }); + + it('should not show fast forward message', () => { + expect(vm.$el.querySelector('.mr-fast-forward-message')).toBeNull(); + }); + + it('should show "Modify commit message" button', () => { + expect(vm.$el.querySelector('.js-modify-commit-message-button')).toBeDefined(); + }); + }); + + describe('when the fast-forward merge method is enabled', () => { + beforeEach(() => { + vm = createComponent({ + mr: { ffOnlyEnabled: true }, + }); + }); + + it('should show fast forward message', () => { + expect(vm.$el.querySelector('.mr-fast-forward-message')).toBeDefined(); + }); + + it('should not show "Modify commit message" button', () => { + expect(vm.$el.querySelector('.js-modify-commit-message-button')).toBeNull(); + }); + }); + }); + + describe('with a mismatched SHA', () => { + const findMismatchShaBlock = () => vm.$el.querySelector('.js-sha-mismatch'); + + beforeEach(() => { + vm = createComponent({ + mr: { + isSHAMismatch: true, + mergeRequestDiffsPath: '/merge_requests/1/diffs', + }, + }); + }); + + it('displays a warning message', () => { + expect(findMismatchShaBlock()).toExist(); + }); + + it('warns the user to refresh to review', () => { + expect(findMismatchShaBlock().textContent.trim()).toBe( + 'New changes were added. Reload the page to review them', + ); + }); + + it('displays link to the diffs tab', () => { + expect(findMismatchShaBlock().querySelector('a').href).toContain(vm.mr.mergeRequestDiffsPath); + }); + }); +}); diff --git a/spec/frontend/vue_mr_widget/components/states/mr_widget_sha_mismatch_spec.js b/spec/frontend/vue_mr_widget/components/states/mr_widget_sha_mismatch_spec.js new file mode 100644 index 00000000000..38920846a50 --- /dev/null +++ b/spec/frontend/vue_mr_widget/components/states/mr_widget_sha_mismatch_spec.js @@ -0,0 +1,25 @@ +import Vue from 'vue'; +import mountComponent from 'helpers/vue_mount_component_helper'; +import { removeBreakLine } from 'helpers/text_helper'; +import ShaMismatch from '~/vue_merge_request_widget/components/states/sha_mismatch.vue'; + +describe('ShaMismatch', () => { + let vm; + + beforeEach(() => { + const Component = Vue.extend(ShaMismatch); + vm = mountComponent(Component); + }); + + afterEach(() => { + vm.$destroy(); + }); + + it('should render information message', () => { + expect(vm.$el.querySelector('button').disabled).toEqual(true); + + expect(removeBreakLine(vm.$el.textContent).trim()).toContain( + 'The source branch HEAD has recently changed. Please reload the page and review the changes before merging', + ); + }); +}); diff --git a/spec/frontend/vue_mr_widget/components/states/mr_widget_squash_before_merge_spec.js b/spec/frontend/vue_mr_widget/components/states/mr_widget_squash_before_merge_spec.js new file mode 100644 index 00000000000..b70d580ed04 --- /dev/null +++ b/spec/frontend/vue_mr_widget/components/states/mr_widget_squash_before_merge_spec.js @@ -0,0 +1,99 @@ +import { createLocalVue, shallowMount } from '@vue/test-utils'; +import SquashBeforeMerge from '~/vue_merge_request_widget/components/states/squash_before_merge.vue'; + +const localVue = createLocalVue(); + +describe('Squash before merge component', () => { + let wrapper; + + const createComponent = props => { + wrapper = shallowMount(localVue.extend(SquashBeforeMerge), { + localVue, + propsData: { + ...props, + }, + }); + }; + + afterEach(() => { + wrapper.destroy(); + }); + + describe('checkbox', () => { + const findCheckbox = () => wrapper.find('.js-squash-checkbox'); + + it('is unchecked if passed value prop is false', () => { + createComponent({ + value: false, + }); + + expect(findCheckbox().element.checked).toBeFalsy(); + }); + + it('is checked if passed value prop is true', () => { + createComponent({ + value: true, + }); + + expect(findCheckbox().element.checked).toBeTruthy(); + }); + + it('changes value on click', done => { + createComponent({ + value: false, + }); + + findCheckbox().element.checked = true; + + findCheckbox().trigger('change'); + + wrapper.vm.$nextTick(() => { + expect(findCheckbox().element.checked).toBeTruthy(); + done(); + }); + }); + + it('is disabled if isDisabled prop is true', () => { + createComponent({ + value: false, + isDisabled: true, + }); + + expect(findCheckbox().attributes('disabled')).toBeTruthy(); + }); + }); + + describe('about link', () => { + it('is not rendered if no help path is passed', () => { + createComponent({ + value: false, + }); + + const aboutLink = wrapper.find('a'); + + expect(aboutLink.exists()).toBeFalsy(); + }); + + it('is rendered if help path is passed', () => { + createComponent({ + value: false, + helpPath: 'test-path', + }); + + const aboutLink = wrapper.find('a'); + + expect(aboutLink.exists()).toBeTruthy(); + }); + + it('should have a correct help path if passed', () => { + createComponent({ + value: false, + helpPath: 'test-path', + }); + + const aboutLink = wrapper.find('a'); + + expect(aboutLink.attributes('href')).toEqual('test-path'); + }); + }); +}); diff --git a/spec/frontend/vue_mr_widget/components/states/mr_widget_unresolved_discussions_spec.js b/spec/frontend/vue_mr_widget/components/states/mr_widget_unresolved_discussions_spec.js new file mode 100644 index 00000000000..33e52f4fd36 --- /dev/null +++ b/spec/frontend/vue_mr_widget/components/states/mr_widget_unresolved_discussions_spec.js @@ -0,0 +1,46 @@ +import Vue from 'vue'; +import mountComponent from 'helpers/vue_mount_component_helper'; +import UnresolvedDiscussions from '~/vue_merge_request_widget/components/states/unresolved_discussions.vue'; +import { TEST_HOST } from 'helpers/test_constants'; + +describe('UnresolvedDiscussions', () => { + const Component = Vue.extend(UnresolvedDiscussions); + let vm; + + afterEach(() => { + vm.$destroy(); + }); + + describe('with threads path', () => { + beforeEach(() => { + vm = mountComponent(Component, { + mr: { + createIssueToResolveDiscussionsPath: TEST_HOST, + }, + }); + }); + + it('should have correct elements', () => { + expect(vm.$el.innerText).toContain( + 'There are unresolved threads. Please resolve these threads', + ); + + expect(vm.$el.innerText).toContain('Create an issue to resolve them later'); + expect(vm.$el.querySelector('.js-create-issue').getAttribute('href')).toEqual(TEST_HOST); + }); + }); + + describe('without threads path', () => { + beforeEach(() => { + vm = mountComponent(Component, { mr: {} }); + }); + + it('should not show create issue link if user cannot create issue', () => { + expect(vm.$el.innerText).toContain( + 'There are unresolved threads. Please resolve these threads', + ); + + expect(vm.$el.querySelector('.js-create-issue')).toEqual(null); + }); + }); +}); diff --git a/spec/frontend/vue_mr_widget/components/states/mr_widget_wip_spec.js b/spec/frontend/vue_mr_widget/components/states/mr_widget_wip_spec.js new file mode 100644 index 00000000000..6fa555b4fc4 --- /dev/null +++ b/spec/frontend/vue_mr_widget/components/states/mr_widget_wip_spec.js @@ -0,0 +1,104 @@ +import Vue from 'vue'; +import WorkInProgress from '~/vue_merge_request_widget/components/states/work_in_progress.vue'; +import eventHub from '~/vue_merge_request_widget/event_hub'; +import createFlash from '~/flash'; + +jest.mock('~/flash'); + +const createComponent = () => { + const Component = Vue.extend(WorkInProgress); + const mr = { + title: 'The best MR ever', + removeWIPPath: '/path/to/remove/wip', + }; + const service = { + removeWIP() {}, + }; + return new Component({ + el: document.createElement('div'), + propsData: { mr, service }, + }); +}; + +describe('Wip', () => { + describe('props', () => { + it('should have props', () => { + const { mr, service } = WorkInProgress.props; + + expect(mr.type instanceof Object).toBeTruthy(); + expect(mr.required).toBeTruthy(); + + expect(service.type instanceof Object).toBeTruthy(); + expect(service.required).toBeTruthy(); + }); + }); + + describe('data', () => { + it('should have default data', () => { + const vm = createComponent(); + + expect(vm.isMakingRequest).toBeFalsy(); + }); + }); + + describe('methods', () => { + const mrObj = { + is_new_mr_data: true, + }; + + describe('handleRemoveWIP', () => { + it('should make a request to service and handle response', done => { + const vm = createComponent(); + + jest.spyOn(eventHub, '$emit').mockImplementation(() => {}); + jest.spyOn(vm.service, 'removeWIP').mockReturnValue( + new Promise(resolve => { + resolve({ + data: mrObj, + }); + }), + ); + + vm.handleRemoveWIP(); + setImmediate(() => { + expect(vm.isMakingRequest).toBeTruthy(); + expect(eventHub.$emit).toHaveBeenCalledWith('UpdateWidgetData', mrObj); + expect(createFlash).toHaveBeenCalledWith( + 'The merge request can now be merged.', + 'notice', + ); + done(); + }); + }); + }); + }); + + describe('template', () => { + let vm; + let el; + + beforeEach(() => { + vm = createComponent(); + el = vm.$el; + }); + + it('should have correct elements', () => { + expect(el.classList.contains('mr-widget-body')).toBeTruthy(); + expect(el.innerText).toContain('This is a Work in Progress'); + expect(el.querySelector('button').getAttribute('disabled')).toBeTruthy(); + expect(el.querySelector('button').innerText).toContain('Merge'); + expect(el.querySelector('.js-remove-wip').innerText.replace(/\s\s+/g, ' ')).toContain( + 'Resolve WIP status', + ); + }); + + it('should not show removeWIP button is user cannot update MR', done => { + vm.mr.removeWIPPath = ''; + + Vue.nextTick(() => { + expect(el.querySelector('.js-remove-wip')).toEqual(null); + done(); + }); + }); + }); +}); diff --git a/spec/frontend/vue_shared/components/date_time_picker/date_time_picker_lib_spec.js b/spec/frontend/vue_shared/components/date_time_picker/date_time_picker_lib_spec.js index 98962918b49..e46c63a1a32 100644 --- a/spec/frontend/vue_shared/components/date_time_picker/date_time_picker_lib_spec.js +++ b/spec/frontend/vue_shared/components/date_time_picker/date_time_picker_lib_spec.js @@ -1,7 +1,13 @@ -import * as dateTimePickerLib from '~/vue_shared/components/date_time_picker/date_time_picker_lib'; +import timezoneMock from 'timezone-mock'; + +import { + isValidInputString, + inputStringToIsoDate, + isoDateToInputString, +} from '~/vue_shared/components/date_time_picker/date_time_picker_lib'; describe('date time picker lib', () => { - describe('isValidDate', () => { + describe('isValidInputString', () => { [ { input: '2019-09-09T00:00:00.000Z', @@ -48,121 +54,137 @@ describe('date time picker lib', () => { output: false, }, ].forEach(({ input, output }) => { - it(`isValidDate return ${output} for ${input}`, () => { - expect(dateTimePickerLib.isValidDate(input)).toBe(output); + it(`isValidInputString return ${output} for ${input}`, () => { + expect(isValidInputString(input)).toBe(output); }); }); }); - describe('stringToISODate', () => { - ['', 'null', undefined, 'abc'].forEach(input => { + describe('inputStringToIsoDate', () => { + [ + '', + 'null', + undefined, + 'abc', + 'xxxx-xx-xx', + '9999-99-19', + '2019-19-23', + '2019-09-23 x', + '2019-09-29 24:24:24', + ].forEach(input => { it(`throws error for invalid input like ${input}`, () => { - expect(() => dateTimePickerLib.stringToISODate(input)).toThrow(); + expect(() => inputStringToIsoDate(input)).toThrow(); }); }); + [ { - input: '2019-09-09 01:01:01', - output: '2019-09-09T01:01:01Z', + input: '2019-09-08 01:01:01', + output: '2019-09-08T01:01:01Z', }, { - input: '2019-09-09 00:00:00', - output: '2019-09-09T00:00:00Z', + input: '2019-09-08 00:00:00', + output: '2019-09-08T00:00:00Z', }, { - input: '2019-09-09 23:59:59', - output: '2019-09-09T23:59:59Z', + input: '2019-09-08 23:59:59', + output: '2019-09-08T23:59:59Z', }, { - input: '2019-09-09', - output: '2019-09-09T00:00:00Z', + input: '2019-09-08', + output: '2019-09-08T00:00:00Z', }, - ].forEach(({ input, output }) => { - it(`returns ${output} from ${input}`, () => { - expect(dateTimePickerLib.stringToISODate(input)).toBe(output); - }); - }); - }); - - describe('truncateZerosInDateTime', () => { - [ { - input: '', - output: '', + input: '2019-09-08', + output: '2019-09-08T00:00:00Z', }, { - input: '2019-10-10', - output: '2019-10-10', + input: '2019-09-08 00:00:00', + output: '2019-09-08T00:00:00Z', }, { - input: '2019-10-10 00:00:01', - output: '2019-10-10 00:00:01', + input: '2019-09-08 23:24:24', + output: '2019-09-08T23:24:24Z', }, { - input: '2019-10-10 00:00:00', - output: '2019-10-10', + input: '2019-09-08 0:0:0', + output: '2019-09-08T00:00:00Z', }, ].forEach(({ input, output }) => { - it(`truncateZerosInDateTime return ${output} for ${input}`, () => { - expect(dateTimePickerLib.truncateZerosInDateTime(input)).toBe(output); + it(`returns ${output} from ${input}`, () => { + expect(inputStringToIsoDate(input)).toBe(output); }); }); + + describe('timezone formatting', () => { + const value = '2019-09-08 01:01:01'; + const utcResult = '2019-09-08T01:01:01Z'; + const localResult = '2019-09-08T08:01:01Z'; + + test.each` + val | locatTimezone | utc | result + ${value} | ${'UTC'} | ${undefined} | ${utcResult} + ${value} | ${'UTC'} | ${false} | ${utcResult} + ${value} | ${'UTC'} | ${true} | ${utcResult} + ${value} | ${'US/Pacific'} | ${undefined} | ${localResult} + ${value} | ${'US/Pacific'} | ${false} | ${localResult} + ${value} | ${'US/Pacific'} | ${true} | ${utcResult} + `( + 'when timezone is $locatTimezone, formats $result for utc = $utc', + ({ val, locatTimezone, utc, result }) => { + timezoneMock.register(locatTimezone); + + expect(inputStringToIsoDate(val, utc)).toBe(result); + + timezoneMock.unregister(); + }, + ); + }); }); - describe('isDateTimePickerInputValid', () => { + describe('isoDateToInputString', () => { [ { - input: null, - output: false, - }, - { - input: '', - output: false, + input: '2019-09-08T01:01:01Z', + output: '2019-09-08 01:01:01', }, { - input: 'xxxx-xx-xx', - output: false, + input: '2019-09-08T01:01:01.999Z', + output: '2019-09-08 01:01:01', }, { - input: '9999-99-19', - output: false, - }, - { - input: '2019-19-23', - output: false, - }, - { - input: '2019-09-23', - output: true, - }, - { - input: '2019-09-23 x', - output: false, - }, - { - input: '2019-09-29 0:0:0', - output: false, - }, - { - input: '2019-09-29 00:00:00', - output: true, - }, - { - input: '2019-09-29 24:24:24', - output: false, - }, - { - input: '2019-09-29 23:24:24', - output: true, - }, - { - input: '2019-09-29 23:24:24 ', - output: false, + input: '2019-09-08T00:00:00Z', + output: '2019-09-08 00:00:00', }, ].forEach(({ input, output }) => { it(`returns ${output} for ${input}`, () => { - expect(dateTimePickerLib.isDateTimePickerInputValid(input)).toBe(output); + expect(isoDateToInputString(input)).toBe(output); }); }); + + describe('timezone formatting', () => { + const value = '2019-09-08T08:01:01Z'; + const utcResult = '2019-09-08 08:01:01'; + const localResult = '2019-09-08 01:01:01'; + + test.each` + val | locatTimezone | utc | result + ${value} | ${'UTC'} | ${undefined} | ${utcResult} + ${value} | ${'UTC'} | ${false} | ${utcResult} + ${value} | ${'UTC'} | ${true} | ${utcResult} + ${value} | ${'US/Pacific'} | ${undefined} | ${localResult} + ${value} | ${'US/Pacific'} | ${false} | ${localResult} + ${value} | ${'US/Pacific'} | ${true} | ${utcResult} + `( + 'when timezone is $locatTimezone, formats $result for utc = $utc', + ({ val, locatTimezone, utc, result }) => { + timezoneMock.register(locatTimezone); + + expect(isoDateToInputString(val, utc)).toBe(result); + + timezoneMock.unregister(); + }, + ); + }); }); }); diff --git a/spec/frontend/vue_shared/components/date_time_picker/date_time_picker_spec.js b/spec/frontend/vue_shared/components/date_time_picker/date_time_picker_spec.js index 90130917d8f..ceea8d2fa92 100644 --- a/spec/frontend/vue_shared/components/date_time_picker/date_time_picker_spec.js +++ b/spec/frontend/vue_shared/components/date_time_picker/date_time_picker_spec.js @@ -1,4 +1,5 @@ import { mount } from '@vue/test-utils'; +import timezoneMock from 'timezone-mock'; import DateTimePicker from '~/vue_shared/components/date_time_picker/date_time_picker.vue'; import { defaultTimeRanges, @@ -8,16 +9,16 @@ import { const optionsCount = defaultTimeRanges.length; describe('DateTimePicker', () => { - let dateTimePicker; + let wrapper; - const dropdownToggle = () => dateTimePicker.find('.dropdown-toggle'); - const dropdownMenu = () => dateTimePicker.find('.dropdown-menu'); - const applyButtonElement = () => dateTimePicker.find('button.btn-success').element; - const findQuickRangeItems = () => dateTimePicker.findAll('.dropdown-item'); - const cancelButtonElement = () => dateTimePicker.find('button.btn-secondary').element; + const dropdownToggle = () => wrapper.find('.dropdown-toggle'); + const dropdownMenu = () => wrapper.find('.dropdown-menu'); + const applyButtonElement = () => wrapper.find('button.btn-success').element; + const findQuickRangeItems = () => wrapper.findAll('.dropdown-item'); + const cancelButtonElement = () => wrapper.find('button.btn-secondary').element; const createComponent = props => { - dateTimePicker = mount(DateTimePicker, { + wrapper = mount(DateTimePicker, { propsData: { ...props, }, @@ -25,54 +26,86 @@ describe('DateTimePicker', () => { }; afterEach(() => { - dateTimePicker.destroy(); + wrapper.destroy(); }); - it('renders dropdown toggle button with selected text', done => { + it('renders dropdown toggle button with selected text', () => { createComponent(); - dateTimePicker.vm.$nextTick(() => { + return wrapper.vm.$nextTick(() => { expect(dropdownToggle().text()).toBe(defaultTimeRange.label); - done(); + }); + }); + + it('renders dropdown toggle button with selected text and utc label', () => { + createComponent({ utc: true }); + return wrapper.vm.$nextTick(() => { + expect(dropdownToggle().text()).toContain(defaultTimeRange.label); + expect(dropdownToggle().text()).toContain('UTC'); }); }); it('renders dropdown with 2 custom time range inputs', () => { createComponent(); - dateTimePicker.vm.$nextTick(() => { - expect(dateTimePicker.findAll('input').length).toBe(2); + return wrapper.vm.$nextTick(() => { + expect(wrapper.findAll('input').length).toBe(2); }); }); - it('renders inputs with h/m/s truncated if its all 0s', done => { - createComponent({ - value: { + describe('renders label with h/m/s truncated if possible', () => { + [ + { + start: '2019-10-10T00:00:00.000Z', + end: '2019-10-10T00:00:00.000Z', + label: '2019-10-10 to 2019-10-10', + }, + { start: '2019-10-10T00:00:00.000Z', end: '2019-10-14T00:10:00.000Z', + label: '2019-10-10 to 2019-10-14 00:10:00', }, - }); - dateTimePicker.vm.$nextTick(() => { - expect(dateTimePicker.find('#custom-time-from').element.value).toBe('2019-10-10'); - expect(dateTimePicker.find('#custom-time-to').element.value).toBe('2019-10-14 00:10:00'); - done(); + { + start: '2019-10-10T00:00:00.000Z', + end: '2019-10-10T00:00:01.000Z', + label: '2019-10-10 to 2019-10-10 00:00:01', + }, + { + start: '2019-10-10T00:00:01.000Z', + end: '2019-10-10T00:00:01.000Z', + label: '2019-10-10 00:00:01 to 2019-10-10 00:00:01', + }, + { + start: '2019-10-10T00:00:01.000Z', + end: '2019-10-10T00:00:01.000Z', + utc: true, + label: '2019-10-10 00:00:01 to 2019-10-10 00:00:01 UTC', + }, + ].forEach(({ start, end, utc, label }) => { + it(`for start ${start}, end ${end}, and utc ${utc}, label is ${label}`, () => { + createComponent({ + value: { start, end }, + utc, + }); + return wrapper.vm.$nextTick(() => { + expect(dropdownToggle().text()).toBe(label); + }); + }); }); }); - it(`renders dropdown with ${optionsCount} (default) items in quick range`, done => { + it(`renders dropdown with ${optionsCount} (default) items in quick range`, () => { createComponent(); dropdownToggle().trigger('click'); - dateTimePicker.vm.$nextTick(() => { + return wrapper.vm.$nextTick(() => { expect(findQuickRangeItems().length).toBe(optionsCount); - done(); }); }); - it('renders dropdown with a default quick range item selected', done => { + it('renders dropdown with a default quick range item selected', () => { createComponent(); dropdownToggle().trigger('click'); - dateTimePicker.vm.$nextTick(() => { - expect(dateTimePicker.find('.dropdown-item.active').exists()).toBe(true); - expect(dateTimePicker.find('.dropdown-item.active').text()).toBe(defaultTimeRange.label); - done(); + return wrapper.vm.$nextTick(() => { + expect(wrapper.find('.dropdown-item.active').exists()).toBe(true); + expect(wrapper.find('.dropdown-item.active').text()).toBe(defaultTimeRange.label); }); }); @@ -86,78 +119,128 @@ describe('DateTimePicker', () => { describe('user input', () => { const fillInputAndBlur = (input, val) => { - dateTimePicker.find(input).setValue(val); - return dateTimePicker.vm.$nextTick().then(() => { - dateTimePicker.find(input).trigger('blur'); - return dateTimePicker.vm.$nextTick(); + wrapper.find(input).setValue(val); + return wrapper.vm.$nextTick().then(() => { + wrapper.find(input).trigger('blur'); + return wrapper.vm.$nextTick(); }); }; - beforeEach(done => { + beforeEach(() => { createComponent(); - dateTimePicker.vm.$nextTick(done); + return wrapper.vm.$nextTick(); }); - it('displays inline error message if custom time range inputs are invalid', done => { - fillInputAndBlur('#custom-time-from', '2019-10-01abc') + it('displays inline error message if custom time range inputs are invalid', () => { + return fillInputAndBlur('#custom-time-from', '2019-10-01abc') .then(() => fillInputAndBlur('#custom-time-to', '2019-10-10abc')) .then(() => { - expect(dateTimePicker.findAll('.invalid-feedback').length).toBe(2); - done(); - }) - .catch(done); + expect(wrapper.findAll('.invalid-feedback').length).toBe(2); + }); }); - it('keeps apply button disabled with invalid custom time range inputs', done => { - fillInputAndBlur('#custom-time-from', '2019-10-01abc') + it('keeps apply button disabled with invalid custom time range inputs', () => { + return fillInputAndBlur('#custom-time-from', '2019-10-01abc') .then(() => fillInputAndBlur('#custom-time-to', '2019-09-19')) .then(() => { expect(applyButtonElement().getAttribute('disabled')).toBe('disabled'); - done(); - }) - .catch(done); + }); }); - it('enables apply button with valid custom time range inputs', done => { - fillInputAndBlur('#custom-time-from', '2019-10-01') + it('enables apply button with valid custom time range inputs', () => { + return fillInputAndBlur('#custom-time-from', '2019-10-01') .then(() => fillInputAndBlur('#custom-time-to', '2019-10-19')) .then(() => { expect(applyButtonElement().getAttribute('disabled')).toBeNull(); - done(); - }) - .catch(done.fail); + }); }); - it('emits dates in an object when apply is clicked', done => { - fillInputAndBlur('#custom-time-from', '2019-10-01') - .then(() => fillInputAndBlur('#custom-time-to', '2019-10-19')) - .then(() => { - applyButtonElement().click(); - - expect(dateTimePicker.emitted().input).toHaveLength(1); - expect(dateTimePicker.emitted().input[0]).toEqual([ - { - end: '2019-10-19T00:00:00Z', - start: '2019-10-01T00:00:00Z', - }, - ]); - done(); - }) - .catch(done.fail); + describe('when "apply" is clicked', () => { + it('emits iso dates', () => { + return fillInputAndBlur('#custom-time-from', '2019-10-01 00:00:00') + .then(() => fillInputAndBlur('#custom-time-to', '2019-10-19 00:00:00')) + .then(() => { + applyButtonElement().click(); + + expect(wrapper.emitted().input).toHaveLength(1); + expect(wrapper.emitted().input[0]).toEqual([ + { + end: '2019-10-19T00:00:00Z', + start: '2019-10-01T00:00:00Z', + }, + ]); + }); + }); + + it('emits iso dates, for dates without time of day', () => { + return fillInputAndBlur('#custom-time-from', '2019-10-01') + .then(() => fillInputAndBlur('#custom-time-to', '2019-10-19')) + .then(() => { + applyButtonElement().click(); + + expect(wrapper.emitted().input).toHaveLength(1); + expect(wrapper.emitted().input[0]).toEqual([ + { + end: '2019-10-19T00:00:00Z', + start: '2019-10-01T00:00:00Z', + }, + ]); + }); + }); + + describe('when timezone is different', () => { + beforeAll(() => { + timezoneMock.register('US/Pacific'); + }); + afterAll(() => { + timezoneMock.unregister(); + }); + + it('emits iso dates', () => { + return fillInputAndBlur('#custom-time-from', '2019-10-01 00:00:00') + .then(() => fillInputAndBlur('#custom-time-to', '2019-10-19 12:00:00')) + .then(() => { + applyButtonElement().click(); + + expect(wrapper.emitted().input).toHaveLength(1); + expect(wrapper.emitted().input[0]).toEqual([ + { + start: '2019-10-01T07:00:00Z', + end: '2019-10-19T19:00:00Z', + }, + ]); + }); + }); + + it('emits iso dates with utc format', () => { + wrapper.setProps({ utc: true }); + return wrapper.vm + .$nextTick() + .then(() => fillInputAndBlur('#custom-time-from', '2019-10-01 00:00:00')) + .then(() => fillInputAndBlur('#custom-time-to', '2019-10-19 12:00:00')) + .then(() => { + applyButtonElement().click(); + + expect(wrapper.emitted().input).toHaveLength(1); + expect(wrapper.emitted().input[0]).toEqual([ + { + start: '2019-10-01T00:00:00Z', + end: '2019-10-19T12:00:00Z', + }, + ]); + }); + }); + }); }); - it('unchecks quick range when text is input is clicked', done => { + it('unchecks quick range when text is input is clicked', () => { const findActiveItems = () => findQuickRangeItems().filter(w => w.is('.active')); expect(findActiveItems().length).toBe(1); - fillInputAndBlur('#custom-time-from', '2019-10-01') - .then(() => { - expect(findActiveItems().length).toBe(0); - - done(); - }) - .catch(done.fail); + return fillInputAndBlur('#custom-time-from', '2019-10-01').then(() => { + expect(findActiveItems().length).toBe(0); + }); }); it('emits dates in an object when a is clicked', () => { @@ -165,23 +248,22 @@ describe('DateTimePicker', () => { .at(3) // any item .trigger('click'); - expect(dateTimePicker.emitted().input).toHaveLength(1); - expect(dateTimePicker.emitted().input[0][0]).toMatchObject({ + expect(wrapper.emitted().input).toHaveLength(1); + expect(wrapper.emitted().input[0][0]).toMatchObject({ duration: { seconds: expect.any(Number), }, }); }); - it('hides the popover with cancel button', done => { + it('hides the popover with cancel button', () => { dropdownToggle().trigger('click'); - dateTimePicker.vm.$nextTick(() => { + return wrapper.vm.$nextTick(() => { cancelButtonElement().click(); - dateTimePicker.vm.$nextTick(() => { + return wrapper.vm.$nextTick(() => { expect(dropdownMenu().classes('show')).toBe(false); - done(); }); }); }); @@ -210,7 +292,7 @@ describe('DateTimePicker', () => { jest.spyOn(Date, 'now').mockImplementation(() => MOCK_NOW); }); - it('renders dropdown with a label in the quick range', done => { + it('renders dropdown with a label in the quick range', () => { createComponent({ value: { duration: { seconds: 60 * 5 }, @@ -218,14 +300,26 @@ describe('DateTimePicker', () => { options: otherTimeRanges, }); dropdownToggle().trigger('click'); - dateTimePicker.vm.$nextTick(() => { + return wrapper.vm.$nextTick(() => { expect(dropdownToggle().text()).toBe('5 minutes'); + }); + }); - done(); + it('renders dropdown with a label in the quick range and utc label', () => { + createComponent({ + value: { + duration: { seconds: 60 * 5 }, + }, + utc: true, + options: otherTimeRanges, + }); + dropdownToggle().trigger('click'); + return wrapper.vm.$nextTick(() => { + expect(dropdownToggle().text()).toBe('5 minutes UTC'); }); }); - it('renders dropdown with quick range items', done => { + it('renders dropdown with quick range items', () => { createComponent({ value: { duration: { seconds: 60 * 2 }, @@ -233,7 +327,7 @@ describe('DateTimePicker', () => { options: otherTimeRanges, }); dropdownToggle().trigger('click'); - dateTimePicker.vm.$nextTick(() => { + return wrapper.vm.$nextTick(() => { const items = findQuickRangeItems(); expect(items.length).toBe(Object.keys(otherTimeRanges).length); @@ -245,22 +339,18 @@ describe('DateTimePicker', () => { expect(items.at(2).text()).toBe('5 minutes'); expect(items.at(2).is('.active')).toBe(false); - - done(); }); }); - it('renders dropdown with a label not in the quick range', done => { + it('renders dropdown with a label not in the quick range', () => { createComponent({ value: { duration: { seconds: 60 * 4 }, }, }); dropdownToggle().trigger('click'); - dateTimePicker.vm.$nextTick(() => { + return wrapper.vm.$nextTick(() => { expect(dropdownToggle().text()).toBe('2020-01-23 19:56:00 to 2020-01-23 20:00:00'); - - done(); }); }); }); diff --git a/spec/frontend/vue_shared/components/deprecated_modal_2_spec.js b/spec/frontend/vue_shared/components/deprecated_modal_2_spec.js new file mode 100644 index 00000000000..b201a9acdd4 --- /dev/null +++ b/spec/frontend/vue_shared/components/deprecated_modal_2_spec.js @@ -0,0 +1,258 @@ +import Vue from 'vue'; +import mountComponent from 'helpers/vue_mount_component_helper'; +import DeprecatedModal2 from '~/vue_shared/components/deprecated_modal_2.vue'; + +const modalComponent = Vue.extend(DeprecatedModal2); + +describe('DeprecatedModal2', () => { + let vm; + + afterEach(() => { + vm.$destroy(); + }); + + describe('props', () => { + describe('with id', () => { + const props = { + id: 'my-modal', + }; + + beforeEach(() => { + vm = mountComponent(modalComponent, props); + }); + + it('assigns the id to the modal', () => { + expect(vm.$el.id).toBe(props.id); + }); + }); + + describe('without id', () => { + beforeEach(() => { + vm = mountComponent(modalComponent, {}); + }); + + it('does not add an id attribute to the modal', () => { + expect(vm.$el.hasAttribute('id')).toBe(false); + }); + }); + + describe('with headerTitleText', () => { + const props = { + headerTitleText: 'my title text', + }; + + beforeEach(() => { + vm = mountComponent(modalComponent, props); + }); + + it('sets the modal title', () => { + const modalTitle = vm.$el.querySelector('.modal-title'); + + expect(modalTitle.innerHTML.trim()).toBe(props.headerTitleText); + }); + }); + + describe('with footerPrimaryButtonVariant', () => { + const props = { + footerPrimaryButtonVariant: 'danger', + }; + + beforeEach(() => { + vm = mountComponent(modalComponent, props); + }); + + it('sets the primary button class', () => { + const primaryButton = vm.$el.querySelector('.modal-footer button:last-of-type'); + + expect(primaryButton).toHaveClass(`btn-${props.footerPrimaryButtonVariant}`); + }); + }); + + describe('with footerPrimaryButtonText', () => { + const props = { + footerPrimaryButtonText: 'my button text', + }; + + beforeEach(() => { + vm = mountComponent(modalComponent, props); + }); + + it('sets the primary button text', () => { + const primaryButton = vm.$el.querySelector('.modal-footer button:last-of-type'); + + expect(primaryButton.innerHTML.trim()).toBe(props.footerPrimaryButtonText); + }); + }); + }); + + it('works with data-toggle="modal"', () => { + setFixtures(` + <button id="modal-button" data-toggle="modal" data-target="#my-modal"></button> + <div id="modal-container"></div> + `); + + const modalContainer = document.getElementById('modal-container'); + const modalButton = document.getElementById('modal-button'); + vm = mountComponent( + modalComponent, + { + id: 'my-modal', + }, + modalContainer, + ); + const modalElement = document.getElementById('my-modal'); + + modalButton.click(); + + expect(modalElement).not.toHaveClass('show'); + + // let the modal fade in + jest.runOnlyPendingTimers(); + + expect(modalElement).toHaveClass('show'); + }); + + describe('methods', () => { + const dummyEvent = 'not really an event'; + + beforeEach(() => { + vm = mountComponent(modalComponent, {}); + jest.spyOn(vm, '$emit').mockImplementation(() => {}); + }); + + describe('emitCancel', () => { + it('emits a cancel event', () => { + vm.emitCancel(dummyEvent); + + expect(vm.$emit).toHaveBeenCalledWith('cancel', dummyEvent); + }); + }); + + describe('emitSubmit', () => { + it('emits a submit event', () => { + vm.emitSubmit(dummyEvent); + + expect(vm.$emit).toHaveBeenCalledWith('submit', dummyEvent); + }); + }); + + describe('opened', () => { + it('emits a open event', () => { + vm.opened(); + + expect(vm.$emit).toHaveBeenCalledWith('open'); + }); + }); + + describe('closed', () => { + it('emits a closed event', () => { + vm.closed(); + + expect(vm.$emit).toHaveBeenCalledWith('closed'); + }); + }); + }); + + describe('slots', () => { + const slotContent = 'this should go into the slot'; + + const modalWithSlot = slot => { + return Vue.extend({ + components: { + DeprecatedModal2, + }, + render: h => + h('deprecated-modal-2', [slot ? h('template', { slot }, slotContent) : slotContent]), + }); + }; + + describe('default slot', () => { + beforeEach(() => { + vm = mountComponent(modalWithSlot()); + }); + + it('sets the modal body', () => { + const modalBody = vm.$el.querySelector('.modal-body'); + + expect(modalBody.innerHTML).toBe(slotContent); + }); + }); + + describe('header slot', () => { + beforeEach(() => { + vm = mountComponent(modalWithSlot('header')); + }); + + it('sets the modal header', () => { + const modalHeader = vm.$el.querySelector('.modal-header'); + + expect(modalHeader.innerHTML).toBe(slotContent); + }); + }); + + describe('title slot', () => { + beforeEach(() => { + vm = mountComponent(modalWithSlot('title')); + }); + + it('sets the modal title', () => { + const modalTitle = vm.$el.querySelector('.modal-title'); + + expect(modalTitle.innerHTML).toBe(slotContent); + }); + }); + + describe('footer slot', () => { + beforeEach(() => { + vm = mountComponent(modalWithSlot('footer')); + }); + + it('sets the modal footer', () => { + const modalFooter = vm.$el.querySelector('.modal-footer'); + + expect(modalFooter.innerHTML).toBe(slotContent); + }); + }); + }); + + describe('handling sizes', () => { + it('should render modal-sm', () => { + vm = mountComponent(modalComponent, { + modalSize: 'sm', + }); + + expect(vm.$el.querySelector('.modal-dialog').classList.contains('modal-sm')).toEqual(true); + }); + + it('should render modal-lg', () => { + vm = mountComponent(modalComponent, { + modalSize: 'lg', + }); + + expect(vm.$el.querySelector('.modal-dialog').classList.contains('modal-lg')).toEqual(true); + }); + + it('should render modal-xl', () => { + vm = mountComponent(modalComponent, { + modalSize: 'xl', + }); + + expect(vm.$el.querySelector('.modal-dialog').classList.contains('modal-xl')).toEqual(true); + }); + + it('should not add modal size classes when md size is passed', () => { + vm = mountComponent(modalComponent, { + modalSize: 'md', + }); + + expect(vm.$el.querySelector('.modal-dialog').classList.contains('modal-md')).toEqual(false); + }); + + it('should not add modal size classes by default', () => { + vm = mountComponent(modalComponent, {}); + + expect(vm.$el.querySelector('.modal-dialog').classList.contains('modal-sm')).toEqual(false); + expect(vm.$el.querySelector('.modal-dialog').classList.contains('modal-lg')).toEqual(false); + }); + }); +}); diff --git a/spec/frontend/vue_shared/components/deprecated_modal_spec.js b/spec/frontend/vue_shared/components/deprecated_modal_spec.js new file mode 100644 index 00000000000..b9793ce2d80 --- /dev/null +++ b/spec/frontend/vue_shared/components/deprecated_modal_spec.js @@ -0,0 +1,73 @@ +import Vue from 'vue'; +import mountComponent from 'helpers/vue_mount_component_helper'; +import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue'; + +const modalComponent = Vue.extend(DeprecatedModal); + +describe('DeprecatedModal', () => { + let vm; + + afterEach(() => { + vm.$destroy(); + }); + + describe('props', () => { + describe('without primaryButtonLabel', () => { + beforeEach(() => { + vm = mountComponent(modalComponent, { + primaryButtonLabel: null, + }); + }); + + it('does not render a primary button', () => { + expect(vm.$el.querySelector('.js-primary-button')).toBeNull(); + }); + }); + + describe('with id', () => { + describe('does not render a primary button', () => { + beforeEach(() => { + vm = mountComponent(modalComponent, { + id: 'my-modal', + }); + }); + + it('assigns the id to the modal', () => { + expect(vm.$el.querySelector('#my-modal.modal')).not.toBeNull(); + }); + + it('does not show the modal immediately', () => { + expect(vm.$el.querySelector('#my-modal.modal')).not.toHaveClass('show'); + }); + + it('does not show a backdrop', () => { + expect(vm.$el.querySelector('modal-backdrop')).toBeNull(); + }); + }); + }); + + it('works with data-toggle="modal"', () => { + setFixtures(` + <button id="modal-button" data-toggle="modal" data-target="#my-modal"></button> + <div id="modal-container"></div> + `); + + const modalContainer = document.getElementById('modal-container'); + const modalButton = document.getElementById('modal-button'); + vm = mountComponent( + modalComponent, + { + id: 'my-modal', + }, + modalContainer, + ); + const modalElement = vm.$el.querySelector('#my-modal'); + + expect(modalElement).not.toHaveClass('show'); + + modalButton.click(); + + expect(modalElement).toHaveClass('show'); + }); + }); +}); diff --git a/spec/frontend/vue_shared/components/diff_viewer/diff_viewer_spec.js b/spec/frontend/vue_shared/components/diff_viewer/diff_viewer_spec.js index 636508be6b6..a6e4d812c3c 100644 --- a/spec/frontend/vue_shared/components/diff_viewer/diff_viewer_spec.js +++ b/spec/frontend/vue_shared/components/diff_viewer/diff_viewer_spec.js @@ -8,6 +8,7 @@ describe('DiffViewer', () => { const requiredProps = { diffMode: 'replaced', diffViewerMode: 'image', + diffFile: {}, newPath: GREEN_BOX_IMAGE_URL, newSha: 'ABC', oldPath: RED_BOX_IMAGE_URL, @@ -71,16 +72,27 @@ describe('DiffViewer', () => { }); }); - it('renders renamed component', () => { - createComponent({ - ...requiredProps, - diffMode: 'renamed', - diffViewerMode: 'renamed', - newPath: 'test.abc', - oldPath: 'testold.abc', + describe('renamed file', () => { + it.each` + altViewer + ${'text'} + ${'notText'} + `('renders the renamed component when the alternate viewer is $altViewer', ({ altViewer }) => { + createComponent({ + ...requiredProps, + diffFile: { + content_sha: '', + view_path: '', + alternate_viewer: { name: altViewer }, + }, + diffMode: 'renamed', + diffViewerMode: 'renamed', + newPath: 'test.abc', + oldPath: 'testold.abc', + }); + + expect(vm.$el.textContent).toContain('File renamed with no changes.'); }); - - expect(vm.$el.textContent).toContain('File moved'); }); it('renders mode changed component', () => { diff --git a/spec/frontend/vue_shared/components/diff_viewer/viewers/renamed_spec.js b/spec/frontend/vue_shared/components/diff_viewer/viewers/renamed_spec.js new file mode 100644 index 00000000000..e0e982f4e11 --- /dev/null +++ b/spec/frontend/vue_shared/components/diff_viewer/viewers/renamed_spec.js @@ -0,0 +1,283 @@ +import Vuex from 'vuex'; +import { createLocalVue, shallowMount, mount } from '@vue/test-utils'; +import Renamed from '~/vue_shared/components/diff_viewer/viewers/renamed.vue'; +import { + TRANSITION_LOAD_START, + TRANSITION_LOAD_ERROR, + TRANSITION_LOAD_SUCCEED, + TRANSITION_ACKNOWLEDGE_ERROR, + STATE_IDLING, + STATE_LOADING, + STATE_ERRORED, +} from '~/diffs/constants'; + +const localVue = createLocalVue(); +localVue.use(Vuex); + +function createRenamedComponent({ + props = {}, + methods = {}, + store = new Vuex.Store({}), + deep = false, +}) { + const mnt = deep ? mount : shallowMount; + + return mnt(Renamed, { + propsData: { ...props }, + localVue, + store, + methods, + }); +} + +describe('Renamed Diff Viewer', () => { + const DIFF_FILE_COMMIT_SHA = 'commitsha'; + const DIFF_FILE_SHORT_SHA = 'commitsh'; + const DIFF_FILE_VIEW_PATH = `blob/${DIFF_FILE_COMMIT_SHA}/filename.ext`; + let diffFile; + let wrapper; + + beforeEach(() => { + diffFile = { + content_sha: DIFF_FILE_COMMIT_SHA, + view_path: DIFF_FILE_VIEW_PATH, + alternate_viewer: { + name: 'text', + }, + }; + }); + + afterEach(() => { + if (wrapper) { + wrapper.destroy(); + wrapper = null; + } + }); + + describe('is', () => { + beforeEach(() => { + wrapper = createRenamedComponent({ props: { diffFile } }); + }); + + it.each` + state | request | result + ${'idle'} | ${'idle'} | ${true} + ${'idle'} | ${'loading'} | ${false} + ${'idle'} | ${'errored'} | ${false} + ${'loading'} | ${'loading'} | ${true} + ${'loading'} | ${'idle'} | ${false} + ${'loading'} | ${'errored'} | ${false} + ${'errored'} | ${'errored'} | ${true} + ${'errored'} | ${'idle'} | ${false} + ${'errored'} | ${'loading'} | ${false} + `( + 'returns the $result for "$request" when the state is "$state"', + ({ request, result, state }) => { + wrapper.vm.state = state; + + expect(wrapper.vm.is(request)).toEqual(result); + }, + ); + }); + + describe('transition', () => { + beforeEach(() => { + wrapper = createRenamedComponent({ props: { diffFile } }); + }); + + it.each` + state | transition | result + ${'idle'} | ${TRANSITION_LOAD_START} | ${STATE_LOADING} + ${'idle'} | ${TRANSITION_LOAD_ERROR} | ${STATE_IDLING} + ${'idle'} | ${TRANSITION_LOAD_SUCCEED} | ${STATE_IDLING} + ${'idle'} | ${TRANSITION_ACKNOWLEDGE_ERROR} | ${STATE_IDLING} + ${'loading'} | ${TRANSITION_LOAD_START} | ${STATE_LOADING} + ${'loading'} | ${TRANSITION_LOAD_ERROR} | ${STATE_ERRORED} + ${'loading'} | ${TRANSITION_LOAD_SUCCEED} | ${STATE_IDLING} + ${'loading'} | ${TRANSITION_ACKNOWLEDGE_ERROR} | ${STATE_LOADING} + ${'errored'} | ${TRANSITION_LOAD_START} | ${STATE_LOADING} + ${'errored'} | ${TRANSITION_LOAD_ERROR} | ${STATE_ERRORED} + ${'errored'} | ${TRANSITION_LOAD_SUCCEED} | ${STATE_ERRORED} + ${'errored'} | ${TRANSITION_ACKNOWLEDGE_ERROR} | ${STATE_IDLING} + `( + 'correctly updates the state to "$result" when it starts as "$state" and the transition is "$transition"', + ({ state, transition, result }) => { + wrapper.vm.state = state; + + wrapper.vm.transition(transition); + + expect(wrapper.vm.state).toEqual(result); + }, + ); + }); + + describe('switchToFull', () => { + let store; + + beforeEach(() => { + store = new Vuex.Store({ + modules: { + diffs: { + namespaced: true, + actions: { switchToFullDiffFromRenamedFile: () => {} }, + }, + }, + }); + + jest.spyOn(store, 'dispatch'); + + wrapper = createRenamedComponent({ props: { diffFile }, store }); + }); + + afterEach(() => { + store = null; + }); + + it('calls the switchToFullDiffFromRenamedFile action when the method is triggered', () => { + store.dispatch.mockResolvedValue(); + + wrapper.vm.switchToFull(); + + return wrapper.vm.$nextTick().then(() => { + expect(store.dispatch).toHaveBeenCalledWith('diffs/switchToFullDiffFromRenamedFile', { + diffFile, + }); + }); + }); + + it.each` + after | resolvePromise | resolution + ${STATE_IDLING} | ${'mockResolvedValue'} | ${'successful'} + ${STATE_ERRORED} | ${'mockRejectedValue'} | ${'rejected'} + `( + 'moves through the correct states during a $resolution request', + ({ after, resolvePromise }) => { + store.dispatch[resolvePromise](); + + expect(wrapper.vm.state).toEqual(STATE_IDLING); + + wrapper.vm.switchToFull(); + + expect(wrapper.vm.state).toEqual(STATE_LOADING); + + return ( + wrapper.vm + // This tick is needed for when the action (promise) finishes + .$nextTick() + // This tick waits for the state change in the promise .then/.catch to bubble into the component + .then(() => wrapper.vm.$nextTick()) + .then(() => { + expect(wrapper.vm.state).toEqual(after); + }) + ); + }, + ); + }); + + describe('clickLink', () => { + let event; + + beforeEach(() => { + event = { + preventDefault: jest.fn(), + }; + }); + + it.each` + alternateViewer | stops | handled + ${'text'} | ${true} | ${'should'} + ${'nottext'} | ${false} | ${'should not'} + `( + 'given { alternate_viewer: { name: "$alternateViewer" } }, the click event $handled be handled in the component', + ({ alternateViewer, stops }) => { + wrapper = createRenamedComponent({ + props: { + diffFile: { + ...diffFile, + alternate_viewer: { name: alternateViewer }, + }, + }, + }); + + jest.spyOn(wrapper.vm, 'switchToFull').mockImplementation(() => {}); + + wrapper.vm.clickLink(event); + + if (stops) { + expect(event.preventDefault).toHaveBeenCalled(); + expect(wrapper.vm.switchToFull).toHaveBeenCalled(); + } else { + expect(event.preventDefault).not.toHaveBeenCalled(); + expect(wrapper.vm.switchToFull).not.toHaveBeenCalled(); + } + }, + ); + }); + + describe('dismissError', () => { + let transitionSpy; + + beforeEach(() => { + wrapper = createRenamedComponent({ props: { diffFile } }); + transitionSpy = jest.spyOn(wrapper.vm, 'transition'); + }); + + it(`transitions the component with "${TRANSITION_ACKNOWLEDGE_ERROR}"`, () => { + wrapper.vm.dismissError(); + + expect(transitionSpy).toHaveBeenCalledWith(TRANSITION_ACKNOWLEDGE_ERROR); + }); + }); + + describe('output', () => { + it.each` + altViewer | nameDisplay + ${'text'} | ${'"text"'} + ${'nottext'} | ${'"nottext"'} + ${undefined} | ${undefined} + ${null} | ${null} + `( + 'with { alternate_viewer: { name: $nameDisplay } }, renders the component', + ({ altViewer }) => { + const file = { ...diffFile }; + + file.alternate_viewer.name = altViewer; + wrapper = createRenamedComponent({ props: { diffFile: file } }); + + expect(wrapper.find('[test-id="plaintext"]').text()).toEqual( + 'File renamed with no changes.', + ); + }, + ); + + it.each` + altType | linkText + ${'text'} | ${'Show file contents'} + ${'nottext'} | ${`View file @ ${DIFF_FILE_SHORT_SHA}`} + `( + 'includes a link to the full file for alternate viewer type "$altType"', + ({ altType, linkText }) => { + const file = { ...diffFile }; + const clickMock = jest.fn().mockImplementation(() => {}); + + file.alternate_viewer.name = altType; + wrapper = createRenamedComponent({ + deep: true, + props: { diffFile: file }, + methods: { + clickLink: clickMock, + }, + }); + + const link = wrapper.find('a'); + + expect(link.text()).toEqual(linkText); + expect(link.attributes('href')).toEqual(DIFF_FILE_VIEW_PATH); + + link.vm.$emit('click'); + + expect(clickMock).toHaveBeenCalled(); + }, + ); + }); +}); diff --git a/spec/frontend/vue_shared/components/file_finder/index_spec.js b/spec/frontend/vue_shared/components/file_finder/index_spec.js new file mode 100644 index 00000000000..f9e56774526 --- /dev/null +++ b/spec/frontend/vue_shared/components/file_finder/index_spec.js @@ -0,0 +1,368 @@ +import Vue from 'vue'; +import Mousetrap from 'mousetrap'; +import { file } from 'jest/ide/helpers'; +import waitForPromises from 'helpers/wait_for_promises'; +import FindFileComponent from '~/vue_shared/components/file_finder/index.vue'; +import { UP_KEY_CODE, DOWN_KEY_CODE, ENTER_KEY_CODE, ESC_KEY_CODE } from '~/lib/utils/keycodes'; + +describe('File finder item spec', () => { + const Component = Vue.extend(FindFileComponent); + let vm; + + function createComponent(props) { + vm = new Component({ + propsData: { + files: [], + visible: true, + loading: false, + ...props, + }, + }); + + vm.$mount('#app'); + } + + beforeEach(() => { + setFixtures('<div id="app"></div>'); + }); + + afterEach(() => { + vm.$destroy(); + }); + + describe('with entries', () => { + beforeEach(done => { + createComponent({ + files: [ + { + ...file('index.js'), + path: 'index.js', + type: 'blob', + url: '/index.jsurl', + }, + { + ...file('component.js'), + path: 'component.js', + type: 'blob', + }, + ], + }); + + setImmediate(done); + }); + + it('renders list of blobs', () => { + expect(vm.$el.textContent).toContain('index.js'); + expect(vm.$el.textContent).toContain('component.js'); + expect(vm.$el.textContent).not.toContain('folder'); + }); + + it('filters entries', done => { + vm.searchText = 'index'; + + setImmediate(() => { + expect(vm.$el.textContent).toContain('index.js'); + expect(vm.$el.textContent).not.toContain('component.js'); + + done(); + }); + }); + + it('shows clear button when searchText is not empty', done => { + vm.searchText = 'index'; + + setImmediate(() => { + expect(vm.$el.querySelector('.dropdown-input').classList).toContain('has-value'); + expect(vm.$el.querySelector('.dropdown-input-search').classList).toContain('hidden'); + + done(); + }); + }); + + it('clear button resets searchText', done => { + vm.searchText = 'index'; + + waitForPromises() + .then(() => { + vm.$el.querySelector('.dropdown-input-clear').click(); + }) + .then(waitForPromises) + .then(() => { + expect(vm.searchText).toBe(''); + }) + .then(done) + .catch(done.fail); + }); + + it('clear button focues search input', done => { + jest.spyOn(vm.$refs.searchInput, 'focus').mockImplementation(() => {}); + vm.searchText = 'index'; + + waitForPromises() + .then(() => { + vm.$el.querySelector('.dropdown-input-clear').click(); + }) + .then(waitForPromises) + .then(() => { + expect(vm.$refs.searchInput.focus).toHaveBeenCalled(); + }) + .then(done) + .catch(done.fail); + }); + + describe('listShowCount', () => { + it('returns 1 when no filtered entries exist', done => { + vm.searchText = 'testing 123'; + + setImmediate(() => { + expect(vm.listShowCount).toBe(1); + + done(); + }); + }); + + it('returns entries length when not filtered', () => { + expect(vm.listShowCount).toBe(2); + }); + }); + + describe('listHeight', () => { + it('returns 55 when entries exist', () => { + expect(vm.listHeight).toBe(55); + }); + + it('returns 33 when entries dont exist', done => { + vm.searchText = 'testing 123'; + + setImmediate(() => { + expect(vm.listHeight).toBe(33); + + done(); + }); + }); + }); + + describe('filteredBlobsLength', () => { + it('returns length of filtered blobs', done => { + vm.searchText = 'index'; + + setImmediate(() => { + expect(vm.filteredBlobsLength).toBe(1); + + done(); + }); + }); + }); + + describe('watches', () => { + describe('searchText', () => { + it('resets focusedIndex when updated', done => { + vm.focusedIndex = 1; + vm.searchText = 'test'; + + setImmediate(() => { + expect(vm.focusedIndex).toBe(0); + + done(); + }); + }); + }); + + describe('visible', () => { + it('returns searchText when false', done => { + vm.searchText = 'test'; + vm.visible = true; + + waitForPromises() + .then(() => { + vm.visible = false; + }) + .then(waitForPromises) + .then(() => { + expect(vm.searchText).toBe(''); + }) + .then(done) + .catch(done.fail); + }); + }); + }); + + describe('openFile', () => { + beforeEach(() => { + jest.spyOn(vm, '$emit').mockImplementation(() => {}); + }); + + it('closes file finder', () => { + vm.openFile(vm.files[0]); + + expect(vm.$emit).toHaveBeenCalledWith('toggle', false); + }); + + it('pushes to router', () => { + vm.openFile(vm.files[0]); + + expect(vm.$emit).toHaveBeenCalledWith('click', vm.files[0]); + }); + }); + + describe('onKeyup', () => { + it('opens file on enter key', done => { + const event = new CustomEvent('keyup'); + event.keyCode = ENTER_KEY_CODE; + + jest.spyOn(vm, 'openFile').mockImplementation(() => {}); + + vm.$refs.searchInput.dispatchEvent(event); + + setImmediate(() => { + expect(vm.openFile).toHaveBeenCalledWith(vm.files[0]); + + done(); + }); + }); + + it('closes file finder on esc key', done => { + const event = new CustomEvent('keyup'); + event.keyCode = ESC_KEY_CODE; + + jest.spyOn(vm, '$emit').mockImplementation(() => {}); + + vm.$refs.searchInput.dispatchEvent(event); + + setImmediate(() => { + expect(vm.$emit).toHaveBeenCalledWith('toggle', false); + + done(); + }); + }); + }); + + describe('onKeyDown', () => { + let el; + + beforeEach(() => { + el = vm.$refs.searchInput; + }); + + describe('up key', () => { + const event = new CustomEvent('keydown'); + event.keyCode = UP_KEY_CODE; + + it('resets to last index when at top', () => { + el.dispatchEvent(event); + + expect(vm.focusedIndex).toBe(1); + }); + + it('minus 1 from focusedIndex', () => { + vm.focusedIndex = 1; + + el.dispatchEvent(event); + + expect(vm.focusedIndex).toBe(0); + }); + }); + + describe('down key', () => { + const event = new CustomEvent('keydown'); + event.keyCode = DOWN_KEY_CODE; + + it('resets to first index when at bottom', () => { + vm.focusedIndex = 1; + el.dispatchEvent(event); + + expect(vm.focusedIndex).toBe(0); + }); + + it('adds 1 to focusedIndex', () => { + el.dispatchEvent(event); + + expect(vm.focusedIndex).toBe(1); + }); + }); + }); + }); + + describe('without entries', () => { + it('renders loading text when loading', () => { + createComponent({ + loading: true, + }); + + expect(vm.$el.textContent).toContain('Loading...'); + }); + + it('renders no files text', () => { + createComponent(); + + expect(vm.$el.textContent).toContain('No files found.'); + }); + }); + + describe('keyboard shortcuts', () => { + beforeEach(done => { + createComponent(); + + jest.spyOn(vm, 'toggle').mockImplementation(() => {}); + + vm.$nextTick(done); + }); + + it('calls toggle on `t` key press', done => { + Mousetrap.trigger('t'); + + vm.$nextTick() + .then(() => { + expect(vm.toggle).toHaveBeenCalled(); + }) + .then(done) + .catch(done.fail); + }); + + it('calls toggle on `command+p` key press', done => { + Mousetrap.trigger('command+p'); + + vm.$nextTick() + .then(() => { + expect(vm.toggle).toHaveBeenCalled(); + }) + .then(done) + .catch(done.fail); + }); + + it('calls toggle on `ctrl+p` key press', done => { + Mousetrap.trigger('ctrl+p'); + + vm.$nextTick() + .then(() => { + expect(vm.toggle).toHaveBeenCalled(); + }) + .then(done) + .catch(done.fail); + }); + + it('always allows `command+p` to trigger toggle', () => { + expect( + vm.mousetrapStopCallback(null, vm.$el.querySelector('.dropdown-input-field'), 'command+p'), + ).toBe(false); + }); + + it('always allows `ctrl+p` to trigger toggle', () => { + expect( + vm.mousetrapStopCallback(null, vm.$el.querySelector('.dropdown-input-field'), 'ctrl+p'), + ).toBe(false); + }); + + it('onlys handles `t` when focused in input-field', () => { + expect( + vm.mousetrapStopCallback(null, vm.$el.querySelector('.dropdown-input-field'), 't'), + ).toBe(true); + }); + + it('stops callback in monaco editor', () => { + setFixtures('<div class="inputarea"></div>'); + + expect(vm.mousetrapStopCallback(null, document.querySelector('.inputarea'), 't')).toBe(true); + }); + }); +}); diff --git a/spec/frontend/vue_shared/components/filtered_search_bar/filtered_search_bar_root_spec.js b/spec/frontend/vue_shared/components/filtered_search_bar/filtered_search_bar_root_spec.js new file mode 100644 index 00000000000..eded5b87abc --- /dev/null +++ b/spec/frontend/vue_shared/components/filtered_search_bar/filtered_search_bar_root_spec.js @@ -0,0 +1,259 @@ +import { shallowMount } from '@vue/test-utils'; +import { + GlFilteredSearch, + GlButtonGroup, + GlButton, + GlNewDropdown as GlDropdown, + GlNewDropdownItem as GlDropdownItem, +} from '@gitlab/ui'; + +import FilteredSearchBarRoot from '~/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue'; +import { SortDirection } from '~/vue_shared/components/filtered_search_bar/constants'; + +import RecentSearchesStore from '~/filtered_search/stores/recent_searches_store'; +import RecentSearchesService from '~/filtered_search/services/recent_searches_service'; + +import { mockAvailableTokens, mockSortOptions } from './mock_data'; + +const createComponent = ({ + namespace = 'gitlab-org/gitlab-test', + recentSearchesStorageKey = 'requirements', + tokens = mockAvailableTokens, + sortOptions = mockSortOptions, + searchInputPlaceholder = 'Filter requirements', +} = {}) => + shallowMount(FilteredSearchBarRoot, { + propsData: { + namespace, + recentSearchesStorageKey, + tokens, + sortOptions, + searchInputPlaceholder, + }, + }); + +describe('FilteredSearchBarRoot', () => { + let wrapper; + + beforeEach(() => { + wrapper = createComponent(); + }); + + afterEach(() => { + wrapper.destroy(); + }); + + describe('data', () => { + it('initializes `filterValue`, `selectedSortOption` and `selectedSortDirection` data props', () => { + expect(wrapper.vm.filterValue).toEqual([]); + expect(wrapper.vm.selectedSortOption).toBe(mockSortOptions[0].sortDirection.descending); + expect(wrapper.vm.selectedSortDirection).toBe(SortDirection.descending); + }); + }); + + describe('computed', () => { + describe('tokenSymbols', () => { + it('returns array of map containing type and symbols from `tokens` prop', () => { + expect(wrapper.vm.tokenSymbols).toEqual({ author_username: '@' }); + }); + }); + + describe('sortDirectionIcon', () => { + it('returns string "sort-lowest" when `selectedSortDirection` is "ascending"', () => { + wrapper.setData({ + selectedSortDirection: SortDirection.ascending, + }); + + expect(wrapper.vm.sortDirectionIcon).toBe('sort-lowest'); + }); + + it('returns string "sort-highest" when `selectedSortDirection` is "descending"', () => { + wrapper.setData({ + selectedSortDirection: SortDirection.descending, + }); + + expect(wrapper.vm.sortDirectionIcon).toBe('sort-highest'); + }); + }); + + describe('sortDirectionTooltip', () => { + it('returns string "Sort direction: Ascending" when `selectedSortDirection` is "ascending"', () => { + wrapper.setData({ + selectedSortDirection: SortDirection.ascending, + }); + + expect(wrapper.vm.sortDirectionTooltip).toBe('Sort direction: Ascending'); + }); + + it('returns string "Sort direction: Descending" when `selectedSortDirection` is "descending"', () => { + wrapper.setData({ + selectedSortDirection: SortDirection.descending, + }); + + expect(wrapper.vm.sortDirectionTooltip).toBe('Sort direction: Descending'); + }); + }); + }); + + describe('watchers', () => { + describe('filterValue', () => { + it('emits component event `onFilter` with empty array when `filterValue` is cleared by GlFilteredSearch', () => { + wrapper.setData({ + initialRender: false, + filterValue: [ + { + type: 'filtered-search-term', + value: { data: '' }, + }, + ], + }); + + return wrapper.vm.$nextTick(() => { + expect(wrapper.emitted('onFilter')[0]).toEqual([[]]); + }); + }); + }); + }); + + describe('methods', () => { + describe('setupRecentSearch', () => { + it('initializes `recentSearchesService` and `recentSearchesStore` props when `recentSearchesStorageKey` is available', () => { + expect(wrapper.vm.recentSearchesService instanceof RecentSearchesService).toBe(true); + expect(wrapper.vm.recentSearchesStore instanceof RecentSearchesStore).toBe(true); + }); + + it('initializes `recentSearchesPromise` prop with a promise by using `recentSearchesService.fetch()`', () => { + jest + .spyOn(wrapper.vm.recentSearchesService, 'fetch') + .mockReturnValue(new Promise(() => [])); + + wrapper.vm.setupRecentSearch(); + + expect(wrapper.vm.recentSearchesPromise instanceof Promise).toBe(true); + }); + }); + + describe('getRecentSearches', () => { + it('returns array of strings representing recent searches', () => { + wrapper.vm.recentSearchesStore.setRecentSearches(['foo']); + + expect(wrapper.vm.getRecentSearches()).toEqual(['foo']); + }); + }); + + describe('handleSortOptionClick', () => { + it('emits component event `onSort` with selected sort by value', () => { + wrapper.vm.handleSortOptionClick(mockSortOptions[1]); + + expect(wrapper.vm.selectedSortOption).toBe(mockSortOptions[1]); + expect(wrapper.emitted('onSort')[0]).toEqual([mockSortOptions[1].sortDirection.descending]); + }); + }); + + describe('handleSortDirectionClick', () => { + beforeEach(() => { + wrapper.setData({ + selectedSortOption: mockSortOptions[0], + }); + }); + + it('sets `selectedSortDirection` to be opposite of its current value', () => { + expect(wrapper.vm.selectedSortDirection).toBe(SortDirection.descending); + + wrapper.vm.handleSortDirectionClick(); + + expect(wrapper.vm.selectedSortDirection).toBe(SortDirection.ascending); + }); + + it('emits component event `onSort` with opposite of currently selected sort by value', () => { + wrapper.vm.handleSortDirectionClick(); + + expect(wrapper.emitted('onSort')[0]).toEqual([mockSortOptions[0].sortDirection.ascending]); + }); + }); + + describe('handleFilterSubmit', () => { + const mockFilters = [ + { + type: 'author_username', + value: { + data: 'root', + operator: '=', + }, + }, + 'foo', + ]; + + it('calls `recentSearchesStore.addRecentSearch` with serialized value of provided `filters` param', () => { + jest.spyOn(wrapper.vm.recentSearchesStore, 'addRecentSearch'); + // jest.spyOn(wrapper.vm.recentSearchesService, 'save'); + + wrapper.vm.handleFilterSubmit(mockFilters); + + return wrapper.vm.recentSearchesPromise.then(() => { + expect(wrapper.vm.recentSearchesStore.addRecentSearch).toHaveBeenCalledWith( + 'author_username:=@root foo', + ); + }); + }); + + it('calls `recentSearchesService.save` with array of searches', () => { + jest.spyOn(wrapper.vm.recentSearchesService, 'save'); + + wrapper.vm.handleFilterSubmit(mockFilters); + + return wrapper.vm.recentSearchesPromise.then(() => { + expect(wrapper.vm.recentSearchesService.save).toHaveBeenCalledWith([ + 'author_username:=@root foo', + ]); + }); + }); + + it('emits component event `onFilter` with provided filters param', () => { + wrapper.vm.handleFilterSubmit(mockFilters); + + expect(wrapper.emitted('onFilter')[0]).toEqual([mockFilters]); + }); + }); + }); + + describe('template', () => { + beforeEach(() => { + wrapper.setData({ + selectedSortOption: mockSortOptions[0], + selectedSortDirection: SortDirection.descending, + }); + + return wrapper.vm.$nextTick(); + }); + + it('renders gl-filtered-search component', () => { + const glFilteredSearchEl = wrapper.find(GlFilteredSearch); + + expect(glFilteredSearchEl.props('placeholder')).toBe('Filter requirements'); + expect(glFilteredSearchEl.props('availableTokens')).toEqual(mockAvailableTokens); + }); + + it('renders sort dropdown component', () => { + expect(wrapper.find(GlButtonGroup).exists()).toBe(true); + expect(wrapper.find(GlDropdown).exists()).toBe(true); + expect(wrapper.find(GlDropdown).props('text')).toBe(mockSortOptions[0].title); + }); + + it('renders dropdown items', () => { + const dropdownItemsEl = wrapper.findAll(GlDropdownItem); + + expect(dropdownItemsEl).toHaveLength(mockSortOptions.length); + expect(dropdownItemsEl.at(0).text()).toBe(mockSortOptions[0].title); + expect(dropdownItemsEl.at(0).props('isChecked')).toBe(true); + expect(dropdownItemsEl.at(1).text()).toBe(mockSortOptions[1].title); + }); + + it('renders sort direction button', () => { + const sortButtonEl = wrapper.find(GlButton); + + expect(sortButtonEl.attributes('title')).toBe('Sort direction: Descending'); + expect(sortButtonEl.props('icon')).toBe('sort-highest'); + }); + }); +}); diff --git a/spec/frontend/vue_shared/components/filtered_search_bar/mock_data.js b/spec/frontend/vue_shared/components/filtered_search_bar/mock_data.js new file mode 100644 index 00000000000..edc0f119262 --- /dev/null +++ b/spec/frontend/vue_shared/components/filtered_search_bar/mock_data.js @@ -0,0 +1,64 @@ +import Api from '~/api'; +import AuthorToken from '~/vue_shared/components/filtered_search_bar/tokens/author_token.vue'; + +export const mockAuthor1 = { + id: 1, + name: 'Administrator', + username: 'root', + state: 'active', + avatar_url: 'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon', + web_url: 'http://0.0.0.0:3000/root', +}; + +export const mockAuthor2 = { + id: 2, + name: 'Claudio Beer', + username: 'ericka_terry', + state: 'active', + avatar_url: 'https://www.gravatar.com/avatar/12a89d115b5a398d5082897ebbcba9c2?s=80&d=identicon', + web_url: 'http://0.0.0.0:3000/ericka_terry', +}; + +export const mockAuthor3 = { + id: 6, + name: 'Shizue Hartmann', + username: 'junita.weimann', + state: 'active', + avatar_url: 'https://www.gravatar.com/avatar/9da1abb41b1d4c9c9e81030b71ea61a0?s=80&d=identicon', + web_url: 'http://0.0.0.0:3000/junita.weimann', +}; + +export const mockAuthors = [mockAuthor1, mockAuthor2, mockAuthor3]; + +export const mockAuthorToken = { + type: 'author_username', + icon: 'user', + title: 'Author', + unique: false, + symbol: '@', + token: AuthorToken, + operators: [{ value: '=', description: 'is', default: 'true' }], + fetchPath: 'gitlab-org/gitlab-test', + fetchAuthors: Api.projectUsers.bind(Api), +}; + +export const mockAvailableTokens = [mockAuthorToken]; + +export const mockSortOptions = [ + { + id: 1, + title: 'Created date', + sortDirection: { + descending: 'created_desc', + ascending: 'created_asc', + }, + }, + { + id: 2, + title: 'Last updated', + sortDirection: { + descending: 'updated_desc', + ascending: 'updated_asc', + }, + }, +]; diff --git a/spec/frontend/vue_shared/components/filtered_search_bar/tokens/author_token_spec.js b/spec/frontend/vue_shared/components/filtered_search_bar/tokens/author_token_spec.js new file mode 100644 index 00000000000..3650ef79136 --- /dev/null +++ b/spec/frontend/vue_shared/components/filtered_search_bar/tokens/author_token_spec.js @@ -0,0 +1,150 @@ +import { mount } from '@vue/test-utils'; +import { GlFilteredSearchToken, GlFilteredSearchTokenSegment } from '@gitlab/ui'; +import MockAdapter from 'axios-mock-adapter'; +import waitForPromises from 'helpers/wait_for_promises'; +import axios from '~/lib/utils/axios_utils'; + +import createFlash from '~/flash'; +import AuthorToken from '~/vue_shared/components/filtered_search_bar/tokens/author_token.vue'; + +import { mockAuthorToken, mockAuthors } from '../mock_data'; + +jest.mock('~/flash'); + +const createComponent = ({ config = mockAuthorToken, value = { data: '' } } = {}) => + mount(AuthorToken, { + propsData: { + config, + value, + }, + provide: { + portalName: 'fake target', + alignSuggestions: function fakeAlignSuggestions() {}, + }, + stubs: { + Portal: { + template: '<div><slot></slot></div>', + }, + GlFilteredSearchSuggestionList: { + template: '<div></div>', + methods: { + getValue: () => '=', + }, + }, + }, + }); + +describe('AuthorToken', () => { + let mock; + let wrapper; + + beforeEach(() => { + mock = new MockAdapter(axios); + wrapper = createComponent(); + }); + + afterEach(() => { + mock.restore(); + wrapper.destroy(); + }); + + describe('computed', () => { + describe('currentValue', () => { + it('returns lowercase string for `value.data`', () => { + wrapper.setProps({ + value: { data: 'FOO' }, + }); + + return wrapper.vm.$nextTick(() => { + expect(wrapper.vm.currentValue).toBe('foo'); + }); + }); + }); + + describe('activeAuthor', () => { + it('returns object for currently present `value.data`', () => { + wrapper.setData({ + authors: mockAuthors, + }); + + wrapper.setProps({ + value: { data: mockAuthors[0].username }, + }); + + return wrapper.vm.$nextTick(() => { + expect(wrapper.vm.activeAuthor).toEqual(mockAuthors[0]); + }); + }); + }); + }); + + describe('fetchAuthorBySearchTerm', () => { + it('calls `config.fetchAuthors` with provided searchTerm param', () => { + jest.spyOn(wrapper.vm.config, 'fetchAuthors'); + + wrapper.vm.fetchAuthorBySearchTerm(mockAuthors[0].username); + + expect(wrapper.vm.config.fetchAuthors).toHaveBeenCalledWith( + mockAuthorToken.fetchPath, + mockAuthors[0].username, + ); + }); + + it('sets response to `authors` when request is succesful', () => { + jest.spyOn(wrapper.vm.config, 'fetchAuthors').mockResolvedValue(mockAuthors); + + wrapper.vm.fetchAuthorBySearchTerm('root'); + + return waitForPromises().then(() => { + expect(wrapper.vm.authors).toEqual(mockAuthors); + }); + }); + + it('calls `createFlash` with flash error message when request fails', () => { + jest.spyOn(wrapper.vm.config, 'fetchAuthors').mockRejectedValue({}); + + wrapper.vm.fetchAuthorBySearchTerm('root'); + + return waitForPromises().then(() => { + expect(createFlash).toHaveBeenCalledWith('There was a problem fetching users.'); + }); + }); + + it('sets `loading` to false when request completes', () => { + jest.spyOn(wrapper.vm.config, 'fetchAuthors').mockRejectedValue({}); + + wrapper.vm.fetchAuthorBySearchTerm('root'); + + return waitForPromises().then(() => { + expect(wrapper.vm.loading).toBe(false); + }); + }); + }); + + describe('template', () => { + beforeEach(() => { + wrapper.setData({ + authors: mockAuthors, + }); + + return wrapper.vm.$nextTick(); + }); + + it('renders gl-filtered-search-token component', () => { + expect(wrapper.find(GlFilteredSearchToken).exists()).toBe(true); + }); + + it('renders token item when value is selected', () => { + wrapper.setProps({ + value: { data: mockAuthors[0].username }, + }); + + return wrapper.vm.$nextTick(() => { + const tokenSegments = wrapper.findAll(GlFilteredSearchTokenSegment); + + expect(tokenSegments).toHaveLength(3); // Author, =, "Administrator" + expect(tokenSegments.at(2).text()).toBe(mockAuthors[0].name); // "Administrator" + }); + }); + }); +}); diff --git a/spec/frontend/vue_shared/components/icon_spec.js b/spec/frontend/vue_shared/components/icon_spec.js new file mode 100644 index 00000000000..a448953cc8e --- /dev/null +++ b/spec/frontend/vue_shared/components/icon_spec.js @@ -0,0 +1,78 @@ +import Vue from 'vue'; +import { mount } from '@vue/test-utils'; +import mountComponent from 'helpers/vue_mount_component_helper'; +import Icon from '~/vue_shared/components/icon.vue'; +import iconsPath from '@gitlab/svgs/dist/icons.svg'; + +jest.mock('@gitlab/svgs/dist/icons.svg', () => 'testing'); + +describe('Sprite Icon Component', () => { + describe('Initialization', () => { + let icon; + + beforeEach(() => { + const IconComponent = Vue.extend(Icon); + + icon = mountComponent(IconComponent, { + name: 'commit', + size: 32, + }); + }); + + afterEach(() => { + icon.$destroy(); + }); + + it('should return a defined Vue component', () => { + expect(icon).toBeDefined(); + }); + + it('should have <svg> as a child element', () => { + expect(icon.$el.tagName).toBe('svg'); + }); + + it('should have <use> as a child element with the correct href', () => { + expect(icon.$el.firstChild.tagName).toBe('use'); + expect(icon.$el.firstChild.getAttribute('xlink:href')).toBe(`${iconsPath}#commit`); + }); + + it('should properly compute iconSizeClass', () => { + expect(icon.iconSizeClass).toBe('s32'); + }); + + it('forbids invalid size prop', () => { + expect(icon.$options.props.size.validator(NaN)).toBeFalsy(); + expect(icon.$options.props.size.validator(0)).toBeFalsy(); + expect(icon.$options.props.size.validator(9001)).toBeFalsy(); + }); + + it('should properly render img css', () => { + const { classList } = icon.$el; + const containsSizeClass = classList.contains('s32'); + + expect(containsSizeClass).toBe(true); + }); + + it('`name` validator should return false for non existing icons', () => { + jest.spyOn(console, 'warn').mockImplementation(); + + expect(Icon.props.name.validator('non_existing_icon_sprite')).toBe(false); + }); + + it('`name` validator should return true for existing icons', () => { + expect(Icon.props.name.validator('commit')).toBe(true); + }); + }); + + it('should call registered listeners when they are triggered', () => { + const clickHandler = jest.fn(); + const wrapper = mount(Icon, { + propsData: { name: 'commit' }, + listeners: { click: clickHandler }, + }); + + wrapper.find('svg').trigger('click'); + + expect(clickHandler).toHaveBeenCalled(); + }); +}); 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 dd24ecf707d..9be0a67e4fa 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 @@ -6,6 +6,15 @@ import { defaultAssignees, defaultMilestone } from './related_issuable_mock_data describe('RelatedIssuableItem', () => { let wrapper; + + function mountComponent({ mountMethod = mount, stubs = {}, props = {}, slots = {} } = {}) { + wrapper = mountMethod(RelatedIssuableItem, { + propsData: props, + slots, + stubs, + }); + } + const props = { idKey: 1, displayReference: 'gitlab-org/gitlab-test#1', @@ -26,10 +35,7 @@ describe('RelatedIssuableItem', () => { }; beforeEach(() => { - wrapper = mount(RelatedIssuableItem, { - slots, - propsData: props, - }); + mountComponent({ props, slots }); }); afterEach(() => { diff --git a/spec/frontend/vue_shared/components/markdown/__snapshots__/suggestion_diff_spec.js.snap b/spec/frontend/vue_shared/components/markdown/__snapshots__/suggestion_diff_spec.js.snap index 29ac754de49..cdd7a3ccaf0 100644 --- a/spec/frontend/vue_shared/components/markdown/__snapshots__/suggestion_diff_spec.js.snap +++ b/spec/frontend/vue_shared/components/markdown/__snapshots__/suggestion_diff_spec.js.snap @@ -5,8 +5,11 @@ exports[`Suggestion Diff component matches snapshot 1`] = ` class="md-suggestion" > <suggestion-diff-header-stub + batchsuggestionscount="1" class="qa-suggestion-diff-header js-suggestion-diff-header" helppagepath="path_to_docs" + isapplyingbatch="true" + isbatched="true" /> <table diff --git a/spec/frontend/vue_shared/components/markdown/field_spec.js b/spec/frontend/vue_shared/components/markdown/field_spec.js index 54ce1f47e28..74be5f8230e 100644 --- a/spec/frontend/vue_shared/components/markdown/field_spec.js +++ b/spec/frontend/vue_shared/components/markdown/field_spec.js @@ -185,7 +185,7 @@ describe('Markdown field component', () => { markdownButton.trigger('click'); return wrapper.vm.$nextTick(() => { - expect(textarea.value).toContain('* testing'); + expect(textarea.value).toContain('- testing'); }); }); @@ -197,7 +197,7 @@ describe('Markdown field component', () => { markdownButton.trigger('click'); return wrapper.vm.$nextTick(() => { - expect(textarea.value).toContain('* testing\n* 123'); + expect(textarea.value).toContain('- testing\n- 123'); }); }); }); 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 9b9c3d559e3..9a5b95b555f 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 @@ -3,20 +3,29 @@ import { shallowMount } from '@vue/test-utils'; import SuggestionDiffHeader from '~/vue_shared/components/markdown/suggestion_diff_header.vue'; const DEFAULT_PROPS = { + batchSuggestionsCount: 2, canApply: true, isApplied: false, + isBatched: false, + isApplyingBatch: false, helpPagePath: 'path_to_docs', }; describe('Suggestion Diff component', () => { let wrapper; - const createComponent = props => { + const createComponent = (props, glFeatures = {}) => { wrapper = shallowMount(SuggestionDiffHeader, { propsData: { ...DEFAULT_PROPS, ...props, }, + provide: { + glFeatures: { + batchSuggestions: true, + ...glFeatures, + }, + }, }); }; @@ -25,6 +34,9 @@ describe('Suggestion Diff component', () => { }); const findApplyButton = () => wrapper.find('.js-apply-btn'); + const findApplyBatchButton = () => wrapper.find('.js-apply-batch-btn'); + const findAddToBatchButton = () => wrapper.find('.js-add-to-batch-btn'); + const findRemoveFromBatchButton = () => wrapper.find('.js-remove-from-batch-btn'); const findHeader = () => wrapper.find('.js-suggestion-diff-header'); const findHelpButton = () => wrapper.find('.js-help-btn'); const findLoading = () => wrapper.find(GlLoadingIcon); @@ -44,19 +56,22 @@ describe('Suggestion Diff component', () => { expect(findHelpButton().exists()).toBe(true); }); - it('renders an apply button', () => { + it('renders apply suggestion and add to batch buttons', () => { createComponent(); const applyBtn = findApplyButton(); + const addToBatchBtn = findAddToBatchButton(); expect(applyBtn.exists()).toBe(true); expect(applyBtn.html().includes('Apply suggestion')).toBe(true); - }); - it('does not render an apply button if `canApply` is set to false', () => { - createComponent({ canApply: false }); + expect(addToBatchBtn.exists()).toBe(true); + expect(addToBatchBtn.html().includes('Add suggestion to batch')).toBe(true); + }); - expect(findApplyButton().exists()).toBe(false); + it('renders correct tooltip message for apply button', () => { + createComponent(); + expect(wrapper.vm.tooltipMessage).toBe('This also resolves the discussion'); }); describe('when apply suggestion is clicked', () => { @@ -73,13 +88,14 @@ describe('Suggestion Diff component', () => { }); }); - it('hides apply button', () => { + it('does not render apply suggestion and add to batch buttons', () => { expect(findApplyButton().exists()).toBe(false); + expect(findAddToBatchButton().exists()).toBe(false); }); it('shows loading', () => { expect(findLoading().exists()).toBe(true); - expect(wrapper.text()).toContain('Applying suggestion'); + expect(wrapper.text()).toContain('Applying suggestion...'); }); it('when callback of apply is called, hides loading', () => { @@ -93,4 +109,135 @@ describe('Suggestion Diff component', () => { }); }); }); + + describe('when add to batch is clicked', () => { + it('emits addToBatch', () => { + createComponent(); + + findAddToBatchButton().vm.$emit('click'); + + expect(wrapper.emittedByOrder()).toContainEqual({ + name: 'addToBatch', + args: [], + }); + }); + }); + + describe('when remove from batch is clicked', () => { + it('emits removeFromBatch', () => { + createComponent({ isBatched: true }); + + findRemoveFromBatchButton().vm.$emit('click'); + + expect(wrapper.emittedByOrder()).toContainEqual({ + name: 'removeFromBatch', + args: [], + }); + }); + }); + + describe('apply suggestions is clicked', () => { + it('emits applyBatch', () => { + createComponent({ isBatched: true }); + + findApplyBatchButton().vm.$emit('click'); + + expect(wrapper.emittedByOrder()).toContainEqual({ + name: 'applyBatch', + args: [], + }); + }); + }); + + describe('when isBatched is true', () => { + it('shows remove from batch and apply batch buttons and displays the batch count', () => { + createComponent({ + batchSuggestionsCount: 9, + isBatched: true, + }); + + const applyBatchBtn = findApplyBatchButton(); + const removeFromBatchBtn = findRemoveFromBatchButton(); + + expect(removeFromBatchBtn.exists()).toBe(true); + expect(removeFromBatchBtn.html().includes('Remove from batch')).toBe(true); + + expect(applyBatchBtn.exists()).toBe(true); + expect(applyBatchBtn.html().includes('Apply suggestions')).toBe(true); + expect(applyBatchBtn.html().includes(String('9'))).toBe(true); + }); + + it('hides add to batch and apply buttons', () => { + createComponent({ + isBatched: true, + }); + + expect(findApplyButton().exists()).toBe(false); + expect(findAddToBatchButton().exists()).toBe(false); + }); + + describe('when isBatched and isApplyingBatch are true', () => { + it('shows loading', () => { + createComponent({ + isBatched: true, + isApplyingBatch: true, + }); + + expect(findLoading().exists()).toBe(true); + expect(wrapper.text()).toContain('Applying suggestions...'); + }); + + it('adjusts message for batch with single suggestion', () => { + createComponent({ + batchSuggestionsCount: 1, + isBatched: true, + isApplyingBatch: true, + }); + + expect(findLoading().exists()).toBe(true); + expect(wrapper.text()).toContain('Applying suggestion...'); + }); + + it('hides remove from batch and apply suggestions buttons', () => { + createComponent({ + isBatched: true, + isApplyingBatch: true, + }); + + expect(findRemoveFromBatchButton().exists()).toBe(false); + expect(findApplyBatchButton().exists()).toBe(false); + }); + }); + }); + + describe('batchSuggestions feature flag is set to false', () => { + beforeEach(() => { + createComponent({}, { batchSuggestions: false }); + }); + + it('disables add to batch buttons but keeps apply suggestion enabled', () => { + expect(findApplyButton().exists()).toBe(true); + expect(findAddToBatchButton().exists()).toBe(false); + expect(findApplyButton().attributes('disabled')).not.toBe('true'); + }); + }); + + describe('canApply is set to false', () => { + beforeEach(() => { + createComponent({ canApply: false }); + }); + + it('disables apply suggestion and add to batch buttons', () => { + expect(findApplyButton().exists()).toBe(true); + expect(findAddToBatchButton().exists()).toBe(true); + expect(findApplyButton().attributes('disabled')).toBe('true'); + expect(findAddToBatchButton().attributes('disabled')).toBe('true'); + }); + + it('renders correct tooltip message for apply button', () => { + expect(wrapper.vm.tooltipMessage).toBe( + "Can't apply as this line has changed or the suggestion already matches its content.", + ); + }); + }); }); diff --git a/spec/frontend/vue_shared/components/markdown/suggestion_diff_spec.js b/spec/frontend/vue_shared/components/markdown/suggestion_diff_spec.js index 162ac495385..232feb126dc 100644 --- a/spec/frontend/vue_shared/components/markdown/suggestion_diff_spec.js +++ b/spec/frontend/vue_shared/components/markdown/suggestion_diff_spec.js @@ -3,9 +3,10 @@ import SuggestionDiffComponent from '~/vue_shared/components/markdown/suggestion import SuggestionDiffHeader from '~/vue_shared/components/markdown/suggestion_diff_header.vue'; import SuggestionDiffRow from '~/vue_shared/components/markdown/suggestion_diff_row.vue'; +const suggestionId = 1; const MOCK_DATA = { suggestion: { - id: 1, + id: suggestionId, diff_lines: [ { can_receive_suggestion: false, @@ -38,8 +39,10 @@ const MOCK_DATA = { type: 'new', }, ], + is_applying_batch: true, }, helpPagePath: 'path_to_docs', + batchSuggestionsInfo: [{ suggestionId }], }; describe('Suggestion Diff component', () => { @@ -70,17 +73,24 @@ describe('Suggestion Diff component', () => { expect(wrapper.findAll(SuggestionDiffRow)).toHaveLength(3); }); - it('emits apply event on sugestion diff header apply', () => { - wrapper.find(SuggestionDiffHeader).vm.$emit('apply', 'test-event'); + it.each` + event | childArgs | args + ${'apply'} | ${['test-event']} | ${[{ callback: 'test-event', suggestionId }]} + ${'applyBatch'} | ${[]} | ${[]} + ${'addToBatch'} | ${[]} | ${[suggestionId]} + ${'removeFromBatch'} | ${[]} | ${[suggestionId]} + `('emits $event event on sugestion diff header $event', ({ event, childArgs, args }) => { + wrapper.find(SuggestionDiffHeader).vm.$emit(event, ...childArgs); - expect(wrapper.emitted('apply')).toBeDefined(); - expect(wrapper.emitted('apply')).toEqual([ - [ - { - callback: 'test-event', - suggestionId: 1, - }, - ], - ]); + expect(wrapper.emitted(event)).toBeDefined(); + expect(wrapper.emitted(event)).toEqual([args]); + }); + + it('passes suggestion batch props to suggestion diff header', () => { + expect(wrapper.find(SuggestionDiffHeader).props()).toMatchObject({ + batchSuggestionsCount: 1, + isBatched: true, + isApplyingBatch: MOCK_DATA.suggestion.is_applying_batch, + }); }); }); diff --git a/spec/frontend/vue_shared/components/panel_resizer_spec.js b/spec/frontend/vue_shared/components/panel_resizer_spec.js new file mode 100644 index 00000000000..d8b903e5bfd --- /dev/null +++ b/spec/frontend/vue_shared/components/panel_resizer_spec.js @@ -0,0 +1,85 @@ +import Vue from 'vue'; +import mountComponent from 'helpers/vue_mount_component_helper'; +import panelResizer from '~/vue_shared/components/panel_resizer.vue'; + +describe('Panel Resizer component', () => { + let vm; + let PanelResizer; + + const triggerEvent = (eventName, el = vm.$el, clientX = 0) => { + const event = document.createEvent('MouseEvents'); + event.initMouseEvent( + eventName, + true, + true, + window, + 1, + clientX, + 0, + clientX, + 0, + false, + false, + false, + false, + 0, + null, + ); + + el.dispatchEvent(event); + }; + + beforeEach(() => { + PanelResizer = Vue.extend(panelResizer); + }); + + afterEach(() => { + vm.$destroy(); + }); + + it('should render a div element with the correct classes and styles', () => { + vm = mountComponent(PanelResizer, { + startSize: 100, + side: 'left', + }); + + expect(vm.$el.tagName).toEqual('DIV'); + expect(vm.$el.getAttribute('class')).toBe( + 'position-absolute position-top-0 position-bottom-0 drag-handle position-left-0', + ); + + expect(vm.$el.getAttribute('style')).toBe('cursor: ew-resize;'); + }); + + it('should render a div element with the correct classes for a right side panel', () => { + vm = mountComponent(PanelResizer, { + startSize: 100, + side: 'right', + }); + + expect(vm.$el.tagName).toEqual('DIV'); + expect(vm.$el.getAttribute('class')).toBe( + 'position-absolute position-top-0 position-bottom-0 drag-handle position-right-0', + ); + }); + + it('drag the resizer', () => { + vm = mountComponent(PanelResizer, { + startSize: 100, + side: 'left', + }); + + jest.spyOn(vm, '$emit').mockImplementation(() => {}); + triggerEvent('mousedown', vm.$el); + triggerEvent('mousemove', document); + triggerEvent('mouseup', document); + + expect(vm.$emit.mock.calls).toEqual([ + ['resize-start', 100], + ['update:size', 100], + ['resize-end', 100], + ]); + + expect(vm.size).toBe(100); + }); +}); diff --git a/spec/frontend/vue_shared/components/pikaday_spec.js b/spec/frontend/vue_shared/components/pikaday_spec.js index 867bf88ff50..639b4828a09 100644 --- a/spec/frontend/vue_shared/components/pikaday_spec.js +++ b/spec/frontend/vue_shared/components/pikaday_spec.js @@ -1,30 +1,42 @@ -import Vue from 'vue'; -import mountComponent from 'helpers/vue_mount_component_helper'; +import { shallowMount } from '@vue/test-utils'; import datePicker from '~/vue_shared/components/pikaday.vue'; describe('datePicker', () => { - let vm; + let wrapper; beforeEach(() => { - const DatePicker = Vue.extend(datePicker); - vm = mountComponent(DatePicker, { - label: 'label', + wrapper = shallowMount(datePicker, { + propsData: { + label: 'label', + }, + attachToDocument: true, }); }); + afterEach(() => { + wrapper.destroy(); + wrapper = null; + }); + it('should render label text', () => { - expect(vm.$el.querySelector('.dropdown-toggle-text').innerText.trim()).toEqual('label'); + expect( + wrapper + .find('.dropdown-toggle-text') + .text() + .trim(), + ).toEqual('label'); }); it('should show calendar', () => { - expect(vm.$el.querySelector('.pika-single')).toBeDefined(); + expect(wrapper.find('.pika-single').element).toBeDefined(); }); - it('should toggle when dropdown is clicked', () => { - const hidePicker = jest.fn(); - vm.$on('hidePicker', hidePicker); + it('should emit hidePicker event when dropdown is clicked', () => { + // Removing the bootstrap data-toggle property, + // because it interfers with our click event + delete wrapper.find('.dropdown-menu-toggle').element.dataset.toggle; - vm.$el.querySelector('.dropdown-menu-toggle').click(); + wrapper.find('.dropdown-menu-toggle').trigger('click'); - expect(hidePicker).toHaveBeenCalled(); + expect(wrapper.emitted('hidePicker')).toEqual([[]]); }); }); diff --git a/spec/frontend/vue_shared/components/project_selector/project_selector_spec.js b/spec/frontend/vue_shared/components/project_selector/project_selector_spec.js index 29bced394dc..6d1ebe85aa0 100644 --- a/spec/frontend/vue_shared/components/project_selector/project_selector_spec.js +++ b/spec/frontend/vue_shared/components/project_selector/project_selector_spec.js @@ -29,6 +29,7 @@ describe('ProjectSelector component', () => { showMinimumSearchQueryMessage: false, showLoadingIndicator: false, showSearchErrorMessage: false, + totalResults: searchResults.length, }, attachToDocument: true, }); @@ -109,4 +110,26 @@ describe('ProjectSelector component', () => { ); }); }); + + describe('the search results legend', () => { + it.each` + count | total | expected + ${0} | ${0} | ${'Showing 0 projects'} + ${1} | ${0} | ${'Showing 1 project'} + ${2} | ${0} | ${'Showing 2 projects'} + ${2} | ${3} | ${'Showing 2 of 3 projects'} + `( + 'is "$expected" given $count results are showing out of $total', + ({ count, total, expected }) => { + wrapper.setProps({ + projectSearchResults: searchResults.slice(0, count), + totalResults: total, + }); + + return wrapper.vm.$nextTick().then(() => { + expect(wrapper.text()).toContain(expected); + }); + }, + ); + }); }); diff --git a/spec/frontend/vue_shared/components/rich_content_editor/editor_service_spec.js b/spec/frontend/vue_shared/components/rich_content_editor/editor_service_spec.js new file mode 100644 index 00000000000..faa32131fab --- /dev/null +++ b/spec/frontend/vue_shared/components/rich_content_editor/editor_service_spec.js @@ -0,0 +1,77 @@ +import { + generateToolbarItem, + addCustomEventListener, + removeCustomEventListener, + addImage, + getMarkdown, +} from '~/vue_shared/components/rich_content_editor/editor_service'; + +describe('Editor Service', () => { + const mockInstance = { + eventManager: { addEventType: jest.fn(), removeEventHandler: jest.fn(), listen: jest.fn() }, + editor: { exec: jest.fn() }, + invoke: jest.fn(), + }; + const event = 'someCustomEvent'; + const handler = jest.fn(); + + describe('generateToolbarItem', () => { + const config = { + icon: 'bold', + command: 'some-command', + tooltip: 'Some Tooltip', + event: 'some-event', + }; + + const generatedItem = generateToolbarItem(config); + + it('generates the correct command', () => { + expect(generatedItem.options.command).toBe(config.command); + }); + + it('generates the correct event', () => { + expect(generatedItem.options.event).toBe(config.event); + }); + + it('generates a divider when isDivider is set to true', () => { + const isDivider = true; + + expect(generateToolbarItem({ isDivider })).toBe('divider'); + }); + }); + + describe('addCustomEventListener', () => { + it('registers an event type on the instance and adds an event handler', () => { + addCustomEventListener(mockInstance, event, handler); + + expect(mockInstance.eventManager.addEventType).toHaveBeenCalledWith(event); + expect(mockInstance.eventManager.listen).toHaveBeenCalledWith(event, handler); + }); + }); + + describe('removeCustomEventListener', () => { + it('removes an event handler from the instance', () => { + removeCustomEventListener(mockInstance, event, handler); + + expect(mockInstance.eventManager.removeEventHandler).toHaveBeenCalledWith(event, handler); + }); + }); + + describe('addImage', () => { + it('calls the exec method on the instance', () => { + const mockImage = { imageUrl: 'some/url.png', description: 'some description' }; + + addImage(mockInstance, mockImage); + + expect(mockInstance.editor.exec).toHaveBeenCalledWith('AddImage', mockImage); + }); + }); + + describe('getMarkdown', () => { + it('calls the invoke method on the instance', () => { + getMarkdown(mockInstance); + + expect(mockInstance.invoke).toHaveBeenCalledWith('getMarkdown'); + }); + }); +}); diff --git a/spec/frontend/vue_shared/components/rich_content_editor/modals/add_image_modal_spec.js b/spec/frontend/vue_shared/components/rich_content_editor/modals/add_image_modal_spec.js new file mode 100644 index 00000000000..4889bc8538d --- /dev/null +++ b/spec/frontend/vue_shared/components/rich_content_editor/modals/add_image_modal_spec.js @@ -0,0 +1,41 @@ +import { shallowMount } from '@vue/test-utils'; +import { GlModal } from '@gitlab/ui'; +import AddImageModal from '~/vue_shared/components/rich_content_editor/modals/add_image_modal.vue'; + +describe('Add Image Modal', () => { + let wrapper; + + const findModal = () => wrapper.find(GlModal); + const findUrlInput = () => wrapper.find({ ref: 'urlInput' }); + const findDescriptionInput = () => wrapper.find({ ref: 'descriptionInput' }); + + beforeEach(() => { + wrapper = shallowMount(AddImageModal); + }); + + describe('when content is loaded', () => { + it('renders a modal component', () => { + expect(findModal().exists()).toBe(true); + }); + + it('renders an input to add an image URL', () => { + expect(findUrlInput().exists()).toBe(true); + }); + + it('renders an input to add an image description', () => { + expect(findDescriptionInput().exists()).toBe(true); + }); + }); + + describe('add image', () => { + it('emits an addImage event when a valid URL is specified', () => { + const preventDefault = jest.fn(); + const mockImage = { imageUrl: '/some/valid/url.png', altText: 'some description' }; + wrapper.setData({ ...mockImage }); + + findModal().vm.$emit('ok', { preventDefault }); + expect(preventDefault).not.toHaveBeenCalled(); + expect(wrapper.emitted('addImage')).toEqual([[mockImage]]); + }); + }); +}); diff --git a/spec/frontend/vue_shared/components/rich_content_editor/rich_content_editor_spec.js b/spec/frontend/vue_shared/components/rich_content_editor/rich_content_editor_spec.js index 549d89171c6..0db10389df4 100644 --- a/spec/frontend/vue_shared/components/rich_content_editor/rich_content_editor_spec.js +++ b/spec/frontend/vue_shared/components/rich_content_editor/rich_content_editor_spec.js @@ -1,17 +1,33 @@ import { shallowMount } from '@vue/test-utils'; import RichContentEditor from '~/vue_shared/components/rich_content_editor/rich_content_editor.vue'; +import AddImageModal from '~/vue_shared/components/rich_content_editor/modals/add_image_modal.vue'; import { EDITOR_OPTIONS, EDITOR_TYPES, EDITOR_HEIGHT, EDITOR_PREVIEW_STYLE, + CUSTOM_EVENTS, } from '~/vue_shared/components/rich_content_editor/constants'; +import { + addCustomEventListener, + removeCustomEventListener, + addImage, +} from '~/vue_shared/components/rich_content_editor/editor_service'; + +jest.mock('~/vue_shared/components/rich_content_editor/editor_service', () => ({ + ...jest.requireActual('~/vue_shared/components/rich_content_editor/editor_service'), + addCustomEventListener: jest.fn(), + removeCustomEventListener: jest.fn(), + addImage: jest.fn(), +})); + describe('Rich Content Editor', () => { let wrapper; const value = '## Some Markdown'; const findEditor = () => wrapper.find({ ref: 'editor' }); + const findAddImageModal = () => wrapper.find(AddImageModal); beforeEach(() => { wrapper = shallowMount(RichContentEditor, { @@ -56,4 +72,47 @@ describe('Rich Content Editor', () => { expect(wrapper.emitted().input[0][0]).toBe(changedMarkdown); }); }); + + describe('when editor is loaded', () => { + it('adds the CUSTOM_EVENTS.openAddImageModal custom event listener', () => { + const mockEditorApi = { eventManager: { addEventType: jest.fn(), listen: jest.fn() } }; + findEditor().vm.$emit('load', mockEditorApi); + + expect(addCustomEventListener).toHaveBeenCalledWith( + mockEditorApi, + CUSTOM_EVENTS.openAddImageModal, + wrapper.vm.onOpenAddImageModal, + ); + }); + }); + + describe('when editor is destroyed', () => { + it('removes the CUSTOM_EVENTS.openAddImageModal custom event listener', () => { + const mockEditorApi = { eventManager: { removeEventHandler: jest.fn() } }; + + wrapper.vm.editorApi = mockEditorApi; + wrapper.vm.$destroy(); + + expect(removeCustomEventListener).toHaveBeenCalledWith( + mockEditorApi, + CUSTOM_EVENTS.openAddImageModal, + wrapper.vm.onOpenAddImageModal, + ); + }); + }); + + describe('add image modal', () => { + it('renders an addImageModal component', () => { + expect(findAddImageModal().exists()).toBe(true); + }); + + it('calls the onAddImage method when the addImage event is emitted', () => { + const mockImage = { imageUrl: 'some/url.png', description: 'some description' }; + const mockInstance = { exec: jest.fn() }; + wrapper.vm.$refs.editor = mockInstance; + + findAddImageModal().vm.$emit('addImage', mockImage); + expect(addImage).toHaveBeenCalledWith(mockInstance, mockImage); + }); + }); }); diff --git a/spec/frontend/vue_shared/components/rich_content_editor/toolbar_item_spec.js b/spec/frontend/vue_shared/components/rich_content_editor/toolbar_item_spec.js index 8545c43dc1e..2db15a71215 100644 --- a/spec/frontend/vue_shared/components/rich_content_editor/toolbar_item_spec.js +++ b/spec/frontend/vue_shared/components/rich_content_editor/toolbar_item_spec.js @@ -1,4 +1,5 @@ import { shallowMount } from '@vue/test-utils'; +import { createMockDirective, getBinding } from 'helpers/vue_mock_directive'; import { GlIcon } from '@gitlab/ui'; import ToolbarItem from '~/vue_shared/components/rich_content_editor/toolbar_item.vue'; @@ -9,33 +10,45 @@ describe('Toolbar Item', () => { const findButton = () => wrapper.find('button'); const buildWrapper = propsData => { - wrapper = shallowMount(ToolbarItem, { propsData }); + wrapper = shallowMount(ToolbarItem, { + propsData, + directives: { + GlTooltip: createMockDirective(), + }, + }); }; describe.each` - icon - ${'heading'} - ${'bold'} - ${'italic'} - ${'strikethrough'} - ${'quote'} - ${'link'} - ${'doc-code'} - ${'list-bulleted'} - ${'list-numbered'} - ${'list-task'} - ${'list-indent'} - ${'list-outdent'} - ${'dash'} - ${'table'} - ${'code'} - `('toolbar item component', ({ icon }) => { - beforeEach(() => buildWrapper({ icon })); + icon | tooltip + ${'heading'} | ${'Headings'} + ${'bold'} | ${'Add bold text'} + ${'italic'} | ${'Add italic text'} + ${'strikethrough'} | ${'Add strikethrough text'} + ${'quote'} | ${'Insert a quote'} + ${'link'} | ${'Add a link'} + ${'doc-code'} | ${'Insert a code block'} + ${'list-bulleted'} | ${'Add a bullet list'} + ${'list-numbered'} | ${'Add a numbered list'} + ${'list-task'} | ${'Add a task list'} + ${'list-indent'} | ${'Indent'} + ${'list-outdent'} | ${'Outdent'} + ${'dash'} | ${'Add a line'} + ${'table'} | ${'Add a table'} + ${'code'} | ${'Insert an image'} + ${'code'} | ${'Insert inline code'} + `('toolbar item component', ({ icon, tooltip }) => { + beforeEach(() => buildWrapper({ icon, tooltip })); it('renders a toolbar button', () => { expect(findButton().exists()).toBe(true); }); + it('renders the correct tooltip', () => { + const buttonTooltip = getBinding(wrapper.element, 'gl-tooltip'); + expect(buttonTooltip).toBeDefined(); + expect(buttonTooltip.value.title).toBe(tooltip); + }); + it(`renders the ${icon} icon`, () => { expect(findIcon().exists()).toBe(true); expect(findIcon().props().name).toBe(icon); diff --git a/spec/frontend/vue_shared/components/rich_content_editor/toolbar_service_spec.js b/spec/frontend/vue_shared/components/rich_content_editor/toolbar_service_spec.js deleted file mode 100644 index 7605cc6a22c..00000000000 --- a/spec/frontend/vue_shared/components/rich_content_editor/toolbar_service_spec.js +++ /dev/null @@ -1,29 +0,0 @@ -import { generateToolbarItem } from '~/vue_shared/components/rich_content_editor/toolbar_service'; - -describe('Toolbar Service', () => { - const config = { - icon: 'bold', - command: 'some-command', - tooltip: 'Some Tooltip', - event: 'some-event', - }; - const generatedItem = generateToolbarItem(config); - - it('generates the correct command', () => { - expect(generatedItem.options.command).toBe(config.command); - }); - - it('generates the correct tooltip', () => { - expect(generatedItem.options.tooltip).toBe(config.tooltip); - }); - - it('generates the correct event', () => { - expect(generatedItem.options.event).toBe(config.event); - }); - - it('generates a divider when isDivider is set to true', () => { - const isDivider = true; - - expect(generateToolbarItem({ isDivider })).toBe('divider'); - }); -}); diff --git a/spec/frontend/vue_shared/components/sidebar/date_picker_spec.js b/spec/frontend/vue_shared/components/sidebar/date_picker_spec.js index 198af09c9f5..47edfbe3115 100644 --- a/spec/frontend/vue_shared/components/sidebar/date_picker_spec.js +++ b/spec/frontend/vue_shared/components/sidebar/date_picker_spec.js @@ -1,121 +1,149 @@ -import Vue from 'vue'; -import mountComponent from 'helpers/vue_mount_component_helper'; -import sidebarDatePicker from '~/vue_shared/components/sidebar/date_picker.vue'; - -describe('sidebarDatePicker', () => { - let vm; - beforeEach(() => { - const SidebarDatePicker = Vue.extend(sidebarDatePicker); - vm = mountComponent(SidebarDatePicker, { - label: 'label', - isLoading: true, +import { mount } from '@vue/test-utils'; +import SidebarDatePicker from '~/vue_shared/components/sidebar/date_picker.vue'; +import DatePicker from '~/vue_shared/components/pikaday.vue'; + +describe('SidebarDatePicker', () => { + let wrapper; + + const mountComponent = (propsData = {}, data = {}) => { + if (wrapper) { + throw new Error('tried to call mountComponent without d'); + } + wrapper = mount(SidebarDatePicker, { + stubs: { + DatePicker: true, + }, + propsData, + data: () => data, }); + }; + + afterEach(() => { + wrapper.destroy(); + wrapper = null; }); it('should emit toggleCollapse when collapsed toggle sidebar is clicked', () => { - const toggleCollapse = jest.fn(); - vm.$on('toggleCollapse', toggleCollapse); + mountComponent(); - vm.$el.querySelector('.issuable-sidebar-header .gutter-toggle').click(); + wrapper.find('.issuable-sidebar-header .gutter-toggle').element.click(); - expect(toggleCollapse).toHaveBeenCalled(); + expect(wrapper.emitted('toggleCollapse')).toEqual([[]]); }); it('should render collapsed-calendar-icon', () => { - expect(vm.$el.querySelector('.sidebar-collapsed-icon')).toBeDefined(); + mountComponent(); + + expect(wrapper.find('.sidebar-collapsed-icon').element).toBeDefined(); }); - it('should render label', () => { - expect(vm.$el.querySelector('.title').innerText.trim()).toEqual('label'); + it('should render value when not editing', () => { + mountComponent(); + + expect(wrapper.find('.value-content').element).toBeDefined(); }); - it('should render loading-icon when isLoading', () => { - expect(vm.$el.querySelector('.fa-spin')).toBeDefined(); + it('should render None if there is no selectedDate', () => { + mountComponent(); + + expect( + wrapper + .find('.value-content span') + .text() + .trim(), + ).toEqual('None'); }); - it('should render value when not editing', () => { - expect(vm.$el.querySelector('.value-content')).toBeDefined(); + it('should render date-picker when editing', () => { + mountComponent({}, { editing: true }); + + expect(wrapper.find(DatePicker).element).toBeDefined(); }); - it('should render None if there is no selectedDate', () => { - expect(vm.$el.querySelector('.value-content span').innerText.trim()).toEqual('None'); + it('should render label', () => { + const label = 'label'; + mountComponent({ label }); + expect( + wrapper + .find('.title') + .text() + .trim(), + ).toEqual(label); }); - it('should render date-picker when editing', done => { - vm.editing = true; - Vue.nextTick(() => { - expect(vm.$el.querySelector('.pika-label')).toBeDefined(); - done(); - }); + it('should render loading-icon when isLoading', () => { + mountComponent({ isLoading: true }); + expect(wrapper.find('.gl-spinner').element).toBeDefined(); }); describe('editable', () => { - beforeEach(done => { - vm.editable = true; - Vue.nextTick(done); + beforeEach(() => { + mountComponent({ editable: true }); }); it('should render edit button', () => { - expect(vm.$el.querySelector('.title .btn-blank').innerText.trim()).toEqual('Edit'); + expect( + wrapper + .find('.title .btn-blank') + .text() + .trim(), + ).toEqual('Edit'); }); - it('should enable editing when edit button is clicked', done => { - vm.isLoading = false; - Vue.nextTick(() => { - vm.$el.querySelector('.title .btn-blank').click(); + it('should enable editing when edit button is clicked', async () => { + wrapper.find('.title .btn-blank').element.click(); + + await wrapper.vm.$nextTick(); - expect(vm.editing).toEqual(true); - done(); - }); + expect(wrapper.vm.editing).toEqual(true); }); }); - it('should render date if selectedDate', done => { - vm.selectedDate = new Date('07/07/2017'); - Vue.nextTick(() => { - expect(vm.$el.querySelector('.value-content strong').innerText.trim()).toEqual('Jul 7, 2017'); - done(); - }); + it('should render date if selectedDate', () => { + mountComponent({ selectedDate: new Date('07/07/2017') }); + + expect( + wrapper + .find('.value-content strong') + .text() + .trim(), + ).toEqual('Jul 7, 2017'); }); describe('selectedDate and editable', () => { - beforeEach(done => { - vm.selectedDate = new Date('07/07/2017'); - vm.editable = true; - Vue.nextTick(done); + beforeEach(() => { + mountComponent({ selectedDate: new Date('07/07/2017'), editable: true }); }); it('should render remove button if selectedDate and editable', () => { - expect(vm.$el.querySelector('.value-content .btn-blank').innerText.trim()).toEqual('remove'); + expect( + wrapper + .find('.value-content .btn-blank') + .text() + .trim(), + ).toEqual('remove'); }); - it('should emit saveDate when remove button is clicked', () => { - const saveDate = jest.fn(); - vm.$on('saveDate', saveDate); + it('should emit saveDate with null when remove button is clicked', () => { + wrapper.find('.value-content .btn-blank').element.click(); - vm.$el.querySelector('.value-content .btn-blank').click(); - - expect(saveDate).toHaveBeenCalled(); + expect(wrapper.emitted('saveDate')).toEqual([[null]]); }); }); describe('showToggleSidebar', () => { - beforeEach(done => { - vm.showToggleSidebar = true; - Vue.nextTick(done); + beforeEach(() => { + mountComponent({ showToggleSidebar: true }); }); it('should render toggle-sidebar when showToggleSidebar', () => { - expect(vm.$el.querySelector('.title .gutter-toggle')).toBeDefined(); + expect(wrapper.find('.title .gutter-toggle').element).toBeDefined(); }); it('should emit toggleCollapse when toggle sidebar is clicked', () => { - const toggleCollapse = jest.fn(); - vm.$on('toggleCollapse', toggleCollapse); - - vm.$el.querySelector('.title .gutter-toggle').click(); + wrapper.find('.title .gutter-toggle').element.click(); - expect(toggleCollapse).toHaveBeenCalled(); + expect(wrapper.emitted('toggleCollapse')).toEqual([[]]); }); }); }); diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view_spec.js index 74c769f86a3..1504e1521d3 100644 --- a/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view_spec.js +++ b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view_spec.js @@ -3,6 +3,7 @@ import { shallowMount, createLocalVue } from '@vue/test-utils'; import { GlButton, GlLoadingIcon, GlSearchBoxByType, GlLink } from '@gitlab/ui'; import { UP_KEY_CODE, DOWN_KEY_CODE, ENTER_KEY_CODE, ESC_KEY_CODE } from '~/lib/utils/keycodes'; +import SmartVirtualList from '~/vue_shared/components/smart_virtual_list.vue'; import DropdownContentsLabelsView from '~/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view.vue'; import LabelItem from '~/vue_shared/components/sidebar/labels_select_vue/label_item.vue'; @@ -224,6 +225,10 @@ describe('DropdownContentsLabelsView', () => { expect(searchInputEl.attributes('autofocus')).toBe('true'); }); + it('renders smart-virtual-list element', () => { + expect(wrapper.find(SmartVirtualList).exists()).toBe(true); + }); + it('renders label elements for all labels', () => { expect(wrapper.findAll(LabelItem)).toHaveLength(mockLabels.length); }); diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select_vue/label_item_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/label_item_spec.js index 401d208da5c..ad3f073fdf9 100644 --- a/spec/frontend/vue_shared/components/sidebar/labels_select_vue/label_item_spec.js +++ b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/label_item_spec.js @@ -4,10 +4,13 @@ import { GlIcon, GlLink } from '@gitlab/ui'; import LabelItem from '~/vue_shared/components/sidebar/labels_select_vue/label_item.vue'; import { mockRegularLabel } from './mock_data'; -const createComponent = ({ label = mockRegularLabel, highlight = true } = {}) => +const mockLabel = { ...mockRegularLabel, set: true }; + +const createComponent = ({ label = mockLabel, highlight = true } = {}) => shallowMount(LabelItem, { propsData: { label, + isLabelSet: label.set, highlight, }, }); @@ -28,13 +31,29 @@ describe('LabelItem', () => { it('returns an object containing `backgroundColor` based on `label` prop', () => { expect(wrapper.vm.labelBoxStyle).toEqual( expect.objectContaining({ - backgroundColor: mockRegularLabel.color, + backgroundColor: mockLabel.color, }), ); }); }); }); + describe('watchers', () => { + describe('isLabelSet', () => { + it('sets value of `isLabelSet` to `isSet` data prop', () => { + expect(wrapper.vm.isSet).toBe(true); + + wrapper.setProps({ + isLabelSet: false, + }); + + return wrapper.vm.$nextTick(() => { + expect(wrapper.vm.isSet).toBe(false); + }); + }); + }); + }); + describe('methods', () => { describe('handleClick', () => { it('sets value of `isSet` data prop to opposite of its current value', () => { @@ -52,7 +71,7 @@ describe('LabelItem', () => { wrapper.vm.handleClick(); expect(wrapper.emitted('clickLabel')).toBeTruthy(); - expect(wrapper.emitted('clickLabel')[0]).toEqual([mockRegularLabel]); + expect(wrapper.emitted('clickLabel')[0]).toEqual([mockLabel]); }); }); }); @@ -105,7 +124,7 @@ describe('LabelItem', () => { }); it('renders label title', () => { - expect(wrapper.text()).toContain(mockRegularLabel.title); + expect(wrapper.text()).toContain(mockLabel.title); }); }); }); diff --git a/spec/frontend/vue_shared/components/smart_virtual_list_spec.js b/spec/frontend/vue_shared/components/smart_virtual_list_spec.js new file mode 100644 index 00000000000..e5f9b94128e --- /dev/null +++ b/spec/frontend/vue_shared/components/smart_virtual_list_spec.js @@ -0,0 +1,83 @@ +import Vue from 'vue'; +import { mount } from '@vue/test-utils'; +import SmartVirtualScrollList from '~/vue_shared/components/smart_virtual_list.vue'; + +describe('Toggle Button', () => { + let vm; + + const createComponent = ({ length, remain }) => { + const smartListProperties = { + rtag: 'section', + wtag: 'ul', + wclass: 'test-class', + // Size in pixels does not matter for our tests here + size: 35, + length, + remain, + }; + + const Component = Vue.extend({ + components: { + SmartVirtualScrollList, + }, + smartListProperties, + items: Array(length).fill(1), + template: ` + <smart-virtual-scroll-list v-bind="$options.smartListProperties"> + <li v-for="(val, key) in $options.items" :key="key">{{ key + 1 }}</li> + </smart-virtual-scroll-list>`, + }); + + return mount(Component).vm; + }; + + afterEach(() => { + vm.$destroy(); + }); + + describe('if the list is shorter than the maximum shown elements', () => { + const listLength = 10; + + beforeEach(() => { + vm = createComponent({ length: listLength, remain: 20 }); + }); + + it('renders without the vue-virtual-scroll-list component', () => { + expect(vm.$el.classList).not.toContain('js-virtual-list'); + expect(vm.$el.classList).toContain('js-plain-element'); + }); + + it('renders list with provided tags and classes for the wrapper elements', () => { + expect(vm.$el.tagName).toEqual('SECTION'); + expect(vm.$el.firstChild.tagName).toEqual('UL'); + expect(vm.$el.firstChild.classList).toContain('test-class'); + }); + + it('renders all children list elements', () => { + expect(vm.$el.querySelectorAll('li').length).toEqual(listLength); + }); + }); + + describe('if the list is longer than the maximum shown elements', () => { + const maxItemsShown = 20; + + beforeEach(() => { + vm = createComponent({ length: 1000, remain: maxItemsShown }); + }); + + it('uses the vue-virtual-scroll-list component', () => { + expect(vm.$el.classList).toContain('js-virtual-list'); + expect(vm.$el.classList).not.toContain('js-plain-element'); + }); + + it('renders list with provided tags and classes for the wrapper elements', () => { + expect(vm.$el.tagName).toEqual('SECTION'); + expect(vm.$el.firstChild.tagName).toEqual('UL'); + expect(vm.$el.firstChild.classList).toContain('test-class'); + }); + + it('renders at max twice the maximum shown elements', () => { + expect(vm.$el.querySelectorAll('li').length).toBeLessThanOrEqual(2 * maxItemsShown); + }); + }); +}); diff --git a/spec/frontend/vue_shared/directives/autofocusonshow_spec.js b/spec/frontend/vue_shared/directives/autofocusonshow_spec.js new file mode 100644 index 00000000000..90530b7d5c2 --- /dev/null +++ b/spec/frontend/vue_shared/directives/autofocusonshow_spec.js @@ -0,0 +1,46 @@ +import autofocusonshow from '~/vue_shared/directives/autofocusonshow'; + +/** + * We're testing this directive's hooks as pure functions + * since behaviour of this directive is highly-dependent + * on underlying DOM methods. + */ +describe('AutofocusOnShow directive', () => { + describe('with input invisible on component render', () => { + let el; + + beforeEach(() => { + setFixtures('<div id="container" style="display: none;"><input id="inputel"/></div>'); + el = document.querySelector('#inputel'); + + window.IntersectionObserver = class { + observe = jest.fn(); + }; + }); + + afterEach(() => { + delete window.IntersectionObserver; + }); + + it('should bind IntersectionObserver on input element', () => { + jest.spyOn(el, 'focus').mockImplementation(() => {}); + + autofocusonshow.inserted(el); + + expect(el.visibilityObserver).toBeDefined(); + expect(el.focus).not.toHaveBeenCalled(); + }); + + it('should stop IntersectionObserver on input element on unbind hook', () => { + el.visibilityObserver = { + disconnect: () => {}, + }; + jest.spyOn(el.visibilityObserver, 'disconnect').mockImplementation(() => {}); + + autofocusonshow.unbind(el); + + expect(el.visibilityObserver).toBeDefined(); + expect(el.visibilityObserver.disconnect).toHaveBeenCalled(); + }); + }); +}); diff --git a/spec/frontend/vue_shared/directives/tooltip_spec.js b/spec/frontend/vue_shared/directives/tooltip_spec.js new file mode 100644 index 00000000000..9d3dd3c5f75 --- /dev/null +++ b/spec/frontend/vue_shared/directives/tooltip_spec.js @@ -0,0 +1,98 @@ +import $ from 'jquery'; +import { mount } from '@vue/test-utils'; +import tooltip from '~/vue_shared/directives/tooltip'; + +describe('Tooltip directive', () => { + let vm; + + afterEach(() => { + if (vm) { + vm.$destroy(); + } + }); + + describe('with a single tooltip', () => { + beforeEach(() => { + const wrapper = mount( + { + directives: { + tooltip, + }, + data() { + return { + tooltip: 'some text', + }; + }, + template: '<div v-tooltip :title="tooltip"></div>', + }, + { attachToDocument: true }, + ); + + vm = wrapper.vm; + }); + + it('should have tooltip plugin applied', () => { + expect($(vm.$el).data('bs.tooltip')).toBeDefined(); + }); + + it('displays the title as tooltip', () => { + $(vm.$el).tooltip('show'); + jest.runOnlyPendingTimers(); + + const tooltipElement = document.querySelector('.tooltip-inner'); + + expect(tooltipElement.textContent).toContain('some text'); + }); + + it('updates a visible tooltip', () => { + $(vm.$el).tooltip('show'); + jest.runOnlyPendingTimers(); + + const tooltipElement = document.querySelector('.tooltip-inner'); + + vm.tooltip = 'other text'; + + jest.runOnlyPendingTimers(); + + return vm.$nextTick().then(() => { + expect(tooltipElement.textContent).toContain('other text'); + }); + }); + }); + + describe('with multiple tooltips', () => { + beforeEach(() => { + const wrapper = mount( + { + directives: { + tooltip, + }, + template: ` + <div> + <div + v-tooltip + class="js-look-for-tooltip" + title="foo"> + </div> + <div + v-tooltip + title="bar"> + </div> + </div> + `, + }, + { attachToDocument: true }, + ); + + vm = wrapper.vm; + }); + + it('should have tooltip plugin applied to all instances', () => { + expect( + $(vm.$el) + .find('.js-look-for-tooltip') + .data('bs.tooltip'), + ).toBeDefined(); + }); + }); +}); diff --git a/spec/frontend/vue_shared/translate_spec.js b/spec/frontend/vue_shared/translate_spec.js new file mode 100644 index 00000000000..42aa28a6309 --- /dev/null +++ b/spec/frontend/vue_shared/translate_spec.js @@ -0,0 +1,214 @@ +import { mount, createLocalVue } from '@vue/test-utils'; +import locale from '~/locale'; +import Translate from '~/vue_shared/translate'; + +const localVue = createLocalVue(); +localVue.use(Translate); + +describe('Vue translate filter', () => { + const createTranslationMock = (key, ...translations) => { + locale.textdomain('app'); + + locale.options.locale_data = { + app: { + '': { + domain: 'app', + lang: 'vo', + plural_forms: 'nplurals=2; plural=(n != 1);', + }, + [key]: translations, + }, + }; + }; + + it('translate singular text (`__`)', () => { + const key = 'singular'; + const translation = 'singular_translated'; + createTranslationMock(key, translation); + + const wrapper = mount( + { + template: ` + <span> + {{ __('${key}') }} + </span> + `, + }, + { localVue }, + ); + + expect(wrapper.text()).toBe(translation); + }); + + it('translate plural text (`n__`) without any substituting text', () => { + const key = 'plural'; + const translationPlural = 'plural_multiple translation'; + createTranslationMock(key, 'plural_singular translation', translationPlural); + + const wrapper = mount( + { + template: ` + <span> + {{ n__('${key}', 'plurals', 2) }} + </span> + `, + }, + { localVue }, + ); + + expect(wrapper.text()).toBe(translationPlural); + }); + + describe('translate plural text (`n__`) with substituting %d', () => { + const key = '%d day'; + + beforeEach(() => { + createTranslationMock(key, '%d singular translated', '%d plural translated'); + }); + + it('and n === 1', () => { + const wrapper = mount( + { + template: ` + <span> + {{ n__('${key}', '%d days', 1) }} + </span> + `, + }, + { localVue }, + ); + + expect(wrapper.text()).toBe('1 singular translated'); + }); + + it('and n > 1', () => { + const wrapper = mount( + { + template: ` + <span> + {{ n__('${key}', '%d days', 2) }} + </span> + `, + }, + { localVue }, + ); + + expect(wrapper.text()).toBe('2 plural translated'); + }); + }); + + describe('translates text with context `s__`', () => { + const key = 'Context|Foobar'; + const translation = 'Context|Foobar translated'; + const expectation = 'Foobar translated'; + + beforeEach(() => { + createTranslationMock(key, translation); + }); + + it('and using two parameters', () => { + const wrapper = mount( + { + template: ` + <span> + {{ s__('Context', 'Foobar') }} + </span> + `, + }, + { localVue }, + ); + + expect(wrapper.text()).toBe(expectation); + }); + + it('and using the pipe syntax', () => { + const wrapper = mount( + { + template: ` + <span> + {{ s__('${key}') }} + </span> + `, + }, + { localVue }, + ); + + expect(wrapper.text()).toBe(expectation); + }); + }); + + it('translate multi line text', () => { + const translation = 'multiline string translated'; + createTranslationMock('multiline string', translation); + + const wrapper = mount( + { + template: ` + <span> + {{ __(\` + multiline + string + \`) }} + </span> + `, + }, + { localVue }, + ); + + expect(wrapper.text()).toBe(translation); + }); + + it('translate pluralized multi line text', () => { + const translation = 'multiline string plural'; + + createTranslationMock('multiline string', 'multiline string singular', translation); + + const wrapper = mount( + { + template: ` + <span> + {{ n__( + \` + multiline + string + \`, + \` + multiline + strings + \`, + 2 + ) }} + </span> + `, + }, + { localVue }, + ); + + expect(wrapper.text()).toBe(translation); + }); + + it('translate pluralized multi line text with context', () => { + const translation = 'multiline string with context'; + + createTranslationMock('Context| multiline string', translation); + + const wrapper = mount( + { + template: ` + <span> + {{ s__( + \` + Context| + multiline + string + \` + ) }} + </span> + `, + }, + { localVue }, + ); + + expect(wrapper.text()).toBe(translation); + }); +}); diff --git a/spec/frontend/vuex_shared/modules/modal/actions_spec.js b/spec/frontend/vuex_shared/modules/modal/actions_spec.js new file mode 100644 index 00000000000..353dbcb522f --- /dev/null +++ b/spec/frontend/vuex_shared/modules/modal/actions_spec.js @@ -0,0 +1,31 @@ +import testAction from 'helpers/vuex_action_helper'; +import * as types from '~/vuex_shared/modules/modal/mutation_types'; +import * as actions from '~/vuex_shared/modules/modal/actions'; + +describe('Vuex ModalModule actions', () => { + describe('open', () => { + it('works', done => { + const data = { id: 7 }; + + testAction(actions.open, data, {}, [{ type: types.OPEN, payload: data }], [], done); + }); + }); + + describe('close', () => { + it('works', done => { + testAction(actions.close, null, {}, [{ type: types.CLOSE }], [], done); + }); + }); + + describe('show', () => { + it('works', done => { + testAction(actions.show, null, {}, [{ type: types.SHOW }], [], done); + }); + }); + + describe('hide', () => { + it('works', done => { + testAction(actions.hide, null, {}, [{ type: types.HIDE }], [], done); + }); + }); +}); diff --git a/spec/frontend/wikis_spec.js b/spec/frontend/wikis_spec.js index e5d869840aa..8c68edafd16 100644 --- a/spec/frontend/wikis_spec.js +++ b/spec/frontend/wikis_spec.js @@ -1,4 +1,4 @@ -import Wikis from '~/pages/projects/wikis/wikis'; +import Wikis from '~/pages/shared/wikis/wikis'; import { setHTMLFixture } from './helpers/fixtures'; describe('Wikis', () => { diff --git a/spec/frontend/zen_mode_spec.js b/spec/frontend/zen_mode_spec.js new file mode 100644 index 00000000000..8e0d170289b --- /dev/null +++ b/spec/frontend/zen_mode_spec.js @@ -0,0 +1,112 @@ +import $ from 'jquery'; +import axios from 'axios'; +import MockAdapter from 'axios-mock-adapter'; +import Dropzone from 'dropzone'; +import Mousetrap from 'mousetrap'; +import ZenMode from '~/zen_mode'; +import initNotes from '~/init_notes'; + +describe('ZenMode', () => { + let mock; + let zen; + let dropzoneForElementSpy; + const fixtureName = 'snippets/show.html'; + + preloadFixtures(fixtureName); + + function enterZen() { + $('.notes-form .js-zen-enter').click(); + } + + function exitZen() { + $('.notes-form .js-zen-leave').click(); + } + + function escapeKeydown() { + $('.notes-form textarea').trigger( + $.Event('keydown', { + keyCode: 27, + }), + ); + } + + beforeEach(() => { + mock = new MockAdapter(axios); + mock.onGet().reply(200); + + loadFixtures(fixtureName); + initNotes(); + + dropzoneForElementSpy = jest.spyOn(Dropzone, 'forElement').mockImplementation(() => ({ + enable: () => true, + })); + zen = new ZenMode(); + + // Set this manually because we can't actually scroll the window + zen.scroll_position = 456; + }); + + describe('enabling dropzone', () => { + beforeEach(() => { + enterZen(); + }); + + it('should not call dropzone if element is not dropzone valid', () => { + $('.div-dropzone').addClass('js-invalid-dropzone'); + exitZen(); + + expect(dropzoneForElementSpy.mock.calls.length).toEqual(0); + }); + + it('should call dropzone if element is dropzone valid', () => { + $('.div-dropzone').removeClass('js-invalid-dropzone'); + exitZen(); + + expect(dropzoneForElementSpy.mock.calls.length).toEqual(2); + }); + }); + + describe('on enter', () => { + it('pauses Mousetrap', () => { + const mouseTrapPauseSpy = jest.spyOn(Mousetrap, 'pause'); + enterZen(); + + expect(mouseTrapPauseSpy).toHaveBeenCalled(); + }); + + it('removes textarea styling', () => { + $('.notes-form textarea').attr('style', 'height: 400px'); + enterZen(); + + expect($('.notes-form textarea')).not.toHaveAttr('style'); + }); + }); + + describe('in use', () => { + beforeEach(enterZen); + + it('exits on Escape', () => { + escapeKeydown(); + + expect($('.notes-form .zen-backdrop')).not.toHaveClass('fullscreen'); + }); + }); + + describe('on exit', () => { + beforeEach(enterZen); + + it('unpauses Mousetrap', () => { + const mouseTrapUnpauseSpy = jest.spyOn(Mousetrap, 'unpause'); + exitZen(); + + expect(mouseTrapUnpauseSpy).toHaveBeenCalled(); + }); + + it('restores the scroll position', () => { + jest.spyOn(zen, 'scrollTo').mockImplementation(() => {}); + exitZen(); + + expect(zen.scrollTo).toHaveBeenCalled(); + }); + }); +}); |