1 files changed, 63 insertions, 0 deletions
diff --git a/spec/frontend/work_items_hierarchy/components/app_spec.js b/spec/frontend/work_items_hierarchy/components/app_spec.js
new file mode 100644
index 00000000000..092e9c90553
--- /dev/null
+++ b/spec/frontend/work_items_hierarchy/components/app_spec.js
@@ -0,0 +1,63 @@
+import { nextTick } from 'vue';
+import { createLocalVue, mount } from '@vue/test-utils';
+import VueApollo from 'vue-apollo';
+import { GlBanner } from '@gitlab/ui';
+import App from '~/work_items_hierarchy/components/app.vue';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+
+const localVue = createLocalVue();
+localVue.use(VueApollo);
+
+describe('WorkItemsHierarchy App', () => {
+  let wrapper;
+  const createComponent = (props = {}, data = {}) => {
+    wrapper = extendedWrapper(
+      mount(App, {
+        localVue,
+        provide: {
+          illustrationPath: '/foo.svg',
+          licensePlan: 'free',
+          ...props,
+        },
+        data() {
+          return data;
+        },
+      }),
+    );
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('survey banner', () => {
+    it('shows when the banner is visible', () => {
+      createComponent({}, { bannerVisible: true });
+
+      expect(wrapper.find(GlBanner).exists()).toBe(true);
+    });
+
+    it('hide when close is called', async () => {
+      createComponent({}, { bannerVisible: true });
+
+      wrapper.findByTestId('close-icon').trigger('click');
+
+      await nextTick();
+
+      expect(wrapper.find(GlBanner).exists()).toBe(false);
+    });
+  });
+
+  describe('Unavailable structure', () => {
+    it.each`
+      licensePlan   | visible
+      ${'free'}     | ${true}
+      ${'premium'}  | ${true}
+      ${'ultimate'} | ${false}
+    `('visibility is $visible when plan is $licensePlan', ({ licensePlan, visible }) => {
+      createComponent({ licensePlan });
+
+      expect(wrapper.findByTestId('unavailable-structure').exists()).toBe(visible);
+    });
+  });
+});