rss.xml

<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"><channel><title><![CDATA[XKoji.dev]]></title><description><![CDATA[Website for all things XkojiMedia]]></description><link>https://www.xkoji.dev</link><generator>GatsbyJS</generator><lastBuildDate>Sun, 05 Mar 2023 00:25:50 GMT</lastBuildDate><item><title><![CDATA[Introducing Team collaboration - share queries and collections with Altair GraphQL (alpha)]]></title><description><![CDATA[Sometime last year, we announce the remote sync functionality. However this only allowed you to sync your collections across devices. Today…]]></description><link>https://www.xkoji.dev/blog/introducing-team-collaboration--share-queries-and-collections-with-altair-graphql/</link><guid isPermaLink="false">https://www.xkoji.dev/blog/introducing-team-collaboration--share-queries-and-collections-with-altair-graphql/</guid><pubDate>Sun, 05 Mar 2023 00:08:54 GMT</pubDate><content:encoded>&lt;p&gt;Sometime last year, we announce the &lt;a href=&quot;https://www.xkoji.dev/blog/altair-graphql-introducing-remote-sync-functionality---now-in-beta/&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;remote sync functionality&lt;/a&gt;. However this only allowed you to sync your collections across devices.&lt;/p&gt;
&lt;p&gt;Today we are thrilled to announce a new feature in Altair GraphQL Client: team collaboration (in alpha)! With this new feature, users can now easily share queries and collections with their team members, enabling more effective collaboration and streamlined workflows.&lt;/p&gt;
&lt;p&gt;The new team sharing feature is currently in alpha and can be tested by enabling &lt;a href=&quot;https://altairgraphql.dev/docs/features/settings-pane.html#enableexperimental-enable-experimental-features-in-altair-note-the-features-might-be-unstable&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;experimental mode&lt;/a&gt; in Altair. Once enabled, users will be able to login and have access to a dashboard where they can create teams with team members to share queries and collections with. This allows for improved and seamless collaboration between team members.&lt;/p&gt;
&lt;p&gt;Please note that this feature is still in alpha and is not yet fully tested or stable. We encourage users to use caution when testing this feature and to provide feedback on their experience. Your feedback will be essential in helping us refine and improve this feature as we move towards a full release.&lt;/p&gt;
&lt;p&gt;While in alpha/beta phase, you can only create 1 team with 1 other team member, and you are allowed to have a maximum of 20 queries. These limits should be sufficient to get the feature tested without a huge cost incurred if something goes wrong. We will gradually increase these limits as we approach a full release.&lt;/p&gt;
&lt;p&gt;NOTE: This feature is available to all platforms, and not just the desktop apps.&lt;/p&gt;
&lt;p&gt;Looking forward to hear your thoughts and feedback!&lt;/p&gt;</content:encoded></item><item><title><![CDATA[Altair GraphQL introducing remote sync functionality - now in beta]]></title><description><![CDATA[We have released Altair GraphQL Client v5.0.0 recently and with it, comes a brand refresh, but also the beta release of the remote sync…]]></description><link>https://www.xkoji.dev/blog/altair-graphql-introducing-remote-sync-functionality---now-in-beta/</link><guid isPermaLink="false">https://www.xkoji.dev/blog/altair-graphql-introducing-remote-sync-functionality---now-in-beta/</guid><pubDate>Wed, 21 Sep 2022 17:31:14 GMT</pubDate><content:encoded>&lt;p&gt;We have released Altair GraphQL Client v5.0.0 recently and with it, comes a brand refresh, but also the beta release of the remote sync functionality.&lt;/p&gt;
&lt;p&gt;Traditionally, Altair has been delightful for developers working locally on their own, with the ability to store queries and collections to disk. Sharing these documents across devices and teammates by manually copying the files over is not a great experience as it requires a manual process, and the copied files can easily get out of sync.&lt;/p&gt;
&lt;p&gt;&lt;span
      class=&quot;gatsby-resp-image-wrapper&quot;
      style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 1016px;&quot;
    &gt;
      &lt;span
    class=&quot;gatsby-resp-image-background-image&quot;
    style=&quot;padding-bottom: 42.66666666666667%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAYAAAAywQxIAAAACXBIWXMAABYlAAAWJQFJUiTwAAABX0lEQVQoz21RW07DMBD0YZHgBhwCxAE4ET8VHyDU0EfUSmnSPO0kTey8Bo+rVhC60mrj7Hp2ZixgQ0oJ3/cRBAG85RJRFPE3pmn6k79Da41MJQjlHrEKIZVElmYQp9Pp3ExTxHGMsizdeQ7IMMa4vrF9ow0O2R4f0Rs28RfSPMF2s4UYxxFd14HAHP4dc0AuSpLEzXadcQzrukbfDaiqCk3TQPCDktfrNXa7HTzPw+p79Y8lYxgGtG17BQ+kj7Sy9th2URSIj0cIDhM0DENkWebyEByQ5/kVbJxGV/u+d+x4Jpu20XaBdiy5gH1BdpTNmibWx2PsvLolmRcuthBYlQraaMea6STzgx4qpc5b7ZkXb70wJXPmCmjvjMOEoRtdnQZAsEnA1L4yZd56kAsg56jkAki2ZVtANilUm6HUOQQ9o34CSmvsHGietIdVW+/KWuH18xFPizu8vD/geXGPH89CtiokDfzpAAAAAElFTkSuQmCC&apos;); background-size: cover; display: block;&quot;
  &gt;&lt;/span&gt;
  &lt;img
        class=&quot;gatsby-resp-image-image&quot;
        alt=&quot;Synced collection on device #1&quot;
        title=&quot;Synced collection on device #1&quot;
        src=&quot;/static/b48948318fc911b028bc2d51bb9e7175/f4281/synced-collection-1.png&quot;
        srcset=&quot;/static/b48948318fc911b028bc2d51bb9e7175/5a46d/synced-collection-1.png 300w,
/static/b48948318fc911b028bc2d51bb9e7175/0a47e/synced-collection-1.png 600w,
/static/b48948318fc911b028bc2d51bb9e7175/f4281/synced-collection-1.png 1016w&quot;
        sizes=&quot;(max-width: 1016px) 100vw, 1016px&quot;
        style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot;
        loading=&quot;lazy&quot;
      /&gt;
    &lt;/span&gt;
&lt;span
      class=&quot;gatsby-resp-image-wrapper&quot;
      style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 942px;&quot;
    &gt;
      &lt;span
    class=&quot;gatsby-resp-image-background-image&quot;
    style=&quot;padding-bottom: 46.333333333333336%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAYAAAAywQxIAAAACXBIWXMAABYlAAAWJQFJUiTwAAABd0lEQVQoz2VSy3KCQBDkL/JQEAR5LiyIoKB4MElVrEr0kMr/f0pnehXLMocp2GW6p7sHK5j7CPwAVVmhWTVYNy36TY+6qs39wl88VACfmHmANE6htUZZlVLylHcrDC5NKlPYdr2Qddi0ayFcwpnamNnOrXh2nZnpn7seiO2GFQ6/DQ4/ImRoYfneHFTJ6XEYIVc5pq8TvDw9G/B9kZBkdKHzwqjUOkdVF1B5KqIyWNEiRBzFWIrlXb/FfjdgPwwYtjuxlBgVHMS+sbIkgUozuRdcp9AOGt7MRS4uDSGn0u7p6xsfb+84fh5xPp0NKZUQzEj4zLPc3DMWlSqkSSqVIBFRFGaRzKiUaYWAy0KbyqRxzDe4LuESTYBElHMxdMABWZKhkKhWyxoWZTI3NnNLVET7tOlMprIM+99SiOGZQkhI7LgLyxYQm/hRF4Uh4lJG8H2RhFlRPc9miUIYiRNaJoexHF7DHu0+Ej0S0upFBP+KAq7n336xP89KCYXLeeLWAAAAAElFTkSuQmCC&apos;); background-size: cover; display: block;&quot;
  &gt;&lt;/span&gt;
  &lt;img
        class=&quot;gatsby-resp-image-image&quot;
        alt=&quot;Synced collection on device #2&quot;
        title=&quot;Synced collection on device #2&quot;
        src=&quot;/static/98a386136b592ea348461a328709ecff/f1901/synced-collection-2.png&quot;
        srcset=&quot;/static/98a386136b592ea348461a328709ecff/5a46d/synced-collection-2.png 300w,
/static/98a386136b592ea348461a328709ecff/0a47e/synced-collection-2.png 600w,
/static/98a386136b592ea348461a328709ecff/f1901/synced-collection-2.png 942w&quot;
        sizes=&quot;(max-width: 942px) 100vw, 942px&quot;
        style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot;
        loading=&quot;lazy&quot;
      /&gt;
    &lt;/span&gt;&lt;/p&gt;
&lt;p&gt;Now with the newly added remote sync functionality, once a collection is synced, it is no longer local to the device but is accessible from any device where the account is logged in, and changes made to the collection becomes immediately available to the other devices as well. One thing that is not yet available though is the ability to share the documents to other people or within a team.&lt;/p&gt;
&lt;p&gt;This feature is still in beta though, and so there will still be some kinks that need to be addressed before it becomes stable enough for General Availability. While in beta, the number of queries that can be created are limited to 25 which should be large enough to checkout this feature. As it becomes more stable, the limit would be gradually increased. We can’t wait to fully release this but we would need your help testing it and providing us with lots of feedback to improve it!&lt;/p&gt;
&lt;p&gt;&lt;span
      class=&quot;gatsby-resp-image-wrapper&quot;
      style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 466px;&quot;
    &gt;
      &lt;span
    class=&quot;gatsby-resp-image-background-image&quot;
    style=&quot;padding-bottom: 69%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAOCAYAAAAvxDzwAAAACXBIWXMAABYlAAAWJQFJUiTwAAAB6klEQVQ4y5WTW2/aQBCF+RcFjD1783XXNrZJaAq5VG2f276XSCVq/v8/OJ1dIxIiQtWH0eDF++nMmeOJSBKIhCDisdvSonENXGWhpQIdzsf3xvJnUhFSy+UIWS1CaaUxeQt0lUNbtwFspD4DJNAigc4I5ZVA9VGgXLOQTxJFnp4HDt2A2tbvK2Sg0h7CsEHAKAOnJYyg88C+61FzPw+kF+ANK7wWKGqDgoEukww8XqBXCvsLCl9GtjcSec+9N3wmMVjlFRKSRYw4WhyBq34I/RLQlKPCcsUKV4TcGeR+KR5WZjkvoQqXnR0Vvr/l06V4cNYIpLlEpnjkaDbHw909fn7/McaGlXVt90+gMhT8y5c81dpAk0JXMdBfyIxBVZRvPLwwMp8pzmHpF9JxBksNm7KfWvyvh3QINnGwecNrNQKLNABTKQ6xif0YFF70Hnrgslmy8jRAJAnIQxdxDJnXkJkFyRLJNAoWJIvxC5ok8wRFL+A2IvzhgcumRZHm4Xn2YYr5dIYFe+39PiqWBsr2J5HzNaGIPXQsu/Xh5m3pNAC/ffmKz/cP2G42uNve4np1hdvNdrSBLRIkIavu5KPw0wYPPdQrVUKGsTsGPu2f8Phrh+c/z/x7j/3vPR53OxQcMe958DKKTmC+/gKqr5DUcrvg+gAAAABJRU5ErkJggg==&apos;); background-size: cover; display: block;&quot;
  &gt;&lt;/span&gt;
  &lt;img
        class=&quot;gatsby-resp-image-image&quot;
        alt=&quot;Account login&quot;
        title=&quot;Account login&quot;
        src=&quot;/static/877599887079813879fde5451eb16ef4/fc1a1/account-login.png&quot;
        srcset=&quot;/static/877599887079813879fde5451eb16ef4/5a46d/account-login.png 300w,
/static/877599887079813879fde5451eb16ef4/fc1a1/account-login.png 466w&quot;
        sizes=&quot;(max-width: 466px) 100vw, 466px&quot;
        style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot;
        loading=&quot;lazy&quot;
      /&gt;
    &lt;/span&gt;&lt;/p&gt;
&lt;p&gt;As with all other beta features, to enable this new feature, you should enable experimental features from the settings, and then you will have access to this feature (you can access the login dialog by clicking the icon at the bottom left corner). &lt;strong&gt;NOTE: It does not work in Mozilla or Chrome extensions just yet but support should be coming there soon.&lt;/strong&gt; &lt;/p&gt;
&lt;p&gt;Looking forward to hear your thoughts and feedback!&lt;/p&gt;</content:encoded></item><item><title><![CDATA[Altair GraphQL Client v4 now available]]></title><description><![CDATA[Altair v4 has been released! It is a mojor update that comes with several signifant changes as well as other small improvements and fixes in…]]></description><link>https://www.xkoji.dev/blog/altair-graphql-client-v4-now-available/</link><guid isPermaLink="false">https://www.xkoji.dev/blog/altair-graphql-client-v4-now-available/</guid><pubDate>Thu, 25 Mar 2021 22:45:23 GMT</pubDate><content:encoded>&lt;p&gt;Altair v4 has been released! It is a mojor update that comes with several signifant changes as well as other small improvements and fixes in the application.&lt;/p&gt;
&lt;p&gt;Starting with the JS framework itself, we have migrated from angular v9 to angular v11 (the latest version at the time of this release) &lt;a href=&quot;https://github.com/imolorhe/altair/pull/1461&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;#1461&lt;/a&gt;. This brings with it all the goodies from both &lt;a href=&quot;https://blog.angular.io/version-10-of-angular-now-available-78960babd41&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;version 10&lt;/a&gt; and &lt;a href=&quot;https://blog.angular.io/version-11-of-angular-now-available-74721b7952f7&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;11&lt;/a&gt;, which includes (among other things) a faster, more performant application overall. In the process we also updated &lt;a href=&quot;https://ng.ant.design/&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;ant design framework&lt;/a&gt; to v11, &lt;a href=&quot;https://ngrx.io/&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;ngrx&lt;/a&gt; to v11 and several other packages.&lt;/p&gt;
&lt;p&gt;As part of the performance improvements, we migrated from using &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;localStorage&lt;/a&gt; to store and manage data, and instead we store data in &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;indexedDB&lt;/a&gt; &lt;a href=&quot;https://github.com/imolorhe/altair/pull/1483&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;#1483&lt;/a&gt;. Given the synchronous nature of localStorage, it blocks the main thread whenever it stores data. We managed to improve this thread blocking issue by deferring writes using the &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;&lt;code class=&quot;language-text&quot;&gt;requestIdleCallback&lt;/code&gt;&lt;/a&gt; API but that didn’t completely eliminate the blocking issue. It becomes even more obvious when dealing with very large schema setups. IndexedDB has an asynchronous API meaning it doesn’t block the thread when writing or reading from storage. This leads to a more fluid and consistent user experience… and &lt;strong&gt;a much BIGGER storage&lt;/strong&gt; (now you can use Altair to load up that 1GB schema 😄)!&lt;/p&gt;
&lt;p&gt;We introduced &lt;a href=&quot;https://altair.sirmuel.design/docs/features/prerequest-scripts.html&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;Post request scripts&lt;/a&gt; &lt;a href=&quot;https://github.com/imolorhe/altair/pull/1467&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;#1467&lt;/a&gt; which enables you perform logic on the result of your query. Assuming you want to run a mutation query to login your user and retrieve the auth token, using the post request script you can now retrieve the token from the response &lt;code class=&quot;language-text&quot;&gt;altair.response.body.data.login.token&lt;/code&gt; and set it in the currently active environment variable &lt;code class=&quot;language-text&quot;&gt;altair.helpers.setEnvironment(&amp;#39;auth_token&amp;#39;, token, true)&lt;/code&gt; and use the variable in the headers to authenticate subsequent requests! We also introduced response headers that come with the response from the server. This enables easier debugging with regards to the headers. &lt;em&gt;One important note about the response headers: the returned response headers in the browser clients (web app, browser extensions) are &lt;a href=&quot;https://developers.google.com/web/updates/2015/03/introduction-to-fetch#response_types&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;limited&lt;/a&gt;. However these response headers show up in the desktop apps.&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;&lt;span
      class=&quot;gatsby-resp-image-wrapper&quot;
      style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 1200px;&quot;
    &gt;
      &lt;span
    class=&quot;gatsby-resp-image-background-image&quot;
    style=&quot;padding-bottom: 57.00000000000001%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAABYlAAAWJQFJUiTwAAAByElEQVQoz22T64rbMBCF/ShtoPFVsiTL91uym9LdhUILhb5FfxT6/Kdn5HXiQn8MCtbomzNnJlGhexS2R90+oxu+oO0/IysG5GqAdhOUmVDoEaVd4PwVqpyQ8U6ZBbpc4OcZP36/4eefr/j+6xWRAA2TffOEohzD47To8Olcob8+YVhvfDhDmzlA5cyKHinzkrzFOfY4fajwkXE61Ygy1cGx0nX8BldfUboFhRlwTjxstWIa39C0LzDuQuDKc1OZ5h2SrCG0oYCWwZO/o5xq5INSK5KUypIKcVqH0GzLVc8BZtz6DrwEoHJUmHnESX3PlwJRRlhlLxjbG6ybQhW5kAR5uCsr7eUOLDR9bVfoZkZuR2R2DErlTRRnNToOovE3GPqiSiqmNwIVvx6tPk4ZVF7R036B6em76wkTIQTKY+slaQ4hbW7mb/E/oAwvZU4q9x0nXnWh9dBykrX3xGPItyNwj61lAnUX2tzsaY4edsGfADr4JLEDj0V2YMwtSNLHQAKQ4EiVXOCKJositlH57UGuh7B//yjkpC2XOwDfFR0jDEUWW9ttSUWt8ytNbpGXDP5jworswWEYv7BYHzyTfBFUsLjMQoB/AfSZXtFofbtpAAAAAElFTkSuQmCC&apos;); background-size: cover; display: block;&quot;
  &gt;&lt;/span&gt;
  &lt;img
        class=&quot;gatsby-resp-image-image&quot;
        alt=&quot;altair with tabs&quot;
        title=&quot;altair with tabs&quot;
        src=&quot;/static/e07a58eb2c24abad469032dadc29bd01/c1b63/altair-v4.png&quot;
        srcset=&quot;/static/e07a58eb2c24abad469032dadc29bd01/5a46d/altair-v4.png 300w,
/static/e07a58eb2c24abad469032dadc29bd01/0a47e/altair-v4.png 600w,
/static/e07a58eb2c24abad469032dadc29bd01/c1b63/altair-v4.png 1200w,
/static/e07a58eb2c24abad469032dadc29bd01/d61c2/altair-v4.png 1800w,
/static/e07a58eb2c24abad469032dadc29bd01/97a96/altair-v4.png 2400w,
/static/e07a58eb2c24abad469032dadc29bd01/d9ed5/altair-v4.png 2880w&quot;
        sizes=&quot;(max-width: 1200px) 100vw, 1200px&quot;
        style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot;
        loading=&quot;lazy&quot;
      /&gt;
    &lt;/span&gt;&lt;/p&gt;
&lt;p&gt;With all the new feature additions, we added tabs to the query and result sections to better manage the components. This also enables us have better management of the sections than was possible before. Now you can view the results of a subscription query even after running a subscription.&lt;/p&gt;
&lt;p&gt;&lt;span
      class=&quot;gatsby-resp-image-wrapper&quot;
      style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 1200px;&quot;
    &gt;
      &lt;span
    class=&quot;gatsby-resp-image-background-image&quot;
    style=&quot;padding-bottom: 96%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAATCAYAAACQjC21AAAACXBIWXMAABYlAAAWJQFJUiTwAAACRElEQVQ4y62US28SURTH+VBGoBAbdNEaXdhFa0WrTfwYGm0R2/paGBduXNQuXJhIkS07A1hs60dAoBt5zot5Xmb+3nOH26YGaH2c5J9zucz9zf+cOTOR69cWsHw1icR8AvGZJGKxGa74qTw3N49U6gouRmOjvTGK8/PJFCI3FhZRyH3EzocdbG+/x+5uHvn8Z3zK5VAsFrH/rYrvh4c4ONhHdW8PXytlVMonKpdK4ppCoYB4YhaROyursB0Hju3Asi0wxsCGDB7zQGHbNlRVxWAw4DIxKTqdLi5EE4jcW70PXVdhmnTAgGHoQrquwbIstNtt1Go1fqADTdMwHA7h+77IJDJAUa83ODCJSPr2XQGQQJJcuy53zt3rOv1v8t+ucOp5ofsgCAScotk8Oh+QXCqKIkSld7tdcZOJwMWlW1OBNu8rlUugfr+PVqsl3FK5Y4FLN9MTgbbjQjMs9Hpd0UuCUiYouaU4Bh6dATQHfM/28FOx0WkTQBO9NAxDOJVlk9PQYXM6kPYYb75lGqJ/v4csVwIbjeZZJevhU+X9YkOfzyUfkdGoSBFQjs1UII2GyZ0Zlot3VYbXX1y8rXh4U/LQMoJjh3/8UBzuULEC9AY++qYvMvMlEKcfynmAVPK4CATtLxxKoCxP6gSKfwOOi7Fviqoq4mNAw6ppoWiP3gjGwg/AJMmb/qjXQ+ByegX/I2hWBTB56TIer61jbT0jsliPcibzBNmnG8hmN0Te3HqOLa7NkcL1M7x4+QoPHj5CdGYWvwCgXSlAqJTE2gAAAABJRU5ErkJggg==&apos;); background-size: cover; display: block;&quot;
  &gt;&lt;/span&gt;
  &lt;img
        class=&quot;gatsby-resp-image-image&quot;
        alt=&quot;proxy settings in Altair&quot;
        title=&quot;proxy settings in Altair&quot;
        src=&quot;/static/c7dc793447d51f4e0a49468814a802f5/c1b63/altair-proxy.png&quot;
        srcset=&quot;/static/c7dc793447d51f4e0a49468814a802f5/5a46d/altair-proxy.png 300w,
/static/c7dc793447d51f4e0a49468814a802f5/0a47e/altair-proxy.png 600w,
/static/c7dc793447d51f4e0a49468814a802f5/c1b63/altair-proxy.png 1200w,
/static/c7dc793447d51f4e0a49468814a802f5/6569d/altair-proxy.png 1328w&quot;
        sizes=&quot;(max-width: 1200px) 100vw, 1200px&quot;
        style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot;
        loading=&quot;lazy&quot;
      /&gt;
    &lt;/span&gt;&lt;/p&gt;
&lt;p&gt;On the desktop apps, you can now configure the proxy settings of Altair &lt;a href=&quot;https://github.com/imolorhe/altair/pull/1475&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;#1475&lt;/a&gt;. This includes choosing to use the system proxy settings, using a manual proxy setting or via a PAC script, or not using any proxy at all.&lt;/p&gt;
&lt;p&gt;A new setting (&lt;code class=&quot;language-text&quot;&gt;response.hideExtensions&lt;/code&gt;) has been added to allow hiding the extensions data that gets returned from some servers.&lt;/p&gt;
&lt;p&gt;Other improvements include: using JetBrains mono as the default editor font, updating the variable highlighting and implementation in text inputs, several other bug fixes and minor improvements.&lt;/p&gt;
&lt;p&gt;This was originally planned to be a minor version release (v3.3.0) but given the number of complex changes being introduced, it made sense to bump it up to a major release instead. Hope you guys enjoy this update and find it very useful.&lt;/p&gt;
&lt;p&gt;If you experience any issue in this update or just want to holla, you can reach out to us on &lt;a href=&quot;https://twitter.com/AltairGraphQL&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;twitter&lt;/a&gt; or on &lt;a href=&quot;https://github.com/imolorhe/altair&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;github&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;Ps: We are always open to contributions in various ways. You can learn more &lt;a href=&quot;https://altair.sirmuel.design/docs/contributing.html&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;here&lt;/a&gt;🚀 or donate to the project &lt;a href=&quot;https://opencollective.com/altair/donate&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;here&lt;/a&gt;🥰.&lt;/p&gt;
&lt;p&gt;✌🏾&lt;/p&gt;</content:encoded></item><item><title><![CDATA[Theming in Altair GraphQL]]></title><description><![CDATA[I have been working on introducing more theming options in Altair GraphQL Client, as has been requested several times. Altair already had a…]]></description><link>https://www.xkoji.dev/blog/theming-in-altair-graphql/</link><guid isPermaLink="false">https://www.xkoji.dev/blog/theming-in-altair-graphql/</guid><pubDate>Fri, 18 Sep 2020 11:02:39 GMT</pubDate><content:encoded>&lt;p&gt;I have been working on introducing more theming options in &lt;a href=&quot;https://altair.sirmuel.design/&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;Altair GraphQL Client&lt;/a&gt;, as has been requested several times. Altair already had a few customization options available for a while now (font size and font family), but the implementation wasn’t going to scale well for more customization options. So I decided to look for better solutions.&lt;/p&gt;
&lt;h2 id=&quot;css-in-js&quot; style=&quot;position:relative;&quot;&gt;CSS-in-JS&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;https://www.wikiwand.com/en/CSS-in-JS&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;CSS-in-JS&lt;/a&gt; has been a popular solution for managing component styles in the React community for a while now with several CSS-in-JS solutions existing including &lt;a href=&quot;https://styled-components.com/&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;styled-components&lt;/a&gt;, &lt;a href=&quot;https://emotion.sh/docs/introduction&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;emotion&lt;/a&gt;, &lt;a href=&quot;https://cssinjs.org/?v=v10.4.0&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;JSS&lt;/a&gt;, and &lt;a href=&quot;https://github.com/MicheleBertoli/css-in-js&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;many more&lt;/a&gt;. This also comes with the advantage of having the styles managed by JavaScript, where we can dynamically modify the styles easily.&lt;/p&gt;
&lt;p&gt;These benefits makes this a preferred solution to the theming problem. I decided to go with &lt;strong&gt;&lt;a href=&quot;https://emotion.sh/docs/introduction&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;emotion&lt;/a&gt;&lt;/strong&gt; since it is one of the popular framework agnostic libraries.&lt;/p&gt;
&lt;h2 id=&quot;themeconfig-settings&quot; style=&quot;position:relative;&quot;&gt;themeConfig settings&lt;/h2&gt;
&lt;p&gt;Altair can now be customized using &lt;code class=&quot;language-text&quot;&gt;themeConfig&lt;/code&gt; in the settings. The interface can be found &lt;a href=&quot;https://github.com/imolorhe/altair/blob/staging/packages/altair-app/src/app/services/theme/theme.ts#L32-L71&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;here&lt;/a&gt;.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;js&quot;&gt;&lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  colors&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    primary&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; foundations&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;colors&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;green&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    secondary&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; foundations&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;colors&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;blue&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;

    bg&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; foundations&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;colors&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;white&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    offBg&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; foundations&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;colors&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;lightGray&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    font&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; foundations&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;colors&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;black&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    offFont&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; foundations&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;colors&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;darkGray&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    border&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; foundations&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;colors&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;gray&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    offBorder&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; foundations&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;colors&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;lightGray&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;

    headerBg&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; foundations&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;colors&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;white&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
  shadow&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    color&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; foundations&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;colors&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;black&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    opacity&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;.1&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
  editor&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    fontFamily&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
      &lt;span class=&quot;token keyword&quot;&gt;default&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;inherit&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    fontSize&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; foundations&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;type&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;fontSize&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;body&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    colors&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
      comment&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; foundations&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;colors&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;darkGray&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
      string&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; foundations&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;colors&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;orange&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
      number&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; foundations&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;colors&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;orange&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
      variable&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; foundations&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;colors&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;black&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
      keyword&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; foundations&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;colors&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;blue&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
      atom&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; foundations&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;colors&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;black&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
      attribute&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; foundations&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;colors&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;green&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
      property&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; foundations&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;colors&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;blue&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
      punctuation&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; foundations&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;colors&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;blue&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
      definition&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; foundations&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;colors&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;orange&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
      builtin&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; foundations&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;colors&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;orange&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
      cursor&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; foundations&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;colors&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;blue&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;So to change the primary color of Altair to &lt;span style=&quot;color: rebeccapurple;&quot;&gt;rebeccapurple&lt;/span&gt;, you can use the following in the settings:&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;js&quot;&gt;&lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token comment&quot;&gt;// ...&lt;/span&gt;
  &lt;span class=&quot;token string&quot;&gt;&quot;themeConfig&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;token string&quot;&gt;&quot;colors&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
      &lt;span class=&quot;token string&quot;&gt;&quot;primary&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;rebeccapurple&quot;&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;&lt;img src=&quot;https://i.imgur.com/5zrqWb6.png&quot; alt=&quot;Altair in rebeccapurple&quot;&gt;&lt;/p&gt;
