chore(tests): latest JSDOM is adding aria attributes (#1312)

- previous JSDOM version didn't include `aria` attributes, however it does now so all tests comparing HTML strings started failing
ghiscoding · Jan 6, 2024 · a993ef7 · a993ef7
1 parent f56edef
commit a993ef7
Show file tree

Hide file tree

Showing 17 changed files with 177 additions and 164 deletions.
diff --git a/package.json b/package.json
@@ -78,7 +78,7 @@
     "jest-cli": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-extended": "^4.0.2",
-    "jsdom": "^23.0.1",
+    "jsdom": "^23.1.0",
     "jsdom-global": "^3.0.2",
     "moment-mini": "^2.29.4",
     "npm-run-all2": "^6.1.1",

diff --git a/packages/common/src/extensions/__tests__/slickCellMenu.plugin.spec.ts b/packages/common/src/extensions/__tests__/slickCellMenu.plugin.spec.ts
@@ -297,33 +297,33 @@ describe('CellMenu Plugin', () => {
         expect(document.body.querySelector('button.close')!.ariaLabel).toBe('Close'); // JSDOM doesn't support ariaLabel, but we can test attribute this way
         expect(removeExtraSpaces(document.body.innerHTML)).toBe(removeExtraSpaces(
           `<div class="slick-cell-menu slick-menu-level-0 slickgrid12345 dropdown dropleft" style="display: block; top: 0px; left: 0px;" aria-expanded="true">
-            <div class="slick-menu-command-list">
+            <div class="slick-menu-command-list" role="menu">
               <div class="slick-command-header no-title with-close">
-                <button class="close" type="button" data-dismiss="slick-menu">×</button>
+                <button aria-label="Close" class="close" type="button" data-dismiss="slick-menu">×</button>
               </div>
-              <li class="slick-menu-item orange" data-command="command1">
+              <li class="slick-menu-item orange" role="menuitem" data-command="command1">
                 <div class="slick-menu-icon">◦</div>
                 <span class="slick-menu-content">Command 1</span>
               </li>
-              <li class="slick-menu-item" data-command="command2">
+              <li class="slick-menu-item" role="menuitem" data-command="command2">
                 <div class="slick-menu-icon">◦</div>
                 <span class="slick-menu-content">Command 2</span>
               </li>
-              <li class="slick-menu-item slick-menu-item-divider"></li>
-              <li class="slick-menu-item red" data-command="delete-row">
+              <li class="slick-menu-item slick-menu-item-divider" role="menuitem"></li>
+              <li class="slick-menu-item red" role="menuitem" data-command="delete-row">
                 <div class="slick-menu-icon mdi mdi-close"></div>
                 <span class="slick-menu-content bold">Delete Row</span>
               </li>
-              <li class="slick-menu-item slick-menu-item-divider"></li>
-              <li class=\"slick-menu-item slick-submenu-item\" data-command=\"sub-commands\">
-                <div class=\"slick-menu-icon\"></div>
-                <span class=\"slick-menu-content\">Sub Commands</span>
-                <span class=\"sub-item-chevron\">⮞</span>
+              <li class="slick-menu-item slick-menu-item-divider" role="menuitem"></li>
+              <li class="slick-menu-item slick-submenu-item" role="menuitem" data-command="sub-commands">
+                <div class="slick-menu-icon"></div>
+                <span class="slick-menu-content">Sub Commands</span>
+                <span class="sub-item-chevron">⮞</span>
               </li>
-              <li class=\"slick-menu-item slick-submenu-item\" data-command=\"sub-commands2\">
-                <div class=\"slick-menu-icon\"></div>
-                <span class=\"slick-menu-content\">Sub Commands 2</span>
-                <span class=\"sub-item-chevron\">⮞</span>
+              <li class="slick-menu-item slick-submenu-item" role="menuitem" data-command="sub-commands2">
+                <div class="slick-menu-icon"></div>
+                <span class="slick-menu-content">Sub Commands 2</span>
+                <span class="sub-item-chevron">⮞</span>
               </li>
           </div>
         </div>`));
@@ -785,28 +785,28 @@ describe('CellMenu Plugin', () => {
         expect(document.body.querySelector('button.close')!.ariaLabel).toBe('Close'); // JSDOM doesn't support ariaLabel, but we can test attribute this way
         expect(removeExtraSpaces(document.body.innerHTML)).toBe(removeExtraSpaces(
           `<div class="slick-cell-menu slick-menu-level-0 slickgrid12345 dropdown dropright" style="display: block; top: 0px; left: 0px;" aria-expanded="true">
-            <div class="slick-menu-option-list">
+            <div class="slick-menu-option-list" role="menu">
               <div class="slick-option-header no-title with-close">
-                <button class="close" type="button" data-dismiss="slick-menu">×</button>
+                <button aria-label="Close" class="close" type="button" data-dismiss="slick-menu">×</button>
               </div>
-              <li class="slick-menu-item purple" data-option="option1">
+              <li class="slick-menu-item purple" role="menuitem" data-option="option1">
                 <div class="slick-menu-icon">◦</div>
                 <span class="slick-menu-content">Option 1</span>
               </li>
-              <li class="slick-menu-item" data-option="option2">
+              <li class="slick-menu-item" role="menuitem" data-option="option2">
                 <div class="slick-menu-icon">◦</div>
                 <span class="slick-menu-content">Option 2</span>
               </li>
-              <li class="slick-menu-item slick-menu-item-divider"></li>
-              <li class="slick-menu-item sky" data-option="delete-row">
+              <li class="slick-menu-item slick-menu-item-divider" role="menuitem"></li>
+              <li class="slick-menu-item sky" role="menuitem" data-option="delete-row">
                 <div class="slick-menu-icon mdi mdi-checked"></div>
                 <span class="slick-menu-content underline">Delete Row</span>
               </li>
-              <li class="slick-menu-item slick-menu-item-divider"></li>
-              <li class=\"slick-menu-item slick-submenu-item\" data-option=\"sub-options\">
-                <div class=\"slick-menu-icon\"></div>
-                <span class=\"slick-menu-content\">Sub Options</span>
-                <span class=\"sub-item-chevron\">⮞</span>
+              <li class="slick-menu-item slick-menu-item-divider" role="menuitem"></li>
+              <li class="slick-menu-item slick-submenu-item" role="menuitem" data-option="sub-options">
+                <div class="slick-menu-icon"></div>
+                <span class="slick-menu-content">Sub Options</span>
+                <span class="sub-item-chevron">⮞</span>
               </li>
           </div>
         </div>`));

diff --git a/packages/common/src/extensions/__tests__/slickContextMenu.spec.ts b/packages/common/src/extensions/__tests__/slickContextMenu.spec.ts
@@ -323,25 +323,25 @@ describe('ContextMenu Plugin', () => {
         expect(document.body.querySelector('button.close')!.ariaLabel).toBe('Close'); // JSDOM doesn't support ariaLabel, but we can test attribute this way
         expect(removeExtraSpaces(document.body.innerHTML)).toBe(removeExtraSpaces(
           `<div class="slick-context-menu slick-menu-level-0 slickgrid12345 dropdown dropright" style="display: block; top: 0px; left: 0px;" aria-expanded="true">
-            <div class="slick-menu-command-list">
+            <div class="slick-menu-command-list" role="menu">
               <div class="slick-command-header no-title with-close">
-                <button class="close" type="button" data-dismiss="slick-menu">×</button>
+                <button aria-label="Close" class="close" type="button" data-dismiss="slick-menu">×</button>
               </div>
-              <li class="slick-menu-item orange" data-command="command1">
+              <li class="slick-menu-item orange" role="menuitem" data-command="command1">
                 <div class="slick-menu-icon">◦</div>
                 <span class="slick-menu-content">Command 1</span>
               </li>
-              <li class="slick-menu-item" data-command="command2">
+              <li class="slick-menu-item" role="menuitem" data-command="command2">
                 <div class="slick-menu-icon">◦</div>
                 <span class="slick-menu-content">Command 2</span>
               </li>
-              <li class="slick-menu-item slick-menu-item-divider"></li>
-              <li class="slick-menu-item red" data-command="delete-row">
+              <li class="slick-menu-item slick-menu-item-divider" role="menuitem"></li>
+              <li class="slick-menu-item red" role="menuitem" data-command="delete-row">
                 <div class="slick-menu-icon mdi mdi-close"></div>
                 <span class="slick-menu-content bold">Delete Row</span>
               </li>
-              <li class="slick-menu-item slick-menu-item-divider"></li>
-              <li class=\"slick-menu-item slick-submenu-item\" data-command=\"sub-commands\">
+              <li class="slick-menu-item slick-menu-item-divider" role="menuitem"></li>
+              <li class=\"slick-menu-item slick-submenu-item\" role="menuitem" data-command=\"sub-commands\">
                 <div class=\"slick-menu-icon\"></div>
                 <span class=\"slick-menu-content\">Sub Commands</span>
                 <span class=\"sub-item-chevron\">⮞</span>
@@ -1336,25 +1336,25 @@ describe('ContextMenu Plugin', () => {
         expect(document.body.querySelector('button.close')!.ariaLabel).toBe('Close'); // JSDOM doesn't support ariaLabel, but we can test attribute this way
         expect(removeExtraSpaces(document.body.innerHTML)).toBe(removeExtraSpaces(
           `<div class="slick-context-menu slick-menu-level-0 slickgrid12345 dropdown dropright" style="display: block; top: 0px; left: 0px;" aria-expanded="true">
-            <div class="slick-menu-option-list">
+            <div class="slick-menu-option-list" role="menu">
               <div class="slick-option-header no-title with-close">
-                <button class="close" type="button" data-dismiss="slick-menu">×</button>
+                <button aria-label="Close" class="close" type="button" data-dismiss="slick-menu">×</button>
               </div>
-              <li class="slick-menu-item purple" data-option="option1">
+              <li class="slick-menu-item purple" role="menuitem" data-option="option1">
                 <div class="slick-menu-icon">◦</div>
                 <span class="slick-menu-content">Option 1</span>
               </li>
-              <li class="slick-menu-item" data-option="option2">
+              <li class="slick-menu-item" role="menuitem" data-option="option2">
                 <div class="slick-menu-icon">◦</div>
                 <span class="slick-menu-content">Option 2</span>
               </li>
-              <li class="slick-menu-item slick-menu-item-divider"></li>
-              <li class="slick-menu-item sky" data-option="delete-row">
+              <li class="slick-menu-item slick-menu-item-divider" role="menuitem"></li>
+              <li class="slick-menu-item sky" role="menuitem" data-option="delete-row">
                 <div class="slick-menu-icon mdi mdi-checked"></div>
                 <span class="slick-menu-content underline">Delete Row</span>
               </li>
-              <li class="slick-menu-item slick-menu-item-divider"></li>
-              <li class=\"slick-menu-item slick-submenu-item\" data-option=\"sub-options\">
+              <li class="slick-menu-item slick-menu-item-divider" role="menuitem"></li>
+              <li class=\"slick-menu-item slick-submenu-item\" role="menuitem" data-option=\"sub-options\">
                 <div class=\"slick-menu-icon\"></div>
                 <span class=\"slick-menu-content\">Sub Options</span>
                 <span class=\"sub-item-chevron\">⮞</span>

diff --git a/packages/common/src/extensions/__tests__/slickGroupItemMetadataProvider.spec.ts b/packages/common/src/extensions/__tests__/slickGroupItemMetadataProvider.spec.ts
@@ -129,7 +129,7 @@ describe('GroupItemMetadataProvider Service', () => {
       service.setOptions({ enableExpandCollapse: true });
       const output = service.getOptions().groupFormatter!(0, 0, 'test', mockColumns[0], { title: 'Some Title' }, gridStub) as DocumentFragment;
       const htmlContent = [].map.call(output.childNodes, x => x.outerHTML).join('');
-      expect(htmlContent).toBe('<span class="slick-group-toggle expanded" style="margin-left: 0px;"></span><span class="slick-group-title" level="0">Some Title</span>');
+      expect(htmlContent).toBe('<span class="slick-group-toggle expanded" aria-expanded="true" style="margin-left: 0px;"></span><span class="slick-group-title" level="0">Some Title</span>');
     });
 
     it('should provide HTMLElement and return same Grouping info formatted with a group level 0 without indentation when calling "defaultGroupCellFormatter" with option "enableExpandCollapse" set to True', () => {
@@ -139,7 +139,7 @@ describe('GroupItemMetadataProvider Service', () => {
       spanElm.textContent = 'Another Title';
       const output = service.getOptions().groupFormatter!(0, 0, 'test', mockColumns[0], { title: spanElm }, gridStub) as DocumentFragment;
       const htmlContent = getHTMLFromFragment(output, 'outerHTML');
-      expect(htmlContent).toBe('<span class="slick-group-toggle expanded" style="margin-left: 0px;"></span><span class="slick-group-title" level="0"><span>Another Title</span></span>');
+      expect(htmlContent).toBe('<span class="slick-group-toggle expanded" aria-expanded="true" style="margin-left: 0px;"></span><span class="slick-group-title" level="0"><span>Another Title</span></span>');
     });
 
     it('should provide a DocumentFragment as header title and return same Grouping info formatted with a group level 0 without indentation when calling "defaultGroupCellFormatter" with option "enableExpandCollapse" set to True', () => {
@@ -149,23 +149,23 @@ describe('GroupItemMetadataProvider Service', () => {
       fragment.textContent = 'Fragment Title';
       const output = service.getOptions().groupFormatter!(0, 0, 'test', mockColumns[0], { title: fragment }, gridStub) as DocumentFragment;
       const htmlContent = getHTMLFromFragment(output, 'outerHTML');
-      expect(htmlContent).toBe('<span class="slick-group-toggle expanded" style="margin-left: 0px;"></span><span class="slick-group-title" level="0">Fragment Title</span>');
+      expect(htmlContent).toBe('<span class="slick-group-toggle expanded" aria-expanded="true" style="margin-left: 0px;"></span><span class="slick-group-title" level="0">Fragment Title</span>');
     });
 
     it('should return Grouping info formatted with a group level 2 with indentation of 30px when calling "defaultGroupCellFormatter" with option "enableExpandCollapse" set to True and level 2', () => {
       service.init(gridStub);
       service.setOptions({ enableExpandCollapse: true, toggleCssClass: 'groupy-toggle', toggleExpandedCssClass: 'groupy-expanded' });
       const output = service.getOptions().groupFormatter!(0, 0, 'test', mockColumns[0], { level: 2, title: 'Some Title' }, gridStub) as DocumentFragment;
       const htmlContent = getHTMLFromFragment(output, 'outerHTML');
-      expect(htmlContent).toBe('<span class="groupy-toggle groupy-expanded" style="margin-left: 30px;"></span><span class="slick-group-title" level="2">Some Title</span>');
+      expect(htmlContent).toBe('<span class="groupy-toggle groupy-expanded" aria-expanded="true" style="margin-left: 30px;"></span><span class="slick-group-title" level="2">Some Title</span>');
     });
 
     it('should return Grouping info formatted with a group level 2 with indentation of 30px when calling "defaultGroupCellFormatter" with option "enableExpandCollapse" set to True and level 2', () => {
       service.init(gridStub);
       service.setOptions({ enableExpandCollapse: true, toggleCssClass: 'groupy-toggle', toggleCollapsedCssClass: 'groupy-collapsed' });
       const output = service.getOptions().groupFormatter!(0, 0, 'test', mockColumns[0], { collapsed: true, level: 3, title: 'Some Title' }, gridStub) as DocumentFragment;
       const htmlContent = [].map.call(output.childNodes, x => x.outerHTML).join('')
-      expect(htmlContent).toBe('<span class="groupy-toggle groupy-collapsed" style="margin-left: 45px;"></span><span class="slick-group-title" level="3">Some Title</span>');
+      expect(htmlContent).toBe('<span class="groupy-toggle groupy-collapsed" aria-expanded="false" style="margin-left: 45px;"></span><span class="slick-group-title" level="3">Some Title</span>');
     });
   });