From fb42d5908e03b87189f0083beaac67acf0010364 Mon Sep 17 00:00:00 2001 From: Marc Laval Date: Wed, 27 May 2015 10:22:30 +0200 Subject: [PATCH] fix(test): solve CSS discrepancies across browsers Closes #2177 --- modules/angular2/src/test_lib/utils.ts | 11 ++++ ...mulated_scoped_shadow_dom_strategy_spec.ts | 6 +- ...lated_unscoped_shadow_dom_strategy_spec.ts | 3 +- .../render/dom/shadow_dom/shadow_css_spec.ts | 57 ++++++++++++------- 4 files changed, 51 insertions(+), 26 deletions(-) diff --git a/modules/angular2/src/test_lib/utils.ts b/modules/angular2/src/test_lib/utils.ts index 0b4ba76023..667c5ba2f7 100644 --- a/modules/angular2/src/test_lib/utils.ts +++ b/modules/angular2/src/test_lib/utils.ts @@ -48,3 +48,14 @@ export function containsRegexp(input: string): RegExp { return RegExpWrapper.create( StringWrapper.replaceAllMapped(input, _ESCAPE_RE, (match) => `\\${match[0]}`)); } + +export function normalizeCSS(css: string): string { + css = StringWrapper.replaceAll(css, RegExpWrapper.create('\\s+'), ' '); + css = StringWrapper.replaceAll(css, RegExpWrapper.create(':\\s'), ':'); + css = StringWrapper.replaceAll(css, RegExpWrapper.create("\\'"), '"'); + css = StringWrapper.replaceAllMapped(css, RegExpWrapper.create('url\\(\\"(.+)\\"\\)'), + (match) => `url(${match[1]})`); + css = StringWrapper.replaceAllMapped(css, RegExpWrapper.create('\\[(.+)=([^"\\]]+)\\]'), + (match) => `[${match[1]}="${match[2]}"]`); + return css; +} diff --git a/modules/angular2/test/render/dom/shadow_dom/emulated_scoped_shadow_dom_strategy_spec.ts b/modules/angular2/test/render/dom/shadow_dom/emulated_scoped_shadow_dom_strategy_spec.ts index 477cd6ca8f..9981308e8a 100644 --- a/modules/angular2/test/render/dom/shadow_dom/emulated_scoped_shadow_dom_strategy_spec.ts +++ b/modules/angular2/test/render/dom/shadow_dom/emulated_scoped_shadow_dom_strategy_spec.ts @@ -10,6 +10,7 @@ import { it, xit, SpyObject, + normalizeCSS } from 'angular2/test_lib'; import {isPresent, isBlank} from 'angular2/src/facade/lang'; @@ -51,9 +52,8 @@ export function main() { it('should rewrite style urls', () => { var styleElement = el(''); strategy.processStyleElement('someComponent', 'http://base', styleElement); - expect(styleElement) - .toHaveText(".foo[_ngcontent-0] {\n" + "background-image: url(http://base/img.jpg);\n" + - "}"); + expect(normalizeCSS(DOM.getText(styleElement))) + .toEqual(".foo[_ngcontent-0] { background-image:url(http://base/img.jpg); }"); }); it('should scope styles', () => { diff --git a/modules/angular2/test/render/dom/shadow_dom/emulated_unscoped_shadow_dom_strategy_spec.ts b/modules/angular2/test/render/dom/shadow_dom/emulated_unscoped_shadow_dom_strategy_spec.ts index 0d0e9373c5..01f4a52ca0 100644 --- a/modules/angular2/test/render/dom/shadow_dom/emulated_unscoped_shadow_dom_strategy_spec.ts +++ b/modules/angular2/test/render/dom/shadow_dom/emulated_unscoped_shadow_dom_strategy_spec.ts @@ -46,8 +46,7 @@ export function main() { it('should rewrite style urls', () => { var styleElement = el(''); strategy.processStyleElement('someComponent', 'http://base', styleElement); - expect(styleElement) - .toHaveText(".foo {" + "background-image: url('http://base/img.jpg');" + "}"); + expect(styleElement).toHaveText(".foo {background-image: url('http://base/img.jpg');}"); }); it('should not inline import rules', () => { diff --git a/modules/angular2/test/render/dom/shadow_dom/shadow_css_spec.ts b/modules/angular2/test/render/dom/shadow_dom/shadow_css_spec.ts index 10ab624be5..908999dff2 100644 --- a/modules/angular2/test/render/dom/shadow_dom/shadow_css_spec.ts +++ b/modules/angular2/test/render/dom/shadow_dom/shadow_css_spec.ts @@ -1,7 +1,18 @@ -import {describe, beforeEach, it, expect, ddescribe, iit, SpyObject, el} from 'angular2/test_lib'; +import { + describe, + beforeEach, + it, + expect, + ddescribe, + iit, + SpyObject, + el, + normalizeCSS +} from 'angular2/test_lib'; import {ShadowCss} from 'angular2/src/render/dom/shadow_dom/shadow_css'; import {RegExpWrapper, StringWrapper} from 'angular2/src/facade/lang'; +import {DOM} from 'angular2/src/dom/dom_adapter'; export function main() { describe('ShadowCss', function() { @@ -10,54 +21,56 @@ export function main() { var shadowCss = new ShadowCss(); var shim = shadowCss.shimCssText(css, contentAttr, hostAttr); var nlRegexp = RegExpWrapper.create('\\n'); - return StringWrapper.replaceAll(shim, nlRegexp, ''); + return normalizeCSS(StringWrapper.replaceAll(shim, nlRegexp, '')); } it('should handle empty string', () => { expect(s('', 'a')).toEqual(''); }); it('should add an attribute to every rule', () => { var css = 'one {color: red;}two {color: red;}'; - var expected = 'one[a] {color: red;}two[a] {color: red;}'; + var expected = 'one[a] {color:red;}two[a] {color:red;}'; expect(s(css, 'a')).toEqual(expected); }); it('should hanlde invalid css', () => { var css = 'one {color: red;}garbage'; - var expected = 'one[a] {color: red;}'; + var expected = 'one[a] {color:red;}'; expect(s(css, 'a')).toEqual(expected); }); it('should add an attribute to every selector', () => { var css = 'one, two {color: red;}'; - var expected = 'one[a], two[a] {color: red;}'; + var expected = 'one[a], two[a] {color:red;}'; expect(s(css, 'a')).toEqual(expected); }); it('should handle media rules', () => { - var css = '@media screen and (max-width: 800px) {div {font-size: 50px;}}'; - var expected = '@media screen and (max-width: 800px) {div[a] {font-size: 50px;}}'; + var css = '@media screen and (max-width:800px) {div {font-size:50px;}}'; + var expected = '@media screen and (max-width:800px) {div[a] {font-size:50px;}}'; expect(s(css, 'a')).toEqual(expected); }); it('should handle media rules with simple rules', () => { var css = '@media screen and (max-width: 800px) {div {font-size: 50px;}} div {}'; - var expected = '@media screen and (max-width: 800px) {div[a] {font-size: 50px;}}div[a] {}'; + var expected = '@media screen and (max-width:800px) {div[a] {font-size:50px;}}div[a] {}'; expect(s(css, 'a')).toEqual(expected); }); it('should handle keyframes rules', () => { var css = '@keyframes foo {0% {transform: translate(-50%) scaleX(0);}}'; var passRe = RegExpWrapper.create( - '@keyframes foo {\\s*0% {\\s*transform: translate\\(-50%\\) scaleX\\(0\\);\\s*}}'); + '@keyframes foo {\\s*0% {\\s*transform:translate\\(-50%\\) scaleX\\(0\\);\\s*}\\s*}'); expect(RegExpWrapper.test(passRe, s(css, 'a'))).toEqual(true); }); - it('should handle -webkit-keyframes rules', () => { - var css = '@-webkit-keyframes foo {0% {transform: translate(-50%) scaleX(0);}}'; - var passRe = RegExpWrapper.create( - '@-webkit-keyframes foo {\\s*0% {\\s*transform: translate\\(-50%\\) scaleX\\(0\\);\\s*}}'); - expect(RegExpWrapper.test(passRe, s(css, 'a'))).toEqual(true); - }); + if (DOM.getUserAgent().indexOf('AppleWebKit') > -1) { + it('should handle -webkit-keyframes rules', () => { + var css = '@-webkit-keyframes foo {0% {transform: translate(-50%) scaleX(0);}}'; + var passRe = RegExpWrapper.create( + '@-webkit-keyframes foo {\\s*0% {\\s*transform:translate\\(-50%\\) scaleX\\(0\\);\\s*}}'); + expect(RegExpWrapper.test(passRe, s(css, 'a'))).toEqual(true); + }); + } it('should handle complicated selectors', () => { expect(s('one::before {}', 'a')).toEqual('one[a]::before {}'); @@ -65,7 +78,9 @@ export function main() { expect(s('one>two {}', 'a')).toEqual('one[a] > two[a] {}'); expect(s('one+two {}', 'a')).toEqual('one[a] + two[a] {}'); expect(s('one~two {}', 'a')).toEqual('one[a] ~ two[a] {}'); - expect(s('.one.two > three {}', 'a')).toEqual('.one.two[a] > three[a] {}'); + var res = s('.one.two > three {}', 'a'); // IE swap classes + expect(res == '.one.two[a] > three[a] {}' || res == '.two.one[a] > three[a] {}') + .toEqual(true); expect(s('one[attr="value"] {}', 'a')).toEqual('one[attr="value"][a] {}'); expect(s('one[attr=value] {}', 'a')).toEqual('one[attr="value"][a] {}'); expect(s('one[attr^="value"] {}', 'a')).toEqual('one[attr^="value"][a] {}'); @@ -99,18 +114,18 @@ export function main() { it('should support polyfill-unscoped-rule', () => { var css = s("polyfill-unscoped-rule {content: '#menu > .bar';color: blue;}", 'a'); - expect(StringWrapper.contains(css, '#menu > .bar {;color: blue;}')).toBeTruthy(); + expect(StringWrapper.contains(css, '#menu > .bar {;color:blue;}')).toBeTruthy(); css = s('polyfill-unscoped-rule {content: "#menu > .bar";color: blue;}', 'a'); - expect(StringWrapper.contains(css, '#menu > .bar {;color: blue;}')).toBeTruthy(); + expect(StringWrapper.contains(css, '#menu > .bar {;color:blue;}')).toBeTruthy(); }); it('should support polyfill-rule', () => { var css = s("polyfill-rule {content: ':host.foo .bar';color: blue;}", 'a', 'a-host'); - expect(css).toEqual('[a-host].foo .bar {color: blue;}'); + expect(css).toEqual('[a-host].foo .bar {color:blue;}'); - css = s('polyfill-rule {content: ":host.foo .bar";color: blue;}', 'a', 'a-host'); - expect(css).toEqual('[a-host].foo .bar {color: blue;}'); + css = s('polyfill-rule {content: ":host.foo .bar";color:blue;}', 'a', 'a-host'); + expect(css).toEqual('[a-host].foo .bar {color:blue;}'); }); it('should handle ::shadow', () => {