Skip to content

Commit 618f269

Browse files
daKmoRJoren BroekemaYesil Ahmettlouisse
committed
chore: enable webkit tests
Co-authored-by: Joren Broekema <[email protected]> Co-authored-by: Yesil Ahmet <[email protected]> Co-authored-by: Thijs Louisse <[email protected]>
1 parent 38abc0e commit 618f269

23 files changed

+219
-32
lines changed

‎.changeset/short-scissors-poke.md

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
---
2+
'@lion/combobox': patch
3+
'@lion/form-core': patch
4+
'@lion/form-integrations': patch
5+
'@lion/form': patch
6+
'@lion/input-date': patch
7+
'@lion/input-datepicker': patch
8+
'@lion/input-stepper': patch
9+
'@lion/input': patch
10+
'@lion/localize': patch
11+
'@lion/select-rich': patch
12+
'@lion/select': patch
13+
'@lion/switch': patch
14+
'@lion/tooltip': patch
15+
---
16+
17+
Run tests also on webkit

‎packages/combobox/src/LionCombobox.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -397,7 +397,9 @@ export class LionCombobox extends OverlayMixin(LionListbox) {
397397
* @param {string} v
398398
*/
399399
_setTextboxValue(v) {
400-
this._inputNode.value = v;
400+
if (this._inputNode.value !== v) {
401+
this._inputNode.value = v;
402+
}
401403
}
402404

403405
/**

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

+9-4
Original file line numberDiff line numberDiff line change
@@ -50,12 +50,13 @@ const ChoiceGroupMixinImplementation = superclass =>
5050
this.__isInitialModelValue = false;
5151
this.registrationComplete.then(() => {
5252
this._setCheckedElements(value, checkCondition);
53-
this.requestUpdate('modelValue');
53+
this.requestUpdate('modelValue', this.__oldModelValue);
5454
});
5555
} else {
5656
this._setCheckedElements(value, checkCondition);
57-
this.requestUpdate('modelValue');
57+
this.requestUpdate('modelValue', this.__oldModelValue);
5858
}
59+
this.__oldModelValue = this.modelValue;
5960
}
6061

6162
get serializedValue() {
@@ -148,7 +149,10 @@ const ChoiceGroupMixinImplementation = superclass =>
148149

149150
connectedCallback() {
150151
super.connectedCallback();
151-
Promise.resolve().then(() => this.__resolveRegistrationComplete());
152+
// Double microtask queue to account for Webkit race condition
153+
Promise.resolve().then(() =>
154+
Promise.resolve().then(() => this.__resolveRegistrationComplete()),
155+
);
152156

153157
this.registrationComplete.then(() => {
154158
this.__isInitialModelValue = false;
@@ -313,7 +317,8 @@ const ChoiceGroupMixinImplementation = superclass =>
313317
}
314318
});
315319
this.__setChoiceGroupTouched();
316-
this.requestUpdate('modelValue');
320+
this.requestUpdate('modelValue', this.__oldModelValue);
321+
this.__oldModelValue = this.modelValue;
317322
}
318323
};
319324

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

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { LitElement } from '@lion/core';
2+
import { parseDate } from '@lion/localize';
23
import { aTimeout, defineCE, expect, fixture, html, unsafeStatic } from '@open-wc/testing';
34
import sinon from 'sinon';
45
import { FormatMixin } from '../src/FormatMixin.js';
@@ -69,7 +70,7 @@ export function runFormatMixinSuite(customConfig) {
6970
if (options.viewValue) {
7071
return !options.toggleValue ? '5-5-2005' : '10-10-2010';
7172
}
72-
return !options.toggleValue ? new Date('5/5/2005') : new Date('10/10/2010');
73+
return !options.toggleValue ? parseDate('5-5-2005') : parseDate('10-10-2010');
7374
case Array:
7475
return !options.toggleValue ? ['foo', 'bar'] : ['baz', 'yay'];
7576
case Object:

‎packages/form-integrations/package.json

+4-4
Original file line numberDiff line numberDiff line change
@@ -23,11 +23,11 @@
2323
"types"
2424
],
2525
"scripts": {
26-
"debug": "cd ../../ && yarn debug --group form-integration",
27-
"debug:firefox": "cd ../../ && yarn debug:firefox --group form-integration",
28-
"debug:webkit": "cd ../../ && yarn debug:webkit --group form-integration",
26+
"debug": "cd ../../ && yarn debug --group form-integrations",
27+
"debug:firefox": "cd ../../ && yarn debug:firefox --group form-integrations",
28+
"debug:webkit": "cd ../../ && yarn debug:webkit --group form-integrations",
2929
"prepublishOnly": "../../scripts/npm-prepublish.js",
30-
"test": "cd ../../ && yarn test:browser --group form-integration"
30+
"test": "cd ../../ && yarn test:browser --group form-integrations"
3131
},
3232
"sideEffects": [
3333
"./docs/helper-wc/h-output.js"

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

+2
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import './helpers/umbrella-form.js';
55
describe('Form Integrations', () => {
66
it('".serializedValue" returns all non disabled fields based on form structure', async () => {
77
const el = await fixture(html`<umbrella-form></umbrella-form>`);
8+
await el.updateComplete;
89
const formEl = el._lionFormNode;
910
expect(formEl.serializedValue).to.eql({
1011
bio: '',
@@ -29,6 +30,7 @@ describe('Form Integrations', () => {
2930

3031
it('".formattedValue" returns all non disabled fields based on form structure', async () => {
3132
const el = await fixture(html`<umbrella-form></umbrella-form>`);
33+
await el.updateComplete;
3234
const formEl = el._lionFormNode;
3335
expect(formEl.formattedValue).to.eql({
3436
bio: '',

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

+2
Original file line numberDiff line numberDiff line change
@@ -123,6 +123,7 @@ describe(`Submitting/Resetting Form`, async () => {
123123
it('Submitting a form should make submitted true for all fields', async () => {
124124
el.querySelector('#submit_button').click();
125125
await elementUpdated(el);
126+
await el.updateComplete;
126127
el.formElements.forEach(field => {
127128
expect(field.submitted).to.be.true;
128129
});
@@ -132,6 +133,7 @@ describe(`Submitting/Resetting Form`, async () => {
132133
el.querySelector('#submit_button').click();
133134
el.querySelector('#reset_button').click();
134135
await elementUpdated(el);
136+
await el.updateComplete;
135137
expect(el.submitted).to.be.false;
136138
el.formElements.forEach(field => {
137139
expect(field.submitted).to.be.false;

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

+1
Original file line numberDiff line numberDiff line change
@@ -170,6 +170,7 @@ describe('<lion-input-datepicker>', () => {
170170
expect(elObj.overlayController.isShown).to.equal(true);
171171
// Mimic user input: should fire the 'user-selected-date-changed' event
172172
await elObj.selectMonthDay(12);
173+
await el.updateComplete; // safari take a little longer
173174
expect(elObj.overlayController.isShown).to.equal(false);
174175
});
175176

‎packages/input-stepper/src/LionInputStepper.js

+1
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,7 @@ export class LionInputStepper extends LionInput {
7373
this.addEventListener('keydown', this.__keyDownHandler);
7474
this._inputNode.setAttribute('inputmode', 'decimal');
7575
this._inputNode.setAttribute('autocomplete', 'off');
76+
this.setAttribute('aria-label', this.label);
7677
this.step = this.hasAttribute('step') ? this.step : 1;
7778
this.__setAriaLabelsAndValidator();
7879
this.__toggleSpinnerButtonsState();

‎packages/localize/src/date/formatDate.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -33,5 +33,5 @@ export function formatDate(date, options) {
3333
} catch (e) {
3434
formattedDate = '';
3535
}
36-
return normalizeIntlDate(formattedDate);
36+
return normalizeIntlDate(formattedDate, computedLocale, formatOptions);
3737
}

‎packages/localize/src/date/normalizeIntlDate.js

+49-2
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,11 @@
22
* To filter out some added characters in IE
33
*
44
* @param {string} str
5+
* @param {string} [locale='']
6+
* @param {import('@lion/localize/types/LocalizeMixinTypes').FormatDateOptions} [options] Intl options are available
57
* @returns {string}
68
*/
7-
export function normalizeIntlDate(str) {
9+
export function normalizeIntlDate(str, locale = '', { weekday, year, month, day } = {}) {
810
const dateString = [];
911
for (let i = 0, n = str.length; i < n; i += 1) {
1012
// remove unicode 160
@@ -18,5 +20,50 @@ export function normalizeIntlDate(str) {
1820
}
1921
}
2022

21-
return dateString.join('');
23+
const result = dateString.join('');
24+
25+
// Normalize webkit date formatting without year
26+
if (!year && weekday === 'long' && month === 'long' && day === '2-digit') {
27+
const CHINESE_LOCALES = [
28+
// Webkit has a space while chrome and firefox not. Example: ("10月12日 星期六")
29+
'zh-CN',
30+
'zh-Hans',
31+
'zh-Hans-CN',
32+
'zh-Hans-HK',
33+
'zh-Hans-MO',
34+
'zh-Hans-SG',
35+
// Skip 'zh-Hant' and 'zh-Hant-TW', since webkit/firefox/chromium are aligned.
36+
// 'zh-Hant',
37+
// 'zh-Hant-TW',
38+
'zh-Hant-HK',
39+
'zh-Hant-MO',
40+
];
41+
42+
if (CHINESE_LOCALES.includes(locale)) {
43+
return result.replace(' ', '');
44+
}
45+
46+
if (result.indexOf(',') === -1 && locale === 'en-GB') {
47+
// Saturday 12 October -> Saturday, 12 October
48+
const match = result.match(/^(\w*) (\d*) (\w*)$/);
49+
if (match !== null) {
50+
return `${match[1]}, ${match[2]} ${match[3]}`;
51+
}
52+
}
53+
54+
if (result.indexOf(', ') !== -1 && locale === 'sk-SK') {
55+
// sobota, 12. októbra -> sobota 12. októbra
56+
return result.replace(', ', ' ');
57+
}
58+
59+
if (locale === 'en-PH') {
60+
// Saturday, October 12 -> Saturday, 12 October
61+
const match = result.match(/^(\w*), (\w*) (\d*)$/);
62+
if (match !== null) {
63+
return `${match[1]}, ${match[3]} ${match[2]}`;
64+
}
65+
}
66+
}
67+
68+
return result;
2269
}

‎packages/localize/src/date/parseDate.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ const memoizedGetDateFormatBasedOnLocale = memoize(getDateFormatBasedOnLocale);
3131
export function parseDate(dateString) {
3232
const stringToParse = addLeadingZero(dateString);
3333
let parsedString;
34+
3435
switch (memoizedGetDateFormatBasedOnLocale(localize.locale)) {
3536
case 'day-month-year':
3637
parsedString = `${stringToParse.slice(6, 10)}/${stringToParse.slice(
@@ -53,11 +54,10 @@ export function parseDate(dateString) {
5354
default:
5455
parsedString = '0000/00/00';
5556
}
56-
const parsedDate = new Date(parsedString);
57-
// Check if parsedDate is not `Invalid Date`
58-
// eslint-disable-next-line no-restricted-globals
59-
if (!isNaN(parsedDate.getTime())) {
60-
return parsedDate;
57+
58+
const [year, month, day] = parsedString.split('/').map(Number);
59+
if (year > 0 && month > 0 && day > 0) {
60+
return new Date(Date.UTC(year, month - 1, day));
6161
}
6262
return undefined;
6363
}

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

+80-7
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,40 @@ import { localizeTearDown } from '../../test-helpers.js';
55
import { formatDate } from '../../src/date/formatDate.js';
66
import { parseDate } from '../../src/date/parseDate.js';
77

8+
const SUPPORTED_LOCALES = {
9+
'bg-BG': 'Bulgarian',
10+
'cs-CZ': 'Czech',
11+
'de-DE': 'German (Germany)',
12+
'en-AU': 'English (Australia)',
13+
'en-GB': 'English (United Kingdom)',
14+
'en-PH': 'English (Philippines)',
15+
'en-US': 'English (United States)',
16+
'es-ES': 'Spanish (Spain)',
17+
'fr-FR': 'French (France)',
18+
'fr-BE': 'French (Belgium)',
19+
'hu-HU': 'Hungarian (Hungary)',
20+
'id-ID': 'Indonesian (Indonesia)',
21+
'it-IT': 'Italian (Italy)',
22+
'nl-NL': 'Dutch (Netherlands)',
23+
'nl-BE': 'Dutch (Belgium)',
24+
'pl-PL': 'Polish (Poland)',
25+
'ro-RO': 'Romanian (Romania)',
26+
'ru-RU': 'Russian (Russia)',
27+
'sk-SK': 'Slovak (Slovakia)',
28+
'tr-TR': 'Turkish (Turkey)',
29+
'uk-UA': 'Ukrainian (Ukraine)',
30+
'zh-CN': 'Chinese (China)',
31+
'zh-Hans': 'Chinese (Simplified Han)',
32+
'zh-Hans-CN': 'Chinese (Simplified Han, China)',
33+
'zh-Hans-HK': 'Chinese (Simplified Han, Hong Kong SAR China)',
34+
'zh-Hans-MO': 'Chinese (Simplified Han, Macau SAR China)',
35+
'zh-Hans-SG': 'Chinese (Simplified Han, Singapore)',
36+
'zh-Hant': 'Chinese (Traditional Han)',
37+
'zh-Hant-HK': 'Chinese (Traditional Han, Hong Kong SAR China)',
38+
'zh-Hant-MO': 'Chinese (Traditional Han, Macau SAR China)',
39+
'zh-Hant-TW': 'Chinese (Traditional Han, Taiwan)',
40+
};
41+
842
describe('formatDate', () => {
943
beforeEach(() => {
1044
localizeTearDown();
@@ -124,14 +158,53 @@ describe('formatDate', () => {
124158
expect(formatDate(parsedDate, options)).to.equal('maandag 01 januari 1940');
125159
});
126160

127-
it('handles options without year', async () => {
128-
const options = {
129-
weekday: 'long',
130-
month: 'long',
131-
day: '2-digit',
161+
describe('Date format options without "year"', () => {
162+
const LOCALE_FORMATTED_DATE_MAP = {
163+
'bg-BG': 'събота, 12 октомври',
164+
'cs-CZ': 'sobota 12. října',
165+
'de-DE': 'Samstag, 12. Oktober',
166+
'en-AU': 'Saturday, 12 October',
167+
'en-GB': 'Saturday, 12 October',
168+
'en-PH': 'Saturday, 12 October',
169+
'en-US': 'Saturday, October 12',
170+
'es-ES': 'sábado, 12 de octubre',
171+
'fr-FR': 'samedi 12 octobre',
172+
'fr-BE': 'samedi 12 octobre',
173+
'hu-HU': 'október 12., szombat',
174+
'id-ID': 'Sabtu, 12 Oktober',
175+
'it-IT': 'sabato 12 ottobre',
176+
'nl-NL': 'zaterdag 12 oktober',
177+
'nl-BE': 'zaterdag 12 oktober',
178+
'pl-PL': 'sobota, 12 października',
179+
'ro-RO': 'sâmbătă, 12 octombrie',
180+
'ru-RU': 'суббота, 12 октября',
181+
'sk-SK': 'sobota 12. októbra',
182+
'tr-TR': '12 Ekim Cumartesi',
183+
'uk-UA': 'субота, 12 жовтня',
184+
'zh-CN': '10月12日星期六',
185+
'zh-Hans': '10月12日星期六',
186+
'zh-Hans-CN': '10月12日星期六',
187+
'zh-Hans-HK': '10月12日星期六',
188+
'zh-Hans-MO': '10月12日星期六',
189+
'zh-Hans-SG': '10月12日星期六',
190+
'zh-Hant': '10月12日 星期六',
191+
'zh-Hant-HK': '10月12日星期六',
192+
'zh-Hant-MO': '10月12日星期六',
193+
'zh-Hant-TW': '10月12日 星期六',
132194
};
133-
const parsedDate = /** @type {Date} */ (parseDate('12.10.2019'));
134-
expect(formatDate(parsedDate, options)).to.equal('Saturday, 12 October');
195+
196+
Object.keys(SUPPORTED_LOCALES).forEach(locale => {
197+
it(`handles options without year for locale: ${locale}`, async () => {
198+
const options = {
199+
weekday: 'long',
200+
month: 'long',
201+
day: '2-digit',
202+
locale,
203+
};
204+
const parsedDate = /** @type {Date} */ (parseDate('12.10.2019'));
205+
expect(formatDate(parsedDate, options)).to.equal(LOCALE_FORMATTED_DATE_MAP[locale]);
206+
});
207+
});
135208
});
136209

137210
it('handles options without month', async () => {

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

+21
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,12 @@ import { localize } from '../../src/localize.js';
33
import { formatNumber } from '../../src/number/formatNumber.js';
44
import { localizeTearDown } from '../../test-helpers.js';
55

6+
// TODO: This is broken only in Safari 13.1.2 Wait till ci is on 13.1.3 and remove
7+
const isSafari = (() => {
8+
const ua = navigator.userAgent.toLowerCase();
9+
return ua.indexOf('safari') !== -1 && ua.indexOf('chrome') === -1;
10+
})();
11+
612
const currencyCode = /** @param {string} currency */ currency => ({
713
style: 'currency',
814
currencyDisplay: 'code',
@@ -213,6 +219,11 @@ describe('formatNumber', () => {
213219
});
214220

215221
describe('en-AU', () => {
222+
// TODO: This is broken only in Safari 13.1.2 Wait till ci is on 13.1.3 and remove
223+
if (isSafari) {
224+
return;
225+
}
226+
216227
it('supports basics', () => {
217228
localize.locale = 'en-AU';
218229
expect(formatNumber(123456.789, currencyCode('EUR'))).to.equal('EUR 123,456.79');
@@ -249,6 +260,11 @@ describe('formatNumber', () => {
249260
});
250261

251262
describe('nl-BE', () => {
263+
// TODO: This is broken only in Safari 13.1.2 Wait till ci is on 13.1.3 and remove
264+
if (isSafari) {
265+
return;
266+
}
267+
252268
it('supports basics', () => {
253269
localize.locale = 'nl-BE';
254270
expect(formatNumber(123456.789, currencyCode('EUR'))).to.equal('123.456,79 EUR');
@@ -318,6 +334,11 @@ describe('formatNumber', () => {
318334
});
319335

320336
describe('tr-TR', () => {
337+
// TODO: This is broken only in Safari 13.1.2 Wait till ci is on 13.1.3 and remove
338+
if (isSafari) {
339+
return;
340+
}
341+
321342
it('supports basics', () => {
322343
localize.locale = 'tr-TR';
323344
expect(formatNumber(123456.789, currencyCode('EUR'))).to.equal('123.456,79 EUR');

0 commit comments

Comments
 (0)