86 lines
2.2 KiB
TypeScript
86 lines
2.2 KiB
TypeScript
|
/**
|
||
|
|
* @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
|
||
|
|
*/
|
||
|
|
import {CommonModule} from '@angular/common';
|
||
|
|
import {Component, NgModule, ViewEncapsulation} from '@angular/core';
|
||
|
|
import {TestBed} from '@angular/core/testing';
|
||
|
|
import {describe, it} from '@angular/core/testing/testing_internal';
|
||
|
|
import {BrowserModule} from '@angular/platform-browser';
|
||
|
|
import {By} from '@angular/platform-browser/src/dom/debug/by';
|
||
|
|
import {browserDetection} from '@angular/platform-browser/testing/browser_util';
|
||
|
|
import {expect} from '@angular/platform-browser/testing/matchers';
|
||
|
|
|
||
|
|
export function main() {
|
||
|
|
describe('DomRenderer', () => {
|
||
|
|
|
||
|
|
beforeEach(() => TestBed.configureTestingModule({imports: [BrowserModule, TestModule]}));
|
||
|
|
|
||
|
|
// other browsers don't support shadow dom
|
||
|
|
if (browserDetection.isChromeDesktop) {
|
||
|
|
it('should add only styles with native encapsulation to the shadow DOM', () => {
|
||
|
|
const fixture = TestBed.createComponent(SomeApp);
|
||
|
|
fixture.detectChanges();
|
||
|
|
|
||
|
|
const cmp = fixture.debugElement.query(By.css('cmp-native')).nativeElement;
|
||
|
|
const styles = cmp.shadowRoot.querySelectorAll('style');
|
||
|
|
expect(styles.length).toBe(1);
|
||
|
|
expect(styles[0]).toHaveText('.cmp-native { color: red; }');
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
@Component({
|
||
|
|
selector: 'cmp-native',
|
||
|
|
template: ``,
|
||
|
|
styles: [`.cmp-native { color: red; }`],
|
||
|
|
encapsulation: ViewEncapsulation.Native
|
||
|
|
})
|
||
|
|
class CmpEncapsulationNative {
|
||
|
|
}
|
||
|
|
|
||
|
|
@Component({
|
||
|
|
selector: 'cmp-emulated',
|
||
|
|
template: ``,
|
||
|
|
styles: [`.cmp-emulated { color: blue; }`],
|
||
|
|
encapsulation: ViewEncapsulation.Emulated
|
||
|
|
})
|
||
|
|
class CmpEncapsulationEmulated {
|
||
|
|
}
|
||
|
|
|
||
|
|
@Component({
|
||
|
|
selector: 'cmp-none',
|
||
|
|
template: ``,
|
||
|
|
styles: [`.cmp-none { color: yellow; }`],
|
||
|
|
encapsulation: ViewEncapsulation.None
|
||
|
|
})
|
||
|
|
class CmpEncapsulationNone {
|
||
|
|
}
|
||
|
|
|
||
|
|
@Component({
|
||
|
|
selector: 'some-app',
|
||
|
|
template: `
|
||
|
|
<cmp-native></cmp-native>
|
||
|
|
<cmp-emulated></cmp-emulated>
|
||
|
|
<cmp-none></cmp-none>
|
||
|
|
`,
|
||
|
|
})
|
||
|
|
export class SomeApp {
|
||
|
|
}
|
||
|
|
|
||
|
|
@NgModule({
|
||
|
|
declarations: [
|
||
|
|
SomeApp,
|
||
|
|
CmpEncapsulationNative,
|
||
|
|
CmpEncapsulationEmulated,
|
||
|
|
CmpEncapsulationNone,
|
||
|
|
],
|
||
|
|
imports: [CommonModule]
|
||
|
|
})
|
||
|
|
class TestModule {
|
||
|
|
}
|