diff --git a/src/test/directives/style-map_test.ts b/src/test/directives/style-map_test.ts index 830b935aa2..14c0bc9d22 100644 --- a/src/test/directives/style-map_test.ts +++ b/src/test/directives/style-map_test.ts @@ -19,7 +19,8 @@ import {html} from '../../lit-html.js'; const ua = window.navigator.userAgent; const isChrome41 = ua.indexOf('Chrome/41') > 0; const isIE = ua.indexOf('Trident/') > 0; -const testIfSupportsCSSVariables = isIE || isChrome41 ? test.skip : test; +const testIfSupportsCSSVariables = (test: any) => + isIE || isChrome41 ? test.skip : test; const assert = chai.assert; @@ -78,7 +79,7 @@ suite('styleMap', () => { assert.equal(el.style.paddingBottom, ''); }); - testIfSupportsCSSVariables('adds and removes CSS variables', () => { + testIfSupportsCSSVariables(test)('adds and removes CSS variables', () => { renderStyleMap({'--size': '2px'}); const el = container.firstElementChild as HTMLElement; assert.equal(el.style.getPropertyValue('--size'), '2px'); diff --git a/src/test/lib/render_test.ts b/src/test/lib/render_test.ts index fb31d19516..4044661a92 100644 --- a/src/test/lib/render_test.ts +++ b/src/test/lib/render_test.ts @@ -22,20 +22,25 @@ const assert = chai.assert; const isTemplatePolyfilled = ((HTMLTemplateElement as any).decorate != null || (window as any).ShadyDOM && (window as any).ShadyDOM.inUse); -const testSkipForTemplatePolyfill = isTemplatePolyfilled ? test.skip : test; +const testSkipForTemplatePolyfill = (test: any) => + isTemplatePolyfilled ? test.skip : test; const isSafari10_0 = - (window.navigator.userAgent.indexOf('AppleWebKit/602') === -1); -const testSkipSafari10_0 = isSafari10_0 ? test : test.skip; + (window.navigator.userAgent.indexOf('AppleWebKit/602') !== -1); +const testSkipSafari10_0 = (test: any) => isSafari10_0 ? test.skip : test; -const isChrome41 = (window.navigator.userAgent.indexOf('Chrome/41') === -1); -const testSkipChrome41 = isChrome41 ? test : test.skip; +const isChrome41 = (window.navigator.userAgent.indexOf('Chrome/41') !== -1); +const testSkipChrome41 = (test: any) => isChrome41 ? test.skip : test; -const testIfHasSymbol = (window as any).Symbol === undefined ? test.skip : test; +const testIfHasSymbol = (test: any) => + (window as any).Symbol === undefined ? test.skip : test; const ua = window.navigator.userAgent; const isIe = ua.indexOf('Trident/') > 0; +const suiteIfCustomElementsAreSupported = (suite: any) => + (window.customElements != null) ? suite : suite.skip; + suite('render()', () => { let container: HTMLElement; @@ -88,7 +93,7 @@ suite('render()', () => { children.filter((node) => node.nodeType !== Node.COMMENT_NODE)); }); - testIfHasSymbol('renders a Symbol', () => { + testIfHasSymbol(test)('renders a Symbol', () => { render(html`
${Symbol('A')}
`, container); assert.include( container.querySelector('div')!.textContent!.toLowerCase(), 'symbol'); @@ -375,14 +380,15 @@ suite('render()', () => { stripExpressionMarkers(container.innerHTML), '
'); }); - testIfHasSymbol('renders a Symbol to an attribute', () => { + testIfHasSymbol(test)('renders a Symbol to an attribute', () => { render(html`
`, container); assert.include( container.querySelector('div')!.getAttribute('foo')!.toLowerCase(), 'symbol'); }); - testIfHasSymbol('renders a Symbol in an array to an attribute', () => { + testIfHasSymbol( + test)('renders a Symbol in an array to an attribute', () => { render(html`
`, container); assert.include( container.querySelector('div')!.getAttribute('foo')!.toLowerCase(), @@ -793,7 +799,7 @@ suite('render()', () => { assert.strictEqual((container.firstElementChild as any).foo, 1234); }); - testSkipChrome41( + testSkipChrome41(test)( 'event listeners can see events fired by dynamic children', () => { // This tests that node directives are called in the commit phase, not // the setValue phase @@ -840,43 +846,43 @@ suite('render()', () => { suite('', () => { testSkipForTemplatePolyfill( - 'renders nested templates within table content', () => { - let table = html`
${html`${html``}`}
`; - render(table, container); - assert.equal( - stripExpressionMarkers(container.innerHTML), - '
'); + test)('renders nested templates within table content', () => { + let table = html`${html`${html``}`}
`; + render(table, container); + assert.equal( + stripExpressionMarkers(container.innerHTML), + '
'); - table = html`${html``}`; - render(table, container); - assert.equal( - stripExpressionMarkers(container.innerHTML), - ''); + table = html`${html``}`; + render(table, container); + assert.equal( + stripExpressionMarkers(container.innerHTML), + ''); - table = html`${html``}
`; - render(table, container); - assert.equal( - stripExpressionMarkers(container.innerHTML), - '
'); + table = html`${html``}
`; + render(table, container); + assert.equal( + stripExpressionMarkers(container.innerHTML), + '
'); - table = html`${html``}
`; - render(table, container); - assert.equal( - stripExpressionMarkers(container.innerHTML), - '
'); + table = html`${html``}
`; + render(table, container); + assert.equal( + stripExpressionMarkers(container.innerHTML), + '
'); - table = html`${html``}${ - html``}
`; - render(table, container); - assert.equal( - stripExpressionMarkers(container.innerHTML), - '
'); - }); + table = html`${html``}${ + html``}
`; + render(table, container); + assert.equal( + stripExpressionMarkers(container.innerHTML), + '
'); + }); // On Safari 10.0 (but not 10.1), the attribute value "" is // escaped to "<table>". That shouldn't cause this test to // fail, so we skip - testSkipSafari10_0( + testSkipSafari10_0(test)( 'renders quoted attributes with "
" before an expression', () => { const template = html`
`; render(template, container); @@ -1013,10 +1019,7 @@ suite('render()', () => { }); }); - const suiteIfCustomElementsAreSupported = - (window.customElements != null) ? suite : suite.skip; - - suiteIfCustomElementsAreSupported('custom elements', () => { + suiteIfCustomElementsAreSupported(suite)('custom elements', () => { class PropertySetterElement extends HTMLElement { public readonly calledSetter = false; private _value?: string = undefined; diff --git a/src/test/lib/shady-render-apply_test.ts b/src/test/lib/shady-render-apply_test.ts index 366c5d0e74..8f66ca7bee 100644 --- a/src/test/lib/shady-render-apply_test.ts +++ b/src/test/lib/shady-render-apply_test.ts @@ -19,6 +19,9 @@ import {renderShadowRoot} from '../test-utils/shadow-root.js'; const assert = chai.assert; +const testIfUsingNativeCSSVariables = (test: any) => + (window.ShadyCSS && !window.ShadyCSS.nativeCss ? test.skip : test); + suite('shady-render @apply', () => { test('styles with css custom properties using @apply render', function() { const container = document.createElement('scope-5'); @@ -127,9 +130,7 @@ suite('shady-render @apply', () => { // TODO(sorvell): remove skip when this ShadyCSS PR is merged: // https://github.com/webcomponents/shadycss/pull/227. - const testOrSkip = - (window.ShadyCSS && !window.ShadyCSS.nativeCss ? test.skip : test); - testOrSkip( + testIfUsingNativeCSSVariables(test)( '@apply styles flow to custom elements that render in connectedCallback', () => { class E extends HTMLElement {