1 files changed, 70 insertions, 0 deletions
diff --git a/spec/frontend/deploy_freeze/components/deploy_freeze_table_spec.js b/spec/frontend/deploy_freeze/components/deploy_freeze_table_spec.js
new file mode 100644
index 00000000000..383ffa90b22
--- /dev/null
+++ b/spec/frontend/deploy_freeze/components/deploy_freeze_table_spec.js
@@ -0,0 +1,70 @@
+import Vuex from 'vuex';
+import { createLocalVue, mount } from '@vue/test-utils';
+import DeployFreezeTable from '~/deploy_freeze/components/deploy_freeze_table.vue';
+import createStore from '~/deploy_freeze/store';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+describe('Deploy freeze table', () => {
+  let wrapper;
+  let store;
+  const timezoneDataFixture = getJSONFixture('/api/freeze-periods/timezone_data.json');
+
+  const createComponent = () => {
+    store = createStore({
+      projectId: '8',
+      timezoneData: timezoneDataFixture,
+    });
+    jest.spyOn(store, 'dispatch').mockImplementation();
+    wrapper = mount(DeployFreezeTable, {
+      attachToDocument: true,
+      localVue,
+      store,
+    });
+  };
+
+  const findEmptyFreezePeriods = () => wrapper.find('[data-testid="empty-freeze-periods"]');
+  const findAddDeployFreezeButton = () => wrapper.find('[data-testid="add-deploy-freeze"]');
+  const findDeployFreezeTable = () => wrapper.find('[data-testid="deploy-freeze-table"]');
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  it('dispatches fetchFreezePeriods when mounted', () => {
+    expect(store.dispatch).toHaveBeenCalledWith('fetchFreezePeriods');
+  });
+
+  describe('Renders correct data', () => {
+    it('displays empty', () => {
+      expect(findEmptyFreezePeriods().exists()).toBe(true);
+      expect(findEmptyFreezePeriods().text()).toBe(
+        'No deploy freezes exist for this project. To add one, click Add deploy freeze',
+      );
+    });
+
+    it('displays data', () => {
+      const freezePeriodsFixture = getJSONFixture('/api/freeze-periods/freeze_periods.json');
+      store.state.freezePeriods = freezePeriodsFixture;
+
+      return wrapper.vm.$nextTick(() => {
+        const tableRows = findDeployFreezeTable().findAll('tbody tr');
+        expect(tableRows.length).toBe(freezePeriodsFixture.length);
+        expect(findEmptyFreezePeriods().exists()).toBe(false);
+      });
+    });
+  });
+
+  describe('Table click actions', () => {
+    it('displays add deploy freeze button', () => {
+      expect(findAddDeployFreezeButton().exists()).toBe(true);
+      expect(findAddDeployFreezeButton().text()).toBe('Add deploy freeze');
+    });
+  });
+});