@madie/madie-design-system 1.2.62 → 2.0.0

package/test/components/FooterUI.test.js

@@ -1,122 +0,0 @@
-import React, { Component } from "react";
-import ReactDOM from "react-dom";
-import ReactTestUtils from "react-dom/test-utils";
-import { expect } from "chai";
-import FooterUI from "../../components/Footer/FooterUI";
-
-class Wrapper extends Component {
-    render() {
-        return this.props.children;
-    }
-}
-
-describe("FooterUI", () => {
-    it("renders the footer HTML", () => {
-        // Native elements and functional stateless react components don't have public instances and
-        // cannot be used with renderIntoDocument. React has a separate package install for a shallow
-        // renderer that allows this. Otherwise, you need a wrapper when testing presentational components.
-        const component = ReactTestUtils.renderIntoDocument(
-            <Wrapper>
-                <FooterUI />
-            </Wrapper>
-        );
-        const footer = ReactTestUtils.findRenderedDOMComponentWithTag(
-            component,
-            "footer"
-        );
-        const footerNode = ReactDOM.findDOMNode(footer);
-        expect(ReactTestUtils.isDOMComponent(footerNode)).to.be.true;
-    });
-
-    it("renders the footer HTML", () => {
-        const version = "1.2.3.4";
-        const component = ReactTestUtils.renderIntoDocument(
-            <Wrapper>
-                <FooterUI buildVersion={version} />
-            </Wrapper>
-        );
-        const buildVersion = ReactTestUtils.findRenderedDOMComponentWithClass(
-            component,
-            "build-version"
-        );
-        const buildVersionNode = ReactDOM.findDOMNode(buildVersion);
-        expect(ReactTestUtils.isDOMComponent(buildVersionNode)).to.be.true;
-        expect(buildVersion.textContent).to.equal(version);
-    });
-
-    it("renders the footer properly in the Authenticated experience", () => {
-        const component = ReactTestUtils.renderIntoDocument(
-            <Wrapper>
-                <FooterUI isFullWidth={true} />
-            </Wrapper>
-        );
-        const isFullWidth = ReactTestUtils.scryRenderedDOMComponentsWithClass(
-            component,
-            "container-full-width"
-        )[1];
-        const isFullWidthNode = ReactDOM.findDOMNode(isFullWidth);
-        expect(ReactTestUtils.isDOMComponent(isFullWidthNode)).to.be.true;
-    });
-
-    it("renders optional custom assets if passed", () => {
-        // Test render with default assets
-        const stockComponent = ReactTestUtils.renderIntoDocument(
-            <Wrapper>
-                <FooterUI isNewFooter={true} />
-            </Wrapper>
-        );
-        const defaultLogoNode =
-            ReactTestUtils.findRenderedDOMComponentWithClass(
-                stockComponent,
-                "hhs-logo"
-            );
-        expect(ReactTestUtils.isDOMComponent(defaultLogoNode)).to.be.true;
-
-        // Test render with custom asset
-        const assets = {
-            hhsLogo: <img src="/test-image.png" className="hhs-logo-custom" />,
-        };
-        const customAssetComponent = ReactTestUtils.renderIntoDocument(
-            <Wrapper>
-                <FooterUI isNewFooter={true} assets={assets} />
-            </Wrapper>
-        );
-        const customLogoNode = ReactTestUtils.findRenderedDOMComponentWithClass(
-            customAssetComponent,
-            "hhs-logo-custom"
-        );
-        expect(ReactTestUtils.isDOMComponent(customLogoNode)).to.be.true;
-    });
-});
-
-describe("renders the footer properly in the non-authenticated experience", () => {
-    it("renders by default the non-authenticated experience", () => {
-        const component = ReactTestUtils.renderIntoDocument(
-            <Wrapper>
-                <FooterUI />
-            </Wrapper>
-        );
-        const isNotFullWidth =
-            ReactTestUtils.scryRenderedDOMComponentsWithClass(
-                component,
-                "responsive-container"
-            )[1];
-        const isNotFullWidthNode = ReactDOM.findDOMNode(isNotFullWidth);
-        expect(ReactTestUtils.isDOMComponent(isNotFullWidthNode)).to.be.true;
-    });
-
-    it("explicitly renders the non-authenticated experience", () => {
-        const component = ReactTestUtils.renderIntoDocument(
-            <Wrapper>
-                <FooterUI isFullWidth={false} />
-            </Wrapper>
-        );
-        const isNotFullWidth =
-            ReactTestUtils.scryRenderedDOMComponentsWithClass(
-                component,
-                "responsive-container"
-            )[1];
-        const isNotFullWidthNode = ReactDOM.findDOMNode(isNotFullWidth);
-        expect(ReactTestUtils.isDOMComponent(isNotFullWidthNode)).to.be.true;
-    });
-});

package/test/components/Infotip.test.js

@@ -1,76 +0,0 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import { act, Simulate } from "react-dom/test-utils";
-import { expect } from "chai";
-import { spy } from "sinon";
-import Infotip from "../../components/Infotip";
-
-describe("Infotip", () => {
-    let container;
-
-    beforeEach(() => {
-        container = document.createElement("div");
-        document.body.appendChild(container);
-    });
-
-    afterEach(() => {
-        document.body.removeChild(container);
-        container = null;
-    });
-
-    it("renders an svg icon for tooltip anchor", () => {
-        act(() => {
-            ReactDOM.render(<Infotip label="tooltip text" />, container);
-        });
-        const svg = container.querySelector("svg");
-        expect(svg).to.be.ok;
-    });
-
-    it("renders white icon when lightIcon prop is true", () => {
-        act(() => {
-            ReactDOM.render(
-                <Infotip lightIcon label="tooltip text" />,
-                container
-            );
-        });
-        const paths = container.querySelectorAll("path");
-        expect(paths[1].getAttribute("fill")).to.equal("#FFF");
-        expect(paths[2].getAttribute("fill")).to.equal("#04838A");
-    });
-
-    it('overrides "touchstart" events for button', () => {
-        act(() => {
-            ReactDOM.render(<Infotip label="tooltip text" />, container);
-        });
-        const button = container.querySelector("button");
-        const stopPropagation = spy();
-        Simulate.touchStart(button, { stopPropagation });
-        expect(stopPropagation.called).to.be.true;
-    });
-
-    it('uses "touchend" event on button to prevent default and toggle focus', () => {
-        act(() => {
-            ReactDOM.render(<Infotip label="tooltip text" />, container);
-        });
-        const button = container.querySelector("button");
-        const preventDefault = spy();
-        const focus = spy(button, "focus");
-        const blur = spy(button, "blur");
-        Simulate.touchEnd(button, {
-            preventDefault,
-        });
-        expect(preventDefault.calledOnce).to.be.true;
-        expect(button.focus.calledOnce).to.be.true;
-        expect(button.blur.calledOnce).to.be.false;
-        Simulate.touchEnd(button, {
-            preventDefault,
-            currentTarget: {
-                focus,
-                blur,
-            },
-        });
-        expect(preventDefault.calledTwice).to.be.true;
-        expect(focus.calledOnce).to.be.true;
-        expect(blur.calledOnce).to.be.true;
-    });
-});

package/test/components/Tooltip.test.js

@@ -1,147 +0,0 @@
-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";
-
-class Wrapper extends Component {
-    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({});
-        });
-
-        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;/);
-        });
-    });
-});