Merge branch '61800-migrate-environment-rollback-tests-to-jest' into 'master'

Convert `spec/javascripts/environments/*rollback*` tests from Jasmine to Jest Closes #61800 See merge request gitlab-org/gitlab-ce!31021

Merge branch '61800-migrate-environment-rollback-tests-to-jest' into 'master'
Convert `spec/javascripts/environments/*rollback*` tests from Jasmine to Jest Closes #61800 See merge request gitlab-org/gitlab-ce!31021
b24359e2 · Tim Zallmann · cacd17a6 · da306cdb · b24359e2 · b24359e2
--- a/spec/javascripts/environments/confirm_rollback_modal_spec.js
+++ b/spec/javascripts/environments/confirm_rollback_modal_spec.js
@@ -61,7 +61,7 @@ describe('Confirm Rollback Modal Component', () => {
        environment,
      },
    });
-    const eventHubSpy = spyOn(eventHub, '$emit');
+    const eventHubSpy = jest.spyOn(eventHub, '$emit');
    const modal = component.find(GlModal);
    modal.vm.$emit('ok');


--- a/spec/javascripts/environments/environment_rollback_spec.js
+++ b/spec/javascripts/environments/environment_rollback_spec.js
-import Vue from 'vue';
-import { shallowMount } from '@vue/test-utils';
+import { shallowMount, mount } from '@vue/test-utils';
 import { GlButton } from '@gitlab/ui';
 import eventHub from '~/environments/event_hub';
-import rollbackComp from '~/environments/components/environment_rollback.vue';
+import RollbackComponent from '~/environments/components/environment_rollback.vue';

 describe('Rollback Component', () => {
  const retryUrl = 'https://gitlab.com/retry';
-  let RollbackComponent;
-
-  beforeEach(() => {
-    RollbackComponent = Vue.extend(rollbackComp);
-  });

  it('Should render Re-deploy label when isLastDeployment is true', () => {
-    const component = new RollbackComponent({
-      el: document.querySelector('.test-dom-element'),
+    const wrapper = mount(RollbackComponent, {
      propsData: {
        retryUrl,
        isLastDeployment: true,
        environment: {},
      },
-    }).$mount();
+    });

-    expect(component.$el).toHaveSpriteIcon('repeat');
+    expect(wrapper.element).toHaveSpriteIcon('repeat');
  });

  it('Should render Rollback label when isLastDeployment is false', () => {
-    const component = new RollbackComponent({
-      el: document.querySelector('.test-dom-element'),
+    const wrapper = mount(RollbackComponent, {
      propsData: {
        retryUrl,
        isLastDeployment: false,
        environment: {},
      },
-    }).$mount();
+    });

-    expect(component.$el).toHaveSpriteIcon('redo');
+    expect(wrapper.element).toHaveSpriteIcon('redo');
  });

  it('should emit a "rollback" event on button click', () => {
-    const eventHubSpy = spyOn(eventHub, '$emit');
-    const component = shallowMount(RollbackComponent, {
+    const eventHubSpy = jest.spyOn(eventHub, '$emit');
+    const wrapper = shallowMount(RollbackComponent, {
      propsData: {
        retryUrl,
        environment: {
@@ -48,7 +40,7 @@ describe('Rollback Component', () => {
        },
      },
    });
-    const button = component.find(GlButton);
+    const button = wrapper.find(GlButton);

    button.vm.$emit('click');


--- a/spec/frontend/matchers.js
+++ b/spec/frontend/matchers.js
+export default {
+  toHaveSpriteIcon: (element, iconName) => {
+    if (!iconName) {
+      throw new Error('toHaveSpriteIcon is missing iconName argument!');
+    }
+
+    if (!(element instanceof HTMLElement)) {
+      throw new Error(`${element} is not a DOM element!`);
+    }
+
+    const iconReferences = [].slice.apply(element.querySelectorAll('svg use'));
+    const matchingIcon = iconReferences.find(reference =>
+      reference.getAttribute('xlink:href').endsWith(`#${iconName}`),
+    );
+
+    const pass = Boolean(matchingIcon);
+
+    let message;
+    if (pass) {
+      message = `${element.outerHTML} contains the sprite icon "${iconName}"!`;
+    } else {
+      message = `${element.outerHTML} does not contain the sprite icon "${iconName}"!`;
+
+      const existingIcons = iconReferences.map(reference => {
+        const iconUrl = reference.getAttribute('xlink:href');
+        return `"${iconUrl.replace(/^.+#/, '')}"`;
+      });
+      if (existingIcons.length > 0) {
+        message += ` (only found ${existingIcons.join(',')})`;
+      }
+    }
+
+    return {
+      pass,
+      message: () => message,
+    };
+  },
+};
--- a/spec/frontend/test_setup.js
+++ b/spec/frontend/test_setup.js
@@ -6,6 +6,7 @@ import { config as testUtilsConfig } from '@vue/test-utils';
 import { initializeTestTimeout } from './helpers/timeout';
 import { loadHTMLFixture, setHTMLFixture } from './helpers/fixtures';
 import { setupManualMocks } from './mocks/mocks_helper';
+import customMatchers from './matchers';

 // Expose jQuery so specs using jQuery plugins can be imported nicely.
 // Here is an issue to explore better alternatives:
@@ -67,6 +68,8 @@ Object.entries(jqueryMatchers).forEach(([matcherName, matcherFactory]) => {
  });
 });

+expect.extend(customMatchers);
+
 // Tech debt issue TBD
 testUtilsConfig.logModifiedComponents = false;