7 create unit tests (#8)

* Add missing test for initiative input dialogue

Initiative input dialogue did not have handling for the user entering a
nonnumeric initiative value. Add the test and functionality to handle the scenario.

* npm run format

* Add lint and unit tests to push

* Comment tracker skeleton unit tests

* Initial strings file addition

* Move strings file to source root

* Re-factor for strings

* Run prettier

* Re-factor for strings file

* Re-factor file input

* Begin testing for character input scenarios

* Mock Initiative input

* fix mock file loading

* Fix timing on insert test

* Initial dialog for app

* Add file parsing error handling

* Basic dialog tests

* ut cleaning

* Test bad json file

* Prettier

* lint errors

* Move character tests

* Test for multiple characters

* Test moving active character down

* lint

* refactor add character

* refactor active character check

* add move up test

* Final unit test for the branch

* cleanup

.github/workflows/development_build_on_push.yml

@@ -8,6 +8,12 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v3
         with:
-          node-version: '18'
-      - name: Change directory and run build
-        run: npm install; npx next build
+          node-version: "18"
+      - name: Install dependencies
+        run: npm install
+      - name: Run lint
+        run: npm run lint
+      - name: Run unit tests
+        run: npm test
+      - name: Build project
+        run: npx next build

.prettierignore

@@ -0,0 +1 @@
+src/app/testData/bad_character_data.json

.vscode/launch.json

@@ -0,0 +1,12 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "msedge",
+      "request": "launch",
+      "name": "Launch Edge against localhost",
+      "url": "http://localhost:3000",
+      "webRoot": "${workspaceFolder}"
+    }
+  ]
+}

package.json

@@ -19,7 +19,7 @@
     "ts-node": "^10.9.2"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^6.4.0",
+    "@testing-library/jest-dom": "^6.4.5",
     "@testing-library/react": "^14.2.0",
     "@types/jest": "^29.5.11",
     "@types/node": "^20",

src/app/components/BasicDialog.test.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+import { render, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import {
+  DialogType,
+  DialogData,
+  BasicDialog,
+  dialogDetails,
+} from "./BasicDialog";
+
+const getExpectedTitle = (type: DialogType) => {
+  const { title, icon } = dialogDetails[type];
+  return icon + " " + title;
+};
+
+const message = "Test message";
+
+describe("BasicDialog", () => {
+  it("renders info message", () => {
+    const type = DialogType.INFO;
+    const dialogData = new DialogData(message, type);
+    const { getByText } = render(
+      <BasicDialog dialogData={dialogData} onConfirm={() => {}} />,
+    );
+    const dialogTitle = getExpectedTitle(type);
+    expect(getByText(dialogTitle)).toBeInTheDocument();
+    expect(getByText(message)).toBeInTheDocument();
+  });
+
+  it("renders warning message", () => {
+    const type = DialogType.WARNING;
+    const dialogData = new DialogData(message, type);
+    const { getByText } = render(
+      <BasicDialog dialogData={dialogData} onConfirm={() => {}} />,
+    );
+    const dialogTitle = getExpectedTitle(type);
+    expect(getByText(dialogTitle)).toBeInTheDocument();
+    expect(getByText(message)).toBeInTheDocument();
+  });
+
+  it("renders error message", () => {
+    const type = DialogType.ERROR;
+    const dialogData = new DialogData(message, type);
+    const { getByText } = render(
+      <BasicDialog dialogData={dialogData} onConfirm={() => {}} />,
+    );
+    const dialogTitle = getExpectedTitle(type);
+    expect(getByText(dialogTitle)).toBeInTheDocument();
+    expect(getByText(message)).toBeInTheDocument();
+  });
+
+  it("calls onConfirm when confirm button is clicked", () => {
+    const dialogData = new DialogData(message, DialogType.INFO);
+    const onConfirm = jest.fn();
+    const { getByText } = render(
+      <BasicDialog dialogData={dialogData} onConfirm={onConfirm} />,
+    );
+    fireEvent.click(getByText("Confirm"));
+    expect(onConfirm).toHaveBeenCalled();
+  });
+});

src/app/components/BasicDialog.tsx

@@ -0,0 +1,65 @@
+import React from "react";
+import strings from "@/strings";
+
+export enum DialogType {
+  WARNING = "Warning",
+  ERROR = "Error",
+  INFO = "Info",
+}
+
+interface DialogDetail {
+  title: string;
+  icon: string;
+}
+
+export const dialogDetails: Record<DialogType, DialogDetail> = {
+  [DialogType.WARNING]: {
+    title: strings.warningTitle,
+    icon: strings.warningIcon,
+  },
+  [DialogType.ERROR]: { title: strings.errorTitle, icon: strings.errorIcon },
+  [DialogType.INFO]: { title: strings.infoTitle, icon: strings.infoIcon },
+};
+
+export class DialogData {
+  constructor(
+    public message: string,
+    public dialogType: DialogType,
+  ) {}
+}
+
+export interface BasicDialogProps {
+  dialogData: DialogData;
+  onConfirm: () => void;
+}
+
+export const BasicDialog: React.FC<BasicDialogProps> = ({
+  dialogData,
+  onConfirm,
+}) => {
+  const handleConfirm = () => {
+    onConfirm();
+  };
+
+  const { title, icon } = dialogDetails[dialogData.dialogType];
+
+  return (
+    <div className="fixed top-0 left-0 w-full h-full flex items-center justify-center">
+      <div className="bg-opacity-50 bg-gray-800 w-full h-full fixed"></div>
+      <div className="modal bg-white p-8 rounded-lg z-10">
+        <h2 className="text-2xl font-bold mb-4 text-black">
+          {icon} {title}
+        </h2>
+        <p className="text-black">{dialogData.message}</p>
+        <button
+          className="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-full"
+          onClick={handleConfirm}
+        >
+          Confirm
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default BasicDialog;