@heartlandone/vega 2.0.0-temp-test-0.2 → 2.0.0

package/dist/collection/utils/test/designToken.test.js

@@ -1,4 +1,4 @@
-import { formatAndValidBackgroundColor, formatAndValidBorderColor, formatAndValidBorderRadius, formatAndValidBreakpointSize, formatAndValidFlexBreakpoint, formatAndValidGap, formatAndValidPadding, formatAndValidShadow, formatAndValidTextColor, formatAndValidTypographyToken, } from '../designToken';
+import { formatAndValidBackgroundColor, formatAndValidBorder, formatAndValidBorderColor, formatAndValidBorderRadius, formatAndValidBreakpointSize, formatAndValidFlexBreakpoint, formatAndValidGap, formatAndValidPadding, formatAndValidShadow, formatAndValidTextColor, formatAndValidTypographyToken, } from '../designToken';
 import { LogUtility } from '../log';
 test('return padding as expected when with spacingTypeToken', () => {
   const result = formatAndValidPadding('size-16');
@@ -18,6 +18,11 @@ test('return as expected when without shadowToken', () => {
   formatAndValidShadow('shadow-card-no-exist');
   expect(LogUtility.warn).toBeCalledTimes(1);
 });
+test('return as expected when set borderRadiusToken', () => {
+  spyOn(LogUtility, 'warn');
+  formatAndValidBorderRadius('rounded-2');
+  expect(formatAndValidBorderRadius('rounded-2')).toEqual('v-rounded-2');
+});
 test('return warn as expected when without BorderRadiusToken', () => {
   spyOn(LogUtility, 'warn');
   formatAndValidBorderRadius('3');
@@ -42,11 +47,6 @@ test('return warn as expected when without TextColor', () => {
   formatAndValidTextColor('danger-link');
   expect(LogUtility.warn).toBeCalledTimes(1);
 });
-test('return warn as expected when without FlexBreakpoint', () => {
-  spyOn(LogUtility, 'warn');
-  formatAndValidFlexBreakpoint('small');
-  expect(LogUtility.warn).toBeCalledTimes(1);
-});
 test('return warn as expected when without BreakpointSize', () => {
   spyOn(LogUtility, 'warn');
   formatAndValidBreakpointSize('small');
@@ -75,3 +75,17 @@ test('return warn as expected when with invalid TypographyToken', () => {
   formatAndValidTypographyToken('font-div');
   expect(LogUtility.warn).toBeCalledTimes(1);
 });
+test('return as expected when with valid BorderToken', () => {
+  const result = formatAndValidBorder('border-secondary-btn');
+  expect(result).toEqual('v-border-secondary-btn');
+});
+test('return warn as expected when with invalid BorderToken', () => {
+  spyOn(LogUtility, 'warn');
+  formatAndValidBorder('border-s');
+  expect(LogUtility.warn).toBeCalledTimes(1);
+});
+test('return warn as expected when without FlexBreakpoint', () => {
+  spyOn(LogUtility, 'warn');
+  formatAndValidFlexBreakpoint('small');
+  expect(LogUtility.warn).toBeCalledTimes(1);
+});

package/dist/collection/utils/test/specUtils.test.js

@@ -0,0 +1,73 @@
+import { find } from '../specUtils';
+describe('find', () => {
+  beforeEach(() => {
+    const container = document.createElement('div');
+    container.id = 'container';
+    const span = document.createElement('span');
+    span.textContent = "I'm in the container";
+    container.appendChild(span);
+    document.body.append(container);
+    const shadowComp1 = document.createElement('div');
+    shadowComp1.id = 'shadowComp1';
+    const shadowComp1ShadowRoot = shadowComp1.attachShadow({ mode: 'open' });
+    const span1 = document.createElement('span');
+    span1.textContent = "I'm in the shadowComp1 shadow DOM";
+    shadowComp1ShadowRoot.appendChild(span1);
+    container.appendChild(shadowComp1);
+    const shadowComp2 = document.createElement('div');
+    shadowComp2.id = 'shadowComp2';
+    const shadowComp2ShadowRoot = shadowComp2.attachShadow({ mode: 'open' });
+    const span2 = document.createElement('span');
+    span2.textContent = "I'm in the shadowComp2 shadow DOM";
+    shadowComp2ShadowRoot.appendChild(span2);
+    shadowComp1ShadowRoot.appendChild(shadowComp2);
+  });
+  it('should find element in shadow dom', () => {
+    expect(find(document.body, '#container')).toMatchInlineSnapshot(`
+		<div id="container">
+		  <span>
+		    I'm in the container
+		  </span>
+		  <div id="shadowComp1">
+		    <mock:shadow-root>
+		      <span>
+		        I'm in the shadowComp1 shadow DOM
+		      </span>
+		      <div id="shadowComp2">
+		        <mock:shadow-root>
+		          <span>
+		            I'm in the shadowComp2 shadow DOM
+		          </span>
+		        </mock:shadow-root>
+		      </div>
+		    </mock:shadow-root>
+		  </div>
+		</div>
+	`);
+    expect(find(document.body, '#container span')).toMatchInlineSnapshot(`
+		<span>
+		  I'm in the container
+		</span>
+	`);
+    expect(find(document.body, '#container #shadowComp1 >>> span')).toMatchInlineSnapshot(`
+		<span>
+		  I'm in the shadowComp1 shadow DOM
+		</span>
+	`);
+    expect(find(document.body, '#container #shadowComp1 >>> #shadowComp2 >>> span'))
+      .toMatchInlineSnapshot(`
+		<span>
+		  I'm in the shadowComp2 shadow DOM
+		</span>
+	`);
+    const shadowComp1 = find(document.body, '#container #shadowComp1');
+    expect(find(shadowComp1.shadowRoot, '#shadowComp2 >>> span')).toMatchInlineSnapshot(`
+		<span>
+		  I'm in the shadowComp2 shadow DOM
+		</span>
+	`);
+  });
+  it('should return undefined when element not exist ', () => {
+    expect(find(document.body, '#container #notExist >>> span')).toBeUndefined();
+  });
+});

package/dist/collection/utils/test/ui.test.js

@@ -1,7 +1,7 @@
 import { DeviceType } from '../../types/ui.type';
 import { LogUtility } from '../log';
 import { setupUserAgent } from '../testUtils';
-import { arrayToClassString, getBrowserVisibleArea, getDeviceType, isParent, containerScrollToItem, isElementVisible, extractNumberFromString, hexToRGB, isTextWrapped, getElementComputedStyle, getHexFromShorthand, findParent, } from '../ui';
+import { arrayToClassString, getBrowserVisibleArea, getDeviceType, isParent, containerScrollToItem, isElementVisible, extractNumberFromString, hexToRGB, isTextWrapped, getElementComputedStyle, getHexFromShorthand, findParent, getDeepActiveElementInShadow, } from '../ui';
 beforeAll(() => {
   document.documentElement.scrollTop = 0;
 });
@@ -75,6 +75,30 @@ test('isParent as expected', () => {
   expect(isParent(inner2, card)).toBeTruthy();
   expect(isParent(inner2, inner3)).toBeFalsy();
   expect(isParent(inner2, inner1)).toBeFalsy();
+  expect(isParent(undefined, inner1)).toBeFalsy();
+  expect(isParent(inner2, undefined)).toBeFalsy();
+});
+test('isParent as expected in shadow dom', () => {
+  const container = document.createElement('div');
+  container.innerHTML = `<div class='shadow'><p></p></div>`;
+  document.body.append(container);
+  const shadowNode = document.body.querySelector('.shadow');
+  const shadowRoot = shadowNode.attachShadow({ mode: 'open' });
+  const shadowSpan = shadowRoot.appendChild(document.createElement('span'));
+  const shadowSlot = shadowNode.querySelector('p');
+  expect(shadowNode.contains(shadowSpan)).toBeFalsy();
+  expect(isParent(shadowSpan, shadowNode)).toBeTruthy();
+  expect(isParent(shadowSlot, shadowNode)).toBeTruthy();
+});
+test('isParent should work as expected in shadow dom', () => {
+  const container = document.createElement('div');
+  container.innerHTML = `<div id='shadowComp'></div>`;
+  document.body.append(container);
+  const shadowCompShadowRoot = container.attachShadow({ mode: 'open' });
+  const span = document.createElement('span');
+  span.textContent = "I'm in the shadow DOM";
+  shadowCompShadowRoot.appendChild(span);
+  expect(isParent(span, container)).toBeTruthy();
 });
 test('containerScrollToItem as expected', () => {
   const container = document.createElement('div');
@@ -184,4 +208,36 @@ describe('isTextWrapped', () => {
     expect(findParent(testEl, 'div')).toEqual(container);
     expect(findParent(testEl, 'span')).toEqual(null);
   });
+  test('should return the element parent when call findParent in shadow dom', () => {
+    const container = document.createElement('div');
+    container.innerHTML = `
+    <div id='shadowComp'>
+    </div>
+    `;
+    document.body.append(container);
+    const shadowCompShadowRoot = container.attachShadow({ mode: 'open' });
+    const span = document.createElement('span');
+    span.textContent = "I'm in the shadow DOM";
+    shadowCompShadowRoot.appendChild(span);
+    expect(findParent(span, 'div')).toEqual(container);
+  });
+  test('getDeepActiveElementInShadow', () => {
+    const container = document.createElement('div');
+    container.innerHTML = `
+    <input id='input-out-of-shadow' />
+    <div id='shadow-container'></div>
+    `;
+    document.body.append(container);
+    const shadowContainer = document.querySelector('#shadow-container');
+    document.querySelector('#shadow-container').attachShadow({ mode: 'open' });
+    const innerShadow = document.createElement('div');
+    innerShadow.attachShadow({ mode: 'open' });
+    const innerElement = document.createElement('input');
+    innerShadow.shadowRoot.appendChild(innerElement);
+    shadowContainer.shadowRoot.appendChild(innerShadow);
+    document.querySelector('#input-out-of-shadow').focus();
+    expect(getDeepActiveElementInShadow()).toEqual(document.activeElement);
+    innerElement.focus();
+    expect(getDeepActiveElementInShadow()).not.toEqual(shadowContainer);
+  });
 });

package/dist/collection/utils/testUtils.js

@@ -114,6 +114,30 @@ export const disableAnimationForPage = async (page) => {
         caret-color: transparent !important;
     }`,
   });
+  await page.addScriptTag({
+    content: `const appendDisableAnimationScript = (el = document) => {
+            Array.from(el.querySelectorAll('*'))
+            .filter(item => item.tagName.includes('VEGA'))
+            .forEach(item => {
+                if (item.shadowRoot) {
+                    const style = document.createElement('style');
+                    style.innerHTML = \`*,
+					*::after,
+					*::before {
+						transition-delay: 0s !important;
+						transition-duration: 0s !important;
+						animation-delay: -0.0001s !important;
+						animation-duration: 0s !important;
+						animation-play-state: paused !important;
+						caret-color: transparent !important;
+					}\`;
+                    item.shadowRoot.append(style);
+                    appendDisableAnimationScript(item.shadowRoot);
+                }
+            });
+        }
+        appendDisableAnimationScript()`,
+  });
 };
 /* istanbul ignore next */
 /**
@@ -124,9 +148,9 @@ export const disableAnimationForPage = async (page) => {
  */
 export const setDarkMode = async (page) => {
   await page.evaluate(() => {
-    var _a, _b;
+    var _a;
     (_a = document.querySelector('html')) === null || _a === void 0 ? void 0 : _a.setAttribute('style', 'background-color: rgba(4, 4, 28, 1);');
-    (_b = document.querySelector('html')) === null || _b === void 0 ? void 0 : _b.classList.add('dark');
+    window['VegaThemeManager'].toggleDarkMode(true);
   });
   await page.waitForChanges();
 };
@@ -154,11 +178,18 @@ export const themeOverride = async (page) => {
  * @param {E2EPage} page - E2EPage
  * @param {{ touchX: number; touchY: number; touchEventType: string }[]} touches - An array of objects that represent the
  * touch events.
- * @param {string} touchedSelector - string
+ * @param {string} selector - string to access document DOM. To access shadow dom, pass string with >>>. For example: vega-progress-tracker >>> vega-carousel >>> .carousel-inner
  */
-export const sendTouchEvent = async (page, touches, touchedSelector) => {
-  await page.evaluate((touches, touchedSelector) => {
-    const element = document.querySelector(touchedSelector);
+export const sendTouchEvent = async (page, touches, selector = null) => {
+  await page.evaluate((touches, selector) => {
+    const selectorParts = selector.split('>>>').map((item) => item.trim());
+    const hostSelector = selectorParts[0];
+    const nestedSelectors = selectorParts.slice(1);
+    let element = document.querySelector(hostSelector);
+    nestedSelectors.forEach((item) => {
+      var _a;
+      element = (_a = element === null || element === void 0 ? void 0 : element.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(item);
+    });
     if (element) {
       for (let i = 0; i < touches.length; i++) {
         const x = touches[i].touchX;
@@ -185,7 +216,7 @@ export const sendTouchEvent = async (page, touches, touchedSelector) => {
         element.dispatchEvent(touchEvent);
       }
     }
-  }, touches, touchedSelector);
+  }, touches, selector);
 };
 /**
  * setup UserAgent
@@ -270,13 +301,27 @@ export const mockDate = async (page, date = '2022-05-14T11:01:58.135Z') => {
  */
 export const getScreenshotDiffResults = async (page, desc, selector) => {
   if (selector) {
-    const elementHandle = await page.$(selector);
-    if (elementHandle) {
-      const elementBoundingBox = await elementHandle.boundingBox();
-      if (elementBoundingBox) {
-        return await page.compareScreenshot(desc, { clip: elementBoundingBox });
+    // TODO: Replace with page.find when it support multiple layer shadow dom.
+    const boundingBox = await page.evaluate((selector) => {
+      const selectorParts = selector.split('>>>').map((item) => item.trim());
+      const rootSelector = selectorParts[0];
+      const nestedSelectors = selectorParts.slice(1);
+      let element = document.body.querySelector(rootSelector);
+      nestedSelectors.forEach((item) => {
+        var _a;
+        element = (_a = element === null || element === void 0 ? void 0 : element.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(item);
+      });
+      if (element) {
+        const { x, y, width, height } = element.getBoundingClientRect();
+        return { x, y, width, height };
       }
-    }
+      else {
+        throw new Error(`Cannot find element by selector: ${selector}`);
+      }
+    }, selector);
+    return await page.compareScreenshot(desc, {
+      clip: boundingBox,
+    });
   }
   return await page.compareScreenshot(desc);
 };
@@ -287,29 +332,23 @@ export const getScreenshotDiffResults = async (page, desc, selector) => {
  *
  * @param {string} content - the element content
  * @param {object} config - option parameters
- * @param {boolean} config.wrapped - if wrap element on div
+ * @param {boolean} config.wrapped - set it to true when use visual test to catch the fixed area
+ * @param {EventSemanticsConfig} config.eventSemanticsConfig - sets the event semantics configuration for the EventManager
  */
 export const initVegaE2EPage = async (content, config) => {
   const page = await newE2EPage();
   await mockDate(page);
-  await page.setContent((config === null || config === void 0 ? void 0 : config.wrapped) ? `<div style="padding: 10px" id="visual-container">${content}</div>` : content);
-  await page.addStyleTag({ path: './src/utils/testFontBase64.css' });
-  await page.waitForChanges();
+  const script = (config === null || config === void 0 ? void 0 : config.eventSemanticsConfig)
+    ? `<script type='module'>window.VegaEventManager.setSemantics(${JSON.stringify(config.eventSemanticsConfig)})</script>`
+    : '';
+  await page.setContent((config === null || config === void 0 ? void 0 : config.wrapped)
+    ? `${script}<div style="padding: 10px" id="visual-container">${content}</div>`
+    : script + content);
+  await page.addStyleTag({ path: './src/test-assets/testFontBase64.css' });
   await disableAnimationForPage(page);
+  await page.waitForChanges();
   return page;
 };
-/* istanbul ignore next */
-/**
- * Inject Font Awesome lib for e2e test
- *
- * @param {E2EPage} page - page host of e2e
- * @returns {Promise<void>} -
- */
-export const injectE2EFontAwesomeLib = async (page) => {
-  await page.addScriptTag({
-    path: './node_modules/@fortawesome/fontawesome-free/js/all.min.js',
-  });
-};
 /**
  * NOTE: This method is only for **SPEC** test cases.
  * When the your want to mock some properties, but the properties is not existing on the target object, you should use this function
@@ -396,16 +435,24 @@ export const emptyContentBySelector = (body, ...selectors) => {
  */
 export const setComponentPropertyWithMutationObserver = (element, property, value, mutationObserverIndex) => {
   element[property] = value;
-  const index = mutationObserverIndex
-    ? mutationObserverIndex
-    : MockedMutationObserver.mock.instances.length - 1;
-  MockedMutationObserver.mock.instances[index].trigger([
+  const index = mutationObserverIndex ? mutationObserverIndex : 0;
+  let mockedAttributeMutationObserver = MockedMutationObserver.mock.instances[index];
+  if (!mutationObserverIndex && MockedMutationObserver.mock.instances.length > 1) {
+    for (let i = MockedMutationObserver.mock.instances.length - 1; i >= 0; i--) {
+      if (MockedMutationObserver.mock.instances[i]['observe'].mock.calls[0][0] === element) {
+        mockedAttributeMutationObserver = MockedMutationObserver.mock.instances[i];
+        break;
+      }
+    }
+  }
+  mockedAttributeMutationObserver['trigger']([
     {
       target: element,
       attributeName: property,
     },
   ]);
 };
+/* istanbul ignore next */
 /**
  * NOTE: This method is only for **E2E** test cases.
  * It delete the css styles which keys match the RegExp[].
@@ -416,10 +463,22 @@ export const setComponentPropertyWithMutationObserver = (element, property, valu
  * @returns {CSSStyleDeclaration} - CSSStyleDeclaration.
  */
 export const getElementComputedStyle = async (element, ignoredStyleRules) => {
-  const elementStyle = await element.getComputedStyle();
+  return await filterComputedStyle(await element.getComputedStyle(), ignoredStyleRules);
+};
+/* istanbul ignore next */
+/**
+ * NOTE: This method is only for **E2E** test cases.
+ * It delete the css styles which keys match the RegExp[].
+ * The RegExp[] can be customized.
+ *
+ * @param {CSSStyleDeclaration} elementStyle - The element style.
+ * @param {RegExp[]} ignoredStyleRules - The RegExp[] matches style keys that you want to remove from CSS style collection.
+ * @returns {CSSStyleDeclaration} - CSSStyleDeclaration.
+ */
+export const filterComputedStyle = async (elementStyle, ignoredStyleRules) => {
   Object.keys(elementStyle).forEach((key) => {
     ignoredStyleRules.forEach((regExp) => {
-      if (regExp.test(key)) {
+      if (regExp.test(key) || Number(key) >= 0) {
         delete elementStyle[key];
       }
     });
@@ -495,3 +554,29 @@ export function mockChartElement(svg) {
   }
   catch (e) { }
 }
+/**
+ * Inject Font Awesome lib for e2e test
+ *
+ * @param {E2EPage} page - page host of e2e
+ * @returns {Promise<void>} -
+ */
+export const injectE2EFontAwesomeLib = async (page) => {
+  await page.addStyleTag({ path: './node_modules/@fortawesome/fontawesome-free/css/fontawesome.css' });
+  await page.addStyleTag({ path: './node_modules/@fortawesome/fontawesome-free/css/solid.css' });
+  await page.addStyleTag({ path: './src/test-assets/testFontawesomeSolidFontBase64.css' });
+  await page.waitForTimeout(300); // Note: Waiting for fontawesome.css loaded by addStyleTag
+};
+/**
+ * query the first dropdown item element found within a Vega dropdown component on a given page.
+ *
+ * @param {SpecPage} page - a rendered page or component in a testing environment
+ * @param {string} [itemSelector=vega-dropdown-item] - The `itemSelector` parameter is a string that
+ * represents the CSS selector for the dropdown item element you want to query. It is optional and
+ * defaults to `'vega-dropdown-item'`.
+ * @returns {HTMLElement} an HTMLElement.
+ */
+export function queryVegaDropdownItem(page, itemSelector = 'vega-dropdown-item') {
+  const dropdownBox = page.body.querySelector('vega-dropdown-content-box');
+  const virtualScroll = dropdownBox.shadowRoot.querySelector('vega-virtual-scroll');
+  return virtualScroll.shadowRoot.querySelector(itemSelector);
+}

package/dist/collection/utils/ui.js

@@ -38,7 +38,7 @@ export const getBrowserVisibleArea = () => {
 export function findParent(el, selector) {
   if (!el)
     return null;
-  const parent = el.parentElement;
+  const parent = el.parentElement || el.getRootNode()['host'];
   return (parent === null || parent === void 0 ? void 0 : parent.matches(selector)) ? parent : findParent(parent, selector);
 }
 /**
@@ -80,14 +80,11 @@ export const arrayToClassString = (classes) => {
  * @returns {boolean} A boolean value.
  */
 export function isParent(element, target) {
+  if (!element || !target)
+    return false;
   if (element === target)
     return true;
-  if (element) {
-    return isParent(element.parentElement, target);
-  }
-  else {
-    return false;
-  }
+  return isParent(element.parentElement || element.getRootNode()['host'], target);
 }
 /**
  * "Scroll the container to the item."
@@ -186,3 +183,18 @@ export function isTextWrapped(element) {
 export function getElementComputedStyle(element, styleName) {
   return window.getComputedStyle(element).getPropertyValue(styleName);
 }
+/**
+ * Get the deep active element in shadow component
+ *
+ * @param {Document | ShadowRoot} root the root element
+ * @returns {HTMLElement|null} active element
+ */
+export function getDeepActiveElementInShadow(root = document) {
+  const activeEl = root.activeElement;
+  if (activeEl && activeEl.shadowRoot) {
+    return getDeepActiveElementInShadow(activeEl.shadowRoot);
+  }
+  else {
+    return activeEl;
+  }
+}

package/dist/collection/value-model-adapters/angularNgModelAccessorAdapter.js

@@ -1,8 +1,8 @@
 export const AngularAccessorAdapter = [
   {
     elementSelectors: [
-      'vega-checkbox-group',
       'vega-checkbox',
+      'vega-checkbox-group',
       'vega-color-picker',
       'vega-combo-box',
       'vega-date-picker',
@@ -19,4 +19,10 @@ export const AngularAccessorAdapter = [
     targetAttr: 'value',
     type: 'text',
   },
+  {
+    elementSelectors: [],
+    event: 'change',
+    targetAttr: 'value',
+    type: 'text',
+  },
 ];

package/dist/collection/value-model-adapters/vueComponentVModelAdaptor.js

@@ -3,8 +3,8 @@
 export const VueComponentVModelAdaptor = [
   {
     elements: [
-      'vega-checkbox-group',
       'vega-checkbox',
+      'vega-checkbox-group',
       'vega-color-picker',
       'vega-combo-box',
       'vega-date-picker',

package/dist/esm/_commonjsHelpers-9943807e.js

@@ -0,0 +1,17 @@
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+function createCommonjsModule(fn, basedir, module) {
+	return module = {
+		path: basedir,
+		exports: {},
+		require: function (path, base) {
+			return commonjsRequire();
+		}
+	}, fn(module, module.exports), module.exports;
+}
+
+function commonjsRequire () {
+	throw new Error('Dynamic requires are not currently supported by @rollup/plugin-commonjs');
+}
+
+export { commonjsGlobal as a, createCommonjsModule as c };