Linting for new tests and LoginForm changes.

This commit is contained in:
Brandon Tripp 2020-11-24 15:38:49 -07:00
parent f71fb6b07b
commit 8d1931f94c
2 changed files with 6 additions and 8 deletions

View File

@ -70,9 +70,8 @@ describe('LoginForm', () => {
await Vue.nextTick()
await expect(wrapper.find('input[name = "password"]').attributes('type')).toEqual('text')
})
})
describe('Click on show password icon, icon change', () => {
const wrapper = Wrapper()
it('shows eye icon by default', () => {
@ -86,12 +85,12 @@ describe('LoginForm', () => {
})
})
describe('Focus returns to password input container after show password click', () =>{
describe('Focus returns to password input container after show password click', () => {
const wrapper = Wrapper()
const componentToGetFocus = wrapper.find('input[name ="password"]')
it('Focus is on the password field container after click', async () => {
wrapper.find('span.click-wrapper').trigger('click', {
relateTarget: componentToGetFocus
relateTarget: componentToGetFocus,
})
await Vue.nextTick()
await expect(wrapper.emitted('focus')).toBeTruthy()

View File

@ -20,7 +20,7 @@
name="email"
icon="envelope"
/>
<div class="password-wrapper" >
<div class="password-wrapper">
<ds-input
v-model="form.password"
:disabled="pending"
@ -33,7 +33,7 @@
/>
<span class="click-wrapper" @click="toggleShowPassword">
<span class="icon-wrapper" :data-test="iconName">
<base-icon class="toggle-icon" :name="iconName" />
<base-icon class="toggle-icon" :name="iconName" />
</span>
</span>
</div>
@ -79,7 +79,7 @@ export default {
},
iconName() {
return this.showPassword ? 'eye-slash' : 'eye'
}
},
},
methods: {
async onSubmit() {
@ -146,7 +146,6 @@ export default {
.click-wrapper:hover {
cursor: pointer;
&:focus-within {
background-color: $background-color-base;
border: $input-border-size solid $border-color-active;