Disabled button

.gitignore

@@ -34,3 +34,9 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# playwright
+/playwright-report/
+/playwright/.cache/
+/test-results/
+/storybook-static/

.npmrc

@@ -0,0 +1 @@
+legacy-peer-deps=true

.storybook/main.js

@@ -0,0 +1,20 @@
+module.exports = {
+  stories: [
+    "../stories/**/*.stories.mdx",
+    "../stories/**/*.stories.@(js|jsx|ts|tsx)",
+  ],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    "storybook-addon-next",
+  ],
+  framework: "@storybook/react",
+  core: {
+    builder: "@storybook/builder-webpack5",
+  },
+  features: {
+    interactionsDebugger: true,
+  },
+};
+

.storybook/preview.js

@@ -0,0 +1,29 @@
+import "../styles/globals.css";
+import { ThemeProvider, createTheme } from "@mui/material/styles";
+
+const darkTheme = createTheme({
+  palette: {
+    mode: "dark",
+  },
+});
+
+const withThemeProvider = (Story, context) => {
+  return (
+    <ThemeProvider theme={darkTheme}>
+      <Story {...context} />
+    </ThemeProvider>
+  );
+};
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+};
+
+export const decorators = [withThemeProvider];
+

__tests__/api/calculate.spec.js

@@ -0,0 +1,39 @@
+import { createMocks } from "node-mocks-http";
+import handler from "../../pages/api/calculate/[...params]";
+
+describe("test calculate API handler", () => {
+  function getMockHttpObjs(method, query) {
+    const { req, res } = createMocks({ method, query });
+    return { req, res };
+  }
+
+  it("returns a valid result and status code when add is successful", () => {
+    const { req, res } = getMockHttpObjs("GET", { params: ["add", 1, 1] });
+    handler(req, res);
+
+    expect(res.statusCode).toBe(200);
+    expect(res.getHeaders()).toEqual({ "content-type": "application/json" });
+    expect(res._getJSONData()).toEqual({ result: 2 });
+  });
+
+  it("should only accept GET method", () => {
+    let req, res;
+
+    ({ req, res } = getMockHttpObjs("POST", { params: ["add", 1, 1] }));
+    handler(req, res);
+    expect(res.statusCode).toBe(500);
+
+    ({ req, res } = getMockHttpObjs("PUT", { params: ["add", 1, 1] }));
+    handler(req, res);
+    expect(res.statusCode).toBe(500);
+
+    ({ req, res } = getMockHttpObjs("DELETE", { params: ["add", 1, 1] }));
+    handler(req, res);
+    expect(res.statusCode).toBe(500);
+
+    ({ req, res } = getMockHttpObjs("WHATEVER", { params: ["add", 1, 1] }));
+    handler(req, res);
+    expect(res.statusCode).toBe(500);
+  });
+});
+

__tests__/components/calculator.spec.tsx

