Skip to content
This repository was archived by the owner on Jan 6, 2025. It is now read-only.

fix(build): remove use of Angular private API #195

Merged
merged 1 commit into from
Feb 22, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 1 addition & 4 deletions src/lib/flexbox/api/base.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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();
}

Expand Down
20 changes: 10 additions & 10 deletions src/lib/flexbox/api/flex.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -25,7 +26,6 @@ import {
queryFor
} from '../../utils/testing/helpers';

const getDOM = __platform_browser_private__.getDOM;
const isIE = !!document["documentMode"];

describe('flex directive', () => {
Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -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();
});
Expand All @@ -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();
});
Expand Down
36 changes: 17 additions & 19 deletions src/lib/utils/testing/custom-matchers.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 = <any>(typeof window === 'undefined' ? global : window);

import {_dom as _} from './dom-tools';
import {applyCssPrefixes} from '../auto-prefixer';

export const expect: (actual: any) => NgMatchers = <any> _global.expect;

/**
Expand Down Expand Up @@ -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 ' : ''}
Expand All @@ -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 => {
Expand Down Expand Up @@ -149,43 +147,43 @@ 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"];
};

if (n instanceof Array) {
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);
}

94 changes: 94 additions & 0 deletions src/lib/utils/testing/dom-tools.ts
Original file line number Diff line number Diff line change
@@ -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 (<any>el).getDistributedNodes();
}

function getShadowRoot(el: HTMLElement): DocumentFragment {
return (<any>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;
}