Mirrors/koel
2
0
Fork 0
mirror of https://github.com/koel/koel synced 2024-11-10 14:44:13 +00:00
Code Issues Projects Releases Packages Wiki Activity

fix(test): LoginForm tests

Browse source
This commit is contained in:
Phan An 2022-07-10 16:11:57 +02:00
parent e0dacaf9fa
commit 2fc5568f9e
No known key found for this signature in database
GPG key ID: A81E4477F0BB6FDC
3 changed files with 27 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
resources/assets/js/components/auth/LoginForm.spec.ts
View file

@ -1,36 +1,36 @@
import { fireEvent } from '@testing-library/vue'
import { expect, it } from 'vitest'
import { expect, it, SpyInstanceFn } from 'vitest'
import { userStore } from '@/stores'
import UnitTestCase from '@/__tests__/UnitTestCase'
import LoginFrom from './LoginForm.vue'
import Btn from '@/components/ui/Btn.vue'
new class extends UnitTestCase {
private async submitForm (loginMock: SpyInstanceFn) {
const rendered = this.render(LoginFrom)
await fireEvent.update(rendered.getByPlaceholderText('Email Address'), 'john@doe.com')
await fireEvent.update(rendered.getByPlaceholderText('Password'), 'secret')
await fireEvent.submit(rendered.getByTestId('login-form'))
expect(loginMock).toHaveBeenCalledWith('john@doe.com', 'secret')
return rendered
}
protected test () {
it('renders', () => expect(this.render(LoginFrom, {
global: {
stubs: {
Btn
}
}
}).html()).toMatchSnapshot())
it('renders', () => expect(this.render(LoginFrom).html()).toMatchSnapshot())
it('triggers login when submitted', async () => {
const mock = this.mock(userStore, 'login')
it('logs in', async () => {
expect((await this.submitForm(this.mock(userStore, 'login'))).emitted().loggedin).toBeTruthy()
})
const { getByTestId, getByPlaceholderText } = this.render(LoginFrom, {
global: {
stubs: {
Btn
}
}
})
it('fails to log in', async () => {
const mock = this.mock(userStore, 'login').mockRejectedValue(new Error('Unauthenticated'))
const { getByTestId, emitted } = await this.submitForm(mock)
await this.tick()
await fireEvent.update(getByPlaceholderText('Email Address'), 'john@doe.com')
await fireEvent.update(getByPlaceholderText('Password'), 'secret')
await fireEvent.submit(getByTestId('login-form'))
expect(mock).toHaveBeenCalledWith('john@doe.com', 'secret')
expect(emitted().loggedin).toBeFalsy()
expect(getByTestId('login-form').classList.contains('error')).toBe(true)
})
}
}

20
resources/assets/js/components/auth/LoginForm.vue
View file

@ -76,10 +76,9 @@ form {
border-radius: .6rem;
border: 1px solid transparent;
transition: .5s;
> * + * {
margin-top: 1rem;
}
display: flex;
flex-direction: column;
gap: 1rem;
&.error {
border-color: var(--color-red);
@ -95,17 +94,4 @@ form {
background: transparent;
}
}
input {
display: block;
border: 0;
outline: none;
width: 100%;
}
button {
display: block;
margin-top: 12px;
width: 100%;
}
</style>

2
resources/assets/js/components/auth/__snapshots__/LoginForm.spec.ts.snap
View file

@ -2,6 +2,6 @@
exports[`renders 1`] = `
<form class="" data-testid="login-form" data-v-7d840a46="">
<div class="logo" data-v-7d840a46=""><img alt="Koel's logo" src="/resources/assets/img/logo.svg" width="156" data-v-7d840a46=""></div><input autofocus="" placeholder="Email Address" required="" type="email" data-v-7d840a46=""><input placeholder="Password" required="" type="password" data-v-7d840a46=""><button type="submit" data-v-27deb898="" data-v-7d840a46="">Log In</button>
<div class="logo" data-v-7d840a46=""><img alt="Koel's logo" src="undefined/resources/assets/img/logo.svg" width="156" data-v-7d840a46=""></div><input autofocus="" placeholder="Email Address" required="" type="email" data-v-7d840a46=""><input placeholder="Password" required="" type="password" data-v-7d840a46=""><button type="submit" data-v-27deb898="" data-v-7d840a46="">Log In</button>
</form>
`;