1 files changed, 96 insertions, 0 deletions
diff --git a/spec/frontend/clusters/agents/components/agent_integration_status_row_spec.js b/spec/frontend/clusters/agents/components/agent_integration_status_row_spec.js
new file mode 100644
index 00000000000..2af64191a88
--- /dev/null
+++ b/spec/frontend/clusters/agents/components/agent_integration_status_row_spec.js
@@ -0,0 +1,96 @@
+import { GlLink, GlIcon, GlBadge } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import AgentIntegrationStatusRow from '~/clusters/agents/components/agent_integration_status_row.vue';
+
+const defaultProps = {
+  text: 'Default integration status',
+};
+
+describe('IntegrationStatus', () => {
+  let wrapper;
+
+  const createWrapper = ({ props = {}, glFeatures = {} } = {}) => {
+    wrapper = shallowMount(AgentIntegrationStatusRow, {
+      propsData: {
+        ...defaultProps,
+        ...props,
+      },
+      provide: {
+        glFeatures,
+      },
+    });
+  };
+
+  const findLink = () => wrapper.findComponent(GlLink);
+  const findIcon = () => wrapper.findComponent(GlIcon);
+  const findBadge = () => wrapper.findComponent(GlBadge);
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('icon', () => {
+    const icon = 'status-success';
+    const iconClass = 'text-success-500';
+    it.each`
+      props                  | iconName         | iconClassName
+      ${{ icon, iconClass }} | ${icon}          | ${iconClass}
+      ${{ icon }}            | ${icon}          | ${'text-info'}
+      ${{ iconClass }}       | ${'information'} | ${iconClass}
+      ${null}                | ${'information'} | ${'text-info'}
+    `('displays correct icon when props are $props', ({ props, iconName, iconClassName }) => {
+      createWrapper({ props });
+
+      expect(findIcon().props('name')).toBe(iconName);
+      expect(findIcon().attributes('class')).toContain(iconClassName);
+    });
+  });
+
+  describe('helpUrl', () => {
+    it('displays a link with the correct help url when provided in props', () => {
+      const props = {
+        helpUrl: 'help-page-path',
+      };
+      createWrapper({ props });
+
+      expect(findLink().attributes('href')).toBe(props.helpUrl);
+      expect(findLink().text()).toBe(defaultProps.text);
+    });
+
+    it("displays the text without a link when it's not provided", () => {
+      createWrapper();
+
+      expect(findLink().exists()).toBe(false);
+      expect(wrapper.text()).toBe(defaultProps.text);
+    });
+  });
+
+  describe('badge', () => {
+    it('does not display premium feature badge when featureName is not provided', () => {
+      createWrapper();
+
+      expect(findBadge().exists()).toBe(false);
+    });
+
+    it('does not display premium feature badge when featureName is provided and is available for the project', () => {
+      const props = { featureName: 'feature' };
+      const glFeatures = { feature: true };
+      createWrapper({ props, glFeatures });
+
+      expect(findBadge().exists()).toBe(false);
+    });
+
+    it('displays premium feature badge when featureName is provided and is not available for the project', () => {
+      const props = { featureName: 'feature' };
+      const glFeatures = { feature: false };
+      createWrapper({ props, glFeatures });
+
+      expect(findBadge().props()).toMatchObject({
+        icon: 'license',
+        variant: 'tier',
+        size: 'md',
+      });
+      expect(findBadge().text()).toBe(wrapper.vm.$options.i18n.premiumTitle);
+    });
+  });
+});