test & small fixes

descope · Dec 2, 2024 · a1e33fe · a1e33fe
1 parent 81f83d3
commit a1e33fe
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 3 deletions.
diff --git a/packages/sdks/web-component/src/lib/descope-wc/DescopeWc.ts b/packages/sdks/web-component/src/lib/descope-wc/DescopeWc.ts
@@ -1019,7 +1019,7 @@ class DescopeWc extends BaseDescopeWc {
       setNOTPVariable(rootElement, screenState?.notp?.image);
 
       // set dynamic css variables that should be set at runtime
-      setCssVars(rootElement, screenState.cssVars, this.loggerWrapper);
+      setCssVars(rootElement, clone, screenState.cssVars, this.loggerWrapper);
 
       this.rootElement.replaceChildren(clone);
 

diff --git a/packages/sdks/web-component/src/lib/helpers/templates.ts b/packages/sdks/web-component/src/lib/helpers/templates.ts
@@ -143,19 +143,21 @@ const setFormConfigValues = (
 
 export const setCssVars = (
   rootEle: HTMLElement,
+  nextPageTemplate: DocumentFragment,
   cssVars: CssVars,
   logger: {
     error: (message: string, description: string) => void;
     info: (message: string, description: string) => void;
+    debug: (message: string, description: string) => void;
   },
 ) => {
   if (!cssVars) {
     return;
   }
 
   Object.keys(cssVars).forEach((componentName) => {
-    if (!rootEle.querySelector(componentName)) {
-      logger.info(
+    if (!nextPageTemplate.querySelector(componentName)) {
+      logger.debug(
         `Skipping css vars for component "${componentName}}"`,
         `Got css vars for component ${componentName} but Could not find it on next page`,
       );

diff --git a/packages/sdks/web-component/test/descope-wc.test.ts b/packages/sdks/web-component/test/descope-wc.test.ts
@@ -72,6 +72,8 @@ const defaultOptionsValues = {
   redirectAuth: undefined,
   tenant: undefined,
   locale: 'en-us',
+  nativeOptions: undefined,
+  thirdPartyAppId: null,
 };
 
 class MockFileReader {
@@ -149,6 +151,8 @@ class DescopeButton extends HTMLElement {
     this.attachShadow({ mode: 'open' });
     this.shadowRoot.appendChild(template.content.cloneNode(true));
   }
+
+  static cssVarList = { varName: '--var-name' };
 }
 
 customElements.define('descope-button', DescopeButton);
@@ -4528,6 +4532,38 @@ describe('web-component', () => {
     });
   });
 
+  describe('cssVars', () => {
+    it('should set css vars on root element', async () => {
+      startMock.mockReturnValueOnce(
+        generateSdkResponse({
+          screenState: {
+            cssVars: { 'descope-button': { varName: 'value' } },
+          },
+        }),
+      );
+
+      pageContent = `<descope-button>click</descope-button><div>Loaded</div><input class="descope-input" name="customComponent">`;
+
+      document.body.innerHTML = `<h1>Custom element test</h1> <descope-wc flow-id="otpSignInEmail" project-id="1"></descope-wc>`;
+
+      await waitFor(() => screen.getByShadowText('Loaded'), {
+        timeout: WAIT_TIMEOUT,
+      });
+
+      const shadowEle =
+        document.getElementsByTagName('descope-wc')[0].shadowRoot;
+      const rootEle = shadowEle.querySelector('#root');
+
+      await waitFor(
+        () =>
+          expect(rootEle).toHaveStyle({
+            '--var-name': 'value',
+          }),
+        { timeout: WAIT_TIMEOUT },
+      );
+    });
+  });
+
   describe('Input Flows', () => {
     it('should pre-populate input with flat structure config structure', async () => {
       startMock.mockReturnValueOnce(generateSdkResponse());