Allows opening tests by default with share link (codesandbox#959)

* Share TestsView works 🎉

* Add docs for previewWindow

* Add satyarohith to contributors

* Support Embed

* Update 2-embedding.md

Author: Satya Rohith

.all-contributorsrc

@@ -593,6 +593,16 @@
         "bug",
         "code"
       ]
+    },
+    {
+      "login": "satyarohith",
+      "name": "Satya Rohith",
+      "avatar_url": "https://avatars2.githubusercontent.com/u/29819102?v=4",
+      "profile": "https://satya.tech",
+      "contributions": [
+        "code",
+        "doc"
+      ]
     }
   ],
   "repoType": "github"

README.md

@@ -51,4 +51,6 @@ Thanks goes to these wonderful people
 | [<img src="https://avatars2.githubusercontent.com/u/10588170?v=4" width="100px;"/><br /><sub><b>Ilya</b></sub>](https://twitter.com/ilya_komar0ff)<br />[💬](#question-Komar0ff "Answering Questions") [🤔](#ideas-Komar0ff "Ideas, Planning, & Feedback") | [<img src="https://avatars2.githubusercontent.com/u/10627086?v=4" width="100px;"/><br /><sub><b>Emerson Laurentino</b></sub>](https://twitter.com/elaurent_)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=emersonlaurentino "Code") [🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3Aemersonlaurentino "Bug reports") | [<img src="https://avatars3.githubusercontent.com/u/180963?v=4" width="100px;"/><br /><sub><b>Aaron Reisman</b></sub>](https://github.com/lifeiscontent)<br />[🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3Alifeiscontent "Bug reports") [💻](https://github.com/CompuIves/codesandbox-client/commits?author=lifeiscontent "Code") [📦](#platform-lifeiscontent "Packaging/porting to new platform") |
 | [<img src="https://avatars2.githubusercontent.com/u/10588170?v=4" width="100px;"/><br /><sub><b>Ilya</b></sub>](https://twitter.com/ilya_komar0ff)<br />[💬](#question-Komar0ff "Answering Questions") [🤔](#ideas-Komar0ff "Ideas, Planning, & Feedback") | [<img src="https://avatars2.githubusercontent.com/u/10627086?v=4" width="100px;"/><br /><sub><b>Emerson Laurentino</b></sub>](https://twitter.com/elaurent_)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=emersonlaurentino "Code") [🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3Aemersonlaurentino "Bug reports") | [<img src="https://avatars2.githubusercontent.com/u/19484365?v=4" width="100px;"/><br /><sub><b>Colton Colcleasure</b></sub>](https://github.com/colshacol)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=colshacol "Code") |
 | [<img src="https://avatars2.githubusercontent.com/u/10588170?v=4" width="100px;"/><br /><sub><b>Ilya</b></sub>](https://twitter.com/ilya_komar0ff)<br />[💬](#question-Komar0ff "Answering Questions") [🤔](#ideas-Komar0ff "Ideas, Planning, & Feedback") | [<img src="https://avatars2.githubusercontent.com/u/10627086?v=4" width="100px;"/><br /><sub><b>Emerson Laurentino</b></sub>](https://twitter.com/elaurent_)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=emersonlaurentino "Code") [🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3Aemersonlaurentino "Bug reports") | [<img src="https://avatars2.githubusercontent.com/u/19484365?v=4" width="100px;"/><br /><sub><b>Colton Colcleasure</b></sub>](https://github.com/colshacol)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=colshacol "Code") [🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3Acolshacol "Bug reports") | [<img src="https://avatars0.githubusercontent.com/u/497242?v=4" width="100px;"/><br /><sub><b>PJ Walker</b></sub>](https://github.com/PJWalker)<br />[🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3APJWalker "Bug reports") [💻](https://github.com/CompuIves/codesandbox-client/commits?author=PJWalker "Code") |
+| [<img src="https://avatars2.githubusercontent.com/u/10588170?v=4" width="100px;"/><br /><sub><b>Ilya</b></sub>](https://twitter.com/ilya_komar0ff)<br />[💬](#question-Komar0ff "Answering Questions") [🤔](#ideas-Komar0ff "Ideas, Planning, & Feedback") | [<img src="https://avatars2.githubusercontent.com/u/10627086?v=4" width="100px;"/><br /><sub><b>Emerson Laurentino</b></sub>](https://twitter.com/elaurent_)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=emersonlaurentino "Code") [🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3Aemersonlaurentino "Bug reports") | [<img src="https://avatars2.githubusercontent.com/u/19484365?v=4" width="100px;"/><br /><sub><b>Colton Colcleasure</b></sub>](https://github.com/colshacol)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=colshacol "Code") |
+| [<img src="https://avatars2.githubusercontent.com/u/10588170?v=4" width="100px;"/><br /><sub><b>Ilya</b></sub>](https://twitter.com/ilya_komar0ff)<br />[💬](#question-Komar0ff "Answering Questions") [🤔](#ideas-Komar0ff "Ideas, Planning, & Feedback") | [<img src="https://avatars2.githubusercontent.com/u/10627086?v=4" width="100px;"/><br /><sub><b>Emerson Laurentino</b></sub>](https://twitter.com/elaurent_)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=emersonlaurentino "Code") [🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3Aemersonlaurentino "Bug reports") | [<img src="https://avatars2.githubusercontent.com/u/29819102?v=4" width="100px;"/><br /><sub><b>Satya Rohith</b></sub>](https://satya.tech)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=satyarohith "Code") [📖](https://github.com/CompuIves/codesandbox-client/commits?author=satyarohith "Documentation") |
 <!-- ALL-CONTRIBUTORS-LIST:END -->

packages/app/src/app/pages/common/Modals/ShareModal/index.js

@@ -34,6 +34,7 @@ class ShareView extends React.Component {
   state = {
     showEditor: true,
     showPreview: true,
+    testsView: false,
     defaultModule: null,
     autoResize: false,
     hideNavigation: false,
@@ -78,6 +79,7 @@ class ShareView extends React.Component {
       defaultModule,
       showEditor,
       showPreview,
+      testsView,
       autoResize,
       hideNavigation,
       isCurrentModuleView,
@@ -107,10 +109,13 @@ class ShareView extends React.Component {
       options.view = 'preview';
     }
 
+    if (testsView) {
+      options.previewwindow = 'tests';
+    }
+
     if (autoResize) {
       options.autoresize = 1;
     }
-
     if (hideNavigation) {
       options.hidenavigation = 1;
     }
@@ -208,13 +213,18 @@ class ShareView extends React.Component {
 
   setFontSize = (fontSize: number) => [this.setState({ fontSize })];
 
+  setTestsView = (testsView: boolean) => {
+    this.setState({ testsView });
+  };
+
   render() {
     const sandbox = this.props.store.editor.currentSandbox;
     const mainModule = this.props.store.editor.mainModule;
 
     const {
       showEditor,
       showPreview,
+      testsView,
       autoResize,
       hideNavigation,
       isCurrentModuleView,
@@ -274,6 +284,12 @@ class ShareView extends React.Component {
                 value={isCurrentModuleView}
                 setValue={this.setIsCurrentModuleView}
               />
+              <PaddedPreference
+                title="Show Tests (instead of browser preview)"
+                type="boolean"
+                value={testsView}
+                setValue={this.setTestsView}
+              />
               <PaddedPreference
                 title="Font size"
                 type="number"

packages/app/src/app/store/actions.js

@@ -101,6 +101,9 @@ export function setUrlOptions({ state, router, utils }) {
     state.set('preferences.showDevtools', options.expandDevTools);
   if (options.runOnClick)
     state.set(`preferences.runOnClick`, options.runOnClick);
+  if (options.previewWindow) {
+    state.set('editor.previewWindow.content', options.previewWindow);
+  }
 }
 
 export const setSandboxConfigOptions = ({ state }) => {

packages/app/src/app/store/sequences.js

@@ -297,8 +297,8 @@ export const setSandbox = [
   actions.setCurrentModuleShortid,
   actions.setMainModuleShortid,
   actions.setInitialTab,
-  actions.setUrlOptions,
   actions.setSandboxConfigOptions,
+  actions.setUrlOptions,
   actions.setWorkspace,
 ];
 

packages/app/src/embed/components/App/index.js

@@ -30,6 +30,7 @@ type State = {
   fontSize: number,
   showEditor: boolean,
   showPreview: boolean,
+  previewWindow: string,
   isInProjectView: boolean,
   currentModule: string,
   initialPath: string,
@@ -65,6 +66,7 @@ export default class App extends React.PureComponent<{}, State> {
       isInProjectView,
       isPreviewScreen,
       isEditorScreen,
+      previewWindow,
       isSplitScreen,
       autoResize,
       hideNavigation,
@@ -85,6 +87,7 @@ export default class App extends React.PureComponent<{}, State> {
       fontSize: fontSize || 16,
       showEditor: isSplitScreen || isEditorScreen,
       showPreview: isSplitScreen || isPreviewScreen,
+      previewWindow,
       isInProjectView,
       currentModule,
       initialPath,
@@ -216,6 +219,7 @@ export default class App extends React.PureComponent<{}, State> {
       showEditor,
       verticalMode,
       showPreview,
+      previewWindow,
       isInProjectView,
       runOnClick,
     } = this.state;
@@ -239,6 +243,7 @@ export default class App extends React.PureComponent<{}, State> {
           <Content
             showEditor={showEditor}
             showPreview={showPreview}
+            previewWindow={previewWindow}
             isInProjectView={isInProjectView}
             setProjectView={this.setProjectView}
             sandbox={sandbox}

packages/app/src/embed/components/Content/index.js

@@ -34,6 +34,7 @@ type EmbedError = {
 type Props = {
   showEditor: boolean,
   showPreview: boolean,
+  previewWindow: string,
   isInProjectView: boolean,
   setProjectView: (sandboxId?: ?string, isOpen: boolean, cb: Function) => void,
   sandbox: Sandbox,
@@ -298,6 +299,7 @@ export default class Content extends React.PureComponent<Props, State> {
       sandbox,
       showEditor,
       showPreview,
+      previewWindow,
       currentModule,
       hideNavigation,
       isInProjectView,
@@ -315,8 +317,11 @@ export default class Content extends React.PureComponent<Props, State> {
     const sandboxConfig = sandbox.modules.find(
       x => x.directoryShortid == null && x.title === 'sandbox.config.json'
     );
+
     let view = 'browser';
-    if (sandboxConfig) {
+    if (previewWindow) {
+      view = previewWindow;
+    } else if (sandboxConfig) {
       try {
         view = JSON.parse(sandboxConfig.code || '').view || 'browser';
       } catch (e) {

packages/common/url.js

@@ -35,6 +35,16 @@ export const getSandboxOptions = (url: string) => {
   result.isEditorScreen = url.includes('view=editor');
   result.isSplitScreen = url.includes('view=split');
 
+  result.isTestPreviewWindow = url.includes('previewwindow=tests');
+  result.isConsolePreviewWindow = url.includes('previewwindow=console');
+
+  if (result.isTestPreviewWindow && !result.isConsolePreviewWindow) {
+    result.previewWindow = 'tests';
+  }
+
+  if (!result.isTestPreviewWindow && result.isConsolePreviewWindow) {
+    result.previewWindow = 'console';
+  }
   // If there is no view specified and the width of the window is <800 we want
   // to default to preview
   if (

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

@@ -42,6 +42,7 @@ find them here.
 | `expanddevtools` | Start with the devtools (console) open.                                       | `0`/`1`                              | `0`                                  |
 | `runonclick`     | Only load the preview when the user says so.                                  | `0`/`1`                              | `0`                                  |
 | `view`           | Which view to open by default                                                 | `editor`/`split`/`preview`           | `split`, `preview` for small screens |
+| `previewwindow`  | Which preview window to open by default                                       | `console`/`tests`/`browser`          | `browser`                            |
 | `module`         | Which module to open by default                                               | path to module (starting with `/`)   | entry path                           |
 | `initialpath`    | Which url to initially load in address bar                                    | string                               | `/`                                  |
 | `fontsize`       | Font size of editor                                                           | number (in px)                       | `14`                                 |