diff options
Diffstat (limited to 'spec/frontend/registry/explorer/components/quickstart_dropdown_spec.js')
-rw-r--r-- | spec/frontend/registry/explorer/components/quickstart_dropdown_spec.js | 95 |
1 files changed, 95 insertions, 0 deletions
diff --git a/spec/frontend/registry/explorer/components/quickstart_dropdown_spec.js b/spec/frontend/registry/explorer/components/quickstart_dropdown_spec.js new file mode 100644 index 00000000000..3dfe50ebe13 --- /dev/null +++ b/spec/frontend/registry/explorer/components/quickstart_dropdown_spec.js @@ -0,0 +1,95 @@ +import Vuex from 'vuex'; +import { mount, createLocalVue } from '@vue/test-utils'; +import { GlDropdown, GlFormGroup, GlFormInputGroup } from '@gitlab/ui'; +import * as getters from '~/registry/explorer/stores/getters'; +import QuickstartDropdown from '~/registry/explorer/components/quickstart_dropdown.vue'; +import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; + +import { + QUICK_START, + LOGIN_COMMAND_LABEL, + COPY_LOGIN_TITLE, + BUILD_COMMAND_LABEL, + COPY_BUILD_TITLE, + PUSH_COMMAND_LABEL, + COPY_PUSH_TITLE, +} from '~/registry/explorer//constants'; + +const localVue = createLocalVue(); +localVue.use(Vuex); + +describe('quickstart_dropdown', () => { + let wrapper; + let store; + + const findDropdownButton = () => wrapper.find(GlDropdown); + const findFormGroups = () => wrapper.findAll(GlFormGroup); + + const mountComponent = () => { + store = new Vuex.Store({ + state: { + config: { + repositoryUrl: 'foo', + registryHostUrlWithPort: 'bar', + }, + }, + getters, + }); + wrapper = mount(QuickstartDropdown, { + localVue, + store, + }); + }; + + beforeEach(() => { + mountComponent(); + }); + + afterEach(() => { + wrapper.destroy(); + wrapper = null; + store = null; + }); + + it('shows the correct text on the button', () => { + expect(findDropdownButton().text()).toContain(QUICK_START); + }); + + describe.each` + index | id | labelText | titleText | getter + ${0} | ${'docker-login-btn'} | ${LOGIN_COMMAND_LABEL} | ${COPY_LOGIN_TITLE} | ${'dockerLoginCommand'} + ${1} | ${'docker-build-btn'} | ${BUILD_COMMAND_LABEL} | ${COPY_BUILD_TITLE} | ${'dockerBuildCommand'} + ${2} | ${'docker-push-btn'} | ${PUSH_COMMAND_LABEL} | ${COPY_PUSH_TITLE} | ${'dockerPushCommand'} + `('form group at $index', ({ index, id, labelText, titleText, getter }) => { + let formGroup; + + const findFormInputGroup = parent => parent.find(GlFormInputGroup); + const findClipboardButton = parent => parent.find(ClipboardButton); + + beforeEach(() => { + formGroup = findFormGroups().at(index); + }); + + it('exists', () => { + expect(formGroup.exists()).toBe(true); + }); + + it(`has a label ${labelText}`, () => { + expect(formGroup.text()).toBe(labelText); + }); + + it(`contains a form input group with ${id} id and with value equal to ${getter} getter`, () => { + const formInputGroup = findFormInputGroup(formGroup); + expect(formInputGroup.exists()).toBe(true); + expect(formInputGroup.attributes('id')).toBe(id); + expect(formInputGroup.props('value')).toBe(store.getters[getter]); + }); + + it(`contains a clipboard button with title of ${titleText} and text equal to ${getter} getter`, () => { + const clipBoardButton = findClipboardButton(formGroup); + expect(clipBoardButton.exists()).toBe(true); + expect(clipBoardButton.props('title')).toBe(titleText); + expect(clipBoardButton.props('text')).toBe(store.getters[getter]); + }); + }); +}); |