@lion/ui 0.22.0 → 0.24.0

package/components/localize/test/LocalizeMixin.test.js

@@ -1,6 +1,5 @@
 import { LitElement } from 'lit';
 import { isDirectiveResult } from 'lit/directive-helpers.js';
-
 import {
   aTimeout,
   defineCE,
@@ -27,18 +26,15 @@ import {
 
 describe('LocalizeMixin', () => {
   const localizeManager = getLocalizeManager();
-
   afterEach(() => {
     resetFakeImport();
     localizeTearDown();
   });
-
   it('loads namespaces defined in "get localizeNamespaces()" when created before attached to DOM', async () => {
     const myElementNs = {
       /** @param {string} locale */
-      'my-element': locale => fakeImport(`./my-element/${locale}.js`),
+      'my-element': (locale) => fakeImport(`./my-element/${locale}.js`),
     };
-
     const tagString = defineCE(
       class MyElement extends LocalizeMixin(LitElement) {
         static get localizeNamespaces() {
@@ -47,38 +43,31 @@ describe('LocalizeMixin', () => {
       },
     );
     const tag = unsafeStatic(tagString);
-
     setupEmptyFakeImportsFor(['my-element'], ['en-GB']);
-
     const loadNamespaceSpy = sinon.spy(localizeManager, 'loadNamespace');
     await fixture(html`<${tag}></${tag}>`);
-
     expect(loadNamespaceSpy.callCount).to.equal(1);
     expect(loadNamespaceSpy.calledWith(myElementNs)).to.be.true;
-
     loadNamespaceSpy.restore();
   });
-
   it('ignores duplicates in "get localizeNamespaces()" chain', async () => {
     const defaultNs = {
       /** @param {string} loc */
-      default: loc => fakeImport(`./default/${loc}.js`),
+      default: (loc) => fakeImport(`./default/${loc}.js`),
     };
     const parentElementNs = {
       /** @param {string} loc */
-      'parent-element': loc => fakeImport(`./parent-element/${loc}.js`),
+      'parent-element': (loc) => fakeImport(`./parent-element/${loc}.js`),
     };
     const childElementNs = {
       /** @param {string} loc */
-      'child-element': loc => fakeImport(`./child-element/${loc}.js`),
+      'child-element': (loc) => fakeImport(`./child-element/${loc}.js`),
     };
-
     class ParentElement extends LocalizeMixin(LitElement) {
       static get localizeNamespaces() {
         return [parentElementNs, defaultNs, ...super.localizeNamespaces];
       }
     }
-
     const tagString = defineCE(
       class ChildElement extends LocalizeMixin(ParentElement) {
         static get localizeNamespaces() {
@@ -87,72 +76,53 @@ describe('LocalizeMixin', () => {
       },
     );
     const tag = unsafeStatic(tagString);
-
     setupEmptyFakeImportsFor(['default', 'parent-element', 'child-element'], ['en-GB']);
-
     const loadNamespaceSpy = sinon.spy(localizeManager, 'loadNamespace');
-
     await fixture(html`<${tag}></${tag}>`);
     expect(loadNamespaceSpy.callCount).to.equal(3);
     expect(loadNamespaceSpy.calledWith(childElementNs)).to.be.true;
     expect(loadNamespaceSpy.calledWith(defaultNs)).to.be.true;
     expect(loadNamespaceSpy.calledWith(parentElementNs)).to.be.true;
-
     loadNamespaceSpy.restore();
   });
-
   it('calls "onLocaleReady()" after namespaces were loaded for the first time (only if attached to DOM)', async () => {
     const myElementNs = {
       /** @param {string} locale */
-      'my-element': locale => fakeImport(`./my-element/${locale}.js`),
+      'my-element': (locale) => fakeImport(`./my-element/${locale}.js`),
     };
-
     class MyElement extends LocalizeMixin(LitElement) {
       static get localizeNamespaces() {
         return [myElementNs, ...super.localizeNamespaces];
       }
-
       onLocaleReady() {}
     }
     const tagString = defineCE(MyElement);
-
     setupEmptyFakeImportsFor(['my-element'], ['en-GB']);
-
-    const el = /** @type {MyElement} */ (document.createElement(tagString));
+    const el = /** @type {MyElement} */ document.createElement(tagString);
     const wrapper = await fixture('<div></div>');
     const onLocaleReadySpy = sinon.spy(el, 'onLocaleReady');
-
     await el.localizeNamespacesLoaded;
     expect(onLocaleReadySpy.callCount).to.equal(0);
-
     wrapper.appendChild(el);
-
     await el.localizeNamespacesLoaded;
     expect(onLocaleReadySpy.callCount).to.equal(1);
   });
-
   it('calls "onLocaleChanged(newLocale, oldLocale)" after locale was changed (only if attached to DOM)', async () => {
     const myElementNs = {
       /** @param {string} locale */
-      'my-element': locale => fakeImport(`./my-element/${locale}.js`),
+      'my-element': (locale) => fakeImport(`./my-element/${locale}.js`),
     };
-
     class MyOtherElement extends LocalizeMixin(LitElement) {
       static get localizeNamespaces() {
         return [myElementNs, ...super.localizeNamespaces];
       }
     }
-
     const tagString = defineCE(MyOtherElement);
-
     setupEmptyFakeImportsFor(['my-element'], ['en-GB', 'nl-NL', 'ru-RU']);
-
-    const el = /** @type {MyOtherElement} */ (document.createElement(tagString));
+    const el = /** @type {MyOtherElement} */ document.createElement(tagString);
     const wrapper = await fixture('<div></div>');
     const onLocaleChangedSpy = sinon.spy(el, 'onLocaleChanged');
-
     await el.localizeNamespacesLoaded;
-
     localizeManager.locale = 'nl-NL';
     await el.localizeNamespacesLoaded;
     expect(onLocaleChangedSpy.callCount).to.equal(0);
@@ -166,13 +136,11 @@ describe('LocalizeMixin', () => {
     expect(onLocaleChangedSpy.callCount).to.equal(2);
     expect(onLocaleChangedSpy.calledWithExactly('ru-RU', 'nl-NL')).to.be.true;
   });
-
   it('dispatches "localeChanged" after loader promises have resolved, allowing to call .msg() immediately', async () => {
     const myElementNs = {
       /** @param {string} locale */
-      'my-element': locale => fakeImport(`./my-element/${locale}.js`),
+      'my-element': (locale) => fakeImport(`./my-element/${locale}.js`),
     };
-
     class MyOtherElement extends LocalizeMixin(LitElement) {
       static get localizeNamespaces() {
         return [myElementNs, ...super.localizeNamespaces];
@@ -191,59 +159,45 @@ describe('LocalizeMixin', () => {
         this.foo = localizeManager.msg('my-element:foo');
       }
     }
-
     const tagString = defineCE(MyOtherElement);
-
     setupEmptyFakeImportsFor(['my-element'], ['en-GB', 'nl-NL', 'ru-RU']);
-
-    const el = /** @type {MyOtherElement} */ (document.createElement(tagString));
+    const el = /** @type {MyOtherElement} */ document.createElement(tagString);
     const wrapper = await fixture('<div></div>');
     wrapper.appendChild(el);
-
     localizeManager.locale = 'nl-NL';
     await el.localizeNamespacesLoaded;
     expect(el.foo).to.equal('bar-nl-NL');
-
     localizeManager.locale = 'ru-RU';
     await el.localizeNamespacesLoaded;
     expect(el.foo).to.equal('bar-ru-RU');
   });
-
   it('calls "onLocaleUpdated()" after both "onLocaleReady()" and "onLocaleChanged()"', async () => {
     const myElementNs = {
       /** @param {string} locale */
-      'my-element': locale => fakeImport(`./my-element/${locale}.js`),
+      'my-element': (locale) => fakeImport(`./my-element/${locale}.js`),
     };
-
     class MyElement extends LocalizeMixin(LitElement) {
       static get localizeNamespaces() {
         return [myElementNs, ...super.localizeNamespaces];
       }
-
       onLocaleUpdated() {}
     }
-
     const tagString = defineCE(MyElement);
-
     setupEmptyFakeImportsFor(['my-element'], ['en-GB', 'nl-NL']);
-
-    const el = /** @type {MyElement} */ (document.createElement(tagString));
+    const el = /** @type {MyElement} */ document.createElement(tagString);
     const wrapper = await fixture('<div></div>');
     const onLocaleUpdatedSpy = sinon.spy(el, 'onLocaleUpdated');
-
     wrapper.appendChild(el);
     await el.localizeNamespacesLoaded;
     expect(onLocaleUpdatedSpy.callCount).to.equal(1);
-
     localizeManager.locale = 'nl-NL';
     await el.localizeNamespacesLoaded;
     expect(onLocaleUpdatedSpy.callCount).to.equal(2);
   });
-
   it('should have the localizeNamespacesLoaded available within "onLocaleUpdated()"', async () => {
     const myElementNs = {
       /** @param {string} locale */
-      'my-element': locale => fakeImport(`./my-element/${locale}.js`),
+      'my-element': (locale) => fakeImport(`./my-element/${locale}.js`),
     };
     setupFakeImport('./my-element/en-GB.js', {
       default: {
@@ -255,50 +209,39 @@ describe('LocalizeMixin', () => {
         label: 'two',
       },
     });
-
     class MyElement extends LocalizeMixin(LitElement) {
       static get localizeNamespaces() {
         return [myElementNs, ...super.localizeNamespaces];
       }
-
       async onLocaleUpdated() {
         super.onLocaleUpdated();
         this.label = localizeManager.msg('my-element:label');
       }
     }
-
     const tagString = defineCE(MyElement);
-    const el = /** @type {MyElement} */ (document.createElement(tagString));
+    const el = /** @type {MyElement} */ document.createElement(tagString);
     el.connectedCallback();
-
     await nextFrame(); // needed as both are added to the micro task que
     expect(el.label).to.equal('one');
-
     localizeManager.locale = 'nl-NL';
     await el.localizeNamespacesLoaded;
     expect(el.label).to.equal('two');
   });
-
   it('calls "requestUpdate()" after locale was changed', async () => {
     const myElementNs = {
       /** @param {string} locale */
-      'my-element': locale => fakeImport(`./my-element/${locale}.js`),
+      'my-element': (locale) => fakeImport(`./my-element/${locale}.js`),
     };
-
     class MyElement extends LocalizeMixin(LitElement) {
       static get localizeNamespaces() {
         return [myElementNs, ...super.localizeNamespaces];
       }
     }
-
     setupEmptyFakeImportsFor(['my-element'], ['en-GB']);
-
     const tagString = defineCE(MyElement);
-    const el = /** @type {MyElement} */ (document.createElement(tagString));
+    const el = /** @type {MyElement} */ document.createElement(tagString);
     const updateSpy = sinon.spy(el, 'requestUpdate');
-
     el.connectedCallback();
-
     localizeManager.locale = 'nl-NL';
     await el.localizeNamespacesLoaded;
 
@@ -306,97 +249,81 @@ describe('LocalizeMixin', () => {
     await nextFrame();
     expect(updateSpy.callCount).to.equal(1);
   });
-
   it('has msgLit() which integrates with lit-html', async () => {
     const myElementNs = {
       /** @param {string} locale */
-      'my-element': locale => fakeImport(`./my-element/${locale}.js`),
+      'my-element': (locale) => fakeImport(`./my-element/${locale}.js`),
     };
     setupFakeImport('./my-element/en-GB.js', {
       default: {
         greeting: 'Hi!',
       },
     });
-
     class MyElement extends LocalizeMixin(LitElement) {
       static get localizeNamespaces() {
         return [myElementNs, ...super.localizeNamespaces];
       }
     }
-
     const tagString = defineCE(MyElement);
-    const el = /** @type {MyElement} */ (document.createElement(tagString));
+    const el = /** @type {MyElement} */ document.createElement(tagString);
     el.connectedCallback();
     const lionLocalizeMessageSpy = sinon.spy(localizeManager, 'msg');
-
     const messageDirective = el.msgLit('my-element:greeting');
     expect(lionLocalizeMessageSpy.callCount).to.equal(0);
-
     expect(isDirectiveResult(messageDirective)).to.be.true;
-
     await aTimeout(1); // wait for directive to "resolve"
 
     expect(lionLocalizeMessageSpy.callCount).to.equal(1);
     expect(lionLocalizeMessageSpy.calledWith('my-element:greeting')).to.be.true;
-
     const message = el.msgLit('my-element:greeting');
     expect(message).to.equal('Hi!');
     expect(typeof message).to.equal('string');
     expect(lionLocalizeMessageSpy.callCount).to.equal(2);
     expect(lionLocalizeMessageSpy.calledWith('my-element:greeting')).to.be.true;
-
     lionLocalizeMessageSpy.restore();
   });
-
   it('has a Promise "localizeNamespacesLoaded" which resolves once translations are available', async () => {
     const myElementNs = {
       /** @param {string} locale */
-      'my-element': locale => fakeImport(`./my-element/${locale}.js`, 25),
+      'my-element': (locale) => fakeImport(`./my-element/${locale}.js`, 25),
     };
     setupFakeImport('./my-element/en-GB.js', {
       default: {
         greeting: 'Hi!',
       },
     });
-
     class MyElement extends LocalizeMixin(LitElement) {
       static get localizeNamespaces() {
         return [myElementNs, ...super.localizeNamespaces];
       }
     }
     const tagString = defineCE(MyElement);
-    const el = /** @type {MyElement} */ (document.createElement(tagString));
-
+    const el = /** @type {MyElement} */ document.createElement(tagString);
     const messageDirective = el.msgLit('my-element:greeting');
     expect(isDirectiveResult(messageDirective)).to.be.true;
-
     await el.localizeNamespacesLoaded;
     expect(el.msgLit('my-element:greeting')).to.equal('Hi!');
   });
-
   it('renders only once all translations have been loaded (if BaseElement supports it)', async () => {
     const myElementNs = {
       /** @param {string} locale */
-      'my-element': locale => fakeImport(`./my-element/${locale}.js`, 25),
+      'my-element': (locale) => fakeImport(`./my-element/${locale}.js`, 25),
     };
     setupFakeImport('./my-element/en-GB.js', {
       default: {
         greeting: 'Hi!',
       },
     });
-
     class MyLocalizedClass extends LocalizeMixin(LitElement) {
       static get localizeNamespaces() {
         return [myElementNs, ...super.localizeNamespaces];
       }
-
       render() {
         return html`<p>${this.msgLit('my-element:greeting')}</p>`;
       }
     }
-
     const tag = defineCE(MyLocalizedClass);
-    const el = /** @type {MyLocalizedClass} */ (await fixtureSync(`<${tag}></${tag}>`));
+    const el = /** @type {MyLocalizedClass} */ await fixtureSync(`<${tag}></${tag}>`);
     expect(el.shadowRoot).to.exist;
     if (el.shadowRoot) {
       expect(el.shadowRoot.children.length).to.equal(0);
@@ -408,11 +335,10 @@ describe('LocalizeMixin', () => {
       }
     }
   });
-
   it('re-render on locale change once all translations are loaded (if BaseElement supports it)', async () => {
     const myElementNs = {
       /** @param {string} locale */
-      'my-element': locale => fakeImport(`./my-element/${locale}.js`, 25),
+      'my-element': (locale) => fakeImport(`./my-element/${locale}.js`, 25),
     };
     setupFakeImport('./my-element/en-GB.js', {
       default: {
@@ -424,25 +350,21 @@ describe('LocalizeMixin', () => {
         greeting: 'Howdy!',
       },
     });
-
     class MyLocalizedClass extends LocalizeMixin(LitElement) {
       static get localizeNamespaces() {
         return [myElementNs, ...super.localizeNamespaces];
       }
-
       render() {
         return html`<p>${this.msgLit('my-element:greeting')}</p>`;
       }
     }
-
     const tagName = defineCE(MyLocalizedClass);
     const tag = unsafeStatic(tagName);
-    const el = /** @type {MyLocalizedClass} */ (await fixture(html`<${tag}></${tag}>`));
+    const el = /** @type {MyLocalizedClass} */ await fixture(html`<${tag}></${tag}>`);
     await el.updateComplete;
-
     expect(el.shadowRoot).to.exist;
     if (el.shadowRoot) {
-      const p = /** @type {HTMLParagraphElement} */ (el.shadowRoot.querySelector('p'));
+      const p = /** @type {HTMLParagraphElement} */ el.shadowRoot.querySelector('p');
       expect(p.innerText).to.equal('Hi!');
       localizeManager.locale = 'en-US';
       expect(p.innerText).to.equal('Hi!');
@@ -452,39 +374,33 @@ describe('LocalizeMixin', () => {
       expect(p.innerText).to.equal('Howdy!');
     }
   });
-
   it('it can still render async by setting "static get waitForLocalizeNamespaces() { return false; }" (if BaseElement supports it)', async () => {
     const myElementNs = {
       /** @param {string} locale */
-      'my-element': locale => fakeImport(`./my-element/${locale}.js`, 50),
+      'my-element': (locale) => fakeImport(`./my-element/${locale}.js`, 50),
     };
     setupFakeImport('./my-element/en-GB.js', {
       default: {
         greeting: 'Hi!',
       },
     });
-
     class MyLocalizedClass extends LocalizeMixin(LitElement) {
       static get waitForLocalizeNamespaces() {
         return false;
       }
-
       static get localizeNamespaces() {
         return [myElementNs, ...super.localizeNamespaces];
       }
-
       render() {
         return html`<p>${this.msgLit('my-element:greeting')}</p>`;
       }
     }
-
     const tag = defineCE(MyLocalizedClass);
-
-    const el = /** @type {MyLocalizedClass} */ (await fixture(`<${tag}></${tag}>`));
+    const el = /** @type {MyLocalizedClass} */ await fixture(`<${tag}></${tag}>`);
     await el.updateComplete;
     expect(el.shadowRoot).to.exist;
     if (el.shadowRoot) {
-      const p = /** @type {HTMLParagraphElement} */ (el.shadowRoot.querySelector('p'));
+      const p = /** @type {HTMLParagraphElement} */ el.shadowRoot.querySelector('p');
       expect(p.innerText).to.equal('');
       await el.localizeNamespacesLoaded;
       await el.updateComplete;