@nuskin/foundation-ui-components 1.33.0-1253-feature.3 → 2.0.0

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

@@ -1,183 +0,0 @@
-import React from 'react';
-import { render, fireEvent, screen } from '@/test-utils/index';
-import { AccordionContentTypeObject, AccordionItem, AccordionVariant, NsAccordion } from '@/common/index';
-
-const generateContentArray = (count: number, isDefaultOpen = true) => {
-    const arr = [] as AccordionItem[];
-    for (let i = 1; i <= count; i++) {
-        arr?.push({
-            title: `Title ${i}`,
-            content: <div className="p-2">Content {i}</div>,
-            isDefaultOpen,
-            type: AccordionContentTypeObject.jsx,
-            id: `Test ${i}`,
-        });
-    }
-    return arr;
-};
-
-describe('NsAccordion', () => {
-    const items = generateContentArray(3);
-    const defaultProps = {
-        additionalProps: {
-            testid: 'test-accordion',
-        },
-        allowMultipleExpanded: false,
-        items,
-        variant: AccordionVariant.Basic,
-        invert: false,
-        level: 0,
-    };
-
-    it('1. renders without error', () => {
-        const { getByTestId } = render(<NsAccordion {...defaultProps} />);
-        const accordion = getByTestId(defaultProps.additionalProps.testid);
-        expect(accordion).toBeInTheDocument();
-    });
-
-    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');
-        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(`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');
-        expect(header).toHaveAttribute('aria-expanded', 'false');
-        if (header) {
-            fireEvent.click(header);
-            expect(title1.closest('header')).toHaveAttribute('aria-expanded', 'false');
-            expect(title2.closest('header')).toHaveAttribute('aria-expanded', 'true');
-            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: 1');
-            expect(c3.parentNode).toHaveStyle('opacity: 0');
-        }
-    });
-
-    it('4. expands multiple sections by default when allowMultipleExpanded prop is true', () => {
-        const items = generateContentArray(3);
-        items[2].isDefaultOpen = false;
-        const defaultProps = {
-            allowMultipleExpanded: false,
-            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');
-
-        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');
-
-        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');
-        }
-    });
-    it('7. shows end icon only when showEndIconWhenEmpty is true', async () => {
-        const items = generateContentArray(3, false);
-        const defaultProps = {
-            additionalProps: {
-                testid: 'test-accordion',
-            },
-            allowMultipleExpanded: false,
-            items,
-            variant: AccordionVariant.Compact,
-            level: 0,
-            invert: false,
-            showEndIconWhenEmpty: true,
-        };
-        const { getAllByTestId } = render(<NsAccordion {...defaultProps} />);
-        const elements = getAllByTestId('arrowDown');
-
-        elements.forEach((element) => {
-            expect(element).toBeInTheDocument();
-        });
-    });
-});

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

@@ -1,172 +0,0 @@
-import React from 'react';
-import { render, fireEvent } from '@/test-utils/index';
-import { NsAccordionHeader, AccordionVariant, NsLink } from '@/common/index';
-
-const content = [
-    {
-        type: 'text',
-        id: '1',
-        title: 'title1',
-        content: (
-            <div>
-                <p>1</p>
-                <p>2</p>
-            </div>
-        ),
-    },
-    {
-        type: 'text',
-        id: '2',
-        title: <NsLink href={'/test'}>title2</NsLink>,
-        content: null,
-    },
-    {
-        type: 'text',
-        id: '3',
-        title: 'title3',
-        content: (
-            <div>
-                <p>1</p>
-                <p>2</p>
-                <p>3</p>
-            </div>
-        ),
-    },
-];
-
-describe('NsAccordionHeader', () => {
-    it('1. renders title correctly', () => {
-        const onClick = jest.fn();
-        const title = 'Section Header';
-
-        const { getByText } = render(
-            <NsAccordionHeader
-                variant={AccordionVariant.Basic}
-                title={title}
-                onClick={onClick}
-                invert={false}
-                isOpen={true}
-                content={content}
-            />
-        );
-        const el = getByText(title);
-        expect(el).toBeInTheDocument();
-        expect(el.closest('header')).toHaveAttribute('aria-expanded', 'true');
-    });
-    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}
-                content={content}
-            />
-        );
-        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}
-                content={content}
-            />
-        );
-        const header = container.querySelector('header');
-        if (header) {
-            fireEvent.click(header);
-            expect(onClick).toHaveBeenCalledTimes(1);
-        }
-    });
-
-    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}
-                content={content}
-            />
-        );
-        expect(container.querySelector('header')).toHaveClass(`section-header ${additionalClassName}`);
-    });
-
-    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}
-                invert={false}
-                content={content}
-            />
-        );
-        expect(container.querySelector('header')).toHaveClass('expanded');
-    });
-
-    it('6. renders with header icon when showEndIconWhenEmpty is true', () => {
-        const onClick = jest.fn();
-        const { getByTestId } = render(
-            <NsAccordionHeader
-                variant={AccordionVariant.Basic}
-                title="Section Header"
-                onClick={onClick}
-                invert={false}
-                isOpen
-                showEndIconWhenEmpty={true}
-                content={content}
-            />
-        );
-        // 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' }}
-                content={content}
-            />
-        );
-        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 }}
-                content={content}
-            />
-        );
-        expect(queryByTestId(testId)).toBeNull();
-    });
-});

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

@@ -1,79 +0,0 @@
-import React from 'react';
-import { render, fireEvent } from '@/test-utils/index';
-import { NsAccordionItem, AccordionVariant } from '@/common/index';
-
-describe('NsAccordionItem', () => {
-    const title = 'Accordion Section Title';
-    const content = 'Accordion Section Content';
-    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={contentElement}
-                isChild={false}
-                invert={false}
-                level={1}
-            />
-        );
-        expect(getByText(title)).toBeInTheDocument();
-    });
-
-    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={contentElement}
-                isChild={false}
-                invert={false}
-                level={1}
-            />
-        );
-        fireEvent.click(getByText(title));
-        expect(toggleOpen).toHaveBeenCalledTimes(1);
-    });
-
-    it('3. renders content when isOpen is true', () => {
-        const { getByText } = render(
-            <NsAccordionItem
-                variant={AccordionVariant.Basic}
-                isOpen={true}
-                toggleOpen={() => {}}
-                title={title}
-                type="jsx"
-                content={contentElement}
-                isChild={false}
-                invert={false}
-                level={1}
-            />
-        );
-        expect(getByText(content)).toBeInTheDocument();
-    });
-
-    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={contentElement}
-                isChild={false}
-                invert={false}
-                level={1}
-            />
-        );
-        const bodyElement = queryByText(content);
-        expect(bodyElement?.parentNode).toHaveStyle('height:0px;');
-    });
-});

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

@@ -1,130 +0,0 @@
-import { AccordionItem, AccordionVariant, NsCollapse } from '@/common/index';
-import { render, screen } from '@/test-utils/index';
-import React from 'react';
-
-import { createAccordionItem3_1 } from '../stories/data';
-
-describe('NsCollapse', () => {
-    it('1. renders children when isOpen is true', () => {
-        const { getByText } = render(
-            <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 as string)).toBeInTheDocument();
-        expect(getByText(content[1].title as string)).toBeInTheDocument();
-    });
-
-    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={true}
-                variant={AccordionVariant.Compact}
-                type="html"
-                content={content}
-                isChild={false}
-                invert={true}
-                level={0}
-            />
-        );
-        expect(screen.queryByText(content)).toBeDefined();
-    });
-
-    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
-                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

@@ -1,74 +0,0 @@
-import React from 'react';
-
-import { AccordionVariant, NsToggleSection } from '@/common/index';
-
-import { render, fireEvent } from '@/test-utils/index';
-
-describe('NsToggleSection', () => {
-    const title = 'Toggle Section Title';
-    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={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('2. toggles content visibility when clicked on the section header', () => {
-        const { getByText, queryByText } = render(
-            <NsToggleSection
-                variant={AccordionVariant.Basic}
-                title={title}
-                content={content}
-                invert={false}
-                isChild={false}
-                type="jsx"
-            />
-        );
-        const el = queryByText(contentText);
-        expect(el?.parentNode).toHaveStyle('opacity: 0;');
-
-        fireEvent.click(getByText(title));
-        expect(el?.parentNode).toHaveStyle('opacity: 1;');
-
-        fireEvent.click(getByText(title));
-        expect(el?.parentNode).toHaveStyle('opacity: 0;');
-    });
-
-    it('3. sets defaultOpen prop correctly', () => {
-        const { getByText } = render(
-            <NsToggleSection
-                variant={AccordionVariant.Basic}
-                title={title}
-                content={content}
-                invert={false}
-                isChild={false}
-                defaultOpen
-                type="jsx"
-            />
-        );
-
-        expect(getByText(contentText)).toBeInTheDocument();
-    });
-});