chore: enable webkit tests

Co-authored-by: Joren Broekema <Joren.Broekema@ing.com>
Co-authored-by: Yesil Ahmet <Yesil.Ahmet@ing.com>
Co-authored-by: Thijs Louisse <Thijs.Louisse@ing.com>

.changeset/short-scissors-poke.md

@@ -0,0 +1,17 @@
+---
+'@lion/combobox': patch
+'@lion/form-core': patch
+'@lion/form-integrations': patch
+'@lion/form': patch
+'@lion/input-date': patch
+'@lion/input-datepicker': patch
+'@lion/input-stepper': patch
+'@lion/input': patch
+'@lion/localize': patch
+'@lion/select-rich': patch
+'@lion/select': patch
+'@lion/switch': patch
+'@lion/tooltip': patch
+---
+
+Run tests also on webkit

packages/combobox/src/LionCombobox.js

@@ -397,8 +397,10 @@ export class LionCombobox extends OverlayMixin(LionListbox) {
    * @param {string} v
    */
   _setTextboxValue(v) {
+    if (this._inputNode.value !== v) {
       this._inputNode.value = v;
     }
+  }
 
   /**
    * For multiple choice, a subclasser could do something like:

packages/form-core/src/choice-group/ChoiceGroupMixin.js

@@ -50,12 +50,13 @@ const ChoiceGroupMixinImplementation = superclass =>
         this.__isInitialModelValue = false;
         this.registrationComplete.then(() => {
           this._setCheckedElements(value, checkCondition);
-          this.requestUpdate('modelValue');
+          this.requestUpdate('modelValue', this.__oldModelValue);
         });
       } else {
         this._setCheckedElements(value, checkCondition);
-        this.requestUpdate('modelValue');
+        this.requestUpdate('modelValue', this.__oldModelValue);
       }
+      this.__oldModelValue = this.modelValue;
     }
 
     get serializedValue() {
@@ -148,7 +149,10 @@ const ChoiceGroupMixinImplementation = superclass =>
 
     connectedCallback() {
       super.connectedCallback();
-      Promise.resolve().then(() => this.__resolveRegistrationComplete());
+      // Double microtask queue to account for Webkit race condition
+      Promise.resolve().then(() =>
+        Promise.resolve().then(() => this.__resolveRegistrationComplete()),
+      );
 
       this.registrationComplete.then(() => {
         this.__isInitialModelValue = false;
@@ -313,7 +317,8 @@ const ChoiceGroupMixinImplementation = superclass =>
         }
       });
       this.__setChoiceGroupTouched();
-      this.requestUpdate('modelValue');
+      this.requestUpdate('modelValue', this.__oldModelValue);
+      this.__oldModelValue = this.modelValue;
     }
   };
 

packages/form-core/test-suites/FormatMixin.suite.js

@@ -1,4 +1,5 @@
 import { LitElement } from '@lion/core';
+import { parseDate } from '@lion/localize';
 import { aTimeout, defineCE, expect, fixture, html, unsafeStatic } from '@open-wc/testing';
 import sinon from 'sinon';
 import { FormatMixin } from '../src/FormatMixin.js';
@@ -69,7 +70,7 @@ export function runFormatMixinSuite(customConfig) {
         if (options.viewValue) {
           return !options.toggleValue ? '5-5-2005' : '10-10-2010';
         }
-        return !options.toggleValue ? new Date('5/5/2005') : new Date('10/10/2010');
+        return !options.toggleValue ? parseDate('5-5-2005') : parseDate('10-10-2010');
       case Array:
         return !options.toggleValue ? ['foo', 'bar'] : ['baz', 'yay'];
       case Object:

packages/form-integrations/package.json

@@ -23,11 +23,11 @@
     "types"
   ],
   "scripts": {
-    "debug": "cd ../../ && yarn debug --group form-integration",
-    "debug:firefox": "cd ../../ && yarn debug:firefox --group form-integration",
-    "debug:webkit": "cd ../../ && yarn debug:webkit --group form-integration",
+    "debug": "cd ../../ && yarn debug --group form-integrations",
+    "debug:firefox": "cd ../../ && yarn debug:firefox --group form-integrations",
+    "debug:webkit": "cd ../../ && yarn debug:webkit --group form-integrations",
     "prepublishOnly": "../../scripts/npm-prepublish.js",
-    "test": "cd ../../ && yarn test:browser --group form-integration"
+    "test": "cd ../../ && yarn test:browser --group form-integrations"
   },
   "sideEffects": [
     "./docs/helper-wc/h-output.js"

packages/form-integrations/test/form-integrations.test.js

@@ -5,6 +5,7 @@ import './helpers/umbrella-form.js';
 describe('Form Integrations', () => {
   it('".serializedValue" returns all non disabled fields based on form structure', async () => {
     const el = await fixture(html`<umbrella-form></umbrella-form>`);
+    await el.updateComplete;
     const formEl = el._lionFormNode;
     expect(formEl.serializedValue).to.eql({
       bio: '',
@@ -29,6 +30,7 @@ describe('Form Integrations', () => {
 
   it('".formattedValue" returns all non disabled fields based on form structure', async () => {
     const el = await fixture(html`<umbrella-form></umbrella-form>`);
+    await el.updateComplete;
     const formEl = el._lionFormNode;
     expect(formEl.formattedValue).to.eql({
       bio: '',

packages/form-integrations/test/form-reset.test.js

@@ -123,6 +123,7 @@ describe(`Submitting/Resetting Form`, async () => {
   it('Submitting a form should make submitted true for all fields', async () => {
     el.querySelector('#submit_button').click();
     await elementUpdated(el);
+    await el.updateComplete;
     el.formElements.forEach(field => {
       expect(field.submitted).to.be.true;
     });
@@ -132,6 +133,7 @@ describe(`Submitting/Resetting Form`, async () => {
     el.querySelector('#submit_button').click();
     el.querySelector('#reset_button').click();
     await elementUpdated(el);
+    await el.updateComplete;
     expect(el.submitted).to.be.false;
     el.formElements.forEach(field => {
       expect(field.submitted).to.be.false;

packages/input-datepicker/test/lion-input-datepicker.test.js

@@ -170,6 +170,7 @@ describe('<lion-input-datepicker>', () => {
       expect(elObj.overlayController.isShown).to.equal(true);
       // Mimic user input: should fire the 'user-selected-date-changed' event
       await elObj.selectMonthDay(12);
+      await el.updateComplete; // safari take a little longer
       expect(elObj.overlayController.isShown).to.equal(false);
     });
 

packages/input-stepper/src/LionInputStepper.js

@@ -73,6 +73,7 @@ export class LionInputStepper extends LionInput {
     this.addEventListener('keydown', this.__keyDownHandler);
     this._inputNode.setAttribute('inputmode', 'decimal');
     this._inputNode.setAttribute('autocomplete', 'off');
+    this.setAttribute('aria-label', this.label);
     this.step = this.hasAttribute('step') ? this.step : 1;
     this.__setAriaLabelsAndValidator();
     this.__toggleSpinnerButtonsState();

packages/localize/src/date/formatDate.js

@@ -33,5 +33,5 @@ export function formatDate(date, options) {
   } catch (e) {
     formattedDate = '';
   }
-  return normalizeIntlDate(formattedDate);
+  return normalizeIntlDate(formattedDate, computedLocale, formatOptions);
 }

packages/localize/src/date/normalizeIntlDate.js

@@ -2,9 +2,11 @@
  * To filter out some added characters in IE
  *
  * @param {string} str
+ * @param {string} [locale='']
+ * @param {import('@lion/localize/types/LocalizeMixinTypes').FormatDateOptions} [options] Intl options are available
  * @returns {string}
  */
-export function normalizeIntlDate(str) {
+export function normalizeIntlDate(str, locale = '', { weekday, year, month, day } = {}) {
   const dateString = [];
   for (let i = 0, n = str.length; i < n; i += 1) {
     // remove unicode 160
@@ -18,5 +20,50 @@ export function normalizeIntlDate(str) {
     }
   }
 
-  return dateString.join('');
+  const result = dateString.join('');
+
+  // Normalize webkit date formatting without year
+  if (!year && weekday === 'long' && month === 'long' && day === '2-digit') {
+    const CHINESE_LOCALES = [
+      // Webkit has a space while chrome and firefox not. Example: ("10月12日 星期六")
+      'zh-CN',
+      'zh-Hans',
+      'zh-Hans-CN',
+      'zh-Hans-HK',
+      'zh-Hans-MO',
+      'zh-Hans-SG',
+      // Skip 'zh-Hant' and 'zh-Hant-TW', since webkit/firefox/chromium are aligned.
+      // 'zh-Hant',
+      // 'zh-Hant-TW',
+      'zh-Hant-HK',
+      'zh-Hant-MO',
+    ];
+
+    if (CHINESE_LOCALES.includes(locale)) {
+      return result.replace(' ', '');
+    }
+
+    if (result.indexOf(',') === -1 && locale === 'en-GB') {
+      // Saturday 12 October -> Saturday, 12 October
+      const match = result.match(/^(\w*) (\d*) (\w*)$/);
+      if (match !== null) {
+        return `${match[1]}, ${match[2]} ${match[3]}`;
+      }
+    }
+
+    if (result.indexOf(', ') !== -1 && locale === 'sk-SK') {
+      // sobota, 12. októbra -> sobota 12. októbra
+      return result.replace(', ', ' ');
+    }
+
+    if (locale === 'en-PH') {
+      // Saturday, October 12 -> Saturday, 12 October
+      const match = result.match(/^(\w*), (\w*) (\d*)$/);
+      if (match !== null) {
+        return `${match[1]}, ${match[3]} ${match[2]}`;
+      }
+    }
+  }
+
+  return result;
 }

packages/localize/src/date/parseDate.js

@@ -31,6 +31,7 @@ const memoizedGetDateFormatBasedOnLocale = memoize(getDateFormatBasedOnLocale);
 export function parseDate(dateString) {
   const stringToParse = addLeadingZero(dateString);
   let parsedString;
+
   switch (memoizedGetDateFormatBasedOnLocale(localize.locale)) {
     case 'day-month-year':
       parsedString = `${stringToParse.slice(6, 10)}/${stringToParse.slice(
@@ -53,11 +54,10 @@ export function parseDate(dateString) {
     default:
       parsedString = '0000/00/00';
   }
-  const parsedDate = new Date(parsedString);
-  // Check if parsedDate is not `Invalid Date`
-  // eslint-disable-next-line no-restricted-globals
-  if (!isNaN(parsedDate.getTime())) {
-    return parsedDate;
+
+  const [year, month, day] = parsedString.split('/').map(Number);
+  if (year > 0 && month > 0 && day > 0) {
+    return new Date(Date.UTC(year, month - 1, day));
   }
   return undefined;
 }

packages/localize/test/date/formatDate.test.js

@@ -5,6 +5,40 @@ import { localizeTearDown } from '../../test-helpers.js';
 import { formatDate } from '../../src/date/formatDate.js';
 import { parseDate } from '../../src/date/parseDate.js';
 
+const SUPPORTED_LOCALES = {
+  'bg-BG': 'Bulgarian',
+  'cs-CZ': 'Czech',
+  'de-DE': 'German (Germany)',
+  'en-AU': 'English (Australia)',
+  'en-GB': 'English (United Kingdom)',
+  'en-PH': 'English (Philippines)',
+  'en-US': 'English (United States)',
+  'es-ES': 'Spanish (Spain)',
+  'fr-FR': 'French (France)',
+  'fr-BE': 'French (Belgium)',
+  'hu-HU': 'Hungarian (Hungary)',
+  'id-ID': 'Indonesian (Indonesia)',
+  'it-IT': 'Italian (Italy)',
+  'nl-NL': 'Dutch (Netherlands)',
+  'nl-BE': 'Dutch (Belgium)',
+  'pl-PL': 'Polish (Poland)',
+  'ro-RO': 'Romanian (Romania)',
+  'ru-RU': 'Russian (Russia)',
+  'sk-SK': 'Slovak (Slovakia)',
+  'tr-TR': 'Turkish (Turkey)',
+  'uk-UA': 'Ukrainian (Ukraine)',
+  'zh-CN': 'Chinese (China)',
+  'zh-Hans': 'Chinese (Simplified Han)',
+  'zh-Hans-CN': 'Chinese (Simplified Han, China)',
+  'zh-Hans-HK': 'Chinese (Simplified Han, Hong Kong SAR China)',
+  'zh-Hans-MO': 'Chinese (Simplified Han, Macau SAR China)',
+  'zh-Hans-SG': 'Chinese (Simplified Han, Singapore)',
+  'zh-Hant': 'Chinese (Traditional Han)',
+  'zh-Hant-HK': 'Chinese (Traditional Han, Hong Kong SAR China)',
+  'zh-Hant-MO': 'Chinese (Traditional Han, Macau SAR China)',
+  'zh-Hant-TW': 'Chinese (Traditional Han, Taiwan)',
+};
+
 describe('formatDate', () => {
   beforeEach(() => {
     localizeTearDown();
@@ -124,14 +158,53 @@ describe('formatDate', () => {
     expect(formatDate(parsedDate, options)).to.equal('maandag 01 januari 1940');
   });
 
-  it('handles options without year', async () => {
+  describe('Date format options without "year"', () => {
+    const LOCALE_FORMATTED_DATE_MAP = {
+      'bg-BG': 'събота, 12 октомври',
+      'cs-CZ': 'sobota 12. října',
+      'de-DE': 'Samstag, 12. Oktober',
+      'en-AU': 'Saturday, 12 October',
+      'en-GB': 'Saturday, 12 October',
+      'en-PH': 'Saturday, 12 October',
+      'en-US': 'Saturday, October 12',
+      'es-ES': 'sábado, 12 de octubre',
+      'fr-FR': 'samedi 12 octobre',
+      'fr-BE': 'samedi 12 octobre',
+      'hu-HU': 'október 12., szombat',
+      'id-ID': 'Sabtu, 12 Oktober',
+      'it-IT': 'sabato 12 ottobre',
+      'nl-NL': 'zaterdag 12 oktober',
+      'nl-BE': 'zaterdag 12 oktober',
+      'pl-PL': 'sobota, 12 października',
+      'ro-RO': 'sâmbătă, 12 octombrie',
+      'ru-RU': 'суббота, 12 октября',
+      'sk-SK': 'sobota 12. októbra',
+      'tr-TR': '12 Ekim Cumartesi',
+      'uk-UA': 'субота, 12 жовтня',
+      'zh-CN': '10月12日星期六',
+      'zh-Hans': '10月12日星期六',
+      'zh-Hans-CN': '10月12日星期六',
+      'zh-Hans-HK': '10月12日星期六',
+      'zh-Hans-MO': '10月12日星期六',
+      'zh-Hans-SG': '10月12日星期六',
+      'zh-Hant': '10月12日 星期六',
+      'zh-Hant-HK': '10月12日星期六',
+      'zh-Hant-MO': '10月12日星期六',
+      'zh-Hant-TW': '10月12日 星期六',
+    };
+
+    Object.keys(SUPPORTED_LOCALES).forEach(locale => {
+      it(`handles options without year for locale: ${locale}`, async () => {
         const options = {
           weekday: 'long',
           month: 'long',
           day: '2-digit',
+          locale,
         };
         const parsedDate = /** @type {Date} */ (parseDate('12.10.2019'));
-    expect(formatDate(parsedDate, options)).to.equal('Saturday, 12 October');
+        expect(formatDate(parsedDate, options)).to.equal(LOCALE_FORMATTED_DATE_MAP[locale]);
+      });
+    });
   });
 
   it('handles options without month', async () => {

packages/localize/test/number/formatNumber.test.js

@@ -3,6 +3,12 @@ import { localize } from '../../src/localize.js';
 import { formatNumber } from '../../src/number/formatNumber.js';
 import { localizeTearDown } from '../../test-helpers.js';
 
+// TODO: This is broken only in Safari 13.1.2 Wait till ci is on 13.1.3 and remove
+const isSafari = (() => {
+  const ua = navigator.userAgent.toLowerCase();
+  return ua.indexOf('safari') !== -1 && ua.indexOf('chrome') === -1;
+})();
+
 const currencyCode = /** @param {string} currency */ currency => ({
   style: 'currency',
   currencyDisplay: 'code',
@@ -213,6 +219,11 @@ describe('formatNumber', () => {
     });
 
     describe('en-AU', () => {
+      // TODO: This is broken only in Safari 13.1.2 Wait till ci is on 13.1.3 and remove
+      if (isSafari) {
+        return;
+      }
+
       it('supports basics', () => {
         localize.locale = 'en-AU';
         expect(formatNumber(123456.789, currencyCode('EUR'))).to.equal('EUR 123,456.79');
@@ -249,6 +260,11 @@ describe('formatNumber', () => {
     });
 
     describe('nl-BE', () => {
+      // TODO: This is broken only in Safari 13.1.2 Wait till ci is on 13.1.3 and remove
+      if (isSafari) {
+        return;
+      }
+
       it('supports basics', () => {
         localize.locale = 'nl-BE';
         expect(formatNumber(123456.789, currencyCode('EUR'))).to.equal('123.456,79 EUR');
@@ -318,6 +334,11 @@ describe('formatNumber', () => {
     });
 
     describe('tr-TR', () => {
+      // TODO: This is broken only in Safari 13.1.2 Wait till ci is on 13.1.3 and remove
+      if (isSafari) {
+        return;
+      }
+
       it('supports basics', () => {
         localize.locale = 'tr-TR';
         expect(formatNumber(123456.789, currencyCode('EUR'))).to.equal('123.456,79 EUR');

packages/localize/test/number/formatNumberToParts.test.js

@@ -3,6 +3,12 @@ import { localize } from '../../src/localize.js';
 import { localizeTearDown } from '../../test-helpers.js';
 import { formatNumberToParts } from '../../src/number/formatNumberToParts.js';
 
+// TODO: This is broken only in Safari 13.1.2 Wait till ci is on 13.1.3 and remove
+const isSafari = (() => {
+  const ua = navigator.userAgent.toLowerCase();
+  return ua.indexOf('safari') !== -1 && ua.indexOf('chrome') === -1;
+})();
+
 const c = /** @param {string} v */ v => ({
   type: 'currency',
   value: v,
@@ -43,6 +49,11 @@ describe('formatNumberToParts', () => {
       it(`formats ${locale} ${currency} ${amount} as "${stringifyParts(
         /** @type {FormatNumberPart[]} */ (expectedResult),
       )}"`, () => {
+        // TODO: This is broken only in Safari 13.1.2 Wait till ci is on 13.1.3 and remove
+        if (isSafari) {
+          return;
+        }
+
         expect(
           formatNumberToParts(Number(amount), {
             style: 'currency',

packages/select-rich/README.md

@@ -28,7 +28,7 @@ export const main = () => html`
   <lion-select-rich name="favoriteColor" label="Favorite color">
     <lion-option .choiceValue=${'red'}>Red</lion-option>
     <lion-option .choiceValue=${'hotpink'}>Hotpink</lion-option>
-    <lion-option .choiceValue=${'teal'}>Teal</lion-option>
+    <lion-option .choiceValue=${'blue'}>Blue</lion-option>
   </lion-select-rich>
 `;
 ```

packages/select-rich/test/lion-select-rich.test.js

@@ -184,6 +184,7 @@ describe('lion-select-rich', () => {
       expect(el._invokerNode.shadowRoot.firstElementChild.textContent).to.equal('10');
 
       firstOption.modelValue = { value: 30, checked: true };
+      await firstOption.updateComplete;
       await el.updateComplete;
       // @ts-ignore allow protected access in tests
       expect(el._invokerNode.shadowRoot.firstElementChild.textContent).to.equal('30');
@@ -209,6 +210,7 @@ describe('lion-select-rich', () => {
 
       el.opened = false;
       await el.updateComplete;
+      await el.updateComplete; // safari takes a little longer
       // @ts-ignore allow protected access in tests
       expect(el._overlayCtrl.isShown).to.be.false;
     });
@@ -243,6 +245,7 @@ describe('lion-select-rich', () => {
 
       el.opened = false;
       await el.updateComplete;
+      await el.updateComplete; // safari takes a little longer
       // @ts-ignore allow protected access in tests
       expect(document.activeElement === el._listboxNode).to.be.false;
       // @ts-ignore allow protected access in tests
@@ -346,8 +349,10 @@ describe('lion-select-rich', () => {
       el.modelValue = 'hotpink';
       el.opened = false;
       await el.updateComplete; // necessary for overlay controller to actually close and re-open
+      await el.updateComplete; // safari takes a little longer
       el.opened = true;
       await el.updateComplete;
+      await el.updateComplete; // safari takes a little longer
 
       // noDefaultSelected will now flip the override back to what was the initial reference width
       // @ts-ignore allow protected access in tests

packages/switch/test/lion-switch.test.js

@@ -35,6 +35,7 @@ describe('lion-switch', () => {
     expect(el._inputNode.hasAttribute('disabled')).to.be.true;
     el.disabled = false;
     await el.updateComplete;
+    await el.updateComplete; // safari takes longer
     expect(el._inputNode.disabled).to.be.false;
     expect(el._inputNode.hasAttribute('disabled')).to.be.false;
   });

packages/tooltip/test/lion-tooltip.test.js

@@ -35,6 +35,7 @@ describe('lion-tooltip', () => {
       const eventMouseLeave = new Event('mouseleave');
       el.dispatchEvent(eventMouseLeave);
       await el.updateComplete;
+      await el.updateComplete; // webkit needs longer
       // @ts-expect-error allow protected props in tests
       expect(el._overlayCtrl.isShown).to.equal(false);
     });
@@ -76,6 +77,7 @@ describe('lion-tooltip', () => {
       const eventFocusOut = new Event('focusout');
       invoker.dispatchEvent(eventFocusOut);
       await el.updateComplete;
+      await el.updateComplete; // webkit needs longer
       // @ts-expect-error allow protected props in tests
       expect(el._overlayCtrl.isShown).to.equal(false);
     });

web-test-runner-chrome.config.mjs

@@ -1,4 +1,3 @@
-/* eslint-disable no-param-reassign */
 import { playwrightLauncher } from '@web/test-runner-playwright';
 import defaultConfig from './web-test-runner.config.mjs';
 

web-test-runner-firefox.config.mjs

@@ -1,9 +1,7 @@
-/* eslint-disable no-param-reassign */
-// // import { legacyPlugin } from '@web/dev-server-legacy';
 import { playwrightLauncher } from '@web/test-runner-playwright';
 import defaultConfig from './web-test-runner.config.mjs';
 
 const config = { ...defaultConfig };
-config.browsers = [playwrightLauncher({ product: 'firefox' })];
+config.browsers = [playwrightLauncher({ product: 'firefox', concurrency: 1 })];
 
 export default config;

web-test-runner-webkit.config.mjs

@@ -1,4 +1,3 @@
-/* eslint-disable no-param-reassign */
 import { playwrightLauncher } from '@web/test-runner-playwright';
 import defaultConfig from './web-test-runner.config.mjs';
 

web-test-runner.config.mjs

@@ -27,7 +27,7 @@ export default {
   browsers: [
     playwrightLauncher({ product: 'firefox', concurrency: 1 }),
     playwrightLauncher({ product: 'chromium' }),
-//    playwrightLauncher({ product: 'webkit' }),
+    playwrightLauncher({ product: 'webkit' }),
   ],
   groups: packages.map(pkg => {
     return {