fix(web-components): extra check to default

mi6 · Aug 5, 2024 · c0943df · c0943df
1 parent 415be20
commit c0943df
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 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
@@ -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/...nents/src/components/ic-classification-banner/test/basic/ic-classification-banner.spec.ts b/...nents/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],