1 files changed, 168 insertions, 0 deletions
diff --git a/spec/frontend/feature_flags/components/feature_flags_tab_spec.js b/spec/frontend/feature_flags/components/feature_flags_tab_spec.js
new file mode 100644
index 00000000000..bc90c5ceb2d
--- /dev/null
+++ b/spec/frontend/feature_flags/components/feature_flags_tab_spec.js
@@ -0,0 +1,168 @@
+import { mount } from '@vue/test-utils';
+import { GlAlert, GlBadge, GlEmptyState, GlLink, GlLoadingIcon, GlTabs } from '@gitlab/ui';
+import FeatureFlagsTab from '~/feature_flags/components/feature_flags_tab.vue';
+
+const DEFAULT_PROPS = {
+  title: 'test',
+  count: 5,
+  alerts: ['an alert', 'another alert'],
+  isLoading: false,
+  loadingLabel: 'test loading',
+  errorState: false,
+  errorTitle: 'test title',
+  emptyState: true,
+  emptyTitle: 'test empty',
+};
+
+const DEFAULT_PROVIDE = {
+  errorStateSvgPath: '/error.svg',
+  featureFlagsHelpPagePath: '/help/page/path',
+};
+
+describe('feature_flags/components/feature_flags_tab.vue', () => {
+  let wrapper;
+
+  const factory = (props = {}) =>
+    mount(
+      {
+        components: {
+          GlTabs,
+          FeatureFlagsTab,
+        },
+        render(h) {
+          return h(GlTabs, [
+            h(FeatureFlagsTab, { props: this.$attrs, on: this.$listeners }, this.$slots.default),
+          ]);
+        },
+      },
+      {
+        propsData: {
+          ...DEFAULT_PROPS,
+          ...props,
+        },
+        provide: DEFAULT_PROVIDE,
+        slots: {
+          default: '<p data-testid="test-slot">testing</p>',
+        },
+      },
+    );
+
+  afterEach(() => {
+    if (wrapper?.destroy) {
+      wrapper.destroy();
+    }
+
+    wrapper = null;
+  });
+
+  describe('alerts', () => {
+    let alerts;
+
+    beforeEach(() => {
+      wrapper = factory();
+      alerts = wrapper.findAll(GlAlert);
+    });
+
+    it('should show any alerts', () => {
+      expect(alerts).toHaveLength(DEFAULT_PROPS.alerts.length);
+      alerts.wrappers.forEach((alert, i) => expect(alert.text()).toBe(DEFAULT_PROPS.alerts[i]));
+    });
+
+    it('should emit a dismiss event for a dismissed alert', () => {
+      alerts.at(0).vm.$emit('dismiss');
+
+      expect(wrapper.find(FeatureFlagsTab).emitted('dismissAlert')).toEqual([[0]]);
+    });
+  });
+
+  describe('loading', () => {
+    beforeEach(() => {
+      wrapper = factory({ isLoading: true });
+    });
+
+    it('should show a loading icon and nothing else', () => {
+      expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
+      expect(wrapper.findAll(GlEmptyState)).toHaveLength(0);
+    });
+  });
+
+  describe('error', () => {
+    let emptyState;
+
+    beforeEach(() => {
+      wrapper = factory({ errorState: true });
+      emptyState = wrapper.find(GlEmptyState);
+    });
+
+    it('should show an error state if there has been an error', () => {
+      expect(emptyState.text()).toContain(DEFAULT_PROPS.errorTitle);
+      expect(emptyState.text()).toContain(
+        'Try again in a few moments or contact your support team.',
+      );
+      expect(emptyState.props('svgPath')).toBe(DEFAULT_PROVIDE.errorStateSvgPath);
+    });
+  });
+
+  describe('empty', () => {
+    let emptyState;
+    let emptyStateLink;
+
+    beforeEach(() => {
+      wrapper = factory({ emptyState: true });
+      emptyState = wrapper.find(GlEmptyState);
+      emptyStateLink = emptyState.find(GlLink);
+    });
+
+    it('should show an empty state if it is empty', () => {
+      expect(emptyState.text()).toContain(DEFAULT_PROPS.emptyTitle);
+      expect(emptyState.text()).toContain(
+        'Feature flags allow you to configure your code into different flavors by dynamically toggling certain functionality.',
+      );
+      expect(emptyState.props('svgPath')).toBe(DEFAULT_PROVIDE.errorStateSvgPath);
+      expect(emptyStateLink.attributes('href')).toBe(DEFAULT_PROVIDE.featureFlagsHelpPagePath);
+      expect(emptyStateLink.text()).toBe('More information');
+    });
+  });
+
+  describe('slot', () => {
+    let slot;
+
+    beforeEach(async () => {
+      wrapper = factory();
+      await wrapper.vm.$nextTick();
+
+      slot = wrapper.find('[data-testid="test-slot"]');
+    });
+
+    it('should display the passed slot', () => {
+      expect(slot.exists()).toBe(true);
+      expect(slot.text()).toBe('testing');
+    });
+  });
+
+  describe('count', () => {
+    it('should display a count if there is one', async () => {
+      wrapper = factory();
+      await wrapper.vm.$nextTick();
+
+      expect(wrapper.find(GlBadge).text()).toBe(DEFAULT_PROPS.count.toString());
+    });
+    it('should display 0 if there is no count', async () => {
+      wrapper = factory({ count: undefined });
+      await wrapper.vm.$nextTick();
+
+      expect(wrapper.find(GlBadge).text()).toBe('0');
+    });
+  });
+
+  describe('title', () => {
+    it('should show the title', async () => {
+      wrapper = factory();
+      await wrapper.vm.$nextTick();
+
+      expect(wrapper.find('[data-testid="feature-flags-tab-title"]').text()).toBe(
+        DEFAULT_PROPS.title,
+      );
+    });
+  });
+});