Merge pull request #66 from SalesforceFoundation/feature/dependabot-u…

…pdates

W-10048291 - [OFM-NPSP] Resolve all known dependabot alerts

.cspell.json

@@ -38,6 +38,7 @@
     "noopener",
     "noreferrer",
     "reparentable",
+    "Astro",
     // LWC
     "onrowselection",
     "onrowaction",

.eslintrc.yml

@@ -12,7 +12,7 @@ globals:
 parserOptions:
   ecmaVersion: 2018
   sourceType: module
-parser: babel-eslint
+parser: "@babel/eslint-parser"
 plugins:
   - prettier
   - "@lwc/eslint-plugin-lwc"

cumulusci.yml

@@ -3,7 +3,7 @@ project:
     package:
         name: Outbound Funds (npsp)
         namespace: outfundsnpspext
-        api_version: "50.0"
+        api_version: "52.0"
     dependencies:
         - github: "https://github.com/SalesforceFoundation/NPSP"
         - github: "https://github.com/SalesforceFoundation/OutboundFundsModule"

force-app/main/default/lwc/warningBanner/__tests__/warningBanner.test.js

@@ -9,17 +9,14 @@ import WarningBanner, {
     CLOSE_ICON_ALTERNATIVE_TEXT,
 } from "c/warningBanner";
 
