fix: 🐛 pass title to IconComponent svg, update IconButton tests

✅ Closes: #228
SelectQuoteLabs · May 11, 2021 · 6db7c19 · 6db7c19
1 parent 854bf93
commit 6db7c19
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 7 deletions.
diff --git a/src/components/SQForm/SQFormIconButton.js b/src/components/SQForm/SQFormIconButton.js
@@ -18,9 +18,13 @@ function SQFormIconButton({
     onClick
   );
 
+  function Icon() {
+    return <IconComponent title={title} />;
+  }
+
   return (
     <IconButton
-      IconComponent={IconComponent}
+      IconComponent={Icon}
       title={title}
       type={type}
       isDisabled={isButtonDisabled}

diff --git a/stories/__tests__/SQFormIconButton.stories.test.js b/stories/__tests__/SQFormIconButton.stories.test.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import CheckCircle from '@material-ui/icons/CheckCircle';
 import {composeStories} from '@storybook/testing-react';
-import {render, screen} from '@testing-library/react';
+import {render, screen, within} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import * as stories from '../SQFormIconButton.stories';
 
@@ -13,15 +13,13 @@ const {
 describe('SQFormIconButton Tests', () => {
   describe('Button Only', () => {
     it('should render a button with an icon', () => {
-      const {container} = render(
-        <SQFormIconButton exampleIcons={CheckCircle} />
-      );
+      render(<SQFormIconButton exampleIcons={CheckCircle} />);
 
       const iconButton = screen.getByRole('button', {name: /form submission/i});
-      const svg = container.getElementsByTagName('svg');
+      const svg = within(iconButton).getByTitle(/form submission/i);
 
       expect(iconButton).toBeInTheDocument();
-      expect(svg.length).toEqual(1);
+      expect(svg).toBeInTheDocument();
     });
 
     it('should render a submit button', () => {