test: add more tests

packages/integration-karma/test/rendering/style-collisions/index.spec.js

@@ -0,0 +1,95 @@
+import { createElement } from 'lwc';
+import Light1 from 'x/light1';
+import Light2 from 'x/light2';
+import Shadow1 from 'x/shadow1';
+import Shadow2 from 'x/shadow2';
+import ShadowParentLightChild from 'x/shadowParentLightChild';
+
+// Under the hood, we may de-dup styles based on their string contents. So if two
+// components happen to have exactly the same CSS, we have to confirm that unrendering
+// one component doesn't cause the other's component's CSS to be removed from the DOM.
+describe('style collisions', () => {
+    const cases = [
+        {
+            name: 'light',
+            components: [Light1, Light2],
+        },
+        {
+            name: 'shadow',
+            components: [Shadow1, Shadow2],
+        },
+    ];
+
+    const getDivColor = (elm) => {
+        return getComputedStyle((elm.shadowRoot || elm).querySelector('div')).color;
+    };
+
+    const getNumGlobalStylesheets = () => {
+        let count = document.head.querySelectorAll('style').length;
+        if (document.adoptedStyleSheets) {
+            count += document.adoptedStyleSheets.length;
+        }
+        return count;
+    };
+
+    const getNumStylesheetsForElement = (elm) => {
+        let count = 0;
+        if (elm.shadowRoot) {
+            if (elm.shadowRoot.adoptedStyleSheets) {
+                count += elm.shadowRoot.adoptedStyleSheets.length;
+            }
+            count += elm.shadowRoot.querySelectorAll('style').length;
+        }
+        return count;
+    };
+
+    cases.forEach(({ name, components: [Component1, Component2] }) => {
+        describe(name, () => {
+            it('removes styles from the DOM when two components have exact same styles', () => {
+                const elm1 = createElement('x-one', { is: Component1 });
+                const elm2 = createElement('x-two', { is: Component2 });
+
+                document.body.appendChild(elm1);
+                document.body.appendChild(elm2);
+
+                return Promise.resolve()
+                    .then(() => {
+                        expect(getDivColor(elm1)).toEqual('rgb(255, 0, 0)');
+                        expect(getDivColor(elm2)).toEqual('rgb(255, 0, 0)');
+                        document.body.removeChild(elm1);
+                    })
+                    .then(() => {
+                        expect(getDivColor(elm2)).toEqual('rgb(255, 0, 0)');
+                        document.body.removeChild(elm2);
+                        expect(getNumGlobalStylesheets()).toEqual(0);
+                    });
+            });
+        });
+    });
+
+    describe('shadow parent, light child', () => {
+        it('removes styles from the DOM when two components have the exact same styles', () => {
+            const elm = createElement('x-parent', { is: ShadowParentLightChild });
+            document.body.appendChild(elm);
+
+            elm.child1Shown = true;
+            elm.child2Shown = true;
+            return Promise.resolve()
+                .then(() => {
+                    const [child1, child2] = elm.shadowRoot.querySelectorAll('x-light1,x-light2');
+                    expect(getDivColor(child1)).toEqual('rgb(255, 0, 0)');
+                    expect(getDivColor(child2)).toEqual('rgb(255, 0, 0)');
+                    elm.child1Shown = false;
+                })
+                .then(() => {
+                    expect(getDivColor(elm.shadowRoot.querySelector('x-light2'))).toEqual(
+                        'rgb(255, 0, 0)'
+                    );
+                    elm.child2Shown = false;
+                })
+                .then(() => {
+                    expect(getNumStylesheetsForElement(elm)).toEqual(0);
+                });
+        });
+    });
+});

packages/integration-karma/test/rendering/style-collisions/x/light1/light1.css

@@ -0,0 +1,3 @@
+div {
+    color: red;
+}

packages/integration-karma/test/rendering/style-collisions/x/light1/light1.html

@@ -0,0 +1,3 @@
+<template lwc:render-mode="light">
+  <div>a</div>
+</template>

packages/integration-karma/test/rendering/style-collisions/x/light1/light1.js

@@ -0,0 +1,5 @@
+import { LightningElement } from 'lwc';
+
+export default class extends LightningElement {
+    static renderMode = 'light';
+}

packages/integration-karma/test/rendering/style-collisions/x/light2/light2.css

@@ -0,0 +1,3 @@
+div {
+    color: red;
+}

packages/integration-karma/test/rendering/style-collisions/x/light2/light2.html

@@ -0,0 +1,3 @@
+<template lwc:render-mode="light">
+  <div>a</div>
+</template>

packages/integration-karma/test/rendering/style-collisions/x/light2/light2.js

@@ -0,0 +1,5 @@
+import { LightningElement } from 'lwc';
+
+export default class extends LightningElement {
+    static renderMode = 'light';
+}

packages/integration-karma/test/rendering/style-collisions/x/shadow1/shadow1.css

@@ -0,0 +1,3 @@
+div {
+    color: red;
+}

packages/integration-karma/test/rendering/style-collisions/x/shadow1/shadow1.html

@@ -0,0 +1,3 @@
+<template>
+  <div>a</div>
+</template>

packages/integration-karma/test/rendering/style-collisions/x/shadow1/shadow1.js

@@ -0,0 +1,3 @@
+import { LightningElement } from 'lwc';
+
+export default class extends LightningElement {}

packages/integration-karma/test/rendering/style-collisions/x/shadow2/shadow2.css

@@ -0,0 +1,3 @@
+div {
+    color: red;
+}

packages/integration-karma/test/rendering/style-collisions/x/shadow2/shadow2.html

@@ -0,0 +1,3 @@
+<template>
+  <div>a</div>
+</template>

packages/integration-karma/test/rendering/style-collisions/x/shadow2/shadow2.js

@@ -0,0 +1,3 @@
+import { LightningElement } from 'lwc';
+
+export default class extends LightningElement {}

packages/integration-karma/test/rendering/style-collisions/x/shadowParentLightChild/shadowParentLightChild.html

@@ -0,0 +1,8 @@
+<template>
+  <template if:true={child1Shown}>
+    <x-light1></x-light1>
+  </template>
+  <template if:true={child2Shown}>
+    <x-light2></x-light2>
+  </template>
+</template>

packages/integration-karma/test/rendering/style-collisions/x/shadowParentLightChild/shadowParentLightChild.js

@@ -0,0 +1,6 @@
+import { LightningElement, api } from 'lwc';
+
+export default class extends LightningElement {
+    @api child1Shown = false;
+    @api child2Shown = false;
+}