Clean up <ThemeProvider> and various CSS related stuff

__tests__/html/hooks.useInjectStyles.changeNonce.html → __tests__/html2/provider/InjectStylesElementsComposer/changeNonce.html

@@ -16,14 +16,14 @@
       const {
         testHelpers: { createDirectLineEmulator },
         WebChat: {
-          Components: { Composer },
-          internal: { useInjectStyles }
+          Components: { Composer, ThemeProvider }
         }
       } = window;
 
       function createStyle(body) {
         const styleElement = document.createElement('style');
 
+        styleElement.dataset['testid'] = 'style';
         styleElement.innerHTML = body;
 
         return styleElement;
@@ -39,32 +39,31 @@
             return false;
           };
 
-          const renderWithFunction = fn =>
+          const render = ({ elements, nonce, stylesRoot }) =>
             new Promise(resolve =>
               ReactDOM.render(
-                <Composer directLine={directLine} store={store}>
-                  <RunFunction fn={() => resolve(fn && fn())} key={Date.now() + ''} />
-                </Composer>,
-                document.getElementById('webchat')
+                <ThemeProvider styles={elements} nonce={nonce} styleOptions={stylesRoot ? { stylesRoot } : {}} />,
+                document.getElementById('webchat'),
+                resolve
               )
             );
 
           const styleElement = createStyle('main { background-color: Red!important; }');
 
-          await renderWithFunction(() => useInjectStyles([styleElement], '1'));
-          await host.snapshot();
+          await render({ elements: [styleElement], nonce: '1' });
+          await host.snapshot('local');
 
-          const allInjectedStyles1 = document.head.querySelectorAll('style:not([data-emotion]):not([data-webchat-injected])');
+          const allInjectedStyles1 = document.head.querySelectorAll('style[data-testid="style"]');
 
           expect(allInjectedStyles1).toHaveLength(1);
           expect(allInjectedStyles1[0]).toBe(styleElement);
 
-          await renderWithFunction(() => useInjectStyles([styleElement], '2'));
+          await render({ elements: [styleElement], nonce: '2' });
 
           // No color should be applied as nonce don't match.
-          await host.snapshot();
+          await host.snapshot('local');
 
-          const allInjectedStyles2 = document.head.querySelectorAll('style:not([data-emotion]):not([data-webchat-injected])');
+          const allInjectedStyles2 = document.head.querySelectorAll('style[data-testid="style"]');
 
           expect(allInjectedStyles2).toHaveLength(1);
           expect(allInjectedStyles2[0]).toBe(styleElement);

__tests__/html/hooks.useInjectStyles.changeRoot.html → __tests__/html2/provider/InjectStylesElementsComposer/changeRoot.html

@@ -15,14 +15,14 @@
       const {
         testHelpers: { createDirectLineEmulator },
         WebChat: {
-          Components: { Composer },
-          internal: { useInjectStyles }
+          Components: { Composer, ThemeProvider }
         }
       } = window;
 
       function createStyle(body) {
         const styleElement = document.createElement('style');
 
+        styleElement.dataset['testid'] = 'style';
         styleElement.innerHTML = body;
 
         return styleElement;
@@ -37,31 +37,28 @@
           return false;
         };
 
-        const renderWithFunction = (fn, props) =>
+        const render = ({ elements, nonce, stylesRoot }) =>
           new Promise(resolve =>
             ReactDOM.render(
-              <Composer directLine={directLine} store={store} {...props}>
-                <RunFunction fn={() => resolve(fn && fn())} key={Date.now() + ''} />
-              </Composer>,
-              document.getElementById('webchat')
+              <ThemeProvider styles={elements} nonce={nonce} styleOptions={stylesRoot ? { stylesRoot } : {}} />,
+              document.getElementById('webchat'),
+              resolve
             )
           );
 
         const styleElement = createStyle('main { background-color: Red!important; }');
 
