@madie/madie-design-system 1.0.2 → 1.0.3

package/test/components/SideNavUI.test.js

@@ -1,23 +1,23 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import jwt from 'jsonwebtoken';
+import React from "react";
+import { render } from "@testing-library/react";
+import jwt from "jsonwebtoken";
 
-import { SideNavUI } from '../../components/SideNav/UI';
+import { SideNavUI } from "../../components/SideNav/UI";
 
-describe('SideNavUI', () => {
-  it('renders the sidebar HTML', () => {
-    const token = jwt.sign(
-      {
-        exp: Math.floor(Date.now() / 1000) + 60 * 60,
-        data: {
-          firstName: 'Bobby',
-        },
-      },
-      'secret'
-    );
-    document.cookie = `qpp_auth_token=${token}`;
+describe("SideNavUI", () => {
+    it("renders the sidebar HTML", () => {
+        const token = jwt.sign(
+            {
+                exp: Math.floor(Date.now() / 1000) + 60 * 60,
+                data: {
+                    firstName: "Bobby",
+                },
+            },
+            "secret"
+        );
+        document.cookie = `qpp_auth_token=${token}`;
 
-    const { container } = render(<SideNavUI svgIcons="" />);
-    expect(container.querySelector('aside')).toBeDefined();
-  });
+        const { container } = render(<SideNavUI svgIcons="" />);
+        expect(container.querySelector("aside")).toBeDefined();
+    });
 });

package/test/components/TextField.test.js

@@ -0,0 +1,50 @@
+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 { render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import * as React from "react";
+
+describe("TextField", () => {
+    test("Textfield exists, and simulates input correctly", async () => {
+        await act(async () => {
+            const { findByTestId, getByTestId } = render(
+                <TextField
+                    placeholder="test Name"
+                    required
+                    label="test Name"
+                    id="testName"
+                    inputProps={{ "data-testid": "test-name-input" }}
+                    data-testid="test-name-text-field"
+                    size="small"
+                />
+            );
+            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");
+        });
+    });
+    test("Textfield renders with helper text", async () => {
+        await act(async () => {
+            const { findByText } = render(
+                <TextField
+                    placeholder="test Name"
+                    helperText="helper text"
+                    label="test Name"
+                    id="testName"
+                    inputProps={{ "data-testid": "test-name-input" }}
+                    data-testid="test-name-text-field"
+                    size="small"
+                />
+            );
+            const helperText = await findByText("helper text");
+            expect(helperText).toBeInTheDocument();
+        });
+    });
+});

package/test/components/Tooltip.test.js

@@ -1,147 +1,147 @@
-import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
-import ReactTestUtils from 'react-dom/test-utils';
-import { expect } from 'chai';
-import Tooltip from '../../components/Tooltip';
+import React, { Component } from "react";
+import ReactDOM from "react-dom";
+import ReactTestUtils from "react-dom/test-utils";
+import { expect } from "chai";
+import Tooltip from "../../components/Tooltip";
 import positionTip, {
-  positionTriangle,
-} from '../../components/Tooltip/position';
+    positionTriangle,
+} from "../../components/Tooltip/position";
 
 class Wrapper extends Component {
-  render() {
-    return this.props.children;
-  }
+    render() {
+        return this.props.children;
+    }
 }
 
-describe('Tooltip', () => {
-  it('renders children into document', () => {
-    const component = ReactTestUtils.renderIntoDocument(
-      <Wrapper>
-        <Tooltip label="tooltip text">
-          <button>Tooltip Button</button>
-        </Tooltip>
-      </Wrapper>
-    );
-    const tooltipButton = ReactTestUtils.findRenderedDOMComponentWithTag(
-      component,
-      'button'
-    );
-    const node = ReactDOM.findDOMNode(tooltipButton);
-    expect(ReactTestUtils.isDOMComponent(node)).to.be.true;
-  });
-
-  it('tooltip is not rendered until activted', () => {
-    const component = ReactTestUtils.renderIntoDocument(
-      <Wrapper>
-        <Tooltip label="tooltip text">
-          <button>Tooltip Button</button>
-        </Tooltip>
-      </Wrapper>
-    );
-    const tooltip = document.body.querySelector('div[data-reach-tooltip]');
-    expect(tooltip).to.equal(null);
-  });
-
-  it('renders a tooltip when activated', () => {
-    const component = ReactTestUtils.renderIntoDocument(
-      <Wrapper>
-        <Tooltip DEBUG_STYLE label="tooltip text">
-          <button>Tooltip Button</button>
-        </Tooltip>
-      </Wrapper>
-    );
-    const tooltip = document.body.querySelector('div[data-reach-tooltip]');
-    expect(tooltip).not.to.equal(null);
-  });
-
-  describe('position', () => {
-    it('returns empty object if triggerRect or tooltipRect are falsy', () => {
-      const position = positionTip();
-      expect(position).to.deep.equal({});
+describe("Tooltip", () => {
+    it("renders children into document", () => {
+        const component = ReactTestUtils.renderIntoDocument(
+            <Wrapper>
+                <Tooltip label="tooltip text">
+                    <button>Tooltip Button</button>
+                </Tooltip>
+            </Wrapper>
+        );
+        const tooltipButton = ReactTestUtils.findRenderedDOMComponentWithTag(
+            component,
+            "button"
+        );
+        const node = ReactDOM.findDOMNode(tooltipButton);
+        expect(ReactTestUtils.isDOMComponent(node)).to.be.true;
     });
 
-    it('calculates tooltip position above trigger', () => {
-      const triggerRect = {
-        x: 100,
-        y: 100,
-        width: 16,
-        height: 16,
-        top: 100,
-        right: 116,
-        bottom: 116,
-        left: 100,
-      };
-      const tooltipRect = {
-        width: 130,
-        height: 50,
-      };
-      const position = positionTip(triggerRect, tooltipRect);
-      expect(position).to.deep.equal({
-        left: '43px',
-        top: '38px',
-      });
+    it("tooltip is not rendered until activted", () => {
+        const component = ReactTestUtils.renderIntoDocument(
+            <Wrapper>
+                <Tooltip label="tooltip text">
+                    <button>Tooltip Button</button>
+                </Tooltip>
+            </Wrapper>
+        );
+        const tooltip = document.body.querySelector("div[data-reach-tooltip]");
+        expect(tooltip).to.equal(null);
     });
 
-    it('calculates tooltip position below trigger', () => {
-      const triggerRect = {
-        x: 100,
-        y: 40,
-        width: 16,
-        height: 16,
-        top: 40,
-        right: 116,
-        bottom: 56,
-        left: 100,
-      };
-      const tooltipRect = {
-        width: 130,
-        height: 50,
-      };
-      const position = positionTip(triggerRect, tooltipRect);
-      expect(position).to.deep.equal({
-        left: '43px',
-        top: '68px',
-      });
+    it("renders a tooltip when activated", () => {
+        const component = ReactTestUtils.renderIntoDocument(
+            <Wrapper>
+                <Tooltip DEBUG_STYLE label="tooltip text">
+                    <button>Tooltip Button</button>
+                </Tooltip>
+            </Wrapper>
+        );
+        const tooltip = document.body.querySelector("div[data-reach-tooltip]");
+        expect(tooltip).not.to.equal(null);
     });
 
-    it('calculates triangle tip position above trigger', () => {
-      const triggerRect = {
-        x: 100,
-        y: 100,
-        width: 16,
-        height: 16,
-        top: 100,
-        right: 116,
-        bottom: 116,
-        left: 100,
-      };
-      const tooltipRect = {
-        width: 130,
-        height: 50,
-      };
-      const positionCSS = positionTriangle(triggerRect, tooltipRect);
-      expect(positionCSS).to.match(/border-top: 8px solid;/);
-      expect(positionCSS).to.match(/top: 88px;/);
-    });
+    describe("position", () => {
+        it("returns empty object if triggerRect or tooltipRect are falsy", () => {
+            const position = positionTip();
+            expect(position).to.deep.equal({});
+        });
+
+        it("calculates tooltip position above trigger", () => {
+            const triggerRect = {
+                x: 100,
+                y: 100,
+                width: 16,
+                height: 16,
+                top: 100,
+                right: 116,
+                bottom: 116,
+                left: 100,
+            };
+            const tooltipRect = {
+                width: 130,
+                height: 50,
+            };
+            const position = positionTip(triggerRect, tooltipRect);
+            expect(position).to.deep.equal({
+                left: "43px",
+                top: "38px",
+            });
+        });
+
+        it("calculates tooltip position below trigger", () => {
+            const triggerRect = {
+                x: 100,
+                y: 40,
+                width: 16,
+                height: 16,
+                top: 40,
+                right: 116,
+                bottom: 56,
+                left: 100,
+            };
+            const tooltipRect = {
+                width: 130,
+                height: 50,
+            };
+            const position = positionTip(triggerRect, tooltipRect);
+            expect(position).to.deep.equal({
+                left: "43px",
+                top: "68px",
+            });
+        });
+
+        it("calculates triangle tip position above trigger", () => {
+            const triggerRect = {
+                x: 100,
+                y: 100,
+                width: 16,
+                height: 16,
+                top: 100,
+                right: 116,
+                bottom: 116,
+                left: 100,
+            };
+            const tooltipRect = {
+                width: 130,
+                height: 50,
+            };
+            const positionCSS = positionTriangle(triggerRect, tooltipRect);
+            expect(positionCSS).to.match(/border-top: 8px solid;/);
+            expect(positionCSS).to.match(/top: 88px;/);
+        });
 
-    it('calculates triangle tip position below trigger', () => {
-      const triggerRect = {
-        x: 100,
-        y: 40,
-        width: 16,
-        height: 16,
-        top: 40,
-        right: 116,
-        bottom: 56,
-        left: 100,
-      };
-      const tooltipRect = {
-        width: 130,
-        height: 50,
-      };
-      const positionCSS = positionTriangle(triggerRect, tooltipRect);
-      expect(positionCSS).to.match(/border-bottom: 8px solid;/);
-      expect(positionCSS).to.match(/top: 60px;/);
+        it("calculates triangle tip position below trigger", () => {
+            const triggerRect = {
+                x: 100,
+                y: 40,
+                width: 16,
+                height: 16,
+                top: 40,
+                right: 116,
+                bottom: 56,
+                left: 100,
+            };
+            const tooltipRect = {
+                width: 130,
+                height: 50,
+            };
+            const positionCSS = positionTriangle(triggerRect, tooltipRect);
+            expect(positionCSS).to.match(/border-bottom: 8px solid;/);
+            expect(positionCSS).to.match(/top: 60px;/);
+        });
     });
-  });
 });

package/test/index.test.js

@@ -1,8 +1,8 @@
-'use strict';
-import QPPStyle from '../index.js';
+"use strict";
+import QPPStyle from "../index.js";
 
-describe('QPPStyle', () => {
-  test('should be an object', () => {
-    expect(typeof QPPStyle).toBe('object');
-  });
+describe("QPPStyle", () => {
+    test("should be an object", () => {
+        expect(typeof QPPStyle).toBe("object");
+    });
 });