@madie/madie-design-system 1.2.85 → 1.2.87

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@madie/madie-design-system",
-    "version": "1.2.85",
+    "version": "1.2.87",
     "description": "Shared style guide across the Madie program.",
     "main": "dist/index.js",
     "homepage": "https://github.com/MeasureAuthoringTool/madie-design-system",

package/styles/components/_text.scss

@@ -21,7 +21,7 @@ body {
 }
 
 p {
-	margin-bottom: 30px;
+	margin-bottom: 8px;
 
 	&.lead {
 		color: $lead-color;
@@ -31,8 +31,8 @@ p {
 
 	& ~ ul,
 	& ~ ol {
-		margin-bottom: 30px;
-		margin-top: -25px;
+		margin-bottom: 8px;
+		margin-top: -3px;
 	}
 }
 

package/test/components/MadieDeleteDialog.test.js

@@ -2,7 +2,7 @@ import "@testing-library/jest-dom";
 import { describe, expect, test } from "@jest/globals";
 import MadieDeleteDialog from "../../components/MadieDeleteDialog/index";
 import { act } from "react-dom/test-utils";
-import { render, fireEvent, waitFor } from "@testing-library/react";
+import { render, fireEvent, waitFor, screen } from "@testing-library/react";
 
 import React, { useState } from "react";
 
@@ -140,7 +140,7 @@ describe("MadieDeleteDialog", () => {
         });
     });
 
-     test("Dialog shows alternate text", async () => {
+    test("Dialog shows alternate text", async () => {
         const { getByTestId, queryByText } = render(
             <MadieDeleteDialog
                 open={true}
@@ -150,7 +150,7 @@ describe("MadieDeleteDialog", () => {
                 dialogTitle="Remove Element"
                 alternateText="Remove"
                 name="element"
-            />,
+            />
         );
 
         const deleteDialog = await getByTestId("delete-dialog");
@@ -158,12 +158,52 @@ describe("MadieDeleteDialog", () => {
         await waitFor(() => {
             expect(
                 deleteDialog.textContent.includes(
-                    "Are you sure you want to remove element?",
-                ),
+                    "Are you sure you want to remove element?"
+                )
             ).toBeTruthy();
             expect(
-                queryByText("This Action cannot be undone."),
+                queryByText("This Action cannot be undone.")
             ).not.toBeInTheDocument();
         });
     });
+
+    test("Dialog shows custom dialog", async () => {
+        const { getByTestId, queryByText } = render(
+            <MadieDeleteDialog
+                open={true}
+                onClose={() => setDialogOpen(false)}
+                onContinue={() => setDialogOpen(false)}
+                hideWarning={true}
+                dialogTitle="Delete Item"
+                customDialogBody={<span>Custom Dialog</span>}
+                name="Test Item"
+            />
+        );
+
+        const deleteDialog = await getByTestId("delete-dialog");
+        expect(deleteDialog).toBeInTheDocument();
+        await waitFor(() => {
+            expect(screen.getByText("Custom Dialog")).toBeInTheDocument();
+        });
+    });
+
+    test("renders '?' only if statement is not provided", async () => {
+        const { getByTestId, queryByText } = render(
+            <MadieDeleteDialog
+                open={true}
+                onClose={() => setDialogOpen(false)}
+                onContinue={() => setDialogOpen(false)}
+                hideWarning={true}
+                dialogTitle="Delete Item"
+                statement={true}
+                name="Test Item"
+            />
+        );
+
+        const deleteDialog = await getByTestId("delete-dialog");
+        expect(deleteDialog).toBeInTheDocument();
+        await waitFor(() => {
+            expect(screen.queryByText("?")).not.toBeInTheDocument();
+        });
+    });
 });

package/test/components/TextField.test.js

@@ -4,9 +4,7 @@ import { describe, expect, test } from "@jest/globals";
 import TextField from "../../components/TextField/index";
 import { act, Simulate } from "react-dom/test-utils";
 import {
-    findByTestId,
     render,
-    fireEvent,
     screen,
 } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
@@ -107,59 +105,27 @@ describe("TextField", () => {
     });
 
     test("tooltip text renders, can be seen and removed.", async () => {
-        await act(async () => {
-            const { getByTestId, findByTestId, getByText } = render(
-                <TextField
-                    placeholder="test Name"
-                    helperText="helper text"
-                    label="test Name"
-                    id="testName"
-                    tooltipText="tooltip text"
-                    inputProps={{ "data-testid": "test-name-input" }}
-                    data-testid="test-name-text-field"
-                    size="small"
-                />
-            );
-            const tooltipTrigger = await findByTestId(
-                "testName-tooltip-button"
-            );
-
-            // click and escape
-            act(() => {
-                fireEvent.click(tooltipTrigger);
-            });
-            expect(getByText("tooltip text")).toBeInTheDocument();
-            act(() => {
-                fireEvent.keyDown(getByText(/tooltip text/i), {
-                    key: "Escape",
-                    code: "Escape",
-                    keyCode: 27,
-                    charCode: 27,
-                });
-            });
-            expect(getByTestId("testName-tooltip")).toHaveClass("hidden");
-
-            // enter and leave
-            act(() => {
-                fireEvent.mouseEnter(getByTestId("testName-tooltip-button"));
-            });
-            expect(getByTestId("testName-tooltip")).not.toHaveClass("hidden");
-            act(() => {
-                fireEvent.mouseLeave(getByTestId("testName-tooltip-button"));
-            });
-            expect(getByTestId("testName-tooltip")).toHaveClass("hidden");
-
-            // focus, blur
-            act(() => {
-                fireEvent.focus(getByTestId("testName-tooltip-button"));
-            });
-            expect(getByTestId("testName-tooltip")).not.toHaveClass("hidden");
-
-            act(() => {
-                fireEvent.blur(getByTestId("testName-tooltip-button"));
-            });
-            expect(getByTestId("testName-tooltip")).toHaveClass("hidden");
+        const { findByTestId } = render(
+            <TextField
+                placeholder="test Name"
+                helperText="helper text"
+                label="test Name"
+                id="testName"
+                tooltipText="tooltip text"
+                inputProps={{ "data-testid": "test-name-input" }}
+                data-testid="test-name-text-field"
+                size="small"
+            />
+        );
+        const tooltipTrigger = await findByTestId(
+            "testName-tooltip"
+        );
+        act(() => {
+            userEvent.hover(tooltipTrigger);
         });
+
+        const tooltip = await screen.findByRole('tooltip');
+        expect(tooltip).toHaveTextContent('tooltip text');
     });
 
     test("Textfield has different color for label", async () => {