From 0a28d5e1111d0408ae0fe9834df6d4e19dea52e2 Mon Sep 17 00:00:00 2001
From: sam-keen <samuel.kleinmann@gmail.com>
Date: Fri, 18 Mar 2022 10:27:27 +0000
Subject: [PATCH] Start of component unit tests

---
 .../seconds-ago/seconds-ago.spec.tsx          |  25 ++++
 .../status-message/status-message.spec.tsx    |  10 ++
 .../src/app/components/table/table.spec.tsx   | 122 ++++++++++++++++++
 .../app/components/truncate/truncate.spec.tsx |  41 ++++++
 4 files changed, 198 insertions(+)
 create mode 100644 apps/explorer/src/app/components/seconds-ago/seconds-ago.spec.tsx
 create mode 100644 apps/explorer/src/app/components/status-message/status-message.spec.tsx
 create mode 100644 apps/explorer/src/app/components/table/table.spec.tsx
 create mode 100644 apps/explorer/src/app/components/truncate/truncate.spec.tsx

diff --git a/apps/explorer/src/app/components/seconds-ago/seconds-ago.spec.tsx b/apps/explorer/src/app/components/seconds-ago/seconds-ago.spec.tsx
new file mode 100644
index 000000000..cb5022e6e
--- /dev/null
+++ b/apps/explorer/src/app/components/seconds-ago/seconds-ago.spec.tsx
@@ -0,0 +1,25 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import { SecondsAgo } from './index';
+
+describe('Seconds ago', () => {
+  it('should render successfully', () => {
+    const dateInString = Date.now().toString();
+    const { baseElement } = render(<SecondsAgo date={dateInString} />);
+    expect(baseElement).toBeTruthy();
+  });
+
+  it('should show the correct amount of seconds ago', async () => {
+    const secondsToWait = 2;
+    const dateInString = new Date().toString();
+
+    await new Promise((r) => setTimeout(r, secondsToWait * 1000));
+
+    render(<SecondsAgo date={dateInString} />);
+
+    expect(
+      screen.getByText(`${secondsToWait} seconds ago`)
+    ).toBeInTheDocument();
+  });
+});
diff --git a/apps/explorer/src/app/components/status-message/status-message.spec.tsx b/apps/explorer/src/app/components/status-message/status-message.spec.tsx
new file mode 100644
index 000000000..77845f645
--- /dev/null
+++ b/apps/explorer/src/app/components/status-message/status-message.spec.tsx
@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+
+import { StatusMessage } from './index';
+
+describe('Status message', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<StatusMessage>test</StatusMessage>);
+    expect(baseElement).toBeTruthy();
+  });
+});
diff --git a/apps/explorer/src/app/components/table/table.spec.tsx b/apps/explorer/src/app/components/table/table.spec.tsx
new file mode 100644
index 000000000..20b3444aa
--- /dev/null
+++ b/apps/explorer/src/app/components/table/table.spec.tsx
@@ -0,0 +1,122 @@
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import { Table, TableRow, TableHeader, TableCell } from './index';
+
+describe('Renders all table components', () => {
+  const { container } = render(
+    <Table data-testid="test-table">
+      <TableRow data-testid="test-tr">
+        <TableHeader data-testid="test-th">Title</TableHeader>
+        <TableCell data-testid="test-td">Content</TableCell>
+      </TableRow>
+    </Table>
+  );
+
+  const table = container.querySelector('[data-testid="test-table"]');
+  const tr = container.querySelector('[data-testid="test-tr"]');
+  const th = container.querySelector('[data-testid="test-th"]');
+  const td = container.querySelector('[data-testid="test-td"]');
+
+  expect(table).toBeInTheDocument();
+  expect(th).toBeInTheDocument();
+  expect(tr).toBeInTheDocument();
+  expect(td).toBeInTheDocument();
+});
+
+describe('Table row', () => {
+  it('should include classes based on custom "modifier" prop', () => {
+    const { baseElement: withoutModifier } = render(
+      <Table>
+        <TableRow>
+          <TableCell>Without modifier</TableCell>
+        </TableRow>
+      </Table>
+    );
+
+    const { baseElement: withModifier } = render(
+      <Table>
+        <TableRow modifier="bordered">
+          <TableCell>With modifier</TableCell>
+        </TableRow>
+      </Table>
+    );
+
+    const noModifierTr = withoutModifier.querySelector('tr');
+    const modifierTr = withModifier.querySelector('tr');
+    const classNameToCheck = 'border-white-40';
+
+    expect(noModifierTr && !noModifierTr.classList.contains(classNameToCheck));
+    expect(modifierTr && modifierTr.classList.contains(classNameToCheck));
+  });
+});
+
+describe('Table header', () => {
+  it('should accept props i.e. scope="row"', () => {
+    const { baseElement } = render(
+      <Table>
+        <TableRow>
+          <TableHeader scope="row">Test</TableHeader>
+        </TableRow>
+      </Table>
+    );
+
+    const th = baseElement.querySelector('th');
+
+    expect(th && th.hasAttribute('scope'));
+  });
+
+  it('should include custom class based on scope="row"', () => {
+    const { baseElement: withoutScope } = render(
+      <Table>
+        <TableRow>
+          <TableHeader>Without scope attribute</TableHeader>
+        </TableRow>
+      </Table>
+    );
+
+    const { baseElement: withScope } = render(
+      <Table>
+        <TableRow>
+          <TableHeader scope="row">With scope attribute</TableHeader>
+        </TableRow>
+      </Table>
+    );
+
+    const withoutScopeTr = withoutScope.querySelector('tr');
+    const withScopeTr = withScope.querySelector('tr');
+    const classNameToCheck = 'text-left';
+
+    expect(
+      withoutScopeTr && !withoutScopeTr.classList.contains(classNameToCheck)
+    );
+    expect(withScopeTr && withScopeTr.classList.contains(classNameToCheck));
+  });
+});
+
+describe('Table cell', () => {
+  it('should include class based on custom "modifier" prop', () => {
+    const { baseElement: withoutModifier } = render(
+      <Table>
+        <TableRow>
+          <TableCell>Without modifier</TableCell>
+        </TableRow>
+      </Table>
+    );
+
+    const { baseElement: withModifier } = render(
+      <Table>
+        <TableRow>
+          <TableCell modifier="bordered">With modifier</TableCell>
+        </TableRow>
+      </Table>
+    );
+
+    const noModifierTd = withoutModifier.querySelector('td');
+    const modifierTd = withModifier.querySelector('td');
+    const classNameToCheck = 'py-4';
+
+    expect(noModifierTd && !noModifierTd.classList.contains(classNameToCheck));
+    expect(modifierTd && modifierTd.classList.contains(classNameToCheck));
+  });
+});
diff --git a/apps/explorer/src/app/components/truncate/truncate.spec.tsx b/apps/explorer/src/app/components/truncate/truncate.spec.tsx
new file mode 100644
index 000000000..f24d9084d
--- /dev/null
+++ b/apps/explorer/src/app/components/truncate/truncate.spec.tsx
@@ -0,0 +1,41 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import { TruncateInline } from './truncate';
+
+describe('Truncate', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(
+      <TruncateInline text={'Texty McTextFace'} />
+    );
+
+    expect(baseElement).toBeTruthy();
+  });
+
+  it('it truncates as expected', () => {
+    const test = 'randomstringblahblah';
+    const startChars = 3;
+    const endChars = 3;
+    const expectedString = `${test.slice(0, startChars)}…${test.slice(
+      -endChars
+    )}`;
+
+    render(
+      <TruncateInline text={test} startChars={startChars} endChars={endChars} />
+    );
+
+    expect(screen.getByText(expectedString)).toBeInTheDocument();
+  });
+
+  it("it doesn't truncate if the string is too short", () => {
+    const test = 'randomstringblahblah';
+    const startChars = test.length;
+    const endChars = test.length;
+
+    render(
+      <TruncateInline text={test} startChars={startChars} endChars={endChars} />
+    );
+
+    expect(screen.getByText(test)).toBeInTheDocument();
+  });
+});