diff options
-rw-r--r-- | app/assets/javascripts/vue_shared/components/confirmation_input.vue | 62 | ||||
-rw-r--r-- | spec/javascripts/vue_shared/components/confirmation_input_spec.js | 63 |
2 files changed, 0 insertions, 125 deletions
diff --git a/app/assets/javascripts/vue_shared/components/confirmation_input.vue b/app/assets/javascripts/vue_shared/components/confirmation_input.vue deleted file mode 100644 index 1aa03ea6317..00000000000 --- a/app/assets/javascripts/vue_shared/components/confirmation_input.vue +++ /dev/null @@ -1,62 +0,0 @@ -<script> - import _ from 'underscore'; - import { __, sprintf } from '~/locale'; - - export default { - props: { - inputId: { - type: String, - required: true, - }, - confirmationKey: { - type: String, - required: true, - }, - confirmationValue: { - type: String, - required: true, - }, - shouldEscapeConfirmationValue: { - type: Boolean, - required: false, - default: true, - }, - }, - computed: { - inputLabel() { - let value = this.confirmationValue; - if (this.shouldEscapeConfirmationValue) { - value = _.escape(value); - } - - return sprintf( - __('Type %{value} to confirm:'), - { value: `<code>${value}</code>` }, - false, - ); - }, - }, - methods: { - hasCorrectValue() { - return this.$refs.enteredValue.value === this.confirmationValue; - }, - }, - }; -</script> - -<template> - <div> - <label - v-html="inputLabel" - :for="inputId" - > - </label> - <input - :id="inputId" - :name="confirmationKey" - type="text" - ref="enteredValue" - class="form-control" - /> - </div> -</template> diff --git a/spec/javascripts/vue_shared/components/confirmation_input_spec.js b/spec/javascripts/vue_shared/components/confirmation_input_spec.js deleted file mode 100644 index a6a12614e77..00000000000 --- a/spec/javascripts/vue_shared/components/confirmation_input_spec.js +++ /dev/null @@ -1,63 +0,0 @@ -import Vue from 'vue'; -import confirmationInput from '~/vue_shared/components/confirmation_input.vue'; -import mountComponent from '../../helpers/vue_mount_component_helper'; - -describe('Confirmation input component', () => { - const Component = Vue.extend(confirmationInput); - const props = { - inputId: 'dummy-id', - confirmationKey: 'confirmation-key', - confirmationValue: 'confirmation-value', - }; - let vm; - - afterEach(() => { - vm.$destroy(); - }); - - describe('props', () => { - beforeEach(() => { - vm = mountComponent(Component, props); - }); - - it('sets id of the input field to inputId', () => { - expect(vm.$refs.enteredValue.id).toBe(props.inputId); - }); - - it('sets name of the input field to confirmationKey', () => { - expect(vm.$refs.enteredValue.name).toBe(props.confirmationKey); - }); - }); - - describe('computed', () => { - describe('inputLabel', () => { - it('escapes confirmationValue by default', () => { - vm = mountComponent(Component, { ...props, confirmationValue: 'n<e></e>ds escap"ng' }); - expect(vm.inputLabel).toBe('Type <code>n<e></e>ds escap"ng</code> to confirm:'); - }); - - it('does not escape confirmationValue if escapeValue is false', () => { - vm = mountComponent(Component, { ...props, confirmationValue: 'n<e></e>ds escap"ng', shouldEscapeConfirmationValue: false }); - expect(vm.inputLabel).toBe('Type <code>n<e></e>ds escap"ng</code> to confirm:'); - }); - }); - }); - - describe('methods', () => { - describe('hasCorrectValue', () => { - beforeEach(() => { - vm = mountComponent(Component, props); - }); - - it('returns false if entered value is incorrect', () => { - vm.$refs.enteredValue.value = 'incorrect'; - expect(vm.hasCorrectValue()).toBe(false); - }); - - it('returns true if entered value is correct', () => { - vm.$refs.enteredValue.value = props.confirmationValue; - expect(vm.hasCorrectValue()).toBe(true); - }); - }); - }); -}); |