Improve testing article

_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
 

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;

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;