4 files changed, 83 insertions, 0 deletions
diff --git a/src/tests/components/FormListing.test.tsx b/src/tests/components/FormListing.test.tsx
new file mode 100644
index 0000000..26c7c93
--- /dev/null
+++ b/src/tests/components/FormListing.test.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import FormListing from "../../components/FormListing";
+
+test('renders form listing with specified title', () => {
+    const { getByText } = render(<FormListing title="Example form listing" description="My form listing" open={true} />);
+    const formListing = getByText(/Example form listing/i);
+    expect(formListing).toBeInTheDocument();
+});
+
+test('renders form listing with specified description', () => {
+    const { getByText } = render(<FormListing title="Example form listing" description="My form listing" open={true} />);
+    const formListing = getByText(/My form listing/i);
+    expect(formListing).toBeInTheDocument();
+});
+
+test('renders form listing with background green colour for open', () => {
+    const { container } = render(<FormListing title="Example form listing" description="My form listing" open={true} />);
+    const elem = container.querySelector("div");
+    const style = window.getComputedStyle(elem);
+    expect(style.backgroundColor).toBe("rgb(67, 181, 129)");
+});
+
+test('renders form listing with background dark colour for closed', () => {
+    const { container } = render(<FormListing title="Example form listing" description="My form listing" open={false} />);
+    const elem = container.querySelector("div");
+    const style = window.getComputedStyle(elem);
+    expect(style.backgroundColor).toBe("rgb(44, 47, 51)");
+});
diff --git a/src/tests/components/HeaderBar.test.tsx b/src/tests/components/HeaderBar.test.tsx
new file mode 100644
index 0000000..3567d7e
--- /dev/null
+++ b/src/tests/components/HeaderBar.test.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import HeaderBar from "../../components/HeaderBar";
+
+test('renders header bar with title', () => {
+    const { getByText } = render(<HeaderBar />);
+    const formListing = getByText(/Python Discord Forms/i);
+    expect(formListing).toBeInTheDocument();
+});
diff --git a/src/tests/components/OAuth2Button.test.tsx b/src/tests/components/OAuth2Button.test.tsx
new file mode 100644
index 0000000..53875dc
--- /dev/null
+++ b/src/tests/components/OAuth2Button.test.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import OAuth2Button from "../../components/OAuth2Button";
+
+test('renders oauth2 sign in button text', () => {
+    const { getByText } = render(<OAuth2Button />);
+    const button = getByText(/Sign in with Discord/i);
+    expect(button).toBeInTheDocument();
+});
+
+test("renders fontawesome discord icon", () => {
+    const { container } = render(<OAuth2Button/>);
+    const icon = container.querySelector(`[data-icon="discord"]`)
+    expect(icon).toBeInTheDocument();
+})
diff --git a/src/tests/components/Tag.test.tsx b/src/tests/components/Tag.test.tsx
new file mode 100644
index 0000000..67f2a85
--- /dev/null
+++ b/src/tests/components/Tag.test.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import Tag from "../../components/Tag";
+
+test('renders tag with specified text', () => {
+    const { getByText } = render(<Tag text="Test" color="#f0f0f0" />);
+    const tag = getByText(/Test/i);
+    expect(tag).toBeInTheDocument();
+});
+
+test('renders tag with specified color', () => {
+    const { getByText } = render(<Tag text="Test" color="#f0f0f0" />);
+    const tag = getByText(/Test/i);
+    const style = window.getComputedStyle(tag);
+    expect(style.backgroundColor).toBe("rgb(240, 240, 240)");
+});
+
+test('renders tag with specified font size', () => {
+    const { getByText } = render(<Tag text="Test" color="#f0f0f0" fontSize="2em" />);
+    const tag = getByText(/Test/i);
+    const style = window.getComputedStyle(tag);
+    expect(style.fontSize).toBe("2em");
+});
+
+test('defaults to 0.75em when no tag font size is passed', () => {
+    const { getByText } = render(<Tag text="Test" color="#f0f0f0" />);
+    const tag = getByText(/Test/i);
+    const style = window.getComputedStyle(tag);
+    expect(style.fontSize).toBe("0.75em");
+});