Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
heptapod
heptapod
Commits
b95f5d8ba372
Commit
ca0d107e
authored
Jan 30, 2018
by
Jose Ivan Vargas
Browse files
Add confirmation input component
parent
f78743208313
Changes
3
Hide whitespace changes
Inline
Side-by-side
app/assets/javascripts/vue_shared/components/confirmation_input.vue
0 → 100644
View file @
b95f5d8b
<
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
>
changelogs/unreleased/add-confirmation-input-for-modals.yml
0 → 100644
View file @
b95f5d8b
---
title
:
Add confirmation-input component
merge_request
:
16816
author
:
type
:
other
spec/javascripts/vue_shared/components/confirmation_input_spec.js
0 → 100644
View file @
b95f5d8b
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
);
});
});
});
});
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment