@truedat/dd 4.47.6 → 4.47.9

package/src/components/__tests__/LinkStructureTagForm.spec.js

@@ -11,26 +11,27 @@ jest.spyOn(React, "useContext").mockImplementation(() => intl);
 describe("<LinkStructureTagForm />", () => {
   const deleteLinkStructureTag = jest.fn();
   const linkStructureTag = jest.fn();
-  const description = "foo";
+  const structureTags = [
+    { id: 1, name: "Tag1", description: "description test" },
+    { id: 2, name: "Tag2", description: "large desc".repeat(5) },
+    { id: 3, name: "Tag without description" },
+  ];
   const linkedStructureTags = [
     {
       id: 1,
-      description: "foo",
+      comment: "foo",
       inserted_at: "foo",
       updated_at: "foo",
       _embedded: {
         data_structure: { id: 1, external_id: "baz" },
-        data_structure_tag: { id: 1, name: "bar" }
-      }
-    }
-  ];
-  const structureTags = [
-    { id: 1, name: "foo" },
-    { id: 2, name: "bar" }
+        data_structure_tag: { ...structureTags[2] },
+      },
+    },
   ];
 
+  const comment = "foo";
   const structureId = 1;
-  const tagId = 1;
+  const tagId = 3;
   const linkId = 1;
 
   const propsCreate = {
@@ -38,18 +39,18 @@ describe("<LinkStructureTagForm />", () => {
     linkedStructureTags,
     linkStructureTag,
     structureId,
-    structureTags
+    structureTags,
   };
 
   const propsUpdate = {
     deleteLinkStructureTag,
-    description,
+    comment,
     linkedStructureTags,
     linkId,
     linkStructureTag,
     structureId,
     structureTags,
-    tagId
+    tagId,
   };
 
   it("matches the latest snapshot create", async () => {
@@ -69,6 +70,64 @@ describe("<LinkStructureTagForm />", () => {
     expect(container).toMatchSnapshot();
   });
 
+  it("matches the latest snapshot create without comment", async () => {
+    const linkedStructureTagWithoutComment = {
+      ...linkedStructureTags[0],
+    };
+    delete linkedStructureTagWithoutComment.comment;
+
+    const propsCreateWithoutComment = {
+      ...propsCreate,
+      linkedStructureTags: [linkedStructureTagWithoutComment],
+    };
+
+    const { container, getByRole, findByText } = render(
+      <LinkStructureTagForm {...propsCreateWithoutComment} />
+    );
+
+    // Select tag
+    userEvent.click(await findByText("Tag2"));
+
+    await waitFor(() =>
+      expect(getByRole("button", { name: /add/ })).not.toBeDisabled()
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it("create button enabled if there is only one tag available", async () => {
+    const propsCreateWithOneStrutureTagAvailable = {
+      ...propsCreate,
+      structureTags: [structureTags[1], structureTags[2]],
+    };
+
+    const { container, getByRole } = render(
+      <LinkStructureTagForm {...propsCreateWithOneStrutureTagAvailable} />
+    );
+    await waitFor(() =>
+      expect(getByRole("button", { name: /add/ })).not.toBeDisabled()
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it("Tag dropdown show tag description", async () => {
+    const { getByText } = render(<LinkStructureTagForm {...propsCreate} />);
+    await waitFor(() =>
+      expect(getByText("description test")).toBeInTheDocument()
+    );
+  });
+
+  it("Tag dropdown with tag with large description show ellipsis", async () => {
+    const { getByText } = render(<LinkStructureTagForm {...propsCreate} />);
+
+    const tagElement = getByText("Tag2");
+
+    await waitFor(() => expect(tagElement).toBeInTheDocument());
+
+    const descriptionElement = tagElement.parentElement.firstElementChild;
+
+    expect(descriptionElement).toHaveClass("description");
+  });
+
   it("calls ", async () => {
     const { queryByTestId, findByRole, findByText, getByRole } = render(
       <LinkStructureTagForm {...{ ...propsCreate, linkedStructureTags: [] }} />
@@ -80,30 +139,25 @@ describe("<LinkStructureTagForm />", () => {
     );
 
     // Select tag
-    userEvent.click(await findByText("bar"));
+    userEvent.click(await findByText("Tag1"));
 
-    // Submit button should still be disabled
+    // Submit button should now be enabled
     await waitFor(() =>
-      expect(getByRole("button", { name: /add/ })).toBeDisabled()
+      expect(getByRole("button", { name: /add/ })).not.toBeDisabled()
     );
 
     // Description
     // Issue: https://github.com/testing-library/user-event/issues/346
-    userEvent.type(queryByTestId("description-id"), "x");
-    userEvent.type(queryByTestId("description-id"), "yz");
-
-    // Submit button should now be enabled
-    await waitFor(() =>
-      expect(getByRole("button", { name: /add/ })).not.toBeDisabled()
-    );
+    userEvent.type(queryByTestId("comment-id"), "x");
+    userEvent.type(queryByTestId("comment-id"), "yz");
 
     userEvent.click(await findByRole("button", { name: /add/ }));
 
     await waitFor(() =>
       expect(linkStructureTag).toHaveBeenCalledWith({
         structureId,
-        tagId: 2,
-        tag: { description: "xyz" }
+        tagId: 1,
+        tag: { comment: "xyz" },
       })
     );
   });
@@ -123,7 +177,7 @@ describe("<LinkStructureTagForm />", () => {
     await waitFor(() =>
       expect(deleteLinkStructureTag).toHaveBeenCalledWith({
         structureId,
-        tagId
+        tagId,
       })
     );
   });

package/src/components/__tests__/LinkedStructureTag.spec.js

@@ -0,0 +1,133 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import { waitFor, fireEvent } from "@testing-library/react";
+import { LinkedStructureTag } from "../LinkedStructureTag";
+
+describe("<LinkedStructureTag />", () => {
+  const structureTags = [
+    { id: 1, name: "Tag1", description: "description test" },
+    { id: 2, name: "Tag2", description: "large desc".repeat(5) },
+    { id: 3, name: "Tag without description" },
+  ];
+
+  const props = {
+    id: 1,
+    _embedded: {
+      data_structure: { id: 1, external_id: "baz" },
+      data_structure_tag: { ...structureTags[2] },
+    },
+    editable: true,
+    comment: "foo comment",
+    loading: false,
+    structureTags,
+  };
+
+  const state = {
+    editableStructureTags: structureTags,
+    linkingStructureTags: false,
+    deletingStructureTags: false,
+  };
+
+  const renderOpts = {
+    state,
+  };
+
+  it("matches the latest snapshot", () => {
+    const { container } = render(<LinkedStructureTag {...props} />, renderOpts);
+    expect(container).toMatchSnapshot();
+  });
+
+  it("Show update modal when click in tad edit icon", async () => {
+    const { getByText, container } = render(
+      <LinkedStructureTag {...props} />,
+      renderOpts
+    );
+    fireEvent.click(container.getElementsByClassName("edit")[0]);
+    await waitFor(() => expect(getByText("Tag1")).toBeTruthy());
+  });
+
+  it("Show tooltip with description and comment", async () => {
+    const tagWithDescriptionProps = {
+      ...props,
+      _embedded: {
+        ...props._embedded,
+        data_structure_tag: { ...structureTags[0] },
+      },
+    };
+
+    const { getByText } = render(
+      <LinkedStructureTag {...tagWithDescriptionProps} />,
+      renderOpts
+    );
+
+    fireEvent.mouseEnter(getByText("Tag1"));
+
+    await waitFor(() => expect(getByText("Comment")).toBeTruthy());
+    await waitFor(() => expect(getByText("foo comment")).toBeTruthy());
+    await waitFor(() =>
+      expect(getByText(structureTags[0].description)).toBeTruthy()
+    );
+  });
+
+  it("Show tooltip with description", async () => {
+    const tagWithDescriptionWithoutCommentProps = {
+      ...props,
+      _embedded: {
+        ...props._embedded,
+        data_structure_tag: { ...structureTags[0] },
+      },
+      comment: undefined,
+    };
+
+    const { getByText, queryByText } = render(
+      <LinkedStructureTag {...tagWithDescriptionWithoutCommentProps} />,
+      renderOpts
+    );
+
+    fireEvent.mouseEnter(getByText("Tag1"));
+
+    await waitFor(() => expect(queryByText("Comment")).toBeNull());
+    await waitFor(() => expect(queryByText("foo comment")).toBeNull());
+    await waitFor(() =>
+      expect(getByText(structureTags[0].description)).toBeTruthy()
+    );
+  });
+
+  it("Show tooltip with comment", async () => {
+    const { getByText, queryByText } = render(
+      <LinkedStructureTag {...props} />,
+      renderOpts
+    );
+    fireEvent.mouseEnter(getByText("Tag without description"));
+
+    await waitFor(() => expect(getByText("Comment")).toBeTruthy());
+    await waitFor(() => expect(getByText("foo comment")).toBeTruthy());
+    await waitFor(() =>
+      expect(queryByText(structureTags[0].description)).toBeNull()
+    );
+  });
+
+  it("Tooltip not show without description and without comment", async () => {
+    const tagWithoutDescriptionWithoutComment = {
+      ...props,
+      comment: undefined,
+    };
+
+    const { getByText, queryByText, container } = render(
+      <LinkedStructureTag {...tagWithoutDescriptionWithoutComment} />,
+      renderOpts
+    );
+
+    fireEvent.mouseEnter(getByText("Tag without description"));
+
+    await waitFor(() => expect(queryByText("Comment")).toBeNull());
+    await waitFor(() => expect(queryByText("foo comment")).toBeNull());
+    await waitFor(() =>
+      expect(queryByText(structureTags[0].description)).toBeNull()
+    );
+
+    await waitFor(() =>
+      expect(container.getElementsByClassName("popup")).toHaveLength(0)
+    );
+  });
+});

package/src/components/__tests__/StructureTagForm.spec.js

@@ -19,6 +19,7 @@ describe("<StructureTagForm />", () => {
   const structureTag = {
     id: 1,
     name: "foo",
+    description: "bar",
     domainIds: [],
   };
   const saving = false;
@@ -45,7 +46,7 @@ describe("<StructureTagForm />", () => {
       expect(getByRole("button", { name: /save/i })).toBeDisabled()
     );
 
-    // Description
+    // Name
     userEvent.type(getByRole("textbox", { name: /name/i }), "foo");
 
     // Submit button should now be enabled
@@ -53,6 +54,9 @@ describe("<StructureTagForm />", () => {
       expect(getByRole("button", { name: /save/i })).not.toBeDisabled()
     );
 
+    // Name
+    userEvent.type(getByRole("textbox", { name: /description/i }), "bar");
+
     // Submit
     userEvent.click(getByRole("button", { name: /save/i }));
 
@@ -61,6 +65,7 @@ describe("<StructureTagForm />", () => {
     });
     expect(onSubmit.mock.calls[0][0]).toMatchObject({
       name: "foofoo",
+      description: "barbar",
       domainIds: [],
     });
   });

package/src/components/__tests__/StructureTagsCards.spec.js

@@ -14,6 +14,7 @@ const structureTagsMock = {
           __typename: "StructureTag",
           id: "1",
           name: "tag1",
+          description: "tag_desc_1",
           domainIds: [],
           structureCount: 1,
         },
@@ -21,6 +22,7 @@ const structureTagsMock = {
           __typename: "StructureTag",
           id: "2",
           name: "tag2",
+          description: "tag_desc_2",
           domainIds: ["1"],
           structureCount: 1,
         },