-        await renderWithFunction(() => useInjectStyles([styleElement]));
-        await host.snapshot();
+        await render({ elements: [styleElement] });
+        await host.snapshot('local');
 
-        expect([...document.head.querySelectorAll('style:not([data-emotion]):not([data-webchat-injected])')]).toEqual([styleElement]);
-        expect([...document.body.querySelectorAll('style:not([data-emotion]):not([data-webchat-injected])')]).toEqual([]);
+        expect([...document.head.querySelectorAll('style[data-testid="style"]')]).toEqual([styleElement]);
+        expect([...document.body.querySelectorAll('style[data-testid="style"]')]).toEqual([]);
 
-        await renderWithFunction(() => useInjectStyles([styleElement]), {
-          styleOptions: { stylesRoot: document.body }
-        });
-        await host.snapshot();
+        await render({ elements: [styleElement], stylesRoot: document.body });
+        await host.snapshot('local');
 
-        expect([...document.head.querySelectorAll('style:not([data-emotion]):not([data-webchat-injected])')]).toEqual([]);
-        expect([...document.body.querySelectorAll('style:not([data-emotion]):not([data-webchat-injected])')]).toEqual([styleElement]);
+        expect([...document.head.querySelectorAll('style[data-testid="style"]')]).toEqual([]);
+        expect([...document.body.querySelectorAll('style[data-testid="style"]')]).toEqual([styleElement]);
       });
     </script>
   </body>

__tests__/html/hooks.useInjectStyles.dupeElement.html → __tests__/html2/provider/InjectStylesElementsComposer/dupeElement.html

@@ -15,14 +15,14 @@
       const {
         testHelpers: { createDirectLineEmulator },
         WebChat: {
-          Components: { Composer },
-          internal: { useInjectStyles }
+          Components: { Composer, ThemeProvider }
         }
       } = window;
 
       function createStyle(body) {
         const styleElement = document.createElement('style');
 
+        styleElement.dataset['testid'] = 'style';
         styleElement.innerHTML = body;
 
         return styleElement;
@@ -37,33 +37,55 @@
           return false;
         };
 
-        const renderWithFunction = fn =>
+        const render = ({ elements, nonce, stylesRoot }) =>
           new Promise(resolve =>
             ReactDOM.render(
-              <Composer directLine={directLine} store={store}>
-                <RunFunction fn={() => resolve(fn && fn())} key={Date.now() + ''} />
-              </Composer>,
-              document.getElementById('webchat')
+              <ThemeProvider styles={elements} nonce={nonce} styleOptions={stylesRoot ? { stylesRoot } : {}} />,
+              document.getElementById('webchat'),
+              resolve
             )
           );
 
         const styleElement = createStyle('main { background-color: Red!important; }');
 
-        await renderWithFunction(() => useInjectStyles([styleElement, styleElement]));
-        await host.snapshot();
+        await render({ elements: [styleElement, styleElement] });
+        await host.snapshot('local');
 
-        const allInjectedStyles1 = document.head.querySelectorAll('style:not([data-emotion]):not([data-webchat-injected])');
+        const allInjectedStyles1 = document.head.querySelectorAll(
+          'style[data-testid="style"]'
+        );
 
         expect(allInjectedStyles1).toHaveLength(1);
         expect(allInjectedStyles1[0]).toBe(styleElement);
 
-        await renderWithFunction(() => useInjectStyles([styleElement, styleElement]));
-        await host.snapshot();
+        await render({ elements: [styleElement, styleElement] });
+        await host.snapshot('local');
 
-        const allInjectedStyles2 = document.head.querySelectorAll('style:not([data-emotion]):not([data-webchat-injected])');
+        const allInjectedStyles2 = document.head.querySelectorAll(
+          'style[data-testid="style"]'
+        );
 
         expect(allInjectedStyles2).toHaveLength(1);
         expect(allInjectedStyles2[0]).toBe(styleElement);
