aboutsummaryrefslogtreecommitdiffstats
path: root/src/tests/components
diff options
context:
space:
mode:
authorGravatar Joe Banks <[email protected]>2020-09-28 04:04:06 +0100
committerGravatar Joe Banks <[email protected]>2020-09-28 04:04:06 +0100
commit96bb44927bf674aa0cd139ef430921de2d988bc3 (patch)
tree21f585fde616e3b0070b0ae33d193233d3237490 /src/tests/components
parentMerge branch 'main' of github.com:python-discord/forms-frontend into main (diff)
Add initial tests
Diffstat (limited to 'src/tests/components')
-rw-r--r--src/tests/components/FormListing.test.tsx29
-rw-r--r--src/tests/components/HeaderBar.test.tsx9
-rw-r--r--src/tests/components/OAuth2Button.test.tsx15
-rw-r--r--src/tests/components/Tag.test.tsx30
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");
+});