Transpile jest-circus for IE11

.circleci/config.yml

@@ -72,10 +72,14 @@ jobs:
           name: Start Test Server
           command: yarn start:test
           background: true
+      - run:
+          name: Setup BrowserStack local environment
+          command: ./packages/app/integration-tests/BrowserStackLocal --key $BROWSER_STACK_KEY
+          background: true
       - run:
           name: Test Integrations
           command: |
-            sleep 6
+            sleep 10
             yarn test:integrations --ci --testResultsProcessor="jest-junit"
           environment:
             JEST_JUNIT_OUTPUT: "/tmp/test-results/js-test-results.xml"

packages/app/config/webpack.common.js

@@ -85,6 +85,31 @@ module.exports = {
         loader: 'happypack/loader',
       },
 
+      // Transpile node dependencies, node deps are often not transpiled for IE11
+      {
+        test: [/\/node_modules\/.*ansi-styles/, /\/node_modules\/.*jest/],
+        loader: 'babel-loader',
+        query: {
+          presets: [
+            [
+              'env',
+              {
+                targets: {
+                  ie: 11,
+                },
+              },
+            ],
+            'react',
+          ],
+          plugins: [
+            'transform-async-to-generator',
+            'transform-object-rest-spread',
+            'transform-class-properties',
+            'transform-runtime',
+          ],
+        },
+      },
+
       // `eslint-plugin-vue/lib/index.js` depends on `fs` module we cannot use in browsers, so needs shimming.
       {
         test: new RegExp(

packages/app/integration-tests/browser-tests/browsers.test.js

@@ -0,0 +1,112 @@
+const webdriver = require('selenium-webdriver');
+
+function getCapabilities(browserInfo) {
+  return {
+    ...browserInfo,
+    'browserstack.user': process.env.BROWSER_STACK_USER,
+    'browserstack.key': process.env.BROWSER_STACK_KEY,
+    'browserstack.local': 'true',
+  };
+}
+
+function getDriver(capabilities) {
+  return new webdriver.Builder()
+    .usingServer('http://hub-cloud.browserstack.com/wd/hub')
+    .withCapabilities(capabilities)
+    .build();
+}
+
+function testPageWitCapabilities(capabilities) {
+  const driver = getDriver(getCapabilities(capabilities));
+  // Test if a sandbox can be loaded on IE11
+  return driver.get('http://localhost:3002/#new').then(async () => {
+    const element = webdriver.By.css('h1');
+    await driver.wait(webdriver.until.elementLocated(element), 60000);
+    driver.quit();
+  });
+}
+
+describe('browser-tests', () => {
+  test(
+    'ie11',
+    async () => {
+      // Input capabilities
+      const capabilities = {
+        browserName: 'IE',
+        browser_version: '11.0',
+        os: 'Windows',
+        os_version: '10',
+        resolution: '1024x768',
+      };
+
+      await testPageWitCapabilities(capabilities);
+    },
+    130000
+  );
+
+  test.skip(
+    'ios',
+    async () => {
+      // Input capabilities
+      const capabilities = {
+        browserName: 'iPhone',
+        device: 'iPhone SE',
+        realMobile: 'true',
+        os_version: '11.2',
+      };
+
+      await testPageWitCapabilities(capabilities);
+    },
+    130000
+  );
+
+  test(
+    'firefox',
+    async () => {
+      // Input capabilities
+      const capabilities = {
+        browserName: 'Firefox',
+        browser_version: '58.0',
+        os: 'Windows',
+        os_version: '10',
+        resolution: '1024x768',
+      };
+
+      await testPageWitCapabilities(capabilities);
+    },
+    130000
+  );
+
+  test(
+    'safari',
+    async () => {
+      // Input capabilities
+      const capabilities = {
+        browserName: 'Safari',
+        browser_version: '10.0',
+        os: 'OS X',
+        os_version: 'Sierra',
+        resolution: '1024x768',
+      };
+
+      await testPageWitCapabilities(capabilities);
+    },
+    130000
+  );
+
+  test(
+    'android',
+    async () => {
+      // Input capabilities
+      const capabilities = {
+        browserName: 'android',
+        device: 'Samsung Galaxy S8',
+        realMobile: 'true',
+        os_version: '7.0',
+      };
+
+      await testPageWitCapabilities(capabilities);
+    },
+    130000
+  );
+});

packages/app/integration-tests/tests/sandboxes.test.js

@@ -57,7 +57,7 @@ describe('sandboxes', () => {
         browser = await browser;
         const page = await browser.newPage();
         const waitFunction = pageLoaded(page);
-        page.goto('http://localhost:3001/#' + id, {
+        page.goto('http://localhost:3002/#' + id, {
           timeout: 60000,
         });
         await waitFunction;

packages/app/package.json

@@ -75,6 +75,7 @@
     "recursive-readdir": "^2.2.1",
     "rimraf": "^2.6.1",
     "run-sequence": "^1.2.2",
+    "selenium-webdriver": "^4.0.0-alpha.1",
     "strip-ansi": "3.0.1",
     "style-loader": "^0.18.2",
     "sw-precache-webpack-plugin": "^0.11.4",

packages/app/scripts/start.js

@@ -262,7 +262,7 @@ function run(port) {
           });
         }
       })
-      .listen(3001);
+      .listen(3002);
   }
 }
 