+
+        await render({ elements: [styleElement] });
+        await host.snapshot('local');
+
+        const allInjectedStyles3 = document.head.querySelectorAll(
+          'style[data-testid="style"]'
+        );
+
+        expect(allInjectedStyles3).toHaveLength(1);
+        expect(allInjectedStyles3[0]).toBe(styleElement);
+
+        await render({ elements: [] });
+        await host.snapshot('local');
+
+        const allInjectedStyles4 = document.head.querySelectorAll(
+          'style[data-testid="style"]'
+        );
+
+        expect(allInjectedStyles4).toHaveLength(0);
       });
     </script>
   </body>

__tests__/html2/provider/InjectStylesElementsComposer/dupeElement.withParent.html

@@ -0,0 +1,93 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone@7.8.7/babel.min.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/react@16.8.6/umd/react.development.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/react-dom@16.8.6/umd/react-dom.development.js"></script>
+    <script crossorigin="anonymous" src="/test-harness.js"></script>
+    <script crossorigin="anonymous" src="/test-page-object.js"></script>
+    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="text/babel" data-presets="env,stage-3,react">
+      const {
+        testHelpers: { createDirectLineEmulator },
+        WebChat: {
+          Components: { Composer, ThemeProvider }
+        }
+      } = window;
+
+      function createStyle(body) {
+        const styleElement = document.createElement('style');
+
+        styleElement.dataset['testid'] = 'style';
+        styleElement.innerHTML = body;
+
+        return styleElement;
+      }
+
+      run(async function () {
+        const { directLine, store } = createDirectLineEmulator();
+
+        const RunFunction = ({ fn }) => {
+          fn();
+
+          return false;
+        };
+
+        const render = ({ elements, nonce, stylesRoot }) =>
+          new Promise(resolve =>
+            ReactDOM.render(
+              <ThemeProvider styles={elements} nonce={nonce} styleOptions={stylesRoot ? { stylesRoot } : {}} />,
+              document.getElementById('webchat'),
+              resolve
+            )
+          );
+
+        const styleElement = createStyle('main { background-color: Red!important; }');
+
+        document.head.append(styleElement);
+
+        await render({ elements: [styleElement, styleElement] });
+        await host.snapshot('local');
+
+        const allInjectedStyles1 = document.head.querySelectorAll('style[data-testid="style"]');
+
+        expect(allInjectedStyles1).toHaveLength(2);
+        expect(allInjectedStyles1[0]).toBe(styleElement);
+        expect(allInjectedStyles1[1]).not.toBe(styleElement);
+        expect(allInjectedStyles1[1]).toHaveProperty('textContent', styleElement.textContent);
+
+        await render({ elements: [styleElement, styleElement] });
+        await host.snapshot('local');
+
+        const allInjectedStyles2 = document.head.querySelectorAll('style[data-testid="style"]');
+
+        expect(allInjectedStyles2).toHaveLength(2);
+        expect(allInjectedStyles2[0]).toBe(styleElement);
+        expect(allInjectedStyles2[1]).not.toBe(styleElement);
+        expect(allInjectedStyles2[1]).toHaveProperty('textContent', styleElement.textContent);
+
+        await render({ elements: [styleElement] });
+        await host.snapshot('local');
+
+        const allInjectedStyles3 = document.head.querySelectorAll('style[data-testid="style"]');
+
+        expect(allInjectedStyles3).toHaveLength(2);
+        expect(allInjectedStyles3[0]).toBe(styleElement);
+        expect(allInjectedStyles3[1]).not.toBe(styleElement);
+        expect(allInjectedStyles3[1]).toHaveProperty('textContent', styleElement.textContent);
+
+        await render({ elements: [] });
+        await host.snapshot('local');
+
+        const allInjectedStyles4 = document.head.querySelectorAll('style[data-testid="style"]');
+
+        expect(allInjectedStyles4).toHaveLength(1);
+        expect(allInjectedStyles4[0]).toBe(styleElement);
+      });
+    </script>
+  </body>
+</html>