Clean up <ThemeProvider> and various CSS related stuff

CHANGELOG.md

@@ -144,6 +144,7 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
       - `import { hooks } from 'botframework-webchat'` should be replaced by `import * as hooks from 'botframework-webchat/hook'`
    - Added target to Chrome 100 and re-enable Lightning CSS for ESM builds, by [@compulim](https://github.com/compulim) in PR [#5602](https://github.com/microsoft/BotFramework-WebChat/pull/5602)
 - Relaxed `role` prop to allow any string instead of ARIA landmark roles, in PR [#5561](https://github.com/microsoft/BotFramework-WebChat/pull/5561), by [@compulim](https://github.com/compulim)
+- Cleaned up `<ThemeProvider>` and various CSS related code, in PR [#5611](https://github.com/microsoft/BotFramework-WebChat/pull/5611), by [@compulim](https://github.com/compulim)
 
 ### Changed
 

__tests__/html/fluentTheme/customElement/shadowRoot.html

@@ -56,7 +56,7 @@
           );
 
           render(
-            <FluentThemeProvider>
+            <FluentThemeProvider nonce="test" stylesRoot={this.shadowRoot}>
               <App />
             </FluentThemeProvider>,
             container

__tests__/html2/activity/message-status.html

@@ -11,7 +11,9 @@
         "@fluentui/tokens": "https://esm.sh/@fluentui/tokens?deps=react@18&exports=createDarkTheme,webLightTheme",
         "@testduet/wait-for": "https://unpkg.com/@testduet/wait-for@main/dist/wait-for.mjs",
         "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+        "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
         "botframework-webchat/decorator": "/__dist__/packages/bundle/static/botframework-webchat/decorator.js",
+        "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
         "botframework-webchat/internal": "/__dist__/packages/bundle/static/botframework-webchat/internal.js",
         "botframework-webchat-fluent-theme": "/__dist__/packages/fluent-theme/static/botframework-webchat-fluent-theme.js",
         "react": "https://esm.sh/react@18",
@@ -57,7 +59,7 @@
 
     // TODO: This is for `createDirectLineEmulator` only, should find ways to eliminate this line.
     window.WebChat = { createStoreWithOptions };
-    
+
     run(async function () {
       const { directLine, store } = createDirectLineEmulator();
 
@@ -276,7 +278,7 @@
           author
         }]
       });
-      
+
       await pageConditions.numActivitiesShown(6);
       await host.snapshot('local');
 
@@ -362,4 +364,4 @@
   </script>
 </body>
 
-</html>
+</html>

__tests__/html2/citation/url.html

@@ -11,8 +11,10 @@
         "@fluentui/tokens": "https://esm.sh/@fluentui/tokens?deps=react@18&exports=createDarkTheme,webLightTheme",
         "@testduet/wait-for": "https://unpkg.com/@testduet/wait-for@main/dist/wait-for.mjs",
         "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+        "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
         "botframework-webchat/decorator": "/__dist__/packages/bundle/static/botframework-webchat/decorator.js",
         "botframework-webchat/internal": "/__dist__/packages/bundle/static/botframework-webchat/internal.js",
+        "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
         "botframework-webchat-fluent-theme": "/__dist__/packages/fluent-theme/static/botframework-webchat-fluent-theme.js",
         "react": "https://esm.sh/react@18",
         "react-dom": "https://esm.sh/react-dom@18",
@@ -334,10 +336,10 @@
         'mailto:support+roadmap@example.com?subject=Roadmap%20Review%20%5BTemplate%5D&body=Please%20review%20slide%203.%0AThanks%21',
         'https://example.sharepoint.com/sites/Docs/Q1%231%20Plan.pptx'
       ]);
-      
+
       await host.snapshot('local');
     });
   </script>
 </body>
 
-</html>
+</html>

__tests__/html2/fluentTheme/carousel.html

@@ -48,6 +48,7 @@
       // Verify the sent message
       await pageConditions.numActivitiesShown(1);
       await pageConditions.allOutgoingActivitiesSent();
+      await pageConditions.allImagesLoaded();
       await host.snapshot('local');
 
       // Wait for and verify bot response
@@ -73,4 +74,4 @@
   </script>
 </body>
 
