feat(ui-tests): remove deprecated api

Author: alicanerdurmaz

packages/ui-tests/src/test/dataMocks.tsx

@@ -5,17 +5,7 @@ import type {
   Action,
   RouterBindings,
   AuthProvider,
-  LegacyAuthProvider,
-  IRouterContext,
 } from "@refinedev/core";
-import { useParams, useLocation, Link, useNavigate } from "react-router";
-
-/* import {
-    IDataContext,
-    IRouterContext,
-    IAccessControlContext,
-    ILiveContext,
-} from "@refinedev/core"; */
 
 export const posts = [
   {
@@ -61,29 +51,6 @@ const MockDataProvider = () => {
 
 export const MockJSONServer = MockDataProvider() as any;
 
-export const MockRouterProvider = {
-  useHistory: () => {
-    const navigate = useNavigate();
-
-    return {
-      push: navigate,
-      replace: (path: string) => {
-        navigate(path, { replace: true });
-      },
-      goBack: () => {
-        navigate(-1);
-      },
-    };
-  },
-  useLocation,
-  useParams: () => {
-    const params = useParams();
-
-    return params as any;
-  },
-  Link,
-  Prompt: () => null,
-};
 export const MockAccessControlProvider: any = {
   can: () => Promise.resolve({ can: true }),
 };
@@ -94,16 +61,6 @@ export const MockLiveProvider: any = {
   publish: () => ({}),
 };
 
-export const mockLegacyAuthProvider: LegacyAuthProvider = {
-  login: () => Promise.resolve(),
-  logout: () => Promise.resolve(),
-  checkError: () => Promise.resolve(),
-  checkAuth: () => Promise.resolve(),
-  getPermissions: () => Promise.resolve(["admin"]),
-  getUserIdentity: () =>
-    Promise.resolve({ name: "John Doe", avatar: "localhost:3000" }),
-};
-
 export const mockAuthProvider: AuthProvider = {
   login: async () => ({ success: true }),
   check: async () => ({ authenticated: true }),
@@ -162,21 +119,3 @@ export const mockRouterBindings = ({
 
   return bindings;
 };
-
-export const mockLegacyRouterProvider = () => {
-  const provider: IRouterContext = {
-    useHistory: () => {
-      return {
-        push: () => undefined,
-        replace: () => undefined,
-        goBack: () => undefined,
-      };
-    },
-    useLocation: () => ({}) as any,
-    useParams: () => ({}) as any,
-    Link: () => null,
-    Prompt: () => null,
-  };
-
-  return provider;
-};

packages/ui-tests/src/test/index.tsx

@@ -3,43 +3,25 @@ import { BrowserRouter } from "react-router";
 
 import { type AuthProvider, Refine } from "@refinedev/core";
 
-import { MockRouterProvider, MockJSONServer } from "@test";
+import { MockJSONServer } from "@test";
 import type {
   I18nProvider,
   AccessControlProvider,
-  LegacyAuthProvider,
   DataProvider,
   NotificationProvider,
   IResourceItem,
   RouterBindings,
-  IRouterContext,
   IRefineOptions,
 } from "@refinedev/core";
+import { mockRouterBindings } from "./dataMocks";
 
-/* interface ITestWrapperProps {
-    authProvider?: IAuthContext;
-    dataProvider?: IDataContext;
-    i18nProvider?: I18nProvider;
-    accessControlProvider?: IAccessControlContext;
-    liveProvider?: ILiveContext;
-    resources?: IResourceItem[];
-    children?: React.ReactNode;
-    routerInitialEntries?: string[];
-    refineProvider?: IRefineContextProvider;
-} */
-
-const List = () => {
-  return <div>hede</div>;
-};
 export interface ITestWrapperProps {
   dataProvider?: DataProvider;
-  legacyAuthProvider?: LegacyAuthProvider;
   authProvider?: AuthProvider;
   resources?: IResourceItem[];
   notificationProvider?: NotificationProvider;
   accessControlProvider?: AccessControlProvider;
   i18nProvider?: I18nProvider;
-  legacyRouterProvider?: IRouterContext;
   routerProvider?: RouterBindings;
   routerInitialEntries?: string[];
   DashboardPage?: React.FC;
@@ -48,16 +30,13 @@ export interface ITestWrapperProps {
 
 export const TestWrapper: (props: ITestWrapperProps) => React.FC = ({
   dataProvider,
-  legacyAuthProvider,
   authProvider,
   resources,
   notificationProvider,
   accessControlProvider,
   routerInitialEntries,
-  DashboardPage,
   i18nProvider,
   routerProvider,
-  legacyRouterProvider,
   options,
 }) => {
   // Previously, MemoryRouter was used in this wrapper. However, the
@@ -82,14 +61,11 @@ export const TestWrapper: (props: ITestWrapperProps) => React.FC = ({
           }}
           dataProvider={dataProvider ?? MockJSONServer}
           i18nProvider={i18nProvider}
-          routerProvider={routerProvider}
-          legacyRouterProvider={legacyRouterProvider ?? MockRouterProvider}
-          legacyAuthProvider={legacyAuthProvider}
+          routerProvider={routerProvider ?? mockRouterBindings()}
           authProvider={authProvider}
           notificationProvider={notificationProvider}
-          resources={resources ?? [{ name: "posts", list: List }]}
+          resources={resources ?? [{ name: "posts", list: "/list" }]}
           accessControlProvider={accessControlProvider}
-          DashboardPage={DashboardPage ?? undefined}
         >
           {children}
         </Refine>
@@ -99,13 +75,10 @@ export const TestWrapper: (props: ITestWrapperProps) => React.FC = ({
 };
 export {
   MockJSONServer,
-  MockRouterProvider,
   MockAccessControlProvider,
   MockLiveProvider,
   mockRouterBindings,
   mockAuthProvider,
-  mockLegacyAuthProvider,
-  mockLegacyRouterProvider,
 } from "./dataMocks";
 
 // re-export everything

packages/ui-tests/src/test/jest.setup.ts

@@ -1,5 +1,5 @@
 import "@testing-library/jest-dom";
-import "@testing-library/jest-dom/extend-expect";
+import "@testing-library/react";
 
 /** Antd mocks */
 window.matchMedia = jest.fn().mockImplementation((query) => {

packages/ui-tests/src/tests/autoSaveIndicator.tsx

@@ -34,7 +34,7 @@ export const autoSaveIndicatorTests = (
 
     it("should render loading", async () => {
       const { findByText, getByText } = render(
-        <AutoSaveIndicator status="loading" />,
+        <AutoSaveIndicator status="pending" />,
       );
 
       await findByText("saving...");

packages/ui-tests/src/tests/breadcrumb.tsx

@@ -18,8 +18,6 @@ const renderBreadcrumb = (
   );
 };
 
-const DummyResourcePage = () => <div>Dummy</div>;
-
 export const breadcrumbTests = (
   Breadcrumb: React.ComponentType<RefineBreadcrumbProps<any>>,
 ): void => {
@@ -51,7 +49,7 @@ export const breadcrumbTests = (
 
     it("should render breadcrumb items with link", async () => {
       const { container } = renderBreadcrumb(<Breadcrumb />, {
-        resources: [{ name: "posts", list: DummyResourcePage }],
+        resources: [{ name: "posts", list: "/posts" }],
         routerInitialEntries: ["/posts/create"],
       });
 
@@ -64,7 +62,9 @@ export const breadcrumbTests = (
         resources: [
           {
             name: "posts",
-            icon: <div data-testid="resource-icon" />,
+            meta: {
+              icon: <div data-testid="resource-icon" />,
+            },
           },
         ],
         routerInitialEntries: ["/posts/create"],
@@ -78,7 +78,9 @@ export const breadcrumbTests = (
         resources: [
           {
             name: "posts",
-            icon: <div data-testid="resource-icon" />,
+            meta: {
+              icon: <div data-testid="resource-icon" />,
+            },
           },
         ],
         routerInitialEntries: ["/posts/create"],

packages/ui-tests/src/tests/buttons/list.tsx

@@ -422,7 +422,7 @@ export const buttonListTests = (
             resources: [
               {
                 name: "posts",
-                options: { route: "custom-route-posts" },
+                list: "/posts",
               },
               { name: "posts" },
             ],

packages/ui-tests/src/tests/crud/edit.tsx

@@ -131,7 +131,7 @@ export const crudEditTests = (
         />,
         undefined,
         {
-          resources: [{ name: "posts", canDelete: true }],
+          resources: [{ name: "posts", meta: { canDelete: true } }],
           routerInitialEntries: ["/posts/edit/1"],
         },
       );

packages/ui-tests/src/tests/crud/list.tsx

@@ -102,7 +102,7 @@ export const crudListTests = (
           resources: [
             {
               name: "posts",
-              create: () => null,
+              create: "/posts/create",
             },
           ],
           routerInitialEntries: ["/posts"],
@@ -125,7 +125,7 @@ export const crudListTests = (
           resources: [
             {
               name: "posts",
-              canCreate: false,
+              meta: { canCreate: false },
             },
           ],
           routerInitialEntries: ["/posts"],
@@ -167,7 +167,7 @@ export const crudListTests = (
           resources: [
             {
               name: "posts",
-              create: () => null,
+              create: "/posts/create",
             },
           ],
           routerInitialEntries: ["/posts"],

packages/ui-tests/src/tests/layout/header.tsx

@@ -5,16 +5,6 @@ import type { RefineLayoutHeaderProps } from "@refinedev/ui-types";
 
 import { render, TestWrapper } from "@test";
 
-const mockLegacyAuthProvider = {
-  login: () => Promise.resolve(),
-  logout: () => Promise.resolve(),
-  checkError: () => Promise.resolve(),
-  checkAuth: () => Promise.resolve(),
-  getPermissions: () => Promise.resolve(["admin"]),
-  getUserIdentity: () =>
-    Promise.resolve({ name: "username", avatar: "localhost:3000" }),
-};
-
 const mockAuthProvider: AuthProvider = {
   check: () => Promise.resolve({ authenticated: true }),
   login: () => Promise.resolve({ success: true }),
@@ -29,26 +19,6 @@ export const layoutHeaderTests = (
   HeaderElement: React.ComponentType<RefineLayoutHeaderProps>,
 ): void => {
   describe("[@refinedev/ui-tests] Common Tests / Header Element", () => {
-    // NOTE : Will be removed in v5
-    it("should render successfull user name and avatar in header with legacy authProvider", async () => {
-      const { findByText, queryByRole, queryByAltText } = render(
-        <HeaderElement />,
-        {
-          wrapper: TestWrapper({
-            legacyAuthProvider: mockLegacyAuthProvider,
-          }),
-        },
-      );
-
-      await findByText("username");
-      const imgByRole = queryByRole("img", { queryFallbacks: true });
-      const imgByAltText = queryByAltText("username");
-      expect(imgByRole ?? imgByAltText).toHaveAttribute(
-        "src",
-        "localhost:3000",
-      );
-    });
-
     it("should render successfull user name and avatar in header with authProvider", async () => {
       const { findByText, queryByRole, queryByAltText } = render(
         <HeaderElement />,