1 files changed, 152 insertions, 0 deletions
diff --git a/spec/frontend/cascading_settings/components/lock_popovers_spec.js b/spec/frontend/cascading_settings/components/lock_popovers_spec.js
new file mode 100644
index 00000000000..585e6ac505b
--- /dev/null
+++ b/spec/frontend/cascading_settings/components/lock_popovers_spec.js
@@ -0,0 +1,152 @@
+import { GlPopover } from '@gitlab/ui';
+import { mountExtended, extendedWrapper } from 'helpers/vue_test_utils_helper';
+import LockPopovers from '~/namespaces/cascading_settings/components/lock_popovers.vue';
+
+describe('LockPopovers', () => {
+  const mockNamespace = {
+    full_name: 'GitLab Org / GitLab',
+    path: '/gitlab-org/gitlab/-/edit',
+  };
+
+  const createPopoverMountEl = ({
+    lockedByApplicationSetting = false,
+    lockedByAncestor = false,
+  }) => {
+    const popoverMountEl = document.createElement('div');
+    popoverMountEl.classList.add('js-cascading-settings-lock-popover-target');
+
+    const popoverData = {
+      locked_by_application_setting: lockedByApplicationSetting,
+      locked_by_ancestor: lockedByAncestor,
+    };
+
+    if (lockedByApplicationSetting) {
+      popoverMountEl.setAttribute('data-popover-data', JSON.stringify(popoverData));
+    } else if (lockedByAncestor) {
+      popoverMountEl.setAttribute(
+        'data-popover-data',
+        JSON.stringify({ ...popoverData, ancestor_namespace: mockNamespace }),
+      );
+    }
+
+    document.body.appendChild(popoverMountEl);
+
+    return popoverMountEl;
+  };
+
+  let wrapper;
+  const createWrapper = () => {
+    wrapper = mountExtended(LockPopovers);
+  };
+
+  const findPopover = () => extendedWrapper(wrapper.find(GlPopover));
+  const findByTextInPopover = (text, options) =>
+    findPopover().findByText((_, element) => element.textContent === text, options);
+
+  const expectPopoverMessageExists = (message) => {
+    expect(findByTextInPopover(message).exists()).toBe(true);
+  };
+  const expectCorrectPopoverTarget = (popoverMountEl, popover = findPopover()) => {
+    expect(popover.props('target')).toEqual(popoverMountEl);
+  };
+
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  describe('when setting is locked by an application setting', () => {
+    let popoverMountEl;
+
+    beforeEach(() => {
+      popoverMountEl = createPopoverMountEl({ lockedByApplicationSetting: true });
+      createWrapper();
+    });
+
+    it('displays correct popover message', () => {
+      expectPopoverMessageExists('This setting has been enforced by an instance admin.');
+    });
+
+    it('sets `target` prop correctly', () => {
+      expectCorrectPopoverTarget(popoverMountEl);
+    });
+  });
+
+  describe('when setting is locked by an ancestor namespace', () => {
+    let popoverMountEl;
+
+    beforeEach(() => {
+      popoverMountEl = createPopoverMountEl({ lockedByAncestor: true });
+      createWrapper();
+    });
+
+    it('displays correct popover message', () => {
+      expectPopoverMessageExists(
+        `This setting has been enforced by an owner of ${mockNamespace.full_name}.`,
+      );
+    });
+
+    it('displays link to ancestor namespace', () => {
+      expect(
+        findByTextInPopover(mockNamespace.full_name, {
+          selector: `a[href="${mockNamespace.path}"]`,
+        }).exists(),
+      ).toBe(true);
+    });
+
+    it('sets `target` prop correctly', () => {
+      expectCorrectPopoverTarget(popoverMountEl);
+    });
+  });
+
+  describe('when setting is locked by an application setting and an ancestor namespace', () => {
+    let popoverMountEl;
+
+    beforeEach(() => {
+      popoverMountEl = createPopoverMountEl({
+        lockedByAncestor: true,
+        lockedByApplicationSetting: true,
+      });
+      createWrapper();
+    });
+
+    it('application setting takes precedence and correct message is shown', () => {
+      expectPopoverMessageExists('This setting has been enforced by an instance admin.');
+    });
+
+    it('sets `target` prop correctly', () => {
+      expectCorrectPopoverTarget(popoverMountEl);
+    });
+  });
+
+  describe('when setting is not locked', () => {
+    beforeEach(() => {
+      createPopoverMountEl({
+        lockedByAncestor: false,
+        lockedByApplicationSetting: false,
+      });
+      createWrapper();
+    });
+
+    it('does not render popover', () => {
+      expect(findPopover().exists()).toBe(false);
+    });
+  });
+
+  describe('when there are multiple mount elements', () => {
+    let popoverMountEl1;
+    let popoverMountEl2;
+
+    beforeEach(() => {
+      popoverMountEl1 = createPopoverMountEl({ lockedByApplicationSetting: true });
+      popoverMountEl2 = createPopoverMountEl({ lockedByAncestor: true });
+      createWrapper();
+    });
+
+    it('mounts multiple popovers', () => {
+      const popovers = wrapper.findAll(GlPopover).wrappers;
+
+      expectCorrectPopoverTarget(popoverMountEl1, popovers[0]);
+      expectCorrectPopoverTarget(popoverMountEl2, popovers[1]);
+    });
+  });
+});