diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-08-16 06:11:31 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-08-16 06:11:31 +0300 |
commit | 473d6b24349755c8ade489fdb93d5a5463ccc13f (patch) | |
tree | 3e3df2559bf96012ee540eec57ebd5d2a79c6fe8 /spec/frontend | |
parent | 5074a6923ee1572d5e0590191206e0e4a4849287 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'spec/frontend')
48 files changed, 232 insertions, 221 deletions
diff --git a/spec/frontend/environments/canary_ingress_spec.js b/spec/frontend/environments/canary_ingress_spec.js index d58f9f9b8a2..340740e6499 100644 --- a/spec/frontend/environments/canary_ingress_spec.js +++ b/spec/frontend/environments/canary_ingress_spec.js @@ -10,7 +10,7 @@ describe('/environments/components/canary_ingress.vue', () => { const setWeightTo = (weightWrapper, x) => weightWrapper - .findAll(GlDropdownItem) + .findAllComponents(GlDropdownItem) .at(x / 5) .vm.$emit('click'); @@ -59,14 +59,14 @@ describe('/environments/components/canary_ingress.vue', () => { }); it('lists options from 0 to 100 in increments of 5', () => { - const options = stableWeightDropdown.findAll(GlDropdownItem); + const options = stableWeightDropdown.findAllComponents(GlDropdownItem); expect(options).toHaveLength(21); options.wrappers.forEach((w, i) => expect(w.text()).toBe((i * 5).toString())); }); it('is set to open the change modal', () => { stableWeightDropdown - .findAll(GlDropdownItem) + .findAllComponents(GlDropdownItem) .wrappers.forEach((w) => expect(getBinding(w.element, 'gl-modal')).toMatchObject({ value: CANARY_UPDATE_MODAL }), ); @@ -92,13 +92,13 @@ describe('/environments/components/canary_ingress.vue', () => { it('lists options from 0 to 100 in increments of 5', () => { canaryWeightDropdown - .findAll(GlDropdownItem) + .findAllComponents(GlDropdownItem) .wrappers.forEach((w, i) => expect(w.text()).toBe((i * 5).toString())); }); it('is set to open the change modal', () => { canaryWeightDropdown - .findAll(GlDropdownItem) + .findAllComponents(GlDropdownItem) .wrappers.forEach((w) => expect(getBinding(w.element, 'gl-modal')).toMatchObject({ value: CANARY_UPDATE_MODAL }), ); diff --git a/spec/frontend/environments/canary_update_modal_spec.js b/spec/frontend/environments/canary_update_modal_spec.js index 16792dcda1e..31b1770da59 100644 --- a/spec/frontend/environments/canary_update_modal_spec.js +++ b/spec/frontend/environments/canary_update_modal_spec.js @@ -10,7 +10,7 @@ describe('/environments/components/canary_update_modal.vue', () => { let modal; let mutate; - const findAlert = () => wrapper.find(GlAlert); + const findAlert = () => wrapper.findComponent(GlAlert); const createComponent = () => { mutate = jest.fn().mockResolvedValue(); @@ -27,7 +27,7 @@ describe('/environments/components/canary_update_modal.vue', () => { $apollo: { mutate }, }, }); - modal = wrapper.find(GlModal); + modal = wrapper.findComponent(GlModal); }; afterEach(() => { diff --git a/spec/frontend/environments/confirm_rollback_modal_spec.js b/spec/frontend/environments/confirm_rollback_modal_spec.js index c4763933468..2163814528a 100644 --- a/spec/frontend/environments/confirm_rollback_modal_spec.js +++ b/spec/frontend/environments/confirm_rollback_modal_spec.js @@ -73,7 +73,7 @@ describe('Confirm Rollback Modal Component', () => { hasMultipleCommits, retryUrl, }); - const modal = component.find(GlModal); + const modal = component.findComponent(GlModal); expect(modal.attributes('title')).toContain('Rollback'); expect(modal.attributes('title')).toContain('test'); @@ -92,7 +92,7 @@ describe('Confirm Rollback Modal Component', () => { hasMultipleCommits, }); - const modal = component.find(GlModal); + const modal = component.findComponent(GlModal); expect(modal.attributes('title')).toContain('Re-deploy'); expect(modal.attributes('title')).toContain('test'); @@ -110,7 +110,7 @@ describe('Confirm Rollback Modal Component', () => { }); const eventHubSpy = jest.spyOn(eventHub, '$emit'); - const modal = component.find(GlModal); + const modal = component.findComponent(GlModal); modal.vm.$emit('ok'); expect(eventHubSpy).toHaveBeenCalledWith('rollbackEnvironment', env); @@ -155,7 +155,7 @@ describe('Confirm Rollback Modal Component', () => { }, { apolloProvider }, ); - const modal = component.find(GlModal); + const modal = component.findComponent(GlModal); expect(trimText(modal.text())).toContain('commit abc0123'); expect(modal.text()).toContain('Are you sure you want to continue?'); @@ -177,7 +177,7 @@ describe('Confirm Rollback Modal Component', () => { }, { apolloProvider }, ); - const modal = component.find(GlModal); + const modal = component.findComponent(GlModal); expect(modal.attributes('title')).toContain('Rollback'); expect(modal.attributes('title')).toContain('test'); @@ -201,7 +201,7 @@ describe('Confirm Rollback Modal Component', () => { { apolloProvider }, ); - const modal = component.find(GlModal); + const modal = component.findComponent(GlModal); expect(modal.attributes('title')).toContain('Re-deploy'); expect(modal.attributes('title')).toContain('test'); @@ -220,7 +220,7 @@ describe('Confirm Rollback Modal Component', () => { { apolloProvider }, ); - const modal = component.find(GlModal); + const modal = component.findComponent(GlModal); modal.vm.$emit('ok'); await nextTick(); diff --git a/spec/frontend/environments/deploy_board_component_spec.js b/spec/frontend/environments/deploy_board_component_spec.js index 4d63648dd48..c005ca22070 100644 --- a/spec/frontend/environments/deploy_board_component_spec.js +++ b/spec/frontend/environments/deploy_board_component_spec.js @@ -26,7 +26,9 @@ describe('Deploy Board', () => { }); it('should render percentage with completion value provided', () => { - expect(wrapper.find({ ref: 'percentage' }).text()).toBe(`${deployBoardMockData.completion}%`); + expect(wrapper.findComponent({ ref: 'percentage' }).text()).toBe( + `${deployBoardMockData.completion}%`, + ); }); it('should render total instance count', () => { @@ -79,7 +81,9 @@ describe('Deploy Board', () => { }); it('should render percentage with completion value provided', () => { - expect(wrapper.find({ ref: 'percentage' }).text()).toBe(`${rolloutStatus.completion}%`); + expect(wrapper.findComponent({ ref: 'percentage' }).text()).toBe( + `${rolloutStatus.completion}%`, + ); }); it('should render total instance count', () => { diff --git a/spec/frontend/environments/edit_environment_spec.js b/spec/frontend/environments/edit_environment_spec.js index 2c8c054ccbd..0f2d6e95bf0 100644 --- a/spec/frontend/environments/edit_environment_spec.js +++ b/spec/frontend/environments/edit_environment_spec.js @@ -42,7 +42,7 @@ describe('~/environments/components/edit.vue', () => { const findExternalUrlInput = () => wrapper.findByLabelText('External URL'); const findForm = () => wrapper.findByRole('form', { name: 'Edit environment' }); - const showsLoading = () => wrapper.find(GlLoadingIcon).exists(); + const showsLoading = () => wrapper.findComponent(GlLoadingIcon).exists(); const submitForm = async (expected, response) => { mock diff --git a/spec/frontend/environments/environment_actions_spec.js b/spec/frontend/environments/environment_actions_spec.js index ada79e2d415..68895b194a1 100644 --- a/spec/frontend/environments/environment_actions_spec.js +++ b/spec/frontend/environments/environment_actions_spec.js @@ -51,7 +51,7 @@ describe('EnvironmentActions Component', () => { } const findDropdownItem = (action) => { - const buttons = wrapper.findAll(GlDropdownItem); + const buttons = wrapper.findAllComponents(GlDropdownItem); return buttons.filter((button) => button.text().startsWith(action.name)).at(0); }; @@ -62,12 +62,12 @@ describe('EnvironmentActions Component', () => { it('should render a dropdown button with 2 icons', () => { createComponent({}, { mountFn: mount }); - expect(wrapper.find(GlDropdown).findAll(GlIcon).length).toBe(2); + expect(wrapper.findComponent(GlDropdown).findAllComponents(GlIcon).length).toBe(2); }); it('should render a dropdown button with aria-label description', () => { createComponent(); - expect(wrapper.find(GlDropdown).attributes('aria-label')).toBe('Deploy to...'); + expect(wrapper.findComponent(GlDropdown).attributes('aria-label')).toBe('Deploy to...'); }); it('should render a tooltip', () => { @@ -98,11 +98,11 @@ describe('EnvironmentActions Component', () => { }); it('should render a dropdown with the provided list of actions', () => { - expect(wrapper.findAll(GlDropdownItem)).toHaveLength(actions.length); + expect(wrapper.findAllComponents(GlDropdownItem)).toHaveLength(actions.length); }); it("should render a disabled action when it's not playable", () => { - const dropdownItems = wrapper.findAll(GlDropdownItem); + const dropdownItems = wrapper.findAllComponents(GlDropdownItem); const lastDropdownItem = dropdownItems.at(dropdownItems.length - 1); expect(lastDropdownItem.attributes('disabled')).toBe('true'); }); @@ -136,7 +136,7 @@ describe('EnvironmentActions Component', () => { }); it('should render a dropdown button with a loading icon', () => { - expect(wrapper.find(GlLoadingIcon).isVisible()).toBe(true); + expect(wrapper.findComponent(GlLoadingIcon).isVisible()).toBe(true); }); }); diff --git a/spec/frontend/environments/environment_delete_spec.js b/spec/frontend/environments/environment_delete_spec.js index 057cb9858c4..530f9f55088 100644 --- a/spec/frontend/environments/environment_delete_spec.js +++ b/spec/frontend/environments/environment_delete_spec.js @@ -21,7 +21,7 @@ describe('External URL Component', () => { }); }; - const findDropdownItem = () => wrapper.find(GlDropdownItem); + const findDropdownItem = () => wrapper.findComponent(GlDropdownItem); describe('event hub', () => { beforeEach(() => { diff --git a/spec/frontend/environments/environment_pin_spec.js b/spec/frontend/environments/environment_pin_spec.js index 669c974ea4f..170036b5b00 100644 --- a/spec/frontend/environments/environment_pin_spec.js +++ b/spec/frontend/environments/environment_pin_spec.js @@ -41,7 +41,7 @@ describe('Pin Component', () => { it('should emit onPinClick when clicked', () => { const eventHubSpy = jest.spyOn(eventHub, '$emit'); - const item = wrapper.find(GlDropdownItem); + const item = wrapper.findComponent(GlDropdownItem); item.vm.$emit('click'); @@ -74,7 +74,7 @@ describe('Pin Component', () => { it('should emit onPinClick when clicked', () => { jest.spyOn(mockApollo.defaultClient, 'mutate'); - const item = wrapper.find(GlDropdownItem); + const item = wrapper.findComponent(GlDropdownItem); item.vm.$emit('click'); diff --git a/spec/frontend/environments/environment_rollback_spec.js b/spec/frontend/environments/environment_rollback_spec.js index 7eff46baaf7..be61c6fcc90 100644 --- a/spec/frontend/environments/environment_rollback_spec.js +++ b/spec/frontend/environments/environment_rollback_spec.js @@ -44,7 +44,7 @@ describe('Rollback Component', () => { }, }, }); - const button = wrapper.find(GlDropdownItem); + const button = wrapper.findComponent(GlDropdownItem); button.vm.$emit('click'); @@ -71,7 +71,7 @@ describe('Rollback Component', () => { }, apolloProvider, }); - const button = wrapper.find(GlDropdownItem); + const button = wrapper.findComponent(GlDropdownItem); button.vm.$emit('click'); expect(apolloProvider.defaultClient.mutate).toHaveBeenCalledWith({ diff --git a/spec/frontend/environments/environment_stop_spec.js b/spec/frontend/environments/environment_stop_spec.js index 358abca2f77..851e24c22cc 100644 --- a/spec/frontend/environments/environment_stop_spec.js +++ b/spec/frontend/environments/environment_stop_spec.js @@ -22,7 +22,7 @@ describe('Stop Component', () => { }); }; - const findButton = () => wrapper.find(GlButton); + const findButton = () => wrapper.findComponent(GlButton); describe('eventHub', () => { beforeEach(() => { diff --git a/spec/frontend/environments/environment_table_spec.js b/spec/frontend/environments/environment_table_spec.js index aff6b1327f0..49a643aaac8 100644 --- a/spec/frontend/environments/environment_table_spec.js +++ b/spec/frontend/environments/environment_table_spec.js @@ -177,10 +177,10 @@ describe('Environment table', () => { }, }); - wrapper.find(DeployBoard).vm.$emit('changeCanaryWeight', 40); + wrapper.findComponent(DeployBoard).vm.$emit('changeCanaryWeight', 40); await nextTick(); - expect(wrapper.find(CanaryUpdateModal).props()).toMatchObject({ + expect(wrapper.findComponent(CanaryUpdateModal).props()).toMatchObject({ weight: 40, environment: mockItem, }); diff --git a/spec/frontend/environments/folder/environments_folder_view_spec.js b/spec/frontend/environments/folder/environments_folder_view_spec.js index 9eb57b2682f..f8b8465cf6f 100644 --- a/spec/frontend/environments/folder/environments_folder_view_spec.js +++ b/spec/frontend/environments/folder/environments_folder_view_spec.js @@ -65,7 +65,7 @@ describe('Environments Folder View', () => { }); it('should render a table with environments', () => { - const table = wrapper.find(EnvironmentTable); + const table = wrapper.findComponent(EnvironmentTable); expect(table.exists()).toBe(true); expect(table.find('.environment-name').text()).toEqual(environmentsList[0].name); @@ -93,7 +93,7 @@ describe('Environments Folder View', () => { describe('pagination', () => { it('should render pagination', () => { - expect(wrapper.find(GlPagination).exists()).toBe(true); + expect(wrapper.findComponent(GlPagination).exists()).toBe(true); }); it('should make an API request when changing page', () => { @@ -126,7 +126,7 @@ describe('Environments Folder View', () => { }); it('should not render a table', () => { - expect(wrapper.find(EnvironmentTable).exists()).toBe(false); + expect(wrapper.findComponent(EnvironmentTable).exists()).toBe(false); }); it('should render available tab with count 0', () => { diff --git a/spec/frontend/environments/new_environment_spec.js b/spec/frontend/environments/new_environment_spec.js index f6d970e02d8..5a1c1c7714c 100644 --- a/spec/frontend/environments/new_environment_spec.js +++ b/spec/frontend/environments/new_environment_spec.js @@ -40,7 +40,7 @@ describe('~/environments/components/new.vue', () => { wrapper.destroy(); }); - const showsLoading = () => wrapper.find(GlLoadingIcon).exists(); + const showsLoading = () => wrapper.findComponent(GlLoadingIcon).exists(); const submitForm = async (expected, response) => { mock diff --git a/spec/frontend/error_tracking/components/error_details_spec.js b/spec/frontend/error_tracking/components/error_details_spec.js index 4273da6c735..732eff65495 100644 --- a/spec/frontend/error_tracking/components/error_details_spec.js +++ b/spec/frontend/error_tracking/components/error_details_spec.js @@ -35,7 +35,9 @@ describe('ErrorDetails', () => { 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); + const inputs = wrapper + .findAllComponents(GlFormInput) + .filter((c) => c.attributes('name') === name); return inputs.length ? inputs.at(0) : inputs; }; @@ -44,7 +46,7 @@ describe('ErrorDetails', () => { const findUpdateResolveStatusButton = () => wrapper.find('[data-testid="update-resolve-status-btn"]'); const findExternalUrl = () => wrapper.find('[data-testid="external-url-link"]'); - const findAlert = () => wrapper.find(GlAlert); + const findAlert = () => wrapper.findComponent(GlAlert); function mountComponent() { wrapper = shallowMount(ErrorDetails, { @@ -119,9 +121,9 @@ describe('ErrorDetails', () => { }); it('should show spinner while loading', () => { - expect(wrapper.find(GlLoadingIcon).exists()).toBe(true); - expect(wrapper.find(GlLink).exists()).toBe(false); - expect(wrapper.find(Stacktrace).exists()).toBe(false); + expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true); + expect(wrapper.findComponent(GlLink).exists()).toBe(false); + expect(wrapper.findComponent(Stacktrace).exists()).toBe(false); }); }); @@ -141,7 +143,7 @@ describe('ErrorDetails', () => { wrapper.vm.onNoApolloResult(); await nextTick(); - expect(wrapper.find(GlLoadingIcon).exists()).toBe(true); + expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true); expect(createFlash).not.toHaveBeenCalled(); expect(mocks.$apollo.queries.error.stopPolling).not.toHaveBeenCalled(); }); @@ -152,8 +154,8 @@ describe('ErrorDetails', () => { wrapper.vm.onNoApolloResult(); await nextTick(); - expect(wrapper.find(GlLoadingIcon).exists()).toBe(false); - expect(wrapper.find(GlLink).exists()).toBe(false); + expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(false); + expect(wrapper.findComponent(GlLink).exists()).toBe(false); expect(createFlash).toHaveBeenCalledWith({ message: 'Could not connect to Sentry. Refresh the page to try again.', type: 'warning', @@ -186,11 +188,11 @@ describe('ErrorDetails', () => { }); it('should show Sentry error details without stacktrace', () => { - expect(wrapper.find(GlLink).exists()).toBe(true); - expect(wrapper.find(GlLoadingIcon).exists()).toBe(true); - expect(wrapper.find(Stacktrace).exists()).toBe(false); - expect(wrapper.find(GlBadge).exists()).toBe(false); - expect(wrapper.findAll(GlButton)).toHaveLength(3); + expect(wrapper.findComponent(GlLink).exists()).toBe(true); + expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true); + expect(wrapper.findComponent(Stacktrace).exists()).toBe(false); + expect(wrapper.findComponent(GlBadge).exists()).toBe(false); + expect(wrapper.findAllComponents(GlButton)).toHaveLength(3); }); describe('unsafe chars for culprit field', () => { @@ -227,7 +229,7 @@ describe('ErrorDetails', () => { }, }); await nextTick(); - expect(wrapper.findAll(GlBadge).length).toBe(2); + expect(wrapper.findAllComponents(GlBadge).length).toBe(2); }); it('should NOT show the badge if the tag is not present', async () => { @@ -239,7 +241,7 @@ describe('ErrorDetails', () => { }, }); await nextTick(); - expect(wrapper.findAll(GlBadge).length).toBe(1); + expect(wrapper.findAllComponents(GlBadge).length).toBe(1); }); it.each(Object.keys(severityLevel))( @@ -253,7 +255,7 @@ describe('ErrorDetails', () => { }, }); await nextTick(); - expect(wrapper.find(GlBadge).props('variant')).toEqual( + expect(wrapper.findComponent(GlBadge).props('variant')).toEqual( severityLevelVariant[severityLevel[level]], ); }, @@ -268,7 +270,7 @@ describe('ErrorDetails', () => { }, }); await nextTick(); - expect(wrapper.find(GlBadge).props('variant')).toEqual( + expect(wrapper.findComponent(GlBadge).props('variant')).toEqual( severityLevelVariant[severityLevel.ERROR], ); }); @@ -278,8 +280,8 @@ describe('ErrorDetails', () => { it('should show stacktrace', async () => { store.state.details.loadingStacktrace = false; await nextTick(); - expect(wrapper.find(GlLoadingIcon).exists()).toBe(false); - expect(wrapper.find(Stacktrace).exists()).toBe(true); + expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(false); + expect(wrapper.findComponent(Stacktrace).exists()).toBe(true); expect(findAlert().exists()).toBe(false); }); @@ -287,8 +289,8 @@ describe('ErrorDetails', () => { store.state.details.loadingStacktrace = false; store.getters = { 'details/sentryUrl': () => 'sentry.io', 'details/stacktrace': () => [] }; await nextTick(); - expect(wrapper.find(GlLoadingIcon).exists()).toBe(false); - expect(wrapper.find(Stacktrace).exists()).toBe(false); + expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(false); + expect(wrapper.findComponent(Stacktrace).exists()).toBe(false); expect(findAlert().text()).toBe('No stack trace for this error'); }); }); diff --git a/spec/frontend/error_tracking/components/error_tracking_actions_spec.js b/spec/frontend/error_tracking/components/error_tracking_actions_spec.js index 7ed4e5f6b05..5f6c9ddb4d7 100644 --- a/spec/frontend/error_tracking/components/error_tracking_actions_spec.js +++ b/spec/frontend/error_tracking/components/error_tracking_actions_spec.js @@ -35,7 +35,7 @@ describe('Error Tracking Actions', () => { } }); - const findButtons = () => wrapper.findAll(GlButton); + const findButtons = () => wrapper.findAllComponents(GlButton); describe('when error status is unresolved', () => { it('renders the correct actions buttons to allow ignore and resolve', async () => { 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 23d448f3964..b7dffbbec04 100644 --- a/spec/frontend/error_tracking/components/error_tracking_list_spec.js +++ b/spec/frontend/error_tracking/components/error_tracking_list_spec.js @@ -19,13 +19,13 @@ describe('ErrorTrackingList', () => { const findErrorListTable = () => wrapper.find('table'); const findErrorListRows = () => wrapper.findAll('tbody tr'); - const dropdownsArray = () => wrapper.findAll(GlDropdown); - const findRecentSearchesDropdown = () => dropdownsArray().at(0).find(GlDropdown); - const findStatusFilterDropdown = () => dropdownsArray().at(1).find(GlDropdown); - const findSortDropdown = () => dropdownsArray().at(2).find(GlDropdown); - const findLoadingIcon = () => wrapper.find(GlLoadingIcon); - const findPagination = () => wrapper.find(GlPagination); - const findErrorActions = () => wrapper.find(ErrorTrackingActions); + const dropdownsArray = () => wrapper.findAllComponents(GlDropdown); + const findRecentSearchesDropdown = () => dropdownsArray().at(0).findComponent(GlDropdown); + const findStatusFilterDropdown = () => dropdownsArray().at(1).findComponent(GlDropdown); + const findSortDropdown = () => dropdownsArray().at(2).findComponent(GlDropdown); + const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon); + const findPagination = () => wrapper.findComponent(GlPagination); + const findErrorActions = () => wrapper.findComponent(ErrorTrackingActions); const findIntegratedDisabledAlert = () => wrapper.findByTestId('integrated-disabled-alert'); function mountComponent({ @@ -152,12 +152,12 @@ describe('ErrorTrackingList', () => { it('each error in the list should have an action button set', () => { findErrorListRows().wrappers.forEach((row) => { - expect(row.find(ErrorTrackingActions).exists()).toBe(true); + expect(row.findComponent(ErrorTrackingActions).exists()).toBe(true); }); }); describe('filtering', () => { - const findSearchBox = () => wrapper.find(GlFormInput); + const findSearchBox = () => wrapper.findComponent(GlFormInput); it('shows search box & sort dropdown', () => { expect(findSearchBox().exists()).toBe(true); @@ -222,7 +222,7 @@ describe('ErrorTrackingList', () => { }); it('shows empty state', () => { - expect(wrapper.find(GlEmptyState).exists()).toBe(true); + expect(wrapper.findComponent(GlEmptyState).exists()).toBe(true); expect(findLoadingIcon().exists()).toBe(false); expect(findErrorListTable().exists()).toBe(false); expect(dropdownsArray().length).toBe(0); @@ -327,7 +327,7 @@ describe('ErrorTrackingList', () => { }); it('shows empty state', () => { - expect(wrapper.find(GlEmptyState).isVisible()).toBe(true); + expect(wrapper.findComponent(GlEmptyState).isVisible()).toBe(true); }); }); @@ -358,7 +358,7 @@ describe('ErrorTrackingList', () => { }); describe('clear', () => { - const clearRecentButton = () => wrapper.find({ ref: 'clearRecentSearches' }); + const clearRecentButton = () => wrapper.findComponent({ ref: 'clearRecentSearches' }); it('is hidden when list empty', () => { store.state.list.recentSearches = []; diff --git a/spec/frontend/error_tracking/components/stacktrace_entry_spec.js b/spec/frontend/error_tracking/components/stacktrace_entry_spec.js index 0b43167c19b..693fcff50ca 100644 --- a/spec/frontend/error_tracking/components/stacktrace_entry_spec.js +++ b/spec/frontend/error_tracking/components/stacktrace_entry_spec.js @@ -36,10 +36,10 @@ describe('Stacktrace Entry', () => { it('should render stacktrace entry collapsed', () => { mountComponent({ lines }); - expect(wrapper.find(StackTraceEntry).exists()).toBe(true); - expect(wrapper.find(ClipboardButton).exists()).toBe(true); - expect(wrapper.find(GlIcon).exists()).toBe(true); - expect(wrapper.find(FileIcon).exists()).toBe(true); + expect(wrapper.findComponent(StackTraceEntry).exists()).toBe(true); + expect(wrapper.findComponent(ClipboardButton).exists()).toBe(true); + expect(wrapper.findComponent(GlIcon).exists()).toBe(true); + expect(wrapper.findComponent(FileIcon).exists()).toBe(true); expect(wrapper.find('table').exists()).toBe(false); }); @@ -56,7 +56,7 @@ describe('Stacktrace Entry', () => { it('should hide collapse icon and render error fn name and error line when there is no code block', () => { const extraInfo = { errorLine: 34, errorFn: 'errorFn', errorColumn: 77 }; mountComponent({ expanded: false, lines: [], ...extraInfo }); - expect(wrapper.find(GlIcon).exists()).toBe(false); + expect(wrapper.findComponent(GlIcon).exists()).toBe(false); expect(trimText(findFileHeaderContent())).toContain( `in ${extraInfo.errorFn} at line ${extraInfo.errorLine}:${extraInfo.errorColumn}`, ); diff --git a/spec/frontend/error_tracking/components/stacktrace_spec.js b/spec/frontend/error_tracking/components/stacktrace_spec.js index 4f4a60acba4..cd5a57f5683 100644 --- a/spec/frontend/error_tracking/components/stacktrace_spec.js +++ b/spec/frontend/error_tracking/components/stacktrace_spec.js @@ -33,13 +33,13 @@ describe('ErrorDetails', () => { it('should render single Stacktrace entry', () => { mountComponent([stackTraceEntry]); - expect(wrapper.findAll(StackTraceEntry).length).toBe(1); + expect(wrapper.findAllComponents(StackTraceEntry).length).toBe(1); }); it('should render multiple Stacktrace entry', () => { const entriesNum = 3; mountComponent(new Array(entriesNum).fill(stackTraceEntry)); - expect(wrapper.findAll(StackTraceEntry).length).toBe(entriesNum); + expect(wrapper.findAllComponents(StackTraceEntry).length).toBe(entriesNum); }); }); }); diff --git a/spec/frontend/monitoring/components/charts/anomaly_spec.js b/spec/frontend/monitoring/components/charts/anomaly_spec.js index 8dc6132709e..3674a49f42c 100644 --- a/spec/frontend/monitoring/components/charts/anomaly_spec.js +++ b/spec/frontend/monitoring/components/charts/anomaly_spec.js @@ -20,7 +20,7 @@ describe('Anomaly chart component', () => { propsData: { ...props }, }); }; - const findTimeSeries = () => wrapper.find(MonitorTimeSeriesChart); + const findTimeSeries = () => wrapper.findComponent(MonitorTimeSeriesChart); const getTimeSeriesProps = () => findTimeSeries().props(); describe('wrapped monitor-time-series-chart component', () => { diff --git a/spec/frontend/monitoring/components/charts/bar_spec.js b/spec/frontend/monitoring/components/charts/bar_spec.js index 6368c53943a..5339a7a525b 100644 --- a/spec/frontend/monitoring/components/charts/bar_spec.js +++ b/spec/frontend/monitoring/components/charts/bar_spec.js @@ -33,7 +33,7 @@ describe('Bar component', () => { let chartData; beforeEach(() => { - glbarChart = barChart.find(GlBarChart); + glbarChart = barChart.findComponent(GlBarChart); chartData = barChart.vm.chartData[graphData.metrics[0].label]; }); diff --git a/spec/frontend/monitoring/components/charts/column_spec.js b/spec/frontend/monitoring/components/charts/column_spec.js index e10cb3a456a..0158966997f 100644 --- a/spec/frontend/monitoring/components/charts/column_spec.js +++ b/spec/frontend/monitoring/components/charts/column_spec.js @@ -44,7 +44,7 @@ describe('Column component', () => { }, }); }; - const findChart = () => wrapper.find(GlColumnChart); + const findChart = () => wrapper.findComponent(GlColumnChart); const chartProps = (prop) => findChart().props(prop); beforeEach(() => { diff --git a/spec/frontend/monitoring/components/charts/gauge_spec.js b/spec/frontend/monitoring/components/charts/gauge_spec.js index c8f67d5d8c7..484199698ea 100644 --- a/spec/frontend/monitoring/components/charts/gauge_spec.js +++ b/spec/frontend/monitoring/components/charts/gauge_spec.js @@ -8,7 +8,7 @@ describe('Gauge Chart component', () => { let wrapper; - const findGaugeChart = () => wrapper.find(GlGaugeChart); + const findGaugeChart = () => wrapper.findComponent(GlGaugeChart); const createWrapper = ({ ...graphProps } = {}) => { wrapper = shallowMount(GaugeChart, { diff --git a/spec/frontend/monitoring/components/charts/heatmap_spec.js b/spec/frontend/monitoring/components/charts/heatmap_spec.js index 841b7e0648a..e163d4e73a0 100644 --- a/spec/frontend/monitoring/components/charts/heatmap_spec.js +++ b/spec/frontend/monitoring/components/charts/heatmap_spec.js @@ -8,7 +8,7 @@ describe('Heatmap component', () => { let wrapper; let store; - const findChart = () => wrapper.find(GlHeatmap); + const findChart = () => wrapper.findComponent(GlHeatmap); const graphData = heatmapGraphData(); diff --git a/spec/frontend/monitoring/components/charts/single_stat_spec.js b/spec/frontend/monitoring/components/charts/single_stat_spec.js index 8633b49565f..62a0b7e6ad3 100644 --- a/spec/frontend/monitoring/components/charts/single_stat_spec.js +++ b/spec/frontend/monitoring/components/charts/single_stat_spec.js @@ -15,7 +15,7 @@ describe('Single Stat Chart component', () => { }); }; - const findChart = () => wrapper.find(GlSingleStat); + const findChart = () => wrapper.findComponent(GlSingleStat); beforeEach(() => { createComponent(); diff --git a/spec/frontend/monitoring/components/charts/stacked_column_spec.js b/spec/frontend/monitoring/components/charts/stacked_column_spec.js index 9cab3650f28..91fe36bc6e4 100644 --- a/spec/frontend/monitoring/components/charts/stacked_column_spec.js +++ b/spec/frontend/monitoring/components/charts/stacked_column_spec.js @@ -15,8 +15,8 @@ describe('Stacked column chart component', () => { let wrapper; - const findChart = () => wrapper.find(GlStackedColumnChart); - const findLegend = () => wrapper.find(GlChartLegend); + const findChart = () => wrapper.findComponent(GlStackedColumnChart); + const findLegend = () => wrapper.findComponent(GlChartLegend); const createWrapper = (props = {}, mountingMethod = shallowMount) => mountingMethod(StackedColumnChart, { diff --git a/spec/frontend/monitoring/components/charts/time_series_spec.js b/spec/frontend/monitoring/components/charts/time_series_spec.js index feb8cacde3c..503dee7b937 100644 --- a/spec/frontend/monitoring/components/charts/time_series_spec.js +++ b/spec/frontend/monitoring/components/charts/time_series_spec.js @@ -64,7 +64,7 @@ describe('Time series component', () => { describe('With a single time series', () => { describe('general functions', () => { - const findChart = () => wrapper.find({ ref: 'chart' }); + const findChart = () => wrapper.findComponent({ ref: 'chart' }); beforeEach(async () => { createWrapper({}, mount); @@ -210,7 +210,7 @@ describe('Time series component', () => { const name = 'Metric 1'; const value = '5.556'; const dataIndex = 0; - const seriesLabel = wrapper.find(GlChartSeriesLabel); + const seriesLabel = wrapper.findComponent(GlChartSeriesLabel); expect(seriesLabel.vm.color).toBe(''); @@ -220,7 +220,11 @@ describe('Time series component', () => { ]); expect( - shallowWrapperContainsSlotText(wrapper.find(GlLineChart), 'tooltip-content', value), + shallowWrapperContainsSlotText( + wrapper.findComponent(GlLineChart), + 'tooltip-content', + value, + ), ).toBe(true); }); @@ -593,7 +597,7 @@ describe('Time series component', () => { glChartComponents.forEach((dynamicComponent) => { describe(`GitLab UI: ${dynamicComponent.chartType}`, () => { - const findChartComponent = () => wrapper.find(dynamicComponent.component); + const findChartComponent = () => wrapper.findComponent(dynamicComponent.component); beforeEach(async () => { createWrapper( @@ -651,7 +655,7 @@ describe('Time series component', () => { wrapper.vm.tooltip.commitUrl = commitUrl; await nextTick(); - const commitLink = wrapper.find(GlLink); + const commitLink = wrapper.findComponent(GlLink); expect(shallowWrapperContainsSlotText(commitLink, 'default', mockSha)).toBe(true); expect(commitLink.attributes('href')).toEqual(commitUrl); @@ -675,7 +679,9 @@ describe('Time series component', () => { let lineColors; beforeEach(() => { - lineColors = wrapper.find(GlAreaChart).vm.series.map((item) => item.lineStyle.color); + lineColors = wrapper + .findComponent(GlAreaChart) + .vm.series.map((item) => item.lineStyle.color); }); it('should contain different colors for contiguous time series', () => { @@ -685,7 +691,7 @@ describe('Time series component', () => { }); it('should match series color with tooltip label color', () => { - const labels = wrapper.findAll(GlChartSeriesLabel); + const labels = wrapper.findAllComponents(GlChartSeriesLabel); lineColors.forEach((color, index) => { const labelColor = labels.at(index).props('color'); @@ -695,7 +701,7 @@ describe('Time series component', () => { it('should match series color with legend color', () => { const legendColors = wrapper - .find(GlChartLegend) + .findComponent(GlChartLegend) .props('seriesInfo') .map((item) => item.color); @@ -708,7 +714,7 @@ describe('Time series component', () => { }); describe('legend layout', () => { - const findLegend = () => wrapper.find(GlChartLegend); + const findLegend = () => wrapper.findComponent(GlChartLegend); beforeEach(async () => { createWrapper({}, mount); diff --git a/spec/frontend/monitoring/components/dashboard_actions_menu_spec.js b/spec/frontend/monitoring/components/dashboard_actions_menu_spec.js index 281f0f4e4fe..bb57420d406 100644 --- a/spec/frontend/monitoring/components/dashboard_actions_menu_spec.js +++ b/spec/frontend/monitoring/components/dashboard_actions_menu_spec.js @@ -92,7 +92,7 @@ describe('Actions menu', () => { }); it('renders custom metrics form fields', () => { - expect(wrapper.find(CustomMetricsFormFields).exists()).toBe(true); + expect(wrapper.findComponent(CustomMetricsFormFields).exists()).toBe(true); }); }); diff --git a/spec/frontend/monitoring/components/dashboard_header_spec.js b/spec/frontend/monitoring/components/dashboard_header_spec.js index e28c2913949..18ccda2c41c 100644 --- a/spec/frontend/monitoring/components/dashboard_header_spec.js +++ b/spec/frontend/monitoring/components/dashboard_header_spec.js @@ -29,18 +29,19 @@ describe('Dashboard header', () => { let store; let wrapper; - const findDashboardDropdown = () => wrapper.find(DashboardsDropdown); + const findDashboardDropdown = () => wrapper.findComponent(DashboardsDropdown); - const findEnvsDropdown = () => wrapper.find({ ref: 'monitorEnvironmentsDropdown' }); - const findEnvsDropdownItems = () => findEnvsDropdown().findAll(GlDropdownItem); - const findEnvsDropdownSearch = () => findEnvsDropdown().find(GlSearchBoxByType); - const findEnvsDropdownSearchMsg = () => wrapper.find({ ref: 'monitorEnvironmentsDropdownMsg' }); - const findEnvsDropdownLoadingIcon = () => findEnvsDropdown().find(GlLoadingIcon); + const findEnvsDropdown = () => wrapper.findComponent({ ref: 'monitorEnvironmentsDropdown' }); + const findEnvsDropdownItems = () => findEnvsDropdown().findAllComponents(GlDropdownItem); + const findEnvsDropdownSearch = () => findEnvsDropdown().findComponent(GlSearchBoxByType); + const findEnvsDropdownSearchMsg = () => + wrapper.findComponent({ ref: 'monitorEnvironmentsDropdownMsg' }); + const findEnvsDropdownLoadingIcon = () => findEnvsDropdown().findComponent(GlLoadingIcon); - const findDateTimePicker = () => wrapper.find(DateTimePicker); - const findRefreshButton = () => wrapper.find(RefreshButton); + const findDateTimePicker = () => wrapper.findComponent(DateTimePicker); + const findRefreshButton = () => wrapper.findComponent(RefreshButton); - const findActionsMenu = () => wrapper.find(ActionsMenu); + const findActionsMenu = () => wrapper.findComponent(ActionsMenu); const setSearchTerm = (searchTerm) => { store.commit(`monitoringDashboard/${types.SET_ENVIRONMENTS_FILTER}`, searchTerm); diff --git a/spec/frontend/monitoring/components/dashboard_panel_builder_spec.js b/spec/frontend/monitoring/components/dashboard_panel_builder_spec.js index f19ef6c6fb7..d71f6374967 100644 --- a/spec/frontend/monitoring/components/dashboard_panel_builder_spec.js +++ b/spec/frontend/monitoring/components/dashboard_panel_builder_spec.js @@ -32,14 +32,14 @@ describe('dashboard invalid url parameters', () => { }); }; - const findForm = () => wrapper.find(GlForm); - const findTxtArea = () => findForm().find(GlFormTextarea); + const findForm = () => wrapper.findComponent(GlForm); + const findTxtArea = () => findForm().findComponent(GlFormTextarea); const findSubmitBtn = () => findForm().find('[type="submit"]'); - const findClipboardCopyBtn = () => wrapper.find({ ref: 'clipboardCopyBtn' }); - const findViewDocumentationBtn = () => wrapper.find({ ref: 'viewDocumentationBtn' }); - const findOpenRepositoryBtn = () => wrapper.find({ ref: 'openRepositoryBtn' }); - const findPanel = () => wrapper.find(DashboardPanel); - const findTimeRangePicker = () => wrapper.find(DateTimePicker); + const findClipboardCopyBtn = () => wrapper.findComponent({ ref: 'clipboardCopyBtn' }); + const findViewDocumentationBtn = () => wrapper.findComponent({ ref: 'viewDocumentationBtn' }); + const findOpenRepositoryBtn = () => wrapper.findComponent({ ref: 'openRepositoryBtn' }); + const findPanel = () => wrapper.findComponent(DashboardPanel); + const findTimeRangePicker = () => wrapper.findComponent(DateTimePicker); const findRefreshButton = () => wrapper.find('[data-testid="previewRefreshButton"]'); beforeEach(() => { @@ -192,8 +192,8 @@ describe('dashboard invalid url parameters', () => { }); it('displays an alert', () => { - expect(wrapper.find(GlAlert).exists()).toBe(true); - expect(wrapper.find(GlAlert).text()).toBe(mockError); + expect(wrapper.findComponent(GlAlert).exists()).toBe(true); + expect(wrapper.findComponent(GlAlert).text()).toBe(mockError); }); it('displays an empty dashboard panel', () => { @@ -215,11 +215,11 @@ describe('dashboard invalid url parameters', () => { }); it('displays no alert', () => { - expect(wrapper.find(GlAlert).exists()).toBe(false); + expect(wrapper.findComponent(GlAlert).exists()).toBe(false); }); it('displays panel with data', () => { - const { title, type } = wrapper.find(DashboardPanel).props('graphData'); + const { title, type } = wrapper.findComponent(DashboardPanel).props('graphData'); expect(title).toBe(mockPanel.title); expect(type).toBe(mockPanel.type); diff --git a/spec/frontend/monitoring/components/dashboard_panel_spec.js b/spec/frontend/monitoring/components/dashboard_panel_spec.js index 6f5aa8998be..d797d9e2ad0 100644 --- a/spec/frontend/monitoring/components/dashboard_panel_spec.js +++ b/spec/frontend/monitoring/components/dashboard_panel_spec.js @@ -41,11 +41,11 @@ describe('Dashboard Panel', () => { const exampleText = 'example_text'; - const findCopyLink = () => wrapper.find({ ref: 'copyChartLink' }); - const findTimeChart = () => wrapper.find({ ref: 'timeSeriesChart' }); - const findTitle = () => wrapper.find({ ref: 'graphTitle' }); - const findCtxMenu = () => wrapper.find({ ref: 'contextualMenu' }); - const findMenuItems = () => wrapper.findAll(GlDropdownItem); + const findCopyLink = () => wrapper.findComponent({ ref: 'copyChartLink' }); + const findTimeChart = () => wrapper.findComponent({ ref: 'timeSeriesChart' }); + const findTitle = () => wrapper.findComponent({ ref: 'graphTitle' }); + const findCtxMenu = () => wrapper.findComponent({ ref: 'contextualMenu' }); + const findMenuItems = () => wrapper.findAllComponents(GlDropdownItem); const findMenuItemByText = (text) => findMenuItems().filter((i) => i.text() === text); const createWrapper = (props, { mountFn = shallowMount, ...options } = {}) => { @@ -115,7 +115,7 @@ describe('Dashboard Panel', () => { }); it('renders no download csv link', () => { - expect(wrapper.find({ ref: 'downloadCsvLink' }).exists()).toBe(false); + expect(wrapper.findComponent({ ref: 'downloadCsvLink' }).exists()).toBe(false); }); it('does not contain graph widgets', () => { @@ -123,7 +123,7 @@ describe('Dashboard Panel', () => { }); it('The Empty Chart component is rendered and is a Vue instance', () => { - expect(wrapper.find(MonitorEmptyChart).exists()).toBe(true); + expect(wrapper.findComponent(MonitorEmptyChart).exists()).toBe(true); }); }); @@ -143,7 +143,7 @@ describe('Dashboard Panel', () => { }); it('renders no download csv link', () => { - expect(wrapper.find({ ref: 'downloadCsvLink' }).exists()).toBe(false); + expect(wrapper.findComponent({ ref: 'downloadCsvLink' }).exists()).toBe(false); }); it('does not contain graph widgets', () => { @@ -151,7 +151,7 @@ describe('Dashboard Panel', () => { }); it('The Empty Chart component is rendered and is a Vue instance', () => { - expect(wrapper.find(MonitorEmptyChart).exists()).toBe(true); + expect(wrapper.findComponent(MonitorEmptyChart).exists()).toBe(true); }); }); @@ -170,7 +170,7 @@ describe('Dashboard Panel', () => { it('contains graph widgets', () => { expect(findCtxMenu().exists()).toBe(true); - expect(wrapper.find({ ref: 'downloadCsvLink' }).exists()).toBe(true); + expect(wrapper.findComponent({ ref: 'downloadCsvLink' }).exists()).toBe(true); }); it('sets no clipboard copy link on dropdown by default', () => { @@ -205,12 +205,12 @@ describe('Dashboard Panel', () => { it('empty chart is rendered for empty results', () => { createWrapper({ graphData: graphDataEmpty }); - expect(wrapper.find(MonitorEmptyChart).exists()).toBe(true); + expect(wrapper.findComponent(MonitorEmptyChart).exists()).toBe(true); }); it('area chart is rendered by default', () => { createWrapper(); - expect(wrapper.find(MonitorTimeSeriesChart).exists()).toBe(true); + expect(wrapper.findComponent(MonitorTimeSeriesChart).exists()).toBe(true); }); describe.each` @@ -231,8 +231,8 @@ describe('Dashboard Panel', () => { }); it(`renders the chart component and binds attributes`, () => { - expect(wrapper.find(component).exists()).toBe(true); - expect(wrapper.find(component).attributes()).toMatchObject(attrs); + expect(wrapper.findComponent(component).exists()).toBe(true); + expect(wrapper.findComponent(component).attributes()).toMatchObject(attrs); }); it(`contextual menu is ${hasCtxMenu ? '' : 'not '}shown`, () => { @@ -270,7 +270,7 @@ describe('Dashboard Panel', () => { }); describe('Edit custom metric dropdown item', () => { - const findEditCustomMetricLink = () => wrapper.find({ ref: 'editMetricLink' }); + const findEditCustomMetricLink = () => wrapper.findComponent({ ref: 'editMetricLink' }); const mockEditPath = '/root/kubernetes-gke-project/prometheus/metrics/23/edit'; beforeEach(async () => { @@ -431,7 +431,7 @@ describe('Dashboard Panel', () => { }); it('it renders a time series chart with no errors', () => { - expect(wrapper.find(MonitorTimeSeriesChart).exists()).toBe(true); + expect(wrapper.findComponent(MonitorTimeSeriesChart).exists()).toBe(true); }); }); @@ -443,7 +443,7 @@ describe('Dashboard Panel', () => { it('displays a heatmap in local timezone', () => { createWrapper({ graphData: heatmapGraphData() }); - expect(wrapper.find(MonitorHeatmapChart).props('timezone')).toBe('LOCAL'); + expect(wrapper.findComponent(MonitorHeatmapChart).props('timezone')).toBe('LOCAL'); }); describe('when timezone is set to UTC', () => { @@ -458,13 +458,13 @@ describe('Dashboard Panel', () => { it('displays a heatmap with UTC', () => { createWrapper({ graphData: heatmapGraphData() }); - expect(wrapper.find(MonitorHeatmapChart).props('timezone')).toBe('UTC'); + expect(wrapper.findComponent(MonitorHeatmapChart).props('timezone')).toBe('UTC'); }); }); }); describe('Expand to full screen', () => { - const findExpandBtn = () => wrapper.find({ ref: 'expandBtn' }); + const findExpandBtn = () => wrapper.findComponent({ ref: 'expandBtn' }); describe('when there is no @expand listener', () => { it('does not show `View full screen` option', () => { @@ -492,7 +492,7 @@ describe('Dashboard Panel', () => { }); describe('When graphData contains links', () => { - const findManageLinksItem = () => wrapper.find({ ref: 'manageLinksItem' }); + const findManageLinksItem = () => wrapper.findComponent({ ref: 'manageLinksItem' }); const mockLinks = [ { url: 'https://example.com', diff --git a/spec/frontend/monitoring/components/dashboard_spec.js b/spec/frontend/monitoring/components/dashboard_spec.js index 90171cfc65e..608404e5c5b 100644 --- a/spec/frontend/monitoring/components/dashboard_spec.js +++ b/spec/frontend/monitoring/components/dashboard_spec.js @@ -97,8 +97,10 @@ describe('Dashboard', () => { createShallowWrapper({ hasMetrics: true }); await nextTick(); - expect(wrapper.find(EmptyState).exists()).toBe(true); - expect(wrapper.find(EmptyState).props('selectedState')).toBe(dashboardEmptyStates.LOADING); + expect(wrapper.findComponent(EmptyState).exists()).toBe(true); + expect(wrapper.findComponent(EmptyState).props('selectedState')).toBe( + dashboardEmptyStates.LOADING, + ); }); it('hides the group panels when showPanels is false', async () => { @@ -126,7 +128,7 @@ describe('Dashboard', () => { describe('panel containers layout', () => { const findPanelLayoutWrapperAt = (index) => { return wrapper - .find(GraphGroup) + .findComponent(GraphGroup) .findAll('[data-testid="dashboard-panel-layout-wrapper"]') .at(index); }; @@ -366,7 +368,7 @@ describe('Dashboard', () => { }); describe('when all panels in the first group are loading', () => { - const findGroupAt = (i) => wrapper.findAll(GraphGroup).at(i); + const findGroupAt = (i) => wrapper.findAllComponents(GraphGroup).at(i); beforeEach(async () => { setupStoreWithDashboard(store); @@ -409,7 +411,7 @@ describe('Dashboard', () => { setupStoreWithData(store); await nextTick(); - wrapper.findAll(GraphGroup).wrappers.forEach((groupWrapper) => { + wrapper.findAllComponents(GraphGroup).wrappers.forEach((groupWrapper) => { expect(groupWrapper.props('isLoading')).toBe(false); }); }); @@ -443,7 +445,7 @@ describe('Dashboard', () => { }); describe('single panel expands to "full screen" mode', () => { - const findExpandedPanel = () => wrapper.find({ ref: 'expandedPanel' }); + const findExpandedPanel = () => wrapper.findComponent({ ref: 'expandedPanel' }); describe('when the panel is not expanded', () => { beforeEach(async () => { @@ -457,7 +459,7 @@ describe('Dashboard', () => { }); it('can set a panel as expanded', () => { - const panel = wrapper.findAll(DashboardPanel).at(1); + const panel = wrapper.findAllComponents(DashboardPanel).at(1); jest.spyOn(store, 'dispatch'); @@ -503,7 +505,7 @@ describe('Dashboard', () => { }); it('displays a single panel and others are hidden', () => { - const panels = wrapper.findAll(MockPanel); + const panels = wrapper.findAllComponents(MockPanel); const visiblePanels = panels.filter((w) => w.isVisible()); expect(findExpandedPanel().isVisible()).toBe(true); @@ -523,7 +525,7 @@ describe('Dashboard', () => { }); it('restores full dashboard by clicking `back`', () => { - wrapper.find({ ref: 'goBackBtn' }).vm.$emit('click'); + wrapper.findComponent({ ref: 'goBackBtn' }).vm.$emit('click'); expect(store.dispatch).toHaveBeenCalledWith( 'monitoringDashboard/clearExpandedPanel', @@ -551,21 +553,21 @@ describe('Dashboard', () => { }); it('shows a group empty area', () => { - const emptyGroup = wrapper.findAll({ ref: 'empty-group' }); + const emptyGroup = wrapper.findAllComponents({ ref: 'empty-group' }); expect(emptyGroup).toHaveLength(1); expect(emptyGroup.is(GroupEmptyState)).toBe(true); }); it('group empty area displays a NO_DATA state', () => { - expect(wrapper.findAll({ ref: 'empty-group' }).at(0).props('selectedState')).toEqual( - metricStates.NO_DATA, - ); + expect( + wrapper.findAllComponents({ ref: 'empty-group' }).at(0).props('selectedState'), + ).toEqual(metricStates.NO_DATA); }); }); describe('drag and drop function', () => { - const findDraggables = () => wrapper.findAll(VueDraggable); + const findDraggables = () => wrapper.findAllComponents(VueDraggable); const findEnabledDraggables = () => findDraggables().filter((f) => !f.attributes('disabled')); const findDraggablePanels = () => wrapper.findAll('.js-draggable-panel'); const findRearrangeButton = () => wrapper.find('.js-rearrange-button'); @@ -677,7 +679,7 @@ describe('Dashboard', () => { }); it('hides dashboard header by default', () => { - expect(wrapper.find({ ref: 'prometheusGraphsHeader' }).exists()).toEqual(false); + expect(wrapper.findComponent({ ref: 'prometheusGraphsHeader' }).exists()).toEqual(false); }); it('renders correctly', () => { @@ -742,7 +744,7 @@ describe('Dashboard', () => { const panelIndex = 1; // skip expanded panel const getClipboardTextFirstPanel = () => - wrapper.findAll(DashboardPanel).at(panelIndex).props('clipboardText'); + wrapper.findAllComponents(DashboardPanel).at(panelIndex).props('clipboardText'); beforeEach(async () => { setupStoreWithData(store); @@ -770,7 +772,7 @@ describe('Dashboard', () => { // While the recommendation in the documentation is to test // with a data-testid attribute, I want to make sure that // the dashboard panels have a ref attribute set. - const getDashboardPanel = () => wrapper.find({ ref: panelRef }); + const getDashboardPanel = () => wrapper.findComponent({ ref: panelRef }); beforeEach(async () => { setupStoreWithData(store); diff --git a/spec/frontend/monitoring/components/dashboard_url_time_spec.js b/spec/frontend/monitoring/components/dashboard_url_time_spec.js index 64c48100b31..a327e234581 100644 --- a/spec/frontend/monitoring/components/dashboard_url_time_spec.js +++ b/spec/frontend/monitoring/components/dashboard_url_time_spec.js @@ -35,7 +35,8 @@ describe('dashboard invalid url parameters', () => { }); }; - const findDateTimePicker = () => wrapper.find(DashboardHeader).find({ ref: 'dateTimePicker' }); + const findDateTimePicker = () => + wrapper.findComponent(DashboardHeader).findComponent({ ref: 'dateTimePicker' }); beforeEach(() => { store = createStore(); diff --git a/spec/frontend/monitoring/components/dashboards_dropdown_spec.js b/spec/frontend/monitoring/components/dashboards_dropdown_spec.js index f6d30384847..721992e710a 100644 --- a/spec/frontend/monitoring/components/dashboards_dropdown_spec.js +++ b/spec/frontend/monitoring/components/dashboards_dropdown_spec.js @@ -33,11 +33,11 @@ describe('DashboardsDropdown', () => { }); } - const findItems = () => wrapper.findAll(GlDropdownItem); - const findItemAt = (i) => wrapper.findAll(GlDropdownItem).at(i); - const findSearchInput = () => wrapper.find({ ref: 'monitorDashboardsDropdownSearch' }); - const findNoItemsMsg = () => wrapper.find({ ref: 'monitorDashboardsDropdownMsg' }); - const findStarredListDivider = () => wrapper.find({ ref: 'starredListDivider' }); + const findItems = () => wrapper.findAllComponents(GlDropdownItem); + const findItemAt = (i) => wrapper.findAllComponents(GlDropdownItem).at(i); + const findSearchInput = () => wrapper.findComponent({ ref: 'monitorDashboardsDropdownSearch' }); + const findNoItemsMsg = () => wrapper.findComponent({ ref: 'monitorDashboardsDropdownMsg' }); + const findStarredListDivider = () => wrapper.findComponent({ ref: 'starredListDivider' }); // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details // eslint-disable-next-line no-restricted-syntax const setSearchTerm = (searchTerm) => wrapper.setData({ searchTerm }); @@ -127,7 +127,7 @@ describe('DashboardsDropdown', () => { }); it('displays a star icon', () => { - const star = findItemAt(0).find(GlIcon); + const star = findItemAt(0).findComponent(GlIcon); expect(star.exists()).toBe(true); expect(star.attributes('name')).toBe('star'); }); @@ -148,7 +148,7 @@ describe('DashboardsDropdown', () => { }); it('displays no star icon', () => { - const star = findItemAt(0).find(GlIcon); + const star = findItemAt(0).findComponent(GlIcon); expect(star.exists()).toBe(false); }); diff --git a/spec/frontend/monitoring/components/duplicate_dashboard_form_spec.js b/spec/frontend/monitoring/components/duplicate_dashboard_form_spec.js index 0dd3afd7c83..755204dc721 100644 --- a/spec/frontend/monitoring/components/duplicate_dashboard_form_spec.js +++ b/spec/frontend/monitoring/components/duplicate_dashboard_form_spec.js @@ -18,7 +18,7 @@ const createMountedWrapper = (props = {}) => { describe('DuplicateDashboardForm', () => { const defaultBranch = 'main'; - const findByRef = (ref) => wrapper.find({ ref }); + const findByRef = (ref) => wrapper.findComponent({ ref }); const setValue = (ref, val) => { findByRef(ref).setValue(val); }; diff --git a/spec/frontend/monitoring/components/duplicate_dashboard_modal_spec.js b/spec/frontend/monitoring/components/duplicate_dashboard_modal_spec.js index 7e7a7a66d77..3032c236741 100644 --- a/spec/frontend/monitoring/components/duplicate_dashboard_modal_spec.js +++ b/spec/frontend/monitoring/components/duplicate_dashboard_modal_spec.js @@ -44,9 +44,9 @@ describe('duplicate dashboard modal', () => { }); } - const findAlert = () => wrapper.find(GlAlert); - const findModal = () => wrapper.find(GlModal); - const findDuplicateDashboardForm = () => wrapper.find(DuplicateDashboardForm); + const findAlert = () => wrapper.findComponent(GlAlert); + const findModal = () => wrapper.findComponent(GlModal); + const findDuplicateDashboardForm = () => wrapper.findComponent(DuplicateDashboardForm); beforeEach(() => { mockDashboards = dashboardGitResponse; @@ -74,7 +74,7 @@ describe('duplicate dashboard modal', () => { expect(okEvent.preventDefault).toHaveBeenCalled(); expect(wrapper.emitted().dashboardDuplicated).toBeTruthy(); expect(wrapper.emitted().dashboardDuplicated[0]).toEqual([dashboardGitResponse[0]]); - expect(wrapper.find(GlLoadingIcon).exists()).toBe(false); + expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(false); expect(wrapper.vm.$refs.duplicateDashboardModal.hide).toHaveBeenCalled(); expect(findAlert().exists()).toBe(false); }); @@ -92,7 +92,7 @@ describe('duplicate dashboard modal', () => { expect(findAlert().exists()).toBe(true); expect(findAlert().text()).toBe(errMsg); - expect(wrapper.find(GlLoadingIcon).exists()).toBe(false); + expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(false); expect(wrapper.vm.$refs.duplicateDashboardModal.hide).not.toHaveBeenCalled(); }); @@ -102,7 +102,7 @@ describe('duplicate dashboard modal', () => { commitMessage: 'A commit message', }; - findModal().find(DuplicateDashboardForm).vm.$emit('change', formVals); + findModal().findComponent(DuplicateDashboardForm).vm.$emit('change', formVals); // Binding's second argument contains the modal id expect(wrapper.vm.form).toEqual(formVals); diff --git a/spec/frontend/monitoring/components/embeds/embed_group_spec.js b/spec/frontend/monitoring/components/embeds/embed_group_spec.js index 47366b345a8..6695353bdb5 100644 --- a/spec/frontend/monitoring/components/embeds/embed_group_spec.js +++ b/spec/frontend/monitoring/components/embeds/embed_group_spec.js @@ -58,14 +58,14 @@ describe('Embed Group', () => { metricsWithDataGetter.mockReturnValue([]); mountComponent(); - expect(wrapper.find(GlCard).isVisible()).toBe(false); + expect(wrapper.findComponent(GlCard).isVisible()).toBe(false); }); it('shows the component when chart data is loaded', () => { metricsWithDataGetter.mockReturnValue([1]); mountComponent(); - expect(wrapper.find(GlCard).isVisible()).toBe(true); + expect(wrapper.findComponent(GlCard).isVisible()).toBe(true); }); it('is expanded by default', () => { @@ -79,7 +79,7 @@ describe('Embed Group', () => { metricsWithDataGetter.mockReturnValue([1]); mountComponent({ shallow: false, stubs: { MetricEmbed: true } }); - wrapper.find(GlButton).trigger('click'); + wrapper.findComponent(GlButton).trigger('click'); await nextTick(); expect(wrapper.find('.gl-card-body').classes()).toContain('d-none'); @@ -93,11 +93,11 @@ describe('Embed Group', () => { }); it('renders an Embed component', () => { - expect(wrapper.find(MetricEmbed).exists()).toBe(true); + expect(wrapper.findComponent(MetricEmbed).exists()).toBe(true); }); it('passes the correct props to the Embed component', () => { - expect(wrapper.find(MetricEmbed).props()).toEqual(singleEmbedProps()); + expect(wrapper.findComponent(MetricEmbed).props()).toEqual(singleEmbedProps()); }); it('adds the monitoring dashboard module', () => { @@ -112,7 +112,7 @@ describe('Embed Group', () => { }); it('passes the correct props to the dashboard Embed component', () => { - expect(wrapper.find(MetricEmbed).props()).toEqual(dashboardEmbedProps()); + expect(wrapper.findComponent(MetricEmbed).props()).toEqual(dashboardEmbedProps()); }); it('adds the monitoring dashboard module', () => { @@ -127,11 +127,11 @@ describe('Embed Group', () => { }); it('creates Embed components', () => { - expect(wrapper.findAll(MetricEmbed)).toHaveLength(2); + expect(wrapper.findAllComponents(MetricEmbed)).toHaveLength(2); }); it('passes the correct props to the Embed components', () => { - expect(wrapper.findAll(MetricEmbed).wrappers.map((item) => item.props())).toEqual( + expect(wrapper.findAllComponents(MetricEmbed).wrappers.map((item) => item.props())).toEqual( multipleEmbedProps(), ); }); @@ -147,14 +147,14 @@ describe('Embed Group', () => { metricsWithDataGetter.mockReturnValue([1]); mountComponent({ shallow: false, stubs: { MetricEmbed: true } }); - expect(wrapper.find(GlButton).text()).toBe('Hide chart'); + expect(wrapper.findComponent(GlButton).text()).toBe('Hide chart'); }); it('has a plural label when there are multiple embeds', () => { metricsWithDataGetter.mockReturnValue([2]); mountComponent({ shallow: false, stubs: { MetricEmbed: true } }); - expect(wrapper.find(GlButton).text()).toBe('Hide charts'); + expect(wrapper.findComponent(GlButton).text()).toBe('Hide charts'); }); }); }); diff --git a/spec/frontend/monitoring/components/embeds/metric_embed_spec.js b/spec/frontend/monitoring/components/embeds/metric_embed_spec.js index f9f1be4f277..beff3da2baf 100644 --- a/spec/frontend/monitoring/components/embeds/metric_embed_spec.js +++ b/spec/frontend/monitoring/components/embeds/metric_embed_spec.js @@ -64,7 +64,7 @@ describe('MetricEmbed', () => { it('shows an empty state when no metrics are present', () => { expect(wrapper.find('.metrics-embed').exists()).toBe(true); - expect(wrapper.find(DashboardPanel).exists()).toBe(false); + expect(wrapper.findComponent(DashboardPanel).exists()).toBe(false); }); }); @@ -92,12 +92,12 @@ describe('MetricEmbed', () => { it('shows a chart when metrics are present', () => { expect(wrapper.find('.metrics-embed').exists()).toBe(true); - expect(wrapper.find(DashboardPanel).exists()).toBe(true); - expect(wrapper.findAll(DashboardPanel).length).toBe(2); + expect(wrapper.findComponent(DashboardPanel).exists()).toBe(true); + expect(wrapper.findAllComponents(DashboardPanel).length).toBe(2); }); it('includes groupId with dashboardUrl', () => { - expect(wrapper.find(DashboardPanel).props('groupId')).toBe(TEST_HOST); + expect(wrapper.findComponent(DashboardPanel).props('groupId')).toBe(TEST_HOST); }); }); }); diff --git a/spec/frontend/monitoring/components/empty_state_spec.js b/spec/frontend/monitoring/components/empty_state_spec.js index 1ecb101574b..ddefa8c5cd0 100644 --- a/spec/frontend/monitoring/components/empty_state_spec.js +++ b/spec/frontend/monitoring/components/empty_state_spec.js @@ -25,8 +25,8 @@ describe('EmptyState', () => { selectedState: dashboardEmptyStates.LOADING, }); - expect(wrapper.find(GlLoadingIcon).exists()).toBe(true); - expect(wrapper.find(GlEmptyState).exists()).toBe(false); + expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true); + expect(wrapper.findComponent(GlEmptyState).exists()).toBe(false); }); it('shows gettingStarted state', () => { diff --git a/spec/frontend/monitoring/components/graph_group_spec.js b/spec/frontend/monitoring/components/graph_group_spec.js index 31f52f6627b..104263e73e0 100644 --- a/spec/frontend/monitoring/components/graph_group_spec.js +++ b/spec/frontend/monitoring/components/graph_group_spec.js @@ -6,10 +6,10 @@ import GraphGroup from '~/monitoring/components/graph_group.vue'; describe('Graph group component', () => { let wrapper; - const findGroup = () => wrapper.find({ ref: 'graph-group' }); - const findContent = () => wrapper.find({ ref: 'graph-group-content' }); - const findLoadingIcon = () => wrapper.find(GlLoadingIcon); - const findCaretIcon = () => wrapper.find(GlIcon); + const findGroup = () => wrapper.findComponent({ ref: 'graph-group' }); + const findContent = () => wrapper.findComponent({ ref: 'graph-group-content' }); + const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon); + const findCaretIcon = () => wrapper.findComponent(GlIcon); const findToggleButton = () => wrapper.find('[data-testid="group-toggle-button"]'); const createComponent = (propsData) => { diff --git a/spec/frontend/monitoring/components/group_empty_state_spec.js b/spec/frontend/monitoring/components/group_empty_state_spec.js index 1dd2ed4e141..e3cd26b0e48 100644 --- a/spec/frontend/monitoring/components/group_empty_state_spec.js +++ b/spec/frontend/monitoring/components/group_empty_state_spec.js @@ -45,7 +45,7 @@ describe('GroupEmptyState', () => { }); it('passes the expected props to GlEmptyState', () => { - expect(wrapper.find(GlEmptyState).props()).toMatchSnapshot(); + expect(wrapper.findComponent(GlEmptyState).props()).toMatchSnapshot(); }); }); }); diff --git a/spec/frontend/monitoring/components/links_section_spec.js b/spec/frontend/monitoring/components/links_section_spec.js index c9b5aeeecb8..94938e7f459 100644 --- a/spec/frontend/monitoring/components/links_section_spec.js +++ b/spec/frontend/monitoring/components/links_section_spec.js @@ -21,7 +21,7 @@ describe('Links Section component', () => { links, }; }; - const findLinks = () => wrapper.findAll(GlLink); + const findLinks = () => wrapper.findAllComponents(GlLink); beforeEach(() => { store = createStore(); diff --git a/spec/frontend/monitoring/components/refresh_button_spec.js b/spec/frontend/monitoring/components/refresh_button_spec.js index 0e45cc021c5..e00736954a9 100644 --- a/spec/frontend/monitoring/components/refresh_button_spec.js +++ b/spec/frontend/monitoring/components/refresh_button_spec.js @@ -15,9 +15,9 @@ describe('RefreshButton', () => { wrapper = shallowMount(RefreshButton, { store, ...options }); }; - const findRefreshBtn = () => wrapper.find(GlButton); - const findDropdown = () => wrapper.find(GlDropdown); - const findOptions = () => findDropdown().findAll(GlDropdownItem); + const findRefreshBtn = () => wrapper.findComponent(GlButton); + const findDropdown = () => wrapper.findComponent(GlDropdown); + const findOptions = () => findDropdown().findAllComponents(GlDropdownItem); const findOptionAt = (index) => findOptions().at(index); const expectFetchDataToHaveBeenCalledTimes = (times) => { diff --git a/spec/frontend/monitoring/components/variables/dropdown_field_spec.js b/spec/frontend/monitoring/components/variables/dropdown_field_spec.js index 643bbb39f04..012e2e9c3e2 100644 --- a/spec/frontend/monitoring/components/variables/dropdown_field_spec.js +++ b/spec/frontend/monitoring/components/variables/dropdown_field_spec.js @@ -27,8 +27,8 @@ describe('Custom variable component', () => { }); }; - const findDropdown = () => wrapper.find(GlDropdown); - const findDropdownItems = () => wrapper.findAll(GlDropdownItem); + const findDropdown = () => wrapper.findComponent(GlDropdown); + const findDropdownItems = () => wrapper.findAllComponents(GlDropdownItem); it('renders dropdown element when all necessary props are passed', () => { createShallowWrapper(); diff --git a/spec/frontend/monitoring/components/variables_section_spec.js b/spec/frontend/monitoring/components/variables_section_spec.js index 64b93bd3027..d6f8aac99aa 100644 --- a/spec/frontend/monitoring/components/variables_section_spec.js +++ b/spec/frontend/monitoring/components/variables_section_spec.js @@ -24,8 +24,8 @@ describe('Metrics dashboard/variables section component', () => { }); }; - const findTextInputs = () => wrapper.findAll(TextField); - const findCustomInputs = () => wrapper.findAll(DropdownField); + const findTextInputs = () => wrapper.findAllComponents(TextField); + const findCustomInputs = () => wrapper.findAllComponents(DropdownField); beforeEach(() => { store = createStore(); diff --git a/spec/frontend/monitoring/pages/panel_new_page_spec.js b/spec/frontend/monitoring/pages/panel_new_page_spec.js index c89cbc52bcb..fa112fca2db 100644 --- a/spec/frontend/monitoring/pages/panel_new_page_spec.js +++ b/spec/frontend/monitoring/pages/panel_new_page_spec.js @@ -41,8 +41,8 @@ describe('monitoring/pages/panel_new_page', () => { }); }; - const findBackButton = () => wrapper.find(GlButtonStub); - const findPanelBuilder = () => wrapper.find(DashboardPanelBuilder); + const findBackButton = () => wrapper.findComponent(GlButtonStub); + const findPanelBuilder = () => wrapper.findComponent(DashboardPanelBuilder); beforeEach(() => { store = createStore(); diff --git a/spec/frontend/monitoring/router_spec.js b/spec/frontend/monitoring/router_spec.js index 7758dd351b7..368bd955fb3 100644 --- a/spec/frontend/monitoring/router_spec.js +++ b/spec/frontend/monitoring/router_spec.js @@ -61,8 +61,8 @@ describe('Monitoring router', () => { currentDashboard, }); - expect(wrapper.find(DashboardPage).exists()).toBe(true); - expect(wrapper.find(DashboardPage).find(Dashboard).exists()).toBe(true); + expect(wrapper.findComponent(DashboardPage).exists()).toBe(true); + expect(wrapper.findComponent(DashboardPage).findComponent(Dashboard).exists()).toBe(true); }); }); @@ -84,8 +84,8 @@ describe('Monitoring router', () => { currentDashboard, }); - expect(wrapper.find(DashboardPage).exists()).toBe(true); - expect(wrapper.find(DashboardPage).find(Dashboard).exists()).toBe(true); + expect(wrapper.findComponent(DashboardPage).exists()).toBe(true); + expect(wrapper.findComponent(DashboardPage).findComponent(Dashboard).exists()).toBe(true); }); }); @@ -100,7 +100,7 @@ describe('Monitoring router', () => { const wrapper = createWrapper(BASE_PATH, path); expect(wrapper.vm.$route.params.dashboard).toBe(currentDashboard); - expect(wrapper.find(PanelNewPage).exists()).toBe(true); + expect(wrapper.findComponent(PanelNewPage).exists()).toBe(true); }); }); }); diff --git a/spec/frontend/notes/components/note_body_spec.js b/spec/frontend/notes/components/note_body_spec.js index 0f765a8da87..f96394d9e86 100644 --- a/spec/frontend/notes/components/note_body_spec.js +++ b/spec/frontend/notes/components/note_body_spec.js @@ -7,7 +7,6 @@ import NoteAwardsList from '~/notes/components/note_awards_list.vue'; import NoteForm from '~/notes/components/note_form.vue'; import createStore from '~/notes/stores'; import notes from '~/notes/stores/modules/index'; -import { INTERNAL_NOTE_CLASSES } from '~/notes/constants'; import Suggestions from '~/vue_shared/components/markdown/suggestions.vue'; @@ -59,22 +58,10 @@ describe('issue_note_body component', () => { expect(wrapper.findComponent(NoteAwardsList).exists()).toBe(true); }); - it('should not have internal note classes', () => { - expect(wrapper.findByTestId('note-internal-container').classes()).not.toEqual( - INTERNAL_NOTE_CLASSES, - ); - }); - describe('isInternalNote', () => { beforeEach(() => { wrapper = createComponent({ props: { isInternalNote: true } }); }); - - it('should have internal note classes', () => { - expect(wrapper.findByTestId('note-internal-container').classes()).toEqual( - INTERNAL_NOTE_CLASSES, - ); - }); }); describe('isEditing', () => { @@ -110,12 +97,6 @@ describe('issue_note_body component', () => { beforeEach(() => { wrapper.setProps({ isInternalNote: true }); }); - - it('should not have internal note classes', () => { - expect(wrapper.findByTestId('note-internal-container').classes()).not.toEqual( - INTERNAL_NOTE_CLASSES, - ); - }); }); }); diff --git a/spec/frontend/notes/components/noteable_note_spec.js b/spec/frontend/notes/components/noteable_note_spec.js index c2c3643abb0..e049c5bc0c8 100644 --- a/spec/frontend/notes/components/noteable_note_spec.js +++ b/spec/frontend/notes/components/noteable_note_spec.js @@ -290,6 +290,20 @@ describe('issue_note', () => { }); }); + describe('internal note', () => { + it('has internal note class for internal notes', () => { + createWrapper({ note: { ...note, confidential: true } }); + + expect(wrapper.classes()).toContain('internal-note'); + }); + + it('does not have internal note class for external notes', () => { + createWrapper({ note }); + + expect(wrapper.classes()).not.toContain('internal-note'); + }); + }); + describe('cancel edit', () => { beforeEach(() => { createWrapper(); |