Add routes and tests for utilities

CHANGELOG.md

@@ -19,6 +19,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - Upgraded TNA Frontend to `v0.2.0`
+- Renamed "files" component to "files list" (`files` -> `files-list`, `tnaFiles()` -> `tnaFilesList()`)
+- Renamed "featured records" component to "records list" (`featured-records` -> `records-list`, `tnaFeaturedRecords()` -> `tnaRecordsList()`)
+- Moved the grid component to utilities
+
+### Removed
+
+- Removed search filters component
+- Removed sensitive image component
 
 ## [0.1.34](https://github.com/nationalarchives/tna-frontend-jinja/compare/v0.1.33...v0.1.34) - 2024-07-11
 

test-fixtures.mjs

@@ -26,8 +26,11 @@ const standardiseHtml = (html) =>
       "preserve-newlines": false,
     },
   );
+
 const tnaFrontendDirectory = "node_modules/@nationalarchives/frontend";
 const fixturesDirectory = `${tnaFrontendDirectory}/nationalarchives/components/`;
+const utilitiesFixturesDirectory = `${tnaFrontendDirectory}/nationalarchives/utilities/`;
+
 const components = globSync(`${fixturesDirectory}*/fixtures.json`)
   .map((componentFixtureFile) => {
     const name = componentFixtureFile
@@ -90,8 +93,7 @@ for (let i = 0; i < components.length; i++) {
       const diff = diffChars(bodyPretty, fixturePretty)
         .map(
           (part) =>
-            `${
-              part.added ? "\x1b[32m" : part.removed ? "\x1b[31m" : "\x1b[0m"
+            `${part.added ? "\x1b[32m" : part.removed ? "\x1b[31m" : "\x1b[0m"
             }${part.value === " " ? "█" : part.value}`,
         )
         .join("");
@@ -107,41 +109,69 @@ for (let i = 0; i < components.length; i++) {
   }
 }
 
+const utilities = globSync(`${utilitiesFixturesDirectory}*/fixtures.json`)
+  .map((utilitiesFixtureFile) => {
+    const name = utilitiesFixtureFile
+      .replace(new RegExp(`^${utilitiesFixturesDirectory}`), "")
+      .replace(new RegExp(/\/fixtures.json$/), "");
+    return {
+      name,
+      testUrl: `${testEndpoint}utilities/${name}`,
+      fixtures: [],
+    };
+  })
+  .map((utility) => {
+    const { fixtures } = JSON.parse(
+      fs.readFileSync(
+        `${utilitiesFixturesDirectory}${utility.name}/fixtures.json`,
+        "utf8",
+      ),
+    );
+    return {
+      ...utility,
+      fixtures,
+    };
+  })
+  .reverse();
 
-
-const templatesDirectory = `${tnaFrontendDirectory}/nationalarchives/templates/`;
+for (let i = 0; i < utilities.length; i++) {
+  const utility = utilities[i];
+  console.log(`\nUtility: ${utility.name}`);
   const { fixtures } = JSON.parse(
-    fs.readFileSync(`${templatesDirectory}fixtures.json`,
+    fs.readFileSync(
+      `${utilitiesFixturesDirectory}${utility.name}/fixtures.json`,
       "utf8",
     ),
   );
-  const genericFixture = fixtures.find(fixture => fixture.name==="generic")
-const testUrl = `${testEndpoint}templates/base`
-console.log("\nTemplates");
+
+  for (let j = 0; j < utility.fixtures.length; j++) {
+    const fixture = utility.fixtures[j];
+    const testUrl = `${utility.testUrl}?params=${encodeURIComponent(
+      JSON.stringify(fixture.options),
+    )}`;
     const response = await fetch(testUrl)
       .then((response) => {
         if (response.status >= 400 && response.status < 600) {
-          fail(`${genericFixture.name}\n`);
+          fail(`${fixture.name}\n`);
           throw new Error("Bad response from server");
         }
         return response;
       })
       .catch((e) => {
-        fail(`${genericFixture.name}\n`);
+        fail(`${fixture.name}\n`);
         console.error(e, testUrl);
       });
     const body = await response.text();
     const bodyPretty = standardiseHtml(body);
-    const fixturePretty = standardiseHtml(genericFixture.html);
+    const fixturePretty = standardiseHtml(fixture.html);
     const mismatch = bodyPretty !== fixturePretty;
     if (mismatch) {
-      fail(`${genericFixture.name}\n`);
+      fail(`${fixture.name}\n`);
       console.error(testUrl);
       const diff = diffChars(bodyPretty, fixturePretty)
         .map(
           (part) =>
-            `${
-              part.added ? "\x1b[32m" : part.removed ? "\x1b[31m" : "\x1b[0m"
+            `${part.added ? "\x1b[32m" : part.removed ? "\x1b[31m" : "\x1b[0m"
             }${part.value === " " ? "█" : part.value}`,
         )
         .join("");
@@ -152,5 +182,52 @@ console.log("\nTemplates");
       process.exitCode = 1;
       throw new Error("Fixtures tests failed");
     } else {
-      pass(genericFixture.name);
-    }
+      pass(fixture.name);
+    }
+  }
+}
+
+const templatesDirectory = `${tnaFrontendDirectory}/nationalarchives/templates/`;
+const { fixtures } = JSON.parse(
+  fs.readFileSync(`${templatesDirectory}fixtures.json`,
+    "utf8",
+  ),
+);
+const genericFixture = fixtures.find(fixture => fixture.name === "generic")
+const testUrl = `${testEndpoint}templates/base`
+console.log("\nTemplates");
+const response = await fetch(testUrl)
+  .then((response) => {
+    if (response.status >= 400 && response.status < 600) {
+      fail(`${genericFixture.name}\n`);
+      throw new Error("Bad response from server");
+    }
+    return response;
+  })
+  .catch((e) => {
+    fail(`${genericFixture.name}\n`);
+    console.error(e, testUrl);
+  });
+const body = await response.text();
+const bodyPretty = standardiseHtml(body);
+const fixturePretty = standardiseHtml(genericFixture.html);
+const mismatch = bodyPretty !== fixturePretty;
+if (mismatch) {
+  fail(`${genericFixture.name}\n`);
+  console.error(testUrl);
+  const diff = diffChars(bodyPretty, fixturePretty)
+    .map(
+      (part) =>
+        `${part.added ? "\x1b[32m" : part.removed ? "\x1b[31m" : "\x1b[0m"
+        }${part.value === " " ? "█" : part.value}`,
+    )
+    .join("");
+  console.log(diff);
+  console.log("\n");
+  console.log("GREEN text shows expected content that wasn't rendered");
+  console.log("RED text shows rendered content that wasn't expected");
+  process.exitCode = 1;
+  throw new Error("Fixtures tests failed");
+} else {
+  pass(genericFixture.name);
+}

