Apply code review suggestions

ee/app/assets/javascripts/security_dashboard/components/pipeline_findings.vue

@@ -111,7 +111,12 @@ export default {
 
 <template>
   <div>
-    <gl-alert v-if="errorLoadingFindings" class="mb-4" variant="danger" @dismiss="onErrorDismiss">
+    <gl-alert
+      v-if="errorLoadingFindings"
+      class="gl-mb-6"
+      variant="danger"
+      @dismiss="onErrorDismiss"
+    >
       {{
         s__(
           'SecurityReports|Error fetching the vulnerability list. Please check your network connection and try again.',
@@ -127,7 +132,7 @@ export default {
     />
     <gl-intersection-observer
       v-if="pageInfo.hasNextPage"
-      class="text-center"
+      class="gl-text-center"
       @appear="fetchNextPage"
     >
       <gl-loading-icon v-if="isLoadingQuery" size="md" />

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

@@ -39,6 +39,12 @@ describe('Pipeline findings', () => {
     });
   };
 
+  const createWrapperWithApollo = (resolver) => {
+    return createWrapper({
+      apolloProvider: createMockApollo([[pipelineFindingsQuery, resolver]]),
+    });
+  };
+
   const findIntersectionObserver = () => wrapper.find(GlIntersectionObserver);
   const findAlert = () => wrapper.find(GlAlert);
   const findVulnerabilityList = () => wrapper.find(VulnerabilityList);
@@ -61,14 +67,10 @@ describe('Pipeline findings', () => {
 
   describe('with findings', () => {
     beforeEach(() => {
-      createWrapper({
-        apolloProvider: createMockApollo([
-          [pipelineFindingsQuery, jest.fn().mockResolvedValue(mockPipelineFindingsResponse())],
-        ]),
-      });
+      createWrapperWithApollo(jest.fn().mockResolvedValue(mockPipelineFindingsResponse()));
     });
 
-    it('does not show the loading state', () => {
+    it('passes false as the loading state prop', () => {
       expect(findVulnerabilityList().props('isLoading')).toBe(false);
     });
 
@@ -86,14 +88,9 @@ describe('Pipeline findings', () => {
 
   describe('with multiple page findings', () => {
     beforeEach(() => {
-      createWrapper({
-        apolloProvider: createMockApollo([
-          [
-            pipelineFindingsQuery,
-            jest.fn().mockResolvedValue(mockPipelineFindingsResponse({ hasNextPage: true })),
-          ],
-        ]),
-      });
+      createWrapperWithApollo(
+        jest.fn().mockResolvedValue(mockPipelineFindingsResponse({ hasNextPage: true })),
+      );
     });
 
     it('shows the insersection loader', () => {
@@ -103,11 +100,7 @@ describe('Pipeline findings', () => {
 
   describe('with failed query', () => {
     beforeEach(() => {
-      createWrapper({
-        apolloProvider: createMockApollo([
-          [pipelineFindingsQuery, jest.fn().mockRejectedValue(new Error('GrahpQL error'))],
-        ]),
-      });
+      createWrapperWithApollo(jest.fn().mockRejectedValue(new Error('GrahpQL error')));
     });
 
     it('does not show the vulnerability list', () => {