@react-md/core 1.0.0-next.0 → 1.0.0-next.2

package/src/transition/__tests__/useCSSTransition.tsx

@@ -1,14 +1,16 @@
 import {
   afterEach,
   beforeAll,
+  beforeEach,
   describe,
   expect,
   it,
   jest,
 } from "@jest/globals";
 import { useState, type ReactElement } from "react";
-import { act, fireEvent, render } from "../../test-utils/index.js";
+import { act, fireEvent, render, screen } from "../../test-utils/index.js";
 
+import { TRANSITION_CONFIG } from "../config.js";
 import {
   type CSSTransitionClassNames,
   type CSSTransitionHookOptions,
@@ -74,50 +76,52 @@ describe("useCSSTransition", () => {
     jest.useFakeTimers();
   });
 
+  beforeEach(() => {
+    TRANSITION_CONFIG.disabled = false;
+  });
+
   afterEach(() => {
     jest.clearAllTimers();
   });
 
   it("should apply the correct classNames at the different stages", () => {
-    const { getByRole, getByText, getByTestId } = render(
-      <Test appear defaultTransitionIn />
-    );
-    const toggle = getByRole("button", { name: "Toggle" });
-    const node = getByTestId("node");
+    render(<Test appear defaultTransitionIn />);
+    const toggle = screen.getByRole("button", { name: "Toggle" });
+    const node = screen.getByTestId("node");
 
     expect(node).toHaveTextContent('The current stage is: "entering"');
-    expect(() => getByText("Appearing: true")).not.toThrow();
+    expect(() => screen.getByText("Appearing: true")).not.toThrow();
     expect(node.className).toBe("appear appear-active");
 
     act(() => {
       jest.runAllTimers();
     });
     expect(node).toHaveTextContent('The current stage is: "entered"');
-    expect(() => getByText("Appearing: true")).not.toThrow();
+    expect(() => screen.getByText("Appearing: true")).not.toThrow();
     expect(node.className).toBe("appear-done");
 
     fireEvent.click(toggle);
     expect(node).toHaveTextContent('The current stage is: "exiting"');
-    expect(() => getByText("Appearing: false")).not.toThrow();
+    expect(() => screen.getByText("Appearing: false")).not.toThrow();
     expect(node.className).toBe("exit exit-active");
 
     act(() => {
       jest.runAllTimers();
     });
     expect(node).toHaveTextContent('The current stage is: "exited"');
-    expect(() => getByText("Appearing: false")).not.toThrow();
+    expect(() => screen.getByText("Appearing: false")).not.toThrow();
     expect(node.className).toBe("exit-done");
 
     fireEvent.click(toggle);
     expect(node).toHaveTextContent('The current stage is: "entering"');
-    expect(() => getByText("Appearing: false")).not.toThrow();
+    expect(() => screen.getByText("Appearing: false")).not.toThrow();
     expect(node.className).toBe("enter enter-active");
 
     act(() => {
       jest.runAllTimers();
     });
     expect(node).toHaveTextContent('The current stage is: "entered"');
-    expect(() => getByText("Appearing: false")).not.toThrow();
+    expect(() => screen.getByText("Appearing: false")).not.toThrow();
     expect(node.className).toBe("enter-done");
   });
 
@@ -137,8 +141,8 @@ describe("useCSSTransition", () => {
       onExited,
     };
 
-    const { getByRole } = render(<Test {...props} />);
-    const toggle = getByRole("button");
+    render(<Test {...props} />);
+    const toggle = screen.getByRole("button");
 
     expect(onEnter).not.toHaveBeenCalled();
     expect(onEntering).not.toHaveBeenCalled();

package/src/transition/__tests__/useCollapseTransition.tsx

@@ -1,6 +1,7 @@
 import {
   afterEach,
   beforeAll,
+  beforeEach,
   describe,
   expect,
   it,
@@ -10,6 +11,7 @@ import { useState, type ReactElement } from "react";
 import { act, fireEvent, render, screen } from "../../test-utils/index.js";
 
 import { DISPLAY_NONE_CLASS } from "../../utils/isElementVisible.js";
+import { TRANSITION_CONFIG } from "../config.js";
 import {
   useCollapseTransition,
   type CollapseTransitionHookOptions,
@@ -49,14 +51,18 @@ describe("useCollapseTransition", () => {
     jest.useFakeTimers();
   });
 
+  beforeEach(() => {
+    TRANSITION_CONFIG.disabled = false;
+  });
+
   afterEach(() => {
     jest.clearAllTimers();
   });
 
   it("should default to not rendering the element when transitionIn is false", () => {
-    const { container, getByRole, getByTestId } = render(<Test />);
-    const getElement = (): HTMLElement => getByTestId("element");
-    const toggle = getByRole("button");
+    const { container } = render(<Test />);
+    const getElement = (): HTMLElement => screen.getByTestId("element");
+    const toggle = screen.getByRole("button");
 
     expect(getElement).toThrow();
 
@@ -82,11 +88,9 @@ describe("useCollapseTransition", () => {
   });
 
   it(`should apply the ${DISPLAY_NONE_CLASS} if the temporary behavior is disabled`, () => {
-    const { container, getByRole, getByTestId } = render(
-      <Test temporary={false} />
-    );
-    const toggle = getByRole("button");
-    const element = getByTestId("element");
+    const { container } = render(<Test temporary={false} />);
+    const toggle = screen.getByRole("button");
+    const element = screen.getByTestId("element");
 
     expect(element).toHaveClass(DISPLAY_NONE_CLASS);
     expect(container).toMatchSnapshot();
@@ -114,10 +118,10 @@ describe("useCollapseTransition", () => {
   });
 
   it("should default to not being temporary if the minHeight, minPaddingTop, or minPaddingBottom are not 0", () => {
-    const { container, getByTestId, rerender } = render(
+    const { container, rerender } = render(
       <Test key="first-test" minHeight={120} />
     );
-    const getElement = (): HTMLElement => getByTestId("element");
+    const getElement = (): HTMLElement => screen.getByTestId("element");
 
     expect(getElement).not.toThrow();
     expect(container).toMatchSnapshot();
@@ -144,8 +148,8 @@ describe("useCollapseTransition", () => {
   });
 
   it("should not apply any style if it mounts while transitionIn is true", () => {
-    const { container, getByTestId } = render(<Test defaultTransitionIn />);
-    const element = getByTestId("element");
+    const { container } = render(<Test defaultTransitionIn />);
+    const element = screen.getByTestId("element");
     expect(element.style.minHeight).toBe("");
     expect(element.style.paddingBottom).toBe("");
     expect(element.style.paddingTop).toBe("");
@@ -168,8 +172,8 @@ describe("useCollapseTransition", () => {
       onExited,
     };
 
-    const { getByRole } = render(<Test {...props} />);
-    const toggle = getByRole("button");
+    render(<Test {...props} />);
+    const toggle = screen.getByRole("button");
 
     expect(onEnter).not.toHaveBeenCalled();
     expect(onEntering).not.toHaveBeenCalled();
@@ -216,15 +220,15 @@ describe("useCollapseTransition", () => {
   });
 
   it("should apply the correct appear transitionDuration", () => {
-    const { container, getByRole, getByTestId } = render(
+    const { container } = render(
       <Test
         appear
         defaultTransitionIn
         timeout={{ appear: 100, enter: 250, exit: 200 }}
       />
     );
-    let element = getByTestId("element");
-    const toggle = getByRole("button");
+    let element = screen.getByTestId("element");
+    const toggle = screen.getByRole("button");
 
     expect(element.style.transitionDuration).toBe("100ms");
     expect(container).toMatchSnapshot();
@@ -246,7 +250,7 @@ describe("useCollapseTransition", () => {
     expect(container).toMatchSnapshot();
 
     fireEvent.click(toggle);
-    element = getByTestId("element");
+    element = screen.getByTestId("element");
     expect(element.style.transitionDuration).toBe("250ms");
     expect(container).toMatchSnapshot();
 
@@ -258,9 +262,9 @@ describe("useCollapseTransition", () => {
   });
 
   it("should not apply any class names if the timeout is disabled", () => {
-    const { container, getByRole, getByTestId } = render(<Test timeout={0} />);
-    const getElement = (): HTMLElement => getByTestId("element");
-    const toggle = getByRole("button");
+    const { container } = render(<Test timeout={0} />);
+    const getElement = (): HTMLElement => screen.getByTestId("element");
+    const toggle = screen.getByRole("button");
 
     expect(getElement).toThrow();
     expect(container).toMatchSnapshot();

package/src/transition/__tests__/useCrossFadeTransition.tsx

@@ -1,14 +1,16 @@
 import {
   afterEach,
   beforeAll,
+  beforeEach,
   describe,
   expect,
   it,
   jest,
 } from "@jest/globals";
 import { useState, type ReactElement } from "react";
-import { act, fireEvent, render } from "../../test-utils/index.js";
+import { act, fireEvent, render, screen } from "../../test-utils/index.js";
 
+import { TRANSITION_CONFIG } from "../config.js";
 import {
   useCrossFadeTransition,
   type CrossFadeTransitionHookOptions,
@@ -47,13 +49,17 @@ describe("CrossFade", () => {
     jest.useFakeTimers();
   });
 
+  beforeEach(() => {
+    TRANSITION_CONFIG.disabled = false;
+  });
+
   afterEach(() => {
     jest.clearAllTimers();
   });
 
   it("should default to not using appear transitions", () => {
-    const { container, getByTestId, rerender } = render(<Test />);
-    const getElement = (): HTMLElement => getByTestId("element");
+    const { container, rerender } = render(<Test />);
+    const getElement = (): HTMLElement => screen.getByTestId("element");
 
     expect(getElement).not.toThrow();
     expect(container).toMatchSnapshot();
@@ -76,9 +82,9 @@ describe("CrossFade", () => {
   });
 
   it("should transition correctly when not appearing", () => {
-    const { container, getByRole, getByTestId } = render(<Test />);
-    const getElement = (): HTMLElement => getByTestId("element");
-    const toggle = getByRole("button");
+    const { container } = render(<Test />);
+    const getElement = (): HTMLElement => screen.getByTestId("element");
+    const toggle = screen.getByRole("button");
 
     expect(getElement).not.toThrow();
     expect(getElement().className).toBe("");
@@ -110,9 +116,9 @@ describe("CrossFade", () => {
   });
 
   it("should allow for temporary CSS Transition behavior", () => {
-    const { container, getByRole, getByTestId } = render(<Test temporary />);
-    const getElement = (): HTMLElement => getByTestId("element");
-    const toggle = getByRole("button");
+    const { container } = render(<Test temporary />);
+    const getElement = (): HTMLElement => screen.getByTestId("element");
+    const toggle = screen.getByRole("button");
 
     expect(getElement).toThrow();
     expect(container).toMatchSnapshot();
@@ -133,11 +139,9 @@ describe("CrossFade", () => {
   });
 
   it("should correctly merge the className prop", () => {
-    const { container, getByRole, getByTestId } = render(
-      <Test className="custom-class" />
-    );
-    const getElement = (): HTMLElement => getByTestId("element");
-    const toggle = getByRole("button");
+    const { container } = render(<Test className="custom-class" />);
+    const getElement = (): HTMLElement => screen.getByTestId("element");
+    const toggle = screen.getByRole("button");
 
     expect(getElement).not.toThrow();
     expect(getElement().className).toBe("custom-class");
@@ -186,8 +190,8 @@ describe("CrossFade", () => {
       onExited,
     };
 
-    const { getByRole } = render(<Test {...props} />);
-    const toggle = getByRole("button");
+    render(<Test {...props} />);
+    const toggle = screen.getByRole("button");
 
     expect(onEnter).not.toHaveBeenCalled();
     expect(onEntering).not.toHaveBeenCalled();

package/src/transition/__tests__/useScaleTransition.tsx

@@ -1,14 +1,16 @@
 import {
   afterEach,
   beforeAll,
+  beforeEach,
   describe,
   expect,
   it,
   jest,
 } from "@jest/globals";
 import { useState, type ReactElement } from "react";
-import { act, fireEvent, render } from "../../test-utils/index.js";
+import { act, fireEvent, render, screen } from "../../test-utils/index.js";
 
+import { TRANSITION_CONFIG } from "../config.js";
 import {
   useScaleTransition,
   type ScaleTransitionHookOptions,
@@ -47,14 +49,18 @@ describe("ScaleTransition", () => {
     jest.useFakeTimers();
   });
 
+  beforeEach(() => {
+    TRANSITION_CONFIG.disabled = false;
+  });
+
   afterEach(() => {
     jest.clearAllTimers();
   });
 
   it("should default using the horizontal transition", () => {
-    const { container, getByRole, getByTestId } = render(<Test />);
-    const getElement = (): HTMLElement => getByTestId("element");
-    const toggle = getByRole("button");
+    const { container } = render(<Test />);
+    const getElement = (): HTMLElement => screen.getByTestId("element");
+    const toggle = screen.getByRole("button");
 
     expect(getElement).toThrow();
     expect(container).toMatchSnapshot();
@@ -81,9 +87,9 @@ describe("ScaleTransition", () => {
   });
 
   it("should render correctly for a vertical transition", () => {
-    const { container, getByRole, getByTestId } = render(<Test vertical />);
-    const getElement = (): HTMLElement => getByTestId("element");
-    const toggle = getByRole("button");
+    const { container } = render(<Test vertical />);
+    const getElement = (): HTMLElement => screen.getByTestId("element");
+    const toggle = screen.getByRole("button");
 
     expect(getElement).toThrow();
     expect(container).toMatchSnapshot();
@@ -110,12 +116,12 @@ describe("ScaleTransition", () => {
   });
 
   it("should merge the className and allow to be rendered by default", () => {
-    const { container, getByRole, getByTestId } = render(
+    const { container } = render(
       <Test className="custom-class" defaultTransitionIn />
     );
 
-    const getElement = (): HTMLElement => getByTestId("element");
-    const toggle = getByRole("button");
+    const getElement = (): HTMLElement => screen.getByTestId("element");
+    const toggle = screen.getByRole("button");
 
     expect(getElement()).toHaveClass("custom-class");
     expect(container).toMatchSnapshot();
@@ -157,8 +163,8 @@ describe("ScaleTransition", () => {
       onExited,
     };
 
-    const { getByRole } = render(<Test {...props} />);
-    const toggle = getByRole("button");
+    render(<Test {...props} />);
+    const toggle = screen.getByRole("button");
 
     expect(onEnter).not.toHaveBeenCalled();
     expect(onEntering).not.toHaveBeenCalled();