diff options
Diffstat (limited to 'spec/frontend/experimentation/components/experiment_spec.js')
-rw-r--r-- | spec/frontend/experimentation/components/experiment_spec.js | 72 |
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(''); + }); + }); +}); |