diff --git a/src/lib/flexbox/api/base.ts b/src/lib/flexbox/api/base.ts index e5a538176..aba765f38 100644 --- a/src/lib/flexbox/api/base.ts +++ b/src/lib/flexbox/api/base.ts @@ -7,9 +7,6 @@ */ import {ElementRef, Renderer, OnDestroy} from '@angular/core'; -import {__platform_browser_private__} from '@angular/platform-browser'; -const getDOM = __platform_browser_private__.getDOM; - import {applyCssPrefixes} from '../../utils/auto-prefixer'; import {ResponsiveActivation, KeyOptions} from '../responsive/responsive-activation'; @@ -92,7 +89,7 @@ export abstract class BaseFxDirective implements OnDestroy { */ protected _getDisplayStyle(source?: HTMLElement): string { let element: HTMLElement = source || this._elementRef.nativeElement; - let value = (element.style as any)['display'] || getDOM().getComputedStyle(element)['display']; + let value = (element.style as any)['display'] || getComputedStyle(element)['display']; return value.trim(); } diff --git a/src/lib/flexbox/api/flex.spec.ts b/src/lib/flexbox/api/flex.spec.ts index 2b2c33b9e..70f61f77a 100644 --- a/src/lib/flexbox/api/flex.spec.ts +++ b/src/lib/flexbox/api/flex.spec.ts @@ -15,8 +15,9 @@ import {MockMatchMedia} from '../../media-query/mock/mock-match-media'; import {MatchMedia} from '../../media-query/match-media'; import {FlexLayoutModule} from '../_module'; -import {__platform_browser_private__} from '@angular/platform-browser'; -import {customMatchers, expect} from '../../utils/testing/custom-matchers'; +import {customMatchers, expect } from '../../utils/testing/custom-matchers'; +import { _dom as _ } from '../../utils/testing/dom-tools'; + import { makeExpectDOMFrom, makeExpectDOMForQuery, @@ -25,7 +26,6 @@ import { queryFor } from '../../utils/testing/helpers'; -const getDOM = __platform_browser_private__.getDOM; const isIE = !!document["documentMode"]; describe('flex directive', () => { @@ -65,11 +65,11 @@ describe('flex directive', () => { fRef.detectChanges(); let dom = fRef.debugElement.children[0].nativeElement; - let isBox = getDOM().hasStyle(dom, 'box-sizing', 'border-box'); - let hasFlex = getDOM().hasStyle(dom, 'flex', '1 1 1e-09px') || // IE - getDOM().hasStyle(dom, 'flex', '1 1 1e-9px') || // Chrome - getDOM().hasStyle(dom, 'flex', '1 1 0.000000001px') || // Safari - getDOM().hasStyle(dom, 'flex', '1 1 0px'); + let isBox = _.hasStyle(dom, 'box-sizing', 'border-box'); + let hasFlex = _.hasStyle(dom, 'flex', '1 1 1e-09px') || // IE + _.hasStyle(dom, 'flex', '1 1 1e-9px') || // Chrome + _.hasStyle(dom, 'flex', '1 1 0.000000001px') || // Safari + _.hasStyle(dom, 'flex', '1 1 0px'); expect(isBox).toBeTruthy(); expect(hasFlex).toBeTruthy(); @@ -182,7 +182,7 @@ describe('flex directive', () => { fRef.detectChanges(); let dom = fRef.debugElement.children[0].nativeElement; - let maxWidthStyle = getDOM().getStyle(dom, 'max-width'); + let maxWidthStyle = _.getStyle(dom, 'max-width'); expect(maxWidthStyle).toBeFalsy(); }); @@ -198,7 +198,7 @@ describe('flex directive', () => { fRef.detectChanges(); let dom = fRef.debugElement.children[0].nativeElement; - let minWidthStyle = getDOM().getStyle(dom, 'min-width'); + let minWidthStyle = _.getStyle(dom, 'min-width'); expect(minWidthStyle).toBeFalsy(); }); diff --git a/src/lib/utils/testing/custom-matchers.ts b/src/lib/utils/testing/custom-matchers.ts index 734da8e34..4100d9b3f 100644 --- a/src/lib/utils/testing/custom-matchers.ts +++ b/src/lib/utils/testing/custom-matchers.ts @@ -6,14 +6,12 @@ * found in the LICENSE file at https://angular.io/license */ -import {__platform_browser_private__} from '@angular/platform-browser'; -import {applyCssPrefixes} from '../auto-prefixer'; - declare var global: any; - -const getDOM = __platform_browser_private__.getDOM; const _global = (typeof window === 'undefined' ? global : window); +import {_dom as _} from './dom-tools'; +import {applyCssPrefixes} from '../auto-prefixer'; + export const expect: (actual: any) => NgMatchers = _global.expect; /** @@ -101,7 +99,7 @@ export const customMatchers: jasmine.CustomMatcherFactories = { function buildError(isNot: boolean) { return function (actual: any, className: string) { return { - pass: getDOM().hasClass(actual, className) == !isNot, + pass: _.hasClass(actual, className) == !isNot, get message() { return ` Expected ${actual.outerHTML} ${isNot ? 'not ' : ''} @@ -118,7 +116,7 @@ export const customMatchers: jasmine.CustomMatcherFactories = { compare: function (actual: any, styles: {[k: string]: string}|string) { let allPassed: boolean; if (typeof styles === 'string') { - allPassed = getDOM().hasStyle(actual, styles); + allPassed = _.hasStyle(actual, styles); } else { allPassed = Object.keys(styles).length !== 0; Object.keys(styles).forEach(prop => { @@ -149,20 +147,20 @@ export const customMatchers: jasmine.CustomMatcherFactories = { */ function hasPrefixedStyles(actual, key, value) { value = value !== "*" ? value.trim() : undefined; - let hasStyle = getDOM().hasStyle(actual, key, value); - if (!hasStyle) { + let elHasStyle = _.hasStyle(actual, key, value); + if (!elHasStyle) { let prefixedStyles = applyCssPrefixes({[key]: value}); Object.keys(prefixedStyles).forEach(prop => { // Search for optional prefixed values - hasStyle = hasStyle || getDOM().hasStyle(actual, prop, prefixedStyles[prop]); + elHasStyle = elHasStyle || _.hasStyle(actual, prop, prefixedStyles[prop]); }); } - return hasStyle; + return elHasStyle; } function elementText(n: any): string { const hasNodes = (m: any) => { - const children = getDOM().childNodes(m); + const children = _.childNodes(m); return children && children["length"]; }; @@ -170,22 +168,22 @@ function elementText(n: any): string { return n.map(elementText).join(''); } - if (getDOM().isCommentNode(n)) { + if (_.isCommentNode(n)) { return ''; } - if (getDOM().isElementNode(n) && getDOM().tagName(n) == 'CONTENT') { - return elementText(Array.prototype.slice.apply(getDOM().getDistributedNodes(n))); + if (_.isElementNode(n) && _.tagName(n) == 'CONTENT') { + return elementText(Array.prototype.slice.apply(_.getDistributedNodes(n))); } - if (getDOM().hasShadowRoot(n)) { - return elementText(getDOM().childNodesAsList(getDOM().getShadowRoot(n))); + if (_.hasShadowRoot(n)) { + return elementText(_.childNodesAsList(_.getShadowRoot(n))); } if (hasNodes(n)) { - return elementText(getDOM().childNodesAsList(n)); + return elementText(_.childNodesAsList(n)); } - return getDOM().getText(n); + return _.getText(n); } diff --git a/src/lib/utils/testing/dom-tools.ts b/src/lib/utils/testing/dom-tools.ts new file mode 100644 index 000000000..28268fc7e --- /dev/null +++ b/src/lib/utils/testing/dom-tools.ts @@ -0,0 +1,94 @@ +/** + * @license + * Copyright Google Inc. All Rights Reserved. + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://angular.io/license + */ + +/** + * Exported DOM accessor utility functions + */ +export const _dom = { + hasStyle, + getDistributedNodes, + getShadowRoot, + getText, + getStyle, + childNodes, + childNodesAsList, + hasClass, + hasShadowRoot, + isCommentNode, + isElementNode, + isPresent, + isShadowRoot, + tagName +}; + +// ****************************************************************************************** +// These functions are cloned from +// * @angular/platform-browser/src/browser/GenericBrowserDomAdapter +// and are to be used ONLY internally in custom-matchers.ts and Unit Tests +// ****************************************************************************************** + +function getStyle(element: any, stylename: string): string { + return element.style[stylename]; +} + +function hasStyle(element: any, styleName: string, styleValue: string = null): boolean { + const value = this.getStyle(element, styleName) || ''; + return styleValue ? value == styleValue : value.length > 0; +} + +function getDistributedNodes(el: HTMLElement): Node[] { + return (el).getDistributedNodes(); +} + +function getShadowRoot(el: HTMLElement): DocumentFragment { + return (el).shadowRoot; +} + +function getText(el: Node): string { + return el.textContent; +} + +function childNodesAsList(el: Node): any[] { + const childNodes = el.childNodes; + const res = new Array(childNodes.length); + for (let i = 0; i < childNodes.length; i++) { + res[i] = childNodes[i]; + } + return res; +} + +function hasClass(element: any, className: string): boolean { + return element.classList.contains(className); +} + +function childNodes(el: any): Node[] { + return el.childNodes; +} + +function hasShadowRoot(node: any): boolean { + return isPresent(node.shadowRoot) && node instanceof HTMLElement; +} + +function isCommentNode(node: Node): boolean { + return node.nodeType === Node.COMMENT_NODE; +} + +function isElementNode(node: Node): boolean { + return node.nodeType === Node.ELEMENT_NODE; +} + +function isShadowRoot(node: any): boolean { + return node instanceof DocumentFragment; +} + +function isPresent(obj: any): boolean { + return obj != null; +} +function tagName(element: any): string { + return element.tagName; +}