test/app/__init__.py

@@ -5,9 +5,11 @@ def create_app():
     app = Flask(__name__, template_folder="../../tna_frontend_jinja/templates")
 
     from .components import bp as components_bp
+    from .utilities import bp as utilities_bp
     from .templates import bp as templates_bp
 
     app.register_blueprint(components_bp, url_prefix="/components")
+    app.register_blueprint(utilities_bp, url_prefix="/utilities")
     app.register_blueprint(templates_bp, url_prefix="/templates")
 
     return app

test/app/components/routes.py

@@ -80,11 +80,6 @@ def gallery():
     return render_component("gallery.html")
 
 
-@bp.route("/grid")
-def grid():
-    return render_component("grid.html")
-
-
 @bp.route("/global-header")
 def globalHeader():
     return render_component("global-header.html")

test/app/utilities/__init__.py

@@ -0,0 +1,5 @@
+from flask import Blueprint
+
+bp = Blueprint("utilities", __name__, template_folder="test-templates")
+
+from test.app.utilities import routes  # noqa: E402,F401

test/app/utilities/routes.py

@@ -0,0 +1,15 @@
+import json
+from test.app.utilities import bp
+
+from flask import render_template, request
+
+
+def render_component(template):
+    params = request.args.get("params")
+    context = json.loads(params) if params else {}
+    return render_template(template, context=context)
+
+
+@bp.route("/grid")
+def grid():
+    return render_component("grid.html")

test/app/utilities/test-templates/grid.html

@@ -0,0 +1,2 @@
+{%- from "utilities/grid/macro.html" import tnaGrid -%}
+{{ tnaGrid(context) }}