[EE] Prefer toHaveLength in Jest

'toHaveLength' is preferred over other expect functions.
It gives more clear messages and prepares our codebase for
recommended style rules for Jest.

ee/spec/frontend/analytics/code_review_analytics/components/merge_request_table_spec.js

@@ -89,7 +89,7 @@ describe('MergeRequestTable component', () => {
       ];
       const headers = findTable().findAll('th');
 
-      expect(headers.length).toBe(tableHeaders.length);
+      expect(headers).toHaveLength(tableHeaders.length);
 
       tableHeaders.forEach((headerText, i) => expect(headers.at(i).text()).toEqual(headerText));
     });

ee/spec/frontend/analytics/cycle_analytics/components/add_stage_button_spec.js

@@ -28,7 +28,7 @@ describe('AddStageButton', () => {
       expect(wrapper.emitted().showform).toBeUndefined();
       wrapper.trigger('click');
       return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.emitted().showform.length).toBe(1);
+        expect(wrapper.emitted().showform).toHaveLength(1);
       });
     });
 

ee/spec/frontend/analytics/cycle_analytics/components/custom_stage_form_spec.js

@@ -288,7 +288,7 @@ describe('CustomStageForm', () => {
     it('will update the list of stop events when a start event is changed', () => {
       let stopOptions = wrapper.find(sel.endEvent).findAll('option');
       const selectedStartEvent = startEvents[startEventDropdownIndex];
-      expect(stopOptions.length).toEqual(1);
+      expect(stopOptions).toHaveLength(1);
 
       selectDropdownOption(wrapper, sel.startEvent, startEventDropdownIndex);
 
@@ -488,7 +488,7 @@ describe('CustomStageForm', () => {
         return Vue.nextTick().then(() => {
           event = findEvent(STAGE_ACTIONS.CREATE);
           expect(event).toBeTruthy();
-          expect(event.length).toEqual(1);
+          expect(event).toHaveLength(1);
         });
       });
 
@@ -583,7 +583,7 @@ describe('CustomStageForm', () => {
         .then(() => {
           ev = findEvent('cancel');
           expect(ev).toBeTruthy();
-          expect(ev.length).toEqual(1);
+          expect(ev).toHaveLength(1);
         });
     });
   });
@@ -697,7 +697,7 @@ describe('CustomStageForm', () => {
           .then(() => {
             ev = findEvent(STAGE_ACTIONS.UPDATE);
             expect(ev).toBeTruthy();
-            expect(ev.length).toEqual(1);
+            expect(ev).toHaveLength(1);
           });
       });
 

ee/spec/frontend/analytics/cycle_analytics/components/stage_build_item_spec.js

@@ -43,7 +43,7 @@ describe('StageBuildItem', () => {
   it('will render the events list', () => {
     const items = wrapper.findAll($sel.item);
     expect(items.length > 0).toBe(true);
-    expect(items.length).toEqual(events.length);
+    expect(items).toHaveLength(events.length);
   });
   it('will render the build pipeline id', () => {
     events.forEach((item, index) => {

ee/spec/frontend/analytics/cycle_analytics/components/stage_event_item_spec.js

@@ -38,7 +38,7 @@ describe('StageEventItem', () => {
   it('will render the events list', () => {
     const items = wrapper.findAll($sel.item);
     expect(items.length > 0).toBe(true);
-    expect(items.length).toEqual(events.length);
+    expect(items).toHaveLength(events.length);
   });
 
   it('will render the title of each event', () => {

ee/spec/frontend/analytics/cycle_analytics/components/stage_table_spec.js

@@ -65,7 +65,7 @@ describe('StageTable', () => {
     });
     it('will render the headers', () => {
       const renderedHeaders = wrapper.findAll($sel.headers);
-      expect(renderedHeaders.length).toEqual(headers.length);
+      expect(renderedHeaders).toHaveLength(headers.length);
 
       const headerText = wrapper.find($sel.headersList).text();
       headers.forEach(title => {
@@ -89,7 +89,7 @@ describe('StageTable', () => {
 
     it('will render the correct stages', () => {
       const evs = wrapper.findAll({ name: 'StageNavItem' });
-      expect(evs.length).toEqual(allowedStages.length);
+      expect(evs).toHaveLength(allowedStages.length);
 
       const nav = wrapper.find($sel.nav).html();
       allowedStages.forEach(stage => {
@@ -109,7 +109,7 @@ describe('StageTable', () => {
 
     it('will render the correct events', () => {
       const evs = wrapper.findAll($sel.events);
-      expect(evs.length).toEqual(issueEvents.length);
+      expect(evs).toHaveLength(issueEvents.length);
 
       const evshtml = wrapper.find($sel.eventList).html();
       issueEvents.forEach(ev => {
@@ -131,7 +131,7 @@ describe('StageTable', () => {
         selectStage(1);
 
         Vue.nextTick(() => {
-          expect(wrapper.emitted().selectStage.length).toEqual(1);
+          expect(wrapper.emitted().selectStage).toHaveLength(1);
           done();
         });
       });

ee/spec/frontend/analytics/cycle_analytics/utils_spec.js

@@ -292,12 +292,12 @@ describe('Cycle analytics utils', () => {
         });
 
         it('contains an array of data for each label', () => {
-          expect(transformed.data.length).toEqual(labels.length);
+          expect(transformed.data).toHaveLength(labels.length);
         });
 
         it('contains a value for each day in the groupBy', () => {
           transformed.data.forEach(d => {
-            expect(d.length).toEqual(transformed.groupBy.length);
+            expect(d).toHaveLength(transformed.groupBy.length);
           });
         });
       });

ee/spec/frontend/analytics/productivity_analytics/components/metric_chart_spec.js

@@ -122,7 +122,7 @@ describe('MetricChart component', () => {
           });
 
           it('renders a dropdown item for each item in metricTypes', () => {
-            expect(findMetricDropdownItems().length).toBe(2);
+            expect(findMetricDropdownItems()).toHaveLength(2);
           });
 
           it('should emit `metricTypeChange` event when dropdown item gets clicked', () => {

ee/spec/frontend/analytics/productivity_analytics/components/mr_table_row_spec.js

@@ -78,7 +78,7 @@ describe('MergeRequestTableRow component', () => {
 
     describe('metric columns', () => {
       it('renders two metric columns', () => {
-        expect(findMetricColumns().length).toBe(2);
+        expect(findMetricColumns()).toHaveLength(2);
       });
 
       it('renders the "Time to merge" metric column with the "days_to_merge" metric', () => {

ee/spec/frontend/analytics/productivity_analytics/components/mr_table_spec.js

@@ -55,11 +55,11 @@ describe('MergeRequestTable component', () => {
     });
 
     it('renders a dropdown item for each item in columnOptions', () => {
-      expect(findDropdownItems().length).toBe(Object.keys(defaultProps.columnOptions).length);
+      expect(findDropdownItems()).toHaveLength(Object.keys(defaultProps.columnOptions).length);
     });
 
     it('renders a row for every MR', () => {
-      expect(findMergeRequestTableRows().length).toBe(2);
+      expect(findMergeRequestTableRows()).toHaveLength(2);
     });
   });
 

ee/spec/frontend/analytics/shared/components/date_range_dropdown_spec.js

@@ -31,7 +31,7 @@ describe('DateRangeDropdown component', () => {
   });
 
   it('renders 3 dropdown items', () => {
-    expect(findDropdownElements().length).toBe(3);
+    expect(findDropdownElements()).toHaveLength(3);
   });
 
   it('displays the correct label for the first dropdown item', () => {

ee/spec/frontend/analytics/shared/components/groups_dropdown_filter_spec.js

@@ -88,7 +88,7 @@ describe('GroupsDropdownFilter component', () => {
     });
 
     it('should contain 2 items', () => {
-      expect(findDropdownItems().length).toEqual(2);
+      expect(findDropdownItems()).toHaveLength(2);
     });
 
     it('renders an avatar when the group has an avatar_url', () => {

ee/spec/frontend/analytics/shared/components/projects_dropdown_filter_spec.js

@@ -132,7 +132,7 @@ describe('ProjectsDropdownFilter component', () => {
       });
 
       it('contains 3 items', () => {
-        expect(findDropdownItems().length).toEqual(3);
+        expect(findDropdownItems()).toHaveLength(3);
       });
 
       it('renders an avatar when the project has an avatar_url', () => {
@@ -257,7 +257,7 @@ describe('ProjectsDropdownFilter component', () => {
       });
 
       it('contains 3 items', () => {
-        expect(findDropdownItems().length).toEqual(3);
+        expect(findDropdownItems()).toHaveLength(3);
       });
 
       it('renders an avatar when the project has an avatar_url', () => {

ee/spec/frontend/approvals/components/mr_edit/mr_rules_spec.js

@@ -152,7 +152,7 @@ describe('EE Approvals MRRules', () => {
       store.modules.approvals.state.rules = [createMRRule()];
       factory();
 
-      expect(store.modules.approvals.state.rules.length).toBe(2);
+      expect(store.modules.approvals.state.rules).toHaveLength(2);
     });
 
     it('should always display any_approver first', () => {
@@ -170,7 +170,7 @@ describe('EE Approvals MRRules', () => {
         rule => rule.ruleType === 'any_approver',
       );
 
-      expect(anyApproverCount.length).toBe(1);
+      expect(anyApproverCount).toHaveLength(1);
     });
 
     it('renders headers when there are multiple rules', () => {
@@ -254,7 +254,7 @@ describe('EE Approvals MRRules', () => {
       factory();
 
       expect(store.modules.approvals.state.rules[0].ruleType).toBe('regular');
-      expect(store.modules.approvals.state.rules.length).toBe(1);
+      expect(store.modules.approvals.state.rules).toHaveLength(1);
     });
 
     it('should only show single any_approver rule', () => {
@@ -262,7 +262,7 @@ describe('EE Approvals MRRules', () => {
       factory();
 
       expect(store.modules.approvals.state.rules[0].ruleType).toBe('any_approver');
-      expect(store.modules.approvals.state.rules.length).toBe(1);
+      expect(store.modules.approvals.state.rules).toHaveLength(1);
     });
 
     it('does not show name header for any rule', () => {

ee/spec/frontend/billings/components/subscription_table_spec.js

@@ -79,7 +79,7 @@ describe('SubscriptionTable component', () => {
     });
 
     it('should render a "Usage" and a "Billing" row', () => {
-      expect(wrapper.findAll(SubscriptionTableRow).length).toBe(2);
+      expect(wrapper.findAll(SubscriptionTableRow)).toHaveLength(2);
     });
   });
 

ee/spec/frontend/boards/components/board_list_selector/list_container_spec.js

@@ -27,7 +27,7 @@ describe('ListContainer', () => {
       it('returns assignees list as it is when `query` is empty', () => {
         wrapper.setData({ query: '' });
 
-        expect(wrapper.vm.filteredItems.length).toBe(mockAssigneesList.length);
+        expect(wrapper.vm.filteredItems).toHaveLength(mockAssigneesList.length);
       });
 
       it('returns filtered assignees list as it is when `query` has name', () => {
@@ -35,7 +35,7 @@ describe('ListContainer', () => {
 
         wrapper.setData({ query: assignee.name });
 
-        expect(wrapper.vm.filteredItems.length).toBe(1);
+        expect(wrapper.vm.filteredItems).toHaveLength(1);
         expect(wrapper.vm.filteredItems[0].name).toBe(assignee.name);
       });
 
@@ -44,7 +44,7 @@ describe('ListContainer', () => {
 
         wrapper.setData({ query: assignee.username });
 
-        expect(wrapper.vm.filteredItems.length).toBe(1);
+        expect(wrapper.vm.filteredItems).toHaveLength(1);
         expect(wrapper.vm.filteredItems[0].username).toBe(assignee.username);
       });
     });

ee/spec/frontend/boards/components/board_scope_spec.js

@@ -43,13 +43,13 @@ describe('BoardScope', () => {
         vm.handleLabelClick(labelIsAny);
 
         expect(Array.isArray(vm.board.labels)).toBe(true);
-        expect(vm.board.labels.length).toBe(0);
+        expect(vm.board.labels).toHaveLength(0);
       });
 
       it('adds provided `label` to board.labels', () => {
         vm.handleLabelClick(label);
 
-        expect(vm.board.labels.length).toBe(1);
+        expect(vm.board.labels).toHaveLength(1);
         expect(vm.board.labels[0].id).toBe(label.id);
         vm.handleLabelClick(label);
       });

ee/spec/frontend/boards/issue_card_spec.js

@@ -87,7 +87,7 @@ describe('Issue card component', () => {
 
       createComponent({ groupId: 1 });
 
-      expect(wrapper.findAll(GlLabel).length).toBe(3);
+      expect(wrapper.findAll(GlLabel)).toHaveLength(3);
       expect(wrapper.find(GlLabel).props('title')).toContain(title);
     });
 
@@ -101,7 +101,7 @@ describe('Issue card component', () => {
       };
       createComponent({}, store);
 
-      expect(wrapper.findAll('.board-card-labels').length).toBe(0);
+      expect(wrapper.findAll('.board-card-labels')).toHaveLength(0);
     });
   });
 

ee/spec/frontend/boards/stores/boards_store_ee_spec.js

@@ -56,7 +56,7 @@ describe('BoardsStoreEE', () => {
       state[listType] = ['something'];
 
       return BoardsStoreEE.loadList(listPath, listType).then(() => {
-        expect(axiosMock.history.get.length).toBe(0);
+        expect(axiosMock.history.get).toHaveLength(0);
       });
     });
   });

ee/spec/frontend/burndown_chart/components/burn_charts_spec.js

@@ -42,7 +42,7 @@ describe('burndown_chart', () => {
   it('defaults to total issues', () => {
     createComponent();
 
-    expect(findActiveButtons().length).toBe(1);
+    expect(findActiveButtons()).toHaveLength(1);
     expect(
       findActiveButtons()
         .at(0)
@@ -57,7 +57,7 @@ describe('burndown_chart', () => {
     findWeightButton().vm.$emit('click');
 
     return wrapper.vm.$nextTick().then(() => {
-      expect(findActiveButtons().length).toBe(1);
+      expect(findActiveButtons()).toHaveLength(1);
       expect(
         findActiveButtons()
           .at(0)

ee/spec/frontend/burndown_chart/components/burndown_chart_spec.js

@@ -27,7 +27,7 @@ describe('burndown_chart', () => {
       });
 
       const data = wrapper.vm.dataSeries;
-      expect(data.length).toBe(1);
+      expect(data).toHaveLength(1);
       expect(data[0].name).not.toBe('Guideline');
     });
   });
@@ -43,7 +43,7 @@ describe('burndown_chart', () => {
       });
 
       const data = wrapper.vm.dataSeries;
-      expect(data.length).toBe(2);
+      expect(data).toHaveLength(2);
       expect(data[1].name).toBe('Guideline');
     });
   });

ee/spec/frontend/clusters/components/environments_spec.js

@@ -55,7 +55,7 @@ describe('Environments', () => {
       const tableHeaders = ['Project', 'Environment', 'Job', `Pods in use 2`, 'Last updated'];
       const headers = table.findAll('th');
 
-      expect(headers.length).toBe(tableHeaders.length);
+      expect(headers).toHaveLength(tableHeaders.length);
 
       tableHeaders.forEach((headerText, i) => expect(headers.at(i).text()).toEqual(headerText));
     });
@@ -87,7 +87,7 @@ describe('Environments', () => {
         environments.forEach((environment, i) => {
           const { instances } = environment.rolloutStatus;
 
-          expect(tableRows.at(i).findAll('.js-deployment-instance').length).toBe(instances.length);
+          expect(tableRows.at(i).findAll('.js-deployment-instance')).toHaveLength(instances.length);
         });
       });
 

ee/spec/frontend/codequality_report/codequality_report_spec.js

@@ -69,7 +69,7 @@ describe('Codequality report app', () => {
 
       expect(findWarningIcon().exists()).toBe(true);
       expect(findStatus().text()).toBe(`Found ${expectedIssueTotal} code quality issues`);
-      expect(wrapper.findAll('.report-block-list-issue').length).toBe(expectedIssueTotal);
+      expect(wrapper.findAll('.report-block-list-issue')).toHaveLength(expectedIssueTotal);
     });
 
     it('renders a link to the line where the issue was found', () => {
@@ -90,7 +90,7 @@ describe('Codequality report app', () => {
     it('shows a message that no codequality issues were found', () => {
       expect(findSuccessIcon().exists()).toBe(true);
       expect(findStatus().text()).toBe('No code quality issues found');
-      expect(wrapper.findAll('.report-block-list-issue').length).toBe(0);
+      expect(wrapper.findAll('.report-block-list-issue')).toHaveLength(0);
     });
   });
 });

ee/spec/frontend/dependencies/components/dependencies_table_row_spec.js

@@ -147,7 +147,7 @@ describe('DependenciesTableRow component', () => {
     });
 
     it('does not render all of them', () => {
-      expect(findVulnerabilities().length).toBe(MAX_DISPLAYED_VULNERABILITIES_PER_DEPENDENCY);
+      expect(findVulnerabilities()).toHaveLength(MAX_DISPLAYED_VULNERABILITIES_PER_DEPENDENCY);
       expect(findExcessMessage().isVisible()).toBe(true);
     });
   });

ee/spec/frontend/dependencies/components/dependency_license_links_spec.js

@@ -49,7 +49,7 @@ describe('DependencyLicenseLinks component', () => {
   it.each([3, 5, 8, 13])('limits the number of visible licenses to 2', numLicenses => {
     factory({ numLicenses });
 
-    expect(findLicenseListItems().length).toBe(2);
+    expect(findLicenseListItems()).toHaveLength(2);
   });
 
   it.each`
@@ -65,9 +65,9 @@ describe('DependencyLicenseLinks component', () => {
     ({ numLicenses, numLicensesWithUrl, expectedNumVisibleLinks, expectedNumModalLinks }) => {
       factory({ numLicenses, numLicensesWithUrl });
 
-      expect(findLicensesList().findAll(GlLink).length).toBe(expectedNumVisibleLinks);
+      expect(findLicensesList().findAll(GlLink)).toHaveLength(expectedNumVisibleLinks);
 
-      expect(findModal().findAll(GlLink).length).toBe(expectedNumModalLinks);
+      expect(findModal().findAll(GlLink)).toHaveLength(expectedNumModalLinks);
     },
   );
 
@@ -108,7 +108,7 @@ describe('DependencyLicenseLinks component', () => {
     ({ numLicenses, expectedNumModals }) => {
       factory({ numLicenses, expectedNumModals });
 
-      expect(wrapper.findAll(GlModal).length).toBe(expectedNumModals);
+      expect(wrapper.findAll(GlModal)).toHaveLength(expectedNumModals);
     },
   );
 
@@ -159,6 +159,6 @@ describe('DependencyLicenseLinks component', () => {
   `('contains the correct modal content', ({ numLicenses, expectedLicensesInModal }) => {
     factory({ numLicenses });
 
-    expect(findModalItem().length).toBe(expectedLicensesInModal);
+    expect(findModalItem()).toHaveLength(expectedLicensesInModal);
   });
 });

ee/spec/frontend/dependencies/components/dependency_vulnerabilities_spec.js

@@ -53,7 +53,7 @@ describe('DependencVulnerabilities component', () => {
     });
 
     it('does not render all of them', () => {
-      expect(findVulnerabilities().length).toBe(MAX_DISPLAYED_VULNERABILITIES_PER_DEPENDENCY);
+      expect(findVulnerabilities()).toHaveLength(MAX_DISPLAYED_VULNERABILITIES_PER_DEPENDENCY);
     });
 
     it('renders the excess message', () => {

ee/spec/frontend/design_management/components/design_notes/design_discussion_spec.js

@@ -64,7 +64,7 @@ describe('Design discussions component', () => {
   });
 
   it('renders correct amount of discussion notes', () => {
-    expect(wrapper.findAll(DesignNote).length).toBe(2);
+    expect(wrapper.findAll(DesignNote)).toHaveLength(2);
   });
 
   it('renders reply placeholder by default', () => {

ee/spec/frontend/design_management/components/design_overlay_spec.js

@@ -77,7 +77,7 @@ describe('Design overlay component', () => {
     });
 
     it('should render a correct amount of notes', () => {
-      expect(findAllNotes().length).toBe(notes.length);
+      expect(findAllNotes()).toHaveLength(notes.length);
     });
 
     it('should have a correct style for each note badge', () => {

ee/spec/frontend/design_management/components/upload/design_version_dropdown_spec.js

@@ -107,7 +107,7 @@ describe('Design management design version dropdown component', () => {
       createComponent();
 
       return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.findAll(GlDropdownItem).length).toEqual(wrapper.vm.allVersions.length);
+        expect(wrapper.findAll(GlDropdownItem)).toHaveLength(wrapper.vm.allVersions.length);
       });
     });
   });

ee/spec/frontend/design_management/pages/design/index_spec.js

@@ -113,7 +113,7 @@ describe('Design management design index page', () => {
   });
 
   it('passes the correct amount of participants to the Participants component', () => {
-    expect(findParticipants().props('participants').length).toBe(1);
+    expect(findParticipants().props('participants')).toHaveLength(1);
   });
 
   describe('when has no discussions', () => {
@@ -149,7 +149,7 @@ describe('Design management design index page', () => {
     });
 
     it('renders correct amount of discussions', () => {
-      expect(findDiscussions().length).toBe(1);
+      expect(findDiscussions()).toHaveLength(1);
     });
   });
 

ee/spec/frontend/design_management/pages/index_spec.js

@@ -379,7 +379,7 @@ describe('Design management index page', () => {
     });
 
     it('renders design checkboxes', () => {
-      expect(findDesignCheckboxes().length).toBe(mockDesigns.length);
+      expect(findDesignCheckboxes()).toHaveLength(mockDesigns.length);
     });
 
     it('renders toolbar buttons', () => {
@@ -460,7 +460,7 @@ describe('Design management index page', () => {
     });
 
     it('does not render design checkboxes', () => {
-      expect(findDesignCheckboxes().length).toBe(0);
+      expect(findDesignCheckboxes()).toHaveLength(0);
     });
 
     it('does not render Delete selected button', () => {

ee/spec/frontend/environments/deploy_board_component_spec.js

@@ -40,7 +40,7 @@ describe('Deploy Board', () => {
     it('should render all instances', () => {
       const instances = wrapper.findAll('.deploy-board-instances-container a');
 
-      expect(instances.length).toEqual(deployBoardMockData.instances.length);
+      expect(instances).toHaveLength(deployBoardMockData.instances.length);
       expect(
         instances.at(1).classes(`deployment-instance-${deployBoardMockData.instances[2].status}`),
       ).toBe(true);
@@ -129,7 +129,7 @@ describe('Deploy Board', () => {
       const deployBoardLegend = wrapper.find('.deploy-board-legend');
 
       expect(deployBoardLegend).toBeDefined();
-      expect(deployBoardLegend.findAll('a').length).toBe(Object.keys(statuses).length);
+      expect(deployBoardLegend.findAll('a')).toHaveLength(Object.keys(statuses).length);
     });
 
     Object.keys(statuses).forEach(item => {

ee/spec/frontend/environments_dashboard/components/dashboard_spec.js

@@ -113,7 +113,7 @@ describe('dashboard', () => {
     describe('project header', () => {
       it('should have one project header per project', () => {
         const headers = wrapper.findAll(ProjectHeader);
-        expect(headers.length).toBe(2);
+        expect(headers).toHaveLength(2);
       });
 
       it('should remove a project if it emits `remove`', () => {
@@ -126,7 +126,7 @@ describe('dashboard', () => {
     describe('environment component', () => {
       it('should have one environment component per environment', () => {
         const environments = wrapper.findAll(Environment);
-        expect(environments.length).toBe(3);
+        expect(environments).toHaveLength(3);
       });
     });
 

ee/spec/frontend/epic/components/epic_sidebar_spec.js

@@ -234,7 +234,7 @@ describe('EpicSidebarComponent', () => {
 
             expect(ancestorsEl).not.toBeNull();
 
-            expect(getEls('li.vertical-timeline-row').length).toBe(reverseAncestors.length);
+            expect(getEls('li.vertical-timeline-row')).toHaveLength(reverseAncestors.length);
 
             expect(getEls('a').map(el => el.innerText.trim())).toEqual(
               reverseAncestors.map(a => a.title),

ee/spec/frontend/epic/components/sidebar_items/sidebar_labels_spec.js

@@ -97,14 +97,14 @@ describe('SidebarLabelsComponent', () => {
         wrapper.vm.handleLabelClick(labelIsAny);
 
         expect(Array.isArray(wrapper.vm.epicContext.labels)).toBe(true);
-        expect(wrapper.vm.epicContext.labels.length).toBe(0);
+        expect(wrapper.vm.epicContext.labels).toHaveLength(0);
       });
 
       it('adds provided `label` to epicContext.labels', () => {
         wrapper.vm.handleLabelClick(label);
         // epicContext.labels gets initialized with initialLabels, hence
         // newly insert label will be at second position (index `1`)
-        expect(wrapper.vm.epicContext.labels.length).toBe(2);
+        expect(wrapper.vm.epicContext.labels).toHaveLength(2);
         expect(wrapper.vm.epicContext.labels[1].id).toBe(label.id);
         wrapper.vm.handleLabelClick(label);
       });
@@ -113,7 +113,7 @@ describe('SidebarLabelsComponent', () => {
         wrapper.vm.handleLabelClick(label); // Select
         wrapper.vm.handleLabelClick(label); // Un-select
 
-        expect(wrapper.vm.epicContext.labels.length).toBe(1);
+        expect(wrapper.vm.epicContext.labels).toHaveLength(1);
         expect(wrapper.vm.epicContext.labels[0].id).toBe(mockLabels[0].id);
       });
     });

ee/spec/frontend/epic/store/getters_spec.js

@@ -266,14 +266,14 @@ describe('Epic Store Getters', () => {
         ancestors: [{ id: 1, title: 'Parent' }],
       });
 
-      expect(ancestors.length).toBe(1);
+      expect(ancestors).toHaveLength(1);
     });
 
     it('returns empty array when `ancestors` within state is null', () => {
       const ancestors = getters.ancestors({});
 
       expect(ancestors).not.toBeNull();
-      expect(ancestors.length).toBe(0);
+      expect(ancestors).toHaveLength(0);
     });
   });
 });

ee/spec/frontend/feature_flags/components/form_spec.js

@@ -78,7 +78,7 @@ describe('feature flag form', () => {
           it('should add a new scope with the text value empty and the status', () => {
             wrapper.find(ToggleButton).vm.$emit('change', true);
 
-            expect(wrapper.vm.formScopes.length).toEqual(1);
+            expect(wrapper.vm.formScopes).toHaveLength(1);
             expect(wrapper.vm.formScopes[0].active).toEqual(true);
             expect(wrapper.vm.formScopes[0].environmentScope).toEqual('');
 

ee/spec/frontend/filtered_search/issues_filtered_search_token_keys_spec.js

@@ -42,7 +42,7 @@ describe('Issues Filtered Search Token Keys (EE)', () => {
     it('should return weightConditions as part of conditions', () => {
       const weightConditions = conditions.filter(c => c.tokenKey === 'weight');
 
-      expect(weightConditions.length).toBe(4);
+      expect(weightConditions).toHaveLength(4);
     });
   });
 

ee/spec/frontend/geo_nodes/components/geo_node_event_status_spec.js

@@ -74,7 +74,7 @@ describe('GeoNodeEventStatus', () => {
       });
 
       expect(vmWithoutTimestamp.$el.querySelectorAll('strong').length).not.toBe(0);
-      expect(vmWithoutTimestamp.$el.querySelectorAll('.event-status-timestamp').length).toBe(0);
+      expect(vmWithoutTimestamp.$el.querySelectorAll('.event-status-timestamp')).toHaveLength(0);
       expect(vmWithoutTimestamp.$el.querySelector('strong').innerText.trim()).toBe('Not available');
       vmWithoutTimestamp.$destroy();
     });

ee/spec/frontend/geo_nodes/components/node_detail_sections/node_details_section_other_spec.js

@@ -43,7 +43,7 @@ describe('NodeDetailsSectionOther', () => {
 
         const items = vmNodePrimary.nodeDetailItems;
 
-        expect(items.length).toBe(3);
+        expect(items).toHaveLength(3);
         expect(items[0].itemTitle).toBe('Replication slots');
         expect(items[0].itemValue).toBe(mockNodeDetails.replicationSlots);
         expect(items[1].itemTitle).toBe('Replication slot WAL');
@@ -57,7 +57,7 @@ describe('NodeDetailsSectionOther', () => {
       it('returns array containing items to show under secondary node when prop `nodeTypePrimary` is false', () => {
         const items = vm.nodeDetailItems;
 
-        expect(items.length).toBe(1);
+        expect(items).toHaveLength(1);
         expect(items[0].itemTitle).toBe('Storage config');
       });
     });

ee/spec/frontend/geo_nodes/store/geo_nodes_store_spec.js

@@ -23,7 +23,7 @@ describe('GeoNodesStore', () => {
     it('sets nodes list to state', () => {
       store.setNodes(mockNodes);
 
-      expect(store.getNodes().length).toBe(mockNodes.length);
+      expect(store.getNodes()).toHaveLength(mockNodes.length);
     });
   });
 

ee/spec/frontend/group_member_contributions/components/table_body_spec.js

@@ -33,7 +33,7 @@ describe('TableBodyComponent', () => {
       const rowEl = vm.$el.querySelector('tr');
 
       expect(rowEl).not.toBeNull();
-      expect(rowEl.querySelectorAll('td').length).toBe(7);
+      expect(rowEl.querySelectorAll('td')).toHaveLength(7);
     });
 
     it('renders username row cell element', () => {

ee/spec/frontend/group_member_contributions/store/group_member_store_spec.js

@@ -39,7 +39,7 @@ describe('GroupMemberStore', () => {
     it('sets members to store state', () => {
       store.setMembers(rawMembers);
 
-      expect(store.state.members.length).toBe(rawMembers.length);
+      expect(store.state.members).toHaveLength(rawMembers.length);
     });
   });
 

ee/spec/frontend/ide/components/terminal/empty_state_spec.js

@@ -84,7 +84,7 @@ describe('EE IDE TerminalEmptyState', () => {
 
       button.trigger('click');
 
-      expect(wrapper.emitted().start.length).toBe(1);
+      expect(wrapper.emitted().start).toHaveLength(1);
     });
 
     it('shows help path link', () => {

ee/spec/frontend/insights/stores/insights/mutations_spec.js

@@ -163,7 +163,7 @@ describe('Insights mutations', () => {
 
       const { chartData } = state;
 
-      expect(Object.keys(chartData[chart.title].data).length).toBe(0);
+      expect(Object.keys(chartData[chart.title].data)).toHaveLength(0);
     });
 
     it('sets charts type to incoming type on error', () => {

ee/spec/frontend/issuable/related_issues/components/related_issues_block_spec.js

@@ -105,7 +105,7 @@ describe('RelatedIssuesBlock', () => {
     });
 
     it('should render issue tokens items', () => {
-      expect(wrapper.findAll('.js-related-issues-token-list-item').length).toEqual(3);
+      expect(wrapper.findAll('.js-related-issues-token-list-item')).toHaveLength(3);
     });
 
     it('shows "Blocks" heading', () => {

ee/spec/frontend/issuable/related_issues/components/related_issues_root_spec.js

@@ -68,7 +68,7 @@ describe('RelatedIssuesRoot', () => {
         wrapper.vm.onRelatedIssueRemoveRequest(issuable1.id);
 
         return axios.waitForAll().then(() => {
-          expect(wrapper.vm.state.relatedIssues.length).toEqual(1);
+          expect(wrapper.vm.state.relatedIssues).toHaveLength(1);
           expect(wrapper.vm.state.relatedIssues[0].id).toEqual(issuable1.id);
         });
       });
@@ -100,11 +100,11 @@ describe('RelatedIssuesRoot', () => {
       );
 
       it('remove pending related issue', () => {
-        expect(wrapper.vm.state.pendingReferences.length).toEqual(1);
+        expect(wrapper.vm.state.pendingReferences).toHaveLength(1);
 
         wrapper.vm.onPendingIssueRemoveRequest(0);
 
-        expect(wrapper.vm.state.pendingReferences.length).toEqual(0);
+        expect(wrapper.vm.state.pendingReferences).toHaveLength(0);
       });
     });
 
@@ -140,8 +140,8 @@ describe('RelatedIssuesRoot', () => {
         wrapper.vm.onPendingFormSubmit({});
 
         return waitForPromises().then(() => {
-          expect(wrapper.vm.state.pendingReferences.length).toEqual(0);
-          expect(wrapper.vm.state.relatedIssues.length).toEqual(0);
+          expect(wrapper.vm.state.pendingReferences).toHaveLength(0);
+          expect(wrapper.vm.state.relatedIssues).toHaveLength(0);
         });
       });
 
@@ -158,8 +158,8 @@ describe('RelatedIssuesRoot', () => {
         wrapper.vm.onPendingFormSubmit({});
 
         return waitForPromises().then(() => {
-          expect(wrapper.vm.state.pendingReferences.length).toEqual(0);
-          expect(wrapper.vm.state.relatedIssues.length).toEqual(1);
+          expect(wrapper.vm.state.pendingReferences).toHaveLength(0);
+          expect(wrapper.vm.state.relatedIssues).toHaveLength(1);
           expect(wrapper.vm.state.relatedIssues[0].id).toEqual(issuable1.id);
         });
       });
@@ -177,8 +177,8 @@ describe('RelatedIssuesRoot', () => {
         wrapper.vm.onPendingFormSubmit({});
 
         return waitForPromises().then(() => {
-          expect(wrapper.vm.state.pendingReferences.length).toEqual(0);
-          expect(wrapper.vm.state.relatedIssues.length).toEqual(2);
+          expect(wrapper.vm.state.pendingReferences).toHaveLength(0);
+          expect(wrapper.vm.state.relatedIssues).toHaveLength(2);
           expect(wrapper.vm.state.relatedIssues[0].id).toEqual(issuable1.id);
           expect(wrapper.vm.state.relatedIssues[1].id).toEqual(issuable2.id);
         });
@@ -214,7 +214,7 @@ describe('RelatedIssuesRoot', () => {
         return wrapper.vm.$nextTick().then(() => {
           expect(wrapper.vm.isFormVisible).toEqual(false);
           expect(wrapper.vm.inputValue).toEqual('');
-          expect(wrapper.vm.state.pendingReferences.length).toEqual(0);
+          expect(wrapper.vm.state.pendingReferences).toHaveLength(0);
         });
       });
     });
@@ -238,7 +238,7 @@ describe('RelatedIssuesRoot', () => {
         wrapper.vm.fetchRelatedIssues();
 
         return waitForPromises().then(() => {
-          expect(wrapper.vm.state.relatedIssues.length).toEqual(2);
+          expect(wrapper.vm.state.relatedIssues).toHaveLength(2);
           expect(wrapper.vm.state.relatedIssues[0].id).toEqual(issuable1.id);
           expect(wrapper.vm.state.relatedIssues[1].id).toEqual(issuable2.id);
         });
@@ -255,7 +255,7 @@ describe('RelatedIssuesRoot', () => {
           touchedReference: input,
         });
 
-        expect(wrapper.vm.state.pendingReferences.length).toEqual(1);
+        expect(wrapper.vm.state.pendingReferences).toHaveLength(1);
         expect(wrapper.vm.state.pendingReferences[0]).toEqual('#123');
       });
 
@@ -263,7 +263,7 @@ describe('RelatedIssuesRoot', () => {
         const input = 'asdf/qwer#444 ';
         wrapper.vm.onInput({ untouchedRawReferences: [input.trim()], touchedReference: input });
 
-        expect(wrapper.vm.state.pendingReferences.length).toEqual(1);
+        expect(wrapper.vm.state.pendingReferences).toHaveLength(1);
         expect(wrapper.vm.state.pendingReferences[0]).toEqual('asdf/qwer#444');
       });
 
@@ -272,7 +272,7 @@ describe('RelatedIssuesRoot', () => {
         const input = `${link} `;
         wrapper.vm.onInput({ untouchedRawReferences: [input.trim()], touchedReference: input });
 
-        expect(wrapper.vm.state.pendingReferences.length).toEqual(1);
+        expect(wrapper.vm.state.pendingReferences).toHaveLength(1);
         expect(wrapper.vm.state.pendingReferences[0]).toEqual(link);
       });
 
@@ -283,7 +283,7 @@ describe('RelatedIssuesRoot', () => {
           touchedReference: 2,
         });
 
-        expect(wrapper.vm.state.pendingReferences.length).toEqual(2);
+        expect(wrapper.vm.state.pendingReferences).toHaveLength(2);
         expect(wrapper.vm.state.pendingReferences[0]).toEqual('asdf/qwer#444');
         expect(wrapper.vm.state.pendingReferences[1]).toEqual('#12');
       });
@@ -295,7 +295,7 @@ describe('RelatedIssuesRoot', () => {
           touchedReference: 2,
         });
 
-        expect(wrapper.vm.state.pendingReferences.length).toEqual(2);
+        expect(wrapper.vm.state.pendingReferences).toHaveLength(2);
         expect(wrapper.vm.state.pendingReferences[0]).toEqual('something');
         expect(wrapper.vm.state.pendingReferences[1]).toEqual('random');
       });
@@ -324,7 +324,7 @@ describe('RelatedIssuesRoot', () => {
         const input = '#123';
         wrapper.vm.processAllReferences(input);
 
-        expect(wrapper.vm.state.pendingReferences.length).toEqual(1);
+        expect(wrapper.vm.state.pendingReferences).toHaveLength(1);
         expect(wrapper.vm.state.pendingReferences[0]).toEqual('#123');
       });
 
@@ -332,7 +332,7 @@ describe('RelatedIssuesRoot', () => {
         const input = 'asdf #123';
         wrapper.vm.processAllReferences(input);
 
-        expect(wrapper.vm.state.pendingReferences.length).toEqual(2);
+        expect(wrapper.vm.state.pendingReferences).toHaveLength(2);
         expect(wrapper.vm.state.pendingReferences[0]).toEqual('asdf');
         expect(wrapper.vm.state.pendingReferences[1]).toEqual('#123');
       });

ee/spec/frontend/license_compliance/components/app_spec.js

@@ -169,7 +169,7 @@ describe('Project Licenses', () => {
     it('renders a "Detected in project" tab and a "Policies" tab', () => {
       expect(wrapper.find(GlTabs).exists()).toBe(true);
       expect(wrapper.find(GlTab).exists()).toBe(true);
-      expect(wrapper.findAll(GlTab).length).toBe(2);
+      expect(wrapper.findAll(GlTab)).toHaveLength(2);
     });
 
     it('it renders the "Detected in project" table', () => {

ee/spec/frontend/license_compliance/components/license_component_links_spec.js

@@ -50,7 +50,7 @@ describe('LicenseComponentLinks component', () => {
   it.each([3, 5, 8, 13])('limits the number of visible licenses to 2', numComponents => {
     factory({ numComponents });
 
-    expect(findComponentListItems().length).toBe(VISIBLE_COMPONENT_COUNT);
+    expect(findComponentListItems()).toHaveLength(VISIBLE_COMPONENT_COUNT);
   });
 
   it.each`
@@ -66,11 +66,11 @@ describe('LicenseComponentLinks component', () => {
     ({ numComponents, numComponentsWithUrl, expectedNumVisibleLinks, expectedNumModalLinks }) => {
       factory({ numComponents, numComponentsWithUrl });
 
-      expect(findComponentsList().findAll(GlLink).length).toBe(expectedNumVisibleLinks);
+      expect(findComponentsList().findAll(GlLink)).toHaveLength(expectedNumVisibleLinks);
 
       // findModal() is an empty wrapper if we have less than VISIBLE_COMPONENT_COUNT
       if (numComponents > VISIBLE_COMPONENT_COUNT) {
-        expect(findModal().findAll(GlLink).length).toBe(expectedNumModalLinks);
+        expect(findModal().findAll(GlLink)).toHaveLength(expectedNumModalLinks);
       } else {
         expect(findModal().exists()).toBe(false);
       }
@@ -114,7 +114,7 @@ describe('LicenseComponentLinks component', () => {
     ({ numComponents, expectedNumModals }) => {
       factory({ numComponents, expectedNumModals });
 
-      expect(wrapper.findAll(GlModal).length).toBe(expectedNumModals);
+      expect(wrapper.findAll(GlModal)).toHaveLength(expectedNumModals);
     },
   );
 

ee/spec/frontend/license_compliance/components/licenses_table_spec.js

@@ -32,7 +32,7 @@ describe('LicensesTable component', () => {
     });
 
     it('renders the empty license table', () => {
-      expect(findRows().length).toEqual(0);
+      expect(findRows()).toHaveLength(0);
     });
   });
 
@@ -53,7 +53,7 @@ describe('LicensesTable component', () => {
       });
 
       it('passes the correct props to the table rows', () => {
-        expect(findRows().length).toEqual(licenses.length);
+        expect(findRows()).toHaveLength(licenses.length);
         expect(findRows().wrappers.map(x => x.props())).toEqual(
           licenses.map(license => ({
             license,

ee/spec/frontend/onboarding/onboarding_helper/components/tour_parts_list_spec.js

@@ -57,7 +57,7 @@ describe('User onboarding tour parts list', () => {
 
   describe('template', () => {
     it('renders a list item for each tour title', () => {
-      expect(wrapper.findAll('.tour-item').length).toEqual(tourTitles.length);
+      expect(wrapper.findAll('.tour-item')).toHaveLength(tourTitles.length);
     });
 
     it('adds the "active" class to the first tour item', () => {

ee/spec/frontend/operations/components/dashboard/project_header_spec.js

@@ -65,7 +65,7 @@ describe('project header component', () => {
   describe('wrapped components', () => {
     describe('project avatar', () => {
       it('renders', () => {
-        expect(wrapper.findAll(ProjectAvatar).length).toBe(1);
+        expect(wrapper.findAll(ProjectAvatar)).toHaveLength(1);
       });
 
       it('binds project', () => {

ee/spec/frontend/packages/details/components/app_spec.js

@@ -104,7 +104,7 @@ describe('PackagesApp', () => {
     createComponent(npmPackage, npmFiles);
 
     expect(packageInformation(0)).toExist();
-    expect(allPackageInformation().length).toBe(1);
+    expect(allPackageInformation()).toHaveLength(1);
   });
 
   it('renders package installation instructions for npm packages', () => {
@@ -123,14 +123,14 @@ describe('PackagesApp', () => {
     createComponent(npmPackage, npmFiles);
 
     expect(allFileRows()).toExist();
-    expect(allFileRows().length).toBe(1);
+    expect(allFileRows()).toHaveLength(1);
   });
 
   it('renders multiple files for a package that contains more than one file', () => {
     createComponent();
 
     expect(allFileRows()).toExist();
-    expect(allFileRows().length).toBe(2);
+    expect(allFileRows()).toHaveLength(2);
   });
 
   it('allows the user to download a package file by rendering a download link', () => {

ee/spec/frontend/packages/details/components/information_spec.js

@@ -66,7 +66,7 @@ describe('PackageInformation', () => {
   it('renders the supplied information', () => {
     createComponent();
 
-    expect(informationSelector().length).toBe(3);
+    expect(informationSelector()).toHaveLength(3);
     expect(informationRowText(0)).toContain('one');
     expect(informationRowText(1)).toContain('two');
     expect(informationRowText(2)).toContain('three');
@@ -82,7 +82,7 @@ describe('PackageInformation', () => {
     it('does render when the prop is set and has correct text set', () => {
       createComponent({ showCopy: true });
 
-      expect(copyButton().length).toBe(3);
+      expect(copyButton()).toHaveLength(3);
       expect(copyButton().at(0).vm.text).toBe(defaultProps.information[0].value);
       expect(copyButton().at(1).vm.text).toBe(defaultProps.information[1].value);
       expect(copyButton().at(2).vm.text).toBe(defaultProps.information[2].value);

ee/spec/frontend/packages/list/components/packages_sort_spec.js

@@ -60,7 +60,7 @@ describe('packages_sort', () => {
     });
 
     it('has all the sortable items', () => {
-      expect(sortingItems.length).toEqual(wrapper.vm.sortableFields.length);
+      expect(sortingItems).toHaveLength(wrapper.vm.sortableFields.length);
     });
 
     it('on sort change set sorting in vuex and emit event', () => {
@@ -86,7 +86,7 @@ describe('packages_sort', () => {
     });
 
     it('has all the sortable items', () => {
-      expect(sortingItems.length).toEqual(wrapper.vm.sortableFields.length);
+      expect(sortingItems).toHaveLength(wrapper.vm.sortableFields.length);
     });
   });
 });

ee/spec/frontend/pages/admin/application_settings/ci_cd/ci_template_spec.js

@@ -25,9 +25,9 @@ describe('CI Template Dropdown (ee/pages/admin/application_settings/ci_cd/ci_tem
 
   describe('Init Dropdown', () => {
     it('Instantiates dropdown objects', () => {
-      expect(CiTemplateInstance.$input.length).toBe(1);
-      expect(CiTemplateInstance.$dropdown.length).toBe(1);
-      expect(CiTemplateInstance.$dropdownToggle.length).toBe(1);
+      expect(CiTemplateInstance.$input).toHaveLength(1);
+      expect(CiTemplateInstance.$dropdown).toHaveLength(1);
+      expect(CiTemplateInstance.$dropdownToggle).toHaveLength(1);
     });
 
     it('Sets the dropdown text value', () => {

ee/spec/frontend/projects/settings_service_desk/components/service_desk_setting_spec.js

@@ -129,7 +129,7 @@ describe('ServiceDeskSetting', () => {
         });
 
         // The dropdown by default has one empty option
-        expect(findTemplateDropdown().element.children.length).toEqual(1);
+        expect(findTemplateDropdown().element.children).toHaveLength(1);
       });
 
       it('renders a dropdown with options when the project has templates', () => {
@@ -147,7 +147,7 @@ describe('ServiceDeskSetting', () => {
         const dropdown = findTemplateDropdown();
         const dropdownList = Array.from(dropdown.element.children).map(option => option.innerText);
 
-        expect(dropdown.element.children.length).toEqual(expectedTemplates.length);
+        expect(dropdown.element.children).toHaveLength(expectedTemplates.length);
         expect(dropdownList.includes('Bug')).toEqual(true);
         expect(dropdownList.includes('Documentation')).toEqual(true);
         expect(dropdownList.includes('Security release')).toEqual(true);

ee/spec/frontend/protected_branches/protected_branch_edit_spec.js

@@ -68,7 +68,7 @@ describe('EE ProtectedBranchEdit', () => {
       it('sends update to BE', () =>
         axios.waitForAll().then(() => {
           // Args are asserted in the `.onPatch` call
-          expect(mock.history.patch.length).toEqual(1);
+          expect(mock.history.patch).toHaveLength(1);
 
           expect(toggle).not.toBeDisabled();
           expect(flash).not.toHaveBeenCalled();

ee/spec/frontend/related_items_tree/components/create_issue_form_spec.js

@@ -178,7 +178,7 @@ describe('CreateIssueForm', () => {
 
         expect(projectsDropdownButton.find(GlSearchBoxByType).exists()).toBe(true);
         expect(projectsDropdownButton.find(GlLoadingIcon).exists()).toBe(true);
-        expect(dropdownItems.length).toBe(mockProjects.length);
+        expect(dropdownItems).toHaveLength(mockProjects.length);
         expect(dropdownItems.at(0).text()).toContain(mockProjects[0].name);
         expect(dropdownItems.at(0).text()).toContain(mockProjects[0].namespace.name);
         expect(
@@ -207,7 +207,7 @@ describe('CreateIssueForm', () => {
           wrapper.vm.$store.dispatch('receiveProjectsSuccess', filteredMockProjects);
         })
         .then(() => {
-          expect(wrapper.findAll(GlDropdownItem).length).toBe(1);
+          expect(wrapper.findAll(GlDropdownItem)).toHaveLength(1);
         });
     });
 

ee/spec/frontend/related_items_tree/components/epic_health_status_spec.js

@@ -36,12 +36,12 @@ describe('EpicHealthStatus', () => {
     const longLabels = wrapper.findAll('.health-label-long');
     const shortLabels = wrapper.findAll('.health-label-short');
 
-    expect(longLabels.length).toBe(3);
-    expect(shortLabels.length).toBe(3);
+    expect(longLabels).toHaveLength(3);
+    expect(shortLabels).toHaveLength(3);
 
     const expectedLongLabels = ['issues on track', 'issues need attention', 'issues at risk'];
 
-    expect(longLabels.length).toBe(expectedLongLabels.length);
+    expect(longLabels).toHaveLength(expectedLongLabels.length);
 
     longLabels.wrappers.forEach((longLabelWrapper, index) => {
       expect(longLabelWrapper.text()).toEqual(expectedLongLabels[index]);
@@ -49,7 +49,7 @@ describe('EpicHealthStatus', () => {
 
     const expectedShortLabels = ['on track', 'need attention', 'at risk'];
 
-    expect(shortLabels.length).toBe(expectedShortLabels.length);
+    expect(shortLabels).toHaveLength(expectedShortLabels.length);
 
     shortLabels.wrappers.forEach((shortLabelWrapper, index) => {
       expect(shortLabelWrapper.text()).toEqual(expectedShortLabels[index]);

ee/spec/frontend/related_items_tree/components/related_items_tree_app_spec.js

@@ -68,7 +68,7 @@ describe('RelatedItemsTreeApp', () => {
         const value = '&1 &2 &3';
         const references = wrapper.vm.getRawRefs(value);
 
-        expect(references.length).toBe(3);
+        expect(references).toHaveLength(3);
         expect(references.join(' ')).toBe(value);
       });
     });

ee/spec/frontend/related_items_tree/components/related_items_tree_header_spec.js

@@ -199,7 +199,7 @@ describe('RelatedItemsTree', () => {
           const countBadgesEl = wrapper.findAll('.issue-count-badge > span');
           const badgeIcon = countBadgesEl.at(0).find(GlIcon);
 
-          expect(countBadgesEl.length).toBe(1);
+          expect(countBadgesEl).toHaveLength(1);
           expect(badgeIcon.props('name')).toBe('issues');
         });
 

ee/spec/frontend/related_items_tree/store/mutations_spec.js

@@ -94,7 +94,7 @@ describe('RelatedItemsTree', () => {
           data.append = true;
           mutations[types.SET_ITEM_CHILDREN](state, data);
 
-          expect(state.children[data.parentItem.reference].length).toEqual(4);
+          expect(state.children[data.parentItem.reference]).toHaveLength(4);
         });
       });
 
@@ -457,7 +457,7 @@ describe('RelatedItemsTree', () => {
 
           mutations[types.REMOVE_PENDING_REFERENCE](state, 0);
 
-          expect(state.pendingReferences.length).toEqual(0);
+          expect(state.pendingReferences).toHaveLength(0);
           expect(state.itemAddFailure).toBe(false);
         });
       });

ee/spec/frontend/related_items_tree/utils/epic_utils_spec.js

@@ -109,7 +109,7 @@ describe('RelatedItemsTree', () => {
           mockQueryResponse2.data.group.epic.children,
         );
 
-        expect(formattedChildren.length).toBe(
+        expect(formattedChildren).toHaveLength(
           mockQueryResponse2.data.group.epic.children.edges.length,
         );
         expect(formattedChildren[0]).toHaveProperty('type', ChildType.Epic);
@@ -122,7 +122,7 @@ describe('RelatedItemsTree', () => {
       it('returns updated assignees array with `edges->node` nesting removed', () => {
         const formattedChildren = epicUtils.extractIssueAssignees(mockIssue1.assignees);
 
-        expect(formattedChildren.length).toBe(mockIssue1.assignees.edges.length);
+        expect(formattedChildren).toHaveLength(mockIssue1.assignees.edges.length);
         expect(formattedChildren[0]).toHaveProperty(
           'username',
           mockIssue1.assignees.edges[0].node.username,
@@ -136,7 +136,7 @@ describe('RelatedItemsTree', () => {
           mockQueryResponse2.data.group.epic.issues,
         );
 
-        expect(formattedChildren.length).toBe(
+        expect(formattedChildren).toHaveLength(
           mockQueryResponse2.data.group.epic.issues.edges.length,
         );
         expect(formattedChildren[0]).toHaveProperty('type', ChildType.Issue);
@@ -148,7 +148,7 @@ describe('RelatedItemsTree', () => {
       it('returns array of issues and epics from query response with open epics and issues being on top of the list', () => {
         const formattedChildren = epicUtils.processQueryResponse(mockQueryResponse2.data.group);
 
-        expect(formattedChildren.length).toBe(5); // 2 Epics and 3 Issues
+        expect(formattedChildren).toHaveLength(5); // 2 Epics and 3 Issues
         expect(formattedChildren[0]).toHaveProperty('type', ChildType.Epic);
         expect(formattedChildren[0]).toHaveProperty('state', 'opened');
         expect(formattedChildren[1]).toHaveProperty('type', ChildType.Issue);

ee/spec/frontend/requirements/components/requirements_loading_spec.js

@@ -81,7 +81,7 @@ describe('RequirementsLoading', () => {
     it('renders gl-skeleton-loading component project has some requirements and current tab has requirements to show', () => {
       const loaders = wrapper.find('.requirements-list-loading').findAll(GlSkeletonLoading);
 
-      expect(loaders.length).toBe(2);
+      expect(loaders).toHaveLength(2);
       expect(loaders.at(0).props('lines')).toBe(2);
     });
 

ee/spec/frontend/roadmap/components/epics_list_section_spec.js

@@ -279,7 +279,7 @@ describe('EpicsListSectionComponent', () => {
   it('expands to show child epics when epic is toggled', done => {
     const epic = mockEpics[0];
 
-    expect(wrapper.findAll(EpicItem).length).toBe(mockEpics.length);
+    expect(wrapper.findAll(EpicItem)).toHaveLength(mockEpics.length);
 
     wrapper.vm.toggleIsEpicExpanded(epic.id);
 
@@ -288,7 +288,7 @@ describe('EpicsListSectionComponent', () => {
       .then(() => {
         const expected = mockEpics.length + epic.children.edges.length;
 
-        expect(wrapper.findAll(EpicItem).length).toBe(expected);
+        expect(wrapper.findAll(EpicItem)).toHaveLength(expected);
       })
       .then(done)
       .catch(done.fail);

ee/spec/frontend/roadmap/components/preset_weeks/weeks_header_sub_item_spec.js

@@ -43,7 +43,7 @@ describe('MonthsHeaderSubItemComponent', () => {
         vm = createComponent({});
 
         expect(Array.isArray(vm.headerSubItems)).toBe(true);
-        expect(vm.headerSubItems.length).toBe(7);
+        expect(vm.headerSubItems).toHaveLength(7);
         vm.headerSubItems.forEach(subItem => {
           expect(subItem instanceof Date).toBe(true);
         });

ee/spec/frontend/roadmap/store/mutations_spec.js

@@ -62,7 +62,7 @@ describe('Roadmap Store Mutations', () => {
     it('Should insert provided epicId to epicIds array in state', () => {
       mutations[types.UPDATE_EPIC_IDS](state, 22);
 
-      expect(state.epicIds.length).toBe(1);
+      expect(state.epicIds).toHaveLength(1);
       expect(state.epicIds[0]).toBe(22);
     });
   });
@@ -154,7 +154,7 @@ describe('Roadmap Store Mutations', () => {
     it('Should update milestoneIds array', () => {
       mutations[types.UPDATE_MILESTONE_IDS](state, [22]);
 
-      expect(state.milestoneIds.length).toBe(1);
+      expect(state.milestoneIds).toHaveLength(1);
       expect(state.milestoneIds[0]).toBe(22);
     });
   });

ee/spec/frontend/roadmap/utils/epic_utils_spec.js

@@ -7,7 +7,7 @@ describe('extractGroupEpics', () => {
     const { edges } = mockGroupEpicsQueryResponse.data.group.epics;
     const extractedEpics = epicUtils.extractGroupEpics(edges);
 
-    expect(extractedEpics.length).toBe(edges.length);
+    expect(extractedEpics).toHaveLength(edges.length);
     expect(extractedEpics[0]).toEqual(
       expect.objectContaining({
         ...edges[0].node,

ee/spec/frontend/roadmap/utils/roadmap_item_utils_spec.js

@@ -119,7 +119,7 @@ describe('extractGroupMilestones', () => {
     const { edges } = mockGroupMilestonesQueryResponse.data.group.milestones;
     const extractedMilestones = roadmapItemUtils.extractGroupMilestones(edges);
 
-    expect(extractedMilestones.length).toBe(edges.length);
+    expect(extractedMilestones).toHaveLength(edges.length);
     expect(extractedMilestones[0]).toEqual(
       expect.objectContaining({
         ...edges[0].node,

ee/spec/frontend/roadmap/utils/roadmap_utils_spec.js

@@ -37,7 +37,7 @@ describe('getTimeframeForQuartersView', () => {
   });
 
   it('returns timeframe with total of 7 quarters', () => {
-    expect(timeframe.length).toBe(7);
+    expect(timeframe).toHaveLength(7);
   });
 
   it('each timeframe item has `quarterSequence`, `year` and `range` present', () => {
@@ -89,7 +89,7 @@ describe('extendTimeframeForQuartersView', () => {
 
     const extendedTimeframe = extendTimeframeForQuartersView(initialDate, -9);
 
-    expect(extendedTimeframe.length).toBe(mockTimeframeQuartersPrepend.length);
+    expect(extendedTimeframe).toHaveLength(mockTimeframeQuartersPrepend.length);
     extendedTimeframe.forEach((timeframeItem, index) => {
       expect(timeframeItem.year).toBe(mockTimeframeQuartersPrepend[index].year);
       expect(timeframeItem.quarterSequence).toBe(
@@ -107,7 +107,7 @@ describe('extendTimeframeForQuartersView', () => {
 
     const extendedTimeframe = extendTimeframeForQuartersView(initialDate, 9);
 
-    expect(extendedTimeframe.length).toBe(mockTimeframeQuartersAppend.length);
+    expect(extendedTimeframe).toHaveLength(mockTimeframeQuartersAppend.length);
     extendedTimeframe.forEach((timeframeItem, index) => {
       expect(timeframeItem.year).toBe(mockTimeframeQuartersAppend[index].year);
       expect(timeframeItem.quarterSequence).toBe(
@@ -129,7 +129,7 @@ describe('getTimeframeForMonthsView', () => {
   });
 
   it('returns timeframe with total of 8 months', () => {
-    expect(timeframe.length).toBe(8);
+    expect(timeframe).toHaveLength(8);
   });
 
   it('first timeframe item refers to 2 months prior to current month', () => {
@@ -164,7 +164,7 @@ describe('extendTimeframeForMonthsView', () => {
     const initialDate = mockTimeframeMonths[0];
     const extendedTimeframe = extendTimeframeForMonthsView(initialDate, -8);
 
-    expect(extendedTimeframe.length).toBe(mockTimeframeMonthsPrepend.length);
+    expect(extendedTimeframe).toHaveLength(mockTimeframeMonthsPrepend.length);
     extendedTimeframe.forEach((timeframeItem, index) => {
       expect(timeframeItem.getTime()).toBe(mockTimeframeMonthsPrepend[index].getTime());
     });
@@ -174,7 +174,7 @@ describe('extendTimeframeForMonthsView', () => {
     const initialDate = mockTimeframeMonths[mockTimeframeMonths.length - 1];
     const extendedTimeframe = extendTimeframeForMonthsView(initialDate, 8);
 
-    expect(extendedTimeframe.length).toBe(mockTimeframeMonthsAppend.length);
+    expect(extendedTimeframe).toHaveLength(mockTimeframeMonthsAppend.length);
     extendedTimeframe.forEach((timeframeItem, index) => {
       expect(timeframeItem.getTime()).toBe(mockTimeframeMonthsAppend[index].getTime());
     });
@@ -189,7 +189,7 @@ describe('getTimeframeForWeeksView', () => {
   });
 
   it('returns timeframe with total of 7 weeks', () => {
-    expect(timeframe.length).toBe(7);
+    expect(timeframe).toHaveLength(7);
   });
 
   it('first timeframe item refers to 2 weeks prior to current week', () => {
@@ -230,7 +230,7 @@ describe('getTimeframeForWeeksView', () => {
       new Date(2018, 1, 4),
     ];
 
-    expect(timeframe.length).toBe(5);
+    expect(timeframe).toHaveLength(5);
     expectedTimeframe.forEach((timeframeItem, index) => {
       expect(timeframeItem.getTime()).toBe(expectedTimeframe[index].getTime());
     });
@@ -241,7 +241,7 @@ describe('extendTimeframeForWeeksView', () => {
   it('returns extended timeframe into the past from current timeframe startDate', () => {
     const extendedTimeframe = extendTimeframeForWeeksView(mockTimeframeWeeks[0], -6); // initialDate: 17 Dec 2017
 
-    expect(extendedTimeframe.length).toBe(mockTimeframeWeeksPrepend.length);
+    expect(extendedTimeframe).toHaveLength(mockTimeframeWeeksPrepend.length);
     extendedTimeframe.forEach((timeframeItem, index) => {
       expect(timeframeItem.getTime()).toBe(mockTimeframeWeeksPrepend[index].getTime());
     });
@@ -253,7 +253,7 @@ describe('extendTimeframeForWeeksView', () => {
       6,
     );
 
-    expect(extendedTimeframe.length).toBe(mockTimeframeWeeksAppend.length);
+    expect(extendedTimeframe).toHaveLength(mockTimeframeWeeksAppend.length);
     extendedTimeframe.forEach((timeframeItem, index) => {
       expect(timeframeItem.getTime()).toBe(mockTimeframeWeeksAppend[index].getTime());
     });
@@ -280,7 +280,7 @@ describe('extendTimeframeForAvailableWidth', () => {
       timeframeEnd,
     });
 
-    expect(timeframe.length).toBe(mockTimeframeMonths.length);
+    expect(timeframe).toHaveLength(mockTimeframeMonths.length);
   });
 
   it('should extend `timeframe` when availableTimeframeWidth is large enough that it can fit more timeframe items to show up horizontal scrollbar', () => {
@@ -292,7 +292,7 @@ describe('extendTimeframeForAvailableWidth', () => {
       timeframeEnd,
     });
 
-    expect(timeframe.length).toBe(12);
+    expect(timeframe).toHaveLength(12);
     expect(timeframe[0].getTime()).toBe(1504224000000); // 1 Sep 2017
     expect(timeframe[timeframe.length - 1].getTime()).toBe(1535673600000); // 31 Aug 2018
   });
@@ -422,7 +422,7 @@ describe('sortEpics', () => {
 
     sortEpics(epics, 'start_date_asc');
 
-    expect(epics.length).toBe(mockUnsortedEpics.length);
+    expect(epics).toHaveLength(mockUnsortedEpics.length);
 
     epics.forEach((epic, index) => {
       expect(epic.startDate.getTime()).toBe(sortedOrder[index].getTime());
@@ -440,7 +440,7 @@ describe('sortEpics', () => {
 
     sortEpics(epics, 'start_date_desc');
 
-    expect(epics.length).toBe(mockUnsortedEpics.length);
+    expect(epics).toHaveLength(mockUnsortedEpics.length);
 
     epics.forEach((epic, index) => {
       expect(epic.startDate.getTime()).toBe(sortedOrder[index].getTime());
@@ -458,7 +458,7 @@ describe('sortEpics', () => {
 
     sortEpics(epics, 'end_date_asc');
 
-    expect(epics.length).toBe(mockUnsortedEpics.length);
+    expect(epics).toHaveLength(mockUnsortedEpics.length);
 
     epics.forEach((epic, index) => {
       expect(epic.endDate.getTime()).toBe(sortedOrder[index].getTime());
@@ -476,7 +476,7 @@ describe('sortEpics', () => {
 
     sortEpics(epics, 'end_date_desc');
 
-    expect(epics.length).toBe(mockUnsortedEpics.length);
+    expect(epics).toHaveLength(mockUnsortedEpics.length);
 
     epics.forEach((epic, index) => {
       expect(epic.endDate.getTime()).toBe(sortedOrder[index].getTime());

ee/spec/frontend/security_configuration/components/app_spec.js

@@ -65,7 +65,7 @@ describe('Security Configuration App', () => {
 
       createComponent({ features });
 
-      expect(wrapper.findAll({ ref: 'featureRow' }).length).toBe(5);
+      expect(wrapper.findAll({ ref: 'featureRow' })).toHaveLength(5);
     });
 
     it('displays a given feature', () => {

ee/spec/frontend/security_dashboard/components/filter_spec.js

@@ -60,7 +60,7 @@ describe('Filter component', () => {
     });
 
     it('should display a check next to only the selected items', () => {
-      expect(wrapper.findAll('.dropdown-item .js-check').length).toEqual(3);
+      expect(wrapper.findAll('.dropdown-item .js-check')).toHaveLength(3);
     });
 
     it('should correctly display the selected text', () => {

ee/spec/frontend/security_dashboard/components/filters_spec.js

@@ -18,11 +18,11 @@ describe('Filter component', () => {
     });
 
     it('should display all filters', () => {
-      expect(vm.$el.querySelectorAll('.js-filter').length).toEqual(3);
+      expect(vm.$el.querySelectorAll('.js-filter')).toHaveLength(3);
     });
 
     it('should display "Hide dismissed vulnerabilities" toggle', () => {
-      expect(vm.$el.querySelectorAll('.js-toggle').length).toEqual(1);
+      expect(vm.$el.querySelectorAll('.js-toggle')).toHaveLength(1);
     });
   });
 });

ee/spec/frontend/security_dashboard/components/first_class_vulnerability_filters_spec.js

@@ -25,7 +25,7 @@ describe('First class vulnerability filters component', () => {
     });
 
     it('should render the filters', () => {
-      expect(findFilters().length).toBe(filters.length);
+      expect(findFilters()).toHaveLength(filters.length);
     });
 
     it('should pass down the filter information to the first filter', () => {

ee/spec/frontend/security_dashboard/components/project_list_spec.js

@@ -52,7 +52,7 @@ describe('Project List component', () => {
     projectsCount => {
       factory({ projects: generateMockProjects(projectsCount) });
 
-      expect(getAllProjectItems().length).toBe(projectsCount);
+      expect(getAllProjectItems()).toHaveLength(projectsCount);
       expect(wrapper.find(GlBadge).text()).toBe(`${projectsCount}`);
     },
   );

ee/spec/frontend/security_dashboard/components/project_security_dashboard_spec.js

@@ -102,7 +102,7 @@ describe('Project Security Dashboard component', () => {
     it('renders one filter less because projects filter is locked', () => {
       const dashboard = findDashboard();
       const filters = dashboard.findAll('.dashboard-filter');
-      expect(filters.length).toBe(wrapper.vm.$store.state.filters.filters.length - 1);
+      expect(filters).toHaveLength(wrapper.vm.$store.state.filters.filters.length - 1);
     });
   });
 

ee/spec/frontend/security_dashboard/components/security_dashboard_table_row_spec.js

@@ -54,7 +54,7 @@ describe('Security Dashboard Table Row', () => {
     });
 
     it('should not render action buttons', () => {
-      expect(wrapper.findAll('.action-buttons button').length).toBe(0);
+      expect(wrapper.findAll('.action-buttons button')).toHaveLength(0);
     });
   });
 

ee/spec/frontend/security_dashboard/components/security_dashboard_table_spec.js

@@ -44,7 +44,7 @@ describe('Security Dashboard Table', () => {
     });
 
     it('should render 10 skeleton rows in the table', () => {
-      expect(wrapper.findAll(SecurityDashboardTableRow).length).toEqual(10);
+      expect(wrapper.findAll(SecurityDashboardTableRow)).toHaveLength(10);
     });
   });
 
@@ -57,7 +57,7 @@ describe('Security Dashboard Table', () => {
     });
 
     it('should render a row for each vulnerability', () => {
-      expect(wrapper.findAll(SecurityDashboardTableRow).length).toEqual(
+      expect(wrapper.findAll(SecurityDashboardTableRow)).toHaveLength(
         mockDataVulnerabilities.length,
       );
     });

ee/spec/frontend/security_dashboard/components/selection_summary_spec.js

@@ -73,7 +73,7 @@ describe('Selection Summary component', () => {
       it('should have the button enabled if a vulnerability is selected and an option is selected', () => {
         createComponent({ props: { selectedVulnerabilities: [{ id: 'id_0' }] } });
         expect(wrapper.vm.dismissalReason).toBe(null);
-        expect(wrapper.findAll('option').length).toBe(4);
+        expect(wrapper.findAll('option')).toHaveLength(4);
         formSelect()
           .findAll('option')
           .at(1)

ee/spec/frontend/security_dashboard/components/vulnerability_severity_spec.js

@@ -72,7 +72,7 @@ describe('Vulnerability Severity component', () => {
   const firstAccordionItem = () => accordionItems().at(0);
 
   const hasAccordionItemForEachSeverityLevel = () =>
-    expect(accordionItems().length).toBe(Object.keys(getMockSeverityGroups()).length);
+    expect(accordionItems()).toHaveLength(Object.keys(getMockSeverityGroups()).length);
 
   const hasEachAccordionItemDisabled = () =>
     accordionItems().wrappers.every(item => item.props('disabled'));

ee/spec/frontend/security_dashboard/store/modules/unscanned_projects/getters_spec.js

@@ -55,7 +55,7 @@ describe('Unscanned projects getters', () => {
 
       const result = getters.outdatedProjects({ projects });
 
-      expect(result.length).toBe(3);
+      expect(result).toHaveLength(3);
       expect(result).toEqual(
         groupByDateRanges({
           ranges: UNSCANNED_PROJECTS_DATE_RANGES,

ee/spec/frontend/security_dashboard/store/modules/unscanned_projects/utils_spec.js

@@ -71,7 +71,7 @@ describe('Project scanning store utils', () => {
         projects,
       });
 
-      expect(groups.length).toBe(1);
+      expect(groups).toHaveLength(1);
       expect(groups[0].projects).toEqual([projectWithMatchingGroup]);
     });
 
@@ -96,7 +96,7 @@ describe('Project scanning store utils', () => {
         projects: projectsWithoutTimeStamp,
       });
 
-      expect(groups.length).toBe(0);
+      expect(groups).toHaveLength(0);
     });
   });
 });

ee/spec/frontend/security_dashboard/store/modules/vulnerabilities/actions_spec.js

@@ -809,7 +809,7 @@ describe('vulnerability dismissal', () => {
 
           expect(toast).toHaveBeenCalledTimes(1);
           expect(message).toContain('Turn off the hide dismissed toggle to view');
-          expect(Object.keys(options.action).length).toBe(2);
+          expect(Object.keys(options.action)).toHaveLength(2);
           done();
         };
 

ee/spec/frontend/security_dashboard/store/modules/vulnerabilities/getters_spec.js

@@ -84,7 +84,7 @@ describe('vulnerabilities module getters', () => {
         'critical',
       );
 
-      expect(filteredResults.length).toEqual(28);
+      expect(filteredResults).toHaveLength(28);
     });
 
     it('should filter the data to the last 60 days and days we have data for', () => {
@@ -93,7 +93,7 @@ describe('vulnerabilities module getters', () => {
         'critical',
       );
 
-      expect(filteredResults.length).toEqual(58);
+      expect(filteredResults).toHaveLength(58);
     });
 
     it('should filter the data to the last 90 days and days we have data for', () => {
@@ -102,7 +102,7 @@ describe('vulnerabilities module getters', () => {
         'critical',
       );
 
-      expect(filteredResults.length).toEqual(88);
+      expect(filteredResults).toHaveLength(88);
     });
   });
 

ee/spec/frontend/sidebar/components/status/status_spec.js

@@ -241,7 +241,7 @@ describe('Status', () => {
       });
 
       it('shows 4 dropdown items', () => {
-        expect(wrapper.findAll(GlDropdownItem).length).toBe(4);
+        expect(wrapper.findAll(GlDropdownItem)).toHaveLength(4);
       });
 
       // Test that "On track", "Needs attention", and "At risk" are displayed

ee/spec/frontend/sidebar/ee_ancestor_tree_spec.js

@@ -20,7 +20,7 @@ describe('AncestorsTreeContainer', () => {
   });
 
   it('renders all ancestors rows', () => {
-    expect(vm.$el.querySelectorAll('.vertical-timeline-row').length).toBe(ancestors.length);
+    expect(vm.$el.querySelectorAll('.vertical-timeline-row')).toHaveLength(ancestors.length);
   });
 
   it('renders tooltip with the immediate parent', () => {

ee/spec/frontend/storage_counter/components/app_spec.js

@@ -37,7 +37,7 @@ describe('Storage counter app', () => {
     wrapper.vm
       .$nextTick()
       .then(() => {
-        expect(wrapper.findAll(Project).length).toEqual(2);
+        expect(wrapper.findAll(Project)).toHaveLength(2);
       })
       .then(done)
       .catch(done.fail);

ee/spec/frontend/trial_registrations/username_suggester_spec.js

@@ -111,7 +111,7 @@ describe('UsernameSuggester', () => {
     it('does not suggests username if suggester is already running', () => {
       suggester.isLoading = true;
 
-      expect(axiosMock.history.get.length).toBe(0);
+      expect(axiosMock.history.get).toHaveLength(0);
       expect(username).toHaveValue('');
     });
 
@@ -128,7 +128,7 @@ describe('UsernameSuggester', () => {
       suggester.suggestUsername();
 
       setImmediate(() => {
-        expect(axiosMock.history.get.length).toBe(1);
+        expect(axiosMock.history.get).toHaveLength(1);
         expect(suggester.isLoading).toBe(false);
         expect(username).toHaveValue(expectedUsername);
       });
@@ -145,7 +145,7 @@ describe('UsernameSuggester', () => {
       suggester.suggestUsername();
 
       setImmediate(() => {
-        expect(axiosMock.history.get.length).toBe(1);
+        expect(axiosMock.history.get).toHaveLength(1);
         expect(suggester.isLoading).toBe(false);
         expect(username).toHaveValue('');
         expect(document.querySelector('.flash-container .flash-text').innerText.trim()).toBe(

ee/spec/frontend/vue_mr_widget/components/approvals/approvals_list_spec.js

@@ -80,7 +80,7 @@ describe('EE MRWidget approvals list', () => {
       const rows = findRows();
       const names = rows.wrappers.map(row => findRowElement(row, 'name').text());
 
-      expect(rows.length).toEqual(expected.length);
+      expect(rows).toHaveLength(expected.length);
       expect(names).toEqual(expected.map(x => x.name));
     });
 
@@ -102,7 +102,7 @@ describe('EE MRWidget approvals list', () => {
         const rows = findRows();
 
         expect(wrapper.find('.js-section-title').exists()).toBe(true);
-        expect(rows.length).toEqual(rulesWithCodeOwner.length + 1);
+        expect(rows).toHaveLength(rulesWithCodeOwner.length + 1);
       });
     });
   });
@@ -279,7 +279,7 @@ describe('EE MRWidget approvals list', () => {
       const summary = findRowElement(row, 'summary');
       const lists = summary.findAll(UserAvatarList);
 
-      expect(lists.length).toEqual(1);
+      expect(lists).toHaveLength(1);
       expect(lists.at(0).props('items')).toEqual(rule.approved_by);
     });
   });

ee/spec/frontend/vue_mr_widget/ee_mr_widget_options_spec.js

@@ -988,7 +988,7 @@ describe('ee merge request widget options', () => {
     });
 
     it('renders multiple deployments', () => {
-      expect(vm.$el.querySelectorAll('.deploy-heading').length).toBe(2);
+      expect(vm.$el.querySelectorAll('.deploy-heading')).toHaveLength(2);
     });
   });
 

ee/spec/frontend/vue_shared/components/sidebar/epics_select/dropdown_contents_spec.js

@@ -90,7 +90,7 @@ describe('EpicsSelect', () => {
       it('should render epics list for all provided epics', () => {
         const epicsEl = wrapper.findAll('ul > li');
 
-        expect(epicsEl.length).toBe(epics.length + 2); // includes divider & No Epic` <li>.
+        expect(epicsEl).toHaveLength(epics.length + 2); // includes divider & No Epic` <li>.
         expect(epicsEl.at(1).classes()).toContain('divider');
         expect(
           epicsEl

ee/spec/frontend/vue_shared/components/sidebar/epics_select/store/getters_spec.js

@@ -26,7 +26,7 @@ describe('EpicsSelect', () => {
 
           const epics = getters.groupEpics(state);
 
-          expect(epics.length).toBe(normalizedEpics.length);
+          expect(epics).toHaveLength(normalizedEpics.length);
           epics.forEach((epic, index) => {
             expect.objectContaining({
               ...normalizedEpics[index],
@@ -39,7 +39,7 @@ describe('EpicsSelect', () => {
 
           const epics = getters.groupEpics(state);
 
-          expect(epics.length).toBe(1);
+          expect(epics).toHaveLength(1);
           expect(epics[0]).toEqual(
             expect.objectContaining({
               ...normalizedEpics[0],
@@ -52,7 +52,7 @@ describe('EpicsSelect', () => {
 
           const epics = getters.groupEpics(state);
 
-          expect(epics.length).toBe(1);
+          expect(epics).toHaveLength(1);
           expect(epics[0]).toEqual(
             expect.objectContaining({
               ...normalizedEpics[0],
@@ -65,7 +65,7 @@ describe('EpicsSelect', () => {
 
           const epics = getters.groupEpics(state);
 
-          expect(epics.length).toBe(1);
+          expect(epics).toHaveLength(1);
           expect(epics[0]).toEqual(
             expect.objectContaining({
               ...normalizedEpics[1],
@@ -78,7 +78,7 @@ describe('EpicsSelect', () => {
 
           const epics = getters.groupEpics(state);
 
-          expect(epics.length).toBe(1);
+          expect(epics).toHaveLength(1);
           expect(epics[0]).toEqual(
             expect.objectContaining({
               ...normalizedEpics[1],

ee/spec/frontend/vue_shared/license_compliance/components/add_license_form_dropdown_spec.js

@@ -47,7 +47,7 @@ describe('AddLicenseFormDropdown', () => {
     element.on('select2-open', () => {
       const options = $('.select2-drop .select2-result');
 
-      expect(KNOWN_LICENSES.length).toEqual(options.length);
+      expect(KNOWN_LICENSES).toHaveLength(options.length);
       options.each((index, optionEl) => {
         expect(KNOWN_LICENSES).toContain($(optionEl).text());
       });

ee/spec/frontend/vue_shared/license_compliance/components/add_license_form_spec.js

@@ -99,7 +99,7 @@ describe('AddLicenseForm', () => {
     it('renders the license approval radio buttons dropdown', () => {
       const radioButtonParents = vm.$el.querySelectorAll('.form-check');
 
-      expect(radioButtonParents.length).toBe(2);
+      expect(radioButtonParents).toHaveLength(2);
       expect(radioButtonParents[0].innerText.trim()).toBe('Allow');
       expect(radioButtonParents[0].querySelector('.form-check-input')).not.toBeNull();
       expect(radioButtonParents[1].innerText.trim()).toBe('Deny');

ee/spec/frontend/vue_shared/license_compliance/mr_widget_license_report_spec.js

@@ -235,7 +235,7 @@ describe('License Report MR Widget', () => {
             stubs: { ReportSection },
           });
 
-          expect(wrapper.findAll({ ref: 'reportHeading' }).length).toBe(
+          expect(wrapper.findAll({ ref: 'reportHeading' })).toHaveLength(
             expectedNumberOfReportHeadings,
           );
         },
@@ -260,7 +260,7 @@ describe('License Report MR Widget', () => {
             stubs: { ReportSection },
           });
 
-          expect(findAllReportItems().length).toBe(numberOfLicenses);
+          expect(findAllReportItems()).toHaveLength(numberOfLicenses);
         },
       );
 

ee/spec/frontend/vue_shared/security_reports/components/event_item_spec.js

@@ -85,7 +85,7 @@ describe('Event Item', () => {
     });
 
     it('renders the action buttons', () => {
-      expect(wrapper.findAll(GlDeprecatedButton).length).toBe(2);
+      expect(wrapper.findAll(GlDeprecatedButton)).toHaveLength(2);
       expect(wrapper).toMatchSnapshot();
     });
 

ee/spec/frontend/vue_shared/security_reports/components/modal_footer_spec.js

@@ -104,7 +104,7 @@ describe('Security Reports modal footer', () => {
 
     it('renders create merge request and issue button as a split button', () => {
       expect(wrapper.contains('.js-split-button')).toBe(true);
-      expect(wrapper.vm.actionButtons.length).toBe(2);
+      expect(wrapper.vm.actionButtons).toHaveLength(2);
       expect(wrapper.find(SplitButton).exists()).toBe(true);
       expect(wrapper.find('.js-split-button').text()).toContain('Resolve with merge request');
       expect(wrapper.find('.js-split-button').text()).toContain('Create issue');
@@ -123,7 +123,7 @@ describe('Security Reports modal footer', () => {
     });
 
     it('renders the split button', () => {
-      expect(wrapper.vm.actionButtons.length).toBe(3);
+      expect(wrapper.vm.actionButtons).toHaveLength(3);
       expect(wrapper.find(SplitButton).exists()).toBe(true);
       expect(wrapper.find('.js-split-button').text()).toContain('Resolve with merge request');
       expect(wrapper.find('.js-split-button').text()).toContain('Create issue');

ee/spec/frontend/vue_shared/security_reports/store/modules/sast/mutations_spec.js

@@ -116,15 +116,15 @@ describe('sast module mutations', () => {
     });
 
     it('should have the relevant `new` issues', () => {
-      expect(state.newIssues.length).toBe(3);
+      expect(state.newIssues).toHaveLength(3);
     });
 
     it('should have the relevant `resolved` issues', () => {
-      expect(state.resolvedIssues.length).toBe(2);
+      expect(state.resolvedIssues).toHaveLength(2);
     });
 
     it('should have the relevant `all` issues', () => {
-      expect(state.allIssues.length).toBe(1);
+      expect(state.allIssues).toHaveLength(1);
     });
   });
 

ee/spec/frontend/vulnerabilities/footer_spec.js

@@ -128,7 +128,7 @@ describe('Vulnerability Footer', () => {
 
       return axios.waitForAll().then(() => {
         expect(historyList().exists()).toBe(true);
-        expect(historyEntries().length).toBe(2);
+        expect(historyEntries()).toHaveLength(2);
         const entry1 = historyEntries().at(0);
         const entry2 = historyEntries().at(1);
         expect(entry1.props('discussion')).toEqual(historyItems[0]);

ee/spec/frontend/vulnerabilities/header_spec.js

@@ -280,7 +280,7 @@ describe('Vulnerability Header', () => {
         createWrapper({ state, [`${state}_by_id`]: user.id });
 
         return waitForPromises().then(() => {
-          expect(mockAxios.history.get.length).toBe(1);
+          expect(mockAxios.history.get).toHaveLength(1);
           expect(findStatusDescription().props('user')).toEqual(user);
         });
       },
@@ -290,7 +290,7 @@ describe('Vulnerability Header', () => {
       createWrapper({ state: 'detected' });
 
       return waitForPromises().then(() => {
-        expect(mockAxios.history.get.length).toBe(0);
+        expect(mockAxios.history.get).toHaveLength(0);
         expect(findStatusDescription().props('user')).toBeUndefined();
       });
     });
@@ -302,7 +302,7 @@ describe('Vulnerability Header', () => {
 
       return waitForPromises().then(() => {
         expect(createFlash).toHaveBeenCalledTimes(1);
-        expect(mockAxios.history.get.length).toBe(1);
+        expect(mockAxios.history.get).toHaveLength(1);
       });
     });
 
@@ -313,7 +313,7 @@ describe('Vulnerability Header', () => {
       expect(findStatusDescription().props('isLoadingUser')).toBe(true);
 
       return waitForPromises().then(() => {
-        expect(mockAxios.history.get.length).toBe(1);
+        expect(mockAxios.history.get).toHaveLength(1);
         expect(findStatusDescription().props('isLoadingUser')).toBe(false);
       });
     });

ee/spec/frontend/vulnerabilities/history_comment_editor_spec.js

@@ -40,7 +40,7 @@ describe('History Comment Editor', () => {
     textarea().vm.$emit('input', comment);
     saveButton().vm.$emit('click');
 
-    expect(wrapper.emitted().onSave.length).toBe(1);
+    expect(wrapper.emitted().onSave).toHaveLength(1);
     expect(wrapper.emitted().onSave[0][0]).toBe(comment);
   });
 
@@ -48,7 +48,7 @@ describe('History Comment Editor', () => {
     createWrapper();
     cancelButton().vm.$emit('click');
 
-    expect(wrapper.emitted().onCancel.length).toBe(1);
+    expect(wrapper.emitted().onCancel).toHaveLength(1);
   });
 
   it('disables the save button when there is no text or only whitespace in the textarea', () => {