Add innerText to dbp-translation (cypress support), rework showcase example

packages/common/dbp-common-demo.js

@@ -301,6 +301,7 @@ html {
                     <div class="control" id="dbp-translated-demo">
                         <dbp-translated subscribe="lang">
                             <div slot="de">
+                                <!---->
                                 Dieser Text ist Deutsch und wird Englisch werden wenn man die
                                 Sprache auf Englisch stellt.
                             </div>
@@ -314,13 +315,12 @@ html {
                 <div class="content">
                     <h2>Translation Demo</h2>
                     <div class="control" id="dbp-translation-demo">
-                        <dbp-translation subscribe="lang, lang-dir" key="link" var='{"linkDE": "https://www.tugraz.at/home/", "linkEN": "https://www.tugraz.at/en/home/"}' unsafe></dbp-translation><br/>
-                        <dbp-translation subscribe="lang, lang-dir" key="theme-switcher-demo"></dbp-translation>
+                        <dbp-translation id="dbp-translation-link" subscribe="lang, lang-dir" key="link" var='{"linkDE": "https://www.tugraz.at/home/", "linkEN": "https://www.tugraz.at/en/home/"}' unsafe></dbp-translation><br/>
+                        <dbp-translation id="dbp-translation-showcase" subscribe="lang, lang-dir" key="toolkit-showcase"></dbp-translation><br/>
+                        <dbp-translation id="dbp-translation-theme-switcher" subscribe="lang, lang-dir" key="theme-switcher-demo"></dbp-translation><br/>
                         <dbp-theme-switcher subscribe="lang, lang-dir"
-                            themes='[{"class": "light-theme", "icon": "sun", "name": "${this._i18n.t('dbp.themes.light-mode')}"}, {"class": "dark-theme", "icon": "night", "name": "${this._i18n.t('dbp.themes.dark-mode')}"}]'></dbp-theme-switcher>
-                        <dbp-translation key="toolkit-showcase" subscribe="lang, lang-dir"></dbp-translation>
-                        <dbp-translation key="toolkit-showcase-link" var='{"link1": "https://www.i18next.com/translation-function/interpolation"}' subscribe="lang, lang-dir" unsafe></dbp-translation>
-                        <dbp-translation key="abc" subscribe="lang, lang-dir"></dbp-translation>
+                                            themes='[{"class": "light-theme", "icon": "sun", "name": "Light Mode"}, {"class": "dark-theme", "icon": "night", "name": "Dark Mode"}]'></dbp-theme-switcher>
+                        <dbp-translation key="abc" subscribe="lang, lang-dir"></dbp-translation> <!-- shouldnt be displayed -->
                     </div>
                 </div>
             </section>

packages/common/src/translation.js

@@ -15,6 +15,7 @@ export class Translation extends DBPLitElement {
         // dir and i18next instance of translation overrides
         this._i18n = createInstance();
         this.langDir = '';
+        this.innerText = '';
 
     }
 
@@ -72,17 +73,25 @@ export class Translation extends DBPLitElement {
           this._i18n.options.fallbackNS :
           getOverrideNamespace(this._i18n.options.fallbackNS);
 
+        let translation = "";
+
         // request to i18n translation
-        let translation = (() => {
-          if (this.interpolation && this.unsafe)
-            return unsafeHTML(this._i18n.t(this.key, this.interpolation));
-          else if (this.interpolation)
-            return this._i18n.t(this.key, this.interpolation);
-          else if (this.unsafe)
-            return unsafeHTML(this._i18n.t(this.key));
-          else
-            return this._i18n.t(this.key);
-        })();
+        if (this.interpolation && this.unsafe) {
+            this.innerText = this._i18n.t(this.key, this.interpolation);
+            translation = unsafeHTML(this._i18n.t(this.key, this.interpolation));
+        }
+        else if (this.interpolation) {
+            this.innerText = this._i18n.t(this.key, this.interpolation);
+            translation = this._i18n.t(this.key, this.interpolation);
+        }
+        else if (this.unsafe) {
+            this.innerText = this._i18n.t(this.key);
+            translation = unsafeHTML(this._i18n.t(this.key));
+        }
+        else {
+            this.innerText = this._i18n.t(this.key);
+            translation = this._i18n.t(this.key);
+        }
 
 
 
@@ -92,16 +101,18 @@ export class Translation extends DBPLitElement {
         let keyComment = "";
         if ((this._i18n.exists(overrideNamespace + ":" + this.key) && this._i18n.hasResourceBundle(this.lang, overrideNamespace))
               || window.location.hash.includes('debug')) {
-          keyComment = unsafeHTML("<!-- key: " + this.key + "-->");
+            keyComment = unsafeHTML("<!-- key: " + this.key + "-->");
         } else if (this._i18n.hasResourceBundle(this.lang, overrideNamespace)){
-          keyComment = unsafeHTML("<!-- key '" + this.key + "' not found! -->");
-          translation = "";
-          console.error("Key '" + this.key + "' not found!");
+            this.innerText = "";
+            translation = "";
+            keyComment = unsafeHTML("<!-- key '" + this.key + "' not found! -->");
+            console.error("Key '" + this.key + "' not found!");
         } else {
-          keyComment = unsafeHTML("<!-- key '" + this.key + "' and namespace '" + overrideNamespace + "' not found! -->");
-          translation = "";
+            this.innerText = "";
+            translation = "";
+            keyComment = unsafeHTML("<!-- key '" + this.key + "' and namespace '" + overrideNamespace + "' not found! -->");
+            console.error("Key '" + this.key + "' and namespace '" + overrideNamespace + "' not found!");
         }
-
         // load translation text
         return html`
             ${keyComment}