diff --git a/packages/common/test/directives/ng_if_spec.ts b/packages/common/test/directives/ng_if_spec.ts
index 5d41092089..79c805406c 100644
--- a/packages/common/test/directives/ng_if_spec.ts
+++ b/packages/common/test/directives/ng_if_spec.ts
@@ -133,7 +133,7 @@ import {expect} from '@angular/platform-browser/testing/src/matchers';
fixture.detectChanges();
els = fixture.debugElement.queryAll(By.css('span'));
expect(els.length).toEqual(1);
- expect(getDOM().hasClass(els[0].nativeElement, 'marker')).toBe(true);
+ expect(els[0].nativeElement.classList.contains('marker')).toBe(true);
expect(fixture.nativeElement).toHaveText('hello');
}));
diff --git a/packages/common/test/directives/non_bindable_spec.ts b/packages/common/test/directives/non_bindable_spec.ts
index a6ee2330f4..ee713c70c9 100644
--- a/packages/common/test/directives/non_bindable_spec.ts
+++ b/packages/common/test/directives/non_bindable_spec.ts
@@ -10,6 +10,7 @@ import {Component, Directive} from '@angular/core';
import {ElementRef} from '@angular/core/src/linker/element_ref';
import {ComponentFixture, TestBed, async} from '@angular/core/testing';
import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter';
+import {hasClass} from '@angular/platform-browser/testing/src/browser_util';
import {expect} from '@angular/platform-browser/testing/src/matchers';
{
@@ -37,7 +38,7 @@ import {expect} from '@angular/platform-browser/testing/src/matchers';
// We must use getDOM().querySelector instead of fixture.query here
// since the elements inside are not compiled.
const span = getDOM().querySelector(fixture.nativeElement, '#child');
- expect(getDOM().hasClass(span, 'compiled')).toBeFalsy();
+ expect(hasClass(span, 'compiled')).toBeFalsy();
}));
it('should trigger directives on the same node', async(() => {
@@ -45,7 +46,7 @@ import {expect} from '@angular/platform-browser/testing/src/matchers';
const fixture = createTestComponent(template);
fixture.detectChanges();
const span = getDOM().querySelector(fixture.nativeElement, '#child');
- expect(getDOM().hasClass(span, 'compiled')).toBeTruthy();
+ expect(hasClass(span, 'compiled')).toBeTruthy();
}));
});
}
diff --git a/packages/core/test/animation/animation_integration_spec.ts b/packages/core/test/animation/animation_integration_spec.ts
index a35f3b2945..f80fea4d94 100644
--- a/packages/core/test/animation/animation_integration_spec.ts
+++ b/packages/core/test/animation/animation_integration_spec.ts
@@ -13,6 +13,7 @@ import {TestBed, fakeAsync, flushMicrotasks} from '@angular/core/testing';
import {ɵDomRendererFactory2} from '@angular/platform-browser';
import {ANIMATION_MODULE_TYPE, BrowserAnimationsModule, NoopAnimationsModule} from '@angular/platform-browser/animations';
import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter';
+import {hasStyle} from '@angular/platform-browser/testing/src/browser_util';
import {ivyEnabled, modifiedInIvy} from '@angular/private/testing';
const DEFAULT_NAMESPACE_ID = 'id';
@@ -1446,8 +1447,7 @@ const DEFAULT_COMPONENT_ID = '1';
const player = engine.players.pop();
player.finish();
- expect(getDOM().hasStyle(cmp.element.nativeElement, 'background-color', 'green'))
- .toBeTruthy();
+ expect(hasStyle(cmp.element.nativeElement, 'background-color', 'green')).toBeTruthy();
});
it('should retain state styles when the underlying DOM structure changes even if there are no insert/remove animations',
@@ -2039,7 +2039,7 @@ const DEFAULT_COMPONENT_ID = '1';
player.finish();
flushMicrotasks();
- expect(getDOM().hasStyle(element, 'color', 'red')).toBeTruthy();
+ expect(hasStyle(element, 'color', 'red')).toBeTruthy();
cmp.exp = '1';
cmp.color = 'blue';
@@ -2047,7 +2047,7 @@ const DEFAULT_COMPONENT_ID = '1';
resetLog();
flushMicrotasks();
- expect(getDOM().hasStyle(element, 'color', 'blue')).toBeTruthy();
+ expect(hasStyle(element, 'color', 'blue')).toBeTruthy();
cmp.exp = '1';
cmp.color = null;
@@ -2055,7 +2055,7 @@ const DEFAULT_COMPONENT_ID = '1';
resetLog();
flushMicrotasks();
- expect(getDOM().hasStyle(element, 'color', 'black')).toBeTruthy();
+ expect(hasStyle(element, 'color', 'black')).toBeTruthy();
}));
it('should substitute in values if the provided state match is an object with values', () => {
@@ -2157,9 +2157,9 @@ const DEFAULT_COMPONENT_ID = '1';
p1.finish();
flushMicrotasks();
- expect(getDOM().hasStyle(element, 'color', 'blue')).toBeTruthy();
- expect(getDOM().hasStyle(element, 'fontSize', '50px')).toBeTruthy();
- expect(getDOM().hasStyle(element, 'width', '888px')).toBeTruthy();
+ expect(hasStyle(element, 'color', 'blue')).toBeTruthy();
+ expect(hasStyle(element, 'fontSize', '50px')).toBeTruthy();
+ expect(hasStyle(element, 'width', '888px')).toBeTruthy();
}));
it('should only evaluate final state param substitutions from the expression and state values and not from the transition options ',
@@ -2223,8 +2223,8 @@ const DEFAULT_COMPONENT_ID = '1';
p1.finish();
flushMicrotasks();
- expect(getDOM().hasStyle(element, 'width', '100px')).toBeTruthy();
- expect(getDOM().hasStyle(element, 'height', '100px')).toBeTruthy();
+ expect(hasStyle(element, 'width', '100px')).toBeTruthy();
+ expect(hasStyle(element, 'height', '100px')).toBeTruthy();
}));
it('should not flush animations twice when an inner component runs change detection', () => {
diff --git a/packages/core/test/debug/debug_node_spec.ts b/packages/core/test/debug/debug_node_spec.ts
index f78f2b7d81..7f21230905 100644
--- a/packages/core/test/debug/debug_node_spec.ts
+++ b/packages/core/test/debug/debug_node_spec.ts
@@ -12,6 +12,7 @@ import {Component, DebugNode, Directive, ElementRef, EmbeddedViewRef, EventEmitt
import {ComponentFixture, TestBed, async} from '@angular/core/testing';
import {By} from '@angular/platform-browser/src/dom/debug/by';
import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter';
+import {hasClass} from '@angular/platform-browser/testing/src/browser_util';
import {expect} from '@angular/platform-browser/testing/src/matchers';
import {ivyEnabled} from '@angular/private/testing';
@@ -254,24 +255,24 @@ class TestCmptWithPropBindings {
// The root component has 3 elements in its view.
expect(childEls.length).toEqual(3);
- expect(getDOM().hasClass(childEls[0].nativeElement, 'parent')).toBe(true);
- expect(getDOM().hasClass(childEls[1].nativeElement, 'parent')).toBe(true);
- expect(getDOM().hasClass(childEls[2].nativeElement, 'child-comp-class')).toBe(true);
+ expect(hasClass(childEls[0].nativeElement, 'parent')).toBe(true);
+ expect(hasClass(childEls[1].nativeElement, 'parent')).toBe(true);
+ expect(hasClass(childEls[2].nativeElement, 'child-comp-class')).toBe(true);
const nested = childEls[0].children;
expect(nested.length).toEqual(1);
- expect(getDOM().hasClass(nested[0].nativeElement, 'parentnested')).toBe(true);
+ expect(hasClass(nested[0].nativeElement, 'parentnested')).toBe(true);
const childComponent = childEls[2];
const childCompChildren = childComponent.children;
expect(childCompChildren.length).toEqual(2);
- expect(getDOM().hasClass(childCompChildren[0].nativeElement, 'child')).toBe(true);
- expect(getDOM().hasClass(childCompChildren[1].nativeElement, 'child')).toBe(true);
+ expect(hasClass(childCompChildren[0].nativeElement, 'child')).toBe(true);
+ expect(hasClass(childCompChildren[1].nativeElement, 'child')).toBe(true);
const childNested = childCompChildren[0].children;
expect(childNested.length).toEqual(1);
- expect(getDOM().hasClass(childNested[0].nativeElement, 'childnested')).toBe(true);
+ expect(hasClass(childNested[0].nativeElement, 'childnested')).toBe(true);
});
it('should list conditional component child elements', () => {
@@ -282,8 +283,8 @@ class TestCmptWithPropBindings {
// The root component has 2 elements in its view.
expect(childEls.length).toEqual(2);
- expect(getDOM().hasClass(childEls[0].nativeElement, 'parent')).toBe(true);
- expect(getDOM().hasClass(childEls[1].nativeElement, 'cond-content-comp-class')).toBe(true);
+ expect(hasClass(childEls[0].nativeElement, 'parent')).toBe(true);
+ expect(hasClass(childEls[1].nativeElement, 'cond-content-comp-class')).toBe(true);
const conditionalContentComp = childEls[1];
@@ -353,7 +354,7 @@ class TestCmptWithPropBindings {
const childTestEls = fixture.debugElement.queryAll(By.css('child-comp'));
expect(childTestEls.length).toBe(1);
- expect(getDOM().hasClass(childTestEls[0].nativeElement, 'child-comp-class')).toBe(true);
+ expect(hasClass(childTestEls[0].nativeElement, 'child-comp-class')).toBe(true);
});
it('should query child elements by directive', () => {
@@ -363,10 +364,10 @@ class TestCmptWithPropBindings {
const childTestEls = fixture.debugElement.queryAll(By.directive(MessageDir));
expect(childTestEls.length).toBe(4);
- expect(getDOM().hasClass(childTestEls[0].nativeElement, 'parent')).toBe(true);
- expect(getDOM().hasClass(childTestEls[1].nativeElement, 'parentnested')).toBe(true);
- expect(getDOM().hasClass(childTestEls[2].nativeElement, 'child')).toBe(true);
- expect(getDOM().hasClass(childTestEls[3].nativeElement, 'childnested')).toBe(true);
+ expect(hasClass(childTestEls[0].nativeElement, 'parent')).toBe(true);
+ expect(hasClass(childTestEls[1].nativeElement, 'parentnested')).toBe(true);
+ expect(hasClass(childTestEls[2].nativeElement, 'child')).toBe(true);
+ expect(hasClass(childTestEls[3].nativeElement, 'childnested')).toBe(true);
});
it('should query projected child elements by directive', () => {
diff --git a/packages/core/test/view/element_spec.ts b/packages/core/test/view/element_spec.ts
index 5e9fe24afd..06af1f16da 100644
--- a/packages/core/test/view/element_spec.ts
+++ b/packages/core/test/view/element_spec.ts
@@ -139,8 +139,8 @@ const removeEventListener = '__zone_symbol__removeEventListener' as 'removeEvent
Services.checkAndUpdateView(view);
const el = rootNodes[0];
- expect(getDOM().hasClass(el, 'c1')).toBeTruthy();
- expect(getDOM().hasClass(el, 'c2')).toBeTruthy();
+ expect(el.classList.contains('c1')).toBeTruthy();
+ expect(el.classList.contains('c2')).toBeTruthy();
});
});
});
diff --git a/packages/forms/test/reactive_integration_spec.ts b/packages/forms/test/reactive_integration_spec.ts
index 592f1c52ef..6ae324db34 100644
--- a/packages/forms/test/reactive_integration_spec.ts
+++ b/packages/forms/test/reactive_integration_spec.ts
@@ -11,7 +11,7 @@ import {ComponentFixture, TestBed, fakeAsync, tick} from '@angular/core/testing'
import {AbstractControl, AsyncValidator, AsyncValidatorFn, COMPOSITION_BUFFER_MODE, FormArray, FormControl, FormControlDirective, FormControlName, FormGroup, FormGroupDirective, FormsModule, NG_ASYNC_VALIDATORS, NG_VALIDATORS, ReactiveFormsModule, Validators} from '@angular/forms';
import {By} from '@angular/platform-browser/src/dom/debug/by';
import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter';
-import {dispatchEvent} from '@angular/platform-browser/testing/src/browser_util';
+import {dispatchEvent, sortedClassList} from '@angular/platform-browser/testing/src/browser_util';
import {merge, timer} from 'rxjs';
import {tap} from 'rxjs/operators';
@@ -2464,10 +2464,6 @@ class UniqLoginValidator implements AsyncValidator {
validate(c: AbstractControl) { return uniqLoginAsyncValidator(this.expected)(c); }
}
-function sortedClassList(el: HTMLElement) {
- return getDOM().classList(el).sort();
-}
-
@Component({selector: 'form-control-comp', template: ``})
class FormControlComp {
// TODO(issue/24571): remove '!'.
diff --git a/packages/forms/test/template_integration_spec.ts b/packages/forms/test/template_integration_spec.ts
index ed487c032e..a450f836b3 100644
--- a/packages/forms/test/template_integration_spec.ts
+++ b/packages/forms/test/template_integration_spec.ts
@@ -11,7 +11,7 @@ import {ComponentFixture, TestBed, async, fakeAsync, tick} from '@angular/core/t
import {AbstractControl, AsyncValidator, COMPOSITION_BUFFER_MODE, FormControl, FormsModule, NG_ASYNC_VALIDATORS, NgForm, NgFormSelectorWarning, NgModel} from '@angular/forms';
import {By} from '@angular/platform-browser/src/dom/debug/by';
import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter';
-import {dispatchEvent} from '@angular/platform-browser/testing/src/browser_util';
+import {dispatchEvent, sortedClassList} from '@angular/platform-browser/testing/src/browser_util';
import {merge} from 'rxjs';
import {NgModelCustomComp, NgModelCustomWrapper} from './value_accessor_integration_spec';
@@ -1924,9 +1924,3 @@ class NgModelChangesForm {
class NgModelChangeState {
onNgModelChange = () => {};
}
-
-function sortedClassList(el: HTMLElement) {
- const l = getDOM().classList(el);
- l.sort();
- return l;
-}
diff --git a/packages/platform-browser/src/browser/browser_adapter.ts b/packages/platform-browser/src/browser/browser_adapter.ts
index 68f67d0435..1ec8fd3e0e 100644
--- a/packages/platform-browser/src/browser/browser_adapter.ts
+++ b/packages/platform-browser/src/browser/browser_adapter.ts
@@ -196,12 +196,8 @@ export class BrowserDomAdapter extends GenericBrowserDomAdapter {
getElementsByTagName(element: any, name: string): HTMLElement[] {
return element.getElementsByTagName(name);
}
- classList(element: any): any[] { return Array.prototype.slice.call(element.classList, 0); }
addClass(element: any, className: string) { element.classList.add(className); }
removeClass(element: any, className: string) { element.classList.remove(className); }
- hasClass(element: any, className: string): boolean {
- return element.classList.contains(className);
- }
setStyle(element: any, styleName: string, styleValue: string) {
element.style[styleName] = styleValue;
}
@@ -210,11 +206,8 @@ export class BrowserDomAdapter extends GenericBrowserDomAdapter {
// see https://github.com/angular/angular/issues/7916
element.style[stylename] = '';
}
+
getStyle(element: any, stylename: string): string { return element.style[stylename]; }
- hasStyle(element: any, styleName: string, styleValue?: string|null): boolean {
- const value = this.getStyle(element, styleName) || '';
- return styleValue ? value == styleValue : value.length > 0;
- }
getAttribute(element: Element, attribute: string): string|null {
return element.getAttribute(attribute);
diff --git a/packages/platform-browser/src/dom/dom_adapter.ts b/packages/platform-browser/src/dom/dom_adapter.ts
index fdda5991a4..23cb359904 100644
--- a/packages/platform-browser/src/dom/dom_adapter.ts
+++ b/packages/platform-browser/src/dom/dom_adapter.ts
@@ -80,19 +80,16 @@ export abstract class DomAdapter {
abstract getDistributedNodes(el: any): Node[];
abstract clone /**/ (node: Node /*T*/): Node /*T*/;
abstract getElementsByTagName(element: any, name: string): HTMLElement[];
- abstract classList(element: any): any[];
- abstract addClass(element: any, className: string): any;
- abstract removeClass(element: any, className: string): any;
- abstract hasClass(element: any, className: string): boolean;
- abstract setStyle(element: any, styleName: string, styleValue: string): any;
- abstract removeStyle(element: any, styleName: string): any;
- abstract getStyle(element: any, styleName: string): string;
- abstract hasStyle(element: any, styleName: string, styleValue?: string): boolean;
// Used by Meta
abstract getAttribute(element: any, attribute: string): string|null;
// Used by platform-server
+ abstract addClass(element: any, className: string): any;
+ abstract removeClass(element: any, className: string): any;
+ abstract getStyle(element: any, styleName: string): any;
+ abstract setStyle(element: any, styleName: string, styleValue: string): any;
+ abstract removeStyle(element: any, styleName: string): any;
abstract setAttribute(element: any, name: string, value: string): any;
abstract setAttributeNS(element: any, ns: string, name: string, value: string): any;
abstract removeAttribute(element: any, attribute: string): any;
diff --git a/packages/platform-browser/testing/src/browser_util.ts b/packages/platform-browser/testing/src/browser_util.ts
index 9336b78ea9..c7d5da8e0d 100644
--- a/packages/platform-browser/testing/src/browser_util.ts
+++ b/packages/platform-browser/testing/src/browser_util.ts
@@ -199,3 +199,16 @@ export function setCookie(name: string, value: string) {
export function supportsWebAnimation(): boolean {
return typeof(Element).prototype['animate'] === 'function';
}
+
+export function hasStyle(element: any, styleName: string, styleValue?: string | null): boolean {
+ const value = element.style[styleName] || '';
+ return styleValue ? value == styleValue : value.length > 0;
+}
+
+export function hasClass(element: any, className: string): boolean {
+ return element.classList.contains(className);
+}
+
+export function sortedClassList(element: any): any[] {
+ return Array.prototype.slice.call(element.classList, 0).sort();
+}
diff --git a/packages/platform-browser/testing/src/matchers.ts b/packages/platform-browser/testing/src/matchers.ts
index f60e8c411d..ef7a151930 100644
--- a/packages/platform-browser/testing/src/matchers.ts
+++ b/packages/platform-browser/testing/src/matchers.ts
@@ -10,7 +10,8 @@
import {Type, ɵglobal as global} from '@angular/core';
import {ComponentFixture} from '@angular/core/testing';
import {By, ɵgetDOM as getDOM} from '@angular/platform-browser';
-import {isCommentNode} from './browser_util';
+
+import {hasClass, hasStyle, isCommentNode} from './browser_util';
@@ -186,7 +187,7 @@ _global.beforeEach(function() {
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 ' : ''}to contain the CSS class "${className}"`;
}
@@ -200,12 +201,11 @@ _global.beforeEach(function() {
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 => {
- allPassed = allPassed && getDOM().hasStyle(actual, prop, styles[prop]);
- });
+ Object.keys(styles).forEach(
+ prop => { allPassed = allPassed && hasStyle(actual, prop, styles[prop]); });
}
return {
diff --git a/packages/platform-server/src/domino_adapter.ts b/packages/platform-server/src/domino_adapter.ts
index 038994ed11..4a0ee77820 100644
--- a/packages/platform-server/src/domino_adapter.ts
+++ b/packages/platform-server/src/domino_adapter.ts
@@ -162,6 +162,7 @@ export class DominoAdapter extends BrowserDomAdapter {
}
element.setAttribute('style', styleAttrValue);
}
+
setStyle(element: any, styleName: string, styleValue?: string|null) {
styleName = styleName.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
const styleMap = this._readStyleAttribute(element);
@@ -173,14 +174,11 @@ export class DominoAdapter extends BrowserDomAdapter {
// see https://github.com/angular/angular/issues/7916
this.setStyle(element, styleName, '');
}
+
getStyle(element: any, styleName: string): string {
const styleMap = this._readStyleAttribute(element);
return styleMap[styleName] || '';
}
- hasStyle(element: any, styleName: string, styleValue?: string): boolean {
- const value = this.getStyle(element, styleName);
- return styleValue ? value == styleValue : value.length > 0;
- }
dispatchEvent(el: Node, evt: any) {
el.dispatchEvent(evt);
diff --git a/packages/platform-webworker/src/web_workers/worker/worker_adapter.ts b/packages/platform-webworker/src/web_workers/worker/worker_adapter.ts
index 4169438f13..f54dd66d0f 100644
--- a/packages/platform-webworker/src/web_workers/worker/worker_adapter.ts
+++ b/packages/platform-webworker/src/web_workers/worker/worker_adapter.ts
@@ -89,16 +89,11 @@ export class WorkerDomAdapter extends DomAdapter {
getDistributedNodes(el: any): Node[] { throw 'not implemented'; }
clone(node: Node): Node { throw 'not implemented'; }
getElementsByTagName(element: any, name: string): HTMLElement[] { throw 'not implemented'; }
- classList(element: any): any[] { throw 'not implemented'; }
addClass(element: any, className: string) { throw 'not implemented'; }
removeClass(element: any, className: string) { throw 'not implemented'; }
- hasClass(element: any, className: string): boolean { throw 'not implemented'; }
setStyle(element: any, styleName: string, styleValue: string) { throw 'not implemented'; }
removeStyle(element: any, styleName: string) { throw 'not implemented'; }
getStyle(element: any, styleName: string): string { throw 'not implemented'; }
- hasStyle(element: any, styleName: string, styleValue?: string): boolean {
- throw 'not implemented';
- }
getAttribute(element: any, attribute: string): string { throw 'not implemented'; }
setAttribute(element: any, name: string, value: string) { throw 'not implemented'; }
setAttributeNS(element: any, ns: string, name: string, value: string) { throw 'not implemented'; }
diff --git a/packages/platform-webworker/test/web_workers/worker/renderer_v2_integration_spec.ts b/packages/platform-webworker/test/web_workers/worker/renderer_v2_integration_spec.ts
index 3eae1906e6..95f67b3e01 100644
--- a/packages/platform-webworker/test/web_workers/worker/renderer_v2_integration_spec.ts
+++ b/packages/platform-webworker/test/web_workers/worker/renderer_v2_integration_spec.ts
@@ -12,7 +12,7 @@ import {platformBrowserDynamicTesting} from '@angular/platform-browser-dynamic/t
import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter';
import {DomRendererFactory2} from '@angular/platform-browser/src/dom/dom_renderer';
import {BrowserTestingModule} from '@angular/platform-browser/testing';
-import {browserDetection, dispatchEvent} from '@angular/platform-browser/testing/src/browser_util';
+import {browserDetection, dispatchEvent, hasClass} from '@angular/platform-browser/testing/src/browser_util';
import {expect} from '@angular/platform-browser/testing/src/matchers';
import {ClientMessageBrokerFactory} from '@angular/platform-webworker/src/web_workers/shared/client_message_broker';
import {RenderStore} from '@angular/platform-webworker/src/web_workers/shared/render_store';
@@ -109,10 +109,10 @@ let lastCreatedRenderer: Renderer2;
expect(el.tabIndex).toEqual(1);
lastCreatedRenderer.addClass(workerEl, 'a');
- expect(getDOM().hasClass(el, 'a')).toBe(true);
+ expect(hasClass(el, 'a')).toBe(true);
lastCreatedRenderer.removeClass(workerEl, 'a');
- expect(getDOM().hasClass(el, 'a')).toBe(false);
+ expect(hasClass(el, 'a')).toBe(false);
lastCreatedRenderer.setStyle(workerEl, 'width', '10px');
expect(getDOM().getStyle(el, 'width')).toEqual('10px');