&lt;p&gt;The selected base theme is dracula, and the &lt;code class=&quot;language-text&quot;&gt;themeConfig&lt;/code&gt; is merged on top of the selected theme. This makes it easy t just customize parts of the theme, instead of having to customize every token.&lt;/p&gt;
&lt;h2 id=&quot;conclusion&quot; style=&quot;position:relative;&quot;&gt;Conclusion&lt;/h2&gt;
&lt;p&gt;This config options should be available from v2.5.1. Now you can customize Altair to be consistent with the design style of your services for your users. The next steps after this would be the option of providing the theme customization via the plugin system.&lt;/p&gt;</content:encoded></item><item><title><![CDATA[Unit testing JavaScript Applications - Part 3 (Vue components)]]></title><description><![CDATA[We have talked about the basic unit testing concepts, why you should be writing unit tests, the approaches to writing unit testing, and we…]]></description><link>https://www.xkoji.dev/blog/unit-testing-javascript-applications---part-3/</link><guid isPermaLink="false">https://www.xkoji.dev/blog/unit-testing-javascript-applications---part-3/</guid><pubDate>Tue, 09 Jun 2020 21:23:47 GMT</pubDate><content:encoded>&lt;p&gt;We have talked about the basic unit testing concepts, why you should be writing unit tests, the approaches to writing unit testing, and we have also written some unit tests for Vuex getters, actions and mutations. In this post, we would be looking at writing unit tests for Vue.js components. Previously &lt;a href=&quot;https://www.xkoji.dev/blog/unit-testing-javascript-applications---part-2/#defining-test-cases&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;we described the things we need to consider for defining unit tests cases&lt;/a&gt;. The same steps apply for writing tests for UI components:&lt;/p&gt;
&lt;h3 id=&quot;define-the-inputs-and-outputs-of-the-component-based-on-its-public-interface&quot; style=&quot;position:relative;&quot;&gt;Define the inputs and outputs of the component based on its public interface&lt;/h3&gt;
&lt;p&gt;The inputs of Vue.js components include:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;user interaction (like a click, mouseover, keydown event)&lt;/li&gt;
&lt;li&gt;props provided to the component&lt;/li&gt;
&lt;li&gt;slots&lt;/li&gt;
&lt;li&gt;data from Vuex (via state and getters)&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;The output of Vue.js components include:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;the rendered HTML&lt;/li&gt;
&lt;li&gt;emitted events&lt;/li&gt;
&lt;li&gt;called Vuex methods (actions and mutations)&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;You might have noticed that this doesn’t include things like checking that a method on the Vue component was called, since those are only known to the Vue component and aren’t called by external parties. They are not part of the public interface of the component.&lt;/p&gt;
&lt;h3 id=&quot;consider-the-dependencies-you-need-to-mock&quot; style=&quot;position:relative;&quot;&gt;Consider the dependencies you need to mock&lt;/h3&gt;
&lt;p&gt;As much as possible, the inputs and outputs of the component are where your focus should be when writing unit tests for your component. However, the component could have dependencies like using some Vue &lt;a href=&quot;https://vuejs.org/v2/cookbook/adding-instance-properties.html&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;instance prototype methods&lt;/a&gt; that were defined elsewhere, importing a module dependency to handle some operation, using globally registered sub components, etc.&lt;/p&gt;
&lt;p&gt;Just like in other cases, the dependencies are not part of the functionality of the component you’re testing, so they should be mocked so you can focus on testing just your component. Knowing what to mock unfortunately requires knowledge about the internals of the component, which would mean that the test is more tightly coupled with the internal implementation of the component, which makes the tests less maintainable since any change to the internals of the component would always require an update to the unit tests as well. Luckily we would be using jest, so mocking dependencies would be easier.&lt;/p&gt;
&lt;h3 id=&quot;consider-all-the-logical-execution-flows-within-the-component&quot; style=&quot;position:relative;&quot;&gt;Consider all the logical execution flows within the component&lt;/h3&gt;
&lt;p&gt;For a very robust solution, you should consider all the logical execution flows within your component, and create test cases to cover any of the missing flows. As &lt;a href=&quot;https://www.xkoji.dev/blog/unit-testing-javascript-applications---part-2/#create-extra-test-cases-covering-all-the-logical-execution-flows&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;mentioned before&lt;/a&gt;, the logical flows are usually created by &lt;code class=&quot;language-text&quot;&gt;if&lt;/code&gt;, &lt;code class=&quot;language-text&quot;&gt;switch&lt;/code&gt;, and other short circuiting operations within the code. For Vue.js components, these can be created in the JS logic of the component, as well as in the component template using the &lt;a href=&quot;https://vuejs.org/v2/guide/conditional.html&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;&lt;code class=&quot;language-text&quot;&gt;v-if&lt;/code&gt;&lt;/a&gt; directive and other conditional rendering directives.&lt;/p&gt;
&lt;h2 id=&quot;testing-tools&quot; style=&quot;position:relative;&quot;&gt;Testing Tools&lt;/h2&gt;
&lt;p&gt;As we have already seen, we use &lt;a href=&quot;https://jestjs.io/&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;Jest&lt;/a&gt; testing framework for writing and running our unit tests. However Jest on its own can only carry us so far. UI components require extra specialized testing tools to be able to easily write tests for them. For Vue.js components, we use the &lt;a href=&quot;https://vue-test-utils.vuejs.org/&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;Vue test utils&lt;/a&gt; which is maintained by the Vue.js team. It provides us with the ability to mount the Vue.js component, simulate user interactions, easily mock global plugins and mixins as well as mocking sub components, props, data, methods, etc. It also enables us to be able to check the rendered HTML as well as checking that certain events were emitted. We would use it within the Jest test cases.&lt;/p&gt;
&lt;p&gt;For a simple example, consider the following Vue component. It has a button that increments the counter, and displays the counter value.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;js&quot;&gt;&lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;// counter.js&lt;/span&gt;

&lt;span class=&quot;token keyword&quot;&gt;export&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;default&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  template&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token template-string&quot;&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;
    &amp;lt;div&gt;
      &amp;lt;span class=&quot;count&quot;&gt;{{ count }}&amp;lt;/span&gt;
      &amp;lt;button @click=&quot;increment&quot;&gt;Increment&amp;lt;/button&gt;
    &amp;lt;/div&gt;
  &lt;/span&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;

  &lt;span class=&quot;token function&quot;&gt;data&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
      count&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;

  methods&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;token function&quot;&gt;increment&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
      &lt;span class=&quot;token keyword&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;count&lt;span class=&quot;token operator&quot;&gt;++&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;To test the component, you need to “mount” the component, creating a vue test utils &lt;a href=&quot;https://vue-test-utils.vuejs.org/api/wrapper/#properties&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;wrapper&lt;/a&gt; which gives you several methods for manipulating, traversing and querying the underlying Vue component instance.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;js&quot;&gt;&lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; mount &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;@vue/test-utils&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token keyword&quot;&gt;import&lt;/span&gt; Counter &lt;span class=&quot;token keyword&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;./counter&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

&lt;span class=&quot;token function&quot;&gt;it&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;should have a button&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; wrapper &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;mount&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;Counter&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  
  &lt;span class=&quot;token function&quot;&gt;expect&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;wrapper&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;exists&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toBe&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token boolean&quot;&gt;true&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token function&quot;&gt;expect&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;wrapper&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;find&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;button&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;html&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toBeTruthy&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;We mount the &lt;code class=&quot;language-text&quot;&gt;Counter&lt;/code&gt; component, creating an instance of the component wrapped within a wrapper. From the wrapper object, we can use the convenience methods to check if the button element exists and was rendered.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;The wrapper has several methods that could be useful. You should check out all the &lt;a href=&quot;https://vue-test-utils.vuejs.org/api/wrapper/#properties&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;available methods&lt;/a&gt; to see what is available.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h3 id=&quot;mount-vs-shallowmount&quot; style=&quot;position:relative;&quot;&gt;mount vs shallowMount&lt;/h3&gt;
&lt;p&gt;Vue test utils comes with two methods for mounting components: &lt;code class=&quot;language-text&quot;&gt;mount&lt;/code&gt; and &lt;code class=&quot;language-text&quot;&gt;shallowMount&lt;/code&gt;. &lt;code class=&quot;language-text&quot;&gt;mount&lt;/code&gt; instantiates the component along with all its sub components initialized as well, building out the whole DOM tree. &lt;code class=&quot;language-text&quot;&gt;shallowMount&lt;/code&gt; on the other hand instantiates the component but stubs out the sub components, replacing them with stubs. This ensures that its just the current component that is executed during the test. This aligns with the idea of mocking dependencies instead of executing the real dependencies. This makes the tests run faster, and also keeps the tests isolated, which is something we have established that you need when running unit tests.&lt;/p&gt;
&lt;h2 id=&quot;lets-write-some-tests&quot; style=&quot;position:relative;&quot;&gt;Let’s write some tests!&lt;/h2&gt;
&lt;p&gt;Again, we will be using the &lt;a href=&quot;https://github.com/imolorhe/rick-morty&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;rick and morty web app&lt;/a&gt; as the case study and we would be writing unit tests for the components.&lt;/p&gt;
&lt;p&gt;The app is a simple one with a few views and components: CharacterCard, Pagination, and Header. We would be testing the &lt;strong&gt;CharacterCard&lt;/strong&gt; component here.&lt;/p&gt;
&lt;p&gt;The &lt;strong&gt;CharacterCard&lt;/strong&gt; component simply displays the basic details about a character in a card form. So as you would expect, it takes as input a &lt;code class=&quot;language-text&quot;&gt;character&lt;/code&gt; prop. It also emits the &lt;code class=&quot;language-text&quot;&gt;click&lt;/code&gt; event when the card is clicked.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;tsx&quot;&gt;&lt;pre class=&quot;language-tsx&quot;&gt;&lt;code class=&quot;language-tsx&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;template&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;
  &amp;lt;div
    class=&quot;max-w-sm w-full lg:max-w-full lg:flex shadow-md hover:shadow-xl transition duration-300 ease-in transform hover:-translate-y-px rounded cursor-pointer&quot;
    @click=&quot;onClickCard&quot;
  &gt;
    &lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;div&lt;/span&gt;
      &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;h-48 lg:h-auto lg:w-48 flex-none bg-cover rounded-t lg:rounded-t-none lg:rounded-l text-center overflow-hidden&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
      &lt;span class=&quot;token attr-name&quot;&gt;:&lt;/span&gt;&lt;span class=&quot;token style-attr language-css&quot;&gt;&lt;span class=&quot;token attr-name&quot;&gt;&lt;span class=&quot;token attr-name&quot;&gt;style&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&quot;&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;`&lt;span class=&quot;token property&quot;&gt;background-image&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token url&quot;&gt;&lt;span class=&quot;token function&quot;&gt;url&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&apos;${character.image}&apos;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;/span&gt;`&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
      &lt;span class=&quot;token attr-name&quot;&gt;:title&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;character.name&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;div&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;
    &lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;div&lt;/span&gt;
      &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;bg-white rounded-b lg:rounded-b-none lg:rounded-r p-4 flex flex-col flex-grow justify-between leading-normal text-left&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;
      &lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;div&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;mb-8&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;
        &lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;div&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;text-gray-900 font-bold text-xl mb-2&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;
          &lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; character&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;name &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;
          &lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;div&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;text-sm text-gray-600&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;
            &lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; character&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;gender &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt; &amp;amp;middot;
            &lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;span&lt;/span&gt;
              &lt;span class=&quot;token attr-name&quot;&gt;tid&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;character-card-status&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
              &lt;span class=&quot;token attr-name&quot;&gt;:class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;statusClasses&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
              &lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; character&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;status &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;span&lt;/span&gt;
            &lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;
            &amp;amp;middot; &lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; character&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;origin&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;name &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;
          &lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;div&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;
        &lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;div&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;
        &lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;p&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;text-sm text-gray-600 flex items-center&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;
          &lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;img&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;src&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;../assets/planet.png&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;w-5 mr-1&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;/&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;
          &lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; character&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;location&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;name &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;
        &lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;p&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;
        &lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;div&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;mb-3&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;div&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;
        &lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;span&lt;/span&gt;
          &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
          &lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; character&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;species &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;span&lt;/span&gt;
        &lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;
      &lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;div&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;
    &lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;div&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;
  &lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;div&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;
&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;template&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;

&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;script&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;lang&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;ts&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;
import Vue from &apos;vue&apos;;

export default Vue.extend({
  name: &apos;CharacterCard&apos;,
  props: {
    character: {
      type: Object,
      required: true,
    },
  },
  computed: {
    statusClasses(): unknown {
      return {
        &apos;ml-1&apos;: true,
        &apos;text-green-600&apos;: this.character.status === &apos;Alive&apos;,
        &apos;text-red-600&apos;: this.character.status !== &apos;Alive&apos;,
      };
    },
  },
  methods: {
    onClickCard() {
      this.$emit(&apos;click&apos;, this.character);
    },
  },
});
&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;script&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;Like we have previously discussed about defining the test cases:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;We start by identifying the &lt;strong&gt;inputs&lt;/strong&gt; and &lt;strong&gt;outputs&lt;/strong&gt; of the component. The inputs here include: the &lt;code class=&quot;language-text&quot;&gt;character&lt;/code&gt; props, and the user click action. The outputs would be: the rendered component (with all the expected data), and the emitted &lt;code class=&quot;language-text&quot;&gt;click&lt;/code&gt; event, after the user clicks the card.&lt;/li&gt;
&lt;li&gt;Next, we check the dependencies of the component. In this case, there isn’t any dependencies, so we skip this.&lt;/li&gt;
&lt;li&gt;Finally, we check all logical execution flows. There’s one conditional in the &lt;code class=&quot;language-text&quot;&gt;statusClasses()&lt;/code&gt; computed properties, although it’s nt very obvious. When the character status is “Alive”, we set the &lt;code class=&quot;language-text&quot;&gt;green&lt;/code&gt; class, else we set the &lt;code class=&quot;language-text&quot;&gt;red&lt;/code&gt; class. This is one of those conditions that isn’t very obvious at first glance. A good way to find these is to check for the conditional expressions (equalities &lt;code class=&quot;language-text&quot;&gt;===&lt;/code&gt; &lt;code class=&quot;language-text&quot;&gt;!==&lt;/code&gt;, greater than &lt;code class=&quot;language-text&quot;&gt;&amp;gt;=&lt;/code&gt;, less than &lt;code class=&quot;language-text&quot;&gt;&amp;lt;=&lt;/code&gt;, negation &lt;code class=&quot;language-text&quot;&gt;!&lt;/code&gt;, etc).&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;From this, we can see that the test cases required are not much.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;js&quot;&gt;&lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;import&lt;/span&gt; CharacterCard &lt;span class=&quot;token keyword&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;./CharacterCard.vue&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token keyword&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; shallowMount &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;@vue/test-utils&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

&lt;span class=&quot;token function&quot;&gt;describe&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;CharacterCard&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token function&quot;&gt;it&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;should render the character basic details&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; character &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
      name&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;Character&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
      image&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;character.jpg&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
      gender&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;Gender&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
      status&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;Alive&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
      species&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;Human&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
      origin&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
        name&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;Origin&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
      &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
      location&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
        name&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;Location&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
      &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; comp &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;shallowMount&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;CharacterCard&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
      propsData&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
        character&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
      &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;token function&quot;&gt;expect&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;comp&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;html&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toContain&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;character&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;name&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;token function&quot;&gt;expect&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;comp&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;html&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toContain&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;character&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;image&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;token function&quot;&gt;expect&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;comp&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;html&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toContain&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;character&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;gender&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;token function&quot;&gt;expect&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;comp&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;html&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toContain&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;character&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;status&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;token function&quot;&gt;expect&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;comp&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;html&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toContain&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;character&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;species&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;token function&quot;&gt;expect&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;comp&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;html&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toContain&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;character&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;origin&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;name&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;token function&quot;&gt;expect&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;comp&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;html&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toContain&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;character&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;location&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;name&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

  &lt;span class=&quot;token function&quot;&gt;it&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;should render status as green if alive&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; character &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
      &lt;span class=&quot;token comment&quot;&gt;// ...&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; comp &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;shallowMount&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;CharacterCard&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
      propsData&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
        character&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
      &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;token function&quot;&gt;expect&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;
      comp
        &lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;find&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;[tid=&quot;character-card-status&quot;]&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;
        &lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;classes&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;text-green-600&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toBe&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token boolean&quot;&gt;true&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

  &lt;span class=&quot;token function&quot;&gt;it&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;should render status as red if dead&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; character &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
      &lt;span class=&quot;token comment&quot;&gt;// ...&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; comp &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;shallowMount&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;CharacterCard&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
      propsData&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
        character&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
      &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;token function&quot;&gt;expect&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;
      comp
        &lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;find&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;[tid=&quot;character-card-status&quot;]&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;
        &lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;classes&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;text-red-600&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toBe&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token boolean&quot;&gt;true&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

  &lt;span class=&quot;token function&quot;&gt;it&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;should emit click with the character when clicked&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; character &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
      &lt;span class=&quot;token comment&quot;&gt;// ...&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; comp &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;shallowMount&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;CharacterCard&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
      propsData&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
        character&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
      &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    comp&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;trigger&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;click&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;token function&quot;&gt;expect&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;comp&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;emitted&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;click&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;length&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toBe&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;token function&quot;&gt;expect&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;comp&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;emitted&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;click&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toEqual&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;character&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;First we check that the basic character info are rendered in the output. The next test case checks that the &lt;code class=&quot;language-text&quot;&gt;green&lt;/code&gt; class is rendered when &lt;code class=&quot;language-text&quot;&gt;character.status&lt;/code&gt; is “Alive”. After that we check the else clause: that the &lt;code class=&quot;language-text&quot;&gt;red&lt;/code&gt; class is rendered instead. &lt;em&gt;Note the &lt;code class=&quot;language-text&quot;&gt;tid&lt;/code&gt; attribute added to the status element. This makes it easy to select that element in the test.&lt;/em&gt; Finally, we check that the click event is emitted when the user clicks the character card.&lt;/p&gt;
&lt;h3 id=&quot;snapshot-testing&quot; style=&quot;position:relative;&quot;&gt;Snapshot testing&lt;/h3&gt;
&lt;p&gt;As you might have noticed in the first test case, to verify that the character info is rendered as we expect, we needed to add a lot of &lt;code class=&quot;language-text&quot;&gt;expect&lt;/code&gt; assertions for the different data points. This is already a lot of assertions for a simple test case. You can imagine how many more &lt;code class=&quot;language-text&quot;&gt;expect&lt;/code&gt; assertions would be required for more complex components. This makes the tests less maintainable, as changes made could require you to update several of the assertions. One way to solve this kinds of test cases is with &lt;a href=&quot;https://jestjs.io/docs/en/snapshot-testing&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;snapshot testing&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;Snapshot testing basically allows us to render our component and save the rendered output to disk (as a snapshot of the component), and use this rendered output as a reference when running future tests. If the rendered output during a test is different from the original snapshot, the test would fail. You can then compare the two snapshots to see the difference, and then determine if the new rendered output is valid or not, and update the snapshot.&lt;/p&gt;
&lt;p&gt;One of the limitations that appear when using snapshot is how you manage dynamic content. For example, assuming a component renders the current date, each time the snapshot test is run, the snapshots would be different. The recommended way to go around this is by mocking the dependencies (in this case, the &lt;code class=&quot;language-text&quot;&gt;Date&lt;/code&gt; object) as we have previously discussed.&lt;/p&gt;
&lt;p&gt;If we re-write the first test case using snapshot testing, we would have this:&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;js&quot;&gt;&lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token function&quot;&gt;it&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;should render the character basic details&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; character &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    name&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;Character&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    image&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;character.jpg&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    gender&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;Gender&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    status&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;Alive&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    species&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;Human&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    origin&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
      name&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;Origin&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    location&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
      name&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;Location&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; comp &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;shallowMount&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;CharacterCard&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    propsData&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
      character&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

  &lt;span class=&quot;token function&quot;&gt;expect&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;comp&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;html&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toMatchSnapshot&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;We replaced all the assertions with a single &lt;code class=&quot;language-text&quot;&gt;expect(comp.html()).toMatchSnapshot()&lt;/code&gt;. This is much cleaner, and easier to maintain. Generally when testing the rendered component output, snapshot testing makes for a cleaner testing approach.&lt;/p&gt;
&lt;p&gt;The snapshot looks like this:&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;text&quot;&gt;&lt;pre class=&quot;language-text&quot;&gt;&lt;code class=&quot;language-text&quot;&gt;// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`CharacterCard should render the character basic details 1`] = `
&amp;lt;div class=&amp;quot;max-w-sm w-full lg:max-w-full lg:flex shadow-md hover:shadow-xl transition duration-300 ease-in transform hover:-translate-y-px rounded cursor-pointer&amp;quot;&amp;gt;
  &amp;lt;div title=&amp;quot;Character&amp;quot; class=&amp;quot;h-48 lg:h-auto lg:w-48 flex-none bg-cover rounded-t lg:rounded-t-none lg:rounded-l text-center overflow-hidden&amp;quot; style=&amp;quot;background-image: url(character.jpg);&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;
  &amp;lt;div class=&amp;quot;bg-white rounded-b lg:rounded-b-none lg:rounded-r p-4 flex flex-col flex-grow justify-between leading-normal text-left&amp;quot;&amp;gt;
    &amp;lt;div class=&amp;quot;mb-8&amp;quot;&amp;gt;
      &amp;lt;div class=&amp;quot;text-gray-900 font-bold text-xl mb-2&amp;quot;&amp;gt;
        Character
        &amp;lt;div class=&amp;quot;text-sm text-gray-600&amp;quot;&amp;gt;
          Gender ·
          &amp;lt;span tid=&amp;quot;character-card-status&amp;quot; class=&amp;quot;ml-1 text-green-600&amp;quot;&amp;gt;Alive&amp;lt;/span&amp;gt;
          · Origin
        &amp;lt;/div&amp;gt;
      &amp;lt;/div&amp;gt;
      &amp;lt;p class=&amp;quot;text-sm text-gray-600 flex items-center&amp;quot;&amp;gt;&amp;lt;img src=&amp;quot;../assets/planet.png&amp;quot; class=&amp;quot;w-5 mr-1&amp;quot;&amp;gt;
        Location
      &amp;lt;/p&amp;gt;
      &amp;lt;div class=&amp;quot;mb-3&amp;quot;&amp;gt;&amp;lt;/div&amp;gt; &amp;lt;span class=&amp;quot;inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2&amp;quot;&amp;gt;Human&amp;lt;/span&amp;gt;
    &amp;lt;/div&amp;gt;
  &amp;lt;/div&amp;gt;
