- Fixed tests

.github/workflows/publish.yml

@@ -68,7 +68,7 @@ jobs:
       - name: Tests
         run: |
           node node_modules/puppeteer/install.js
-          pnpm run test       
+          pnpm run test:prod       
 
   build_spfx:
     runs-on: ubuntu-latest

packages/components/package.json

@@ -33,8 +33,8 @@
     "wtr:watch": "wtr --watch",
     "test:dev": "npm-run-all -s tailwindcss wtr",
     "test:watch": "npm-run-all -s tailwindcss wtr:watch",
-    "test:prod": "MODE=prod npm run test",
-    "test:prod:watch": "MODE=prod npm run test:watch",
+    "test:prod": "cross-env MODE=prod && npm run test",
+    "test:prod:watch": "cross-env MODE=prod npm run test:watch",
     "storybook:watch": "storybook dev -p 6006",
     "storybook:build": "storybook build",
     "docs:build": "npm-run-all -s custom-elements tailwindcss storybook:build",
@@ -124,6 +124,7 @@
     "compression-webpack-plugin": "^10.0.0",
     "copy-webpack-plugin": "11.0.0",
     "cssnano": "6.0.1",
+    "cross-env": "7.0.3",
     "custom-elements-manifest": "2.0.0",
     "eslint": "^8.33.0",
     "eslint-config-prettier": "^8.6.0",

packages/components/src/components/BaseComponent.ts

@@ -176,14 +176,14 @@ export abstract class BaseComponent extends ScopedElementsMixin(MgtTemplatedComp
          // Set the theme automatically if a parent has the "dark" CSS class or theme
         // This avoid to set explicitly the 'theme' property for each component
         const setDarkModeClass = () => {
-            if (this.parentElement) {
+            // Check if theme property was set explicitly on the component
+            if (this.parentElement && !this.theme) {
                 const parentInDarkMode = this.parentElement.closest("[class~=dark],[theme~=dark]");
-                if (parentInDarkMode) {
+                if (parentInDarkMode ) {
                     this.theme = "dark";
                 } else {
-                    this.theme = "light";
+                    this.theme = null;
                 }
-
                 this.requestUpdate();
             }
         };

packages/components/src/components/search-results/tests/SearchResultsComponent.test.ts

@@ -102,7 +102,7 @@ describe("pnp-search-results", () => {
         });
     });
 
-    describe("theming", async () => {
+    describe("theming", () => {
 
         it("should support dark mode by setting the theme property to 'dark' explicitly", async () => {
 
@@ -117,7 +117,12 @@ describe("pnp-search-results", () => {
 
             await stubSearchResults(el);
 
-            assert.isNotNull(getRootDarkModeClass(el));
+            el.requestUpdate();
+            await elementUpdated(el);
+
+
+            const elWithDarkRootClass = getRootDarkModeClass(el);
+            assert.isNotNull(elWithDarkRootClass);
 
             // Default color should be set
             const rbgColor: string = window.getComputedStyle(getInnerDarkModeClass(el)).backgroundColor;
@@ -142,6 +147,9 @@ describe("pnp-search-results", () => {
 
             await stubSearchResults(el);
 
+            el.requestUpdate();
+            await elementUpdated(el);
+
             assert.isNotNull(getRootDarkModeClass(el));
 
             // Default color should be set
@@ -167,6 +175,9 @@ describe("pnp-search-results", () => {
             const el = content.querySelector("pnp-search-results") as SearchResultsComponent;
 
             await stubSearchResults(el);
+            el.requestUpdate();
+            await elementUpdated(el);
+
             el.style.setProperty("--pnpsearch-colorBackgroundDarkPrimary","#000");
 
             assert.isNotNull(getRootDarkModeClass(el));