1 files changed, 51 insertions, 0 deletions
diff --git a/spec/frontend/clusters_list/components/ancestor_notice_spec.js b/spec/frontend/clusters_list/components/ancestor_notice_spec.js
new file mode 100644
index 00000000000..c931912eaf9
--- /dev/null
+++ b/spec/frontend/clusters_list/components/ancestor_notice_spec.js
@@ -0,0 +1,51 @@
+import AncestorNotice from '~/clusters_list/components/ancestor_notice.vue';
+import ClusterStore from '~/clusters_list/store';
+import { shallowMount } from '@vue/test-utils';
+import { GlLink, GlSprintf } from '@gitlab/ui';
+
+describe('ClustersAncestorNotice', () => {
+  let store;
+  let wrapper;
+
+  const createWrapper = () => {
+    store = ClusterStore({ ancestorHelperPath: '/some/ancestor/path' });
+    wrapper = shallowMount(AncestorNotice, { store, stubs: { GlSprintf } });
+    return wrapper.vm.$nextTick();
+  };
+
+  beforeEach(() => {
+    return createWrapper();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('when cluster does not have ancestors', () => {
+    beforeEach(() => {
+      store.state.hasAncestorClusters = false;
+      return wrapper.vm.$nextTick();
+    });
+
+    it('displays no notice', () => {
+      expect(wrapper.isEmpty()).toBe(true);
+    });
+  });
+
+  describe('when cluster has ancestors', () => {
+    beforeEach(() => {
+      store.state.hasAncestorClusters = true;
+      return wrapper.vm.$nextTick();
+    });
+
+    it('displays notice text', () => {
+      expect(wrapper.text()).toContain(
+        'Clusters are utilized by selecting the nearest ancestor with a matching environment scope. For example, project clusters will override group clusters.',
+      );
+    });
+
+    it('displays link', () => {
+      expect(wrapper.contains(GlLink)).toBe(true);
+    });
+  });
+});