Merge pull request #784 from eisbuk/feature/testId-constructor

Create a 'testId' constructor function:
eisbuk · Jul 11, 2023 · 53d8a97 · 53d8a97
2 parents c446ea9 + 5096c8a
commit 53d8a97
Show file tree

Hide file tree

Showing 36 changed files with 332 additions and 292 deletions.
diff --git a/packages/client/src/components/atoms/SlotOperationButtons/CopyButton.tsx b/packages/client/src/components/atoms/SlotOperationButtons/CopyButton.tsx
@@ -6,11 +6,7 @@ import { Copy } from "@eisbuk/svg";
 
 import { useTranslation, SlotsAria } from "@eisbuk/translations";
 
-import {
-  __copiedSlotsBadgeId__,
-  __copyDayButtonId__,
-  __copyWeekButtonId__,
-} from "@eisbuk/testing/testIds";
+import { testId } from "@eisbuk/testing/testIds";
 
 import { ButtonContextType } from "@/enums/components";
 
@@ -101,15 +97,14 @@ export const CopyButton: React.FC = () => {
   };
 
   const testIdLookup = {
-    [ButtonContextType.Day]: `${__copyDayButtonId__}${date}`,
-    [ButtonContextType.Week]: __copyWeekButtonId__,
+    [ButtonContextType.Day]: testId("copy-day-button", { date }),
+    [ButtonContextType.Week]: testId("copy-week-button"),
   };
   return (
     <CopiedSlotsBadge
       displayBadge={Boolean(displayBadge)}
       contextType={contextType}
       date={date}
-      data-testid={__copiedSlotsBadgeId__}
     >
       <SlotOperationButton
         onClick={onCopy}
@@ -139,8 +134,8 @@ const CopiedSlotsBadge: React.FC<{
   };
 
   const testIdLookup = {
-    [ButtonContextType.Day]: `${__copiedSlotsBadgeId__}${date}`,
-    [ButtonContextType.Week]: __copiedSlotsBadgeId__,
+    [ButtonContextType.Day]: testId("copied-slots-day-badge", { date }),
+    [ButtonContextType.Week]: testId("copied-slots-week-badge"),
   };
 
   return (

diff --git a/packages/client/src/components/atoms/SlotOperationButtons/DeleteButton.tsx b/packages/client/src/components/atoms/SlotOperationButtons/DeleteButton.tsx
@@ -3,7 +3,7 @@ import { useDispatch } from "react-redux";
 
 import { Trash } from "@eisbuk/svg";
 
-import { __deleteButtonId__ } from "@eisbuk/testing/testIds";
+import { testId } from "@eisbuk/testing/testIds";
 
 import { ButtonContextType } from "@/enums/components";
 
@@ -101,7 +101,7 @@ export const DeleteButton: React.FC = () => {
   return (
     <SlotOperationButton
       onClick={handleDelete}
-      data-testid={__deleteButtonId__}
+      data-testid={testId("delete-button")}
       className={disableDelete ? "!text-gray-400" : ""}
       disabled={buttonsDisabled}
     >

diff --git a/packages/client/src/components/atoms/SlotOperationButtons/EditSlotButton.tsx b/packages/client/src/components/atoms/SlotOperationButtons/EditSlotButton.tsx
@@ -2,7 +2,7 @@ import React, { useContext } from "react";
 
 import { Pencil } from "@eisbuk/svg";
 
-import { __editSlotButtonId__ } from "@eisbuk/testing/testIds";
+import { testId } from "@eisbuk/testing/testIds";
 
 import { ButtonContextType } from "@/enums/components";
 
@@ -66,7 +66,7 @@ export const EditSlotButton: React.FC = () => {
   return (
     <SlotOperationButton
       onClick={openForm}
-      data-testid={__editSlotButtonId__}
+      data-testid={testId("edit-slot-button")}
       disabled={disabled}
     >
       <Pencil />

diff --git a/packages/client/src/components/atoms/SlotOperationButtons/NewSlotButton.tsx b/packages/client/src/components/atoms/SlotOperationButtons/NewSlotButton.tsx
@@ -3,7 +3,7 @@ import React, { useContext } from "react";
 import { useTranslation, SlotsAria } from "@eisbuk/translations";
 import { PlusCircle } from "@eisbuk/svg";
 
-import { __newSlotButtonId__ } from "@eisbuk/testing/testIds";
+import { testId } from "@eisbuk/testing/testIds";
 
 import { ButtonContextType } from "@/enums/components";
 
@@ -68,7 +68,7 @@ export const NewSlotButton: React.FC = () => {
   return (
     <SlotOperationButton
       onClick={openForm}
-      data-testid={__newSlotButtonId__}
+      data-testid={testId("new-slot-button")}
       aria-label={t(SlotsAria.CreateSlot, { date })}
       disabled={disabled}
     >

diff --git a/packages/client/src/components/atoms/SlotOperationButtons/PasteButton.tsx b/packages/client/src/components/atoms/SlotOperationButtons/PasteButton.tsx
@@ -17,7 +17,7 @@ import {
 
 import { pasteSlotsDay, pasteSlotsWeek } from "@/store/actions/copyPaste";
 
-import { __pasteButtonId__ } from "@eisbuk/testing/testIds";
+import { testId } from "@eisbuk/testing/testIds";
 
 interface Props {
   onPaste?: () => void;
@@ -100,7 +100,7 @@ export const PasteButton: React.FC<Props> = ({ onPaste }) => {
     <SlotOperationButton
       onClick={handlePaste}
       disabled={disableButton}
-      data-testid={__pasteButtonId__}
+      data-testid={testId("paste-button")}
       aria-label={ariaLabel}
     >
       <ClipboardList />

diff --git a/packages/client/src/components/atoms/SlotOperationButtons/__tests__/CopyButton.test.tsx b/packages/client/src/components/atoms/SlotOperationButtons/__tests__/CopyButton.test.tsx
@@ -7,10 +7,7 @@ import { describe, vi, expect, test, afterEach } from "vitest";
 import { screen, render, cleanup } from "@testing-library/react";
 import { DateTime } from "luxon";
 
-import {
-  __copyDayButtonId__,
-  __copyWeekButtonId__,
-} from "@eisbuk/testing/testIds";
+import { testId } from "@eisbuk/testing/testIds";
 
 import {
   __noDateCopy,
@@ -59,7 +56,7 @@ describe("SlotOperationButtons", () => {
           <CopyButton />
         </SlotOperationButtons>
       );
-      screen.getByTestId(`${__copyDayButtonId__}${testDate}`).click();
+      screen.getByTestId(testId("copy-day-button", { date: testDate })).click();
       // test dispatch being called with the result of `newCopySlotDay` mocked implementation
       expect(mockDispatch).toHaveBeenCalledWith(
         mockCopyDayImplementation(testDate)
@@ -83,7 +80,7 @@ describe("SlotOperationButtons", () => {
           <CopyButton />
         </SlotOperationButtons>
       );
-      screen.getByTestId(__copyWeekButtonId__).click();
+      screen.getByTestId(testId("copy-week-button")).click();
       // test dispatch being called with the result of `newCopySlotWeek` mocked implementation
       expect(mockDispatch).toHaveBeenCalledWith(mockCopyWeekImplementation());
     });
@@ -94,8 +91,12 @@ describe("SlotOperationButtons", () => {
 
     test("should not render the button and should log error to console if not under 'SlotOperationButtons' context", () => {
       render(<CopyButton />);
-      const weekButtonOnScreen = screen.queryByTestId(__copyWeekButtonId__);
-      const dayButtonOnScreen = screen.queryByTestId(__copyWeekButtonId__);
+      const weekButtonOnScreen = screen.queryByTestId(
+        testId("copy-week-button")
+      );
+      const dayButtonOnScreen = screen.queryByTestId(
+        testId("copy-week-button")
+      );
       expect(weekButtonOnScreen).toEqual(null);
       expect(dayButtonOnScreen).toEqual(null);
       expect(spyConsoleError).toHaveBeenCalledWith(__slotButtonNoContextError);
@@ -107,8 +108,12 @@ describe("SlotOperationButtons", () => {
           <CopyButton />
         </SlotOperationButtons>
       );
-      const weekButtonOnScreen = screen.queryByTestId(__copyWeekButtonId__);
-      const dayButtonOnScreen = screen.queryByTestId(__copyWeekButtonId__);
+      const weekButtonOnScreen = screen.queryByTestId(
+        testId("copy-week-button")
+      );
+      const dayButtonOnScreen = screen.queryByTestId(
+        testId("copy-week-button")
+      );
       expect(weekButtonOnScreen).toEqual(null);
       expect(dayButtonOnScreen).toEqual(null);
       expect(spyConsoleError).toHaveBeenCalledWith(
@@ -122,8 +127,12 @@ describe("SlotOperationButtons", () => {
           <CopyButton />
         </SlotOperationButtons>
       );
-      const weekButtonOnScreen = screen.queryByTestId(__copyWeekButtonId__);
-      const dayButtonOnScreen = screen.queryByTestId(__copyWeekButtonId__);
+      const weekButtonOnScreen = screen.queryByTestId(
+        testId("copy-week-button")
+      );
+      const dayButtonOnScreen = screen.queryByTestId(
+        testId("copy-week-button")
+      );
       expect(weekButtonOnScreen).toEqual(null);
       expect(dayButtonOnScreen).toEqual(null);
       expect(spyConsoleError).toHaveBeenCalledWith(__noDateCopy);

diff --git a/packages/client/src/components/atoms/SlotOperationButtons/__tests__/DeleteButton.test.tsx b/packages/client/src/components/atoms/SlotOperationButtons/__tests__/DeleteButton.test.tsx
@@ -7,7 +7,7 @@ import { describe, vi, expect, test, beforeEach } from "vitest";
 import { screen, render, cleanup } from "@testing-library/react";
 import { DateTime } from "luxon";
 
-import { __deleteButtonId__ } from "@eisbuk/testing/testIds";
+import { testId } from "@eisbuk/testing/testIds";
 import { baseSlot } from "@eisbuk/testing/slots";
 
 import { ButtonContextType } from "@/enums/components";
@@ -79,7 +79,7 @@ describe("SlotOperationButtons", () => {
         </SlotOperationButtons>
       );
       // initiate delete
-      screen.getByTestId(__deleteButtonId__).click();
+      screen.getByTestId(testId("delete-button")).click();
       const dispatchCallPayload = mockDispatch.mock.calls[0][0].payload;
       expect(dispatchCallPayload.component).toEqual("DeleteSlotDialog");
       expect(dispatchCallPayload.props).toEqual(baseSlot);
@@ -96,7 +96,7 @@ describe("SlotOperationButtons", () => {
         </SlotOperationButtons>
       );
       // initiate delete
-      screen.getByTestId(__deleteButtonId__).click();
+      screen.getByTestId(testId("delete-button")).click();
       const dispatchCallPayload = mockDispatch.mock.calls[0][0].payload;
       expect(dispatchCallPayload.component).toEqual("DeleteSlotDisabledDialog");
       expect(dispatchCallPayload.props).toEqual(baseSlot);
@@ -112,7 +112,7 @@ describe("SlotOperationButtons", () => {
         </SlotOperationButtons>
       );
       // initiate delete
-      screen.getByTestId(__deleteButtonId__).click();
+      screen.getByTestId(testId("delete-button")).click();
       // create a dummy delete slots week action object with proper values
       const mockDayDelAction = mockDelDayImplementation(testDate);
       // test (using mocking tactics explained above) if `deleteSlotsDay`
@@ -130,7 +130,7 @@ describe("SlotOperationButtons", () => {
         </SlotOperationButtons>
       );
       // initiate delete
-      screen.getByTestId(__deleteButtonId__).click();
+      screen.getByTestId(testId("delete-button")).click();
       // create a dummy delete slot action object with proper values
       const mockWeekDelAction = mockDelWeekImplementation(testDate);
       // test (using mocking tactics explained above) if `deleteSlotsWeek`
@@ -144,7 +144,7 @@ describe("SlotOperationButtons", () => {
 
     test("should not render the button and should log error to console if not within 'SlotOperationButtons' context", () => {
       render(<DeleteButton />);
-      const buttonOnScreen = screen.queryByTestId(__deleteButtonId__);
+      const buttonOnScreen = screen.queryByTestId(testId("delete-button"));
       expect(buttonOnScreen).toEqual(null);
       expect(spyConsoleError).toHaveBeenCalledWith(__slotButtonNoContextError);
     });
@@ -155,7 +155,7 @@ describe("SlotOperationButtons", () => {
           <DeleteButton />
         </SlotOperationButtons>
       );
-      const buttonOnScreen = screen.queryByTestId(__deleteButtonId__);
+      const buttonOnScreen = screen.queryByTestId(testId("delete-button"));
       expect(buttonOnScreen).toEqual(null);
       expect(spyConsoleError).toHaveBeenCalledWith(__noSlotToDelete);
     });
@@ -166,7 +166,7 @@ describe("SlotOperationButtons", () => {
           <DeleteButton />
         </SlotOperationButtons>
       );
-      const buttonOnScreen = screen.queryByTestId(__deleteButtonId__);
+      const buttonOnScreen = screen.queryByTestId(testId("delete-button"));
       expect(buttonOnScreen).toEqual(null);
       expect(spyConsoleError).toHaveBeenCalledWith(__noDateDelete);
     });

diff --git a/packages/client/src/components/atoms/SlotOperationButtons/__tests__/EditSlotButton.test.tsx b/packages/client/src/components/atoms/SlotOperationButtons/__tests__/EditSlotButton.test.tsx
@@ -6,7 +6,7 @@ import React from "react";
 import { describe, vi, expect, test, afterEach } from "vitest";
 import { screen, render, cleanup } from "@testing-library/react";
 
-import { __editSlotButtonId__ } from "@eisbuk/testing/testIds";
+import { testId } from "@eisbuk/testing/testIds";
 import { baseSlot } from "@eisbuk/testing/slots";
 
 import { ButtonContextType } from "@/enums/components";
@@ -41,7 +41,7 @@ describe("SlotOperationButtons", () => {
           <EditSlotButton />
         </SlotOperationButtons>
       );
-      screen.getByTestId(__editSlotButtonId__).click();
+      screen.getByTestId(testId("edit-slot-button")).click();
       const dispatchCallPayload = mockDispatch.mock.calls[0][0].payload;
       expect(dispatchCallPayload.component).toEqual("SlotFormDialog");
       expect(dispatchCallPayload.props).toEqual({
@@ -56,7 +56,7 @@ describe("SlotOperationButtons", () => {
 
     test("should not render the button and should log error to console if not within 'SlotOperationButtons' context", () => {
       render(<EditSlotButton />);
-      const buttonOnScreen = screen.queryByTestId(__editSlotButtonId__);
+      const buttonOnScreen = screen.queryByTestId(testId("edit-slot-button"));
       expect(buttonOnScreen).toEqual(null);
       expect(spyConsoleError).toHaveBeenCalledWith(__slotButtonNoContextError);
     });
@@ -67,7 +67,7 @@ describe("SlotOperationButtons", () => {
           <EditSlotButton />
         </SlotOperationButtons>
       );
-      const buttonOnScreen = screen.queryByTestId(__editSlotButtonId__);
+      const buttonOnScreen = screen.queryByTestId(testId("edit-slot-button"));
       expect(buttonOnScreen).toEqual(null);
       expect(spyConsoleError).toHaveBeenCalledWith(__noSlotProvidedError);
     });
@@ -81,7 +81,7 @@ describe("SlotOperationButtons", () => {
           <EditSlotButton />
         </SlotOperationButtons>
       );
-      const buttonOnScreen = screen.queryByTestId(__editSlotButtonId__);
+      const buttonOnScreen = screen.queryByTestId(testId("edit-slot-button"));
       expect(buttonOnScreen).toEqual(null);
       expect(spyConsoleError).toHaveBeenCalledWith(
         __editSlotButtonWrongContextError

diff --git a/packages/client/src/components/atoms/SlotOperationButtons/__tests__/NewSlotButton.test.tsx b/packages/client/src/components/atoms/SlotOperationButtons/__tests__/NewSlotButton.test.tsx
@@ -7,7 +7,7 @@ import { describe, vi, expect, test, afterEach } from "vitest";
 import { screen, render, cleanup } from "@testing-library/react";
 import { DateTime } from "luxon";
 
-import { __newSlotButtonId__ } from "@eisbuk/testing/testIds";
+import { testId } from "@eisbuk/testing/testIds";
 
 import { ButtonContextType } from "@/enums/components";
 
@@ -46,7 +46,7 @@ describe("SlotOperationButtons", () => {
           <NewSlotButton />
         </SlotOperationButtons>
       );
-      screen.getByTestId(__newSlotButtonId__).click();
+      screen.getByTestId(testId("new-slot-button")).click();
       const dispatchCallPayload = mockDispatch.mock.calls[0][0].payload;
       expect(dispatchCallPayload.component).toEqual("SlotFormDialog");
       expect(dispatchCallPayload.props).toEqual({
@@ -60,7 +60,7 @@ describe("SlotOperationButtons", () => {
 
     test("should not render the button and should log error to console if not within 'SlotOperationButtons' context", () => {
       render(<NewSlotButton />);
-      const buttonOnScreen = screen.queryByTestId(__newSlotButtonId__);
+      const buttonOnScreen = screen.queryByTestId(testId("new-slot-button"));
       expect(buttonOnScreen).toEqual(null);
       expect(spyConsoleError).toHaveBeenCalledWith(__slotButtonNoContextError);
     });
@@ -71,7 +71,7 @@ describe("SlotOperationButtons", () => {
           <NewSlotButton />
         </SlotOperationButtons>
       );
-      const buttonOnScreen = screen.queryByTestId(__newSlotButtonId__);
+      const buttonOnScreen = screen.queryByTestId(testId("new-slot-button"));
       expect(buttonOnScreen).toEqual(null);
       expect(spyConsoleError).toHaveBeenCalledWith(
         __newSlotButtonWrongContextError
@@ -84,7 +84,7 @@ describe("SlotOperationButtons", () => {
           <NewSlotButton />
         </SlotOperationButtons>
       );
-      const buttonOnScreen = screen.queryByTestId(__newSlotButtonId__);
+      const buttonOnScreen = screen.queryByTestId(testId("new-slot-button"));
       expect(buttonOnScreen).toEqual(null);
       expect(spyConsoleError).toHaveBeenCalledWith(__noDateProvidedError);
     });