diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-10-21 18:12:54 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-10-21 18:12:54 +0300 |
commit | 2d31f347bf835e0951054cf2ee9d0e2cbc5b77fe (patch) | |
tree | 8e84dd0271fb0b4d154a2a899d1ea04f601b2eec /spec/frontend/vue_shared/components/confirm_danger | |
parent | 5e544154e1dadfaded22a8f37206b32b4dc27014 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'spec/frontend/vue_shared/components/confirm_danger')
-rw-r--r-- | spec/frontend/vue_shared/components/confirm_danger/confirm_danger_modal_spec.js | 99 | ||||
-rw-r--r-- | spec/frontend/vue_shared/components/confirm_danger/confirm_danger_spec.js | 61 |
2 files changed, 160 insertions, 0 deletions
diff --git a/spec/frontend/vue_shared/components/confirm_danger/confirm_danger_modal_spec.js b/spec/frontend/vue_shared/components/confirm_danger/confirm_danger_modal_spec.js new file mode 100644 index 00000000000..f75694bd504 --- /dev/null +++ b/spec/frontend/vue_shared/components/confirm_danger/confirm_danger_modal_spec.js @@ -0,0 +1,99 @@ +import { GlModal, GlSprintf } from '@gitlab/ui'; +import { + CONFIRM_DANGER_WARNING, + CONFIRM_DANGER_MODAL_BUTTON, + CONFIRM_DANGER_MODAL_ID, +} from '~/vue_shared/components/confirm_danger/constants'; +import ConfirmDangerModal from '~/vue_shared/components/confirm_danger/confirm_danger_modal.vue'; +import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; + +describe('Confirm Danger Modal', () => { + const confirmDangerMessage = 'This is a dangerous activity'; + const confirmButtonText = 'Confirm button text'; + const phrase = 'You must construct additional pylons'; + const modalId = CONFIRM_DANGER_MODAL_ID; + + let wrapper; + + const findModal = () => wrapper.findComponent(GlModal); + const findConfirmationPhrase = () => wrapper.findByTestId('confirm-danger-phrase'); + const findConfirmationInput = () => wrapper.findByTestId('confirm-danger-input'); + const findDefaultWarning = () => wrapper.findByTestId('confirm-danger-warning'); + const findAdditionalMessage = () => wrapper.findByTestId('confirm-danger-message'); + const findPrimaryAction = () => findModal().props('actionPrimary'); + const findPrimaryActionAttributes = (attr) => findPrimaryAction().attributes[0][attr]; + + const createComponent = ({ provide = {} } = {}) => + shallowMountExtended(ConfirmDangerModal, { + propsData: { + modalId, + phrase, + }, + provide, + stubs: { GlSprintf }, + }); + + beforeEach(() => { + wrapper = createComponent({ provide: { confirmDangerMessage, confirmButtonText } }); + }); + + afterEach(() => { + wrapper.destroy(); + }); + + it('renders the default warning message', () => { + expect(findDefaultWarning().text()).toBe(CONFIRM_DANGER_WARNING); + }); + + it('renders any additional messages', () => { + expect(findAdditionalMessage().text()).toBe(confirmDangerMessage); + }); + + it('renders the confirm button', () => { + expect(findPrimaryAction().text).toBe(confirmButtonText); + expect(findPrimaryActionAttributes('variant')).toBe('danger'); + }); + + it('renders the correct confirmation phrase', () => { + expect(findConfirmationPhrase().text()).toBe( + `Please type ${phrase} to proceed or close this modal to cancel.`, + ); + }); + + describe('without injected data', () => { + beforeEach(() => { + wrapper = createComponent(); + }); + + it('does not render any additional messages', () => { + expect(findAdditionalMessage().exists()).toBe(false); + }); + + it('renders the default confirm button', () => { + expect(findPrimaryAction().text).toBe(CONFIRM_DANGER_MODAL_BUTTON); + }); + }); + + describe('with a valid confirmation phrase', () => { + beforeEach(() => { + wrapper = createComponent(); + }); + + it('enables the confirm button', async () => { + expect(findPrimaryActionAttributes('disabled')).toBe(true); + + await findConfirmationInput().vm.$emit('input', phrase); + + expect(findPrimaryActionAttributes('disabled')).toBe(false); + }); + + it('emits a `confirm` event when the button is clicked', async () => { + expect(wrapper.emitted('confirm')).toBeUndefined(); + + await findConfirmationInput().vm.$emit('input', phrase); + await findModal().vm.$emit('primary'); + + expect(wrapper.emitted('confirm')).not.toBeUndefined(); + }); + }); +}); diff --git a/spec/frontend/vue_shared/components/confirm_danger/confirm_danger_spec.js b/spec/frontend/vue_shared/components/confirm_danger/confirm_danger_spec.js new file mode 100644 index 00000000000..220f897c035 --- /dev/null +++ b/spec/frontend/vue_shared/components/confirm_danger/confirm_danger_spec.js @@ -0,0 +1,61 @@ +import { GlButton } from '@gitlab/ui'; +import ConfirmDanger from '~/vue_shared/components/confirm_danger/confirm_danger.vue'; +import ConfirmDangerModal from '~/vue_shared/components/confirm_danger/confirm_danger_modal.vue'; +import { CONFIRM_DANGER_MODAL_ID } from '~/vue_shared/components/confirm_danger/constants'; +import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; + +describe('Confirm Danger Modal', () => { + let wrapper; + + const phrase = 'En Taro Adun'; + const buttonText = 'Click me!'; + const modalId = CONFIRM_DANGER_MODAL_ID; + + const findBtn = () => wrapper.findComponent(GlButton); + const findModal = () => wrapper.findComponent(ConfirmDangerModal); + const findModalProps = () => findModal().props(); + + const createComponent = (props = {}) => + shallowMountExtended(ConfirmDanger, { + propsData: { + buttonText, + phrase, + ...props, + }, + }); + + beforeEach(() => { + wrapper = createComponent(); + }); + + afterEach(() => { + wrapper.destroy(); + }); + + it('renders the button', () => { + expect(wrapper.html()).toContain(buttonText); + }); + + it('sets the modal properties', () => { + expect(findModalProps()).toMatchObject({ + modalId, + phrase, + }); + }); + + it('will disable the button if `disabled=true`', () => { + expect(findBtn().attributes('disabled')).toBeUndefined(); + + wrapper = createComponent({ disabled: true }); + + expect(findBtn().attributes('disabled')).toBe('true'); + }); + + it('will emit `confirm` when the modal confirms', () => { + expect(wrapper.emitted('confirm')).toBeUndefined(); + + findModal().vm.$emit('confirm'); + + expect(wrapper.emitted('confirm')).not.toBeUndefined(); + }); +}); |