fix: 🐛 add Reset Form title to SQFormButton if type is 'reset'

✅ Closes: #220
SelectQuoteLabs · May 11, 2021 · 7fdd059 · 7fdd059
1 parent 5da4e82
commit 7fdd059
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 6 deletions.
diff --git a/src/components/SQForm/SQFormButton.js b/src/components/SQForm/SQFormButton.js
@@ -7,7 +7,7 @@ function SQFormButton({
   children,
   isDisabled = false,
   shouldRequireFieldUpdates = false,
-  title = 'Form Submission',
+  title,
   type = 'submit',
   onClick
 }) {
@@ -33,9 +33,20 @@ function SQFormButton({
     }
   };
 
+  const getTitle = () => {
+    switch (true) {
+      case Boolean(title):
+        return title;
+      case type === 'reset':
+        return 'Reset Form';
+      default:
+        return 'Form Submission';
+    }
+  };
+
   return (
     <RoundedButton
-      title={title}
+      title={getTitle()}
       type={type}
       isDisabled={isSQFormButtonDisabled}
       onClick={getClickHandler}

diff --git a/stories/__tests__/SQFormButton.stories.test.js b/stories/__tests__/SQFormButton.stories.test.js
@@ -22,11 +22,19 @@ describe('SQFormButton Tests', () => {
       expect(submitButton).toHaveTextContent('Submit');
     });
 
+    it('should render a button with a given title', () => {
+      render(<SQFormButton title="Hello world" />);
+
+      const button = screen.getByTitle(/hello world/i);
+
+      expect(button).toBeInTheDocument();
+    });
+
     it('should render a reset button given the type reset', () => {
       render(<SQFormButton type="reset" />);
 
       const resetButton = screen.getByRole('button', {
-        name: /form submission/i
+        name: /reset form/i
       });
 
       expect(resetButton).toBeInTheDocument();
@@ -37,7 +45,7 @@ describe('SQFormButton Tests', () => {
       render(<SQFormButton type="reset" />);
 
       const resetButton = screen.getByRole('button', {
-        name: /form submission/i
+        name: /reset form/i
       });
 
       expect(resetButton).toBeInTheDocument();
@@ -127,7 +135,7 @@ describe('SQFormButton Tests', () => {
       render(<SQFormButtonWithField type="reset" />);
 
       const resetButton = screen.getByRole('button', {
-        name: /form submission/i
+        name: /reset form/i
       });
       expect(resetButton).toHaveAttribute('type', 'reset');
       expect(resetButton).toBeDisabled();
@@ -142,7 +150,7 @@ describe('SQFormButton Tests', () => {
       render(<SQFormButtonWithField type="reset" />);
 
       const resetButton = screen.getByRole('button', {
-        name: /form submission/i
+        name: /reset form/i
       });
       expect(resetButton).toHaveAttribute('type', 'reset');
       expect(resetButton).toBeDisabled();