diff options
Diffstat (limited to 'spec/frontend/registry/shared/components')
| -rw-r--r-- | spec/frontend/registry/shared/components/__snapshots__/expiration_policy_fields_spec.js.snap | 133 | ||||
| -rw-r--r-- | spec/frontend/registry/shared/components/__snapshots__/expiration_policy_form_spec.js.snap | 186 | ||||
| -rw-r--r-- | spec/frontend/registry/shared/components/expiration_policy_fields_spec.js (renamed from spec/frontend/registry/shared/components/expiration_policy_form_spec.js) | 101 |
3 files changed, 151 insertions, 269 deletions
diff --git a/spec/frontend/registry/shared/components/__snapshots__/expiration_policy_fields_spec.js.snap b/spec/frontend/registry/shared/components/__snapshots__/expiration_policy_fields_spec.js.snap new file mode 100644 index 00000000000..c5f5ea68d9e --- /dev/null +++ b/spec/frontend/registry/shared/components/__snapshots__/expiration_policy_fields_spec.js.snap @@ -0,0 +1,133 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Expiration Policy Form renders 1`] = ` +<div + class="lh-2" +> + <glformgroup-stub + id="expiration-policy-toggle-group" + label="Expiration policy:" + label-align="right" + label-cols="3" + label-for="expiration-policy-toggle" + > + <div + class="d-flex align-items-start" + > + <gltoggle-stub + id="expiration-policy-toggle" + labeloff="Toggle Status: OFF" + labelon="Toggle Status: ON" + /> + + <span + class="mb-2 ml-1 lh-2" + > + Docker tag expiration policy is + <strong> + disabled + </strong> + </span> + </div> + </glformgroup-stub> + + <glformgroup-stub + id="expiration-policy-interval-group" + label="Expiration interval:" + label-align="right" + label-cols="3" + label-for="expiration-policy-interval" + > + <glformselect-stub + disabled="true" + id="expiration-policy-interval" + > + <option + value="foo" + > + + Foo + + </option> + <option + value="bar" + > + + Bar + + </option> + </glformselect-stub> + </glformgroup-stub> + <glformgroup-stub + id="expiration-policy-schedule-group" + label="Expiration schedule:" + label-align="right" + label-cols="3" + label-for="expiration-policy-schedule" + > + <glformselect-stub + disabled="true" + id="expiration-policy-schedule" + > + <option + value="foo" + > + + Foo + + </option> + <option + value="bar" + > + + Bar + + </option> + </glformselect-stub> + </glformgroup-stub> + <glformgroup-stub + id="expiration-policy-latest-group" + label="Number of tags to retain:" + label-align="right" + label-cols="3" + label-for="expiration-policy-latest" + > + <glformselect-stub + disabled="true" + id="expiration-policy-latest" + > + <option + value="foo" + > + + Foo + + </option> + <option + value="bar" + > + + Bar + + </option> + </glformselect-stub> + </glformgroup-stub> + + <glformgroup-stub + id="expiration-policy-name-matching-group" + invalid-feedback="The value of this input should be less than 255 characters" + label="Docker tags with names matching this regex pattern will expire:" + label-align="right" + label-cols="3" + label-for="expiration-policy-name-matching" + > + <glformtextarea-stub + disabled="true" + id="expiration-policy-name-matching" + placeholder=".*" + trim="" + value="" + /> + </glformgroup-stub> +</div> +`; diff --git a/spec/frontend/registry/shared/components/__snapshots__/expiration_policy_form_spec.js.snap b/spec/frontend/registry/shared/components/__snapshots__/expiration_policy_form_spec.js.snap deleted file mode 100644 index b53736951e1..00000000000 --- a/spec/frontend/registry/shared/components/__snapshots__/expiration_policy_form_spec.js.snap +++ /dev/null @@ -1,186 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Expiration Policy Form renders 1`] = ` -<form - class="lh-2" -> - <div - class="card" - > - <!----> - <div - class="card-header" - > - - Tag expiration policy - - </div> - <div - class="card-body" - > - <!----> - <!----> - - <glformgroup-stub - id="expiration-policy-toggle-group" - label="Expiration policy:" - label-align="right" - label-cols="3" - label-for="expiration-policy-toggle" - > - <div - class="d-flex align-items-start" - > - <gltoggle-stub - id="expiration-policy-toggle" - labeloff="Toggle Status: OFF" - labelon="Toggle Status: ON" - /> - - <span - class="mb-2 ml-1 lh-2" - > - Docker tag expiration policy is - <strong> - disabled - </strong> - </span> - </div> - </glformgroup-stub> - - <glformgroup-stub - id="expiration-policy-interval-group" - label="Expiration interval:" - label-align="right" - label-cols="3" - label-for="expiration-policy-interval" - > - <glformselect-stub - disabled="true" - id="expiration-policy-interval" - > - <option - value="foo" - > - - Foo - - </option> - <option - value="bar" - > - - Bar - - </option> - </glformselect-stub> - </glformgroup-stub> - - <glformgroup-stub - id="expiration-policy-schedule-group" - label="Expiration schedule:" - label-align="right" - label-cols="3" - label-for="expiration-policy-schedule" - > - <glformselect-stub - disabled="true" - id="expiration-policy-schedule" - > - <option - value="foo" - > - - Foo - - </option> - <option - value="bar" - > - - Bar - - </option> - </glformselect-stub> - </glformgroup-stub> - - <glformgroup-stub - id="expiration-policy-latest-group" - label="Number of tags to retain:" - label-align="right" - label-cols="3" - label-for="expiration-policy-latest" - > - <glformselect-stub - disabled="true" - id="expiration-policy-latest" - > - <option - value="foo" - > - - Foo - - </option> - <option - value="bar" - > - - Bar - - </option> - </glformselect-stub> - </glformgroup-stub> - - <glformgroup-stub - id="expiration-policy-name-matching-group" - invalid-feedback="The value of this input should be less than 255 characters" - label="Docker tags with names matching this regex pattern will expire:" - label-align="right" - label-cols="3" - label-for="expiration-policy-name-matching" - > - <glformtextarea-stub - disabled="true" - id="expiration-policy-name-matching" - placeholder=".*" - trim="" - value="" - /> - </glformgroup-stub> - - </div> - <div - class="card-footer" - > - <div - class="d-flex justify-content-end" - > - <glbutton-stub - class="mr-2 d-block" - size="md" - type="reset" - variant="secondary" - > - - Cancel - - </glbutton-stub> - - <glbutton-stub - class="d-flex justify-content-center align-items-center js-no-auto-disable" - size="md" - type="submit" - variant="success" - > - - Save expiration policy - - <!----> - </glbutton-stub> - </div> - </div> - <!----> - </div> -</form> -`; diff --git a/spec/frontend/registry/shared/components/expiration_policy_form_spec.js b/spec/frontend/registry/shared/components/expiration_policy_fields_spec.js index b51519925f1..b384fd62406 100644 --- a/spec/frontend/registry/shared/components/expiration_policy_form_spec.js +++ b/spec/frontend/registry/shared/components/expiration_policy_fields_spec.js @@ -1,6 +1,6 @@ import { mount } from '@vue/test-utils'; import stubChildren from 'helpers/stub_children'; -import component from '~/registry/shared/components/expiration_policy_form.vue'; +import component from '~/registry/shared/components/expiration_policy_fields.vue'; import { NAME_REGEX_LENGTH } from '~/registry/shared/constants'; import { formOptions } from '../mock_data'; @@ -10,22 +10,14 @@ describe('Expiration Policy Form', () => { const FORM_ELEMENTS_ID_PREFIX = '#expiration-policy'; - const GlLoadingIcon = { name: 'gl-loading-icon-stub', template: '<svg></svg>' }; - const findFormGroup = name => wrapper.find(`${FORM_ELEMENTS_ID_PREFIX}-${name}-group`); const findFormElements = (name, parent = wrapper) => parent.find(`${FORM_ELEMENTS_ID_PREFIX}-${name}`); - const findCancelButton = () => wrapper.find({ ref: 'cancel-button' }); - const findSaveButton = () => wrapper.find({ ref: 'save-button' }); - const findForm = () => wrapper.find({ ref: 'form-element' }); - const findLoadingIcon = (parent = wrapper) => parent.find(GlLoadingIcon); const mountComponent = props => { wrapper = mount(component, { stubs: { ...stubChildren(component), - GlCard: false, - GlLoadingIcon, }, propsData: { formOptions, @@ -114,77 +106,20 @@ describe('Expiration Policy Form', () => { }, ); - describe('form actions', () => { - describe('cancel button', () => { - it('has type reset', () => { - mountComponent(); - expect(findCancelButton().attributes('type')).toBe('reset'); - }); - - it('is disabled when disableCancelButton is true', () => { - mountComponent({ disableCancelButton: true }); - return wrapper.vm.$nextTick().then(() => { - expect(findCancelButton().attributes('disabled')).toBe('true'); - }); - }); - - it('is disabled isLoading is true', () => { - mountComponent({ isLoading: true }); - return wrapper.vm.$nextTick().then(() => { - expect(findCancelButton().attributes('disabled')).toBe('true'); - }); - }); - - it('is enabled when isLoading and disableCancelButton are false', () => { - mountComponent({ disableCancelButton: false, isLoading: false }); - return wrapper.vm.$nextTick().then(() => { - expect(findCancelButton().attributes('disabled')).toBe(undefined); - }); - }); - }); - - describe('form cancel event', () => { - it('calls the appropriate function', () => { - mountComponent(); - findForm().trigger('reset'); - expect(wrapper.emitted('reset')).toBeTruthy(); - }); - }); - - it('save has type submit', () => { - mountComponent(); - expect(findSaveButton().attributes('type')).toBe('submit'); - }); - - describe('when isLoading is true', () => { - beforeEach(() => { - mountComponent({ isLoading: true }); - }); - - it.each` - elementName - ${'toggle'} - ${'interval'} - ${'schedule'} - ${'latest'} - ${'name-matching'} - `(`${FORM_ELEMENTS_ID_PREFIX}-$elementName is disabled`, ({ elementName }) => { - expect(findFormElements(elementName).attributes('disabled')).toBe('true'); - }); - - it('submit button is disabled and shows a spinner', () => { - const button = findSaveButton(); - expect(button.attributes('disabled')).toBeTruthy(); - expect(findLoadingIcon(button)).toExist(); - }); + describe('when isLoading is true', () => { + beforeEach(() => { + mountComponent({ isLoading: true }); }); - describe('form submit event ', () => { - it('calls the appropriate function', () => { - mountComponent(); - findForm().trigger('submit'); - expect(wrapper.emitted('submit')).toBeTruthy(); - }); + it.each` + elementName + ${'toggle'} + ${'interval'} + ${'schedule'} + ${'latest'} + ${'name-matching'} + `(`${FORM_ELEMENTS_ID_PREFIX}-$elementName is disabled`, ({ elementName }) => { + expect(findFormElements(elementName).attributes('disabled')).toBe('true'); }); }); @@ -196,20 +131,20 @@ describe('Expiration Policy Form', () => { mountComponent({ value: { name_regex: invalidString } }); }); - it('save btn is disabled', () => { - expect(findSaveButton().attributes('disabled')).toBeTruthy(); - }); - it('nameRegexState is false', () => { expect(wrapper.vm.nameRegexState).toBe(false); }); + + it('emit the @invalidated event', () => { + expect(wrapper.emitted('invalidated')).toBeTruthy(); + }); }); it('if the user did not type validation is null', () => { mountComponent({ value: { name_regex: '' } }); return wrapper.vm.$nextTick().then(() => { expect(wrapper.vm.nameRegexState).toBe(null); - expect(findSaveButton().attributes('disabled')).toBeFalsy(); + expect(wrapper.emitted('validated')).toBeTruthy(); }); }); |