angular/packages/compiler/test/shadow_css/polyfills_spec.ts
dario-piotrowicz 61023b563d refactor(compiler): refactor the shadow css specs (#48443)
apply different quality of life improvements to the shadow
css unit tests:

- refactor the tests so that they are nicely divided in multiple files
   in a logical manner instead of having most of them all in a single big file

- remove the css normalization logic inconsistently used throughout  the tests, which
  causes tests to be inconsistent and it also introduced unintuitive checks

- provide a shared shim utility function (instead of re-defining it
  multiple times)

- add a `toEqualCss` matcher that can be used in the tests in order to
  match css strings without caring about spacing and indentation

PR Close #48443
2023-01-11 14:55:52 -08:00

54 lines
2.2 KiB
TypeScript

/**
* @license
* Copyright Google LLC 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 {shim} from './utils';
describe('ShadowCss, polyfills', () => {
it('should support polyfill-next-selector', () => {
let css = shim('polyfill-next-selector {content: \'x > y\'} z {}', 'contenta');
expect(css).toEqualCss('x[contenta] > y[contenta]{}');
css = shim('polyfill-next-selector {content: "x > y"} z {}', 'contenta');
expect(css).toEqualCss('x[contenta] > y[contenta]{}');
css = shim(`polyfill-next-selector {content: 'button[priority="1"]'} z {}`, 'contenta');
expect(css).toEqualCss('button[priority="1"][contenta]{}');
});
it('should support polyfill-unscoped-rule', () => {
let css = shim('polyfill-unscoped-rule {content: \'#menu > .bar\';color: blue;}', 'contenta');
expect(css).toContain('#menu > .bar {;color: blue;}');
css = shim('polyfill-unscoped-rule {content: "#menu > .bar";color: blue;}', 'contenta');
expect(css).toContain('#menu > .bar {;color: blue;}');
css = shim(`polyfill-unscoped-rule {content: 'button[priority="1"]'}`, 'contenta');
expect(css).toContain('button[priority="1"] {}');
});
it('should support multiple instances polyfill-unscoped-rule', () => {
const css = shim(
'polyfill-unscoped-rule {content: \'foo\';color: blue;}' +
'polyfill-unscoped-rule {content: \'bar\';color: blue;}',
'contenta');
expect(css).toContain('foo {;color: blue;}');
expect(css).toContain('bar {;color: blue;}');
});
it('should support polyfill-rule', () => {
let css =
shim('polyfill-rule {content: \':host.foo .bar\';color: blue;}', 'contenta', 'a-host');
expect(css).toEqualCss('.foo[a-host] .bar[contenta] {;color:blue;}');
css = shim('polyfill-rule {content: ":host.foo .bar";color:blue;}', 'contenta', 'a-host');
expect(css).toEqualCss('.foo[a-host] .bar[contenta] {;color:blue;}');
css = shim(`polyfill-rule {content: 'button[priority="1"]'}`, 'contenta', 'a-host');
expect(css).toEqualCss('button[priority="1"][contenta] {}');
});
});