CodepediaOrg
Jekyll
2023-04-22T08:18:02+02:00
https://www.codepedia.org/
CodepediaOrg
https://www.codepedia.org/
ama@codepedia.org
https://www.codepedia.org/snippets/644268c1aaf4c5228c969eb1/routerlink-with-query-params-in-angular-html-template
2023-04-21T00:00:00+02:00
2023-04-21T00:00:00+02:00
Adrian Matei (aka adixchen)
https://www.codepedia.org
adixchen@proton.me
<p>Use <code class="language-plaintext highlighter-rouge">routerLink</code> and <code class="language-plaintext highlighter-rouge">queryParams</code> as inputs to the link as in the following example:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">[routerLink]=</span><span class="s">"['/my-bookmarks/new']"</span> <span class="na">[queryParams]=</span><span class="s">"{initiator: 'browser'}"</span><span class="nt">></span>
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"fa fa-bookmark"</span><span class="nt">></i></span>
Bookmark
<span class="nt"></a></span>
</code></pre></div></div>
<p>This will generate an url like the following https://www.codever.dev/my-bookmarks/new?initiator=browser</p>
<p><strong>Project</strong>: <code class="language-plaintext highlighter-rouge">codever</code> - <strong>File</strong>: <code class="language-plaintext highlighter-rouge">navigation.component.html</code></p>
<hr />
<p class="note_normal">
Shared with <i class="fa fa-heart" style="color:orangered"></i> from <a href="https://www.codever.dev/snippets/644268c1aaf4c5228c969eb1/details">Codever</a>.
👉 Use the <a href="https://www.codever.dev/snippets/644268c1aaf4c5228c969eb1/details" class="copy-to-mine-btn"><i class="fa fa-copy"></i> Copy to mine</a>
functionality to copy this snippet to your own personal collection and easy manage
your code snippets.
<br />
<br />
<b>Codever</b> is open source on <a href="https://github.com/CodeverDotDev">Github</a> ⭐🙏
</p>
<p><a href="https://www.codepedia.org/snippets/644268c1aaf4c5228c969eb1/routerlink-with-query-params-in-angular-html-template">routerLink with query params in Angular html template</a> was originally published by CodepediaOrg at <a href="https://www.codepedia.org">CodepediaOrg</a> on April 21, 2023.</p>
https://www.codepedia.org/snippets/6442adcc83bdf3228599b1f1/how-to-not-select-attribute-in-mongoose-schema
2023-04-21T00:00:00+02:00
2023-04-21T00:00:00+02:00
Adrian Matei (aka adixchen)
https://www.codepedia.org
adixchen@proton.me
<p>Use <code class="language-plaintext highlighter-rouge">select: false</code> when defining an attribute of a mongoose schema,
like <code class="language-plaintext highlighter-rouge">initiator: {type:String, select: false}</code> in the following schema for a bookmark object:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code>const bookmarkSchema = new Schema(
{
shareableId: { type: String, select: false },
name: { type: String, required: true },
type: { type: String, required: true, default: 'bookmark' },
location: { type: String, required: true },
description: String,
descriptionHtml: String,
tags: [String],
initiator: {type:String, select: false},
publishedOn: Date,
sourceCodeURL: { type: String },
userId: { type: String, ref: 'User' },
userDisplayName: String,
public: Boolean,
language: String,
lastAccessedAt: { type: Date, select: false },
likeCount: Number,
ownerVisitCount: { type: Number, select: false },
youtubeVideoId: { type: String, required: false },
stackoverflowQuestionId: { type: String, required: false },
__v: { type: Number, select: false },
},
{
timestamps: true,
}
);
</code></pre></div></div>
<p><strong>Project</strong>: <code class="language-plaintext highlighter-rouge">codever</code> - <strong>File</strong>: <code class="language-plaintext highlighter-rouge">bookmark.js</code></p>
<hr />
<p class="note_normal">
Shared with <i class="fa fa-heart" style="color:orangered"></i> from <a href="https://www.codever.dev/snippets/6442adcc83bdf3228599b1f1/details">Codever</a>.
👉 Use the <a href="https://www.codever.dev/snippets/6442adcc83bdf3228599b1f1/details" class="copy-to-mine-btn"><i class="fa fa-copy"></i> Copy to mine</a>
functionality to copy this snippet to your own personal collection and easy manage
your code snippets.
<br />
<br />
<b>Codever</b> is open source on <a href="https://github.com/CodeverDotDev">Github</a> ⭐🙏
</p>
<p><a href="https://www.codepedia.org/snippets/6442adcc83bdf3228599b1f1/how-to-not-select-attribute-in-mongoose-schema">How to not select attribute in mongoose schema</a> was originally published by CodepediaOrg at <a href="https://www.codepedia.org">CodepediaOrg</a> on April 21, 2023.</p>
https://www.codepedia.org/snippets/6426a0931cc7ed0f73e54e83/calculate-life-span-and-age-in-years-in-javascript-typescript
2023-03-31T00:00:00+02:00
2023-03-31T00:00:00+02:00
Adrian Matei (aka adixchen)
https://www.codepedia.org
adixchen@proton.me
<p>Given <code class="language-plaintext highlighter-rouge">birthDate</code> and day of death as strings the following method calculates the lifespan in years.
To calculate then the age of the person we call the same <code class="language-plaintext highlighter-rouge">calculateLifeSpan</code> method with the day of death set to today</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">export</span> <span class="kd">const</span> <span class="nx">calculateLifeSpan</span> <span class="o">=</span> <span class="p">(</span><span class="nx">birthdateString</span><span class="p">:</span> <span class="nx">string</span><span class="p">,</span> <span class="nx">deathDayString</span><span class="p">:</span> <span class="nx">string</span><span class="p">):</span> <span class="nx">number</span> <span class="o">=></span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">birthdate</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">(</span><span class="nx">birthdateString</span><span class="p">);</span>
<span class="kd">const</span> <span class="nx">dayOfDeath</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">(</span><span class="nx">deathDayString</span><span class="p">);</span>
<span class="kd">let</span> <span class="nx">age</span> <span class="o">=</span> <span class="nx">dayOfDeath</span><span class="p">.</span><span class="nx">getFullYear</span><span class="p">()</span> <span class="o">-</span> <span class="nx">birthdate</span><span class="p">.</span><span class="nx">getFullYear</span><span class="p">();</span>
<span class="kd">const</span> <span class="nx">monthDifference</span> <span class="o">=</span> <span class="nx">dayOfDeath</span><span class="p">.</span><span class="nx">getMonth</span><span class="p">()</span> <span class="o">-</span> <span class="nx">birthdate</span><span class="p">.</span><span class="nx">getMonth</span><span class="p">();</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">monthDifference</span> <span class="o"><</span> <span class="mi">0</span> <span class="o">||</span> <span class="p">(</span><span class="nx">monthDifference</span> <span class="o">===</span> <span class="mi">0</span> <span class="o">&&</span> <span class="nx">dayOfDeath</span><span class="p">.</span><span class="nx">getDate</span><span class="p">()</span> <span class="o"><</span> <span class="nx">birthdate</span><span class="p">.</span><span class="nx">getDate</span><span class="p">()))</span> <span class="p">{</span>
<span class="nx">age</span><span class="o">--</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">return</span> <span class="nx">age</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">export</span> <span class="kd">const</span> <span class="nx">calculateAge</span> <span class="o">=</span> <span class="p">(</span><span class="nx">birthDateStr</span><span class="p">:</span> <span class="nx">string</span><span class="p">):</span> <span class="nx">number</span> <span class="o">=></span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">calculateLifeSpan</span><span class="p">(</span><span class="nx">birthDateStr</span><span class="p">,</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">().</span><span class="nx">toISOString</span><span class="p">().</span><span class="nx">slice</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">10</span><span class="p">))</span>
<span class="p">}</span>
</code></pre></div></div>
<blockquote>
<p><em>Note</em> - you could as well accept the inputs directly as <code class="language-plaintext highlighter-rouge">Date</code> objects
and wouldn’t need then to transform them to dates with <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/Date"><code class="language-plaintext highlighter-rouge">new Date()</code></a> constructor</p>
</blockquote>
<p>The following test suite tests the <code class="language-plaintext highlighter-rouge">calculateLifeDuration</code> function, which takes two dates as strings and calculates the duration in years between them.
It also uses test.each to run multiple tests with different start and end dates and expected durations.</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">describe</span><span class="p">(</span><span class="dl">'</span><span class="s1">calculateLifeDuration</span><span class="dl">'</span><span class="p">,</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">test</span><span class="p">.</span><span class="nx">each</span><span class="p">([</span>
<span class="p">[</span><span class="dl">'</span><span class="s1">2021-01-01</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">2021-12-31</span><span class="dl">'</span><span class="p">,</span> <span class="mi">0</span><span class="p">],</span>
<span class="p">[</span><span class="dl">'</span><span class="s1">1980-01-01</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">2023-03-31</span><span class="dl">'</span><span class="p">,</span> <span class="mi">43</span><span class="p">],</span>
<span class="p">[</span><span class="dl">'</span><span class="s1">1995-05-15</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">2023-03-31</span><span class="dl">'</span><span class="p">,</span> <span class="mi">27</span><span class="p">],</span>
<span class="p">[</span><span class="dl">'</span><span class="s1">2010-10-10</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">2023-03-31</span><span class="dl">'</span><span class="p">,</span> <span class="mi">12</span><span class="p">],</span>
<span class="p">])(</span><span class="dl">'</span><span class="s1">calculates duration correctly between %s and %s</span><span class="dl">'</span><span class="p">,</span> <span class="p">(</span><span class="nx">startDate</span><span class="p">,</span> <span class="nx">endDate</span><span class="p">,</span> <span class="nx">expectedDuration</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">expect</span><span class="p">(</span><span class="nx">calculateLifeDuration</span><span class="p">(</span><span class="nx">startDate</span><span class="p">,</span> <span class="nx">endDate</span><span class="p">)).</span><span class="nx">toEqual</span><span class="p">(</span><span class="nx">expectedDuration</span><span class="p">);</span>
<span class="p">});</span>
<span class="p">});</span>
</code></pre></div></div>
<p>The next test suite tests the <code class="language-plaintext highlighter-rouge">calculateAge</code> function, which takes a birthdate as a string
and calculates the age in years by calling the <code class="language-plaintext highlighter-rouge">calculateLifeDuration</code> function with the birthdate and the current date.
To mock today’s date in the calculateAge tests, we can use Jest’s <code class="language-plaintext highlighter-rouge">jest.spyOn</code> method
to replace the <code class="language-plaintext highlighter-rouge">toISOString</code> method of the <code class="language-plaintext highlighter-rouge">Date</code> object with a mocked version that always returns a fixed date.
This way, the calculateAge function will always use the same date when calculating the age, regardless of when the test is run.</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">describe</span><span class="p">(</span><span class="dl">'</span><span class="s1">calculateAge</span><span class="dl">'</span><span class="p">,</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">fixedDate</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">(</span><span class="dl">'</span><span class="s1">2022-03-31T00:00:00.000Z</span><span class="dl">'</span><span class="p">);</span>
<span class="nx">beforeEach</span><span class="p">(()</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">jest</span><span class="p">.</span><span class="nx">spyOn</span><span class="p">(</span><span class="nb">Date</span><span class="p">.</span><span class="nx">prototype</span><span class="p">,</span> <span class="dl">'</span><span class="s1">toISOString</span><span class="dl">'</span><span class="p">).</span><span class="nx">mockReturnValue</span><span class="p">(</span><span class="nx">fixedDate</span><span class="p">.</span><span class="nx">toISOString</span><span class="p">());</span>
<span class="p">});</span>
<span class="nx">afterEach</span><span class="p">(()</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">jest</span><span class="p">.</span><span class="nx">restoreAllMocks</span><span class="p">();</span>
<span class="p">});</span>
<span class="nx">test</span><span class="p">.</span><span class="nx">each</span><span class="p">([</span>
<span class="p">[</span><span class="dl">'</span><span class="s1">1990-01-01</span><span class="dl">'</span><span class="p">,</span> <span class="mi">32</span><span class="p">],</span>
<span class="p">[</span><span class="dl">'</span><span class="s1">1980-05-15</span><span class="dl">'</span><span class="p">,</span> <span class="mi">41</span><span class="p">],</span>
<span class="p">[</span><span class="dl">'</span><span class="s1">2005-12-31</span><span class="dl">'</span><span class="p">,</span> <span class="mi">16</span><span class="p">],</span>
<span class="p">[</span><span class="dl">'</span><span class="s1">1995-10-10</span><span class="dl">'</span><span class="p">,</span> <span class="mi">26</span><span class="p">],</span>
<span class="p">])(</span><span class="dl">'</span><span class="s1">calculates age correctly for birthdate %s</span><span class="dl">'</span><span class="p">,</span> <span class="p">(</span><span class="nx">birthdate</span><span class="p">,</span> <span class="nx">expectedAge</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">expect</span><span class="p">(</span><span class="nx">calculateAge</span><span class="p">(</span><span class="nx">birthdate</span><span class="p">)).</span><span class="nx">toEqual</span><span class="p">(</span><span class="nx">expectedAge</span><span class="p">);</span>
<span class="p">});</span>
<span class="p">});</span>
</code></pre></div></div>
<p>In this example, we create a <code class="language-plaintext highlighter-rouge">fixedDate</code> object with a fixed date value that we want to use for testing.
In the <code class="language-plaintext highlighter-rouge">beforeEach</code> hook, we use <code class="language-plaintext highlighter-rouge">jest.spyOn</code> to replace the toISOString method of the Date object with a mock function
that always returns the fixedDate value as an ISO string. This ensures that the calculateAge function always uses the fixedDate
when calculating the age, regardless of when the test is run.</p>
<p>In the <code class="language-plaintext highlighter-rouge">afterEach</code> hook, we restore the original <code class="language-plaintext highlighter-rouge">toISOString</code> method of the <code class="language-plaintext highlighter-rouge">Date</code> object to ensure that other tests are not affected by this mock.</p>
<hr />
<p class="note_normal">
Shared with <i class="fa fa-heart" style="color:orangered"></i> from <a href="https://www.codever.dev/snippets/6426a0931cc7ed0f73e54e83/details">Codever</a>.
👉 Use the <a href="https://www.codever.dev/snippets/6426a0931cc7ed0f73e54e83/details" class="copy-to-mine-btn"><i class="fa fa-copy"></i> Copy to mine</a>
functionality to copy this snippet to your own personal collection and easy manage
your code snippets.
<br />
<br />
<b>Codever</b> is open source on <a href="https://github.com/CodeverDotDev">Github</a> ⭐🙏
</p>
<p><a href="https://www.codepedia.org/snippets/6426a0931cc7ed0f73e54e83/calculate-life-span-and-age-in-years-in-javascript-typescript">Calculate life span and age in years in javascript/typescript</a> was originally published by CodepediaOrg at <a href="https://www.codepedia.org">CodepediaOrg</a> on March 31, 2023.</p>
https://www.codepedia.org/article/jest-test-each-tests
2023-03-09T00:00:00+01:00
2023-03-09T00:00:00+01:00
Adrian Matei (aka adixchen)
https://www.codepedia.org
adixchen@proton.me
<p>Jest is a popular JavaScript testing framework that provides an intuitive and powerful way to write automated tests for your codebase.
One of the features that make Jest stand out is its <a href="https://jestjs.io/docs/api#testeachtablename-fn-timeout"><code class="language-plaintext highlighter-rouge">test.each</code></a> function,
which enables you to write more concise and readable tests by parameterizing test cases.</p>
<p>With <code class="language-plaintext highlighter-rouge">test.each</code>, you can define an array of test cases and run the same test function against each test case
with the input arguments substituted. This feature is particularly useful when you need to test a function
with a large number of input combinations, making your test code more maintainable and less verbose.</p>
<p>In this blog post, you’ll see an example of how I refactored several repetitive tests to use <code class="language-plaintext highlighter-rouge">test.each</code> in Jest
and simplify my test code.</p>
<!--more-->
<h2 id="the-method-under-test">The method under test</h2>
<p>The method under test is <code class="language-plaintext highlighter-rouge">setSpecialSearchTermsFilter</code>, which extends the document search filter with special
ones you can set on <a href="https://www.codever.dev">Codever</a>:</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">let</span> <span class="nx">setSpecialSearchTermsFilter</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">docType</span><span class="p">,</span> <span class="nx">isPublic</span><span class="p">,</span> <span class="nx">userId</span><span class="p">,</span> <span class="nx">specialSearchFilters</span><span class="p">,</span> <span class="nx">filter</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">let</span> <span class="nx">newFilter</span> <span class="o">=</span> <span class="p">{...</span><span class="nx">filter</span><span class="p">};</span>
<span class="c1">//one is not entitled to see private bookmarks of another user</span>
<span class="k">if</span> <span class="p">(</span> <span class="nx">specialSearchFilters</span><span class="p">.</span><span class="nx">userId</span> <span class="o">&&</span> <span class="p">(</span><span class="nx">isPublic</span> <span class="o">||</span> <span class="nx">specialSearchFilters</span><span class="p">.</span><span class="nx">userId</span> <span class="o">===</span> <span class="nx">userId</span><span class="p">)</span> <span class="p">)</span> <span class="p">{</span>
<span class="nx">newFilter</span><span class="p">.</span><span class="nx">userId</span> <span class="o">=</span> <span class="nx">specialSearchFilters</span><span class="p">.</span><span class="nx">userId</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">if</span> <span class="p">(</span> <span class="nx">specialSearchFilters</span><span class="p">.</span><span class="nx">privateOnly</span> <span class="o">&&</span> <span class="o">!</span><span class="nx">isPublic</span> <span class="p">)</span> <span class="p">{</span> <span class="c1">//</span>
<span class="nx">newFilter</span><span class="p">.</span><span class="kr">public</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">if</span> <span class="p">(</span> <span class="nx">specialSearchFilters</span><span class="p">.</span><span class="nx">site</span> <span class="p">)</span> <span class="p">{</span>
<span class="k">if</span><span class="p">(</span><span class="nx">docType</span> <span class="o">===</span> <span class="nx">DocType</span><span class="p">.</span><span class="nx">BOOKMARK</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">newFilter</span><span class="p">.</span><span class="nx">location</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">RegExp</span><span class="p">(</span><span class="nx">specialSearchFilters</span><span class="p">.</span><span class="nx">site</span><span class="p">,</span> <span class="dl">'</span><span class="s1">i</span><span class="dl">'</span><span class="p">);</span>
<span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">docType</span> <span class="o">===</span> <span class="nx">DocType</span><span class="p">.</span><span class="nx">SNIPPET</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">newFilter</span><span class="p">.</span><span class="nx">sourceUrl</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">RegExp</span><span class="p">(</span><span class="nx">specialSearchFilters</span><span class="p">.</span><span class="nx">site</span><span class="p">,</span> <span class="dl">'</span><span class="s1">i</span><span class="dl">'</span><span class="p">);</span><span class="c1">//TODO when performance becomes an issue extract domains from URLs and make a direct comparison with the domain</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="k">throw</span> <span class="k">new</span> <span class="nb">Error</span><span class="p">(</span><span class="s2">`</span><span class="p">${</span><span class="nx">docType</span><span class="p">}</span><span class="s2"> is not supported as document type`</span><span class="p">)</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="k">return</span> <span class="nx">newFilter</span><span class="p">;</span>
<span class="p">};</span>
</code></pre></div></div>
<h2 id="before">Before</h2>
<p>In the snippet below you can see the tests before using jest <code class="language-plaintext highlighter-rouge">test.each</code></p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">describe</span><span class="p">(</span><span class="dl">'</span><span class="s1">setSpecialSearchTermsFilter</span><span class="dl">'</span><span class="p">,</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">it</span><span class="p">(</span><span class="dl">'</span><span class="s1">should set the userId filter when specialSearchTerms.userId is present and isPublic is true</span><span class="dl">'</span><span class="p">,</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">filter</span> <span class="o">=</span> <span class="p">{};</span>
<span class="kd">const</span> <span class="nx">specialSearchTerms</span> <span class="o">=</span> <span class="p">{</span><span class="na">userId</span><span class="p">:</span> <span class="dl">'</span><span class="s1">123</span><span class="dl">'</span><span class="p">};</span>
<span class="kd">const</span> <span class="nx">result</span> <span class="o">=</span> <span class="nx">searchUtils</span><span class="p">.</span><span class="nx">setSpecialSearchTermsFilter</span><span class="p">(</span><span class="nx">DocType</span><span class="p">.</span><span class="nx">SNIPPET</span><span class="p">,</span> <span class="kc">true</span><span class="p">,</span> <span class="dl">'</span><span class="s1">123</span><span class="dl">'</span><span class="p">,</span> <span class="nx">specialSearchTerms</span><span class="p">,</span> <span class="nx">filter</span><span class="p">);</span>
<span class="nx">expect</span><span class="p">(</span><span class="nx">result</span><span class="p">).</span><span class="nx">toEqual</span><span class="p">({</span><span class="na">userId</span><span class="p">:</span> <span class="dl">'</span><span class="s1">123</span><span class="dl">'</span><span class="p">});</span>
<span class="p">});</span>
<span class="nx">it</span><span class="p">(</span><span class="dl">'</span><span class="s1">should set the userId filter when specialSearchTerms.userId is present and matches the userId</span><span class="dl">'</span><span class="p">,</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">filter</span> <span class="o">=</span> <span class="p">{};</span>
<span class="kd">const</span> <span class="nx">specialSearchTerms</span> <span class="o">=</span> <span class="p">{</span><span class="na">userId</span><span class="p">:</span> <span class="dl">'</span><span class="s1">123</span><span class="dl">'</span><span class="p">};</span>
<span class="kd">const</span> <span class="nx">result</span> <span class="o">=</span> <span class="nx">searchUtils</span><span class="p">.</span><span class="nx">setSpecialSearchTermsFilter</span><span class="p">(</span><span class="nx">DocType</span><span class="p">.</span><span class="nx">SNIPPET</span><span class="p">,</span> <span class="kc">false</span><span class="p">,</span> <span class="dl">'</span><span class="s1">123</span><span class="dl">'</span><span class="p">,</span> <span class="nx">specialSearchTerms</span><span class="p">,</span> <span class="nx">filter</span><span class="p">);</span>
<span class="nx">expect</span><span class="p">(</span><span class="nx">result</span><span class="p">).</span><span class="nx">toEqual</span><span class="p">({</span><span class="na">userId</span><span class="p">:</span> <span class="dl">'</span><span class="s1">123</span><span class="dl">'</span><span class="p">});</span>
<span class="p">});</span>
<span class="nx">it</span><span class="p">(</span><span class="dl">'</span><span class="s1">should not set the userId filter when specialSearchTerms.userId is present and does not match the userId</span><span class="dl">'</span><span class="p">,</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">filter</span> <span class="o">=</span> <span class="p">{};</span>
<span class="kd">const</span> <span class="nx">specialSearchTerms</span> <span class="o">=</span> <span class="p">{</span><span class="na">userId</span><span class="p">:</span> <span class="dl">'</span><span class="s1">456</span><span class="dl">'</span><span class="p">};</span>
<span class="kd">const</span> <span class="nx">result</span> <span class="o">=</span> <span class="nx">searchUtils</span><span class="p">.</span><span class="nx">setSpecialSearchTermsFilter</span><span class="p">(</span><span class="nx">DocType</span><span class="p">.</span><span class="nx">SNIPPET</span><span class="p">,</span> <span class="kc">false</span><span class="p">,</span> <span class="dl">'</span><span class="s1">123</span><span class="dl">'</span><span class="p">,</span> <span class="nx">specialSearchTerms</span><span class="p">,</span> <span class="nx">filter</span><span class="p">);</span>
<span class="nx">expect</span><span class="p">(</span><span class="nx">result</span><span class="p">).</span><span class="nx">toEqual</span><span class="p">({});</span>
<span class="p">});</span>
<span class="nx">it</span><span class="p">(</span><span class="dl">'</span><span class="s1">should set the public filter to false when specialSearchTerms.privateOnly is present</span><span class="dl">'</span><span class="p">,</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">filter</span> <span class="o">=</span> <span class="p">{};</span>
<span class="kd">const</span> <span class="nx">specialSearchTerms</span> <span class="o">=</span> <span class="p">{</span><span class="na">privateOnly</span><span class="p">:</span> <span class="kc">true</span><span class="p">};</span>
<span class="kd">const</span> <span class="nx">result</span> <span class="o">=</span> <span class="nx">searchUtils</span><span class="p">.</span><span class="nx">setSpecialSearchTermsFilter</span><span class="p">(</span><span class="nx">DocType</span><span class="p">.</span><span class="nx">SNIPPET</span><span class="p">,</span> <span class="kc">false</span><span class="p">,</span> <span class="dl">'</span><span class="s1">123</span><span class="dl">'</span><span class="p">,</span> <span class="nx">specialSearchTerms</span><span class="p">,</span> <span class="nx">filter</span><span class="p">);</span>
<span class="nx">expect</span><span class="p">(</span><span class="nx">result</span><span class="p">).</span><span class="nx">toEqual</span><span class="p">({</span><span class="na">public</span><span class="p">:</span> <span class="kc">false</span><span class="p">});</span>
<span class="p">});</span>
<span class="nx">it</span><span class="p">(</span><span class="dl">'</span><span class="s1">should set the sourceUrl filter when specialSearchTerms.site is present for snippets</span><span class="dl">'</span><span class="p">,</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">filter</span> <span class="o">=</span> <span class="p">{};</span>
<span class="kd">const</span> <span class="nx">specialSearchTerms</span> <span class="o">=</span> <span class="p">{</span><span class="na">site</span><span class="p">:</span> <span class="dl">'</span><span class="s1">example.com</span><span class="dl">'</span><span class="p">};</span>
<span class="kd">const</span> <span class="nx">result</span> <span class="o">=</span> <span class="nx">searchUtils</span><span class="p">.</span><span class="nx">setSpecialSearchTermsFilter</span><span class="p">(</span><span class="nx">DocType</span><span class="p">.</span><span class="nx">SNIPPET</span><span class="p">,</span> <span class="kc">false</span><span class="p">,</span> <span class="dl">'</span><span class="s1">123</span><span class="dl">'</span><span class="p">,</span> <span class="nx">specialSearchTerms</span><span class="p">,</span> <span class="nx">filter</span><span class="p">);</span>
<span class="nx">expect</span><span class="p">(</span><span class="nx">result</span><span class="p">).</span><span class="nx">toEqual</span><span class="p">({</span><span class="na">sourceUrl</span><span class="p">:</span> <span class="sr">/example.com/i</span><span class="p">});</span>
<span class="p">});</span>
<span class="nx">it</span><span class="p">(</span><span class="dl">'</span><span class="s1">should set the location filter when specialSearchTerms.site is present for bookmarks</span><span class="dl">'</span><span class="p">,</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">filter</span> <span class="o">=</span> <span class="p">{};</span>
<span class="kd">const</span> <span class="nx">specialSearchTerms</span> <span class="o">=</span> <span class="p">{</span><span class="na">site</span><span class="p">:</span> <span class="dl">'</span><span class="s1">example.com</span><span class="dl">'</span><span class="p">};</span>
<span class="kd">const</span> <span class="nx">result</span> <span class="o">=</span> <span class="nx">searchUtils</span><span class="p">.</span><span class="nx">setSpecialSearchTermsFilter</span><span class="p">(</span><span class="nx">DocType</span><span class="p">.</span><span class="nx">BOOKMARK</span><span class="p">,</span> <span class="kc">false</span><span class="p">,</span> <span class="dl">'</span><span class="s1">123</span><span class="dl">'</span><span class="p">,</span> <span class="nx">specialSearchTerms</span><span class="p">,</span> <span class="nx">filter</span><span class="p">);</span>
<span class="nx">expect</span><span class="p">(</span><span class="nx">result</span><span class="p">).</span><span class="nx">toEqual</span><span class="p">({</span><span class="na">location</span><span class="p">:</span> <span class="sr">/example.com/i</span><span class="p">});</span>
<span class="p">});</span>
<span class="nx">it</span><span class="p">(</span><span class="dl">'</span><span class="s1">should set the location filter when specialSearchTerms.site is present for bookmarks</span><span class="dl">'</span><span class="p">,</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">filter</span> <span class="o">=</span> <span class="p">{};</span>
<span class="kd">const</span> <span class="nx">specialSearchTerms</span> <span class="o">=</span> <span class="p">{</span><span class="na">site</span><span class="p">:</span> <span class="dl">'</span><span class="s1">example.com</span><span class="dl">'</span><span class="p">};</span>
<span class="nx">expect</span><span class="p">(()</span> <span class="o">=></span> <span class="nx">searchUtils</span><span class="p">.</span><span class="nx">setSpecialSearchTermsFilter</span><span class="p">(</span><span class="dl">'</span><span class="s1">unknown</span><span class="dl">'</span><span class="p">,</span> <span class="kc">false</span><span class="p">,</span> <span class="dl">'</span><span class="s1">123</span><span class="dl">'</span><span class="p">,</span> <span class="nx">specialSearchTerms</span><span class="p">,</span> <span class="nx">filter</span><span class="p">)).</span><span class="nx">toThrow</span><span class="p">(</span><span class="nb">Error</span><span class="p">);</span>
<span class="p">});</span>
<span class="p">});</span>
</code></pre></div></div>
<h2 id="after">After</h2>
<p>By using <code class="language-plaintext highlighter-rouge">test.each</code> the test become more concise and more rapid to read</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">describe</span><span class="p">(</span><span class="dl">'</span><span class="s1">setSpecialSearchTermsFilter</span><span class="dl">'</span><span class="p">,</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">describe</span><span class="p">(</span><span class="dl">'</span><span class="s1">valid calls</span><span class="dl">'</span><span class="p">,</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">test</span><span class="p">.</span><span class="nx">each</span><span class="p">([</span>
<span class="p">[{},</span> <span class="nx">DocType</span><span class="p">.</span><span class="nx">SNIPPET</span><span class="p">,</span> <span class="p">{</span><span class="na">userId</span><span class="p">:</span> <span class="dl">'</span><span class="s1">123</span><span class="dl">'</span><span class="p">},</span> <span class="kc">true</span><span class="p">,</span> <span class="dl">'</span><span class="s1">123</span><span class="dl">'</span><span class="p">,</span> <span class="p">{</span><span class="na">userId</span><span class="p">:</span> <span class="dl">'</span><span class="s1">123</span><span class="dl">'</span><span class="p">}],</span>
<span class="p">[{},</span> <span class="nx">DocType</span><span class="p">.</span><span class="nx">SNIPPET</span><span class="p">,</span> <span class="p">{</span><span class="na">userId</span><span class="p">:</span> <span class="dl">'</span><span class="s1">123</span><span class="dl">'</span><span class="p">},</span> <span class="kc">false</span><span class="p">,</span> <span class="dl">'</span><span class="s1">123</span><span class="dl">'</span><span class="p">,</span> <span class="p">{</span><span class="na">userId</span><span class="p">:</span> <span class="dl">'</span><span class="s1">123</span><span class="dl">'</span><span class="p">}],</span>
<span class="p">[{},</span> <span class="nx">DocType</span><span class="p">.</span><span class="nx">SNIPPET</span><span class="p">,</span> <span class="p">{</span><span class="na">userId</span><span class="p">:</span> <span class="dl">'</span><span class="s1">456</span><span class="dl">'</span><span class="p">},</span> <span class="kc">false</span><span class="p">,</span> <span class="dl">'</span><span class="s1">123</span><span class="dl">'</span><span class="p">,</span> <span class="p">{}],</span>
<span class="p">[{},</span> <span class="nx">DocType</span><span class="p">.</span><span class="nx">SNIPPET</span><span class="p">,</span> <span class="p">{</span><span class="na">privateOnly</span><span class="p">:</span> <span class="kc">true</span><span class="p">},</span> <span class="kc">false</span><span class="p">,</span> <span class="dl">'</span><span class="s1">123</span><span class="dl">'</span><span class="p">,</span> <span class="p">{</span><span class="na">public</span><span class="p">:</span> <span class="kc">false</span><span class="p">}],</span>
<span class="p">[{},</span> <span class="nx">DocType</span><span class="p">.</span><span class="nx">SNIPPET</span><span class="p">,</span> <span class="p">{</span><span class="na">site</span><span class="p">:</span> <span class="dl">'</span><span class="s1">example.com</span><span class="dl">'</span><span class="p">},</span> <span class="kc">false</span><span class="p">,</span> <span class="dl">'</span><span class="s1">123</span><span class="dl">'</span><span class="p">,</span> <span class="p">{</span><span class="na">sourceUrl</span><span class="p">:</span> <span class="sr">/example.com/i</span><span class="p">}],</span>
<span class="p">[{},</span> <span class="nx">DocType</span><span class="p">.</span><span class="nx">BOOKMARK</span><span class="p">,</span> <span class="p">{</span><span class="na">site</span><span class="p">:</span> <span class="dl">'</span><span class="s1">example.com</span><span class="dl">'</span><span class="p">},</span> <span class="kc">false</span><span class="p">,</span> <span class="dl">'</span><span class="s1">123</span><span class="dl">'</span><span class="p">,</span> <span class="p">{</span><span class="na">location</span><span class="p">:</span> <span class="sr">/example.com/i</span><span class="p">}]</span>
<span class="p">])(</span><span class="dl">'</span><span class="s1">should set the filter correctly</span><span class="dl">'</span><span class="p">,</span> <span class="p">(</span><span class="nx">filter</span><span class="p">,</span> <span class="nx">docType</span><span class="p">,</span> <span class="nx">specialSearchTerms</span><span class="p">,</span> <span class="nx">isPublic</span><span class="p">,</span> <span class="nx">userId</span><span class="p">,</span> <span class="nx">expected</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">result</span> <span class="o">=</span> <span class="nx">searchUtils</span><span class="p">.</span><span class="nx">setSpecialSearchTermsFilter</span><span class="p">(</span><span class="nx">docType</span><span class="p">,</span> <span class="nx">isPublic</span><span class="p">,</span> <span class="nx">userId</span><span class="p">,</span> <span class="nx">specialSearchTerms</span><span class="p">,</span> <span class="nx">filter</span><span class="p">);</span>
<span class="nx">expect</span><span class="p">(</span><span class="nx">result</span><span class="p">).</span><span class="nx">toEqual</span><span class="p">(</span><span class="nx">expected</span><span class="p">);</span>
<span class="p">});</span>
<span class="p">});</span>
<span class="nx">it</span><span class="p">(</span><span class="dl">'</span><span class="s1">should throw error when document type not known</span><span class="dl">'</span><span class="p">,</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">filter</span> <span class="o">=</span> <span class="p">{};</span>
<span class="kd">const</span> <span class="nx">specialSearchTerms</span> <span class="o">=</span> <span class="p">{</span><span class="na">site</span><span class="p">:</span> <span class="dl">'</span><span class="s1">example.com</span><span class="dl">'</span><span class="p">};</span>
<span class="nx">expect</span><span class="p">(()</span> <span class="o">=></span> <span class="nx">searchUtils</span><span class="p">.</span><span class="nx">setSpecialSearchTermsFilter</span><span class="p">(</span><span class="dl">'</span><span class="s1">unknown</span><span class="dl">'</span><span class="p">,</span> <span class="kc">false</span><span class="p">,</span> <span class="dl">'</span><span class="s1">123</span><span class="dl">'</span><span class="p">,</span> <span class="nx">specialSearchTerms</span><span class="p">,</span> <span class="nx">filter</span><span class="p">)).</span><span class="nx">toThrow</span><span class="p">(</span><span class="nb">Error</span><span class="p">);</span>
<span class="p">});</span>
<span class="p">});</span>
</code></pre></div></div>
<p>Let me explain a bit the signature of <code class="language-plaintext highlighter-rouge">test.each(table)(name, fn, timeout)</code>:</p>
<ul>
<li><code class="language-plaintext highlighter-rouge">test.each(table)</code> is a Jest function that allows you to define a table of input data to use for parameterized tests.</li>
<li><code class="language-plaintext highlighter-rouge">table</code> is an array of arrays, where each sub-array represents a set of input arguments for a test case.
Each set of input arguments is used to run the same test function multiple times, with the input arguments substituted.</li>
<li><code class="language-plaintext highlighter-rouge">name</code> is a string that describes the test case. It should be unique and descriptive enough to identify the test case in the test results.</li>
<li><code class="language-plaintext highlighter-rouge">fn</code> is the test function that takes the input arguments from the <code class="language-plaintext highlighter-rouge">table</code>
and performs assertions to check if the function under test behaves as expected with those inputs.</li>
<li><code class="language-plaintext highlighter-rouge">timeout</code> is an optional parameter that specifies the timeout for the test case. If the test function takes longer than the specified timeout to complete, Jest will mark the test as failed.</li>
</ul>
<h3 id="test-names">Test names</h3>
<p>Hold on, regarding the <code class="language-plaintext highlighter-rouge">name</code> you said it should be unique and descriptive to identify the test case in the test results…
You are right and the <a href="https://jestjs.io/docs/api#testeachtablename-fn-timeout"><code class="language-plaintext highlighter-rouge">test.each</code> docs</a> offers several possibilities
when setting the name, but one of my favorite ways so far where I have the most control is with the following refactoring
of the test:</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">describe</span><span class="p">(</span><span class="dl">'</span><span class="s1">setSpecialSearchTermsFilter</span><span class="dl">'</span><span class="p">,</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">describe</span><span class="p">(</span><span class="dl">'</span><span class="s1">set the filter correctly</span><span class="dl">'</span><span class="p">,</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">test</span><span class="p">.</span><span class="nx">each</span><span class="p">([</span>
<span class="p">[</span>
<span class="dl">'</span><span class="s1">should set the userId filter when specialSearchTerms.userId is present and isPublic is true</span><span class="dl">'</span><span class="p">,</span>
<span class="p">{},</span> <span class="nx">DocType</span><span class="p">.</span><span class="nx">SNIPPET</span><span class="p">,</span> <span class="p">{</span><span class="na">userId</span><span class="p">:</span> <span class="dl">'</span><span class="s1">123</span><span class="dl">'</span><span class="p">},</span> <span class="kc">true</span><span class="p">,</span> <span class="dl">'</span><span class="s1">123</span><span class="dl">'</span><span class="p">,</span> <span class="p">{</span><span class="na">userId</span><span class="p">:</span> <span class="dl">'</span><span class="s1">123</span><span class="dl">'</span><span class="p">}</span>
<span class="p">],</span>
<span class="p">[</span>
<span class="dl">'</span><span class="s1">should set the userId filter when specialSearchTerms.userId is present and matches the userId</span><span class="dl">'</span><span class="p">,</span>
<span class="p">{},</span> <span class="nx">DocType</span><span class="p">.</span><span class="nx">SNIPPET</span><span class="p">,</span> <span class="p">{</span><span class="na">userId</span><span class="p">:</span> <span class="dl">'</span><span class="s1">123</span><span class="dl">'</span><span class="p">},</span> <span class="kc">false</span><span class="p">,</span> <span class="dl">'</span><span class="s1">123</span><span class="dl">'</span><span class="p">,</span> <span class="p">{</span><span class="na">userId</span><span class="p">:</span> <span class="dl">'</span><span class="s1">123</span><span class="dl">'</span><span class="p">}</span>
<span class="p">],</span>
<span class="p">[</span>
<span class="dl">'</span><span class="s1">should not set the userId filter when specialSearchTerms.userId is present and does not match the userId</span><span class="dl">'</span><span class="p">,</span>
<span class="p">{},</span> <span class="nx">DocType</span><span class="p">.</span><span class="nx">SNIPPET</span><span class="p">,</span> <span class="p">{</span><span class="na">userId</span><span class="p">:</span> <span class="dl">'</span><span class="s1">456</span><span class="dl">'</span><span class="p">},</span> <span class="kc">false</span><span class="p">,</span> <span class="dl">'</span><span class="s1">123</span><span class="dl">'</span><span class="p">,</span> <span class="p">{}</span>
<span class="p">],</span>
<span class="p">[</span>
<span class="dl">'</span><span class="s1">should set the public filter to false when specialSearchTerms.privateOnly is present</span><span class="dl">'</span><span class="p">,</span>
<span class="p">{},</span> <span class="nx">DocType</span><span class="p">.</span><span class="nx">SNIPPET</span><span class="p">,</span> <span class="p">{</span><span class="na">privateOnly</span><span class="p">:</span> <span class="kc">true</span><span class="p">},</span> <span class="kc">false</span><span class="p">,</span> <span class="dl">'</span><span class="s1">123</span><span class="dl">'</span><span class="p">,</span> <span class="p">{</span><span class="na">public</span><span class="p">:</span> <span class="kc">false</span><span class="p">}</span>
<span class="p">],</span>
<span class="p">[</span>
<span class="dl">'</span><span class="s1">should set the sourceUrl filter when specialSearchTerms.site is present for snippets</span><span class="dl">'</span><span class="p">,</span>
<span class="p">{},</span> <span class="nx">DocType</span><span class="p">.</span><span class="nx">SNIPPET</span><span class="p">,</span> <span class="p">{</span><span class="na">site</span><span class="p">:</span> <span class="dl">'</span><span class="s1">example.com</span><span class="dl">'</span><span class="p">},</span> <span class="kc">false</span><span class="p">,</span> <span class="dl">'</span><span class="s1">123</span><span class="dl">'</span><span class="p">,</span> <span class="p">{</span><span class="na">sourceUrl</span><span class="p">:</span> <span class="sr">/example.com/i</span><span class="p">}</span>
<span class="p">],</span>
<span class="p">[</span>
<span class="dl">'</span><span class="s1">should set the location filter when specialSearchTerms.site is present for bookmarks</span><span class="dl">'</span><span class="p">,</span>
<span class="p">{},</span> <span class="nx">DocType</span><span class="p">.</span><span class="nx">BOOKMARK</span><span class="p">,</span> <span class="p">{</span><span class="na">site</span><span class="p">:</span> <span class="dl">'</span><span class="s1">example.com</span><span class="dl">'</span><span class="p">},</span> <span class="kc">false</span><span class="p">,</span> <span class="dl">'</span><span class="s1">123</span><span class="dl">'</span><span class="p">,</span> <span class="p">{</span><span class="na">location</span><span class="p">:</span> <span class="sr">/example.com/i</span><span class="p">}</span>
<span class="p">]</span>
<span class="p">])(</span><span class="dl">'</span><span class="s1">%s</span><span class="dl">'</span><span class="p">,</span> <span class="p">(</span><span class="nx">testName</span><span class="p">,</span> <span class="nx">filter</span><span class="p">,</span> <span class="nx">docType</span><span class="p">,</span> <span class="nx">specialSearchTerms</span><span class="p">,</span> <span class="nx">isPublic</span><span class="p">,</span> <span class="nx">userId</span><span class="p">,</span> <span class="nx">expected</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">result</span> <span class="o">=</span> <span class="nx">searchUtils</span><span class="p">.</span><span class="nx">setSpecialSearchTermsFilter</span><span class="p">(</span><span class="nx">docType</span><span class="p">,</span> <span class="nx">isPublic</span><span class="p">,</span> <span class="nx">userId</span><span class="p">,</span> <span class="nx">specialSearchTerms</span><span class="p">,</span> <span class="nx">filter</span><span class="p">);</span>
<span class="nx">expect</span><span class="p">(</span><span class="nx">result</span><span class="p">).</span><span class="nx">toEqual</span><span class="p">(</span><span class="nx">expected</span><span class="p">);</span>
<span class="p">});</span>
<span class="p">});</span>
<span class="nx">it</span><span class="p">(</span><span class="dl">'</span><span class="s1">should throw error when document type not known</span><span class="dl">'</span><span class="p">,</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">filter</span> <span class="o">=</span> <span class="p">{};</span>
<span class="kd">const</span> <span class="nx">specialSearchTerms</span> <span class="o">=</span> <span class="p">{</span><span class="na">site</span><span class="p">:</span> <span class="dl">'</span><span class="s1">example.com</span><span class="dl">'</span><span class="p">};</span>
<span class="nx">expect</span><span class="p">(()</span> <span class="o">=></span> <span class="nx">searchUtils</span><span class="p">.</span><span class="nx">setSpecialSearchTermsFilter</span><span class="p">(</span><span class="dl">'</span><span class="s1">unknown</span><span class="dl">'</span><span class="p">,</span> <span class="kc">false</span><span class="p">,</span> <span class="dl">'</span><span class="s1">123</span><span class="dl">'</span><span class="p">,</span> <span class="nx">specialSearchTerms</span><span class="p">,</span> <span class="nx">filter</span><span class="p">)).</span><span class="nx">toThrow</span><span class="p">(</span><span class="nb">Error</span><span class="p">);</span>
<span class="p">});</span>
<span class="p">});</span>
</code></pre></div></div>
<p>In this refactored test suite, each test case has a unique name (<code class="language-plaintext highlighter-rouge">testName</code>) which is passed as an argument to the <code class="language-plaintext highlighter-rouge">test.each</code> function.
The name of the test case is interpolated into the string %s in the template string, which is used as the first argument to test.each.</p>
<p>This way, Jest can generate unique test names for each test case, and if a test case fails, it will be easier to identify which specific test case failed.</p>
<blockquote>
<p>Name setting of jest test was also covered in the other blog post - <a href="/snippets/64004a8a88deee44f7559f76/an-easy-way-to-set-test-name-in-jest-repetitive-each-test">An easy way to set test name in jest repetitive tests (test.each)</a></p>
</blockquote>
<h2 id="conclusion">Conclusion</h2>
<p>I hope you could grasp through this blog post that by using <code class="language-plaintext highlighter-rouge">test.each</code>, you can write concise and maintainable test code,
reduce code duplication, and make your test suite easier to read and understand.</p>
<p>In conclusion, if you’re not already using parameterized tests in your Jest test suite,
<code class="language-plaintext highlighter-rouge">test.each</code> is a great way to get started. It’s a powerful tool that can help you write better tests and catch more bugs in your code.</p>
<p>We use a lot of jest <code class="language-plaintext highlighter-rouge">test.each</code> tests in backend that supports <a href="https://www.codever.dev">Codever</a>. Check out the project
and see for yourself 👇</p>
<p class="note_normal">
<img style="float: left; width: 35px; height: 29px; margin-right: 10px;" src="https://www.codepedia.org/wp-content/uploads/2015/06/Octocat-smaller.png" alt="Octocat" />
Source code for <a href="https://www.codever.dev" target="_blank">Codever.dev</a> is available on <a href="https://github.com/CodeverDotDev/codever" target="_blank">Github</a> -
<span style="vertical-align: middle">
<a class="github-button" href="https://github.com/CodeverDotDev/codever" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star Codever on GitHub">Star</a>
</span>
</p>
<p><a href="https://www.codepedia.org/article/how-to-use-test-each-in-jest-to-avoid-repetitive-tests">Use test.each in jest to avoid repetitive tests</a> was originally published by CodepediaOrg at <a href="https://www.codepedia.org">CodepediaOrg</a> on March 09, 2023.</p>
https://www.codepedia.org/snippets/640858c71b5b8945055f7c42/test-error-with-array-messages-content-containing-message-in-jest-test-each
2023-03-08T00:00:00+01:00
2023-03-08T00:00:00+01:00
Adrian Matei (aka adixchen)
https://www.codepedia.org
adixchen@proton.me
<p>When validating a <strong>note</strong>, <strong>bookmark</strong> or <strong>snippet</strong> on <a href="https://www.codever.dev">Codever</a> several validation rules
might be broken and the response given to the consumer will contain <strong>all</strong> the corresponding error messages.</p>
<p>In the following example we will consider the case of <strong>notes</strong> and how we can verify in <strong>jest</strong> repetitive tests
if a broken rule is present in the error response. To do that we surround the method under test in a <code class="language-plaintext highlighter-rouge">try</code> <code class="language-plaintext highlighter-rouge">catch</code> block
and use jest <code class="language-plaintext highlighter-rouge">expect.arrayContaining</code> assertion on the <code class="language-plaintext highlighter-rouge">validationErrors</code> array in the error content</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">describe</span><span class="p">(</span><span class="dl">'</span><span class="s1">validateNoteInput</span><span class="dl">'</span><span class="p">,</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">test</span><span class="p">.</span><span class="nx">each</span><span class="p">([</span>
<span class="c1">// Test cases go here as an array of arrays</span>
<span class="c1">// Each inner array represents a set of arguments to pass to the function</span>
<span class="c1">// The last element of the inner array is the expected error message</span>
<span class="p">[</span><span class="mi">123</span><span class="p">,</span> <span class="p">{</span> <span class="na">userId</span><span class="p">:</span> <span class="kc">null</span><span class="p">,</span> <span class="na">title</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Test</span><span class="dl">'</span><span class="p">,</span> <span class="na">content</span><span class="p">:</span> <span class="dl">'</span><span class="s1">This is a test note</span><span class="dl">'</span> <span class="p">},</span> <span class="nx">NoteValidationErrorMessages</span><span class="p">.</span><span class="nx">MISSING_USER_ID</span><span class="p">],</span>
<span class="p">[</span><span class="mi">456</span><span class="p">,</span> <span class="p">{</span> <span class="na">userId</span><span class="p">:</span> <span class="mi">789</span><span class="p">,</span> <span class="na">title</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Test</span><span class="dl">'</span><span class="p">,</span> <span class="na">content</span><span class="p">:</span> <span class="dl">'</span><span class="s1">This is a test note</span><span class="dl">'</span> <span class="p">},</span> <span class="nx">NoteValidationErrorMessages</span><span class="p">.</span><span class="nx">USER_ID_NOT_MATCHING</span><span class="p">],</span>
<span class="p">[</span><span class="mi">111</span><span class="p">,</span> <span class="p">{</span> <span class="na">userId</span><span class="p">:</span> <span class="mi">111</span><span class="p">,</span> <span class="na">title</span><span class="p">:</span> <span class="kc">null</span><span class="p">,</span> <span class="na">content</span><span class="p">:</span> <span class="dl">'</span><span class="s1">This is a test note</span><span class="dl">'</span> <span class="p">},</span> <span class="nx">NoteValidationErrorMessages</span><span class="p">.</span><span class="nx">MISSING_TITLE</span><span class="p">],</span>
<span class="p">[</span><span class="mi">222</span><span class="p">,</span> <span class="p">{</span> <span class="na">userId</span><span class="p">:</span> <span class="mi">222</span><span class="p">,</span> <span class="na">title</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Test</span><span class="dl">'</span><span class="p">,</span> <span class="na">content</span><span class="p">:</span> <span class="kc">null</span> <span class="p">},</span> <span class="nx">NoteValidationErrorMessages</span><span class="p">.</span><span class="nx">MISSING_CONTENT</span><span class="p">],</span>
<span class="p">[</span><span class="mi">333</span><span class="p">,</span> <span class="p">{</span> <span class="na">userId</span><span class="p">:</span> <span class="mi">333</span><span class="p">,</span> <span class="na">title</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Test</span><span class="dl">'</span><span class="p">,</span> <span class="na">content</span><span class="p">:</span> <span class="dl">'</span><span class="s1">x</span><span class="dl">'</span><span class="p">.</span><span class="nx">repeat</span><span class="p">(</span><span class="nx">NoteValidationRules</span><span class="p">.</span><span class="nx">MAX_NUMBER_OF_CHARS_FOR_CONTENT</span> <span class="o">+</span> <span class="mi">1</span><span class="p">)</span> <span class="p">},</span> <span class="nx">NoteValidationErrorMessages</span><span class="p">.</span><span class="nx">CONTENT_TOO_LONG</span><span class="p">],</span>
<span class="p">])(</span><span class="dl">'</span><span class="s1">throws a ValidationError with the correct error message</span><span class="dl">'</span><span class="p">,</span> <span class="p">(</span><span class="nx">userId</span><span class="p">,</span> <span class="nx">note</span><span class="p">,</span> <span class="nx">expectedErrorMessage</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
<span class="k">try</span> <span class="p">{</span>
<span class="nx">expect</span><span class="p">(()</span> <span class="o">=></span> <span class="nx">noteInputValidator</span><span class="p">.</span><span class="nx">validateNoteInput</span><span class="p">(</span><span class="nx">userId</span><span class="p">,</span> <span class="nx">note</span><span class="p">)).</span><span class="nx">toThrowError</span><span class="p">(</span><span class="nx">ValidationError</span><span class="p">);</span>
<span class="nx">expect</span><span class="p">(()</span> <span class="o">=></span> <span class="nx">noteInputValidator</span><span class="p">.</span><span class="nx">validateNoteInput</span><span class="p">(</span><span class="nx">userId</span><span class="p">,</span> <span class="nx">note</span><span class="p">)).</span><span class="nx">toThrowError</span><span class="p">(</span><span class="nx">NoteValidationErrorMessages</span><span class="p">.</span><span class="nx">NOTE_NOT_VALID</span><span class="p">);</span>
<span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="c1">// If the function threw an error, test that the error message is correct</span>
<span class="nx">expect</span><span class="p">(</span><span class="nx">error</span><span class="p">.</span><span class="nx">validationErrors</span><span class="p">).</span><span class="nx">toEqual</span><span class="p">(</span><span class="nx">expect</span><span class="p">.</span><span class="nx">arrayContaining</span><span class="p">(</span><span class="nx">expectedErrorMessage</span><span class="p">));</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="p">});</span>
</code></pre></div></div>
<p><strong>Project</strong>: <a href="https://github.com/CodeverDotDev/codever"><code class="language-plaintext highlighter-rouge">codever</code></a> - <strong>File</strong>: <code class="language-plaintext highlighter-rouge">note-input.validator.test.js</code></p>
<p>The method under test is defined in the following snippet</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">const</span> <span class="nx">ValidationError</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="dl">'</span><span class="s1">../../../error/validation.error</span><span class="dl">'</span><span class="p">);</span>
<span class="kd">let</span> <span class="nx">validateNoteInput</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">userId</span><span class="p">,</span> <span class="nx">note</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">let</span> <span class="nx">validationErrorMessages</span> <span class="o">=</span> <span class="p">[];</span>
<span class="k">if</span> <span class="p">(</span> <span class="o">!</span><span class="nx">note</span><span class="p">.</span><span class="nx">userId</span> <span class="p">)</span> <span class="p">{</span>
<span class="nx">validationErrorMessages</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">NoteValidationErrorMessages</span><span class="p">.</span><span class="nx">MISSING_USER_ID</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">if</span> <span class="p">(</span> <span class="nx">note</span><span class="p">.</span><span class="nx">userId</span> <span class="o">!==</span> <span class="nx">userId</span> <span class="p">)</span> <span class="p">{</span>
<span class="nx">validationErrorMessages</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">NoteValidationErrorMessages</span><span class="p">.</span><span class="nx">MISSING_USER_ID</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">if</span> <span class="p">(</span> <span class="o">!</span><span class="nx">note</span><span class="p">.</span><span class="nx">title</span> <span class="p">)</span> <span class="p">{</span>
<span class="nx">validationErrorMessages</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">NoteValidationErrorMessages</span><span class="p">.</span><span class="nx">MISSING_TITLE</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">if</span> <span class="p">(</span> <span class="o">!</span><span class="nx">note</span><span class="p">.</span><span class="nx">content</span> <span class="p">)</span> <span class="p">{</span>
<span class="nx">validationErrorMessages</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">NoteValidationErrorMessages</span><span class="p">.</span><span class="nx">MISSING_CONTENT</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">if</span> <span class="p">(</span> <span class="nx">note</span><span class="p">.</span><span class="nx">content</span> <span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">descriptionIsTooLong</span> <span class="o">=</span> <span class="nx">note</span><span class="p">.</span><span class="nx">content</span><span class="p">.</span><span class="nx">length</span> <span class="o">></span> <span class="nx">NoteValidationRules</span><span class="p">.</span><span class="nx">MAX_NUMBER_OF_CHARS_FOR_CONTENT</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span> <span class="nx">descriptionIsTooLong</span> <span class="p">)</span> <span class="p">{</span>
<span class="nx">validationErrorMessages</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">NoteValidationErrorMessages</span><span class="p">.</span><span class="nx">CONTENT_TOO_LONG</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="k">if</span> <span class="p">(</span> <span class="nx">validationErrorMessages</span><span class="p">.</span><span class="nx">length</span> <span class="o">></span> <span class="mi">0</span> <span class="p">)</span> <span class="p">{</span>
<span class="k">throw</span> <span class="k">new</span> <span class="nx">ValidationError</span><span class="p">(</span><span class="nx">NoteValidationErrorMessages</span><span class="p">.</span><span class="nx">NOTE_NOT_VALID</span><span class="p">,</span> <span class="nx">validationErrorMessages</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="kd">const</span> <span class="nx">NoteValidationRules</span> <span class="o">=</span> <span class="p">{</span>
<span class="na">MAX_NUMBER_OF_CHARS_FOR_CONTENT</span><span class="p">:</span> <span class="mi">10000</span><span class="p">,</span>
<span class="na">MAX_NUMBER_OF_TAGS</span><span class="p">:</span> <span class="mi">8</span>
<span class="p">}</span>
<span class="kd">const</span> <span class="nx">NoteValidationErrorMessages</span> <span class="o">=</span> <span class="p">{</span>
<span class="na">NOTE_NOT_VALID</span><span class="p">:</span> <span class="dl">'</span><span class="s1">The note you submitted is not valid</span><span class="dl">'</span><span class="p">,</span>
<span class="na">MISSING_USER_ID</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Missing required attribute - userId</span><span class="dl">'</span><span class="p">,</span>
<span class="na">USER_ID_NOT_MATCHING</span><span class="p">:</span> <span class="dl">'</span><span class="s1">The userId of the bookmark does not match the userId parameter</span><span class="dl">'</span><span class="p">,</span>
<span class="na">MISSING_TITLE</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Missing required attribute - title</span><span class="dl">'</span><span class="p">,</span>
<span class="na">MISSING_CONTENT</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Missing required attribute - content</span><span class="dl">'</span><span class="p">,</span>
<span class="na">CONTENT_TOO_LONG</span><span class="p">:</span> <span class="s2">`The content is too long. Only </span><span class="p">${</span><span class="nx">NoteValidationRules</span><span class="p">.</span><span class="nx">MAX_NUMBER_OF_CHARS_FOR_CONTENT</span><span class="p">}</span><span class="s2"> allowed`</span><span class="p">,</span>
<span class="p">}</span>
<span class="nx">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="p">{</span>
<span class="na">validateNoteInput</span><span class="p">:</span> <span class="nx">validateNoteInput</span><span class="p">,</span>
<span class="na">NoteValidationRules</span><span class="p">:</span> <span class="nx">NoteValidationRules</span><span class="p">,</span>
<span class="na">NoteValidationErrorMessages</span><span class="p">:</span> <span class="nx">NoteValidationErrorMessages</span>
<span class="p">};</span>
</code></pre></div></div>
<p><span style="font-size: 0.9rem">
<strong>Reference - </strong>
<a href="https://github.com/CodeverDotDev/codever" target="_blank" style="font-weight: lighter">
https://github.com/CodeverDotDev/codever
</a>
</span></p>
<hr />
<p class="note_normal">
Shared with <i class="fa fa-heart" style="color:orangered"></i> from <a href="https://www.codever.dev/snippets/640858c71b5b8945055f7c42/details">Codever</a>.
👉 Use the <a href="https://www.codever.dev/snippets/640858c71b5b8945055f7c42/details" class="copy-to-mine-btn"><i class="fa fa-copy"></i> Copy to mine</a>
functionality to copy this snippet to your own personal collection and easy manage
your code snippets.
<br />
<br />
<b>Codever</b> is open source on <a href="https://github.com/CodeverDotDev">Github</a> ⭐🙏
</p>
<p><a href="https://www.codepedia.org/snippets/640858c71b5b8945055f7c42/test-error-with-array-messages-content-containing-message-in-jest-test-each">Test error with array messages content containing message in jest test.each</a> was originally published by CodepediaOrg at <a href="https://www.codepedia.org">CodepediaOrg</a> on March 08, 2023.</p>
https://www.codepedia.org/snippets/6401910a88deee44f755a5ba/override-nested-child-element-with-spread-operator-in-javascript
2023-03-04T00:00:00+01:00
2023-03-04T00:00:00+01:00
Adrian Matei (aka adixchen)
https://www.codepedia.org
adixchen@proton.me
<p>For the following <code class="language-plaintext highlighter-rouge">req</code> object there is a need to override the <code class="language-plaintext highlighter-rouge">stackoverflowId</code> attribute in a jest test</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">const</span> <span class="nx">req</span> <span class="o">=</span> <span class="p">{</span>
<span class="na">body</span><span class="p">:</span> <span class="p">{</span>
<span class="na">_id</span><span class="p">:</span> <span class="dl">'</span><span class="s1">123</span><span class="dl">'</span><span class="p">,</span>
<span class="na">name</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Codever</span><span class="dl">'</span><span class="p">,</span>
<span class="na">location</span><span class="p">:</span> <span class="dl">'</span><span class="s1">https://www.codever.dev</span><span class="dl">'</span><span class="p">,</span>
<span class="na">language</span><span class="p">:</span> <span class="dl">'</span><span class="s1">en</span><span class="dl">'</span><span class="p">,</span>
<span class="na">description</span><span class="p">:</span> <span class="dl">'</span><span class="s1">This is a test bookmark</span><span class="dl">'</span><span class="p">,</span>
<span class="na">tags</span><span class="p">:</span> <span class="p">[</span><span class="dl">'</span><span class="s1">test</span><span class="dl">'</span><span class="p">],</span>
<span class="na">public</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
<span class="na">stackoverflowQuestionId</span><span class="p">:</span> <span class="kc">null</span>
<span class="p">},</span>
<span class="na">params</span><span class="p">:</span> <span class="p">{</span>
<span class="na">userId</span><span class="p">:</span> <span class="dl">'</span><span class="s1">456</span><span class="dl">'</span><span class="p">,</span>
<span class="p">},</span>
<span class="p">};</span>
</code></pre></div></div>
<p><strong>Project</strong>: <code class="language-plaintext highlighter-rouge">codever</code> - <strong>File</strong>: <code class="language-plaintext highlighter-rouge">bookmark-request.mapper.test.js</code></p>
<p>Here is how to achieve that with the spread operator</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <span class="p">{...</span><span class="nx">req</span><span class="p">,</span>
<span class="nx">body</span> <span class="p">:</span> <span class="p">{</span>
<span class="p">...</span><span class="nx">req</span><span class="p">.</span><span class="nx">body</span><span class="p">,</span>
<span class="nx">stackoverflowQuestionId</span><span class="p">:</span> <span class="mi">123456</span>
<span class="p">}</span>
<span class="p">}</span>
</code></pre></div></div>
<p>The complete function where this is used is shown below:</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <span class="nx">test</span><span class="p">.</span><span class="nx">each</span><span class="p">([</span>
<span class="p">[</span>
<span class="dl">'</span><span class="s1">should set stackoverflowQuestionId if it is provided</span><span class="dl">'</span><span class="p">,</span>
<span class="p">{...</span><span class="nx">req</span><span class="p">,</span>
<span class="na">body</span> <span class="p">:</span> <span class="p">{</span>
<span class="p">...</span><span class="nx">req</span><span class="p">.</span><span class="nx">body</span><span class="p">,</span>
<span class="na">stackoverflowQuestionId</span><span class="p">:</span> <span class="mi">123456</span>
<span class="p">}</span>
<span class="p">},</span>
<span class="k">new</span> <span class="nx">Bookmark</span><span class="p">({</span>
<span class="na">_id</span><span class="p">:</span> <span class="dl">'</span><span class="s1">123</span><span class="dl">'</span><span class="p">,</span>
<span class="na">name</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Codever</span><span class="dl">'</span><span class="p">,</span>
<span class="na">location</span><span class="p">:</span> <span class="dl">'</span><span class="s1">https://www.codever.dev</span><span class="dl">'</span><span class="p">,</span>
<span class="na">language</span><span class="p">:</span> <span class="dl">'</span><span class="s1">en</span><span class="dl">'</span><span class="p">,</span>
<span class="na">description</span><span class="p">:</span> <span class="dl">'</span><span class="s1">This is a test bookmark</span><span class="dl">'</span><span class="p">,</span>
<span class="na">descriptionHtml</span><span class="p">:</span> <span class="dl">'</span><span class="s1"><p>This is a test bookmark</p></span><span class="dl">'</span><span class="p">,</span>
<span class="na">tags</span><span class="p">:</span> <span class="p">[</span><span class="dl">'</span><span class="s1">test</span><span class="dl">'</span><span class="p">],</span>
<span class="na">public</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
<span class="na">userId</span><span class="p">:</span> <span class="dl">'</span><span class="s1">456</span><span class="dl">'</span><span class="p">,</span>
<span class="na">likeCount</span><span class="p">:</span> <span class="mi">0</span><span class="p">,</span>
<span class="na">youtubeVideoId</span><span class="p">:</span> <span class="kc">null</span><span class="p">,</span>
<span class="na">stackoverflowQuestionId</span><span class="p">:</span> <span class="mi">123456</span><span class="p">,</span>
<span class="p">})</span>
<span class="p">],</span>
<span class="p">])(</span><span class="dl">'</span><span class="s1">%s</span><span class="dl">'</span><span class="p">,</span> <span class="p">(</span><span class="nx">testname</span><span class="p">,</span> <span class="nx">req</span><span class="p">,</span> <span class="nx">expectedBookmark</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">resultBookmark</span> <span class="o">=</span> <span class="nx">bookmarkRequestMapper</span><span class="p">.</span><span class="nx">toBookmark</span><span class="p">(</span><span class="nx">req</span><span class="p">);</span>
<span class="nx">expect</span><span class="p">({...</span><span class="nx">resultBookmark</span><span class="p">.</span><span class="nx">toObject</span><span class="p">(),</span> <span class="na">_id</span><span class="p">:</span> <span class="p">{}}).</span><span class="nx">toEqual</span><span class="p">({...</span><span class="nx">expectedBookmark</span><span class="p">.</span><span class="nx">toObject</span><span class="p">(),</span> <span class="na">_id</span><span class="p">:</span> <span class="p">{}});</span>
<span class="nx">expect</span><span class="p">(</span><span class="nx">showdown</span><span class="p">.</span><span class="nx">Converter</span><span class="p">).</span><span class="nx">toHaveBeenCalledTimes</span><span class="p">(</span><span class="mi">1</span><span class="p">);</span>
<span class="nx">expect</span><span class="p">(</span><span class="nx">showdown</span><span class="p">.</span><span class="nx">Converter</span><span class="p">().</span><span class="nx">makeHtml</span><span class="p">).</span><span class="nx">toHaveBeenCalledTimes</span><span class="p">(</span><span class="mi">1</span><span class="p">);</span>
<span class="nx">expect</span><span class="p">(</span><span class="nx">showdown</span><span class="p">.</span><span class="nx">Converter</span><span class="p">().</span><span class="nx">makeHtml</span><span class="p">).</span><span class="nx">toHaveBeenCalledWith</span><span class="p">(</span><span class="dl">'</span><span class="s1">This is a test bookmark</span><span class="dl">'</span><span class="p">);</span>
<span class="p">});</span>
</code></pre></div></div>
<p><span style="font-size: 0.9rem">
<strong>Reference - </strong>
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax" target="_blank" style="font-weight: lighter">
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
</a>
</span></p>
<hr />
<p class="note_normal">
Shared with <i class="fa fa-heart" style="color:orangered"></i> from <a href="https://www.codever.dev/snippets/6401910a88deee44f755a5ba/details">Codever</a>.
👉 Use the <a href="https://www.codever.dev/snippets/6401910a88deee44f755a5ba/details" class="copy-to-mine-btn"><i class="fa fa-copy"></i> Copy to mine</a>
functionality to copy this snippet to your own personal collection and easy manage
your code snippets.
<br />
<br />
<b>Codever</b> is open source on <a href="https://github.com/CodeverDotDev">Github</a> ⭐🙏
</p>
<p><a href="https://www.codepedia.org/snippets/6401910a88deee44f755a5ba/override-nested-child-element-with-spread-operator-in-javascript">Override nested child element with spread operator in javascript</a> was originally published by CodepediaOrg at <a href="https://www.codepedia.org">CodepediaOrg</a> on March 04, 2023.</p>
https://www.codepedia.org/snippets/64004a8a88deee44f7559f76/an-easy-way-to-set-test-name-in-jest-repetitive-test-test-each
2023-03-03T00:00:00+01:00
2023-03-03T00:00:00+01:00
Adrian Matei (aka adixchen)
https://www.codepedia.org
adixchen@proton.me
<p>One easy way to display a custom name for each <code class="language-plaintext highlighter-rouge">test.each</code> test in jest,
is to place the text name in the first element of each array of the input table for the method
and use it as name in the <code class="language-plaintext highlighter-rouge">test.each</code> method - <code class="language-plaintext highlighter-rouge">('%s', (testname, req, expectedBookmark) </code>, as in the following snippet:</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">const</span> <span class="nx">showdown</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="dl">'</span><span class="s1">showdown</span><span class="dl">'</span><span class="p">);</span>
<span class="kd">const</span> <span class="nx">Bookmark</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="dl">'</span><span class="s1">../../model/bookmark</span><span class="dl">'</span><span class="p">);</span>
<span class="kd">const</span> <span class="nx">bookmarkRequestMapper</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="dl">'</span><span class="s1">./bookmark-request.mapper</span><span class="dl">'</span><span class="p">);</span>
<span class="nx">jest</span><span class="p">.</span><span class="nx">mock</span><span class="p">(</span><span class="dl">'</span><span class="s1">showdown</span><span class="dl">'</span><span class="p">,</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">makeHtml</span> <span class="o">=</span> <span class="nx">jest</span><span class="p">.</span><span class="nx">fn</span><span class="p">(()</span> <span class="o">=></span> <span class="dl">'</span><span class="s1"><p>This is a test bookmark</p></span><span class="dl">'</span><span class="p">);</span>
<span class="k">return</span> <span class="p">{</span>
<span class="na">Converter</span><span class="p">:</span> <span class="nx">jest</span><span class="p">.</span><span class="nx">fn</span><span class="p">().</span><span class="nx">mockImplementation</span><span class="p">(()</span> <span class="o">=></span> <span class="p">({</span><span class="nx">makeHtml</span><span class="p">})),</span>
<span class="p">};</span>
<span class="p">});</span>
<span class="nx">describe</span><span class="p">(</span><span class="dl">'</span><span class="s1">toBookmark</span><span class="dl">'</span><span class="p">,</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">req</span> <span class="o">=</span> <span class="p">{</span>
<span class="na">body</span><span class="p">:</span> <span class="p">{</span>
<span class="na">_id</span><span class="p">:</span> <span class="dl">'</span><span class="s1">123</span><span class="dl">'</span><span class="p">,</span>
<span class="na">name</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Test Bookmark</span><span class="dl">'</span><span class="p">,</span>
<span class="na">location</span><span class="p">:</span> <span class="dl">'</span><span class="s1">https://example.com</span><span class="dl">'</span><span class="p">,</span>
<span class="na">language</span><span class="p">:</span> <span class="dl">'</span><span class="s1">en</span><span class="dl">'</span><span class="p">,</span>
<span class="na">description</span><span class="p">:</span> <span class="dl">'</span><span class="s1">This is a test bookmark</span><span class="dl">'</span><span class="p">,</span>
<span class="na">tags</span><span class="p">:</span> <span class="p">[</span><span class="dl">'</span><span class="s1">test</span><span class="dl">'</span><span class="p">],</span>
<span class="na">public</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
<span class="p">},</span>
<span class="na">params</span><span class="p">:</span> <span class="p">{</span>
<span class="na">userId</span><span class="p">:</span> <span class="dl">'</span><span class="s1">456</span><span class="dl">'</span><span class="p">,</span>
<span class="p">},</span>
<span class="p">};</span>
<span class="nx">beforeEach</span><span class="p">(()</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">showdown</span><span class="p">.</span><span class="nx">Converter</span><span class="p">.</span><span class="nx">mockClear</span><span class="p">();</span>
<span class="nx">showdown</span><span class="p">.</span><span class="nx">Converter</span><span class="p">().</span><span class="nx">makeHtml</span><span class="p">.</span><span class="nx">mockClear</span><span class="p">();</span>
<span class="nx">req</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">descriptionHtml</span> <span class="o">=</span> <span class="kc">undefined</span><span class="p">;</span>
<span class="nx">req</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">youtubeVideoId</span> <span class="o">=</span> <span class="kc">undefined</span><span class="p">;</span>
<span class="nx">req</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">stackoverflowQuestionId</span> <span class="o">=</span> <span class="kc">undefined</span><span class="p">;</span>
<span class="p">});</span>
<span class="nx">test</span><span class="p">.</span><span class="nx">each</span><span class="p">([</span>
<span class="p">[</span>
<span class="dl">'</span><span class="s1">should return a new bookmark</span><span class="dl">'</span><span class="p">,</span>
<span class="nx">req</span><span class="p">,</span>
<span class="k">new</span> <span class="nx">Bookmark</span><span class="p">({</span>
<span class="na">_id</span><span class="p">:</span> <span class="mi">123</span><span class="p">,</span>
<span class="na">name</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Test Bookmark</span><span class="dl">'</span><span class="p">,</span>
<span class="na">location</span><span class="p">:</span> <span class="dl">'</span><span class="s1">https://example.com</span><span class="dl">'</span><span class="p">,</span>
<span class="na">language</span><span class="p">:</span> <span class="dl">'</span><span class="s1">en</span><span class="dl">'</span><span class="p">,</span>
<span class="na">description</span><span class="p">:</span> <span class="dl">'</span><span class="s1">This is a test bookmark</span><span class="dl">'</span><span class="p">,</span>
<span class="na">descriptionHtml</span><span class="p">:</span> <span class="dl">'</span><span class="s1"><p>This is a test bookmark</p></span><span class="dl">'</span><span class="p">,</span>
<span class="na">tags</span><span class="p">:</span> <span class="p">[</span><span class="dl">'</span><span class="s1">test</span><span class="dl">'</span><span class="p">],</span>
<span class="na">public</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
<span class="na">userId</span><span class="p">:</span> <span class="dl">'</span><span class="s1">456</span><span class="dl">'</span><span class="p">,</span>
<span class="na">likeCount</span><span class="p">:</span> <span class="mi">0</span><span class="p">,</span>
<span class="na">youtubeVideoId</span><span class="p">:</span> <span class="kc">null</span><span class="p">,</span>
<span class="na">stackoverflowQuestionId</span><span class="p">:</span> <span class="kc">null</span><span class="p">,</span>
<span class="p">})</span>
<span class="p">],</span>
<span class="p">[</span>
<span class="dl">'</span><span class="s1">should set youtubeVideoId if it is provided</span><span class="dl">'</span><span class="p">,</span>
<span class="p">{...</span><span class="nx">req</span><span class="p">,</span>
<span class="na">body</span> <span class="p">:</span> <span class="p">{</span>
<span class="p">...</span><span class="nx">req</span><span class="p">.</span><span class="nx">body</span><span class="p">,</span>
<span class="na">youtubeVideoId</span><span class="p">:</span> <span class="dl">'</span><span class="s1">abcd1234</span><span class="dl">'</span>
<span class="p">}</span>
<span class="p">},</span>
<span class="k">new</span> <span class="nx">Bookmark</span><span class="p">({</span>
<span class="na">_id</span><span class="p">:</span> <span class="dl">'</span><span class="s1">123</span><span class="dl">'</span><span class="p">,</span>
<span class="na">name</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Test Bookmark</span><span class="dl">'</span><span class="p">,</span>
<span class="na">location</span><span class="p">:</span> <span class="dl">'</span><span class="s1">https://example.com</span><span class="dl">'</span><span class="p">,</span>
<span class="na">language</span><span class="p">:</span> <span class="dl">'</span><span class="s1">en</span><span class="dl">'</span><span class="p">,</span>
<span class="na">description</span><span class="p">:</span> <span class="dl">'</span><span class="s1">This is a test bookmark</span><span class="dl">'</span><span class="p">,</span>
<span class="na">descriptionHtml</span><span class="p">:</span> <span class="dl">'</span><span class="s1"><p>This is a test bookmark</p></span><span class="dl">'</span><span class="p">,</span>
<span class="na">tags</span><span class="p">:</span> <span class="p">[</span><span class="dl">'</span><span class="s1">test</span><span class="dl">'</span><span class="p">],</span>
<span class="na">public</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
<span class="na">userId</span><span class="p">:</span> <span class="dl">'</span><span class="s1">456</span><span class="dl">'</span><span class="p">,</span>
<span class="na">likeCount</span><span class="p">:</span> <span class="mi">0</span><span class="p">,</span>
<span class="na">youtubeVideoId</span><span class="p">:</span> <span class="dl">'</span><span class="s1">abcd1234</span><span class="dl">'</span><span class="p">,</span>
<span class="na">stackoverflowQuestionId</span><span class="p">:</span> <span class="kc">null</span><span class="p">,</span>
<span class="p">})</span>
<span class="p">],</span>
<span class="p">[</span>
<span class="dl">'</span><span class="s1">should set stackoverflowQuestionId if it is provided</span><span class="dl">'</span><span class="p">,</span>
<span class="p">{...</span><span class="nx">req</span><span class="p">,</span>
<span class="na">body</span> <span class="p">:</span> <span class="p">{</span>
<span class="p">...</span><span class="nx">req</span><span class="p">.</span><span class="nx">body</span><span class="p">,</span>
<span class="na">stackoverflowQuestionId</span><span class="p">:</span> <span class="mi">123456</span>
<span class="p">}</span>
<span class="p">},</span>
<span class="k">new</span> <span class="nx">Bookmark</span><span class="p">({</span>
<span class="na">_id</span><span class="p">:</span> <span class="dl">'</span><span class="s1">123</span><span class="dl">'</span><span class="p">,</span>
<span class="na">name</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Test Bookmark</span><span class="dl">'</span><span class="p">,</span>
<span class="na">location</span><span class="p">:</span> <span class="dl">'</span><span class="s1">https://example.com</span><span class="dl">'</span><span class="p">,</span>
<span class="na">language</span><span class="p">:</span> <span class="dl">'</span><span class="s1">en</span><span class="dl">'</span><span class="p">,</span>
<span class="na">description</span><span class="p">:</span> <span class="dl">'</span><span class="s1">This is a test bookmark</span><span class="dl">'</span><span class="p">,</span>
<span class="na">descriptionHtml</span><span class="p">:</span> <span class="dl">'</span><span class="s1"><p>This is a test bookmark</p></span><span class="dl">'</span><span class="p">,</span>
<span class="na">tags</span><span class="p">:</span> <span class="p">[</span><span class="dl">'</span><span class="s1">test</span><span class="dl">'</span><span class="p">],</span>
<span class="na">public</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
<span class="na">userId</span><span class="p">:</span> <span class="dl">'</span><span class="s1">456</span><span class="dl">'</span><span class="p">,</span>
<span class="na">likeCount</span><span class="p">:</span> <span class="mi">0</span><span class="p">,</span>
<span class="na">youtubeVideoId</span><span class="p">:</span> <span class="kc">null</span><span class="p">,</span>
<span class="na">stackoverflowQuestionId</span><span class="p">:</span> <span class="mi">123456</span><span class="p">,</span>
<span class="p">})</span>
<span class="p">],</span>
<span class="p">])(</span><span class="dl">'</span><span class="s1">%s</span><span class="dl">'</span><span class="p">,</span> <span class="p">(</span><span class="nx">testname</span><span class="p">,</span> <span class="nx">req</span><span class="p">,</span> <span class="nx">expectedBookmark</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">resultBookmark</span> <span class="o">=</span> <span class="nx">bookmarkRequestMapper</span><span class="p">.</span><span class="nx">toBookmark</span><span class="p">(</span><span class="nx">req</span><span class="p">);</span>
<span class="nx">expect</span><span class="p">({...</span><span class="nx">resultBookmark</span><span class="p">.</span><span class="nx">toObject</span><span class="p">(),</span> <span class="na">_id</span><span class="p">:</span> <span class="p">{}}).</span><span class="nx">toEqual</span><span class="p">({...</span><span class="nx">expectedBookmark</span><span class="p">.</span><span class="nx">toObject</span><span class="p">(),</span> <span class="na">_id</span><span class="p">:</span> <span class="p">{}});</span>
<span class="nx">expect</span><span class="p">(</span><span class="nx">showdown</span><span class="p">.</span><span class="nx">Converter</span><span class="p">).</span><span class="nx">toHaveBeenCalledTimes</span><span class="p">(</span><span class="mi">1</span><span class="p">);</span>
<span class="nx">expect</span><span class="p">(</span><span class="nx">showdown</span><span class="p">.</span><span class="nx">Converter</span><span class="p">().</span><span class="nx">makeHtml</span><span class="p">).</span><span class="nx">toHaveBeenCalledTimes</span><span class="p">(</span><span class="mi">1</span><span class="p">);</span>
<span class="nx">expect</span><span class="p">(</span><span class="nx">showdown</span><span class="p">.</span><span class="nx">Converter</span><span class="p">().</span><span class="nx">makeHtml</span><span class="p">).</span><span class="nx">toHaveBeenCalledWith</span><span class="p">(</span><span class="dl">'</span><span class="s1">This is a test bookmark</span><span class="dl">'</span><span class="p">);</span>
<span class="p">});</span>
<span class="p">});</span>
</code></pre></div></div>
<p><strong>Project</strong>: <code class="language-plaintext highlighter-rouge">codever</code> - <strong>File</strong>: <code class="language-plaintext highlighter-rouge">bookmark-request.mapper.test.js</code></p>
<p>Of course you are free to display other data where appropiate…</p>
<p><span style="font-size: 0.9rem">
<strong>Reference - </strong>
<a href="https://jestjs.io/docs/api#testeachtablename-fn-timeout" target="_blank" style="font-weight: lighter">
https://jestjs.io/docs/api#testeachtablename-fn-timeout
</a>
</span></p>
<hr />
<p class="note_normal">
Shared with <i class="fa fa-heart" style="color:orangered"></i> from <a href="https://www.codever.dev/snippets/64004a8a88deee44f7559f76/details">Codever</a>.
👉 Use the <a href="https://www.codever.dev/snippets/64004a8a88deee44f7559f76/details" class="copy-to-mine-btn"><i class="fa fa-copy"></i> Copy to mine</a>
functionality to copy this snippet to your own personal collection and easy manage
your code snippets.
<br />
<br />
<b>Codever</b> is open source on <a href="https://github.com/CodeverDotDev">Github</a> ⭐🙏
</p>
<p><a href="https://www.codepedia.org/snippets/64004a8a88deee44f7559f76/an-easy-way-to-set-test-name-in-jest-repetitive-each-test">An easy way to set test name in jest repetitive tests (test.each)</a> was originally published by CodepediaOrg at <a href="https://www.codepedia.org">CodepediaOrg</a> on March 03, 2023.</p>
https://www.codepedia.org/snippets/63ff7adb1b5b8945055f4e59/compare-mongoose-model-objects-in-jest
2023-03-02T00:00:00+01:00
2023-03-02T00:00:00+01:00
Adrian Matei (aka adixchen)
https://www.codepedia.org
adixchen@proton.me
<p>The schema model object in Mongoose provides an <code class="language-plaintext highlighter-rouge">_id</code> that is of type <code class="language-plaintext highlighter-rouge">ObjectId</code>. If you are not interested in
comparing value of this attribute when you compare it compare objects in jest, you can exclude it
by calling the <code class="language-plaintext highlighter-rouge">toObject</code> method of the mongoose model and set the <code class="language-plaintext highlighter-rouge">_id</code> object to nothing via the spread operator,
something similar to the following:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>expect({...resultBookmark.toObject(), _id: {}}).toEqual({...expectedBookmark.toObject(), _id: {}})
</code></pre></div></div>
<p>The complete testing method with the setup is shown in the snippet bellow,
where expected bookmark model should match the mapped bookmark from the given request:</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">const</span> <span class="nx">showdown</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="dl">'</span><span class="s1">showdown</span><span class="dl">'</span><span class="p">);</span>
<span class="kd">const</span> <span class="nx">Bookmark</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="dl">'</span><span class="s1">../../model/bookmark</span><span class="dl">'</span><span class="p">);</span>
<span class="kd">const</span> <span class="nx">bookmarkRequestMapper</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="dl">'</span><span class="s1">./bookmark-request.mapper</span><span class="dl">'</span><span class="p">);</span>
<span class="nx">jest</span><span class="p">.</span><span class="nx">mock</span><span class="p">(</span><span class="dl">'</span><span class="s1">showdown</span><span class="dl">'</span><span class="p">,</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">makeHtml</span> <span class="o">=</span> <span class="nx">jest</span><span class="p">.</span><span class="nx">fn</span><span class="p">(()</span> <span class="o">=></span> <span class="dl">'</span><span class="s1"><p>This is a test bookmark</p></span><span class="dl">'</span><span class="p">);</span>
<span class="k">return</span> <span class="p">{</span>
<span class="na">Converter</span><span class="p">:</span> <span class="nx">jest</span><span class="p">.</span><span class="nx">fn</span><span class="p">().</span><span class="nx">mockImplementation</span><span class="p">(()</span> <span class="o">=></span> <span class="p">({</span><span class="nx">makeHtml</span><span class="p">})),</span>
<span class="p">};</span>
<span class="p">});</span>
<span class="nx">describe</span><span class="p">(</span><span class="dl">'</span><span class="s1">toBookmark</span><span class="dl">'</span><span class="p">,</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">req</span> <span class="o">=</span> <span class="p">{</span>
<span class="na">body</span><span class="p">:</span> <span class="p">{</span>
<span class="na">_id</span><span class="p">:</span> <span class="dl">'</span><span class="s1">123</span><span class="dl">'</span><span class="p">,</span>
<span class="na">name</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Test Bookmark</span><span class="dl">'</span><span class="p">,</span>
<span class="na">location</span><span class="p">:</span> <span class="dl">'</span><span class="s1">https://example.com</span><span class="dl">'</span><span class="p">,</span>
<span class="na">language</span><span class="p">:</span> <span class="dl">'</span><span class="s1">en</span><span class="dl">'</span><span class="p">,</span>
<span class="na">description</span><span class="p">:</span> <span class="dl">'</span><span class="s1">This is a test bookmark</span><span class="dl">'</span><span class="p">,</span>
<span class="na">tags</span><span class="p">:</span> <span class="p">[</span><span class="dl">'</span><span class="s1">test</span><span class="dl">'</span><span class="p">],</span>
<span class="na">public</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
<span class="p">},</span>
<span class="na">params</span><span class="p">:</span> <span class="p">{</span>
<span class="na">userId</span><span class="p">:</span> <span class="dl">'</span><span class="s1">456</span><span class="dl">'</span><span class="p">,</span>
<span class="p">},</span>
<span class="p">};</span>
<span class="nx">beforeEach</span><span class="p">(()</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">showdown</span><span class="p">.</span><span class="nx">Converter</span><span class="p">.</span><span class="nx">mockClear</span><span class="p">();</span>
<span class="nx">showdown</span><span class="p">.</span><span class="nx">Converter</span><span class="p">().</span><span class="nx">makeHtml</span><span class="p">.</span><span class="nx">mockClear</span><span class="p">();</span>
<span class="nx">req</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">descriptionHtml</span> <span class="o">=</span> <span class="kc">undefined</span><span class="p">;</span>
<span class="nx">req</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">youtubeVideoId</span> <span class="o">=</span> <span class="kc">undefined</span><span class="p">;</span>
<span class="nx">req</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">stackoverflowQuestionId</span> <span class="o">=</span> <span class="kc">undefined</span><span class="p">;</span>
<span class="p">});</span>
<span class="nx">it</span><span class="p">(</span><span class="dl">'</span><span class="s1">should use descriptionHtml if it is provided</span><span class="dl">'</span><span class="p">,</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">req</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">descriptionHtml</span> <span class="o">=</span> <span class="dl">'</span><span class="s1"><p>This is a test bookmark</p></span><span class="dl">'</span><span class="p">;</span>
<span class="kd">const</span> <span class="nx">expectedBookmark</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Bookmark</span><span class="p">({</span>
<span class="na">_id</span><span class="p">:</span> <span class="dl">'</span><span class="s1">123</span><span class="dl">'</span><span class="p">,</span>
<span class="na">name</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Test Bookmark</span><span class="dl">'</span><span class="p">,</span>
<span class="na">location</span><span class="p">:</span> <span class="dl">'</span><span class="s1">https://example.com</span><span class="dl">'</span><span class="p">,</span>
<span class="na">language</span><span class="p">:</span> <span class="dl">'</span><span class="s1">en</span><span class="dl">'</span><span class="p">,</span>
<span class="na">description</span><span class="p">:</span> <span class="dl">'</span><span class="s1">This is a test bookmark</span><span class="dl">'</span><span class="p">,</span>
<span class="na">descriptionHtml</span><span class="p">:</span> <span class="dl">'</span><span class="s1"><p>This is a test bookmark</p></span><span class="dl">'</span><span class="p">,</span>
<span class="na">tags</span><span class="p">:</span> <span class="p">[</span><span class="dl">'</span><span class="s1">test</span><span class="dl">'</span><span class="p">],</span>
<span class="na">public</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
<span class="na">userId</span><span class="p">:</span> <span class="dl">'</span><span class="s1">456</span><span class="dl">'</span><span class="p">,</span>
<span class="na">likeCount</span><span class="p">:</span> <span class="mi">0</span><span class="p">,</span>
<span class="na">youtubeVideoId</span><span class="p">:</span> <span class="kc">null</span><span class="p">,</span>
<span class="na">stackoverflowQuestionId</span><span class="p">:</span> <span class="kc">null</span><span class="p">,</span>
<span class="p">});</span>
<span class="kd">const</span> <span class="nx">resultBookmark</span> <span class="o">=</span> <span class="nx">bookmarkRequestMapper</span><span class="p">.</span><span class="nx">toBookmark</span><span class="p">(</span><span class="nx">req</span><span class="p">);</span>
<span class="nx">expect</span><span class="p">({...</span><span class="nx">resultBookmark</span><span class="p">.</span><span class="nx">toObject</span><span class="p">(),</span> <span class="na">_id</span><span class="p">:</span> <span class="p">{}}).</span><span class="nx">toEqual</span><span class="p">({...</span><span class="nx">expectedBookmark</span><span class="p">.</span><span class="nx">toObject</span><span class="p">(),</span> <span class="na">_id</span><span class="p">:</span> <span class="p">{}})</span>
<span class="nx">expect</span><span class="p">(</span><span class="nx">showdown</span><span class="p">.</span><span class="nx">Converter</span><span class="p">().</span><span class="nx">makeHtml</span><span class="p">).</span><span class="nx">not</span><span class="p">.</span><span class="nx">toHaveBeenCalled</span><span class="p">();</span>
<span class="p">});</span>
<span class="p">});</span>
</code></pre></div></div>
<p><strong>Project</strong>: <a href="https://github.com/CodeverDotDev/codever"><code class="language-plaintext highlighter-rouge">codever</code></a> - <strong>File</strong>: <code class="language-plaintext highlighter-rouge">bookmark-request.mapper.test.js</code></p>
<hr />
<p class="note_normal">
Shared with <i class="fa fa-heart" style="color:orangered"></i> from <a href="https://www.codever.dev/snippets/63ff7adb1b5b8945055f4e59/details">Codever</a>.
👉 Use the <a href="https://www.codever.dev/snippets/63ff7adb1b5b8945055f4e59/details" class="copy-to-mine-btn"><i class="fa fa-copy"></i> Copy to mine</a>
functionality to copy this snippet to your own personal collection and easy manage
your code snippets.
<br />
<br />
<b>Codever</b> is open source on <a href="https://github.com/CodeverDotDev">Github</a> ⭐🙏
</p>
<p><a href="https://www.codepedia.org/snippets/63ff7adb1b5b8945055f4e59/compare-mongoose-model-objects-in-jest">Compare mongoose model objects in jest excluding _id</a> was originally published by CodepediaOrg at <a href="https://www.codepedia.org">CodepediaOrg</a> on March 02, 2023.</p>
https://www.codepedia.org/snippets/63eb2e2488deee44f7554290/verify-empty-object-with-jest-extended-
2023-02-14T00:00:00+01:00
2023-02-14T00:00:00+01:00
Adrian Matei (aka adixchen)
https://www.codepedia.org
adixchen@proton.me
<p>Install <a href="https://jest-extended.jestcommunity.dev"><strong>jest-extended</strong></a> (<code class="language-plaintext highlighter-rouge">npm install --save-dev jest-extended</code>)
and use the <code class="language-plaintext highlighter-rouge">toBeEmpty</code> assertion as in the following example:</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">const</span> <span class="p">{</span> <span class="nx">toBeEmpty</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="dl">'</span><span class="s1">jest-extended</span><span class="dl">'</span><span class="p">);</span>
<span class="nx">expect</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> <span class="nx">toBeEmpty</span> <span class="p">});</span>
<span class="nx">describe</span><span class="p">(</span><span class="dl">'</span><span class="s1">setFulltextSearchTermsFilter</span><span class="dl">'</span><span class="p">,</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">test</span><span class="p">(</span><span class="dl">'</span><span class="s1">returns filter without $text when fulltextSearchTerms is empty</span><span class="dl">'</span><span class="p">,</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">fulltextSearchTerms</span> <span class="o">=</span> <span class="p">[];</span>
<span class="kd">const</span> <span class="nx">filter</span> <span class="o">=</span> <span class="p">{};</span>
<span class="kd">const</span> <span class="nx">searchInclude</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">any</span><span class="dl">'</span><span class="p">;</span>
<span class="nx">expect</span><span class="p">(</span><span class="nx">searchUtils</span><span class="p">.</span><span class="nx">setFulltextSearchTermsFilter</span><span class="p">(</span><span class="nx">fulltextSearchTerms</span><span class="p">,</span> <span class="nx">filter</span><span class="p">,</span> <span class="nx">searchInclude</span><span class="p">)).</span><span class="nx">toBeEmpty</span><span class="p">();</span>
<span class="p">});</span>
<span class="p">});</span>
</code></pre></div></div>
<p>Use <code class="language-plaintext highlighter-rouge">.toBeEmpty</code> when checking if a <code class="language-plaintext highlighter-rouge">String</code> <code class="language-plaintext highlighter-rouge">''</code>, <code class="language-plaintext highlighter-rouge">Array</code> <code class="language-plaintext highlighter-rouge">[]</code>, <code class="language-plaintext highlighter-rouge">Object</code> <code class="language-plaintext highlighter-rouge">{}</code>, or <code class="language-plaintext highlighter-rouge">Iterable</code> is empty. Because <code class="language-plaintext highlighter-rouge">toBeEmpty</code> supports checking for emptiness of Iterables, you can use it to check whether a <code class="language-plaintext highlighter-rouge">Map</code>, or <code class="language-plaintext highlighter-rouge">Set</code> is empty, as well as checking that a generator yields no values.</p>
<p><strong>Project</strong>: <a href="https://github.com/CodeverDotDev/codever"><code class="language-plaintext highlighter-rouge">codever</code></a> - <strong>File</strong>: <code class="language-plaintext highlighter-rouge">search.utils.spec.js</code></p>
<p><span style="font-size: 0.9rem">
<strong>Reference - </strong>
<a href="https://jest-extended.jestcommunity.dev/docs/matchers/tobeempty" target="_blank" style="font-weight: lighter">
https://jest-extended.jestcommunity.dev/docs/matchers/tobeempty
</a>
</span></p>
<hr />
<p class="note_normal">
Shared with <i class="fa fa-heart" style="color:orangered"></i> from <a href="https://www.codever.dev/snippets/63eb2e2488deee44f7554290/details">Codever</a>.
👉 Use the <a href="https://www.codever.dev/snippets/63eb2e2488deee44f7554290/details" class="copy-to-mine-btn"><i class="fa fa-copy"></i> Copy to mine</a>
functionality to copy this snippet to your own personal collection and easy manage
your code snippets.
<br />
<br />
<b>Codever</b> is open source on <a href="https://github.com/CodeverDotDev">Github</a> ⭐🙏
</p>
<p><a href="https://www.codepedia.org/snippets/63eb2e2488deee44f7554290/verify-empty-object-with-jest-extended-">Verify empty object with Jest (extended)</a> was originally published by CodepediaOrg at <a href="https://www.codepedia.org">CodepediaOrg</a> on February 14, 2023.</p>
https://www.codepedia.org/article/jest-test-with-async-await
2023-02-12T00:00:00+01:00
2023-02-12T00:00:00+01:00
Adrian Matei (aka adixchen)
https://www.codepedia.org
adixchen@proton.me
<h2 id="method-to-test">Method to test</h2>
<p>Given the <code class="language-plaintext highlighter-rouge">async</code>/<code class="language-plaintext highlighter-rouge">await</code> function to <strong>find snippets</strong> on <a href="https://www.codever.dev">Codever</a></p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">let</span> <span class="nx">findSnippets</span> <span class="o">=</span> <span class="k">async</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">isPublic</span><span class="p">,</span> <span class="nx">userId</span><span class="p">,</span> <span class="nx">query</span><span class="p">,</span> <span class="nx">page</span><span class="p">,</span> <span class="nx">limit</span><span class="p">,</span> <span class="nx">searchInclude</span><span class="p">)</span> <span class="p">{</span>
<span class="c1">//split in text and tags</span>
<span class="kd">const</span> <span class="nx">searchTermsAndTags</span> <span class="o">=</span> <span class="nx">searchUtils</span><span class="p">.</span><span class="nx">splitSearchQuery</span><span class="p">(</span><span class="nx">query</span><span class="p">);</span>
<span class="kd">const</span> <span class="nx">searchTerms</span> <span class="o">=</span> <span class="nx">searchTermsAndTags</span><span class="p">.</span><span class="nx">terms</span><span class="p">;</span>
<span class="kd">const</span> <span class="nx">searchTags</span> <span class="o">=</span> <span class="nx">searchTermsAndTags</span><span class="p">.</span><span class="nx">tags</span><span class="p">;</span>
<span class="kd">const</span> <span class="p">{</span><span class="nx">specialSearchTerms</span><span class="p">,</span> <span class="nx">fulltextSearchTerms</span><span class="p">}</span> <span class="o">=</span> <span class="nx">searchUtils</span><span class="p">.</span><span class="nx">extractFulltextAndSpecialSearchTerms</span><span class="p">(</span><span class="nx">searchTerms</span><span class="p">);</span>
<span class="kd">let</span> <span class="nx">filter</span> <span class="o">=</span> <span class="p">{}</span>
<span class="nx">filter</span> <span class="o">=</span> <span class="nx">searchUtils</span><span class="p">.</span><span class="nx">setPublicOrPersonalFilter</span><span class="p">(</span><span class="nx">isPublic</span><span class="p">,</span> <span class="nx">filter</span><span class="p">,</span> <span class="nx">userId</span><span class="p">);</span>
<span class="nx">filter</span> <span class="o">=</span> <span class="nx">searchUtils</span><span class="p">.</span><span class="nx">setTagsToFilter</span><span class="p">(</span><span class="nx">searchTags</span><span class="p">,</span> <span class="nx">filter</span><span class="p">);</span>
<span class="nx">filter</span> <span class="o">=</span> <span class="nx">searchUtils</span><span class="p">.</span><span class="nx">setFulltextSearchTermsFilter</span><span class="p">(</span><span class="nx">fulltextSearchTerms</span><span class="p">,</span> <span class="nx">filter</span><span class="p">,</span> <span class="nx">searchInclude</span><span class="p">);</span>
<span class="nx">filter</span> <span class="o">=</span> <span class="nx">searchUtils</span><span class="p">.</span><span class="nx">setSpecialSearchTermsFilter</span><span class="p">(</span><span class="nx">isPublic</span><span class="p">,</span> <span class="nx">userId</span><span class="p">,</span> <span class="nx">specialSearchTerms</span><span class="p">,</span> <span class="nx">filter</span><span class="p">);</span>
<span class="kd">let</span> <span class="nx">snippets</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">Snippet</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span>
<span class="nx">filter</span><span class="p">,</span>
<span class="p">{</span>
<span class="na">score</span><span class="p">:</span> <span class="p">{</span><span class="na">$meta</span><span class="p">:</span> <span class="dl">"</span><span class="s2">textScore</span><span class="dl">"</span><span class="p">}</span>
<span class="p">}</span>
<span class="p">)</span>
<span class="p">.</span><span class="nx">sort</span><span class="p">({</span><span class="na">score</span><span class="p">:</span> <span class="p">{</span><span class="na">$meta</span><span class="p">:</span> <span class="dl">"</span><span class="s2">textScore</span><span class="dl">"</span><span class="p">}})</span>
<span class="p">.</span><span class="nx">skip</span><span class="p">((</span><span class="nx">page</span> <span class="o">-</span> <span class="mi">1</span><span class="p">)</span> <span class="o">*</span> <span class="nx">limit</span><span class="p">)</span>
<span class="p">.</span><span class="nx">limit</span><span class="p">(</span><span class="nx">limit</span><span class="p">)</span>
<span class="p">.</span><span class="nx">lean</span><span class="p">()</span>
<span class="p">.</span><span class="nx">exec</span><span class="p">();</span>
<span class="k">return</span> <span class="nx">snippets</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div></div>
<p>I would like verify if the filter is correctly set for different scenarios.</p>
<p><!--more--></p>
<h2 id="test-method">Test method</h2>
<p><a href="https://jestjs.io/docs/api#testeachtablename-fn-timeout">test.each</a> is very practical in jest,
if you keep duplicating the same test with different data and is very appropriate here.</p>
<p>In the following example you can see the corresponding test method with jest, that mocks the MondoDB find call
to assert in the end the expected call, all in <code class="language-plaintext highlighter-rouge">async</code>/<code class="language-plaintext highlighter-rouge">await</code> style:</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">const</span> <span class="nx">snippetsSearchService</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="dl">'</span><span class="s1">./snippets-search.service</span><span class="dl">'</span><span class="p">);</span>
<span class="kd">const</span> <span class="nx">Snippet</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="dl">'</span><span class="s1">../model/snippet</span><span class="dl">'</span><span class="p">);</span>
<span class="nx">jest</span><span class="p">.</span><span class="nx">mock</span><span class="p">(</span><span class="dl">'</span><span class="s1">../model/snippet</span><span class="dl">'</span><span class="p">,</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span>
<span class="k">return</span> <span class="p">{</span>
<span class="na">find</span><span class="p">:</span> <span class="nx">jest</span><span class="p">.</span><span class="nx">fn</span><span class="p">(()</span> <span class="o">=></span> <span class="p">({</span>
<span class="na">sort</span><span class="p">:</span> <span class="nx">jest</span><span class="p">.</span><span class="nx">fn</span><span class="p">(()</span> <span class="o">=></span> <span class="p">({</span>
<span class="na">skip</span><span class="p">:</span> <span class="nx">jest</span><span class="p">.</span><span class="nx">fn</span><span class="p">(()</span> <span class="o">=></span> <span class="p">({</span>
<span class="na">limit</span><span class="p">:</span> <span class="nx">jest</span><span class="p">.</span><span class="nx">fn</span><span class="p">(()</span> <span class="o">=></span> <span class="p">({</span>
<span class="na">lean</span><span class="p">:</span> <span class="nx">jest</span><span class="p">.</span><span class="nx">fn</span><span class="p">(()</span> <span class="o">=></span> <span class="p">({</span>
<span class="na">exec</span><span class="p">:</span> <span class="nx">jest</span><span class="p">.</span><span class="nx">fn</span><span class="p">(()</span> <span class="o">=></span> <span class="nb">Promise</span><span class="p">.</span><span class="nx">resolve</span><span class="p">([{</span><span class="na">_id</span><span class="p">:</span> <span class="dl">'</span><span class="s1">123</span><span class="dl">'</span><span class="p">,</span> <span class="na">name</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Test Snippet</span><span class="dl">'</span><span class="p">}]))</span>
<span class="p">}))</span>
<span class="p">}))</span>
<span class="p">}))</span>
<span class="p">}))</span>
<span class="p">}))</span>
<span class="p">};</span>
<span class="p">});</span>
<span class="nx">describe</span><span class="p">(</span><span class="dl">'</span><span class="s1">findSnippets to have been called with</span><span class="dl">'</span><span class="p">,</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">input</span> <span class="o">=</span> <span class="p">{</span>
<span class="na">isPublic</span><span class="p">:</span> <span class="kc">false</span><span class="p">,</span>
<span class="na">userId</span><span class="p">:</span> <span class="dl">'</span><span class="s1">user1</span><span class="dl">'</span><span class="p">,</span>
<span class="na">page</span><span class="p">:</span> <span class="mi">1</span><span class="p">,</span>
<span class="na">limit</span><span class="p">:</span> <span class="mi">10</span><span class="p">,</span>
<span class="na">searchInclude</span><span class="p">:</span> <span class="dl">'</span><span class="s1">any</span><span class="dl">'</span>
<span class="p">}</span>
<span class="nx">test</span><span class="p">.</span><span class="nx">each</span><span class="p">([</span>
<span class="p">[</span>
<span class="p">{</span>
<span class="p">...</span><span class="nx">input</span><span class="p">,</span>
<span class="na">query</span><span class="p">:</span> <span class="dl">'</span><span class="s1">codever testing</span><span class="dl">'</span>
<span class="p">},</span>
<span class="p">{</span>
<span class="na">userId</span><span class="p">:</span> <span class="nx">input</span><span class="p">.</span><span class="nx">userId</span><span class="p">,</span>
<span class="na">$text</span><span class="p">:</span> <span class="p">{</span><span class="na">$search</span><span class="p">:</span> <span class="dl">'</span><span class="s1">codever testing</span><span class="dl">'</span><span class="p">}</span>
<span class="p">}</span>
<span class="p">],</span>
<span class="p">[</span>
<span class="p">{</span>
<span class="p">...</span><span class="nx">input</span><span class="p">,</span>
<span class="na">userId</span><span class="p">:</span> <span class="kc">undefined</span><span class="p">,</span>
<span class="na">isPublic</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
<span class="na">query</span><span class="p">:</span> <span class="dl">'</span><span class="s1">codever testing</span><span class="dl">'</span>
<span class="p">},</span>
<span class="p">{</span>
<span class="na">public</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
<span class="na">$text</span><span class="p">:</span> <span class="p">{</span><span class="na">$search</span><span class="p">:</span> <span class="dl">'</span><span class="s1">codever testing</span><span class="dl">'</span><span class="p">}</span>
<span class="p">}</span>
<span class="p">],</span>
<span class="p">[</span>
<span class="p">{</span>
<span class="p">...</span><span class="nx">input</span><span class="p">,</span>
<span class="na">searchInclude</span><span class="p">:</span> <span class="kc">undefined</span><span class="p">,</span>
<span class="na">query</span><span class="p">:</span> <span class="dl">'</span><span class="s1">codever testing</span><span class="dl">'</span>
<span class="p">},</span>
<span class="p">{</span>
<span class="na">userId</span><span class="p">:</span> <span class="nx">input</span><span class="p">.</span><span class="nx">userId</span><span class="p">,</span>
<span class="na">$text</span><span class="p">:</span> <span class="p">{</span><span class="na">$search</span><span class="p">:</span> <span class="dl">'</span><span class="s1">"codever" "testing"</span><span class="dl">'</span><span class="p">}</span>
<span class="p">}</span>
<span class="p">],</span>
<span class="p">[</span>
<span class="p">{</span>
<span class="p">...</span><span class="nx">input</span><span class="p">,</span>
<span class="na">searchInclude</span><span class="p">:</span> <span class="kc">undefined</span><span class="p">,</span>
<span class="na">query</span><span class="p">:</span> <span class="dl">'</span><span class="s1">codever testing -javascript</span><span class="dl">'</span>
<span class="p">},</span>
<span class="p">{</span>
<span class="na">userId</span><span class="p">:</span> <span class="nx">input</span><span class="p">.</span><span class="nx">userId</span><span class="p">,</span>
<span class="na">$text</span><span class="p">:</span> <span class="p">{</span><span class="na">$search</span><span class="p">:</span> <span class="dl">'</span><span class="s1">"codever" "testing" -javascript</span><span class="dl">'</span><span class="p">}</span>
<span class="p">}</span>
<span class="p">],</span>
<span class="p">[</span>
<span class="p">{</span>
<span class="p">...</span><span class="nx">input</span><span class="p">,</span>
<span class="na">query</span><span class="p">:</span> <span class="dl">'</span><span class="s1">[javascript]</span><span class="dl">'</span>
<span class="p">},</span>
<span class="p">{</span>
<span class="na">userId</span><span class="p">:</span> <span class="nx">input</span><span class="p">.</span><span class="nx">userId</span><span class="p">,</span>
<span class="na">tags</span><span class="p">:</span>
<span class="p">{</span>
<span class="na">$all</span><span class="p">:</span> <span class="p">[</span><span class="dl">'</span><span class="s1">javascript</span><span class="dl">'</span><span class="p">]</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">],</span>
<span class="p">[</span>
<span class="p">{</span>
<span class="p">...</span><span class="nx">input</span><span class="p">,</span>
<span class="na">query</span><span class="p">:</span> <span class="dl">'</span><span class="s1">[javascript] jest testing</span><span class="dl">'</span>
<span class="p">},</span>
<span class="p">{</span>
<span class="na">userId</span><span class="p">:</span> <span class="nx">input</span><span class="p">.</span><span class="nx">userId</span><span class="p">,</span>
<span class="na">$text</span><span class="p">:</span> <span class="p">{</span><span class="na">$search</span><span class="p">:</span> <span class="dl">'</span><span class="s1">jest testing</span><span class="dl">'</span><span class="p">},</span>
<span class="na">tags</span><span class="p">:</span>
<span class="p">{</span>
<span class="na">$all</span><span class="p">:</span> <span class="p">[</span><span class="dl">'</span><span class="s1">javascript</span><span class="dl">'</span><span class="p">]</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">],</span>
<span class="p">[</span>
<span class="p">{</span>
<span class="p">...</span><span class="nx">input</span><span class="p">,</span>
<span class="na">query</span><span class="p">:</span> <span class="dl">'</span><span class="s1">[javascript] jest testing site:codever.dev</span><span class="dl">'</span>
<span class="p">},</span>
<span class="p">{</span>
<span class="na">userId</span><span class="p">:</span> <span class="nx">input</span><span class="p">.</span><span class="nx">userId</span><span class="p">,</span>
<span class="na">$text</span><span class="p">:</span> <span class="p">{</span><span class="na">$search</span><span class="p">:</span> <span class="dl">'</span><span class="s1">jest testing</span><span class="dl">'</span><span class="p">},</span>
<span class="na">tags</span><span class="p">:</span>
<span class="p">{</span>
<span class="na">$all</span><span class="p">:</span> <span class="p">[</span><span class="dl">'</span><span class="s1">javascript</span><span class="dl">'</span><span class="p">]</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">],</span>
<span class="p">])(</span><span class="dl">'</span><span class="s1">given input params %p , should use filter %p </span><span class="dl">'</span><span class="p">,</span> <span class="k">async</span> <span class="p">(</span><span class="nx">input</span><span class="p">,</span> <span class="nx">expectedFilter</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
<span class="k">await</span> <span class="nx">snippetsSearchService</span><span class="p">.</span><span class="nx">findSnippets</span><span class="p">(</span><span class="nx">input</span><span class="p">.</span><span class="nx">isPublic</span><span class="p">,</span> <span class="nx">input</span><span class="p">.</span><span class="nx">userId</span><span class="p">,</span> <span class="nx">input</span><span class="p">.</span><span class="nx">query</span><span class="p">,</span> <span class="nx">input</span><span class="p">.</span><span class="nx">page</span><span class="p">,</span> <span class="nx">input</span><span class="p">.</span><span class="nx">limit</span><span class="p">,</span> <span class="nx">input</span><span class="p">.</span><span class="nx">searchInclude</span><span class="p">);</span>
<span class="nx">expect</span><span class="p">(</span><span class="nx">Snippet</span><span class="p">.</span><span class="nx">find</span><span class="p">).</span><span class="nx">toHaveBeenCalledWith</span><span class="p">(</span><span class="nx">expectedFilter</span><span class="p">,</span> <span class="p">{</span><span class="na">score</span><span class="p">:</span> <span class="p">{</span><span class="na">$meta</span><span class="p">:</span> <span class="dl">'</span><span class="s1">textScore</span><span class="dl">'</span><span class="p">}});</span>
<span class="p">});</span>
<span class="p">});</span>
</code></pre></div></div>
<p class="note_normal">
<img style="float: left; width: 35px; height: 29px; margin-right: 10px;" src="https://www.codepedia.org/wp-content/uploads/2015/06/Octocat-smaller.png" alt="Octocat" />
Source code for <a href="https://www.codever.dev" target="_blank">Codever.dev</a> is available on <a href="https://github.com/CodeverDotDev/codever" target="_blank">Github</a> -
<span style="vertical-align: middle">
<a class="github-button" href="https://github.com/CodeverDotDev/codever" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star Codever on GitHub">Star</a>
</span>
</p>
<p><a href="https://www.codepedia.org/article/how-to-run-async-await-jest-test-each-example">How to run test.each tests in jest with async await</a> was originally published by CodepediaOrg at <a href="https://www.codepedia.org">CodepediaOrg</a> on February 12, 2023.</p>
https://www.codepedia.org/article/configure-jest-for-nodejs-backend-project
2023-02-11T00:00:00+01:00
2023-02-11T00:00:00+01:00
Adrian Matei (aka adixchen)
https://www.codepedia.org
adixchen@proton.me
<p>The API supporting <a href="https://www.codever.dev">Codever</a> is written in Node.js/ExpressJs, and I’ve decided
to use Jest as the testing framework for unit testing. This blog post presents the steps required to install and run the first
unit test in Jest for this backend.</p>
<p><!--more--></p>
<h2 id="install-jest">Install Jest</h2>
<h3 id="install-npm-dependency">Install npm dependency</h3>
<p>Using <code class="language-plaintext highlighter-rouge">npm</code> run the following command</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>npm install --save-dev jest
</code></pre></div></div>
<p>This will install <code class="language-plaintext highlighter-rouge">jest</code> in the <code class="language-plaintext highlighter-rouge">devDependencies</code> in <code class="language-plaintext highlighter-rouge">package.json</code> of the backend project</p>
<h3 id="write-a-jest-configuration-file">Write a jest configuration file</h3>
<p>In the root of the backend project create a <code class="language-plaintext highlighter-rouge">jest.config.js</code> configuration file with the following content:</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="p">{</span>
<span class="na">testEnvironment</span><span class="p">:</span> <span class="dl">'</span><span class="s1">node</span><span class="dl">'</span><span class="p">,</span>
<span class="na">testMatch</span><span class="p">:</span> <span class="p">[</span><span class="dl">'</span><span class="s1">**/*.spec.js</span><span class="dl">'</span><span class="p">],</span>
<span class="p">};</span>
</code></pre></div></div>
<blockquote>
<p>This tells the Jest runner to run all the files in the project ending in <code class="language-plaintext highlighter-rouge">spec.js</code></p>
</blockquote>
<h2 id="run-first-tests-in-jest">Run first tests in Jest</h2>
<p>In <code class="language-plaintext highlighter-rouge">package.json</code> under the <code class="language-plaintext highlighter-rouge">scripts</code> property define a <code class="language-plaintext highlighter-rouge">test</code> task for running jest tests - <code class="language-plaintext highlighter-rouge">"test": "jest --config ./jest.config.js"</code>:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> "scripts": {
"start": "node ./bin/www",
"debug": "nodemon --inspect ./bin/www --watch src --watch docs/openapi/openapi.yaml",
"test": "jest --config ./jest.config.js"
},
</code></pre></div></div>
<p>With this configuration with <code class="language-plaintext highlighter-rouge">npm run</code> you can execute the script for running jest tests - <code class="language-plaintext highlighter-rouge">npm run test</code></p>
<p>But for that we need to first write a Jest test.
I will choose some <code class="language-plaintext highlighter-rouge">utils</code> methods used in searching bookmarks, snippets or notes to write first jest tests.</p>
<p>Let’s take the following method for example, from <code class="language-plaintext highlighter-rouge">search.utils.js</code></p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">let</span> <span class="nx">includeFulltextSearchTermsInFilter</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">fulltextSearchTerms</span><span class="p">,</span> <span class="nx">filter</span><span class="p">,</span> <span class="nx">searchInclude</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">let</span> <span class="nx">newFilter</span> <span class="o">=</span> <span class="p">{...</span><span class="nx">filter</span><span class="p">};</span>
<span class="k">if</span> <span class="p">(</span> <span class="nx">fulltextSearchTerms</span><span class="p">.</span><span class="nx">length</span> <span class="o">></span> <span class="mi">0</span> <span class="p">)</span> <span class="p">{</span>
<span class="kd">let</span> <span class="nx">searchText</span> <span class="o">=</span> <span class="dl">''</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span> <span class="nx">searchInclude</span> <span class="o">===</span> <span class="dl">'</span><span class="s1">any</span><span class="dl">'</span> <span class="p">)</span> <span class="p">{</span>
<span class="nx">searchText</span> <span class="o">=</span> <span class="p">{</span><span class="na">$search</span><span class="p">:</span> <span class="nx">fulltextSearchTerms</span><span class="p">.</span><span class="nx">join</span><span class="p">(</span><span class="dl">'</span><span class="s1"> </span><span class="dl">'</span><span class="p">)}</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">searchText</span> <span class="o">=</span> <span class="p">{</span><span class="na">$search</span><span class="p">:</span> <span class="nx">generateFullSearchText</span><span class="p">(</span><span class="nx">fulltextSearchTerms</span><span class="p">)};</span>
<span class="p">}</span>
<span class="nx">newFilter</span><span class="p">.</span><span class="nx">$text</span> <span class="o">=</span> <span class="nx">searchText</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">return</span> <span class="nx">newFilter</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div></div>
<blockquote>
<p>This method returns a new filter containing also the fulltext search depending on the OR or AND selection, but
the best way to understand it, is looking at its corresponding test:</p>
</blockquote>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">const</span> <span class="nx">searchUtils</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="dl">'</span><span class="s1">./search.utils</span><span class="dl">'</span><span class="p">);</span>
<span class="nx">describe</span><span class="p">(</span><span class="dl">'</span><span class="s1">includeFulltextSearchTermsInFilter</span><span class="dl">'</span><span class="p">,</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">test</span><span class="p">(</span><span class="dl">'</span><span class="s1">returns filter with $text when fulltextSearchTerms is not empty</span><span class="dl">'</span><span class="p">,</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">fulltextSearchTerms</span> <span class="o">=</span> <span class="p">[</span><span class="dl">'</span><span class="s1">testing jest</span><span class="dl">'</span><span class="p">];</span>
<span class="kd">const</span> <span class="nx">filter</span> <span class="o">=</span> <span class="p">{};</span>
<span class="kd">const</span> <span class="nx">searchInclude</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">any</span><span class="dl">'</span><span class="p">;</span>
<span class="kd">const</span> <span class="nx">expected</span> <span class="o">=</span> <span class="p">{</span>
<span class="p">...</span><span class="nx">filter</span><span class="p">,</span>
<span class="na">$text</span><span class="p">:</span> <span class="p">{</span><span class="na">$search</span><span class="p">:</span> <span class="nx">fulltextSearchTerms</span><span class="p">.</span><span class="nx">join</span><span class="p">(</span><span class="dl">'</span><span class="s1"> </span><span class="dl">'</span><span class="p">)}</span>
<span class="p">};</span>
<span class="nx">expect</span><span class="p">(</span><span class="nx">searchUtils</span><span class="p">.</span><span class="nx">includeFulltextSearchTermsInFilter</span><span class="p">(</span><span class="nx">fulltextSearchTerms</span><span class="p">,</span> <span class="nx">filter</span><span class="p">,</span> <span class="nx">searchInclude</span><span class="p">)).</span><span class="nx">toEqual</span><span class="p">(</span><span class="nx">expected</span><span class="p">);</span>
<span class="p">});</span>
<span class="nx">test</span><span class="p">(</span><span class="dl">'</span><span class="s1">returns filter without $text when fulltextSearchTerms is empty</span><span class="dl">'</span><span class="p">,</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">fulltextSearchTerms</span> <span class="o">=</span> <span class="p">[];</span>
<span class="kd">const</span> <span class="nx">filter</span> <span class="o">=</span> <span class="p">{};</span>
<span class="kd">const</span> <span class="nx">searchInclude</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">any</span><span class="dl">'</span><span class="p">;</span>
<span class="nx">expect</span><span class="p">(</span><span class="nx">searchUtils</span><span class="p">.</span><span class="nx">includeFulltextSearchTermsInFilter</span><span class="p">(</span><span class="nx">fulltextSearchTerms</span><span class="p">,</span> <span class="nx">filter</span><span class="p">,</span> <span class="nx">searchInclude</span><span class="p">)).</span><span class="nx">toBe</span><span class="p">(</span><span class="kc">undefined</span><span class="p">);</span>
<span class="p">});</span>
<span class="p">});</span>
</code></pre></div></div>
<p>Now every time I run <code class="language-plaintext highlighter-rouge">npm run test</code> this test will also be executed. Easy peasy.</p>
<p class="note_normal">
<img style="float: left; width: 35px; height: 29px; margin-right: 10px;" src="https://www.codepedia.org/wp-content/uploads/2015/06/Octocat-smaller.png" alt="Octocat" />
Source code for <a href="https://www.codever.dev" target="_blank">Codever.dev</a> is available on <a href="https://github.com/CodeverDotDev/codever" target="_blank">Github</a> -
<span style="vertical-align: middle">
<a class="github-button" href="https://github.com/CodeverDotDev/codever" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star Codever on GitHub">Star</a>
</span>
</p>
<p><a href="https://www.codepedia.org/article/configure-jest-for-nodejs-backend-project">Configure Jest for a Node.js backend project</a> was originally published by CodepediaOrg at <a href="https://www.codepedia.org">CodepediaOrg</a> on February 11, 2023.</p>
https://www.codepedia.org/snippets/63b8562e3b43b9521ed04b0d/mongoose-schema-field-from-list-of-strings-enum
2023-01-11T00:00:00+01:00
2023-01-11T00:00:00+01:00
Adrian Matei (aka adixchen)
https://www.codepedia.org
adixchen@proton.me
<p>In the following example we define <code class="language-plaintext highlighter-rouge">template</code> attribute to be of type <code class="language-plaintext highlighter-rouge">String</code> with values defined in the <code class="language-plaintext highlighter-rouge">enum</code> array:</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">const</span> <span class="nx">noteSchema</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Schema</span><span class="p">({</span>
<span class="na">title</span><span class="p">:</span> <span class="p">{</span><span class="na">type</span><span class="p">:</span><span class="nb">String</span><span class="p">,</span> <span class="na">required</span><span class="p">:</span> <span class="kc">true</span><span class="p">},</span>
<span class="na">type</span><span class="p">:</span> <span class="p">{</span><span class="na">type</span><span class="p">:</span><span class="nb">String</span><span class="p">,</span> <span class="na">required</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> <span class="na">default</span><span class="p">:</span> <span class="dl">'</span><span class="s1">note</span><span class="dl">'</span><span class="p">},</span>
<span class="na">content</span><span class="p">:</span> <span class="nb">String</span><span class="p">,</span>
<span class="na">reference</span><span class="p">:</span> <span class="nb">String</span><span class="p">,</span>
<span class="na">tags</span><span class="p">:</span> <span class="p">[</span><span class="nb">String</span><span class="p">],</span>
<span class="na">template</span><span class="p">:</span> <span class="p">{</span><span class="na">type</span><span class="p">:</span><span class="nb">String</span><span class="p">,</span> <span class="na">enum</span><span class="p">:</span> <span class="p">[</span><span class="dl">'</span><span class="s1">note</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">checklist</span><span class="dl">'</span><span class="p">]},</span>
<span class="na">userId</span><span class="p">:</span> <span class="p">{</span><span class="na">type</span><span class="p">:</span> <span class="nb">String</span><span class="p">,</span> <span class="na">ref</span><span class="p">:</span><span class="dl">'</span><span class="s1">User</span><span class="dl">'</span><span class="p">},</span>
<span class="na">__v</span><span class="p">:</span> <span class="p">{</span> <span class="na">type</span><span class="p">:</span> <span class="nb">Number</span><span class="p">,</span> <span class="na">select</span><span class="p">:</span> <span class="kc">false</span><span class="p">}</span>
<span class="p">},</span>
<span class="p">{</span>
<span class="na">timestamps</span><span class="p">:</span> <span class="kc">true</span>
<span class="p">});</span>
</code></pre></div></div>
<hr />
<p class="note_normal">
Shared with <i class="fa fa-heart" style="color:orangered"></i> from <a href="https://www.codever.dev/snippets/63b8562e3b43b9521ed04b0d/details">Codever</a>.
👉 Use the <a href="https://www.codever.dev/snippets/63b8562e3b43b9521ed04b0d/details" class="copy-to-mine-btn"><i class="fa fa-copy"></i> Copy to mine</a>
functionality to copy this snippet to your own personal collection and easy manage
your code snippets.
<br />
<br />
<b>Codever</b> is open source on <a href="https://github.com/CodeverDotDev">Github</a> ⭐🙏
</p>
<p><a href="https://www.codepedia.org/snippets/63b8562e3b43b9521ed04b0d/mongoose-schema-field-from-list-of-strings-enum-">Mongoose schema field from list of strings (enum)</a> was originally published by CodepediaOrg at <a href="https://www.codepedia.org">CodepediaOrg</a> on January 11, 2023.</p>
https://www.codepedia.org/snippets/638ceaf03b43b9521ecfab28/set-value-of-input-field-in-angular-template
2022-12-14T00:00:00+01:00
2022-12-14T00:00:00+01:00
Adrian Matei (aka adixchen)
https://www.codepedia.org
adixchen@proton.me
<p>To set the initial value of the <code class="language-plaintext highlighter-rouge">input</code> control, just use the <code class="language-plaintext highlighter-rouge">value</code> attribute:</p>
<div class="language-typescript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="o"><</span><span class="nx">input</span> <span class="kd">type</span><span class="o">=</span><span class="dl">"</span><span class="s2">text</span><span class="dl">"</span> <span class="kd">class</span><span class="o">=</span><span class="dl">"</span><span class="s2">form-control</span><span class="dl">"</span> <span class="nx">placeholder</span><span class="o">=</span><span class="dl">"</span><span class="s2">Generate Codever sharable Url</span><span class="dl">"</span>
<span class="nx">aria</span><span class="o">-</span><span class="nx">describedby</span><span class="o">=</span><span class="dl">"</span><span class="s2">basic-addon2</span><span class="dl">"</span>
<span class="nx">value</span><span class="o">=</span><span class="dl">""</span><span class="o">></span>
</code></pre></div></div>
<p><strong>Project</strong>: <code class="language-plaintext highlighter-rouge">codever</code> - <strong>File</strong>: <code class="language-plaintext highlighter-rouge">social-share-dialog.component.html</code></p>
<p>To understand usage of angular environment used in this snippet (<code class="language-plaintext highlighter-rouge">environment.HOST</code>)
see the <a href="https://www.codever.dev/snippets/6389997bb160cb1fab2430fe/details">Configure and use environment specific values in Angular and html template</a> snippet</p>
<p><span style="font-size: 0.9rem">
<strong>Reference - </strong>
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input" target="_blank" style="font-weight: lighter">
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
</a>
</span></p>
<hr />
<p class="note_normal">
Shared with <i class="fa fa-heart" style="color:orangered"></i> from <a href="https://www.codever.dev/snippets/638ceaf03b43b9521ecfab28/details">Codever</a>.
👉 Use the <a href="https://www.codever.dev/snippets/638ceaf03b43b9521ecfab28/details" class="copy-to-mine-btn"><i class="fa fa-copy"></i> Copy to mine</a>
functionality to copy this snippet to your own personal collection and easy manage
your code snippets.
<br />
<br />
<b>Codever</b> is open source on <a href="https://github.com/CodeverDotDev">Github</a> ⭐🙏
</p>
<p><a href="https://www.codepedia.org/snippets/638ceaf03b43b9521ecfab28/set-value-of-input-field-in-angular-template">Set value of input field in angular template</a> was originally published by CodepediaOrg at <a href="https://www.codepedia.org">CodepediaOrg</a> on December 14, 2022.</p>
https://www.codepedia.org/snippets/639852fc3b43b9521ecfe046/how-to-use-jest-test-each-function
2022-12-14T00:00:00+01:00
2022-12-14T00:00:00+01:00
Adrian Matei (aka adixchen)
https://www.codepedia.org
adixchen@proton.me
<p>Let’s test with Jest the following <code class="language-plaintext highlighter-rouge">isInfiniteDate</code> function,
which checks whether the <strong>given</strong> date is “infinite” in the given context:</p>
<div class="language-typescript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">export</span> <span class="kd">const</span> <span class="nx">isInfiniteDate</span> <span class="o">=</span> <span class="p">(</span><span class="nx">input</span><span class="p">:</span> <span class="kr">string</span><span class="p">):</span> <span class="nx">boolean</span> <span class="o">=></span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">maximumDatePossible</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">9999-12-31</span><span class="dl">'</span><span class="p">;</span>
<span class="k">return</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">(</span><span class="nx">input</span><span class="p">).</span><span class="nx">getTime</span><span class="p">()</span> <span class="o">===</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">(</span><span class="nx">maximumDatePossible</span><span class="p">).</span><span class="nx">getTime</span><span class="p">();</span>
<span class="p">};</span>
</code></pre></div></div>
<p>For sure, we want to test different dates with the same expected result, either <code class="language-plaintext highlighter-rouge">true</code> or <code class="language-plaintext highlighter-rouge">false</code></p>
<p>To avoid “duplication” of same test with different data, you can use <code class="language-plaintext highlighter-rouge">test.each(table)(name, fn, timeout)</code> function,
to which you can pass an <code class="language-plaintext highlighter-rouge">Array</code> of Arrays with the arguments that are passed into the test <code class="language-plaintext highlighter-rouge">fn</code> for each row.</p>
<div class="language-typescript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">describe</span><span class="p">(</span><span class="dl">'</span><span class="s1">isInfiniteDate > </span><span class="dl">'</span><span class="p">,</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">test</span><span class="p">.</span><span class="nx">each</span><span class="p">([</span>
<span class="p">[</span><span class="kc">null</span><span class="p">,</span> <span class="kc">false</span><span class="p">],</span>
<span class="p">[</span><span class="kc">undefined</span><span class="p">,</span> <span class="kc">false</span><span class="p">],</span>
<span class="p">[</span><span class="dl">'</span><span class="s1">AXON</span><span class="dl">'</span><span class="p">,</span> <span class="kc">false</span><span class="p">],</span>
<span class="p">[</span><span class="dl">'</span><span class="s1">2021-31-31</span><span class="dl">'</span><span class="p">,</span> <span class="kc">false</span><span class="p">],</span>
<span class="p">[</span><span class="dl">'</span><span class="s1">2021-12-12</span><span class="dl">'</span><span class="p">,</span> <span class="kc">false</span><span class="p">],</span>
<span class="p">[</span><span class="dl">'</span><span class="s1">9999-12-31</span><span class="dl">'</span><span class="p">,</span> <span class="kc">true</span><span class="p">],</span>
<span class="p">])(</span><span class="dl">'</span><span class="s1">given input date %p , it should return %p </span><span class="dl">'</span><span class="p">,</span> <span class="p">(</span><span class="nx">input</span><span class="p">,</span> <span class="nx">expected</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">expect</span><span class="p">(</span><span class="nx">isInfiniteDate</span><span class="p">(</span><span class="nx">input</span><span class="p">)).</span><span class="nx">toEqual</span><span class="p">(</span><span class="nx">expected</span><span class="p">);</span>
<span class="p">});</span>
<span class="p">});</span>
</code></pre></div></div>
<ul>
<li><code class="language-plaintext highlighter-rouge">name</code> is the <code class="language-plaintext highlighter-rouge">String</code> title of the test block - See the <a href="https://jestjs.io/docs/api#testeachtablename-fn-timeout">referenced link</a> for the different formatting options</li>
<li>optionally, you can provide a timeout (in milliseconds) for specifying how long to wait for each row before aborting. The default timeout is 5 seconds.</li>
</ul>
<blockquote>
<p>This is the equivalent of <a href="https://junit.org/junit5/docs/current/user-guide/#writing-tests-parameterized-tests">@ParameterizedTest</a> in Java</p>
</blockquote>
<p><span style="font-size: 0.9rem">
<strong>Reference - </strong>
<a href="https://jestjs.io/docs/api#testeachtablename-fn-timeout" target="_blank" style="font-weight: lighter">
https://jestjs.io/docs/api#testeachtablename-fn-timeout
</a>
</span></p>
<hr />
<p class="note_normal">
Shared with <i class="fa fa-heart" style="color:orangered"></i> from <a href="https://www.codever.dev/snippets/639852fc3b43b9521ecfe046/details">Codever</a>.
👉 Use the <a href="https://www.codever.dev/snippets/639852fc3b43b9521ecfe046/details" class="copy-to-mine-btn"><i class="fa fa-copy"></i> Copy to mine</a>
functionality to copy this snippet to your own personal collection and easy manage
your code snippets.
<br />
<br />
<b>Codever</b> is open source on <a href="https://github.com/CodeverDotDev">Github</a> ⭐🙏
</p>
<p><a href="https://www.codepedia.org/snippets/639852fc3b43b9521ecfe046/how-to-use-jest-test-each-function">How to use jest test.each function</a> was originally published by CodepediaOrg at <a href="https://www.codepedia.org">CodepediaOrg</a> on December 14, 2022.</p>
https://www.codepedia.org/snippets/6398a6a53b43b9521ecfe361/compare-date-no-time-with-current-day-in-javascript
2022-12-14T00:00:00+01:00
2022-12-14T00:00:00+01:00
Adrian Matei (aka adixchen)
https://www.codepedia.org
adixchen@proton.me
<p>Get current date with <code class="language-plaintext highlighter-rouge">new Date()</code> and <code class="language-plaintext highlighter-rouge">setHours</code> to <code class="language-plaintext highlighter-rouge">0, 0, 0</code> and then you are ready to compare with the input date, which is a string in the <code class="language-plaintext highlighter-rouge">yyyy-MM-dd</code> format</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">export</span> <span class="kd">const</span> <span class="nx">isLessThanToday</span> <span class="o">=</span> <span class="p">(</span><span class="nx">input</span><span class="p">:</span> <span class="nx">string</span><span class="p">):</span> <span class="nx">boolean</span> <span class="o">=></span> <span class="p">{</span> <span class="c1">//format of input date is YYYY-MM-DD</span>
<span class="kd">const</span> <span class="nx">today</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">();</span>
<span class="nx">today</span><span class="p">.</span><span class="nx">setHours</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">0</span><span class="p">);</span>
<span class="k">return</span> <span class="nx">notEmpty</span><span class="p">(</span><span class="nx">input</span><span class="p">)</span> <span class="o">&&</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">(</span><span class="nx">input</span><span class="p">)</span> <span class="o"><</span> <span class="nx">today</span><span class="p">;</span>
<span class="p">};</span>
</code></pre></div></div>
<p>To test that we can use the following jest test:</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <span class="nx">describe</span><span class="p">(</span><span class="dl">'</span><span class="s1">isLessThanToday > </span><span class="dl">'</span><span class="p">,</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">test</span><span class="p">.</span><span class="nx">each</span><span class="p">([</span>
<span class="p">[</span><span class="kc">null</span><span class="p">,</span> <span class="kc">false</span><span class="p">],</span>
<span class="p">[</span><span class="kc">undefined</span><span class="p">,</span> <span class="kc">false</span><span class="p">],</span>
<span class="p">[</span><span class="dl">'</span><span class="s1">AXON</span><span class="dl">'</span><span class="p">,</span> <span class="kc">false</span><span class="p">],</span>
<span class="p">[</span><span class="dl">'</span><span class="s1">1900-01-01</span><span class="dl">'</span><span class="p">,</span> <span class="kc">true</span><span class="p">],</span>
<span class="p">[</span><span class="dl">'</span><span class="s1">2099-12-12</span><span class="dl">'</span><span class="p">,</span> <span class="kc">false</span><span class="p">],</span> <span class="c1">// TODO change this date when in 2099 :)</span>
<span class="p">[</span><span class="k">new</span> <span class="nb">Date</span><span class="p">().</span><span class="nx">toISOString</span><span class="p">().</span><span class="nx">slice</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">10</span><span class="p">),</span> <span class="kc">false</span><span class="p">],</span> <span class="c1">//today</span>
<span class="p">[</span><span class="k">new</span> <span class="nb">Date</span><span class="p">(</span><span class="k">new</span> <span class="nb">Date</span><span class="p">().</span><span class="nx">setDate</span><span class="p">(</span><span class="k">new</span> <span class="nb">Date</span><span class="p">().</span><span class="nx">getDate</span><span class="p">()</span> <span class="o">-</span> <span class="mi">1</span><span class="p">)).</span><span class="nx">toISOString</span><span class="p">().</span><span class="nx">slice</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">10</span><span class="p">),</span> <span class="kc">true</span><span class="p">],</span> <span class="c1">//yesterday</span>
<span class="p">[</span><span class="k">new</span> <span class="nb">Date</span><span class="p">(</span><span class="k">new</span> <span class="nb">Date</span><span class="p">().</span><span class="nx">setDate</span><span class="p">(</span><span class="k">new</span> <span class="nb">Date</span><span class="p">().</span><span class="nx">getDate</span><span class="p">()</span> <span class="o">-</span> <span class="mi">7</span><span class="p">)).</span><span class="nx">toISOString</span><span class="p">().</span><span class="nx">slice</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">10</span><span class="p">),</span> <span class="kc">true</span><span class="p">],</span> <span class="c1">//one week ago</span>
<span class="p">])(</span><span class="dl">'</span><span class="s1">given input date %p, it should return %p</span><span class="dl">'</span><span class="p">,</span> <span class="p">(</span><span class="nx">input</span><span class="p">,</span> <span class="nx">expected</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">expect</span><span class="p">(</span><span class="nx">isLessThanToday</span><span class="p">(</span><span class="nx">input</span><span class="p">)).</span><span class="nx">toEqual</span><span class="p">(</span><span class="nx">expected</span><span class="p">);</span>
<span class="p">});</span>
<span class="p">});</span>
</code></pre></div></div>
<p>See this <a href="https://www.codever.dev/snippets/639852fc3b43b9521ecfe046/details">How to use jest test.each function </a> to understand the usage of <code class="language-plaintext highlighter-rouge">test.each</code> function</p>
<hr />
<p class="note_normal">
Shared with <i class="fa fa-heart" style="color:orangered"></i> from <a href="https://www.codever.dev/snippets/6398a6a53b43b9521ecfe361/details">Codever</a>.
👉 Use the <a href="https://www.codever.dev/snippets/6398a6a53b43b9521ecfe361/details" class="copy-to-mine-btn"><i class="fa fa-copy"></i> Copy to mine</a>
functionality to copy this snippet to your own personal collection and easy manage
your code snippets.
<br />
<br />
<b>Codever</b> is open source on <a href="https://github.com/CodeverDotDev">Github</a> ⭐🙏
</p>
<p><a href="https://www.codepedia.org/snippets/6398a6a53b43b9521ecfe361/compare-date-no-time-with-current-day-in-javascript">Compare date (no time) with current day in javascript</a> was originally published by CodepediaOrg at <a href="https://www.codepedia.org">CodepediaOrg</a> on December 14, 2022.</p>
https://www.codepedia.org/snippets/63983f3ed00726522c6d0b5a/angular-material-dialog-on-scrolling-set-it-to-do-nothing-operation-
2022-12-13T00:00:00+01:00
2022-12-13T00:00:00+01:00
Adrian Matei (aka adixchen)
https://www.codepedia.org
adixchen@proton.me
<p>If you are using Angular Material Dialogs for example and when it pops up the page seems to move a bit, well that
might be due to the scrolling strategy that the dialog is using. If you don’t want to see this annoying effect you can
use the <code class="language-plaintext highlighter-rouge">NoopScrollStrategy</code> as <code class="language-plaintext highlighter-rouge">ScrollStrategy</code>, thus there is no influence on scrolling when the angular material dialog is opened.</p>
<p>One way to do that, is to set it via <code class="language-plaintext highlighter-rouge">ScrollStrategyOptions</code> to replace the default behaviour.
First define a <code class="language-plaintext highlighter-rouge">scrollStrategy</code> variable and set the value to <code class="language-plaintext highlighter-rouge">NoopScrollStrategy</code> by calling the <code class="language-plaintext highlighter-rouge">noop()</code> of the <code class="language-plaintext highlighter-rouge">ScrollStrategyOptions</code> in <code class="language-plaintext highlighter-rouge">OnInit</code>:</p>
<div class="language-typescript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">export</span> <span class="kd">class</span> <span class="nx">AppComponent</span> <span class="k">implements</span> <span class="nx">OnInit</span> <span class="p">{</span>
<span class="nl">scrollStrategy</span><span class="p">:</span> <span class="nx">ScrollStrategy</span><span class="p">;</span>
<span class="kd">constructor</span><span class="p">(</span><span class="k">private</span> <span class="nx">keycloakService</span><span class="p">:</span> <span class="nx">KeycloakService</span><span class="p">,</span>
<span class="c1">//...</span>
<span class="k">private</span> <span class="nx">historyDialog</span><span class="p">:</span> <span class="nx">MatDialog</span><span class="p">,</span>
<span class="k">private</span> <span class="nx">loginDialog</span><span class="p">:</span> <span class="nx">MatDialog</span><span class="p">,</span>
<span class="k">private</span> <span class="nx">loginDialogHelperService</span><span class="p">:</span> <span class="nx">LoginDialogHelperService</span><span class="p">,</span>
<span class="k">private</span> <span class="k">readonly</span> <span class="nx">scrollStrategyOptions</span><span class="p">:</span> <span class="nx">ScrollStrategyOptions</span><span class="p">)</span> <span class="p">{}</span>
<span class="nx">ngOnInit</span><span class="p">():</span> <span class="k">void</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">scrollStrategy</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">scrollStrategyOptions</span><span class="p">.</span><span class="nx">noop</span><span class="p">();</span>
<span class="p">}</span>
</code></pre></div></div>
<p>Then in the dialog configuration (<code class="language-plaintext highlighter-rouge">MatDialogConfig</code>) set the <code class="language-plaintext highlighter-rouge">scrollStrategy</code> property to this component variable</p>
<ul>
<li><code class="language-plaintext highlighter-rouge">dialogConfig.scrollStrategy = this.scrollStrategy;</code> :</li>
</ul>
<div class="language-typescript highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <span class="p">@</span><span class="nd">HostListener</span><span class="p">(</span><span class="dl">'</span><span class="s1">window:keydown.control.h</span><span class="dl">'</span><span class="p">,</span> <span class="p">[</span><span class="dl">'</span><span class="s1">$event</span><span class="dl">'</span><span class="p">])</span>
<span class="nx">showHistory</span><span class="p">(</span><span class="nx">event</span><span class="p">:</span> <span class="nx">KeyboardEvent</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">userIsLoggedIn</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">dialogConfig</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">loginDialogHelperService</span><span class="p">.</span><span class="nx">loginDialogConfig</span><span class="p">(</span><span class="dl">'</span><span class="s1">You need to be logged in to see the History Bookmarks popup</span><span class="dl">'</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">loginDialog</span><span class="p">.</span><span class="nx">open</span><span class="p">(</span><span class="nx">LoginRequiredDialogComponent</span><span class="p">,</span> <span class="nx">dialogConfig</span><span class="p">);</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">event</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
<span class="kd">const</span> <span class="nx">dialogConfig</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">MatDialogConfig</span><span class="p">();</span>
<span class="nx">dialogConfig</span><span class="p">.</span><span class="nx">disableClose</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
<span class="nx">dialogConfig</span><span class="p">.</span><span class="nx">autoFocus</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
<span class="nx">dialogConfig</span><span class="p">.</span><span class="nx">width</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">getRelativeWidth</span><span class="p">();</span>
<span class="nx">dialogConfig</span><span class="p">.</span><span class="nx">height</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">getRelativeHeight</span><span class="p">();</span>
<span class="nx">dialogConfig</span><span class="p">.</span><span class="nx">scrollStrategy</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">scrollStrategy</span><span class="p">;</span>
<span class="nx">dialogConfig</span><span class="p">.</span><span class="nx">data</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">bookmarks</span><span class="na">$</span><span class="p">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">userDataHistoryStore</span><span class="p">.</span><span class="nx">getAllHistory$</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">userId</span><span class="p">),</span>
<span class="na">title</span><span class="p">:</span> <span class="dl">'</span><span class="s1"><i class="fas fa-history"></i> History</span><span class="dl">'</span>
<span class="p">};</span>
<span class="kd">const</span> <span class="nx">dialogRef</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">historyDialog</span><span class="p">.</span><span class="nx">open</span><span class="p">(</span><span class="nx">HotKeysDialogComponent</span><span class="p">,</span> <span class="nx">dialogConfig</span><span class="p">);</span>
<span class="nx">dialogRef</span><span class="p">.</span><span class="nx">afterClosed</span><span class="p">().</span><span class="nx">subscribe</span><span class="p">(</span>
<span class="nx">data</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">'</span><span class="s1">Dialog output:</span><span class="dl">'</span><span class="p">,</span> <span class="nx">data</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
</code></pre></div></div>
<p>For the <strong>login required dialog</strong>,
this option is injected via a service - <code class="language-plaintext highlighter-rouge">const dialogConfig = this.loginDialogHelperService.loginDialogConfig('You need to be logged in to see the History Bookmarks popup');</code>,
but it follows basically the same principle:</p>
<div class="language-typescript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">@</span><span class="nd">Injectable</span><span class="p">()</span>
<span class="k">export</span> <span class="kd">class</span> <span class="nx">LoginDialogHelperService</span> <span class="p">{</span>
<span class="nl">scrollStrategy</span><span class="p">:</span> <span class="nx">ScrollStrategy</span><span class="p">;</span>
<span class="kd">constructor</span><span class="p">(</span><span class="k">private</span> <span class="k">readonly</span> <span class="nx">scrollStrategyOptions</span><span class="p">:</span> <span class="nx">ScrollStrategyOptions</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">scrollStrategy</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">scrollStrategyOptions</span><span class="p">.</span><span class="nx">noop</span><span class="p">();</span>
<span class="p">}</span>
<span class="nx">loginDialogConfig</span><span class="p">(</span><span class="nx">message</span><span class="p">:</span> <span class="kr">string</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">dialogConfig</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">MatDialogConfig</span><span class="p">();</span>
<span class="nx">dialogConfig</span><span class="p">.</span><span class="nx">disableClose</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
<span class="nx">dialogConfig</span><span class="p">.</span><span class="nx">autoFocus</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
<span class="nx">dialogConfig</span><span class="p">.</span><span class="nx">scrollStrategy</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">scrollStrategy</span><span class="p">;</span>
<span class="nx">dialogConfig</span><span class="p">.</span><span class="nx">data</span> <span class="o">=</span> <span class="p">{</span>
<span class="na">message</span><span class="p">:</span> <span class="nx">message</span>
<span class="p">};</span>
<span class="k">return</span> <span class="nx">dialogConfig</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
</code></pre></div></div>
<p><span style="font-size: 0.9rem">
<strong>Reference - </strong>
<a href="https://material.angular.io/cdk/overlay/api#ScrollStrategyOptions" target="_blank" style="font-weight: lighter">
https://material.angular.io/cdk/overlay/api#ScrollStrategyOptions
</a>
</span></p>
<hr />
<p class="note_normal">
Shared with <i class="fa fa-heart" style="color:orangered"></i> from <a href="https://www.codever.dev/snippets/63983f3ed00726522c6d0b5a/details">Codever</a>.
👉 Use the <a href="https://www.codever.dev/snippets/63983f3ed00726522c6d0b5a/details" class="copy-to-mine-btn"><i class="fa fa-copy"></i> Copy to mine</a>
functionality to copy this snippet to your own personal collection and easy manage
your code snippets.
<br />
<br />
<b>Codever</b> is open source on <a href="https://github.com/CodeverDotDev">Github</a> ⭐🙏
</p>
<p><a href="https://www.codepedia.org/snippets/63983f3ed00726522c6d0b5a/angular-material-dialog-on-scrolling-set-it-to-do-nothing-operation-">Do nothing on Angular material dialog scrolling</a> was originally published by CodepediaOrg at <a href="https://www.codepedia.org">CodepediaOrg</a> on December 13, 2022.</p>
https://www.codepedia.org/snippets/6389997bb160cb1fab2430fe/configure-and-use-environment-specific-values-in-angular-and-html-template
2022-12-08T00:00:00+01:00
2022-12-08T00:00:00+01:00
Adrian Matei (aka adixchen)
https://www.codepedia.org
adixchen@proton.me
<h3 id="configuring-application-environments">Configuring application environments</h3>
<p>First define different <code class="language-plaintext highlighter-rouge">environment</code> files for the environments you might have under the project’s <code class="language-plaintext highlighter-rouge">src/environments/</code> folder.
Below there is an extract from <code class="language-plaintext highlighter-rouge">environment.ts</code> (used for development) and <code class="language-plaintext highlighter-rouge">environment.prod.ts</code> used for production:</p>
<div class="language-typescript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">//environment.ts</span>
<span class="k">export</span> <span class="kd">const</span> <span class="nx">environment</span> <span class="o">=</span> <span class="p">{</span>
<span class="na">production</span><span class="p">:</span> <span class="kc">false</span><span class="p">,</span>
<span class="na">HOST</span><span class="p">:</span> <span class="dl">'</span><span class="s1">http://localhost:4200</span><span class="dl">'</span><span class="p">,</span>
<span class="na">API_URL</span><span class="p">:</span> <span class="dl">'</span><span class="s1">http://localhost:3000/api</span><span class="dl">'</span><span class="p">,</span>
<span class="p">};</span>
<span class="c1">//environment.prod.ts</span>
<span class="k">export</span> <span class="kd">const</span> <span class="nx">environment</span> <span class="o">=</span> <span class="p">{</span>
<span class="na">production</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
<span class="na">HOST</span><span class="p">:</span> <span class="dl">'</span><span class="s1">https://www.codever.dev</span><span class="dl">'</span><span class="p">,</span>
<span class="na">API_URL</span><span class="p">:</span> <span class="dl">'</span><span class="s1">https://www.codever.dev/api</span><span class="dl">'</span><span class="p">,</span>
<span class="p">};</span>
</code></pre></div></div>
<p>The <code class="language-plaintext highlighter-rouge">build</code> command (and <code class="language-plaintext highlighter-rouge">ng serve</code>) uses <code class="language-plaintext highlighter-rouge">environment.ts</code> as the build target when no environment is specified.</p>
<p>The main CLI configuration file, <code class="language-plaintext highlighter-rouge">angular.json</code>, contains a <code class="language-plaintext highlighter-rouge">fileReplacements</code> section in the configuration for each build target,
which lets you replace any file in the TypeScript program with a target-specific version of that file.
This is useful for including target-specific code or variables in a build that targets a specific environment, such as production or staging.</p>
<p>By default, no files are replaced. You can add file replacements for specific build targets. For example</p>
<div class="language-typescript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="dl">"</span><span class="s2">configurations</span><span class="dl">"</span><span class="p">:</span> <span class="p">{</span>
<span class="dl">"</span><span class="s2">production</span><span class="dl">"</span><span class="p">:</span> <span class="p">{</span>
<span class="dl">"</span><span class="s2">fileReplacements</span><span class="dl">"</span><span class="p">:</span> <span class="p">[</span>
<span class="p">{</span>
<span class="dl">"</span><span class="s2">replace</span><span class="dl">"</span><span class="p">:</span> <span class="dl">"</span><span class="s2">src/environments/environment.ts</span><span class="dl">"</span><span class="p">,</span>
<span class="dl">"</span><span class="s2">with</span><span class="dl">"</span><span class="p">:</span> <span class="dl">"</span><span class="s2">src/environments/environment.prod.ts</span><span class="dl">"</span>
<span class="p">}</span>
<span class="p">],</span>
<span class="err">…</span>
</code></pre></div></div>
<p>This means that when you build your production configuration with <code class="language-plaintext highlighter-rouge">ng build --configuration production</code>,
the <code class="language-plaintext highlighter-rouge">src/environments/environment.ts</code> file is replaced with the target-specific version of the file, <code class="language-plaintext highlighter-rouge">src/environments/environment.prod.ts</code>.</p>
<p>You can add additional configurations (e.g. pro different stages) as required.</p>
<h3 id="using-environment-specific-variables-in-your-app">Using environment-specific variables in your app</h3>
<p>Then in your code import <code class="language-plaintext highlighter-rouge">environment</code> and use the values defined in the files above, as in the following example:</p>
<div class="language-typescript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">import</span> <span class="p">{</span> <span class="nx">environment</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">../../../environments/environment</span><span class="dl">'</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">localStorageKeys</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">../model/localstorage.cache-keys</span><span class="dl">'</span><span class="p">;</span>
<span class="p">@</span><span class="nd">Injectable</span><span class="p">()</span>
<span class="k">export</span> <span class="kd">class</span> <span class="nx">SystemService</span> <span class="p">{</span>
<span class="nx">cachedQueries</span> <span class="o">=</span> <span class="p">{</span>
<span class="na">PUBLIC_TAGS_LIST</span><span class="p">:</span> <span class="s2">`</span><span class="p">${</span><span class="nx">environment</span><span class="p">.</span><span class="nx">API_URL</span><span class="p">}</span><span class="s2">/public/bookmarks`</span>
<span class="p">}</span>
<span class="c1">//...</span>
<span class="p">}</span>
</code></pre></div></div>
<p>If you want to use environment variables in your angular html template,
then just define a local variable for the imported environment and use it in the template, like in the following example:</p>
<div class="language-typescript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">import</span> <span class="p">{</span> <span class="nx">environment</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">environments/environment</span><span class="dl">'</span><span class="p">;</span>
<span class="p">@</span><span class="nd">Component</span><span class="p">({</span>
<span class="na">selector</span><span class="p">:</span> <span class="dl">'</span><span class="s1">app-social-share-dialog</span><span class="dl">'</span><span class="p">,</span>
<span class="na">templateUrl</span><span class="p">:</span> <span class="dl">'</span><span class="s1">./social-share-dialog.component.html</span><span class="dl">'</span><span class="p">,</span>
<span class="na">styleUrls</span><span class="p">:</span> <span class="p">[</span><span class="dl">'</span><span class="s1">./social-share-dialog.component.scss</span><span class="dl">'</span><span class="p">],</span>
<span class="na">providers</span><span class="p">:</span> <span class="p">[</span><span class="nx">DatePipe</span><span class="p">]</span>
<span class="p">})</span>
<span class="k">export</span> <span class="kd">class</span> <span class="nx">SocialShareDialogComponent</span> <span class="k">implements</span> <span class="nx">OnInit</span> <span class="p">{</span>
<span class="nx">sharableId$</span><span class="p">:</span> <span class="nx">Observable</span><span class="o"><</span><span class="kr">any</span><span class="o">></span><span class="p">;</span>
<span class="k">readonly</span> <span class="nx">environment</span> <span class="o">=</span> <span class="nx">environment</span><span class="p">;</span>
<span class="c1">//...</span>
<span class="p">}</span>
</code></pre></div></div>
<p>The <strong>html</strong> part, where <code class="language-plaintext highlighter-rouge">HOST</code> value is used:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <div>
<h3>Shareable</h3>
</div>
</code></pre></div></div>
<p><span style="font-size: 0.9rem">
<strong>Reference - </strong>
<a href="https://angular.io/guide/build#using-environment-specific-variables-in-your-app" target="_blank" style="font-weight: lighter">
https://angular.io/guide/build#using-environment-specific-variables-in-your-app
</a>
</span></p>
<hr />
<p class="note_normal">
Shared with <i class="fa fa-heart" style="color:orangered"></i> from <a href="https://www.codever.dev/snippets/6389997bb160cb1fab2430fe/details">Codever</a>.
👉 Use the <a href="https://www.codever.dev/snippets/6389997bb160cb1fab2430fe/details" class="copy-to-mine-btn"><i class="fa fa-copy"></i> Copy to mine</a>
functionality to copy this snippet to your own personal collection and easy manage
your code snippets.
<br />
<br />
<b>Codever</b> is open source on <a href="https://github.com/CodeverDotDev">Github</a> ⭐🙏
</p>
<p><a href="https://www.codepedia.org/snippets/6389997bb160cb1fab2430fe/configure-and-use-environment-specific-values-in-angular-and-html-template">Configure and use environment specific values in Angular and html template</a> was originally published by CodepediaOrg at <a href="https://www.codepedia.org">CodepediaOrg</a> on December 08, 2022.</p>
https://www.codepedia.org/ama/increase-productivity-differentiate-prod-and-dev
2022-12-06T00:00:00+01:00
2022-12-06T00:00:00+01:00
Adrian Matei (aka adixchen)
https://www.codepedia.org
adixchen@proton.me
<h2 id="going-green">Going “green”</h2>
<p>As mentioned <a href="https://dev.to/ama/how-i-manage-my-dev-bookmarks-and-save-time-and-nerves-56ae">How I manage my dev bookmarks to save time and nerves</a>
I use heavily <a href="https://www.codever.dev">Codever</a> to manage my bookmarks and code snippets, so there is always a browser
tab open with the website. Lately I’ve also been developing quite a bunch of <a href="https://github.com/CodeverDotDev/codever/tags">new features</a> on the project.
Lots of testing happens in the browser, and until now there was no quick way to differentiate between the production and development version,
unless I look at the URL in the browser’s navigation bar of course.</p>
<p>Because I am always looking for things to make me life easier, I’ve remembered of an old trick to help me much easier differentiate between the two versions:</p>
<ul>
<li>change the <strong>color</strong> of the <strong>navigation bar</strong></li>
<li>change the <strong>favicon</strong></li>
</ul>
<p>Both are now <span style="color:green"><b>green</b></span> for the dev environment 🤓🟢</p>
<p>See in the pictures below how easy it’s to recognise the versions without looking the url</p>
<figure class="image">
<img src="/images/posts/2022-12-06-increase-productivity-visually-differentiate-environments/recognise-dev-when-in-prod.jpeg" alt="Recognise dev tab when in production" />
<figcaption>Recognise dev tab when in production</figcaption>
</figure>
<figure class="image">
<img src="/images/posts/2022-12-06-increase-productivity-visually-differentiate-environments/recognise-prod-when-in-dev.jpeg" alt="Recognise prod tab when in development" />
<figcaption>Recognise prod tab when in development</figcaption>
</figure>
<h2 id="code-changes">Code changes</h2>
<h3 id="favicon">Favicon</h3>
<p>The code changes were minor. First change the <code class="language-plaintext highlighter-rouge">favicon</code> <code class="language-plaintext highlighter-rouge">href</code> attribute <strong>when not production</strong></p>
<div class="language-typescript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">export</span> <span class="kd">class</span> <span class="nx">AppComponent</span> <span class="k">implements</span> <span class="nx">OnInit</span> <span class="p">{</span>
<span class="nl">favIcon</span><span class="p">:</span> <span class="nx">HTMLLinkElement</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">'</span><span class="s1">#favicon</span><span class="dl">'</span><span class="p">);</span>
<span class="k">readonly</span> <span class="nx">environment</span> <span class="o">=</span> <span class="nx">environment</span><span class="p">;</span>
<span class="nx">ngOnInit</span><span class="p">():</span> <span class="k">void</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">environment</span><span class="p">.</span><span class="nx">production</span> <span class="o">===</span> <span class="kc">false</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">favIcon</span><span class="p">.</span><span class="nx">href</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">assets/logo/logo-green.svg</span><span class="dl">'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
</code></pre></div></div>
<blockquote>
<p>See <a href="https://www.codever.dev/snippets/6389997bb160cb1fab2430fe/details">Configure and use environment specific values in Angular and html template</a> to see how to work with Angular environments</p>
</blockquote>
<h3 id="navigation-bar-color">Navigation bar color</h3>
<p>Then set the navigation’s bar color to <span style="color:green"><b>green</b></span> also based
on <strong>not production</strong> condition</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><nav</span> <span class="na">class=</span><span class="s">"navbar navbar-expand-lg navbar-dark bg-dark fixed-top shadow"</span>
<span class="na">[ngClass]=</span><span class="s">"{'navbar-dev' : environment.production === false}"</span> <span class="nt">></span>
</code></pre></div></div>
<p>The <code class="language-plaintext highlighter-rouge">navbar-dev</code> css class</p>
<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.navbar-dev</span> <span class="p">{</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="no">darkgreen</span> <span class="cp">!important</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div></div>
<blockquote>
<p>See <a href="https://www.codever.dev/snippets/638daa94d00726522c6cdd7c/details">Conditional css class in angular html element </a>
on how to change a class in Angular dynamically</p>
</blockquote>
<h2 id="multiple-devtesting-environments">Multiple dev/testing environments</h2>
<p>Of course if you have <strong>more dev/test environments</strong> like <strong>integration</strong> or <strong>preprod</strong>, consider differentiating them as well,
your developers will thank you.</p>
<p>You won’t believe how these little tweaks can improve your development experience 💪</p>
<p><a href="https://www.codepedia.org/ama/visually-differentiate-environments-for-better-efficiency">Visually differentiate environments for better programming efficiency</a> was originally published by CodepediaOrg at <a href="https://www.codepedia.org">CodepediaOrg</a> on December 06, 2022.</p>
https://www.codepedia.org/snippets/638daa94d00726522c6cdd7c/conditional-css-class-in-angular-html-element
2022-12-05T00:00:00+01:00
2022-12-05T00:00:00+01:00
Adrian Matei (aka adixchen)
https://www.codepedia.org
adixchen@proton.me
<p>Use the <code class="language-plaintext highlighter-rouge">ngClass</code> input attribute with the <strong>object</strong> notation,
where the <strong>keys</strong> are CSS classes that get added when the expression given in the value evaluates to <strong>truthy</strong> value,
otherwise they are removed. In the example below the class <code class="language-plaintext highlighter-rouge">navbar-dev-green</code> is added to the <code class="language-plaintext highlighter-rouge">nav</code> element only for the <strong>dev</strong> environment (non-prod):</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><nav</span> <span class="na">class=</span><span class="s">"navbar navbar-expand-lg navbar-dark bg-dark fixed-top shadow"</span>
<span class="na">[ngClass]=</span><span class="s">"{'navbar-dev-green' : environment.production === false}"</span> <span class="nt">></span>
...
<span class="nt"></nav></span>
</code></pre></div></div>
<p><strong>Project</strong>: <code class="language-plaintext highlighter-rouge">codever</code> - <strong>File</strong>: <code class="language-plaintext highlighter-rouge">navigation.component.html</code></p>
<p>To add multiple classes you can list them with space between them.
To add different conditions for each class use a boolean expression evaluator for each class as shown in the example of the documentation:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><some-element</span> <span class="na">[ngClass]=</span><span class="s">"{'class1 class2 class3' : true}"</span><span class="nt">></span>...<span class="nt"></some-element></span>
<span class="nt"><some-element</span> <span class="na">[ngClass]=</span><span class="s">"{'first': true, 'second': true, 'third': false}"</span><span class="nt">></span>...<span class="nt"></some-element></span>
</code></pre></div></div>
<p><span style="font-size: 0.9rem">
<strong>Reference - </strong>
<a href="https://angular.io/api/common/NgClass" target="_blank" style="font-weight: lighter">
https://angular.io/api/common/NgClass
</a>
</span></p>
<hr />
<p class="note_normal">
Shared with <i class="fa fa-heart" style="color:orangered"></i> from <a href="https://www.codever.dev/snippets/638daa94d00726522c6cdd7c/details">Codever</a>.
👉 Use the <a href="https://www.codever.dev/snippets/638daa94d00726522c6cdd7c/details" class="copy-to-mine-btn"><i class="fa fa-copy"></i> Copy to mine</a>
functionality to copy this snippet to your own personal collection and easy manage
your code snippets.
<br />
<br />
<b>Codever</b> is open source on <a href="https://github.com/CodeverDotDev">Github</a> ⭐🙏
</p>
<p><a href="https://www.codepedia.org/snippets/638daa94d00726522c6cdd7c/conditional-css-class-in-angular-html-element">Conditional css class in angular html element</a> was originally published by CodepediaOrg at <a href="https://www.codepedia.org">CodepediaOrg</a> on December 05, 2022.</p>
https://www.codepedia.org/snippets/63820b10944cbd1faacdea21/dynamically-expand-angular-material-panel-when-condition-met
2022-11-26T00:00:00+01:00
2022-11-26T00:00:00+01:00
Adrian Matei (aka adixchen)
https://www.codepedia.org
adixchen@proton.me
<p>Use the <code class="language-plaintext highlighter-rouge">expanded</code> attribute of the <code class="language-plaintext highlighter-rouge">mat-expansion-panel</code> element and set it to <code class="language-plaintext highlighter-rouge">true</code> when the condition is met.
In the following example a filter pipe is used
and <a href="https://www.codever.dev/snippets/63806e79944cbd1faacdda84/details">the result is placed in the <code class="language-plaintext highlighter-rouge">filteredBookmarks</code> variable</a>
which is checked in the condition - <code class="language-plaintext highlighter-rouge">[expanded]="filteredBookmarks.length === 1"</code> :</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><mat-expansion-panel</span>
<span class="na">*ngFor=</span><span class="s">"let bookmark of bookmarks | bookmarkFilter: filterText as filteredBookmarks; index as i"</span>
<span class="na">[expanded]=</span><span class="s">"filteredBookmarks.length === 1"</span><span class="nt">></span>
<span class="nt"><mat-expansion-panel-header</span> <span class="na">*ngIf=</span><span class="s">"i<15"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"p-3"</span><span class="nt">></span>
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">""</span>
<span class="na">[innerHTML]=</span><span class="s">"bookmark.name | slice:0:100 | highlightHtml: filterText"</span>
<span class="na">target=</span><span class="s">"_blank"</span>
<span class="na">(click)=</span><span class="s">"addToHistoryService.promoteInHistoryIfLoggedIn(true, bookmark)"</span>
<span class="na">(auxclick)=</span><span class="s">"addToHistoryService.onMiddleClickInDescription(true, $event, bookmark)"</span>
<span class="nt">></span>
see innerhtml
<span class="nt"></a></span>
<span class="nt"><sup</span> <span class="na">class=</span><span class="s">"external-link-hint"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"fas fa-external-link-alt"</span><span class="nt">></i></sup></span>
<span class="nt"></h5></span>
<span class="nt"><h6</span> <span class="na">class=</span><span class="s">"card-subtitle mb-2 text-muted url-under-title"</span>
<span class="na">[innerHTML]=</span><span class="s">"bookmark.location | slice:0:120 | highlightHtml: filterText"</span>
<span class="nt">></span>
see innerhtml
<span class="nt"></h6></span>
<span class="nt"></div></span>
<span class="nt"></mat-expansion-panel-header></span>
<span class="nt"><ng-template</span> <span class="na">matExpansionPanelContent</span><span class="nt">></span>
<span class="nt"><app-bookmark-text</span> <span class="na">[bookmark]=</span><span class="s">"bookmark"</span> <span class="na">[showMoreText]=</span><span class="s">"true"</span>
<span class="na">(click)=</span><span class="s">"addToHistoryService.onClickInDescription(true, $event, bookmark)"</span>
<span class="na">(auxclick)=</span><span class="s">"addToHistoryService.onMiddleClickInDescription(true, $event, bookmark)"</span><span class="nt">></span>
<span class="nt"></app-bookmark-text></span>
<span class="nt"></ng-template></span>
<span class="nt"></mat-expansion-panel></span>
</code></pre></div></div>
<blockquote>
<p><strong>Project</strong>: <code class="language-plaintext highlighter-rouge">codever</code> - <strong>File</strong>: <code class="language-plaintext highlighter-rouge">hot-keys-dialog.component.html</code></p>
</blockquote>
<p>See it in action at <a href="https://www.codever.dev">www.codever.dev</a>:</p>
<p><img src="/images/posts/2022-11-26-expand-angular-material-accordeon-dynamically/codever-automatic-expander-filter-one-result.gif" alt="Copy-to-clipboard-demo" /></p>
<hr />
<p class="note_normal">
Shared with <i class="fa fa-heart" style="color:orangered"></i> from <a href="https://www.codever.dev/snippets/63820b10944cbd1faacdea21/details">Codever</a>.
👉 Use the <a href="https://www.codever.dev/snippets/63820b10944cbd1faacdea21/details" class="copy-to-mine-btn"><i class="fa fa-copy"></i> Copy to mine</a>
functionality to copy this snippet to your own personal collection and easy manage
your code snippets.
<br />
<br />
<b>Codever</b> is open source on <a href="https://github.com/CodeverDotDev">Github</a> ⭐🙏
</p>
<p><a href="https://www.codepedia.org/snippets/63820b10944cbd1faacdea21/dynamically-expand-angular-material-panel-when-condition-met">Dynamically expand angular material panel when condition met</a> was originally published by CodepediaOrg at <a href="https://www.codepedia.org">CodepediaOrg</a> on November 26, 2022.</p>