test(examples): add show component and test to data-provider-strapi-v4

refinedev · May 29, 2023 · 32af68a · 32af68a
1 parent e8950bc
commit 32af68a
Show file tree

Hide file tree

Showing 7 changed files with 183 additions and 2 deletions.
diff --git a/cypress/support/commands/intercepts/strapi-v4.ts b/cypress/support/commands/intercepts/strapi-v4.ts
@@ -29,7 +29,7 @@ Cypress.Commands.add("interceptStrapiV4GETPost", () => {
                 {
                     method: "GET",
                     hostname: hostname,
-                    pathname: `${BASE_PATH}/posts/**`,
+                    pathname: `${BASE_PATH}/posts/*`,
                 },
 
                 (req) => {
@@ -125,3 +125,34 @@ Cypress.Commands.add("interceptStrapiV4GETCategories", () => {
         )
         .as("strapiV4GetCategories");
 });
+
+Cypress.Commands.add("interceptStrapiV4GETCategory", () => {
+    return cy
+        .fixture("categories")
+        .then((categories) => {
+            return cy.intercept(
+                {
+                    method: "GET",
+                    hostname: hostname,
+                    pathname: `${BASE_PATH}/categories/*`,
+                },
+
+                (req) => {
+                    const id = getIdFromURL(req.url);
+                    const category = categories.find(
+                        (category) => category.id.toString() === id.toString(),
+                    );
+
+                    if (!category) {
+                        req.reply(404, {});
+                        return;
+                    }
+
+                    req.reply({
+                        data: category,
+                    });
+                },
+            );
+        })
+        .as("strapiV4GetCategory");
+});
diff --git a/cypress/support/index.d.ts b/cypress/support/index.d.ts
@@ -122,5 +122,6 @@ declare namespace Cypress {
         interceptStrapiV4PUTPost(): Chainable<null>;
         interceptStrapiV4DELETEPost(): Chainable<null>;
         interceptStrapiV4GETCategories(): Chainable<null>;
+        interceptStrapiV4GETCategory(): Chainable<null>;
     }
 }
diff --git a/examples/data-provider-strapi-v4/cypress/e2e/all.cy.ts b/examples/data-provider-strapi-v4/cypress/e2e/all.cy.ts
@@ -31,6 +31,7 @@ describe("data-provider-strapi-v4", () => {
         cy.interceptStrapiV4PUTPost();
         cy.interceptStrapiV4DELETEPost();
         cy.interceptStrapiV4GETCategories();
+        cy.interceptStrapiV4GETCategory();
 
         cy.visit(BASE_URL);
     });
@@ -177,6 +178,44 @@ describe("data-provider-strapi-v4", () => {
             cy.getAntdLoadingOverlay().should("not.exist");
         });
 
+        it("should show", () => {
+            cy.getShowButton().first().click();
+
+            cy.location("pathname").should("include", "/posts/show/");
+            cy.getAntdLoadingOverlay().should("not.exist");
+
+            cy.wait("@strapiV4GetPost").then(({ request, response }) => {
+                expect(request.query).to.deep.equal({
+                    populate: ["category", "cover"],
+                });
+                expect(response?.body).to.deep.equal({
+                    data: {
+                        id: 1,
+                        title: "Ut Voluptatem Est",
+                        content:
+                            "Repellendus temporibus provident nobis. Non adipisci quod et est dolorem sed qui. A ut omnis. Et perspiciatis quibusdam maiores aliquid est fugit nam odit. Aut aliquam consectetur deleniti commodi velit. Eum eum aperiam voluptate quos quo. Ut quia doloribus a. Molestiae non est fugit enim fugiat non ea quas accusamus. Consequuntur voluptatem nesciunt dolorum expedita optio deserunt. Illo dolorem et similique.",
+                        category: {
+                            id: 1,
+                        },
+                        status: "published",
+                        createdAt: "2022-06-12T11:03:09.829Z",
+                        slug: "ut-voluptatem-est",
+                    },
+                    meta: {},
+                });
+            });
+
+            cy.wait("@strapiV4GetCategory").then(({ request, response }) => {
+                expect(request.url).to.includes("/categories/1");
+                expect(response?.body).to.deep.equal({
+                    data: {
+                        id: 1,
+                        title: "Sint Ipsam Tempora",
+                    },
+                });
+            });
+        });
+
         it("should create", () => {
             cy.getCreateButton().click();
             cy.location("pathname").should("eq", "/posts/create");

diff --git a/examples/data-provider-strapi-v4/src/App.tsx b/examples/data-provider-strapi-v4/src/App.tsx
@@ -22,7 +22,7 @@ import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom";
 
 import "@refinedev/antd/dist/reset.css";
 
-import { PostList, PostCreate, PostEdit } from "pages/posts";
+import { PostList, PostCreate, PostEdit, PostShow } from "pages/posts";
 import { UserList } from "pages/users";
 import { CategoryList, CategoryCreate, CategoryEdit } from "pages/categories";
 
@@ -140,6 +140,7 @@ const App: React.FC = () => {
                             list: "/posts",
                             create: "/posts/create",
                             edit: "/posts/edit/:id",
+                            show: "/posts/show/:id",
                             meta: {
                                 canDelete: true,
                             },
@@ -184,6 +185,7 @@ const App: React.FC = () => {
                                 <Route index element={<PostList />} />
                                 <Route path="create" element={<PostCreate />} />
                                 <Route path="edit/:id" element={<PostEdit />} />
+                                <Route path="show/:id" element={<PostShow />} />
                             </Route>
 
                             <Route path="/categories">

diff --git a/examples/data-provider-strapi-v4/src/interfaces/index.d.ts b/examples/data-provider-strapi-v4/src/interfaces/index.d.ts
@@ -10,4 +10,22 @@ export interface IPost {
     content: string;
     locale: string;
     createdAt: string;
+    cover: {
+        id: number;
+        name: string;
+        alternativeText: any;
+        caption: any;
+        width: number;
+        height: number;
+        hash: string;
+        ext: string;
+        mime: string;
+        size: number;
+        url: string;
+        previewUrl: any;
+        provider: string;
+        provider_metadata: any;
+        createdAt: string;
+        updatedAt: string;
+    }[];
 }
diff --git a/examples/data-provider-strapi-v4/src/pages/posts/list.tsx b/examples/data-provider-strapi-v4/src/pages/posts/list.tsx
@@ -151,6 +151,11 @@ export const PostList: React.FC<IResourceComponentsProps> = () => {
                     render={(_, record) => {
                         return (
                             <Space>
+                                <ShowButton
+                                    hideText
+                                    size="small"
+                                    recordItemId={record.id}
+                                />
                                 <EditButton
                                     hideText
                                     size="small"

diff --git a/examples/data-provider-strapi-v4/src/pages/posts/show.tsx b/examples/data-provider-strapi-v4/src/pages/posts/show.tsx
@@ -0,0 +1,85 @@
+import { useShow, IResourceComponentsProps, useOne } from "@refinedev/core";
+
+import {
+    Show,
+    MarkdownField,
+    ListButton,
+    EditButton,
+    RefreshButton,
+    ImageField,
+} from "@refinedev/antd";
+
+import { Space, Typography } from "antd";
+
+import { IPost, ICategory } from "interfaces";
+import { API_URL } from "../../constants";
+
+const { Title, Text } = Typography;
+
+export const PostShow: React.FC<IResourceComponentsProps> = () => {
+    const { queryResult } = useShow<IPost>({
+        metaData: { populate: ["category", "cover"] },
+    });
+
+    const { data, isLoading } = queryResult;
+    const record = data?.data;
+
+    const { data: categoryData, isLoading: categoryIsLoading } =
+        useOne<ICategory>({
+            resource: "categories",
+            id: record?.category?.id || "",
+            queryOptions: {
+                enabled: !!record,
+            },
+        });
+
+    const handleRefresh = () => {
+        queryResult.refetch();
+    };
+
+    return (
+        <Show
+            isLoading={isLoading}
+            headerProps={{
+                extra: (
+                    <>
+                        <ListButton />
+                        <EditButton />
+                        <RefreshButton onClick={handleRefresh} />
+                    </>
+                ),
+            }}
+        >
+            <Title level={5}>Id</Title>
+            <Text>{record?.id}</Text>
+
+            <Title level={5}>Title</Title>
+            <Text>{record?.title}</Text>
+
+            <Title level={5}>Category</Title>
+            <Text>
+                {categoryIsLoading ? "Loading..." : categoryData?.data?.title}
+            </Text>
+
+            <Title level={5}>Content</Title>
+            <MarkdownField value={record?.content} />
+
+            <Title level={5}>Images</Title>
+            <Space wrap>
+                {record?.cover ? (
+                    record?.cover.map((attributes) => {
+                        return (
+                            <ImageField
+                                key={attributes.id}
+                                value={`${API_URL}${attributes.url}`}
+                                width={200}
+                            />
+                        );
+                    })
+                ) : (
+                    <Text>Not found any images</Text>
+                )}
+            </Space>
+        </Show>
+    );
+};