test(accordion-web): add test for loadContent prop

Author: Illia Obukhau

packages/pluggableWidgets/accordion-web/src/components/__tests__/AccordionGroup.spec.tsx

@@ -295,4 +295,62 @@ describe("AccordionGroup", () => {
             expect(accordionGroup).toMatchSnapshot();
         });
     });
+
+    it("render widgets when 'loadContent' is 'always'", () => {
+        const accordionGroup = mount(
+            <AccordionGroup
+                {...defaultAccordionGroupProps}
+                collapsible
+                content={<div>Widgets</div>}
+                loadContent={"always"}
+            />
+        );
+        expect(accordionGroup.find({ children: "Widgets" })).toHaveLength(1);
+        expect(accordionGroup).toMatchSnapshot();
+    });
+
+    it("doesn't render widgets when 'loadContent' is 'whenExpanded'", () => {
+        const accordionGroup = mount(
+            <AccordionGroup
+                {...defaultAccordionGroupProps}
+                collapsible
+                content={<div>Widgets</div>}
+                loadContent={"whenExpanded"}
+            />
+        );
+        expect(accordionGroup.find({ children: "Widgets" })).toHaveLength(0);
+        expect(accordionGroup).toMatchSnapshot();
+    });
+
+    it("render widgets when 'loadContent' is 'whenExpanded' and 'collapsed' is false", () => {
+        const accordionGroup = mount(
+            <AccordionGroup
+                {...defaultAccordionGroupProps}
+                collapsible
+                content={<div>Widgets</div>}
+                loadContent={"whenExpanded"}
+                collapsed={false}
+            />
+        );
+        expect(accordionGroup.find({ children: "Widgets" })).toHaveLength(1);
+    });
+
+    it("keep widgets rendered when 'loadContent' is 'whenExpanded' and 'collapsed' prop became false", () => {
+        const accordionGroup = mount(
+            <AccordionGroup
+                {...defaultAccordionGroupProps}
+                collapsible
+                content={<div>Widgets</div>}
+                loadContent={"whenExpanded"}
+                collapsed
+            />
+        );
+        expect(accordionGroup.find({ children: "Widgets" })).toHaveLength(0);
+
+        accordionGroup.setProps({ collapsed: false });
+        expect(accordionGroup.find({ children: "Widgets" })).toHaveLength(1);
+
+        accordionGroup.setProps({ collapsed: true });
+        expect(accordionGroup.find({ children: "Widgets" })).toHaveLength(1);
+    });
 });

packages/pluggableWidgets/accordion-web/src/components/__tests__/__snapshots__/AccordionGroup.spec.tsx.snap

@@ -289,6 +289,74 @@ exports[`AccordionGroup collapsible renders correctly when the group is visible
 
 exports[`AccordionGroup doesn't render when the group isn't visible 1`] = `""`;
 
+exports[`AccordionGroup doesn't render widgets when 'loadContent' is 'whenExpanded' 1`] = `
+<AccordionGroup
+  animateContent={false}
+  collapsed={true}
+  collapsible={true}
+  content={
+    <div>
+      Widgets
+    </div>
+  }
+  dynamicClassName="class-name"
+  generateHeaderIcon={
+    [MockFunction] {
+      "calls": Array [
+        Array [
+          true,
+        ],
+      ],
+      "results": Array [
+        Object {
+          "type": "return",
+          "value": undefined,
+        },
+      ],
+    }
+  }
+  header="header"
+  id="id"
+  loadContent="whenExpanded"
+  showHeaderIcon="right"
+  visible={true}
+>
+  <section
+    className="widget-accordion-group widget-accordion-group-collapsed class-name"
+  >
+    <header
+      className="widget-accordion-group-header"
+    >
+      <div
+        aria-controls="idContentWrapper"
+        aria-disabled={false}
+        aria-expanded={false}
+        className="widget-accordion-group-header-button widget-accordion-group-header-button-clickable widget-accordion-group-header-button-icon-right"
+        data-focusindex={0}
+        id="idHeaderButton"
+        onKeyDown={[Function]}
+        role="button"
+        tabIndex={0}
+      >
+        header
+      </div>
+    </header>
+    <div
+      aria-labelledby="idHeaderButton"
+      className="widget-accordion-group-content-wrapper"
+      data-focusindex={0}
+      id="idContentWrapper"
+      onTransitionEnd={[Function]}
+      role="region"
+    >
+      <div
+        className="widget-accordion-group-content"
+      />
+    </div>
+  </section>
+</AccordionGroup>
+`;
+
 exports[`AccordionGroup not collapsible displays the content when the group becomes visible 1`] = `
 <section
   className="widget-accordion-group class-name"
@@ -364,3 +432,75 @@ exports[`AccordionGroup not collapsible displays the content when the group is v
   </div>
 </section>
 `;
+
+exports[`AccordionGroup render widgets when 'loadContent' is 'always' 1`] = `
+<AccordionGroup
+  animateContent={false}
+  collapsed={true}
+  collapsible={true}
+  content={
+    <div>
+      Widgets
+    </div>
+  }
+  dynamicClassName="class-name"
+  generateHeaderIcon={
+    [MockFunction] {
+      "calls": Array [
+        Array [
+          true,
+        ],
+      ],
+      "results": Array [
+        Object {
+          "type": "return",
+          "value": undefined,
+        },
+      ],
+    }
+  }
+  header="header"
+  id="id"
+  loadContent="always"
+  showHeaderIcon="right"
+  visible={true}
+>
+  <section
+    className="widget-accordion-group widget-accordion-group-collapsed class-name"
+  >
+    <header
+      className="widget-accordion-group-header"
+    >
+      <div
+        aria-controls="idContentWrapper"
+        aria-disabled={false}
+        aria-expanded={false}
+        className="widget-accordion-group-header-button widget-accordion-group-header-button-clickable widget-accordion-group-header-button-icon-right"
+        data-focusindex={0}
+        id="idHeaderButton"
+        onKeyDown={[Function]}
+        role="button"
+        tabIndex={0}
+      >
+        header
+      </div>
+    </header>
+    <div
+      aria-labelledby="idHeaderButton"
+      className="widget-accordion-group-content-wrapper"
+      data-focusindex={0}
+      id="idContentWrapper"
+      onTransitionEnd={[Function]}
+      role="region"
+    >
+      <div
+        className="widget-accordion-group-content"
+      >
+        <div>
+          Widgets
+        </div>
+      </div>
+    </div>
+  </section>
+</AccordionGroup>
+`;