docs/notion/Internal Docs Exported/Internal Docs/Research/Test/Testing/Untitled Database.html
<html><head><title>Untitled Database</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="bfa4c557-8050-4d5e-91b8-d8642f202644" class="page sans"><header><h1 class="page-title"></h1></header><div class="page-body"><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="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="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="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="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="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="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="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="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></article></body></html>