test: refactor test, remove test covered in #2859

Author: nolanlawson

packages/integration-karma/test/static-content/index.spec.js

@@ -1,59 +1,48 @@
-import { createElement, setFeatureFlagForTest } from 'lwc';
-import Container from './x/container/container';
+import { createElement } from 'lwc';
 import MultipleStyles from './x/multipleStyles/multipleStyles';
 import SvgNs from './x/svgNs/svgNs';
 
-if (!process.env.NATIVE_SHADOW && !process.env.COMPAT) {
-    /* compat will have the token when rendering in native*/ describe('Mixed mode for static content', () => {
-        beforeEach(() => {
-            setFeatureFlagForTest('ENABLE_MIXED_SHADOW_MODE', true);
-        });
-        afterEach(() => {
-            setFeatureFlagForTest('ENABLE_MIXED_SHADOW_MODE', false);
-        });
-
-        ['native', 'synthetic'].forEach((firstRenderMode) => {
-            it(`should set the tokens for synthetic shadow when it renders first in ${firstRenderMode}`, () => {
-                const elm = createElement('x-container', { is: Container });
-                elm.syntheticFirst = firstRenderMode === 'synthetic';
-                document.body.appendChild(elm);
+describe('static content when stylesheets change', () => {
+    it('should reflect correct token for scoped styles', () => {
+        const elm = createElement('x-container', { is: MultipleStyles });
 
-                const syntheticMode = elm.shadowRoot
-                    .querySelector('x-component')
-                    .shadowRoot.querySelector('div');
-                const nativeMode = elm.shadowRoot
-                    .querySelector('x-native')
-                    .shadowRoot.querySelector('x-component')
-                    .shadowRoot.querySelector('div');
+        const stylesheetsWarning =
+            /Dynamically setting the "stylesheets" property on a template function is deprecated and may be removed in a future version of LWC./;
 
-                expect(syntheticMode.hasAttribute('x-component_component')).toBe(true);
-                expect(nativeMode.hasAttribute('x-component_component')).toBe(false);
+        expect(() => {
+            elm.updateTemplate({
+                name: 'a',
+                useScopedCss: false,
             });
-        });
-    });
-}
+        }).toLogErrorDev(stylesheetsWarning);
 
-describe('static content when stylesheets change', () => {
-    it('should reflect correct token for scoped styles', () => {
-        const elm = createElement('x-container', { is: MultipleStyles });
         document.body.appendChild(elm);
 
         expect(elm.shadowRoot.querySelector('div').getAttribute('class')).toBe('foo');
 
         // atm, we need to switch templates.
-        elm.tpl = 'b';
-        elm.useScopeCss = true;
+        expect(() => {
+            elm.updateTemplate({
+                name: 'b',
+                useScopedCss: true,
+            });
+        }).toLogErrorDev(stylesheetsWarning);
 
         return Promise.resolve()
             .then(() => {
-                expect(elm.shadowRoot.querySelector('div').getAttribute('class')).toBe(
-                    'foo x-multipleStyles_b'
-                );
-                elm.tpl = 'a';
-                elm.useScopeCss = false;
+                const classList = Array.from(elm.shadowRoot.querySelector('div').classList).sort();
+                expect(classList).toEqual(['foo', 'x-multipleStyles_b']);
+
+                expect(() => {
+                    elm.updateTemplate({
+                        name: 'a',
+                        useScopedCss: false,
+                    });
+                }).toLogErrorDev(stylesheetsWarning);
             })
             .then(() => {
-                expect(elm.shadowRoot.querySelector('div').getAttribute('class')).toBe('foo');
+                const classList = Array.from(elm.shadowRoot.querySelector('div').classList).sort();
+                expect(classList).toEqual(['foo']);
             });
     });
 });

packages/integration-karma/test/static-content/x/component/component.css

@@ -1,22 +1,27 @@
 import { LightningElement, api } from 'lwc';
-import aTpl from './a.html';
-import bTpl from './b.html';
+import aTemplate from './a.html';
+import bTemplate from './b.html';
 import aCss from './a.css';
 import bCss from './b.scoped.css?scoped=true';
 
-const tplMap = {
-    a: aTpl,
-    b: bTpl,
+const templateMap = {
+    a: aTemplate,
+    b: bTemplate,
 };
 export default class Container extends LightningElement {
-    @api tpl = 'a';
-    @api useScopeCss = false;
+    _template = aTemplate;
 
-    render() {
-        const template = tplMap[this.tpl];
+    @api
+    updateTemplate({ name, useScopedCss }) {
+        const template = templateMap[name];
+
+        // TODO [#2826]: freeze the template object and stop supporting setting the stylesheets
+        template.stylesheets = useScopedCss ? [...aCss, ...bCss] : [...aCss];
 
-        template.stylesheets = this.useScopeCss ? [...aCss, ...bCss] : [...aCss];
+        this._template = template;
+    }
 
-        return template;
+    render() {
+        return this._template;
     }
 }