[docs] Add a supported browsers section

docs/src/components/AppRouter.js

@@ -44,6 +44,13 @@ export default function AppRouter() {
             component={MarkdownDocs}
             nav
           />
+          <Route
+            title="Supported Browsers"
+            path="/getting-started/supported-browsers"
+            content={requireMarkdown('./getting-started/supported-browsers.md')}
+            component={MarkdownDocs}
+            nav
+          />
         </Route>
         <Route title="Customization" path="/customization" nav component={AppContent}>
           <Route

docs/src/pages/getting-started/supported-browsers.md

@@ -0,0 +1,4 @@
+# Supported Browsers
+
+Material-UI supports the latest, stable releases of all major browsers and platforms.
+On Windows, we support Internet Explorer 11 & Microsoft Edge.

src/Snackbar/Snackbar.spec.js

@@ -38,8 +38,7 @@ describe('<Snackbar />', () => {
       const handleRequestClose = spy();
       mount(<Snackbar open onRequestClose={handleRequestClose} message="message" />);
 
-      const event = document.createEvent('MouseEvents');
-      event.initEvent('mouseup', true, true);
+      const event = new window.Event('mouseup', { view: window, bubbles: true, cancelable: true });
       if (document.body) {
         document.body.dispatchEvent(event);
       }

src/internal/ClickAwayListener.spec.js

@@ -27,7 +27,7 @@ describe('<ClickAwayListener />', () => {
   describe('prop: onClickAway', () => {
     it('should be call when clicking away', () => {
       const handleClickAway = spy();
-      mount(
+      const wrapper = mount(
         <ClickAwayListener onClickAway={handleClickAway}><span>Hello</span></ClickAwayListener>,
       );
 
@@ -39,6 +39,7 @@ describe('<ClickAwayListener />', () => {
 
       assert.strictEqual(handleClickAway.callCount, 1);
       assert.deepEqual(handleClickAway.args[0], [event]);
+      wrapper.unmount();
     });
 
     it('should not be call when clicking inside', () => {
@@ -47,30 +48,36 @@ describe('<ClickAwayListener />', () => {
         <ClickAwayListener onClickAway={handleClickAway}><span>Hello</span></ClickAwayListener>,
       );
 
-      const event = document.createEvent('MouseEvents');
-      // TODO: replace the deprecated initEvent API. But do the work for now.
-      event.initEvent('mouseup', true, true);
+      const event = new window.Event('mouseup', { view: window, bubbles: true, cancelable: true });
       const el = findDOMNode(wrapper.instance());
       if (el) {
         el.dispatchEvent(event);
       }
 
       assert.strictEqual(handleClickAway.callCount, 0);
+      wrapper.unmount();
     });
 
     it('should not be call when defaultPrevented', () => {
       const handleClickAway = spy();
-      mount(
-        <ClickAwayListener onClickAway={handleClickAway}><span>Hello</span></ClickAwayListener>,
+      const wrapper = mount(
+        <ClickAwayListener onClickAway={handleClickAway}>
+          <ClickAwayListener onClickAway={event => event.preventDefault()}>
+            <span>Hello</span>
+          </ClickAwayListener>
+        </ClickAwayListener>,
       );
 
-      const event = document.createEvent('MouseEvents');
-      event.initEvent('mouseup', true, true);
-      event.preventDefault();
+      const event = new window.Event('mouseup', {
+        view: window,
+        bubbles: true,
+        cancelable: true,
+      });
       if (document.body) {
         document.body.dispatchEvent(event);
       }
       assert.strictEqual(handleClickAway.callCount, 0);
+      wrapper.unmount();
     });
   });
 });

src/styles/breakpoints.js

@@ -17,19 +17,19 @@ const defaultBreakpoints = {
 export default function createBreakpoints(breakpoints = defaultBreakpoints, unit = 'px', step = 1) {
   const values = keys.map(key => breakpoints[key]);
 
-  function up(name) {
+  function up(key) {
     let value;
     // min-width of xs starts at 0
-    if (name === 'xs') {
+    if (key === 'xs') {
       value = 0;
     } else {
-      value = breakpoints[name] || name;
+      value = breakpoints[key] || key;
     }
     return `@media (min-width:${value}${unit})`;
   }
 
-  function down(name) {
-    const value = breakpoints[name] || name;
+  function down(key) {
+    const value = breakpoints[key] || key;
     return `@media (max-width:${value - step / 100}${unit})`;
   }
 
@@ -42,16 +42,16 @@ export default function createBreakpoints(breakpoints = defaultBreakpoints, unit
     );
   }
 
-  function only(name) {
-    const keyIndex = keys.indexOf(name);
+  function only(key) {
+    const keyIndex = keys.indexOf(key);
     if (keyIndex === keys.length - 1) {
-      return up(name);
+      return up(key);
     }
-    return between(name, name);
+    return between(key, key);
   }
 
-  function getWidth(name) {
-    return breakpoints[name];
+  function getWidth(key) {
+    return breakpoints[key];
   }
 
   return {

src/utils/withWidth.spec.js

@@ -5,12 +5,13 @@ import { assert } from 'chai';
 import { useFakeTimers } from 'sinon';
 import { createMount, createShallow } from '../test-utils';
 import withWidth, { isWidthDown, isWidthUp } from './withWidth';
+import createBreakpoints from '../styles/breakpoints';
 
 const Empty = () => <div />;
 Empty.propTypes = {}; // Breaks the referencial transparency for testing purposes.
 const EmptyWithWidth = withWidth()(Empty);
 
-const TEST_ENV_WIDTH = 'md';
+const TEST_ENV_WIDTH = window.innerWidth > createBreakpoints().getWidth('md') ? 'md' : 'sm';
 
 describe('withWidth', () => {
   let shallow;

test/karma.conf.js

@@ -13,7 +13,7 @@ module.exports = function setKarmaConfig(config) {
     basePath: '../',
     browsers: ['PhantomJS_Sized'],
     // to avoid DISCONNECTED messages on travis
-    browserDisconnectTimeout: 60000, // default 2000
+    browserDisconnectTimeout: 120000, // default 2000
     browserDisconnectTolerance: 1, // default 0
     browserNoActivityTimeout: 300000, // default 10000
     colors: true,
@@ -112,7 +112,7 @@ module.exports = function setKarmaConfig(config) {
         'BrowserStack_Chrome',
         'BrowserStack_Firefox',
         'BrowserStack_Safari',
-        // 'BrowserStack_IE',
+        'BrowserStack_Edge',
       ]),
       plugins: baseConfig.plugins.concat(['karma-browserstack-launcher']),
       customLaunchers: Object.assign({}, baseConfig.customLaunchers, {
@@ -137,13 +137,13 @@ module.exports = function setKarmaConfig(config) {
           browser: 'safari',
           browser_version: 'latest',
         },
-        // BrowserStack_IE: {
-        //   base: 'BrowserStack',
-        //   os: 'Windows',
-        //   os_version: '10',
-        //   browser: 'edge',
-        //   browser_version: 'latest',
-        // },
+        BrowserStack_Edge: {
+          base: 'BrowserStack',
+          os: 'Windows',
+          os_version: '10',
+          browser: 'edge',
+          browser_version: 'latest',
+        },
       }),
     });
   }

yarn.lock

@@ -5020,6 +5020,10 @@ react-addons-perf@^15.4.2:
     fbjs "^0.8.4"
     object-assign "^4.1.0"
 
+react-addons-test-utils@^15.6.0:
+  version "15.6.0"
+  resolved "https://registry.yarnpkg.com/react-addons-test-utils/-/react-addons-test-utils-15.6.0.tgz#062d36117fe8d18f3ba5e06eb33383b0b85ea5b9"
+
 react-docgen@^3.0.0-beta4:
   version "3.0.0-beta5"
   resolved "https://registry.yarnpkg.com/react-docgen/-/react-docgen-3.0.0-beta5.tgz#1ae8e506f3608ef00ef1521e29ba61298605b4b1"