diff options
| author | Adam Mathes <adam@adammathes.com> | 2026-02-14 10:03:35 -0800 |
|---|---|---|
| committer | Adam Mathes <adam@adammathes.com> | 2026-02-14 10:03:35 -0800 |
| commit | a4997a5fbc65913b55f2215eb3b868693bd76c51 (patch) | |
| tree | fe303ee7c5e5aba89f1c13766b14556f6e3d2f79 /frontend/coverage/src/components/FeedItem.tsx.html | |
| parent | 4d058d9ddb34f0e8d384b20d4b9e30f74d349129 (diff) | |
| download | neko-a4997a5fbc65913b55f2215eb3b868693bd76c51.tar.gz neko-a4997a5fbc65913b55f2215eb3b868693bd76c51.tar.bz2 neko-a4997a5fbc65913b55f2215eb3b868693bd76c51.zip | |
test: increase frontend coverage for Settings and improve FeedItem css
Diffstat (limited to 'frontend/coverage/src/components/FeedItem.tsx.html')
| -rw-r--r-- | frontend/coverage/src/components/FeedItem.tsx.html | 380 |
1 files changed, 238 insertions, 142 deletions
diff --git a/frontend/coverage/src/components/FeedItem.tsx.html b/frontend/coverage/src/components/FeedItem.tsx.html index 5512b78..6e76131 100644 --- a/frontend/coverage/src/components/FeedItem.tsx.html +++ b/frontend/coverage/src/components/FeedItem.tsx.html @@ -1,64 +1,68 @@ + <!doctype html> <html lang="en"> - <head> + +<head> <title>Code coverage report for src/components/FeedItem.tsx</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 type='text/css'> + .coverage-summary .sorter { + background-image: url(../../sort-arrow-sprite.png); + } </style> - </head> - - <body> - <div class="wrapper"> - <div class="pad1"> - <h1> - <a href="../../index.html">All files</a> / - <a href="index.html">src/components</a> FeedItem.tsx - </h1> - <div class="clearfix"> - <div class="fl pad1y space-right2"> - <span class="strong">78.94% </span> - <span class="quiet">Statements</span> - <span class="fraction">15/19</span> - </div> - - <div class="fl pad1y space-right2"> - <span class="strong">88.88% </span> - <span class="quiet">Branches</span> - <span class="fraction">16/18</span> - </div> - - <div class="fl pad1y space-right2"> - <span class="strong">85.71% </span> - <span class="quiet">Functions</span> - <span class="fraction">6/7</span> - </div> - - <div class="fl pad1y space-right2"> - <span class="strong">78.94% </span> - <span class="quiet">Lines</span> - <span class="fraction">15/19</span> - </div> +</head> + +<body> +<div class='wrapper'> + <div class='pad1'> + <h1><a href="../../index.html">All files</a> / <a href="index.html">src/components</a> FeedItem.tsx</h1> + <div class='clearfix'> + + <div class='fl pad1y space-right2'> + <span class="strong">78.12% </span> + <span class="quiet">Statements</span> + <span class='fraction'>25/32</span> + </div> + + + <div class='fl pad1y space-right2'> + <span class="strong">86.95% </span> + <span class="quiet">Branches</span> + <span class='fraction'>20/23</span> + </div> + + + <div class='fl pad1y space-right2'> + <span class="strong">83.33% </span> + <span class="quiet">Functions</span> + <span class='fraction'>10/12</span> + </div> + + + <div class='fl pad1y space-right2'> + <span class="strong">80.64% </span> + <span class="quiet">Lines</span> + <span class='fraction'>25/31</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. + 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> + <div class="quiet"> + Filter: + <input type="search" id="fileSearch"> + </div> </template> - </div> - <div class="status-line medium"></div> - <pre><table class="coverage"> + </div> + <div class='status-line medium'></div> + <pre><table class="coverage"> <tr><td class="line-count quiet"><a name='L1'></a><a href='#L1'>1</a> <a name='L2'></a><a href='#L2'>2</a> <a name='L3'></a><a href='#L3'>3</a> @@ -143,7 +147,41 @@ <a name='L82'></a><a href='#L82'>82</a> <a name='L83'></a><a href='#L83'>83</a> <a name='L84'></a><a href='#L84'>84</a> -<a name='L85'></a><a href='#L85'>85</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral"> </span> +<a name='L85'></a><a href='#L85'>85</a> +<a name='L86'></a><a href='#L86'>86</a> +<a name='L87'></a><a href='#L87'>87</a> +<a name='L88'></a><a href='#L88'>88</a> +<a name='L89'></a><a href='#L89'>89</a> +<a name='L90'></a><a href='#L90'>90</a> +<a name='L91'></a><a href='#L91'>91</a> +<a name='L92'></a><a href='#L92'>92</a> +<a name='L93'></a><a href='#L93'>93</a> +<a name='L94'></a><a href='#L94'>94</a> +<a name='L95'></a><a href='#L95'>95</a> +<a name='L96'></a><a href='#L96'>96</a> +<a name='L97'></a><a href='#L97'>97</a> +<a name='L98'></a><a href='#L98'>98</a> +<a name='L99'></a><a href='#L99'>99</a> +<a name='L100'></a><a href='#L100'>100</a> +<a name='L101'></a><a href='#L101'>101</a> +<a name='L102'></a><a href='#L102'>102</a> +<a name='L103'></a><a href='#L103'>103</a> +<a name='L104'></a><a href='#L104'>104</a> +<a name='L105'></a><a href='#L105'>105</a> +<a name='L106'></a><a href='#L106'>106</a> +<a name='L107'></a><a href='#L107'>107</a> +<a name='L108'></a><a href='#L108'>108</a> +<a name='L109'></a><a href='#L109'>109</a> +<a name='L110'></a><a href='#L110'>110</a> +<a name='L111'></a><a href='#L111'>111</a> +<a name='L112'></a><a href='#L112'>112</a> +<a name='L113'></a><a href='#L113'>113</a> +<a name='L114'></a><a href='#L114'>114</a> +<a name='L115'></a><a href='#L115'>115</a> +<a name='L116'></a><a href='#L116'>116</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> <span class="cline-any cline-neutral"> </span> <span class="cline-any cline-neutral"> </span> <span class="cline-any cline-neutral"> </span> @@ -151,16 +189,18 @@ <span class="cline-any cline-neutral"> </span> <span class="cline-any cline-neutral"> </span> <span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-yes">33x</span> +<span class="cline-any cline-yes">33x</span> <span class="cline-any cline-neutral"> </span> -<span class="cline-any cline-yes">21x</span> -<span class="cline-any cline-yes">21x</span> +<span class="cline-any cline-yes">33x</span> +<span class="cline-any cline-yes">16x</span> <span class="cline-any cline-neutral"> </span> <span class="cline-any cline-neutral"> </span> -<span class="cline-any cline-yes">21x</span> +<span class="cline-any cline-yes">33x</span> <span class="cline-any cline-yes">1x</span> <span class="cline-any cline-neutral"> </span> <span class="cline-any cline-neutral"> </span> -<span class="cline-any cline-yes">21x</span> +<span class="cline-any cline-yes">33x</span> <span class="cline-any cline-yes">1x</span> <span class="cline-any cline-neutral"> </span> <span class="cline-any cline-yes">1x</span> @@ -196,7 +236,28 @@ <span class="cline-any cline-neutral"> </span> <span class="cline-any cline-neutral"> </span> <span class="cline-any cline-neutral"> </span> -<span class="cline-any cline-yes">21x</span> +<span class="cline-any cline-yes">33x</span> +<span class="cline-any cline-yes">1x</span> +<span class="cline-any cline-yes">1x</span> +<span class="cline-any cline-yes">1x</span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-yes">1x</span> +<span class="cline-any cline-yes">1x</span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-yes">1x</span> +<span class="cline-any cline-yes">1x</span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-no"> </span> +<span class="cline-any cline-no"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-yes">33x</span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> <span class="cline-any cline-neutral"> </span> <span class="cline-any cline-neutral"> </span> <span class="cline-any cline-neutral"> </span> @@ -227,108 +288,143 @@ <span class="cline-any cline-neutral"> </span> <span class="cline-any cline-neutral"> </span> <span class="cline-any cline-neutral"> </span> -<span class="cline-any cline-neutral"> </span></td><td class="text"><pre class="prettyprint lang-js">import { useState } from 'react'; +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span> +<span class="cline-any cline-neutral"> </span></td><td class="text"><pre class="prettyprint lang-js">import { useState, useEffect } from 'react'; import type { Item } from '../types'; import './FeedItem.css'; +import { apiFetch } from '../utils'; + interface FeedItemProps { - item: Item; + item: Item; } export default function FeedItem({ item: initialItem }: FeedItemProps) { - const [item, setItem] = useState(initialItem); - const [loading, setLoading] = useState(false); + const [item, setItem] = useState(initialItem); + const [loading, setLoading] = useState(false); + + useEffect(() => { + setItem(initialItem); + }, [initialItem]); + const toggleStar = () => { + updateItem({ ...item, starred: !item.starred }); + }; - const toggleStar = () => { - updateItem({ ...item, starred: !item.starred }); - }; + const updateItem = (newItem: Item) => { + setLoading(true); + // Optimistic update + const previousItem = item; + setItem(newItem); - const updateItem = (newItem: Item) => { - setLoading(true); - // Optimistic update - const previousItem = item; - setItem(newItem); + apiFetch(`/api/item/${newItem._id}`, { + method: 'PUT', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + _id: newItem._id, + read: newItem.read, + starred: newItem.starred, + }), + }) + .then((res) => { + <span class="missing-if-branch" title="if path not taken" >I</span>if (!res.ok) { +<span class="cstat-no" title="statement not covered" > throw new Error('Failed to update item');</span> + } + return res.json(); + }) + .then(() => { + // Confirm with server response if needed, but for now we trust the optimistic update + // or we could setItem(updated) if the server returns the full object + setLoading(false); + }) + .catch(<span class="fstat-no" title="function not covered" >(e</span>rr) => { +<span class="cstat-no" title="statement not covered" > console.error('Error updating item:', err);</span> + // Revert on error +<span class="cstat-no" title="statement not covered" > setItem(previousItem);</span> +<span class="cstat-no" title="statement not covered" > setLoading(false);</span> + }); + }; - fetch(`/api/item/${newItem._id}`, { - method: 'PUT', - headers: { - 'Content-Type': 'application/json', - }, - body: JSON.stringify({ - _id: newItem._id, - read: newItem.read, - starred: newItem.starred, - }), - }) - .then((res) => { - <span class="missing-if-branch" title="if path not taken" >I</span>if (!res.ok) { -<span class="cstat-no" title="statement not covered" > throw new Error('Failed to update item');</span> - } - return res.json(); - }) - .then(() => { - // Confirm with server response if needed, but for now we trust the optimistic update - // or we could setItem(updated) if the server returns the full object - setLoading(false); - }) - .catch(<span class="fstat-no" title="function not covered" >(e</span>rr) => { -<span class="cstat-no" title="statement not covered" > console.error('Error updating item:', err);</span> - // Revert on error -<span class="cstat-no" title="statement not covered" > setItem(previousItem);</span> -<span class="cstat-no" title="statement not covered" > setLoading(false);</span> - }); - }; + const loadFullContent = (e: React.MouseEvent) => { + e.stopPropagation(); + setLoading(true); + apiFetch(`/api/item/${item._id}`) + .then((res) => { + <span class="missing-if-branch" title="if path not taken" >I</span>if (!res.ok) <span class="cstat-no" title="statement not covered" >throw new Error('Failed to fetch full content');</span> + return res.json(); + }) + .then((data) => { + setItem({ ...item, ...data }); + setLoading(false); + }) + .catch(<span class="fstat-no" title="function not covered" >(e</span>rr) => { +<span class="cstat-no" title="statement not covered" > console.error('Error fetching full content:', err);</span> +<span class="cstat-no" title="statement not covered" > setLoading(false);</span> + }); + }; - return ( - <li className={`feed-item ${item.read ? 'read' : 'unread'} ${loading ? 'loading' : ''}`}> - <div className="item-header"> - <button - onClick={(e) => { - e.stopPropagation(); - toggleStar(); - }} - className={`star-btn ${item.starred ? 'is-starred' : 'is-unstarred'}`} - title={item.starred ? "Unstar" : "Star"} - > - {item.starred ? '★' : '☆'} - </button> - <a href={item.url} target="_blank" rel="noopener noreferrer" className="item-title"> - {item.title || <span class="branch-1 cbranch-no" title="branch not covered" >'(No Title)'}</span> - </a> - </div> - <div className="dateline"> - <a href={item.url} target="_blank" rel="noopener noreferrer"> - {new Date(item.publish_date).toLocaleDateString()} - {item.feed_title && ` - ${item.feed_title}`} - </a> - <div className="item-actions" style={{ display: 'inline-block', float: 'right' }}> - </div> - </div> - {item.description && ( - <div className="item-description" dangerouslySetInnerHTML={{ __html: item.description }} /> - )} - </li> - ); + return ( + <li className={`feed-item ${item.read ? 'read' : 'unread'} ${loading ? 'loading' : ''}`}> + <div className="item-header"> + <a href={item.url} target="_blank" rel="noopener noreferrer" className="item-title"> + {item.title || <span class="branch-1 cbranch-no" title="branch not covered" >'(No Title)'}</span> + </a> + <button + onClick={(e) => { + e.stopPropagation(); + toggleStar(); + }} + className={`star-btn ${item.starred ? 'is-starred' : 'is-unstarred'}`} + title={item.starred ? 'Unstar' : 'Star'} + > + ★ + </button> + </div> + <div className="dateline"> + <a href={item.url} target="_blank" rel="noopener noreferrer"> + {new Date(item.publish_date).toLocaleDateString()} + {item.feed_title && ` - ${item.feed_title}`} + </a> + <div className="item-actions" style={{ display: 'inline-block', float: 'right' }}> + {!item.full_content && ( + <button onClick={loadFullContent} className="scrape-btn" title="Load Full Content"> + text + </button> + )} + </div> + </div> + {(item.full_content || item.description) && ( + <div + className="item-description" + dangerouslySetInnerHTML={{ __html: item.full_content || item.description }} + /> + )} + </li> + ); } </pre></td></tr></table></pre> - <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 2026-02-13T21:49:58.924Z - </div> - <script src="../../prettify.js"></script> - <script> - window.onload = function () { - prettyPrint(); - }; - </script> - <script src="../../sorter.js"></script> - <script src="../../block-navigation.js"></script> - </body> + <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 2026-02-14T18:02:09.004Z + </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> +
\ No newline at end of file |