M7-T06: add meter management UI (timeline, declare swap, edit) to Energy view
This commit is contained in:
@@ -0,0 +1,357 @@
|
||||
/**
|
||||
* Tests for MeterManager component.
|
||||
*
|
||||
* Coverage:
|
||||
* 1. Loading state rendering.
|
||||
* 2. Error state rendering.
|
||||
* 3. Empty state when no meters exist.
|
||||
* 4. Meter timeline list rendering (label, dates, active badge, reason).
|
||||
* 5. "Declare New Meter" button opens form modal.
|
||||
* 6. Declare meter — form submit calls POST /api/energy/meters.
|
||||
* 7. Declare meter — 422 (倒挂) error is displayed.
|
||||
* 8. Edit button opens edit form modal.
|
||||
* 9. Edit meter — saves label/note via PATCH /api/energy/meters/{meter_id}.
|
||||
* 10. Edit meter — retroactive started_at triggers recompute notice.
|
||||
*/
|
||||
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest'
|
||||
import { screen, waitFor } from '@testing-library/react'
|
||||
import userEvent from '@testing-library/user-event'
|
||||
import { renderWithProviders } from '../test-utils'
|
||||
import { MeterManager } from './MeterManager'
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Mock apiClient
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
const mockGet = vi.fn()
|
||||
const mockPost = vi.fn()
|
||||
const mockPatch = vi.fn()
|
||||
|
||||
vi.mock('../api/client', () => ({
|
||||
default: {
|
||||
GET: (...args: unknown[]) => mockGet(...args),
|
||||
POST: (...args: unknown[]) => mockPost(...args),
|
||||
PATCH: (...args: unknown[]) => mockPatch(...args),
|
||||
DELETE: vi.fn(),
|
||||
},
|
||||
ApiError: class ApiError extends Error {
|
||||
status: number
|
||||
body: unknown
|
||||
constructor(status: number, body: unknown) {
|
||||
super(`API error ${status}`)
|
||||
this.name = 'ApiError'
|
||||
this.status = status
|
||||
this.body = body
|
||||
}
|
||||
},
|
||||
registerLoginRedirect: vi.fn(),
|
||||
}))
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Fixtures
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
const ACTIVE_METER = {
|
||||
id: 1,
|
||||
label: 'Initial 2G meter',
|
||||
commodity: 'electricity',
|
||||
started_at: '2024-01-15T00:00:00Z',
|
||||
ended_at: null,
|
||||
reason: 'initial',
|
||||
note: null,
|
||||
created_at: '2024-01-15T00:00:00Z',
|
||||
}
|
||||
|
||||
const CLOSED_METER = {
|
||||
id: 2,
|
||||
label: 'Old 4G meter',
|
||||
commodity: 'electricity',
|
||||
started_at: '2023-06-01T00:00:00Z',
|
||||
ended_at: '2024-01-15T00:00:00Z',
|
||||
reason: 'meter_swap',
|
||||
note: 'Replaced by grid company',
|
||||
created_at: '2023-06-01T00:00:00Z',
|
||||
}
|
||||
|
||||
const METERS_RESPONSE = {
|
||||
items: [CLOSED_METER, ACTIVE_METER],
|
||||
total: 2,
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Tests
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
describe('MeterManager — loading / error / empty states', () => {
|
||||
beforeEach(() => vi.clearAllMocks())
|
||||
|
||||
it('renders loading state initially', () => {
|
||||
mockGet.mockImplementation(() => new Promise(() => {}))
|
||||
|
||||
renderWithProviders(<MeterManager />)
|
||||
|
||||
expect(screen.getByTestId('meters-loading')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('renders error state when GET fails', async () => {
|
||||
mockGet.mockRejectedValue(new Error('Network error'))
|
||||
|
||||
renderWithProviders(<MeterManager />)
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('meters-load-error')).toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
|
||||
it('renders empty state when no meters exist', async () => {
|
||||
mockGet.mockResolvedValue({ data: { items: [], total: 0 } })
|
||||
|
||||
renderWithProviders(<MeterManager />)
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('meters-empty')).toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
describe('MeterManager — meter list', () => {
|
||||
beforeEach(() => vi.clearAllMocks())
|
||||
|
||||
it('renders meter timeline with label, dates, status badge, reason', async () => {
|
||||
mockGet.mockResolvedValue({ data: METERS_RESPONSE })
|
||||
|
||||
renderWithProviders(<MeterManager />)
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('meters-table')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
// Labels
|
||||
expect(screen.getByText('Initial 2G meter')).toBeInTheDocument()
|
||||
expect(screen.getByText('Old 4G meter')).toBeInTheDocument()
|
||||
|
||||
// Status badges
|
||||
expect(screen.getByTestId(`meter-status-${ACTIVE_METER.id}`)).toHaveTextContent('active')
|
||||
expect(screen.getByTestId(`meter-status-${CLOSED_METER.id}`)).toHaveTextContent('closed')
|
||||
|
||||
// Reason badges
|
||||
expect(screen.getByText('initial')).toBeInTheDocument()
|
||||
expect(screen.getByText('meter_swap')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('renders "Declare New Meter" button', async () => {
|
||||
mockGet.mockResolvedValue({ data: METERS_RESPONSE })
|
||||
|
||||
renderWithProviders(<MeterManager />)
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('meter-declare-button')).toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
describe('MeterManager — declare new meter', () => {
|
||||
beforeEach(() => vi.clearAllMocks())
|
||||
|
||||
it('opens declare modal when "Declare New Meter" is clicked', async () => {
|
||||
const user = userEvent.setup()
|
||||
mockGet.mockResolvedValue({ data: { items: [], total: 0 } })
|
||||
|
||||
renderWithProviders(<MeterManager />)
|
||||
|
||||
await waitFor(() => expect(screen.getByTestId('meter-declare-button')).toBeInTheDocument())
|
||||
|
||||
await user.click(screen.getByTestId('meter-declare-button'))
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('declare-meter-modal')).toBeInTheDocument()
|
||||
})
|
||||
expect(screen.getByTestId('declare-meter-form')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('calls POST /api/energy/meters with correct payload including local-midnight naive datetime', async () => {
|
||||
const user = userEvent.setup()
|
||||
mockGet.mockResolvedValue({ data: { items: [], total: 0 } })
|
||||
mockPost.mockResolvedValue({ data: ACTIVE_METER })
|
||||
|
||||
renderWithProviders(<MeterManager />)
|
||||
|
||||
await waitFor(() => expect(screen.getByTestId('meter-declare-button')).toBeInTheDocument())
|
||||
await user.click(screen.getByTestId('meter-declare-button'))
|
||||
|
||||
await waitFor(() => expect(screen.getByTestId('declare-meter-form')).toBeInTheDocument())
|
||||
|
||||
// Fill form
|
||||
await user.type(screen.getByTestId('meter-label'), 'New meter label')
|
||||
await user.type(screen.getByTestId('meter-started-at'), '2026-01-01')
|
||||
|
||||
// Select reason via the combobox (Mantine Select renders a combobox)
|
||||
await user.click(screen.getByTestId('meter-reason'))
|
||||
await waitFor(() => screen.getByText('Initial installation'))
|
||||
await user.click(screen.getByText('Initial installation'))
|
||||
|
||||
await user.click(screen.getByTestId('declare-meter-submit'))
|
||||
|
||||
await waitFor(() => {
|
||||
expect(mockPost).toHaveBeenCalledWith(
|
||||
'/api/energy/meters',
|
||||
expect.objectContaining({
|
||||
body: expect.objectContaining({
|
||||
label: 'New meter label',
|
||||
// FU10 local-midnight naive convention: no Z suffix
|
||||
started_at: '2026-01-01T00:00:00',
|
||||
reason: 'initial',
|
||||
commodity: 'electricity',
|
||||
}),
|
||||
}),
|
||||
)
|
||||
})
|
||||
})
|
||||
|
||||
it('displays error when POST fails with 422 (倒挂 / validation error)', async () => {
|
||||
const user = userEvent.setup()
|
||||
mockGet.mockResolvedValue({ data: { items: [ACTIVE_METER], total: 1 } })
|
||||
|
||||
const { ApiError } = await import('../api/client')
|
||||
mockPost.mockRejectedValue(
|
||||
new ApiError(422, { detail: 'started_at must be ≥ current active meter started_at' }),
|
||||
)
|
||||
|
||||
renderWithProviders(<MeterManager />)
|
||||
|
||||
await waitFor(() => expect(screen.getByTestId('meter-declare-button')).toBeInTheDocument())
|
||||
await user.click(screen.getByTestId('meter-declare-button'))
|
||||
await waitFor(() => expect(screen.getByTestId('declare-meter-form')).toBeInTheDocument())
|
||||
|
||||
await user.type(screen.getByTestId('meter-label'), 'Bad meter')
|
||||
await user.type(screen.getByTestId('meter-started-at'), '2020-01-01')
|
||||
await user.click(screen.getByTestId('meter-reason'))
|
||||
await waitFor(() => screen.getByText('Meter swap (same address)'))
|
||||
await user.click(screen.getByText('Meter swap (same address)'))
|
||||
|
||||
await user.click(screen.getByTestId('declare-meter-submit'))
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('declare-meter-error')).toBeInTheDocument()
|
||||
})
|
||||
expect(screen.getByTestId('declare-meter-error').textContent).toContain(
|
||||
'started_at must be ≥',
|
||||
)
|
||||
})
|
||||
|
||||
it('cancel button closes the declare modal', async () => {
|
||||
const user = userEvent.setup()
|
||||
mockGet.mockResolvedValue({ data: { items: [], total: 0 } })
|
||||
|
||||
renderWithProviders(<MeterManager />)
|
||||
|
||||
await waitFor(() => expect(screen.getByTestId('meter-declare-button')).toBeInTheDocument())
|
||||
await user.click(screen.getByTestId('meter-declare-button'))
|
||||
await waitFor(() => expect(screen.getByTestId('declare-meter-modal')).toBeInTheDocument())
|
||||
|
||||
await user.click(screen.getByTestId('declare-meter-cancel'))
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.queryByTestId('declare-meter-modal')).not.toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
describe('MeterManager — edit meter', () => {
|
||||
beforeEach(() => vi.clearAllMocks())
|
||||
|
||||
it('opens edit modal when Edit button is clicked', async () => {
|
||||
const user = userEvent.setup()
|
||||
mockGet.mockResolvedValue({ data: METERS_RESPONSE })
|
||||
|
||||
renderWithProviders(<MeterManager />)
|
||||
|
||||
await waitFor(() => expect(screen.getByTestId(`meter-edit-${ACTIVE_METER.id}`)).toBeInTheDocument())
|
||||
|
||||
await user.click(screen.getByTestId(`meter-edit-${ACTIVE_METER.id}`))
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('edit-meter-modal')).toBeInTheDocument()
|
||||
})
|
||||
expect(screen.getByTestId('edit-meter-form')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('calls PATCH /api/energy/meters/{meter_id} when label is changed', async () => {
|
||||
const user = userEvent.setup()
|
||||
mockGet.mockResolvedValue({ data: { items: [ACTIVE_METER], total: 1 } })
|
||||
mockPatch.mockResolvedValue({ data: { ...ACTIVE_METER, label: 'Renamed meter' } })
|
||||
|
||||
renderWithProviders(<MeterManager />)
|
||||
|
||||
await waitFor(() => expect(screen.getByTestId(`meter-edit-${ACTIVE_METER.id}`)).toBeInTheDocument())
|
||||
await user.click(screen.getByTestId(`meter-edit-${ACTIVE_METER.id}`))
|
||||
await waitFor(() => expect(screen.getByTestId('edit-meter-form')).toBeInTheDocument())
|
||||
|
||||
// Clear label and type new one
|
||||
const labelInput = screen.getByTestId('edit-meter-label')
|
||||
await user.clear(labelInput)
|
||||
await user.type(labelInput, 'Renamed meter')
|
||||
|
||||
await user.click(screen.getByTestId('edit-meter-submit'))
|
||||
|
||||
await waitFor(() => {
|
||||
expect(mockPatch).toHaveBeenCalledWith(
|
||||
'/api/energy/meters/{meter_id}',
|
||||
expect.objectContaining({
|
||||
params: { path: { meter_id: ACTIVE_METER.id } },
|
||||
body: expect.objectContaining({ label: 'Renamed meter' }),
|
||||
}),
|
||||
)
|
||||
})
|
||||
})
|
||||
|
||||
it('shows recompute notice when started_at is changed (retroactive correction)', async () => {
|
||||
const user = userEvent.setup()
|
||||
mockGet.mockResolvedValue({ data: { items: [ACTIVE_METER], total: 1 } })
|
||||
mockPatch.mockResolvedValue({ data: { ...ACTIVE_METER, started_at: '2024-02-01T00:00:00' } })
|
||||
|
||||
renderWithProviders(<MeterManager />)
|
||||
|
||||
await waitFor(() => expect(screen.getByTestId(`meter-edit-${ACTIVE_METER.id}`)).toBeInTheDocument())
|
||||
await user.click(screen.getByTestId(`meter-edit-${ACTIVE_METER.id}`))
|
||||
await waitFor(() => expect(screen.getByTestId('edit-meter-form')).toBeInTheDocument())
|
||||
|
||||
// Change the date field
|
||||
const dateInput = screen.getByTestId('edit-meter-started-at')
|
||||
await user.clear(dateInput)
|
||||
await user.type(dateInput, '2024-02-01')
|
||||
|
||||
await user.click(screen.getByTestId('edit-meter-submit'))
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('meter-recompute-notice')).toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
|
||||
it('displays error when PATCH fails', async () => {
|
||||
const user = userEvent.setup()
|
||||
mockGet.mockResolvedValue({ data: { items: [ACTIVE_METER], total: 1 } })
|
||||
|
||||
const { ApiError } = await import('../api/client')
|
||||
mockPatch.mockRejectedValue(new ApiError(422, { detail: 'started_at conflict' }))
|
||||
|
||||
renderWithProviders(<MeterManager />)
|
||||
|
||||
await waitFor(() => expect(screen.getByTestId(`meter-edit-${ACTIVE_METER.id}`)).toBeInTheDocument())
|
||||
await user.click(screen.getByTestId(`meter-edit-${ACTIVE_METER.id}`))
|
||||
await waitFor(() => expect(screen.getByTestId('edit-meter-form')).toBeInTheDocument())
|
||||
|
||||
// Change label so there's something to patch
|
||||
const labelInput = screen.getByTestId('edit-meter-label')
|
||||
await user.clear(labelInput)
|
||||
await user.type(labelInput, 'Different label')
|
||||
|
||||
await user.click(screen.getByTestId('edit-meter-submit'))
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('edit-meter-error')).toBeInTheDocument()
|
||||
})
|
||||
expect(screen.getByTestId('edit-meter-error').textContent).toContain('started_at conflict')
|
||||
})
|
||||
})
|
||||
Reference in New Issue
Block a user