Add toolkit validation tests

cdlib · Feb 21, 2023 · 3f3b841 · 3f3b841
1 parent 97abc20
commit 3f3b841
Show file tree

Hide file tree

Showing 9 changed files with 124 additions and 3 deletions.
diff --git a/css/tests.css b/css/tests.css
@@ -0,0 +1,46 @@
+/**** Tests ****/
+
+@import 'variables.css';
+@import '../node_modules/modern-normalize/modern-normalize.css';
+@import 'fonts.css';
+
+/* Toolkit Validation */
+
+:root {
+  --color-red: oklch(63% 0.29 29);
+  --color-green: oklch(63% 0.24 142);
+}
+
+body {
+  margin-inline: var(--space-base);
+  font-family: 'Source Sans', Arial, sans-serif;
+}
+
+h1 {
+  font-size: 2rem;
+  font-weight: 500;
+}
+
+h2 {
+  font-size: 1.5rem;
+  font-weight: 400;
+}
+
+code {
+  color: var(--color-red);
+}
+
+.test-checkmark {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+
+  &::after {
+    content: '';
+    flex: none;
+    block-size: 1rem;
+    inline-size: 1rem;
+    background-color: var(--color-green);
+    mask: url('data-url:/fa-solid/check.svg') center / contain;
+  }
+}
diff --git a/images/favicon.svg b/images/favicon.svg
diff --git a/js/tests.js b/js/tests.js
@@ -0,0 +1,7 @@
+// ***** Tests ***** //
+
+// JavaScript Test:
+
+const testJavaScript = document.querySelector('.test-js strong')
+
+testJavaScript.innerText = 'yes'
diff --git a/package.json b/package.json
@@ -8,8 +8,8 @@
     "clean": "del fractal-dist dist",
     "fractal-dev": "fractal start --sync --watch",
     "fractal-build": "fractal build",
-    "parcel-dev": "parcel watch css/main.css js/main.js images/* --dist-dir dist --public-url . --no-cache",
-    "parcel-build": "parcel build css/main.css js/main.js images/* --dist-dir dist --public-url . --no-cache --no-source-maps",
+    "parcel-dev": "parcel watch css/tests.css css/main.css js/tests.js js/main.js images/* --dist-dir dist --public-url . --no-cache",
+    "parcel-build": "parcel build css/tests.css css/main.css js/tests.js js/main.js images/* --dist-dir dist --public-url . --no-cache --no-source-maps",
     "watchstyles": "onchange -i css/* -- npm run lintstyles",
     "watchjs": "onchange -i js/* -- npm run lintjs",
     "lintstyles": "stylelint css/*",

diff --git a/src/_template-tests.hbs b/src/_template-tests.hbs
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>CDLIB UI Tests</title>
+  <meta name="color-scheme" content="light dark">
+  <meta name="robots" content="noindex">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
+  <link rel="stylesheet" href="{{ path '/dist/css/tests.css' }}" media="all">
+</head>
+<body>
+  {{{ yield }}}
+  <script src="{{ path '/dist/js/tests.js' }}"></script>
+ </body>
+</html>
diff --git a/src/pages/pages.config.js b/src/pages/pages.config.js
@@ -1,4 +1,4 @@
 module.exports = {
   root: true,
-  order: 1,
+  order: 1
 }
diff --git a/src/tests/tests.config.js b/src/tests/tests.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  root: true,
+  order: 4,
+  preview: '@template-tests'
+}
diff --git a/src/tests/toolkit.config.js b/src/tests/toolkit.config.js
@@ -0,0 +1,10 @@
+const { faker } = require('@faker-js/faker/locale/en');
+
+module.exports = {
+  label: 'Toolkit',
+  context: {
+    toolkit: {
+      paragraph: faker.lorem.paragraphs()
+    }
+  }
+}
diff --git a/src/tests/toolkit.hbs b/src/tests/toolkit.hbs
@@ -0,0 +1,37 @@
+<h1>Toolkit Validation</h1>
+
+<h2>Loading of Source Sans Font</h2>
+
+<p>This sentence and all text on this page should be rendered in the Source Sans font. Custom font variants for <strong>bold</strong>, <em>italic</em> and <strong><em>bolded italic</em></strong> should also be present.</p>
+
+<h2>Faker Library</h2>
+
+<p>The following paragraph is random text generated by the Faker module and inlined into this page by a Handlebars expression:</p>
+
+<blockquote>
+  {{ toolkit.paragraph }}
+</blockquote>
+
+<h2>Font Awesome Icons</h2>
+
+<p class="test-checkmark">This sentence should contain a green checkmark at the end.</p>
+<p>This verifies that a Font Awesome icon is getting rendered from the fontawesome-pro module using a <a href="https://parceljs.org/features/dependency-resolution/#file-aliases">Parcel file alias</a> (defined in package.json) and inlining the image into the stylesheet as a <a href="https://parceljs.org/features/bundle-inlining/#inlining-as-a-data-url">data URL</a>.</p>
+
+<h2>JavaScript</h2>
+
+<p class="test-js">Is JavaScript getting compiled and loading on this page [yes/no]? <strong>no</strong></p>
+
+<h2>Images</h2>
+
+<p>This SVG's <code>src</code> attribute has a path to the toolkit's compiled images at <strong>/dist/images/</strong> and contains a Handlebars expression and Fractal <code>path</code> variable:</p>
+
+<img src="{{ path '/dist/images/favicon.svg' }}" alt="California Digital Library website favicon">
+
+<h2>Visually Verify</h2>
+
+<ol>
+  <li>This page's elements are rendering the same in the current versions of Chrome, Firefox and Safari desktop browsers; verify older browser rendering per project requirements</li>
+  <li>CSS is getting compiled to <strong>/dist/css/test.css</strong> with <a href="https://parceljs.org/languages/css/#vendor-prefixing">Parcel vendor prefixing</a> (such as adding <code>-webkit-mask</code>) and other <a href="https://parceljs.org/languages/css/#syntax-lowering">Parcel transpilations</a> (verify CSS logical properties)</li>
+  <li>Images are rendering when served from this page hosted on <a href="https://cdlib.github.io/intracdl-ui">GitHub Pages</a> (verifying that file paths aren't broken)</li>
+  <li>Source maps (when using the toolkit in development mode) are correctly referencing this page's element styles to the <strong>test.css</strong> and <strong>main.css</strong> stylesheets and line numbers (verify with browser inspector tool)</li>
+</ul>