-describe.each([
-    ["with message", `random number: ${Math.random()}`, "should display message"],
-    ["without message", null, "should not display message"],
-])("warning-banner %s", (_, message, shouldDisplayMessageTitle) => {
+describe("c-warning-banner", () => {
     let component;
+    let message = `random number: ${Math.random()}`;
 
     beforeEach(() => {
         component = createElement("c-warning-banner", {
             is: WarningBanner,
         });
-        component.message = message;
     });
 
     afterEach(() => {
@@ -29,9 +26,165 @@ describe.each([
         component = undefined;
     });
 
-    describe("info variant", () => {
+    describe("warning variant with message", () => {
+        describe.each([
+            [`not "info-dismissable"`, `anything that is not exactly "info-dismissable"`],
+            ["null", null],
+        ])("default variant as warning: variant %s", (__, variant) => {
+            beforeEach(() => {
+                component.variant = variant;
+                component.message = message;
+                document.body.appendChild(component);
+
+                // Return one Promise.resolve so <template> tags are re-rendered.
+                return Promise.resolve();
+            });
+
+            it("should be accessible", async () => {
+                await expect(component).toBeAccessible();
+            });
+
+            it("should display warning alert", () => {
+                // component has one child.
+                expect(component.shadowRoot.childNodes.length).toEqual(1);
+
+                const alerts = component.shadowRoot.querySelectorAll(
+                    `div.slds-notify.slds-theme_warning[role="alert"]`
+                );
+                expect(alerts).not.toBeNull();
+                expect(alerts.length).toEqual(1);
+
+                // The info alert is the first child.
+                expect(alerts[0]).toEqual(component.shadowRoot.childNodes[0]);
+            });
+
+            it("should display info assistive text", () => {
+                const assistiveTexts = component.shadowRoot.querySelectorAll(
+                    "div.slds-notify.slds-theme_warning span.slds-assistive-text"
+                );
+                expect(assistiveTexts).not.toBeNull();
+                expect(assistiveTexts.length).toEqual(1);
+                expect(assistiveTexts[0].textContent).toEqual(WARNING_ASSISTIVE_TEXT);
+            });
+
+            it("should display warning icon", () => {
+                const iconContainers = component.shadowRoot.querySelectorAll(
+                    "div.slds-notify.slds-theme_warning span.slds-icon_container.slds-m-right_x-small.slds-icon-utility-warning"
+                );
+                expect(iconContainers).not.toBeNull();
+                expect(iconContainers.length).toEqual(1);
+                expect(iconContainers[0].title).toEqual(WARNING_TITLE);
+
+                const icons = iconContainers[0].querySelectorAll("lightning-icon");
+                expect(icons).not.toBeNull();
+                expect(icons.length).toEqual(1);
+
+                const icon = icons[0];
+                expect(icon.iconName).toEqual("utility:warning");
+                expect(icon.alternativeText).toEqual(WARNING_ICON_ALTERNATIVE_TEXT);
+                expect(icon.variant).toEqual("warning");
+                expect(icon.size).toEqual("x-small");
+            });
+
+            it("should display message header", () => {
+                const messages = component.shadowRoot.querySelectorAll(
+                    "div.slds-notify.slds-theme_warning h2"
+                );
+                expect(messages).not.toBeNull();
+                expect(messages.length).toEqual(1);
+                expect(messages[0].textContent).toEqual(message);
+            });
+
+            it("should not display close icon", () => {
+                const closeIcons = component.shadowRoot.querySelectorAll(
+                    `div.slds-notify.slds-theme_warning > lightning-icon.slds-notify__close`
+                );
+                expect(closeIcons).not.toBeNull();
+                expect(closeIcons.length).toEqual(0);
+            });
+        });
+    });
+
+    describe("warning variant without message", () => {
+        describe.each([
+            [`not "info-dismissable"`, `anything that is not exactly "info-dismissable"`],
+            ["null", null],
+        ])("default variant as warning: variant %s", (__, variant) => {
+            beforeEach(() => {
+                component.variant = variant;
+                document.body.appendChild(component);
+
+                // Return one Promise.resolve so <template> tags are re-rendered.
+                return Promise.resolve();
+            });
+            it("should be accessible", async () => {
+                await expect(component).toBeAccessible();
+            });
+
+            it("should display warning alert", () => {
+                // component has one child.
+                expect(component.shadowRoot.childNodes.length).toEqual(1);
+
+                const alerts = component.shadowRoot.querySelectorAll(
+                    `div.slds-notify.slds-theme_warning[role="alert"]`
+                );
+                expect(alerts).not.toBeNull();
+                expect(alerts.length).toEqual(1);
+
+                // The info alert is the first child.
+                expect(alerts[0]).toEqual(component.shadowRoot.childNodes[0]);
+            });
+
+            it("should display info assistive text", () => {
+                const assistiveTexts = component.shadowRoot.querySelectorAll(
+                    "div.slds-notify.slds-theme_warning span.slds-assistive-text"
+                );
+                expect(assistiveTexts).not.toBeNull();
+                expect(assistiveTexts.length).toEqual(1);
+                expect(assistiveTexts[0].textContent).toEqual(WARNING_ASSISTIVE_TEXT);
+            });
+
+            it("should display warning icon", () => {
+                const iconContainers = component.shadowRoot.querySelectorAll(
+                    "div.slds-notify.slds-theme_warning span.slds-icon_container.slds-m-right_x-small.slds-icon-utility-warning"
+                );
+                expect(iconContainers).not.toBeNull();
+                expect(iconContainers.length).toEqual(1);
+                expect(iconContainers[0].title).toEqual(WARNING_TITLE);
+
+                const icons = iconContainers[0].querySelectorAll("lightning-icon");
+                expect(icons).not.toBeNull();
+                expect(icons.length).toEqual(1);
+
+                const icon = icons[0];
+                expect(icon.iconName).toEqual("utility:warning");
+                expect(icon.alternativeText).toEqual(WARNING_ICON_ALTERNATIVE_TEXT);
+                expect(icon.variant).toEqual("warning");
+                expect(icon.size).toEqual("x-small");
+            });
+
+            it("should not display message header", () => {
+                const messages = component.shadowRoot.querySelectorAll(
+                    "div.slds-notify.slds-theme_warning h2"
+                );
+                expect(messages).not.toBeNull();
+                expect(messages.length).toEqual(0);
+            });
+
+            it("should not display close icon", () => {
+                const closeIcons = component.shadowRoot.querySelectorAll(
+                    `div.slds-notify.slds-theme_warning > lightning-icon.slds-notify__close`
+                );
+                expect(closeIcons).not.toBeNull();
+                expect(closeIcons.length).toEqual(0);
+            });
+        });
+    });
+
+    describe("info variant with message", () => {
         beforeEach(() => {
             component.variant = "info-dismissable";
+            component.message = message;
             document.body.appendChild(component);
 
             // Return one Promise.resolve so <template> tags are re-rendered.
@@ -84,18 +237,13 @@ describe.each([
             expect(icon.size).toEqual("x-small");
         });
 
-        it(shouldDisplayMessageTitle, () => {
+        it("should display message header", () => {
             const messages = component.shadowRoot.querySelectorAll(
                 "div.slds-notify.slds-theme_info h2"
             );
             expect(messages).not.toBeNull();
-
-            if (message) {
-                expect(messages.length).toEqual(1);
-                expect(messages[0].textContent).toEqual(message);
-            } else {
-                expect(messages.length).toEqual(0);
-            }
+            expect(messages.length).toEqual(1);
+            expect(messages[0].textContent).toEqual(message);
         });
 
         it("should display close icon", () => {
@@ -132,12 +280,9 @@ describe.each([
         });
     });
 
-    describe.each([
-        [`not "info-dismissable"`, `anything that is not exactly "info-dismissable"`],
-        ["null", null],
-    ])("default variant as warning: variant %s", (__, variant) => {
+    describe("info variant without message", () => {
         beforeEach(() => {
-            component.variant = variant;
+            component.variant = "info-dismissable";
             document.body.appendChild(component);
 
             // Return one Promise.resolve so <template> tags are re-rendered.
@@ -148,12 +293,12 @@ describe.each([
             await expect(component).toBeAccessible();
         });
 
-        it("should display warning alert", () => {
+        it("should display info alert", () => {
             // component has one child.
             expect(component.shadowRoot.childNodes.length).toEqual(1);
 
             const alerts = component.shadowRoot.querySelectorAll(
-                `div.slds-notify.slds-theme_warning[role="alert"]`
+                `div.slds-notify.slds-theme_info[role="alert"]`
             );
             expect(alerts).not.toBeNull();
             expect(alerts.length).toEqual(1);
@@ -164,52 +309,71 @@ describe.each([
 
         it("should display info assistive text", () => {
             const assistiveTexts = component.shadowRoot.querySelectorAll(
-                "div.slds-notify.slds-theme_warning span.slds-assistive-text"
+                "div.slds-notify.slds-theme_info span.slds-assistive-text"
             );
             expect(assistiveTexts).not.toBeNull();
             expect(assistiveTexts.length).toEqual(1);
-            expect(assistiveTexts[0].textContent).toEqual(WARNING_ASSISTIVE_TEXT);
+            expect(assistiveTexts[0].textContent).toEqual(INFO_ASSISTIVE_TEXT);
         });
 
-        it("should display warning icon", () => {
+        it("should display info icon", () => {
             const iconContainers = component.shadowRoot.querySelectorAll(
-                "div.slds-notify.slds-theme_warning span.slds-icon_container.slds-m-right_x-small.slds-icon-utility-warning"
+                "div.slds-notify.slds-theme_info span.slds-icon_container.slds-m-right_x-small.slds-icon-utility-user"
             );
             expect(iconContainers).not.toBeNull();
             expect(iconContainers.length).toEqual(1);
-            expect(iconContainers[0].title).toEqual(WARNING_TITLE);
+            expect(iconContainers[0].title).toEqual(INFO_TITLE);
 
             const icons = iconContainers[0].querySelectorAll("lightning-icon");
             expect(icons).not.toBeNull();
             expect(icons.length).toEqual(1);
 
             const icon = icons[0];
-            expect(icon.iconName).toEqual("utility:warning");
-            expect(icon.alternativeText).toEqual(WARNING_ICON_ALTERNATIVE_TEXT);
-            expect(icon.variant).toEqual("warning");
+            expect(icon.iconName).toEqual("utility:announcement");
+            expect(icon.alternativeText).toEqual(INFO_ICON_ALTERNATIVE_TEXT);
+            expect(icon.variant).toEqual("inverse");
             expect(icon.size).toEqual("x-small");
         });
 
-        it(shouldDisplayMessageTitle, () => {
+        it("should not display message header", () => {
             const messages = component.shadowRoot.querySelectorAll(
-                "div.slds-notify.slds-theme_warning h2"
+                "div.slds-notify.slds-theme_info h2"
             );
             expect(messages).not.toBeNull();
+            expect(messages.length).toEqual(0);
+        });
 
-            if (message) {
-                expect(messages.length).toEqual(1);
-                expect(messages[0].textContent).toEqual(message);
-            } else {
-                expect(messages.length).toEqual(0);
-            }
+        it("should display close icon", () => {
+            const closeIcons = component.shadowRoot.querySelectorAll(
+                `div.slds-notify.slds-theme_info > lightning-icon.slds-notify__close`
+            );
+            expect(closeIcons).not.toBeNull();
+            expect(closeIcons.length).toEqual(1);
+
+            const closeIcon = closeIcons[0];
+            expect(closeIcon.iconName).toEqual("utility:close");
+            expect(closeIcon.alternativeText).toEqual(CLOSE_ICON_ALTERNATIVE_TEXT);
+            expect(closeIcon.variant).toEqual("inverse");
+            expect(closeIcon.size).toEqual("x-small");
         });
 
-        it("should not display close icon", () => {
+        it("clicking close icon hides info alert", () => {
             const closeIcons = component.shadowRoot.querySelectorAll(
-                `div.slds-notify.slds-theme_warning > lightning-icon.slds-notify__close`
+                `div.slds-notify.slds-theme_info > lightning-icon.slds-notify__close`
             );
             expect(closeIcons).not.toBeNull();
-            expect(closeIcons.length).toEqual(0);
+            expect(closeIcons.length).toEqual(1);
+
+            const closeIcon = closeIcons[0];
+            closeIcon.click();
+
+            // Clicking close un-renders info alert.
+            return Promise.resolve().then(() => {
+                expect(component.shadowRoot.childNodes.length).toEqual(0);
+
+                // Component should still be accessible after closing.
+                return expect(component).toBeAccessible();
+            });
         });
     });
 });