test: add components base test (#7)

src/App.test.tsx

@@ -0,0 +1,6 @@
+import { render } from "@testing-library/react";
+import App from "./App";
+
+test("renders app component", () => {
+	render(<App />);
+});

src/__tests__/Badge.spec.tsx

@@ -0,0 +1,27 @@
+import { render } from "@testing-library/react";
+import Badge from "components/Badge";
+
+describe("Badge", () => {
+	it("should render badge content", () => {
+		const { container } = render(<Badge color="red" content="badge content" />);
+		expect(container.firstChild).toHaveTextContent("badge content");
+	});
+
+	it("should render correctly", () => {
+		const { asFragment } = render(<Badge color="red" content="badge content" />);
+
+		expect(asFragment()).toMatchInlineSnapshot(`
+		<DocumentFragment>
+		  <span
+		    class="MuiTypography-root MuiTypography-caption"
+		  >
+		    badge content
+		    <span
+		      class="makeStyles-root-3 makeStyles-root-4"
+		      color="red"
+		    />
+		  </span>
+		</DocumentFragment>
+	`);
+	});
+});

src/__tests__/CreateSecretForm.spec.tsx

@@ -0,0 +1,43 @@
+import { act, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import CreateSecretForm from "components/CreateSecretForm";
+import userEvent from "@testing-library/user-event";
+
+describe("CreateSecretForm", () => {
+	describe("Should generate token with valid inputs", () => {
+		it("should call submit function", async () => {
+			const onSubmitMock = jest.fn();
+			const initialValues = {
+				secret: "",
+				password: "",
+				accessType: true,
+				accesses: 1,
+				lifetime: { value: "168h", label: "7 days" }
+			};
+
+			render(<CreateSecretForm onSubmit={onSubmitMock} initialValues={initialValues} />);
+
+			const messageInput = screen.getByPlaceholderText(/type your secret here/i);
+			const submitButton = screen.getByRole("button", { name: /get token/i });
+
+			userEvent.type(messageInput, "the eagle flies at midnight");
+			userEvent.click(submitButton);
+			waitFor(() => expect(onSubmitMock).toHaveBeenCalledTimes(1));
+		});
+	});
+
+	describe("Should not generate token with invalid inputs", () => {
+		it("render the message validation error", async () => {
+			const onSubmitMock = jest.fn();
+			const { getByPlaceholderText, container } = render(
+				<CreateSecretForm onSubmit={onSubmitMock} initialValues={{}} />
+			);
+			const messageInput = getByPlaceholderText(/type your secret here/i);
+
+			act(() => {
+				fireEvent.blur(messageInput);
+			});
+
+			waitFor(() => expect(container.innerHTML).toMatch(/you must add a secret/i));
+		});
+	});
+});

src/__tests__/Footer.spec.tsx

@@ -0,0 +1,54 @@
+import { render } from "@testing-library/react";
+import Footer from "components/Footer";
+
+describe("Footer", () => {
+	it("should render correctly", () => {
+		const { asFragment } = render(<Footer />);
+
+		expect(asFragment()).toMatchInlineSnapshot(`
+		<DocumentFragment>
+		  <footer
+		    class="makeStyles-root-1"
+		  >
+		    <p
+		      class="MuiTypography-root MuiTypography-body1"
+		    >
+		      Made with ♠ by 
+		      <a
+		        class="MuiTypography-root MuiLink-root MuiLink-underlineHover makeStyles-text__white-2 MuiTypography-colorPrimary"
+		        href="https://rotational.io"
+		        target="_blank"
+		      >
+		        Rotational Labs
+		      </a>
+		    </p>
+		    <div
+		      class="MuiBox-root MuiBox-root-3"
+		    >
+		      <div
+		        aria-label="add"
+		        class="MuiBox-root MuiBox-root-4"
+		        style="cursor: pointer;"
+		        title="connected to "
+		      >
+		        <span
+		          class="MuiTypography-root MuiTypography-caption"
+		        >
+		          status
+		          <span
+		            class="makeStyles-root-5 makeStyles-root-6"
+		            color="green"
+		          />
+		        </span>
+		        <span
+		          class="MuiTypography-root MuiTypography-caption"
+		        >
+		          version: 
+		        </span>
+		      </div>
+		    </div>
+		  </footer>
+		</DocumentFragment>
+	`);
+	});
+});

src/components/CreateSecretForm.tsx

@@ -8,6 +8,7 @@ import { useEffect } from "react";
 import { CreateSecretFormProps } from "types/CreateSecretFormProps";
 import { preventNonNumericalInput } from "utils/utils";
 import { useStyles } from "styles/createSecretFormStyles";
+import * as Yup from "yup";
 
 const options: Lifetime[] = [
 	{ value: "5m", label: "5 min" },
@@ -22,11 +23,19 @@ const options: Lifetime[] = [
 	{ value: "168h", label: "7 days" }
 ];
 
+const CreateSecretSchema = Yup.object().shape({
+	secret: Yup.string().required("You must add a secret"),
+	password: Yup.string(),
+	lifetime: Yup.object().shape({ value: Yup.string(), label: Yup.string() }).nullable(),
+	accessType: Yup.boolean(),
+	accesses: Yup.number().max(108, "The max number is 108")
+});
+
 const CreateSecretForm: React.FC<CreateSecretFormProps> = props => {
 	const classes = useStyles();
 
 	return (
-		<Formik initialValues={props.initialValues} validationSchema={props.validationSchema} onSubmit={props.onSubmit}>
+		<Formik initialValues={props.initialValues} validationSchema={CreateSecretSchema} onSubmit={props.onSubmit}>
 			{({ isSubmitting, errors, values, setFieldValue }) => {
 				useEffect(() => {
 					if (values.accessType) {
@@ -46,6 +55,7 @@ const CreateSecretForm: React.FC<CreateSecretFormProps> = props => {
 								label="Type your secret here"
 								variant="outlined"
 								placeholder="Type your secret here"
+								data-testid="secret"
 								required
 								multiline
 								minRows={10}

src/pages/CreateSecret.tsx

@@ -5,21 +5,12 @@ import createSecret from "services/createSecret";
 import { Secret } from "utils/interfaces/Secret";
 import { FormikHelpers, FormikValues } from "formik";
 import { AxiosError, AxiosResponse } from "axios";
-import * as Yup from "yup";
 import { useStyles } from "styles/createSecretStyles";
 import { Alert, Color } from "@material-ui/lab";
 import { Lifetime } from "utils/interfaces";
 import { useModal } from "contexts/modalContext";
 import { ModalType } from "utils/enums/modal";
 
-const CreateSecretSchema = Yup.object().shape({
-	secret: Yup.string().required("You must add a secret"),
-	password: Yup.string(),
-	lifetime: Yup.object().shape({ value: Yup.string(), label: Yup.string() }).nullable(),
-	accessType: Yup.boolean(),
-	accesses: Yup.number().max(108, "The max number is 108")
-});
-
 interface Values {
 	secret: string;
 	password: string;
@@ -88,11 +79,7 @@ const CreateSecret: React.FC = () => {
 					>
 						{message.message}
 					</Alert>
-					<CreateSecretForm
-						onSubmit={handleSubmit}
-						initialValues={initialValues}
-						validationSchema={CreateSecretSchema}
-					/>
+					<CreateSecretForm onSubmit={handleSubmit} initialValues={initialValues} />
 				</Grid>
 			</Grid>
 		</div>

src/types/CreateSecretFormProps.ts

@@ -1,8 +1,6 @@
 import { FormikHelpers, FormikValues } from "formik";
-import { ObjectSchema } from "yup";
 
 export type CreateSecretFormProps = {
 	onSubmit: (values: FormikValues, helpers: FormikHelpers<any>) => void;
-	validationSchema: ObjectSchema<any>;
 	initialValues: FormikValues;
 };