Merge branch '33270-fix-jest-failing-in-foss' into 'master'

Replace snapshot testing with regular assertions

Closes #33270

See merge request gitlab-org/gitlab!18037

spec/frontend/commit/__snapshots__/commit_pipeline_status_component_spec.js.snap

-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Commit pipeline status component when polling is not successful renders not found CI icon without loader 1`] = `
-<div
-  class="ci-status-link"
->
-  <a>
-    <ciicon-stub
-      aria-label="Pipeline: not found"
-      cssclasses=""
-      data-container="body"
-      data-original-title="Pipeline: not found"
-      size="24"
-      status="[object Object]"
-      title=""
-    />
-  </a>
-</div>
-`;
-
-exports[`Commit pipeline status component when polling is successful renders CI icon without loader 1`] = `
-<div
-  class="ci-status-link"
->
-  <a
-    href="/frontend-fixtures/pipelines-project/pipelines/47"
-  >
-    <ciicon-stub
-      aria-label="Pipeline: pending"
-      cssclasses=""
-      data-container="body"
-      data-original-title="Pipeline: pending"
-      size="24"
-      status="[object Object]"
-      title=""
-    />
-  </a>
-</div>
-`;

spec/frontend/commit/commit_pipeline_status_component_spec.js

@@ -2,6 +2,7 @@ import Visibility from 'visibilityjs';
 import { GlLoadingIcon } from '@gitlab/ui';
 import Poll from '~/lib/utils/poll';
 import flash from '~/flash';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import CommitPipelineStatus from '~/projects/tree/components/commit_pipeline_status_component.vue';
 import { shallowMount } from '@vue/test-utils';
 import { getJSONFixture } from '../helpers/fixtures';
@@ -36,6 +37,10 @@ describe('Commit pipeline status component', () => {
     });
   };
 
+  const findLoader = () => wrapper.find(GlLoadingIcon);
+  const findLink = () => wrapper.find('a');
+  const findCiIcon = () => findLink().find(CiIcon);
+
   afterEach(() => {
     wrapper.destroy();
     wrapper = null;
@@ -111,14 +116,14 @@ describe('Commit pipeline status component', () => {
 
     it('shows the loading icon at start', () => {
       createComponent();
-      expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
+      expect(findLoader().exists()).toBe(true);
 
       pollConfig.successCallback({
         data: { pipelines: [] },
       });
 
       return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.find(GlLoadingIcon).exists()).toBe(false);
+        expect(findLoader().exists()).toBe(false);
       });
     });
 
@@ -130,8 +135,17 @@ describe('Commit pipeline status component', () => {
         return wrapper.vm.$nextTick();
       });
 
-      it('renders CI icon without loader', () => {
-        expect(wrapper.element).toMatchSnapshot();
+      it('does not render loader', () => {
+        expect(findLoader().exists()).toBe(false);
+      });
+
+      it('renders link with href', () => {
+        expect(findLink().attributes('href')).toEqual(mockCiStatus.details_path);
+      });
+
+      it('renders CI icon', () => {
+        expect(findCiIcon().attributes('data-original-title')).toEqual('Pipeline: pending');
+        expect(findCiIcon().props('status')).toEqual(mockCiStatus);
       });
     });
 
@@ -140,8 +154,21 @@ describe('Commit pipeline status component', () => {
         pollConfig.errorCallback();
       });
 
-      it('renders not found CI icon without loader', () => {
-        expect(wrapper.element).toMatchSnapshot();
+      it('does not render loader', () => {
+        expect(findLoader().exists()).toBe(false);
+      });
+
+      it('renders link with href', () => {
+        expect(findLink().attributes('href')).toBeUndefined();
+      });
+
+      it('renders not found CI icon', () => {
+        expect(findCiIcon().attributes('data-original-title')).toEqual('Pipeline: not found');
+        expect(findCiIcon().props('status')).toEqual({
+          text: 'not found',
+          icon: 'status_notfound',
+          group: 'notfound',
+        });
       });
 
       it('displays flash error message', () => {