feat(Testing): added unit testing

.eslintrc.json

@@ -5,15 +5,17 @@
  },
  "extends": [
  "airbnb-base",
+ "airbnb-typescript/base",
  "next/core-web-vitals",
  "next",
- "plugin:prettier/recommended"
+ "plugin:prettier/recommended",
+ "plugin:@typescript-eslint/recommended"
  ],
  "parserOptions": {
  "ecmaVersion": 12,
  "sourceType": "module"
  },
  "rules": {},
- "plugins": ["prettier"]
+ "plugins": ["prettier", "@typescript-eslint"]
 }
 

.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx --no -- commitlint --edit ${1}

commitlint.config.js

@@ -0,0 +1 @@
+module.exports = { extends: ['@commitlint/config-conventional'] };

components/reusables/addKeyForm/index.test.tsx

@@ -3,39 +3,33 @@ import AddKeyForm from "."
 import * as otpauth from "otpauth"
 import { useKey } from "@/components/context/keyProvider";
 
+const mockGetUserMedia = jest.fn(async () => {
+ return new Promise<void>((resolve) => {
+ resolve();
+ });
+});
+
+Object.defineProperty(global.navigator, "mediaDevices", {
+ value: {
+ getUserMedia: mockGetUserMedia,
+ },
+});
+
 describe("Add Key Form Component", () => {
  const url =
  "otpauth:https://totp/Example:[email protected]?secret=JBSWY3DPEHPK3PXP&issuer=Example";
  const parsedUrl = otpauth.URI.parse(url)
 
- it("Adding a key using manual form", async () => {
- const element = render(<AddKeyForm />)
-
- const issuerForm = element.getByAltText("issuer")
- const labelForm = element.getByAltText("label");
- const secretForm = element.getByAltText("secret");
- const submitButton = element.getByRole("button", {
- name: "Add Key"
- })
-
- fireEvent.change(issuerForm, {
- target: {
- value: parsedUrl.issuer
- }
- })
- fireEvent.change(labelForm, {
- target: {
- value: parsedUrl.label,
- },
- });
- fireEvent.change(secretForm, {
- target: {
- value: parsedUrl.secret.base32,
- },
- });
-
- fireEvent.click(submitButton)
-
- const arraytemp: [] = JSON.parse(localStorage.getItem("key")!)
+ it("on initial render, it should show the manual input form first", async () => {
+ render(<AddKeyForm />)
+ expect(screen.getByRole("heading")).toHaveTextContent("2FA Input Form")
+ })
+ it("switching to scanner page", () => {
+ render(<AddKeyForm />);
+ fireEvent.click(
+ screen.getByRole("button", {
+ name: "Scan QR code",
+ })
+ );
  })
 })

components/reusables/addKeyForm/index.tsx

@@ -1,68 +1,77 @@
-import React, { useState } from 'react'
-import { useKey } from '../../context/keyProvider';
-import QrScanner from '../qrScanner';
-import * as OTPAuth from "otpauth"
-import { toast } from 'react-toastify';
-import AddKeyFormHandler from './index.handler';
+import React, { useState } from "react";
+import { toast } from "react-toastify";
+import * as OTPAuth from "otpauth";
+import { useKey } from "../../context/keyProvider";
+import QrScanner from "../qrScanner";
+import AddKeyFormHandler from "./index.handler";
+import H1 from "../typography/h1";
+import Input from "../layouts/input";
 
 const AddKeyForm = () => {
- const [loadScan, setLoadScan] = useState(false)
+ const [loadScan, setLoadScan] = useState(false);
 
- const { addKey, isHaveKey } = useKey()
- const handler = AddKeyFormHandler()
+ const { addKey, isHaveKey } = useKey();
+ const handler = AddKeyFormHandler();
 
  return (
  <>
  {!loadScan ? (
- <form className="form-control" onSubmit={handler.handleSubmit} name="addkeyform">
- <div className="my-2">
- <input
- type="text"
- placeholder="Label"
- className="input input-bordered w-full"
- required
- value={handler.label}
- onChange={(e) => handler.setLabel(e.target.value)}
- alt="label"
- />
- </div>
- <div className="my-2">
- <input
- type="text"
- placeholder="Issuer"
- className="input input-bordered w-full"
- value={handler.issuer}
- onChange={(e) => handler.setIssuer(e.target.value)}
- alt="issuer"
- />
- </div>
- <div className="my-2">
- <input
- type="text"
- placeholder="Secret"
- className="input input-bordered w-full"
- required
- value={handler.secret}
- onChange={(e) => handler.setSecret(e.target.value)}
- alt="secret"
- />
- </div>
- <div className="flex flex-row mt-1 justify-center">
- <button className="btn mx-1" type="submit">
- Add Key
- </button>
- <button
- className="btn mx-1"
- type="button"
- onClick={() => setLoadScan(true)}
- >
- Scan QR code
- </button>
- </div>
- </form>
+ <div>
+ <H1 className="flex justify-center text-center mb-4">
+ 2FA Input Form
+ </H1>
+ <form
+ className="form-control"
+ onSubmit={handler.handleSubmit}
+ name="addkeyform"
+ >
+ <div className="my-2">
+ <Input
+ type="text"
+ placeholder="Label"
+ required
+ value={handler.label}
+ onChange={(e) => handler.setLabel(e.target.value)}
+ alt="label"
+ />
+ </div>
+ <div className="my-2">
+ <Input
+ type="text"
+ placeholder="Issuer"
+ value={handler.issuer}
+ onChange={(e) => handler.setIssuer(e.target.value)}
+ alt="issuer"
+ />
+ </div>
+ <div className="my-2">
+ <Input
+ type="text"
+ placeholder="Secret"
+ required
+ value={handler.secret}
+ onChange={(e) => handler.setSecret(e.target.value)}
+ alt="secret"
+ />
+ </div>
+ <div className="flex flex-row mt-1 justify-center">
+ <button className="btn mx-1" type="submit">
+ Add Key
+ </button>
+ <button
+ className="btn mx-1"
+ type="button"
+ onClick={() => setLoadScan(true)}
+ >
+ Scan QR code
+ </button>
+ </div>
+ </form>
+ </div>
  ) : (
  <div className="flex flex-col">
- <div className='flex justify-center'>
+ <H1 className="flex justify-center text-center mb-4">2FA Scanner</H1>
+ <div className="flex justify-center">
  <QrScanner
  onResult={(result) => {
  const parsedUrl = OTPAuth.URI.parse(result.getText());
@@ -99,6 +108,6 @@ const AddKeyForm = () => {
  )}
  </>
  );
-}
+};
 
-export default AddKeyForm
+export default AddKeyForm;

components/reusables/layouts/input/index.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+
+interface InputInterface {
+ type: React.HTMLInputTypeAttribute | undefined;
+ placeholder?: string | undefined;
+ required?: boolean | undefined;
+ value?: string | number | readonly string[] | undefined;
+ onChange?: React.ChangeEventHandler<HTMLInputElement> | undefined;
+ alt?: string | undefined;
+}
+const Input = (props: InputInterface) => {
+ return (
+ <input
+ type={props.type}
+ placeholder={props.placeholder}
+ className="input input-bordered w-full"
+ required={props.required}
+ value={props.value}
+ onChange={props.onChange}
+ alt={props.alt}
+ />
+ );
+}
+
+export default Input

components/reusables/typography/h1/index.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+interface H1Interface {
+ className?: string | undefined
+ children: any
+}
+const H1 = (props: H1Interface) => {
+ return <h1 className={"text-3xl font-bold " + props.className}>{props.children}</h1>;
+}
+
+export default H1

components/reusables/typography/h2/index.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const H2 = ({ children }: any) => {
+ return <h1 className="text-2xl font-bold">{children}</h1>;
+};
+
+export default H2;