@ithaka/bonsai/js/__tests__/accessible-notification-tests.js

ITHAKA core styling

import { BonsaiNotification } from "../bonsai.accessible.notifications";


describe("Bonsai Notifications", () => {

    beforeEach(() => {
        document.body.innerHTML = `
            <div id="screen-reader-notification" class="show-for-sr" aria-live="polite" aria-atomic="false" aria-relevant="additions"></div>
        `;
    });

    test("Passing no selector defaults to '#screen-reader-notification'", () => {
        expect(() => {
            new BonsaiNotification();
        }).not.toThrow();
    });

    test("Passing selector that doesn't exist throws error", () => {
        expect(() => {
            new BonsaiNotification("#stuff-and-things");
        }).toThrow();
    });

    test("Message container is correctly stored", () => {
        let Notify = new BonsaiNotification();

        expect(Notify.$messageContainer).toEqual($("#screen-reader-notification"));
    });

    test("Messages are correctly added to the container", () => {
        let Notify = new BonsaiNotification();

        Notify.sendMessage("Hello World");
        expect(document.getElementById("screen-reader-notification").innerHTML).toEqual("<span>Hello World</span>");

        Notify.sendMessage("dude, it works");
        expect(document.getElementById("screen-reader-notification").innerHTML).toEqual("<span>Hello World</span><span>dude, it works</span>");
    });

});