+
{series.map((s) => {
const isHidden = hiddenSeries.has(s.name);
return (
@@ -248,7 +225,14 @@ export default function Chart({ data, series, title, formatValue }) {
onClick={() => toggleSeries(s.name)}
aria-pressed={!isHidden}
>
-
+
{s.name}
);
@@ -257,7 +241,10 @@ export default function Chart({ data, series, title, formatValue }) {
)}
{loading ? (
-
+
) : (
)}
diff --git a/src/components/Chart.stories.jsx b/src/components/Chart.stories.jsx
index aa63681..12cef3a 100644
--- a/src/components/Chart.stories.jsx
+++ b/src/components/Chart.stories.jsx
@@ -1,6 +1,5 @@
import Chart from './Chart.jsx';
import { formatAmount } from '../utils/format.js';
-import Chart from './Chart.jsx'
export default {
title: 'Components/Chart',
@@ -8,13 +7,14 @@ export default {
tags: ['autodocs'],
argTypes: {
data: { control: 'object' },
+ series: { control: 'object' },
+ title: { control: 'text' },
+ emptyStateIcon: { control: 'text' },
+ emptyStateTitle: { control: 'text' },
+ emptyStateMessage: { control: 'text' },
formatValue: { control: false },
},
};
- series: { control: 'object' },
- formatValue: { control: false }
- }
-}
const sampleData = [
{ value: 200, label: 'amina@example.com', currency: 'USD' },
@@ -27,55 +27,27 @@ const sampleData = [
export const Default = {
args: {
title: 'Recent Transfer Amounts',
- data: [
- { value: 200 },
- { value: 120 },
- { value: 450 },
- { value: 80 },
- { value: 310 },
- ],
+ data: sampleData,
+ formatValue: (d) => formatAmount(d.value, d.currency),
},
};
- title: { control: 'text' },
- emptyStateIcon: { control: 'text' },
- emptyStateTitle: { control: 'text' },
- emptyStateMessage: { control: 'text' }
- }
-}
-
-export const Default = {
- args: {
- data: [{ value: 10 }, { value: 20 }, { value: 15 }, { value: 30 }],
- title: 'Monthly Transfers'
- }
-}
export const Empty = {
args: {
- title: 'Recent Transfer Amounts',
- data: sampleData,
- formatValue: (d) => formatAmount(d.value, d.currency),
+ data: [],
+ title: 'Monthly Transfers',
},
};
- data: [],
- title: 'Monthly Transfers'
- }
-}
export const CustomEmptyState = {
args: {
- title: 'Single Transfer',
- data: [{ value: 250, label: 'juan@example.com', currency: 'USD' }],
- formatValue: (d) => formatAmount(d.value, d.currency),
- },
-};
data: [],
title: 'Monthly Transfers',
emptyStateIcon: '💸',
emptyStateTitle: 'No transfers yet',
- emptyStateMessage: 'Your first transfer will appear here.'
- }
-}
+ emptyStateMessage: 'Your first transfer will appear here.',
+ },
+};
export const MultiSeries = {
args: {
@@ -89,8 +61,8 @@ export const MultiSeries = {
{ value: 120, label: 'GBQAZ7Z3X7...' },
{ value: 450, label: 'chidi@example.com' },
{ value: 80, label: 'devi@example.com' },
- { value: 310, label: 'emeka@example.com' }
- ]
+ { value: 310, label: 'emeka@example.com' },
+ ],
},
{
name: 'Received',
@@ -100,10 +72,10 @@ export const MultiSeries = {
{ value: 100, label: 'GBQAZ7Z3X7...' },
{ value: 500, label: 'chidi@example.com' },
{ value: 60, label: 'devi@example.com' },
- { value: 280, label: 'emeka@example.com' }
- ]
- }
+ { value: 280, label: 'emeka@example.com' },
+ ],
+ },
],
- formatValue: (d) => `$${d.value.toFixed(2)}`
- }
-}
+ formatValue: (d) => `$${d.value.toFixed(2)}`,
+ },
+};
diff --git a/src/components/Navbar.css b/src/components/Navbar.css
index d19cf18..5be9b06 100644
--- a/src/components/Navbar.css
+++ b/src/components/Navbar.css
@@ -4,7 +4,7 @@
gap: 1.5rem;
padding: calc(var(--safe-area-inset-top) + 0.875rem) 1.5rem 0.875rem;
background: var(--color-surface);
- border-bottom: 1px solid #1f2a3a;
+ border-bottom: 1px solid var(--color-border);
}
.navbar-brand {
@@ -101,7 +101,7 @@
width: 280px;
height: 100vh;
background: var(--color-surface);
- border-left: 1px solid #1f2a3a;
+ border-left: 1px solid var(--color-border);
display: flex;
flex-direction: column;
transform: translateX(100%);
@@ -131,7 +131,9 @@
font-size: 0.925rem;
text-decoration: none;
min-height: 44px;
- transition: background 0.15s ease, color 0.15s ease;
+ transition:
+ background 0.15s ease,
+ color 0.15s ease;
}
.navbar-drawer-link:hover {
@@ -158,7 +160,7 @@
flex-direction: column;
gap: 0.75rem;
padding: 1rem 0.75rem;
- border-top: 1px solid #1f2a3a;
+ border-top: 1px solid var(--color-border);
}
/* ── Mobile responsive ─────────────────────────── */
@@ -185,4 +187,4 @@
.navbar-drawer {
border-left-width: 2px;
}
-}
\ No newline at end of file
+}
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index 02c64de..c7f5382 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -1,37 +1,36 @@
+import { useState, useEffect, useCallback } from 'react';
import { NavLink, Link } from 'react-router-dom';
import WalletButton from './WalletButton.jsx';
import LocaleSelect from './LocaleSelect.jsx';
+import ThemeToggle from './ThemeToggle.jsx';
import { useApp } from '../context/AppContext.jsx';
import './Navbar.css';
-import { useState, useEffect, useCallback } from 'react'
-import { NavLink, Link } from 'react-router-dom'
-import WalletButton from './WalletButton.jsx'
-import LocaleSelect from './LocaleSelect.jsx'
-import { useApp } from '../context/AppContext.jsx'
-import './Navbar.css'
export default function Navbar() {
const { locale, setLocale } = useApp();
- const { locale, setLocale } = useApp()
- const [menuOpen, setMenuOpen] = useState(false)
+ const [menuOpen, setMenuOpen] = useState(false);
- const closeMenu = useCallback(() => setMenuOpen(false), [])
+ const closeMenu = useCallback(() => setMenuOpen(false), []);
useEffect(() => {
- if (!menuOpen) return
- const handler = (e) => { if (e.key === 'Escape') closeMenu() }
- document.addEventListener('keydown', handler)
- return () => document.removeEventListener('keydown', handler)
- }, [menuOpen, closeMenu])
+ if (!menuOpen) return;
+ const handler = (e) => {
+ if (e.key === 'Escape') closeMenu();
+ };
+ document.addEventListener('keydown', handler);
+ return () => document.removeEventListener('keydown', handler);
+ }, [menuOpen, closeMenu]);
useEffect(() => {
if (menuOpen) {
- document.body.style.overflow = 'hidden'
+ document.body.style.overflow = 'hidden';
} else {
- document.body.style.overflow = ''
+ document.body.style.overflow = '';
}
- return () => { document.body.style.overflow = '' }
- }, [menuOpen])
+ return () => {
+ document.body.style.overflow = '';
+ };
+ }, [menuOpen]);
return (
@@ -59,6 +58,7 @@ export default function Navbar() {
id="navbar-locale"
ariaLabel="Language & region"
/>
+
@@ -74,37 +74,72 @@ export default function Navbar() {
- {menuOpen && (
-
- )}
+ {menuOpen &&
}
);
-}
- )
}
diff --git a/src/components/Navbar.stories.jsx b/src/components/Navbar.stories.jsx
index 9d552fd..f27b4f9 100644
--- a/src/components/Navbar.stories.jsx
+++ b/src/components/Navbar.stories.jsx
@@ -17,5 +17,3 @@ export default {
export const Default = {
render: () =>
,
};
- render: () =>
-}
diff --git a/src/components/Tabs.css b/src/components/Tabs.css
index 2a3188f..b766b1f 100644
--- a/src/components/Tabs.css
+++ b/src/components/Tabs.css
@@ -84,4 +84,4 @@
.tabs-header {
border-bottom-color: #1e293b;
}
-}
\ No newline at end of file
+}
diff --git a/src/components/Tabs.jsx b/src/components/Tabs.jsx
index 530a9d2..e2f7aee 100644
--- a/src/components/Tabs.jsx
+++ b/src/components/Tabs.jsx
@@ -1,64 +1,70 @@
-import { useCallback, useRef, useState } from 'react'
-import './Tabs.css'
+import { useCallback, useRef, useState } from 'react';
+import './Tabs.css';
-const SWIPE_THRESHOLD = 50
+const SWIPE_THRESHOLD = 50;
export default function Tabs({
tabs,
activeIndex: controlledIndex,
onChange,
- className = ''
+ className = '',
}) {
- const isControlled = controlledIndex !== undefined
- const [internalIndex, setInternalIndex] = useState(0)
- const activeIndex = isControlled ? controlledIndex : internalIndex
+ const isControlled = controlledIndex !== undefined;
+ const [internalIndex, setInternalIndex] = useState(0);
+ const activeIndex = isControlled ? controlledIndex : internalIndex;
- const containerRef = useRef(null)
- const swipeStartX = useRef(0)
- const swipeDeltaX = useRef(0)
- const [isSwiping, setIsSwiping] = useState(false)
- const [translateX, setTranslateX] = useState(0)
+ const containerRef = useRef(null);
+ const swipeStartX = useRef(0);
+ const swipeDeltaX = useRef(0);
+ const [isSwiping, setIsSwiping] = useState(false);
+ const [translateX, setTranslateX] = useState(0);
- const selectTab = useCallback((index) => {
- if (index < 0 || index >= tabs.length || index === activeIndex) return
- if (!isControlled) setInternalIndex(index)
- onChange?.(index)
- }, [tabs.length, activeIndex, isControlled, onChange])
+ const selectTab = useCallback(
+ (index) => {
+ if (index < 0 || index >= tabs.length || index === activeIndex) return;
+ if (!isControlled) setInternalIndex(index);
+ onChange?.(index);
+ },
+ [tabs.length, activeIndex, isControlled, onChange],
+ );
const handleTouchStart = (e) => {
- if (tabs.length <= 1) return
- const touch = e.touches?.[0]
- if (!touch) return
- swipeStartX.current = touch.clientX
- swipeDeltaX.current = 0
- setIsSwiping(true)
- }
+ if (tabs.length <= 1) return;
+ const touch = e.touches?.[0];
+ if (!touch) return;
+ swipeStartX.current = touch.clientX;
+ swipeDeltaX.current = 0;
+ setIsSwiping(true);
+ };
const handleTouchMove = (e) => {
- if (!isSwiping || tabs.length <= 1) return
- const touch = e.touches?.[0]
- if (!touch) return
- swipeDeltaX.current = touch.clientX - swipeStartX.current
- const bound = Math.min(Math.abs(swipeDeltaX.current), containerRef.current?.offsetWidth || 300)
- const sign = swipeDeltaX.current > 0 ? 1 : -1
- setTranslateX(sign * bound)
- }
+ if (!isSwiping || tabs.length <= 1) return;
+ const touch = e.touches?.[0];
+ if (!touch) return;
+ swipeDeltaX.current = touch.clientX - swipeStartX.current;
+ const bound = Math.min(
+ Math.abs(swipeDeltaX.current),
+ containerRef.current?.offsetWidth || 300,
+ );
+ const sign = swipeDeltaX.current > 0 ? 1 : -1;
+ setTranslateX(sign * bound);
+ };
const handleTouchEnd = () => {
- if (!isSwiping) return
- setIsSwiping(false)
- const delta = swipeDeltaX.current
+ if (!isSwiping) return;
+ setIsSwiping(false);
+ const delta = swipeDeltaX.current;
if (delta < -SWIPE_THRESHOLD && activeIndex < tabs.length - 1) {
- selectTab(activeIndex + 1)
+ selectTab(activeIndex + 1);
} else if (delta > SWIPE_THRESHOLD && activeIndex > 0) {
- selectTab(activeIndex - 1)
+ selectTab(activeIndex - 1);
}
- swipeStartX.current = 0
- swipeDeltaX.current = 0
- setTranslateX(0)
- }
+ swipeStartX.current = 0;
+ swipeDeltaX.current = 0;
+ setTranslateX(0);
+ };
return (
-
+
{tabs.map((tab, index) => (
@@ -104,7 +106,7 @@ export default function Tabs({
isSwiping
? {
transform: `translateX(${translateX}px)`,
- transition: 'none'
+ transition: 'none',
}
: undefined
}
@@ -124,5 +126,5 @@ export default function Tabs({
))}
- )
-}
\ No newline at end of file
+ );
+}
diff --git a/src/components/Tabs.stories.jsx b/src/components/Tabs.stories.jsx
index f89d8e3..73a3343 100644
--- a/src/components/Tabs.stories.jsx
+++ b/src/components/Tabs.stories.jsx
@@ -1,39 +1,73 @@
-import Tabs from './Tabs.jsx'
+import Tabs from './Tabs.jsx';
export default {
title: 'Components/Tabs',
component: Tabs,
- tags: ['autodocs']
-}
+ tags: ['autodocs'],
+};
-const lorem = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
+const lorem = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
export const Default = {
args: {
tabs: [
- { label: 'Send', content:
{lorem} Send tab content.
},
- { label: 'History', content:
{lorem} History tab content.
},
- { label: 'Settings', content:
{lorem} Settings tab content.
}
- ]
- }
-}
+ {
+ label: 'Send',
+ content: (
+
{lorem} Send tab content.
+ ),
+ },
+ {
+ label: 'History',
+ content: (
+
{lorem} History tab content.
+ ),
+ },
+ {
+ label: 'Settings',
+ content: (
+
{lorem} Settings tab content.
+ ),
+ },
+ ],
+ },
+};
export const TwoTabs = {
args: {
tabs: [
- { label: 'Tab A', content:
Content for Tab A
},
- { label: 'Tab B', content:
Content for Tab B
}
- ]
- }
-}
+ {
+ label: 'Tab A',
+ content:
Content for Tab A
,
+ },
+ {
+ label: 'Tab B',
+ content:
Content for Tab B
,
+ },
+ ],
+ },
+};
export const Controlled = {
args: {
activeIndex: 1,
tabs: [
- { label: 'First', content:
First panel
},
- { label: 'Second', content:
Second panel (active by default)
},
- { label: 'Third', content:
Third panel
}
- ]
- }
-}
\ No newline at end of file
+ {
+ label: 'First',
+ content:
First panel
,
+ },
+ {
+ label: 'Second',
+ content: (
+
+ Second panel (active by default)
+
+ ),
+ },
+ {
+ label: 'Third',
+ content:
Third panel
,
+ },
+ ],
+ },
+};
diff --git a/src/components/ThemeToggle.css b/src/components/ThemeToggle.css
new file mode 100644
index 0000000..44b42c7
--- /dev/null
+++ b/src/components/ThemeToggle.css
@@ -0,0 +1,40 @@
+.theme-toggle {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: 0.5rem;
+ padding: 0.5rem 0.75rem;
+ background: var(--color-surface);
+ color: var(--color-text);
+ border: 1px solid var(--color-border);
+ border-radius: 8px;
+ font-size: 0.875rem;
+ font-weight: 500;
+ cursor: pointer;
+ min-height: 44px;
+ min-width: 44px;
+ transition:
+ background 0.15s ease,
+ border-color 0.15s ease,
+ color 0.15s ease;
+}
+
+.theme-toggle:hover {
+ background: rgba(125, 125, 125, 0.1);
+ border-color: var(--color-primary);
+}
+
+.theme-toggle-icon {
+ flex-shrink: 0;
+ display: block;
+}
+
+.theme-toggle-text {
+ display: none;
+}
+
+@media (min-width: 640px) {
+ .theme-toggle-text {
+ display: inline;
+ }
+}
diff --git a/src/components/ThemeToggle.jsx b/src/components/ThemeToggle.jsx
new file mode 100644
index 0000000..ef0b68b
--- /dev/null
+++ b/src/components/ThemeToggle.jsx
@@ -0,0 +1,65 @@
+import { useApp } from '../context/AppContext.jsx';
+import './ThemeToggle.css';
+
+/**
+ * Accessible button to toggle between Light and Dark visual themes.
+ */
+export default function ThemeToggle({ className = '', id = 'theme-toggle' }) {
+ const { resolvedTheme, toggleTheme } = useApp();
+ const isDark = resolvedTheme === 'dark';
+ const nextThemeLabel = isDark ? 'light' : 'dark';
+
+ return (
+
+ );
+}
diff --git a/src/context/AppContext.jsx b/src/context/AppContext.jsx
index 1d25bdf..1983317 100644
--- a/src/context/AppContext.jsx
+++ b/src/context/AppContext.jsx
@@ -12,9 +12,21 @@ import {
} from '../constants/locales.js';
const LOCALE_STORAGE_KEY = 'remitflow:locale';
+const THEME_STORAGE_KEY = 'remitflow:theme';
-// Global app context: holds the connected wallet, the locale preference used
-// for currency/date/number formatting, and exposes the actions for both.
+const SUPPORTED_THEMES = ['dark', 'light', 'system'];
+
+function getSystemTheme() {
+ if (typeof window !== 'undefined' && window.matchMedia) {
+ return window.matchMedia('(prefers-color-scheme: dark)').matches
+ ? 'dark'
+ : 'light';
+ }
+ return 'dark';
+}
+
+// Global app context: holds the connected wallet, locale preference, theme preference,
+// and exposes actions for all of them.
const AppContext = createContext(null);
/**
@@ -32,6 +44,44 @@ export function AppProvider({ children, connectTimeoutMs = 30000 }) {
DEFAULT_LOCALE,
);
+ const [rawTheme, setRawTheme] = useLocalStorage(THEME_STORAGE_KEY, 'dark');
+
+ const theme = SUPPORTED_THEMES.includes(rawTheme) ? rawTheme : 'dark';
+
+ function setTheme(newTheme) {
+ setRawTheme(SUPPORTED_THEMES.includes(newTheme) ? newTheme : 'dark');
+ }
+
+ function toggleTheme() {
+ setTheme(theme === 'dark' ? 'light' : 'dark');
+ }
+
+ const [systemTheme, setSystemTheme] = useState(getSystemTheme);
+
+ useEffect(() => {
+ if (typeof window === 'undefined' || !window.matchMedia) return;
+ const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+ const handler = (e) => {
+ setSystemTheme(e.matches ? 'dark' : 'light');
+ };
+
+ if (mediaQuery.addEventListener) {
+ mediaQuery.addEventListener('change', handler);
+ return () => mediaQuery.removeEventListener('change', handler);
+ } else if (mediaQuery.addListener) {
+ mediaQuery.addListener(handler);
+ return () => mediaQuery.removeListener(handler);
+ }
+ }, []);
+
+ const resolvedTheme = theme === 'system' ? systemTheme : theme;
+
+ useEffect(() => {
+ if (typeof document !== 'undefined') {
+ document.documentElement.setAttribute('data-theme', resolvedTheme);
+ }
+ }, [resolvedTheme]);
+
// Guard against a stale or tampered value in localStorage (e.g. left over
// from a version that supported a different set of locales).
const locale = isSupportedLocale(storedLocale)
@@ -89,6 +139,10 @@ export function AppProvider({ children, connectTimeoutMs = 30000 }) {
locale,
setLocale,
locales: LOCALES,
+ theme,
+ resolvedTheme,
+ setTheme,
+ toggleTheme,
};
return
{children};
diff --git a/src/index.css b/src/index.css
index 26f76db..99b8d17 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,9 +1,11 @@
-:root {
+:root,
+[data-theme='dark'] {
--color-bg: #0f172a;
--color-surface: #1e293b;
--color-primary: #6366f1;
--color-text: #e2e8f0;
--color-muted: #94a3b8;
+ --color-border: #1f2a3a;
/* Safe-area insets for notched / rounded devices. Env falls back to 0px
on browsers / devices without notch support. */
@@ -20,6 +22,15 @@
sans-serif;
}
+[data-theme='light'] {
+ --color-bg: #f8fafc;
+ --color-surface: #ffffff;
+ --color-primary: #4f46e5;
+ --color-text: #0f172a;
+ --color-muted: #64748b;
+ --color-border: #e2e8f0;
+}
+
* {
box-sizing: border-box;
}
diff --git a/src/pages/Transfers.jsx b/src/pages/Transfers.jsx
index 8276fc6..02b88c1 100644
--- a/src/pages/Transfers.jsx
+++ b/src/pages/Transfers.jsx
@@ -289,7 +289,9 @@ export default function Transfers() {
{!loading && !error && filteredTransfers.length === 0 && (
({ value: parseFloat(t.sendAmount), label: t.recipient, currency: t.from }))}
+ data={filteredTransfers.slice(0, 5).map((t) => ({
+ value: parseFloat(t.sendAmount),
+ label: t.recipient,
+ currency: t.from,
+ }))}
formatValue={(d) => formatAmount(d.value, d.currency)}
/>
{filteredTransfers.map((t) => (
diff --git a/test/components/Chart.test.jsx b/test/components/Chart.test.jsx
index 0177fa9..f919074 100644
--- a/test/components/Chart.test.jsx
+++ b/test/components/Chart.test.jsx
@@ -68,121 +68,132 @@ describe('Chart component', () => {
expect(tooltip).toHaveTextContent('alice@example.com');
});
});
- it('renders correctly with data', () => {
- const data = [{ value: 10 }, { value: 20 }]
- render()
- expect(screen.getByText('Test Chart')).toBeInTheDocument()
- })
-
- it('shows empty state when data is an empty array', () => {
- render()
- expect(screen.getByText('No chart data')).toBeInTheDocument()
- expect(screen.getByText('Add some data to visualize.')).toBeInTheDocument()
- expect(screen.queryByText('Download SVG')).not.toBeInTheDocument()
- })
-
- it('shows empty state when data is null', () => {
- render()
- expect(screen.getByText('No chart data')).toBeInTheDocument()
- })
-
- it('shows empty state when data is undefined', () => {
- render()
- expect(screen.getByText('No chart data')).toBeInTheDocument()
- })
-
- it('uses custom empty state props when provided', () => {
- render(
-
- )
- expect(screen.getByText('Nothing to show')).toBeInTheDocument()
- expect(screen.getByText('Please add some data.')).toBeInTheDocument()
- it('renders shimmer placeholder when loading', () => {
- render()
- const container = screen.getByText('Test Chart').closest('.chart-container')
- expect(container).toHaveAttribute('aria-busy', 'true')
- expect(container.querySelector('.chart-shimmer')).toBeInTheDocument()
- expect(container.querySelector('.chart-shimmer-btn')).toBeInTheDocument()
- })
-
- describe('multi-series with legend', () => {
- const seriesData = [
- { name: 'Sent', color: '#6366f1', data: [{ value: 200 }, { value: 120 }] },
- { name: 'Received', color: '#10b981', data: [{ value: 180 }, { value: 100 }] }
- ]
-
- it('renders legend when series prop is provided', () => {
- render()
- expect(screen.getByText('Sent')).toBeInTheDocument()
- expect(screen.getByText('Received')).toBeInTheDocument()
- })
-
- it('renders correct number of bars for multi-series', () => {
- const { container } = render()
- const bars = container.querySelectorAll('.chart-bar')
- expect(bars).toHaveLength(4)
- })
-
- it('toggles series visibility on legend click', async () => {
- const user = userEvent.setup()
- const { container } = render()
-
- expect(container.querySelectorAll('.chart-bar')).toHaveLength(4)
-
- await user.click(screen.getByText('Sent'))
-
- const bars = container.querySelectorAll('.chart-bar')
- expect(bars).toHaveLength(4)
- expect(bars[0].getAttribute('opacity')).toBe('0.3')
- expect(bars[1].getAttribute('opacity')).toBe('1')
- expect(bars[2].getAttribute('opacity')).toBe('0.3')
- expect(bars[3].getAttribute('opacity')).toBe('1')
- })
-
- it('dims legend item when series is hidden', async () => {
- const user = userEvent.setup()
- render()
-
- const sentButton = screen.getByText('Sent')
- expect(sentButton.closest('.chart-legend-item--dimmed')).toBeNull()
-
- await user.click(sentButton)
- expect(sentButton.closest('.chart-legend-item--dimmed')).toBeInTheDocument()
-
- await user.click(sentButton)
- expect(sentButton.closest('.chart-legend-item--dimmed')).toBeNull()
- })
-
- it('shows series name in tooltip on bar hover', async () => {
- const user = userEvent.setup()
- const { container } = render()
- const bars = container.querySelectorAll('.chart-bar')
-
- await user.hover(bars[0])
- expect(screen.getByRole('tooltip')).toHaveTextContent('Sent')
- })
-
- it('does not render legend when using data prop', () => {
- const { container } = render()
- expect(container.querySelector('.chart-legend')).toBeNull()
- })
-
- it('uses default colors when series omit color', () => {
- const seriesNoColor = [
- { name: 'A', data: [{ value: 10 }] },
- { name: 'B', data: [{ value: 20 }] }
- ]
- const { container } = render()
- const bars = container.querySelectorAll('.chart-bar')
- expect(bars).toHaveLength(2)
- expect(bars[0]).toHaveAttribute('fill', '#6366f1')
- expect(bars[1]).toHaveAttribute('fill', '#10b981')
- })
- })
-})
+it('renders correctly with data', () => {
+ const data = [{ value: 10 }, { value: 20 }];
+ render();
+ expect(screen.getByText('Test Chart')).toBeInTheDocument();
+});
+
+it('shows empty state when data is an empty array', () => {
+ render();
+ expect(screen.getByText('No chart data')).toBeInTheDocument();
+ expect(screen.getByText('Add some data to visualize.')).toBeInTheDocument();
+ expect(screen.queryByText('Download SVG')).not.toBeInTheDocument();
+});
+
+it('shows empty state when data is null', () => {
+ render();
+ expect(screen.getByText('No chart data')).toBeInTheDocument();
+});
+
+it('shows empty state when data is undefined', () => {
+ render();
+ expect(screen.getByText('No chart data')).toBeInTheDocument();
+});
+
+it('uses custom empty state props when provided', () => {
+ render(
+ ,
+ );
+ expect(screen.getByText('Nothing to show')).toBeInTheDocument();
+ expect(screen.getByText('Please add some data.')).toBeInTheDocument();
+});
+
+it('renders shimmer placeholder when loading', () => {
+ render();
+ const container = screen.getByText('Test Chart').closest('.chart-container');
+ expect(container).toHaveAttribute('aria-busy', 'true');
+ expect(container.querySelector('.chart-shimmer')).toBeInTheDocument();
+ expect(container.querySelector('.chart-shimmer-btn')).toBeInTheDocument();
+});
+
+describe('multi-series with legend', () => {
+ const seriesData = [
+ { name: 'Sent', color: '#6366f1', data: [{ value: 200 }, { value: 120 }] },
+ {
+ name: 'Received',
+ color: '#10b981',
+ data: [{ value: 180 }, { value: 100 }],
+ },
+ ];
+
+ it('renders legend when series prop is provided', () => {
+ render();
+ expect(screen.getByText('Sent')).toBeInTheDocument();
+ expect(screen.getByText('Received')).toBeInTheDocument();
+ });
+
+ it('renders correct number of bars for multi-series', () => {
+ const { container } = render();
+ const bars = container.querySelectorAll('.chart-bar');
+ expect(bars).toHaveLength(4);
+ });
+
+ it('toggles series visibility on legend click', async () => {
+ const user = userEvent.setup();
+ const { container } = render();
+
+ expect(container.querySelectorAll('.chart-bar')).toHaveLength(4);
+
+ await user.click(screen.getByText('Sent'));
+
+ const bars = container.querySelectorAll('.chart-bar');
+ expect(bars).toHaveLength(4);
+ expect(bars[0].getAttribute('opacity')).toBe('0.3');
+ expect(bars[1].getAttribute('opacity')).toBe('1');
+ expect(bars[2].getAttribute('opacity')).toBe('0.3');
+ expect(bars[3].getAttribute('opacity')).toBe('1');
+ });
+
+ it('dims legend item when series is hidden', async () => {
+ const user = userEvent.setup();
+ render();
+
+ const sentButton = screen.getByText('Sent');
+ expect(sentButton.closest('.chart-legend-item--dimmed')).toBeNull();
+
+ await user.click(sentButton);
+ expect(
+ sentButton.closest('.chart-legend-item--dimmed'),
+ ).toBeInTheDocument();
+
+ await user.click(sentButton);
+ expect(sentButton.closest('.chart-legend-item--dimmed')).toBeNull();
+ });
+
+ it('shows series name in tooltip on bar hover', async () => {
+ const user = userEvent.setup();
+ const { container } = render();
+ const bars = container.querySelectorAll('.chart-bar');
+
+ await user.hover(bars[0]);
+ expect(screen.getByRole('tooltip')).toHaveTextContent('Sent');
+ });
+
+ it('does not render legend when using data prop', () => {
+ const { container } = render(
+ ,
+ );
+ expect(container.querySelector('.chart-legend')).toBeNull();
+ });
+
+ it('uses default colors when series omit color', () => {
+ const seriesNoColor = [
+ { name: 'A', data: [{ value: 10 }] },
+ { name: 'B', data: [{ value: 20 }] },
+ ];
+ const { container } = render(
+ ,
+ );
+ const bars = container.querySelectorAll('.chart-bar');
+ expect(bars).toHaveLength(2);
+ expect(bars[0]).toHaveAttribute('fill', '#6366f1');
+ expect(bars[1]).toHaveAttribute('fill', '#10b981');
+ });
+});
diff --git a/test/components/Navbar.test.jsx b/test/components/Navbar.test.jsx
index f3bbb65..b8a90a7 100644
--- a/test/components/Navbar.test.jsx
+++ b/test/components/Navbar.test.jsx
@@ -1,8 +1,8 @@
-import { render, screen, fireEvent } from '@testing-library/react'
-import { MemoryRouter } from 'react-router-dom'
-import { describe, expect, it } from 'vitest'
-import Navbar from '../../src/components/Navbar.jsx'
-import { AppProvider } from '../../src/context/AppContext.jsx'
+import { render, screen, fireEvent } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { describe, expect, it } from 'vitest';
+import Navbar from '../../src/components/Navbar.jsx';
+import { AppProvider } from '../../src/context/AppContext.jsx';
function renderNavbar(initialRoute = '/') {
return render(
@@ -10,89 +10,93 @@ function renderNavbar(initialRoute = '/') {
-
- )
+ ,
+ );
}
describe('Navbar', () => {
it('renders the brand name', () => {
- renderNavbar()
- expect(screen.getByText('RemitFlow')).toBeInTheDocument()
- })
+ renderNavbar();
+ expect(screen.getByText('RemitFlow')).toBeInTheDocument();
+ });
it('renders navigation links', () => {
- renderNavbar()
- const links = screen.getAllByText('Home')
- expect(links.length).toBe(2)
- expect(screen.getAllByText('Send Money').length).toBe(2)
- expect(screen.getAllByText('Transfers').length).toBe(2)
- })
+ renderNavbar();
+ const links = screen.getAllByText('Home');
+ expect(links.length).toBe(2);
+ expect(screen.getAllByText('Send Money').length).toBe(2);
+ expect(screen.getAllByText('Transfers').length).toBe(2);
+ });
it('highlights the active link based on current route', () => {
- renderNavbar('/send')
- const sendLinks = screen.getAllByText('Send Money')
- const activeLinks = sendLinks.filter((l) => l.className.includes('active'))
- expect(activeLinks.length).toBe(2)
- })
+ renderNavbar('/send');
+ const sendLinks = screen.getAllByText('Send Money');
+ const activeLinks = sendLinks.filter((l) => l.className.includes('active'));
+ expect(activeLinks.length).toBe(2);
+ });
it('has a hamburger button with aria-label', () => {
- renderNavbar()
- const hamburger = screen.getByLabelText('Open menu')
- expect(hamburger).toBeInTheDocument()
- expect(hamburger).toHaveAttribute('aria-expanded', 'false')
- })
+ renderNavbar();
+ const hamburger = screen.getByLabelText('Open menu');
+ expect(hamburger).toBeInTheDocument();
+ expect(hamburger).toHaveAttribute('aria-expanded', 'false');
+ });
it('opens the mobile drawer when hamburger is clicked', () => {
- renderNavbar()
- const hamburger = screen.getByLabelText('Open menu')
- fireEvent.click(hamburger)
- expect(screen.getByLabelText('Close menu')).toBeInTheDocument()
- expect(hamburger.getAttribute('aria-expanded')).toBe('true')
- const drawer = document.querySelector('.navbar-drawer')
- expect(drawer).toHaveClass('navbar-drawer--open')
- })
+ renderNavbar();
+ const hamburger = screen.getByLabelText('Open menu');
+ fireEvent.click(hamburger);
+ expect(screen.getByLabelText('Close menu')).toBeInTheDocument();
+ expect(hamburger.getAttribute('aria-expanded')).toBe('true');
+ const drawer = document.querySelector('.navbar-drawer');
+ expect(drawer).toHaveClass('navbar-drawer--open');
+ });
it('closes the mobile drawer when a nav link is clicked', () => {
- renderNavbar()
- const hamburger = screen.getByLabelText('Open menu')
- fireEvent.click(hamburger)
+ renderNavbar();
+ const hamburger = screen.getByLabelText('Open menu');
+ fireEvent.click(hamburger);
- const homeLink = screen.getAllByText('Home')[1]
- fireEvent.click(homeLink)
+ const homeLink = screen.getAllByText('Home')[1];
+ fireEvent.click(homeLink);
- expect(screen.getByLabelText('Open menu')).toBeInTheDocument()
- const drawer = document.querySelector('.navbar-drawer')
- expect(drawer).not.toHaveClass('navbar-drawer--open')
- })
+ expect(screen.getByLabelText('Open menu')).toBeInTheDocument();
+ const drawer = document.querySelector('.navbar-drawer');
+ expect(drawer).not.toHaveClass('navbar-drawer--open');
+ });
it('closes the mobile drawer on Escape key', () => {
- renderNavbar()
- const hamburger = screen.getByLabelText('Open menu')
- fireEvent.click(hamburger)
+ renderNavbar();
+ const hamburger = screen.getByLabelText('Open menu');
+ fireEvent.click(hamburger);
- fireEvent.keyDown(document, { key: 'Escape' })
+ fireEvent.keyDown(document, { key: 'Escape' });
- expect(screen.getByLabelText('Open menu')).toBeInTheDocument()
- })
+ expect(screen.getByLabelText('Open menu')).toBeInTheDocument();
+ });
it('closes the mobile drawer when backdrop is clicked', () => {
- renderNavbar()
- const hamburger = screen.getByLabelText('Open menu')
- fireEvent.click(hamburger)
-
- const backdrop = document.querySelector('.navbar-backdrop')
- fireEvent.click(backdrop)
-
- expect(screen.getByLabelText('Open menu')).toBeInTheDocument()
- })
-
- it('renders the LocaleSelect and WalletButton in the drawer on mobile', () => {
- renderNavbar()
- const hamburger = screen.getByLabelText('Open menu')
- fireEvent.click(hamburger)
-
- const localeSelects = screen.getAllByLabelText('Language & region')
- expect(localeSelects.length).toBe(2)
- expect(screen.getAllByText('Connect Wallet').length).toBe(2)
- })
-})
\ No newline at end of file
+ renderNavbar();
+ const hamburger = screen.getByLabelText('Open menu');
+ fireEvent.click(hamburger);
+
+ const backdrop = document.querySelector('.navbar-backdrop');
+ fireEvent.click(backdrop);
+
+ expect(screen.getByLabelText('Open menu')).toBeInTheDocument();
+ });
+
+ it('renders the LocaleSelect, ThemeToggle, and WalletButton in the drawer on mobile', () => {
+ renderNavbar();
+ const hamburger = screen.getByLabelText('Open menu');
+ fireEvent.click(hamburger);
+
+ const localeSelects = screen.getAllByLabelText('Language & region');
+ expect(localeSelects.length).toBe(2);
+ const themeToggles = screen.getAllByRole('button', {
+ name: /switch to light mode/i,
+ });
+ expect(themeToggles.length).toBe(2);
+ expect(screen.getAllByText('Connect Wallet').length).toBe(2);
+ });
+});
diff --git a/test/components/Tabs.test.jsx b/test/components/Tabs.test.jsx
index 2360e61..3b69f2f 100644
--- a/test/components/Tabs.test.jsx
+++ b/test/components/Tabs.test.jsx
@@ -1,156 +1,172 @@
-import { describe, expect, it, vi } from 'vitest'
-import { render, screen, fireEvent } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import Tabs from '../../src/components/Tabs.jsx'
+import { describe, expect, it, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import Tabs from '../../src/components/Tabs.jsx';
const sampleTabs = [
{ label: 'Tab A', content: Content A
},
{ label: 'Tab B', content: Content B
},
- { label: 'Tab C', content: Content C
}
-]
+ { label: 'Tab C', content: Content C
},
+];
function createTouchEvent(type, clientX, clientY = 100) {
- const event = new Event(type, { bubbles: true, cancelable: true })
+ const event = new Event(type, { bubbles: true, cancelable: true });
Object.defineProperty(event, 'touches', {
value: [{ clientX, clientY }],
- configurable: true
- })
- return event
+ configurable: true,
+ });
+ return event;
}
function fireSwipe(container, fromX, toX, y = 100) {
- const panels = container.querySelector('.tabs-panels')
- fireEvent(panels, createTouchEvent('touchstart', fromX, y))
- fireEvent(panels, createTouchEvent('touchmove', toX, y))
- fireEvent(panels, createTouchEvent('touchend', toX, y))
+ const panels = container.querySelector('.tabs-panels');
+ fireEvent(panels, createTouchEvent('touchstart', fromX, y));
+ fireEvent(panels, createTouchEvent('touchmove', toX, y));
+ fireEvent(panels, createTouchEvent('touchend', toX, y));
}
function getPanel(container, index) {
- return container.querySelector(`#tabpanel-${index}`)
+ return container.querySelector(`#tabpanel-${index}`);
}
describe('Tabs', () => {
it('renders all tab labels', () => {
- render()
- expect(screen.getByRole('tab', { name: 'Tab A' })).toBeInTheDocument()
- expect(screen.getByRole('tab', { name: 'Tab B' })).toBeInTheDocument()
- expect(screen.getByRole('tab', { name: 'Tab C' })).toBeInTheDocument()
- })
+ render();
+ expect(screen.getByRole('tab', { name: 'Tab A' })).toBeInTheDocument();
+ expect(screen.getByRole('tab', { name: 'Tab B' })).toBeInTheDocument();
+ expect(screen.getByRole('tab', { name: 'Tab C' })).toBeInTheDocument();
+ });
it('shows the first tab panel by default', () => {
- const { container } = render()
- expect(getPanel(container, 0)).not.toHaveAttribute('hidden')
- expect(getPanel(container, 1)).toHaveAttribute('hidden')
- expect(getPanel(container, 2)).toHaveAttribute('hidden')
- })
+ const { container } = render();
+ expect(getPanel(container, 0)).not.toHaveAttribute('hidden');
+ expect(getPanel(container, 1)).toHaveAttribute('hidden');
+ expect(getPanel(container, 2)).toHaveAttribute('hidden');
+ });
it('switches tab on header click', async () => {
- const { container } = render()
- const user = userEvent.setup()
+ const { container } = render();
+ const user = userEvent.setup();
- await user.click(screen.getByRole('tab', { name: 'Tab B' }))
- expect(getPanel(container, 0)).toHaveAttribute('hidden')
- expect(getPanel(container, 1)).not.toHaveAttribute('hidden')
- expect(getPanel(container, 2)).toHaveAttribute('hidden')
- })
+ await user.click(screen.getByRole('tab', { name: 'Tab B' }));
+ expect(getPanel(container, 0)).toHaveAttribute('hidden');
+ expect(getPanel(container, 1)).not.toHaveAttribute('hidden');
+ expect(getPanel(container, 2)).toHaveAttribute('hidden');
+ });
it('marks the active tab with aria-selected', async () => {
- const user = userEvent.setup()
- render()
-
- expect(screen.getByRole('tab', { name: 'Tab A' })).toHaveAttribute('aria-selected', 'true')
- expect(screen.getByRole('tab', { name: 'Tab B' })).toHaveAttribute('aria-selected', 'false')
-
- await user.click(screen.getByRole('tab', { name: 'Tab B' }))
- expect(screen.getByRole('tab', { name: 'Tab A' })).toHaveAttribute('aria-selected', 'false')
- expect(screen.getByRole('tab', { name: 'Tab B' })).toHaveAttribute('aria-selected', 'true')
- })
+ const user = userEvent.setup();
+ render();
+
+ expect(screen.getByRole('tab', { name: 'Tab A' })).toHaveAttribute(
+ 'aria-selected',
+ 'true',
+ );
+ expect(screen.getByRole('tab', { name: 'Tab B' })).toHaveAttribute(
+ 'aria-selected',
+ 'false',
+ );
+
+ await user.click(screen.getByRole('tab', { name: 'Tab B' }));
+ expect(screen.getByRole('tab', { name: 'Tab A' })).toHaveAttribute(
+ 'aria-selected',
+ 'false',
+ );
+ expect(screen.getByRole('tab', { name: 'Tab B' })).toHaveAttribute(
+ 'aria-selected',
+ 'true',
+ );
+ });
it('calls onChange when tab changes', async () => {
- const handleChange = vi.fn()
- const user = userEvent.setup()
+ const handleChange = vi.fn();
+ const user = userEvent.setup();
- render()
- await user.click(screen.getByRole('tab', { name: 'Tab C' }))
+ render();
+ await user.click(screen.getByRole('tab', { name: 'Tab C' }));
- expect(handleChange).toHaveBeenCalledWith(2)
- })
+ expect(handleChange).toHaveBeenCalledWith(2);
+ });
it('respects controlled activeIndex prop', () => {
- const { container, rerender } = render()
- expect(getPanel(container, 1)).not.toHaveAttribute('hidden')
+ const { container, rerender } = render(
+ ,
+ );
+ expect(getPanel(container, 1)).not.toHaveAttribute('hidden');
- rerender()
- expect(getPanel(container, 2)).not.toHaveAttribute('hidden')
- })
+ rerender();
+ expect(getPanel(container, 2)).not.toHaveAttribute('hidden');
+ });
it('does not fire onChange when same tab is clicked', async () => {
- const handleChange = vi.fn()
- const user = userEvent.setup()
+ const handleChange = vi.fn();
+ const user = userEvent.setup();
- render()
- await user.click(screen.getByRole('tab', { name: 'Tab A' }))
+ render();
+ await user.click(screen.getByRole('tab', { name: 'Tab A' }));
- expect(handleChange).not.toHaveBeenCalled()
- })
+ expect(handleChange).not.toHaveBeenCalled();
+ });
it('swipes left to go to next tab', () => {
- const { container } = render()
- fireSwipe(container, 300, 100)
- expect(getPanel(container, 1)).not.toHaveAttribute('hidden')
- expect(getPanel(container, 0)).toHaveAttribute('hidden')
- })
+ const { container } = render();
+ fireSwipe(container, 300, 100);
+ expect(getPanel(container, 1)).not.toHaveAttribute('hidden');
+ expect(getPanel(container, 0)).toHaveAttribute('hidden');
+ });
it('does not swipe past the last tab', () => {
- const { container } = render()
- fireSwipe(container, 300, 100)
- fireSwipe(container, 300, 100)
- fireSwipe(container, 300, 100)
- expect(getPanel(container, 2)).not.toHaveAttribute('hidden')
- })
+ const { container } = render();
+ fireSwipe(container, 300, 100);
+ fireSwipe(container, 300, 100);
+ fireSwipe(container, 300, 100);
+ expect(getPanel(container, 2)).not.toHaveAttribute('hidden');
+ });
it('does not swipe if delta is below threshold', () => {
- const { container } = render()
- fireSwipe(container, 150, 160)
- expect(getPanel(container, 0)).not.toHaveAttribute('hidden')
- })
+ const { container } = render();
+ fireSwipe(container, 150, 160);
+ expect(getPanel(container, 0)).not.toHaveAttribute('hidden');
+ });
it('swipes right to go back to previous tab', () => {
- const { container } = render()
- fireSwipe(container, 300, 100)
- expect(getPanel(container, 1)).not.toHaveAttribute('hidden')
+ const { container } = render();
+ fireSwipe(container, 300, 100);
+ expect(getPanel(container, 1)).not.toHaveAttribute('hidden');
- fireSwipe(container, 100, 300)
- expect(getPanel(container, 0)).not.toHaveAttribute('hidden')
- })
+ fireSwipe(container, 100, 300);
+ expect(getPanel(container, 0)).not.toHaveAttribute('hidden');
+ });
it('does not swipe left from the first tab', () => {
- const { container } = render()
- fireSwipe(container, 100, 300)
- expect(getPanel(container, 0)).not.toHaveAttribute('hidden')
- })
+ const { container } = render();
+ fireSwipe(container, 100, 300);
+ expect(getPanel(container, 0)).not.toHaveAttribute('hidden');
+ });
it('has accessible tab markup', () => {
- render()
+ render();
- const tabA = screen.getByRole('tab', { name: 'Tab A' })
- const panelA = screen.getByRole('tabpanel', { name: 'Tab A' })
+ const tabA = screen.getByRole('tab', { name: 'Tab A' });
+ const panelA = screen.getByRole('tabpanel', { name: 'Tab A' });
- expect(tabA).toHaveAttribute('id', 'tab-0')
- expect(panelA).toHaveAttribute('id', 'tabpanel-0')
- expect(tabA).toHaveAttribute('aria-controls', 'tabpanel-0')
- expect(panelA).toHaveAttribute('aria-labelledby', 'tab-0')
- })
+ expect(tabA).toHaveAttribute('id', 'tab-0');
+ expect(panelA).toHaveAttribute('id', 'tabpanel-0');
+ expect(tabA).toHaveAttribute('aria-controls', 'tabpanel-0');
+ expect(panelA).toHaveAttribute('aria-labelledby', 'tab-0');
+ });
it('renders empty when tabs array is empty', () => {
- const { container } = render()
- expect(container.querySelector('.tabs-header')).toBeInTheDocument()
- expect(container.querySelectorAll('.tabs-tab').length).toBe(0)
- })
+ const { container } = render();
+ expect(container.querySelector('.tabs-header')).toBeInTheDocument();
+ expect(container.querySelectorAll('.tabs-tab').length).toBe(0);
+ });
it('accepts additional className', () => {
- const { container } = render()
- expect(container.firstChild).toHaveClass('extra-class')
- expect(container.firstChild).toHaveClass('tabs')
- })
-})
\ No newline at end of file
+ const { container } = render(
+ ,
+ );
+ expect(container.firstChild).toHaveClass('extra-class');
+ expect(container.firstChild).toHaveClass('tabs');
+ });
+});
diff --git a/test/components/WalletButton.test.jsx b/test/components/WalletButton.test.jsx
index 28a70b2..eb8b004 100644
--- a/test/components/WalletButton.test.jsx
+++ b/test/components/WalletButton.test.jsx
@@ -5,8 +5,10 @@ import WalletButton from '../../src/components/WalletButton.jsx';
import { AppProvider } from '../../src/context/AppContext.jsx';
import * as walletService from '../../src/services/wallet.js';
-function renderWithProvider(component) {
- return render({component});
+function renderWithProvider(component, connectTimeoutMs = 30000) {
+ return render(
+ {component},
+ );
}
describe('WalletButton', () => {
@@ -38,37 +40,35 @@ describe('WalletButton', () => {
});
it('displays wallet info when connected', async () => {
- const mockAccount = { publicKey: 'GBQAZ7Z3X7DEMOPUBLICKEY', balance: 1000 };
- vi.spyOn(walletService, 'connectWallet').mockResolvedValue(mockAccount);
+ vi.spyOn(walletService, 'connectWallet').mockResolvedValue({
+ publicKey: 'GA7Y253GXX7G4L5BJSJ36QL532454532532454532532454532532454',
+ balance: 5000,
+ });
renderWithProvider();
+ const button = screen.getByRole('button', { name: /connect wallet/i });
- await userEvent.click(
- screen.getByRole('button', { name: /connect wallet/i }),
- );
+ await userEvent.click(button);
await waitFor(() => {
- expect(screen.getByText(/1000 XLM/)).toBeInTheDocument();
- expect(
- screen.getByRole('button', { name: /disconnect/i }),
- ).toBeInTheDocument();
+ expect(screen.getByText('GA7Y25...2454')).toBeInTheDocument();
+ expect(screen.getByText(/5000/)).toBeInTheDocument();
});
});
it('displays error alert when connection is rejected', async () => {
vi.spyOn(walletService, 'connectWallet').mockRejectedValue(
- new Error('User rejected the connection request'),
+ new Error('User cancelled connection'),
);
renderWithProvider();
+ const button = screen.getByRole('button', { name: /connect wallet/i });
- await userEvent.click(
- screen.getByRole('button', { name: /connect wallet/i }),
- );
+ await userEvent.click(button);
await waitFor(() => {
expect(
- screen.getByText(/user rejected the connection request/i),
+ screen.getByText(/user cancelled connection/i),
).toBeInTheDocument();
});
@@ -83,7 +83,7 @@ describe('WalletButton', () => {
() => new Promise(() => {}), // Never resolves
);
- renderWithProvider();
+ renderWithProvider(, 100);
await userEvent.click(
screen.getByRole('button', { name: /connect wallet/i }),
@@ -93,7 +93,7 @@ describe('WalletButton', () => {
() => {
expect(screen.getByText(/connection timeout/i)).toBeInTheDocument();
},
- { timeout: 31000 },
+ { timeout: 2000 },
);
});
diff --git a/test/integration/landscape-layout.test.jsx b/test/integration/landscape-layout.test.jsx
index 05771e8..0ffdd0f 100644
--- a/test/integration/landscape-layout.test.jsx
+++ b/test/integration/landscape-layout.test.jsx
@@ -1,88 +1,85 @@
-import fs from 'node:fs'
-import path from 'node:path'
-import { render, screen } from '@testing-library/react'
-import { beforeEach, describe, expect, it } from 'vitest'
-import App from '../../src/App.jsx'
+import fs from 'node:fs';
+import path from 'node:path';
+import { render, screen } from '@testing-library/react';
+import { beforeEach, describe, expect, it } from 'vitest';
+import App from '../../src/App.jsx';
function readCSS(filename) {
- return fs.readFileSync(
- path.resolve(process.cwd(), 'src', filename),
- 'utf8',
- )
+ return fs.readFileSync(path.resolve(process.cwd(), 'src', filename), 'utf8');
}
describe('landscape layout for tablets', () => {
describe('responsive.css', () => {
- const css = readCSS('responsive.css')
+ const css = readCSS('responsive.css');
it('contains a tablet landscape breakpoint (721px–1024px)', () => {
expect(css).toMatch(
/@media\s*\(\s*min-width\s*:\s*721px\s*\)\s*and\s*\(\s*max-width\s*:\s*1024px\s*\)/,
- )
- })
+ );
+ });
it('adjusts .features to 2 columns within the landscape breakpoint', () => {
- const start = css.indexOf('@media (min-width: 721px)')
- const block = css.slice(start, css.indexOf('@media (max-width: 720px)'))
- expect(block).toContain('grid-template-columns')
- expect(block).toContain('repeat(2, 1fr)')
- })
+ const start = css.indexOf('@media (min-width: 721px)');
+ const block = css.slice(start, css.indexOf('@media (max-width: 720px)'));
+ expect(block).toContain('grid-template-columns');
+ expect(block).toContain('repeat(2, 1fr)');
+ });
it('adjusts .app-main padding within the landscape breakpoint', () => {
- const start = css.indexOf('@media (min-width: 721px)')
- const block = css.slice(start, css.indexOf('@media (max-width: 720px)'))
- expect(block).toContain('.app-main')
- expect(block).toContain('padding')
- })
- })
+ const start = css.indexOf('@media (min-width: 721px)');
+ const block = css.slice(start, css.indexOf('@media (max-width: 720px)'));
+ expect(block).toContain('.app-main');
+ expect(block).toContain('padding');
+ });
+ });
describe('sidebar integration in App', () => {
beforeEach(() => {
- localStorage.clear()
- })
+ localStorage.clear();
+ });
it('renders the Sidebar as part of the app layout', () => {
- render()
- const sidebar = document.querySelector('.sidebar')
- expect(sidebar).toBeInTheDocument()
- })
+ render();
+ const sidebar = document.querySelector('.sidebar');
+ expect(sidebar).toBeInTheDocument();
+ });
it('renders sidebar navigation links within the app', () => {
- render()
- const homeLinks = screen.getAllByText('Home')
- expect(homeLinks.length).toBeGreaterThanOrEqual(1)
- const sidebarLinks = document.querySelectorAll('.sidebar-link')
- expect(sidebarLinks.length).toBe(3)
- })
+ render();
+ const homeLinks = screen.getAllByText('Home');
+ expect(homeLinks.length).toBeGreaterThanOrEqual(1);
+ const sidebarLinks = document.querySelectorAll('.sidebar-link');
+ expect(sidebarLinks.length).toBe(3);
+ });
it('renders the sidebar toggle button', () => {
- render()
- const toggle = screen.getByLabelText('Collapse sidebar')
- expect(toggle).toBeInTheDocument()
- })
+ render();
+ const toggle = screen.getByLabelText('Collapse sidebar');
+ expect(toggle).toBeInTheDocument();
+ });
it('renders the content area alongside the sidebar', () => {
- render()
- const app = document.querySelector('.app')
- const sidebar = document.querySelector('.sidebar')
- const content = document.querySelector('.app-content')
+ render();
+ const app = document.querySelector('.app');
+ const sidebar = document.querySelector('.sidebar');
+ const content = document.querySelector('.app-content');
- expect(app).toBeInTheDocument()
- expect(sidebar).toBeInTheDocument()
- expect(content).toBeInTheDocument()
+ expect(app).toBeInTheDocument();
+ expect(sidebar).toBeInTheDocument();
+ expect(content).toBeInTheDocument();
- expect(app.contains(sidebar)).toBe(true)
- expect(app.contains(content)).toBe(true)
- })
+ expect(app.contains(sidebar)).toBe(true);
+ expect(app.contains(content)).toBe(true);
+ });
it('renders Navbar and Footer inside .app-content', () => {
- render()
- const content = document.querySelector('.app-content')
- const navbar = document.querySelector('.navbar')
- const footer = document.querySelector('.footer')
+ render();
+ const content = document.querySelector('.app-content');
+ const navbar = document.querySelector('.navbar');
+ const footer = document.querySelector('.footer');
- expect(content.contains(navbar)).toBe(true)
- expect(content.contains(footer)).toBe(true)
- })
- })
-})
+ expect(content.contains(navbar)).toBe(true);
+ expect(content.contains(footer)).toBe(true);
+ });
+ });
+});
diff --git a/test/print-styles.test.js b/test/print-styles.test.js
index b4b86ca..5b605bd 100644
--- a/test/print-styles.test.js
+++ b/test/print-styles.test.js
@@ -1,91 +1,90 @@
-import fs from 'node:fs'
-import path from 'node:path'
-import { describe, expect, it } from 'vitest'
+import fs from 'node:fs';
+import path from 'node:path';
+import { describe, expect, it } from 'vitest';
function readCSS(filename) {
- return fs.readFileSync(
- path.resolve(process.cwd(), 'src', filename),
- 'utf8',
- )
+ return fs.readFileSync(path.resolve(process.cwd(), 'src', filename), 'utf8');
}
describe('print styles', () => {
describe('print.css (global)', () => {
- const css = readCSS('print.css')
+ const css = readCSS('print.css');
it('defines @media print rules', () => {
- expect(css).toMatch(/@media\s+print/)
- })
+ expect(css).toMatch(/@media\s+print/);
+ });
it('hides chrome (navbar, footer, skip-link, scroll-to-top) in a group selector', () => {
- expect(css).toMatch(/\.navbar,\s*\.footer,\s*\.skip-link,\s*\.scroll-to-top\s*\{[^}]*display:\s*none/)
- })
+ expect(css).toMatch(
+ /\.navbar,\s*\.footer,\s*\.skip-link,\s*\.scroll-to-top\s*\{[^}]*display:\s*none/,
+ );
+ });
it('hides all .btn elements', () => {
- expect(css).toMatch(/\.btn\s*\{[^}]*display:\s*none/)
- })
+ expect(css).toMatch(/\.btn\s*\{[^}]*display:\s*none/);
+ });
it('resets body background to white', () => {
- expect(css).toMatch(/body\s*\{[^}]*background:\s*#[fF]+/)
- })
+ expect(css).toMatch(/body\s*\{[^}]*background:\s*#[fF]+/);
+ });
it('resets body text color to black', () => {
- expect(css).toMatch(/body\s*\{[^}]*color:\s*#[0]+/)
- })
+ expect(css).toMatch(/body\s*\{[^}]*color:\s*#[0]+/);
+ });
it('sets @page margin', () => {
- expect(css).toMatch(/@page\s*\{[^}]*margin:\s*1\.5cm/)
- })
+ expect(css).toMatch(/@page\s*\{[^}]*margin:\s*1\.5cm/);
+ });
it('defines print-color-adjust for status badges', () => {
- expect(css).toMatch(/print-color-adjust:\s*exact/)
- })
+ expect(css).toMatch(/print-color-adjust:\s*exact/);
+ });
it('overrides status badge colors for print', () => {
- expect(css).toMatch(/\.status-pending\s*\{[^}]*background:\s*#fef3cd/)
- expect(css).toMatch(/\.status-completed\s*\{[^}]*background:\s*#d4edda/)
- expect(css).toMatch(/\.status-failed\s*\{[^}]*background:\s*#f8d7da/)
- })
- })
+ expect(css).toMatch(/\.status-pending\s*\{[^}]*background:\s*#fef3cd/);
+ expect(css).toMatch(/\.status-completed\s*\{[^}]*background:\s*#d4edda/);
+ expect(css).toMatch(/\.status-failed\s*\{[^}]*background:\s*#f8d7da/);
+ });
+ });
describe('Transfers.css (page-specific)', () => {
- const css = readCSS(path.join('pages', 'Transfers.css'))
+ const css = readCSS(path.join('pages', 'Transfers.css'));
it('includes @media print rules', () => {
- expect(css).toMatch(/@media\s+print/)
- })
+ expect(css).toMatch(/@media\s+print/);
+ });
it('hides filters on print', () => {
- const match = css.match(/@media\s+print\s*\{([^}]*)\}/s)
- expect(match).not.toBeNull()
- expect(css).toMatch(/\.transfers-filters\s*\{[^}]*display:\s*none/)
- })
- })
+ const match = css.match(/@media\s+print\s*\{([^}]*)\}/s);
+ expect(match).not.toBeNull();
+ expect(css).toMatch(/\.transfers-filters\s*\{[^}]*display:\s*none/);
+ });
+ });
describe('Chart.css (component-specific)', () => {
- const css = readCSS(path.join('components', 'Chart.css'))
+ const css = readCSS(path.join('components', 'Chart.css'));
it('includes @media print rules', () => {
- expect(css).toMatch(/@media\s+print/)
- })
+ expect(css).toMatch(/@media\s+print/);
+ });
it('hides chart tooltip on print', () => {
- expect(css).toMatch(/\.chart-tooltip\s*\{[^}]*display:\s*none/)
- })
+ expect(css).toMatch(/\.chart-tooltip\s*\{[^}]*display:\s*none/);
+ });
it('hides download button on print', () => {
- expect(css).toMatch(/\.download-button\s*\{[^}]*display:\s*none/)
- })
- })
+ expect(css).toMatch(/\.download-button\s*\{[^}]*display:\s*none/);
+ });
+ });
describe('App.jsx imports print.css', () => {
const app = fs.readFileSync(
path.resolve(process.cwd(), 'src', 'App.jsx'),
'utf8',
- )
+ );
it('imports print.css', () => {
- expect(app).toMatch(/import\s+['"].\/print\.css['"]/)
- })
- })
-})
+ expect(app).toMatch(/import\s+['"].\/print\.css['"]/);
+ });
+ });
+});
diff --git a/test/unit/Button.test.jsx b/test/unit/Button.test.jsx
index f35361e..57693e4 100644
--- a/test/unit/Button.test.jsx
+++ b/test/unit/Button.test.jsx
@@ -1,50 +1,56 @@
-import { render, screen } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import { describe, expect, it, vi } from 'vitest'
-import Button from '../../src/components/Button.jsx'
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+import Button from '../../src/components/Button.jsx';
describe('Button', () => {
it('renders children as text content', () => {
- render()
+ render();
- expect(screen.getByRole('button', { name: 'Send Money' })).toBeInTheDocument()
- })
+ expect(
+ screen.getByRole('button', { name: 'Send Money' }),
+ ).toBeInTheDocument();
+ });
it('calls onClick when clicked', async () => {
- const user = userEvent.setup()
- const onClick = vi.fn()
- render()
+ const user = userEvent.setup();
+ const onClick = vi.fn();
+ render();
- await user.click(screen.getByRole('button', { name: 'Click me' }))
+ await user.click(screen.getByRole('button', { name: 'Click me' }));
- expect(onClick).toHaveBeenCalledTimes(1)
- })
+ expect(onClick).toHaveBeenCalledTimes(1);
+ });
it('does not call onClick when disabled', async () => {
- const user = userEvent.setup()
- const onClick = vi.fn()
- render()
+ const user = userEvent.setup();
+ const onClick = vi.fn();
+ render(
+ ,
+ );
- await user.click(screen.getByRole('button', { name: 'Disabled' }))
+ await user.click(screen.getByRole('button', { name: 'Disabled' }));
- expect(onClick).not.toHaveBeenCalled()
- })
+ expect(onClick).not.toHaveBeenCalled();
+ });
it('applies a custom aria-label for icon-only buttons', () => {
- render()
+ render();
- expect(screen.getByRole('button', { name: 'Close' })).toBeInTheDocument()
- })
+ expect(screen.getByRole('button', { name: 'Close' })).toBeInTheDocument();
+ });
it('applies a custom title attribute', () => {
- render()
+ render();
- expect(screen.getByTitle('Close dialog')).toBeInTheDocument()
- })
+ expect(screen.getByTitle('Close dialog')).toBeInTheDocument();
+ });
it('sets the type attribute', () => {
- render()
+ render();
- expect(screen.getByRole('button')).toHaveAttribute('type', 'submit')
- })
-})
+ expect(screen.getByRole('button')).toHaveAttribute('type', 'submit');
+ });
+});
diff --git a/test/unit/ThemeToggle.test.jsx b/test/unit/ThemeToggle.test.jsx
new file mode 100644
index 0000000..0c6909b
--- /dev/null
+++ b/test/unit/ThemeToggle.test.jsx
@@ -0,0 +1,69 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, expect, it, beforeEach } from 'vitest';
+import ThemeToggle from '../../src/components/ThemeToggle.jsx';
+import { AppProvider } from '../../src/context/AppContext.jsx';
+
+function renderThemeToggle() {
+ return render(
+
+
+ ,
+ );
+}
+
+describe('ThemeToggle', () => {
+ beforeEach(() => {
+ localStorage.clear();
+ document.documentElement.removeAttribute('data-theme');
+ });
+
+ it('renders theme toggle button with initial dark mode state', () => {
+ renderThemeToggle();
+ const button = screen.getByRole('button', {
+ name: /switch to light mode/i,
+ });
+ expect(button).toBeInTheDocument();
+ expect(document.documentElement.getAttribute('data-theme')).toBe('dark');
+ });
+
+ it('toggles theme to light mode on click and updates localStorage and document attribute', () => {
+ renderThemeToggle();
+ const button = screen.getByRole('button', {
+ name: /switch to light mode/i,
+ });
+
+ fireEvent.click(button);
+
+ expect(document.documentElement.getAttribute('data-theme')).toBe('light');
+ expect(localStorage.getItem('remitflow:theme')).toBe('"light"');
+ expect(
+ screen.getByRole('button', { name: /switch to dark mode/i }),
+ ).toBeInTheDocument();
+ });
+
+ it('toggles back to dark mode on second click', () => {
+ renderThemeToggle();
+ const button = screen.getByRole('button', {
+ name: /switch to light mode/i,
+ });
+
+ fireEvent.click(button);
+ fireEvent.click(button);
+
+ expect(document.documentElement.getAttribute('data-theme')).toBe('dark');
+ expect(localStorage.getItem('remitflow:theme')).toBe('"dark"');
+ expect(
+ screen.getByRole('button', { name: /switch to light mode/i }),
+ ).toBeInTheDocument();
+ });
+
+ it('initializes with light mode when localStorage contains light', () => {
+ localStorage.setItem('remitflow:theme', '"light"');
+ renderThemeToggle();
+
+ expect(document.documentElement.getAttribute('data-theme')).toBe('light');
+ expect(
+ screen.getByRole('button', { name: /switch to dark mode/i }),
+ ).toBeInTheDocument();
+ });
+});