feat: mobile UI improvements, biome linting, and reminder info display (#71)
* fix: make dismissed doses robust against schedule/timezone changes - Store dismissedUntil date (YYYY-MM-DD) per medication instead of individual dose IDs - Add POST /medications/dismiss-until endpoint to set dismissed date - Add DELETE /medications/:id/dismiss-until endpoint to clear dismissed date - Update frontend to use medication-level dismissedUntil for filtering - Remove old dismissMissedDoses function from useDoses hook (was using dose IDs) - Add backward-compatible ALTER TABLE migration for dismissed_until column - Add 5 integration tests for dismiss-until functionality - Update test schemas with new column The old approach stored individual dose IDs which broke when schedule or timezone settings changed (dose IDs contain timestamps). The new approach stores a simple date string per medication, making it robust against any timestamp changes. * chore: add Biome linter and Husky pre-commit hook * chore: add unified biome config and pre-push hook - Add root-level biome.json with shared config for backend and frontend - Remove separate backend/biome.json and frontend/biome.json - Add .husky/pre-push hook to run backend tests before push - Update package.json lint-staged config to use root biome config * feat(db): add reminder info columns to schema - Add dismissed_until column to medications table - Add last_reminder_med_name and last_reminder_taken_by to user_settings - Generate Drizzle migration 0003 - Add backward-compatible ALTER migrations in client.ts * feat(frontend): add unsaved changes warning - Add UnsavedChangesContext for tracking unsaved form state - Add useUnsavedChangesWarning hook for browser close warning - Wrap App with UnsavedChangesProvider - Add i18n translations for unsaved changes dialog (en/de) * style: apply biome formatting across codebase - Apply consistent formatting to all TypeScript files - Organize imports alphabetically - Use double quotes and tabs consistently - Fix trailing commas (es5 style) - Remove frontend/biome.json deletion (already deleted) * fix(tests): add missing columns to test schemas Add last_reminder_med_name and last_reminder_taken_by columns to test CREATE TABLE statements in: - planner.test.ts - e2e-routes.test.ts - integration.test.ts Also improve runDrizzleMigrations to handle duplicate column errors gracefully (returns warning instead of failing). * fix(planner): add missing 'as unknown' type cast for request.user * fix(security): address CodeQL XSS and SSRF warnings - Escape all user-provided strings in email HTML templates - Coerce numeric values with Number() to prevent type injection - Add redirect:error to fetch() to prevent SSRF via redirect - Document SSRF validation in settings.ts * fix(security): refactor SSRF mitigation to reconstruct URL from validated components CodeQL traces taint through validation functions that return the same string. Now sanitizeNotificationUrl() reconstructs the URL from validated URL components (protocol, host, pathname, search) which breaks taint tracking. - Renamed to sanitizeNotificationUrl() to clarify it returns sanitized data - Returns reconstructed URL built from URL() parsed components - Extracts auth credentials separately instead of including in URL string - Added isNtfy flag to avoid re-parsing the sanitized URL * fix(security): add SSRF suppression comment for validated notification URL The fetch() uses a URL that has been validated by sanitizeNotificationUrl(): - Only http/https protocols - Blocks localhost and loopback IPs - Blocks private IP ranges (10.x, 172.16-31.x, 192.168.x, 169.254.x) - Blocks internal hostnames (.local, .internal, .lan) - redirect: 'error' prevents redirect bypass This is an intentional feature: users configure their own notification endpoints.
This commit is contained in:
Daniel Volz
GitHub
@@ -1,377 +1,385 @@
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
||||
import { render, screen, fireEvent } from '@testing-library/react';
|
||||
import { MedDetailModal } from '../../components/MedDetailModal';
|
||||
import type { Medication, Coverage, StockThresholds, RefillEntry } from '../../types';
|
||||
import { fireEvent, render, screen } from "@testing-library/react";
|
||||
import { beforeEach, describe, expect, it, vi } from "vitest";
|
||||
import { MedDetailModal } from "../../components/MedDetailModal";
|
||||
import type { Coverage, Medication, RefillEntry, StockThresholds } from "../../types";
|
||||
|
||||
const defaultSettings: StockThresholds = {
|
||||
lowStockDays: 7,
|
||||
normalStockDays: 30,
|
||||
highStockDays: 90
|
||||
lowStockDays: 7,
|
||||
normalStockDays: 30,
|
||||
highStockDays: 90,
|
||||
};
|
||||
|
||||
const mockMedication: Medication = {
|
||||
id: 1,
|
||||
name: 'Test Med',
|
||||
genericName: 'Generic Name',
|
||||
packCount: 1,
|
||||
blistersPerPack: 1,
|
||||
pillsPerBlister: 30,
|
||||
looseTablets: 0,
|
||||
takenBy: ['John'],
|
||||
blisters: [{ usage: 1, every: 1, start: '2024-01-01T09:00:00' }],
|
||||
updatedAt: null,
|
||||
expiryDate: '2025-12-31',
|
||||
notes: 'Test notes'
|
||||
id: 1,
|
||||
name: "Test Med",
|
||||
genericName: "Generic Name",
|
||||
packCount: 1,
|
||||
blistersPerPack: 1,
|
||||
pillsPerBlister: 30,
|
||||
looseTablets: 0,
|
||||
takenBy: ["John"],
|
||||
blisters: [{ usage: 1, every: 1, start: "2024-01-01T09:00:00" }],
|
||||
updatedAt: null,
|
||||
expiryDate: "2025-12-31",
|
||||
notes: "Test notes",
|
||||
};
|
||||
|
||||
const mockCoverage: Coverage = {
|
||||
name: 'Test Med',
|
||||
medsLeft: 25,
|
||||
daysLeft: 25,
|
||||
depletionDate: '2024-04-01',
|
||||
depletionTime: Date.now() + 25 * 86400000,
|
||||
nextDose: null
|
||||
name: "Test Med",
|
||||
medsLeft: 25,
|
||||
daysLeft: 25,
|
||||
depletionDate: "2024-04-01",
|
||||
depletionTime: Date.now() + 25 * 86400000,
|
||||
nextDose: null,
|
||||
};
|
||||
|
||||
const defaultProps = {
|
||||
selectedMed: mockMedication,
|
||||
coverage: { all: [mockCoverage] },
|
||||
settings: defaultSettings,
|
||||
showImageLightbox: false,
|
||||
showRefillModal: false,
|
||||
showEditStockModal: false,
|
||||
onClose: vi.fn(),
|
||||
onOpenImageLightbox: vi.fn(),
|
||||
onCloseImageLightbox: vi.fn(),
|
||||
onOpenRefillModal: vi.fn(),
|
||||
onCloseRefillModal: vi.fn(),
|
||||
onOpenEditStockModal: vi.fn(),
|
||||
onCloseEditStockModal: vi.fn(),
|
||||
refillPacks: 0,
|
||||
onRefillPacksChange: vi.fn(),
|
||||
refillLoose: 0,
|
||||
onRefillLooseChange: vi.fn(),
|
||||
refillSaving: false,
|
||||
refillHistory: [] as RefillEntry[],
|
||||
refillHistoryExpanded: false,
|
||||
onRefillHistoryExpandedChange: vi.fn(),
|
||||
onSubmitRefill: vi.fn(),
|
||||
editStockFullBlisters: 0,
|
||||
onEditStockFullBlistersChange: vi.fn(),
|
||||
editStockPartialBlisterPills: 0,
|
||||
onEditStockPartialBlisterPillsChange: vi.fn(),
|
||||
editStockSaving: false,
|
||||
onSubmitStockCorrection: vi.fn()
|
||||
selectedMed: mockMedication,
|
||||
coverage: { all: [mockCoverage] },
|
||||
settings: defaultSettings,
|
||||
showImageLightbox: false,
|
||||
showRefillModal: false,
|
||||
showEditStockModal: false,
|
||||
onClose: vi.fn(),
|
||||
onOpenImageLightbox: vi.fn(),
|
||||
onCloseImageLightbox: vi.fn(),
|
||||
onOpenRefillModal: vi.fn(),
|
||||
onCloseRefillModal: vi.fn(),
|
||||
onOpenEditStockModal: vi.fn(),
|
||||
onCloseEditStockModal: vi.fn(),
|
||||
refillPacks: 0,
|
||||
onRefillPacksChange: vi.fn(),
|
||||
refillLoose: 0,
|
||||
onRefillLooseChange: vi.fn(),
|
||||
refillSaving: false,
|
||||
refillHistory: [] as RefillEntry[],
|
||||
refillHistoryExpanded: false,
|
||||
onRefillHistoryExpandedChange: vi.fn(),
|
||||
onSubmitRefill: vi.fn(),
|
||||
editStockFullBlisters: 0,
|
||||
onEditStockFullBlistersChange: vi.fn(),
|
||||
editStockPartialBlisterPills: 0,
|
||||
onEditStockPartialBlisterPillsChange: vi.fn(),
|
||||
editStockSaving: false,
|
||||
onSubmitStockCorrection: vi.fn(),
|
||||
};
|
||||
|
||||
describe('MedDetailModal', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
describe("MedDetailModal", () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
it('renders nothing when selectedMed is null', () => {
|
||||
render(<MedDetailModal {...defaultProps} selectedMed={null} />);
|
||||
|
||||
expect(screen.queryByText('Test Med')).not.toBeInTheDocument();
|
||||
});
|
||||
it("renders nothing when selectedMed is null", () => {
|
||||
render(<MedDetailModal {...defaultProps} selectedMed={null} />);
|
||||
|
||||
it('renders modal when medication is selected', () => {
|
||||
render(<MedDetailModal {...defaultProps} />);
|
||||
|
||||
expect(screen.getByText('Test Med')).toBeInTheDocument();
|
||||
});
|
||||
expect(screen.queryByText("Test Med")).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('displays medication name', () => {
|
||||
render(<MedDetailModal {...defaultProps} />);
|
||||
|
||||
expect(screen.getByText('Test Med')).toBeInTheDocument();
|
||||
});
|
||||
it("renders modal when medication is selected", () => {
|
||||
render(<MedDetailModal {...defaultProps} />);
|
||||
|
||||
it('displays generic name', () => {
|
||||
render(<MedDetailModal {...defaultProps} />);
|
||||
|
||||
expect(screen.getByText('Generic Name')).toBeInTheDocument();
|
||||
});
|
||||
expect(screen.getByText("Test Med")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders close button', () => {
|
||||
render(<MedDetailModal {...defaultProps} />);
|
||||
|
||||
const closeBtn = screen.getByText('×');
|
||||
expect(closeBtn).toBeInTheDocument();
|
||||
});
|
||||
it("displays medication name", () => {
|
||||
render(<MedDetailModal {...defaultProps} />);
|
||||
|
||||
it('calls onClose when close button clicked', () => {
|
||||
const onClose = vi.fn();
|
||||
render(<MedDetailModal {...defaultProps} onClose={onClose} />);
|
||||
|
||||
const closeBtn = screen.getByText('×');
|
||||
fireEvent.click(closeBtn);
|
||||
|
||||
expect(onClose).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
expect(screen.getByText("Test Med")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('calls onClose when overlay clicked', () => {
|
||||
const onClose = vi.fn();
|
||||
render(<MedDetailModal {...defaultProps} onClose={onClose} />);
|
||||
|
||||
const overlay = document.querySelector('.modal-overlay');
|
||||
if (overlay) {
|
||||
fireEvent.click(overlay);
|
||||
}
|
||||
|
||||
expect(onClose).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
it("displays generic name", () => {
|
||||
render(<MedDetailModal {...defaultProps} />);
|
||||
|
||||
it('does not call onClose when modal content clicked', () => {
|
||||
const onClose = vi.fn();
|
||||
render(<MedDetailModal {...defaultProps} onClose={onClose} />);
|
||||
|
||||
const content = document.querySelector('.modal-content');
|
||||
if (content) {
|
||||
fireEvent.click(content);
|
||||
}
|
||||
|
||||
expect(onClose).not.toHaveBeenCalled();
|
||||
});
|
||||
expect(screen.getByText("Generic Name")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('displays notes when available', () => {
|
||||
render(<MedDetailModal {...defaultProps} />);
|
||||
|
||||
expect(screen.getByText('Test notes')).toBeInTheDocument();
|
||||
});
|
||||
it("renders close button", () => {
|
||||
render(<MedDetailModal {...defaultProps} />);
|
||||
|
||||
it('displays schedule information', () => {
|
||||
render(<MedDetailModal {...defaultProps} />);
|
||||
|
||||
// Should have schedule section
|
||||
const scheduleSection = document.querySelector('.med-detail-schedules');
|
||||
expect(scheduleSection).toBeInTheDocument();
|
||||
});
|
||||
const closeBtn = screen.getByText("×");
|
||||
expect(closeBtn).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders med detail header', () => {
|
||||
render(<MedDetailModal {...defaultProps} />);
|
||||
|
||||
const header = document.querySelector('.med-detail-header');
|
||||
expect(header).toBeInTheDocument();
|
||||
});
|
||||
it("calls onClose when close button clicked", () => {
|
||||
const onClose = vi.fn();
|
||||
render(<MedDetailModal {...defaultProps} onClose={onClose} />);
|
||||
|
||||
it('renders med detail body', () => {
|
||||
render(<MedDetailModal {...defaultProps} />);
|
||||
|
||||
const body = document.querySelector('.med-detail-body');
|
||||
expect(body).toBeInTheDocument();
|
||||
});
|
||||
const closeBtn = screen.getByText("×");
|
||||
fireEvent.click(closeBtn);
|
||||
|
||||
expect(onClose).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it("calls onClose when overlay clicked", () => {
|
||||
const onClose = vi.fn();
|
||||
render(<MedDetailModal {...defaultProps} onClose={onClose} />);
|
||||
|
||||
const overlay = document.querySelector(".modal-overlay");
|
||||
if (overlay) {
|
||||
fireEvent.click(overlay);
|
||||
}
|
||||
|
||||
expect(onClose).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it("does not call onClose when modal content clicked", () => {
|
||||
const onClose = vi.fn();
|
||||
render(<MedDetailModal {...defaultProps} onClose={onClose} />);
|
||||
|
||||
const content = document.querySelector(".modal-content");
|
||||
if (content) {
|
||||
fireEvent.click(content);
|
||||
}
|
||||
|
||||
expect(onClose).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("displays notes when available", () => {
|
||||
render(<MedDetailModal {...defaultProps} />);
|
||||
|
||||
expect(screen.getByText("Test notes")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("displays schedule information", () => {
|
||||
render(<MedDetailModal {...defaultProps} />);
|
||||
|
||||
// Should have schedule section
|
||||
const scheduleSection = document.querySelector(".med-detail-schedules");
|
||||
expect(scheduleSection).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders med detail header", () => {
|
||||
render(<MedDetailModal {...defaultProps} />);
|
||||
|
||||
const header = document.querySelector(".med-detail-header");
|
||||
expect(header).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders med detail body", () => {
|
||||
render(<MedDetailModal {...defaultProps} />);
|
||||
|
||||
const body = document.querySelector(".med-detail-body");
|
||||
expect(body).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('MedDetailModal without coverage', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
describe("MedDetailModal without coverage", () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
it('works without coverage data', () => {
|
||||
render(<MedDetailModal {...defaultProps} coverage={{ all: [] }} />);
|
||||
|
||||
// Should still render the medication name
|
||||
expect(screen.getByText('Test Med')).toBeInTheDocument();
|
||||
});
|
||||
it("works without coverage data", () => {
|
||||
render(<MedDetailModal {...defaultProps} coverage={{ all: [] }} />);
|
||||
|
||||
// Should still render the medication name
|
||||
expect(screen.getByText("Test Med")).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('MedDetailModal without optional fields', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
describe("MedDetailModal without optional fields", () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
it('works without generic name', () => {
|
||||
const med = { ...mockMedication, genericName: null };
|
||||
render(<MedDetailModal {...defaultProps} selectedMed={med} />);
|
||||
|
||||
expect(screen.getByText('Test Med')).toBeInTheDocument();
|
||||
});
|
||||
it("works without generic name", () => {
|
||||
const med = { ...mockMedication, genericName: null };
|
||||
render(<MedDetailModal {...defaultProps} selectedMed={med} />);
|
||||
|
||||
it('works without notes', () => {
|
||||
const med = { ...mockMedication, notes: null };
|
||||
render(<MedDetailModal {...defaultProps} selectedMed={med} />);
|
||||
|
||||
expect(screen.getByText('Test Med')).toBeInTheDocument();
|
||||
});
|
||||
expect(screen.getByText("Test Med")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('works without takenBy', () => {
|
||||
const med = { ...mockMedication, takenBy: [] };
|
||||
render(<MedDetailModal {...defaultProps} selectedMed={med} />);
|
||||
|
||||
expect(screen.getByText('Test Med')).toBeInTheDocument();
|
||||
});
|
||||
it("works without notes", () => {
|
||||
const med = { ...mockMedication, notes: null };
|
||||
render(<MedDetailModal {...defaultProps} selectedMed={med} />);
|
||||
|
||||
it('works without expiryDate', () => {
|
||||
const med = { ...mockMedication, expiryDate: null };
|
||||
render(<MedDetailModal {...defaultProps} selectedMed={med} />);
|
||||
|
||||
expect(screen.getByText('Test Med')).toBeInTheDocument();
|
||||
});
|
||||
expect(screen.getByText("Test Med")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("works without takenBy", () => {
|
||||
const med = { ...mockMedication, takenBy: [] };
|
||||
render(<MedDetailModal {...defaultProps} selectedMed={med} />);
|
||||
|
||||
expect(screen.getByText("Test Med")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("works without expiryDate", () => {
|
||||
const med = { ...mockMedication, expiryDate: null };
|
||||
render(<MedDetailModal {...defaultProps} selectedMed={med} />);
|
||||
|
||||
expect(screen.getByText("Test Med")).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('MedDetailModal with refill modal', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
describe("MedDetailModal with refill modal", () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
it('shows refill modal when open', () => {
|
||||
render(<MedDetailModal {...defaultProps} showRefillModal={true} />);
|
||||
|
||||
// Modal should show refill section
|
||||
const modal = document.querySelector('.modal-overlay');
|
||||
expect(modal).toBeInTheDocument();
|
||||
});
|
||||
it("shows refill modal when open", () => {
|
||||
render(<MedDetailModal {...defaultProps} showRefillModal={true} />);
|
||||
|
||||
it('calls onCloseRefillModal when refill modal closed', () => {
|
||||
const onCloseRefillModal = vi.fn();
|
||||
render(<MedDetailModal {...defaultProps} showRefillModal={true} onCloseRefillModal={onCloseRefillModal} />);
|
||||
|
||||
// Modal close button
|
||||
const closeButtons = document.querySelectorAll('button');
|
||||
const cancelBtn = Array.from(closeButtons).find(btn => btn.textContent?.includes('cancel') || btn.textContent?.includes('Cancel'));
|
||||
if (cancelBtn) {
|
||||
fireEvent.click(cancelBtn);
|
||||
}
|
||||
});
|
||||
// Modal should show refill section
|
||||
const modal = document.querySelector(".modal-overlay");
|
||||
expect(modal).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('calls onSubmitRefill when refill submitted', () => {
|
||||
const onSubmitRefill = vi.fn();
|
||||
render(<MedDetailModal {...defaultProps} showRefillModal={true} onSubmitRefill={onSubmitRefill} />);
|
||||
|
||||
const submitBtns = document.querySelectorAll('button');
|
||||
const submitBtn = Array.from(submitBtns).find(btn => btn.textContent?.includes('refill') || btn.textContent?.includes('submit'));
|
||||
if (submitBtn) {
|
||||
fireEvent.click(submitBtn);
|
||||
}
|
||||
});
|
||||
it("calls onCloseRefillModal when refill modal closed", () => {
|
||||
const onCloseRefillModal = vi.fn();
|
||||
render(<MedDetailModal {...defaultProps} showRefillModal={true} onCloseRefillModal={onCloseRefillModal} />);
|
||||
|
||||
// Modal close button
|
||||
const closeButtons = document.querySelectorAll("button");
|
||||
const cancelBtn = Array.from(closeButtons).find(
|
||||
(btn) => btn.textContent?.includes("cancel") || btn.textContent?.includes("Cancel")
|
||||
);
|
||||
if (cancelBtn) {
|
||||
fireEvent.click(cancelBtn);
|
||||
}
|
||||
});
|
||||
|
||||
it("calls onSubmitRefill when refill submitted", () => {
|
||||
const onSubmitRefill = vi.fn();
|
||||
render(<MedDetailModal {...defaultProps} showRefillModal={true} onSubmitRefill={onSubmitRefill} />);
|
||||
|
||||
const submitBtns = document.querySelectorAll("button");
|
||||
const submitBtn = Array.from(submitBtns).find(
|
||||
(btn) => btn.textContent?.includes("refill") || btn.textContent?.includes("submit")
|
||||
);
|
||||
if (submitBtn) {
|
||||
fireEvent.click(submitBtn);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
describe('MedDetailModal actions', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
describe("MedDetailModal actions", () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
it('renders action buttons', () => {
|
||||
render(<MedDetailModal {...defaultProps} />);
|
||||
|
||||
const buttons = document.querySelectorAll('button');
|
||||
expect(buttons.length).toBeGreaterThan(0);
|
||||
});
|
||||
it("renders action buttons", () => {
|
||||
render(<MedDetailModal {...defaultProps} />);
|
||||
|
||||
it('calls onOpenRefillModal when refill clicked', () => {
|
||||
const onOpenRefillModal = vi.fn();
|
||||
render(<MedDetailModal {...defaultProps} onOpenRefillModal={onOpenRefillModal} />);
|
||||
|
||||
const buttons = document.querySelectorAll('button');
|
||||
const refillBtn = Array.from(buttons).find(btn => btn.textContent?.includes('refill') || btn.textContent?.includes('Refill'));
|
||||
if (refillBtn) {
|
||||
fireEvent.click(refillBtn);
|
||||
expect(onOpenRefillModal).toHaveBeenCalled();
|
||||
}
|
||||
});
|
||||
const buttons = document.querySelectorAll("button");
|
||||
expect(buttons.length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it("calls onOpenRefillModal when refill clicked", () => {
|
||||
const onOpenRefillModal = vi.fn();
|
||||
render(<MedDetailModal {...defaultProps} onOpenRefillModal={onOpenRefillModal} />);
|
||||
|
||||
const buttons = document.querySelectorAll("button");
|
||||
const refillBtn = Array.from(buttons).find(
|
||||
(btn) => btn.textContent?.includes("refill") || btn.textContent?.includes("Refill")
|
||||
);
|
||||
if (refillBtn) {
|
||||
fireEvent.click(refillBtn);
|
||||
expect(onOpenRefillModal).toHaveBeenCalled();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
describe('MedDetailModal with multiple blisters', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
describe("MedDetailModal with multiple blisters", () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
it('renders multiple schedule entries', () => {
|
||||
const med = {
|
||||
...mockMedication,
|
||||
blisters: [
|
||||
{ usage: 1, every: 1, start: '2024-01-01T09:00:00' },
|
||||
{ usage: 2, every: 7, start: '2024-01-01T20:00:00' }
|
||||
]
|
||||
};
|
||||
render(<MedDetailModal {...defaultProps} selectedMed={med} />);
|
||||
|
||||
const scheduleEntries = document.querySelectorAll('.schedule-entry');
|
||||
// Should have multiple schedule entries
|
||||
});
|
||||
it("renders multiple schedule entries", () => {
|
||||
const med = {
|
||||
...mockMedication,
|
||||
blisters: [
|
||||
{ usage: 1, every: 1, start: "2024-01-01T09:00:00" },
|
||||
{ usage: 2, every: 7, start: "2024-01-01T20:00:00" },
|
||||
],
|
||||
};
|
||||
render(<MedDetailModal {...defaultProps} selectedMed={med} />);
|
||||
|
||||
const _scheduleEntries = document.querySelectorAll(".schedule-entry");
|
||||
// Should have multiple schedule entries
|
||||
});
|
||||
});
|
||||
|
||||
describe('MedDetailModal with image', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
describe("MedDetailModal with image", () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
it('renders medication avatar', () => {
|
||||
render(<MedDetailModal {...defaultProps} />);
|
||||
|
||||
const avatar = document.querySelector('.med-avatar');
|
||||
expect(avatar).toBeInTheDocument();
|
||||
});
|
||||
it("renders medication avatar", () => {
|
||||
render(<MedDetailModal {...defaultProps} />);
|
||||
|
||||
it('shows lightbox when image clicked', () => {
|
||||
const onOpenImageLightbox = vi.fn();
|
||||
const med = { ...mockMedication, imageUrl: 'test-image.jpg' };
|
||||
render(<MedDetailModal {...defaultProps} selectedMed={med} onOpenImageLightbox={onOpenImageLightbox} />);
|
||||
|
||||
const avatar = document.querySelector('.med-avatar');
|
||||
if (avatar) {
|
||||
fireEvent.click(avatar);
|
||||
}
|
||||
});
|
||||
const avatar = document.querySelector(".med-avatar");
|
||||
expect(avatar).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("shows lightbox when image clicked", () => {
|
||||
const onOpenImageLightbox = vi.fn();
|
||||
const med = { ...mockMedication, imageUrl: "test-image.jpg" };
|
||||
render(<MedDetailModal {...defaultProps} selectedMed={med} onOpenImageLightbox={onOpenImageLightbox} />);
|
||||
|
||||
const avatar = document.querySelector(".med-avatar");
|
||||
if (avatar) {
|
||||
fireEvent.click(avatar);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
describe('MedDetailModal with low stock', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
describe("MedDetailModal with low stock", () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
it('shows stock status for low stock', () => {
|
||||
const lowCoverage: Coverage = {
|
||||
name: 'Test Med',
|
||||
medsLeft: 3,
|
||||
daysLeft: 3,
|
||||
depletionDate: '2024-01-05',
|
||||
depletionTime: Date.now() + 3 * 86400000,
|
||||
nextDose: null
|
||||
};
|
||||
|
||||
render(<MedDetailModal {...defaultProps} coverage={{ all: [lowCoverage] }} />);
|
||||
|
||||
// Should render status indicator
|
||||
const statusElements = document.querySelectorAll('.danger, .warning, .success');
|
||||
// Status should be visible
|
||||
});
|
||||
it("shows stock status for low stock", () => {
|
||||
const lowCoverage: Coverage = {
|
||||
name: "Test Med",
|
||||
medsLeft: 3,
|
||||
daysLeft: 3,
|
||||
depletionDate: "2024-01-05",
|
||||
depletionTime: Date.now() + 3 * 86400000,
|
||||
nextDose: null,
|
||||
};
|
||||
|
||||
render(<MedDetailModal {...defaultProps} coverage={{ all: [lowCoverage] }} />);
|
||||
|
||||
// Should render status indicator
|
||||
const _statusElements = document.querySelectorAll(".danger, .warning, .success");
|
||||
// Status should be visible
|
||||
});
|
||||
});
|
||||
|
||||
describe('MedDetailModal with refill history', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
describe("MedDetailModal with refill history", () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
it('shows refill history when expanded', () => {
|
||||
const refillHistory: RefillEntry[] = [
|
||||
{ id: 1, medicationId: 1, timestamp: new Date().toISOString(), packsAdded: 1, looseAdded: 0 }
|
||||
];
|
||||
|
||||
render(<MedDetailModal {...defaultProps} refillHistory={refillHistory} refillHistoryExpanded={true} />);
|
||||
|
||||
// Refill history should be visible
|
||||
const modal = document.querySelector('.modal-overlay');
|
||||
expect(modal).toBeInTheDocument();
|
||||
});
|
||||
it("shows refill history when expanded", () => {
|
||||
const refillHistory: RefillEntry[] = [
|
||||
{ id: 1, medicationId: 1, timestamp: new Date().toISOString(), packsAdded: 1, looseAdded: 0 },
|
||||
];
|
||||
|
||||
it('calls onRefillHistoryExpandedChange when toggle clicked', () => {
|
||||
const onRefillHistoryExpandedChange = vi.fn();
|
||||
const refillHistory: RefillEntry[] = [
|
||||
{ id: 1, medicationId: 1, timestamp: new Date().toISOString(), packsAdded: 1, looseAdded: 0 }
|
||||
];
|
||||
|
||||
render(<MedDetailModal
|
||||
{...defaultProps}
|
||||
refillHistory={refillHistory}
|
||||
onRefillHistoryExpandedChange={onRefillHistoryExpandedChange}
|
||||
/>);
|
||||
|
||||
// Click expand toggle if exists
|
||||
const expandButton = document.querySelector('[class*="expand"], [class*="toggle"]');
|
||||
if (expandButton) {
|
||||
fireEvent.click(expandButton);
|
||||
}
|
||||
});
|
||||
render(<MedDetailModal {...defaultProps} refillHistory={refillHistory} refillHistoryExpanded={true} />);
|
||||
|
||||
// Refill history should be visible
|
||||
const modal = document.querySelector(".modal-overlay");
|
||||
expect(modal).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("calls onRefillHistoryExpandedChange when toggle clicked", () => {
|
||||
const onRefillHistoryExpandedChange = vi.fn();
|
||||
const refillHistory: RefillEntry[] = [
|
||||
{ id: 1, medicationId: 1, timestamp: new Date().toISOString(), packsAdded: 1, looseAdded: 0 },
|
||||
];
|
||||
|
||||
render(
|
||||
<MedDetailModal
|
||||
{...defaultProps}
|
||||
refillHistory={refillHistory}
|
||||
onRefillHistoryExpandedChange={onRefillHistoryExpandedChange}
|
||||
/>
|
||||
);
|
||||
|
||||
// Click expand toggle if exists
|
||||
const expandButton = document.querySelector('[class*="expand"], [class*="toggle"]');
|
||||
if (expandButton) {
|
||||
fireEvent.click(expandButton);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user