From 2237325224f2eafc47a3a433f6b9c5a6f7ec8c9b Mon Sep 17 00:00:00 2001 From: Franck Cornu Date: Fri, 7 Jun 2024 15:01:58 -0400 Subject: [PATCH] - Fixed tests --- .github/workflows/publish.yml | 2 +- packages/components/package.json | 5 +++-- .../components/src/components/BaseComponent.ts | 8 ++++---- .../tests/SearchResultsComponent.test.ts | 15 +++++++++++++-- pnpm-lock.yaml | 11 +++++++++++ 5 files changed, 32 insertions(+), 9 deletions(-) diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml index 695f1a8..cf970da 100644 --- a/.github/workflows/publish.yml +++ b/.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 diff --git a/packages/components/package.json b/packages/components/package.json index 8750cd7..43da581 100644 --- a/packages/components/package.json +++ b/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", diff --git a/packages/components/src/components/BaseComponent.ts b/packages/components/src/components/BaseComponent.ts index 928c9b5..361897f 100644 --- a/packages/components/src/components/BaseComponent.ts +++ b/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(); } }; diff --git a/packages/components/src/components/search-results/tests/SearchResultsComponent.test.ts b/packages/components/src/components/search-results/tests/SearchResultsComponent.test.ts index 9e6594c..0d5411e 100644 --- a/packages/components/src/components/search-results/tests/SearchResultsComponent.test.ts +++ b/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)); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8454add..2e66ab5 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -479,6 +479,9 @@ importers: copy-webpack-plugin: specifier: 11.0.0 version: 11.0.0(webpack@5.88.1) + cross-env: + specifier: 7.0.3 + version: 7.0.3 cssnano: specifier: 6.0.1 version: 6.0.1(postcss@8.4.31) @@ -15530,6 +15533,14 @@ packages: /create-require@1.1.1: resolution: {integrity: sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==} + /cross-env@7.0.3: + resolution: {integrity: sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==} + engines: {node: '>=10.14', npm: '>=6', yarn: '>=1'} + hasBin: true + dependencies: + cross-spawn: 7.0.3 + dev: true + /cross-fetch@3.1.5: resolution: {integrity: sha512-lvb1SBsI0Z7GDwmuid+mU3kWVBwTVUbe7S0H52yaaAdQOXq2YktTCZdlAcNKFzE6QtRz0snpw9bNiPeOIkkQvw==} dependencies: