normalize a bit more the error messages

mui · Mar 22, 2020 · dd0f694 · dd0f694
1 parent 11bc268
commit dd0f694
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 30 deletions.
diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js b/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { expect } from 'chai';
 import { createMount, getClasses } from '@material-ui/core/test-utils';
 import describeConformance from '@material-ui/core/test-utils/describeConformance';
-import consoleErrorMock from 'test/utils/consoleErrorMock';
+import consoleErrorMock, { consoleWarnMock } from 'test/utils/consoleErrorMock';
 import { spy } from 'sinon';
 import { createClientRender, fireEvent } from 'test/utils/createClientRender';
 import { createFilterOptions } from '../useAutocomplete/useAutocomplete';
@@ -775,18 +775,14 @@ describe('<Autocomplete />', () => {
   });
 
   describe('warnings', () => {
-    let consoleWarnContainer = null;
-
     beforeEach(() => {
       consoleErrorMock.spy();
-      consoleWarnContainer = console.warn;
-      console.warn = spy();
+      consoleWarnMock.spy();
     });
 
     afterEach(() => {
       consoleErrorMock.reset();
-      console.warn = consoleWarnContainer;
-      consoleWarnContainer = null;
+      consoleWarnMock.reset();
     });
 
     it('warn if getOptionLabel do not return a string', () => {
@@ -856,9 +852,9 @@ describe('<Autocomplete />', () => {
         />,
       );
 
-      expect(console.warn.callCount).to.equal(4);
-      expect(console.warn.args[0][0]).to.include(
-        'Material-UI: you have provided an out-of-range value `"not a good value"` for the autocomplete component.',
+      expect(consoleWarnMock.callCount()).to.equal(4);
+      expect(consoleWarnMock.messages()[0]).to.include(
+        'None of the options match with `"not a good value"`',
       );
     });
   });

diff --git a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
@@ -200,10 +200,9 @@ export default function useAutocomplete(props) {
           const erroneousReturn =
             optionLabel === undefined ? 'undefined' : `${typeof optionLabel} (${optionLabel})`;
           console.error(
-            [
-              `Material-UI: the \`getOptionLabel\` method of ${componentName} returned ${erroneousReturn} instead of a string for`,
-              JSON.stringify(newValue),
-            ].join('\n'),
+            `Material-UI: the \`getOptionLabel\` method of ${componentName} returned ${erroneousReturn} instead of a string for ${JSON.stringify(
+              newValue,
+            )}.`,
           );
         }
       }
@@ -265,15 +264,12 @@ export default function useAutocomplete(props) {
       if (missingValue.length > 0) {
         console.warn(
           [
-            `Material-UI: you have provided an out-of-range value${
-              missingValue.length > 1 ? 's' : ''
-            } \`${
+            `Material-UI: the value provided to ${componentName} is invalid.`,
+            `None of the options match with \`${
               missingValue.length > 1
                 ? JSON.stringify(missingValue)
                 : JSON.stringify(missingValue[0])
-            }\` for the autocomplete ${id ? `(id="${id}") ` : ''}component.`,
-            '',
-            'Consider providing a value that matches one of the available options.',
+            }\`.`,
             'You can use the `getOptionSelected` prop to customize the equality test.',
           ].join('\n'),
         );

diff --git a/packages/material-ui/src/Tabs/Tabs.js b/packages/material-ui/src/Tabs/Tabs.js
@@ -153,8 +153,8 @@ const Tabs = React.forwardRef(function Tabs(props, ref) {
           if (!tab) {
             console.error(
               [
-                `Material-UI: the value provided \`${value}\` to the Tabs component is invalid.`,
-                'None of the Tabs children have this value.',
+                `Material-UI: the value provided to the Tabs component is invalid.`,
+                `None of the Tabs' children match with \`${value}\`.`,
                 valueToIndex.keys
                   ? `You can provide one of the following values: ${Array.from(
                       valueToIndex.keys(),

diff --git a/test/utils/consoleErrorMock.js b/test/utils/consoleErrorMock.js
@@ -14,22 +14,26 @@ import { spy } from 'sinon';
  *   warning.restore();
  * });
  */
-class ConsoleErrorMock {
+export class ConsoleMock {
   consoleErrorContainer;
 
+  constructor(methodName) {
+    this.methodName = methodName;
+  }
+
   spy = () => {
-    this.consoleErrorContainer = console.error;
-    console.error = spy();
+    this.consoleErrorContainer = console[this.methodName];
+    console[this.methodName] = spy();
   };
 
   reset = () => {
-    console.error = this.consoleErrorContainer;
+    console[this.methodName] = this.consoleErrorContainer;
     delete this.consoleErrorContainer;
   };
 
   callCount = () => {
     if (this.consoleErrorContainer) {
-      return console.error.callCount;
+      return console[this.methodName].callCount;
     }
 
     throw new Error('Requested call count before spy() was called');
@@ -45,7 +49,7 @@ class ConsoleErrorMock {
   /**
    * returns the formatted message for each call
    *
-   * you could call console.error("type %s", "foo") which would log
+   * you could call console[this.methodName]("type %s", "foo") which would log
    * "type foo". If you  want to assert on the actual message use messages() instead
    */
   messages = () => {
@@ -56,11 +60,13 @@ class ConsoleErrorMock {
     /**
      * @type {import('sinon').SinonSpy}
      */
-    const consoleSpy = console.error;
+    const consoleSpy = console[this.methodName];
     return consoleSpy.args.map((loggerArgs) => {
       return utilFormat(...loggerArgs);
     });
   };
 }
 
-export default new ConsoleErrorMock();
+export const consoleWarnMock = new ConsoleMock('warn');
+
+export default new ConsoleMock('error');