test(testid): ✅ fix test id eslint update

adaptui · Sep 22, 2021 · 5dfcbab · 5dfcbab
1 parent 6201e52
commit 5dfcbab
Show file tree

Hide file tree

Showing 16 changed files with 145 additions and 113 deletions.
diff --git a/src/calendar/__tests__/Calendar.test.tsx b/src/calendar/__tests__/Calendar.test.tsx
@@ -90,14 +90,14 @@ describe("Calendar", () => {
   it("should render correctly", () => {
     const { getByTestId: testId } = render(<CalendarComp />);
 
-    expect(testId("weekDays").children).toHaveLength(7);
-    expect(testId("current-year")).toHaveTextContent(/^october 2020$/i);
+    expect(testId("testid-weekDays").children).toHaveLength(7);
+    expect(testId("testid-current-year")).toHaveTextContent(/^october 2020$/i);
   });
 
   it("should have proper calendar header keyboard navigation", () => {
     render(<CalendarComp defaultValue={"2020-10-07"} />);
 
-    const currentYear = screen.getByTestId("current-year");
+    const currentYear = screen.getByTestId("testid-current-year");
     const { getByText: text } = screen;
 
     expect(currentYear).toHaveTextContent(/^october 2020$/i);
@@ -124,7 +124,7 @@ describe("Calendar", () => {
 
   it("should proper grid navigation", () => {
     render(<CalendarComp defaultValue={"2020-10-07"} />);
-    const currentYear = screen.getByTestId("current-year");
+    const currentYear = screen.getByTestId("testid-current-year");
 
     const { getByLabelText: label } = screen;
 

diff --git a/src/calendar/__tests__/RangeCalendar.test.tsx b/src/calendar/__tests__/RangeCalendar.test.tsx
@@ -96,8 +96,8 @@ describe("RangeCalendar", () => {
       />,
     );
 
-    expect(testId("week-days").children).toHaveLength(7);
-    expect(testId("current-year")).toHaveTextContent("October 2020");
+    expect(testId("testid-week-days").children).toHaveLength(7);
+    expect(testId("testid-current-year")).toHaveTextContent("October 2020");
   });
 
   it("should have proper initial start and end ranges", () => {
@@ -155,7 +155,7 @@ describe("RangeCalendar", () => {
       />,
     );
 
-    expect(screen.getByTestId("current-year")).toHaveTextContent(
+    expect(screen.getByTestId("testid-current-year")).toHaveTextContent(
       /October 2020/i,
     );
 
@@ -217,7 +217,7 @@ describe("RangeCalendar", () => {
       />,
     );
 
-    expect(screen.getByTestId("current-year")).toHaveTextContent(
+    expect(screen.getByTestId("testid-current-year")).toHaveTextContent(
       /October 2020/i,
     );
 

diff --git a/src/datepicker/__tests__/DatePicker.test.tsx b/src/datepicker/__tests__/DatePicker.test.tsx
@@ -120,15 +120,15 @@ const openDatePicker = () => {
   expect(screen.getByLabelText("month", { selector: "div" })).toHaveFocus();
 
   press.ArrowDown(null, { altKey: true });
-  expect(screen.getByTestId("datepicker-content")).toBeVisible();
+  expect(screen.getByTestId("testid-datepicker-content")).toBeVisible();
 };
 
 describe("DatePicker", () => {
   it("should open/close the datepicker", () => {
     render(<DatePickerComp defaultValue={"2020-11-1"} />);
 
-    const datepickerContent = screen.getByTestId("datepicker-content");
-    const segment = screen.getByTestId("segment");
+    const datepickerContent = screen.getByTestId("testid-datepicker-content");
+    const segment = screen.getByTestId("testid-segment");
     const month = screen.getByRole("spinbutton", {
       name: /month/i,
     });
@@ -148,8 +148,8 @@ describe("DatePicker", () => {
   it("should be able to open and select date", () => {
     render(<DatePickerComp defaultValue={"2020-11-1"} />);
 
-    const segment = screen.getByTestId("segment");
-    const datepickerContent = screen.getByTestId("datepicker-content");
+    const segment = screen.getByTestId("testid-segment");
+    const datepickerContent = screen.getByTestId("testid-datepicker-content");
     const month = screen.getByRole("spinbutton", {
       name: /month/i,
     });
@@ -176,9 +176,9 @@ describe("DatePicker", () => {
 
   it("should be able to open and select date and jump to different dates", () => {
     render(<DatePickerComp defaultValue={"2020-11-1"} />);
-    const segment = screen.getByTestId("segment");
-    const calendarHeader = screen.getByTestId("calendar-header");
-    const datepickerContent = screen.getByTestId("datepicker-content");
+    const segment = screen.getByTestId("testid-segment");
+    const calendarHeader = screen.getByTestId("testid-calendar-header");
+    const datepickerContent = screen.getByTestId("testid-datepicker-content");
     const month = screen.getByRole("spinbutton", {
       name: /month/i,
     });
@@ -232,7 +232,7 @@ describe("DatePicker", () => {
       />,
     );
 
-    expect(screen.getByTestId("datepicker")).toHaveAttribute(
+    expect(screen.getByTestId("testid-datepicker")).toHaveAttribute(
       "aria-invalid",
       "true",
     );
@@ -241,7 +241,7 @@ describe("DatePicker", () => {
   it("should be disabled", () => {
     render(<DatePickerComp isDisabled />);
 
-    expect(screen.getByTestId("datepicker")).toHaveAttribute(
+    expect(screen.getByTestId("testid-datepicker")).toHaveAttribute(
       "aria-disabled",
       "true",
     );
@@ -250,7 +250,7 @@ describe("DatePicker", () => {
   it("should be readonly", () => {
     render(<DatePickerComp isReadOnly />);
 
-    expect(screen.getByTestId("datepicker")).toHaveAttribute(
+    expect(screen.getByTestId("testid-datepicker")).toHaveAttribute(
       "aria-readonly",
       "true",
     );

diff --git a/src/datepicker/__tests__/DateRangePicker.test.tsx b/src/datepicker/__tests__/DateRangePicker.test.tsx
@@ -131,7 +131,7 @@ const openDatePicker = () => {
 
   jest.advanceTimersByTime(1);
 
-  expect(screen.getByTestId("datepicker-content")).toBeVisible();
+  expect(screen.getByTestId("testid-datepicker-content")).toBeVisible();
 };
 
 describe("DateRangePicker", () => {
@@ -178,8 +178,8 @@ describe("DateRangePicker", () => {
 
     // Finish selection
     press.Enter();
-    expect(screen.getByTestId("datepicker-content")).not.toBeVisible();
-    expect(screen.getByTestId("segment")).toHaveTextContent(
+    expect(screen.getByTestId("testid-datepicker-content")).not.toBeVisible();
+    expect(screen.getByTestId("testid-segment")).toHaveTextContent(
       "11/15/2020 - 11/24/2020",
     );
 
@@ -196,7 +196,7 @@ describe("DateRangePicker", () => {
       />,
     );
 
-    const datepicker = screen.getByTestId("datepicker");
+    const datepicker = screen.getByTestId("testid-datepicker");
 
     expect(datepicker).not.toHaveAttribute("aria-invalid");
 
@@ -219,7 +219,7 @@ describe("DateRangePicker", () => {
         maxValue={"2020-11-15"}
       />,
     );
-    const datepicker = screen.getByTestId("datepicker");
+    const datepicker = screen.getByTestId("testid-datepicker");
 
     expect(datepicker).not.toHaveAttribute("aria-invalid");
 
@@ -233,7 +233,7 @@ describe("DateRangePicker", () => {
   it("should be disabled", () => {
     render(<DateRangePickerComp isDisabled />);
 
-    expect(screen.getByTestId("datepicker")).toHaveAttribute(
+    expect(screen.getByTestId("testid-datepicker")).toHaveAttribute(
       "aria-disabled",
       "true",
     );
@@ -242,7 +242,7 @@ describe("DateRangePicker", () => {
   it("should be readonly", () => {
     render(<DateRangePickerComp isReadOnly />);
 
-    expect(screen.getByTestId("datepicker")).toHaveAttribute(
+    expect(screen.getByTestId("testid-datepicker")).toHaveAttribute(
       "aria-readonly",
       "true",
     );

diff --git a/src/meter/__tests__/Meter.test.tsx b/src/meter/__tests__/Meter.test.tsx
@@ -113,7 +113,7 @@ describe("Meter", () => {
 
   it("supports custom DOM props", function () {
     const { getByTestId } = render(<MeterComp data-testid="testid-test" />);
-    const meter = getByTestId("test");
+    const meter = getByTestId("testid-test");
 
     expect(meter).toBeInTheDocument();
   });

diff --git a/src/number-input/__tests__/NumberInput.test.tsx b/src/number-input/__tests__/NumberInput.test.tsx
@@ -59,15 +59,15 @@ describe("NumberInput", () => {
   it("should start with empty string", () => {
     render(<NumberInputComp />);
 
-    const numberInput = screen.getByTestId("numberinput");
+    const numberInput = screen.getByTestId("testid-numberinput");
 
     expect(numberInput).toHaveValue("");
   });
 
   it("should render correctly", () => {
     render(<NumberInputComp defaultValue={0} />);
 
-    const numberInput = screen.getByTestId("numberinput");
+    const numberInput = screen.getByTestId("testid-numberinput");
 
     expect(numberInput).not.toHaveFocus();
     press.Tab();
@@ -76,7 +76,7 @@ describe("NumberInput", () => {
 
   it("should increase/decrease with keyboard", () => {
     render(<NumberInputComp defaultValue={0} max={10} min={0} />);
-    const numberInput = screen.getByTestId("numberinput");
+    const numberInput = screen.getByTestId("testid-numberinput");
 
     expect(numberInput).not.toHaveFocus();
     press.Tab();
@@ -101,7 +101,7 @@ describe("NumberInput", () => {
 
   it("should increase/decrease by 0.1*step on ctrl+Arrow", () => {
     render(<NumberInputComp defaultValue={0} step={0.1} precision={2} />);
-    const numberInput = screen.getByTestId("numberinput");
+    const numberInput = screen.getByTestId("testid-numberinput");
 
     press.ArrowUp(numberInput);
     expect(numberInput).toHaveValue("0.10");
@@ -116,7 +116,7 @@ describe("NumberInput", () => {
 
   it("should increase/decrease by 10*step on shift+Arrow", () => {
     render(<NumberInputComp defaultValue={0} />);
-    const numberInput = screen.getByTestId("numberinput");
+    const numberInput = screen.getByTestId("testid-numberinput");
 
     press.ArrowUp(numberInput);
     expect(numberInput).toHaveValue("1");
@@ -132,9 +132,9 @@ describe("NumberInput", () => {
   it("should increase/decrease with buttons", () => {
     render(<NumberInputComp defaultValue={0} />);
 
-    const incBtn = screen.getByTestId("inc");
-    const decBtn = screen.getByTestId("dec");
-    const numberInput = screen.getByTestId("numberinput");
+    const incBtn = screen.getByTestId("testid-inc");
+    const decBtn = screen.getByTestId("testid-dec");
+    const numberInput = screen.getByTestId("testid-numberinput");
 
     expect(numberInput).not.toHaveFocus();
     expect(numberInput).toHaveValue("0");
@@ -150,7 +150,7 @@ describe("NumberInput", () => {
     jest.useFakeTimers();
 
     render(<NumberInputComp defaultValue={0} />);
-    const numberInput = screen.getByTestId("numberinput");
+    const numberInput = screen.getByTestId("testid-numberinput");
 
     press.Tab();
     expect(numberInput).toHaveFocus();
@@ -176,9 +176,9 @@ describe("NumberInput", () => {
   it("should behave properly with min/max/step options", () => {
     render(<NumberInputComp defaultValue={0} min={10} max={50} step={10} />);
 
-    const incBtn = screen.getByTestId("inc");
-    const decBtn = screen.getByTestId("dec");
-    const numberInput = screen.getByTestId("numberinput");
+    const incBtn = screen.getByTestId("testid-inc");
+    const decBtn = screen.getByTestId("testid-dec");
+    const numberInput = screen.getByTestId("testid-numberinput");
 
     press.Tab();
     expect(numberInput).toHaveFocus();
@@ -203,9 +203,9 @@ describe("NumberInput", () => {
   it("should behave properly precision value", () => {
     render(<NumberInputComp defaultValue={0} step={0.65} precision={2} />);
 
-    const incBtn = screen.getByTestId("inc");
-    const decBtn = screen.getByTestId("dec");
-    const numberInput = screen.getByTestId("numberinput");
+    const incBtn = screen.getByTestId("testid-inc");
+    const decBtn = screen.getByTestId("testid-dec");
+    const numberInput = screen.getByTestId("testid-numberinput");
 
     press.Tab();
     expect(numberInput).toHaveFocus();
@@ -231,7 +231,7 @@ describe("NumberInput", () => {
         max={50}
       />,
     );
-    const numberInput = screen.getByTestId("numberinput");
+    const numberInput = screen.getByTestId("testid-numberinput");
 
     press.Tab();
     expect(numberInput).toHaveFocus();

diff --git a/src/number-input/__tests__/useSpinner.test.tsx b/src/number-input/__tests__/useSpinner.test.tsx
@@ -47,14 +47,14 @@ describe("useSpinner", () => {
     const { getByTestId: testId, getByText: text } = render(<Example />);
 
     fireEvent.click(text("+"));
-    expect(testId("value")).toHaveTextContent("1");
+    expect(testId("testid-value")).toHaveTextContent("1");
   });
 
   it("press down", () => {
     const { getByTestId: testId, getByText: text } = render(<Example />);
 
     fireEvent.click(text("-"));
-    expect(testId("value")).toHaveTextContent("-1");
+    expect(testId("testid-value")).toHaveTextContent("-1");
   });
 
   // TODO: Simulate mouse hold to check for timeout and intervals of increments

diff --git a/src/picker-base/__tests__/BasePicker.test.tsx b/src/picker-base/__tests__/BasePicker.test.tsx
@@ -39,7 +39,7 @@ describe("PickerBase", () => {
   it("should open/close properly", () => {
     render(<PickerBaseComp />);
 
-    const pickerContent = screen.getByTestId("picker-content");
+    const pickerContent = screen.getByTestId("testid-picker-content");
 
     expect(pickerContent).not.toBeVisible();
     fireEvent.click(screen.getByText("open"));

diff --git a/src/progress/__tests__/Progress.test.tsx b/src/progress/__tests__/Progress.test.tsx
@@ -41,7 +41,7 @@ describe("Progress", () => {
   it("should render isIndeterminate", () => {
     render(<ProgressComp value={null} />);
 
-    expect(screen.getByTestId("progress")).toHaveAttribute(
+    expect(screen.getByTestId("testid-progress")).toHaveAttribute(
       "data-indeterminate",
       "",
     );