@windward/core 0.8.0 → 0.9.1

package/helpers/tinymce/WindwardPlugins.ts

@@ -1,6 +1,6 @@
 import { Scanner } from 'accessibility-scanner'
-import local from '../../i18n/index'
 import _ from 'lodash'
+import local from '../../i18n/index'
 
 /**
  * Class representing the WindwardPlugins.
@@ -9,11 +9,9 @@ export class WindwardPlugins {
     editor: any
     formula: any
     fillInBlank: any
-    private window: any;
-
+    private window: any
 
     constructor(editor: any) {
-
         this.editor = editor
         this.formula = undefined
         this.fillInBlank = undefined
@@ -21,16 +19,18 @@ export class WindwardPlugins {
         this.register()
     }
 
-    public $t(key: string, replacements: string[]=[]): string {
-        const lang = local.messages[navigator.languages[0]];  // Get the browser language
-        let str = _.get(lang, key);  // Get the message string using lodash's get function
+    public $t(key: string, replacements: string[] = []): string {
+        const lang = local.messages[_.get(navigator, 'languages[0]', 'en-US')] // Get the browser language
+        let str = _.get(lang, key) // Get the message string using lodash's get function
 
-        str = str.replace(/{(\d+)}/g, (match, number) => replacements[number] ?? match);
+        str = str.replace(
+            /{(\d+)}/g,
+            (match: any, number: any) => replacements[number] ?? match
+        )
 
-        return str;
+        return str
     }
 
-
     /**
      * registers an icon with the given icon name and SVG path.
      *
@@ -40,18 +40,24 @@ export class WindwardPlugins {
      * @return {void}
      */
     private registerIcon(iconName: string, svgPath: string) {
-        this.editor.ui.registry.addIcon(
-            iconName,
-            svgPath
-        )
+        this.editor.ui.registry.addIcon(iconName, svgPath)
     }
     /**
      * Adds icons to the editor's UI registry.
      */
     private addIcons() {
-        this.registerIcon('mathIcon', '<svg  x="0px" y="0px"width="20px" height="20px" viewBox="0 0 445.878 445.878" style="enable-background:new 0 0 445.878 445.878;"><path d="M426.024,86.447H209.705l-84.911,298.911c-2.568,7.967-9.854,13.482-18.22,13.771c-0.236,0-0.464,0.006-0.688,0.006 c-8.092,0-15.41-4.924-18.436-12.478l-34.714-86.782H19.851C8.884,299.876,0,290.986,0,280.022 c0-10.965,8.893-19.854,19.851-19.854H66.18c8.109,0,15.421,4.941,18.436,12.483l19.237,48.09l72.472-260.218 c2.639-8.213,10.279-13.781,18.903-13.781h230.798c10.97,0,19.854,8.89,19.854,19.851S436.988,86.447,426.024,86.447z M436.723,353.227l-78.259-87.904l74.576-82.783c1.318-1.454,1.638-3.547,0.857-5.341c-0.804-1.791-2.577-2.946-4.54-2.946h-47.18 c-1.442,0-2.802,0.629-3.759,1.72l-50.059,58.047l-49.674-58.029c-0.939-1.103-2.317-1.738-3.771-1.738h-49.334 c-1.956,0-3.729,1.149-4.521,2.929c-0.81,1.785 0.479,3.875,0.824,5.332l73.743,82.81l-77.641,87.923 c-1.297,1.465-1.605,3.552 0.813,5.325c0.813,1.785,2.586,2.92,4.528,2.92h48.9c1.472,0,2.867-0.65,3.807-1.785l51.819-62.181 l53.05,62.229c0.951,1.11,2.328,1.743,3.782,1.743h49.97c1.962,0,3.735-1.141,4.527-2.926 C438.354,356.779,438.035,354.692,436.723,353.227z"/></svg>');
-        this.registerIcon('fibIcon', '<svg width="20px" height="20px" viewBox="0 0 24 24"><path d="M17,7H22V17H17V19A1,1 0 0,0 18,20H20V22H17.5C16.95,22 16,21.55 16,21C16,21.55 15.05,22 14.5,22H12V20H14A1,1 0 0,0 15,19V5A1,1 0 0,0 14,4H12V2H14.5C15.05,2 16,2.45 16,3C16,2.45 16.95,2 17.5,2H20V4H18A1,1 0 0,0 17,5V7M2,7H13V9H4V15H13V17H2V7M20,15V9H17V15H20Z" /></svg>');
-        this.registerIcon('glossaryIcon', '<svg viewBox="0 0 24 24" width="20px" height="20px" ><path d="M3,15H1V3A2,2 0 0,1 3,1H19V3H3V15M12,23A1,1 0 0,1 11,22V19H7A2,2 0 0,1 5,17V7A2,2 0 0,1 7,5H21A2,2 0 0,1 23,7V17A2,2 0 0,1 21,19H16.9L13.2,22.71C13,22.89 12.76,23 12.5,23H12M9,9V11H19V9H9M9,13V15H17V13H9Z"></path></svg>');
+        this.registerIcon(
+            'mathIcon',
+            '<svg  x="0px" y="0px"width="20px" height="20px" viewBox="0 0 445.878 445.878" style="enable-background:new 0 0 445.878 445.878;"><path d="M426.024,86.447H209.705l-84.911,298.911c-2.568,7.967-9.854,13.482-18.22,13.771c-0.236,0-0.464,0.006-0.688,0.006 c-8.092,0-15.41-4.924-18.436-12.478l-34.714-86.782H19.851C8.884,299.876,0,290.986,0,280.022 c0-10.965,8.893-19.854,19.851-19.854H66.18c8.109,0,15.421,4.941,18.436,12.483l19.237,48.09l72.472-260.218 c2.639-8.213,10.279-13.781,18.903-13.781h230.798c10.97,0,19.854,8.89,19.854,19.851S436.988,86.447,426.024,86.447z M436.723,353.227l-78.259-87.904l74.576-82.783c1.318-1.454,1.638-3.547,0.857-5.341c-0.804-1.791-2.577-2.946-4.54-2.946h-47.18 c-1.442,0-2.802,0.629-3.759,1.72l-50.059,58.047l-49.674-58.029c-0.939-1.103-2.317-1.738-3.771-1.738h-49.334 c-1.956,0-3.729,1.149-4.521,2.929c-0.81,1.785 0.479,3.875,0.824,5.332l73.743,82.81l-77.641,87.923 c-1.297,1.465-1.605,3.552 0.813,5.325c0.813,1.785,2.586,2.92,4.528,2.92h48.9c1.472,0,2.867-0.65,3.807-1.785l51.819-62.181 l53.05,62.229c0.951,1.11,2.328,1.743,3.782,1.743h49.97c1.962,0,3.735-1.141,4.527-2.926 C438.354,356.779,438.035,354.692,436.723,353.227z"/></svg>'
+        )
+        this.registerIcon(
+            'fibIcon',
+            '<svg width="20px" height="20px" viewBox="0 0 24 24"><path d="M17,7H22V17H17V19A1,1 0 0,0 18,20H20V22H17.5C16.95,22 16,21.55 16,21C16,21.55 15.05,22 14.5,22H12V20H14A1,1 0 0,0 15,19V5A1,1 0 0,0 14,4H12V2H14.5C15.05,2 16,2.45 16,3C16,2.45 16.95,2 17.5,2H20V4H18A1,1 0 0,0 17,5V7M2,7H13V9H4V15H13V17H2V7M20,15V9H17V15H20Z" /></svg>'
+        )
+        this.registerIcon(
+            'glossaryIcon',
+            '<svg viewBox="0 0 24 24" width="20px" height="20px" ><path d="M3,15H1V3A2,2 0 0,1 3,1H19V3H3V15M12,23A1,1 0 0,1 11,22V19H7A2,2 0 0,1 5,17V7A2,2 0 0,1 7,5H21A2,2 0 0,1 23,7V17A2,2 0 0,1 21,19H16.9L13.2,22.71C13,22.89 12.76,23 12.5,23H12M9,9V11H19V9H9M9,13V15H17V13H9Z"></path></svg>'
+        )
     }
     /**
      * Opens the equation editor window in the TinyMCE editor.
@@ -61,8 +67,8 @@ export class WindwardPlugins {
         this.editor.addCommand('equation-window', (data: any) => {
             return this.editor.windowManager.openUrl({
                 url: '/plugins/tinymce/math',
-                width: .75*this.window.innerWidth,
-                height: .9*this.window.innerHeight,
+                width: 0.75 * this.window.innerWidth,
+                height: 0.9 * this.window.innerHeight,
                 title: 'Equation editor',
                 buttons: [
                     {
@@ -79,7 +85,7 @@ export class WindwardPlugins {
                     if (data.currentTarget) {
                         this.editor.selection.select(data.currentTarget)
                     }
-                     this.editor.selection.setContent(
+                    this.editor.selection.setContent(
                         `        <span class='windward-math-content'>` +
                             this.formula +
                             `</span> `
@@ -95,7 +101,10 @@ export class WindwardPlugins {
                             this.formula = message.content
                             break
                         case 'math-plugin-mounted':
-                            this.window.postMessage({ latex: data.latex ?? '' }, '*')
+                            this.window.postMessage(
+                                { latex: data.latex ?? '' },
+                                '*'
+                            )
                             break
                     }
                 },
@@ -103,67 +112,77 @@ export class WindwardPlugins {
         })
     }
 
-  /**
-   * Adds custom buttons to the editor's user interface registry.
-   */
-  private addButtons() {
-
-    this.addButtonToEditor(
-      "mathButton",
-      "mathIcon",
-        this.$t('windward.core.components.utils.tiny_mce_wrapper.math'),
-      () => {
-        this.editor.execCommand("equation-window", true);
-      }
-    );
-    this.addButtonToEditor(
-      "glossaryButton",
-      "glossaryIcon",
-        this.$t('windward.core.components.utils.tiny_mce_wrapper.glossary'),
-      () => {
-        this.editor.formatter.apply("glossary");
-      }
-    );
-    this.addButtonToEditor(
-      "fibInsertButton",
-      "fibIcon",
-        this.$t('windward.core.components.utils.tiny_mce_wrapper.fill_blank'),
-      () => {
-        this.editor.execCommand("fib-window", true);
-      }
-    );
-      this.addButtonToEditor(
-          "fibFormatButton",
-          "fibIcon",
-          this.$t('windward.core.components.utils.tiny_mce_wrapper.fill_blank'),
-          () => {
-              this.editor.formatter.apply("fib");
-          }
-      );
+    /**
+     * Adds custom buttons to the editor's user interface registry.
+     */
+    private addButtons() {
+        this.addButtonToEditor(
+            'mathButton',
+            'mathIcon',
+            this.$t('windward.core.components.utils.tiny_mce_wrapper.math'),
+            () => {
+                this.editor.execCommand('equation-window', true)
+            }
+        )
+        this.addButtonToEditor(
+            'glossaryButton',
+            'glossaryIcon',
+            this.$t('windward.core.components.utils.tiny_mce_wrapper.glossary'),
+            () => {
+                this.editor.formatter.apply('glossary')
+            }
+        )
+        this.addButtonToEditor(
+            'fibInsertButton',
+            'fibIcon',
+            this.$t(
+                'windward.core.components.utils.tiny_mce_wrapper.fill_blank'
+            ),
+            () => {
+                this.editor.execCommand('fib-window', true)
+            }
+        )
+        this.addButtonToEditor(
+            'fibFormatButton',
+            'fibIcon',
+            this.$t(
+                'windward.core.components.utils.tiny_mce_wrapper.fill_blank'
+            ),
+            () => {
+                this.editor.formatter.apply('fib')
+            }
+        )
 
-      this.addButtonToEditor(
-        "a11yButton",
-        "accessibility-check",
-          this.$t('windward.core.components.utils.tiny_mce_wrapper.accessibility'),
-        () => {
-            this.setAccessibilityIssues(this.editor)
-      }
-      );
-  }
+        this.addButtonToEditor(
+            'a11yButton',
+            'accessibility-check',
+            this.$t(
+                'windward.core.components.utils.tiny_mce_wrapper.accessibility'
+            ),
+            () => {
+                this.setAccessibilityIssues(this.editor)
+            }
+        )
+    }
 
