From c0943df23759c9d6fd8c156167d476c362045a71 Mon Sep 17 00:00:00 2001
From: Even Stensberg <evenstensberg@gmail.com>
Date: Thu, 18 Jul 2024 19:58:49 +0200
Subject: [PATCH] fix(web-components): extra check to default

---
 .../ic-classification-banner.tsx              | 16 ++++--
 .../basic/ic-classification-banner.spec.ts    | 51 +++++++++++++++++++
 2 files changed, 64 insertions(+), 3 deletions(-)

diff --git a/packages/web-components/src/components/ic-classification-banner/ic-classification-banner.tsx b/packages/web-components/src/components/ic-classification-banner/ic-classification-banner.tsx
index dc429a579a..fd6748402a 100644
--- a/packages/web-components/src/components/ic-classification-banner/ic-classification-banner.tsx
+++ b/packages/web-components/src/components/ic-classification-banner/ic-classification-banner.tsx
@@ -37,7 +37,17 @@ export class ClassificationBanner {
   @Prop() upTo?: boolean = false;
 
   render() {
-    const { classification, inline, country, upTo, additionalSelectors } = this;
+    const { inline, upTo } = this;
+
+    // In case of unrecognized props, fallback to default
+    let { country, additionalSelectors, classification } = this;
+    if (!country) country = "";
+    if (!additionalSelectors) additionalSelectors = "";
+    if (
+      !classification ||
+      (classification && !classificationText[classification])
+    )
+      classification = "default";
 
     return (
       <Host class={{ ["inline"]: inline }}>
@@ -57,9 +67,9 @@ export class ClassificationBanner {
             {classification === "default"
               ? classificationText[classification]
               : `${upTo ? "up to" : ""} 
-               ${country !== "" ? country : ""} 
+               ${country} 
                ${classificationText[classification]} 
-               ${additionalSelectors !== "" ? additionalSelectors : ""}`}
+               ${additionalSelectors}`}
           </ic-typography>
         </banner>
       </Host>
diff --git a/packages/web-components/src/components/ic-classification-banner/test/basic/ic-classification-banner.spec.ts b/packages/web-components/src/components/ic-classification-banner/test/basic/ic-classification-banner.spec.ts
index 562ed1de28..2481155e18 100644
--- a/packages/web-components/src/components/ic-classification-banner/test/basic/ic-classification-banner.spec.ts
+++ b/packages/web-components/src/components/ic-classification-banner/test/basic/ic-classification-banner.spec.ts
@@ -138,6 +138,57 @@ describe("ic-classification-banner component", () => {
         </ic-classification-banner>`);
   });
 
+  it("should render default banner if no props are passed", async () => {
+    const page = await newSpecPage({
+      components: [ClassificationBanner],
+      html: `<ic-classification-banner></ic-classification-banner>`,
+    });
+    expect(page.root).toEqualHtml(`
+        <ic-classification-banner>
+          <mock:shadow-root>
+            <banner aria-label="Protective marking" class="classification-banner default">
+              <ic-typography variant="caption-uppercase">
+                protective marking not set
+              </ic-typography>
+            </banner>
+          </mock:shadow-root>
+        </ic-classification-banner>`);
+  });
+
+  it("should render default banner if props with empty strings are passed", async () => {
+    const page = await newSpecPage({
+      components: [ClassificationBanner],
+      html: `<ic-classification-banner classification="" country="" additionalSelectors=""></ic-classification-banner>`,
+    });
+    expect(page.root).toEqualHtml(`
+        <ic-classification-banner classification="" country="" additionalSelectors="">
+          <mock:shadow-root>
+            <banner aria-label="Protective marking" class="classification-banner default">
+              <ic-typography variant="caption-uppercase">
+                protective marking not set
+              </ic-typography>
+            </banner>
+          </mock:shadow-root>
+        </ic-classification-banner>`);
+  });
+
+  it("should render default banner if props with undefined are passed", async () => {
+    const page = await newSpecPage({
+      components: [ClassificationBanner],
+      html: `<ic-classification-banner classification=${undefined} country=${undefined} additionalSelectors=${undefined}></ic-classification-banner>`,
+    });
+    expect(page.root).toEqualHtml(`
+        <ic-classification-banner classification="undefined" country="undefined" additionalSelectors="undefined">
+          <mock:shadow-root>
+            <banner aria-label="Protective marking" class="classification-banner default">
+              <ic-typography variant="caption-uppercase">
+                protective marking not set
+              </ic-typography>
+            </banner>
+          </mock:shadow-root>
+        </ic-classification-banner>`);
+  });
+
   it("should render with additional selectors after classification when supplied", async () => {
     const page = await newSpecPage({
       components: [ClassificationBanner],