- Provide a flexible mechanism for key-based lookup with fallback opt…

…ions in support of content updates related to ASL-4413

- Include tests to validate that the snippet component can correctly handle fallbacks when attempting to retrieve templates

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ukhomeoffice/asl-components",
-  "version": "13.2.1",
+  "version": "13.5.0",
   "description": "React components for ASL layouts and elements",
   "main": "src/index.jsx",
   "styles": "styles/index.scss",

src/snippet/index.jsx

@@ -4,13 +4,27 @@ import { connect } from 'react-redux';
 import Markdown from '../markdown';
 import { render } from 'mustache';
 
+function getTemplate(content, primary, fallback) {
+    const keysToTry = [primary, ...(Array.isArray(fallback) ? fallback : [fallback])];
+
+    for (let key of keysToTry) {
+        const template = get(content, key);
+        if (template != undefined) {
+            return template;
+        }
+    }
+
+    return undefined;
+}
+
 export const Snippet = ({ content, children, optional, fallback, ...props }) => {
-    const str = get(content, children, get(content, fallback));
+    const str = getTemplate(content, children, fallback);
     if (str === undefined && optional) {
         return null;
+
     }
     if (str === undefined) {
-        throw new Error(`Failed to lookup content snippet: ${children}`);
+        return `Failed to lookup content snippet: ${children}`;
     }
     if (typeof str !== 'string') {
         throw new Error(`Invalid content snippet for key ${children}: ${JSON.stringify(str)}`);

src/snippet/index.spec.jsx

@@ -42,4 +42,16 @@ two`
     expect(wrapper.html()).toEqual(paragraphs);
   });
 
+  test('can accept single fallback', () => {
+    const wrapper = render(<div><Snippet content={content} fallback={'paragraphs'}>non.existent</Snippet></div>);
+    expect(wrapper.find('p').length).toEqual(2);
+    expect(wrapper.html()).toEqual(paragraphs);
+  });
+
+  test('can accept multiple fallbacks', () => {
+    const wrapper = render(<div><Snippet content={content} fallback={['non.existent.2', 'paragraphs', 'list']}>non.existent</Snippet></div>);
+    expect(wrapper.find('p').length).toEqual(2);
+    expect(wrapper.html()).toEqual(paragraphs);
+  });
+
 });