IE11 Cross Browser Testing (#612)

* Transpile jest-circus for IE11

* Add ansi-styles

* Fix typo

* Transpile everything of jest

* Fix webpack config

* Fix symbol error

* Add BrowserStack testing

* Fix browserstack local functionality

* Path fix

* Update test name

* Jest set min timeout

* test updates

* Change port to 3002 to fix BrowserStack

* Add BrowserStack badge

* Relax timeout for integration tests

* Fix formatting

* Remove map requirement in worker

* Change test to iPhone 6

* Update ios

* Increase sleep timeout to make sure everything started

* use flows for parallel tests

* Run tests in sequence

* Fix browser name

* Change iPhone and increase max timeout

* Skip ios for now

Author: CompuIves

.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"

README.md

@@ -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/config/webpack.common.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/BrowserStackLocal

@@ -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/integration-tests/browser-tests/browsers.test.js

@@ -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/integration-tests/tests/sandboxes.test.js

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

packages/app/package.json

@@ -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/scripts/start.js

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