-  /**
-   * Add a button to the editor's UI registry
-   * @param {string} name Name of the button
-   * @param {string} icon Icon name of the button
-   * @param {() => void} onAction Callback function for the action to be done when the button is clicked
-   */
-  private addButtonToEditor(name: string, icon: string, tooltip: string, onAction: () => void) {
-    this.editor.ui.registry.addButton(name, {
-      icon: icon,
-      tooltip: tooltip,
-      onAction: onAction
-    });
-  }
+    /**
+     * Add a button to the editor's UI registry
+     * @param {string} name Name of the button
+     * @param {string} icon Icon name of the button
+     * @param {() => void} onAction Callback function for the action to be done when the button is clicked
+     */
+    private addButtonToEditor(
+        name: string,
+        icon: string,
+        tooltip: string,
+        onAction: () => void
+    ) {
+        this.editor.ui.registry.addButton(name, {
+            icon: icon,
+            tooltip: tooltip,
+            onAction: onAction,
+        })
+    }
     /**
      * Adds a menu item to the editor's UI registry.
      *
@@ -173,14 +192,19 @@ export class WindwardPlugins {
      * @param icon - The command to be executed on item click.
      * @returns {void}
      */
-    private addEditorMenuItem(itemKey: string, itemText: string, command: string, icon: string): void {
+    private addEditorMenuItem(
+        itemKey: string,
+        itemText: string,
+        command: string,
+        icon: string
+    ): void {
         this.editor.ui.registry.addMenuItem(itemKey, {
             text: itemText,
             icon: icon,
             onAction: () => {
                 this.editor.execCommand(command, true)
             },
-        });
+        })
     }
 
     /**
@@ -188,8 +212,13 @@ export class WindwardPlugins {
      * @returns {void}
      */
     private addMenuItems() {
-        this.addEditorMenuItem('math', 'Math', 'equation-window','mathIcon');
-        this.addEditorMenuItem('FIB', 'Fill in the blank', 'fib-window','fibIcon');
+        this.addEditorMenuItem('math', 'Math', 'equation-window', 'mathIcon')
+        this.addEditorMenuItem(
+            'FIB',
+            'Fill in the blank',
+            'fib-window',
+            'fibIcon'
+        )
     }
 
     /**
@@ -199,8 +228,7 @@ export class WindwardPlugins {
      * @returns {void}
      */
     private init() {
-
-       this.editor.on('init',()=>{
+        this.editor.on('init', () => {
             this.setOnDoubleClickEquationContent(this.editor)
             this.setOnClickFillInBlank(this.editor)
         })
@@ -212,11 +240,10 @@ export class WindwardPlugins {
      *
      * @returns {void} This method does not return anything.
      */
-   private setContent() {
-        this.editor.on('SetContent',  () => {
+    private setContent() {
+        this.editor.on('SetContent', () => {
             this.setOnDoubleClickEquationContent(this.editor)
             this.setOnClickFillInBlank(this.editor)
-
         })
     }
 
@@ -224,8 +251,8 @@ export class WindwardPlugins {
      * Adds event listeners for handling input events.
      * @return {void}
      */
-     setInputEvents() {
-        this.editor.on('input', () =>{
+    setInputEvents() {
+        this.editor.on('input', () => {
             this.setOnDoubleClickEquationContent(this.editor)
             this.setOnClickFillInBlank(this.editor)
         })
@@ -262,11 +289,13 @@ export class WindwardPlugins {
      * Opens a fill in the blank window in the TinyMCE editor.
      * @return {void}
      */
-    fillInBlankWindow()  {
-        this.editor.addCommand('fib-window',  (data: any) => {
+    fillInBlankWindow() {
+        this.editor.addCommand('fib-window', (data: any) => {
             return this.editor.windowManager.openUrl({
                 url: '/plugins/tinymce/FIB',
-                title: this.$t('windward.core.components.utils.tiny_mce_wrapper.fill_blank'),
+                title: this.$t(
+                    'windward.core.components.utils.tiny_mce_wrapper.fill_blank'
+                ),
                 buttons: [
                     {
                         type: 'cancel',
@@ -284,10 +313,10 @@ export class WindwardPlugins {
                     }
                     this.editor.selection.setContent(
                         `<span class='windward-fill-blank' data-feedback =` +
-                        this.fillInBlank.feedback +
-                        ` >` +
-                        this.fillInBlank.answer +
-                        `</span>`
+                            this.fillInBlank.feedback +
+                            ` >` +
+                            this.fillInBlank.answer +
+                            `</span>`
                     )
 
                     this.editor.windowManager.close()
@@ -304,7 +333,10 @@ export class WindwardPlugins {
                             break
                         case 'fib-plugin-mounted':
                             this.window.parent.postMessage(
-                                { answer: data.answer, feedback: data.feedback },
+                                {
+                                    answer: data.answer,
+                                    feedback: data.feedback,
+                                },
                                 '*'
                             )
                             break
@@ -343,28 +375,45 @@ export class WindwardPlugins {
         }
     }
 
-
     setAccessibilityIssues(editor: any) {
-        const tinymceDoc = editor.getDoc();
-        tinymceDoc.querySelectorAll("p.a11y-error").forEach(el => el.remove());
-        tinymceDoc.querySelectorAll(".a11y-error--highlight").forEach(el => el.classList.remove("a11y-error--highlight"));
-        const scanner = Scanner.fromHtmlText(editor.getContent());
-        const report = scanner.runScan();
+        const tinymceDoc = editor.getDoc()
+        tinymceDoc
+            .querySelectorAll('p.a11y-error')
+            .forEach((el: any) => el.remove())
+        tinymceDoc
+            .querySelectorAll('.a11y-error--highlight')
+            .forEach((el: any) => el.classList.remove('a11y-error--highlight'))
+        const scanner = Scanner.fromHtmlText(editor.getContent())
+        const report = scanner.runScan()
         report.forEach((lineItem: any) => {
-            lineItem.issues.forEach((item) => {
-                let elements = Array.prototype
-                    .slice.call(tinymceDoc.getElementsByTagName(item.tagName));
-                elements = elements.filter((res) => res.outerHTML === item.outerHTML) //only get the element that are on report
-                elements.forEach(element => {
-                    element.classList.add("a11y-error--highlight");
-                    element.outerHTML = element.outerHTML + "<p class=\"a11y-error\" ><em>" + this.$t("windward.core.components.utils.tiny_mce_wrapper." + lineItem.key) +" "+ this.$t("windward.core.components.utils.tiny_mce_wrapper.wcag_guidelines",[lineItem.success_criterion]) +".</em></p>";
-
-                });
-            });
-        });
+            lineItem.issues.forEach((item: any) => {
+                let elements = Array.prototype.slice.call(
+                    tinymceDoc.getElementsByTagName(item.tagName)
+                )
+                elements = elements.filter(
+                    (res) => res.outerHTML === item.outerHTML
+                )
+                // only get the element that are on report
+                elements.forEach((element) => {
+                    element.classList.add('a11y-error--highlight')
+                    element.outerHTML =
+                        element.outerHTML +
+                        '<p class="a11y-error" ><em>' +
+                        this.$t(
+                            'windward.core.components.utils.tiny_mce_wrapper.' +
+                                lineItem.key
+                        ) +
+                        ' ' +
+                        this.$t(
+                            'windward.core.components.utils.tiny_mce_wrapper.wcag_guidelines',
+                            [lineItem.success_criterion]
+                        ) +
+                        '.</em></p>'
+                })
+            })
+        })
     }
 
-
     /**
      * Registers the application, initializing necessary components and setting up the user interface.
      *
@@ -381,4 +430,3 @@ export class WindwardPlugins {
         this.init()
     }
 }
-

package/i18n/en-US/components/content/blocks/generate_questions.ts

@@ -1,4 +1,5 @@
 export default {
-    error: "Could not generate question from provided content.",
-    button_label: 'Generate Question'
+    error: 'Could not generate question from provided content.',
+    button_label: 'Generate Question',
+    selected_pages: 'Selected Page',
 }

package/i18n/en-US/components/utils/FillInBlank/FillInBlankInput.ts

@@ -10,4 +10,6 @@ export default {
     input_incorrect: "'{0}' is incorrect",
     reset: 'reset',
     try_again: 'Try Again',
+    user_input: 'Your answer: {0}',
+    correct_answer: 'Correct answer: {0}',
 }

package/i18n/en-US/components/utils/tiny_mce_wrapper.ts

@@ -1,5 +1,6 @@
 export default {
     accessibility: 'Accessibility',
+    aria_text: 'Press ALT + F10 or fn + option + F10 to get to the toolbar.',
     glossary: 'Glossary',
     term: 'Glossary Term',
     alternate_forms: 'Alternate Forms',

package/i18n/es-ES/components/content/blocks/generate_questions.ts

@@ -1,4 +1,5 @@
 export default {
     error: "No se pudo generar una pregunta a partir del contenido proporcionado.",
-    button_label: 'Generar pregunta'
+    button_label: 'Generar pregunta',
+    selected_pages: 'Página seleccionada',
 }

package/i18n/es-ES/components/utils/FillInBlank/FillInBlankInput.ts

@@ -10,4 +10,6 @@ export default {
     input_incorrect: "'{0}' es incorrecto",
     reset: 'restablecer',
     try_again: 'Intentar de nuevo',
+    user_input: 'Tu respuesta: {0}',
+    correct_answer: 'Respuesta correcta: {0}',
 }

package/i18n/es-ES/components/utils/tiny_mce_wrapper.ts

@@ -1,5 +1,7 @@
 export default {
     accessibility: 'Accesibilidad',
+    aria_text:
+        'Presione ALT + F10 o fn + opción + F10 para acceder a la barra de herramientas.',
     glossary: 'Glosario',
     term: 'Término del glosario',
     alternate_forms: 'Formas alternativas',
@@ -25,6 +27,5 @@ export default {
     wcag_guidelines: '(Directrices WCAG {0})',
     link_href_missing:
         'El Elemento HTML Anchor <a> debe contener un atributo href',
-    link_text_missing:
-        'El Elemento HTML Anchor <a> debe contener texto. ',
+    link_text_missing: 'El Elemento HTML Anchor <a> debe contener texto. ',
 }

package/i18n/sv-SE/components/content/blocks/generate_questions.ts

@@ -1,4 +1,5 @@
 export default {
     error: "Kunde inte generera en fråga från det tillhandahållna innehållet.",
-    button_label: 'Generera fråga'
+    button_label: 'Generera fråga',
+    selected_pages: 'Vald sida',
 }

package/i18n/sv-SE/components/utils/FillInBlank/FillInBlankInput.ts

@@ -10,4 +10,6 @@ export default {
     input_incorrect: "'{0}' är felaktig",
     reset: 'återställ',
     try_again: 'Try Again',
+    user_input: 'Ditt svar: {0}',
+    correct_answer: 'Rätt svar: {0}',
 }

package/i18n/sv-SE/components/utils/tiny_mce_wrapper.ts

@@ -1,5 +1,7 @@
 export default {
     accessibility: 'Tillgänglighet',
+    aria_text:
+        'Tryck på ALT + F10 eller fn + alternativ + F10 för att komma till verktygsfältet.',
     glossary: 'Ordlista',
     term: 'Ordlista Term',
     alternate_forms: 'Alternativa formulär',

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@windward/core",
-    "version": "0.8.0",
+    "version": "0.9.1",
     "description": "Windward UI Core Plugins",
     "main": "plugin.js",
     "scripts": {
@@ -38,6 +38,7 @@
         "@babel/preset-env": "^7.16.11",
         "@mindedge/vue-api-query": "^1.14.0",
         "@nuxtjs/axios": "^5.13.6",
+        "@nuxtjs/eslint-config-typescript": "^12.1.0",
         "@types/lodash": "^4.14.180",
         "@vue/cli-plugin-babel": "^5.0.4",
         "@vue/cli-plugin-typescript": "^5.0.4",

package/pages/glossary.vue

@@ -1,6 +1,6 @@
 <template>
     <v-row justify="center" align="center">
-        <v-col cols="10">
+        <v-col cols="12">
             <div class="d-flex mb-5">
                 <h2 class="mr-auto flex-grow-1">
                     {{ $t('windward.core.pages.glossary.title') }}

package/stylelint.config.js

@@ -0,0 +1,14 @@
+module.exports = {
+    extends: ['stylelint-config-standard', 'stylelint-config-prettier'],
+    // add your custom config here
+    // https://stylelint.io/user-guide/configure
+    rules: {
+        'at-rule-no-unknown': null,
+        'selector-pseudo-element-no-unknown': [
+            true,
+            {
+                ignorePseudoElements: ['v-deep'],
+            },
+        ],
+    },
+}

package/test/Components/Content/Blocks/OpenResponseCollate.spec.js

@@ -2,13 +2,13 @@ import { shallowMount } from '@vue/test-utils'
 import Vue from 'vue'
 import Vuetify from 'vuetify'
 import { defaultMocks } from '@/test/mocks'
-import Image from '@/components/Content/Blocks/Image.vue'
+import OpenResponseCollate from '@/components/Content/Blocks/OpenResponseCollate.vue'
 
 Vue.use(Vuetify)
 
-describe('Image content block component', () => {
+describe('OpenResponseCollate content block component', () => {
     test('is a Vue instance', () => {
-        const wrapper = shallowMount(Image, {
+        const wrapper = shallowMount(OpenResponseCollate, {
             vuetify: new Vuetify(),
             mocks: defaultMocks,
             propsData: {

package/test/Components/Settings/TabSettings.spec.js

@@ -27,8 +27,8 @@ describe('TabSettings', () => {
         })
         wrapper.vm.onAddElement()
         expect(wrapper.vm.$data.block.metadata.config.items).toEqual([
-            { tabHeader: '', expand: false, content: '' },
-            { tabHeader: '', expand: false, content: '' },
+            { tabHeader: '', expand: false, content: '', imageAsset: null },
+            { tabHeader: '', expand: false, content: '', imageAsset: null },
         ])
     })
 

package/test/__mocks__/contentBlockMock.js

@@ -20,6 +20,26 @@ jest.mock(
     { virtual: true }
 )
 
+jest.mock(
+    '~/components/Content/ImageAssetViewer.vue',
+    () => {
+        return jest.fn().mockImplementation(() => {
+            return { test: () => {} }
+        })
+    },
+    { virtual: true }
+)
+
+jest.mock(
+    '~/components/Content/Settings/ImageAssetSettings.vue',
+    () => {
+        return jest.fn().mockImplementation(() => {
+            return { test: () => {} }
+        })
+    },
+    { virtual: true }
+)
+
 jest.mock(
     '~/components/Content/Blocks/BaseContentBlock',
     () => {

package/test/helpers/GlossaryHelper.spec.js

@@ -20,6 +20,8 @@ const glossaryWord4 =
     '<span class="glossary-word" aria-label="Glossary Term">architect</span>'
 const glossaryWord5 =
     '<span class="glossary-word" aria-label="Glossary Term">universe</span>'
+const accentedGlossaryTerm =
+    '<span class="glossary-word" aria-label="Glossary Term">valores perif&eacute;ricos</span>'
 const glossaryWordSpaceBefore =
     '<span class="glossary-word" aria-label="Glossary Term"> Crisis change</span>'
 const glossaryWordSpaceAfter =
@@ -54,6 +56,13 @@ const glossary = [
         alternate_forms: ['crisis', 'change'],
         related_term: null,
     },
+    {
+        term: 'valores periféricos',
+        definition:
+            'Valores que son importantes pero no esenciales para una organización.',
+        tags: 'valores periféricos',
+        alternate_forms: [],
+    },
 ]
 const glossaryRender =
     '<p>Voluptas est quis ut <strong>consequatur.</strong> ' +
@@ -147,6 +156,14 @@ describe('GlossaryHelper ', () => {
             )
         ).toEqual([term])
     })
+    test('can retrieve verified glossary terms from accented words encoded to htmlentitites', () => {
+        expect(
+            GlossaryHelper.getContentVerifiedGlossaryTerms(
+                accentedGlossaryTerm + contentHtml,
+                glossary
+            )
+        ).toEqual([new GlossaryTerm(glossary[4])])
+    })
     test('can retrieve un-verified glossary terms', () => {
         expect(
             GlossaryHelper.getContentUnVerifiedGlossaryTerms(