testaro 18.2.0 → 18.4.0

package/aslint/utils/console.ts

@@ -0,0 +1,89 @@
+import { Global } from './global';
+
+export class Console {
+
+  public static init(globalContext?: any): any {
+    const globalAny: any = globalContext || Global.context;
+    const consoleCountData: any = {};
+    const methods: string[] = ['assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log', 'msIsIndependentlyComposed', 'profile', 'profileEnd', 'select', 'time', 'timeEnd', 'trace', 'warn'];
+    const config: any = {
+      trace: true
+    };
+
+    const noop = (): boolean => {
+      return false;
+    };
+
+    if (typeof globalAny.console === 'undefined') {
+      globalAny.console = {};
+    }
+
+    globalAny.console.config = config;
+
+    if (typeof globalAny.console.count === 'undefined') {
+      globalAny.console.count = function countCalls(...args: any): any {
+        const _arguments = Array.from(args);
+        const str = String(_arguments[0]);
+
+        if (typeof consoleCountData[str] === 'number') {
+          consoleCountData[str] += 1;
+        } else {
+          consoleCountData[str] = 1;
+        }
+
+        _arguments.shift();
+        _arguments.unshift(`${str}: ${consoleCountData[str]}`);
+
+        globalAny.console.log(globalAny.console, ..._arguments);
+
+        return consoleCountData;
+      };
+    }
+
+    if (typeof globalAny.console.countReset === 'undefined') {
+      globalAny.console.countReset = function(str: string): any {
+        const title: string = String(str);
+
+        consoleCountData[title] = 0;
+
+        return consoleCountData;
+      };
+    }
+
+    for (let i: number = 0; i < methods.length; i += 1) {
+      if (typeof globalAny.console[methods[i]] === 'undefined') {
+        globalAny.console[methods[i]] = noop;
+      }
+    }
+
+    /**
+     * Wrap original console method
+     * @param {object} consoleMethod - console method
+     * @param {string} methodName - console method name
+     */
+
+    const wrapper = (methodName: string): void => {
+      const originalMethod: any = globalAny.console[methodName];
+
+      const consoleFn = (args: any): void => {
+        if (globalAny.console.config[methodName]) {
+          originalMethod.apply(globalAny.console, ...args);
+        }
+      };
+
+      consoleFn.originalMethod = false;
+
+      globalAny.console[methodName] = consoleFn;
+    };
+
+    // Wrapping original console methods
+    const processConfig = (key: any): void => {
+      wrapper(key);
+    };
+
+    Object.keys(globalAny.console.config).forEach(processConfig);
+
+    return globalAny.console;
+  }
+
+}

package/aslint/utils/css.test.ts

