diff options
Diffstat (limited to 'spec/frontend/projects')
22 files changed, 243 insertions, 69 deletions
diff --git a/spec/frontend/projects/commit/components/form_modal_spec.js b/spec/frontend/projects/commit/components/form_modal_spec.js index 79e9dab935d..20c312ec771 100644 --- a/spec/frontend/projects/commit/components/form_modal_spec.js +++ b/spec/frontend/projects/commit/components/form_modal_spec.js @@ -99,7 +99,9 @@ describe('CommitFormModal', () => { createComponent(shallowMount, {}, { prependedText: '_prepended_text_' }); expect(findPrependedText().exists()).toBe(true); - expect(findPrependedText().find(GlSprintf).attributes('message')).toBe('_prepended_text_'); + expect(findPrependedText().findComponent(GlSprintf).attributes('message')).toBe( + '_prepended_text_', + ); }); it('Does not show prepended text', () => { @@ -124,7 +126,7 @@ describe('CommitFormModal', () => { createComponent(shallowMount, { pushCode: false }); expect(findAppendedText().exists()).toBe(true); - expect(findAppendedText().find(GlSprintf).attributes('message')).toContain( + expect(findAppendedText().findComponent(GlSprintf).attributes('message')).toContain( mockData.modalPropsData.i18n.branchInFork, ); }); @@ -133,7 +135,7 @@ describe('CommitFormModal', () => { createComponent(shallowMount, { pushCode: false, branchCollaboration: true }); expect(findAppendedText().exists()).toBe(true); - expect(findAppendedText().find(GlSprintf).attributes('message')).toContain( + expect(findAppendedText().findComponent(GlSprintf).attributes('message')).toContain( mockData.modalPropsData.i18n.existingBranch, ); }); diff --git a/spec/frontend/projects/commit/store/mutations_spec.js b/spec/frontend/projects/commit/store/mutations_spec.js index 60abf0fddad..40174b3057a 100644 --- a/spec/frontend/projects/commit/store/mutations_spec.js +++ b/spec/frontend/projects/commit/store/mutations_spec.js @@ -26,7 +26,7 @@ describe('Commit form modal mutations', () => { }); describe('CLEAR_MODAL', () => { - it('should clear modal state ', () => { + it('should clear modal state', () => { stateCopy = { branch: '_main_', defaultBranch: '_default_branch_' }; mutations[types.CLEAR_MODAL](stateCopy); diff --git a/spec/frontend/projects/commits/components/author_select_spec.js b/spec/frontend/projects/commits/components/author_select_spec.js index 57e5ef0ed1d..907e0e226b6 100644 --- a/spec/frontend/projects/commits/components/author_select_spec.js +++ b/spec/frontend/projects/commits/components/author_select_spec.js @@ -58,11 +58,11 @@ describe('Author Select', () => { resetHTMLFixture(); }); - const findDropdownContainer = () => wrapper.find({ ref: 'dropdownContainer' }); - const findDropdown = () => wrapper.find(GlDropdown); - const findDropdownHeader = () => wrapper.find(GlDropdownSectionHeader); - const findSearchBox = () => wrapper.find(GlSearchBoxByType); - const findDropdownItems = () => wrapper.findAll(GlDropdownItem); + const findDropdownContainer = () => wrapper.findComponent({ ref: 'dropdownContainer' }); + const findDropdown = () => wrapper.findComponent(GlDropdown); + const findDropdownHeader = () => wrapper.findComponent(GlDropdownSectionHeader); + const findSearchBox = () => wrapper.findComponent(GlSearchBoxByType); + const findDropdownItems = () => wrapper.findAllComponents(GlDropdownItem); describe('user is searching via "filter by commit message"', () => { it('disables dropdown container', async () => { diff --git a/spec/frontend/projects/compare/components/app_spec.js b/spec/frontend/projects/compare/components/app_spec.js index c9ffdf20c32..2dbecf7cc61 100644 --- a/spec/frontend/projects/compare/components/app_spec.js +++ b/spec/frontend/projects/compare/components/app_spec.js @@ -58,7 +58,7 @@ describe('CompareApp component', () => { }); it('render Source and Target BranchDropdown components', () => { - const revisionCards = wrapper.findAll(RevisionCard); + const revisionCards = wrapper.findAllComponents(RevisionCard); expect(revisionCards.length).toBe(2); expect(revisionCards.at(0).props('revisionText')).toBe('Source'); @@ -66,7 +66,7 @@ describe('CompareApp component', () => { }); describe('compare button', () => { - const findCompareButton = () => wrapper.find(GlButton); + const findCompareButton = () => wrapper.findComponent(GlButton); it('renders button', () => { expect(findCompareButton().exists()).toBe(true); diff --git a/spec/frontend/projects/compare/components/repo_dropdown_spec.js b/spec/frontend/projects/compare/components/repo_dropdown_spec.js index 98aec347e4b..21cca857c6a 100644 --- a/spec/frontend/projects/compare/components/repo_dropdown_spec.js +++ b/spec/frontend/projects/compare/components/repo_dropdown_spec.js @@ -21,7 +21,7 @@ describe('RepoDropdown component', () => { wrapper = null; }); - const findGlDropdown = () => wrapper.find(GlDropdown); + const findGlDropdown = () => wrapper.findComponent(GlDropdown); const findHiddenInput = () => wrapper.find('input[type="hidden"]'); describe('Source Revision', () => { @@ -73,7 +73,7 @@ describe('RepoDropdown component', () => { }); it('emits `selectProject` event when another target project is selected', async () => { - findGlDropdown().findAll(GlDropdownItem).at(0).vm.$emit('click'); + findGlDropdown().findAllComponents(GlDropdownItem).at(0).vm.$emit('click'); await nextTick(); expect(wrapper.emitted('selectProject')[0][0]).toEqual({ diff --git a/spec/frontend/projects/compare/components/revision_card_spec.js b/spec/frontend/projects/compare/components/revision_card_spec.js index a741393fcf3..b23bd91ceda 100644 --- a/spec/frontend/projects/compare/components/revision_card_spec.js +++ b/spec/frontend/projects/compare/components/revision_card_spec.js @@ -32,10 +32,10 @@ describe('RepoDropdown component', () => { }); it('renders RepoDropdown component', () => { - expect(wrapper.findAll(RepoDropdown).exists()).toBe(true); + expect(wrapper.findAllComponents(RepoDropdown).exists()).toBe(true); }); it('renders RevisionDropdown component', () => { - expect(wrapper.findAll(RevisionDropdown).exists()).toBe(true); + expect(wrapper.findAllComponents(RevisionDropdown).exists()).toBe(true); }); }); diff --git a/spec/frontend/projects/compare/components/revision_dropdown_legacy_spec.js b/spec/frontend/projects/compare/components/revision_dropdown_legacy_spec.js index 102f95f65da..f64af1aa994 100644 --- a/spec/frontend/projects/compare/components/revision_dropdown_legacy_spec.js +++ b/spec/frontend/projects/compare/components/revision_dropdown_legacy_spec.js @@ -38,7 +38,7 @@ describe('RevisionDropdown component', () => { axiosMock.restore(); }); - const findGlDropdown = () => wrapper.find(GlDropdown); + const findGlDropdown = () => wrapper.findComponent(GlDropdown); it('sets hidden input', () => { expect(wrapper.find('input[type="hidden"]').attributes('value')).toBe( @@ -99,7 +99,7 @@ describe('RevisionDropdown component', () => { }); it('emits a "selectRevision" event when a revision is selected', async () => { - const findGlDropdownItems = () => wrapper.findAll(GlDropdownItem); + const findGlDropdownItems = () => wrapper.findAllComponents(GlDropdownItem); const findFirstGlDropdownItem = () => findGlDropdownItems().at(0); // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details diff --git a/spec/frontend/projects/compare/components/revision_dropdown_spec.js b/spec/frontend/projects/compare/components/revision_dropdown_spec.js index c8a90848492..35e32fd3da0 100644 --- a/spec/frontend/projects/compare/components/revision_dropdown_spec.js +++ b/spec/frontend/projects/compare/components/revision_dropdown_spec.js @@ -35,8 +35,8 @@ describe('RevisionDropdown component', () => { axiosMock.restore(); }); - const findGlDropdown = () => wrapper.find(GlDropdown); - const findSearchBox = () => wrapper.find(GlSearchBoxByType); + const findGlDropdown = () => wrapper.findComponent(GlDropdown); + const findSearchBox = () => wrapper.findComponent(GlSearchBoxByType); it('sets hidden input', () => { createComponent(); @@ -144,7 +144,7 @@ describe('RevisionDropdown component', () => { wrapper.vm.branches = ['some-branch']; await nextTick(); - findGlDropdown().findAll(GlDropdownItem).at(0).vm.$emit('click'); + findGlDropdown().findAllComponents(GlDropdownItem).at(0).vm.$emit('click'); expect(wrapper.emitted('selectRevision')[0][0]).toEqual({ direction: 'to', diff --git a/spec/frontend/projects/components/project_delete_button_spec.js b/spec/frontend/projects/components/project_delete_button_spec.js index a3bc4931eb3..49e3218e5bc 100644 --- a/spec/frontend/projects/components/project_delete_button_spec.js +++ b/spec/frontend/projects/components/project_delete_button_spec.js @@ -8,7 +8,7 @@ jest.mock('lodash/uniqueId', () => () => 'fakeUniqueId'); describe('Project remove modal', () => { let wrapper; - const findSharedDeleteButton = () => wrapper.find(SharedDeleteButton); + const findSharedDeleteButton = () => wrapper.findComponent(SharedDeleteButton); const defaultProps = { confirmPhrase: 'foo', diff --git a/spec/frontend/projects/components/shared/delete_button_spec.js b/spec/frontend/projects/components/shared/delete_button_spec.js index 45c39ee91d8..097b18025a3 100644 --- a/spec/frontend/projects/components/shared/delete_button_spec.js +++ b/spec/frontend/projects/components/shared/delete_button_spec.js @@ -11,7 +11,7 @@ describe('Project remove modal', () => { const findFormElement = () => wrapper.find('form'); const findConfirmButton = () => wrapper.find('.js-modal-action-primary'); const findAuthenticityTokenInput = () => findFormElement().find('input[name=authenticity_token]'); - const findModal = () => wrapper.find(GlModal); + const findModal = () => wrapper.findComponent(GlModal); const findTitle = () => wrapper.find('[data-testid="delete-alert-title"]'); const findAlertBody = () => wrapper.find('[data-testid="delete-alert-body"]'); diff --git a/spec/frontend/projects/details/upload_button_spec.js b/spec/frontend/projects/details/upload_button_spec.js index d7308963088..50638755260 100644 --- a/spec/frontend/projects/details/upload_button_spec.js +++ b/spec/frontend/projects/details/upload_button_spec.js @@ -32,11 +32,11 @@ describe('UploadButton', () => { }); it('displays an upload button', () => { - expect(wrapper.find(GlButton).exists()).toBe(true); + expect(wrapper.findComponent(GlButton).exists()).toBe(true); }); it('contains a modal', () => { - const modal = wrapper.find(UploadBlobModal); + const modal = wrapper.findComponent(UploadBlobModal); expect(modal.exists()).toBe(true); expect(modal.props('modalId')).toBe(MODAL_ID); @@ -44,7 +44,7 @@ describe('UploadButton', () => { describe('when clickinig the upload file button', () => { beforeEach(() => { - wrapper.find(GlButton).vm.$emit('click'); + wrapper.findComponent(GlButton).vm.$emit('click'); }); it('opens the modal', () => { diff --git a/spec/frontend/projects/pipelines/charts/components/app_spec.js b/spec/frontend/projects/pipelines/charts/components/app_spec.js index 7b9011fa3d9..e3aaf760d1e 100644 --- a/spec/frontend/projects/pipelines/charts/components/app_spec.js +++ b/spec/frontend/projects/pipelines/charts/components/app_spec.js @@ -47,15 +47,16 @@ describe('ProjectsPipelinesChartsApp', () => { wrapper.destroy(); }); - const findGlTabs = () => wrapper.find(GlTabs); - const findAllGlTabs = () => wrapper.findAll(GlTab); + const findGlTabs = () => wrapper.findComponent(GlTabs); + const findAllGlTabs = () => wrapper.findAllComponents(GlTab); const findGlTabAtIndex = (index) => findAllGlTabs().at(index); - const findLeadTimeCharts = () => wrapper.find(LeadTimeChartsStub); - const findTimeToRestoreServiceCharts = () => wrapper.find(TimeToRestoreServiceChartsStub); - const findChangeFailureRateCharts = () => wrapper.find(ChangeFailureRateChartsStub); - const findDeploymentFrequencyCharts = () => wrapper.find(DeploymentFrequencyChartsStub); - const findPipelineCharts = () => wrapper.find(PipelineCharts); - const findProjectQualitySummary = () => wrapper.find(ProjectQualitySummaryStub); + const findLeadTimeCharts = () => wrapper.findComponent(LeadTimeChartsStub); + const findTimeToRestoreServiceCharts = () => + wrapper.findComponent(TimeToRestoreServiceChartsStub); + const findChangeFailureRateCharts = () => wrapper.findComponent(ChangeFailureRateChartsStub); + const findDeploymentFrequencyCharts = () => wrapper.findComponent(DeploymentFrequencyChartsStub); + const findPipelineCharts = () => wrapper.findComponent(PipelineCharts); + const findProjectQualitySummary = () => wrapper.findComponent(ProjectQualitySummaryStub); describe('when all charts are available', () => { beforeEach(() => { diff --git a/spec/frontend/projects/pipelines/charts/components/ci_cd_analytics_charts_spec.js b/spec/frontend/projects/pipelines/charts/components/ci_cd_analytics_charts_spec.js index 7bb289408b8..8c18d2992ea 100644 --- a/spec/frontend/projects/pipelines/charts/components/ci_cd_analytics_charts_spec.js +++ b/spec/frontend/projects/pipelines/charts/components/ci_cd_analytics_charts_spec.js @@ -81,7 +81,7 @@ describe('~/vue_shared/components/ci_cd_analytics/ci_cd_analytics_charts.vue', ( it('should select a different chart on change', async () => { findSegmentedControl().vm.$emit('input', 1); - const chart = wrapper.find(CiCdAnalyticsAreaChart); + const chart = wrapper.findComponent(CiCdAnalyticsAreaChart); await nextTick(); @@ -92,7 +92,7 @@ describe('~/vue_shared/components/ci_cd_analytics/ci_cd_analytics_charts.vue', ( it('should not display charts if there are no charts', () => { wrapper = createWrapper({ charts: [] }); - expect(wrapper.find(CiCdAnalyticsAreaChart).exists()).toBe(false); + expect(wrapper.findComponent(CiCdAnalyticsAreaChart).exists()).toBe(false); }); describe('slots', () => { diff --git a/spec/frontend/projects/pipelines/charts/components/pipeline_charts_spec.js b/spec/frontend/projects/pipelines/charts/components/pipeline_charts_spec.js index 3c91b913e67..8fb59f38ee1 100644 --- a/spec/frontend/projects/pipelines/charts/components/pipeline_charts_spec.js +++ b/spec/frontend/projects/pipelines/charts/components/pipeline_charts_spec.js @@ -44,7 +44,7 @@ describe('~/projects/pipelines/charts/components/pipeline_charts.vue', () => { describe('overall statistics', () => { it('displays the statistics list', () => { - const list = wrapper.find(StatisticsList); + const list = wrapper.findComponent(StatisticsList); expect(list.exists()).toBe(true); expect(list.props('counts')).toEqual({ @@ -56,9 +56,9 @@ describe('~/projects/pipelines/charts/components/pipeline_charts.vue', () => { }); it('displays the commit duration chart', () => { - const chart = wrapper.find(GlColumnChart); + const chart = wrapper.findComponent(GlColumnChart); - expect(chart.exists()).toBeTruthy(); + expect(chart.exists()).toBe(true); expect(chart.props('yAxisTitle')).toBe('Minutes'); expect(chart.props('xAxisTitle')).toBe('Commit'); expect(chart.props('bars')).toBe(wrapper.vm.timesChartTransformedData); @@ -68,12 +68,12 @@ describe('~/projects/pipelines/charts/components/pipeline_charts.vue', () => { describe('pipelines charts', () => { it('displays the charts components', () => { - expect(wrapper.find(CiCdAnalyticsCharts).exists()).toBe(true); + expect(wrapper.findComponent(CiCdAnalyticsCharts).exists()).toBe(true); }); describe('displays individual correctly', () => { it('renders with the correct data', () => { - const charts = wrapper.find(CiCdAnalyticsCharts); + const charts = wrapper.findComponent(CiCdAnalyticsCharts); expect(charts.props()).toEqual({ charts: wrapper.vm.areaCharts, chartOptions: wrapper.vm.$options.areaChartOptions, diff --git a/spec/frontend/projects/settings/components/new_access_dropdown_spec.js b/spec/frontend/projects/settings/components/new_access_dropdown_spec.js index 1db48ce05d7..1b06f7874a3 100644 --- a/spec/frontend/projects/settings/components/new_access_dropdown_spec.js +++ b/spec/frontend/projects/settings/components/new_access_dropdown_spec.js @@ -134,7 +134,7 @@ describe('Access Level Dropdown', () => { await waitForPromises(); }); - it('renders headers for each section ', () => { + it('renders headers for each section', () => { expect(findAllDropdownHeaders()).toHaveLength(4); }); @@ -164,7 +164,7 @@ describe('Access Level Dropdown', () => { expect(findDropdown().props('toggleClass')).toBe('gl-text-gray-500!'); }); - it('when no items selected, displays a default fallback label and has default CSS class ', () => { + it('when no items selected, displays a default fallback label and has default CSS class', () => { expect(findDropdownToggleLabel()).toBe(i18n.selectUsers); expect(findDropdown().props('toggleClass')).toBe('gl-text-gray-500!'); }); @@ -217,7 +217,7 @@ describe('Access Level Dropdown', () => { }); describe('selecting an item', () => { - it('selects the item on click and deselects on the next click ', async () => { + it('selects the item on click and deselects on the next click', async () => { createComponent(); await waitForPromises(); @@ -230,7 +230,7 @@ describe('Access Level Dropdown', () => { expect(item.props('isChecked')).toBe(false); }); - it('emits a formatted update on selection ', async () => { + it('emits a formatted update on selection', async () => { // ids: the items appear in that order in the dropdown // 1 2 3 - roles // 4 5 6 - groups diff --git a/spec/frontend/projects/settings/components/shared_runners_toggle_spec.js b/spec/frontend/projects/settings/components/shared_runners_toggle_spec.js index 0a05832ceb6..329060b9d10 100644 --- a/spec/frontend/projects/settings/components/shared_runners_toggle_spec.js +++ b/spec/frontend/projects/settings/components/shared_runners_toggle_spec.js @@ -27,9 +27,9 @@ describe('projects/settings/components/shared_runners', () => { }); }; - const findErrorAlert = () => wrapper.find(GlAlert); - const findSharedRunnersToggle = () => wrapper.find(GlToggle); - const findToggleTooltip = () => wrapper.find(GlTooltip); + const findErrorAlert = () => wrapper.findComponent(GlAlert); + const findSharedRunnersToggle = () => wrapper.findComponent(GlToggle); + const findToggleTooltip = () => wrapper.findComponent(GlTooltip); const getToggleValue = () => findSharedRunnersToggle().props('value'); const isToggleLoading = () => findSharedRunnersToggle().props('isLoading'); const isToggleDisabled = () => findSharedRunnersToggle().props('disabled'); diff --git a/spec/frontend/projects/settings/repository/branch_rules/app_spec.js b/spec/frontend/projects/settings/repository/branch_rules/app_spec.js index e12c3aeedd6..e920cd48163 100644 --- a/spec/frontend/projects/settings/repository/branch_rules/app_spec.js +++ b/spec/frontend/projects/settings/repository/branch_rules/app_spec.js @@ -1,18 +1,55 @@ +import Vue from 'vue'; +import VueApollo from 'vue-apollo'; +import createMockApollo from 'helpers/mock_apollo_helper'; +import waitForPromises from 'helpers/wait_for_promises'; import { mountExtended } from 'helpers/vue_test_utils_helper'; -import BranchRules from '~/projects/settings/repository/branch_rules/app.vue'; +import BranchRules, { i18n } from '~/projects/settings/repository/branch_rules/app.vue'; +import BranchRule from '~/projects/settings/repository/branch_rules/components/branch_rule.vue'; +import branchRulesQuery from '~/projects/settings/repository/branch_rules/graphql/queries/branch_rules.query.graphql'; +import createFlash from '~/flash'; +import { branchRulesMockResponse, propsDataMock } from './mock_data'; + +jest.mock('~/flash'); + +Vue.use(VueApollo); describe('Branch rules app', () => { let wrapper; + let fakeApollo; + + const branchRulesQuerySuccessHandler = jest.fn().mockResolvedValue(branchRulesMockResponse); + + const createComponent = async ({ queryHandler = branchRulesQuerySuccessHandler } = {}) => { + fakeApollo = createMockApollo([[branchRulesQuery, queryHandler]]); + + wrapper = mountExtended(BranchRules, { + apolloProvider: fakeApollo, + propsData: { + ...propsDataMock, + }, + }); - const createComponent = () => { - wrapper = mountExtended(BranchRules); + await waitForPromises(); }; - const findTitle = () => wrapper.find('strong'); + const findAllBranchRules = () => wrapper.findAllComponents(BranchRule); + const findEmptyState = () => wrapper.findByTestId('empty'); beforeEach(() => createComponent()); - it('renders a title', () => { - expect(findTitle().text()).toBe('Branch'); + it('displays an error if branch rules query fails', async () => { + await createComponent({ queryHandler: jest.fn().mockRejectedValue() }); + expect(createFlash).toHaveBeenCalledWith({ message: i18n.queryError }); + }); + + it('displays an empty state if no branch rules are present', async () => { + await createComponent({ queryHandler: jest.fn().mockRejectedValue() }); + expect(findEmptyState().text()).toBe(i18n.emptyState); + }); + + it('renders branch rules', () => { + const { nodes } = branchRulesMockResponse.data.project.branchRules; + expect(findAllBranchRules().at(0).text()).toBe(nodes[0].name); + expect(findAllBranchRules().at(1).text()).toBe(nodes[1].name); }); }); diff --git a/spec/frontend/projects/settings/repository/branch_rules/components/branch_rule_spec.js b/spec/frontend/projects/settings/repository/branch_rules/components/branch_rule_spec.js new file mode 100644 index 00000000000..924dab60704 --- /dev/null +++ b/spec/frontend/projects/settings/repository/branch_rules/components/branch_rule_spec.js @@ -0,0 +1,58 @@ +import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; +import BranchRule, { + i18n, +} from '~/projects/settings/repository/branch_rules/components/branch_rule.vue'; + +const defaultProps = { + name: 'main', + isDefault: true, + isProtected: true, + approvalDetails: ['requires approval from TEST', '2 status checks'], +}; + +describe('Branch rule', () => { + let wrapper; + + const createComponent = (props = {}) => { + wrapper = shallowMountExtended(BranchRule, { propsData: { ...defaultProps, ...props } }); + }; + + const findDefaultBadge = () => wrapper.findByText(i18n.defaultLabel); + const findProtectedBadge = () => wrapper.findByText(i18n.protectedLabel); + const findBranchName = () => wrapper.findByText(defaultProps.name); + const findProtectionDetailsList = () => wrapper.findByRole('list'); + const findProtectionDetailsListItems = () => wrapper.findAllByRole('listitem'); + + beforeEach(() => createComponent()); + + it('renders the branch name', () => { + expect(findBranchName().exists()).toBe(true); + }); + + describe('badges', () => { + it('renders both default and protected badges', () => { + expect(findDefaultBadge().exists()).toBe(true); + expect(findProtectedBadge().exists()).toBe(true); + }); + + it('does not render default badge if isDefault is set to false', () => { + createComponent({ isDefault: false }); + expect(findDefaultBadge().exists()).toBe(false); + }); + + it('does not render protected badge if isProtected is set to false', () => { + createComponent({ isProtected: false }); + expect(findProtectedBadge().exists()).toBe(false); + }); + }); + + it('does not render the protection details list of no details are present', () => { + createComponent({ approvalDetails: null }); + expect(findProtectionDetailsList().exists()).toBe(false); + }); + + it('renders the protection details list items', () => { + expect(findProtectionDetailsListItems().at(0).text()).toBe(defaultProps.approvalDetails[0]); + expect(findProtectionDetailsListItems().at(1).text()).toBe(defaultProps.approvalDetails[1]); + }); +}); diff --git a/spec/frontend/projects/settings/repository/branch_rules/mock_data.js b/spec/frontend/projects/settings/repository/branch_rules/mock_data.js new file mode 100644 index 00000000000..14ed35f047d --- /dev/null +++ b/spec/frontend/projects/settings/repository/branch_rules/mock_data.js @@ -0,0 +1,25 @@ +export const branchRulesMockResponse = { + data: { + project: { + id: '123', + __typename: 'Project', + branchRules: { + __typename: 'BranchRuleConnection', + nodes: [ + { + name: 'main', + __typename: 'BranchRule', + }, + { + name: 'test-*', + __typename: 'BranchRule', + }, + ], + }, + }, + }, +}; + +export const propsDataMock = { + projectPath: 'some/project/path', +}; diff --git a/spec/frontend/projects/settings_service_desk/components/service_desk_root_spec.js b/spec/frontend/projects/settings_service_desk/components/service_desk_root_spec.js index 62224612387..13f3eea277a 100644 --- a/spec/frontend/projects/settings_service_desk/components/service_desk_root_spec.js +++ b/spec/frontend/projects/settings_service_desk/components/service_desk_root_spec.js @@ -1,4 +1,4 @@ -import { GlAlert } from '@gitlab/ui'; +import { GlAlert, GlLink, GlSprintf } from '@gitlab/ui'; import { shallowMount } from '@vue/test-utils'; import AxiosMockAdapter from 'axios-mock-adapter'; import waitForPromises from 'helpers/wait_for_promises'; @@ -23,11 +23,16 @@ describe('ServiceDeskRoot', () => { selectedTemplate: 'Bug', selectedFileTemplateProjectId: 42, templates: ['Bug', 'Documentation'], + publicProject: false, }; - const getAlertText = () => wrapper.find(GlAlert).text(); + const getAlertText = () => wrapper.findComponent(GlAlert).text(); - const createComponent = () => shallowMount(ServiceDeskRoot, { provide: provideData }); + const createComponent = (customInject = {}) => + shallowMount(ServiceDeskRoot, { + provide: { ...provideData, ...customInject }, + stubs: { GlSprintf }, + }); beforeEach(() => { axiosMock = new AxiosMockAdapter(axios); @@ -46,7 +51,7 @@ describe('ServiceDeskRoot', () => { it('is rendered', () => { wrapper = createComponent(); - expect(wrapper.find(ServiceDeskSetting).props()).toEqual({ + expect(wrapper.findComponent(ServiceDeskSetting).props()).toEqual({ customEmail: provideData.customEmail, customEmailEnabled: provideData.customEmailEnabled, incomingEmail: provideData.initialIncomingEmail, @@ -60,12 +65,31 @@ describe('ServiceDeskRoot', () => { }); }); + it('shows alert about email inference when current project is public', () => { + wrapper = createComponent({ + publicProject: true, + }); + + const alertEl = wrapper.find('[data-testid="public-project-alert"]'); + expect(alertEl.exists()).toBe(true); + expect(alertEl.text()).toContain( + 'This project is public. Non-members can guess the Service Desk email address, because it contains the group and project name.', + ); + + const alertBodyLink = alertEl.findComponent(GlLink); + expect(alertBodyLink.exists()).toBe(true); + expect(alertBodyLink.attributes('href')).toBe( + '/help/user/project/service_desk.html#using-a-custom-email-address', + ); + expect(alertBodyLink.text()).toBe('How do I create a custom email address?'); + }); + describe('toggle event', () => { describe('when toggling service desk on', () => { beforeEach(async () => { wrapper = createComponent(); - wrapper.find(ServiceDeskSetting).vm.$emit('toggle', true); + wrapper.findComponent(ServiceDeskSetting).vm.$emit('toggle', true); await waitForPromises(); }); @@ -87,7 +111,7 @@ describe('ServiceDeskRoot', () => { beforeEach(async () => { wrapper = createComponent(); - wrapper.find(ServiceDeskSetting).vm.$emit('toggle', false); + wrapper.findComponent(ServiceDeskSetting).vm.$emit('toggle', false); await waitForPromises(); }); @@ -119,7 +143,7 @@ describe('ServiceDeskRoot', () => { projectKey: 'key', }; - wrapper.find(ServiceDeskSetting).vm.$emit('save', payload); + wrapper.findComponent(ServiceDeskSetting).vm.$emit('save', payload); await waitForPromises(); }); @@ -150,7 +174,7 @@ describe('ServiceDeskRoot', () => { projectKey: 'key', }; - wrapper.find(ServiceDeskSetting).vm.$emit('save', payload); + wrapper.findComponent(ServiceDeskSetting).vm.$emit('save', payload); await waitForPromises(); }); diff --git a/spec/frontend/projects/settings_service_desk/components/service_desk_setting_spec.js b/spec/frontend/projects/settings_service_desk/components/service_desk_setting_spec.js index aac1a418142..7c3f4e76ae5 100644 --- a/spec/frontend/projects/settings_service_desk/components/service_desk_setting_spec.js +++ b/spec/frontend/projects/settings_service_desk/components/service_desk_setting_spec.js @@ -8,13 +8,14 @@ import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; describe('ServiceDeskSetting', () => { let wrapper; - const findButton = () => wrapper.find(GlButton); - const findClipboardButton = () => wrapper.find(ClipboardButton); + const findButton = () => wrapper.findComponent(GlButton); + const findClipboardButton = () => wrapper.findComponent(ClipboardButton); const findIncomingEmail = () => wrapper.findByTestId('incoming-email'); const findIncomingEmailLabel = () => wrapper.findByTestId('incoming-email-label'); - const findLoadingIcon = () => wrapper.find(GlLoadingIcon); - const findTemplateDropdown = () => wrapper.find(GlDropdown); - const findToggle = () => wrapper.find(GlToggle); + const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon); + const findTemplateDropdown = () => wrapper.findComponent(GlDropdown); + const findToggle = () => wrapper.findComponent(GlToggle); + const findSuffixFormGroup = () => wrapper.findByTestId('suffix-form-group'); const createComponent = ({ props = {} } = {}) => extendedWrapper( @@ -51,6 +52,32 @@ describe('ServiceDeskSetting', () => { expect(findLoadingIcon().exists()).toBe(true); expect(findIncomingEmail().exists()).toBe(false); }); + + it('should display help text', () => { + expect(findSuffixFormGroup().text()).toContain( + 'To add a custom suffix, set up a Service Desk email address', + ); + expect(findSuffixFormGroup().text()).not.toContain( + 'Add a suffix to Service Desk email address', + ); + }); + }); + }); + + describe('when customEmailEnabled', () => { + beforeEach(() => { + wrapper = createComponent({ + props: { customEmailEnabled: true }, + }); + }); + + it('should not display help text', () => { + expect(findSuffixFormGroup().text()).not.toContain( + 'To add a custom suffix, set up a Service Desk email address', + ); + expect(findSuffixFormGroup().text()).toContain( + 'Add a suffix to Service Desk email address', + ); }); }); diff --git a/spec/frontend/projects/settings_service_desk/components/service_desk_template_dropdown_spec.js b/spec/frontend/projects/settings_service_desk/components/service_desk_template_dropdown_spec.js index cdb355f5a9b..6adcfbe8157 100644 --- a/spec/frontend/projects/settings_service_desk/components/service_desk_template_dropdown_spec.js +++ b/spec/frontend/projects/settings_service_desk/components/service_desk_template_dropdown_spec.js @@ -7,7 +7,7 @@ import { TEMPLATES } from './mock_data'; describe('ServiceDeskTemplateDropdown', () => { let wrapper; - const findTemplateDropdown = () => wrapper.find(GlDropdown); + const findTemplateDropdown = () => wrapper.findComponent(GlDropdown); const createComponent = ({ props = {} } = {}) => extendedWrapper( @@ -53,7 +53,7 @@ describe('ServiceDeskTemplateDropdown', () => { props: { templates: TEMPLATES }, }); - const headerItems = wrapper.findAll(GlDropdownSectionHeader); + const headerItems = wrapper.findAllComponents(GlDropdownSectionHeader); expect(headerItems).toHaveLength(1); expect(headerItems.at(0).text()).toBe(TEMPLATES[0]); @@ -68,7 +68,7 @@ describe('ServiceDeskTemplateDropdown', () => { const expectedTemplates = templates[1]; - const items = wrapper.findAll(GlDropdownItem); + const items = wrapper.findAllComponents(GlDropdownItem); const dropdownList = expectedTemplates.map((_, index) => items.at(index).text()); expect(items).toHaveLength(expectedTemplates.length); |