1 files changed, 72 insertions, 0 deletions
diff --git a/spec/frontend/experimentation/components/experiment_spec.js b/spec/frontend/experimentation/components/experiment_spec.js
new file mode 100644
index 00000000000..dbc7da5c535
--- /dev/null
+++ b/spec/frontend/experimentation/components/experiment_spec.js
@@ -0,0 +1,72 @@
+import { shallowMount } from '@vue/test-utils';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import ExperimentComponent from '~/experimentation/components/experiment.vue';
+
+const defaultProps = { name: 'experiment_name' };
+const defaultSlots = {
+  candidate: `<p>Candidate</p>`,
+  control: `<p>Control</p>`,
+};
+
+describe('ExperimentComponent', () => {
+  const oldGon = window.gon;
+  let wrapper;
+
+  const createComponent = (propsData = defaultProps, slots = defaultSlots) => {
+    wrapper = extendedWrapper(shallowMount(ExperimentComponent, { propsData, slots }));
+  };
+
+  const mockVariant = (expectedVariant) => {
+    window.gon = { experiment: { experiment_name: { variant: expectedVariant } } };
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+    window.gon = oldGon;
+  });
+
+  describe('when variant and experiment is set', () => {
+    it('renders control when it is the active variant', () => {
+      mockVariant('control');
+
+      createComponent();
+
+      expect(wrapper.text()).toBe('Control');
+    });
+
+    it('renders candidate when it is the active variant', () => {
+      mockVariant('candidate');
+
+      createComponent();
+
+      expect(wrapper.text()).toBe('Candidate');
+    });
+  });
+
+  describe('when variant or experiment is not set', () => {
+    it('renders the control slot when no variant is defined', () => {
+      mockVariant(undefined);
+
+      createComponent();
+
+      expect(wrapper.text()).toBe('Control');
+    });
+
+    it('renders nothing when behavior is not set for variant', () => {
+      mockVariant('non-existing-variant');
+
+      createComponent(defaultProps, { control: `<p>First</p>`, other: `<p>Other</p>` });
+
+      expect(wrapper.text()).toBe('');
+    });
+
+    it('renders nothing when there are no slots', () => {
+      mockVariant('control');
+
+      createComponent(defaultProps, {});
+
+      expect(wrapper.text()).toBe('');
+    });
+  });
+});