Now that we’ve extensively covered the task of testing our server side code, it’s time to consider the frontend.aka. “client side code”. We’ll take a similar approach and leverage the ease of environment setup that docker affords usthough its not nearly as involved this time. and use two well suited libraries for our purpose: Jest and BackstopJs.
As always, it’s worth pausing and asking why are we writing automated testsonce again, we’ll be using an “integration testing” approach, as opposed to pure “unit testing” for the front end
- “The browser is a hostile environment”bonus points for anyone who can help me track down the source of this quote With multiple inter-dependencies, overloads, and cascades, we could use some help keeping track.
- In the struggle between fat-client vs thin-client. Fat-client is winning on the web, with more computing logic run by javascript.
- Clicking through a website an manually running each use case you can think of is a poor testing strategy.
- It puts troubleshooting on the left side of transpiling your browser codefancy word for that stuff webpack, grunt, gulp, babelify, and others do. making it much easier for you to zero in on your problem.
The Jest Framework allows us to easily build mocks, simulate a DOM, run tests, and generate code coverage reports. It’s a natural fit for testing your JS scripts in WordPress
Backstop tests are a brillant solution towards checking the results of your css changes to “catch CSS curveballs” by comparing screenshots of previous tests and highlighting pages/elements that have changed.
{
"id": "backstop_default",
"viewports": [
{
"label": "phone",
"width": 320,
"height": 480
},
{
"label": "tablet",
"width": 1024,
"height": 768
},
{
"label": "desktop",
"width": 1280,
"height": 1024
},
{
"label": "large",
"width": 1920,
"height": 1080
}
],
"onBeforeScript": "puppet/onBefore.js",
"onReadyScript": "puppet/onReady.js",
"scenarios": [
{
"label": "AdvancedWoo Homepage",
"cookiePath": "backstop_data/engine_scripts/cookies.json",
"url": "https://advancedwoo.com/",
"referenceUrl": "https://advancedwoo.com/",
"readyEvent": "",
"readySelector": "",
"delay": 0,
"hideSelectors": [],
"removeSelectors": [],
"hoverSelector": "",
"clickSelector": "",
"postInteractionWait": 0,
"selectors": [],
"selectorExpansion": true,
"expect": 0,
"misMatchThreshold" : 0.1,
"requireSameDimensions": true
},
{
"label": "AWD How to navigate",
"cookiePath": "backstop_data/engine_scripts/cookies.json",
"url": "https://advancedwoo.com/topic/how-to-navigate-this-course/",
"referenceUrl": "https://advancedwoo.com/topic/how-to-navigate-this-course/",
"readyEvent": "",
"readySelector": "",
"delay": 0,
"hideSelectors": [],
"removeSelectors": [],
"hoverSelector": "",
"clickSelector": "",
"postInteractionWait": 0,
"selectors": [],
"selectorExpansion": true,
"expect": 0,
"misMatchThreshold" : 0.1,
"requireSameDimensions": true
},
{
"label": "AWD data-stores methods",
"cookiePath": "backstop_data/engine_scripts/cookies.json",
"url": "https://advancedwoo.com/topic/wc_data-data-stores/#/methods",
"referenceUrl": "https://advancedwoo.com/topic/wc_data-data-stores/#/methods",
"readyEvent": "",
"readySelector": "",
"delay": 0,
"hideSelectors": [],
"removeSelectors": [],
"hoverSelector": "",
"clickSelector": "",
"postInteractionWait": 0,
"selectors": [],
"selectorExpansion": true,
"expect": 0,
"misMatchThreshold" : 0.1,
"requireSameDimensions": true
},
{
"label": "AWD about",
"cookiePath": "backstop_data/engine_scripts/cookies.json",
"url": "https://advancedwoo.com/about/",
"referenceUrl": "https://advancedwoo.com/about/",
"readyEvent": "",
"readySelector": "",
"delay": 0,
"hideSelectors": [],
"removeSelectors": [],
"hoverSelector": "",
"clickSelector": "",
"postInteractionWait": 0,
"selectors": [],
"selectorExpansion": true,
"expect": 0,
"misMatchThreshold" : 0.1,
"requireSameDimensions": true
}
],
"paths": {
"bitmaps_reference": "backstop_data/bitmaps_reference",
"bitmaps_test": "backstop_data/bitmaps_test",
"engine_scripts": "backstop_data/engine_scripts",
"html_report": "backstop_data/html_report",
"ci_report": "backstop_data/ci_report"
},
"report": ["browser"],
"engine": "puppeteer",
"engineOptions": {
"args": ["--no-sandbox"]
},
"asyncCaptureLimit": 5,
"asyncCompareLimit": 50,
"debug": false,
"debugWindow": false
}
Now that we’ve got a baseline for the tools that we’ll be using. Let’s look at how we can use Jest and Backstop to put some automated testing in place for our custom WordPress code. We’ll be using the same Docker Container System for environment setup. However, if you prefer not to deal with Docker’s nuancesTBH it is a bit of overkill for these purposes, then feel free to install the npm packages globally and work within your regular command line shell.
Keyboard shortcuts
Down arrow Next slide
Up arrow Previous slide
Color codes
Hover over text more additional info