@@ -0,0 +1,153 @@
+import { Css } from './css';
+
+describe('Utils', () => {
+
+  describe('Css', () => {
+
+    describe('#isLargeText', () => {
+
+      it('should indicate that text is large when font size is 14pt and font weight is bold', () => {
+        const el = document.createElement('div');
+
+        el.style.cssText = 'font-size: 14pt; font-weight: bold;';
+        document.body.appendChild(el);
+
+        const isLargeText = Css.isLargeText(el);
+
+        expect(isLargeText).toBeTruthy();
+
+        el.parentNode.removeChild(el);
+      });
+
+      it('should indicate that text is not large when font size is 14pt and font weight less than bold', () => {
+        const el = document.createElement('div');
+
+        el.style.cssText = 'font-size: 14pt; font-weight: normal;';
+        document.body.appendChild(el);
+
+        const isLargeText = Css.isLargeText(el);
+
+        expect(isLargeText).toBeFalsy();
+
+        el.parentNode.removeChild(el);
+      });
+
+      it('should indicate that text is large when font size is 18pt', () => {
+        const el = document.createElement('div');
+
+        el.style.cssText = 'font-size: 18pt;';
+        document.body.appendChild(el);
+
+        const isLargeText = Css.isLargeText(el);
+
+        expect(isLargeText).toBeTruthy();
+
+        el.parentNode.removeChild(el);
+      });
+
+    });
+
+    describe('#getComputedStyle', () => {
+
+      it('should return style object for specified element', () => {
+        const el = document.createElement('div');
+
+        el.style.cssText = 'position: absolute';
+        document.body.appendChild(el);
+
+        const style = Css.getComputedStyle(el);
+
+        expect(style.position).toBe('absolute');
+
+        el.parentNode.removeChild(el);
+      });
+
+    });
+
+    describe('#getStyle', () => {
+
+      it('should return style value for specified element and css rule', () => {
+        const el = document.createElement('div');
+
+        el.style.cssText = 'position: absolute';
+        document.body.appendChild(el);
+
+        const style = Css.getStyle(el, 'position');
+
+        expect(style).toBe('absolute');
+        el.parentNode.removeChild(el);
+      });
+
+      // TODO: maybe it's worth to check why PhantomJS and JSDOM don't return pseudo-element property value
+      if ((/PhantomJS/).test(window.navigator.userAgent) === false && (/jsdom/).test(window.navigator.userAgent) === false) {
+
+        it('should return pseudo-element and it\'s value for specified element', () => {
+          const el = document.createElement('div'),
+            cssString = 'div:after { content: "test" }',
+            head = document.head || document.getElementsByTagName('head')[0],
+            style = document.createElement('style');
+
+          style.appendChild(document.createTextNode(cssString));
+
+          head.appendChild(style);
+          document.body.appendChild(el);
+
+          const cssStyleDeclaration = Css.getStyle(el, 'content', ':after');
+
+          expect(cssStyleDeclaration).toBe('"test"');
+
+          el.parentNode.removeChild(el);
+          style.parentNode.removeChild(style);
+        });
+
+      }
+
+    });
+
+    describe('#getActualDPI', () => {
+
+      it('should return default DPI as per testing environment', () => {
+        expect(Css.getActualDPI()).toBe(96);
+      });
+
+    });
+
+    describe('#getElementBackgroundImage', () => {
+      let element: HTMLElement = null;
+
+      beforeEach(() => {
+        element = document.createElement('div');
+        document.body.appendChild(element);
+      });
+
+      afterEach(() => {
+        element.parentNode.removeChild(element);
+      });
+
+      it('should return null if theres no background image', () => {
+        expect(Css.getElementBackgroundImage(element)).toEqual(null);
+      });
+
+      it('should return background image of the element', () => {
+        const imageUrl = '/abc123.jpeg';
+
+        element.style.cssText = `background-image: url("${imageUrl}");`;
+
+        expect(Css.getElementBackgroundImage(element)).toContain(imageUrl);
+      });
+
+      it('should return background image of a parent element', () => {
+        const imageUrl = '/abc1234.jpeg';
+
+        element.innerHTML = '<div><div id="testElement"></div></div>';
+        element.style.cssText = `background-image: url("${imageUrl}");`;
+
+        const testElement: HTMLElement = element.querySelector('#testElement');
+
+        expect(Css.getElementBackgroundImage(testElement, true)).toContain(imageUrl);
+      });
+
+    });
+
+  });
+});

package/aslint/utils/css.ts

