feat: article editor core
This commit is contained in:
1 parent
d493a181e1
commit
a4734b2c91
55 files changed
+4186
-496
No files matched your search
@@ -5,7 +5,11 @@ import uiPlugin from '@nuxt/ui/vue-plugin'
|
||||
import router from '@/router'
|
||||
import LoginView from '../LoginView.vue'
|
||||
|
||||
function mockResponse(status: number, body: unknown = null, headers: Record<string, string> = {}) {
|
||||
function mockResponse(
|
||||
status: number,
|
||||
body: unknown = null,
|
||||
headers: Record<string, string> = {},
|
||||
) {
|
||||
return {
|
||||
ok: status >= 200 && status < 300,
|
||||
status,
|
||||
@@ -19,7 +23,9 @@ function routeFor(url: string, init?: RequestInit) {
|
||||
return `${method} ${url}`
|
||||
}
|
||||
|
||||
function fetchRouter(handlers: Record<string, () => Response | Promise<Response>>) {
|
||||
function fetchRouter(
|
||||
handlers: Record<string, () => Response | Promise<Response>>,
|
||||
) {
|
||||
return vi.fn((url: string, init?: RequestInit) => {
|
||||
const key = routeFor(url, init)
|
||||
const handler = handlers[key]
|
||||
@@ -59,7 +65,9 @@ async function fillAndSubmit(
|
||||
password: string,
|
||||
) {
|
||||
await wrapper.find('input[placeholder="Your username"]').setValue(username)
|
||||
await wrapper.find('input[autocomplete="current-password"]').setValue(password)
|
||||
await wrapper
|
||||
.find('input[autocomplete="current-password"]')
|
||||
.setValue(password)
|
||||
await wrapper.find('form').trigger('submit')
|
||||
await flushPromises()
|
||||
}
|
||||
@@ -73,16 +81,21 @@ afterEach(async () => {
|
||||
describe('Default — registration is closed', () => {
|
||||
it('renders the default state with no create-account footer link', async () => {
|
||||
const wrapper = await mountLogin('/login', {
|
||||
'GET /v1/auth/registration': () => mockResponse(200, { open: false }),
|
||||
'GET /v1/auth/registration': () =>
|
||||
mockResponse(200, { open: false }),
|
||||
})
|
||||
|
||||
expect(wrapper.find('h1').text()).toBe('Log in')
|
||||
expect(wrapper.text()).toContain('Welcome back. Log in to manage your articles.')
|
||||
expect(wrapper.text()).toContain(
|
||||
'Welcome back. Log in to manage your articles.',
|
||||
)
|
||||
|
||||
const usernameInput = wrapper.find('input[placeholder="Your username"]')
|
||||
expect((usernameInput.element as HTMLInputElement).value).toBe('')
|
||||
|
||||
const passwordInput = wrapper.find('input[autocomplete="current-password"]')
|
||||
const passwordInput = wrapper.find(
|
||||
'input[autocomplete="current-password"]',
|
||||
)
|
||||
expect((passwordInput.element as HTMLInputElement).value).toBe('')
|
||||
|
||||
expect(wrapper.find('button[type="submit"]').text()).toBe('Log in')
|
||||
@@ -93,7 +106,8 @@ describe('Default — registration is closed', () => {
|
||||
describe('Fresh install — registration is open', () => {
|
||||
it('renders the same fields plus the create-account footer link', async () => {
|
||||
const wrapper = await mountLogin('/login', {
|
||||
'GET /v1/auth/registration': () => mockResponse(200, { open: true }),
|
||||
'GET /v1/auth/registration': () =>
|
||||
mockResponse(200, { open: true }),
|
||||
})
|
||||
|
||||
expect(wrapper.find('h1').text()).toBe('Log in')
|
||||
@@ -129,18 +143,26 @@ describe('Submitting — fields and button are disabled while the request is in
|
||||
}),
|
||||
})
|
||||
|
||||
await wrapper.find('input[placeholder="Your username"]').setValue('marta')
|
||||
await wrapper.find('input[autocomplete="current-password"]').setValue('limewash2026')
|
||||
await wrapper
|
||||
.find('input[placeholder="Your username"]')
|
||||
.setValue('marta')
|
||||
await wrapper
|
||||
.find('input[autocomplete="current-password"]')
|
||||
.setValue('limewash2026')
|
||||
await wrapper.find('form').trigger('submit')
|
||||
await flushPromises()
|
||||
|
||||
expect(
|
||||
(wrapper.find('input[placeholder="Your username"]').element as HTMLInputElement)
|
||||
.disabled,
|
||||
(
|
||||
wrapper.find('input[placeholder="Your username"]')
|
||||
.element as HTMLInputElement
|
||||
).disabled,
|
||||
).toBe(true)
|
||||
expect(
|
||||
(wrapper.find('input[autocomplete="current-password"]').element as HTMLInputElement)
|
||||
.disabled,
|
||||
(
|
||||
wrapper.find('input[autocomplete="current-password"]')
|
||||
.element as HTMLInputElement
|
||||
).disabled,
|
||||
).toBe(true)
|
||||
const submitButton = wrapper.find('button[type="submit"]')
|
||||
expect(submitButton.text()).toBe('Logging in…')
|
||||
@@ -159,13 +181,19 @@ describe('Wrong credentials — the password is cleared and focused', () => {
|
||||
|
||||
await fillAndSubmit(wrapper, 'marta', 'wrong-password')
|
||||
|
||||
expect(wrapper.text()).toContain("That username and password don't match")
|
||||
expect(wrapper.text()).toContain('Check both and try again. Passwords are case-sensitive.')
|
||||
expect(wrapper.text()).toContain(
|
||||
"That username and password don't match",
|
||||
)
|
||||
expect(wrapper.text()).toContain(
|
||||
'Check both and try again. Passwords are case-sensitive.',
|
||||
)
|
||||
|
||||
const usernameInput = wrapper.find('input[placeholder="Your username"]')
|
||||
expect((usernameInput.element as HTMLInputElement).value).toBe('marta')
|
||||
|
||||
const passwordInput = wrapper.find('input[autocomplete="current-password"]')
|
||||
const passwordInput = wrapper.find(
|
||||
'input[autocomplete="current-password"]',
|
||||
)
|
||||
expect((passwordInput.element as HTMLInputElement).value).toBe('')
|
||||
expect(passwordInput.element).toBe(document.activeElement)
|
||||
|
||||
@@ -179,20 +207,28 @@ describe('Too many attempts — the button is disabled with a live countdown', (
|
||||
it('counts down from the Retry-After value and re-enables at zero', async () => {
|
||||
vi.useFakeTimers()
|
||||
const wrapper = await mountLogin('/login', {
|
||||
'POST /v1/auth/login': () => mockResponse(429, null, { 'Retry-After': '42' }),
|
||||
'POST /v1/auth/login': () =>
|
||||
mockResponse(429, null, { 'Retry-After': '42' }),
|
||||
})
|
||||
|
||||
await fillAndSubmit(wrapper, 'marta', 'limewash')
|
||||
|
||||
expect(wrapper.text()).toContain('Too many attempts')
|
||||
expect(wrapper.text()).toContain('For your security, wait a moment before trying again.')
|
||||
expect(wrapper.text()).toContain(
|
||||
'For your security, wait a moment before trying again.',
|
||||
)
|
||||
|
||||
expect(
|
||||
(wrapper.find('input[placeholder="Your username"]').element as HTMLInputElement).value,
|
||||
(
|
||||
wrapper.find('input[placeholder="Your username"]')
|
||||
.element as HTMLInputElement
|
||||
).value,
|
||||
).toBe('marta')
|
||||
expect(
|
||||
(wrapper.find('input[autocomplete="current-password"]').element as HTMLInputElement)
|
||||
.value,
|
||||
(
|
||||
wrapper.find('input[autocomplete="current-password"]')
|
||||
.element as HTMLInputElement
|
||||
).value,
|
||||
).toBe('limewash')
|
||||
|
||||
const button = wrapper.find('button[type="submit"]')
|
||||
@@ -200,8 +236,10 @@ describe('Too many attempts — the button is disabled with a live countdown', (
|
||||
expect((button.element as HTMLButtonElement).disabled).toBe(true)
|
||||
|
||||
const fields = () => [
|
||||
wrapper.find('input[placeholder="Your username"]').element as HTMLInputElement,
|
||||
wrapper.find('input[autocomplete="current-password"]').element as HTMLInputElement,
|
||||
wrapper.find('input[placeholder="Your username"]')
|
||||
.element as HTMLInputElement,
|
||||
wrapper.find('input[autocomplete="current-password"]')
|
||||
.element as HTMLInputElement,
|
||||
]
|
||||
expect(fields().map((field) => field.disabled)).toEqual([true, true])
|
||||
|
||||
@@ -209,9 +247,10 @@ describe('Too many attempts — the button is disabled with a live countdown', (
|
||||
await flushPromises()
|
||||
|
||||
expect(wrapper.find('button[type="submit"]').text()).toBe('Log in')
|
||||
expect((wrapper.find('button[type="submit"]').element as HTMLButtonElement).disabled).toBe(
|
||||
false,
|
||||
)
|
||||
expect(
|
||||
(wrapper.find('button[type="submit"]').element as HTMLButtonElement)
|
||||
.disabled,
|
||||
).toBe(false)
|
||||
expect(fields().map((field) => field.disabled)).toEqual([false, false])
|
||||
vi.useRealTimers()
|
||||
})
|
||||
@@ -219,14 +258,19 @@ describe('Too many attempts — the button is disabled with a live countdown', (
|
||||
|
||||
describe('Session expired — redirected from a 401 elsewhere', () => {
|
||||
it('shows the session-expired alert and focuses the password field', async () => {
|
||||
const wrapper = await mountLogin('/login?redirect=/article/12/edit&reason=expired', {})
|
||||
const wrapper = await mountLogin(
|
||||
'/login?redirect=/article/12/edit&reason=expired',
|
||||
{},
|
||||
)
|
||||
|
||||
expect(wrapper.text()).toContain('Your session expired')
|
||||
expect(wrapper.text()).toContain(
|
||||
'Log in again to pick up where you left off. Unsaved changes are kept on this device.',
|
||||
)
|
||||
|
||||
const passwordInput = wrapper.find('input[autocomplete="current-password"]')
|
||||
const passwordInput = wrapper.find(
|
||||
'input[autocomplete="current-password"]',
|
||||
)
|
||||
expect(passwordInput.element).toBe(document.activeElement)
|
||||
expect(wrapper.find('button[type="submit"]').text()).toBe('Log in')
|
||||
})
|
||||
@@ -247,7 +291,11 @@ describe('Password changed — arrived from a successful reset', () => {
|
||||
|
||||
describe('Server or network error — the fields keep their values', () => {
|
||||
it.each([
|
||||
{ name: 'a 500 response', password: 'limewash2026', handler: () => mockResponse(500) },
|
||||
{
|
||||
name: 'a 500 response',
|
||||
password: 'limewash2026',
|
||||
handler: () => mockResponse(500),
|
||||
},
|
||||
{
|
||||
name: 'a network failure',
|
||||
password: 'limewash2026',
|
||||
@@ -270,20 +318,28 @@ describe('Server or network error — the fields keep their values', () => {
|
||||
|
||||
expect(login).toHaveBeenCalled()
|
||||
expect(wrapper.text()).toContain("Couldn't reach RenewCMS")
|
||||
expect(wrapper.text()).toContain('Check your connection and try again.')
|
||||
expect(wrapper.text()).toContain(
|
||||
'Check your connection and try again.',
|
||||
)
|
||||
|
||||
expect(
|
||||
(wrapper.find('input[placeholder="Your username"]').element as HTMLInputElement)
|
||||
.value,
|
||||
(
|
||||
wrapper.find('input[placeholder="Your username"]')
|
||||
.element as HTMLInputElement
|
||||
).value,
|
||||
).toBe('marta')
|
||||
expect(
|
||||
(wrapper.find('input[autocomplete="current-password"]').element as HTMLInputElement)
|
||||
.value,
|
||||
(
|
||||
wrapper.find('input[autocomplete="current-password"]')
|
||||
.element as HTMLInputElement
|
||||
).value,
|
||||
).toBe(password)
|
||||
|
||||
const submitButton = wrapper.find('button[type="submit"]')
|
||||
expect(submitButton.text()).toBe('Log in')
|
||||
expect((submitButton.element as HTMLButtonElement).disabled).toBe(false)
|
||||
expect((submitButton.element as HTMLButtonElement).disabled).toBe(
|
||||
false,
|
||||
)
|
||||
},
|
||||
)
|
||||
})
|
||||
@@ -302,12 +358,15 @@ describe('A successful log in navigates to the right destination', () => {
|
||||
async ({ path, verified, destination }) => {
|
||||
const wrapper = await mountLogin(path, {
|
||||
'POST /v1/auth/login': () => mockResponse(200),
|
||||
'GET /v1/auth/me': () => mockResponse(200, { is_verified: verified }),
|
||||
'GET /v1/auth/me': () =>
|
||||
mockResponse(200, { is_verified: verified }),
|
||||
})
|
||||
|
||||
await fillAndSubmit(wrapper, 'marta', 'limewash2026')
|
||||
|
||||
await vi.waitFor(() => expect(router.currentRoute.value.path).toBe(destination))
|
||||
await vi.waitFor(() =>
|
||||
expect(router.currentRoute.value.path).toBe(destination),
|
||||
)
|
||||
},
|
||||
)
|
||||
})
|
||||
Reference in new issue
Block a user