-</html>
+</html>

__tests__/html/hooks.useInjectStyles.changeNonce.html → __tests__/html2/hooks/useInjectStylesElements/changeNonce.html

@@ -9,21 +9,26 @@
     <script crossorigin="anonymous" src="/test-page-object.js"></script>
     <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
     <meta http-equiv="content-security-policy" content="style-src-elem 'nonce-1'" />
+    <style nonce="1">
+      main {
+        background-color: Yellow!important;
+      }
+    </style>
   </head>
   <body>
     <main id="webchat"></main>
     <script type="text/babel" data-presets="env,stage-3,react">
       const {
         testHelpers: { createDirectLineEmulator },
         WebChat: {
-          Components: { Composer },
-          internal: { useInjectStyles }
+          internal: { InjectStyleElements }
         }
       } = window;
 
       function createStyle(body) {
         const styleElement = document.createElement('style');
 
+        styleElement.dataset['testid'] = 'style';
         styleElement.innerHTML = body;
 
         return styleElement;
@@ -33,41 +38,48 @@
         async function () {
           const { directLine, store } = createDirectLineEmulator();
 
-          const RunFunction = ({ fn }) => {
-            fn();
-
-            return false;
-          };
-
-          const renderWithFunction = fn =>
+          const render = ({ nonce, styleElements, stylesRoot }) =>
             new Promise(resolve =>
               ReactDOM.render(
-                <Composer directLine={directLine} store={store}>
-                  <RunFunction fn={() => resolve(fn && fn())} key={Date.now() + ''} />
-                </Composer>,
-                document.getElementById('webchat')
+                <InjectStyleElements at={stylesRoot} nonce={nonce} styleElements={styleElements} />,
+                document.getElementById('webchat'),
+                resolve
               )
             );
 
           const styleElement = createStyle('main { background-color: Red!important; }');
 
-          await renderWithFunction(() => useInjectStyles([styleElement], '1'));
-          await host.snapshot();
+          // WHEN: Inject with nonce of "1".
+          await render({ nonce: '1', styleElements: [styleElement] });
 
-          const allInjectedStyles1 = document.head.querySelectorAll('style:not([data-emotion]):not([data-webchat-injected])');
+          // THEN: Should render in red color.
+          await host.snapshot('local');
+
+          // THEN: The cloned/injected style should be the last child.
+          expect(document.head.lastChild).toHaveProperty('textContent', styleElement.textContent);
+
+          // THEN: Only one <style> element is added.
+          const allInjectedStyles1 = document.head.querySelectorAll('style[data-testid="style"]');
 
           expect(allInjectedStyles1).toHaveLength(1);
-          expect(allInjectedStyles1[0]).toBe(styleElement);
+          expect(allInjectedStyles1[0]).toHaveProperty('textContent', styleElement.textContent);
+          expect(allInjectedStyles1[0].getAttribute('nonce')).toBe('1');
+
+          // WHEN: Inject with nonce of "2".
+          await render({ nonce: '2', styleElements: [styleElement] });
 
-          await renderWithFunction(() => useInjectStyles([styleElement], '2'));
+          // THEN: No color should be applied as nonce don't match.
+          await host.snapshot('local');
 
-          // No color should be applied as nonce don't match.
-          await host.snapshot();
+          // THEN: The cloned/injected style should be the last child.
+          expect(document.head.lastChild).toHaveProperty('textContent', styleElement.textContent);
 
-          const allInjectedStyles2 = document.head.querySelectorAll('style:not([data-emotion]):not([data-webchat-injected])');
+          // THEN: Only one <style> element is added.
+          const allInjectedStyles2 = document.head.querySelectorAll('style[data-testid="style"]');
 
           expect(allInjectedStyles2).toHaveLength(1);
-          expect(allInjectedStyles2[0]).toBe(styleElement);
+          expect(allInjectedStyles2[0]).toHaveProperty('textContent', styleElement.textContent);
+          expect(allInjectedStyles2[0].getAttribute('nonce')).toBe('2');
         },
         { ignoreErrors: 'violate the following Content Security Policy directive' }
       );

__tests__/html2/hooks/useInjectStylesElements/changeRoot.html

