From 917a2ba1d664774861b8d856f06b14ee5358d0ef Mon Sep 17 00:00:00 2001
From: Rene Pfeuffer <rene.pfeuffer@cloudogu.com>
Date: Thu, 9 Jan 2020 16:31:28 +0100
Subject: [PATCH] Add story for diffs with binary files

---
 .../src/__resources__/Diff.binary.ts          |  18 ++
 .../src/__snapshots__/storyshots.test.ts.snap | 299 ++++++++++++++++++
 .../ui-components/src/repos/Diff.stories.tsx  |   5 +
 3 files changed, 322 insertions(+)
 create mode 100644 scm-ui/ui-components/src/__resources__/Diff.binary.ts

diff --git a/scm-ui/ui-components/src/__resources__/Diff.binary.ts b/scm-ui/ui-components/src/__resources__/Diff.binary.ts
new file mode 100644
index 0000000000..d11d0fcc0e
--- /dev/null
+++ b/scm-ui/ui-components/src/__resources__/Diff.binary.ts
@@ -0,0 +1,18 @@
+export default `diff --git a/Main.java b/Main.java
+index 9b5ca13..7ced845 100644
+--- a/Main.java
++++ b/Main.java
+@@ -1,5 +1,5 @@
+  class Main {
+  -    public static void main(String[] args) {
+  +    public static void main(String[] arguments) {
+    System.out.println("Expect nothing more to happen.");
+  }
+}
+diff --git a/conflict.png b/conflict.png
+new file mode 100644
+index 0000000..7c77c7f
+--- /dev/null
++++ b/conflict.png
+Binary files differ
+`;
diff --git a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
index 8034701cbd..27e3eb6da0 100644
--- a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
+++ b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
@@ -334,6 +334,305 @@ exports[`Storyshots DateFromNow Default 1`] = `
 </div>
 `;
 
