Fix prop-types warnings in Jest tests (#14339) (#14428)

* Refine formatting of KuiCodeEditor.
* Update KuiButton and KuiLinkButton tests so aria-label warnings go away.
* Import brace dependencies into KuiCodeEditor example to make console error go away.
* Upgrade react-ace to 5.2.2 to make prop-types warnings go away.

package.json

@@ -166,7 +166,7 @@
     "querystring-browser": "1.0.4",
     "raw-loader": "0.5.1",
     "react": "15.6.1",
-    "react-ace": "3.7.0",
+    "react-ace": "5.2.2",
     "react-test-renderer": "15.6.1",
     "react-addons-test-utils": "15.6.0",
     "react-anything-sortable": "1.6.1",

ui_framework/doc_site/src/views/code_editor/code_editor.js

@@ -1,5 +1,8 @@
 import React, { Component } from 'react';
 
+import 'brace/mode/less';
+import 'brace/theme/github';
+
 import {
   KuiCodeEditor
 } from '../../../../components';

ui_framework/src/components/button/__snapshots__/button.test.js.snap

@@ -16,6 +16,7 @@ exports[`KuiButton Baseline HTML attributes are rendered 1`] = `
 
 exports[`KuiButton Baseline is rendered 1`] = `
 <button
+  aria-label="aria label"
   class="kuiButton"
 >
   <span
@@ -26,6 +27,7 @@ exports[`KuiButton Baseline is rendered 1`] = `
 
 exports[`KuiButton Props buttonType basic renders the basic class 1`] = `
 <button
+  aria-label="aria label"
   class="kuiButton kuiButton--basic"
 >
   <span
@@ -36,6 +38,7 @@ exports[`KuiButton Props buttonType basic renders the basic class 1`] = `
 
 exports[`KuiButton Props buttonType danger renders the danger class 1`] = `
 <button
+  aria-label="aria label"
   class="kuiButton kuiButton--danger"
 >
   <span
@@ -46,6 +49,7 @@ exports[`KuiButton Props buttonType danger renders the danger class 1`] = `
 
 exports[`KuiButton Props buttonType hollow renders the hollow class 1`] = `
 <button
+  aria-label="aria label"
   class="kuiButton kuiButton--hollow"
 >
   <span
@@ -56,6 +60,7 @@ exports[`KuiButton Props buttonType hollow renders the hollow class 1`] = `
 
 exports[`KuiButton Props buttonType primary renders the primary class 1`] = `
 <button
+  aria-label="aria label"
   class="kuiButton kuiButton--primary"
 >
   <span
@@ -66,6 +71,7 @@ exports[`KuiButton Props buttonType primary renders the primary class 1`] = `
 
 exports[`KuiButton Props buttonType secondary renders the secondary class 1`] = `
 <button
+  aria-label="aria label"
   class="kuiButton kuiButton--secondary"
 >
   <span
@@ -76,6 +82,7 @@ exports[`KuiButton Props buttonType secondary renders the secondary class 1`] =
 
 exports[`KuiButton Props buttonType warning renders the warning class 1`] = `
 <button
+  aria-label="aria label"
   class="kuiButton kuiButton--warning"
 >
   <span
@@ -115,6 +122,7 @@ exports[`KuiButton Props icon is rendered with children 1`] = `
 
 exports[`KuiButton Props icon is rendered without children 1`] = `
 <button
+  aria-label="aria label"
   class="kuiButton kuiButton--iconText"
 >
   <span
@@ -142,6 +150,7 @@ exports[`KuiButton Props iconPosition moves the icon to the right 1`] = `
 
 exports[`KuiButton Props isLoading doesn't render the icon prop 1`] = `
 <button
+  aria-label="aria label"
   class="kuiButton kuiButton--iconText"
 >
   <span
@@ -157,6 +166,7 @@ exports[`KuiButton Props isLoading doesn't render the icon prop 1`] = `
 
 exports[`KuiButton Props isLoading renders a spinner 1`] = `
 <button
+  aria-label="aria label"
   class="kuiButton kuiButton--iconText"
 >
   <span

ui_framework/src/components/button/__snapshots__/link_button.test.js.snap

@@ -17,6 +17,7 @@ exports[`KuiLinkButton Baseline HTML attributes are rendered (and disabled rende
 
 exports[`KuiLinkButton Baseline is rendered 1`] = `
 <a
+  aria-label="aria label"
   class="kuiButton"
 >
   <span
@@ -27,6 +28,7 @@ exports[`KuiLinkButton Baseline is rendered 1`] = `
 
 exports[`KuiLinkButton Props buttonType basic renders the basic class 1`] = `
 <a
+  aria-label="aria label"
   class="kuiButton kuiButton--basic"
 >
   <span
@@ -37,6 +39,7 @@ exports[`KuiLinkButton Props buttonType basic renders the basic class 1`] = `
 
 exports[`KuiLinkButton Props buttonType danger renders the danger class 1`] = `
 <a
+  aria-label="aria label"
   class="kuiButton kuiButton--danger"
 >
   <span
@@ -47,6 +50,7 @@ exports[`KuiLinkButton Props buttonType danger renders the danger class 1`] = `
 
 exports[`KuiLinkButton Props buttonType hollow renders the hollow class 1`] = `
 <a
+  aria-label="aria label"
   class="kuiButton kuiButton--hollow"
 >
   <span
@@ -57,6 +61,7 @@ exports[`KuiLinkButton Props buttonType hollow renders the hollow class 1`] = `
 
 exports[`KuiLinkButton Props buttonType primary renders the primary class 1`] = `
 <a
+  aria-label="aria label"
   class="kuiButton kuiButton--primary"
 >
   <span
@@ -67,6 +72,7 @@ exports[`KuiLinkButton Props buttonType primary renders the primary class 1`] =
 
 exports[`KuiLinkButton Props buttonType secondary renders the secondary class 1`] = `
 <a
+  aria-label="aria label"
   class="kuiButton kuiButton--secondary"
 >
   <span
@@ -77,6 +83,7 @@ exports[`KuiLinkButton Props buttonType secondary renders the secondary class 1`
 
 exports[`KuiLinkButton Props buttonType warning renders the warning class 1`] = `
 <a
+  aria-label="aria label"
   class="kuiButton kuiButton--warning"
 >
   <span
@@ -116,6 +123,7 @@ exports[`KuiLinkButton Props icon is rendered with children 1`] = `
 
 exports[`KuiLinkButton Props icon is rendered without children 1`] = `
 <a
+  aria-label="aria label"
   class="kuiButton kuiButton--iconText"
 >
   <span
@@ -143,6 +151,7 @@ exports[`KuiLinkButton Props iconPosition moves the icon to the right 1`] = `
 
 exports[`KuiLinkButton Props isLoading doesn't render the icon prop 1`] = `
 <a
+  aria-label="aria label"
   class="kuiButton kuiButton--iconText"
 >
   <span
@@ -158,6 +167,7 @@ exports[`KuiLinkButton Props isLoading doesn't render the icon prop 1`] = `
 
 exports[`KuiLinkButton Props isLoading renders a spinner 1`] = `
 <a
+  aria-label="aria label"
   class="kuiButton kuiButton--iconText"
 >
   <span

ui_framework/src/components/button/button.test.js

@@ -11,7 +11,7 @@ describe('KuiButton', () => {
   describe('Baseline', () => {
     test('is rendered', () => {
       const $button = render(
-        <KuiButton />
+        <KuiButton aria-label="aria label" />
       );
 
       expect($button)
@@ -39,7 +39,12 @@ describe('KuiButton', () => {
       BUTTON_TYPES.forEach(buttonType => {
         describe(buttonType, () => {
           test(`renders the ${buttonType} class`, () => {
-            const $button = render(<KuiButton buttonType={buttonType} />);
+            const $button = render(
+              <KuiButton
+                buttonType={buttonType}
+                aria-label="aria label"
+              />
+            );
             expect($button).toMatchSnapshot();
           });
         });
@@ -60,7 +65,10 @@ describe('KuiButton', () => {
 
       test('is rendered without children', () => {
         const $button = render(
-          <KuiButton icon="Icon" />
+          <KuiButton
+            icon="Icon"
+            aria-label="aria label"
+          />
         );
 
         expect($button)
@@ -102,7 +110,10 @@ describe('KuiButton', () => {
         const onClickHandler = sinon.stub();
 
         shallow(
-          <KuiButton onClick={onClickHandler} />
+          <KuiButton
+            onClick={onClickHandler}
+            aria-label="aria label"
+          />
         );
 
         sinon.assert.notCalled(onClickHandler);
@@ -112,7 +123,10 @@ describe('KuiButton', () => {
         const onClickHandler = sinon.stub();
 
         const $button = shallow(
-          <KuiButton onClick={onClickHandler} />
+          <KuiButton
+            onClick={onClickHandler}
+            aria-label="aria label"
+          />
         );
 
         $button.simulate('click');
@@ -124,7 +138,10 @@ describe('KuiButton', () => {
     describe('isLoading', () => {
       test('renders a spinner', () => {
         const $button = render(
-          <KuiButton isLoading />
+          <KuiButton
+            isLoading
+            aria-label="aria label"
+          />
         );
 
         expect($button)
@@ -133,7 +150,11 @@ describe('KuiButton', () => {
 
       test(`doesn't render the icon prop`, () => {
         const $button = render(
-          <KuiButton isLoading icon="Icon" />
+          <KuiButton
+            isLoading
+            icon="Icon"
+            aria-label="aria label"
+          />
         );
 
         expect($button)

ui_framework/src/components/button/link_button.test.js

@@ -10,7 +10,7 @@ describe('KuiLinkButton', () => {
   describe('Baseline', () => {
     test('is rendered', () => {
       const $button = render(
-        <KuiLinkButton />
+        <KuiLinkButton aria-label="aria label" />
       );
 
       expect($button)
@@ -40,7 +40,12 @@ describe('KuiLinkButton', () => {
       BUTTON_TYPES.forEach(buttonType => {
         describe(buttonType, () => {
           test(`renders the ${buttonType} class`, () => {
-            const $button = render(<KuiLinkButton buttonType={buttonType} />);
+            const $button = render(
+              <KuiLinkButton
+                buttonType={buttonType}
+                aria-label="aria label"
+              />
+            );
             expect($button).toMatchSnapshot();
           });
         });
@@ -61,7 +66,10 @@ describe('KuiLinkButton', () => {
 
       test('is rendered without children', () => {
         const $button = render(
-          <KuiLinkButton icon="Icon" />
+          <KuiLinkButton
+            icon="Icon"
+            aria-label="aria label"
+          />
         );
 
         expect($button)
@@ -101,7 +109,10 @@ describe('KuiLinkButton', () => {
     describe('isLoading', () => {
       test('renders a spinner', () => {
         const $button = render(
-          <KuiLinkButton isLoading />
+          <KuiLinkButton
+            isLoading
+            aria-label="aria label"
+          />
         );
 
         expect($button)
@@ -110,7 +121,11 @@ describe('KuiLinkButton', () => {
 
       test(`doesn't render the icon prop`, () => {
         const $button = render(
-          <KuiLinkButton isLoading icon="Icon" />
+          <KuiLinkButton
+            isLoading
+            icon="Icon"
+            aria-label="aria label"
+          />
         );
 
         expect($button)

ui_framework/src/components/code_editor/code_editor.js

@@ -54,10 +54,17 @@ export class KuiCodeEditor extends Component {
   }
 
   render() {
-    const { width, height } = this.props;
+    const {
+      width,
+      height,
+      onBlur, // eslint-disable-line no-unused-vars
+      ...rest,
+    } = this.props;
+
     const classes = classNames('kuiCodeEditorKeyboardHint', {
       'kuiCodeEditorKeyboardHint-isInactive': !this.state.isHintActive
     });
+
     return (
       <div
         className="kuiCodeEditorWrapper"
@@ -76,14 +83,18 @@ export class KuiCodeEditor extends Component {
           <p className="kuiText kuiVerticalRhythmSmall">
             Press Enter to start editing.
           </p>
+
           <p className="kuiText kuiVerticalRhythmSmall">
             When you&rsquo;re done, press Escape to stop editing.
           </p>
         </div>
+
         <AceEditor
-          {...this.props}
           ref={this.aceEditorRef}
+          width={width}
+          height={height}
           onBlur={this.onBlurAce}
+          {...rest}
         />
       </div>
     );
@@ -91,7 +102,7 @@ export class KuiCodeEditor extends Component {
 }
 
 KuiCodeEditor.propTypes = {
+  width: PropTypes.string,
   height: PropTypes.string,
   onBlur: PropTypes.func,
-  width: PropTypes.string,
 };