docs/notion/Internal Docs Exported/Internal Docs/Research/Test/Testing.html
<html><head><title>Testing</title><style>
/* webkit printing magic: print all background colors */
html {
-webkit-print-color-adjust: exact;
}
* {
box-sizing: border-box;
-webkit-print-color-adjust: exact;
}
html,
body {
margin: 0;
padding: 0;
}
@media only screen {
body {
margin: 2em auto;
max-width: 900px;
color: rgb(55, 53, 47);
}
}
body {
line-height: 1.5;
}
a,
a.visited {
color: inherit;
text-decoration: underline;
}
.pdf-relative-link-path {
font-size: 80%;
color: #444;
}
h1,
h2,
h3 {
letter-spacing: -0.01em;
line-height: 1.2;
font-weight: 600;
margin-bottom: 0;
}
.page-title {
font-size: 2.5rem;
font-weight: 700;
margin-top: 0;
margin-bottom: 0.75em;
}
h1 {
font-size: 1.875rem;
margin-top: 1.875rem;
}
h2 {
font-size: 1.5rem;
margin-top: 1.5rem;
}
h3 {
font-size: 1.25rem;
margin-top: 1.25rem;
}
.source {
border: 1px solid #ddd;
border-radius: 3px;
padding: 1.5em;
word-break: break-all;
}
figure {
margin: 1.25em 0;
page-break-inside: avoid;
}
figcaption {
opacity: 0.5;
font-size: 85%;
margin-top: 0.5em;
}
mark {
background-color: transparent;
}
.indented {
padding-left: 1.5em;
}
hr {
background: transparent;
display: block;
width: 100%;
height: 1px;
visibility: visible;
border: none;
border-bottom: 1px solid rgba(55, 53, 47, 0.09);
}
img {
max-width: 100%;
}
@media only print {
img {
max-height: 100vh;
object-fit: contain;
}
}
@page {
margin: 1in;
}
.collection-content {
font-size: 0.875rem;
}
.column-list {
display: flex;
justify-content: space-between;
}
.column {
padding: 0 1em;
}
.column:first-child {
padding-left: 0;
}
.column:last-child {
padding-right: 0;
}
.table_of_contents-item {
display: block;
font-size: 0.875rem;
line-height: 1.3;
padding: 0.125rem;
}
.table_of_contents-indent-1 {
margin-left: 1.5rem;
}
.table_of_contents-indent-2 {
margin-left: 3rem;
}
.table_of_contents-indent-3 {
margin-left: 4.5rem;
}
.table_of_contents-link {
text-decoration: none;
opacity: 0.7;
border-bottom: 1px solid rgba(55, 53, 47, 0.18);
}
table,
th,
td {
border: 1px solid rgba(55, 53, 47, 0.09);
border-collapse: collapse;
}
table {
border-left: none;
border-right: none;
}
th,
td {
font-weight: normal;
padding: 0.25em 0.5em;
line-height: 1.5;
min-height: 1.5em;
text-align: left;
}
th {
color: rgba(55, 53, 47, 0.6);
}
ol,
ul {
margin: 0;
margin-block-start: 0.6em;
margin-block-end: 0.6em;
}
li > ol:first-child,
li > ul:first-child {
margin-block-start: 0.6em;
}
ul > li {
list-style: disc;
}
ul.to-do-list {
text-indent: -1.7em;
}
ul.to-do-list > li {
list-style: none;
}
.to-do-children-checked {
text-decoration: line-through;
opacity: 0.375;
}
ul.toggle > li {
list-style: none;
}
ul {
padding-inline-start: 1.7em;
}
ul > li {
padding-left: 0.1em;
}
ol {
padding-inline-start: 1.6em;
}
ol > li {
padding-left: 0.2em;
}
.mono ol {
padding-inline-start: 2em;
}
.mono ol > li {
text-indent: -0.4em;
}
.toggle {
padding-inline-start: 0em;
list-style-type: none;
}
/* Indent toggle children */
.toggle > li > details {
padding-left: 1.7em;
}
.toggle > li > details > summary {
margin-left: -1.1em;
}
.selected-value {
display: inline-block;
padding: 0 0.5em;
background: rgba(206, 205, 202, 0.5);
border-radius: 3px;
margin-right: 0.5em;
margin-top: 0.3em;
margin-bottom: 0.3em;
white-space: nowrap;
}
.collection-title {
display: inline-block;
margin-right: 1em;
}
time {
opacity: 0.5;
}
.icon {
display: inline-block;
max-width: 1.2em;
max-height: 1.2em;
text-decoration: none;
vertical-align: text-bottom;
margin-right: 0.5em;
}
.user-icon {
width: 1.5em;
height: 1.5em;
border-radius: 100%;
margin-right: 0.5rem;
}
.user-icon-inner {
font-size: 0.8em;
}
.text-icon {
border: 1px solid #000;
text-align: center;
}
.page-header-icon {
font-size: 3rem;
margin-bottom: 1rem;
}
.page-header-icon img {
border-radius: 3px;
}
.link-to-page {
margin: 1em 0;
padding: 0;
border: none;
font-weight: 500;
}
p > .user {
opacity: 0.5;
}
td > .user,
td > time {
white-space: nowrap;
}
input[type="checkbox"] {
transform: scale(1.5);
margin-right: 0.6em;
vertical-align: middle;
}
p {
margin-top: 0.5em;
margin-bottom: 0.5em;
}
.image {
border: none;
margin: 1.5em 0;
padding: 0;
border-radius: 0;
text-align: center;
}
.code,
code {
background: rgba(135, 131, 120, 0.15);
border-radius: 3px;
padding: 0.2em 0.4em;
border-radius: 3px;
font-size: 85%;
}
code {
color: #eb5757;
}
.code {
padding: 1.5em 1em;
}
.code > code {
background: none;
padding: 0;
font-size: 100%;
color: inherit;
}
blockquote {
font-size: 1.25em;
margin: 1em 0;
padding-left: 1em;
border-left: 3px solid rgb(55, 53, 47);
}
.bookmark-href {
font-size: 0.75em;
opacity: 0.5;
}
.sans { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"; }
.code { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; }
.serif { font-family: Lyon-Text, Georgia, KaiTi, STKaiTi, '华文楷体', KaiTi_GB2312, '楷体_GB2312', serif; }
.mono { font-family: Nitti, 'Microsoft YaHei', '微软雅黑', monospace; }
.pdf .sans { font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol", 'Twemoji', 'Noto Color Emoji', 'Noto Sans CJK SC', 'Noto Sans CJK KR'; }
.pdf .code { font-family: Source Code Pro, 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace, 'Twemoji', 'Noto Color Emoji', 'Noto Sans Mono CJK SC', 'Noto Sans Mono CJK KR'; }
.pdf .serif { font-family: PT Serif, Lyon-Text, Georgia, KaiTi, STKaiTi, '华文楷体', KaiTi_GB2312, '楷体_GB2312', serif, 'Twemoji', 'Noto Color Emoji', 'Noto Sans CJK SC', 'Noto Sans CJK KR'; }
.pdf .mono { font-family: PT Mono, Nitti, 'Microsoft YaHei', '微软雅黑', monospace, 'Twemoji', 'Noto Color Emoji', 'Noto Sans Mono CJK SC', 'Noto Sans Mono CJK KR'; }
.highlight-default {
}
.highlight-gray {
color: rgb(155,154,151);
}
.highlight-brown {
color: rgb(100,71,58);
}
.highlight-orange {
color: rgb(217,115,13);
}
.highlight-yellow {
color: rgb(223,171,1);
}
.highlight-teal {
color: rgb(15,123,108);
}
.highlight-blue {
color: rgb(11,110,153);
}
.highlight-purple {
color: rgb(105,64,165);
}
.highlight-pink {
color: rgb(173,26,114);
}
.highlight-red {
color: rgb(224,62,62);
}
.highlight-gray_background {
background: rgb(235,236,237);
}
.highlight-brown_background {
background: rgb(233,229,227);
}
.highlight-orange_background {
background: rgb(250,235,221);
}
.highlight-yellow_background {
background: rgb(251,243,219);
}
.highlight-teal_background {
background: rgb(221,237,234);
}
.highlight-blue_background {
background: rgb(221,235,241);
}
.highlight-purple_background {
background: rgb(234,228,242);
}
.highlight-pink_background {
background: rgb(244,223,235);
}
.highlight-red_background {
background: rgb(251,228,228);
}
.block-color-default {
}
.block-color-gray {
color: rgba(55, 53, 47, 0.6);
}
.block-color-brown {
color: rgb(100,71,58);
}
.block-color-orange {
color: rgb(217,115,13);
}
.block-color-yellow {
color: rgb(223,171,1);
}
.block-color-teal {
color: rgb(15,123,108);
}
.block-color-blue {
color: rgb(11,110,153);
}
.block-color-purple {
color: rgb(105,64,165);
}
.block-color-pink {
color: rgb(173,26,114);
}
.block-color-red {
color: rgb(224,62,62);
}
.block-color-gray_background {
background: rgb(235,236,237);
}
.block-color-brown_background {
background: rgb(233,229,227);
}
.block-color-orange_background {
background: rgb(250,235,221);
}
.block-color-yellow_background {
background: rgb(251,243,219);
}
.block-color-teal_background {
background: rgb(221,237,234);
}
.block-color-blue_background {
background: rgb(221,235,241);
}
.block-color-purple_background {
background: rgb(234,228,242);
}
.block-color-pink_background {
background: rgb(244,223,235);
}
.block-color-red_background {
background: rgb(251,228,228);
}
.checkbox {
display: inline-flex;
vertical-align: text-bottom;
width: 16;
height: 16;
background-size: 16px;
margin-left: 2px;
margin-right: 5px;
}
.checkbox-on {
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Crect%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%2358A9D7%22%2F%3E%0A%3Cpath%20d%3D%22M6.71429%2012.2852L14%204.9995L12.7143%203.71436L6.71429%209.71378L3.28571%206.2831L2%207.57092L6.71429%2012.2852Z%22%20fill%3D%22white%22%2F%3E%0A%3C%2Fsvg%3E");
}
.checkbox-off {
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Crect%20x%3D%220.75%22%20y%3D%220.75%22%20width%3D%2214.5%22%20height%3D%2214.5%22%20fill%3D%22white%22%20stroke%3D%22%2336352F%22%20stroke-width%3D%221.5%22%2F%3E%0A%3C%2Fsvg%3E");
}
</style></head><body><article id="1c593e8b-36fe-4ebf-90b6-99a08d004e17" class="page sans"><header><h1 class="page-title">Testing</h1></header><div class="page-body"><h1 id="dfc1e72e-f408-4257-b2d4-acbb0bba74a2">Testing</h1><p id="6ae796f5-cdcd-4198-80ec-f35721a02429">Purpose: research tools and best practices for testing web components</p><p id="9c9d136e-61b6-44ba-a34e-f86bd57c7dde">Test Driven Development:</p><ol id="4f61a776-9ba9-420b-b8ea-c06e7e31e3d1" class="numbered-list" start="1"><li>Writing tests for the required software functionality</li></ol><ol id="38d0e93f-a773-474b-82f9-3789a1bde56c" class="numbered-list" start="2"><li>Run the tests for the software functionality</li></ol><ol id="3e08f41c-6284-4b87-abfb-d6f3bc433f04" class="numbered-list" start="3"><li>Implement the software functionality</li></ol><ol id="cc80295a-c485-4d6e-bd83-6a5702b65878" class="numbered-list" start="4"><li>Fix bugs and refactor until all tests pass</li></ol><ol id="502b4ef4-53a0-4e51-8c16-81b23c0d5ea6" class="numbered-list" start="5"><li>Repeat the cycle for new functionality</li></ol><p id="8e7215ae-d409-472c-bcbf-d60727a3b435"><a href="https://medium.com/@eavichay/testing-web-components-fe48a49117f7">https://medium.com/@eavichay/testing-web-components-fe48a49117f7</a></p><ul id="7fc05fce-e96a-4b48-8435-7434812130b8" class="bulleted-list"><li>Shows how to test components using the showroom testing platform and mocha as a test runner</li></ul><ul id="128a21d1-7f3d-4693-93bd-e7eccf0db0ca" class="bulleted-list"><li>A good way to understand generally how testing is implemented</li></ul><p id="e8c8dcf2-1dad-49dc-a4fb-cd154d1bf16e"><a href="https://bendyworks.com/blog/native-web-components">https://bendyworks.com/blog/native-web-components</a></p><ul id="f429b73f-2d2f-4979-baea-1dcc1777e560" class="bulleted-list"><li>Examples of how to use <a href="https://github.com/Polymer/web-component-tester">web component tester</a> to test web components</li></ul><p id="20a5a29b-0372-46bc-a804-da04d8a2d07d"><a href="https://medium.com/welldone-software/an-overview-of-javascript-testing-in-2019-264e19514d0a">https://medium.com/welldone-software/an-overview-of-javascript-testing-in-2019-264e19514d0a</a></p><ul id="1f6c2561-30bd-4b9c-9794-4f5af4da06ad" class="bulleted-list"><li>Highlights state of JavaScript Testing in 2019.</li></ul><ul id="969e9463-980b-49a1-9d2f-8b7981e60785" class="bulleted-list"><li>Broadly goes over the test tool types and examples.</li></ul><ul id="667c04da-bc62-44c4-9dc3-148a9039c431" class="bulleted-list"><li>Good way to understand the purpose of and role of certain tech tools.</li></ul><ul id="bb09498b-9f99-49e2-9d62-13bc21230abe" class="bulleted-list"><li>As a new perspective: evaluate testing tools based on the type of testing to be done<ul id="9dbd518d-d086-4643-a6b1-e7e1d7302206" class="bulleted-list"><li>Unit testing, functional testing, visual regression testing, etc. may often require different capabilities from the testing tools</li></ul></li></ul><p id="fb645c43-beee-4864-97ff-cc0203ef5b21"><a href="https://www.htmlgoodies.com/beyond/webmaster/guidelines-for-testing-front-end-web-components.html">https://www.htmlgoodies.com/beyond/webmaster/guidelines-for-testing-front-end-web-components.html</a></p><p id="a496d7b0-4953-4593-8241-1b015ed48cdd">Broadly goes over what to test in Front-end components:</p><ol id="c6604e34-bf6c-4003-ac40-b7bc545fb9a3" class="numbered-list" start="1"><li>HTML validation and accessibility testing<ol id="964146ea-b366-4917-b95f-53303812cb7a" class="numbered-list" start="1"><li>As Professor mentioned, we can write malformed HTML that will visually look the same as valid HTML in the browser. To avoid this, have each .html file go through a validator to make sure it is valid. The W3C provides a validator we can use at <a href="https://validator.w3.org/">https://validator.w3.org/</a></li></ol><ol id="8b3dae93-6d43-4afc-8fa0-cf4372e2a4e4" class="numbered-list" start="2"><li>We can also do Web Accessibility evaluation to see if the components meet certain accessibility guidelines. Depending on what accessibility criteria we impose upon ourselves, we can search for a tool that fits our needs using <a href="https://www.w3.org/WAI/ER/tools/">https://www.w3.org/WAI/ER/tools/</a> which provides a list of tools to examine.</li></ol></li></ol><ol id="4642d94d-774c-4922-b8e2-e13314cb30b1" class="numbered-list" start="2"><li>CSS Validation<ol id="92aa9844-2be8-463d-920f-d330895db9ce" class="numbered-list" start="1"><li>Same as with HTML, we can ensure all CSS files have the correct syntax using W3C validation service at <a href="https://jigsaw.w3.org/css-validator/">https://jigsaw.w3.org/css-validator/</a></li></ol></li></ol><ol id="c8586dfd-0741-4fd1-802b-64d454a9f387" class="numbered-list" start="3"><li>JavaScript Unit testing<ol id="b0093de5-f24b-4474-a6e1-0fa29e9e8ada" class="numbered-list" start="1"><li>Introduces unit testing for JS and a number of tools to do the unit testing such as Karma,UnitJS, and Jasmine to name a few.</li></ol></li></ol><p id="45686e02-b989-4037-b357-3b9961d932fc">Testing Frameworks</p><div id="bfa4c557-8050-4d5e-91b8-d8642f202644" class="collection-view"><h4 class="collection-title"></h4><table class="collection-content"><thead><tr><th>Tool Name</th><th>Pro</th><th>Con</th></tr></thead><tbody><tr id="598ed921-f19d-46b0-9f66-68567c5d9cc0"><td class="cell-title"><a href="Testing/Untitled Database/MochaJS.html">MochaJS</a></td><td class="cell-.#U?">SimpleFlexibleWorks with other libraries for Code Coverage reporting and AssertionsAllow multiple assertion library (expect, should, etc)Easy async testing</td><td class="cell-JNzZ">Needs to use with other libraries for max benefit</td></tr><tr id="d33bd51f-f526-487c-a9e0-8d6676ee3ae1"><td class="cell-title"><a href="Testing/Untitled Database/Cypress.html">Cypress</a></td><td class="cell-.#U?">All-in-one test framework withAssertion libraryMocking and StubbingFocused on E2E testingIncludes many tools bundled up like:MochaChaiAble to handle unit testingAlternative to Selenium</td><td class="cell-JNzZ">No shadow DOM support though there are workarounds</td></tr><tr id="b77533d8-2039-47f1-91e8-75fa0f38274a"><td class="cell-title"><a href="Testing/Untitled Database/Jasmine.html">Jasmine</a></td><td class="cell-.#U?">Simple to setupSupported by many CIs (Codeship, Travic, etc.)Descriptive syntax for BDD testingLots of extendability - 3th party libraries like jasmine-jquery, jasmine-dom, jasmine-react etc.</td><td class="cell-JNzZ">Tedious async testingA specific file suffix is expected (_spec.js)</td></tr><tr id="38c0a579-36bc-4c29-83e1-d744fceb00f9"><td class="cell-title"><a href="Testing/Untitled Database/Web component testerWeb Component TesterTesting el.html">Web component testerWeb Component TesterTesting elements with WCTWCT testing and Sauce LabsWTC testing on raw web components</a></td><td class="cell-.#U?">Includes Mocha and ChaiPlugin for Sauce Labs for easy integration of cross browser testingRuns tests against any browsers installed locally or via Sauce LabsIncludes accessibility testing tools</td><td class="cell-JNzZ">Built on many 3rd party tools like:MochaChaiSinonSeleniumAccessibility Developer toolsThis may make the framework hard to use, unwieldy, and hard to debug since there are so many tools that interactIssues with WCT don’t appear to get alot of support and tends to break according to Is WCT still supportedApparently need to install the 3rd party tools WCT uses like Mocha, Chai, and Sinon, in addition to installin wct according to Declaring dependencies for WCT</td></tr><tr id="2428090e-f641-478c-b122-b0db2263d72a"><td class="cell-title"><a href="Testing/Untitled Database/JSDOM.html">JSDOM</a></td><td class="cell-.#U?">Emulates a browser in pure JavaScript so a browser environment can be simulated in a NodeJS environmentPotential workaround to get Mocha unit tests to run in a NodeJs environment</td><td class="cell-JNzZ">Only simulates a browser in NodeJs and we want to be able to test web components in the environment in which they will be used, an actual browser</td></tr><tr id="d11f0037-e933-48bb-84bc-5977ecd8e0aa"><td class="cell-title"><a href="Testing/Untitled Database/TestCafe.html">TestCafe</a></td><td class="cell-.#U?">Created to support alot of browsers and legacy ones what-is-testcafe</td><td class="cell-JNzZ">Doesn’t use Mocha or Chai so the test syntax will be different</td></tr><tr id="0c9a6144-ad7b-4553-bc1c-7d1c99fc4cbb"><td class="cell-title"><a href="Testing/Untitled Database/Karma https github com karma runner karma.html">Karma https://github.com/karma-runner/karma</a></td><td class="cell-.#U?">Has plugins for Mocha and ChaiDesigned for low level unit testing</td><td class="cell-JNzZ">Not made for end to end testing</td></tr><tr id="89041b1a-8385-41f6-9eb3-0fe83fecda26"><td class="cell-title"><a href="Testing/Untitled Database/MochaJS 1.html">MochaJS</a></td><td class="cell-.#U?"><a href="https://blog.logrocket.com/a-quick-and-complete-guide-to-mocha-testing-d0e0ea09f09d?gi=f8e232410617">This blog</a> has a wonderful installation set up </td><td class="cell-JNzZ"></td></tr></tbody></table></div><p id="ca0637c0-2eb2-4499-9560-a958791aa1b7">Guide on how to setup for running Mocha in the browser</p><p id="4372df3f-ee94-43be-9302-19b16efcb949"><a href="https://mochajs.org/#running-mocha-in-the-browser">https://mochajs.org/#running-mocha-in-the-browser</a></p><h2 id="2a77b5a6-defe-488b-8ac4-cce96beded95">Why use RequireJS?</h2><ul id="eccc864f-9179-4cb3-ada9-a91928583a68" class="bulleted-list"><li>It is an open source JavaScript library under the MIT license.</li></ul><ul id="72a81876-9509-4b88-8c99-0f46efedecdf" class="bulleted-list"><li>It provides asynchronous module loading.</li></ul><ul id="4d5da93f-f781-4a06-8dda-da7799ca26f4" class="bulleted-list"><li>It has the ability to load nested dependencies.</li></ul><ul id="20027ec6-0058-46d5-8f32-0ba3408e39de" class="bulleted-list"><li>If you have many small files, then don't need to worry about keeping track of dependencies order.</li></ul><ul id="22a068a9-e9fe-473c-8e87-60e928b47def" class="bulleted-list"><li>It provides support for plugins and loads more than one JavaScript files.</li></ul><h2 id="029bea69-e2f0-4edb-87a1-c5b1aa3f52d1">Features of RequireJS</h2><ul id="30f37d4f-f3ef-4a6b-82a1-4e7096a8cea2" class="bulleted-list"><li>It manages the dependencies between JavaScript files and improves the speed and quality of the code.</li></ul><ul id="59115e86-2541-4f0c-b6d4-2f997dfcbfb8" class="bulleted-list"><li>It combines and minifies the modules into one script for an optimized experience.</li></ul><ul id="34fe244f-8c43-4310-a989-5ae825eb85d4" class="bulleted-list"><li>It reduces code complexity in large applications.</li></ul><ul id="c746ac57-22a6-4438-8ccf-b61fae477a46" class="bulleted-list"><li>It gathers different JavaScript files from different modules at the time of compilation.</li></ul><ul id="fbe53fb0-4f13-4816-9a59-73f0e55d4f47" class="bulleted-list"><li>It allows for easy debugging as it loads the files from plain script tags.</li></ul><hr id="d7d82369-4d6a-490f-8022-6c813cb77df8"/></div></article></body></html>