&amp;lt;/div&amp;gt;
`;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;blockquote&gt;
&lt;p&gt;Note: You would need the &lt;a href=&quot;https://www.npmjs.com/package/jest-serializer-vue&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;jest-serializer-vue&lt;/a&gt; snapshot serializer to generate useful snapshots for your Vue components.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;Let’s consider writing a test for the &lt;strong&gt;Header&lt;/strong&gt; component. It just displays the logo and a list of links used for navigating between pages.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;tsx&quot;&gt;&lt;pre class=&quot;language-tsx&quot;&gt;&lt;code class=&quot;language-tsx&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;template&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;
  &lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;nav&lt;/span&gt;
    &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;flex items-center justify-between flex-wrap bg-purple-900 p-6&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;
    &amp;lt;!-- ... --&gt;
    &lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;div&lt;/span&gt;
      &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;w-full block flex-grow lg:flex lg:items-center lg:w-auto&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;
      &lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;div&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;text-md lg:flex-grow&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;
        &lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;router-link&lt;/span&gt;
          &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;block mt-4 lg:inline-block lg:mt-0 text-purple-200 rounded-full lg:hover:bg-purple-800 lg:px-3 py-1 hover:text-white mr-4 transition duration-300&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
          &lt;span class=&quot;token attr-name&quot;&gt;to&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;/&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;
          Home
        &lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;router-link&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;
        &lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;router-link&lt;/span&gt;
          &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;block mt-4 lg:inline-block lg:mt-0 text-purple-200 rounded-full lg:hover:bg-purple-800 lg:px-3 py-1 hover:text-white mr-4 transition duration-300&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
          &lt;span class=&quot;token attr-name&quot;&gt;to&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;/about&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;
          About
        &lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;router-link&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;
        &lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;router-link&lt;/span&gt;
          &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;block mt-4 lg:inline-block lg:mt-0 text-purple-200 rounded-full lg:hover:bg-purple-800 lg:px-3 py-1 hover:text-white mr-4 transition duration-300&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
          &lt;span class=&quot;token attr-name&quot;&gt;to&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;/characters&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;
          Characters
        &lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;router-link&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;
      &lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;div&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;
    &lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;div&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;
  &lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;nav&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;
&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;template&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;

&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;script&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;lang&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;ts&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;
import Vue from &apos;vue&apos;;
export default Vue.extend({
  name: &apos;Header&apos;,
});
&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;script&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;We can define the test cases as follows:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;inputs and outputs:&lt;/strong&gt; it doesn’t really have any inputs. Although it contains &lt;code class=&quot;language-text&quot;&gt;router-link&lt;/code&gt; components that the user’s can click, the click interaction occurs on the &lt;code class=&quot;language-text&quot;&gt;router-link&lt;/code&gt; component, not the &lt;code class=&quot;language-text&quot;&gt;Header&lt;/code&gt; component. For the output, we only have the rendered component output.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;mocking dependencies:&lt;/strong&gt; it contains &lt;code class=&quot;language-text&quot;&gt;router-link&lt;/code&gt; components for navigating the user between pages. &lt;code class=&quot;language-text&quot;&gt;router-link&lt;/code&gt; component is globally registered, and is not registered locally within the &lt;strong&gt;Header&lt;/strong&gt; component, so using &lt;code class=&quot;language-text&quot;&gt;shallowMount&lt;/code&gt; would not stub the component. We would need to explicitly stub it out ourselves.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;logical execution flows:&lt;/strong&gt; it doesn’t have any conditional statements or expressions in the templates or scripts section, so we can skip this.&lt;/li&gt;
&lt;/ul&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;js&quot;&gt;&lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;import&lt;/span&gt; Header &lt;span class=&quot;token keyword&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;./Header.vue&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token keyword&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; shallowMount &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;@vue/test-utils&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

&lt;span class=&quot;token function&quot;&gt;describe&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;Header&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token function&quot;&gt;it&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;should render&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; comp &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;shallowMount&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;Header&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
      stubs&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
        RouterLink&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token boolean&quot;&gt;true&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
      &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

    &lt;span class=&quot;token function&quot;&gt;expect&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;comp&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;html&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toMatchSnapshot&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;We have a single test case that asserts the rendered output. Given what we know about testing rendered output, we just use a &lt;code class=&quot;language-text&quot;&gt;expect(comp.html()).toMatchSnapshot()&lt;/code&gt;.&lt;/p&gt;
&lt;p&gt;Like we mentioned, the &lt;code class=&quot;language-text&quot;&gt;router-link&lt;/code&gt; component is not registered locally within the &lt;code class=&quot;language-text&quot;&gt;Header&lt;/code&gt; component. So &lt;code class=&quot;language-text&quot;&gt;shallowMount&lt;/code&gt; wouldn’t know to create a stub for it. Fortunately, we can explicitly indicate to &lt;code class=&quot;language-text&quot;&gt;shallowMount&lt;/code&gt; that it should stub the &lt;code class=&quot;language-text&quot;&gt;router-link&lt;/code&gt; component. &lt;em&gt;Note that we can use either &lt;code class=&quot;language-text&quot;&gt;RouterLink: true&lt;/code&gt; or &lt;code class=&quot;language-text&quot;&gt;&amp;#39;router-link&amp;#39;: true&lt;/code&gt;. Vue uses both formats for defining component names.&lt;/em&gt; Setting &lt;code class=&quot;language-text&quot;&gt;RouterLink&lt;/code&gt; to true tells &lt;code class=&quot;language-text&quot;&gt;shallowMount&lt;/code&gt; to create a simple dummy stub. If you check the generated snapshot, you’d notice that the &lt;code class=&quot;language-text&quot;&gt;router-link&lt;/code&gt; component is now &lt;code class=&quot;language-text&quot;&gt;routerlink-stub&lt;/code&gt;.&lt;/p&gt;
&lt;p&gt;You can also pass a component to be used as the stub instead, if you’d like.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;js&quot;&gt;&lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; routerStub &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  template&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;&amp;lt;div&gt;&amp;lt;/div&gt;&apos;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; comp &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;shallowMount&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;Header&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  stubs&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    RouterLink&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; routerStub&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;h3 id=&quot;testing-with-subcomponents-that-use-slots&quot; style=&quot;position:relative;&quot;&gt;Testing with subcomponents that use slots&lt;/h3&gt;
&lt;p&gt;Sometimes you would have sub components that use &lt;a href=&quot;https://vuejs.org/v2/guide/components-slots.html&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;slots&lt;/a&gt; to specify where specific contents would be rendered.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;tsx&quot;&gt;&lt;pre class=&quot;language-tsx&quot;&gt;&lt;code class=&quot;language-tsx&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;template&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;
  &lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;div&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;
    &lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;header&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;My wonderful component&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;header&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;
    &lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token class-name&quot;&gt;MySelect&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;
      &lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;template&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;slot&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;label&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;My select label&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;template&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;
      &lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;template&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;slot&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;error&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;My select error message&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;template&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;
    &lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;token class-name&quot;&gt;MySelect&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;
  &lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;div&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;
&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;template&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;

&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;script&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;lang&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;ts&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;
import Vue from &apos;vue&apos;;
import MySelect from &apos;./MySelect.vue&apos;;

export default Vue.extend({
  name: &apos;MyWonderfulComponent&apos;,
  components: {
    MySelect,
  }
});
&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;script&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;Here the &lt;code class=&quot;language-text&quot;&gt;MySelect&lt;/code&gt; component has a &lt;strong&gt;label&lt;/strong&gt; and &lt;strong&gt;error&lt;/strong&gt; slots, which we pass values to. If we write a unit test for &lt;code class=&quot;language-text&quot;&gt;MyWonderfulComponent&lt;/code&gt; component using &lt;code class=&quot;language-text&quot;&gt;shallowMount&lt;/code&gt;, you would notice that the rendered output doesn’t contain the text for the label and error slots, because the &lt;code class=&quot;language-text&quot;&gt;MySelect&lt;/code&gt; component would have been stubbed with a dummy stub component which doesn’t use slots. To work around this, we can provide our own stub component to be used to replace &lt;code class=&quot;language-text&quot;&gt;MySelect&lt;/code&gt; component in a deterministic way, and use that during the test rather than the real &lt;code class=&quot;language-text&quot;&gt;MySelect&lt;/code&gt; component.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;js&quot;&gt;&lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; mySelectStub &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  template&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token template-string&quot;&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&amp;lt;div&gt;
    &amp;lt;div class=&quot;label-slot&quot;&gt;
      &amp;lt;slot name=&quot;label&quot;&gt;&amp;lt;/slot&gt;
    &amp;lt;/div&gt;
    &amp;lt;div class=&quot;error-slot&quot;&gt;
      &amp;lt;slot name=&quot;error&quot;&gt;&amp;lt;/slot&gt;
    &amp;lt;/div&gt;
    &amp;lt;div class=&quot;default-slot&quot;&gt;
      &amp;lt;slot /&gt;
    &amp;lt;/div&gt;
  &amp;lt;/div&gt;&lt;/span&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; comp &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;shallowMount&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;Header&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  stubs&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    MySelect&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; mySelectStub&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;With this, we would have the slots rendered, and we can check for that easily.&lt;/p&gt;
&lt;h2 id=&quot;conclusion&quot; style=&quot;position:relative;&quot;&gt;Conclusion&lt;/h2&gt;
&lt;p&gt;One final note about dependencies is that: &lt;em&gt;not all dependencies are equal&lt;/em&gt;. In the previous article, we asked the question about whether &lt;code class=&quot;language-text&quot;&gt;Vue.set()&lt;/code&gt; used within mutations should be mocked when writing unit tests. To determine if a dependency should be mocked, these are a couple of questions that can help you decide:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;is it a &lt;a href=&quot;https://www.xkoji.dev/blog/unit-testing-javascript-applications-part-1/#pure-functions&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;pure function&lt;/a&gt; dependency? This means it doesn’t have an effect on any thing besides returning an output for the input you give it.&lt;/li&gt;
&lt;li&gt;if it has side effects, are they local to the piece of code being tested? For example, &lt;code class=&quot;language-text&quot;&gt;Vue.set()&lt;/code&gt; only mutates the given input, and does nothing else.&lt;/li&gt;
&lt;li&gt;is its output dependent on external factors? This affects the deterministic nature of the dependency. For example, &lt;code class=&quot;language-text&quot;&gt;Date.now()&lt;/code&gt; would give a different result based on the current time.&lt;/li&gt;
&lt;li&gt;is it difficult to mock the dependency? Does mocking dependency require a whole lot more work (like A LOT MORE) than actually writing the test?&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Usually this question comes up when dealing with implicit dependencies, because they make mocking dependencies hard.&lt;/p&gt;
&lt;p&gt;Over the course of this series, we have looked at unit testing approaches, and how to write unit tests for different forms of code. We looked at how to mock dependencies as well as how to make writing tests easier. We considered the TDD approach and saw how we can write our code following that pattern. We have also looked at various testing tools like Jest and the Vue test utils for a robust unit testing solution.&lt;/p&gt;
&lt;p&gt;While it is recommended to follow the TDD approach as much as possible due to the benefits you get, it is not a mandatory practice for writing unit tests. Following the testing approach for defining your test cases, you can have full test coverage of your code, even if you write the tests afterwards.&lt;/p&gt;
&lt;p&gt;Writing unit tests doesn’t have to be hard. Following a defined approach makes it easier.&lt;/p&gt;</content:encoded></item><item><title><![CDATA[Unit testing JavaScript Applications - Part 2]]></title><description><![CDATA[In the previous post, we began talking about what unit testing is about, why we should consider writing unit tests, and how we should…]]></description><link>https://www.xkoji.dev/blog/unit-testing-javascript-applications---part-2/</link><guid isPermaLink="false">https://www.xkoji.dev/blog/unit-testing-javascript-applications---part-2/</guid><pubDate>Fri, 22 May 2020 15:59:40 GMT</pubDate><content:encoded>&lt;p&gt;In the &lt;a href=&quot;https://www.xkoji.dev/blog/unit-testing-javascript-applications-part-1/&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;previous post&lt;/a&gt;, we began talking about what unit testing is about, why we should consider writing unit tests, and how we should approach it. In this post, we will continue with some more practical things to consider and also writing some unit tests for a Vue.js application.&lt;/p&gt;
&lt;h2 id=&quot;the-application&quot; style=&quot;position:relative;&quot;&gt;The Application&lt;/h2&gt;
&lt;p&gt;&lt;span
      class=&quot;gatsby-resp-image-wrapper&quot;
      style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 1200px;&quot;
    &gt;
      &lt;span
    class=&quot;gatsby-resp-image-background-image&quot;
    style=&quot;padding-bottom: 57.00000000000001%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAABYlAAAWJQFJUiTwAAACJklEQVQoz22SW2sTQRiG9y95ulAKgpaq4IU3/gl/gbVFMEJFiuhNlWAiWm8SYtog29QkjZtDDyZjE2vWNidpqGiNSUlru+fD68ykWVPoBw+z8L07M8+3K9y67MPt0SncHPFh7PwExi5MUiYweu4erpy563H9og83Rh7h2qWHuHp2nDPcHyAk0wSRyEcsRlNYzlawnJFBVusga3UUV2t91hoI+d8gcH8SoWczyEsyclIFhRXWr59AKO18x0Iui005jyPtL0XFaVUW/egU51GKPMFerwvV1E7NCaS4glxqEU0iQbdsOLYL27Y5lsVWB5quoy1LUCpL+Lkex6GiwXHg9RnsmSHUqwRSNgJCEvzFQ0WFYVjQKYZp8ZBpOdj/kcKf6lv0tkUoqgZF03hfN0wvxzckH2YRC9zBy/A4dtsdtDt7UOgNWJCdzIqt7co0tktB/P76lOZ20e0dQNX0fs5x/isXPhWRef0CYfExNNpk5boux6HQB6iGjZh/CnLwARKhaZh0HMM1yDKE5hZBMTYHeSPJldmpJte0+GrRl9lst9bLqMTj9A8gPHNER8PQdINnPOWCOAN5IYBW+R1+Hasoal/FOVZxHReFL3kk3j9Ho17rj6bbRW//ADq9xImv/I1EsZN+hdqGSNVMZsg38mAqdMNq9TNC6Tk0Wi1vtoNifU95s1bCfDhIT2zy6/eVLa4xUDZMG/FMBrNJCdHkEjSaUanF8Ncd8A+xFgcvsIAwEwAAAABJRU5ErkJggg==&apos;); background-size: cover; display: block;&quot;
  &gt;&lt;/span&gt;
  &lt;img
        class=&quot;gatsby-resp-image-image&quot;
        alt=&quot;app screenshot&quot;
        title=&quot;app screenshot&quot;
        src=&quot;/static/74dd8acefece9fe3b016646427da5df2/c1b63/ricks-place-app.png&quot;
        srcset=&quot;/static/74dd8acefece9fe3b016646427da5df2/5a46d/ricks-place-app.png 300w,
/static/74dd8acefece9fe3b016646427da5df2/0a47e/ricks-place-app.png 600w,
/static/74dd8acefece9fe3b016646427da5df2/c1b63/ricks-place-app.png 1200w,
/static/74dd8acefece9fe3b016646427da5df2/d61c2/ricks-place-app.png 1800w,
/static/74dd8acefece9fe3b016646427da5df2/97a96/ricks-place-app.png 2400w,
/static/74dd8acefece9fe3b016646427da5df2/93ba6/ricks-place-app.png 2874w&quot;
        sizes=&quot;(max-width: 1200px) 100vw, 1200px&quot;
        style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot;
        loading=&quot;lazy&quot;
      /&gt;
    &lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;span
      class=&quot;gatsby-resp-image-wrapper&quot;
      style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 1200px;&quot;
    &gt;
      &lt;span
    class=&quot;gatsby-resp-image-background-image&quot;
    style=&quot;padding-bottom: 57.00000000000001%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAABYlAAAWJQFJUiTwAAACXklEQVQoz22Ty2sTURSH8xe5cuVKaEUsii5EVFQqsVpM0po07xd5vyYzeTZNTGLatFFErFZwoYvShRQtFjeCFQoRV1YpNLSpSTPJz3PvpCOCA4dMyLnfOd85N5oHLh8mDCaYLTMIJ1IUGcTFHNL5EhaePEf96QtU55cgRQIoZyUIfjdCMRERgfKkPJLpAsSMEuxdY7E7MW00w22z8QQhVUCUksvzDXzeWMPm6ks0m03stfYhD4CjnoxipY5oMku5s0hIf4Od17hcDuj0WuhMOqosIRhL8erFcg3N9dfYflPHz50d/Nrdw+Hhb8iyjNnSI/gjIhIEjIt5DlKBRoMOE7cu4Kr2IsEkrsygD6uLaG2v4WDrFdrtNvrUHXt6vR4Ba/BHRcSSOR4MzHRZxxqz3Yfp23eh1d8k1Sz9MMc/K6Tc6bYIRLB+H4PBQAWWqBgDJTNzEIYgRZ86dDptmNFPweW0IhRXOoxQVGgRzS8H+PG9S5gBqTIozfCox5W9wQSCUYnnKjNU1DWm++OwTo7DbZkk1STNL8uVy7UlbH3axbevLcL1eWcyddrpdLlygJTZbRCGuqqy3WWG13gPDqeZNpdTlGmD1YXHvLP/PZVag8NEpjzUVZUdHg+uXLtB7YeULVNlpp0tVPBufQPvP2xSfERjeQUrb1ex+GyZH/aFBV74eLtcmTausdmMODt6Gm6XieaRRoR02VJYcoCuRoi+s1mdPDOGc5cu48TIGDw0vxifXV7VVZW9Tgum7lyH1WSg2aXVK6D8A+YgZouQ6H2EYKdGz/PwhqV/IMdzZGf/AEMsbomoUVKvAAAAAElFTkSuQmCC&apos;); background-size: cover; display: block;&quot;
  &gt;&lt;/span&gt;
  &lt;img
        class=&quot;gatsby-resp-image-image&quot;
        alt=&quot;character details&quot;
        title=&quot;character details&quot;
        src=&quot;/static/987e828c7fa19de1342a7f7a16d7776c/c1b63/ricks-place-character-details.png&quot;
        srcset=&quot;/static/987e828c7fa19de1342a7f7a16d7776c/5a46d/ricks-place-character-details.png 300w,
/static/987e828c7fa19de1342a7f7a16d7776c/0a47e/ricks-place-character-details.png 600w,
/static/987e828c7fa19de1342a7f7a16d7776c/c1b63/ricks-place-character-details.png 1200w,
/static/987e828c7fa19de1342a7f7a16d7776c/d61c2/ricks-place-character-details.png 1800w,
/static/987e828c7fa19de1342a7f7a16d7776c/97a96/ricks-place-character-details.png 2400w,
/static/987e828c7fa19de1342a7f7a16d7776c/d9ed5/ricks-place-character-details.png 2880w&quot;
        sizes=&quot;(max-width: 1200px) 100vw, 1200px&quot;
        style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot;
        loading=&quot;lazy&quot;
      /&gt;
    &lt;/span&gt;&lt;/p&gt;
&lt;p&gt;The application we would be testing is a very simple one. It fetches and displays a list of characters from the TV series &lt;em&gt;“Rick and Morty”&lt;/em&gt;. It also displays the character details in a modal dialog. You can add a note to any character in the app, and the notes are persisted to a remote storage and available to anyone using the app.&lt;/p&gt;
&lt;p&gt;&lt;em&gt;You can checkout the full application with the tests in this repo: &lt;a href=&quot;https://github.com/imolorhe/rick-morty&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;https://github.com/imolorhe/rick-morty&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;
&lt;h3 id=&quot;what-is-the-application-built-with&quot; style=&quot;position:relative;&quot;&gt;What is the application built with?&lt;/h3&gt;
&lt;p&gt;The application is built with the &lt;a href=&quot;https://vuejs.org/&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;Vue.js&lt;/a&gt; as the JS framework consisting of a few views and components, bootstrapped using the &lt;a href=&quot;https://cli.vuejs.org/&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;Vue CLI&lt;/a&gt; tool. The application is written in &lt;a href=&quot;https://www.typescriptlang.org/&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;TypeScript&lt;/a&gt;, compiled to JavaScript. The client state of the application is managed using &lt;a href=&quot;https://vuex.vuejs.org/&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;Vuex&lt;/a&gt;, the de-facto state management library for Vue applications, routing managed by &lt;a href=&quot;https://router.vuejs.org/&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;Vue router&lt;/a&gt;, styling based on &lt;a href=&quot;https://tailwindcss.com/&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;Tailwind CSS&lt;/a&gt;, and &lt;a href=&quot;https://github.com/axios/axios&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;axios&lt;/a&gt; for sending API requests. Nothing too fancy.&lt;/p&gt;
&lt;p&gt;The application makes use of the &lt;a href=&quot;https://rickandmortyapi.com/&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;Rick and Morty API&lt;/a&gt; &lt;em&gt;(btw consider &lt;a href=&quot;https://rickandmortyapi.com/help-us&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;supporting&lt;/a&gt; them)&lt;/em&gt;. Although the rickandmortyapi also comes with a GraphQL endpoint, we would be using the REST API, to keep things simple (REST is still the most common API format). If you would like to use the GraphQL API, you can make use of the &lt;a href=&quot;https://apollo.vuejs.org/&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;Vue Apollo&lt;/a&gt; package to integrate GraphQL within your application.&lt;/p&gt;
&lt;p&gt;&lt;span
      class=&quot;gatsby-resp-image-wrapper&quot;
      style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 1200px;&quot;
    &gt;
      &lt;span
    class=&quot;gatsby-resp-image-background-image&quot;
    style=&quot;padding-bottom: 57.333333333333336%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAABYlAAAWJQFJUiTwAAABuElEQVQoz4WTS3ajMBBFWU34CSEkkIT42IBjx04yyDDD3kbvoFf9usTHON05J4M6AlR1/epVOWi6G+rmAluf0R1e4doXen+BdWdoe4ahaCnHv7uO8toz6vYCVY4o9YTKnND0V4zXN4y3VwRpViPJDGQ5QFVLkih6pMyhqHqI8gCed+BiDbrL6GT+W9EhLw4QusPn73f8+vOBgHGHOPXQlpL6+UxYjadQozlNGC43FHKYC+dieQTjDWKKKLUI4wpRrOczTAyChBkodSSFI2ICxZQU0UWY6FlZ5z6ovedZmYctwJZyzQIhWJRsUa1AUlCII54iRb9WzRc+Wcge1l5nK4TcFWa576ZFyu1sVxhVdyh5aJGLHixrFvnrxQI8QBsahDuRt8MXoHQTSgqhySK+1wQhqeGUkGx+PAAlWWFWoKp2oB+OIpjtnpGrlrxc6jwr2IofYdu3Qi0KTT19AXqFwg6Qhp6l913f64N/Vf3fst/HieDHfcq+ZTPCtCdwSRNn+g79QeHSslfon7nY1ybzO0gdMFEjzQ3ibAUy7iWbbxVuLXsPjRvpX0HbUHqgoz1VNN3yYQ8XD/8Cy6JhQNyYq1QAAAAASUVORK5CYII=&apos;); background-size: cover; display: block;&quot;
  &gt;&lt;/span&gt;
  &lt;img
        class=&quot;gatsby-resp-image-image&quot;
        alt=&quot;rickandmorty GraphQL query in Altair&quot;
        title=&quot;rickandmorty GraphQL query in Altair&quot;
        src=&quot;/static/581e5f6799d44c248c1f7e41819b1ba7/c1b63/rickandmortyapi-graphql.png&quot;
        srcset=&quot;/static/581e5f6799d44c248c1f7e41819b1ba7/5a46d/rickandmortyapi-graphql.png 300w,
/static/581e5f6799d44c248c1f7e41819b1ba7/0a47e/rickandmortyapi-graphql.png 600w,
/static/581e5f6799d44c248c1f7e41819b1ba7/c1b63/rickandmortyapi-graphql.png 1200w,
/static/581e5f6799d44c248c1f7e41819b1ba7/d61c2/rickandmortyapi-graphql.png 1800w,
/static/581e5f6799d44c248c1f7e41819b1ba7/97a96/rickandmortyapi-graphql.png 2400w,
/static/581e5f6799d44c248c1f7e41819b1ba7/60708/rickandmortyapi-graphql.png 2872w&quot;
        sizes=&quot;(max-width: 1200px) 100vw, 1200px&quot;
        style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot;
        loading=&quot;lazy&quot;
      /&gt;
    &lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;span
      class=&quot;gatsby-resp-image-wrapper&quot;
      style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 1200px;&quot;
    &gt;
      &lt;span
    class=&quot;gatsby-resp-image-background-image&quot;
    style=&quot;padding-bottom: 75%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAABYlAAAWJQFJUiTwAAABdklEQVQ4y6WS2U7DMBBF8/9/xTvQquINUTZRlSykSWzH+2XGVWiWVpVKlCs71p2TGc9kWmv0fQ8pJZRSEELAGIMYI0IMoBeV2GPzdYcyr1BWJfI8h7WWPAEhhKOXVuccMg723qcDXvmQxXs2JrOPsMbCOvbyGcjDMbQH0soPJ5dxwLUnUoC0LeouhzMKznbwTiTxPgS3BA7ZzIWUQUBPoN5KytaQqNzgEyiyRr6LwOEsGX2AcRo/cgetSsyrGr75mhbAsWlstM6iVnv0qqD7bKhcKp3L9vov5ixwDh2M3KhO19B9RVl+01rA0PfxDj27p8ABwCPEIzEHcoat3EN1n6R30kfaW3Ogn0nyevKFKZAvlTs1zOEYyJLtFnXxgEO5Iq3RVE+TihYZjueQ4ePzCbB4TNCm2ix82byjl7p3DshZ8ghdbcq8QeeB6yT/P+DrETYBmltKdqcM8/tTlsXqVqCnzluIdoe2foZoXkhb0lv62VANj9sv7HaXqW7uHaAAAAAASUVORK5CYII=&apos;); background-size: cover; display: block;&quot;
  &gt;&lt;/span&gt;
  &lt;img
        class=&quot;gatsby-resp-image-image&quot;
        alt=&quot;rickandmorty REST API request in insomnia&quot;
        title=&quot;rickandmorty REST API request in insomnia&quot;
        src=&quot;/static/8c73a3f57685bca35c5e18ffd689213c/c1b63/rickandmortyapi-rest.png&quot;
        srcset=&quot;/static/8c73a3f57685bca35c5e18ffd689213c/5a46d/rickandmortyapi-rest.png 300w,
/static/8c73a3f57685bca35c5e18ffd689213c/0a47e/rickandmortyapi-rest.png 600w,
/static/8c73a3f57685bca35c5e18ffd689213c/c1b63/rickandmortyapi-rest.png 1200w,
/static/8c73a3f57685bca35c5e18ffd689213c/d61c2/rickandmortyapi-rest.png 1800w,
/static/8c73a3f57685bca35c5e18ffd689213c/4654d/rickandmortyapi-rest.png 2392w&quot;
        sizes=&quot;(max-width: 1200px) 100vw, 1200px&quot;
        style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot;
        loading=&quot;lazy&quot;
      /&gt;
    &lt;/span&gt;&lt;/p&gt;
&lt;p&gt;The application uses &lt;a href=&quot;https://jsonbin.io/&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;JSONBin.io&lt;/a&gt; to create and store the notes as bins for retrieval later on.&lt;/p&gt;
&lt;p&gt;As you can already tell, there are only two main views (pages) in the application: the &lt;strong&gt;character list&lt;/strong&gt;, and the &lt;strong&gt;character details&lt;/strong&gt; views. Other components in the app include: the &lt;strong&gt;Header&lt;/strong&gt; component used across the pages, the &lt;strong&gt;Pagination&lt;/strong&gt; component for the list view, and the &lt;strong&gt;CharacterCard&lt;/strong&gt; component for displaying the basic info about each character in the list.&lt;/p&gt;
&lt;p&gt;For the store, there are 3 actions:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code class=&quot;language-text&quot;&gt;getCharacters&lt;/code&gt; fetches the characters from the API for the current page, and commits the &lt;code class=&quot;language-text&quot;&gt;getCharactersSuccess&lt;/code&gt; mutation with the result to the state.&lt;/li&gt;
&lt;li&gt;&lt;code class=&quot;language-text&quot;&gt;getNotes&lt;/code&gt; fetches the list of notes from the collection on JSONBin.io, and commits the &lt;code class=&quot;language-text&quot;&gt;getNotesSuccess&lt;/code&gt; mutation with the retrieved notes to the state.&lt;/li&gt;
&lt;li&gt;&lt;code class=&quot;language-text&quot;&gt;addNote&lt;/code&gt; sends a request to JSONBin.io to create a bin containing the note in a collection, and dispatches the &lt;code class=&quot;language-text&quot;&gt;getNotes&lt;/code&gt; action to re-fetch the characters. &lt;em&gt;Ideally dispatching the &lt;code class=&quot;language-text&quot;&gt;getNotes&lt;/code&gt; action shouldn’t be necessary at this step. You should be able to transform and commit the returned result from the request to create a bin without requiring to re-fetch all the notes, but for the purpose of this post, I have opted to dispatch the &lt;code class=&quot;language-text&quot;&gt;getNotes&lt;/code&gt; actions.&lt;/em&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;There are also a few getters for transforming data from the state: &lt;code class=&quot;language-text&quot;&gt;characterList&lt;/code&gt;, &lt;code class=&quot;language-text&quot;&gt;getCharacterById&lt;/code&gt;, and &lt;code class=&quot;language-text&quot;&gt;getCharacterNotes&lt;/code&gt;.&lt;/p&gt;
&lt;h2 id=&quot;defining-test-cases&quot; style=&quot;position:relative;&quot;&gt;Defining Test Cases&lt;/h2&gt;
&lt;p&gt;Irrespective of if you decide to follow the &lt;a href=&quot;https://www.xkoji.dev/blog/unit-testing-javascript-applications-part-1/#what-should-i-know-about-tdd&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;TDD approach&lt;/a&gt; or not, your tests should reflect the functional requirements of your component or piece of code. If you recall how we should think about the test cases from the first post in this series:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;em&gt;I think from a blackbox perspective when&lt;/em&gt; determining the &lt;em&gt;inputs&lt;/em&gt; and &lt;em&gt;outputs&lt;/em&gt; of the piece of code to test, and I use that to create the test cases.&lt;/li&gt;
&lt;li&gt;&lt;em&gt;I think from a whitebox perspective when&lt;/em&gt; I need to mock dependencies, since we need knowledge about the internals of the piece of code in order to be able to mock the dependencies.&lt;/li&gt;
&lt;li&gt;&lt;em&gt;I think from a whitebox perspective when&lt;/em&gt; I want to cover all the logical execution flows within the piece of code, and I use this to add extra test cases, making the test suite robust.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Let’s use another example to illustrate these points. Consider the following class:&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;js&quot;&gt;&lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;import&lt;/span&gt; pow &lt;span class=&quot;token keyword&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;super-power&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

&lt;span class=&quot;token keyword&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;Squarer&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  lastComputed &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;null&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  #previousLastComputed &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;null&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token comment&quot;&gt;/**
   * Returns the square the specified input.
   * If a list is provided, returns the sum of the squared of the items in list
   */&lt;/span&gt;
  &lt;span class=&quot;token function&quot;&gt;compute&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;val&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;token keyword&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;#previousLastComputed &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;lastComputed&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;token keyword&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;lastComputed &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; val&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;#getSquared&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;val&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;

  &lt;span class=&quot;token function&quot;&gt;#getSquared&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;val&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;token keyword&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;Array&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;isArray&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;val&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
      &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; val&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;reduce&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;acc&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; cur&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; acc &lt;span class=&quot;token operator&quot;&gt;+&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;pow&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;Number&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;cur&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;2&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;

    &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;pow&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;Number&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;val&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;2&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;||&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;

&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; squarer &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;new&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;Squarer&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
squarer&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;compute&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;2&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt; &lt;span class=&quot;token comment&quot;&gt;// =&gt; 4&lt;/span&gt;
squarer&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;lastComputed&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt; &lt;span class=&quot;token comment&quot;&gt;// =&gt; 2&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;This &lt;code class=&quot;language-text&quot;&gt;Squarer&lt;/code&gt; class has one &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Class_fields#Private_Methods&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;private&lt;/a&gt; method &lt;code class=&quot;language-text&quot;&gt;#getSquared()&lt;/code&gt; and one public method &lt;code class=&quot;language-text&quot;&gt;compute()&lt;/code&gt;. The usage is simple: you call the &lt;code class=&quot;language-text&quot;&gt;compute(val)&lt;/code&gt; method with a &lt;code class=&quot;language-text&quot;&gt;val&lt;/code&gt; parameter, and it returns the squared value. Assuming we want to test this class as a unit of code following the steps above:&lt;/p&gt;
&lt;h3 id=&quot;create-test-cases-from-the-inputs-and-outputs-of-the-piece-of-code&quot; style=&quot;position:relative;&quot;&gt;Create test cases from the inputs and outputs of the piece of code&lt;/h3&gt;
&lt;p&gt;The class only accepts input via the &lt;code class=&quot;language-text&quot;&gt;compute&lt;/code&gt; method. However, it accepts multiple input types: an array of values, or primitive values.
The &lt;em&gt;output&lt;/em&gt; from the class includes the result of the &lt;code class=&quot;language-text&quot;&gt;compute()&lt;/code&gt; method call, as well as the public &lt;code class=&quot;language-text&quot;&gt;lastComputed&lt;/code&gt; property.&lt;/p&gt;
&lt;p&gt;Although the class also contains &lt;code class=&quot;language-text&quot;&gt;#previousLastComputed&lt;/code&gt; property and &lt;code class=&quot;language-text&quot;&gt;#getSquared()&lt;/code&gt; method, those are private to the class and are not exposed outside the class definition. Hence, an external library or function can only interact with this class using the &lt;code class=&quot;language-text&quot;&gt;compute()&lt;/code&gt; method and the &lt;code class=&quot;language-text&quot;&gt;lastComputed&lt;/code&gt; properties. This is what we would consider as the public API/interface of the class, and that is what we consider.&lt;/p&gt;
&lt;p&gt;Given that, we can define a test case for each of the following:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;input as number&lt;/li&gt;
&lt;li&gt;input as string&lt;/li&gt;
&lt;li&gt;input as array of numbers&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;It’s always a good practice to also account for edge cases when supplying inputs. For instance, you could add test cases for input as null, undefined, or an object. This could reveal possible misbehaviors within the code which you can then fix, and would lead to more consistent behavior.&lt;/p&gt;
&lt;h3 id=&quot;determine-the-dependencies-of-the-code-that-would-need-to-be-mocked&quot; style=&quot;position:relative;&quot;&gt;Determine the dependencies of the code that would need to be mocked&lt;/h3&gt;
&lt;p&gt;In the class we have used a fictional module &lt;code class=&quot;language-text&quot;&gt;super-power&lt;/code&gt; for calculating exponents. For us to test this class in isolation &lt;em&gt;(unit testing)&lt;/em&gt;, we need to mock out the &lt;code class=&quot;language-text&quot;&gt;super-power&lt;/code&gt; library. For this step, we just note the things that need to be mocked. Actually mocking these dependencies would require specific implementations based on the testing framework in use. We would see how we mock this in &lt;a href=&quot;https://jestjs.io/&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;jest&lt;/a&gt; in a coming section.&lt;/p&gt;
&lt;h3 id=&quot;create-extra-test-cases-covering-all-the-logical-execution-flows&quot; style=&quot;position:relative;&quot;&gt;Create extra test cases covering all the logical execution flows&lt;/h3&gt;
&lt;p&gt;We use &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;&lt;code class=&quot;language-text&quot;&gt;if&lt;/code&gt;&lt;/a&gt; and &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;&lt;code class=&quot;language-text&quot;&gt;switch&lt;/code&gt;&lt;/a&gt; statements as well as &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Short-circuit_evaluation&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;logical (short circuit evaluation)&lt;/a&gt; and &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;ternary (conditional)&lt;/a&gt; operators in JavaScript to create branches in the execution flow based on the specified conditions. These change the execution path of the code, hence could yield different results based on the applied conditions. It might not always be obvious (especially with ternary and logical operators) that there are multiple execution paths within the code. This means you could have tests for your code but still have some untested flows that could contain bugs because the tests don’t cover them.&lt;/p&gt;
&lt;p&gt;Looking at the &lt;code class=&quot;language-text&quot;&gt;Squarer&lt;/code&gt; class example, you would notice we have one &lt;code class=&quot;language-text&quot;&gt;if&lt;/code&gt; statement in the private &lt;code class=&quot;language-text&quot;&gt;#getSquared&lt;/code&gt; method. You would also notice that the function does something different if the condition is met, and otherwise. There is also a short circuit evaluation used on the line with the &lt;code class=&quot;language-text&quot;&gt;return&lt;/code&gt; statement.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;js&quot;&gt;&lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;import&lt;/span&gt; pow &lt;span class=&quot;token keyword&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;super-power&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

&lt;span class=&quot;token keyword&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;Squarer&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token comment&quot;&gt;// ...&lt;/span&gt;

  &lt;span class=&quot;token function&quot;&gt;#getSquared&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;val&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;token keyword&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;Array&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;isArray&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;val&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
      &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; val&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;reduce&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;acc&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; cur&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; acc &lt;span class=&quot;token operator&quot;&gt;+&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;pow&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;Number&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;cur&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;2&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;

&lt;span class=&quot;gatsby-highlight-code-line&quot;&gt;    &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;pow&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;Number&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;val&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;2&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;||&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/span&gt;  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;

&lt;span class=&quot;token comment&quot;&gt;// ...&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;If &lt;code class=&quot;language-text&quot;&gt;pow(Number(val), 2)&lt;/code&gt; returns a falsy value (like &lt;code class=&quot;language-text&quot;&gt;&amp;#39;&amp;#39;&lt;/code&gt;, &lt;code class=&quot;language-text&quot;&gt;0&lt;/code&gt;, &lt;code class=&quot;language-text&quot;&gt;null&lt;/code&gt;, &lt;code class=&quot;language-text&quot;&gt;undefined&lt;/code&gt;), we return 0 instead. As you can see, this is not immediately obvious as it is in the same line as the &lt;code class=&quot;language-text&quot;&gt;return&lt;/code&gt; statement.&lt;/p&gt;
&lt;p&gt;Luckily, we already covered the multiple cases in the &lt;code class=&quot;language-text&quot;&gt;if&lt;/code&gt; statement in the first step (input as array, input as number, etc). However we didn’t consider the short circuit with the logical OR operator. For a more robust test suite covering all cases, we should add a test case that ensures that execution path is covered as well. To do this here, we just need to ensure the returned value from the mocked &lt;code class=&quot;language-text&quot;&gt;pow()&lt;/code&gt; returns a falsy value, and the 0 should be returned.&lt;/p&gt;
&lt;p&gt;Having followed those 3 steps, we would have all the test cases covered, without unnecessarily testing the internal API of our class.&lt;/p&gt;
&lt;h2 id=&quot;introducing-jest&quot; style=&quot;position:relative;&quot;&gt;Introducing Jest&lt;/h2&gt;
&lt;p&gt;We would be using the &lt;a href=&quot;https://jestjs.io/&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;Jest testing framework&lt;/a&gt; for writing the tests for our application. Jest has gained a lot of popularity recently I believe because of its simplicity. Compared to other testing frameworks, it is very easy to get started writing tests in Jest with little or no configuration. Jest also comes with all the related tools regularly used for testing like mock functions, stubs, spies, assertions, snapshots, etc. Jest is also extendable with the ability to write your own custom runners, reporters, watch plugins, custom matchers, etc.&lt;/p&gt;
&lt;p&gt;By default, jest runs tests from files ending with &lt;code class=&quot;language-text&quot;&gt;.spec.js&lt;/code&gt;, &lt;code class=&quot;language-text&quot;&gt;.test.js&lt;/code&gt;, &lt;code class=&quot;language-text&quot;&gt;.spec.jsx&lt;/code&gt;, &lt;code class=&quot;language-text&quot;&gt;.test.jsx&lt;/code&gt;, and their typescript equivalents (&lt;code class=&quot;language-text&quot;&gt;.spec.ts&lt;/code&gt;, &lt;code class=&quot;language-text&quot;&gt;.test.ts&lt;/code&gt;, &lt;code class=&quot;language-text&quot;&gt;.spec.tsx&lt;/code&gt;, &lt;code class=&quot;language-text&quot;&gt;.test.tsx&lt;/code&gt;). Jest also runs any &lt;code class=&quot;language-text&quot;&gt;.js&lt;/code&gt;, &lt;code class=&quot;language-text&quot;&gt;.jsx&lt;/code&gt;, &lt;code class=&quot;language-text&quot;&gt;.ts&lt;/code&gt;, &lt;code class=&quot;language-text&quot;&gt;.tsx&lt;/code&gt; files in any &lt;code class=&quot;language-text&quot;&gt;__tests__&lt;/code&gt; directory. There are usually two patterns used to organize your test files: either storing the test files together in a &lt;code class=&quot;language-text&quot;&gt;__tests__&lt;/code&gt; directory next to the source directory, or storing them right next to the source files.&lt;/p&gt;
&lt;p&gt;Let’s write the test cases we have defined for the &lt;code class=&quot;language-text&quot;&gt;Squarer&lt;/code&gt; class.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;js&quot;&gt;&lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;// squarer.spec.js&lt;/span&gt;

&lt;span class=&quot;token keyword&quot;&gt;import&lt;/span&gt; pow &lt;span class=&quot;token keyword&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;super-power&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
jest&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;mock&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;super-power&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;x&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; y&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; x &lt;span class=&quot;token operator&quot;&gt;**&lt;/span&gt; y&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

&lt;span class=&quot;token function&quot;&gt;describe&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;Squarer&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token function&quot;&gt;describe&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;.compute()&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;

    &lt;span class=&quot;token function&quot;&gt;it&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;should square the number input&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
      &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; squarer &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;new&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;Squarer&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

      &lt;span class=&quot;token function&quot;&gt;expect&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;squarer&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;compute&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toBe&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
      &lt;span class=&quot;token function&quot;&gt;expect&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;squarer&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;compute&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;2&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toBe&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;4&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
      &lt;span class=&quot;token function&quot;&gt;expect&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;squarer&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;compute&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;3&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toBe&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;9&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
      &lt;span class=&quot;token function&quot;&gt;expect&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;squarer&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;compute&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;10&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toBe&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;100&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

    &lt;span class=&quot;token function&quot;&gt;it&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;should square the parsed number in the string input&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
      &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; squarer &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;new&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;Squarer&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

      &lt;span class=&quot;token function&quot;&gt;expect&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;squarer&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;compute&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;2&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toBe&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;4&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
      &lt;span class=&quot;token function&quot;&gt;expect&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;squarer&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;compute&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;10&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toBe&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;100&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

    &lt;span class=&quot;token function&quot;&gt;it&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;should return the sum of the square of the numbers in the array input&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
      &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; squarer &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;new&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;Squarer&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

      &lt;span class=&quot;token function&quot;&gt;expect&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;squarer&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;compute&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;2&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;4&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;6&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;7&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toBe&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;105&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

    &lt;span class=&quot;token function&quot;&gt;it&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;should return zero for invalid inputs&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
      &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; squarer &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;new&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;Squarer&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

      &lt;span class=&quot;token function&quot;&gt;expect&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;squarer&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;compute&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token keyword&quot;&gt;null&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toBe&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
      &lt;span class=&quot;token function&quot;&gt;expect&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;squarer&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;compute&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token keyword&quot;&gt;undefined&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toBe&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
      &lt;span class=&quot;token function&quot;&gt;expect&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;squarer&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;compute&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toBe&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;Within each test file, the test cases are organized into test suites. Test suites are used for grouping test cases related to the same piece of code. In Jest, test suites are defined using the &lt;a href=&quot;https://jestjs.io/docs/en/api#describename-fn&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;&lt;code class=&quot;language-text&quot;&gt;describe()&lt;/code&gt;&lt;/a&gt; method while test cases are defined using the &lt;a href=&quot;https://jestjs.io/docs/en/api#testname-fn-timeout&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;&lt;code class=&quot;language-text&quot;&gt;test()&lt;/code&gt; or &lt;code class=&quot;language-text&quot;&gt;it()&lt;/code&gt;&lt;/a&gt; methods. &lt;em&gt;You can learn more about all the globals available in Jest tests &lt;a href=&quot;https://jestjs.io/docs/en/api&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;here&lt;/a&gt;.&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;The tests above cover all the test cases we previously defined, including the edge cases like &lt;code class=&quot;language-text&quot;&gt;null&lt;/code&gt; and &lt;code class=&quot;language-text&quot;&gt;undefined&lt;/code&gt;. It also covers the short circuit to return zero, by providing an input that would cause the &lt;code class=&quot;language-text&quot;&gt;pow&lt;/code&gt; mock to return zero (the square of zero is zero). Jest allows us to mock the &lt;code class=&quot;language-text&quot;&gt;pow&lt;/code&gt; module using the &lt;code class=&quot;language-text&quot;&gt;jest.mock()&lt;/code&gt; method at the top of the file. Here, we define the module to return a function that returns the exponentiation result of the base (first parameter) and the exponent (second parameter).&lt;/p&gt;
&lt;h2 id=&quot;testing-the-store&quot; style=&quot;position:relative;&quot;&gt;Testing the Store&lt;/h2&gt;
&lt;p&gt;Now coming back to our application. Let’s write the unit tests for the store (actions, mutations and getters). We would write tests for just one function in each category, as the learnings can be applied to the others.&lt;/p&gt;
&lt;h3 id=&quot;action-getcharacters&quot; style=&quot;position:relative;&quot;&gt;Action: getCharacters&lt;/h3&gt;
&lt;p&gt;Let’s look at the &lt;strong&gt;functional requirements&lt;/strong&gt; for the &lt;code class=&quot;language-text&quot;&gt;getCharacters&lt;/code&gt; action:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;it can be called without parameters, or with an object containing the page number to fetch.&lt;/li&gt;
&lt;li&gt;it should fetch characters data from the rickandmorty API using the &lt;code class=&quot;language-text&quot;&gt;rickmorty&lt;/code&gt; module for the specified page.&lt;/li&gt;
&lt;li&gt;it should commit the fetched data to the &lt;code class=&quot;language-text&quot;&gt;getCharactersSuccess&lt;/code&gt; mutation.&lt;/li&gt;
&lt;/ul&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;js&quot;&gt;&lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; getCharacter &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;@/api/rickmorty&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

&lt;span class=&quot;token comment&quot;&gt;// ...&lt;/span&gt;
&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; actions &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;gatsby-highlight-code-line&quot;&gt;  &lt;span class=&quot;token keyword&quot;&gt;async&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;getCharacters&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; commit &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; page &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;1&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gatsby-highlight-code-line&quot;&gt;    &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; res &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;await&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;getCharacter&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; page &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gatsby-highlight-code-line&quot;&gt;    &lt;span class=&quot;token function&quot;&gt;commit&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;getCharactersSuccess&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; data&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; res&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; page&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;Number&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;page&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gatsby-highlight-code-line&quot;&gt;  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;/span&gt;  &lt;span class=&quot;token comment&quot;&gt;// ...&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

&lt;span class=&quot;token keyword&quot;&gt;export&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;default&lt;/span&gt; actions&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;Now looking at the &lt;strong&gt;inputs and outputs&lt;/strong&gt; (public interface) of the action:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;first parameter is passed by Vuex, so is a constant which we don’t control.&lt;/li&gt;
&lt;li&gt;we provide the second parameter to the &lt;code class=&quot;language-text&quot;&gt;getCharacters&lt;/code&gt; action, an object containing &lt;code class=&quot;language-text&quot;&gt;page&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;we can omit the second parameter and the default should be used instead.&lt;/li&gt;
&lt;li&gt;actions don’t return values, or their returned values aren’t used. Instead, they are expected to perform tasks like asynchronously fetching data from a server, saving a file to the disk, committing some mutation, etc. In that sense, the expected result (&lt;em&gt;output&lt;/em&gt;) of an action is not the value it returns, but the actions it performs. This is usually the case for impure functions. Since they could have intended side effects, you want to make sure that the intended side effect happens as expected, which is the result/output of the function. For the case of the &lt;code class=&quot;language-text&quot;&gt;getCharacters&lt;/code&gt; action, you expect that the &lt;code class=&quot;language-text&quot;&gt;getCharacters&lt;/code&gt; rickandmorty API is called to get the characters data, and you expect that the &lt;code class=&quot;language-text&quot;&gt;commit()&lt;/code&gt; is called with the &lt;code class=&quot;language-text&quot;&gt;getCharactersSuccess&lt;/code&gt; mutation and the characters data and page.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;em&gt;Note: Ideally the main side effect to be considered should be just the committing of the mutation, but we generally also test that the &lt;code class=&quot;language-text&quot;&gt;getCharacters&lt;/code&gt; method is called from the &lt;code class=&quot;language-text&quot;&gt;rickmorty&lt;/code&gt; module.&lt;/em&gt;&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;ts&quot;&gt;&lt;pre class=&quot;language-ts&quot;&gt;&lt;code class=&quot;language-ts&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;import&lt;/span&gt; actions &lt;span class=&quot;token keyword&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;./actions&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token keyword&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;*&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;as&lt;/span&gt; rickmorty &lt;span class=&quot;token keyword&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;@/api/rickmorty&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
jest&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;mock&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;@/api/rickmorty&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

&lt;span class=&quot;token function&quot;&gt;describe&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;getCharacters&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token function&quot;&gt;beforeEach&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    jest&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;clearAllMocks&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

  &lt;span class=&quot;token function&quot;&gt;it&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;should commit the default page and data from the api&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;async&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; commit &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; jest&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;fn&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; data &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; x&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;1&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;rickmorty&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;getCharacter &lt;span class=&quot;token keyword&quot;&gt;as&lt;/span&gt; &lt;span class=&quot;token builtin&quot;&gt;any&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;mockImplementation&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token builtin&quot;&gt;Promise&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;resolve&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;data&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;token keyword&quot;&gt;await&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;actions &lt;span class=&quot;token keyword&quot;&gt;as&lt;/span&gt; &lt;span class=&quot;token builtin&quot;&gt;any&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getCharacters&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; commit &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

    &lt;span class=&quot;token function&quot;&gt;expect&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;rickmorty&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;getCharacter&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toHaveBeenCalled&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;token function&quot;&gt;expect&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;commit&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toHaveBeenCalledWith&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;
      &lt;span class=&quot;token string&quot;&gt;&apos;getCharactersSuccess&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
      &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; data&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; page&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;1&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token function&quot;&gt;it&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;should commit the specified page and data from the API&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;async&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; commit &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; jest&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;fn&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; data &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; x&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;1&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;rickmorty&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;getCharacter &lt;span class=&quot;token keyword&quot;&gt;as&lt;/span&gt; &lt;span class=&quot;token builtin&quot;&gt;any&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;mockImplementation&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token builtin&quot;&gt;Promise&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;resolve&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;data&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;token keyword&quot;&gt;await&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;actions &lt;span class=&quot;token keyword&quot;&gt;as&lt;/span&gt; &lt;span class=&quot;token builtin&quot;&gt;any&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getCharacters&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; commit &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; page&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;3&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

    &lt;span class=&quot;token function&quot;&gt;expect&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;rickmorty&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;getCharacter&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toHaveBeenCalledWith&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; page&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;3&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;token function&quot;&gt;expect&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;commit&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toHaveBeenCalledWith&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;
      &lt;span class=&quot;token string&quot;&gt;&apos;getCharactersSuccess&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
      &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; data&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; page&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;3&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;We have written two test cases for the &lt;code class=&quot;language-text&quot;&gt;getCharacters&lt;/code&gt; action. In both test cases, we mocked the &lt;code class=&quot;language-text&quot;&gt;rickmorty.getCharacter()&lt;/code&gt; method to return some data, and we check that the method was called using &lt;code class=&quot;language-text&quot;&gt;expect().toHaveBeenCalled()&lt;/code&gt;. We also check that the &lt;code class=&quot;language-text&quot;&gt;commit()&lt;/code&gt; method was called with the &lt;code class=&quot;language-text&quot;&gt;getCharactersSuccess&lt;/code&gt; mutation and the data containing the response from the API and the page number. In the first case we don’t pass in the page number as a parameter to the action, but we expect the default page number to be used and committed.&lt;/p&gt;
&lt;p&gt;One thing to note here is that you can only use the &lt;code class=&quot;language-text&quot;&gt;.toHaveBeenCalled()&lt;/code&gt;/&lt;code class=&quot;language-text&quot;&gt;.toHaveBeenCalledWith()&lt;/code&gt; assertions for jest mock functions (&lt;code class=&quot;language-text&quot;&gt;jest.fn()&lt;/code&gt;). In the test cases above, we can see that &lt;code class=&quot;language-text&quot;&gt;commit&lt;/code&gt; is a jest mock function. We also mocked the &lt;code class=&quot;language-text&quot;&gt;rickmorty&lt;/code&gt; module using the &lt;code class=&quot;language-text&quot;&gt;jest.mock(&amp;#39;@/api/rickmorty&amp;#39;)&lt;/code&gt; statement at the top. This is jest’s “automatic mock” ability. With that, every method or property from the &lt;code class=&quot;language-text&quot;&gt;rickmorty&lt;/code&gt; module is now a jest mock, and not the original implementation. So you can implement the mock to return specific outputs within a test case using the &lt;a href=&quot;https://jestjs.io/docs/en/mock-function-api#mockfnmockimplementationfn&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;&lt;code class=&quot;language-text&quot;&gt;.mockImplementation()&lt;/code&gt;&lt;/a&gt; factory method.
We mocked the &lt;code class=&quot;language-text&quot;&gt;rickmorty.getCharacter()&lt;/code&gt; method to resolve with &lt;code class=&quot;language-text&quot;&gt;data&lt;/code&gt; in the test cases above, so anytime that method is executed within thw action, it would return a promise that resolves with &lt;code class=&quot;language-text&quot;&gt;data&lt;/code&gt;.&lt;/p&gt;
&lt;p&gt;We also added a &lt;code class=&quot;language-text&quot;&gt;beforeEach()&lt;/code&gt; method within the test suite that calls &lt;code class=&quot;language-text&quot;&gt;jest.clearAllMocks()&lt;/code&gt;. This is already self-explanatory. Basically before each test case is run, the &lt;code class=&quot;language-text&quot;&gt;beforeEach()&lt;/code&gt; method is executed, and it clears all the mocks and their implementations (like those done using &lt;code class=&quot;language-text&quot;&gt;mockImplementation&lt;/code&gt;), ensuring that the mocks don’t have any stale data. This ensures the tests don’t get influenced by mocks from previous test cases.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;You can find out other ways to mock modules &lt;a href=&quot;https://jestjs.io/docs/en/es6-class-mocks&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;here&lt;/a&gt;.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;The same approach for testing this action can be applied to all the other actions as well. If an action simply dispatches another action, then check that the &lt;code class=&quot;language-text&quot;&gt;dispatch&lt;/code&gt; is called with the right parameters. If it calls some other API to fetch or store data, or perform some other task, then check that the API was called from within the action. Remember the API should be mocked in the test since its implementation is not part of the action being tested.&lt;/p&gt;
&lt;p&gt;&lt;em&gt;Side Note: You might be wondering why we have things like &lt;code class=&quot;language-text&quot;&gt;(actions as any)&lt;/code&gt; in the tests. This is so that typescript doesn’t throw errors. The type of &lt;code class=&quot;language-text&quot;&gt;actions&lt;/code&gt; should be &lt;code class=&quot;language-text&quot;&gt;ActionTree&lt;/code&gt; since it is the actions object, and you can’t directly call the functions in the actions (you would normally dispatch actions from your Vue components and Vue would handle calling the actions), so typescript doesn’t allow us use the action this way in the test, so we cast the &lt;code class=&quot;language-text&quot;&gt;actions&lt;/code&gt; to &lt;code class=&quot;language-text&quot;&gt;any&lt;/code&gt; to remove all the type checking. Similarly, &lt;code class=&quot;language-text&quot;&gt;(rickmorty.getCharacter as any)&lt;/code&gt; is used since the module is mocked and now has the &lt;code class=&quot;language-text&quot;&gt;.mockImplementation()&lt;/code&gt; method, but typescript doesn’t know that either, so we disable type checking there as well.&lt;/em&gt;&lt;/p&gt;
&lt;h3 id=&quot;mutation-getcharacterssuccess&quot; style=&quot;position:relative;&quot;&gt;Mutation: getCharactersSuccess&lt;/h3&gt;
&lt;p&gt;Vuex mutations have only one job - to modify the state. Your mutations should be as simple as possible, and shouldn’t manage a lot of business logic. If you need to perform a lot of business logic before modifying the state, then you should consider performing those operations within an action, and only call the mutation when the state needs to be modified.&lt;/p&gt;
&lt;p&gt;Let’s define the requirements for the &lt;code class=&quot;language-text&quot;&gt;getCharactersSuccess&lt;/code&gt; mutation:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;it should be called with an object containing &lt;code class=&quot;language-text&quot;&gt;data&lt;/code&gt; and &lt;code class=&quot;language-text&quot;&gt;page&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;it should store a list of character IDs.&lt;/li&gt;
&lt;li&gt;it should store a map/lookup table of the characters by their IDs for easy retrieval of single characters.&lt;/li&gt;
&lt;li&gt;it should store the &lt;code class=&quot;language-text&quot;&gt;info&lt;/code&gt; returned from the API.&lt;/li&gt;
&lt;li&gt;it should store the &lt;code class=&quot;language-text&quot;&gt;page&lt;/code&gt; in the &lt;code class=&quot;language-text&quot;&gt;info&lt;/code&gt; object.&lt;/li&gt;
&lt;/ul&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;ts&quot;&gt;&lt;pre class=&quot;language-ts&quot;&gt;&lt;code class=&quot;language-ts&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;import&lt;/span&gt; Vue &lt;span class=&quot;token keyword&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;vue&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token keyword&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; MutationTree &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;vuex&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token keyword&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; State&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; CharacterDataModel &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;./state&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; mutations&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; MutationTree&lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;State&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token function&quot;&gt;getCharactersSuccess&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;state&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; page&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; data &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; list&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token builtin&quot;&gt;number&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    data&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;results&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;forEach&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;item&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; CharacterDataModel&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
      list&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;push&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;item&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;id&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
      Vue&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token keyword&quot;&gt;set&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;state&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;characters&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;map&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; item&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;id&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; item&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    state&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;characters&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;list &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; list&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    state&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;characters&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;info &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;...&lt;/span&gt;data&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;info &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    state&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;characters&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;info&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;page &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; page&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
  &lt;span class=&quot;token comment&quot;&gt;// ...&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

&lt;span class=&quot;token keyword&quot;&gt;export&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;default&lt;/span&gt; mutations&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;Looking at the public interface of this mutation, the &lt;em&gt;input&lt;/em&gt; is an object containing &lt;code class=&quot;language-text&quot;&gt;page&lt;/code&gt; and &lt;code class=&quot;language-text&quot;&gt;data&lt;/code&gt;. The &lt;em&gt;output&lt;/em&gt; (expected result of executing this mutation) is that the &lt;code class=&quot;language-text&quot;&gt;state&lt;/code&gt; object is modified to contain the data as specified in the requirements. Similarly to the actions, the first input parameter to the mutation (&lt;code class=&quot;language-text&quot;&gt;state&lt;/code&gt;) is provided by Vue, and is not something the user of the mutation can control.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;ts&quot;&gt;&lt;pre class=&quot;language-ts&quot;&gt;&lt;code class=&quot;language-ts&quot;&gt;&lt;span class=&quot;token function&quot;&gt;describe&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;getCharactersSuccess&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token function&quot;&gt;it&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;should set the correct state values&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; state &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
      characters&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
        info&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
        list&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
        map&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
      &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; payload &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
      info&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; reqDetails&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;1&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
      results&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;
        &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
          id&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
          name&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;First&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
        &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
        &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
          id&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;2&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
          name&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;Second&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
        &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
      &lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;mutations &lt;span class=&quot;token keyword&quot;&gt;as&lt;/span&gt; &lt;span class=&quot;token builtin&quot;&gt;any&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;getCharactersSuccess&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;state&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; data&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; payload&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; page&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;1&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

    &lt;span class=&quot;token function&quot;&gt;expect&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;state&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;characters&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;list&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toEqual&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;2&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;token function&quot;&gt;expect&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;state&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;characters&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;map&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toEqual&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
      &lt;span class=&quot;token number&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
        id&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
        name&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;First&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
      &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
      &lt;span class=&quot;token number&quot;&gt;2&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
        id&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;2&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
        name&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;Second&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
      &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;token function&quot;&gt;expect&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;state&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;characters&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;info&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toEqual&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; reqDetails&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; page&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;1&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;There isn’t much variation in this mutation. It only accepts one type of data, and always modifies the state in the same way. No conditionals, no short circuiting, no default values. Therefore we only need one test case to cover this mutation.&lt;/p&gt;
&lt;p&gt;We call the mutation with a &lt;code class=&quot;language-text&quot;&gt;state&lt;/code&gt; object and an object containing &lt;code class=&quot;language-text&quot;&gt;data&lt;/code&gt; and &lt;code class=&quot;language-text&quot;&gt;page&lt;/code&gt;.
Then we check that the state contains a list of character IDs.
We check that the state contains a mapping of character IDs to characters.
We check that the state contains the &lt;code class=&quot;language-text&quot;&gt;info&lt;/code&gt; object as well as the &lt;code class=&quot;language-text&quot;&gt;page&lt;/code&gt; property.&lt;/p&gt;
&lt;p&gt;One thing to note is the use of &lt;a href=&quot;https://jestjs.io/docs/en/expect#toequalvalue&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;&lt;code class=&quot;language-text&quot;&gt;.toEqual()&lt;/code&gt;&lt;/a&gt; instead of the more common &lt;a href=&quot;https://jestjs.io/docs/en/expect#tobevalue&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;&lt;code class=&quot;language-text&quot;&gt;.toBe()&lt;/code&gt;&lt;/a&gt; assertion. The reason for this is that we want to compare the values based on their value, and not by reference. The &lt;code class=&quot;language-text&quot;&gt;.toBe()&lt;/code&gt; would use the strict comparison &lt;code class=&quot;language-text&quot;&gt;===&lt;/code&gt; to compare the two values, which means two objects containing the same sets of data &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Identity&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;would not be equal&lt;/a&gt; since they have different references. &lt;code class=&quot;language-text&quot;&gt;.toEqual()&lt;/code&gt; recursively compares all the properties of the values instead of just checking their referential identity.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;Should we mock &lt;code class=&quot;language-text&quot;&gt;Vue.set&lt;/code&gt;? If we want to be as strict as possible, then I believe you should mock it. However, in this context, &lt;code class=&quot;language-text&quot;&gt;Vue.set&lt;/code&gt; simply assigns a value to an object property, like doing &lt;code class=&quot;language-text&quot;&gt;object.a = 1;&lt;/code&gt;. For me, its presence in the code is as normal as native JavaScript methods and as such, I don’t really consider it as something that needs to be mocked, but that might just be a bias on my part. Either way, mocking it is rather easy:&lt;/p&gt;
&lt;/blockquote&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;js&quot;&gt;&lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;jest&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;mock&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;vue&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;token keyword&quot;&gt;set&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;target&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; prop&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; value&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
      target&lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;prop&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; value&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;h3 id=&quot;getter-characterlist&quot; style=&quot;position:relative;&quot;&gt;Getter: characterList&lt;/h3&gt;
&lt;p&gt;Vuex getters return a slice of the state, or data derived from the state. Getters are similar to the computed properties in Vue components in that they are cached and reactive, so they only get computed whenever the input changes, in this case the input is the state. They can either return a value or return a function.&lt;/p&gt;
&lt;p&gt;We would be looking at the &lt;code class=&quot;language-text&quot;&gt;characterList&lt;/code&gt; getter which returns a list of character data based on the list of character IDs and the mapping of character ID to character data we already have in the state, from the &lt;code class=&quot;language-text&quot;&gt;getCharactersSuccess&lt;/code&gt; mutation above.&lt;/p&gt;
&lt;p&gt;The requirements of the &lt;code class=&quot;language-text&quot;&gt;characterList&lt;/code&gt; getter are very simple:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;it takes the state as the only argument which is provided by Vue and the user wouldn’t have control over it. So using it in the vue context, the user would provide no parameter.&lt;/li&gt;
&lt;li&gt;it returns an array of character data based on the list of character IDs and character data mappings.&lt;/li&gt;
&lt;/ul&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;ts&quot;&gt;&lt;pre class=&quot;language-ts&quot;&gt;&lt;code class=&quot;language-ts&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; GetterTree &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;vuex&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token keyword&quot;&gt;import&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; State &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;./state&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; getters&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; GetterTree&lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;State&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; State&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token function&quot;&gt;characterList&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;state&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; state&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;characters&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;list&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;map&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;id&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; state&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;characters&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;map&lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;id&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
  &lt;span class=&quot;token comment&quot;&gt;// ...&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

&lt;span class=&quot;token keyword&quot;&gt;export&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;default&lt;/span&gt; getters&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;The getters are generally pure functions, so we know that the output is only dependent on the input, and there is no side effect either. Looking at the public interface of the &lt;code class=&quot;language-text&quot;&gt;characterList&lt;/code&gt; getter, it accepts one input (&lt;code class=&quot;language-text&quot;&gt;state&lt;/code&gt;) and always returns an array of zero or more character data.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;ts&quot;&gt;&lt;pre class=&quot;language-ts&quot;&gt;&lt;code class=&quot;language-ts&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; state &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  characters&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    list&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;2&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    map&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
      &lt;span class=&quot;token number&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
        x&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
      &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
      &lt;span class=&quot;token number&quot;&gt;2&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
        y&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;2&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
      &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token function&quot;&gt;describe&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;characterList&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token function&quot;&gt;it&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;should return list of character data&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;token function&quot;&gt;expect&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;getters &lt;span class=&quot;token keyword&quot;&gt;as&lt;/span&gt; &lt;span class=&quot;token builtin&quot;&gt;any&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;characterList&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;state&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toEqual&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;
      &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
        x&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
      &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
      &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
        y&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;2&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
      &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;One test case is sufficient for this getter. We pass a &lt;code class=&quot;language-text&quot;&gt;state&lt;/code&gt; object as a parameter to &lt;code class=&quot;language-text&quot;&gt;characterList&lt;/code&gt;, and we assert that the returned value of the getter is an array of character data matching the data in the state.&lt;/p&gt;
&lt;h2 id=&quot;conclusion&quot; style=&quot;position:relative;&quot;&gt;Conclusion&lt;/h2&gt;
&lt;p&gt;In this post, we illustrated the approaches of unit testing using more examples. We also introduced the application we would be using as a case study in this series and looked at how we can write tests for the various parts of the store.
From the tests we have written so far, we see how following the testing approach and considering the public interface (inputs and outputs) of the piece of code helps us to define the test cases without unnecessarily testing internal implementations that make the tests harder to maintain.&lt;/p&gt;
&lt;p&gt;As a reminder, you should get your tests to fail at least once to ensure you aren’t getting false positives and that your tests are functioning properly.&lt;/p&gt;
&lt;p&gt;In the next post, we would dive into writing unit tests for Vue components and see how we can make use of the vue test utils to make the testing process of vue components easier.&lt;/p&gt;
&lt;p&gt;For reference, the source code of the application we are working with is located here: &lt;a href=&quot;https://github.com/imolorhe/rick-morty&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;https://github.com/imolorhe/rick-morty&lt;/a&gt;&lt;/p&gt;</content:encoded></item><item><title><![CDATA[Unit testing JavaScript Applications - Part 1]]></title><description><![CDATA[As developers, a lot of the time we find writing unit tests for our application to be a daunting task, which we would prefer not to do…]]></description><link>https://www.xkoji.dev/blog/unit-testing-javascript-applications-part-1/</link><guid isPermaLink="false">https://www.xkoji.dev/blog/unit-testing-javascript-applications-part-1/</guid><pubDate>Sat, 16 May 2020 13:55:44 GMT</pubDate><content:encoded>&lt;p&gt;As developers, a lot of the time we find writing unit tests for our application to be a daunting task, which we would prefer not to do. Considering that writing tests doesn’t really have any business value either, it becomes even easier to postpone writing the tests for your application till much later. However we know that writing tests have a number of benefits that become more apparent as the project grows in complexity and the team working on the product increases in size, or goes through an organizational restructuring. In this series, we would be looking at writing unit tests for JavaScript applications.&lt;/p&gt;
&lt;h2 id=&quot;what-is-unit-testing&quot; style=&quot;position:relative;&quot;&gt;What is Unit Testing?&lt;/h2&gt;
&lt;p&gt;Unit testing refers to writing tests that verify that a &lt;em&gt;piece (unit) of code&lt;/em&gt; behaves as the author intended, giving a set of inputs in all conceivable conditions. Unit tests always tests the piece of code in &lt;em&gt;isolation&lt;/em&gt;, without any external factors or dependencies influencing the code. When thinking about unit tests, it helps to think about the unit of code in terms of a function. &lt;/p&gt;
&lt;p&gt;&lt;span
      class=&quot;gatsby-resp-image-wrapper&quot;
      style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 974px;&quot;
    &gt;
      &lt;span
    class=&quot;gatsby-resp-image-background-image&quot;
    style=&quot;padding-bottom: 36.66666666666667%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAHCAYAAAAIy204AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAvUlEQVQoz42RyQqEQAxE/f+P8+hRD6IILqC4IC418wIZbFGYQNmVmK5Ud0f6xnme8oD/g3uv5xHkOA41TaNxHPUU101vNecRZNs2tW2rYRhMdJ5nreuqvu9/NUAO6HcReOBwWRZlWWaFfd/NrYsxJM9zxXGsJElUVZXquhZ7fAh54JAJXdeZCM5omqbJgCAiZVnayrUAehHgf5qmlgd3SBRFYa5w6NMY5q4B/HpEOG6DI/PxZtb7Jb/F0yMRH2MLJA6r4/0rAAAAAElFTkSuQmCC&apos;); background-size: cover; display: block;&quot;
  &gt;&lt;/span&gt;
  &lt;img
        class=&quot;gatsby-resp-image-image&quot;
        alt=&quot;function&quot;
        title=&quot;function&quot;
        src=&quot;/static/53e57f5b07fbe4457dbe8b16ced5ec6c/09e48/simple-function.png&quot;
        srcset=&quot;/static/53e57f5b07fbe4457dbe8b16ced5ec6c/5a46d/simple-function.png 300w,
/static/53e57f5b07fbe4457dbe8b16ced5ec6c/0a47e/simple-function.png 600w,
/static/53e57f5b07fbe4457dbe8b16ced5ec6c/09e48/simple-function.png 974w&quot;
        sizes=&quot;(max-width: 974px) 100vw, 974px&quot;
        style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot;
        loading=&quot;lazy&quot;
      /&gt;
    &lt;/span&gt;&lt;/p&gt;
&lt;p&gt;In its simplest form, a function accepts a set of &lt;em&gt;inputs&lt;/em&gt;, performs some &lt;em&gt;computation&lt;/em&gt; based on the inputs, and returns some &lt;em&gt;output&lt;/em&gt;. Let’s create a simple function called &lt;code class=&quot;language-text&quot;&gt;sum()&lt;/code&gt; which takes two numbers and returns their sum as an output.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;js&quot;&gt;&lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;token function-variable function&quot;&gt;sum&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;a&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; b&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; a &lt;span class=&quot;token operator&quot;&gt;+&lt;/span&gt; b&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

&lt;span class=&quot;gatsby-highlight-code-line&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; output &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;sum&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;2&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;3&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token comment&quot;&gt;// expected output -&gt; 5&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;From my perspective as a user of this function, I don’t really care &lt;em&gt;how&lt;/em&gt; the &lt;code class=&quot;language-text&quot;&gt;sum()&lt;/code&gt; function decides to compute the output. All I care about is that: if I provide 2 and 3 as the inputs, &lt;code class=&quot;language-text&quot;&gt;sum()&lt;/code&gt; should return 5 always, no matter how many times I run it. The &lt;code class=&quot;language-text&quot;&gt;sum&lt;/code&gt; function could have been written a different way to compute the output, but as long as the output is the same, then the function still does what it was intended to do.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;js&quot;&gt;&lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;// a random contrived implementation of sum&lt;/span&gt;
&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;token function-variable function&quot;&gt;sum&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;a&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; b&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token keyword&quot;&gt;let&lt;/span&gt; output &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; a&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; isAdd &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; b &lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  b &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; Math&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;abs&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;b&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

  &lt;span class=&quot;token keyword&quot;&gt;while&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;b &lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;token keyword&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;b &lt;span class=&quot;token operator&quot;&gt;&gt;=&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
      &lt;span class=&quot;token keyword&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;isAdd&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
        output&lt;span class=&quot;token operator&quot;&gt;++&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
      &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;else&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
        output&lt;span class=&quot;token operator&quot;&gt;--&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
      &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
      b&lt;span class=&quot;token operator&quot;&gt;--&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;else&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
      &lt;span class=&quot;token keyword&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;isAdd&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
        output &lt;span class=&quot;token operator&quot;&gt;+=&lt;/span&gt; b&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
      &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;else&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
        output &lt;span class=&quot;token operator&quot;&gt;-=&lt;/span&gt; b&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
      &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
      b &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
  &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; output&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;

&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; output &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;sum&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;2&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;3&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token comment&quot;&gt;// expected output -&gt; 5&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;Unit testing comes with a number of benefits as well:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;you can change (refactor) your code confidently when you have solid unit tests that cover all the requirements in place.&lt;/li&gt;
&lt;li&gt;you end up writing better code as a result of writing unit tests. Some approaches to coding are very problematic when you need to write unit tests. In order to write tests, you need to write modular code with clear explicit dependencies (more on this later).&lt;/li&gt;
&lt;li&gt;your code is more reliable as it has tests covering the requirements.&lt;/li&gt;
&lt;li&gt;the test cases provide some form of living documentation about your code. Test cases describe the various requirements your code handles, and gives examples of how to use your code in form of the tests.&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id=&quot;pure-functions&quot; style=&quot;position:relative;&quot;&gt;Pure Functions&lt;/h2&gt;
&lt;p&gt;When a function always returns the same output everytime for a given set of inputs, and it doesn’t change anything else outside the scope of the input and output, then that function is called a &lt;a href=&quot;https://www.wikiwand.com/en/Pure_function&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;pure function&lt;/a&gt;. However if the function changes anything else (like mutating a referenced variable, performing I/O operations e.g. saving file to disk, making a network request, modifying the DOM), the function is no longer pure. The reason why this concept is important is because it is easy to predict the behavior of a pure function when using it than an impure function. Also it is very easy to test pure functions without much complexity or knowledge of the internal workings of the function. Let’s write a &lt;code class=&quot;language-text&quot;&gt;sum()&lt;/code&gt; function that is not pure to compare with our previous versions.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;js&quot;&gt;&lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;// Already loaded https://cdn.jsdelivr.net/npm/add@latest/index.min.js on the page&lt;/span&gt;
&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;token function-variable function&quot;&gt;sum&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;a&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; b&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; window&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;add&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt; a&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; b &lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; output &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;sum&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;2&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;3&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token comment&quot;&gt;// expected output -&gt; 5&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;This function still returns the correct output, but it relies on an external function (&lt;code class=&quot;language-text&quot;&gt;window.add()&lt;/code&gt;) existing for it to function. The function no longer depends on only the input parameters, but it also depends on the existence of an external factor, and that the external factor actually returns the right output.&lt;/p&gt;
&lt;p&gt;If we want to unit test this function, remember we need to test the function in isolation. When running a test for the &lt;code class=&quot;language-text&quot;&gt;sum()&lt;/code&gt; function, we don’t want to be executing code in the &lt;code class=&quot;language-text&quot;&gt;window.add()&lt;/code&gt; function. We only want to execute and test the code in the unit of code we are testing, which is the &lt;code class=&quot;language-text&quot;&gt;sum()&lt;/code&gt; function in this case. For us to write the unit test, we would need to &lt;em&gt;mock&lt;/em&gt; the &lt;code class=&quot;language-text&quot;&gt;window.add()&lt;/code&gt; dependency.&lt;/p&gt;
&lt;h2 id=&quot;mocking-dependencies&quot; style=&quot;position:relative;&quot;&gt;Mocking Dependencies&lt;/h2&gt;
&lt;p&gt;Mocking simply refers to replacing the actual implementation of a piece of code with a fake one that resembles the original one, and behaves like the original one. This is usually done to avoid executing the actual piece of code while trying to test another piece of code. In the example above, we want to test the &lt;code class=&quot;language-text&quot;&gt;sum()&lt;/code&gt; function without executing code in the &lt;code class=&quot;language-text&quot;&gt;window.add()&lt;/code&gt; function. This adds a major complexity to the unit testing process because you would need to rely on specialized tools and testing frameworks to be able to mock dependencies easily. This can be one of the most painful parts about writing unit tests, if the code structure for your piece of code depends on several external factors, especially if those external factors aren’t passed into the function as input parameters, but instead are accessed directly from a global scope from inside the piece of code.&lt;/p&gt;
&lt;p&gt;In the impure &lt;code class=&quot;language-text&quot;&gt;sum()&lt;/code&gt; function example, the function access &lt;code class=&quot;language-text&quot;&gt;add()&lt;/code&gt; directly from the global &lt;code class=&quot;language-text&quot;&gt;window&lt;/code&gt; object. Like we mentioned above, this increases the complexity of the tests. A way to make it easier to mock the dependency would be by passing the dependencies as input parameters as well before using them.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;js&quot;&gt;&lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;// Already loaded https://cdn.jsdelivr.net/npm/add@latest/index.min.js on the page&lt;/span&gt;
&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;token function-variable function&quot;&gt;sum&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;windowObj&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; a&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; b&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; windowObj&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;add&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt; a&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; b &lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; output &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;sum&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;window&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;2&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;3&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token comment&quot;&gt;// expected output -&gt; 5&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;Here, we are passing the &lt;code class=&quot;language-text&quot;&gt;window&lt;/code&gt; object as one of the parameters of the &lt;code class=&quot;language-text&quot;&gt;sum()&lt;/code&gt; function. Now it is easier to mock the &lt;code class=&quot;language-text&quot;&gt;window&lt;/code&gt; object, by just creating a fake object that behaves the same way as the &lt;code class=&quot;language-text&quot;&gt;window&lt;/code&gt; object.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;js&quot;&gt;&lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;token function-variable function&quot;&gt;sum&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;windowObj&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; a&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; b&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; windowObj&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;add&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt; a&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; b &lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

&lt;span class=&quot;gatsby-highlight-code-line&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; w &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gatsby-highlight-code-line&quot;&gt;  &lt;span class=&quot;token function&quot;&gt;add&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;arr&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gatsby-highlight-code-line&quot;&gt;    &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; arr&lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;+&lt;/span&gt; arr&lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gatsby-highlight-code-line&quot;&gt;  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gatsby-highlight-code-line&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; output &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;sum&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;w&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;2&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;3&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token comment&quot;&gt;// expected output -&gt; 5&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;As you can see, we created a fake object that also has an &lt;code class=&quot;language-text&quot;&gt;add&lt;/code&gt; function. Now we have easily mocked the &lt;code class=&quot;language-text&quot;&gt;window&lt;/code&gt; object. Also we were able to make the &lt;code class=&quot;language-text&quot;&gt;sum()&lt;/code&gt; function pure again, since it only depends on its inputs and doesn’t modify anything outside of itself. Of course if the &lt;code class=&quot;language-text&quot;&gt;add()&lt;/code&gt; function used is an impure function, that would also make the &lt;code class=&quot;language-text&quot;&gt;sum()&lt;/code&gt; function impure, since purity of a function is transitive.&lt;/p&gt;
&lt;h2 id=&quot;whitebox-vs-blackbox-testing&quot; style=&quot;position:relative;&quot;&gt;Whitebox vs Blackbox Testing&lt;/h2&gt;
&lt;p&gt;Generally speaking, there are two categories of testing: whitebox and blackbox testing. Whitebox testing refers to tests that depend on the tester having knowledge about the way the piece of code being tested works internally. Blackbox testing is the opposite. The person writing the tests can be unaware about the way the piece of software functions internally. &lt;/p&gt;
&lt;p&gt;Unit testing is an example of whitebox testing and is usually written by the author of the code. As the author, you are usually aware of all the conditions, and logical flows of execution within the code, and so you are able to write tests with all possible combinations of inputs to test all the execution flows. Remember the definition of unit testing: &lt;em&gt;writing tests that verify that a piece (unit) of code behaves as the author intended, giving a set of inputs in &lt;strong&gt;all conceivable&lt;/strong&gt; conditions&lt;/em&gt;. You want to make sure all the execution flows are tested to avoid any unexpected behaviors when the piece of code is being executed in a production environment. Also note that I said “all conceivable conditions”. This is because there can be an infinite combination of inputs that your piece of code would be executed with, and your test cases might not cover all these combinations. There could be some edge cases that aren’t obvious when writing the code and which aren’t covered by the tests but would show up when the code is in use. Usually when that happens, you should add a new test case to cover such a case.&lt;/p&gt;
&lt;p&gt;When writing unit tests, I like to think about the piece of code from both the blackbox (how the users would see it) and the whitebox perspectives:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;em&gt;I think from a blackbox perspective when&lt;/em&gt; determining the &lt;em&gt;inputs&lt;/em&gt; and &lt;em&gt;outputs&lt;/em&gt; of the piece of code to test, and I use that to create the test cases.&lt;/li&gt;
&lt;li&gt;&lt;em&gt;I think from a whitebox perspective when&lt;/em&gt; I need to mock dependencies, since we need knowledge about the internals of the piece of code in order to be able to mock the dependencies.&lt;/li&gt;
&lt;li&gt;&lt;em&gt;I think from a whitebox perspective when&lt;/em&gt; I want to cover all the logical execution flows within the piece of code, and I use this to add extra test cases, making the test suite robust.&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id=&quot;what-should-i-know-about-tdd&quot; style=&quot;position:relative;&quot;&gt;What should I know about TDD?&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;https://www.wikiwand.com/en/Test-driven_development&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;Test Driven Development (TDD)&lt;/a&gt; is an approach to development that involves defining test cases, and using those test cases to define what code needs to be written. According to Wikipedia,&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;Test-driven development (TDD) is a software development process that relies on the repetition of a very short development cycle: requirements are turned into very specific test cases, then the code is improved so that the tests pass. This is opposed to software development that allows code to be added that is not proven to meet requirements.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;This means you end up writing your tests while writing the actual code, and you no longer have writing tests as a chore that you need to do at a later time. It also makes writing tests much easier, since you write your code with the tests in mind.&lt;/p&gt;
&lt;p&gt;One of the benefits of the test driven approach is that it helps you write much better code with much cleaner code structure.&lt;/p&gt;
&lt;p&gt;Following the TDD approach involves &lt;a href=&quot;https://blog.cleancoder.com/uncle-bob/2014/12/17/TheCyclesOfTDD.html&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;three laws&lt;/a&gt; that you need to follow:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;You must write a failing test before you write any production code.&lt;/li&gt;
&lt;li&gt;You must not write more of a test than is sufficient to fail, or fail to compile.&lt;/li&gt;
&lt;li&gt;You must not write more production code than is sufficient to make the currently failing test pass.&lt;/li&gt;
&lt;/ol&gt;
&lt;h3 id=&quot;red-green-refactor-cycle&quot; style=&quot;position:relative;&quot;&gt;Red-Green-Refactor Cycle&lt;/h3&gt;
&lt;p&gt;The three laws of TDD gets expanded further into the &lt;a href=&quot;https://www.jamesshore.com/Blog/Red-Green-Refactor.html&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;&lt;strong&gt;Red-Green-Refactor&lt;/strong&gt;&lt;/a&gt; cycle. This basically says:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Create a unit test that fails (&lt;emphasis style=&quot;color: var(--red);&quot;&gt;RED&lt;/emphasis&gt;)&lt;/li&gt;
&lt;li&gt;Write production code that makes that test pass (&lt;emphasis style=&quot;color: var(--green);&quot;&gt;GREEN&lt;/emphasis&gt;)&lt;/li&gt;
&lt;li&gt;Clean up the mess you just made (&lt;emphasis style=&quot;color: var(--yellow);&quot;&gt;REFACTOR&lt;/emphasis&gt;)&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;This is the cycle that defines the test-driven approach. You follow the cycle, then rinse and repeat.&lt;/p&gt;
&lt;h3 id=&quot;a-tdd-example&quot; style=&quot;position:relative;&quot;&gt;A TDD Example&lt;/h3&gt;
&lt;p&gt;Let’s illustrate this using the &lt;code class=&quot;language-text&quot;&gt;sum()&lt;/code&gt; function again.&lt;/p&gt;
&lt;h4 id=&quot;step&quot; style=&quot;position:relative;&quot;&gt;Step&lt;/h4&gt;
&lt;p&gt;We can start by adding a test that verifies that the &lt;code class=&quot;language-text&quot;&gt;sum()&lt;/code&gt; function runs without errors.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;js&quot;&gt;&lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;gatsby-highlight-code-line&quot;&gt;&lt;span class=&quot;token function&quot;&gt;expect&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;sum&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;not&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toThrow&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt; &lt;span class=&quot;token comment&quot;&gt;// expect sum() to not throw an error&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;&lt;em&gt;&lt;strong&gt;Note:&lt;/strong&gt; We add this test before importing, or even creating the sum function.&lt;/em&gt;&lt;/p&gt;
&lt;h4 id=&quot;outcome&quot; style=&quot;position:relative;&quot;&gt;Outcome&lt;/h4&gt;
&lt;p&gt;&lt;strong style=&quot;color: var(--red);&quot;&gt;[RED]&lt;/strong&gt; As expected the test would fail, since it can’t find the &lt;code class=&quot;language-text&quot;&gt;sum()&lt;/code&gt; function.&lt;/p&gt;
&lt;h4 id=&quot;step-1&quot; style=&quot;position:relative;&quot;&gt;Step&lt;/h4&gt;
&lt;p&gt;We create the &lt;code class=&quot;language-text&quot;&gt;sum()&lt;/code&gt; function to make the test pass.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;js&quot;&gt;&lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;gatsby-highlight-code-line&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;token function-variable function&quot;&gt;sum&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;a&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; b&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;token function&quot;&gt;expect&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;sum&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;not&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toThrow&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt; &lt;span class=&quot;token comment&quot;&gt;// expect sum() to not throw an error&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;h4 id=&quot;outcome-1&quot; style=&quot;position:relative;&quot;&gt;Outcome&lt;/h4&gt;
&lt;p&gt;&lt;strong style=&quot;color: var(--green);&quot;&gt;[GREEN]&lt;/strong&gt; Now the test would pass since the function should execute without throwing any errors.&lt;/p&gt;
&lt;p&gt;&lt;em&gt;&lt;strong&gt;Note&lt;/strong&gt;: At this point, there is no refactoring that can be done. So we skip and go back to the &lt;strong&gt;Red&lt;/strong&gt; phase&lt;/em&gt;&lt;/p&gt;
&lt;h4 id=&quot;step-2&quot; style=&quot;position:relative;&quot;&gt;Step&lt;/h4&gt;
&lt;p&gt;We add a new test case to check that the expected output of &lt;code class=&quot;language-text&quot;&gt;sum(0, 0)&lt;/code&gt; is &lt;code class=&quot;language-text&quot;&gt;0&lt;/code&gt;.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;js&quot;&gt;&lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;token function-variable function&quot;&gt;sum&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;a&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; b&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

&lt;span class=&quot;token function&quot;&gt;expect&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;sum&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;not&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toThrow&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt; &lt;span class=&quot;token comment&quot;&gt;// expect sum(0, 0) to not throw an error&lt;/span&gt;
&lt;span class=&quot;gatsby-highlight-code-line&quot;&gt;&lt;span class=&quot;token function&quot;&gt;expect&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;sum&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toBe&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt; &lt;span class=&quot;token comment&quot;&gt;// expect output to be 0&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;h4 id=&quot;outcome-2&quot; style=&quot;position:relative;&quot;&gt;Outcome&lt;/h4&gt;
&lt;p&gt;&lt;strong style=&quot;color: var(--red);&quot;&gt;[RED]&lt;/strong&gt; Once again, the test would fail since &lt;code class=&quot;language-text&quot;&gt;sum()&lt;/code&gt; returns &lt;code class=&quot;language-text&quot;&gt;undefined&lt;/code&gt;, and wouldn’t return 0.&lt;/p&gt;
&lt;h4 id=&quot;step-3&quot; style=&quot;position:relative;&quot;&gt;Step&lt;/h4&gt;
&lt;p&gt;We update the &lt;code class=&quot;language-text&quot;&gt;sum()&lt;/code&gt; function to return the expected output&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;js&quot;&gt;&lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;gatsby-highlight-code-line&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;token function-variable function&quot;&gt;sum&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;a&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; b&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;token function&quot;&gt;expect&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;sum&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;not&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toThrow&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt; &lt;span class=&quot;token comment&quot;&gt;// expect sum(0, 0) to not throw an error&lt;/span&gt;
&lt;span class=&quot;token function&quot;&gt;expect&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;sum&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toBe&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt; &lt;span class=&quot;token comment&quot;&gt;// expect output to be 0&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;h4 id=&quot;outcome-3&quot; style=&quot;position:relative;&quot;&gt;Outcome&lt;/h4&gt;
&lt;p&gt;&lt;strong style=&quot;color: var(--green);&quot;&gt;[GREEN]&lt;/strong&gt; Now the tests would pass since the output is 0. I’m sure you can already tell that this isn’t solving all possible cases.&lt;/p&gt;
&lt;h4 id=&quot;step-4&quot; style=&quot;position:relative;&quot;&gt;Step&lt;/h4&gt;
&lt;p&gt;Let’s add another test case to check that &lt;code class=&quot;language-text&quot;&gt;sum(2, 0)&lt;/code&gt; is &lt;code class=&quot;language-text&quot;&gt;2&lt;/code&gt;.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;js&quot;&gt;&lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;token function-variable function&quot;&gt;sum&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;a&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; b&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

&lt;span class=&quot;token function&quot;&gt;expect&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;sum&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;not&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toThrow&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt; &lt;span class=&quot;token comment&quot;&gt;// expect sum(0, 0) to not throw an error&lt;/span&gt;
&lt;span class=&quot;token function&quot;&gt;expect&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;sum&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toBe&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt; &lt;span class=&quot;token comment&quot;&gt;// expect output to be 0&lt;/span&gt;
&lt;span class=&quot;gatsby-highlight-code-line&quot;&gt;&lt;span class=&quot;token function&quot;&gt;expect&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;sum&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;2&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toBe&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;2&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt; &lt;span class=&quot;token comment&quot;&gt;// expect output to be 2&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;h4 id=&quot;outcome-4&quot; style=&quot;position:relative;&quot;&gt;Outcome&lt;/h4&gt;
&lt;p&gt;&lt;strong style=&quot;color: var(--red);&quot;&gt;[RED]&lt;/strong&gt; The test fails as expected, since the function always returns 0.&lt;/p&gt;
&lt;h4 id=&quot;step-5&quot; style=&quot;position:relative;&quot;&gt;Step&lt;/h4&gt;
&lt;p&gt;Let’s add a condition to handle the &lt;code class=&quot;language-text&quot;&gt;2&lt;/code&gt; input.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;js&quot;&gt;&lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;token function-variable function&quot;&gt;sum&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;a&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; b&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;gatsby-highlight-code-line&quot;&gt;  &lt;span class=&quot;token keyword&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;a &lt;span class=&quot;token operator&quot;&gt;===&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;2&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gatsby-highlight-code-line&quot;&gt;    &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;2&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gatsby-highlight-code-line&quot;&gt;  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/span&gt;  &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

&lt;span class=&quot;token function&quot;&gt;expect&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;sum&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;not&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toThrow&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt; &lt;span class=&quot;token comment&quot;&gt;// expect sum(0, 0) to not throw an error&lt;/span&gt;
&lt;span class=&quot;token function&quot;&gt;expect&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;sum&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toBe&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt; &lt;span class=&quot;token comment&quot;&gt;// expect output to be 0&lt;/span&gt;
&lt;span class=&quot;token function&quot;&gt;expect&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;sum&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;2&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toBe&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;2&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt; &lt;span class=&quot;token comment&quot;&gt;// expect output to be 2&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;h4 id=&quot;outcome-5&quot; style=&quot;position:relative;&quot;&gt;Outcome&lt;/h4&gt;
&lt;p&gt;&lt;strong style=&quot;color: var(--green);&quot;&gt;[GREEN]&lt;/strong&gt;The test passes again given the new case. At this point we might choose to refactor the code a bit.&lt;/p&gt;
&lt;h4 id=&quot;step-6&quot; style=&quot;position:relative;&quot;&gt;Step&lt;/h4&gt;
&lt;p&gt;Let’s refactor &lt;code class=&quot;language-text&quot;&gt;sum&lt;/code&gt; to return the value of &lt;code class=&quot;language-text&quot;&gt;a&lt;/code&gt;.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;js&quot;&gt;&lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;token function-variable function&quot;&gt;sum&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;a&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; b&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;gatsby-highlight-code-line&quot;&gt;  &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; a&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

&lt;span class=&quot;token function&quot;&gt;expect&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;sum&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;not&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toThrow&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt; &lt;span class=&quot;token comment&quot;&gt;// expect sum(0, 0) to not throw an error&lt;/span&gt;
&lt;span class=&quot;token function&quot;&gt;expect&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;sum&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toBe&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt; &lt;span class=&quot;token comment&quot;&gt;// expect output to be 0&lt;/span&gt;
&lt;span class=&quot;token function&quot;&gt;expect&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;sum&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;2&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toBe&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;2&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt; &lt;span class=&quot;token comment&quot;&gt;// expect output to be 2&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;h4 id=&quot;outcome-6&quot; style=&quot;position:relative;&quot;&gt;Outcome&lt;/h4&gt;
&lt;p&gt;&lt;strong style=&quot;color: var(--yellow);&quot;&gt;[REFACTOR]&lt;/strong&gt; The &lt;code class=&quot;language-text&quot;&gt;sum()&lt;/code&gt; function has been improved and the tests still pass. We go on with another test case.&lt;/p&gt;
&lt;h4 id=&quot;step-7&quot; style=&quot;position:relative;&quot;&gt;Step&lt;/h4&gt;
&lt;p&gt;Let’s add a case for &lt;code class=&quot;language-text&quot;&gt;sum(2, 3)&lt;/code&gt;.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;js&quot;&gt;&lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;token function-variable function&quot;&gt;sum&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;a&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; b&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; a&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

&lt;span class=&quot;token function&quot;&gt;expect&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;sum&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;not&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toThrow&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt; &lt;span class=&quot;token comment&quot;&gt;// expect sum(0, 0) to not throw an error&lt;/span&gt;
&lt;span class=&quot;token function&quot;&gt;expect&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;sum&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toBe&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt; &lt;span class=&quot;token comment&quot;&gt;// expect output to be 0&lt;/span&gt;
&lt;span class=&quot;token function&quot;&gt;expect&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;sum&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;2&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toBe&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;2&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt; &lt;span class=&quot;token comment&quot;&gt;// expect output to be 2&lt;/span&gt;
&lt;span class=&quot;gatsby-highlight-code-line&quot;&gt;&lt;span class=&quot;token function&quot;&gt;expect&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;sum&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;2&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;3&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toBe&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;5&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt; &lt;span class=&quot;token comment&quot;&gt;// expect output to be 5&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;h4 id=&quot;outcome-7&quot; style=&quot;position:relative;&quot;&gt;Outcome&lt;/h4&gt;
&lt;p&gt;&lt;strong style=&quot;color: var(--red);&quot;&gt;[RED]&lt;/strong&gt; The test fails. The function doesn’t consider the second argument.&lt;/p&gt;
&lt;h4 id=&quot;step-8&quot; style=&quot;position:relative;&quot;&gt;Step&lt;/h4&gt;
&lt;p&gt;We update the &lt;code class=&quot;language-text&quot;&gt;sum()&lt;/code&gt; function to sum both values.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;js&quot;&gt;&lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;token function-variable function&quot;&gt;sum&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;a&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; b&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;gatsby-highlight-code-line&quot;&gt;  &lt;span class=&quot;token keyword&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;b&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gatsby-highlight-code-line&quot;&gt;    &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; a &lt;span class=&quot;token operator&quot;&gt;+&lt;/span&gt; b&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;gatsby-highlight-code-line&quot;&gt;  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/span&gt;  &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; a&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

&lt;span class=&quot;token function&quot;&gt;expect&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;sum&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;not&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toThrow&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt; &lt;span class=&quot;token comment&quot;&gt;// expect sum(0, 0) to not throw an error&lt;/span&gt;
&lt;span class=&quot;token function&quot;&gt;expect&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;sum&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toBe&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt; &lt;span class=&quot;token comment&quot;&gt;// expect output to be 0&lt;/span&gt;
&lt;span class=&quot;token function&quot;&gt;expect&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;sum&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;2&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toBe&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;2&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt; &lt;span class=&quot;token comment&quot;&gt;// expect output to be 2&lt;/span&gt;
&lt;span class=&quot;token function&quot;&gt;expect&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;sum&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;2&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;3&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toBe&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;5&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt; &lt;span class=&quot;token comment&quot;&gt;// expect output to be 5&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;h4 id=&quot;outcome-8&quot; style=&quot;position:relative;&quot;&gt;Outcome&lt;/h4&gt;
&lt;p&gt;&lt;strong style=&quot;color: var(--green);&quot;&gt;[GREEN]&lt;/strong&gt; All green again! We now sum &lt;code class=&quot;language-text&quot;&gt;a&lt;/code&gt; and &lt;code class=&quot;language-text&quot;&gt;b&lt;/code&gt; when &lt;code class=&quot;language-text&quot;&gt;b&lt;/code&gt; has a value.&lt;/p&gt;
&lt;h4 id=&quot;step-9&quot; style=&quot;position:relative;&quot;&gt;Step&lt;/h4&gt;
&lt;p&gt;Looking at the &lt;code class=&quot;language-text&quot;&gt;sum()&lt;/code&gt; function, we can make some improvements. Since we only consider number parameters, the only time &lt;code class=&quot;language-text&quot;&gt;b&lt;/code&gt; will be falsy is if the &lt;code class=&quot;language-text&quot;&gt;b&lt;/code&gt; is zero. We also know that adding zero to anything returns the same thing. So if b is 0, &lt;code class=&quot;language-text&quot;&gt;a + b&lt;/code&gt; would still be &lt;code class=&quot;language-text&quot;&gt;a&lt;/code&gt;.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;js&quot;&gt;&lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;token function-variable function&quot;&gt;sum&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;a&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; b&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;gatsby-highlight-code-line&quot;&gt;  &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; a &lt;span class=&quot;token operator&quot;&gt;+&lt;/span&gt; b&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

&lt;span class=&quot;token function&quot;&gt;expect&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;sum&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;not&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toThrow&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt; &lt;span class=&quot;token comment&quot;&gt;// expect sum(0, 0) to not throw an error&lt;/span&gt;
&lt;span class=&quot;token function&quot;&gt;expect&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;sum&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toBe&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt; &lt;span class=&quot;token comment&quot;&gt;// expect output to be 0&lt;/span&gt;
&lt;span class=&quot;token function&quot;&gt;expect&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;sum&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;2&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toBe&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;2&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt; &lt;span class=&quot;token comment&quot;&gt;// expect output to be 2&lt;/span&gt;
&lt;span class=&quot;token function&quot;&gt;expect&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;sum&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;2&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;3&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toBe&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token number&quot;&gt;5&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt; &lt;span class=&quot;token comment&quot;&gt;// expect output to be 5&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;h4 id=&quot;outcome-9&quot; style=&quot;position:relative;&quot;&gt;Outcome&lt;/h4&gt;
&lt;p&gt;&lt;strong style=&quot;color: var(--yellow);&quot;&gt;[REFACTOR]&lt;/strong&gt; All the tests are sill passing! There’s no other requirements of the &lt;code class=&quot;language-text&quot;&gt;sum()&lt;/code&gt; function, so we are done!&lt;/p&gt;
&lt;p&gt;While this is an extremely simple example, the process is universally applicable to more complex cases. One thing you would have noticed is that we could easily refactor the code confidently because we already have test cases that test the requirements of the function. If the refactoring breaks any of those requirements, we would immediately know, and can change it back.&lt;/p&gt;
&lt;h3 id=&quot;tdd-with-ui-components&quot; style=&quot;position:relative;&quot;&gt;TDD with UI Components&lt;/h3&gt;
&lt;p&gt;I haven’t worked with the TDD approach for very long but I enjoy using it mostly for functions with clear requirements upfront. I also don’t enjoy using it for writing UI components like Vue.js components.
I prefer to create the component and get it working as expected before writing the tests for them. This is due to the fact that UI components require time to be spent getting the UI to look like the designs, and not just adding content to the DOM, but also ensuring the pixels, spacing, colors, typography, etc. are just right.&lt;/p&gt;
&lt;p&gt;Because of all this, I haven’t had much success following the TDD approach when writing tests for vue components. However, it works fine for other aspects of the application, like the actions, mutations, getters, etc.&lt;/p&gt;
&lt;h2 id=&quot;conclusion&quot; style=&quot;position:relative;&quot;&gt;Conclusion&lt;/h2&gt;
&lt;p&gt;In this post, we introduced the concept of unit testing, what it is about, and how we should approach writing unit tests for our code. Unit tests don’t have to be something you find difficult to write. Figuring out the things that make writing unit tests difficult is the first step required to writing useful, robust unit test suites.&lt;/p&gt;
&lt;p&gt;In the next post, we would be going in-depth into unit testing, and we would be looking at how we can write unit tests for a Vue.js application. Don’t forget to subscribe to get notified when the next post is released.&lt;/p&gt;</content:encoded></item><item><title><![CDATA[Working with file uploads using Altair GraphQL]]></title><description><![CDATA[It’s no news that GraphQL is still the new kid on the block and has come to stay (don’t worry REST APIs still have their place 😄). As the…]]></description><link>https://www.xkoji.dev/blog/working-with-file-uploads-using-altair-graphql/</link><guid isPermaLink="false">https://www.xkoji.dev/blog/working-with-file-uploads-using-altair-graphql/</guid><pubDate>Wed, 06 May 2020 21:21:04 GMT</pubDate><content:encoded>&lt;p&gt;It’s no news that GraphQL is still the new kid on the block and has come to stay (don’t worry REST APIs still have their place 😄). As the GraphQL community grows and the specification is developed, there remains a few questions yet to be answered. One of such questions was about file uploads.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;&lt;em&gt;How do we upload files using GraphQL?&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;&lt;em&gt;Are there any guidelines for uploading files using GraphQL?&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;Well there isn’t one from the &lt;a href=&quot;https://github.com/graphql/graphql-spec&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;GraphQL team&lt;/a&gt; yet. So it is still left to you to define how you would want to handle file (binary data) uploads. You could always encode the data as base64 and pass the encoded string along to the server. You could also upload the files to a cloud storage service (or any other storage service) from the client and just pass the URL returned from the storage service through a GraphQL mutation. Whichever option you choose, it’s not ideal to work that way, especially considering that traditional methods of posting data to the server (submitting a form, sending a form data to an API) are more efficient in handling file uploads. So why would GraphQL be less efficient?&lt;/p&gt;
&lt;p&gt;I can only assume, but I guess that was the question Jayden had in mind when he created the &lt;a href=&quot;https://github.com/jaydenseric/graphql-multipart-request-spec&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;GraphQL multipart request specification&lt;/a&gt;. From the spec readme, the specification is:&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;An interoperable multipart form field structure for GraphQL requests, used by various file upload client/server implementations.&lt;/p&gt;
&lt;p&gt;It’s possible to implement:&lt;/p&gt;
&lt;p&gt;Nesting files anywhere within operations (usually in variables).&lt;/p&gt;
&lt;p&gt;Operation batching.&lt;/p&gt;
&lt;p&gt;File deduplication.&lt;/p&gt;
&lt;p&gt;File upload streams in resolvers.&lt;/p&gt;
&lt;p&gt;Aborting file uploads in resolvers.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;TL;DR, the specification enables you to upload files using the multipart format, which was designed for sending binary data through HTTP from the client to the server. There are several &lt;a href=&quot;https://github.com/jaydenseric/graphql-multipart-request-spec#implementations&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;library implementations&lt;/a&gt; of this GraphQL spec already in Node.js, PHP, Python, Go and Ruby, so should be easy to implement without having to create it from scratch.
&lt;a href=&quot;https://altair.sirmuel.design/&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;Altair GraphQL Client&lt;/a&gt; (from v2.0.5) now allows you to upload files to your server if you have implemented the GraphQL multipart request spec in your server. It supports uploading both single files and an array of files (using the dot notation e.g. for an array named &lt;code class=&quot;language-text&quot;&gt;fileList&lt;/code&gt;, you define the files as &lt;code class=&quot;language-text&quot;&gt;fileList.0&lt;/code&gt;, &lt;code class=&quot;language-text&quot;&gt;fileList.1&lt;/code&gt;, &lt;code class=&quot;language-text&quot;&gt;fileList.2&lt;/code&gt; and so on).&lt;/p&gt;
&lt;p&gt;&lt;span
      class=&quot;gatsby-resp-image-wrapper&quot;
      style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 1200px;&quot;
    &gt;
      &lt;span
    class=&quot;gatsby-resp-image-background-image&quot;
    style=&quot;padding-bottom: 57.00000000000001%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAIAAADwazoUAAAACXBIWXMAAAsSAAALEgHS3X78AAABL0lEQVQoz5WSa07DMBCEc6Ymdvzc+BEncdKWCgkJOEMF4hxcmokjqlLgR6WxFHvn212vU3FhG6GYtL6fIE1R2WC6/kY4h8p36vfD++fry/lYAWbCGPLWRXK9NI4JDVM/LHFYfIJmCqPQXdNqiAvDpdGuk5Yqhr3qbJhCypoCwjsmNfWnfDiMc0p5SLlPWRjPtVt5rmqudkzVTFUlEzFKigKy7LgscDzm/cO0gJ82WLu6tXUhL6rQc9OqWhCSAStZJdpeew6jj1MXMYsV3qI/4K0OroqWSiLTcG0oAnBx+lZW1tf8F4xV5jx3YdxEfkDla/jfyljWpc0U0gwf+DvhYoUD2H2VtUuI4SXPbx+PT88YPqYA5nIRl5a/4VbR9vrQkPf4VWBi6/vZKxFObkjoCzl1nqQMb0wuAAAAAElFTkSuQmCC&apos;); background-size: cover; display: block;&quot;
  &gt;&lt;/span&gt;
  &lt;img
        class=&quot;gatsby-resp-image-image&quot;
        alt=&quot;Adding file for upload (single file)&quot;
        title=&quot;Adding file for upload (single file)&quot;
        src=&quot;/static/da9a8e9e6bb790432e84790776b57f75/c1b63/singlefile.png&quot;
        srcset=&quot;/static/da9a8e9e6bb790432e84790776b57f75/5a46d/singlefile.png 300w,
/static/da9a8e9e6bb790432e84790776b57f75/0a47e/singlefile.png 600w,
/static/da9a8e9e6bb790432e84790776b57f75/c1b63/singlefile.png 1200w,
/static/da9a8e9e6bb790432e84790776b57f75/d61c2/singlefile.png 1800w,
/static/da9a8e9e6bb790432e84790776b57f75/97a96/singlefile.png 2400w&quot;
        sizes=&quot;(max-width: 1200px) 100vw, 1200px&quot;
        style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot;
        loading=&quot;lazy&quot;
      /&gt;
    &lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;span
      class=&quot;gatsby-resp-image-wrapper&quot;
      style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 1200px;&quot;
    &gt;
      &lt;span
    class=&quot;gatsby-resp-image-background-image&quot;
    style=&quot;padding-bottom: 57.00000000000001%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAIAAADwazoUAAAACXBIWXMAAAsSAAALEgHS3X78AAABd0lEQVQoz3WS207DMAyG90qwNk2yHJtDm2RtBwMJuENC4gaJF0CIe54K7cX424GYEEhu2rr+bP92V4TKinLChHG99WmjHJctTqG9MGE+F4Pny6mD38bn97vbp3FFqKiopDpq3zNpq2azJlwa70N2sdhQ2lh029GNWTcCXxFfM8GNZlKtarxQQVQkXAODneOjdkOZtl1xHu30LiQqDOHqmHqJ4euaL5Xh+vYeYXRexv3FsJtiyjH5kJiwNdeIrE4i58pnFQVwCkNeHi53eSwx9TEf4Ua6WlimJOFf/GoJbbmwa4Ks6ELgAZrzuJ+20xBTDMm6HvA5gLlHXjXflXHZWVjGVDBwmLJRmnAxXd4Mu6u+DF0Gj4GddvcDS+2xJBiXDiSyKBu2ZRrzmALaTs7/D29MoBAj9P3D47i7xsqRwoYs2067Xi/7/xvG9KAQUhumPg6Hl9c3wiR+hlkChIDHGcrfcMMVbsdRGdehLILmzTN5YgqeXyTsE/88oYBzgn6hAAAAAElFTkSuQmCC&apos;); background-size: cover; display: block;&quot;
  &gt;&lt;/span&gt;
  &lt;img
        class=&quot;gatsby-resp-image-image&quot;
        alt=&quot;Adding files for upload (list of files)&quot;
        title=&quot;Adding files for upload (list of files)&quot;
        src=&quot;/static/f12257fd1c2f773f795e1ea38329ef6f/c1b63/multiplefiles.png&quot;
        srcset=&quot;/static/f12257fd1c2f773f795e1ea38329ef6f/5a46d/multiplefiles.png 300w,
/static/f12257fd1c2f773f795e1ea38329ef6f/0a47e/multiplefiles.png 600w,
/static/f12257fd1c2f773f795e1ea38329ef6f/c1b63/multiplefiles.png 1200w,
/static/f12257fd1c2f773f795e1ea38329ef6f/d61c2/multiplefiles.png 1800w,
/static/f12257fd1c2f773f795e1ea38329ef6f/97a96/multiplefiles.png 2400w&quot;
        sizes=&quot;(max-width: 1200px) 100vw, 1200px&quot;
        style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot;
        loading=&quot;lazy&quot;
      /&gt;
    &lt;/span&gt;&lt;/p&gt;
&lt;p&gt;You add your files in the variables pane, and the files are added to the request as variables when the request is sent to the server.&lt;/p&gt;
&lt;p&gt;&lt;em&gt;&lt;strong&gt;Note:&lt;/strong&gt; The files don’t persist if you reload Altair, so you would have to select them again.&lt;/em&gt;&lt;/p&gt;
&lt;h4 id=&quot;feedback&quot; style=&quot;position:relative;&quot;&gt;Feedback&lt;/h4&gt;
&lt;p&gt;Do you like this feature? Do you think it can be improved? Did you find a bug? Let me know what you think. Create &lt;a href=&quot;https://github.com/imolorhe/altair/issues/new/choose&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;an issue&lt;/a&gt; on Github or add a comment to &lt;a href=&quot;https://github.com/imolorhe/altair/issues/537&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;this issue&lt;/a&gt;.&lt;/p&gt;</content:encoded></item><item><title><![CDATA[Local vs global npm dependencies]]></title><description><![CDATA[Working on Node.js based applications usually requires you to install dependencies that are needed to provide functionality within the…]]></description><link>https://www.xkoji.dev/blog/local-vs-global-npm-dependencies/</link><guid isPermaLink="false">https://www.xkoji.dev/blog/local-vs-global-npm-dependencies/</guid><pubDate>Mon, 04 May 2020 19:49:11 GMT</pubDate><content:encoded>&lt;p&gt;Working on Node.js based applications usually requires you to install dependencies that are needed to provide functionality within the project, either for development or as part of the project logic at runtime. A number of the development dependencies provide a command line interface for interacting with the package and making use of the functionality for things like scaffolding, compiling, bundling, publishing, etc.&lt;/p&gt;
&lt;p&gt;For these CLI-based dependencies, the author usually recommends installing the packages globally, for ease of use. However there are benefits to installing these dependencies locally instead of globally, which might not be immediately obvious.&lt;/p&gt;
&lt;h3 id=&quot;all-project-dependencies-declared-in-a-single-place&quot; style=&quot;position:relative;&quot;&gt;All project dependencies declared in a single place&lt;/h3&gt;
&lt;p&gt;Whenever you install local dependencies, they are listed in the package.json file which acts as a manifest showing all the information about a package, including the dependencies it needs. This means if you install your global dependencies locally, it becomes obvious what all the dependencies of the project are.&lt;/p&gt;
&lt;p&gt;For instance, assuming you have a project that uses typescript, you can install the typescript CLI package globally (&lt;code class=&quot;language-text&quot;&gt;yarn global add typescript&lt;/code&gt;) and call &lt;code class=&quot;language-text&quot;&gt;tsc path/to/project&lt;/code&gt; whenever you want to compile the code. Now you might even add a script in the package.json file for this, so it’s more obvious to you and any other people working on the project what command to run to compile.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;json&quot;&gt;&lt;pre class=&quot;language-json&quot;&gt;&lt;code class=&quot;language-json&quot;&gt;&lt;span class=&quot;token property&quot;&gt;&quot;scripts&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;&quot;compile&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;tsc .&quot;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;However imagine you decide to work on this project on another computer, or some other person tries to work on the same project in their own machine. After installing the dependencies (&lt;code class=&quot;language-text&quot;&gt;yarn install&lt;/code&gt;), running the compile script would fail on the first attempt because yarn can’t find the &lt;code class=&quot;language-text&quot;&gt;tsc&lt;/code&gt; command. You then need to install typescript globally on that machine as well to continue working on the project. Now imagine typescript now has several major updates and now the latest version is not backward compatible with the version of typescript used in the project initially. You would get another error and would have to start troubleshooting to figure out what exact version of typescript you need to install to get this working.&lt;/p&gt;
&lt;p&gt;On the other hand, installing the &lt;code class=&quot;language-text&quot;&gt;typescript&lt;/code&gt; package as a local dependency (&lt;code class=&quot;language-text&quot;&gt;yarn add --dev typescript&lt;/code&gt;) would mean, any one that runs &lt;code class=&quot;language-text&quot;&gt;yarn install&lt;/code&gt; in that project would also install typescript automatically (and the right version as well), and the compile script would just work as expected.&lt;/p&gt;
&lt;h3 id=&quot;multiple-projects-with-different-versions-on-same-machine&quot; style=&quot;position:relative;&quot;&gt;Multiple projects with different versions on same machine&lt;/h3&gt;
&lt;p&gt;As a developer working on Node.js based projects, you likely have multiple projects on your local machine that you work on at different times. Assuming several of these projects use typescript, and you install typescript globally. You worked on project X a couple of months back when typescript was at version 2.7.1. You haven’t worked on it in a while.&lt;/p&gt;
&lt;p&gt;You get started working on another project Y that uses the latest stack features (react hooks, latest typescript esnext features, bells and whistles). Project Y needs at least typescript@3.8.3 for it to compile properly. You try compiling the project and you get an error because typescript doesn’t understand the &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;nullish coalescing operator&lt;/a&gt;. Now you’re wondering why this project worked in your colleague’s machine but isn’t working on yours. After a couple of hours debugging, you realize your global typescript version is at 2.7.1. You decide to update the global typescript package. Project Y compiles! That’s great news.&lt;/p&gt;
&lt;p&gt;Things move along quickly and now you have some tasks to implement in Project X. You open it up in your editor, make the changes and compile. Now there are several typescript linting errors that weren’t there before. You only changed 2 lines of code but typescript isn’t compiling because of errors in an entirely different file you didn’t touch. After several hours of debugging, you realize that you are using typescript@3.8.3 but the project was built with typescript@2.7.1. You now have two choices: forcefully fix the code and update it to use the latest version of typescript, or you downgrade typescript to 2.7.1. You quickly figure out that none of these options is good enough 😞&lt;/p&gt;
&lt;p&gt;Imagine the same scenario but you are using a locally installed typescript dependency in both Project X and Project Y. You wouldn’t have any of the issue above because each project would have its own version of typescript to work with, without affecting the other project.&lt;/p&gt;
&lt;h2 id=&quot;using-local-dependencies-from-cli&quot; style=&quot;position:relative;&quot;&gt;Using local dependencies from CLI&lt;/h2&gt;
&lt;p&gt;One of the advantages you would usually see with global dependencies over local dependencies is that: you can just call the command of a global dependency from the command line, but you can’t do the same with local dependencies. Using the previous example of typescript. If you installed typescript globally, you can just run the following from anywhere and it would work:&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;bash&quot;&gt;&lt;pre class=&quot;language-bash&quot;&gt;&lt;code class=&quot;language-bash&quot;&gt;&lt;span class=&quot;command-line-prompt&quot;&gt;&lt;span data-user=imolorhe data-host=localhost&gt;&lt;/span&gt;&lt;/span&gt;tsc /path/to/project&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;You can’t do the same with local dependencies. However if you manage your dependencies with &lt;a href=&quot;https://yarnpkg.com/&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;yarn&lt;/a&gt;, you can run a local command in a similar way with yarn. The equivalent of that command would be:&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;bash&quot;&gt;&lt;pre class=&quot;language-bash&quot;&gt;&lt;code class=&quot;language-bash&quot;&gt;&lt;span class=&quot;command-line-prompt&quot;&gt;&lt;span data-user=imolorhe data-host=localhost&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;yarn&lt;/span&gt; tsc &lt;span class=&quot;token builtin class-name&quot;&gt;.&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;However, you need to run this command from within the project working directory for yarn to be able to find the local dependency to run.&lt;/p&gt;
&lt;p&gt;In my personal opinion, this is a relatively small issue that can be worked around compared to the benefits of local dependencies.&lt;/p&gt;
&lt;p&gt;You also have the option of adding the command as a script in the package.json file, in which case you can run it with both yarn and npm.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;json&quot;&gt;&lt;pre class=&quot;language-json&quot;&gt;&lt;code class=&quot;language-json&quot;&gt;&lt;span class=&quot;token property&quot;&gt;&quot;scripts&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;&quot;compile&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;tsc&quot;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;You can run it using &lt;code class=&quot;language-text&quot;&gt;yarn compile&lt;/code&gt; or &lt;code class=&quot;language-text&quot;&gt;npm run compile&lt;/code&gt;. This would execute the &lt;code class=&quot;language-text&quot;&gt;tsc&lt;/code&gt; command from the local dependencies of the project, if available.&lt;/p&gt;
&lt;h2 id=&quot;when-to-use-global-dependencies&quot; style=&quot;position:relative;&quot;&gt;When to use global dependencies&lt;/h2&gt;
&lt;p&gt;While I generally recommend using local dependencies, I have to say that there are some cases where you need global dependencies.&lt;/p&gt;
&lt;h3 id=&quot;scaffolding-the-project&quot; style=&quot;position:relative;&quot;&gt;Scaffolding the project&lt;/h3&gt;
&lt;p&gt;When you need a package to scaffold a project, you don’t have a project yet and so no package.json file to have local dependencies in. In such cases, you need to install the packages as a global dependency. Examples of these are: angular CLI for scaffolding angular projects (&lt;code class=&quot;language-text&quot;&gt;ng new project-name&lt;/code&gt;), create-react-app for scaffolding react projects (&lt;code class=&quot;language-text&quot;&gt;create-react-app project-name&lt;/code&gt;), vue CLI for scaffolding Vue.js applications (&lt;code class=&quot;language-text&quot;&gt;vue create project-name&lt;/code&gt;), and the many others. These commands create the project directory as well as creating the package.json file and installing the dependencies for you. Usually they would install the dependencies locally as well for scaffolding other part of the project (like components, routing, styles, etc) so you don’t depend on the global dependency for that.&lt;/p&gt;
&lt;h3 id=&quot;running-task-specific-project-agnostic-commands&quot; style=&quot;position:relative;&quot;&gt;Running task-specific, project-agnostic commands&lt;/h3&gt;
&lt;p&gt;There are a number of dependencies that are used to perform tasks that are not specific to any project. These commands are similar in function to the other commands you have available to you in the command line. They provide utilities that can be used in a wide range of cases. For example, starting up a simple local server with &lt;a href=&quot;https://www.npmjs.com/package/serve&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;&lt;code class=&quot;language-text&quot;&gt;serve&lt;/code&gt;&lt;/a&gt;, getting help about other commands with &lt;a href=&quot;https://www.npmjs.com/package/tldr&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;&lt;code class=&quot;language-text&quot;&gt;tldr&lt;/code&gt;&lt;/a&gt;, and many others. These commands provide general utility functionality and as such are better off installed globally.&lt;/p&gt;
&lt;h2 id=&quot;bonus-tip-using-npx-or-yarn-dlx-for-one-time-global-packages&quot; style=&quot;position:relative;&quot;&gt;Bonus tip: using &lt;code class=&quot;language-text&quot;&gt;npx&lt;/code&gt; or &lt;code class=&quot;language-text&quot;&gt;yarn dlx&lt;/code&gt; for one-time global packages&lt;/h2&gt;
&lt;p&gt;Like I mentioned above, there are times when you need to install packages globally. However, there are some packages that you don’t need to keep installed always, especially if you just need to run the command once as opposed to using it frequently. Examples of such packages would be the scaffolding packages and some others (like starting up a local server). Depending on the kind of tasks you work on, these are not packages you might need to have installed on your machine always. More often than not, you just scaffold a project one time and proceed with developing the project without needing the scaffolding functionality afterwards.&lt;/p&gt;
&lt;p&gt;For these cases, you can make use of the &lt;code class=&quot;language-text&quot;&gt;npx&lt;/code&gt; command (provided by npm), or the &lt;code class=&quot;language-text&quot;&gt;yarn dlx&lt;/code&gt; command (available in &lt;strong&gt;yarn v2&lt;/strong&gt;, not yarn v1). For example if you wanted to scaffold a react app, you can run &lt;code class=&quot;language-text&quot;&gt;npx create-react-app project-name&lt;/code&gt; or &lt;code class=&quot;language-text&quot;&gt;yarn dlx create-react-app project-name&lt;/code&gt; and this would temporarily download the &lt;code class=&quot;language-text&quot;&gt;create-react-app&lt;/code&gt; dependency and execute the command to scaffold the project, without installing the package globally in your machine.&lt;/p&gt;
&lt;h3 id=&quot;conclusion&quot; style=&quot;position:relative;&quot;&gt;Conclusion&lt;/h3&gt;
&lt;p&gt;Preferring locally installed dependencies over global dependencies provide a number of benefits that would be helpful as the number of projects and complexity of the projects increases. Also consider executing the dependencies without installing them using &lt;code class=&quot;language-text&quot;&gt;npx&lt;/code&gt; or &lt;code class=&quot;language-text&quot;&gt;yarn dlx&lt;/code&gt;.&lt;/p&gt;</content:encoded></item><item><title><![CDATA[Automate scaffolding processes with Plop]]></title><description><![CDATA[I recently published a post detailing how I created this blog using Gatsby to get up and running in little time. Gatsby as a static site…]]></description><link>https://www.xkoji.dev/blog/automate-scaffolding-processes-with-plop/</link><guid isPermaLink="false">https://www.xkoji.dev/blog/automate-scaffolding-processes-with-plop/</guid><pubDate>Sun, 03 May 2020 22:11:45 GMT</pubDate><content:encoded>&lt;p&gt;I recently published a &lt;a href=&quot;https://www.xkoji.dev/blog/set-up-a-blog-with-gatsby-github-pages-and-github-actions/&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;post detailing how I created this blog using Gatsby&lt;/a&gt; to get up and running in little time. Gatsby as a static site generator does a lot of useful things for you through the rich plugin ecosystem that it has, enabling you do things like creating a blog like this one. However the process of creating a new blog post isn’t as easy as opening a new URL. You have to create the markdown files and directories yourself manually. This might be okay at first but quickly becomes monotonous, and you know what they say:&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;If a task doesn’t require critical thinking, doesn’t require human input, monotonous, repetitive,&lt;/p&gt;
&lt;p&gt;Why not automate it?&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;This quote aligns very much with most of us developers, and that’s exactly what we are going to do! 😁&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;&lt;a href=&quot;https://plopjs.com/&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;Plop&lt;/a&gt;&lt;/strong&gt; is a tool that was built with the intention of solving these kinds of problems. Quoting the plop site,&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;Plop is a little tool that saves you time and helps your team build new files with consistency.&lt;/p&gt;
&lt;p&gt;Plop generates code when you want, how you want, and can be changed whenever you want.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;&lt;strong&gt;“What about &lt;a href=&quot;https://yeoman.io/&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;yeoman&lt;/a&gt;?”&lt;/strong&gt;, you might ask. Yeoman looks to be tuned towards scaffolding entire web apps as opposed to scaffolding little bits of the app. Although yeoman generators can also generate the little bits of the app as well, those come as added benefits to the full app generator. Also yeoman generators need to be used as an extra node package that would be installed as a dependency (either by publishing it or locally by &lt;a href=&quot;https://classic.yarnpkg.com/en/docs/cli/link/&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;linking it&lt;/a&gt;) before it can be used. That’s a lot more setup than is required. On the other hand, plop only really needs a &lt;code class=&quot;language-text&quot;&gt;plopfile.js&lt;/code&gt; file at the root of your project, and for plop to be installed as a dependency.&lt;/p&gt;
&lt;p&gt;Here I’ll describe how I used plop to automate scaffolding a new blog post.&lt;/p&gt;
&lt;p&gt;First let’s define the specifics of what we need:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;The posts are stored in &lt;code class=&quot;language-text&quot;&gt;content/blog/&lt;/code&gt; with directories describing the post &lt;em&gt;slug&lt;/em&gt;, and an &lt;code class=&quot;language-text&quot;&gt;index.md&lt;/code&gt; file. For example, &lt;code class=&quot;language-text&quot;&gt;content/blog/hello-world/index.md&lt;/code&gt; &lt;em&gt;You can check the &lt;a href=&quot;https://www.xkoji.dev/blog/set-up-a-blog-with-gatsby-github-pages-and-github-actions/&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;previous post&lt;/a&gt; to see how we set this up or you can follow along using &lt;a href=&quot;https://www.gatsbyjs.org/starters/gatsbyjs/gatsby-starter-blog/&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;this Gatsby starter&lt;/a&gt;.&lt;/em&gt;&lt;/li&gt;
&lt;li&gt;Each post written in markdown contains frontmatter used to describe the post and specify metadata about the post like the title, date, tags and the author. All of that data needs to be provided by the user except perhaps the date, since you would usually use today’s date there. That’s pretty much all the information we need to have a new post.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;To get started with plop, make sure you install it using &lt;code class=&quot;language-text&quot;&gt;yarn add --dev plop&lt;/code&gt;. The plop docs recommend installing plop globally in your system, but I would recommend installing it locally since it is a dependency of one project, and not necessarily required to be a global package. &lt;em&gt;For this post, I would be assuming you have plop installed as a local dependency.&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;Now create a &lt;code class=&quot;language-text&quot;&gt;plopfile.js&lt;/code&gt; file with the following content:&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;js&quot;&gt;&lt;pre class=&quot;language-js&quot;&gt;&lt;code class=&quot;language-js&quot;&gt;module&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;exports &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;
  &lt;span class=&quot;token comment&quot;&gt;/** @type {import(&apos;plop&apos;).NodePlopAPI} */&lt;/span&gt;
  plop
&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  plop&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;setHelper&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;slug&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token parameter&quot;&gt;val&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;!&lt;/span&gt;val &lt;span class=&quot;token operator&quot;&gt;?&lt;/span&gt; val &lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; val&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toLowerCase&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;replace&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token regex&quot;&gt;/[^A-Za-z0-9_]/g&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;-&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  plop&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;setHelper&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;yamlCommaToList&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token parameter&quot;&gt;val&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;!&lt;/span&gt;val &lt;span class=&quot;token operator&quot;&gt;?&lt;/span&gt; val &lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token template-string&quot;&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;[ &lt;/span&gt;&lt;span class=&quot;token interpolation&quot;&gt;&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;${&lt;/span&gt;val&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;split&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;,&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;map&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;_&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; _&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;trim&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;join&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;, &apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt; ]&lt;/span&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

  plop&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;setGenerator&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;post&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    description&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;New blog post&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    prompts&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
      type&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;input&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
      name&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;postTitle&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
      message&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;Title of blog post:&apos;&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
      type&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;input&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
      name&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;twitterHandle&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
      message&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;Twitter handle of author:&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
      type&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;input&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
      name&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;tags&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
      message&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;Specify list of tags:&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    actions&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
      type&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;add&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
      path&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;content/blog/{{slug postTitle}}/index.md&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
      templateFile&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;.plop/templates/post-md.hbs&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
      &lt;span class=&quot;token function-variable function&quot;&gt;data&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
        &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; date &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;new&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;Date&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
        &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
          todayDate&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; date&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toISOString&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
        &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
      &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;For the most part, this is straightforward what is going on here (you should check the &lt;a href=&quot;https://plopjs.com/documentation/&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;docs&lt;/a&gt; for some more detailed documentation on the API). I’ll explain what is going on here.&lt;/p&gt;
&lt;p&gt;Plopfiles are simple node “modules” that export a function. This function takes the &lt;code class=&quot;language-text&quot;&gt;plop&lt;/code&gt; object, giving access to the plop API.
&lt;code class=&quot;language-text&quot;&gt;plop.setHelper()&lt;/code&gt; provides an interface to register a &lt;a href=&quot;http://handlebarsjs.com/api-reference/runtime.html#handlebars-registerhelper-name-helper&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;handlebars helper&lt;/a&gt;. That’s right - Plop uses &lt;a href=&quot;http://handlebarsjs.com/&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;handlebars&lt;/a&gt; as the templating engine for scaffolding. Knowledge of handlebars wouldn’t be necessary for the basic scaffolding needs but for more logic or conditionals, you would need to learn a bit of the handlebars syntax. For our case though, we only need to know the &lt;code class=&quot;language-text&quot;&gt;{{ data }}&lt;/code&gt; double syntax which is used for interpolating data in templates, and the &lt;code class=&quot;language-text&quot;&gt;{{ helperfn data }}&lt;/code&gt; helper syntax. Here, &lt;code class=&quot;language-text&quot;&gt;helperfn&lt;/code&gt; is a handlebars helper function that accepts &lt;code class=&quot;language-text&quot;&gt;data&lt;/code&gt; and returns a value. This is mostly how you would encapsulate logic within your templates. We have defined two helpers: &lt;code class=&quot;language-text&quot;&gt;slug&lt;/code&gt; which takes a string and transforms it to a human-readable, URL-compliant, kebab-case form (e.g. &lt;code class=&quot;language-text&quot;&gt;Hello world&lt;/code&gt; becomes &lt;code class=&quot;language-text&quot;&gt;hello-world&lt;/code&gt;), and &lt;code class=&quot;language-text&quot;&gt;yamlCommaToList&lt;/code&gt; which takes a string containing of list of values separated by commas, and returns a valid yaml array to represent the same data in yaml format (e.g. &lt;code class=&quot;language-text&quot;&gt;Hello, world, Here,I,come&lt;/code&gt; becomes &lt;code class=&quot;language-text&quot;&gt;[ Hello, world, Here, I, come ]&lt;/code&gt;).&lt;/p&gt;
&lt;p&gt;Next we define the generator using &lt;code class=&quot;language-text&quot;&gt;plop.setGenerator()&lt;/code&gt;. We specify the name of the generator (used to specify which generator to initiate) and a configuration object. In the configuration, we specify the &lt;code class=&quot;language-text&quot;&gt;description&lt;/code&gt; of the generator, &lt;code class=&quot;language-text&quot;&gt;prompts&lt;/code&gt;, and &lt;code class=&quot;language-text&quot;&gt;actions&lt;/code&gt;.
The &lt;strong&gt;prompts&lt;/strong&gt; define the list of different inputs we would ask from the user when scaffolding. These prompt configs are passed to &lt;a href=&quot;https://github.com/SBoudrias/Inquirer.js&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;inquirer.js&lt;/a&gt; which plop uses to accept the user input. For a list of valid prompt options, you would need to check the docs for inquirer.js.
The &lt;strong&gt;actions&lt;/strong&gt; define the list of things that plop would do with the provided input. You can find a list of the predefined actions &lt;a href=&quot;https://plopjs.com/documentation/#built-in-actions&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;here&lt;/a&gt; which do things like adding files, directories, modifying files, appending content to the end of files. You can also provide custom actions if you need them. Here, we have defined an action to add a new file in the specified path (notice we use the slug helper here to set the slug in the file path) and using a handlebars &lt;code class=&quot;language-text&quot;&gt;templateFile&lt;/code&gt; (we will look at the content of the template shortly). We also specified a &lt;code class=&quot;language-text&quot;&gt;data&lt;/code&gt; function. This function returns an object that is merged with the data provided by the user when rendering the template. Here we add the &lt;code class=&quot;language-text&quot;&gt;todayDate&lt;/code&gt; data for use in the template file.&lt;/p&gt;
&lt;p&gt;This is the content of the &lt;code class=&quot;language-text&quot;&gt;post-md.hbs&lt;/code&gt; used as the template for the newly generated post markdown file.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;yaml&quot;&gt;&lt;pre class=&quot;language-yaml&quot;&gt;&lt;code class=&quot;language-yaml&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;---&lt;/span&gt;
&lt;span class=&quot;token key atrule&quot;&gt;title&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; postTitle &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token key atrule&quot;&gt;date&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; todayDate &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token key atrule&quot;&gt;tags&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; yamlCommaToList tags &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token key atrule&quot;&gt;twitterHandle&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;{{ twitterHandle }}&apos;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;---&lt;/span&gt;

New blog post begins&lt;span class=&quot;token tag&quot;&gt;!&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;That is pretty much everything you need. You can test out the plop scaffolding by running &lt;code class=&quot;language-text&quot;&gt;yarn plop&lt;/code&gt; at the root of your project.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;bash&quot;&gt;&lt;pre class=&quot;language-bash&quot;&gt;&lt;code class=&quot;language-bash&quot;&gt;&lt;span class=&quot;command-line-prompt&quot;&gt;&lt;span data-user=imolorhe data-host=localhost&gt;&lt;/span&gt;&lt;span data-user=imolorhe data-host=localhost&gt;&lt;/span&gt;&lt;span data-user=imolorhe data-host=localhost&gt;&lt;/span&gt;&lt;span data-user=imolorhe data-host=localhost&gt;&lt;/span&gt;&lt;/span&gt;? Title of blog post: asdfghjk
? Twitter handle of author: imolorhe
? Specify list of tags: twitter, linkedin, social
✔  ++ /content/blog/asdfghjk/index.md&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;This would run the locally installed plop package. When you run plop without specifying the &lt;code class=&quot;language-text&quot;&gt;--plopfile&lt;/code&gt; in the command, plop looks for the &lt;code class=&quot;language-text&quot;&gt;plopfile.js&lt;/code&gt; file at the root of the project, which is where we have added ours.
It should prompt you to provide the post title, author twitter handle, and list of tags. You should then see the generated file &lt;code class=&quot;language-text&quot;&gt;content/blog/asdfghjk/index.md&lt;/code&gt; in the project containing the rendered post template.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;yaml&quot;&gt;&lt;pre class=&quot;language-yaml&quot;&gt;&lt;code class=&quot;language-yaml&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;---&lt;/span&gt;
&lt;span class=&quot;token key atrule&quot;&gt;title&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; asdfghjk
&lt;span class=&quot;token key atrule&quot;&gt;date&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token datetime number&quot;&gt;2020-05-04T00:05:04.669Z&lt;/span&gt;
&lt;span class=&quot;token key atrule&quot;&gt;tags&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt; twitter&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; linkedin&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; social &lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;
&lt;span class=&quot;token key atrule&quot;&gt;twitterHandle&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;imolorhe&apos;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;---&lt;/span&gt;

New blog post begins&lt;span class=&quot;token tag&quot;&gt;!&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;For convenience and visibility of the feature, you can add a new script in the &lt;code class=&quot;language-text&quot;&gt;package.json&lt;/code&gt; file to run plop. It is easier for people that are new to your project to know that you use plop for scaffolding if they see it in your list of package.json scripts.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;json&quot;&gt;&lt;pre class=&quot;language-json&quot;&gt;&lt;code class=&quot;language-json&quot;&gt;  &lt;span class=&quot;token property&quot;&gt;&quot;scripts&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;token property&quot;&gt;&quot;plop&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;yarn plop&quot;&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;h3 id=&quot;conclusion&quot; style=&quot;position:relative;&quot;&gt;Conclusion&lt;/h3&gt;
&lt;p&gt;While I used plop to generate a simple file for a blog post, you can use plop for much more scaffolding with the different options available to you. The dynamic nature of the plop actions, allow for performing several other tasks, including async actions (like fetching some content from some API). Now you don’t have to keep repeating those tasks. Instead, you could spend about half an hour (or a bit more) setting up a simple plop-based process automation, sit back and enjoy! 😄&lt;/p&gt;
&lt;p&gt;✌🏾&lt;/p&gt;</content:encoded></item><item><title><![CDATA[Set up a blog with Gatsby, GitHub pages and GitHub actions]]></title><description><![CDATA[DISCLAIMER: This tutorial requires a bit of knowledge working with Git, and GitHub pages. This is my first post on my new blog! How exciting…]]></description><link>https://www.xkoji.dev/blog/set-up-a-blog-with-gatsby-github-pages-and-github-actions/</link><guid isPermaLink="false">https://www.xkoji.dev/blog/set-up-a-blog-with-gatsby-github-pages-and-github-actions/</guid><pubDate>Mon, 27 Apr 2020 00:00:00 GMT</pubDate><content:encoded>&lt;blockquote&gt;
&lt;p&gt;DISCLAIMER: This tutorial requires a bit of knowledge working with &lt;a href=&quot;https://www.atlassian.com/git/tutorials/install-git&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;Git&lt;/a&gt;, and &lt;a href=&quot;https://pages.github.com/&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;GitHub pages&lt;/a&gt;.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;This is my first post on my new blog! How exciting! Creating this blog was an interesting process for me since I decided to use Gatsby for it. While I had created a &lt;a href=&quot;https://www.gatsbyjs.org/packages/gatsby-plugin-altair-graphql/&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;gatsby plugin&lt;/a&gt; before, I hadn’t actually built anything with gatsby. Starting this new blog was an opportunity to change that.&lt;/p&gt;
&lt;p&gt;For my setup, I decided to start off with hosting the blog on &lt;a href=&quot;https://pages.github.com/&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;GitHub pages&lt;/a&gt;. &lt;a href=&quot;https://github.com/features/actions&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;GitHub actions&lt;/a&gt; made sense as the perfect tool for continuous deployment of the site, which also happened to be the first time I am using GitHub actions.&lt;/p&gt;
&lt;p&gt;After a couple of hours spent figuring out how to properly setup everything, I finally had the blog live and running at &lt;a href=&quot;https://xkojimedia.github.io/&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;xkojimedia.github.io&lt;/a&gt; with a minimal template.&lt;/p&gt;
&lt;p&gt;Here I would go over how I was able to setup everything.&lt;/p&gt;
&lt;h3 id=&quot;what-is-gatsby-and-why-should-i-be-using-it&quot; style=&quot;position:relative;&quot;&gt;What is Gatsby and why should I be using it?&lt;/h3&gt;
&lt;p&gt;Quoting from their site,&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;Gatsby is a blazing fast modern site generator for React.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;That covers the basic cases where you would want to use Gatsby. However, given the rich plugin ecosystem that is available to, and created by the Gatsby community, you can use Gatsby for a whole lot more use cases, like a blog, ecommerce platformm, etc. It is also built with the best practices in mind for the best user experience, including optional offline support for PWAs.&lt;/p&gt;
&lt;p&gt;The development experience while working with Gatsby is also great. There are several starter repos to help get you started quickly using Gatsby. The one I would be using is &lt;a href=&quot;https://www.gatsbyjs.org/starters/gatsbyjs/gatsby-starter-blog/&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;gatsby-starter-blog&lt;/a&gt;. I chose it since it is one of the most popular starters for creating blogs with Gatsby.&lt;/p&gt;
&lt;h3 id=&quot;setting-things-up&quot; style=&quot;position:relative;&quot;&gt;Setting things up&lt;/h3&gt;
&lt;p&gt;First, make sure that you have the latest version of node installed (Gatsby aims to support any node version that hasn’t reached it’s &lt;em&gt;End of Life&lt;/em&gt; status, but it is always safer to just use the latest version and not have to check if your node version is too old). &lt;/p&gt;
&lt;p&gt;Run &lt;code class=&quot;language-text&quot;&gt;node -v&lt;/code&gt; in a terminal to see which version of Node.js you have.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;bash&quot;&gt;&lt;pre class=&quot;language-bash&quot;&gt;&lt;code class=&quot;language-bash&quot;&gt;&lt;span class=&quot;command-line-prompt&quot;&gt;&lt;span data-user=imolorhe data-host=localhost&gt;&lt;/span&gt;&lt;span data-user=imolorhe data-host=localhost&gt;&lt;/span&gt;&lt;/span&gt;node -v
v12.16.2&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;Next, install the gatsby CLI package globally on your machine, to enable you run gatsby commands.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;bash&quot;&gt;&lt;pre class=&quot;language-bash&quot;&gt;&lt;code class=&quot;language-bash&quot;&gt;&lt;span class=&quot;command-line-prompt&quot;&gt;&lt;span data-user=imolorhe data-host=localhost&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;npm&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;install&lt;/span&gt; -g gatsby-cli&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;Once gatsby-cli is installed, create a new gatsby project using the &lt;a href=&quot;https://github.com/gatsbyjs/gatsby-starter-blog&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;gatsby-starter-blog&lt;/a&gt; starter, and call it whatever you would like. For the sake of this tutorial, we would call it &lt;strong&gt;my-blog&lt;/strong&gt;.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;bash&quot;&gt;&lt;pre class=&quot;language-bash&quot;&gt;&lt;code class=&quot;language-bash&quot;&gt;&lt;span class=&quot;command-line-prompt&quot;&gt;&lt;span data-user=imolorhe data-host=localhost&gt;&lt;/span&gt;&lt;/span&gt;gatsby new my-blog https://github.com/gatsbyjs/gatsby-starter-blog&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;This would create a &lt;strong&gt;my-blog&lt;/strong&gt; directory with the contents of the gatsby-starter-blog repo and install the dependencies.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;Note: It removes the .git directory from the new project, so the project isn’t a repository pointing to the starter. So no need for you to look for that.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;Once the process is completed, you can &lt;code class=&quot;language-text&quot;&gt;cd&lt;/code&gt; into the new directory and run &lt;code class=&quot;language-text&quot;&gt;npm run develop&lt;/code&gt; (&lt;code class=&quot;language-text&quot;&gt;yarn develop&lt;/code&gt;) or &lt;code class=&quot;language-text&quot;&gt;gatsby develop&lt;/code&gt;. I would recommend running &lt;code class=&quot;language-text&quot;&gt;npm run develop&lt;/code&gt; (or &lt;code class=&quot;language-text&quot;&gt;yarn develop&lt;/code&gt; using yarn) since this would use the local version of gatsby installed in the project, as opposed to using the globally installed gatsby command. This helps avoid issues with different versions of the gatsby binary used in different projects, so each project uses the gatsby version specific to the project.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;Note: The starter comes with both &lt;code class=&quot;language-text&quot;&gt;package-lock.json&lt;/code&gt; and &lt;code class=&quot;language-text&quot;&gt;yarn.lock&lt;/code&gt; files. I assume this is to give users the option to choose between yarn and npm. I would recommend choosing one of the two package managers early on, and delete the lock file for the other package manager, to avoid confusion later in the future.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;Running the develop script would compile the assets for the site, and watch the files for changes (Gatsby uses webpack underneath for bundling). At this point, open &lt;a href=&quot;http://localhost:8000&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;http://localhost:8000&lt;/a&gt; to see the blog.&lt;/p&gt;
&lt;p&gt;Easy! Now you have a minimal blog setup that actually works. You can make changes to any of the .md files in &lt;code class=&quot;language-text&quot;&gt;content/blog&lt;/code&gt; directory, and you should see the changes reflected on the site. For further details on how to customize the blog, that is beyond the scope of this post. You can go through the README file that comes with the project, and also checkout the Gatsby docs.&lt;/p&gt;
&lt;h3 id=&quot;setting-up-github-pages&quot; style=&quot;position:relative;&quot;&gt;Setting up GitHub Pages&lt;/h3&gt;
&lt;p&gt;GitHub allows you setup &lt;a href=&quot;https://help.github.com/en/github/working-with-github-pages/creating-a-github-pages-site&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;user, organization and project sites&lt;/a&gt;. For project sites, you can choose to serve the files from the &lt;code class=&quot;language-text&quot;&gt;/docs&lt;/code&gt; folder of the repo of the project, the &lt;code class=&quot;language-text&quot;&gt;master&lt;/code&gt; branch or the &lt;code class=&quot;language-text&quot;&gt;gh-pages&lt;/code&gt; branch of your project repo. For user/organization sites, you only have the options of serving the public files from the &lt;code class=&quot;language-text&quot;&gt;master&lt;/code&gt; or &lt;code class=&quot;language-text&quot;&gt;gh-pages&lt;/code&gt; branch of a repo. You would need to &lt;a href=&quot;https://help.github.com/en/github/getting-started-with-github/create-a-repo&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;create a repo&lt;/a&gt; called &lt;code class=&quot;language-text&quot;&gt;&amp;lt;user&amp;gt;.github.io&lt;/code&gt; I chose to host the blog as an organization site with the files served from the &lt;code class=&quot;language-text&quot;&gt;master&lt;/code&gt; branch of the repo. For the gatsby project, the files being served are stored in the &lt;code class=&quot;language-text&quot;&gt;public&lt;/code&gt; directory after building the project. That is the part we would need in the github pages repo. We would need to have a repo for the project, and copy over the &lt;code class=&quot;language-text&quot;&gt;public&lt;/code&gt; content into the github pages repo.&lt;/p&gt;
&lt;p&gt;Now initialize the git repo in the project if you haven’t already done that already (using &lt;a href=&quot;https://www.atlassian.com/git/tutorials/setting-up-a-repository/git-init&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;&lt;code class=&quot;language-text&quot;&gt;git init&lt;/code&gt;&lt;/a&gt;), &lt;a href=&quot;https://www.atlassian.com/git/tutorials/saving-changes&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;commit&lt;/a&gt; and &lt;a href=&quot;https://www.atlassian.com/git/tutorials/syncing/git-push&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;push&lt;/a&gt; that into GitHub. Also create the user or organization site. Let’s assume the username is &lt;strong&gt;blogger&lt;/strong&gt;. You would create a repo called &lt;code class=&quot;language-text&quot;&gt;blogger.github.io&lt;/code&gt;. Build the project using &lt;code class=&quot;language-text&quot;&gt;yarn build&lt;/code&gt; and copy the contents of the &lt;code class=&quot;language-text&quot;&gt;/public&lt;/code&gt; directory into the &lt;code class=&quot;language-text&quot;&gt;blogger.github.io&lt;/code&gt; repo and commit it. If all goes well, you should be able to see the site live at &lt;a href=&quot;https://blogger.github.io&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;https://blogger.github.io&lt;/a&gt; URL. That’s a milestone! 🎉&lt;/p&gt;
&lt;p&gt;Next thing we need to do is setup automatically copying the public assets into the &lt;code class=&quot;language-text&quot;&gt;blogger.github.io&lt;/code&gt; repo.&lt;/p&gt;
&lt;h3 id=&quot;continuous-delivery-using-github-actions&quot; style=&quot;position:relative;&quot;&gt;Continuous delivery using GitHub Actions&lt;/h3&gt;
&lt;p&gt;GitHub actions is a new workflow automation tool provided by GitHub. It provides similar functionality available in CI/CD tools like Travis CI, appveyor, circle CI, etc. I would be using it since it is a free automation tool and integrates well with GitHub in a seamless and easy way.&lt;/p&gt;
&lt;p&gt;We would create a GitHub action workflow that:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;checks out the repository in a workflow runner&lt;/li&gt;
&lt;li&gt;installs the node modules&lt;/li&gt;
&lt;li&gt;builds the package&lt;/li&gt;
&lt;li&gt;copies the public assets into the &lt;code class=&quot;language-text&quot;&gt;blogger.github.io&lt;/code&gt; repo&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;We’d create the workflow in &lt;code class=&quot;language-text&quot;&gt;.github/workflows/pages.yml&lt;/code&gt; with the following content:&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;yml&quot;&gt;&lt;pre class=&quot;language-yml&quot;&gt;&lt;code class=&quot;language-yml&quot;&gt;&lt;span class=&quot;token key atrule&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; GitHub Pages

&lt;span class=&quot;token key atrule&quot;&gt;on&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
  &lt;span class=&quot;token key atrule&quot;&gt;push&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
    &lt;span class=&quot;token key atrule&quot;&gt;branches&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt; master &lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;

&lt;span class=&quot;token key atrule&quot;&gt;jobs&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
  &lt;span class=&quot;token key atrule&quot;&gt;build&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
    &lt;span class=&quot;token key atrule&quot;&gt;runs-on&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; ubuntu&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;latest
    &lt;span class=&quot;token key atrule&quot;&gt;steps&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;token key atrule&quot;&gt;uses&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; actions/checkout@v2
    &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;token key atrule&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; Use Node.js
      &lt;span class=&quot;token key atrule&quot;&gt;uses&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; actions/setup&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;node@v1
      &lt;span class=&quot;token key atrule&quot;&gt;with&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
        &lt;span class=&quot;token key atrule&quot;&gt;node-version&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;12.x&apos;&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;token key atrule&quot;&gt;run&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; yarn
    &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;token key atrule&quot;&gt;run&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;|&lt;/span&gt;&lt;span class=&quot;token scalar string&quot;&gt;
        git config --global user.email &quot;&amp;lt;your-email-address&gt;&quot;
        git config --global user.name &quot;&amp;lt;your-name&gt;&quot;&lt;/span&gt;

    &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;token key atrule&quot;&gt;run&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; yarn deploy
      &lt;span class=&quot;token key atrule&quot;&gt;env&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
        &lt;span class=&quot;token key atrule&quot;&gt;PA_TOKEN&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; $&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; secrets.PA_TOKEN &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
        &lt;span class=&quot;token key atrule&quot;&gt;CI&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token boolean important&quot;&gt;true&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;There are a number of things going on here, so let’s break it down.&lt;/p&gt;
&lt;p&gt;First we name the workflow as &lt;code class=&quot;language-text&quot;&gt;GitHub Pages&lt;/code&gt;.
We specify that the workflow should be run whenever any commit is pushed to the &lt;code class=&quot;language-text&quot;&gt;master&lt;/code&gt; branch.
A &lt;code class=&quot;language-text&quot;&gt;build&lt;/code&gt; job is specified to run on the latest ubuntu VM with the following steps:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;uses the &lt;a href=&quot;https://github.com/marketplace/actions/checkout&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;Checkout&lt;/a&gt; GitHub action to checkout the repo in the workflow&lt;/li&gt;
&lt;li&gt;uses the &lt;a href=&quot;https://github.com/marketplace/actions/setup-node-js-environment&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;Setup Node.js environment&lt;/a&gt; GitHub action to get the workflow environment setup for Node.js using the latest node 12 version.&lt;/li&gt;
&lt;li&gt;run &lt;code class=&quot;language-text&quot;&gt;yarn&lt;/code&gt; to install the node modules&lt;/li&gt;
&lt;li&gt;configure git to be able to push to the &lt;code class=&quot;language-text&quot;&gt;blogger.github.io&lt;/code&gt; repo&lt;/li&gt;
&lt;li&gt;run &lt;code class=&quot;language-text&quot;&gt;yarn deploy&lt;/code&gt; script (which we would define later) which will build and deploy the project to the &lt;code class=&quot;language-text&quot;&gt;blogger.github.io&lt;/code&gt; repo. Specify &lt;code class=&quot;language-text&quot;&gt;PA_TOKEN&lt;/code&gt; environment variable that would be used by the &lt;code class=&quot;language-text&quot;&gt;deploy&lt;/code&gt; script to authenticate pushing to the repo. The &lt;code class=&quot;language-text&quot;&gt;PA_TOKEN&lt;/code&gt; is your &lt;a href=&quot;https://help.github.com/en/github/authenticating-to-github/creating-a-personal-access-token-for-the-command-line&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;personal access token&lt;/a&gt; with permission to write to the &lt;code class=&quot;language-text&quot;&gt;blogger.github.io&lt;/code&gt; repo. To create a personal access token, go to your &lt;a href=&quot;https://github.com/settings/tokens/new&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;tokens settings&lt;/a&gt; page and select the &lt;code class=&quot;language-text&quot;&gt;repo&lt;/code&gt; scope. After creating the personal access token, set the token as the &lt;code class=&quot;language-text&quot;&gt;PA_TOKEN&lt;/code&gt; secret in the project repo by going to the repo &lt;code class=&quot;language-text&quot;&gt;Settings -&amp;gt; Secrets -&amp;gt; Add a new secret&lt;/code&gt;. Now you can access the secret in the workflow using &lt;code class=&quot;language-text&quot;&gt;${{ secrets.PA_TOKEN }}&lt;/code&gt;. More information about secrets in workflows can be found &lt;a href=&quot;https://help.github.com/en/actions/configuring-and-managing-workflows/creating-and-storing-encrypted-secrets&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;here&lt;/a&gt;.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;For the deploy script, we would use the &lt;a href=&quot;https://www.npmjs.com/package/gh-pages&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;gh-pages&lt;/a&gt; npm package to push the github pages assets into the &lt;code class=&quot;language-text&quot;&gt;blogger.github.io&lt;/code&gt; repo using &lt;code class=&quot;language-text&quot;&gt;gh-pages -d public -b master -r &amp;quot;https://&amp;lt;your-username&amp;gt;:$PA_TOKEN@github.com/blogger/blogger.github.io.git&amp;quot;&lt;/code&gt;. This command specifies the &lt;code class=&quot;language-text&quot;&gt;public&lt;/code&gt; directory as the source of the github pages, specifies the &lt;code class=&quot;language-text&quot;&gt;master&lt;/code&gt; branch, and specifies the remote repo as &lt;code class=&quot;language-text&quot;&gt;https://&amp;lt;your-username&amp;gt;:$PA_TOKEN@github.com/blogger/blogger.github.io.git&lt;/code&gt;. The URL specifies the GitHub HTTP URL along with the username and password used for the authentication of the git operations. You specify your username and the &lt;code class=&quot;language-text&quot;&gt;PA_TOKEN&lt;/code&gt; variable replaces your password. &lt;em&gt;You should never use your actual password in automation scripts. Always make use of access tokens that have the scope you need for that script.&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;Your deploy script in the &lt;code class=&quot;language-text&quot;&gt;package.json&lt;/code&gt; file would look something like this:&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;json&quot;&gt;&lt;pre class=&quot;language-json&quot;&gt;&lt;code class=&quot;language-json&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  ...
  &lt;span class=&quot;token property&quot;&gt;&quot;scripts&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    ...
    &lt;span class=&quot;token property&quot;&gt;&quot;deploy&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;gatsby build &amp;amp;&amp;amp; gh-pages -d public -b master -r \&quot;https://blogger:$PA_TOKEN@github.com/blogger/blogger.github.io.git\&quot;&quot;&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;That’s it! Now you push your changes to GitHub, your GitHub action workflow should pick up your changes and run the workflow. You can find the running GitHub actions in the Actions menu in the project repo.&lt;/p&gt;
&lt;p&gt;&lt;span
      class=&quot;gatsby-resp-image-wrapper&quot;
      style=&quot;position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 1200px;&quot;
    &gt;
      &lt;span
    class=&quot;gatsby-resp-image-background-image&quot;
    style=&quot;padding-bottom: 10.666666666666668%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAACCAYAAABYBvyLAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAaElEQVQI1z2O2QoDMQwD9/8/tk3j+MrRqZeFPgijQTK65tpob0h7IRaP9JbzaU57OyLlhzKKdVHUiqk9dxgeWZpETq5zvmQ44Yp7FEyiAqMKQ5LeAtXE3MkqWD3JOf/Z26+9OeewatwPDgqbeOmci30AAAAASUVORK5CYII=&apos;); background-size: cover; display: block;&quot;
  &gt;&lt;/span&gt;
  &lt;img
        class=&quot;gatsby-resp-image-image&quot;
        alt=&quot;github actions menu&quot;
        title=&quot;github actions menu&quot;
        src=&quot;/static/af52c53ca5744fbfa9cb4808875308fd/c1b63/github-actions-menu.png&quot;
        srcset=&quot;/static/af52c53ca5744fbfa9cb4808875308fd/5a46d/github-actions-menu.png 300w,
/static/af52c53ca5744fbfa9cb4808875308fd/0a47e/github-actions-menu.png 600w,
/static/af52c53ca5744fbfa9cb4808875308fd/c1b63/github-actions-menu.png 1200w,
/static/af52c53ca5744fbfa9cb4808875308fd/d61c2/github-actions-menu.png 1800w,
/static/af52c53ca5744fbfa9cb4808875308fd/7da7d/github-actions-menu.png 2120w&quot;
        sizes=&quot;(max-width: 1200px) 100vw, 1200px&quot;
        style=&quot;width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;&quot;
        loading=&quot;lazy&quot;
      /&gt;
    &lt;/span&gt;&lt;/p&gt;
&lt;p&gt;Once the action workflow is completed, you should see the new public assets in the &lt;code class=&quot;language-text&quot;&gt;blogger.github.io&lt;/code&gt; repo.&lt;/p&gt;
&lt;h3 id=&quot;conclusion&quot; style=&quot;position:relative;&quot;&gt;Conclusion&lt;/h3&gt;
&lt;p&gt;For a simple blog, Gatsby works well with GitHub Pages for hosting and GitHub actions for automating the workflow. For more dynamic content and sites, you would need some other hosting platform as GitHub Pages handles hosting static pages. However, you can still make use of Gatsby and GitHub actions for more dynamic sites.&lt;/p&gt;</content:encoded></item></channel></rss>