@axinom/mosaic-ui 0.66.0-rc.11 → 0.66.0-rc.12

package/src/components/Icons/Icons.spec.tsx

@@ -11,50 +11,73 @@ describe('Icons', () => {
   });
 
   it.each`
-    key                         | result
-    ${IconName.Archive}         | ${1}
-    ${IconName.Block}           | ${1}
-    ${IconName.Bulk}            | ${1}
-    ${IconName.Calendar}        | ${1}
-    ${IconName.Checkmark}       | ${1}
-    ${IconName.ChevronDown}     | ${1}
-    ${IconName.ChevronLeft}     | ${1}
-    ${IconName.ChevronRight}    | ${1}
-    ${IconName.ChevronUp}       | ${1}
-    ${IconName.Copy}            | ${1}
-    ${IconName.Delete}          | ${1}
-    ${IconName.Details}         | ${1}
-    ${IconName.Drag}            | ${6}
-    ${IconName.Ellipsis}        | ${1}
-    ${IconName.Error}           | ${1}
-    ${IconName.External}        | ${1}
-    ${IconName.File}            | ${1}
-    ${IconName.Info}            | ${1}
-    ${IconName.MidlineEllipsis} | ${1}
-    ${IconName.Minus}           | ${1}
-    ${IconName.NavigateRight}   | ${1}
-    ${IconName.Pause}           | ${1}
-    ${IconName.Play}            | ${1}
-    ${IconName.Plus}            | ${1}
-    ${IconName.Publish}         | ${1}
-    ${IconName.RemoveFilter}    | ${1}
-    ${IconName.Replace}         | ${1}
-    ${IconName.Retry}           | ${1}
-    ${IconName.Snapshot}        | ${1}
-    ${IconName.Stop}            | ${1}
-    ${IconName.Success}         | ${1}
-    ${IconName.Unarchive}       | ${1}
-    ${IconName.Undo}            | ${1}
-    ${IconName.Unpublish}       | ${1}
-    ${IconName.Upload}          | ${1}
-    ${IconName.Warning}         | ${1}
-    ${IconName.X}               | ${1}
-  `('renders an icon for each key in IconName', ({ key, result }) => {
+    key                          | result
+    ${IconName.Axi}              | ${1}
+    ${IconName.Archive}          | ${1}
+    ${IconName.Audio}            | ${1}
+    ${IconName.DescriptiveAudio} | ${1}
+    ${IconName.BackwardOne}      | ${1}
+    ${IconName.BackwardTen}      | ${1}
+    ${IconName.Block}            | ${1}
+    ${IconName.Bulk}             | ${1}
+    ${IconName.BulkEdit}         | ${1}
+    ${IconName.Calendar}         | ${1}
+    ${IconName.Checkmark}        | ${1}
+    ${IconName.ChevronDown}      | ${1}
+    ${IconName.ChevronLeft}      | ${1}
+    ${IconName.ChevronRight}     | ${1}
+    ${IconName.ChevronUp}        | ${1}
+    ${IconName.ClosedCaption}    | ${1}
+    ${IconName.Copy}             | ${1}
+    ${IconName.Delete}           | ${1}
+    ${IconName.Details}          | ${1}
+    ${IconName.Drag}             | ${6}
+    ${IconName.Ellipsis}         | ${1}
+    ${IconName.Error}            | ${1}
+    ${IconName.External}         | ${1}
+    ${IconName.File}             | ${1}
+    ${IconName.Filters}          | ${1}
+    ${IconName.ForwardOne}       | ${1}
+    ${IconName.ForwardTen}       | ${1}
+    ${IconName.Info}             | ${1}
+    ${IconName.InProgress}       | ${1}
+    ${IconName.MidlineEllipsis}  | ${1}
+    ${IconName.Minus}            | ${1}
+    ${IconName.Mute}             | ${1}
+    ${IconName.NavigateRight}    | ${1}
+    ${IconName.Pause}            | ${1}
+    ${IconName.Play}             | ${1}
+    ${IconName.Plus}             | ${1}
+    ${IconName.Publish}          | ${1}
+    ${IconName.QuickEdit}        | ${1}
+    ${IconName.QuickEditStation} | ${1}
+    ${IconName.RemoveFilter}     | ${1}
+    ${IconName.Replace}          | ${1}
+    ${IconName.Retry}            | ${1}
+    ${IconName.Save}             | ${2}
+    ${IconName.Snapshot}         | ${1}
+    ${IconName.Stop}             | ${1}
+    ${IconName.Subtitles}        | ${1}
+    ${IconName.Success}          | ${1}
+    ${IconName.Unarchive}        | ${1}
+    ${IconName.Undo}             | ${1}
+    ${IconName.Unmute}           | ${1}
+    ${IconName.Unpublish}        | ${1}
+    ${IconName.Upload}           | ${1}
+    ${IconName.Video}            | ${1}
+    ${IconName.Warning}          | ${1}
+    ${IconName.X}                | ${1}
+  `('renders $key icon with $result children', ({ key, result }) => {
     const wrapper = mount(<Icons icon={key} />);
 
-    const icon = wrapper.find('svg');
+    const svgElement = wrapper.find('svg');
+    expect(svgElement).toHaveLength(1);
+
+    // Get the actual DOM node and count its children
+    const domNode = svgElement.getDOMNode() as SVGElement;
+    const childrenCount = domNode.children.length;
 
-    expect(icon.children()).toHaveLength(result);
+    expect(childrenCount).toBe(result);
   });
 
   it('passes down optional className to icon', () => {
@@ -75,4 +98,30 @@ describe('Icons', () => {
 
     expect(icon.children()).toHaveLength(0);
   });
+
+  it('applies accessibility attributes correctly', () => {
+    const wrapper = mount(
+      <Icons
+        icon={IconName.Play}
+        aria-label="Play video"
+        title="Start playback"
+      />,
+    );
+
+    const svg = wrapper.find('svg');
+
+    expect(svg.prop('aria-label')).toBe('Play video');
+    expect(svg.prop('role')).toBe('img');
+    expect(svg.prop('aria-hidden')).toBeUndefined();
+    expect(wrapper.find('title').text()).toBe('Start playback');
+  });
+
+  it('marks decorative icons as presentation', () => {
+    const wrapper = mount(<Icons icon={IconName.Play} />);
+
+    const svg = wrapper.find('svg');
+
+    expect(svg.prop('role')).toBe('presentation');
+    expect(svg.prop('aria-hidden')).toBe('true');
+  });
 });