Add condition for displaying current & separator

Signed-off-by: Erik Engervall <erik.engervall@gmail.com>
2021-04-22 14:32:58 +02:00
parent 491af9430a
commit 57d8ea0237
2 changed files with 12 additions and 9 deletions
@@ -30,11 +30,11 @@ describe('Differ', () => {
    const { getByTestId, queryByTestId } = render(<Differ icon="branch" />);

    const icon = getByTestId(TEST_IDS.components.differ.icons.branch);
-    const current = getByTestId(TEST_IDS.components.differ.current);
+    const current = queryByTestId(TEST_IDS.components.differ.current);
    const next = queryByTestId(TEST_IDS.components.differ.next);

    expect(icon).toBeInTheDocument();
-    expect(current.innerHTML).toMatchInlineSnapshot(`"None"`);
+    expect(current).toMatchInlineSnapshot(`null`);
    expect(next).not.toBeInTheDocument();
  });

@@ -40,14 +40,17 @@ export const Differ = ({ current, next, icon }: DifferProps) => {
        </span>
      )}

-      <span
-        data-testid={TEST_IDS.components.differ.current}
-        style={{ color: grey[700] }}
-      >
-        {current ?? 'None'}
-      </span>
+      {!!current && (
+        <span
+          data-testid={TEST_IDS.components.differ.current}
+          style={{ color: grey[700] }}
+        >
+          {current ?? 'None'}
+        </span>
+      )}
+
+      {current && next && <span>{'  →  '}</span>}

-      {next && <span>{'  →  '}</span>}
      {next && (
        <span
          data-testid={TEST_IDS.components.differ.next}