From 9af7671322c856a631524482ae17b96f22b7202d Mon Sep 17 00:00:00 2001
From: Michal Vanko <mklakakilli@gmail.com>
Date: Fri, 7 May 2021 07:42:06 +0200
Subject: [PATCH] Improve testing article

---
 ...on-javascript-to-javascript-application-testing.md} | 10 ++++++----
 src/routes/$layout.svelte                              |  1 +
 src/styles/variables.module.less                       |  4 ++--
 3 files changed, 9 insertions(+), 6 deletions(-)
 rename _posts/blog/{dev-2021-04-05-automated-testing-javascript-applications.md => 2021-05-07-introduction-javascript-to-javascript-application-testing.md} (97%)

diff --git a/_posts/blog/dev-2021-04-05-automated-testing-javascript-applications.md b/_posts/blog/2021-05-07-introduction-javascript-to-javascript-application-testing.md
similarity index 97%
rename from _posts/blog/dev-2021-04-05-automated-testing-javascript-applications.md
rename to _posts/blog/2021-05-07-introduction-javascript-to-javascript-application-testing.md
index 0d34ad1..2198afa 100644
--- a/_posts/blog/dev-2021-04-05-automated-testing-javascript-applications.md
+++ b/_posts/blog/2021-05-07-introduction-javascript-to-javascript-application-testing.md
@@ -1,8 +1,8 @@
 ---
 layout: blog
-title: Automated Testing of JavaScript Applications
+title: Introduction to JavaScript Application testing 
 published: true
-date: 2021-04-05T14:44:57.102Z # update date accordingly
+date: 2021-05-07T14:44:57.102Z # update date accordingly
 tags:
   - Development
   - Testing
@@ -127,12 +127,13 @@ it('should create a JSON response', () => {
 
 These snapshots help to detect changes in the output of some functionality.
 They can also be used with a component renderer to detect changes in the output of component's _HTML_, _DOM_ or virtual _DOM_.
+Snapshots are created and updated by the test runner automatically so they lower the churn of updating tests over time.
 
 Snapshot artifacts should be committed into the code repository alongside the tests, so they can be used as an input for the next test runs.
 Snapshots can be utilized for many types of tests.
-They lower the churn of updating tests over time.
 
-If the test uses some data are varying from the test run, [property matchers](https://jestjs.io/docs/snapshot-testing#property-matchers) can be utilized to verify the type of the data instead.
+If the expected result includes some varying data,
+[property matchers](https://jestjs.io/docs/snapshot-testing#property-matchers) can be utilized to verify the type of the data instead.
 
 ### Additional resources on snapshots
 
@@ -334,6 +335,7 @@ Be sure to not include any variable data (Dates, IDs, etc.) in the screenshots a
 - [Playwright](https://playwright.dev/) - Playwright is a library to automate Chromium, Firefox and WebKit with a single API
 - [Puppeteer](https://pptr.dev/) - High level API to control Chromium
 - [Jest-image-snapshot](https://github.com/americanexpress/jest-image-snapshot) Matching image comparisons
+- [Percy](https://percy.io/) - Visual review platform for visual regression tests
 
 ### Additional resources for e2e tests
 
diff --git a/src/routes/$layout.svelte b/src/routes/$layout.svelte
index a412684..fe67303 100644
--- a/src/routes/$layout.svelte
+++ b/src/routes/$layout.svelte
@@ -76,6 +76,7 @@
       max-width: 48rem;
       margin-left: auto;
       margin-right: auto;
+      box-shadow: @content-box-shadow;
     }
     figure {
       max-width: @max-image-size;
diff --git a/src/styles/variables.module.less b/src/styles/variables.module.less
index 6288033..75b3d0a 100644
--- a/src/styles/variables.module.less
+++ b/src/styles/variables.module.less
@@ -8,7 +8,7 @@
 @text-shadow: 0.02em 0.02em 0.03em fade(@tearkiss, 20%);
 @link-color: saturate(mix(@tearkiss, @midnight-blue, 66%), 20%);
 @link-hover-color: @tearkiss;
-@link-visited-color: saturate(@french-violet, 30%, relative);
+@link-visited-color: @french-violet;
 @link-visited-hover-color: lighten(@link-visited-color, 10%);
 @nice-pink-color: spin(@link-visited-color, 50);
 
@@ -24,7 +24,7 @@
 @bg-color: tint(@light-cyan, 70%);
 @menu-bg-color: fade(@tearkiss, 40%);
 
-@content-box-shadow: 0px 0px 2px 1px desaturate(@tearkiss, 50%);
+@content-box-shadow: 0px 0px 2px 1px fade(desaturate(@tearkiss, 50%), 50%);
 
 @media-l: 1000px;
 @media-m: 700px;