From 673f4e6f22b34ddcd59f0a18b971d7632f2a00f8 Mon Sep 17 00:00:00 2001 From: mthege Date: Wed, 3 Jul 2024 13:56:09 +0200 Subject: [PATCH 1/4] feat/helper that conditionally render source path for logotype AB#3938 --- .../helpers/conditionalLogotypeSrc.js | 27 +++++++++++++++++++ 1 file changed, 27 insertions(+) create mode 100644 lib/handlebars/helpers/conditionalLogotypeSrc.js diff --git a/lib/handlebars/helpers/conditionalLogotypeSrc.js b/lib/handlebars/helpers/conditionalLogotypeSrc.js new file mode 100644 index 0000000..ca4f28b --- /dev/null +++ b/lib/handlebars/helpers/conditionalLogotypeSrc.js @@ -0,0 +1,27 @@ +'use strict' + +const Handlebars = require('handlebars') + +/** @function conditionalLogotypeSrc + * + * @param {string} theme -- theme on header: external, intranet or student-web + * @param {string} proxyPrefix + * + * @return dynamically rendered logotype, to match header + * + * @example + * {{conditionalLogotypeSrc 'external' '/prefix'}} + */ + +function conditionalLogotypeSrc(theme, proxyPrefix) { + const logotype = theme === 'external' ? 'logotype-white.svg' : 'logotype-blue.svg' + return new Handlebars.SafeString(`${proxyPrefix}/assets/logotype/${logotype}`) +} + +function registerConditionalLogotypeSrcHelper() { + Handlebars.registerHelper('conditionalLogotypeSrc', conditionalLogotypeSrc) +} + +module.exports = { + registerConditionalLogotypeSrcHelper, +} From 0cdce58b39510b249b445e17a76eeb9afe162500 Mon Sep 17 00:00:00 2001 From: mthege Date: Wed, 3 Jul 2024 13:56:59 +0200 Subject: [PATCH 2/4] Update ReadMe.md AB#3938 --- README.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/README.md b/README.md index f16de38..147eb94 100644 --- a/README.md +++ b/README.md @@ -24,6 +24,22 @@ registerHeaderContentHelper({ - {{ render name }} -- used by a layout to render script and style blocks in appropriate places - {{ withVersion url }} -- appends `'?v=' + version` to the passed string +## Conditional Logotype Src Helper + +A helper that dynamically renders the logotype's source path, avoiding the use of multiple image tags by setting the correct source path through server-side logic. + +```javascript +// Import the helper +const { registerConditionalLogotypeSrc } = require('@kth/kth-node-web-common/lib/handlebars/helpers/conditionalLogotypeSrc') + +// Register the helper +registerConditionalLogotypeSrc() + +// Use the helper in a template +{{conditionalLogotypeSrc theme proxyPrefix}} + +``` + ## Breadcrumb Helper Helper to generate breadcrumb markup. From 2420420dfc9b37aff95bcc7dc2dee82f9b34e476 Mon Sep 17 00:00:00 2001 From: mthege Date: Fri, 5 Jul 2024 10:53:00 +0200 Subject: [PATCH 3/4] Update helper description and add error handler --- lib/handlebars/helpers/conditionalLogotypeSrc.js | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/lib/handlebars/helpers/conditionalLogotypeSrc.js b/lib/handlebars/helpers/conditionalLogotypeSrc.js index ca4f28b..2f767ca 100644 --- a/lib/handlebars/helpers/conditionalLogotypeSrc.js +++ b/lib/handlebars/helpers/conditionalLogotypeSrc.js @@ -2,18 +2,21 @@ const Handlebars = require('handlebars') -/** @function conditionalLogotypeSrc +/** Dynamically generates the source URL for the logotype based on the provided theme and proxy prefix. * - * @param {string} theme -- theme on header: external, intranet or student-web - * @param {string} proxyPrefix + * @param {string} theme - The theme on the header: 'external', 'intranet', or 'student-web'. + * @param {string} proxyPrefix - The proxy prefix to prepend to the logotype URL. * - * @return dynamically rendered logotype, to match header + * @returns {Handlebars.SafeString} A Handlebars.SafeString containing the dynamically generated logotype URL. * * @example * {{conditionalLogotypeSrc 'external' '/prefix'}} */ function conditionalLogotypeSrc(theme, proxyPrefix) { + if (typeof proxyPrefix !== 'string') { + throw new Error('Invalid proxyPrefix: must be a string') + } const logotype = theme === 'external' ? 'logotype-white.svg' : 'logotype-blue.svg' return new Handlebars.SafeString(`${proxyPrefix}/assets/logotype/${logotype}`) } From 69e1fd53df409e085fa8dab47f91761f603bfd21 Mon Sep 17 00:00:00 2001 From: mthege Date: Fri, 5 Jul 2024 11:11:40 +0200 Subject: [PATCH 4/4] Add tests for conditionalLogotypeSrc --- .../conditionalLogotypeSrc.test.js.snap | 7 +++ .../helpers/conditionalLogotypeSrc.js | 1 + .../helpers/conditionalLogotypeSrc.test.js | 48 +++++++++++++++++++ 3 files changed, 56 insertions(+) create mode 100644 lib/handlebars/helpers/__snapshots__/conditionalLogotypeSrc.test.js.snap create mode 100644 lib/handlebars/helpers/conditionalLogotypeSrc.test.js diff --git a/lib/handlebars/helpers/__snapshots__/conditionalLogotypeSrc.test.js.snap b/lib/handlebars/helpers/__snapshots__/conditionalLogotypeSrc.test.js.snap new file mode 100644 index 0000000..d5f9e77 --- /dev/null +++ b/lib/handlebars/helpers/__snapshots__/conditionalLogotypeSrc.test.js.snap @@ -0,0 +1,7 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`conditionalLogotypeSrc should return logotype-blue.svg for intranet theme 1`] = `"/prefix/assets/logotype/logotype-blue.svg"`; + +exports[`conditionalLogotypeSrc should return logotype-blue.svg for student-web theme 1`] = `"/prefix/assets/logotype/logotype-blue.svg"`; + +exports[`conditionalLogotypeSrc should return logotype-white.svg for external theme 1`] = `"/prefix/assets/logotype/logotype-white.svg"`; diff --git a/lib/handlebars/helpers/conditionalLogotypeSrc.js b/lib/handlebars/helpers/conditionalLogotypeSrc.js index 2f767ca..d4f8985 100644 --- a/lib/handlebars/helpers/conditionalLogotypeSrc.js +++ b/lib/handlebars/helpers/conditionalLogotypeSrc.js @@ -26,5 +26,6 @@ function registerConditionalLogotypeSrcHelper() { } module.exports = { + conditionalLogotypeSrc, registerConditionalLogotypeSrcHelper, } diff --git a/lib/handlebars/helpers/conditionalLogotypeSrc.test.js b/lib/handlebars/helpers/conditionalLogotypeSrc.test.js new file mode 100644 index 0000000..2dda28a --- /dev/null +++ b/lib/handlebars/helpers/conditionalLogotypeSrc.test.js @@ -0,0 +1,48 @@ +const Handlebars = require('handlebars') +const { conditionalLogotypeSrc, registerConditionalLogotypeSrcHelper } = require('./conditionalLogotypeSrc') + +jest.mock('handlebars') + +Handlebars.SafeString = jest.fn().mockImplementation(str => ({ string: str })) + +describe('registerConditionalLogotypeSrcHelper', () => { + it('Registers conditionalLogotypeSrc helper', () => { + registerConditionalLogotypeSrcHelper() + expect(Handlebars.registerHelper).toHaveBeenCalledWith('conditionalLogotypeSrc', conditionalLogotypeSrc) + }) +}) + +describe('conditionalLogotypeSrc', () => { + it('should throw an error if proxyPrefix is not a string', () => { + const theme = 'external' + const invalidProxyPrefix = 123 + + expect(() => { + conditionalLogotypeSrc(theme, invalidProxyPrefix) + }).toThrow(new Error('Invalid proxyPrefix: must be a string')) + }) + + it('should return logotype-white.svg for external theme', () => { + const theme = 'external' + const proxyPrefix = '/prefix' + + const result = conditionalLogotypeSrc(theme, proxyPrefix) + expect(result.string).toMatchSnapshot() + }) + + it('should return logotype-blue.svg for intranet theme', () => { + const theme = 'intranet' + const proxyPrefix = '/prefix' + + const result = conditionalLogotypeSrc(theme, proxyPrefix) + expect(result.string).toMatchSnapshot() + }) + + it('should return logotype-blue.svg for student-web theme', () => { + const theme = 'student-web' + const proxyPrefix = '/prefix' + + const result = conditionalLogotypeSrc(theme, proxyPrefix) + expect(result.string).toMatchSnapshot() + }) +})