mirror of
https://github.com/acedanger/finance.git
synced 2025-12-05 22:50:12 -08:00
feat: add testing infrastructure and improve component feedback
- Added React testing setup with JSDOM - Added component tests for AddTransactionForm and TransactionTable - Improved error handling and success messages in components - Updated test configuration and dependencies - Added CSS for error and success states
This commit is contained in:
GitHub Copilot
@@ -13,11 +13,8 @@ export default defineConfig({
|
|||||||
}),
|
}),
|
||||||
integrations: [react()],
|
integrations: [react()],
|
||||||
vite: {
|
vite: {
|
||||||
resolve: {
|
ssr: {
|
||||||
alias: {
|
noExternal: ['react-dom/server', 'react-dom/server.browser'],
|
||||||
'react-dom/server': 'react-dom/server',
|
|
||||||
'react-dom/server.browser': 'react-dom/server',
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -1,224 +0,0 @@
|
|||||||
body, html {
|
|
||||||
margin:0; padding: 0;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
body {
|
|
||||||
font-family: Helvetica Neue, Helvetica, Arial;
|
|
||||||
font-size: 14px;
|
|
||||||
color:#333;
|
|
||||||
}
|
|
||||||
.small { font-size: 12px; }
|
|
||||||
*, *:after, *:before {
|
|
||||||
-webkit-box-sizing:border-box;
|
|
||||||
-moz-box-sizing:border-box;
|
|
||||||
box-sizing:border-box;
|
|
||||||
}
|
|
||||||
h1 { font-size: 20px; margin: 0;}
|
|
||||||
h2 { font-size: 14px; }
|
|
||||||
pre {
|
|
||||||
font: 12px/1.4 Consolas, "Liberation Mono", Menlo, Courier, monospace;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
-moz-tab-size: 2;
|
|
||||||
-o-tab-size: 2;
|
|
||||||
tab-size: 2;
|
|
||||||
}
|
|
||||||
a { color:#0074D9; text-decoration:none; }
|
|
||||||
a:hover { text-decoration:underline; }
|
|
||||||
.strong { font-weight: bold; }
|
|
||||||
.space-top1 { padding: 10px 0 0 0; }
|
|
||||||
.pad2y { padding: 20px 0; }
|
|
||||||
.pad1y { padding: 10px 0; }
|
|
||||||
.pad2x { padding: 0 20px; }
|
|
||||||
.pad2 { padding: 20px; }
|
|
||||||
.pad1 { padding: 10px; }
|
|
||||||
.space-left2 { padding-left:55px; }
|
|
||||||
.space-right2 { padding-right:20px; }
|
|
||||||
.center { text-align:center; }
|
|
||||||
.clearfix { display:block; }
|
|
||||||
.clearfix:after {
|
|
||||||
content:'';
|
|
||||||
display:block;
|
|
||||||
height:0;
|
|
||||||
clear:both;
|
|
||||||
visibility:hidden;
|
|
||||||
}
|
|
||||||
.fl { float: left; }
|
|
||||||
@media only screen and (max-width:640px) {
|
|
||||||
.col3 { width:100%; max-width:100%; }
|
|
||||||
.hide-mobile { display:none!important; }
|
|
||||||
}
|
|
||||||
|
|
||||||
.quiet {
|
|
||||||
color: #7f7f7f;
|
|
||||||
color: rgba(0,0,0,0.5);
|
|
||||||
}
|
|
||||||
.quiet a { opacity: 0.7; }
|
|
||||||
|
|
||||||
.fraction {
|
|
||||||
font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
|
|
||||||
font-size: 10px;
|
|
||||||
color: #555;
|
|
||||||
background: #E8E8E8;
|
|
||||||
padding: 4px 5px;
|
|
||||||
border-radius: 3px;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.path a:link, div.path a:visited { color: #333; }
|
|
||||||
table.coverage {
|
|
||||||
border-collapse: collapse;
|
|
||||||
margin: 10px 0 0 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
table.coverage td {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
vertical-align: top;
|
|
||||||
}
|
|
||||||
table.coverage td.line-count {
|
|
||||||
text-align: right;
|
|
||||||
padding: 0 5px 0 20px;
|
|
||||||
}
|
|
||||||
table.coverage td.line-coverage {
|
|
||||||
text-align: right;
|
|
||||||
padding-right: 10px;
|
|
||||||
min-width:20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
table.coverage td span.cline-any {
|
|
||||||
display: inline-block;
|
|
||||||
padding: 0 5px;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.missing-if-branch {
|
|
||||||
display: inline-block;
|
|
||||||
margin-right: 5px;
|
|
||||||
border-radius: 3px;
|
|
||||||
position: relative;
|
|
||||||
padding: 0 4px;
|
|
||||||
background: #333;
|
|
||||||
color: yellow;
|
|
||||||
}
|
|
||||||
|
|
||||||
.skip-if-branch {
|
|
||||||
display: none;
|
|
||||||
margin-right: 10px;
|
|
||||||
position: relative;
|
|
||||||
padding: 0 4px;
|
|
||||||
background: #ccc;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
.missing-if-branch .typ, .skip-if-branch .typ {
|
|
||||||
color: inherit !important;
|
|
||||||
}
|
|
||||||
.coverage-summary {
|
|
||||||
border-collapse: collapse;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.coverage-summary tr { border-bottom: 1px solid #bbb; }
|
|
||||||
.keyline-all { border: 1px solid #ddd; }
|
|
||||||
.coverage-summary td, .coverage-summary th { padding: 10px; }
|
|
||||||
.coverage-summary tbody { border: 1px solid #bbb; }
|
|
||||||
.coverage-summary td { border-right: 1px solid #bbb; }
|
|
||||||
.coverage-summary td:last-child { border-right: none; }
|
|
||||||
.coverage-summary th {
|
|
||||||
text-align: left;
|
|
||||||
font-weight: normal;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
.coverage-summary th.file { border-right: none !important; }
|
|
||||||
.coverage-summary th.pct { }
|
|
||||||
.coverage-summary th.pic,
|
|
||||||
.coverage-summary th.abs,
|
|
||||||
.coverage-summary td.pct,
|
|
||||||
.coverage-summary td.abs { text-align: right; }
|
|
||||||
.coverage-summary td.file { white-space: nowrap; }
|
|
||||||
.coverage-summary td.pic { min-width: 120px !important; }
|
|
||||||
.coverage-summary tfoot td { }
|
|
||||||
|
|
||||||
.coverage-summary .sorter {
|
|
||||||
height: 10px;
|
|
||||||
width: 7px;
|
|
||||||
display: inline-block;
|
|
||||||
margin-left: 0.5em;
|
|
||||||
background: url(sort-arrow-sprite.png) no-repeat scroll 0 0 transparent;
|
|
||||||
}
|
|
||||||
.coverage-summary .sorted .sorter {
|
|
||||||
background-position: 0 -20px;
|
|
||||||
}
|
|
||||||
.coverage-summary .sorted-desc .sorter {
|
|
||||||
background-position: 0 -10px;
|
|
||||||
}
|
|
||||||
.status-line { height: 10px; }
|
|
||||||
/* yellow */
|
|
||||||
.cbranch-no { background: yellow !important; color: #111; }
|
|
||||||
/* dark red */
|
|
||||||
.red.solid, .status-line.low, .low .cover-fill { background:#C21F39 }
|
|
||||||
.low .chart { border:1px solid #C21F39 }
|
|
||||||
.highlighted,
|
|
||||||
.highlighted .cstat-no, .highlighted .fstat-no, .highlighted .cbranch-no{
|
|
||||||
background: #C21F39 !important;
|
|
||||||
}
|
|
||||||
/* medium red */
|
|
||||||
.cstat-no, .fstat-no, .cbranch-no, .cbranch-no { background:#F6C6CE }
|
|
||||||
/* light red */
|
|
||||||
.low, .cline-no { background:#FCE1E5 }
|
|
||||||
/* light green */
|
|
||||||
.high, .cline-yes { background:rgb(230,245,208) }
|
|
||||||
/* medium green */
|
|
||||||
.cstat-yes { background:rgb(161,215,106) }
|
|
||||||
/* dark green */
|
|
||||||
.status-line.high, .high .cover-fill { background:rgb(77,146,33) }
|
|
||||||
.high .chart { border:1px solid rgb(77,146,33) }
|
|
||||||
/* dark yellow (gold) */
|
|
||||||
.status-line.medium, .medium .cover-fill { background: #f9cd0b; }
|
|
||||||
.medium .chart { border:1px solid #f9cd0b; }
|
|
||||||
/* light yellow */
|
|
||||||
.medium { background: #fff4c2; }
|
|
||||||
|
|
||||||
.cstat-skip { background: #ddd; color: #111; }
|
|
||||||
.fstat-skip { background: #ddd; color: #111 !important; }
|
|
||||||
.cbranch-skip { background: #ddd !important; color: #111; }
|
|
||||||
|
|
||||||
span.cline-neutral { background: #eaeaea; }
|
|
||||||
|
|
||||||
.coverage-summary td.empty {
|
|
||||||
opacity: .5;
|
|
||||||
padding-top: 4px;
|
|
||||||
padding-bottom: 4px;
|
|
||||||
line-height: 1;
|
|
||||||
color: #888;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cover-fill, .cover-empty {
|
|
||||||
display:inline-block;
|
|
||||||
height: 12px;
|
|
||||||
}
|
|
||||||
.chart {
|
|
||||||
line-height: 0;
|
|
||||||
}
|
|
||||||
.cover-empty {
|
|
||||||
background: white;
|
|
||||||
}
|
|
||||||
.cover-full {
|
|
||||||
border-right: none !important;
|
|
||||||
}
|
|
||||||
pre.prettyprint {
|
|
||||||
border: none !important;
|
|
||||||
padding: 0 !important;
|
|
||||||
margin: 0 !important;
|
|
||||||
}
|
|
||||||
.com { color: #999 !important; }
|
|
||||||
.ignore-none { color: #999; font-weight: normal; }
|
|
||||||
|
|
||||||
.wrapper {
|
|
||||||
min-height: 100%;
|
|
||||||
height: auto !important;
|
|
||||||
height: 100%;
|
|
||||||
margin: 0 auto -48px;
|
|
||||||
}
|
|
||||||
.footer, .push {
|
|
||||||
height: 48px;
|
|
||||||
}
|
|
||||||
@@ -1,87 +0,0 @@
|
|||||||
/* eslint-disable */
|
|
||||||
var jumpToCode = (function init() {
|
|
||||||
// Classes of code we would like to highlight in the file view
|
|
||||||
var missingCoverageClasses = ['.cbranch-no', '.cstat-no', '.fstat-no'];
|
|
||||||
|
|
||||||
// Elements to highlight in the file listing view
|
|
||||||
var fileListingElements = ['td.pct.low'];
|
|
||||||
|
|
||||||
// We don't want to select elements that are direct descendants of another match
|
|
||||||
var notSelector = ':not(' + missingCoverageClasses.join('):not(') + ') > '; // becomes `:not(a):not(b) > `
|
|
||||||
|
|
||||||
// Selecter that finds elements on the page to which we can jump
|
|
||||||
var selector =
|
|
||||||
fileListingElements.join(', ') +
|
|
||||||
', ' +
|
|
||||||
notSelector +
|
|
||||||
missingCoverageClasses.join(', ' + notSelector); // becomes `:not(a):not(b) > a, :not(a):not(b) > b`
|
|
||||||
|
|
||||||
// The NodeList of matching elements
|
|
||||||
var missingCoverageElements = document.querySelectorAll(selector);
|
|
||||||
|
|
||||||
var currentIndex;
|
|
||||||
|
|
||||||
function toggleClass(index) {
|
|
||||||
missingCoverageElements
|
|
||||||
.item(currentIndex)
|
|
||||||
.classList.remove('highlighted');
|
|
||||||
missingCoverageElements.item(index).classList.add('highlighted');
|
|
||||||
}
|
|
||||||
|
|
||||||
function makeCurrent(index) {
|
|
||||||
toggleClass(index);
|
|
||||||
currentIndex = index;
|
|
||||||
missingCoverageElements.item(index).scrollIntoView({
|
|
||||||
behavior: 'smooth',
|
|
||||||
block: 'center',
|
|
||||||
inline: 'center'
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function goToPrevious() {
|
|
||||||
var nextIndex = 0;
|
|
||||||
if (typeof currentIndex !== 'number' || currentIndex === 0) {
|
|
||||||
nextIndex = missingCoverageElements.length - 1;
|
|
||||||
} else if (missingCoverageElements.length > 1) {
|
|
||||||
nextIndex = currentIndex - 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
makeCurrent(nextIndex);
|
|
||||||
}
|
|
||||||
|
|
||||||
function goToNext() {
|
|
||||||
var nextIndex = 0;
|
|
||||||
|
|
||||||
if (
|
|
||||||
typeof currentIndex === 'number' &&
|
|
||||||
currentIndex < missingCoverageElements.length - 1
|
|
||||||
) {
|
|
||||||
nextIndex = currentIndex + 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
makeCurrent(nextIndex);
|
|
||||||
}
|
|
||||||
|
|
||||||
return function jump(event) {
|
|
||||||
if (
|
|
||||||
document.getElementById('fileSearch') === document.activeElement &&
|
|
||||||
document.activeElement != null
|
|
||||||
) {
|
|
||||||
// if we're currently focused on the search input, we don't want to navigate
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
switch (event.which) {
|
|
||||||
case 78: // n
|
|
||||||
case 74: // j
|
|
||||||
goToNext();
|
|
||||||
break;
|
|
||||||
case 66: // b
|
|
||||||
case 75: // k
|
|
||||||
case 80: // p
|
|
||||||
goToPrevious();
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
})();
|
|
||||||
window.addEventListener('keydown', jumpToCode);
|
|
||||||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
Before Width: | Height: | Size: 445 B |
@@ -1,431 +0,0 @@
|
|||||||
|
|
||||||
<!doctype html>
|
|
||||||
<html lang="en">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<title>Code coverage report for All files</title>
|
|
||||||
<meta charset="utf-8" />
|
|
||||||
<link rel="stylesheet" href="prettify.css" />
|
|
||||||
<link rel="stylesheet" href="base.css" />
|
|
||||||
<link rel="shortcut icon" type="image/x-icon" href="favicon.png" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
||||||
<style type='text/css'>
|
|
||||||
.coverage-summary .sorter {
|
|
||||||
background-image: url(sort-arrow-sprite.png);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<div class='wrapper'>
|
|
||||||
<div class='pad1'>
|
|
||||||
<h1>All files</h1>
|
|
||||||
<div class='clearfix'>
|
|
||||||
|
|
||||||
<div class='fl pad1y space-right2'>
|
|
||||||
<span class="strong">2.22% </span>
|
|
||||||
<span class="quiet">Statements</span>
|
|
||||||
<span class='fraction'>211/9491</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class='fl pad1y space-right2'>
|
|
||||||
<span class="strong">56.57% </span>
|
|
||||||
<span class="quiet">Branches</span>
|
|
||||||
<span class='fraction'>43/76</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class='fl pad1y space-right2'>
|
|
||||||
<span class="strong">23.25% </span>
|
|
||||||
<span class="quiet">Functions</span>
|
|
||||||
<span class='fraction'>10/43</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class='fl pad1y space-right2'>
|
|
||||||
<span class="strong">2.22% </span>
|
|
||||||
<span class="quiet">Lines</span>
|
|
||||||
<span class='fraction'>211/9491</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<p class="quiet">
|
|
||||||
Press <em>n</em> or <em>j</em> to go to the next uncovered block, <em>b</em>, <em>p</em> or <em>k</em> for the previous block.
|
|
||||||
</p>
|
|
||||||
<template id="filterTemplate">
|
|
||||||
<div class="quiet">
|
|
||||||
Filter:
|
|
||||||
<input type="search" id="fileSearch">
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
<div class='status-line low'></div>
|
|
||||||
<div class="pad1">
|
|
||||||
<table class="coverage-summary">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th data-col="file" data-fmt="html" data-html="true" class="file">File</th>
|
|
||||||
<th data-col="pic" data-type="number" data-fmt="html" data-html="true" class="pic"></th>
|
|
||||||
<th data-col="statements" data-type="number" data-fmt="pct" class="pct">Statements</th>
|
|
||||||
<th data-col="statements_raw" data-type="number" data-fmt="html" class="abs"></th>
|
|
||||||
<th data-col="branches" data-type="number" data-fmt="pct" class="pct">Branches</th>
|
|
||||||
<th data-col="branches_raw" data-type="number" data-fmt="html" class="abs"></th>
|
|
||||||
<th data-col="functions" data-type="number" data-fmt="pct" class="pct">Functions</th>
|
|
||||||
<th data-col="functions_raw" data-type="number" data-fmt="html" class="abs"></th>
|
|
||||||
<th data-col="lines" data-type="number" data-fmt="pct" class="pct">Lines</th>
|
|
||||||
<th data-col="lines_raw" data-type="number" data-fmt="html" class="abs"></th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody><tr>
|
|
||||||
<td class="file low" data-value="finance"><a href="finance/index.html">finance</a></td>
|
|
||||||
<td data-value="0" class="pic low">
|
|
||||||
<div class="chart"><div class="cover-fill" style="width: 0%"></div><div class="cover-empty" style="width: 100%"></div></div>
|
|
||||||
</td>
|
|
||||||
<td data-value="0" class="pct low">0%</td>
|
|
||||||
<td data-value="24" class="abs low">0/24</td>
|
|
||||||
<td data-value="50" class="pct medium">50%</td>
|
|
||||||
<td data-value="2" class="abs medium">1/2</td>
|
|
||||||
<td data-value="50" class="pct medium">50%</td>
|
|
||||||
<td data-value="2" class="abs medium">1/2</td>
|
|
||||||
<td data-value="0" class="pct low">0%</td>
|
|
||||||
<td data-value="24" class="abs low">0/24</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td class="file low" data-value="finance/.astro"><a href="finance/.astro/index.html">finance/.astro</a></td>
|
|
||||||
<td data-value="0" class="pic low">
|
|
||||||
<div class="chart"><div class="cover-fill" style="width: 0%"></div><div class="cover-empty" style="width: 100%"></div></div>
|
|
||||||
</td>
|
|
||||||
<td data-value="0" class="pct low">0%</td>
|
|
||||||
<td data-value="2" class="abs low">0/2</td>
|
|
||||||
<td data-value="0" class="pct low">0%</td>
|
|
||||||
<td data-value="2" class="abs low">0/2</td>
|
|
||||||
<td data-value="0" class="pct low">0%</td>
|
|
||||||
<td data-value="2" class="abs low">0/2</td>
|
|
||||||
<td data-value="0" class="pct low">0%</td>
|
|
||||||
<td data-value="2" class="abs low">0/2</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td class="file low" data-value="finance/dist/_worker.js"><a href="finance/dist/_worker.js/index.html">finance/dist/_worker.js</a></td>
|
|
||||||
<td data-value="0" class="pic low">
|
|
||||||
<div class="chart"><div class="cover-fill" style="width: 0%"></div><div class="cover-empty" style="width: 100%"></div></div>
|
|
||||||
</td>
|
|
||||||
<td data-value="0" class="pct low">0%</td>
|
|
||||||
<td data-value="58" class="abs low">0/58</td>
|
|
||||||
<td data-value="0" class="pct low">0%</td>
|
|
||||||
<td data-value="5" class="abs low">0/5</td>
|
|
||||||
<td data-value="0" class="pct low">0%</td>
|
|
||||||
<td data-value="5" class="abs low">0/5</td>
|
|
||||||
<td data-value="0" class="pct low">0%</td>
|
|
||||||
<td data-value="58" class="abs low">0/58</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td class="file low" data-value="finance/dist/_worker.js/chunks"><a href="finance/dist/_worker.js/chunks/index.html">finance/dist/_worker.js/chunks</a></td>
|
|
||||||
<td data-value="0" class="pic low">
|
|
||||||
<div class="chart"><div class="cover-fill" style="width: 0%"></div><div class="cover-empty" style="width: 100%"></div></div>
|
|
||||||
</td>
|
|
||||||
<td data-value="0" class="pct low">0%</td>
|
|
||||||
<td data-value="5297" class="abs low">0/5297</td>
|
|
||||||
<td data-value="0" class="pct low">0%</td>
|
|
||||||
<td data-value="7" class="abs low">0/7</td>
|
|
||||||
<td data-value="0" class="pct low">0%</td>
|
|
||||||
<td data-value="7" class="abs low">0/7</td>
|
|
||||||
<td data-value="0" class="pct low">0%</td>
|
|
||||||
<td data-value="5297" class="abs low">0/5297</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td class="file low" data-value="finance/dist/_worker.js/chunks/astro"><a href="finance/dist/_worker.js/chunks/astro/index.html">finance/dist/_worker.js/chunks/astro</a></td>
|
|
||||||
<td data-value="0" class="pic low">
|
|
||||||
<div class="chart"><div class="cover-fill" style="width: 0%"></div><div class="cover-empty" style="width: 100%"></div></div>
|
|
||||||
</td>
|
|
||||||
<td data-value="0" class="pct low">0%</td>
|
|
||||||
<td data-value="2792" class="abs low">0/2792</td>
|
|
||||||
<td data-value="0" class="pct low">0%</td>
|
|
||||||
<td data-value="1" class="abs low">0/1</td>
|
|
||||||
<td data-value="0" class="pct low">0%</td>
|
|
||||||
<td data-value="1" class="abs low">0/1</td>
|
|
||||||
<td data-value="0" class="pct low">0%</td>
|
|
||||||
<td data-value="2792" class="abs low">0/2792</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td class="file low" data-value="finance/dist/_worker.js/pages"><a href="finance/dist/_worker.js/pages/index.html">finance/dist/_worker.js/pages</a></td>
|
|
||||||
<td data-value="0" class="pic low">
|
|
||||||
<div class="chart"><div class="cover-fill" style="width: 0%"></div><div class="cover-empty" style="width: 100%"></div></div>
|
|
||||||
</td>
|
|
||||||
<td data-value="0" class="pct low">0%</td>
|
|
||||||
<td data-value="123" class="abs low">0/123</td>
|
|
||||||
<td data-value="0" class="pct low">0%</td>
|
|
||||||
<td data-value="2" class="abs low">0/2</td>
|
|
||||||
<td data-value="0" class="pct low">0%</td>
|
|
||||||
<td data-value="2" class="abs low">0/2</td>
|
|
||||||
<td data-value="0" class="pct low">0%</td>
|
|
||||||
<td data-value="123" class="abs low">0/123</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td class="file low" data-value="finance/dist/_worker.js/pages/api"><a href="finance/dist/_worker.js/pages/api/index.html">finance/dist/_worker.js/pages/api</a></td>
|
|
||||||
<td data-value="0" class="pic low">
|
|
||||||
<div class="chart"><div class="cover-fill" style="width: 0%"></div><div class="cover-empty" style="width: 100%"></div></div>
|
|
||||||
</td>
|
|
||||||
<td data-value="0" class="pct low">0%</td>
|
|
||||||
<td data-value="61" class="abs low">0/61</td>
|
|
||||||
<td data-value="0" class="pct low">0%</td>
|
|
||||||
<td data-value="2" class="abs low">0/2</td>
|
|
||||||
<td data-value="0" class="pct low">0%</td>
|
|
||||||
<td data-value="2" class="abs low">0/2</td>
|
|
||||||
<td data-value="0" class="pct low">0%</td>
|
|
||||||
<td data-value="61" class="abs low">0/61</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td class="file low" data-value="finance/dist/_worker.js/pages/api/accounts"><a href="finance/dist/_worker.js/pages/api/accounts/index.html">finance/dist/_worker.js/pages/api/accounts</a></td>
|
|
||||||
<td data-value="0" class="pic low">
|
|
||||||
<div class="chart"><div class="cover-fill" style="width: 0%"></div><div class="cover-empty" style="width: 100%"></div></div>
|
|
||||||
</td>
|
|
||||||
<td data-value="0" class="pct low">0%</td>
|
|
||||||
<td data-value="25" class="abs low">0/25</td>
|
|
||||||
<td data-value="0" class="pct low">0%</td>
|
|
||||||
<td data-value="1" class="abs low">0/1</td>
|
|
||||||
<td data-value="0" class="pct low">0%</td>
|
|
||||||
<td data-value="1" class="abs low">0/1</td>
|
|
||||||
<td data-value="0" class="pct low">0%</td>
|
|
||||||
<td data-value="25" class="abs low">0/25</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td class="file low" data-value="finance/dist/_worker.js/pages/api/accounts/_id_"><a href="finance/dist/_worker.js/pages/api/accounts/_id_/index.html">finance/dist/_worker.js/pages/api/accounts/_id_</a></td>
|
|
||||||
<td data-value="0" class="pic low">
|
|
||||||
<div class="chart"><div class="cover-fill" style="width: 0%"></div><div class="cover-empty" style="width: 100%"></div></div>
|
|
||||||
</td>
|
|
||||||
<td data-value="0" class="pct low">0%</td>
|
|
||||||
<td data-value="19" class="abs low">0/19</td>
|
|
||||||
<td data-value="0" class="pct low">0%</td>
|
|
||||||
<td data-value="1" class="abs low">0/1</td>
|
|
||||||
<td data-value="0" class="pct low">0%</td>
|
|
||||||
<td data-value="1" class="abs low">0/1</td>
|
|
||||||
<td data-value="0" class="pct low">0%</td>
|
|
||||||
<td data-value="19" class="abs low">0/19</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td class="file low" data-value="finance/dist/_worker.js/pages/api/transactions"><a href="finance/dist/_worker.js/pages/api/transactions/index.html">finance/dist/_worker.js/pages/api/transactions</a></td>
|
|
||||||
<td data-value="0" class="pic low">
|
|
||||||
<div class="chart"><div class="cover-fill" style="width: 0%"></div><div class="cover-empty" style="width: 100%"></div></div>
|
|
||||||
</td>
|
|
||||||
<td data-value="0" class="pct low">0%</td>
|
|
||||||
<td data-value="102" class="abs low">0/102</td>
|
|
||||||
<td data-value="0" class="pct low">0%</td>
|
|
||||||
<td data-value="1" class="abs low">0/1</td>
|
|
||||||
<td data-value="0" class="pct low">0%</td>
|
|
||||||
<td data-value="1" class="abs low">0/1</td>
|
|
||||||
<td data-value="0" class="pct low">0%</td>
|
|
||||||
<td data-value="102" class="abs low">0/102</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td class="file low" data-value="finance/src"><a href="finance/src/index.html">finance/src</a></td>
|
|
||||||
<td data-value="0" class="pic low">
|
|
||||||
<div class="chart"><div class="cover-fill" style="width: 0%"></div><div class="cover-empty" style="width: 100%"></div></div>
|
|
||||||
</td>
|
|
||||||
<td data-value="0" class="pct low">0%</td>
|
|
||||||
<td data-value="14" class="abs low">0/14</td>
|
|
||||||
<td data-value="100" class="pct high">100%</td>
|
|
||||||
<td data-value="2" class="abs high">2/2</td>
|
|
||||||
<td data-value="100" class="pct high">100%</td>
|
|
||||||
<td data-value="2" class="abs high">2/2</td>
|
|
||||||
<td data-value="0" class="pct low">0%</td>
|
|
||||||
<td data-value="14" class="abs low">0/14</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td class="file low" data-value="finance/src/components"><a href="finance/src/components/index.html">finance/src/components</a></td>
|
|
||||||
<td data-value="0" class="pic low">
|
|
||||||
<div class="chart"><div class="cover-fill" style="width: 0%"></div><div class="cover-empty" style="width: 100%"></div></div>
|
|
||||||
</td>
|
|
||||||
<td data-value="0" class="pct low">0%</td>
|
|
||||||
<td data-value="560" class="abs low">0/560</td>
|
|
||||||
<td data-value="0" class="pct low">0%</td>
|
|
||||||
<td data-value="7" class="abs low">0/7</td>
|
|
||||||
<td data-value="0" class="pct low">0%</td>
|
|
||||||
<td data-value="7" class="abs low">0/7</td>
|
|
||||||
<td data-value="0" class="pct low">0%</td>
|
|
||||||
<td data-value="560" class="abs low">0/560</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td class="file high" data-value="finance/src/data"><a href="finance/src/data/index.html">finance/src/data</a></td>
|
|
||||||
<td data-value="100" class="pic high">
|
|
||||||
<div class="chart"><div class="cover-fill cover-full" style="width: 100%"></div><div class="cover-empty" style="width: 0%"></div></div>
|
|
||||||
</td>
|
|
||||||
<td data-value="100" class="pct high">100%</td>
|
|
||||||
<td data-value="37" class="abs high">37/37</td>
|
|
||||||
<td data-value="100" class="pct high">100%</td>
|
|
||||||
<td data-value="0" class="abs high">0/0</td>
|
|
||||||
<td data-value="100" class="pct high">100%</td>
|
|
||||||
<td data-value="0" class="abs high">0/0</td>
|
|
||||||
<td data-value="100" class="pct high">100%</td>
|
|
||||||
<td data-value="37" class="abs high">37/37</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td class="file low" data-value="finance/src/layouts"><a href="finance/src/layouts/index.html">finance/src/layouts</a></td>
|
|
||||||
<td data-value="0" class="pic low">
|
|
||||||
<div class="chart"><div class="cover-fill" style="width: 0%"></div><div class="cover-empty" style="width: 100%"></div></div>
|
|
||||||
</td>
|
|
||||||
<td data-value="0" class="pct low">0%</td>
|
|
||||||
<td data-value="31" class="abs low">0/31</td>
|
|
||||||
<td data-value="0" class="pct low">0%</td>
|
|
||||||
<td data-value="1" class="abs low">0/1</td>
|
|
||||||
<td data-value="0" class="pct low">0%</td>
|
|
||||||
<td data-value="1" class="abs low">0/1</td>
|
|
||||||
<td data-value="0" class="pct low">0%</td>
|
|
||||||
<td data-value="31" class="abs low">0/31</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td class="file low" data-value="finance/src/pages"><a href="finance/src/pages/index.html">finance/src/pages</a></td>
|
|
||||||
<td data-value="0" class="pic low">
|
|
||||||
<div class="chart"><div class="cover-fill" style="width: 0%"></div><div class="cover-empty" style="width: 100%"></div></div>
|
|
||||||
</td>
|
|
||||||
<td data-value="0" class="pct low">0%</td>
|
|
||||||
<td data-value="155" class="abs low">0/155</td>
|
|
||||||
<td data-value="0" class="pct low">0%</td>
|
|
||||||
<td data-value="1" class="abs low">0/1</td>
|
|
||||||
<td data-value="0" class="pct low">0%</td>
|
|
||||||
<td data-value="1" class="abs low">0/1</td>
|
|
||||||
<td data-value="0" class="pct low">0%</td>
|
|
||||||
<td data-value="155" class="abs low">0/155</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td class="file high" data-value="finance/src/pages/api/accounts"><a href="finance/src/pages/api/accounts/index.html">finance/src/pages/api/accounts</a></td>
|
|
||||||
<td data-value="100" class="pic high">
|
|
||||||
<div class="chart"><div class="cover-fill cover-full" style="width: 100%"></div><div class="cover-empty" style="width: 0%"></div></div>
|
|
||||||
</td>
|
|
||||||
<td data-value="100" class="pct high">100%</td>
|
|
||||||
<td data-value="9" class="abs high">9/9</td>
|
|
||||||
<td data-value="100" class="pct high">100%</td>
|
|
||||||
<td data-value="1" class="abs high">1/1</td>
|
|
||||||
<td data-value="100" class="pct high">100%</td>
|
|
||||||
<td data-value="1" class="abs high">1/1</td>
|
|
||||||
<td data-value="100" class="pct high">100%</td>
|
|
||||||
<td data-value="9" class="abs high">9/9</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td class="file high" data-value="finance/src/pages/api/accounts/[id]"><a href="finance/src/pages/api/accounts/[id]/index.html">finance/src/pages/api/accounts/[id]</a></td>
|
|
||||||
<td data-value="100" class="pic high">
|
|
||||||
<div class="chart"><div class="cover-fill cover-full" style="width: 100%"></div><div class="cover-empty" style="width: 0%"></div></div>
|
|
||||||
</td>
|
|
||||||
<td data-value="100" class="pct high">100%</td>
|
|
||||||
<td data-value="18" class="abs high">18/18</td>
|
|
||||||
<td data-value="100" class="pct high">100%</td>
|
|
||||||
<td data-value="3" class="abs high">3/3</td>
|
|
||||||
<td data-value="100" class="pct high">100%</td>
|
|
||||||
<td data-value="1" class="abs high">1/1</td>
|
|
||||||
<td data-value="100" class="pct high">100%</td>
|
|
||||||
<td data-value="18" class="abs high">18/18</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td class="file high" data-value="finance/src/pages/api/accounts/[id]/transactions"><a href="finance/src/pages/api/accounts/[id]/transactions/index.html">finance/src/pages/api/accounts/[id]/transactions</a></td>
|
|
||||||
<td data-value="100" class="pic high">
|
|
||||||
<div class="chart"><div class="cover-fill cover-full" style="width: 100%"></div><div class="cover-empty" style="width: 0%"></div></div>
|
|
||||||
</td>
|
|
||||||
<td data-value="100" class="pct high">100%</td>
|
|
||||||
<td data-value="12" class="abs high">12/12</td>
|
|
||||||
<td data-value="100" class="pct high">100%</td>
|
|
||||||
<td data-value="2" class="abs high">2/2</td>
|
|
||||||
<td data-value="100" class="pct high">100%</td>
|
|
||||||
<td data-value="1" class="abs high">1/1</td>
|
|
||||||
<td data-value="100" class="pct high">100%</td>
|
|
||||||
<td data-value="12" class="abs high">12/12</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td class="file high" data-value="finance/src/pages/api/transactions"><a href="finance/src/pages/api/transactions/index.html">finance/src/pages/api/transactions</a></td>
|
|
||||||
<td data-value="100" class="pic high">
|
|
||||||
<div class="chart"><div class="cover-fill cover-full" style="width: 100%"></div><div class="cover-empty" style="width: 0%"></div></div>
|
|
||||||
</td>
|
|
||||||
<td data-value="100" class="pct high">100%</td>
|
|
||||||
<td data-value="42" class="abs high">42/42</td>
|
|
||||||
<td data-value="100" class="pct high">100%</td>
|
|
||||||
<td data-value="8" class="abs high">8/8</td>
|
|
||||||
<td data-value="100" class="pct high">100%</td>
|
|
||||||
<td data-value="1" class="abs high">1/1</td>
|
|
||||||
<td data-value="100" class="pct high">100%</td>
|
|
||||||
<td data-value="42" class="abs high">42/42</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td class="file high" data-value="finance/src/pages/api/transactions/[id]"><a href="finance/src/pages/api/transactions/[id]/index.html">finance/src/pages/api/transactions/[id]</a></td>
|
|
||||||
<td data-value="100" class="pic high">
|
|
||||||
<div class="chart"><div class="cover-fill cover-full" style="width: 100%"></div><div class="cover-empty" style="width: 0%"></div></div>
|
|
||||||
</td>
|
|
||||||
<td data-value="100" class="pct high">100%</td>
|
|
||||||
<td data-value="93" class="abs high">93/93</td>
|
|
||||||
<td data-value="100" class="pct high">100%</td>
|
|
||||||
<td data-value="25" class="abs high">25/25</td>
|
|
||||||
<td data-value="100" class="pct high">100%</td>
|
|
||||||
<td data-value="2" class="abs high">2/2</td>
|
|
||||||
<td data-value="100" class="pct high">100%</td>
|
|
||||||
<td data-value="93" class="abs high">93/93</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td class="file low" data-value="finance/src/stores"><a href="finance/src/stores/index.html">finance/src/stores</a></td>
|
|
||||||
<td data-value="0" class="pic low">
|
|
||||||
<div class="chart"><div class="cover-fill" style="width: 0%"></div><div class="cover-empty" style="width: 100%"></div></div>
|
|
||||||
</td>
|
|
||||||
<td data-value="0" class="pct low">0%</td>
|
|
||||||
<td data-value="17" class="abs low">0/17</td>
|
|
||||||
<td data-value="0" class="pct low">0%</td>
|
|
||||||
<td data-value="1" class="abs low">0/1</td>
|
|
||||||
<td data-value="0" class="pct low">0%</td>
|
|
||||||
<td data-value="1" class="abs low">0/1</td>
|
|
||||||
<td data-value="0" class="pct low">0%</td>
|
|
||||||
<td data-value="17" class="abs low">0/17</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td class="file empty" data-value="finance/src/types"><a href="finance/src/types/index.html">finance/src/types</a></td>
|
|
||||||
<td data-value="0" class="pic empty">
|
|
||||||
<div class="chart"><div class="cover-fill" style="width: 0%"></div><div class="cover-empty" style="width: 100%"></div></div>
|
|
||||||
</td>
|
|
||||||
<td data-value="0" class="pct empty">0%</td>
|
|
||||||
<td data-value="0" class="abs empty">0/0</td>
|
|
||||||
<td data-value="0" class="pct empty">0%</td>
|
|
||||||
<td data-value="1" class="abs empty">1/1</td>
|
|
||||||
<td data-value="0" class="pct empty">0%</td>
|
|
||||||
<td data-value="1" class="abs empty">1/1</td>
|
|
||||||
<td data-value="0" class="pct empty">0%</td>
|
|
||||||
<td data-value="0" class="abs empty">0/0</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
<div class='push'></div><!-- for sticky footer -->
|
|
||||||
</div><!-- /wrapper -->
|
|
||||||
<div class='footer quiet pad2 space-top1 center small'>
|
|
||||||
Code coverage generated by
|
|
||||||
<a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
|
|
||||||
at 2025-04-24T19:21:13.627Z
|
|
||||||
</div>
|
|
||||||
<script src="prettify.js"></script>
|
|
||||||
<script>
|
|
||||||
window.onload = function () {
|
|
||||||
prettyPrint();
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<script src="sorter.js"></script>
|
|
||||||
<script src="block-navigation.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
.pln{color:#000}@media screen{.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.pun,.opn,.clo{color:#660}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.str{color:#060}.kwd{color:#006;font-weight:bold}.com{color:#600;font-style:italic}.typ{color:#404;font-weight:bold}.lit{color:#044}.pun,.opn,.clo{color:#440}.tag{color:#006;font-weight:bold}.atn{color:#404}.atv{color:#060}}pre.prettyprint{padding:2px;border:1px solid #888}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee}
|
|
||||||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
Before Width: | Height: | Size: 138 B |
@@ -1,196 +0,0 @@
|
|||||||
/* eslint-disable */
|
|
||||||
var addSorting = (function() {
|
|
||||||
'use strict';
|
|
||||||
var cols,
|
|
||||||
currentSort = {
|
|
||||||
index: 0,
|
|
||||||
desc: false
|
|
||||||
};
|
|
||||||
|
|
||||||
// returns the summary table element
|
|
||||||
function getTable() {
|
|
||||||
return document.querySelector('.coverage-summary');
|
|
||||||
}
|
|
||||||
// returns the thead element of the summary table
|
|
||||||
function getTableHeader() {
|
|
||||||
return getTable().querySelector('thead tr');
|
|
||||||
}
|
|
||||||
// returns the tbody element of the summary table
|
|
||||||
function getTableBody() {
|
|
||||||
return getTable().querySelector('tbody');
|
|
||||||
}
|
|
||||||
// returns the th element for nth column
|
|
||||||
function getNthColumn(n) {
|
|
||||||
return getTableHeader().querySelectorAll('th')[n];
|
|
||||||
}
|
|
||||||
|
|
||||||
function onFilterInput() {
|
|
||||||
const searchValue = document.getElementById('fileSearch').value;
|
|
||||||
const rows = document.getElementsByTagName('tbody')[0].children;
|
|
||||||
for (let i = 0; i < rows.length; i++) {
|
|
||||||
const row = rows[i];
|
|
||||||
if (
|
|
||||||
row.textContent
|
|
||||||
.toLowerCase()
|
|
||||||
.includes(searchValue.toLowerCase())
|
|
||||||
) {
|
|
||||||
row.style.display = '';
|
|
||||||
} else {
|
|
||||||
row.style.display = 'none';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// loads the search box
|
|
||||||
function addSearchBox() {
|
|
||||||
var template = document.getElementById('filterTemplate');
|
|
||||||
var templateClone = template.content.cloneNode(true);
|
|
||||||
templateClone.getElementById('fileSearch').oninput = onFilterInput;
|
|
||||||
template.parentElement.appendChild(templateClone);
|
|
||||||
}
|
|
||||||
|
|
||||||
// loads all columns
|
|
||||||
function loadColumns() {
|
|
||||||
var colNodes = getTableHeader().querySelectorAll('th'),
|
|
||||||
colNode,
|
|
||||||
cols = [],
|
|
||||||
col,
|
|
||||||
i;
|
|
||||||
|
|
||||||
for (i = 0; i < colNodes.length; i += 1) {
|
|
||||||
colNode = colNodes[i];
|
|
||||||
col = {
|
|
||||||
key: colNode.getAttribute('data-col'),
|
|
||||||
sortable: !colNode.getAttribute('data-nosort'),
|
|
||||||
type: colNode.getAttribute('data-type') || 'string'
|
|
||||||
};
|
|
||||||
cols.push(col);
|
|
||||||
if (col.sortable) {
|
|
||||||
col.defaultDescSort = col.type === 'number';
|
|
||||||
colNode.innerHTML =
|
|
||||||
colNode.innerHTML + '<span class="sorter"></span>';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return cols;
|
|
||||||
}
|
|
||||||
// attaches a data attribute to every tr element with an object
|
|
||||||
// of data values keyed by column name
|
|
||||||
function loadRowData(tableRow) {
|
|
||||||
var tableCols = tableRow.querySelectorAll('td'),
|
|
||||||
colNode,
|
|
||||||
col,
|
|
||||||
data = {},
|
|
||||||
i,
|
|
||||||
val;
|
|
||||||
for (i = 0; i < tableCols.length; i += 1) {
|
|
||||||
colNode = tableCols[i];
|
|
||||||
col = cols[i];
|
|
||||||
val = colNode.getAttribute('data-value');
|
|
||||||
if (col.type === 'number') {
|
|
||||||
val = Number(val);
|
|
||||||
}
|
|
||||||
data[col.key] = val;
|
|
||||||
}
|
|
||||||
return data;
|
|
||||||
}
|
|
||||||
// loads all row data
|
|
||||||
function loadData() {
|
|
||||||
var rows = getTableBody().querySelectorAll('tr'),
|
|
||||||
i;
|
|
||||||
|
|
||||||
for (i = 0; i < rows.length; i += 1) {
|
|
||||||
rows[i].data = loadRowData(rows[i]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// sorts the table using the data for the ith column
|
|
||||||
function sortByIndex(index, desc) {
|
|
||||||
var key = cols[index].key,
|
|
||||||
sorter = function(a, b) {
|
|
||||||
a = a.data[key];
|
|
||||||
b = b.data[key];
|
|
||||||
return a < b ? -1 : a > b ? 1 : 0;
|
|
||||||
},
|
|
||||||
finalSorter = sorter,
|
|
||||||
tableBody = document.querySelector('.coverage-summary tbody'),
|
|
||||||
rowNodes = tableBody.querySelectorAll('tr'),
|
|
||||||
rows = [],
|
|
||||||
i;
|
|
||||||
|
|
||||||
if (desc) {
|
|
||||||
finalSorter = function(a, b) {
|
|
||||||
return -1 * sorter(a, b);
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
for (i = 0; i < rowNodes.length; i += 1) {
|
|
||||||
rows.push(rowNodes[i]);
|
|
||||||
tableBody.removeChild(rowNodes[i]);
|
|
||||||
}
|
|
||||||
|
|
||||||
rows.sort(finalSorter);
|
|
||||||
|
|
||||||
for (i = 0; i < rows.length; i += 1) {
|
|
||||||
tableBody.appendChild(rows[i]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// removes sort indicators for current column being sorted
|
|
||||||
function removeSortIndicators() {
|
|
||||||
var col = getNthColumn(currentSort.index),
|
|
||||||
cls = col.className;
|
|
||||||
|
|
||||||
cls = cls.replace(/ sorted$/, '').replace(/ sorted-desc$/, '');
|
|
||||||
col.className = cls;
|
|
||||||
}
|
|
||||||
// adds sort indicators for current column being sorted
|
|
||||||
function addSortIndicators() {
|
|
||||||
getNthColumn(currentSort.index).className += currentSort.desc
|
|
||||||
? ' sorted-desc'
|
|
||||||
: ' sorted';
|
|
||||||
}
|
|
||||||
// adds event listeners for all sorter widgets
|
|
||||||
function enableUI() {
|
|
||||||
var i,
|
|
||||||
el,
|
|
||||||
ithSorter = function ithSorter(i) {
|
|
||||||
var col = cols[i];
|
|
||||||
|
|
||||||
return function() {
|
|
||||||
var desc = col.defaultDescSort;
|
|
||||||
|
|
||||||
if (currentSort.index === i) {
|
|
||||||
desc = !currentSort.desc;
|
|
||||||
}
|
|
||||||
sortByIndex(i, desc);
|
|
||||||
removeSortIndicators();
|
|
||||||
currentSort.index = i;
|
|
||||||
currentSort.desc = desc;
|
|
||||||
addSortIndicators();
|
|
||||||
};
|
|
||||||
};
|
|
||||||
for (i = 0; i < cols.length; i += 1) {
|
|
||||||
if (cols[i].sortable) {
|
|
||||||
// add the click event handler on the th so users
|
|
||||||
// dont have to click on those tiny arrows
|
|
||||||
el = getNthColumn(i).querySelector('.sorter').parentElement;
|
|
||||||
if (el.addEventListener) {
|
|
||||||
el.addEventListener('click', ithSorter(i));
|
|
||||||
} else {
|
|
||||||
el.attachEvent('onclick', ithSorter(i));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// adds sorting functionality to the UI
|
|
||||||
return function() {
|
|
||||||
if (!getTable()) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
cols = loadColumns();
|
|
||||||
loadData();
|
|
||||||
addSearchBox();
|
|
||||||
addSortIndicators();
|
|
||||||
enableUI();
|
|
||||||
};
|
|
||||||
})();
|
|
||||||
|
|
||||||
window.addEventListener('load', addSorting);
|
|
||||||
894
package-lock.json
generated
894
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
10
package.json
10
package.json
@@ -7,7 +7,8 @@
|
|||||||
"build": "astro build",
|
"build": "astro build",
|
||||||
"preview": "astro preview",
|
"preview": "astro preview",
|
||||||
"astro": "astro",
|
"astro": "astro",
|
||||||
"test": "vitest",
|
"test": "vitest run",
|
||||||
|
"test:watch": "vitest",
|
||||||
"test:coverage": "vitest run --coverage",
|
"test:coverage": "vitest run --coverage",
|
||||||
"format": "biome format --write .",
|
"format": "biome format --write .",
|
||||||
"lint": "biome lint .",
|
"lint": "biome lint .",
|
||||||
@@ -27,8 +28,13 @@
|
|||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@biomejs/biome": "^1.9.4",
|
"@biomejs/biome": "^1.9.4",
|
||||||
|
"@testing-library/dom": "^10.4.0",
|
||||||
|
"@testing-library/jest-dom": "^6.6.3",
|
||||||
|
"@testing-library/react": "^16.3.0",
|
||||||
"@types/supertest": "^6.0.3",
|
"@types/supertest": "^6.0.3",
|
||||||
"@vitest/coverage-v8": "^3.1.2",
|
"@vitejs/plugin-react": "^4.4.1",
|
||||||
|
"@vitest/coverage-v8": "^3.1.3",
|
||||||
|
"jsdom": "^26.1.0",
|
||||||
"supertest": "^7.1.0",
|
"supertest": "^7.1.0",
|
||||||
"vitest": "^3.1.2",
|
"vitest": "^3.1.2",
|
||||||
"wrangler": "^4.13.1"
|
"wrangler": "^4.13.1"
|
||||||
|
|||||||
@@ -1,12 +1,9 @@
|
|||||||
import { useStore } from '@nanostores/react';
|
import { useStore } from '@nanostores/react';
|
||||||
import type React from 'react';
|
|
||||||
import { useEffect, useState } from 'react';
|
import { useEffect, useState } from 'react';
|
||||||
import { currentAccountId as currentAccountIdStore, refreshKey } from '../stores/transactionStore';
|
import { currentAccountId as currentAccountIdStore, refreshKey } from '../stores/transactionStore';
|
||||||
import type { Account } from '../types';
|
import type { Account } from '../types';
|
||||||
import { formatCurrency } from '../utils';
|
import { formatCurrency } from '../utils';
|
||||||
|
|
||||||
type AccountSummaryProps = {};
|
|
||||||
|
|
||||||
export default function AccountSummary() {
|
export default function AccountSummary() {
|
||||||
const currentAccountId = useStore(currentAccountIdStore);
|
const currentAccountId = useStore(currentAccountIdStore);
|
||||||
const refreshCounter = useStore(refreshKey);
|
const refreshCounter = useStore(refreshKey);
|
||||||
@@ -16,7 +13,7 @@ export default function AccountSummary() {
|
|||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!currentAccountId) {
|
if (!currentAccountId) {
|
||||||
setAccount(null); // Clear account details if no account selected
|
setAccount(null);
|
||||||
setError(null);
|
setError(null);
|
||||||
setIsLoading(false);
|
setIsLoading(false);
|
||||||
return;
|
return;
|
||||||
@@ -40,30 +37,31 @@ export default function AccountSummary() {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// Add a small delay to ensure the API has processed any changes
|
||||||
|
const timeoutId = setTimeout(() => {
|
||||||
fetchDetails();
|
fetchDetails();
|
||||||
}, [currentAccountId]);
|
}, 100);
|
||||||
|
|
||||||
// Determine content based on state
|
return () => clearTimeout(timeoutId);
|
||||||
let balanceContent: React.ReactNode;
|
}, [currentAccountId, refreshCounter]); // Dependent on both account ID and refresh counter
|
||||||
|
|
||||||
|
let balanceContent = null;
|
||||||
if (isLoading) {
|
if (isLoading) {
|
||||||
balanceContent = <span className="loading-inline">Loading...</span>;
|
balanceContent = <span className="loading-inline">Loading...</span>;
|
||||||
} else if (error) {
|
} else if (error) {
|
||||||
balanceContent = <span className="error-message">Error</span>;
|
balanceContent = <span className="error-message">Error: {error}</span>;
|
||||||
} else if (account) {
|
} else if (account) {
|
||||||
balanceContent = formatCurrency(account.balance);
|
balanceContent = formatCurrency(account.balance);
|
||||||
} else {
|
} else {
|
||||||
balanceContent = 'N/A'; // Or some placeholder
|
balanceContent = 'N/A';
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="account-summary">
|
<div className="account-summary">
|
||||||
<h4>Account Summary</h4>
|
<h4>Account Summary</h4>
|
||||||
{/* Keep the ID for potential external manipulation if needed, though ideally not */}
|
|
||||||
<p>
|
<p>
|
||||||
Balance: <span id="account-balance">{balanceContent}</span>
|
Balance: <span id="account-balance">{balanceContent}</span>
|
||||||
</p>
|
</p>
|
||||||
{/* Display error details if needed */}
|
|
||||||
{/* {error && <small className="error-message">{error}</small>} */}
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -7,6 +7,7 @@ import {
|
|||||||
currentAccountId as currentAccountIdStore,
|
currentAccountId as currentAccountIdStore,
|
||||||
transactionSaved,
|
transactionSaved,
|
||||||
transactionToEdit as transactionToEditStore,
|
transactionToEdit as transactionToEditStore,
|
||||||
|
triggerRefresh,
|
||||||
} from '../stores/transactionStore';
|
} from '../stores/transactionStore';
|
||||||
import type { Transaction } from '../types';
|
import type { Transaction } from '../types';
|
||||||
|
|
||||||
@@ -22,50 +23,52 @@ export default function AddTransactionForm() {
|
|||||||
const [editingId, setEditingId] = useState<string | null>(null);
|
const [editingId, setEditingId] = useState<string | null>(null);
|
||||||
const [isLoading, setIsLoading] = useState(false);
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
const [error, setError] = useState<string | null>(null);
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
const [successMessage, setSuccessMessage] = useState<string | null>(null);
|
||||||
|
|
||||||
const isEditMode = !!editingId;
|
const isEditMode = !!editingId;
|
||||||
|
|
||||||
// --- Effects ---
|
// --- Effects ---
|
||||||
// Effect to set default date on mount
|
// Effect to set default date on mount
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
// Only set default date if not editing
|
|
||||||
if (!transactionToEdit) {
|
if (!transactionToEdit) {
|
||||||
setDate(new Date().toISOString().split('T')[0]);
|
setDate(new Date().toISOString().split('T')[0]);
|
||||||
}
|
}
|
||||||
}, [transactionToEdit]); // Rerun if edit mode changes
|
}, [transactionToEdit]);
|
||||||
|
|
||||||
// Effect to populate form when editing
|
// Effect to populate form when editing
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (transactionToEdit) {
|
if (transactionToEdit) {
|
||||||
setEditingId(transactionToEdit.id);
|
setEditingId(transactionToEdit.id);
|
||||||
// Format date correctly for input type="date"
|
|
||||||
try {
|
try {
|
||||||
const dateObj = new Date(transactionToEdit.date);
|
const dateObj = new Date(transactionToEdit.date);
|
||||||
// Check if date is valid before formatting
|
|
||||||
if (!Number.isNaN(dateObj.getTime())) {
|
if (!Number.isNaN(dateObj.getTime())) {
|
||||||
// Directly format the date object (usually interpreted as UTC midnight)
|
|
||||||
// into the YYYY-MM-DD format required by the input.
|
|
||||||
// No timezone adjustment needed here.
|
|
||||||
setDate(dateObj.toISOString().split('T')[0]);
|
setDate(dateObj.toISOString().split('T')[0]);
|
||||||
} else {
|
} else {
|
||||||
console.warn('Invalid date received for editing:', transactionToEdit.date);
|
console.warn('Invalid date received for editing:', transactionToEdit.date);
|
||||||
setDate(''); // Set to empty if invalid
|
setDate('');
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.error('Error parsing date for editing:', e);
|
console.error('Error parsing date for editing:', e);
|
||||||
setDate(''); // Set to empty on error
|
setDate('');
|
||||||
}
|
}
|
||||||
setDescription(transactionToEdit.description);
|
setDescription(transactionToEdit.description);
|
||||||
setAmount(transactionToEdit.amount.toString());
|
setAmount(transactionToEdit.amount.toString());
|
||||||
setError(null); // Clear errors when starting edit
|
setError(null);
|
||||||
} else {
|
setSuccessMessage(null);
|
||||||
// Reset form if transactionToEdit becomes null (e.g., after saving or cancelling)
|
} else if (!isLoading) {
|
||||||
// but only if not already resetting via handleCancel or handleSubmit
|
|
||||||
if (!isLoading) {
|
|
||||||
resetForm();
|
resetForm();
|
||||||
}
|
}
|
||||||
|
}, [transactionToEdit, isLoading]);
|
||||||
|
|
||||||
|
// Clear success message after 5 seconds
|
||||||
|
useEffect(() => {
|
||||||
|
if (successMessage) {
|
||||||
|
const timer = setTimeout(() => {
|
||||||
|
setSuccessMessage(null);
|
||||||
|
}, 5000);
|
||||||
|
return () => clearTimeout(timer);
|
||||||
}
|
}
|
||||||
}, [transactionToEdit, isLoading]); // Add isLoading dependency
|
}, [successMessage]);
|
||||||
|
|
||||||
// --- Helper Functions ---
|
// --- Helper Functions ---
|
||||||
const resetForm = () => {
|
const resetForm = () => {
|
||||||
@@ -74,7 +77,7 @@ export default function AddTransactionForm() {
|
|||||||
setDescription('');
|
setDescription('');
|
||||||
setAmount('');
|
setAmount('');
|
||||||
setError(null);
|
setError(null);
|
||||||
// Don't reset isLoading here, it's handled in submit/cancel
|
setSuccessMessage(null);
|
||||||
};
|
};
|
||||||
|
|
||||||
const validateForm = (): string[] => {
|
const validateForm = (): string[] => {
|
||||||
@@ -96,7 +99,7 @@ export default function AddTransactionForm() {
|
|||||||
errors.push('Date is required');
|
errors.push('Date is required');
|
||||||
} else {
|
} else {
|
||||||
try {
|
try {
|
||||||
const dateObj = new Date(`${date}T00:00:00`); // Treat input as local date
|
const dateObj = new Date(`${date}T00:00:00`);
|
||||||
if (Number.isNaN(dateObj.getTime())) {
|
if (Number.isNaN(dateObj.getTime())) {
|
||||||
errors.push('Invalid date format');
|
errors.push('Invalid date format');
|
||||||
}
|
}
|
||||||
@@ -111,6 +114,7 @@ export default function AddTransactionForm() {
|
|||||||
const handleSubmit = async (e: React.FormEvent) => {
|
const handleSubmit = async (e: React.FormEvent) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
setError(null);
|
setError(null);
|
||||||
|
setSuccessMessage(null);
|
||||||
|
|
||||||
if (isLoading || !currentAccountId) {
|
if (isLoading || !currentAccountId) {
|
||||||
if (!currentAccountId) setError('No account selected.');
|
if (!currentAccountId) setError('No account selected.');
|
||||||
@@ -126,11 +130,9 @@ export default function AddTransactionForm() {
|
|||||||
setIsLoading(true);
|
setIsLoading(true);
|
||||||
|
|
||||||
try {
|
try {
|
||||||
// Ensure date is sent in a consistent format (e.g., YYYY-MM-DD)
|
|
||||||
// The API should handle parsing this.
|
|
||||||
const transactionData = {
|
const transactionData = {
|
||||||
accountId: currentAccountId,
|
accountId: currentAccountId,
|
||||||
date: date, // Send as YYYY-MM-DD string
|
date: date,
|
||||||
description: description.trim(),
|
description: description.trim(),
|
||||||
amount: Number.parseFloat(amount),
|
amount: Number.parseFloat(amount),
|
||||||
};
|
};
|
||||||
@@ -150,17 +152,39 @@ export default function AddTransactionForm() {
|
|||||||
const errorData = await response.json();
|
const errorData = await response.json();
|
||||||
errorMsg = errorData.error || errorMsg;
|
errorMsg = errorData.error || errorMsg;
|
||||||
} catch (jsonError) {
|
} catch (jsonError) {
|
||||||
// Ignore if response is not JSON
|
|
||||||
errorMsg = `${response.status}: ${response.statusText}`;
|
errorMsg = `${response.status}: ${response.statusText}`;
|
||||||
}
|
}
|
||||||
throw new Error(errorMsg);
|
throw new Error(errorMsg);
|
||||||
}
|
}
|
||||||
|
|
||||||
const savedTransaction: Transaction = await response.json();
|
const savedTransaction: Transaction = await response.json();
|
||||||
transactionSaved(savedTransaction); // Call store action instead of prop callback
|
|
||||||
resetForm(); // Reset form on success
|
// First notify about the saved transaction
|
||||||
|
transactionSaved(savedTransaction);
|
||||||
|
|
||||||
|
// Then explicitly trigger a refresh to ensure balance updates
|
||||||
|
triggerRefresh();
|
||||||
|
|
||||||
|
// Set success message before clearing form
|
||||||
|
setSuccessMessage(
|
||||||
|
isEditMode ? 'Transaction updated successfully' : 'Transaction created successfully',
|
||||||
|
);
|
||||||
|
|
||||||
|
// Only reset the form after the success message is shown
|
||||||
|
setTimeout(() => {
|
||||||
|
resetForm();
|
||||||
|
// Optionally collapse the form after success
|
||||||
|
const addTransactionSection = document.getElementById('add-transaction-section');
|
||||||
|
const toggleAddTxnBtn = document.getElementById('toggle-add-txn-btn');
|
||||||
|
if (addTransactionSection?.classList.contains('expanded')) {
|
||||||
|
addTransactionSection.classList.replace('expanded', 'collapsed');
|
||||||
|
toggleAddTxnBtn?.setAttribute('aria-expanded', 'false');
|
||||||
|
}
|
||||||
|
}, 2000);
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
setError(err instanceof Error ? err.message : 'An unexpected error occurred');
|
const errorMessage = err instanceof Error ? err.message : 'An unexpected error occurred';
|
||||||
|
setError(errorMessage);
|
||||||
|
setSuccessMessage(null);
|
||||||
} finally {
|
} finally {
|
||||||
setIsLoading(false);
|
setIsLoading(false);
|
||||||
}
|
}
|
||||||
@@ -168,14 +192,23 @@ export default function AddTransactionForm() {
|
|||||||
|
|
||||||
const handleCancel = () => {
|
const handleCancel = () => {
|
||||||
resetForm();
|
resetForm();
|
||||||
cancelEditingTransaction(); // Call store action instead of prop callback
|
cancelEditingTransaction();
|
||||||
};
|
};
|
||||||
|
|
||||||
// --- JSX ---
|
// --- JSX ---
|
||||||
return (
|
return (
|
||||||
<form id="add-transaction-form-react" onSubmit={handleSubmit} noValidate>
|
<form id="add-transaction-form-react" role="form" onSubmit={handleSubmit} noValidate>
|
||||||
<h4>{isEditMode ? 'Edit Transaction' : 'New Transaction'}</h4>
|
<h4>{isEditMode ? 'Edit Transaction' : 'New Transaction'}</h4>
|
||||||
{error && <div className="error-message">{error}</div>}
|
{error && (
|
||||||
|
<div className="error-message" data-testid="error-message">
|
||||||
|
{error}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{successMessage && (
|
||||||
|
<div className="success-message" data-testid="success-message">
|
||||||
|
{successMessage}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
<div className="form-group">
|
<div className="form-group">
|
||||||
<label htmlFor="txn-date-react">Date</label>
|
<label htmlFor="txn-date-react">Date</label>
|
||||||
|
|||||||
@@ -1,5 +1,4 @@
|
|||||||
import { useStore } from '@nanostores/react';
|
import { useStore } from '@nanostores/react';
|
||||||
import { useStore } from '@nanostores/react';
|
|
||||||
import React, { useState, useEffect } from 'react';
|
import React, { useState, useEffect } from 'react';
|
||||||
import {
|
import {
|
||||||
currentAccountId as currentAccountIdStore,
|
currentAccountId as currentAccountIdStore,
|
||||||
@@ -45,7 +44,7 @@ export default function TransactionTable({}: TransactionTableProps) {
|
|||||||
};
|
};
|
||||||
|
|
||||||
fetchTransactions();
|
fetchTransactions();
|
||||||
}, [currentAccountId]);
|
}, [currentAccountId, refreshCounter]);
|
||||||
|
|
||||||
const sortedTransactions = [...transactions].sort(
|
const sortedTransactions = [...transactions].sort(
|
||||||
(a, b) => new Date(b.date).getTime() - new Date(a.date).getTime(),
|
(a, b) => new Date(b.date).getTime() - new Date(a.date).getTime(),
|
||||||
@@ -76,15 +75,16 @@ export default function TransactionTable({}: TransactionTableProps) {
|
|||||||
|
|
||||||
console.log(`Transaction ${txnId} deleted successfully.`);
|
console.log(`Transaction ${txnId} deleted successfully.`);
|
||||||
|
|
||||||
|
// Remove from local state
|
||||||
setTransactions((currentTransactions) =>
|
setTransactions((currentTransactions) =>
|
||||||
currentTransactions.filter((txn) => txn.id !== txnId),
|
currentTransactions.filter((txn) => txn.id !== txnId),
|
||||||
);
|
);
|
||||||
|
|
||||||
|
// Trigger refresh to update balances and table
|
||||||
triggerRefresh();
|
triggerRefresh();
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
alert(error instanceof Error ? error.message : 'Failed to delete transaction');
|
alert(error instanceof Error ? error.message : 'Failed to delete transaction');
|
||||||
console.error('Delete error:', error);
|
console.error('Delete error:', error);
|
||||||
} finally {
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -213,6 +213,58 @@ tbody tr:hover {
|
|||||||
border-color: #f5c6cb;
|
border-color: #f5c6cb;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.error-message {
|
||||||
|
color: #dc3545;
|
||||||
|
background-color: #f8d7da;
|
||||||
|
border: 1px solid #f5c6cb;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 8px 12px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
font-size: 0.9em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.success-message {
|
||||||
|
color: #198754;
|
||||||
|
background-color: #d1e7dd;
|
||||||
|
border: 1px solid #badbcc;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 8px 12px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
font-size: 0.9em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-group {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
margin-top: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cancel-btn {
|
||||||
|
background-color: #6c757d;
|
||||||
|
color: white;
|
||||||
|
padding: 8px 15px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 3px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cancel-btn:hover {
|
||||||
|
background-color: #5a6268;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cancel-btn:disabled {
|
||||||
|
background-color: #6c757d;
|
||||||
|
opacity: 0.65;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-text {
|
||||||
|
display: block;
|
||||||
|
margin-top: 4px;
|
||||||
|
color: #6c757d;
|
||||||
|
font-size: 0.85em;
|
||||||
|
}
|
||||||
|
|
||||||
/* Basic Responsive */
|
/* Basic Responsive */
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.dashboard-layout {
|
.dashboard-layout {
|
||||||
|
|||||||
293
src/test/components.test.tsx
Normal file
293
src/test/components.test.tsx
Normal file
@@ -0,0 +1,293 @@
|
|||||||
|
import { act, cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
|
||||||
|
import { describe, expect, it, vi } from 'vitest';
|
||||||
|
import AddTransactionForm from '../components/AddTransactionForm';
|
||||||
|
import TransactionTable from '../components/TransactionTable';
|
||||||
|
import type { Transaction } from '../types';
|
||||||
|
|
||||||
|
// Create hoisted mocks that are safe to use in vi.mock
|
||||||
|
const createMocks = vi.hoisted(() => ({
|
||||||
|
useStore: vi.fn((store) => {
|
||||||
|
// Match store values based on the store reference
|
||||||
|
switch (store?.get?.()) {
|
||||||
|
case createMocks.currentAccountId.get():
|
||||||
|
return '1';
|
||||||
|
case createMocks.transactionToEdit.get():
|
||||||
|
return null;
|
||||||
|
case createMocks.refreshKey.get():
|
||||||
|
return 0;
|
||||||
|
default:
|
||||||
|
return store?.get?.();
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
currentAccountId: { get: vi.fn(() => '1') },
|
||||||
|
transactionToEdit: { get: vi.fn(() => null) },
|
||||||
|
refreshKey: { get: vi.fn(() => 0) },
|
||||||
|
setCurrentAccountId: vi.fn(),
|
||||||
|
setTransactionToEdit: vi.fn(),
|
||||||
|
triggerRefresh: vi.fn(),
|
||||||
|
cancelEditingTransaction: vi.fn(),
|
||||||
|
transactionSaved: vi.fn(),
|
||||||
|
}));
|
||||||
|
|
||||||
|
// Mock modules using hoisted mocks
|
||||||
|
vi.mock('@nanostores/react', () => ({
|
||||||
|
useStore: createMocks.useStore,
|
||||||
|
}));
|
||||||
|
|
||||||
|
vi.mock('../stores/transactionStore', () => ({
|
||||||
|
currentAccountId: createMocks.currentAccountId,
|
||||||
|
transactionToEdit: createMocks.transactionToEdit,
|
||||||
|
refreshKey: createMocks.refreshKey,
|
||||||
|
setCurrentAccountId: createMocks.setCurrentAccountId,
|
||||||
|
setTransactionToEdit: createMocks.setTransactionToEdit,
|
||||||
|
triggerRefresh: createMocks.triggerRefresh,
|
||||||
|
cancelEditingTransaction: createMocks.cancelEditingTransaction,
|
||||||
|
transactionSaved: createMocks.transactionSaved,
|
||||||
|
}));
|
||||||
|
|
||||||
|
// Mock fetch globally
|
||||||
|
global.fetch = vi.fn();
|
||||||
|
|
||||||
|
describe('Transaction Management Components', () => {
|
||||||
|
beforeEach(() => {
|
||||||
|
vi.clearAllMocks();
|
||||||
|
|
||||||
|
// Reset mock implementations
|
||||||
|
createMocks.currentAccountId.get.mockReturnValue('1');
|
||||||
|
createMocks.transactionToEdit.get.mockReturnValue(null);
|
||||||
|
createMocks.refreshKey.get.mockReturnValue(0);
|
||||||
|
});
|
||||||
|
|
||||||
|
afterEach(() => {
|
||||||
|
cleanup();
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('AddTransactionForm', () => {
|
||||||
|
it('should render the form with default values', () => {
|
||||||
|
render(<AddTransactionForm />);
|
||||||
|
|
||||||
|
expect(screen.getByLabelText(/date/i)).toBeInTheDocument();
|
||||||
|
expect(screen.getByLabelText(/description/i)).toBeInTheDocument();
|
||||||
|
expect(screen.getByLabelText(/amount/i)).toBeInTheDocument();
|
||||||
|
expect(screen.getByRole('button', { name: /save transaction/i })).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should validate required fields', async () => {
|
||||||
|
render(<AddTransactionForm />);
|
||||||
|
|
||||||
|
await act(async () => {
|
||||||
|
fireEvent.click(screen.getByRole('button', { name: /save transaction/i }));
|
||||||
|
});
|
||||||
|
|
||||||
|
await waitFor(() => {
|
||||||
|
expect(screen.getByText(/description must be at least/i)).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should handle successful transaction creation', async () => {
|
||||||
|
const mockTransaction: Transaction = {
|
||||||
|
id: '123',
|
||||||
|
accountId: '1',
|
||||||
|
date: '2025-05-05',
|
||||||
|
description: 'Test Transaction',
|
||||||
|
amount: -50,
|
||||||
|
};
|
||||||
|
|
||||||
|
// Mock fetch to delay the response slightly to simulate real API
|
||||||
|
(global.fetch as jest.Mock).mockImplementationOnce(
|
||||||
|
() =>
|
||||||
|
new Promise((resolve) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
resolve({
|
||||||
|
ok: true,
|
||||||
|
json: () => Promise.resolve(mockTransaction),
|
||||||
|
});
|
||||||
|
}, 0);
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
|
||||||
|
render(<AddTransactionForm />);
|
||||||
|
|
||||||
|
// Fill out form
|
||||||
|
const descInput = screen.getByLabelText(/description/i);
|
||||||
|
const amountInput = screen.getByLabelText(/amount/i);
|
||||||
|
|
||||||
|
// Fill form with valid data
|
||||||
|
await act(async () => {
|
||||||
|
fireEvent.change(descInput, { target: { value: 'Test Transaction' } });
|
||||||
|
fireEvent.change(amountInput, { target: { value: '-50' } });
|
||||||
|
});
|
||||||
|
|
||||||
|
// Submit form
|
||||||
|
await act(async () => {
|
||||||
|
fireEvent.submit(screen.getByRole('form'));
|
||||||
|
});
|
||||||
|
|
||||||
|
// Use a more generous timeout for waitFor
|
||||||
|
await waitFor(
|
||||||
|
() => {
|
||||||
|
expect(screen.getByTestId('success-message')).toBeInTheDocument();
|
||||||
|
},
|
||||||
|
{ timeout: 3000 },
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(createMocks.transactionSaved).toHaveBeenCalledWith(mockTransaction);
|
||||||
|
expect(createMocks.triggerRefresh).toHaveBeenCalled();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should handle API errors', async () => {
|
||||||
|
// Mock fetch to delay the error response
|
||||||
|
(global.fetch as jest.Mock).mockImplementationOnce(
|
||||||
|
() =>
|
||||||
|
new Promise((resolve) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
resolve({
|
||||||
|
ok: false,
|
||||||
|
status: 500,
|
||||||
|
statusText: 'Internal Server Error',
|
||||||
|
});
|
||||||
|
}, 0);
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
|
||||||
|
render(<AddTransactionForm />);
|
||||||
|
|
||||||
|
// Fill out form
|
||||||
|
const descInput = screen.getByLabelText(/description/i);
|
||||||
|
const amountInput = screen.getByLabelText(/amount/i);
|
||||||
|
|
||||||
|
// Fill form with valid data
|
||||||
|
await act(async () => {
|
||||||
|
fireEvent.change(descInput, { target: { value: 'Test Transaction' } });
|
||||||
|
fireEvent.change(amountInput, { target: { value: '-50' } });
|
||||||
|
});
|
||||||
|
|
||||||
|
// Submit form
|
||||||
|
await act(async () => {
|
||||||
|
fireEvent.submit(screen.getByRole('form'));
|
||||||
|
});
|
||||||
|
|
||||||
|
// Use a more generous timeout for waitFor
|
||||||
|
await waitFor(
|
||||||
|
() => {
|
||||||
|
expect(screen.getByTestId('error-message')).toBeInTheDocument();
|
||||||
|
},
|
||||||
|
{ timeout: 3000 },
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(screen.getByTestId('error-message')).toHaveTextContent(/500: Internal Server Error/i);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should handle edit mode', async () => {
|
||||||
|
const mockTransaction: Transaction = {
|
||||||
|
id: '123',
|
||||||
|
accountId: '1',
|
||||||
|
date: '2025-05-05',
|
||||||
|
description: 'Test Transaction',
|
||||||
|
amount: -50,
|
||||||
|
};
|
||||||
|
|
||||||
|
// Set up edit mode
|
||||||
|
createMocks.transactionToEdit.get.mockReturnValue(mockTransaction);
|
||||||
|
createMocks.useStore.mockImplementation((store) => {
|
||||||
|
if (store === createMocks.transactionToEdit) return mockTransaction;
|
||||||
|
return store?.get?.();
|
||||||
|
});
|
||||||
|
|
||||||
|
render(<AddTransactionForm />);
|
||||||
|
|
||||||
|
// Verify form is populated with transaction data
|
||||||
|
await waitFor(() => {
|
||||||
|
expect(screen.getByLabelText(/date/i)).toHaveValue('2025-05-05');
|
||||||
|
expect(screen.getByLabelText(/description/i)).toHaveValue('Test Transaction');
|
||||||
|
expect(screen.getByLabelText(/amount/i)).toHaveDisplayValue('-50');
|
||||||
|
expect(screen.getByRole('button', { name: /update/i })).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('TransactionTable', () => {
|
||||||
|
const mockTransactions: Transaction[] = [
|
||||||
|
{
|
||||||
|
id: '1',
|
||||||
|
accountId: '1',
|
||||||
|
date: '2025-05-05',
|
||||||
|
description: 'Test Transaction 1',
|
||||||
|
amount: -50,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '2',
|
||||||
|
accountId: '1',
|
||||||
|
date: '2025-05-05',
|
||||||
|
description: 'Test Transaction 2',
|
||||||
|
amount: 100,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
it('should render transactions', async () => {
|
||||||
|
(global.fetch as jest.Mock).mockResolvedValueOnce({
|
||||||
|
ok: true,
|
||||||
|
json: () => Promise.resolve(mockTransactions),
|
||||||
|
});
|
||||||
|
|
||||||
|
render(<TransactionTable />);
|
||||||
|
|
||||||
|
await waitFor(() => {
|
||||||
|
expect(screen.getByText('Test Transaction 1')).toBeInTheDocument();
|
||||||
|
expect(screen.getByText('Test Transaction 2')).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should handle transaction deletion', async () => {
|
||||||
|
(global.fetch as jest.Mock)
|
||||||
|
.mockResolvedValueOnce({
|
||||||
|
ok: true,
|
||||||
|
json: () => Promise.resolve(mockTransactions),
|
||||||
|
})
|
||||||
|
.mockResolvedValueOnce({
|
||||||
|
ok: true,
|
||||||
|
status: 204,
|
||||||
|
});
|
||||||
|
|
||||||
|
const confirmSpy = vi.spyOn(window, 'confirm');
|
||||||
|
confirmSpy.mockImplementation(() => true);
|
||||||
|
|
||||||
|
render(<TransactionTable />);
|
||||||
|
|
||||||
|
await waitFor(() => {
|
||||||
|
expect(screen.getByText('Test Transaction 1')).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
await act(async () => {
|
||||||
|
const deleteButton = screen.getAllByRole('button', { name: /delete/i })[0];
|
||||||
|
fireEvent.click(deleteButton);
|
||||||
|
});
|
||||||
|
|
||||||
|
await waitFor(() => {
|
||||||
|
expect(global.fetch).toHaveBeenCalledWith(
|
||||||
|
'/api/transactions/1',
|
||||||
|
expect.objectContaining({ method: 'DELETE' }),
|
||||||
|
);
|
||||||
|
expect(createMocks.triggerRefresh).toHaveBeenCalled();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should handle loading state', async () => {
|
||||||
|
(global.fetch as jest.Mock).mockImplementation(() => new Promise(() => {}));
|
||||||
|
|
||||||
|
render(<TransactionTable />);
|
||||||
|
|
||||||
|
expect(screen.getByText(/loading/i)).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should handle error state', async () => {
|
||||||
|
(global.fetch as jest.Mock).mockRejectedValueOnce(new Error('Failed to fetch'));
|
||||||
|
|
||||||
|
render(<TransactionTable />);
|
||||||
|
|
||||||
|
await waitFor(() => {
|
||||||
|
expect(screen.getByText(/error/i)).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -1,7 +1,12 @@
|
|||||||
|
import '@testing-library/jest-dom';
|
||||||
import type { APIContext } from 'astro';
|
import type { APIContext } from 'astro';
|
||||||
import { beforeEach } from 'vitest';
|
import { beforeEach, vi } from 'vitest';
|
||||||
import { accounts, transactions } from '../data/store';
|
import { accounts, transactions } from '../data/store';
|
||||||
|
|
||||||
|
// Setup JSDOM globals needed for React testing
|
||||||
|
// @ts-ignore - vi.stubGlobal is not in the types
|
||||||
|
vi.stubGlobal('fetch', vi.fn());
|
||||||
|
|
||||||
// Create a mock APIContext factory
|
// Create a mock APIContext factory
|
||||||
export function createMockAPIContext(options: Partial<APIContext> = {}): APIContext {
|
export function createMockAPIContext(options: Partial<APIContext> = {}): APIContext {
|
||||||
return {
|
return {
|
||||||
@@ -55,4 +60,8 @@ beforeEach(() => {
|
|||||||
amount: 100.0,
|
amount: 100.0,
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
|
|
||||||
|
// Reset fetch mock
|
||||||
|
// @ts-ignore - vi.fn() is not in the types
|
||||||
|
fetch.mockReset();
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -1,21 +1,27 @@
|
|||||||
/// <reference types="vitest" />
|
/// <reference types="vitest" />
|
||||||
|
import react from '@vitejs/plugin-react';
|
||||||
import { defineConfig } from 'vitest/config';
|
import { defineConfig } from 'vitest/config';
|
||||||
|
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
|
plugins: [react()],
|
||||||
test: {
|
test: {
|
||||||
// Increase timeout for slower CI environments
|
// Ensure non-interactive and CI-friendly configuration
|
||||||
testTimeout: 10000,
|
watch: false,
|
||||||
// Use the setup file we created
|
silent: false,
|
||||||
|
passWithNoTests: true,
|
||||||
|
teardownTimeout: 5000,
|
||||||
|
// Testing environment setup
|
||||||
|
environment: 'jsdom',
|
||||||
setupFiles: ['./src/test/setup.ts'],
|
setupFiles: ['./src/test/setup.ts'],
|
||||||
// Ensure we're using the right environment
|
// Test file patterns
|
||||||
environment: 'node',
|
include: ['src/test/**/*.{test,spec}.{ts,tsx}'],
|
||||||
// Only include test files
|
// Coverage configuration
|
||||||
include: ['src/test/**/*.{test,spec}.{ts,js}'],
|
|
||||||
// Configure coverage collection
|
|
||||||
coverage: {
|
coverage: {
|
||||||
provider: 'v8',
|
provider: 'v8',
|
||||||
reporter: ['text', 'json', 'html'],
|
reporter: ['text', 'json', 'html'],
|
||||||
exclude: ['node_modules/', 'src/test/**/*', '**/*.d.ts'],
|
exclude: ['node_modules/', 'src/test/**/*', '**/*.d.ts'],
|
||||||
},
|
},
|
||||||
|
// Global settings
|
||||||
|
globals: true,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user