packages/app/src/app/pages/Sandbox/Editor/Header/Logo/index.js

@@ -5,7 +5,7 @@ import LogoIcon from 'common/components/Logo';
 import { Container, Title } from './elements';
 
 export default ({ title }) => (
-  <Container href="/">
+  <Container id="logo" href="/">
     <div style={{ position: 'relative', display: 'flex' }}>
       <LogoIcon title="CodeSandbox" width={30} height={30} />
     </div>

packages/app/src/app/pages/Sandbox/Editor/Workspace/index.js

@@ -61,6 +61,7 @@ function Workspace({ store }) {
                 fontWeight: 600,
                 color: 'rgba(255, 255, 255, 0.3)',
               }}
+              className="codesandbox-version"
             >
               {VERSION}
             </div>

packages/app/src/sandbox/eval/transpilers/sass/sass-worker.js

@@ -82,14 +82,14 @@ const existsPromise = (fs, file) =>
     });
   });
 
-const pathCaches = new Map();
+let pathCaches = {};
 const getExistingPath = async (fs, p) => {
   if (p.endsWith('.json')) {
     return false;
   }
 
-  if (pathCaches.get(p)) {
-    return pathCaches.get(p);
+  if (pathCaches[p]) {
+    return pathCaches[p];
   }
 
   const possiblePaths = Sass.getPathVariations(p);
@@ -102,7 +102,7 @@ const getExistingPath = async (fs, p) => {
     }
   }
 
-  pathCaches.set(p, existedFile);
+  pathCaches[p] = existedFile;
 
   return existedFile;
 };
@@ -197,7 +197,7 @@ self.addEventListener('message', async event => {
     }
   }
 
-  pathCaches.clear();
+  pathCaches = {};
   Sass._path = '/';
   Sass.clearFiles();
 

packages/common/utils/url-generator.js

@@ -76,7 +76,7 @@ export const frameUrl = (shortid: string, append: string = '') => {
   const path = append.indexOf('/') === 0 ? append.substr(1) : append;
 
   if (process.env.LOCAL_SERVER) {
-    return `http://localhost:3001/${path}`;
+    return `http://localhost:3002/${path}`;
   }
 
   if (process.env.STAGING) {

yarn.lock

@@ -13934,6 +13934,15 @@ select@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/select/-/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d"
 
+selenium-webdriver@^4.0.0-alpha.1:
+  version "4.0.0-alpha.1"
+  resolved "https://registry.yarnpkg.com/selenium-webdriver/-/selenium-webdriver-4.0.0-alpha.1.tgz#cc93415e21d2dc1dfd85dfc5f6b55f3ac53933b1"
+  dependencies:
+    jszip "^3.1.3"
+    rimraf "^2.5.4"
+    tmp "0.0.30"
+    xml2js "^0.4.17"
+
 selfsigned@^1.9.1:
   version "1.10.2"
   resolved "https://registry.yarnpkg.com/selfsigned/-/selfsigned-1.10.2.tgz#b4449580d99929b65b10a48389301a6592088758"
@@ -15322,6 +15331,12 @@ tinycolor2@^1.1.2:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.1.tgz#f4fad333447bc0b07d4dc8e9209d8f39a8ac77e8"
 
+tmp@0.0.30:
+  version "0.0.30"
+  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.30.tgz#72419d4a8be7d6ce75148fd8b324e593a711c2ed"
+  dependencies:
+    os-tmpdir "~1.0.1"
+
 tmp@^0.0.29:
   version "0.0.29"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.29.tgz#f25125ff0dd9da3ccb0c2dd371ee1288bb9128c0"
@@ -16858,7 +16873,7 @@ xml2js@0.4.17:
     sax ">=0.6.0"
     xmlbuilder "^4.1.0"
 
-xml2js@^0.4.5:
+xml2js@^0.4.17, xml2js@^0.4.5:
   version "0.4.19"
   resolved "https://registry.yarnpkg.com/xml2js/-/xml2js-0.4.19.tgz#686c20f213209e94abf0d1bcf1efaa291c7827a7"
   dependencies: