@use "@styles/abstracts/functions" as fun;

.title {
  --icon-size: #{fun.convert-px(30)};

  display: flex;
  flex-flow: row nowrap;
  gap: var(--spacing-2xs);
  margin-bottom: var(--spacing-md);
  color: var(--color-primary-dark);
  font-size: var(--font-size-lg);
  font-weight: 600;

  svg {
    margin: 0;
  }
}
t.com/atom/src/components/organisms/layout/comments-list.test.tsx?h=v2.0.0' type='application/atom+xml'/>
<link rel='vcs-git' href='https://git.armand.philippot.eu/www.armandphilippot.com' title='www.armandphilippot.com Git repository'/>
<link rel='vcs-git' href='git://git.armand.philippot.euwww.armandphilippot.com' title='www.armandphilippot.com Git repository'/>
</head>
<body>
<div id='cgit'><table id='header'>
<tr>
<td class='logo' rowspan='2'><a href='/'><img src='/cgit-data/cgit.png' alt='cgit logo'/></a></td>
<td class='main'><a href='/'>index</a> : <a href='/www.armandphilippot.com/'>www.armandphilippot.com</a></td><td class='form'><form method='get'>
<input type='hidden' name='id' value='ca921d7536cfe950b5a7d442977bbf900b48faf4'/><select name='h' onchange='this.form.submit();'>
<option value='main'>main</option>
</select> <input type='submit' value='switch'/></form></td></tr>
<tr><td class='sub'>The frontend of my personal website.</td><td class='sub right'>Armand Philippot</td></tr></table>
<table class='tabs'><tr><td>
<a href='/www.armandphilippot.com/?h=v2.0.0'>summary</a><a href='/www.armandphilippot.com/refs/?h=v2.0.0&amp;id=ca921d7536cfe950b5a7d442977bbf900b48faf4'>refs</a><a href='/www.armandphilippot.com/log/src/components/organisms/layout/comments-list.test.tsx?h=v2.0.0'>log</a><a class='active' href='/www.armandphilippot.com/tree/src/components/organisms/layout/comments-list.test.tsx?h=v2.0.0&amp;id=ca921d7536cfe950b5a7d442977bbf900b48faf4'>tree</a><a href='/www.armandphilippot.com/commit/src/components/organisms/layout/comments-list.test.tsx?h=v2.0.0&amp;id=ca921d7536cfe950b5a7d442977bbf900b48faf4'>commit</a><a href='/www.armandphilippot.com/diff/src/components/organisms/layout/comments-list.test.tsx?h=v2.0.0&amp;id=ca921d7536cfe950b5a7d442977bbf900b48faf4'>diff</a><a href='/www.armandphilippot.com/stats/src/components/organisms/layout/comments-list.test.tsx?h=v2.0.0'>stats</a></td><td class='form'><form class='right' method='get' action='/www.armandphilippot.com/log/src/components/organisms/layout/comments-list.test.tsx'>
<input type='hidden' name='h' value='v2.0.0'/><input type='hidden' name='id' value='ca921d7536cfe950b5a7d442977bbf900b48faf4'/><select name='qt'>
<option value='grep'>log msg</option>
<option value='author'>author</option>
<option value='committer'>committer</option>
<option value='range'>range</option>
</select>
<input class='txt' type='search' size='10' name='q' value=''/>
<input type='submit' value='search'/>
</form>
</td></tr></table>
<div class='path'>path: <a href='/www.armandphilippot.com/tree/?h=v2.0.0&amp;id=ca921d7536cfe950b5a7d442977bbf900b48faf4'>root</a>/<a href='/www.armandphilippot.com/tree/src?h=v2.0.0&amp;id=ca921d7536cfe950b5a7d442977bbf900b48faf4'>src</a>/<a href='/www.armandphilippot.com/tree/src/components?h=v2.0.0&amp;id=ca921d7536cfe950b5a7d442977bbf900b48faf4'>components</a>/<a href='/www.armandphilippot.com/tree/src/components/organisms?h=v2.0.0&amp;id=ca921d7536cfe950b5a7d442977bbf900b48faf4'>organisms</a>/<a href='/www.armandphilippot.com/tree/src/components/organisms/layout?h=v2.0.0&amp;id=ca921d7536cfe950b5a7d442977bbf900b48faf4'>layout</a>/<a href='/www.armandphilippot.com/tree/src/components/organisms/layout/comments-list.test.tsx?h=v2.0.0&amp;id=ca921d7536cfe950b5a7d442977bbf900b48faf4'>comments-list.test.tsx</a></div><div class='content'>blob: 542b1dfc83c8511c0a6f84f9f4cecd5e2085ce4e (<a href='/www.armandphilippot.com/plain/src/components/organisms/layout/comments-list.test.tsx?h=v2.0.0&amp;id=ca921d7536cfe950b5a7d442977bbf900b48faf4'>plain</a>)
<table summary='blob content' class='blob'>
<tr><td class='linenumbers'><pre><a id='n1' href='#n1'>1</a>
<a id='n2' href='#n2'>2</a>
<a id='n3' href='#n3'>3</a>
<a id='n4' href='#n4'>4</a>
<a id='n5' href='#n5'>5</a>
<a id='n6' href='#n6'>6</a>
<a id='n7' href='#n7'>7</a>
<a id='n8' href='#n8'>8</a>
<a id='n9' href='#n9'>9</a>
<a id='n10' href='#n10'>10</a>
<a id='n11' href='#n11'>11</a>
<a id='n12' href='#n12'>12</a>
<a id='n13' href='#n13'>13</a>
<a id='n14' href='#n14'>14</a>
<a id='n15' href='#n15'>15</a>
<a id='n16' href='#n16'>16</a>
<a id='n17' href='#n17'>17</a>
<a id='n18' href='#n18'>18</a>
<a id='n19' href='#n19'>19</a>
<a id='n20' href='#n20'>20</a>
<a id='n21' href='#n21'>21</a>
<a id='n22' href='#n22'>22</a>
<a id='n23' href='#n23'>23</a>
<a id='n24' href='#n24'>24</a>
<a id='n25' href='#n25'>25</a>
<a id='n26' href='#n26'>26</a>
<a id='n27' href='#n27'>27</a>
<a id='n28' href='#n28'>28</a>
<a id='n29' href='#n29'>29</a>
<a id='n30' href='#n30'>30</a>
<a id='n31' href='#n31'>31</a>
<a id='n32' href='#n32'>32</a>
<a id='n33' href='#n33'>33</a>
<a id='n34' href='#n34'>34</a>
<a id='n35' href='#n35'>35</a>
<a id='n36' href='#n36'>36</a>
<a id='n37' href='#n37'>37</a>
<a id='n38' href='#n38'>38</a>
<a id='n39' href='#n39'>39</a>
<a id='n40' href='#n40'>40</a>
<a id='n41' href='#n41'>41</a>
<a id='n42' href='#n42'>42</a>
<a id='n43' href='#n43'>43</a>
<a id='n44' href='#n44'>44</a>
<a id='n45' href='#n45'>45</a>
<a id='n46' href='#n46'>46</a>
<a id='n47' href='#n47'>47</a>
<a id='n48' href='#n48'>48</a>
<a id='n49' href='#n49'>49</a>
<a id='n50' href='#n50'>50</a>
<a id='n51' href='#n51'>51</a>
<a id='n52' href='#n52'>52</a>
<a id='n53' href='#n53'>53</a>
<a id='n54' href='#n54'>54</a>
<a id='n55' href='#n55'>55</a>
<a id='n56' href='#n56'>56</a>
<a id='n57' href='#n57'>57</a>
<a id='n58' href='#n58'>58</a>
<a id='n59' href='#n59'>59</a>
<a id='n60' href='#n60'>60</a>
<a id='n61' href='#n61'>61</a>
<a id='n62' href='#n62'>62</a>
<a id='n63' href='#n63'>63</a>
<a id='n64' href='#n64'>64</a>
<a id='n65' href='#n65'>65</a>
<a id='n66' href='#n66'>66</a>
</pre></td>
<td class='lines'><pre><code><style>pre { line-height: 125%; }
td.linenos .normal { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
span.linenos { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
td.linenos .special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
span.linenos.special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
.highlight .hll { background-color: #ffffcc }
.highlight .c { color: #888888 } /* Comment */
.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
.highlight .k { color: #008800; font-weight: bold } /* Keyword */
.highlight .ch { color: #888888 } /* Comment.Hashbang */
.highlight .cm { color: #888888 } /* Comment.Multiline */
.highlight .cp { color: #cc0000; font-weight: bold } /* Comment.Preproc */
.highlight .cpf { color: #888888 } /* Comment.PreprocFile */
.highlight .c1 { color: #888888 } /* Comment.Single */
.highlight .cs { color: #cc0000; font-weight: bold; background-color: #fff0f0 } /* Comment.Special */
.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
.highlight .ge { font-style: italic } /* Generic.Emph */
.highlight .gr { color: #aa0000 } /* Generic.Error */
.highlight .gh { color: #333333 } /* Generic.Heading */
.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
.highlight .go { color: #888888 } /* Generic.Output */
.highlight .gp { color: #555555 } /* Generic.Prompt */
.highlight .gs { font-weight: bold } /* Generic.Strong */
.highlight .gu { color: #666666 } /* Generic.Subheading */
.highlight .gt { color: #aa0000 } /* Generic.Traceback */
.highlight .kc { color: #008800; font-weight: bold } /* Keyword.Constant */
.highlight .kd { color: #008800; font-weight: bold } /* Keyword.Declaration */
.highlight .kn { color: #008800; font-weight: bold } /* Keyword.Namespace */
.highlight .kp { color: #008800 } /* Keyword.Pseudo */
.highlight .kr { color: #008800; font-weight: bold } /* Keyword.Reserved */
.highlight .kt { color: #888888; font-weight: bold } /* Keyword.Type */
.highlight .m { color: #0000DD; font-weight: bold } /* Literal.Number */
.highlight .s { color: #dd2200; background-color: #fff0f0 } /* Literal.String */
.highlight .na { color: #336699 } /* Name.Attribute */
.highlight .nb { color: #003388 } /* Name.Builtin */
.highlight .nc { color: #bb0066; font-weight: bold } /* Name.Class */
.highlight .no { color: #003366; font-weight: bold } /* Name.Constant */
.highlight .nd { color: #555555 } /* Name.Decorator */
.highlight .ne { color: #bb0066; font-weight: bold } /* Name.Exception */
.highlight .nf { color: #0066bb; font-weight: bold } /* Name.Function */
.highlight .nl { color: #336699; font-style: italic } /* Name.Label */
.highlight .nn { color: #bb0066; font-weight: bold } /* Name.Namespace */
.highlight .py { color: #336699; font-weight: bold } /* Name.Property */
.highlight .nt { color: #bb0066; font-weight: bold } /* Name.Tag */
.highlight .nv { color: #336699 } /* Name.Variable */
.highlight .ow { color: #008800 } /* Operator.Word */
.highlight .w { color: #bbbbbb } /* Text.Whitespace */
.highlight .mb { color: #0000DD; font-weight: bold } /* Literal.Number.Bin */
.highlight .mf { color: #0000DD; font-weight: bold } /* Literal.Number.Float */
.highlight .mh { color: #0000DD; font-weight: bold } /* Literal.Number.Hex */
.highlight .mi { color: #0000DD; font-weight: bold } /* Literal.Number.Integer */
.highlight .mo { color: #0000DD; font-weight: bold } /* Literal.Number.Oct */
.highlight .sa { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Affix */
.highlight .sb { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Backtick */
.highlight .sc { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Char */
.highlight .dl { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Delimiter */
.highlight .sd { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Doc */
.highlight .s2 { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Double */
.highlight .se { color: #0044dd; background-color: #fff0f0 } /* Literal.String.Escape */
.highlight .sh { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Heredoc */
.highlight .si { color: #3333bb; background-color: #fff0f0 } /* Literal.String.Interpol */
.highlight .sx { color: #22bb22; background-color: #f0fff0 } /* Literal.String.Other */
.highlight .sr { color: #008800; background-color: #fff0ff } /* Literal.String.Regex */
.highlight .s1 { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Single */
.highlight .ss { color: #aa6600; background-color: #fff0f0 } /* Literal.String.Symbol */
.highlight .bp { color: #003388 } /* Name.Builtin.Pseudo */
.highlight .fm { color: #0066bb; font-weight: bold } /* Name.Function.Magic */
.highlight .vc { color: #336699 } /* Name.Variable.Class */
.highlight .vg { color: #dd7700 } /* Name.Variable.Global */
.highlight .vi { color: #3333bb } /* Name.Variable.Instance */
.highlight .vm { color: #336699 } /* Name.Variable.Magic */
.highlight .il { color: #0000DD; font-weight: bold } /* Literal.Number.Integer.Long */</style><div class="highlight"><pre><span></span>import { render } from &#39;@test-utils&#39;;
import CommentsList, { type Comment } from &#39;./comments-list&#39;;

const comments: Comment[] = [
  {
    author: {
      avatar: &#39;http://placeimg.com/640/480&#39;,
      name: &#39;Author 1&#39;,
    },
    content:
      &#39;Voluptas ducimus inventore. Libero ut et doloribus. Earum nostrum ab. Aliquam rem dolores omnis voluptate. Sunt aut ut et.&#39;,
    id: 1,
    publication: &#39;2021-04-03 18:04:11&#39;,
  },
  {
    child: [
      {
        author: {
          avatar: &#39;http://placeimg.com/640/480&#39;,
          name: &#39;Author 4&#39;,
        },
        content:
          &#39;Vel ullam in porro tempore. Maiores quos quia magnam beatae nemo libero velit numquam. Sapiente aliquid cumque. Velit neque in adipisci aut assumenda voluptates earum. Autem esse autem provident in tempore. Aut distinctio dolor qui repellat et et adipisci velit aspernatur.&#39;,
        id: 4,
        publication: &#39;2021-04-03 23:04:24&#39;,
      },
      {
        author: {
          avatar: &#39;http://placeimg.com/640/480&#39;,
          name: &#39;Author 1&#39;,
        },
        content:
          &#39;Sed non omnis. Quam porro est. Quae tempore quae. Exercitationem eos non velit voluptatem velit voluptas iusto. Sit debitis qui ipsam quo asperiores numquam veniam praesentium ut.&#39;,
        id: 5,
        publication: &#39;2021-04-04 08:05:14&#39;,
      },
    ],
    author: {
      avatar: &#39;http://placeimg.com/640/480&#39;,
      name: &#39;Author 2&#39;,
      url: &#39;#&#39;,
    },
    content:
      &#39;Sit sed error quasi voluptatem velit voluptas aut. Aut debitis eveniet. Praesentium dolores quia voluptate vero quis dicta quasi vel. Aut voluptas accusantium ut aut quidem consectetur itaque laboriosam occaecati.&#39;,
    id: 2,
    publication: &#39;2021-04-03 23:30:20&#39;,
  },
  {
    author: {
      avatar: &#39;http://placeimg.com/640/480&#39;,
      name: &#39;Author 3&#39;,
    },
    content:
      &#39;Natus consequatur maiores aperiam dolore eius nesciunt ut qui et. Ab ea nobis est. Eaque dolor corrupti id aut. Impedit architecto autem qui neque rerum ab dicta dignissimos voluptates.&#39;,
    id: 3,
    publication: &#39;2021-05-13 13:24:54&#39;,
  },
];

describe(&#39;CommentsList&#39;, () =&gt; {
  it(&#39;renders a comments list&#39;, () =&gt; {
    render(
      &lt;CommentsList comments={comments} depth={1} saveComment={() =&gt; null} /&gt;
    );
  });
});
</pre></div>
</code></pre></td></tr></table>
</div> <!-- class=content -->
<div class='footer'>generated by <a href='https://git.zx2c4.com/cgit/about/'>cgit v1.2.3</a> (<a href='https://git-scm.com/'>git 2.39.1</a>) at 2025-10-27 13:56:44 +0000</div>
</div> <!-- id=cgit -->
</body>
</html>