@@ -0,0 +1,191 @@
+import { TinyColor } from '@ctrl/tinycolor';
+
+import { Env } from './env';
+import { Async } from './async';
+import { CommonUtility } from './common';
+import { ObjectUtility } from './object';
+
+export class Css {
+  private static cachedDPI: number | null = null;
+  private static get floatStyle(): string {
+    return typeof document.documentElement.style.cssFloat === 'string' ? 'cssFloat' : 'styleFloat';
+  }
+
+  constructor() { }
+
+  public static getComputedStyle(element: Element, pseudoElt?: string): CSSStyleDeclaration | null {
+    if (ObjectUtility.isHtmlElement(element)) {
+      return document && document.defaultView && document.defaultView.getComputedStyle(element, pseudoElt || null);
+    }
+
+    return null;
+  }
+
+  // Note: regarding z-index - if browser is applying the z-index on a static element then the "auto" value is a correct value.
+  public static getStyle(element: Element, styleProp: string, pseudoElt?: string): string | null {
+    const isHtmlElement: boolean = ObjectUtility.isHtmlElement(element);
+
+    if (isHtmlElement === false) {
+      return null;
+    }
+
+    if (ObjectUtility.isHostMethod(window, 'getComputedStyle')) {
+      return window.getComputedStyle(element, pseudoElt || null).getPropertyValue(styleProp);
+    }
+
+    if (ObjectUtility.isRealObjectProperty(document, 'defaultView')) {
+      return document && document.defaultView && document.defaultView.getComputedStyle(element, pseudoElt || null).getPropertyValue(styleProp);
+    }
+
+    return null;
+  }
+
+  public static setStyle(element: HTMLElement, style: string, value: string): void {
+    let styleProp: string = style;
+
+    if (styleProp === 'float') {
+      styleProp = Css.floatStyle;
+    }
+
+    element.style.setProperty(styleProp, value);
+  }
+
+  public static getSize(element: Element): ClientRect | DOMRect {
+    return element.getBoundingClientRect();
+  }
+
+  public static getBackgroundColor(element: Element): TinyColor | null {
+    let node: Element = element;
+    const backgroundStyle: string | null = Css.getStyle(node, 'background-color');
+
+    if (backgroundStyle === null) {
+      console.warn('[Css.getBackgroundColor] CSS style background color is not available for element', element);
+
+      return new TinyColor('transparent');
+    }
+
+    let color: TinyColor = new TinyColor(backgroundStyle);
+
+    if (color.toName() !== 'transparent') {
+      return color;
+    }
+
+    while (CommonUtility.isHtmlDocument(node) === false) {
+      const backgroundColorStyle: string | null = Css.getStyle(node, 'background-color');
+
+      color = typeof backgroundColorStyle === 'string' ? new TinyColor(backgroundColorStyle) : new TinyColor('transparent');
+
+      if (color.toName() !== 'transparent') {
+        return color;
+      }
+
+      node = node.parentNode as Element;
+    }
+
+    if (CommonUtility.isHtmlDocument(node)) {
+      color = new TinyColor('transparent');
+    }
+
+    return color;
+  }
+
+  public static getElementBackgroundImage(element: Element, includeParents: boolean = false): string | null {
+    const elementStyles: CSSStyleDeclaration | null = Css.getComputedStyle(element);
+
+    if (elementStyles === null) {
+      return null;
+    }
+
+    if (typeof elementStyles.backgroundImage !== 'string' || ['', 'none'].includes(elementStyles.backgroundImage.trim()) === false) {
+      return elementStyles.backgroundImage;
+    }
+
+    if (includeParents) {
+      let currentElement: Element | null = element.parentElement;
+
+      while (currentElement !== null) {
+        const styles: CSSStyleDeclaration | null = Css.getComputedStyle(currentElement);
+
+        if (styles) {
+          if (typeof styles.backgroundImage !== 'string' || ['', 'none'].includes(styles.backgroundImage.trim()) === false) {
+            return styles.backgroundImage;
+          }
+        }
+
+        currentElement = currentElement.parentElement;
+      }
+    }
+
+    return null;
+  }
+
+  public static getActualDPI(): number {
+    if (Env.isTest) {
+      return 96;
+    }
+
+    if (typeof this.cachedDPI === 'number') {
+      return this.cachedDPI;
+    }
+    const dpiTestElement: HTMLDivElement = document.createElement('div');
+
+    dpiTestElement.style.position = 'fixed';
+    dpiTestElement.style.top = '-999999px';
+    dpiTestElement.style.left = '-999999px';
+    dpiTestElement.style.width = '1in';
+    dpiTestElement.style.height = '1in';
+
+    document.body.appendChild(dpiTestElement);
+
+    const elementWidthStyle: string | null = Css.getStyle(dpiTestElement, 'width');
+    const elementHeightStyle: string | null = Css.getStyle(dpiTestElement, 'height');
+
+    if (elementWidthStyle === null || elementHeightStyle === null) {
+      this.cachedDPI = 0;
+    } else {
+      this.cachedDPI = (parseInt(elementWidthStyle, 10) + parseInt(elementHeightStyle, 10)) / 2;
+    }
+
+
+    dpiTestElement.remove();
+
+    const clearCachedDPI: () => void = (): void => {
+      this.cachedDPI = null;
+    };
+
+    Async.run(clearCachedDPI, this, 1000);
+
+    return this.cachedDPI;
+  }
+
+  public static covertPtToPx(val: string | number, considerDPI: boolean = false): number {
+    const dpi: number = considerDPI ? this.getActualDPI() : 96;
+
+    return typeof val === 'number' || val.endsWith('px') === false ? Math.round((parseInt(val.toString(), 10) * dpi) / 72) : parseInt(val.toString(), 10);
+  }
+
+  public static covertPxToPt(val: string | number, considerDPI: boolean = false): number {
+    const dpi: number = (considerDPI ? this.getActualDPI() : 96);
+
+    return typeof val === 'number' || val.endsWith('pt') === false ? Math.round((parseInt(val.toString(), 10) * 72) / dpi) : parseInt(val.toString(), 10);
+  }
+
+  public static isLargeText(element: Element): boolean {
+    const elementFontSize: string | null = Css.getStyle(element, 'font-size');
+
+    if (elementFontSize === null) {
+      return false;
+    }
+
+    const elementFontWeight: string | null = Css.getStyle(element, 'font-weight');
+    const fontSizePt: number = Css.covertPxToPt(elementFontSize, true);
+    const isFontBold: boolean = elementFontWeight !== null && (elementFontWeight === 'bold' || parseInt(elementFontWeight, 10) >= 700);
+
+    return isFontBold && fontSizePt >= 14 || fontSizePt >= 18;
+  }
+
+  public static isCssTextTransformUsed(element: HTMLElement): boolean {
+    return Css.getStyle(element, 'text-transform') === 'uppercase' || typeof element.style === 'object' && element.style.textTransform.toLowerCase() === 'uppercase';
+  }
+
+}