@madie/madie-design-system 1.2.34 → 1.2.37

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@madie/madie-design-system",
-  "version": "1.2.34",
+  "version": "1.2.37",
   "description": "Shared style guide across the Madie program.",
   "main": "dist/index.js",
   "homepage": "https://github.com/MeasureAuthoringTool/madie-design-system",
@@ -117,7 +117,7 @@
     "@reach/portal": "^0.16.2",
     "@reach/tooltip": "^0.16.2",
     "axios": "^1.7.4",
-    "cookie": "^0.4.1",
+    "cookie": "^0.7.2",
     "cross-env": "^7.0.3",
     "d3-selection": "^1.4.2",
     "d3-shape": "^1.3.7",

package/test/components/Instant.test.js

@@ -0,0 +1,83 @@
+import "@testing-library/jest-dom";
+import React, { useState } from "react";
+import { render, fireEvent, screen } from "@testing-library/react";
+import Instant from "../../components/Instant";
+import dayjs from "dayjs";
+
+export const InstantTester = () => {
+    const [value, setValue] = useState("");
+    const handleDateTimeChange = (v) => {
+        setValue(v)
+    };
+    return (
+        <div>
+            <div data-testId="test-date">{value}</div>
+            <Instant
+                disabled={false}
+                id="status_date_time"
+                label="Status Date"
+                handleDateTimeChange={handleDateTimeChange}
+                dateTimeValue={value}
+                dateFieldSx={{}}
+            />
+        </div>)
+}
+
+
+describe("Instant", () => {
+    const { getByDisplayValue, findByTestId, findByText, getByText, getByTestId } = screen;
+    it("It renders as expected with static values", async () => {
+        const handleDateTimeChange = jest.fn();
+        render(
+            <div>
+                <Instant
+                    disabled={false}
+                    id="status_date_time"
+                    label="Status Date"
+                    handleDateTimeChange={handleDateTimeChange}
+                    dateTimeValue={dayjs("2022-04-17")}
+                    dateFieldSx={{}}
+                />
+            </div>
+        );
+        const labelText = await findByText("Status Date");
+            expect(labelText).toBeInTheDocument();
+            expect(await findByText("Status Date")).toBeInTheDocument();
+            expect(
+                getByDisplayValue("04/17/2022")
+            ).toBeInTheDocument();
+    });
+
+    it("we can change the date from null and when date to date", async () => {
+        await render(<InstantTester />)
+        const labelText = await findByText("Status Date");
+            expect(labelText).toBeInTheDocument();
+            expect(await findByText("Status Date")).toBeInTheDocument();
+            const inputField = await findByTestId("status_date_time-input");
+            fireEvent.change(inputField, { target: { value: "01/01/2026" } })
+            expect(
+                getByText("2026-01-01T00:00:00.000+00:00")
+            ).toBeInTheDocument();
+            fireEvent.change(inputField, { target: { value: "01/01/2027" } })
+            expect(
+                getByText("2027-01-01T00:00:00.000+00:00")
+            ).toBeInTheDocument();
+    });
+    it("Handles change for Hours, minutes, seconds, ms; does not combust.", async () => {
+
+        await render(<InstantTester />)
+        const labelText = await findByText("Status Date");
+        expect(labelText).toBeInTheDocument();
+        expect(await findByText("Status Date")).toBeInTheDocument();
+        const inputField = await findByTestId("status_date_time-input");
+        fireEvent.change(inputField, { target: { value: "01/01/2026" } })
+        expect(getByText("2026-01-01T00:00:00.000+00:00")).toBeInTheDocument();
+        fireEvent.change(getByTestId("status_date_time-hour-input"), { target : {value: "1"}})
+        fireEvent.change(getByTestId("status_date_time-minute-input"), { target : {value: "2"}})
+        fireEvent.change(getByTestId("status_date_time-second-input"), { target : {value: "3"}})
+        fireEvent.change(getByTestId("status_date_time-millisecond-input"), { target : {value: "4"}})
+        expect(
+            getByText("2026-01-01T01:02:03.004+00:00")
+        ).toBeInTheDocument();
+    });
+});

package/test/components/TextField.test.js

@@ -2,7 +2,12 @@ import "@testing-library/jest-dom";
 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 } from "@testing-library/react";
+import {
+    findByTestId,
+    render,
+    fireEvent,
+    screen,
+} from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
 import * as React from "react";
@@ -98,43 +103,70 @@ describe("TextField", () => {
                     size="small"
                 />
             );
-            const tooltipTrigger = await findByTestId("testName-tooltip-button")
+            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")
+                    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")
+            });
+            expect(getByTestId("testName-tooltip")).not.toHaveClass("hidden");
             act(() => {
                 fireEvent.mouseLeave(getByTestId("testName-tooltip-button"));
-            })
-            expect(getByTestId("testName-tooltip")).toHaveClass("hidden")
+            });
+            expect(getByTestId("testName-tooltip")).toHaveClass("hidden");
 
             // focus, blur
             act(() => {
                 fireEvent.focus(getByTestId("testName-tooltip-button"));
-            })
-            expect(getByTestId("testName-tooltip")).not.toHaveClass("hidden")
+            });
+            expect(getByTestId("testName-tooltip")).not.toHaveClass("hidden");
 
             act(() => {
                 fireEvent.blur(getByTestId("testName-tooltip-button"));
-            })
-            expect(getByTestId("testName-tooltip")).toHaveClass("hidden")
+            });
+            expect(getByTestId("testName-tooltip")).toHaveClass("hidden");
+        });
+    });
+
+    test("Textfield has different color for label", async () => {
+        await act(async () => {
+            const { findByTestId, getByTestId } = render(
+                <TextField
+                    placeholder="test Name"
+                    required
+                    label="test Name"
+                    labelColor={"#1976d2"}
+                    id="testName"
+                    inputProps={{ "data-testid": "test-name-input" }}
+                    data-testid="test-name-text-field"
+                    size="small"
+                />
+            );
+            screen.debug(undefined, 60000);
+            expect(
+                await findByTestId("test-name-text-field")
+            ).toBeInTheDocument();
+            const textNode = await getByTestId("test-name-input");
+            userEvent.type(textNode, "newVal");
+            Simulate.change(textNode);
+            expect(textNode.value).toBe("newVal");
         });
     });
 });

package/webpack.config.react.js

@@ -80,6 +80,19 @@ module.exports = {
         libraryTarget: "umd",
         globalObject: "this",
     },
+    // below lines fix hot reload but put CI/CD into a hanging state
+    // watch: true,
+    // watchOptions: {
+    //     ignored: /node_modules/, // Don't watch files in node_modules
+    //     aggregateTimeout: 300,
+    //     poll: 1000, 
+    //   },
+    //   devServer: {
+    //     // static: path.join(__dirname, "dist/react"),
+    //     // compress: true,
+    //     hot: true, // Enable hot module replacement
+    //     watchFiles: ["src/**/*", "components/**/*"], // Watch these files
+    // },
     devtool: "source-map",
     module: _module,
     plugins,