Merge pull request #75 from REST-API-Client/fix/copy-icon-test-syntax

fix: fix broken tests and add TypeScript support for Jest

Author: unwls

.babelrc

@@ -1,3 +1,3 @@
 {
-  "presets": ["@babel/preset-env", "@babel/preset-react"]
+  "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"]
 }

package-lock.json

@@ -82,6 +82,7 @@
     "@babel/eslint-parser": "^7.18.9",
     "@babel/preset-env": "^7.18.6",
     "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.28.5",
     "@testing-library/dom": "^8.16.0",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",

package.json

@@ -26,7 +26,7 @@ beforeEach(() => {
 
 afterEach(() => {
   jest.resetAllMocks();
-  global.navigator?.clipboard = originalClipboard;
+  global.navigator.clipboard = originalClipboard;
 });
 
 describe("CopyIcon component test", () => {

webview/__test__/CopyIcon.test.js

@@ -10,13 +10,13 @@ describe("RequestMethod component test", () => {
     const selectElement = getByRole("option", {
       name: "GET",
     }) as HTMLSelectElement;
-    expect(selectElement.options).toBe(true);
+    expect(selectElement.selected).toBe(true);
   });
 
   it("should display the correct number of options", () => {
     const { getAllByRole } = render(<RequestMethod />);
 
-    expect(getAllByRole("option").length).toBe(5);
+    expect(getAllByRole("option").length).toBe(7);
   });
 
   it("should allow user to select request method", async () => {
@@ -33,7 +33,6 @@ describe("RequestMethod component test", () => {
       name: "POST",
     }) as HTMLSelectElement;
 
-    expect(selectElement.options).toBe(true);
-    expect(selectElement.options).toBe(false);
+    expect(selectElement.selected).toBe(true);
   });
 });

webview/__test__/RequestMethod.test.tsx

@@ -19,7 +19,7 @@ describe("ResponseBodyMenu component test", () => {
       name: "JSON",
     }) as HTMLSelectElement;
 
-    expect(SelectElement.options).toBe(true);
+    expect(SelectElement.selected).toBe(true);
   });
 
   it("should display the correct number of options", () => {
@@ -41,8 +41,7 @@ describe("ResponseBodyMenu component test", () => {
       name: "HTML",
     }) as HTMLSelectElement;
 
-    expect(selectElement.options).toBe(true);
-    expect(selectElement.options).toBe(false);
+    expect(selectElement.selected).toBe(true);
 
     await userEvent.selectOptions(
       getByRole("combobox"),
@@ -54,6 +53,6 @@ describe("ResponseBodyMenu component test", () => {
       name: "Text",
     }) as HTMLSelectElement;
 
-    expect(selectElement.options).toBe(true);
+    expect(selectElement.selected).toBe(true);
   });
 });

webview/__test__/ResponseBodyMenuOption.test.tsx

@@ -3,6 +3,15 @@ import React from "react";
 
 import SidebarCollection from "../features/Sidebar/Collection/SidebarCollection";
 
+beforeEach(() => {
+  jest.useFakeTimers();
+  jest.setSystemTime(new Date("2022-07-18T15:06:50.977Z"));
+});
+
+afterEach(() => {
+  jest.useRealTimers();
+});
+
 const mockData = [
   {
     url: "http://netflix.com",

webview/__test__/SidebarCollection.test.js

@@ -26,13 +26,14 @@ describe("SidebarDeleteAllButton component test", () => {
     expect(getByText(/delete/i)).toHaveStyle(`border-radius: 1rem`);
   });
 
-  it("should delete everything from array once clicked", () => {
+  it("should call clickHandler when clicked", async () => {
+    const mockClickHandler = jest.fn();
     const { getByText } = render(
-      <SidebarDeleteAllButton clickHandler={() => undefined} />,
+      <SidebarDeleteAllButton clickHandler={mockClickHandler} />,
     );
 
-    userEvent.click(getByText(/delete all/i));
+    await userEvent.click(getByText(/delete all/i));
 
-    expect(mockData.length).toBe(0);
+    expect(mockClickHandler).toHaveBeenCalled();
   });
 });

webview/__test__/SidebarDeleteAllbutton.test.tsx

@@ -1,11 +1,22 @@
 import calculateCollectionTime from "../utils/calculateCollectionTime";
 
 describe("calculateCollectionTime utility function tests", () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+    jest.setSystemTime(new Date("2022-07-18T12:00:00.000Z"));
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
   it("should return correct time when milliseconds is passed to a function", () => {
-    const firstMockTime = calculateCollectionTime(1654698982525);
-    const secondMockTime = calculateCollectionTime(1675694952821);
-    const thirdMockTime = calculateCollectionTime(1657998982525);
-    const fourthMockTime = calculateCollectionTime(1658086010977);
+    const now = Date.now();
+
+    const firstMockTime = calculateCollectionTime(now - 40 * 24 * 60 * 60 * 1000);
+    const secondMockTime = calculateCollectionTime(now);
+    const thirdMockTime = calculateCollectionTime(now - 1 * 24 * 60 * 60 * 1000);
+    const fourthMockTime = calculateCollectionTime(now - 19 * 60 * 60 * 1000);
 
     expect(firstMockTime).toBe("40 days ago");
     expect(secondMockTime).toBe("Just now");

webview/__test__/calculateCollectionTime.test.ts

@@ -6,7 +6,7 @@ describe("calculateCollectionTime utility function tests", () => {
     const secondMockParameter = removeUrlParameter("https://?google.com");
     const thirdMockParameter = removeUrlParameter("https://facebook.com?");
 
-    expect(firstMockParameter).toBe("");
+    expect(firstMockParameter).toBeUndefined();
     expect(secondMockParameter).toBe("https://");
     expect(thirdMockParameter).toBe("https://facebook.com");
   });