@nuskin/foundation-ui-components 1.1.0 → 1.2.0

package/src/common/accordion/specs/NsAccordion.spec.tsx

@@ -1,50 +1,56 @@
 import React from 'react';
 import { render, fireEvent, screen } from '@/test-utils/index';
-import { AccordionVariant, NsAccordion, NsAccordionProps } from '@/common/index';
+import { AccordionContentTypeObject, AccordionItem, AccordionVariant, NsAccordion } from '@/common/index';
 
-const generateContentArray = (count: number) => {
-    const arr = [] as NsAccordionProps['contentArray'];
+const generateContentArray = (count: number, isDefaultOpen = true) => {
+    const arr = [] as AccordionItem[];
     for (let i = 1; i <= count; i++) {
-        arr.push({
+        arr?.push({
             title: `Title ${i}`,
-            body: `Content ${i}`,
-            isDefaultOpen: true,
+            content: <div className="p-2">Content {i}</div>,
+            isDefaultOpen,
+            type: AccordionContentTypeObject.jsx,
+            id: `Test ${i}`,
         });
     }
     return arr;
 };
 
 describe('NsAccordion', () => {
-    const contentArray = generateContentArray(3);
+    const items = generateContentArray(3);
     const defaultProps = {
         additionalProps: {
             testid: 'test-accordion',
         },
         allowMultipleExpanded: false,
-        contentArray,
+        items,
         variant: AccordionVariant.Basic,
+        invert: false,
+        level: 0,
     };
 
-    it('renders without error', () => {
+    it('1. renders without error', () => {
         const { getByTestId } = render(<NsAccordion {...defaultProps} />);
         const accordion = getByTestId(defaultProps.additionalProps.testid);
         expect(accordion).toBeInTheDocument();
     });
 
-    it(`only first section should be visible when allowMultipleExpanded prop is false and multiple items have
-		isDefaultOpen true`, () => {
+    it(`2. only first section should be visible when allowMultipleExpanded prop is false and multiple items have
+    isDefaultOpen true`, () => {
         const { getAllByText } = render(<NsAccordion {...defaultProps} />);
         const [title1, title2, title3] = getAllByText(/Title /i);
 
         expect(title1.closest('header')).toHaveAttribute('aria-expanded', 'true');
         expect(title2.closest('header')).toHaveAttribute('aria-expanded', 'false');
         expect(title3.closest('header')).toHaveAttribute('aria-expanded', 'false');
-        expect(screen.queryByText(/Content 1/i)).not.toBeNull();
-        expect(screen.queryByText(/Content 2/i)).toBeNull();
-        expect(screen.queryByText(/Content 3/i)).toBeNull();
+        const [c1, c2, c3] = getAllByText(/Content /i);
+        expect(c1.parentNode).toHaveStyle('opacity: 1');
+        expect(c2.parentNode).toHaveStyle('opacity: 0');
+        expect(c3.parentNode).toHaveStyle('opacity: 0');
     });
 
-    it('expands second section only when allowMultipleExpanded prop is false and second title is clicked', async () => {
+    it(`3. expands second section only when allowMultipleExpanded
+     prop is false and second title is clicked`, async () => {
         const { getAllByText } = render(<NsAccordion {...defaultProps} />);
         const [title1, title2, title3] = getAllByText(/Title /i);
         const header = title2.closest('header');
@@ -54,40 +60,104 @@ describe('NsAccordion', () => {
             expect(title1.closest('header')).toHaveAttribute('aria-expanded', 'false');
             expect(title2.closest('header')).toHaveAttribute('aria-expanded', 'true');
             expect(title3.closest('header')).toHaveAttribute('aria-expanded', 'false');
-            expect(screen.queryByText(/Content 1/i)).toBeNull();
-            expect(screen.queryByText(/Content 2/i)).not.toBeNull();
-            expect(screen.queryByText(/Content 3/i)).toBeNull();
+            const [c1, c2, c3] = getAllByText(/Content /i);
+            expect(c1.parentNode).toHaveStyle('opacity: 0');
+            expect(c2.parentNode).toHaveStyle('opacity: 1');
+            expect(c3.parentNode).toHaveStyle('opacity: 0');
         }
     });
 
-    it('expands multiple sections by default when allowMultipleExpanded prop is true', () => {
-        const contentArray = generateContentArray(3);
-        contentArray[2].isDefaultOpen = false;
+    it('4. expands multiple sections by default when allowMultipleExpanded prop is true', () => {
+        const items = generateContentArray(3);
+        items[2].isDefaultOpen = false;
         const defaultProps = {
-            additionalProps: {
-                testid: 'test-accordion',
-            },
             allowMultipleExpanded: false,
-            contentArray,
+            items,
             variant: AccordionVariant.Basic,
+            level: 0,
+            invert: false,
         };
         const { getAllByText } = render(<NsAccordion {...defaultProps} allowMultipleExpanded />);
+        const accordion = screen.getByTestId('ns-accordion-testid');
+        expect(accordion).toBeDefined();
         const [title1, title2, title3] = getAllByText(/Title /i);
 
         expect(title1.closest('header')).toHaveAttribute('aria-expanded', 'true');
         expect(title2.closest('header')).toHaveAttribute('aria-expanded', 'true');
         expect(title3.closest('header')).toHaveAttribute('aria-expanded', 'false');
-        expect(screen.queryByText(/Content 1/i)).not.toBeNull();
-        expect(screen.queryByText(/Content 2/i)).not.toBeNull();
-        expect(screen.queryByText(/Content 3/i)).toBeNull();
+
+        const [c1, c2, c3] = getAllByText(/Content /i);
+        expect(c1.parentNode).toHaveStyle('opacity: 1');
+        expect(c2.parentNode).toHaveStyle('opacity: 1');
+        expect(c3.parentNode).toHaveStyle('opacity: 0');
 
         fireEvent.click(title3);
 
         expect(title1.closest('header')).toHaveAttribute('aria-expanded', 'true');
         expect(title2.closest('header')).toHaveAttribute('aria-expanded', 'true');
         expect(title3.closest('header')).toHaveAttribute('aria-expanded', 'true');
-        expect(screen.queryByText(/Content 1/i)).not.toBeNull();
-        expect(screen.queryByText(/Content 2/i)).not.toBeNull();
-        expect(screen.queryByText(/Content 3/i)).not.toBeNull();
+
+        const [c11, c12, c13] = getAllByText(/Content /i);
+        expect(c11.parentNode).toHaveStyle('opacity: 1');
+        expect(c12.parentNode).toHaveStyle('opacity: 1');
+        expect(c13.parentNode).toHaveStyle('opacity: 1');
+    });
+    it(`5. closes second section also when allowMultipleExpanded
+     prop is true and second title is clicked`, async () => {
+        const items = generateContentArray(3);
+        const defaultProps = {
+            additionalProps: {
+                testid: 'test-accordion',
+            },
+            allowMultipleExpanded: true,
+            items,
+            variant: AccordionVariant.Basic,
+            invert: false,
+            level: 0,
+        };
+        const { getAllByText } = render(<NsAccordion {...defaultProps} />);
+        const [title1, title2, title3] = getAllByText(/Title /i);
+        const header = title2.closest('header');
+        expect(header).toHaveAttribute('aria-expanded', 'true');
+        if (header) {
+            fireEvent.click(header);
+            expect(title1.closest('header')).toHaveAttribute('aria-expanded', 'true');
+            expect(title2.closest('header')).toHaveAttribute('aria-expanded', 'false');
+            expect(title3.closest('header')).toHaveAttribute('aria-expanded', 'true');
+
+            const [c1, c2, c3] = getAllByText(/Content /i);
+            expect(c1.parentNode).toHaveStyle('opacity: 1');
+            expect(c2.parentNode).toHaveStyle('opacity: 0');
+            expect(c3.parentNode).toHaveStyle('opacity: 1');
+        }
+    });
+    it(`6. closes second section also when allowMultipleExpanded
+     prop is true and second title is clicked`, async () => {
+        const items = generateContentArray(3, false);
+        items[1].isDefaultOpen = true;
+        const defaultProps = {
+            additionalProps: {
+                testid: 'test-accordion',
+            },
+            allowMultipleExpanded: false,
+            items,
+            variant: AccordionVariant.Compact,
+            level: 0,
+            invert: false,
+        };
+        const { getAllByText } = render(<NsAccordion {...defaultProps} />);
+        const [title1, title2, title3] = getAllByText(/Title /i);
+        const header = title2.closest('header');
+        expect(header).toHaveAttribute('aria-expanded', 'true');
+        if (header) {
+            fireEvent.click(header);
+            expect(title1.closest('header')).toHaveAttribute('aria-expanded', 'false');
+            expect(title2.closest('header')).toHaveAttribute('aria-expanded', 'false');
+            expect(title3.closest('header')).toHaveAttribute('aria-expanded', 'false');
+            const [c1, c2, c3] = getAllByText(/Content /i);
+            expect(c1.parentNode).toHaveStyle('opacity: 0');
+            expect(c2.parentNode).toHaveStyle('opacity: 0');
+            expect(c3.parentNode).toHaveStyle('opacity: 0');
+        }
     });
 });

package/src/common/accordion/specs/NsAccordionHeader.spec.tsx

@@ -3,7 +3,7 @@ import { render, fireEvent } from '@/test-utils/index';
 import { NsAccordionHeader, AccordionVariant } from '@/common/index';
 
 describe('NsAccordionHeader', () => {
-    it('renders title correctly', () => {
+    it('1. renders title correctly', () => {
         const onClick = jest.fn();
         const title = 'Section Header';
         const { getByText } = render(
@@ -11,19 +11,41 @@ describe('NsAccordionHeader', () => {
                 variant={AccordionVariant.Basic}
                 title={title}
                 onClick={onClick}
+                invert={false}
+                isOpen={true}
             />
         );
-        expect(getByText(title)).toBeInTheDocument();
+        const el = getByText(title);
+        expect(el).toBeInTheDocument();
+        expect(el.closest('header')).toHaveAttribute('aria-expanded', 'true');
     });
-
-    it('calls onClick handler when clicked', () => {
+    it('2. renders title correctly', () => {
+        const onClick = jest.fn();
+        const title = 'Section Header';
+        const { getByText } = render(
+            <NsAccordionHeader
+                variant={AccordionVariant.Compact}
+                title={<span>{title}</span>}
+                onClick={onClick}
+                invert={false}
+                isOpen={false}
+            />
+        );
+        const el = getByText(title);
+        expect(el).toBeInTheDocument();
+        expect(el.closest('header')).toHaveAttribute('aria-expanded', 'false');
+    });
+    it('3. calls onClick handler when clicked', () => {
         const onClick = jest.fn();
         const { container } = render(
             <NsAccordionHeader
                 variant={AccordionVariant.Basic}
                 title="Section Header"
                 onClick={onClick}
-            />);
+                invert={false}
+                isOpen={false}
+            />
+        );
         const header = container.querySelector('header');
         if (header) {
             fireEvent.click(header);
@@ -31,33 +53,78 @@ describe('NsAccordionHeader', () => {
         }
     });
 
-    it('renders with additional class name', () => {
+    it('4. renders with additional class name', () => {
         const additionalClassName = 'custom-class';
         const onClick = jest.fn();
         const { container } = render(
             <NsAccordionHeader
+                isOpen={false}
                 variant={AccordionVariant.Basic}
                 title="Section Header"
                 additionalProps={{ className: additionalClassName }}
                 onClick={onClick}
+                invert={false}
             />
         );
         expect(container.querySelector('header')).toHaveClass(`section-header ${additionalClassName}`);
     });
 
-    it('renders with expanded class when isOpen is true', () => {
+    it('5. renders with expanded class when isOpen is true', () => {
         const onClick = jest.fn();
         const { container } = render(
-            <NsAccordionHeader variant={AccordionVariant.Basic} title="Section Header" isOpen onClick={onClick} />
+            <NsAccordionHeader
+                variant={AccordionVariant.Basic}
+                title="Section Header"
+                isOpen
+                onClick={onClick}
+                invert={false}
+            />
         );
         expect(container.querySelector('header')).toHaveClass('expanded');
     });
 
-    it('renders with header icon', () => {
+    it('6. renders with header icon', () => {
         const onClick = jest.fn();
         const { getByTestId } = render(
-            <NsAccordionHeader variant={AccordionVariant.Basic} title="Section Header" onClick={onClick} />
+            <NsAccordionHeader
+                variant={AccordionVariant.Basic}
+                title="Section Header"
+                onClick={onClick}
+                invert={false}
+                isOpen
+            />
         );
+        // this icon refers to end icon which is either arrowUp or arrowDown
         expect(getByTestId('icon')).toBeInTheDocument();
     });
+    it('7. renders with custom start icon', () => {
+        const onClick = jest.fn();
+        const { getByTestId } = render(
+            <NsAccordionHeader
+                variant={AccordionVariant.Basic}
+                title="Section Header"
+                onClick={onClick}
+                invert={false}
+                isOpen
+                startIcon={{ name: 'hamburgerIcon', testId: 'hamburger-test' }}
+            />
+        );
+        expect(getByTestId('hamburger-test')).toBeInTheDocument();
+    });
+    it('8. does not render start icon, when invalid icon name is passed', () => {
+        const onClick = jest.fn();
+        const invalidIconName = 'hambur';
+        const testId = 'hamburger-test';
+        const { queryByTestId } = render(
+            <NsAccordionHeader
+                variant={AccordionVariant.Basic}
+                title="Section Header"
+                onClick={onClick}
+                invert={false}
+                isOpen
+                startIcon={{ name: invalidIconName as any, testId }}
+            />
+        );
+        expect(queryByTestId(testId)).toBeNull();
+    });
 });

package/src/common/accordion/specs/NsAccordionItem.spec.tsx

@@ -5,58 +5,75 @@ import { NsAccordionItem, AccordionVariant } from '@/common/index';
 describe('NsAccordionItem', () => {
     const title = 'Accordion Section Title';
     const content = 'Accordion Section Content';
-
-    it('renders title correctly', () => {
+    const contentElement = <div className="p-2">{content}</div>;
+    it('1. renders title correctly', () => {
         const { getByText } = render(
             <NsAccordionItem
+                type="jsx"
                 variant={AccordionVariant.Basic}
                 isOpen={false}
                 toggleOpen={() => {}}
                 title={title}
-                content={content}
+                content={contentElement}
+                isChild={false}
+                invert={false}
+                level={1}
             />
         );
         expect(getByText(title)).toBeInTheDocument();
     });
 
-    it('calls toggleOpen function when clicked on the section header', () => {
+    it('2. calls toggleOpen function when clicked on the section header', () => {
         const toggleOpen = jest.fn();
         const { getByText } = render(
             <NsAccordionItem
+                type="jsx"
                 variant={AccordionVariant.Basic}
                 isOpen={false}
                 toggleOpen={toggleOpen}
                 title={title}
-                content={content}
+                content={contentElement}
+                isChild={false}
+                invert={false}
+                level={1}
             />
         );
         fireEvent.click(getByText(title));
         expect(toggleOpen).toHaveBeenCalledTimes(1);
     });
 
-    it('renders content when isOpen is true', () => {
+    it('3. renders content when isOpen is true', () => {
         const { getByText } = render(
             <NsAccordionItem
                 variant={AccordionVariant.Basic}
                 isOpen={true}
                 toggleOpen={() => {}}
                 title={title}
-                content={content}
+                type="jsx"
+                content={contentElement}
+                isChild={false}
+                invert={false}
+                level={1}
             />
         );
         expect(getByText(content)).toBeInTheDocument();
     });
 
-    it('does not render content when isOpen is false', () => {
+    it('4. when isOpen is false, renders jsx dom content within container with 0 height', () => {
         const { queryByText } = render(
             <NsAccordionItem
+                type="jsx"
                 variant={AccordionVariant.Basic}
                 isOpen={false}
                 toggleOpen={() => {}}
                 title={title}
-                content={content}
+                content={contentElement}
+                isChild={false}
+                invert={false}
+                level={1}
             />
         );
-        expect(queryByText(content)).toBeNull();
+        const bodyElement = queryByText(content);
+        expect(bodyElement?.parentNode).toHaveStyle('height:0px;');
     });
 });

package/src/common/accordion/specs/NsCollapse.spec.tsx

@@ -1,36 +1,128 @@
 import React from 'react';
 import { render, screen } from '@/test-utils/index';
-import { NsCollapse, AccordionVariant } from '@/common/index';
+import { NsCollapse, AccordionVariant, AccordionItem } from '@/common/index';
+import { createAccordionItem3_1 } from '../stories/data';
 
 describe('NsCollapse', () => {
-    it('renders children when isOpen is true', () => {
+    it('1. renders children when isOpen is true', () => {
         const { getByText } = render(
-            <NsCollapse isOpen variant={AccordionVariant.Basic}>
-                <div>Child 1</div>
-                <div>Child 2</div>
-            </NsCollapse>
+            <NsCollapse
+                isOpen
+                variant={AccordionVariant.Basic}
+                content={
+                    <>
+                        <div>Child 1</div>
+                        <div>Child 2</div>
+                    </>
+                }
+                type="jsx"
+                isChild={false}
+                invert={false}
+                level={0}
+            />
         );
         expect(getByText('Child 1')).toBeInTheDocument();
         expect(getByText('Child 2')).toBeInTheDocument();
     });
+    it('2. renders children when isOpen is true and isChild is true', () => {
+        const content = 'renders children when isOpen is true and isChild is true';
+        const { getByText } = render(
+            <NsCollapse
+                isOpen
+                type="text"
+                variant={AccordionVariant.Basic}
+                content={content}
+                isChild={true}
+                invert={false}
+                level={0}
+            />
+        );
+        expect(getByText(content)).toBeInTheDocument();
+    });
+    it('3. renders children when isOpen is true and variant is compact and content is of type accordion', () => {
+        const accItem = createAccordionItem3_1();
+        const content = accItem.content as AccordionItem[];
+        const { getByText } = render(
+            <NsCollapse
+                isOpen
+                variant={AccordionVariant.Compact}
+                content={content}
+                type={accItem.type}
+                isChild={true}
+                invert={false}
+                level={0}
+            />
+        );
+        expect(getByText(content[0].title)).toBeInTheDocument();
+        expect(getByText(content[1].title)).toBeInTheDocument();
+    });
 
-    it('does not render children when isOpen is false', () => {
+    it('4. does not render children when isOpen is false', () => {
+        const content = '<h2>Lorem ipsum dolor sit amet.</h2>';
+        render(
+            <NsCollapse
+                isOpen={false}
+                variant={AccordionVariant.Basic}
+                type="html"
+                content={content}
+                isChild={false}
+                invert={true}
+                level={0}
+            />
+        );
+        expect(screen.queryByText(content)).toBeNull();
+    });
+    it('5. renders html children when isOpen is true', () => {
+        const content = '<h2>Lorem ipsum dolor sit amet.</h2>';
         render(
-            <NsCollapse isOpen={false} variant={AccordionVariant.Basic}>
-                <div>Child 1</div>
-                <div>Child 2</div>
-            </NsCollapse>
+            <NsCollapse
+                isOpen={true}
+                variant={AccordionVariant.Compact}
+                type="html"
+                content={content}
+                isChild={false}
+                invert={true}
+                level={0}
+            />
         );
-        expect(screen.queryByText('Child')).toBeNull();
+        expect(screen.queryByText(content)).toBeDefined();
     });
 
-    it('renders with additional class name', () => {
+    it('6. renders with additional class name', () => {
+        const additionalClassName = 'custom-class';
+        const { container } = render(
+            <NsCollapse
+                type="jsx"
+                isOpen
+                variant={AccordionVariant.Gray}
+                content={
+                    <>
+                        <div>Child 1</div>
+                        <div>Child 2</div>
+                    </>
+                }
+                additionalProps={{ className: additionalClassName }}
+                isChild={false}
+                invert={false}
+                level={7}
+            />
+        );
+        expect(container.querySelector('section')).toHaveClass(`ns-collapse ${additionalClassName}`);
+    });
+    it('7. skipping allowMultipleExpanded in child data', () => {
+        const { content, type } = createAccordionItem3_1();
         const additionalClassName = 'custom-class';
         const { container } = render(
-            <NsCollapse additionalProps={{ className: additionalClassName }} isOpen variant={AccordionVariant.Basic}>
-                <div>Child 1</div>
-                <div>Child 2</div>
-            </NsCollapse>
+            <NsCollapse
+                type={type}
+                isOpen
+                variant={AccordionVariant.Gray}
+                content={content}
+                additionalProps={{ className: additionalClassName }}
+                isChild={false}
+                invert={true}
+                level={7}
+            />
         );
         expect(container.querySelector('section')).toHaveClass(`ns-collapse ${additionalClassName}`);
     });

package/src/common/accordion/specs/NsToggleSection.spec.tsx

@@ -6,33 +6,69 @@ import { render, fireEvent } from '@/test-utils/index';
 
 describe('NsToggleSection', () => {
     const title = 'Toggle Section Title';
-    const content = 'Toggle Section Content';
-
-    it('renders title correctly', () => {
+    const contentText = 'Toggle Section Content';
+    const content = <div className="p-2">{contentText}</div>;
+    it('1. renders title correctly', () => {
         const { getByText } = render(
-            <NsToggleSection variant={AccordionVariant.Basic} title={title}>{content}</NsToggleSection>
+            <NsToggleSection
+                variant={AccordionVariant.Basic}
+                title={title}
+                content={content}
+                invert={false}
+                isChild={false}
+                type="jsx"
+            />
+        );
+        expect(getByText(title)).toBeInTheDocument();
+    });
+    it('2. renders title correctly', () => {
+        const { getByText } = render(
+            <NsToggleSection
+                variant={AccordionVariant.Compact}
+                title={title}
+                content={content}
+                invert={false}
+                isChild={false}
+                type="jsx"
+            />
         );
         expect(getByText(title)).toBeInTheDocument();
     });
 
-    it('toggles content visibility when clicked on the section header', () => {
+    it('2. toggles content visibility when clicked on the section header', () => {
         const { getByText, queryByText } = render(
-            <NsToggleSection variant={AccordionVariant.Basic} title={title}>{content}</NsToggleSection>
+            <NsToggleSection
+                variant={AccordionVariant.Basic}
+                title={title}
+                content={content}
+                invert={false}
+                isChild={false}
+                type="jsx"
+            />
         );
-        expect(queryByText(content)).toBeNull();
+        const el = queryByText(contentText);
+        expect(el?.parentNode).toHaveStyle('opacity: 0;');
+
         fireEvent.click(getByText(title));
-        expect(getByText(content)).toBeInTheDocument();
+        expect(el?.parentNode).toHaveStyle('opacity: 1;');
+
         fireEvent.click(getByText(title));
-        expect(queryByText(content)).toBeNull();
+        expect(el?.parentNode).toHaveStyle('opacity: 0;');
     });
 
-    it('sets defaultOpen prop correctly', () => {
+    it('3. sets defaultOpen prop correctly', () => {
         const { getByText } = render(
-            <NsToggleSection variant={AccordionVariant.Basic} title={title} defaultOpen>
-                {content}
-            </NsToggleSection>
+            <NsToggleSection
+                variant={AccordionVariant.Basic}
+                title={title}
+                content={content}
+                invert={false}
+                isChild={false}
+                defaultOpen
+                type="jsx"
+            />
         );
 
-        expect(getByText(content)).toBeInTheDocument();
+        expect(getByText(contentText)).toBeInTheDocument();
     });
 });