1 files changed, 48 insertions, 0 deletions
diff --git a/spec/frontend/custom_metrics/components/custom_metrics_form_spec.js b/spec/frontend/custom_metrics/components/custom_metrics_form_spec.js
new file mode 100644
index 00000000000..384d6699150
--- /dev/null
+++ b/spec/frontend/custom_metrics/components/custom_metrics_form_spec.js
@@ -0,0 +1,48 @@
+import { shallowMount } from '@vue/test-utils';
+import CustomMetricsForm from '~/custom_metrics/components/custom_metrics_form.vue';
+
+describe('CustomMetricsForm', () => {
+  let wrapper;
+
+  function mountComponent({
+    metricPersisted = false,
+    formData = {
+      title: '',
+      query: '',
+      yLabel: '',
+      unit: '',
+      group: '',
+      legend: '',
+    },
+  }) {
+    wrapper = shallowMount(CustomMetricsForm, {
+      propsData: {
+        customMetricsPath: '',
+        editProjectServicePath: '',
+        metricPersisted,
+        validateQueryPath: '',
+        formData,
+      },
+    });
+  }
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('Computed', () => {
+    it('Form button and title text indicate the custom metric is being edited', () => {
+      mountComponent({ metricPersisted: true });
+
+      expect(wrapper.vm.saveButtonText).toBe('Save Changes');
+      expect(wrapper.vm.titleText).toBe('Edit metric');
+    });
+
+    it('Form button and title text indicate the custom metric is being created', () => {
+      mountComponent({ metricPersisted: false });
+
+      expect(wrapper.vm.saveButtonText).toBe('Create metric');
+      expect(wrapper.vm.titleText).toBe('New metric');
+    });
+  });
+});