Dynamically define KuiButton and KuiButtonIcon tests for type prop.

elastic · Mar 28, 2017 · 0c5d2fd · 0c5d2fd
1 parent f9c55fa
commit 0c5d2fd
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 106 deletions.
diff --git a/ui_framework/components/button/button.js b/ui_framework/components/button/button.js
@@ -7,13 +7,15 @@ import keyMirror from 'keymirror';
 
 import { KuiButtonIcon } from './button_icon/button_icon';
 
+const BUTTON_TYPES = [
+  'basic',
+  'hollow',
+  'danger',
+  'primary',
+];
+
 const commonPropTypes = {
-  type: PropTypes.oneOf([
-    'basic',
-    'hollow',
-    'danger',
-    'primary',
-  ]),
+  type: PropTypes.oneOf(BUTTON_TYPES),
   testSubject: PropTypes.string,
   isDisabled: PropTypes.bool,
   onClick: PropTypes.func,
@@ -162,6 +164,7 @@ KuiSubmitButton.propTypes = {
 };
 
 export {
+  BUTTON_TYPES,
   KuiButton,
   KuiLinkButton,
   KuiSubmitButton,

diff --git a/ui_framework/components/button/button.test.js b/ui_framework/components/button/button.test.js
@@ -6,6 +6,7 @@ import {
 import sinon from 'sinon';
 
 import {
+  BUTTON_TYPES,
   KuiButton,
 } from './button';
 
@@ -23,47 +24,12 @@ describe('KuiButton', () => {
 
   describe('Props', () => {
     describe('type', () => {
-      describe('basic', () => {
-        test('renders the basic class', () => {
-          const $button = render(
-            <KuiButton type="basic" />
-          );
-
-          expect($button)
-            .toMatchSnapshot();
-        });
-      });
-
-      describe('hollow', () => {
-        test('renders the hollow class', () => {
-          const $button = render(
-            <KuiButton type="hollow" />
-          );
-
-          expect($button)
-            .toMatchSnapshot();
-        });
-      });
-
-      describe('danger', () => {
-        test('renders the danger class', () => {
-          const $button = render(
-            <KuiButton type="danger" />
-          );
-
-          expect($button)
-            .toMatchSnapshot();
-        });
-      });
-
-      describe('primary', () => {
-        test('renders the primary class', () => {
-          const $button = render(
-            <KuiButton type="primary" />
-          );
-
-          expect($button)
-            .toMatchSnapshot();
+      BUTTON_TYPES.forEach(type => {
+        describe(type, () => {
+          test(`renders the ${type} class`, () => {
+            const $button = render(<KuiButton type={ type } />);
+            expect($button).toMatchSnapshot();
+          });
         });
       });
     });

diff --git a/ui_framework/components/button/button_icon/button_icon.js b/ui_framework/components/button/button_icon/button_icon.js
@@ -5,6 +5,14 @@ import React, {
 import classNames from 'classnames';
 import keyMirror from 'keymirror';
 
+const ICON_TYPES = [
+  'create',
+  'delete',
+  'previous',
+  'next',
+  'loading',
+];
+
 const KuiButtonIcon = props => {
   const typeToClassNameMap = {
     create: 'fa-plus',
@@ -24,16 +32,11 @@ const KuiButtonIcon = props => {
 };
 
 KuiButtonIcon.propTypes = {
-  type: PropTypes.oneOf([
-    'create',
-    'delete',
-    'previous',
-    'next',
-    'loading',
-  ]),
+  type: PropTypes.oneOf(ICON_TYPES),
   className: PropTypes.string,
 };
 
 export {
+  ICON_TYPES,
   KuiButtonIcon,
 };
diff --git a/ui_framework/components/button/button_icon/button_icon.test.js b/ui_framework/components/button/button_icon/button_icon.test.js
@@ -6,6 +6,7 @@ import {
 import sinon from 'sinon';
 
 import {
+  ICON_TYPES,
   KuiButtonIcon,
 } from './button_icon';
 
@@ -23,58 +24,12 @@ describe('KuiButtonIcon', () => {
 
   describe('Props', () => {
     describe('type', () => {
-      describe('create', () => {
-        test('renders the create class', () => {
-          const $buttonIcon = render(
-            <KuiButtonIcon type="create" />
-          );
-
-          expect($buttonIcon)
-            .toMatchSnapshot();
-        });
-      });
-
-      describe('delete', () => {
-        test('renders the delete class', () => {
-          const $buttonIcon = render(
-            <KuiButtonIcon type="delete" />
-          );
-
-          expect($buttonIcon)
-            .toMatchSnapshot();
-        });
-      });
-
-      describe('previous', () => {
-        test('renders the previous class', () => {
-          const $buttonIcon = render(
-            <KuiButtonIcon type="previous" />
-          );
-
-          expect($buttonIcon)
-            .toMatchSnapshot();
-        });
-      });
-
-      describe('next', () => {
-        test('renders the next class', () => {
-          const $buttonIcon = render(
-            <KuiButtonIcon type="next" />
-          );
-
-          expect($buttonIcon)
-            .toMatchSnapshot();
-        });
-      });
-
-      describe('loading', () => {
-        test('renders the loading class', () => {
-          const $buttonIcon = render(
-            <KuiButtonIcon type="loading" />
-          );
-
-          expect($buttonIcon)
-            .toMatchSnapshot();
+      ICON_TYPES.forEach(type => {
+        describe(type, () => {
+          test(`renders the ${type} class`, () => {
+            const $buttonIcon = render(<KuiButtonIcon type={ type } />);
+            expect($buttonIcon).toMatchSnapshot();
+          });
         });
       });
     });