Move cycle analytics stages templates to vue

The existing stage list items are rendered
in haml, migrating them to vuejs for future
work.

Fix alignment of median value

Test for stage_nav_item.vue

1 files changed, 177 insertions, 0 deletions

diff --git a/spec/frontend/cycle_analytics/stage_nav_item_spec.js b/spec/frontend/cycle_analytics/stage_nav_item_spec.js
new file mode 100644
index 00000000000..ff079082ca7
--- /dev/null
+++ b/spec/frontend/cycle_analytics/stage_nav_item_spec.js
@@ -0,0 +1,177 @@
+import { mount, shallowMount } from '@vue/test-utils';
+import StageNavItem from '~/cycle_analytics/components/stage_nav_item.vue';
+
+describe('StageNavItem', () => {
+  let wrapper = null;
+  const title = 'Cool stage';
+  const value = '1 day';
+
+  function createComponent(props, shallow = true) {
+    const func = shallow ? shallowMount : mount;
+    return func(StageNavItem, {
+      propsData: {
+        canEdit: false,
+        isActive: false,
+        isUserAllowed: false,
+        isDefaultStage: true,
+        title,
+        value,
+        ...props,
+      },
+    });
+  }
+
+  function hasStageName() {
+    const stageName = wrapper.find('.stage-name');
+    expect(stageName.exists()).toBe(true);
+    expect(stageName.text()).toEqual(title);
+  }
+
+  it('renders stage name', () => {
+    wrapper = createComponent({ isUserAllowed: true });
+    hasStageName();
+    wrapper.destroy();
+  });
+
+  describe('User has access', () => {
+    describe('with a value', () => {
+      beforeEach(() => {
+        wrapper = createComponent({ isUserAllowed: true });
+      });
+
+      afterEach(() => {
+        wrapper.destroy();
+      });
+      it('renders the value for median value', () => {
+        expect(wrapper.find('.stage-empty').exists()).toBe(false);
+        expect(wrapper.find('.not-available').exists()).toBe(false);
+        expect(wrapper.find('.stage-median').text()).toEqual(value);
+      });
+    });
+
+    describe('without a value', () => {
+      beforeEach(() => {
+        wrapper = createComponent({ isUserAllowed: true, value: null });
+      });
+
+      afterEach(() => {
+        wrapper.destroy();
+      });
+
+      it('has the stage-empty class', () => {
+        expect(wrapper.find('.stage-empty').exists()).toBe(true);
+      });
+
+      it('renders Not enough data for the median value', () => {
+        expect(wrapper.find('.stage-median').text()).toEqual('Not enough data');
+      });
+    });
+  });
+
+  describe('is active', () => {
+    beforeEach(() => {
+      wrapper = createComponent({ isActive: true }, false);
+    });
+
+    afterEach(() => {
+      wrapper.destroy();
+    });
+    it('has the active class', () => {
+      expect(wrapper.find('.stage-nav-item').classes('active')).toBe(true);
+    });
+  });
+
+  describe('is not active', () => {
+    beforeEach(() => {
+      wrapper = createComponent();
+    });
+
+    afterEach(() => {
+      wrapper.destroy();
+    });
+    it('emits the `select` event when clicked', () => {
+      expect(wrapper.emitted().select).toBeUndefined();
+      wrapper.trigger('click');
+      expect(wrapper.emitted().select.length).toBe(1);
+    });
+  });
+
+  describe('User does not have access', () => {
+    beforeEach(() => {
+      wrapper = createComponent({ isUserAllowed: false }, false);
+    });
+
+    afterEach(() => {
+      wrapper.destroy();
+    });
+    it('renders stage name', () => {
+      hasStageName();
+    });
+
+    it('has class not-available', () => {
+      expect(wrapper.find('.stage-empty').exists()).toBe(false);
+      expect(wrapper.find('.not-available').exists()).toBe(true);
+    });
+
+    it('renders Not available for the median value', () => {
+      expect(wrapper.find('.stage-median').text()).toBe('Not available');
+    });
+    it('does not render options menu', () => {
+      expect(wrapper.find('.more-actions-toggle').exists()).toBe(false);
+    });
+  });
+
+  describe('User can edit stages', () => {
+    beforeEach(() => {
+      wrapper = createComponent({ canEdit: true, isUserAllowed: true }, false);
+    });
+
+    afterEach(() => {
+      wrapper.destroy();
+    });
+    it('renders stage name', () => {
+      hasStageName();
+    });
+
+    it('renders options menu', () => {
+      expect(wrapper.find('.more-actions-toggle').exists()).toBe(true);
+    });
+
+    describe('Default stages', () => {
+      beforeEach(() => {
+        wrapper = createComponent(
+          { canEdit: true, isUserAllowed: true, isDefaultStage: true },
+          false,
+        );
+      });
+      it('can hide the stage', () => {
+        expect(wrapper.text()).toContain('Hide stage');
+      });
+      it('can not edit the stage', () => {
+        expect(wrapper.text()).not.toContain('Edit stage');
+      });
+      it('can not remove the stage', () => {
+        expect(wrapper.text()).not.toContain('Remove stage');
+      });
+    });
+
+    describe('Custom stages', () => {
+      beforeEach(() => {
+        wrapper = createComponent(
+          { canEdit: true, isUserAllowed: true, isDefaultStage: false },
+          false,
+        );
+      });
+      it('can edit the stage', () => {
+        expect(wrapper.text()).toContain('Edit stage');
+      });
+      it('can remove the stage', () => {
+        expect(wrapper.text()).toContain('Remove stage');
+      });
+
+      it('can not hide the stage', () => {
+        expect(wrapper.text()).not.toContain('Hide stage');
+      });
+    });
+  });
+});