70 lines
2.3 KiB
JavaScript
70 lines
2.3 KiB
JavaScript
|
describe('Component Style Tests', function () {
|
||
|
|
|
||
|
|
beforeAll(function () {
|
||
|
|
browser.get('');
|
||
|
|
});
|
||
|
|
|
||
|
|
it('scopes component styles to component view', function() {
|
||
|
|
var componentH1 = element(by.css('hero-app > h1'));
|
||
|
|
var externalH1 = element(by.css('body > h1'));
|
||
|
|
|
||
|
|
expect(componentH1.getCssValue('fontWeight')).toEqual('normal');
|
||
|
|
expect(externalH1.getCssValue('fontWeight')).not.toEqual('normal');
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
it('allows styling :host element', function() {
|
||
|
|
var host = element(by.css('hero-details'));
|
||
|
|
|
||
|
|
expect(host.getCssValue('borderWidth')).toEqual('1px');
|
||
|
|
});
|
||
|
|
|
||
|
|
it('supports :host() in function form', function() {
|
||
|
|
var host = element(by.css('hero-details'));
|
||
|
|
|
||
|
|
host.element(by.buttonText('Activate')).click();
|
||
|
|
expect(host.getCssValue('borderWidth')).toEqual('3px');
|
||
|
|
});
|
||
|
|
|
||
|
|
it('allows conditional :host-context() styling', function() {
|
||
|
|
var h2 = element(by.css('hero-details h2'));
|
||
|
|
|
||
|
|
expect(h2.getCssValue('backgroundColor')).toEqual('rgba(238, 238, 255, 1)'); // #eeeeff
|
||
|
|
});
|
||
|
|
|
||
|
|
it('styles both view and content children with /deep/', function() {
|
||
|
|
var viewH3 = element(by.css('hero-team h3'));
|
||
|
|
var contentH3 = element(by.css('hero-controls h3'));
|
||
|
|
|
||
|
|
expect(viewH3.getCssValue('fontStyle')).toEqual('italic');
|
||
|
|
expect(contentH3.getCssValue('fontStyle')).toEqual('italic');
|
||
|
|
});
|
||
|
|
|
||
|
|
it('includes styles loaded with CSS @import', function() {
|
||
|
|
var host = element(by.css('hero-details'));
|
||
|
|
|
||
|
|
expect(host.getCssValue('padding')).toEqual('10px');
|
||
|
|
});
|
||
|
|
|
||
|
|
it('processes template inline styles', function() {
|
||
|
|
var button = element(by.css('hero-controls button'));
|
||
|
|
var externalButton = element(by.css('body > button'));
|
||
|
|
expect(button.getCssValue('backgroundColor')).toEqual('rgba(255, 255, 255, 1)'); // #ffffff
|
||
|
|
expect(externalButton.getCssValue('backgroundColor')).not.toEqual('rgba(255, 255, 255, 1)');
|
||
|
|
});
|
||
|
|
|
||
|
|
it('processes template <link>s', function() {
|
||
|
|
var li = element(by.css('hero-team li:first-child'));
|
||
|
|
var externalLi = element(by.css('body > ul li'));
|
||
|
|
|
||
|
|
expect(li.getCssValue('listStyleType')).toEqual('square');
|
||
|
|
expect(externalLi.getCssValue('listStyleType')).not.toEqual('square');
|
||
|
|
});
|
||
|
|
|
||
|
|
it('supports relative loading with moduleId', function() {
|
||
|
|
var host = element(by.css('quest-summary'));
|
||
|
|
expect(host.getCssValue('color')).toEqual('rgba(255, 255, 255, 1)'); // #ffffff
|
||
|
|
});
|
||
|
|
|
||
|
|
});
|