diff options
Diffstat (limited to 'spec/frontend')
24 files changed, 628 insertions, 195 deletions
diff --git a/spec/frontend/boards/components/board_app_spec.js b/spec/frontend/boards/components/board_app_spec.js index 148e696b57b..77ba6cdc9c0 100644 --- a/spec/frontend/boards/components/board_app_spec.js +++ b/spec/frontend/boards/components/board_app_spec.js @@ -1,14 +1,20 @@ import { shallowMount } from '@vue/test-utils'; -import Vue from 'vue'; +import Vue, { nextTick } from 'vue'; +import VueApollo from 'vue-apollo'; import Vuex from 'vuex'; +import createMockApollo from 'helpers/mock_apollo_helper'; import BoardApp from '~/boards/components/board_app.vue'; +import activeBoardItemQuery from 'ee_else_ce/boards/graphql/client/active_board_item.query.graphql'; +import { rawIssue } from '../mock_data'; describe('BoardApp', () => { let wrapper; let store; + const mockApollo = createMockApollo(); Vue.use(Vuex); + Vue.use(VueApollo); const createStore = ({ mockGetters = {} } = {}) => { store = new Vuex.Store({ @@ -23,12 +29,22 @@ describe('BoardApp', () => { }); }; - const createComponent = () => { + const createComponent = ({ isApolloBoard = false, issue = rawIssue } = {}) => { + mockApollo.clients.defaultClient.cache.writeQuery({ + query: activeBoardItemQuery, + data: { + activeBoardItem: issue, + }, + }); + wrapper = shallowMount(BoardApp, { + apolloProvider: mockApollo, store, provide: { initialBoardId: 'gid://gitlab/Board/1', initialFilterParams: {}, + isIssueBoard: true, + isApolloBoard, }, }); }; @@ -50,4 +66,22 @@ describe('BoardApp', () => { expect(wrapper.classes()).not.toContain('is-compact'); }); + + describe('Apollo boards', () => { + beforeEach(async () => { + createComponent({ isApolloBoard: true }); + await nextTick(); + }); + + it('should have is-compact class when a card is selected', () => { + expect(wrapper.classes()).toContain('is-compact'); + }); + + it('should not have is-compact class when no card is selected', async () => { + createComponent({ isApolloBoard: true, issue: {} }); + await nextTick(); + + expect(wrapper.classes()).not.toContain('is-compact'); + }); + }); }); diff --git a/spec/frontend/boards/components/board_card_spec.js b/spec/frontend/boards/components/board_card_spec.js index 46116bed4cf..91e9b6f8cfa 100644 --- a/spec/frontend/boards/components/board_card_spec.js +++ b/spec/frontend/boards/components/board_card_spec.js @@ -1,8 +1,10 @@ import { GlLabel } from '@gitlab/ui'; -import { shallowMount } from '@vue/test-utils'; import Vue, { nextTick } from 'vue'; import Vuex from 'vuex'; +import VueApollo from 'vue-apollo'; +import createMockApollo from 'helpers/mock_apollo_helper'; +import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; import BoardCard from '~/boards/components/board_card.vue'; import BoardCardInner from '~/boards/components/board_card_inner.vue'; import { inactiveId } from '~/boards/constants'; @@ -14,6 +16,14 @@ describe('Board card', () => { let mockActions; Vue.use(Vuex); + Vue.use(VueApollo); + + const mockSetActiveBoardItemResolver = jest.fn(); + const mockApollo = createMockApollo([], { + Mutation: { + setActiveBoardItem: mockSetActiveBoardItemResolver, + }, + }); const createStore = ({ initialState = {} } = {}) => { mockActions = { @@ -36,11 +46,11 @@ describe('Board card', () => { const mountComponent = ({ propsData = {}, provide = {}, - mountFn = shallowMount, stubs = { BoardCardInner }, item = mockIssue, } = {}) => { - wrapper = mountFn(BoardCard, { + wrapper = shallowMountExtended(BoardCard, { + apolloProvider: mockApollo, stubs: { ...stubs, BoardCardInner, @@ -56,9 +66,9 @@ describe('Board card', () => { groupId: null, rootPath: '/', scopedLabelsAvailable: false, + isIssueBoard: true, isEpicBoard: false, issuableType: 'issue', - isProjectBoard: false, isGroupBoard: true, disabled: false, isApolloBoard: false, @@ -218,4 +228,25 @@ describe('Board card', () => { expect(wrapper.attributes('style')).toBeUndefined(); }); }); + + describe('Apollo boards', () => { + beforeEach(async () => { + createStore(); + mountComponent({ provide: { isApolloBoard: true } }); + await nextTick(); + }); + + it('set active board item on client when clicking on card', async () => { + await selectCard(); + + expect(mockSetActiveBoardItemResolver).toHaveBeenCalledWith( + {}, + { + boardItem: mockIssue, + }, + expect.anything(), + expect.anything(), + ); + }); + }); }); diff --git a/spec/frontend/boards/components/board_content_sidebar_spec.js b/spec/frontend/boards/components/board_content_sidebar_spec.js index 90376a4a553..558a0a3b933 100644 --- a/spec/frontend/boards/components/board_content_sidebar_spec.js +++ b/spec/frontend/boards/components/board_content_sidebar_spec.js @@ -1,10 +1,15 @@ import { GlDrawer } from '@gitlab/ui'; -import { shallowMount } from '@vue/test-utils'; import { MountingPortal } from 'portal-vue'; -import Vue from 'vue'; +import Vue, { nextTick } from 'vue'; +import VueApollo from 'vue-apollo'; import Vuex from 'vuex'; import SidebarDropdownWidget from 'ee_else_ce/sidebar/components/sidebar_dropdown_widget.vue'; +import createMockApollo from 'helpers/mock_apollo_helper'; import { stubComponent } from 'helpers/stub_component'; +import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; +import waitForPromises from 'helpers/wait_for_promises'; + +import activeBoardItemQuery from 'ee_else_ce/boards/graphql/client/active_board_item.query.graphql'; import BoardContentSidebar from '~/boards/components/board_content_sidebar.vue'; import BoardSidebarTitle from '~/boards/components/sidebar/board_sidebar_title.vue'; import { ISSUABLE } from '~/boards/constants'; @@ -14,13 +19,21 @@ import SidebarSeverityWidget from '~/sidebar/components/severity/sidebar_severit import SidebarSubscriptionsWidget from '~/sidebar/components/subscriptions/sidebar_subscriptions_widget.vue'; import SidebarTodoWidget from '~/sidebar/components/todo_toggle/sidebar_todo_widget.vue'; import SidebarLabelsWidget from '~/sidebar/components/labels/labels_select_widget/labels_select_root.vue'; -import { mockActiveIssue, mockIssue, mockIssueGroupPath, mockIssueProjectPath } from '../mock_data'; +import { mockActiveIssue, mockIssue, rawIssue } from '../mock_data'; Vue.use(Vuex); +Vue.use(VueApollo); describe('BoardContentSidebar', () => { let wrapper; let store; + const mockSetActiveBoardItemResolver = jest.fn(); + const mockApollo = createMockApollo([], { + Mutation: { + setActiveBoardItem: mockSetActiveBoardItemResolver, + }, + }); + const createStore = ({ mockGetters = {}, mockActions = {} } = {}) => { store = new Vuex.Store({ state: { @@ -32,30 +45,29 @@ describe('BoardContentSidebar', () => { activeBoardItem: () => { return { ...mockActiveIssue, epic: null }; }, - groupPathForActiveIssue: () => mockIssueGroupPath, - projectPathForActiveIssue: () => mockIssueProjectPath, - isSidebarOpen: () => true, ...mockGetters, }, actions: mockActions, }); }; - const createComponent = () => { - /* - Dynamically imported components (in our case ee imports) - aren't stubbed automatically in VTU v1: - https://github.com/vuejs/vue-test-utils/issues/1279. + const createComponent = ({ isApolloBoard = false } = {}) => { + mockApollo.clients.defaultClient.cache.writeQuery({ + query: activeBoardItemQuery, + data: { + activeBoardItem: rawIssue, + }, + }); - This requires us to additionally mock apollo or vuex stores. - */ - wrapper = shallowMount(BoardContentSidebar, { + wrapper = shallowMountExtended(BoardContentSidebar, { + apolloProvider: mockApollo, provide: { canUpdate: true, rootPath: '/', groupId: 1, issuableType: TYPE_ISSUE, isGroupBoard: false, + isApolloBoard, }, store, stubs: { @@ -63,24 +75,6 @@ describe('BoardContentSidebar', () => { template: '<div><slot name="header"></slot><slot></slot></div>', }), }, - mocks: { - $apollo: { - queries: { - participants: { - loading: false, - }, - currentIteration: { - loading: false, - }, - iterations: { - loading: false, - }, - attributesList: { - loading: false, - }, - }, - }, - }, }); }; @@ -101,10 +95,12 @@ describe('BoardContentSidebar', () => { }); }); - it('does not render GlDrawer when isSidebarOpen is false', () => { - createStore({ mockGetters: { isSidebarOpen: () => false } }); + it('does not render GlDrawer when no active item is set', async () => { + createStore({ mockGetters: { activeBoardItem: () => ({ id: '', iid: '' }) } }); createComponent(); + await nextTick(); + expect(wrapper.findComponent(GlDrawer).props('open')).toBe(false); }); @@ -189,4 +185,27 @@ describe('BoardContentSidebar', () => { expect(wrapper.findComponent(SidebarSeverityWidget).exists()).toBe(true); }); }); + + describe('Apollo boards', () => { + beforeEach(async () => { + createStore(); + createComponent({ isApolloBoard: true }); + await nextTick(); + }); + + it('calls setActiveBoardItemMutation on close', async () => { + wrapper.findComponent(GlDrawer).vm.$emit('close'); + + await waitForPromises(); + + expect(mockSetActiveBoardItemResolver).toHaveBeenCalledWith( + {}, + { + boardItem: null, + }, + expect.anything(), + expect.anything(), + ); + }); + }); }); diff --git a/spec/frontend/boards/components/board_content_spec.js b/spec/frontend/boards/components/board_content_spec.js index 33351bf8efd..ab51f477966 100644 --- a/spec/frontend/boards/components/board_content_spec.js +++ b/spec/frontend/boards/components/board_content_spec.js @@ -6,6 +6,7 @@ import Draggable from 'vuedraggable'; import Vuex from 'vuex'; import eventHub from '~/boards/eventhub'; +import { stubComponent } from 'helpers/stub_component'; import waitForPromises from 'helpers/wait_for_promises'; import createMockApollo from 'helpers/mock_apollo_helper'; import EpicsSwimlanes from 'ee_component/boards/components/epics_swimlanes.vue'; @@ -78,6 +79,11 @@ describe('BoardContent', () => { isApolloBoard, }, store, + stubs: { + BoardContentSidebar: stubComponent(BoardContentSidebar, { + template: '<div></div>', + }), + }, }); }; diff --git a/spec/frontend/boards/components/sidebar/board_sidebar_title_spec.js b/spec/frontend/boards/components/sidebar/board_sidebar_title_spec.js index a20884baf3b..296f25d96c4 100644 --- a/spec/frontend/boards/components/sidebar/board_sidebar_title_spec.js +++ b/spec/frontend/boards/components/sidebar/board_sidebar_title_spec.js @@ -1,6 +1,7 @@ import { GlAlert, GlFormInput, GlForm, GlLink } from '@gitlab/ui'; import { shallowMount } from '@vue/test-utils'; import { nextTick } from 'vue'; +import waitForPromises from 'helpers/wait_for_promises'; import BoardEditableItem from '~/boards/components/sidebar/board_editable_item.vue'; import BoardSidebarTitle from '~/boards/components/sidebar/board_sidebar_title.vue'; import { createStore } from '~/boards/stores'; @@ -21,7 +22,7 @@ const TEST_ISSUE_B = { webUrl: 'webUrl', }; -describe('~/boards/components/sidebar/board_sidebar_title.vue', () => { +describe('BoardSidebarTitle', () => { let wrapper; let store; @@ -39,6 +40,10 @@ describe('~/boards/components/sidebar/board_sidebar_title.vue', () => { store, provide: { canUpdate: true, + isApolloBoard: false, + }, + propsData: { + activeItem: item, }, stubs: { 'board-editable-item': BoardEditableItem, @@ -86,7 +91,8 @@ describe('~/boards/components/sidebar/board_sidebar_title.vue', () => { await nextTick(); }); - it('collapses sidebar and renders new title', () => { + it('collapses sidebar and renders new title', async () => { + await waitForPromises(); expect(findCollapsed().isVisible()).toBe(true); expect(findTitle().text()).toContain(TEST_TITLE); }); diff --git a/spec/frontend/boards/mock_data.js b/spec/frontend/boards/mock_data.js index d5c6871d9c4..cc0945da9f4 100644 --- a/spec/frontend/boards/mock_data.js +++ b/spec/frontend/boards/mock_data.js @@ -277,6 +277,9 @@ export const labels = [ }, ]; +export const mockIssueFullPath = 'gitlab-org/test-subgroup/gitlab-test'; +export const mockEpicFullPath = 'gitlab-org/test-subgroup'; + export const rawIssue = { title: 'Issue 1', id: 'gid://gitlab/Issue/436', @@ -302,12 +305,24 @@ export const rawIssue = { epic: { id: 'gid://gitlab/Epic/41', }, + totalTimeSpent: 0, + humanTimeEstimate: null, + humanTotalTimeSpent: null, + emailsDisabled: false, + hidden: false, + webUrl: `${mockIssueFullPath}/-/issue/27`, + relativePosition: null, + severity: null, + milestone: null, + weight: null, + blocked: false, + blockedByCount: 0, + iteration: null, + healthStatus: null, type: 'ISSUE', + __typename: 'Issue', }; -export const mockIssueFullPath = 'gitlab-org/test-subgroup/gitlab-test'; -export const mockEpicFullPath = 'gitlab-org/test-subgroup'; - export const mockIssue = { id: 'gid://gitlab/Issue/436', iid: '27', @@ -329,7 +344,22 @@ export const mockIssue = { epic: { id: 'gid://gitlab/Epic/41', }, + totalTimeSpent: 0, + humanTimeEstimate: null, + humanTotalTimeSpent: null, + emailsDisabled: false, + hidden: false, + webUrl: `${mockIssueFullPath}/-/issue/27`, + relativePosition: null, + severity: null, + milestone: null, + weight: null, + blocked: false, + blockedByCount: 0, + iteration: null, + healthStatus: null, type: 'ISSUE', + __typename: 'Issue', }; export const mockEpic = { diff --git a/spec/frontend/artifacts/components/app_spec.js b/spec/frontend/ci/artifacts/components/app_spec.js index 931c4703e95..435b03e82ab 100644 --- a/spec/frontend/artifacts/components/app_spec.js +++ b/spec/frontend/ci/artifacts/components/app_spec.js @@ -2,13 +2,13 @@ import { GlSkeletonLoader } from '@gitlab/ui'; import VueApollo from 'vue-apollo'; import Vue from 'vue'; import { numberToHumanSize } from '~/lib/utils/number_utils'; -import ArtifactsApp from '~/artifacts/components/app.vue'; -import JobArtifactsTable from '~/artifacts/components/job_artifacts_table.vue'; -import getBuildArtifactsSizeQuery from '~/artifacts/graphql/queries/get_build_artifacts_size.query.graphql'; +import ArtifactsApp from '~/ci/artifacts/components/app.vue'; +import JobArtifactsTable from '~/ci/artifacts/components/job_artifacts_table.vue'; +import getBuildArtifactsSizeQuery from '~/ci/artifacts/graphql/queries/get_build_artifacts_size.query.graphql'; import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; import createMockApollo from 'helpers/mock_apollo_helper'; import waitForPromises from 'helpers/wait_for_promises'; -import { PAGE_TITLE, TOTAL_ARTIFACTS_SIZE, SIZE_UNKNOWN } from '~/artifacts/constants'; +import { PAGE_TITLE, TOTAL_ARTIFACTS_SIZE, SIZE_UNKNOWN } from '~/ci/artifacts/constants'; const TEST_BUILD_ARTIFACTS_SIZE = 1024; const TEST_PROJECT_PATH = 'project/path'; diff --git a/spec/frontend/artifacts/components/artifact_row_spec.js b/spec/frontend/ci/artifacts/components/artifact_row_spec.js index 268772ed4c0..86875cd8566 100644 --- a/spec/frontend/artifacts/components/artifact_row_spec.js +++ b/spec/frontend/ci/artifacts/components/artifact_row_spec.js @@ -1,10 +1,10 @@ import { GlBadge, GlButton, GlFriendlyWrap, GlFormCheckbox } from '@gitlab/ui'; -import mockGetJobArtifactsResponse from 'test_fixtures/graphql/artifacts/graphql/queries/get_job_artifacts.query.graphql.json'; +import mockGetJobArtifactsResponse from 'test_fixtures/graphql/ci/artifacts/graphql/queries/get_job_artifacts.query.graphql.json'; import { numberToHumanSize } from '~/lib/utils/number_utils'; import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; import waitForPromises from 'helpers/wait_for_promises'; -import ArtifactRow from '~/artifacts/components/artifact_row.vue'; -import { BULK_DELETE_FEATURE_FLAG } from '~/artifacts/constants'; +import ArtifactRow from '~/ci/artifacts/components/artifact_row.vue'; +import { BULK_DELETE_FEATURE_FLAG } from '~/ci/artifacts/constants'; describe('ArtifactRow component', () => { let wrapper; diff --git a/spec/frontend/artifacts/components/artifacts_bulk_delete_spec.js b/spec/frontend/ci/artifacts/components/artifacts_bulk_delete_spec.js index 876906b2c3c..dd077dcac9f 100644 --- a/spec/frontend/artifacts/components/artifacts_bulk_delete_spec.js +++ b/spec/frontend/ci/artifacts/components/artifacts_bulk_delete_spec.js @@ -1,12 +1,12 @@ import { GlSprintf, GlModal } from '@gitlab/ui'; import Vue from 'vue'; import VueApollo from 'vue-apollo'; -import mockGetJobArtifactsResponse from 'test_fixtures/graphql/artifacts/graphql/queries/get_job_artifacts.query.graphql.json'; +import mockGetJobArtifactsResponse from 'test_fixtures/graphql/ci/artifacts/graphql/queries/get_job_artifacts.query.graphql.json'; import createMockApollo from 'helpers/mock_apollo_helper'; import { mountExtended } from 'helpers/vue_test_utils_helper'; import waitForPromises from 'helpers/wait_for_promises'; -import ArtifactsBulkDelete from '~/artifacts/components/artifacts_bulk_delete.vue'; -import bulkDestroyArtifactsMutation from '~/artifacts/graphql/mutations/bulk_destroy_job_artifacts.mutation.graphql'; +import ArtifactsBulkDelete from '~/ci/artifacts/components/artifacts_bulk_delete.vue'; +import bulkDestroyArtifactsMutation from '~/ci/artifacts/graphql/mutations/bulk_destroy_job_artifacts.mutation.graphql'; Vue.use(VueApollo); diff --git a/spec/frontend/artifacts/components/artifacts_table_row_details_spec.js b/spec/frontend/ci/artifacts/components/artifacts_table_row_details_spec.js index 6bf3498f9b0..ebdb7e25c45 100644 --- a/spec/frontend/artifacts/components/artifacts_table_row_details_spec.js +++ b/spec/frontend/ci/artifacts/components/artifacts_table_row_details_spec.js @@ -1,15 +1,15 @@ import { GlModal } from '@gitlab/ui'; import Vue from 'vue'; import VueApollo from 'vue-apollo'; -import getJobArtifactsResponse from 'test_fixtures/graphql/artifacts/graphql/queries/get_job_artifacts.query.graphql.json'; +import getJobArtifactsResponse from 'test_fixtures/graphql/ci/artifacts/graphql/queries/get_job_artifacts.query.graphql.json'; import waitForPromises from 'helpers/wait_for_promises'; -import ArtifactsTableRowDetails from '~/artifacts/components/artifacts_table_row_details.vue'; -import ArtifactRow from '~/artifacts/components/artifact_row.vue'; -import ArtifactDeleteModal from '~/artifacts/components/artifact_delete_modal.vue'; +import ArtifactsTableRowDetails from '~/ci/artifacts/components/artifacts_table_row_details.vue'; +import ArtifactRow from '~/ci/artifacts/components/artifact_row.vue'; +import ArtifactDeleteModal from '~/ci/artifacts/components/artifact_delete_modal.vue'; import createMockApollo from 'helpers/mock_apollo_helper'; import { mountExtended } from 'helpers/vue_test_utils_helper'; -import destroyArtifactMutation from '~/artifacts/graphql/mutations/destroy_artifact.mutation.graphql'; -import { I18N_DESTROY_ERROR, I18N_MODAL_TITLE } from '~/artifacts/constants'; +import destroyArtifactMutation from '~/ci/artifacts/graphql/mutations/destroy_artifact.mutation.graphql'; +import { I18N_DESTROY_ERROR, I18N_MODAL_TITLE } from '~/ci/artifacts/constants'; import { createAlert } from '~/alert'; jest.mock('~/alert'); diff --git a/spec/frontend/artifacts/components/feedback_banner_spec.js b/spec/frontend/ci/artifacts/components/feedback_banner_spec.js index af9599daefa..53e0fdac6f6 100644 --- a/spec/frontend/artifacts/components/feedback_banner_spec.js +++ b/spec/frontend/ci/artifacts/components/feedback_banner_spec.js @@ -1,12 +1,12 @@ import { GlBanner } from '@gitlab/ui'; import { shallowMount } from '@vue/test-utils'; -import FeedbackBanner from '~/artifacts/components/feedback_banner.vue'; +import FeedbackBanner from '~/ci/artifacts/components/feedback_banner.vue'; import { makeMockUserCalloutDismisser } from 'helpers/mock_user_callout_dismisser'; import { I18N_FEEDBACK_BANNER_TITLE, I18N_FEEDBACK_BANNER_BUTTON, FEEDBACK_URL, -} from '~/artifacts/constants'; +} from '~/ci/artifacts/constants'; const mockBannerImagePath = 'banner/image/path'; diff --git a/spec/frontend/artifacts/components/job_artifacts_table_spec.js b/spec/frontend/ci/artifacts/components/job_artifacts_table_spec.js index 40f3c9633ab..2855b0ecb37 100644 --- a/spec/frontend/artifacts/components/job_artifacts_table_spec.js +++ b/spec/frontend/ci/artifacts/components/job_artifacts_table_spec.js @@ -9,17 +9,17 @@ import { } from '@gitlab/ui'; import Vue from 'vue'; import VueApollo from 'vue-apollo'; -import getJobArtifactsResponse from 'test_fixtures/graphql/artifacts/graphql/queries/get_job_artifacts.query.graphql.json'; +import getJobArtifactsResponse from 'test_fixtures/graphql/ci/artifacts/graphql/queries/get_job_artifacts.query.graphql.json'; import CiIcon from '~/vue_shared/components/ci_icon.vue'; import waitForPromises from 'helpers/wait_for_promises'; -import JobArtifactsTable from '~/artifacts/components/job_artifacts_table.vue'; -import FeedbackBanner from '~/artifacts/components/feedback_banner.vue'; -import ArtifactsTableRowDetails from '~/artifacts/components/artifacts_table_row_details.vue'; -import ArtifactDeleteModal from '~/artifacts/components/artifact_delete_modal.vue'; -import ArtifactsBulkDelete from '~/artifacts/components/artifacts_bulk_delete.vue'; +import JobArtifactsTable from '~/ci/artifacts/components/job_artifacts_table.vue'; +import FeedbackBanner from '~/ci/artifacts/components/feedback_banner.vue'; +import ArtifactsTableRowDetails from '~/ci/artifacts/components/artifacts_table_row_details.vue'; +import ArtifactDeleteModal from '~/ci/artifacts/components/artifact_delete_modal.vue'; +import ArtifactsBulkDelete from '~/ci/artifacts/components/artifacts_bulk_delete.vue'; import createMockApollo from 'helpers/mock_apollo_helper'; import { mountExtended } from 'helpers/vue_test_utils_helper'; -import getJobArtifactsQuery from '~/artifacts/graphql/queries/get_job_artifacts.query.graphql'; +import getJobArtifactsQuery from '~/ci/artifacts/graphql/queries/get_job_artifacts.query.graphql'; import { getIdFromGraphQLId } from '~/graphql_shared/utils'; import { ARCHIVE_FILE_TYPE, @@ -27,8 +27,8 @@ import { I18N_FETCH_ERROR, INITIAL_CURRENT_PAGE, BULK_DELETE_FEATURE_FLAG, -} from '~/artifacts/constants'; -import { totalArtifactsSizeForJob } from '~/artifacts/utils'; +} from '~/ci/artifacts/constants'; +import { totalArtifactsSizeForJob } from '~/ci/artifacts/utils'; import { createAlert } from '~/alert'; jest.mock('~/alert'); diff --git a/spec/frontend/artifacts/components/job_checkbox_spec.js b/spec/frontend/ci/artifacts/components/job_checkbox_spec.js index 95cc548b8c8..ae70bb4b17b 100644 --- a/spec/frontend/artifacts/components/job_checkbox_spec.js +++ b/spec/frontend/ci/artifacts/components/job_checkbox_spec.js @@ -1,7 +1,7 @@ import { GlFormCheckbox } from '@gitlab/ui'; -import mockGetJobArtifactsResponse from 'test_fixtures/graphql/artifacts/graphql/queries/get_job_artifacts.query.graphql.json'; +import mockGetJobArtifactsResponse from 'test_fixtures/graphql/ci/artifacts/graphql/queries/get_job_artifacts.query.graphql.json'; import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; -import JobCheckbox from '~/artifacts/components/job_checkbox.vue'; +import JobCheckbox from '~/ci/artifacts/components/job_checkbox.vue'; describe('JobCheckbox component', () => { let wrapper; diff --git a/spec/frontend/artifacts/graphql/cache_update_spec.js b/spec/frontend/ci/artifacts/graphql/cache_update_spec.js index 4d610328298..3c415534c7c 100644 --- a/spec/frontend/artifacts/graphql/cache_update_spec.js +++ b/spec/frontend/ci/artifacts/graphql/cache_update_spec.js @@ -1,5 +1,5 @@ -import getJobArtifactsQuery from '~/artifacts/graphql/queries/get_job_artifacts.query.graphql'; -import { removeArtifactFromStore } from '~/artifacts/graphql/cache_update'; +import getJobArtifactsQuery from '~/ci/artifacts/graphql/queries/get_job_artifacts.query.graphql'; +import { removeArtifactFromStore } from '~/ci/artifacts/graphql/cache_update'; describe('Artifact table cache updates', () => { let store; diff --git a/spec/frontend/fixtures/job_artifacts.rb b/spec/frontend/fixtures/job_artifacts.rb index e53cdbbaaa5..6dadd6750f1 100644 --- a/spec/frontend/fixtures/job_artifacts.rb +++ b/spec/frontend/fixtures/job_artifacts.rb @@ -12,7 +12,7 @@ RSpec.describe 'Job Artifacts (GraphQL fixtures)' do let_it_be(:pipeline) { create(:ci_pipeline, project: project) } let_it_be(:user) { create(:user) } - job_artifacts_query_path = 'artifacts/graphql/queries/get_job_artifacts.query.graphql' + job_artifacts_query_path = 'ci/artifacts/graphql/queries/get_job_artifacts.query.graphql' it "graphql/#{job_artifacts_query_path}.json" do create(:ci_build, :failed, :artifacts, :trace_artifact, pipeline: pipeline) diff --git a/spec/frontend/ide/components/commit_sidebar/form_spec.js b/spec/frontend/ide/components/commit_sidebar/form_spec.js index 0c0998c037a..ba30073dff2 100644 --- a/spec/frontend/ide/components/commit_sidebar/form_spec.js +++ b/spec/frontend/ide/components/commit_sidebar/form_spec.js @@ -21,6 +21,7 @@ import { COMMIT_TO_NEW_BRANCH } from '~/ide/stores/modules/commit/constants'; describe('IDE commit form', () => { let wrapper; let store; + const showModalSpy = jest.fn(); const createComponent = () => { wrapper = shallowMount(CommitForm, { @@ -29,7 +30,11 @@ describe('IDE commit form', () => { GlTooltip: createMockDirective('gl-tooltip'), }, stubs: { - GlModal: stubComponent(GlModal), + GlModal: stubComponent(GlModal, { + methods: { + show: showModalSpy, + }, + }), }, }); }; @@ -57,6 +62,7 @@ describe('IDE commit form', () => { tooltip: getBinding(findCommitButtonTooltip().element, 'gl-tooltip').value.title, }); const findForm = () => wrapper.find('form'); + const findModal = () => wrapper.findComponent(GlModal); const submitForm = () => findForm().trigger('submit'); const findCommitMessageInput = () => wrapper.findComponent(CommitMessageField); const setCommitMessageInput = (val) => findCommitMessageInput().vm.$emit('input', val); @@ -298,22 +304,19 @@ describe('IDE commit form', () => { ${() => createCodeownersCommitError('test message')} | ${{ actionPrimary: { text: 'Create new branch' } }} ${createUnexpectedCommitError} | ${{ actionPrimary: null }} `('opens error modal if commitError with $error', async ({ createError, props }) => { - const modal = wrapper.findComponent(GlModal); - modal.vm.show = jest.fn(); - const error = createError(); store.state.commit.commitError = error; await nextTick(); - expect(modal.vm.show).toHaveBeenCalled(); - expect(modal.props()).toMatchObject({ + expect(showModalSpy).toHaveBeenCalled(); + expect(findModal().props()).toMatchObject({ actionCancel: { text: 'Cancel' }, ...props, }); // Because of the legacy 'mountComponent' approach here, the only way to // test the text of the modal is by viewing the content of the modal added to the document. - expect(modal.html()).toContain(error.messageHTML); + expect(findModal().html()).toContain(error.messageHTML); }); }); @@ -339,7 +342,7 @@ describe('IDE commit form', () => { await nextTick(); - wrapper.findComponent(GlModal).vm.$emit('ok'); + findModal().vm.$emit('ok'); await waitForPromises(); diff --git a/spec/frontend/invite_members/components/invite_group_notification_spec.js b/spec/frontend/invite_members/components/invite_group_notification_spec.js index 3e6ba6da9f4..1da2e7b705d 100644 --- a/spec/frontend/invite_members/components/invite_group_notification_spec.js +++ b/spec/frontend/invite_members/components/invite_group_notification_spec.js @@ -2,7 +2,7 @@ import { GlAlert, GlLink, GlSprintf } from '@gitlab/ui'; import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; import { sprintf } from '~/locale'; import InviteGroupNotification from '~/invite_members/components/invite_group_notification.vue'; -import { GROUP_MODAL_ALERT_BODY } from '~/invite_members/constants'; +import { GROUP_MODAL_TO_GROUP_ALERT_BODY } from '~/invite_members/constants'; describe('InviteGroupNotification', () => { let wrapper; @@ -13,7 +13,11 @@ describe('InviteGroupNotification', () => { const createComponent = () => { wrapper = shallowMountExtended(InviteGroupNotification, { provide: { freeUsersLimit: 5 }, - propsData: { name: 'name' }, + propsData: { + name: 'name', + notificationLink: '_notification_link_', + notificationText: GROUP_MODAL_TO_GROUP_ALERT_BODY, + }, stubs: { GlSprintf }, }); }; @@ -28,15 +32,13 @@ describe('InviteGroupNotification', () => { }); it('shows the correct message', () => { - const message = sprintf(GROUP_MODAL_ALERT_BODY, { count: 5 }); + const message = sprintf(GROUP_MODAL_TO_GROUP_ALERT_BODY, { count: 5 }); expect(findAlert().text()).toMatchInterpolatedText(message); }); it('has a help link', () => { - expect(findLink().attributes('href')).toEqual( - 'https://docs.gitlab.com/ee/user/group/manage.html#share-a-group-with-another-group', - ); + expect(findLink().attributes('href')).toEqual('_notification_link_'); }); }); }); diff --git a/spec/frontend/invite_members/components/invite_groups_modal_spec.js b/spec/frontend/invite_members/components/invite_groups_modal_spec.js index 82b4717fbf1..4f082145562 100644 --- a/spec/frontend/invite_members/components/invite_groups_modal_spec.js +++ b/spec/frontend/invite_members/components/invite_groups_modal_spec.js @@ -12,6 +12,12 @@ import { displaySuccessfulInvitationAlert, reloadOnInvitationSuccess, } from '~/invite_members/utils/trigger_successful_invite_alert'; +import { + GROUP_MODAL_TO_GROUP_ALERT_BODY, + GROUP_MODAL_TO_GROUP_ALERT_LINK, + GROUP_MODAL_TO_PROJECT_ALERT_BODY, + GROUP_MODAL_TO_PROJECT_ALERT_LINK, +} from '~/invite_members/constants'; import { propsData, sharedGroup } from '../mock_data/group_modal'; jest.mock('~/invite_members/utils/trigger_successful_invite_alert'); @@ -91,6 +97,26 @@ describe('InviteGroupsModal', () => { expect(findInviteGroupAlert().exists()).toBe(false); }); + + it('shows the user limit notification alert with correct link and text for group', () => { + createComponent({ freeUserCapEnabled: true }); + + expect(findInviteGroupAlert().props()).toMatchObject({ + name: propsData.name, + notificationText: GROUP_MODAL_TO_GROUP_ALERT_BODY, + notificationLink: GROUP_MODAL_TO_GROUP_ALERT_LINK, + }); + }); + + it('shows the user limit notification alert with correct link and text for project', () => { + createComponent({ freeUserCapEnabled: true, isProject: true }); + + expect(findInviteGroupAlert().props()).toMatchObject({ + name: propsData.name, + notificationText: GROUP_MODAL_TO_PROJECT_ALERT_BODY, + notificationLink: GROUP_MODAL_TO_PROJECT_ALERT_LINK, + }); + }); }); describe('submitting the invite form', () => { diff --git a/spec/frontend/issues/show/components/header_actions_spec.js b/spec/frontend/issues/show/components/header_actions_spec.js index 58ec7387851..bd8e79a90ec 100644 --- a/spec/frontend/issues/show/components/header_actions_spec.js +++ b/spec/frontend/issues/show/components/header_actions_spec.js @@ -2,6 +2,8 @@ import Vue, { nextTick } from 'vue'; import { GlDropdownItem, GlLink, GlModal, GlButton } from '@gitlab/ui'; import { shallowMount } from '@vue/test-utils'; import Vuex from 'vuex'; +import VueApollo from 'vue-apollo'; +import waitForPromises from 'helpers/wait_for_promises'; import { mockTracking } from 'helpers/tracking_helper'; import { createAlert, VARIANT_SUCCESS } from '~/alert'; import { STATUS_CLOSED, STATUS_OPEN, TYPE_INCIDENT, TYPE_ISSUE } from '~/issues/constants'; @@ -14,17 +16,22 @@ import promoteToEpicMutation from '~/issues/show/queries/promote_to_epic.mutatio import * as urlUtility from '~/lib/utils/url_utility'; import eventHub from '~/notes/event_hub'; import createStore from '~/notes/stores'; +import createMockApollo from 'helpers/mock_apollo_helper'; +import issueReferenceQuery from '~/sidebar/queries/issue_reference.query.graphql'; +import updateIssueMutation from '~/issues/show/queries/update_issue.mutation.graphql'; +import toast from '~/vue_shared/plugins/global_toast'; jest.mock('~/alert'); jest.mock('~/issues/show/event_hub', () => ({ $emit: jest.fn() })); +jest.mock('~/vue_shared/plugins/global_toast'); describe('HeaderActions component', () => { let dispatchEventSpy; - let mutateMock; let wrapper; let visitUrlSpy; Vue.use(Vuex); + Vue.use(VueApollo); const store = createStore(); @@ -45,15 +52,28 @@ describe('HeaderActions component', () => { reportedUserId: 1, reportedFromUrl: 'http://localhost:/gitlab-org/-/issues/32', submitAsSpamPath: 'gitlab-org/gitlab-test/-/issues/32/submit_as_spam', + issuableEmailAddress: null, + fullPath: 'full-path', }; - const updateIssueMutationResponse = { data: { updateIssue: { errors: [] } } }; + const updateIssueMutationResponse = { + data: { + updateIssue: { + errors: [], + issuable: { + id: 'gid://gitlab/Issue/511', + state: STATUS_OPEN, + }, + }, + }, + }; const promoteToEpicMutationResponse = { data: { promoteToEpic: { errors: [], epic: { + id: 'gid://gitlab/Epic/1', webPath: '/groups/gitlab-org/-/epics/1', }, }, @@ -69,6 +89,20 @@ describe('HeaderActions component', () => { }, }; + const mockIssueReferenceData = { + data: { + workspace: { + id: 'gid://gitlab/Project/7', + issuable: { + id: 'gid://gitlab/Issue/511', + reference: 'flightjs/Flight#33', + __typename: 'Issue', + }, + __typename: 'Project', + }, + }, + }; + const findToggleIssueStateButton = () => wrapper.find(`[data-testid="toggle-button"]`); const findEditButton = () => wrapper.find(`[data-testid="edit-button"]`); @@ -77,33 +111,54 @@ describe('HeaderActions component', () => { const findDesktopDropdown = () => findDropdownBy('desktop-dropdown'); const findMobileDropdownItems = () => findMobileDropdown().findAllComponents(GlDropdownItem); const findDesktopDropdownItems = () => findDesktopDropdown().findAllComponents(GlDropdownItem); + const findAbuseCategorySelector = () => wrapper.findComponent(AbuseCategorySelector); + const findReportAbuseSelectorItem = () => wrapper.find(`[data-testid="report-abuse-item"]`); + const findNotificationWidget = () => wrapper.find(`[data-testid="notification-toggle"]`); + const findLockIssueWidget = () => wrapper.find(`[data-testid="lock-issue-toggle"]`); + const findCopyRefenceDropdownItem = () => wrapper.find(`[data-testid="copy-reference"]`); + const findCopyEmailItem = () => wrapper.find(`[data-testid="copy-email"]`); const findModal = () => wrapper.findComponent(GlModal); const findModalLinkAt = (index) => findModal().findAllComponents(GlLink).at(index); + const issueReferenceSuccessHandler = jest.fn().mockResolvedValue(mockIssueReferenceData); + const updateIssueMutationResponseHandler = jest + .fn() + .mockResolvedValue(updateIssueMutationResponse); + const promoteToEpicMutationSuccessResponseHandler = jest + .fn() + .mockResolvedValue(promoteToEpicMutationResponse); + const promoteToEpicMutationErrorHandler = jest + .fn() + .mockResolvedValue(promoteToEpicMutationErrorResponse); + const mountComponent = ({ props = {}, issueState = STATUS_OPEN, blockedByIssues = [], - mutateResponse = {}, + movedMrSidebarEnabled = false, + promoteToEpicHandler = promoteToEpicMutationSuccessResponseHandler, } = {}) => { - mutateMock = jest.fn().mockResolvedValue(mutateResponse); - store.dispatch('setNoteableData', { blocked_by_issues: blockedByIssues, state: issueState, }); + const handlers = [ + [issueReferenceQuery, issueReferenceSuccessHandler], + [updateIssueMutation, updateIssueMutationResponseHandler], + [promoteToEpicMutation, promoteToEpicHandler], + ]; + return shallowMount(HeaderActions, { + apolloProvider: createMockApollo(handlers), store, provide: { ...defaultProps, ...props, - }, - mocks: { - $apollo: { - mutate: mutateMock, + glFeatures: { + movedMrSidebar: movedMrSidebarEnabled, }, }, stubs: { @@ -138,7 +193,6 @@ describe('HeaderActions component', () => { wrapper = mountComponent({ props: { issueType }, issueState, - mutateResponse: updateIssueMutationResponse, }); }); @@ -149,23 +203,19 @@ describe('HeaderActions component', () => { it('calls apollo mutation', () => { findToggleIssueStateButton().vm.$emit('click'); - expect(mutateMock).toHaveBeenCalledWith( - expect.objectContaining({ - variables: { - input: { - iid: defaultProps.iid, - projectPath: defaultProps.projectPath, - stateEvent: newIssueState, - }, - }, - }), - ); + expect(updateIssueMutationResponseHandler).toHaveBeenCalledWith({ + input: { + iid: defaultProps.iid, + projectPath: defaultProps.projectPath, + stateEvent: newIssueState, + }, + }); }); it('dispatches a custom event to update the issue page', async () => { findToggleIssueStateButton().vm.$emit('click'); - await nextTick(); + await waitForPromises(); expect(dispatchEventSpy).toHaveBeenCalledTimes(1); }); @@ -290,28 +340,25 @@ describe('HeaderActions component', () => { describe('when "Promote to epic" button is clicked', () => { describe('when response is successful', () => { - beforeEach(() => { + beforeEach(async () => { visitUrlSpy = jest.spyOn(urlUtility, 'visitUrl').mockReturnValue({}); wrapper = mountComponent({ - mutateResponse: promoteToEpicMutationResponse, + promoteToEpicHandler: promoteToEpicMutationSuccessResponseHandler, }); wrapper.find('[data-testid="promote-button"]').vm.$emit('click'); + + await waitForPromises(); }); it('invokes GraphQL mutation when clicked', () => { - expect(mutateMock).toHaveBeenCalledWith( - expect.objectContaining({ - mutation: promoteToEpicMutation, - variables: { - input: { - iid: defaultProps.iid, - projectPath: defaultProps.projectPath, - }, - }, - }), - ); + expect(promoteToEpicMutationSuccessResponseHandler).toHaveBeenCalledWith({ + input: { + iid: defaultProps.iid, + projectPath: defaultProps.projectPath, + }, + }); }); it('shows a success message and tells the user they are being redirected', () => { @@ -329,14 +376,16 @@ describe('HeaderActions component', () => { }); describe('when response contains errors', () => { - beforeEach(() => { + beforeEach(async () => { visitUrlSpy = jest.spyOn(urlUtility, 'visitUrl').mockReturnValue({}); wrapper = mountComponent({ - mutateResponse: promoteToEpicMutationErrorResponse, + promoteToEpicHandler: promoteToEpicMutationErrorHandler, }); wrapper.find('[data-testid="promote-button"]').vm.$emit('click'); + + await waitForPromises(); }); it('shows an error message', () => { @@ -349,21 +398,17 @@ describe('HeaderActions component', () => { describe('when `toggle.issuable.state` event is emitted', () => { it('invokes a method to toggle the issue state', () => { - wrapper = mountComponent({ mutateResponse: updateIssueMutationResponse }); + wrapper = mountComponent(); eventHub.$emit('toggle.issuable.state'); - expect(mutateMock).toHaveBeenCalledWith( - expect.objectContaining({ - variables: { - input: { - iid: defaultProps.iid, - projectPath: defaultProps.projectPath, - stateEvent: ISSUE_STATE_EVENT_CLOSE, - }, - }, - }), - ); + expect(updateIssueMutationResponseHandler).toHaveBeenCalledWith({ + input: { + iid: defaultProps.iid, + projectPath: defaultProps.projectPath, + stateEvent: ISSUE_STATE_EVENT_CLOSE, + }, + }); }); }); @@ -392,17 +437,13 @@ describe('HeaderActions component', () => { it('calls apollo mutation when primary button is clicked', () => { findModal().vm.$emit('primary'); - expect(mutateMock).toHaveBeenCalledWith( - expect.objectContaining({ - variables: { - input: { - iid: defaultProps.iid.toString(), - projectPath: defaultProps.projectPath, - stateEvent: ISSUE_STATE_EVENT_CLOSE, - }, - }, - }), - ); + expect(updateIssueMutationResponseHandler).toHaveBeenCalledWith({ + input: { + iid: defaultProps.iid.toString(), + projectPath: defaultProps.projectPath, + stateEvent: ISSUE_STATE_EVENT_CLOSE, + }, + }); }); describe.each` @@ -434,8 +475,6 @@ describe('HeaderActions component', () => { }); describe('abuse category selector', () => { - const findAbuseCategorySelector = () => wrapper.findComponent(AbuseCategorySelector); - beforeEach(() => { wrapper = mountComponent({ props: { isIssueAuthor: false } }); }); @@ -445,7 +484,7 @@ describe('HeaderActions component', () => { }); it('opens the drawer', async () => { - findDesktopDropdownItems().at(2).vm.$emit('click'); + findReportAbuseSelectorItem().vm.$emit('click'); await nextTick(); @@ -453,10 +492,160 @@ describe('HeaderActions component', () => { }); it('closes the drawer', async () => { - await findDesktopDropdownItems().at(2).vm.$emit('click'); + await findReportAbuseSelectorItem().vm.$emit('click'); await findAbuseCategorySelector().vm.$emit('close-drawer'); expect(findAbuseCategorySelector().exists()).toEqual(false); }); }); + + describe('notification toggle', () => { + describe('visibility', () => { + describe.each` + movedMrSidebarEnabled | issueType | visible + ${true} | ${TYPE_ISSUE} | ${true} + ${true} | ${TYPE_INCIDENT} | ${true} + ${false} | ${TYPE_ISSUE} | ${false} + ${false} | ${TYPE_INCIDENT} | ${false} + `( + `when movedMrSidebarEnabled flag is "$movedMrSidebarEnabled" with issue type "$issueType"`, + ({ movedMrSidebarEnabled, issueType, visible }) => { + beforeEach(() => { + wrapper = mountComponent({ + props: { + issueType, + }, + movedMrSidebarEnabled, + }); + }); + + it(`${visible ? 'shows' : 'hides'} Notification toggle`, () => { + expect(findNotificationWidget().exists()).toBe(visible); + }); + }, + ); + }); + }); + + describe('lock issue option', () => { + describe('visibility', () => { + describe.each` + movedMrSidebarEnabled | issueType | visible + ${true} | ${TYPE_ISSUE} | ${true} + ${true} | ${TYPE_INCIDENT} | ${false} + ${false} | ${TYPE_ISSUE} | ${false} + ${false} | ${TYPE_INCIDENT} | ${false} + `( + `when movedMrSidebarEnabled flag is "$movedMrSidebarEnabled" with issue type "$issueType"`, + ({ movedMrSidebarEnabled, issueType, visible }) => { + beforeEach(() => { + wrapper = mountComponent({ + props: { + issueType, + }, + movedMrSidebarEnabled, + }); + }); + + it(`${visible ? 'shows' : 'hides'} Lock issue option`, () => { + expect(findLockIssueWidget().exists()).toBe(visible); + }); + }, + ); + }); + }); + + describe('copy reference option', () => { + describe('visibility', () => { + describe.each` + movedMrSidebarEnabled | issueType | visible + ${true} | ${TYPE_ISSUE} | ${true} + ${true} | ${TYPE_INCIDENT} | ${true} + ${false} | ${TYPE_ISSUE} | ${false} + ${false} | ${TYPE_INCIDENT} | ${false} + `( + 'when movedMrSidebarFlagEnabled is "$movedMrSidebarEnabled" with issue type "$issueType"', + ({ movedMrSidebarEnabled, issueType, visible }) => { + beforeEach(() => { + wrapper = mountComponent({ + props: { + issueType, + }, + movedMrSidebarEnabled, + }); + }); + + it(`${visible ? 'shows' : 'hides'} Copy reference option`, () => { + expect(findCopyRefenceDropdownItem().exists()).toBe(visible); + }); + }, + ); + }); + + describe('clicking when visible', () => { + beforeEach(() => { + wrapper = mountComponent({ + props: { + issueType: TYPE_ISSUE, + }, + movedMrSidebarEnabled: true, + }); + }); + + it('shows toast message', () => { + findCopyRefenceDropdownItem().vm.$emit('click'); + + expect(toast).toHaveBeenCalledWith('Reference copied'); + }); + }); + }); + + describe('copy email option', () => { + describe('visibility', () => { + describe.each` + movedMrSidebarEnabled | issueType | issuableEmailAddress | visible + ${true} | ${TYPE_ISSUE} | ${'mock-email-address'} | ${true} + ${true} | ${TYPE_ISSUE} | ${''} | ${false} + ${true} | ${TYPE_INCIDENT} | ${'mock-email-address'} | ${true} + ${true} | ${TYPE_INCIDENT} | ${''} | ${false} + ${false} | ${TYPE_ISSUE} | ${'mock-email-address'} | ${false} + ${false} | ${TYPE_INCIDENT} | ${'mock-email-address'} | ${false} + `( + 'when movedMrSidebarEnabled flag is "$movedMrSidebarEnabled" issue type is "$issueType" and issuableEmailAddress="$issuableEmailAddress"', + ({ movedMrSidebarEnabled, issueType, issuableEmailAddress, visible }) => { + beforeEach(() => { + wrapper = mountComponent({ + props: { + issueType, + issuableEmailAddress, + }, + movedMrSidebarEnabled, + }); + }); + + it(`${visible ? 'shows' : 'hides'} Copy email option`, () => { + expect(findCopyEmailItem().exists()).toBe(visible); + }); + }, + ); + }); + + describe('clicking when visible', () => { + beforeEach(() => { + wrapper = mountComponent({ + props: { + issueType: TYPE_ISSUE, + issuableEmailAddress: 'mock-email-address', + }, + movedMrSidebarEnabled: true, + }); + }); + + it('shows toast message', () => { + findCopyEmailItem().vm.$emit('click'); + + expect(toast).toHaveBeenCalledWith('Email address copied'); + }); + }); + }); }); diff --git a/spec/frontend/issues/show/components/new_header_actions_popover_spec.js b/spec/frontend/issues/show/components/new_header_actions_popover_spec.js new file mode 100644 index 00000000000..71b7a3da1c3 --- /dev/null +++ b/spec/frontend/issues/show/components/new_header_actions_popover_spec.js @@ -0,0 +1,67 @@ +import { GlPopover } from '@gitlab/ui'; +import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; +import NewHeaderActionsPopover from '~/issues/show/components/new_header_actions_popover.vue'; +import { NEW_ACTIONS_POPOVER_KEY } from '~/issues/show/constants'; +import { TYPE_ISSUE } from '~/issues/constants'; +import * as utils from '~/lib/utils/common_utils'; + +describe('NewHeaderActionsPopover', () => { + let wrapper; + + const createComponent = ({ issueType = TYPE_ISSUE }) => { + wrapper = shallowMountExtended(NewHeaderActionsPopover, { + propsData: { + issueType, + }, + stubs: { + GlPopover, + }, + }); + }; + + const findPopover = () => wrapper.findComponent(GlPopover); + const findConfirmButton = () => wrapper.findByTestId('confirm-button'); + + describe('without the popover cookie', () => { + beforeEach(() => { + utils.setCookie = jest.fn(); + + createComponent({}); + }); + + it('renders the popover with correct text', () => { + expect(findPopover().exists()).toBe(true); + expect(findPopover().text()).toContain('issue actions'); + }); + + it('does not call setCookie', () => { + expect(utils.setCookie).not.toHaveBeenCalled(); + }); + + describe('when the confirm button is clicked', () => { + beforeEach(() => { + findConfirmButton().vm.$emit('click'); + }); + + it('sets the popover cookie', () => { + expect(utils.setCookie).toHaveBeenCalledWith(NEW_ACTIONS_POPOVER_KEY, true); + }); + + it('hides the popover', () => { + expect(findPopover().exists()).toBe(false); + }); + }); + }); + + describe('with the popover cookie', () => { + beforeEach(() => { + jest.spyOn(utils, 'getCookie').mockReturnValue('true'); + + createComponent({}); + }); + + it('does not render the popover', () => { + expect(findPopover().exists()).toBe(false); + }); + }); +}); diff --git a/spec/frontend/notes/components/note_form_spec.js b/spec/frontend/notes/components/note_form_spec.js index 00f75b14e6b..e385c478dd6 100644 --- a/spec/frontend/notes/components/note_form_spec.js +++ b/spec/frontend/notes/components/note_form_spec.js @@ -1,4 +1,4 @@ -import { GlLink } from '@gitlab/ui'; +import { GlLink, GlFormCheckbox } from '@gitlab/ui'; import { nextTick } from 'vue'; import batchComments from '~/batch_comments/stores/modules/batch_comments'; import NoteForm from '~/notes/components/note_form.vue'; @@ -234,7 +234,7 @@ describe('issue_note_form component', () => { }); it('shows resolve checkbox', () => { - expect(wrapper.find('.js-resolve-checkbox').exists()).toBe(true); + expect(wrapper.findComponent(GlFormCheckbox).exists()).toBe(true); }); it('hides resolve checkbox', async () => { @@ -253,7 +253,7 @@ describe('issue_note_form component', () => { }, }); - expect(wrapper.find('.js-resolve-checkbox').exists()).toBe(false); + expect(wrapper.findComponent(GlFormCheckbox).exists()).toBe(false); }); it('hides actions for commits', async () => { diff --git a/spec/frontend/packages_and_registries/shared/components/__snapshots__/registry_breadcrumb_spec.js.snap b/spec/frontend/packages_and_registries/shared/components/__snapshots__/registry_breadcrumb_spec.js.snap index 213a732d59b..e9ee6ebdb5c 100644 --- a/spec/frontend/packages_and_registries/shared/components/__snapshots__/registry_breadcrumb_spec.js.snap +++ b/spec/frontend/packages_and_registries/shared/components/__snapshots__/registry_breadcrumb_spec.js.snap @@ -5,7 +5,6 @@ exports[`Registry Breadcrumb when is not rootRoute renders 1`] = ` aria-label="Breadcrumb" class="gl-breadcrumbs" > - <ol class="breadcrumb gl-breadcrumb-list" > @@ -16,7 +15,10 @@ exports[`Registry Breadcrumb when is not rootRoute renders 1`] = ` class="" target="_self" > - + <!----> + <span> + + </span> </a> </li> @@ -30,7 +32,10 @@ exports[`Registry Breadcrumb when is not rootRoute renders 1`] = ` href="#" target="_self" > - + <!----> + <span> + + </span> </a> </li> @@ -44,7 +49,6 @@ exports[`Registry Breadcrumb when is rootRoute renders 1`] = ` aria-label="Breadcrumb" class="gl-breadcrumbs" > - <ol class="breadcrumb gl-breadcrumb-list" > @@ -56,7 +60,10 @@ exports[`Registry Breadcrumb when is rootRoute renders 1`] = ` class="" target="_self" > - + <!----> + <span> + + </span> </a> </li> diff --git a/spec/frontend/sidebar/components/lock/issuable_lock_form_spec.js b/spec/frontend/sidebar/components/lock/issuable_lock_form_spec.js index d26ef7298ce..5e766e9a41c 100644 --- a/spec/frontend/sidebar/components/lock/issuable_lock_form_spec.js +++ b/spec/frontend/sidebar/components/lock/issuable_lock_form_spec.js @@ -29,6 +29,7 @@ describe('IssuableLockForm', () => { const findEditForm = () => wrapper.findComponent(EditForm); const findSidebarLockStatusTooltip = () => getBinding(findSidebarCollapseIcon().element, 'gl-tooltip'); + const findIssuableLockClickable = () => wrapper.find('[data-testid="issuable-lock"]'); const initStore = (isLocked) => { if (issuableType === ISSUABLE_TYPE_ISSUE) { @@ -48,7 +49,7 @@ describe('IssuableLockForm', () => { store.getters.getNoteableData.discussion_locked = isLocked; }; - const createComponent = ({ props = {} }, movedMrSidebar = false) => { + const createComponent = ({ props = {}, movedMrSidebar = false }) => { wrapper = shallowMount(IssuableLockForm, { store, provide: { @@ -169,11 +170,27 @@ describe('IssuableLockForm', () => { `('displays $message when merge request is $locked', async ({ locked, message }) => { initStore(locked); - createComponent({}, true); + createComponent({ movedMrSidebar: true }); await wrapper.find('.dropdown-item').trigger('click'); expect(toast).toHaveBeenCalledWith(message); }); }); + + describe('moved_mr_sidebar flag', () => { + describe('when the flag is off', () => { + it('does not show the non editable lock status', () => { + createComponent({ movedMrSidebar: false }); + expect(findIssuableLockClickable().exists()).toBe(false); + }); + }); + + describe('when the flag is on', () => { + it('does not show the non editable lock status', () => { + createComponent({ movedMrSidebar: true }); + expect(findIssuableLockClickable().exists()).toBe(true); + }); + }); + }); }); diff --git a/spec/frontend/sidebar/components/reviewers/uncollapsed_reviewer_list_spec.js b/spec/frontend/sidebar/components/reviewers/uncollapsed_reviewer_list_spec.js index 128ef69e5f1..037b56d9904 100644 --- a/spec/frontend/sidebar/components/reviewers/uncollapsed_reviewer_list_spec.js +++ b/spec/frontend/sidebar/components/reviewers/uncollapsed_reviewer_list_spec.js @@ -1,4 +1,3 @@ -import { nextTick } from 'vue'; import { shallowMount } from '@vue/test-utils'; import { TEST_HOST } from 'helpers/test_constants'; import ReviewerAvatarLink from '~/sidebar/components/reviewers/reviewer_avatar_link.vue'; @@ -23,8 +22,9 @@ describe('UncollapsedReviewerList component', () => { let wrapper; const findAllRerequestButtons = () => wrapper.findAll('[data-testid="re-request-button"]'); - const findAllRerequestSuccessIcons = () => wrapper.findAll('[data-testid="re-request-success"]'); - const findAllReviewerApprovalIcons = () => wrapper.findAll('[data-testid="re-approved"]'); + const findAllReviewerApprovalIcons = () => wrapper.findAll('[data-testid="approved"]'); + const findAllReviewedNotApprovedIcons = () => + wrapper.findAll('[data-testid="reviewed-not-approved"]'); const findAllReviewerAvatarLinks = () => wrapper.findAllComponents(ReviewerAvatarLink); function createComponent(props = {}, glFeatures = {}) { @@ -42,13 +42,6 @@ describe('UncollapsedReviewerList component', () => { }); } - const callRerequestCallback = async () => { - const payload = wrapper.emitted('request-review')[0][0]; - // Call payload which is normally called by a parent component - payload.callback(payload.userId, true); - await nextTick(); - }; - describe('single reviewer', () => { const user = userDataMock(); @@ -71,13 +64,6 @@ describe('UncollapsedReviewerList component', () => { expect(findAllRerequestButtons().at(0).props('loading')).toBe(true); }); - - it('renders re-request success icon', async () => { - await findAllRerequestButtons().at(0).vm.$emit('click'); - await callRerequestCallback(); - - expect(findAllRerequestSuccessIcons().at(0).exists()).toBe(true); - }); }); describe('multiple reviewers', () => { @@ -92,20 +78,32 @@ describe('UncollapsedReviewerList component', () => { approved: true, }, }; + const user3 = { + ...user, + id: 3, + name: 'lizabeth-wilderman', + username: 'lizabeth-wilderman', + mergeRequestInteraction: { + ...user.mergeRequestInteraction, + approved: false, + reviewed: true, + }, + }; beforeEach(() => { createComponent({ - users: [user, user2], + users: [user, user2, user3], }); }); - it('has both users', () => { - expect(findAllReviewerAvatarLinks()).toHaveLength(2); + it('has three users', () => { + expect(findAllReviewerAvatarLinks()).toHaveLength(3); }); - it('shows both users with avatar, and author name', () => { + it('shows all users with avatar, and author name', () => { expect(wrapper.text()).toContain(user.name); expect(wrapper.text()).toContain(user2.name); + expect(wrapper.text()).toContain(user3.name); }); it('renders approval icon', () => { @@ -118,21 +116,19 @@ describe('UncollapsedReviewerList component', () => { expect(icon.attributes('title')).toBe('Approved by @hello-world'); }); + it('shows that lizabeth-wilderman reviewed but did not approve', () => { + const icon = findAllReviewedNotApprovedIcons().at(1); + + expect(icon.attributes('title')).toBe('Reviewed by @lizabeth-wilderman but not yet approved'); + }); + it('renders re-request loading icon', async () => { await findAllRerequestButtons().at(1).vm.$emit('click'); const allRerequestButtons = findAllRerequestButtons(); - expect(allRerequestButtons).toHaveLength(2); + expect(allRerequestButtons).toHaveLength(3); expect(allRerequestButtons.at(1).props('loading')).toBe(true); }); - - it('renders re-request success icon', async () => { - await findAllRerequestButtons().at(1).vm.$emit('click'); - await callRerequestCallback(); - - expect(findAllRerequestButtons()).toHaveLength(1); - expect(findAllRerequestSuccessIcons()).toHaveLength(1); - }); }); }); |