Fix cookie banner parameters and add fixtures (#38)

* Fix cookie banner parameters and add fixtures

* Update CHANGELOG.md

* Lint

CHANGELOG.md

@@ -15,6 +15,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Deprecated
 ### Removed
 ### Fixed
+
+- Cookie banner URL is now correctly used
+
 ### Security
 
 

src/nationalarchives/components/cookie-banner/cookie-banner.stories.js

@@ -5,7 +5,7 @@ import { within, userEvent } from "@storybook/testing-library";
 import Cookies from "../../lib/cookies.mjs";
 
 const argTypes = {
-  url: { control: "text" },
+  cookiesUrl: { control: "text" },
   policies: { control: "text" },
   cookiesPreferencesSetKey: { control: "text" },
   loadScriptsOnAccept: { control: "text" },
@@ -25,7 +25,7 @@ export default {
 };
 
 const Template = ({
-  url,
+  cookiesUrl,
   policies,
   cookiesPreferencesSetKey,
   loadScriptsOnAccept,
@@ -34,7 +34,7 @@ const Template = ({
 }) =>
   CookieBanner({
     params: {
-      url,
+      cookiesUrl,
       policies,
       cookiesPreferencesSetKey,
       loadScriptsOnAccept,

src/nationalarchives/components/cookie-banner/fixtures.json

@@ -1,4 +1,60 @@
 {
   "component": "cookie-banner",
-  "fixtures": []
+  "fixtures": [
+    {
+      "name": "minimal",
+      "options": {
+        "cookiesUrl": "/cookies"
+      },
+      "html": "<div class=\"tna-cookie-banner \" role=\"region\" aria-label=\"Cookie usage\" data-module=\"tna-cookie-banner\" data-policies=\"usage,settings\" data-preferenceskey=\"cookies_preferences_set\" hidden><div class=\"tna-container\"><div class=\"tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--prompt\"><h2 class=\"tna-heading-m\">This website uses cookies</h2><p>We use some essential cookies to make this service work.</p><p>We'd also like to use analytics cookies so we can understand how you use the service and make improvements.</p><div class=\"tna-button-group\"><button class=\"tna-button \" value=\"accept\">Accept cookies</button><button class=\"tna-button \" value=\"reject\">Reject cookies</button><a href=\"#\" class=\"tna-button tna-button--plain\" role=\"button\">Set cookie preferences</a></div></div><div class=\"tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--accepted\" tabindex=\"0\" hidden><p>You have accepted optional cookies. You can change your cookie settings on the <a href=\"#\">Cookies page</a>.</p><div class=\"tna-button-group\"><button class=\"tna-button \" value=\"close\">Close this message</button></div></div><div class=\"tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--rejected\" tabindex=\"0\" hidden><p>You have rejected optional cookies. You can change your cookie settings on the <a href=\"#\">Cookies page</a>.</p><div class=\"tna-button-group\"><button class=\"tna-button \" value=\"close\">Close this message</button></div></div></div></div>",
+      "hidden": false
+    },
+    {
+      "name": "custom preferences set key",
+      "options": {
+        "cookiesUrl": "/cookies",
+        "cookiesPreferencesSetKey": "custom"
+      },
+      "html": "<div class=\"tna-cookie-banner \" role=\"region\" aria-label=\"Cookie usage\" data-module=\"tna-cookie-banner\" data-policies=\"usage,settings\" data-preferenceskey=\"custom\" hidden><div class=\"tna-container\"><div class=\"tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--prompt\"><h2 class=\"tna-heading-m\">This website uses cookies</h2><p>We use some essential cookies to make this service work.</p><p>We'd also like to use analytics cookies so we can understand how you use the service and make improvements.</p><div class=\"tna-button-group\"><button class=\"tna-button \" value=\"accept\">Accept cookies</button><button class=\"tna-button \" value=\"reject\">Reject cookies</button><a href=\"#\" class=\"tna-button tna-button--plain\" role=\"button\">Set cookie preferences</a></div></div><div class=\"tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--accepted\" tabindex=\"0\" hidden><p>You have accepted optional cookies. You can change your cookie settings on the <a href=\"#\">Cookies page</a>.</p><div class=\"tna-button-group\"><button class=\"tna-button \" value=\"close\">Close this message</button></div></div><div class=\"tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--rejected\" tabindex=\"0\" hidden><p>You have rejected optional cookies. You can change your cookie settings on the <a href=\"#\">Cookies page</a>.</p><div class=\"tna-button-group\"><button class=\"tna-button \" value=\"close\">Close this message</button></div></div></div></div>",
+      "hidden": false
+    },
+    {
+      "name": "custom policies",
+      "options": {
+        "cookiesUrl": "/cookies",
+        "policies": "custom"
+      },
+      "html": "<div class=\"tna-cookie-banner \" role=\"region\" aria-label=\"Cookie usage\" data-module=\"tna-cookie-banner\" data-policies=\"custom\" data-preferenceskey=\"cookies_preferences_set\" hidden><div class=\"tna-container\"><div class=\"tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--prompt\"><h2 class=\"tna-heading-m\">This website uses cookies</h2><p>We use some essential cookies to make this service work.</p><p>We'd also like to use analytics cookies so we can understand how you use the service and make improvements.</p><div class=\"tna-button-group\"><button class=\"tna-button \" value=\"accept\">Accept cookies</button><button class=\"tna-button \" value=\"reject\">Reject cookies</button><a href=\"#\" class=\"tna-button tna-button--plain\" role=\"button\">Set cookie preferences</a></div></div><div class=\"tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--accepted\" tabindex=\"0\" hidden><p>You have accepted optional cookies. You can change your cookie settings on the <a href=\"#\">Cookies page</a>.</p><div class=\"tna-button-group\"><button class=\"tna-button \" value=\"close\">Close this message</button></div></div><div class=\"tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--rejected\" tabindex=\"0\" hidden><p>You have rejected optional cookies. You can change your cookie settings on the <a href=\"#\">Cookies page</a>.</p><div class=\"tna-button-group\"><button class=\"tna-button \" value=\"close\">Close this message</button></div></div></div></div>",
+      "hidden": false
+    },
+    {
+      "name": "add scripts on accept",
+      "options": {
+        "cookiesUrl": "/cookies",
+        "loadScriptsOnAccept": "my-usage-script.js"
+      },
+      "html": "<div class=\"tna-cookie-banner \" role=\"region\" aria-label=\"Cookie usage\" data-module=\"tna-cookie-banner\" data-policies=\"usage,settings\" data-preferenceskey=\"cookies_preferences_set\" data-acceptscripts=\"my-usage-script.js\" hidden><div class=\"tna-container\"><div class=\"tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--prompt\"><h2 class=\"tna-heading-m\">This website uses cookies</h2><p>We use some essential cookies to make this service work.</p><p>We'd also like to use analytics cookies so we can understand how you use the service and make improvements.</p><div class=\"tna-button-group\"><button class=\"tna-button \" value=\"accept\">Accept cookies</button><button class=\"tna-button \" value=\"reject\">Reject cookies</button><a href=\"#\" class=\"tna-button tna-button--plain\" role=\"button\">Set cookie preferences</a></div></div><div class=\"tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--accepted\" tabindex=\"0\" hidden><p>You have accepted optional cookies. You can change your cookie settings on the <a href=\"#\">Cookies page</a>.</p><div class=\"tna-button-group\"><button class=\"tna-button \" value=\"close\">Close this message</button></div></div><div class=\"tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--rejected\" tabindex=\"0\" hidden><p>You have rejected optional cookies. You can change your cookie settings on the <a href=\"#\">Cookies page</a>.</p><div class=\"tna-button-group\"><button class=\"tna-button \" value=\"close\">Close this message</button></div></div></div></div>",
+      "hidden": false
+    },
+    {
+      "name": "with classes",
+      "options": {
+        "cookiesUrl": "/cookies",
+        "classes": "tna-cookie-banner--fixture"
+      },
+      "html": "<div class=\"tna-cookie-banner tna-cookie-banner--fixture\" role=\"region\" aria-label=\"Cookie usage\" data-module=\"tna-cookie-banner\" data-policies=\"usage,settings\" data-preferenceskey=\"cookies_preferences_set\" hidden><div class=\"tna-container\"><div class=\"tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--prompt\"><h2 class=\"tna-heading-m\">This website uses cookies</h2><p>We use some essential cookies to make this service work.</p><p>We'd also like to use analytics cookies so we can understand how you use the service and make improvements.</p><div class=\"tna-button-group\"><button class=\"tna-button \" value=\"accept\">Accept cookies</button><button class=\"tna-button \" value=\"reject\">Reject cookies</button><a href=\"#\" class=\"tna-button tna-button--plain\" role=\"button\">Set cookie preferences</a></div></div><div class=\"tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--accepted\" tabindex=\"0\" hidden><p>You have accepted optional cookies. You can change your cookie settings on the <a href=\"#\">Cookies page</a>.</p><div class=\"tna-button-group\"><button class=\"tna-button \" value=\"close\">Close this message</button></div></div><div class=\"tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--rejected\" tabindex=\"0\" hidden><p>You have rejected optional cookies. You can change your cookie settings on the <a href=\"#\">Cookies page</a>.</p><div class=\"tna-button-group\"><button class=\"tna-button \" value=\"close\">Close this message</button></div></div></div></div>",
+      "hidden": false
+    },
+    {
+      "name": "with attributes",
+      "options": {
+        "cookiesUrl": "/cookies",
+        "attributes": {
+          "data-fixturetest": "pass"
+        }
+      },
+      "html": "<div class=\"tna-cookie-banner \" role=\"region\" aria-label=\"Cookie usage\" data-module=\"tna-cookie-banner\" data-policies=\"usage,settings\" data-preferenceskey=\"cookies_preferences_set\" data-fixturetest=\"pass\" hidden><div class=\"tna-container\"><div class=\"tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--prompt\"><h2 class=\"tna-heading-m\">This website uses cookies</h2><p>We use some essential cookies to make this service work.</p><p>We'd also like to use analytics cookies so we can understand how you use the service and make improvements.</p><div class=\"tna-button-group\"><button class=\"tna-button \" value=\"accept\">Accept cookies</button><button class=\"tna-button \" value=\"reject\">Reject cookies</button><a href=\"#\" class=\"tna-button tna-button--plain\" role=\"button\">Set cookie preferences</a></div></div><div class=\"tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--accepted\" tabindex=\"0\" hidden><p>You have accepted optional cookies. You can change your cookie settings on the <a href=\"#\">Cookies page</a>.</p><div class=\"tna-button-group\"><button class=\"tna-button \" value=\"close\">Close this message</button></div></div><div class=\"tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--rejected\" tabindex=\"0\" hidden><p>You have rejected optional cookies. You can change your cookie settings on the <a href=\"#\">Cookies page</a>.</p><div class=\"tna-button-group\"><button class=\"tna-button \" value=\"close\">Close this message</button></div></div></div></div>",
+      "hidden": false
+    }
+  ]
 }

tasks/test-fixtures.js

@@ -7,6 +7,8 @@ require.extensions[".njk"] = function (module, filename) {
   module.exports = fs.readFileSync(filename, "utf8");
 };
 
+nunjucks.configure(__dirname + "/../src");
+
 const componentsDirectory = "src/nationalarchives/components/";
 const componentFixturesFile = "/fixtures.json";
 

tasks/update-fixtures.js

@@ -6,6 +6,8 @@ require.extensions[".njk"] = function (module, filename) {
   module.exports = fs.readFileSync(filename, "utf8");
 };
 
+nunjucks.configure(__dirname + "/../src");
+
 const componentsDirectory = "src/nationalarchives/components/";
 const componentFixturesFile = "/fixtures.json";