test: fix theming

bpmn-io · Sep 12, 2024 · 265b5ab · 265b5ab
1 parent 0c23ee4
commit 265b5ab
Show file tree

Hide file tree

Showing 10 changed files with 30 additions and 31 deletions.
diff --git a/e2e/carbon/carbon.scss b/e2e/carbon/carbon.scss
@@ -1,15 +1,15 @@
 @use '@carbon/styles' as * with (
-  $font-path: 'https://fonts.camunda.io'
+  $font-path: '@ibm/plex'
 );
 @use '@carbon/styles/scss/themes';
 @use '@carbon/styles/scss/theme';
 
 @import '@bpmn-io/form-js-carbon-styles/src/carbon-styles';
 
-.cds--g10 {
+[data-carbon-theme='g10'] {
   @include theme.theme(themes.$g10);
 }
 
-.cds--g100 {
+[data-carbon-theme='g100'] {
   @include theme.theme(themes.$g100);
 }
diff --git a/e2e/carbon/index.html b/e2e/carbon/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" data-carbon-theme="g100">
   <head>
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
@@ -20,7 +20,7 @@
       }
     </style>
   </head>
-  <body class="cds--g100">
+  <body>
     <div id="container" role="main"></div>
     <script type="module" src="index.js"></script>
   </body>

diff --git a/e2e/carbon/theme.scss b/e2e/carbon/theme.scss
@@ -1,13 +1,13 @@
 @use '@carbon/styles' as * with (
-  $font-path: 'https://fonts.camunda.io'
+  $font-path: '@ibm/plex'
 );
 @use '@carbon/styles/scss/themes';
 @use '@carbon/styles/scss/theme';
 
-.cds--g10 {
+[data-carbon-theme='g10'] {
   @include theme.theme(themes.$g10);
 }
 
-.cds--g100 {
+[data-carbon-theme='g100'] {
   @include theme.theme(themes.$g100);
 }
diff --git a/e2e/theming/index.html b/e2e/theming/index.html
@@ -20,7 +20,7 @@
       }
     </style>
   </head>
-  <body class="cds--g10">
+  <body>
     <div id="container" role="main"></div>
     <script type="module" src="index.js"></script>
   </body>

diff --git a/e2e/theming/theme.scss b/e2e/theming/theme.scss
@@ -1,13 +1,13 @@
 @use '@carbon/styles' as * with (
-  $font-path: 'https://fonts.camunda.io'
+  $font-path: '@ibm/plex'
 );
 @use '@carbon/styles/scss/themes';
 @use '@carbon/styles/scss/theme';
 
-.cds--g10 {
+[data-carbon-theme='g10'] {
   @include theme.theme(themes.$g10);
 }
 
-.cds--g100 {
+[data-carbon-theme='g100'] {
   @include theme.theme(themes.$g100);
 }
diff --git a/e2e/visual/theming.spec.js b/e2e/visual/theming.spec.js
@@ -26,9 +26,7 @@ test('theming - viewer', async ({ page, makeAxeBuilder }) => {
   });
 
   await page.evaluate(() => {
-    const container = document.querySelector('body');
-    container.classList.remove('cds--g10');
-    container.classList.add('cds--g100');
+    document.documentElement.setAttribute('data-carbon-theme', 'g100');
   });
 
   // then
@@ -63,9 +61,7 @@ test('theming - editor', async ({ page, makeAxeBuilder }) => {
   });
 
   await page.evaluate(() => {
-    const container = document.querySelector('body');
-    container.classList.remove('cds--g10');
-    container.classList.add('cds--g100');
+    document.documentElement.setAttribute('data-carbon-theme', 'g100');
   });
 
   // then

diff --git a/packages/form-js-carbon-styles/test/spec/carbon-styles.spec.js b/packages/form-js-carbon-styles/test/spec/carbon-styles.spec.js
@@ -50,9 +50,9 @@ describe('Carbon styles', function () {
 
   beforeEach(function () {
     container = document.createElement('div');
-    container.classList.add('cds--g100');
 
     document.body.appendChild(container);
+    document.documentElement.setAttribute('data-carbon-theme', 'g100');
   });
 
   !singleStart &&
@@ -107,7 +107,7 @@ describe('Carbon styles', function () {
     });
 
     toggle.addEventListener('click', () => {
-      toggleTheme(container);
+      toggleTheme();
       theme = theme === 'dark' ? 'light' : 'dark';
       createFormView(
         {
@@ -191,7 +191,7 @@ describe('Carbon styles', function () {
     });
 
     toggle.addEventListener('click', () => {
-      toggleTheme(container);
+      toggleTheme();
       theme = theme === 'dark' ? 'light' : 'dark';
       createFormView(
         {
@@ -284,7 +284,10 @@ function WithTheme(props) {
   return <ThemeProvider theme={theme}>{props.children}</ThemeProvider>;
 }
 
-function toggleTheme(node) {
-  node.classList.toggle('cds--g100');
-  node.classList.toggle('cds--g10');
+function toggleTheme() {
+  if (document.documentElement.dataset.carbonTheme === 'cds--g100') {
+    document.documentElement.setAttribute('data-carbon-theme', 'g10');
+  } else {
+    document.documentElement.setAttribute('data-carbon-theme', 'g100');
+  }
 }
diff --git a/packages/form-js-carbon-styles/test/spec/theme.scss b/packages/form-js-carbon-styles/test/spec/theme.scss
@@ -1,14 +1,14 @@
 @use '@carbon/react' as * with (
-  $font-path: 'https://fonts.camunda.io'
+  $font-path: '@ibm/plex'
 );
 
 @use '@carbon/react/scss/themes';
 @use '@carbon/react/scss/theme';
 
-.cds--g10 {
+[data-carbon-theme='g10'] {
   @include theme.theme(themes.$g10);
 }
 
-.cds--g100 {
+[data-carbon-theme='g100'] {
   @include theme.theme(themes.$g100);
 }
diff --git a/packages/form-js-editor/test/spec/FormEditor.spec.js b/packages/form-js-editor/test/spec/FormEditor.spec.js
@@ -86,7 +86,7 @@ describe('FormEditor', function () {
 
   (singleStartTheme ? it.only : it)('should render theme', async function () {
     // given
-    container.classList.add('cds--g100');
+    document.documentElement.setAttribute('data-carbon-theme', 'g100');
     insertTheme();
 
     // when
@@ -104,7 +104,7 @@ describe('FormEditor', function () {
 
   (singleStartNoTheme ? it.only : it)('should render with no theme', async function () {
     // given
-    container.classList.add('cds--g10');
+    document.documentElement.setAttribute('data-carbon-theme', 'g10');
     container.style.backgroundColor = 'white';
     insertTheme();
 

diff --git a/packages/form-js-viewer/test/spec/Form.spec.js b/packages/form-js-viewer/test/spec/Form.spec.js
@@ -162,7 +162,7 @@ describe('Form', function () {
 
   (singleStartTheme ? it.only : it)('should render theme', async function () {
     // given
-    container.classList.add('cds--g100');
+    document.documentElement.setAttribute('data-carbon-theme', 'g100');
     insertTheme();
 
     const data = {
@@ -199,7 +199,7 @@ describe('Form', function () {
 
   (singleStartNoTheme ? it.only : it)('should render with no theme', async function () {
     // given
-    container.classList.add('cds--g10');
+    document.documentElement.setAttribute('data-carbon-theme', 'g100');
     container.style.backgroundColor = 'white';
     insertTheme();