Merge pull request #239 from MichaelFlucher/BLOCKS-228

BLOCKS-228 Strings for Scripts, Looks and Sounds are undefined

.vscode/launch.json

@@ -11,7 +11,7 @@
             "url": "http://localhost:8080",
             "webRoot": "${workspaceFolder}",
             "sourceMapPathOverrides": {
-                "webpack://CatBlocks/./*": "${workspaceFolder}/*"
+                "webpack:///./*": "${workspaceFolder}/*"
             }
         },
         {

src/library/css/share.css

@@ -101,6 +101,11 @@ img {
   cursor: pointer;
 }
 
+.catblocks-tab-icon {
+  height: 2rem;
+  font-size: 2rem;
+}
+
 .catblocks-script {
   padding: 0 20px;
 }

src/library/js/share/share.js

@@ -600,8 +600,8 @@ export class Share {
       'data-parent': `#${accordionID}`,
       'data-object': object.name
     });
-    const currentLocaleValues = Blockly.CatblocksMsgs.getCurrentLocaleValues();
-    this.generateTabs(objectContentContainer, objectID, object, currentLocaleValues);
+
+    this.generateTabs(objectContentContainer, objectID, object);
     const contentContainer = this.generateOrInjectNewDOM(objectContentContainer, 'div', {
       class: 'tab-content card-body'
     });
@@ -615,13 +615,13 @@ export class Share {
 
     let objectsWorkspace = undefined;
     if (this.config.renderScripts) {
-      objectsWorkspace = this.generateScripts(contentContainer, objectID, object, currentLocaleValues, scriptToDisplay);
+      objectsWorkspace = this.generateScripts(contentContainer, objectID, object, scriptToDisplay);
     }
     if (this.config.renderLooks) {
-      this.generateLooks(contentContainer, objectID, object, currentLocaleValues, options);
+      this.generateLooks(contentContainer, objectID, object, options);
     }
     if (this.config.renderSounds) {
-      this.generateSounds(contentContainer, objectID, object, currentLocaleValues, options);
+      this.generateSounds(contentContainer, objectID, object, options);
     }
     return objectsWorkspace;
   }
@@ -631,18 +631,17 @@ export class Share {
    * @param {Element} container
    * @param {string} objectID
    * @param {Object} object
-   * @param {Object} currentLocaleValues
    * @param {Object} [options=defaultOptions.object]
    */
-  generateSounds(container, objectID, object, currentLocaleValues, options = defaultOptions.object) {
+  generateSounds(container, objectID, object, options = defaultOptions.object) {
     const soundsContainer = this.generateOrInjectNewDOM(container, 'div', {
       class: 'tab-pane fade p-3',
       id: `${objectID}-sounds`,
       role: 'tabpanel',
       'aria-labelledby': `${objectID}-sounds-tab`
     });
 
-    const noSoundsText = 'No ' + currentLocaleValues['SOUNDS'] + ' found';
+    const noSoundsText = 'No Sounds found';
     if (!object || !object.soundList || object.soundList.length <= 0) {
       soundsContainer.appendChild(
         this.generateOrInjectNewDOM(
@@ -717,7 +716,7 @@ export class Share {
     }
 
     if (failed > 0) {
-      const failedSoundsText = 'ERROR parsing ' + failed + ' ' + currentLocaleValues['SOUNDS'];
+      const failedSoundsText = 'ERROR parsing ' + failed + ' Sounds';
       soundsContainer.appendChild(
         this.generateOrInjectNewDOM(
           soundsContainer,
@@ -736,18 +735,17 @@ export class Share {
    * @param {Element} container
    * @param {string} objectID
    * @param {Object} object
-   * @param {Object} currentLocaleValues
    * @param {Object} [options=defaultOptions.object]
    */
-  generateLooks(container, objectID, object, currentLocaleValues, options = defaultOptions.object) {
+  generateLooks(container, objectID, object, options = defaultOptions.object) {
     const looksContainer = this.generateOrInjectNewDOM(container, 'div', {
       class: 'tab-pane fade p-3',
       id: `${objectID}-looks`,
       role: 'tabpanel',
       'aria-labelledby': `${objectID}-looks-tab`
     });
 
-    const noLooksText = 'No ' + currentLocaleValues['LOOKS'] + ' found';
+    const noLooksText = 'No Looks found';
     if (!object || !object.lookList || object.lookList.length <= 0) {
       looksContainer.appendChild(
         this.generateOrInjectNewDOM(
@@ -863,7 +861,7 @@ export class Share {
     }
 
     if (failed > 0) {
-      const failedLooksText = 'ERROR parsing ' + failed + ' ' + currentLocaleValues['LOOKS'];
+      const failedLooksText = 'ERROR parsing ' + failed + ' Looks';
       looksContainer.appendChild(
         this.generateOrInjectNewDOM(
           looksContainer,
@@ -930,17 +928,17 @@ export class Share {
    * @param {Element} container
    * @param {string} objectID
    * @param {Object} object
-   * @param {Object} currentLocaleValues
+   * @param {number} scriptToDisplay
    */
-  generateScripts(container, objectID, object, currentLocaleValues, scriptToDisplay) {
+  generateScripts(container, objectID, object, scriptToDisplay) {
     const wrapperContainer = this.generateOrInjectNewDOM(container, 'div', {
       class: 'tab-pane show active fade p-3',
       id: `${objectID}-scripts`,
       role: 'tabpanel',
       'aria-labelledby': `${objectID}-scripts-tab`
     });
     if (!object || !object.scriptList || object.scriptList.length <= 0) {
-      const noScriptText = 'No ' + currentLocaleValues['SCRIPTS'] + ' found';
+      const noScriptText = 'No Scripts found';
       wrapperContainer.appendChild(
         this.generateOrInjectNewDOM(
           wrapperContainer,
@@ -1058,7 +1056,7 @@ export class Share {
     }
 
     if (failed > 0) {
-      const failedScriptText = 'ERROR parsing ' + failed + ' ' + currentLocaleValues['SCRIPTS'];
+      const failedScriptText = 'ERROR parsing ' + failed + ' Scripts';
       wrapperContainer.appendChild(
         this.generateOrInjectNewDOM(
           wrapperContainer,
@@ -1078,9 +1076,8 @@ export class Share {
    * @param {Element} container
    * @param {string} objectID
    * @param {Object} object
-   * @param {Object} currentLocaleValues
    */
-  generateTabs(container, objectID, object, currentLocaleValues) {
+  generateTabs(container, objectID, object) {
     if (!object) {
       object = {
         scriptList: [],
@@ -1112,6 +1109,12 @@ export class Share {
       const liScript = this.generateOrInjectNewDOM(ul, 'li', {
         class: 'nav-item'
       });
+      let mediapath = `${this.config.shareRoot}${this.config.media}`;
+      // full link or absolute path given
+      if (this.config.media.startsWith('http') || this.config.media.startsWith('/')) {
+        mediapath = this.config.media;
+      }
+
       this.generateOrInjectNewDOM(
         liScript,
         'a',
@@ -1124,7 +1127,7 @@ export class Share {
           'aria-controls': 'scripts',
           'aria-selected': 'true'
         },
-        `${currentLocaleValues['SCRIPTS']} (${object.scriptList.length})`
+        `<img class="catblocks-tab-icon" src="${mediapath}scripts.svg" /> (${object.scriptList.length})`
       );
     }
 
@@ -1144,7 +1147,7 @@ export class Share {
           'aria-controls': 'looks',
           'aria-selected': 'false'
         },
-        `${currentLocaleValues['LOOKS']} (${object.lookList.length})`
+        `<i id="code-view-toggler" class="material-icons catblocks-tab-icon">visibility</i> (${object.lookList.length})`
       );
     }
 
@@ -1164,7 +1167,7 @@ export class Share {
           'aria-controls': 'sounds',
           'aria-selected': 'false'
         },
-        `${currentLocaleValues['SOUNDS']} (${object.soundList.length})`
+        `<i id="code-view-toggler" class="material-icons catblocks-tab-icon">volume_up</i> (${object.soundList.length})`
       );
     }
   }

src/library/js/share/utils.js

@@ -83,7 +83,7 @@ export const injectNewDom = (container, tagName, attributes, textContent) => {
     subContainer.setAttribute(attrKey, attributes[attrKey]);
   });
   if (typeof textContent !== 'undefined') {
-    subContainer.textContent = textContent;
+    subContainer.innerHTML = textContent;
   }
   getDomElement(container).appendChild(subContainer);
 
@@ -97,7 +97,7 @@ export const generateNewDOM = (container, tagName, attrs, textContent) => {
   }
 
   if (textContent) {
-    newElement.textContent = textContent;
+    newElement.innerHTML = textContent;
   }
 
   if (container) {

test/jsunit/msg/msg.test.js

@@ -1,7 +1,7 @@
 /**
  * @description Msg tests
  */
-/* global share, shareUtils, page, SERVER, playground, playgroundWS, toolboxWS, Blockly */
+/* global share, page, SERVER, playground, playgroundWS, toolboxWS, Blockly */
 /* eslint no-global-assign:0 */
 'use strict';
 
@@ -201,19 +201,23 @@ describe('share displays language of UI elements correctly', () => {
     const defaultLanguageObject = JSON.parse(
       utils.readFileSync(`${utils.PATHS.CATBLOCKS_MSGS}${defaultLanguage}.json`)
     );
-    await page.evaluate(defaultLanguage => {
-      return Blockly.CatblocksMsgs.setLocale(defaultLanguage);
+    await page.evaluate(pDefaultLanguage => {
+      return Blockly.CatblocksMsgs.setLocale(pDefaultLanguage);
     }, defaultLanguage);
-    expect(await executeShareLanguageUITest(defaultLanguageObject)).toBeTruthy();
+
+    const result = await executeShareLanguageUITest(defaultLanguageObject);
+    expect(result).toBeTruthy();
   });
 
   test('check >de< language of tabs and error messages of scripts, looks and sounds', async () => {
     const testLanguage = 'de';
     const testLanguageObject = JSON.parse(utils.readFileSync(`${utils.PATHS.CATBLOCKS_MSGS}${testLanguage}.json`));
-    await page.evaluate(testLanguage => {
-      return Blockly.CatblocksMsgs.setLocale(testLanguage);
+    await page.evaluate(pTestLanguage => {
+      return Blockly.CatblocksMsgs.setLocale(pTestLanguage);
     }, testLanguage);
-    expect(await executeShareLanguageUITest(testLanguageObject)).toBeTruthy();
+
+    const result = await executeShareLanguageUITest(testLanguageObject);
+    expect(result).toBeTruthy();
   });
 
   test('check if unknown >es_US< language is handled as >es<', async () => {
@@ -222,10 +226,12 @@ describe('share displays language of UI elements correctly', () => {
     const fallbackLanguageObject = JSON.parse(
       utils.readFileSync(`${utils.PATHS.CATBLOCKS_MSGS}${fallbackLanguage}.json`)
     );
-    await page.evaluate(testLanguage => {
-      return Blockly.CatblocksMsgs.setLocale(testLanguage);
+    await page.evaluate(pTestLanguage => {
+      return Blockly.CatblocksMsgs.setLocale(pTestLanguage);
     }, testLanguage);
-    expect(await executeShareLanguageUITest(fallbackLanguageObject)).toBeTruthy();
+
+    const result = await executeShareLanguageUITest(fallbackLanguageObject);
+    expect(result).toBeTruthy();
   });
 
   test('check if invalid >de_XY< language is handled as >de<', async () => {
@@ -234,10 +240,12 @@ describe('share displays language of UI elements correctly', () => {
     const fallbackLanguageObject = JSON.parse(
       utils.readFileSync(`${utils.PATHS.CATBLOCKS_MSGS}${fallbackLanguage}.json`)
     );
-    await page.evaluate(testLanguage => {
-      return Blockly.CatblocksMsgs.setLocale(testLanguage);
+    await page.evaluate(pTestLanguage => {
+      return Blockly.CatblocksMsgs.setLocale(pTestLanguage);
     }, testLanguage);
-    expect(await executeShareLanguageUITest(fallbackLanguageObject)).toBeTruthy();
+
+    const result = await executeShareLanguageUITest(fallbackLanguageObject);
+    expect(result).toBeTruthy();
   });
 
   test('check if >xy_za< language is handled as default >en<', async () => {
@@ -246,45 +254,63 @@ describe('share displays language of UI elements correctly', () => {
     const fallbackLanguageObject = JSON.parse(
       utils.readFileSync(`${utils.PATHS.CATBLOCKS_MSGS}${fallbackLanguage}.json`)
     );
-    await page.evaluate(testLanguage => {
-      return Blockly.CatblocksMsgs.setLocale(testLanguage);
+    await page.evaluate(pTestLanguage => {
+      return Blockly.CatblocksMsgs.setLocale(pTestLanguage);
     }, testLanguage);
-    expect(await executeShareLanguageUITest(fallbackLanguageObject)).toBeTruthy();
+
+    const result = await executeShareLanguageUITest(fallbackLanguageObject);
+    expect(result).toBeTruthy();
   });
 
   async function executeShareLanguageUITest(languageObject) {
-    return await page.evaluate(languageObject => {
+    const catObj = {
+      scenes: [
+        {
+          name: 'testscene',
+          objectList: [
+            {
+              name: 'tobject',
+              scriptList: [
+                {
+                  name: 'StartScript',
+                  brickList: [
+                    {
+                      name: 'WaitBrick',
+                      loopOrIfBrickList: [],
+                      elseBrickList: [],
+                      formValues: {},
+                      colorVariation: 0
+                    },
+                    {
+                      name: 'SceneStartBrick',
+                      loopOrIfBrickList: [],
+                      elseBrickList: [],
+                      formValues: {},
+                      colorVariation: 0
+                    }
+                  ],
+                  formValues: {}
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    };
+
+    await page.evaluate(pObj => {
       const shareTestContainer = document.getElementById('shareprogs');
-      const xmlString = `<xml><scene type="tscene"><object type="tobject"></object></scene></xml>`;
-      const catXml = new DOMParser().parseFromString(xmlString, 'text/xml');
-      const catObj = {
-        scenes: [
-          {
-            name: 'tscene',
-            objectList: [
-              {
-                name: 'toobject'
-              }
-            ]
-          }
-        ]
-      };
-      share.renderProgramJSON('programID', shareTestContainer, catObj, catXml);
-      const obj1ID = shareUtils.generateID('programID-tscene-toobject');
-      const scriptsText = shareTestContainer.querySelector('#' + obj1ID + '-scripts').textContent;
-      const scriptsTabText = shareTestContainer.querySelector('#' + obj1ID + '-scripts-tab').textContent;
-      const looksText = shareTestContainer.querySelector('#' + obj1ID + '-looks').textContent;
-      const looksTabText = shareTestContainer.querySelector('#' + obj1ID + '-looks-tab').textContent;
-      const soundsText = shareTestContainer.querySelector('#' + obj1ID + '-sounds').textContent;
-      const soundsTabText = shareTestContainer.querySelector('#' + obj1ID + '-sounds-tab').textContent;
-      return (
-        scriptsTabText.includes(languageObject['SCRIPTS']) &&
-        scriptsText.includes(languageObject['SCRIPTS']) &&
-        looksTabText.includes(languageObject['LOOKS']) &&
-        looksText.includes(languageObject['LOOKS']) &&
-        soundsTabText.includes(languageObject['SOUNDS']) &&
-        soundsText.includes(languageObject['SOUNDS'])
-      );
-    }, languageObject);
+      share.renderProgramJSON('programID', shareTestContainer, pObj);
+    }, catObj);
+
+    let startBrickTextContent = await page.$eval(
+      '.catblocks-script-container svg .blocklyText',
+      node => node.textContent
+    );
+
+    // nbsp to space
+    startBrickTextContent = startBrickTextContent.replace(new RegExp(String.fromCharCode(160), 'g'), ' ');
+
+    return startBrickTextContent == languageObject['EVENT_WHENSCENESTARTS'];
   }
 });