@lion/ui 0.7.9 → 0.8.0

package/components/combobox/test/validators.test.js

@@ -25,13 +25,13 @@ describe('MatchesOption validation', () => {
     config.node = el;
     const validator = new MatchesOption();
 
-    mimicUserTyping(el, 'Artichoke');
+    await mimicUserTyping(el, 'Artichoke');
     await el.updateComplete;
 
     isEnabled = validator.execute('Artichoke', undefined, config);
     expect(isEnabled).to.be.false;
 
-    mimicUserTyping(el, 'Foo');
+    await mimicUserTyping(el, 'Foo');
     await el.updateComplete;
 
     isEnabled = validator.execute('Foo', undefined, config);

package/components/combobox/test-helpers/combobox-helpers.js

@@ -1,4 +1,5 @@
 import { getListboxMembers } from '@lion/ui/listbox-test-helpers.js';
+import { sendKeys } from '@web/test-runner-commands';
 
 /**
  * @typedef {import('@lion/ui/combobox.js').LionCombobox} LionCombobox
@@ -34,17 +35,15 @@ export function getComboboxMembers(el) {
 
 /**
  * @param {LionCombobox} el
- * @param {string} value
+ * @param {string} keys
  */
-// TODO: add keys that actually make sense...
-export function mimicUserTyping(el, value) {
+export async function mimicUserTyping(el, keys) {
   const { _inputNode } = getComboboxMembers(el);
-  _inputNode.dispatchEvent(new Event('focusin', { bubbles: true }));
-  // eslint-disable-next-line no-param-reassign
-  _inputNode.value = value;
-  _inputNode.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
-  _inputNode.dispatchEvent(new KeyboardEvent('keyup', { key: value }));
-  _inputNode.dispatchEvent(new KeyboardEvent('keydown', { key: value }));
+  _inputNode.value = '';
+  _inputNode.focus();
+  await sendKeys({
+    type: keys,
+  });
 }
 
 /**

package/components/core/src/browserDetection.js

@@ -9,11 +9,19 @@ function checkChrome(flavor = 'google-chrome') {
     return flavor === 'google-chrome';
   }
 
-  const isChromium = /** @type {window & { chrome?: boolean}} */ (globalThis).chrome;
+  // eslint-disable-next-line prefer-destructuring
+  const navigator = /** @type {Navigator & {userAgentData: {brands:{brand:string}[]}}} */ (
+    globalThis.navigator
+  );
+
+  const isChromium =
+    !!navigator.userAgentData &&
+    navigator.userAgentData.brands.some(data => data.brand === 'Chromium');
 
   if (flavor === 'chromium') {
     return isChromium;
   }
+
   const winNav = globalThis.navigator;
   const vendorName = winNav?.vendor;
   const isOpera =

package/components/form-core/test-suites/NativeTextFieldMixin.suite.js

@@ -4,11 +4,7 @@ import { defineCE, expect, fixture, html, triggerFocusFor, unsafeStatic } from '
 import { sendKeys } from '@web/test-runner-commands';
 import { spy } from 'sinon';
 import { NativeTextFieldMixin } from '@lion/ui/form-core.js';
-
-const isSafari = (() => {
-  const ua = navigator.userAgent.toLowerCase();
-  return ua.indexOf('safari') !== -1 && ua.indexOf('chrome') === -1;
-})();
+import { browserDetection } from '@lion/ui/core.js';
 
 /**
  * @typedef {import('../types/FormControlMixinTypes.js').FormControlHost} FormControlHost
@@ -54,10 +50,6 @@ export function runNativeTextFieldMixinSuite(customConfig) {
     });
 
     it('move focus to a next focusable element after writing some text', async () => {
-      if (isSafari) {
-        // TODO: This test is broken on Safari, to be fixed later
-        return;
-      }
       const el = /** @type {NativeTextFieldClass} */ (await fixture(html`<${tag}></${tag}>`));
       // @ts-ignore [allow-protected] in test
       const setValueAndPreserveCaretSpy = spy(el, '_setValueAndPreserveCaret');
@@ -71,8 +63,15 @@ export function runNativeTextFieldMixinSuite(customConfig) {
       await sendKeys({
         press: 'Tab',
       });
-      expect(document.activeElement).to.not.equal(_inputNode);
+
       expect(setValueAndPreserveCaretSpy.calledOnce).to.be.false;
+
+      // TODO: This seems to work in practice, but not in the test. Investigate.
+      if (browserDetection.isMacSafari || browserDetection.isFirefox) {
+        return;
+      }
+
+      expect(document.activeElement).to.not.equal(_inputNode);
     });
   });
 }