@@ -0,0 +1,89 @@
+import {
+  render,
+  screen,
+  fireEvent,
+  cleanup,
+  waitFor,
+} from "@testing-library/react";
+import "@testing-library/jest-dom";
+import userEvent from "@testing-library/user-event";
+import Calculator from "../../components/Calculator";
+
+//sets up userEvent to reuse it through the test
+//const user = userEvent.setup()
+
+describe("Calculator component testing", () => {
+  const component = render(<Calculator />);
+  it("has all the fields", () => {
+    expect(document.getElementById("first")).toBeInTheDocument();
+    expect(document.getElementById("second")).toBeInTheDocument();
+    expect(document.getElementById("operation")).toBeInTheDocument();
+    expect(document.querySelector("button[type=submit]")).toBeInTheDocument();
+  });
+});
+
+// Feature#2 Prevent Double Form Submission TESTs
+
+describe.only("Disable Submit Button", () => {
+  beforeEach(() => {
+    render(<Calculator />);
+  });
+  afterEach(cleanup);
+
+  it("Should disable calculate button on click", async () => {
+
+    const inputFieldFirst: HTMLInputElement =
+      screen.getByLabelText(/First Number/i);
+    await userEvent.type(inputFieldFirst, "2");
+
+    const inputFieldSecond: HTMLInputElement =
+      screen.getByLabelText(/Second Number/i);
+    await userEvent.type(inputFieldSecond, "3");
+
+    const operations: HTMLElement | null = document.getElementById("operation");
+
+    if (operations) {
+      fireEvent.change(operations, {
+        target: { value: "add" },
+      });
+    }
+    const form: HTMLElement | null = document.getElementById("calculator-form");
+    const submitButton: HTMLElement | null = document.querySelector("button[type=submit]");
+    if (form) {
+      await fireEvent.submit(form);
+    }
+    expect(submitButton).toBeDisabled();
+  });
+});
+
+it.only("Should give us the result after submit", async () => {
+const timer =  jest.useRealTimers();
+  const inputFieldFirst: HTMLInputElement =
+    screen.getByLabelText(/First Number/i);
+  await userEvent.type(inputFieldFirst, "2");
+
+  const inputFieldSecond: HTMLInputElement =
+    screen.getByLabelText(/Second Number/i);
+  await userEvent.type(inputFieldSecond, "3");
+
+  const operations: HTMLElement | null = document.getElementById("operation");
+
+  if (operations) {
+    fireEvent.change(operations, {
+      target: { value: "add" },
+    });
+  }
+ const submitButton: HTMLElement | null = document.querySelector("button[type=submit]");
+ if (submitButton) {
+  await fireEvent.click(submitButton);
+}
+//await waitFor(async () => await expect(submitButton).toBeDisabled())
+//jest.useFakeTimers();
+//   expect(document.getElementById("result")).toHaveTextContent("5")
+
+});
+
+
+//expect(submitButton).toHaveAttribute('disabled')
+// await userEvent.click(document.querySelector("button[type=submit]"))
+// expect(document.getElementById("result")).toHaveTextContent("3")

__tests__/pages/index.spec.js

@@ -0,0 +1,12 @@
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+
+import Home from "../../pages/index";
+
+describe("Testing home page", () => {
+  it("has the header", () => {
+    render(<Home />);
+    const heading = screen.getByRole("heading", { level: 2 });
+    expect(heading.textContent).toBe("The Amazing Calculator");
+  });
+});

__tests__/utils/calculate.spec.js

@@ -0,0 +1,24 @@
+import { add, subtract, divide, multiply } from "../../utils/calculate";
+
+describe("basic library functionality", () => {
+  it("can add two numbers", () => {
+    expect(add(1, 1)).toBe(2);
+    expect(add(1, -1)).toBe(0);
+    expect(add(1.5, 1.5)).toBe(3);
+  });
+
+  it("doesn't like strings", () => {
+    expect(() => {
+      add(1, "a");
+    }).toThrow();
+
+    expect(() => {
+      add("a", 1);
+    }).toThrow();
+
+    expect(() => {
+      add(1, null);
+    }).toThrow();
+  });
+});
+

calculate.js

@@ -0,0 +1,54 @@
+// import { add, subtract, divide, multiply } from "../../utils/calculate";
+
+// describe("basic library functionality", () => {
+//   it("can add two numbers", () => {
+//     expect(add(1, 1)).toBe(2);
+//     expect(add(1, -1)).toBe(0);
+//     expect(add(1.5, 1.5)).toBe(3);
+//   });
+
+//   it("doesn't like strings", () => {
+//     expect(() => {
+//       add(1, "a");
+//     }).toThrow();
+
+//     expect(() => {
+//       add("a", 1);
+//     }).toThrow();
+
+//     expect(() => {
+//       add(1, null);
+//     }).toThrow();
+//   });
+// });
+
+
+
+
+// import { add, subtract, multiply, divide } from "../../utils/calculate";
+
+/* 
+you can use test or it
+first param gives a description of what you're testing 
+second param is function that gets called to run test
+    -inside func is our expected result 
+describe groups test 
+*/
+
+
+
+// decscribe("testing library",
+//   () => {
+//     test("should add two numbers", () => {
+//       expect(add(1, 2).toBe(3));
+//     });
+//     test("should subtract two numbers", () => {
+//       expect(subtract(5, 3).toBe(2));
+//     });
+//     test("should multiply two numbers", () => {
+//       expect(multiply(5, 7).toBe(35));
+//     });
+//     test("should divide two numbers", () => {
+//       expect(divide(24, 12).toBe(2));
+//     });
+//   });