+exports[`Storyshots Diff Binaries 1`] = `
+Array [
+  <div
+    className="sc-iwsKbI czQDxz panel is-size-6"
+  >
+    <div
+      className="panel-heading"
+    >
+      <div
+        className="sc-gZMcBi hiXlnL level"
+      >
+        <div
+          className="sc-gqjmRU jMyrLy level-left is-flex has-cursor-pointer"
+          onClick={[Function]}
+          title="Main.java"
+        >
+          <i
+            className="fas fa-angle-down has-text-inherit"
+          />
+          <span
+            className="sc-VigVT kUVxiT is-ellipsis-overflow is-size-6"
+          >
+            Main.java
+          </span>
+          <span
+            className="tag is-info is-outlined sc-jzJRlG fdoJSr is-rounded has-text-weight-normal"
+          >
+            modify
+          </span>
+        </div>
+        <div
+          className="sc-jTzLTM ljPywG level-right is-flex"
+        >
+          <div
+            className="field is-grouped"
+          >
+            <div
+              className="control"
+            >
+              <button
+                className="button is-default is-reduced-mobile"
+                onClick={[Function]}
+                type="button"
+              >
+                <span
+                  className="icon is-medium"
+                >
+                  <i
+                    className="fas fa-columns has-text-inherit"
+                  />
+                </span>
+                <span>
+                  diff.sideBySide
+                   
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      className="panel-block is-paddingless"
+    >
+      <table
+        className="diff diff-unified sc-cSHVUG cHkPoJ unified"
+        onMouseDown={[Function]}
+      >
+        <colgroup>
+          <col
+            className="diff-gutter-col"
+          />
+          <col
+            className="diff-gutter-col"
+          />
+          <col />
+        </colgroup>
+        <tbody
+          className="diff-decoration"
+        >
+          <tr>
+            <td
+              className="diff-decoration-content"
+              colSpan={3}
+            >
+              <span />
+            </td>
+          </tr>
+        </tbody>
+        <tbody
+          className="diff-hunk"
+        >
+          <tr
+            className="diff-line"
+          >
+            <td
+              className="diff-gutter diff-gutter-normal"
+              onMouseEnter={[Function]}
+              onMouseLeave={[Function]}
+            >
+              1
+            </td>
+            <td
+              className="diff-gutter diff-gutter-normal"
+              onMouseEnter={[Function]}
+              onMouseLeave={[Function]}
+            >
+              1
+            </td>
+            <td
+              className="diff-code diff-code-normal"
+              onMouseEnter={[Function]}
+              onMouseLeave={[Function]}
+            >
+               class Main {
+            </td>
+          </tr>
+          <tr
+            className="diff-line"
+          >
+            <td
+              className="diff-gutter diff-gutter-normal"
+              onMouseEnter={[Function]}
+              onMouseLeave={[Function]}
+            >
+              2
+            </td>
+            <td
+              className="diff-gutter diff-gutter-normal"
+              onMouseEnter={[Function]}
+              onMouseLeave={[Function]}
+            >
+              2
+            </td>
+            <td
+              className="diff-code diff-code-normal"
+              onMouseEnter={[Function]}
+              onMouseLeave={[Function]}
+            >
+               -    public static void main(String[] args) {
+            </td>
+          </tr>
+          <tr
+            className="diff-line"
+          >
+            <td
+              className="diff-gutter diff-gutter-normal"
+              onMouseEnter={[Function]}
+              onMouseLeave={[Function]}
+            >
+              3
+            </td>
+            <td
+              className="diff-gutter diff-gutter-normal"
+              onMouseEnter={[Function]}
+              onMouseLeave={[Function]}
+            >
+              3
+            </td>
+            <td
+              className="diff-code diff-code-normal"
+              onMouseEnter={[Function]}
+              onMouseLeave={[Function]}
+            >
+               +    public static void main(String[] arguments) {
+            </td>
+          </tr>
+          <tr
+            className="diff-line"
+          >
+            <td
+              className="diff-gutter diff-gutter-normal"
+              onMouseEnter={[Function]}
+              onMouseLeave={[Function]}
+            >
+              4
+            </td>
+            <td
+              className="diff-gutter diff-gutter-normal"
+              onMouseEnter={[Function]}
+              onMouseLeave={[Function]}
+            >
+              4
+            </td>
+            <td
+              className="diff-code diff-code-normal"
+              onMouseEnter={[Function]}
+              onMouseLeave={[Function]}
+            >
+                 System.out.println("Expect nothing more to happen.");
+            </td>
+          </tr>
+          <tr
+            className="diff-line"
+          >
+            <td
+              className="diff-gutter diff-gutter-normal"
+              onMouseEnter={[Function]}
+              onMouseLeave={[Function]}
+            >
+              5
+            </td>
+            <td
+              className="diff-gutter diff-gutter-normal"
+              onMouseEnter={[Function]}
+              onMouseLeave={[Function]}
+            >
+              5
+            </td>
+            <td
+              className="diff-code diff-code-normal"
+              onMouseEnter={[Function]}
+              onMouseLeave={[Function]}
+            >
+               }
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>,
+  <div
+    className="sc-iwsKbI bGoZkF panel is-size-6"
+  >
+    <div
+      className="panel-heading"
+    >
+      <div
+        className="sc-gZMcBi hiXlnL level"
+      >
+        <div
+          className="sc-gqjmRU jMyrLy level-left is-flex has-cursor-pointer"
+          onClick={[Function]}
+          title="conflict.png"
+        >
+          <span
+            className="sc-VigVT kUVxiT is-ellipsis-overflow is-size-6"
+          >
+            conflict.png
+          </span>
+          <span
+            className="tag is-info is-outlined sc-jzJRlG fdoJSr is-rounded has-text-weight-normal"
+          >
+            modify
+          </span>
+        </div>
+        <div
+          className="sc-jTzLTM ljPywG level-right is-flex"
+        >
+          <div
+            className="field is-grouped"
+          >
+            <div
+              className="control"
+            >
+              <button
+                className="button is-default is-reduced-mobile"
+                onClick={[Function]}
+                type="button"
+              >
+                <span
+                  className="icon is-medium"
+                >
+                  <i
+                    className="fas fa-columns has-text-inherit"
+                  />
+                </span>
+                <span>
+                  diff.sideBySide
+                   
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      className="panel-block is-paddingless"
+    >
+      <table
+        className="diff diff-unified sc-cSHVUG cHkPoJ unified"
+        onMouseDown={[Function]}
+      >
+        <colgroup>
+          <col
+            className="diff-gutter-col"
+          />
+          <col
+            className="diff-gutter-col"
+          />
+          <col />
+        </colgroup>
+      </table>
+    </div>
+  </div>,
+]
+`;
+
 exports[`Storyshots Diff Collapsed 1`] = `
 Array [
   <div
diff --git a/scm-ui/ui-components/src/repos/Diff.stories.tsx b/scm-ui/ui-components/src/repos/Diff.stories.tsx
index 8e5260bcc5..1b38f362d3 100644
--- a/scm-ui/ui-components/src/repos/Diff.stories.tsx
+++ b/scm-ui/ui-components/src/repos/Diff.stories.tsx
@@ -5,6 +5,7 @@ import Diff from "./Diff";
 import parser from "gitdiff-parser";
 import simpleDiff from "../__resources__/Diff.simple";
 import hunksDiff from "../__resources__/Diff.hunks";
+import binaryDiff from "../__resources__/Diff.binary";
 import Button from "../buttons/Button";
 import { DiffEventContext } from "./DiffTypes";
 import Toast from "../toast/Toast";
@@ -52,4 +53,8 @@ storiesOf("Diff", module)
   .add("Hunks", () => {
     const hunkDiffFiles = parser.parse(hunksDiff);
     return <Diff diff={hunkDiffFiles} />;
+  })
+  .add("Binaries", () => {
+    const binaryDiffFiles = parser.parse(binaryDiff);
+    return <Diff diff={binaryDiffFiles} />;
   });