@@ -0,0 +1,77 @@
+<!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: {
+          internal: { InjectStyleElements }
+        }
+      } = 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 render = ({ nonce, styleElements, stylesRoot }) =>
+          new Promise(resolve =>
+            ReactDOM.render(
+              <InjectStyleElements at={stylesRoot} nonce={nonce} styleElements={styleElements} />,
+              document.getElementById('webchat'),
+              resolve
+            )
+          );
+
+        const styleElement = createStyle('main { background-color: Red!important; }');
+
+        // WHEN: Inject into default (document.head).
+        await render({ styleElements: [styleElement] });
+
+        // THEN: Should render red.
+        await host.snapshot('local');
+
+        // THEN: Should inject into document.head.
+        const styleElementsInHead = document.head.querySelectorAll('style[data-testid="style"]');
+
+        expect(styleElementsInHead).toHaveLength(1);
+        expect(styleElementsInHead[0]).toHaveProperty('textContent', styleElement.textContent);
+
+        // THEN: Should not inject into document.body.
+        expect(document.body.querySelectorAll('style[data-testid="style"]')).toHaveLength(0);
+
+        // WHEN: Inject into document.body.
+        await render({ styleElements: [styleElement], stylesRoot: document.body });
+
+        // THEN: Should render red.
+        await host.snapshot('local');
+
+        // THEN: Should inject into document.body.
+        const styleElementsInBody = document.body.querySelectorAll('style[data-testid="style"]');
+
+        expect(styleElementsInBody).toHaveLength(1);
+        expect(styleElementsInBody[0]).toHaveProperty('textContent', styleElement.textContent);
+
+        // THEN: Should not inject into document.head.
+        expect(document.head.querySelectorAll('style[data-testid="style"]')).toHaveLength(0);
+      });
+    </script>
+  </body>
+</html>

__tests__/html2/hooks/useInjectStylesElements/dupeElement.html

@@ -0,0 +1,91 @@
+<!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>
+    <style>
+      main {
+        background-color: Yellow !important;
+      }
+    </style>
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="text/babel" data-presets="env,stage-3,react">
+      const {
+        testHelpers: { createDirectLineEmulator },
+        WebChat: {
+          internal: { InjectStyleElements }
+        }
+      } = 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 render = ({ nonce, styleElements, stylesRoot }) =>
+          new Promise(resolve =>
+            ReactDOM.render(
+              <InjectStyleElements at={stylesRoot} nonce={nonce} styleElements={styleElements} />,
+              document.getElementById('webchat'),
+              resolve
+            )
+          );
+
+        const styleElement = createStyle('main { background-color: Red!important; }');
+
+        await render({ styleElements: [styleElement, styleElement] });
+
+        // THEN: Should render in red.
+        await host.snapshot('local');
+
+        const allInjectedStyles1 = document.head.querySelectorAll('style[data-testid="style"]');
+
+        expect(allInjectedStyles1).toHaveLength(1);
+        expect(allInjectedStyles1[0]).toHaveProperty('textContent', styleElement.textContent);
+
+        await render({ styleElements: [styleElement, styleElement] });
+
+        // THEN: Should render in red.
+        await host.snapshot('local');
+
+        const allInjectedStyles2 = document.head.querySelectorAll('style[data-testid="style"]');
+
+        expect(allInjectedStyles2).toHaveLength(1);
+        expect(allInjectedStyles2[0]).toHaveProperty('textContent', styleElement.textContent);
+
+        await render({ styleElements: [styleElement] });
+
+        // THEN: Should render in red.
+        await host.snapshot('local');
+
+        const allInjectedStyles3 = document.head.querySelectorAll('style[data-testid="style"]');
+
+        expect(allInjectedStyles3).toHaveLength(1);
+        expect(allInjectedStyles3[0]).toHaveProperty('textContent', styleElement.textContent);
+
+        await render({ styleElements: [] });
+
+        // THEN: Should render in white because all stylesheet should have been removed.
+        await host.snapshot('local');
+
+        const allInjectedStyles4 = document.head.querySelectorAll('style[data-testid="style"]');
+
+        expect(allInjectedStyles4).toHaveLength(0);
+      });
+    </script>
+  </body>
+</html>