Add test documentation

Author: Ives van Hoorne

packages/homepage/content/docs/2-git.md

@@ -1,5 +1,5 @@
 ---
-title: "Git Integration"
+title: "Git Committing and PRs"
 authors: ["CompuIves"]
 description: "CodeSandbox allows you to import, commit and make a pull requests to GitHub repositories."
 ---

packages/homepage/content/docs/2-live.md

@@ -1,5 +1,5 @@
 ---
-title: "CodeSandbox Live"
+title: "Collaboration with Live"
 authors: ["CompuIves"]
 description: "With CodeSandbox Live you can open up your sandbox for real time collaboration."
 ---
@@ -8,21 +8,21 @@ description: "With CodeSandbox Live you can open up your sandbox for real time c
 
 ![Live Sidebar](./images/live-screenshot.png)
 
-Live is a mode in CodeSandbox that allows you to share your sandbox with others for real time collaboration. You can access Live with the Live tab in the sidebar:
+Live is a mode in CodeSandbox that allows you to share your sandbox with others for real time collaboration. You can simultaneously create, delete, edit and move files in real time. It's like Google Docs, but for your code! You can access Live under the Live tab in the sidebar:
 
 ![Live Sidebar](./images/live-sidebar.png)
 
 ## Demo
 
 We recorded a demo to show what CodeSandbox Live exactly is, you can watch it here:
 
-`youtube:https://www.youtube.com/embed/DnnJ0sLn28s`
+<iframe width="740" height="370" src="https://www.youtube.com/embed/DnnJ0sLn28s" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe><br />
 
 We also made an announcement blog post, which you can read [here](https://medium.com/@compuives/introducing-codesandbox-live-real-time-code-collaboration-in-the-browser-6d508cfc70c9).
 
 ## Going Live
 
-You can go live by simply pressing the 'Go Live' button in the sidebar. This will give you a URL that you can share with others to join the session.
+You can go live by simply pressing the 'Go Live' button in the sidebar. This will give you a URL that you can share with others to join the session. Others can only make edits to the sandbox while they are in the live session, they cannot do this when just viewing the sandbox.
 
 ![Going Live](./images/live-live.png)
 

packages/homepage/content/docs/2-tests.md

@@ -0,0 +1,37 @@
+---
+title: "Jest Tests"
+authors: ["CompuIves"]
+description: "CodeSandbox has a native integration with Jest Tests for running tests."
+---
+
+## What is Jest
+
+Jest is a zero configuration test runner that allows you easily write JavaScript tests without setting anything up. For more info on Jest you can look [here](https://facebook.github.io/jest/).
+
+## How to use Jest in CodeSandbox
+
+You can run Jest tests by creating files that and with `.test.js`, `.spec.js`, `.test.ts(x)` and `.spec.js(x)`. We will automatically detect these test files and show the results in the bottom bar.
+
+![Test Bottom](./images/jest-tests.png)
+
+You can also open the test view instead of the browser preview by clicking on the 'Show Tests' icon in the top right.
+
+![Show Tests](./images/show-tests.png)
+
+The left side of the test view is an overview of all test files. The right side shows the details of a file when you select it.
+
+![Test Details](./images/jest-details.png)
+
+You can decide to rerun tests manually by clicking on the Play icon. We automatically watch for file changes, you can disable this by clicking on the 'Refresh' icon on the left side.
+
+## Test Failures
+
+We show failed tests in two ways: in the test overview and in the code editor itself.
+
+A failed test looks like this in the Test View:
+
+![Test Error](./images/jest-error-overview.png)
+
+And will also show squiggles in the editor:
+
+![Test Squiggles](./images/jest-squiggles.png)

packages/homepage/content/docs/images/jest-details.png

@@ -3,6 +3,7 @@ import styled, { css } from 'styled-components';
 import theme from 'common/theme';
 
 import Link from 'gatsby-link';
+import { Route } from 'react-router-dom';
 import slugify from 'common/utils/slugify';
 
 import media from '../utils/media';
@@ -11,7 +12,7 @@ import getScrollPos from '../utils/scroll';
 const Navigation = styled.nav`
   padding-top: 2rem;
   margin-right: 1rem;
-  width: 250px;
+  width: 300px;
 
   ${props =>
     props.fixed &&
@@ -166,18 +167,24 @@ export default class StickyNavigation extends React.PureComponent<Props> {
               >
                 {node.frontmatter.title}
               </PrimaryNavigationLink>
-              <ul>
-                {node.headings.map(({ value }) => (
-                  <li key={value}>
-                    <SecondaryNavigationLink
-                      to={`${node.fields.url}#${slugify(value)}`}
-                      exact
-                    >
-                      {value}
-                    </SecondaryNavigationLink>
-                  </li>
-                ))}
-              </ul>
+              <Route
+                path={node.fields.url}
+                exact
+                render={() => (
+                  <ul>
+                    {node.headings.map(({ value }) => (
+                      <li key={value}>
+                        <SecondaryNavigationLink
+                          to={`${node.fields.url}#${slugify(value)}`}
+                          exact
+                        >
+                          {value}
+                        </SecondaryNavigationLink>
+                      </li>
+                    ))}
+                  </ul>
+                )}
+              />
             </NavigationItem>
           ))}
         </ul>