implement view snapshot button (#197)

This commit implements issue #186. I can't know if there is a snapshot
for each but I can add a button to the summary that opens the snapshot
for the file in the code editor. That's what this commit does. It adds
the button to the UI and a mutation to send to the server to open the
snapshot in the editor.
And it implements issue #191. There was already a button for generating
a snapshot, but it was only visible when there was a detected snapshot
error. This caused us to have to run known failing tests before we could
get the button to generate the snapshots. Now the button is there all
the time, so if you know your snapshots are out of date, then you can
generate them immediately and save time.

Co-authored-by: Greg Veres <greg.veres@rogers.com>

server/api/app/resolver.ts

@@ -3,6 +3,7 @@ import * as launch from "launch-editor";
 import { App } from "./app";
 import FileWatcher, { WatcherEvents } from "../../services/file-watcher";
 import { pubsub } from "../../event-emitter";
+import { dirname, basename } from "path";
 
 @Resolver(App)
 export default class AppResolver {
@@ -45,7 +46,20 @@ export default class AppResolver {
     return "";
   }
 
+ @Mutation(returns => String)
+  openSnapInEditor(@Arg("path") path: string) {
+    var dir = dirname(path)
+    var file = basename(path);
+
+    var snap = dir + '/__snapshots__/' + file + '.snap'
+    console.log("opening the snapshot:", snap);
+    this.openInEditor(snap);
+
+    return "";
+  }
+
   @Mutation(returns => String)
+
   openFailure(@Arg("failure") failure: string) {
     // The following regex matches the first line of the form: \w at <some text> (<file path>)
     // it captures <file path> and returns that in the second position of the match array

ui/test-file/index.tsx

@@ -95,14 +95,6 @@ function TestFile({ selectedFilePath, isRunning, projectRoot, onStop }: Props) {
 
   const isUpdating = isRunning && (result ===  null ||(result.numPassingTests === 0 && result.numFailingTests === 0));
 
-  const haveSnapshotFailures = ((result && result.testResults) || []).some(
-    testResult => {
-      return (testResult.failureMessages || []).some(failureMessage =>
-        failureMessage.includes("toMatchSnapshot")
-      );
-    }
-  );
-
   const roots = (fileItemResult.items || []).filter(
     item => item.parent === null
   );
@@ -123,7 +115,6 @@ function TestFile({ selectedFilePath, isRunning, projectRoot, onStop }: Props) {
         isRunning={isRunning}
         isUpdating={isUpdating}
         isLoadingResult={loading}
-        haveSnapshotFailures={haveSnapshotFailures}
         onRun={() => {
           runFile();
         }}

ui/test-file/summary/index.tsx

@@ -11,10 +11,12 @@ import {
   CheckCircle,
   Frown,
   ZapOff,
-  Circle
+  Circle,
+  Eye
 } from "react-feather";
 import Button from "../../components/button";
 import OPEN_IN_EDITOR from "./open-in-editor.gql";
+import OPEN_SNAP_IN_EDITOR from "./open-snap-in-editor.gql";
 import { Tooltip } from "react-tippy";
 import { useMutation } from "react-apollo-hooks";
 
@@ -130,7 +132,6 @@ export default function FileSummary({
   onRun,
   onStop,
   onSnapshotUpdate,
-  haveSnapshotFailures
 }: Props) {
   const Icon = isRunning ? StopCircle : Play;
 
@@ -140,6 +141,12 @@ export default function FileSummary({
     }
   });
 
+  const openSnapshotInEditor = useMutation(OPEN_SNAP_IN_EDITOR, {
+    variables: {
+      path
+    }
+  });
+
   return (
     <Container p={4} bg="slightDark">
       {( isUpdating || isLoadingResult) && <ContainerBG />}
@@ -191,9 +198,8 @@ export default function FileSummary({
             }}
           />
         </Tooltip>
-        {haveSnapshotFailures && (
           <Tooltip
-            title="Update all snapshots of the file"
+            title="Update all snapshots for this file"
             position="bottom"
             size="small"
           >
@@ -207,7 +213,15 @@ export default function FileSummary({
               Update Snapshot
             </Button>
           </Tooltip>
-        )}
+        <Tooltip title="Open snapshot in editor" size="small" position="bottom">
+          <Button
+            icon={<Eye size={14} />}
+            minimal
+            onClick={() => {
+              openSnapshotInEditor();
+            }}
+          />
+        </Tooltip>
       </ActionPanel>
     </Container>
   );

ui/test-file/summary/open-snap-in-editor.gql

@@ -0,0 +1,3 @@
+mutation OpenSnapInEditor($path: String!) {
+  openSnapInEditor(path: $path)
+}