Test/render toolbar and collapse icon type visual tests

src/ReactUnipika/__stories__/CustomToolbarExample.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import type {ToolbarProps} from '../../StructuredYson/types';
+
+export function CustomToolbarExample({
+    onFilterChange,
+    onExpandAll,
+    onCollapseAll,
+    isCollapsed,
+}: ToolbarProps) {
+    return (
+        <div
+            style={{
+                padding: '8px',
+                background: 'var(--g-color-base-background)',
+                borderBottom: '1px solid var(--g-color-line-generic)',
+                position: 'sticky',
+                top: '0px',
+                display: 'flex',
+                gap: '12px',
+                justifyContent: 'space-between',
+                zIndex: '1',
+            }}
+        >
+            <input
+                placeholder="Custom search..."
+                onChange={(e) => onFilterChange(e.target.value)}
+                data-qa="custom-toolbar-search"
+                style={{
+                    padding: '4px 8px',
+                    border: '1px solid var(--g-color-line-generic)',
+                    borderRadius: '4px',
+                    flex: 1,
+                }}
+            />
+            <button
+                onClick={isCollapsed ? onExpandAll : onCollapseAll}
+                data-qa="custom-toolbar-toggle"
+                style={{
+                    padding: '4px 12px',
+                    border: '1px solid var(--g-color-line-generic)',
+                    borderRadius: '4px',
+                    background: 'var(--g-color-base-background)',
+                    cursor: 'pointer',
+                }}
+            >
+                {isCollapsed ? 'Expand All' : 'Collapse All'}
+            </button>
+        </div>
+    );
+}

src/ReactUnipika/__stories__/ReactUnipikaContainerScroll.stories.tsx

@@ -6,6 +6,7 @@ import {Meta, StoryObj} from '@storybook/react';
 import {ReactUnipika, ReactUnipikaProps} from '../../container-scroll';
 
 import data from './data.json';
+import {CustomToolbarExample} from './CustomToolbarExample';
 
 function WithScrollContainerComponent(props: Omit<ReactUnipikaProps, 'scrollContainerRef'>) {
     const scrollContainerRef = React.useRef<HTMLDivElement>(null);
@@ -113,3 +114,25 @@ export const WithError: StoryObj<ReactUnipikaProps> = {
         },
     },
 };
+
+export const WithChevronCollapseIcon: StoryObj<ReactUnipikaProps> = {
+    args: {
+        value: data,
+        collapseIconType: 'chevron',
+    },
+};
+
+export const WithChevronCollapseIconInitiallyCollapsed: StoryObj<ReactUnipikaProps> = {
+    args: {
+        value: data,
+        collapseIconType: 'chevron',
+        initiallyCollapsed: true,
+    },
+};
+
+export const WithCustomToolbar: StoryObj<ReactUnipikaProps> = {
+    args: {
+        value: data,
+        renderToolbar: CustomToolbarExample,
+    },
+};

src/ReactUnipika/__stories__/ReactUnipikaWindowScroll.stories.tsx

@@ -7,6 +7,7 @@ import {Meta, StoryObj} from '@storybook/react';
 import {ReactUnipika, ReactUnipikaProps} from '../../window-scroll';
 
 import data from './data.json';
+import {CustomToolbarExample} from './CustomToolbarExample';
 
 const meta: Meta<ReactUnipikaProps> = {
     title: 'ReactUnipika/Window Scroll',
@@ -98,3 +99,25 @@ export const WithError: StoryObj<ReactUnipikaProps> = {
         },
     },
 };
+
+export const WithChevronCollapseIcon: StoryObj<ReactUnipikaProps> = {
+    args: {
+        value: data,
+        collapseIconType: 'chevron',
+    },
+};
+
+export const WithChevronCollapseIconInitiallyCollapsed: StoryObj<ReactUnipikaProps> = {
+    args: {
+        value: data,
+        collapseIconType: 'chevron',
+        initiallyCollapsed: true,
+    },
+};
+
+export const WithCustomToolbar: StoryObj<ReactUnipikaProps> = {
+    args: {
+        value: data,
+        renderToolbar: CustomToolbarExample,
+    },
+};

src/ReactUnipika/__tests__/ReactUnipikaContainerScroll.visual.test.tsx

@@ -295,3 +295,65 @@ test('ReactUnipika: with case sensitive search with matches', async ({
 
     await expectScreenshot({component: page});
 });
+
+test('ReactUnipika: with chevron collapse icon', async ({mount, expectScreenshot, page}) => {
+    await mount(<Stories.WithChevronCollapseIcon />, {width: 1280});
+    await expectScreenshot({component: page});
+});
+
+test('ReactUnipika: with chevron collapse icon - collapse', async ({
+    mount,
+    expectScreenshot,
+    page,
+}) => {
+    await mount(<Stories.WithChevronCollapseIcon />, {width: 1280});
+
+    // Click the first chevron button to collapse (chevron should change from Up to Right)
+    await page.locator('.g-ru-cell__collapse button').first().click();
+
+    await expectScreenshot({component: page});
+});
+
+test('ReactUnipika: with chevron collapse icon - expand', async ({
+    mount,
+    expectScreenshot,
+    page,
+}) => {
+    await mount(<Stories.WithChevronCollapseIconInitiallyCollapsed />, {width: 1280});
+
+    // Click the first chevron button to expand (chevron should change from Right to Up)
+    await page.locator('.g-ru-cell__collapse button').first().click();
+
+    await expectScreenshot({component: page});
+});
+
+test('ReactUnipika: with custom toolbar', async ({mount, expectScreenshot, page}) => {
+    await mount(<Stories.WithCustomToolbar />, {width: 1280});
+    await expectScreenshot({component: page});
+});
+
+test('ReactUnipika: with custom toolbar - search interaction', async ({
+    mount,
+    expectScreenshot,
+    page,
+}) => {
+    await mount(<Stories.WithCustomToolbar />, {width: 1280});
+
+    // Type in the custom search input
+    await page.locator('[data-qa="custom-toolbar-search"]').fill('level8_item4');
+
+    await expectScreenshot({component: page});
+});
+
+test('ReactUnipika: with custom toolbar - collapse all', async ({
+    mount,
+    expectScreenshot,
+    page,
+}) => {
+    await mount(<Stories.WithCustomToolbar />, {width: 1280});
+
+    // Click the toggle button to collapse all
+    await page.locator('[data-qa="custom-toolbar-toggle"]').click();
+
+    await expectScreenshot({component: page});
+});

src/ReactUnipika/__tests__/ReactUnipikaWindowScroll.visual.test.tsx

@@ -252,3 +252,65 @@ test('ReactUnipika: with case sensitive search with matches', async ({
 
     await expectScreenshot({component: page});
 });
+
+test('ReactUnipika: with chevron collapse icon', async ({mount, expectScreenshot, page}) => {
+    await mount(<Stories.WithChevronCollapseIcon />, {width: 1280});
+    await expectScreenshot({component: page});
+});
+
+test('ReactUnipika: with chevron collapse icon - collapse', async ({
+    mount,
+    expectScreenshot,
+    page,
+}) => {
+    await mount(<Stories.WithChevronCollapseIcon />, {width: 1280});
+
+    // Click the first chevron button to collapse (chevron should change from Up to Right)
+    await page.locator('.g-ru-cell__collapse button').first().click();
+
+    await expectScreenshot({component: page});
+});
+
+test('ReactUnipika: with chevron collapse icon - expand', async ({
+    mount,
+    expectScreenshot,
+    page,
+}) => {
+    await mount(<Stories.WithChevronCollapseIconInitiallyCollapsed />, {width: 1280});
+
+    // Click the first chevron button to expand (chevron should change from Right to Up)
+    await page.locator('.g-ru-cell__collapse button').first().click();
+
+    await expectScreenshot({component: page});
+});
+
+test('ReactUnipika: with custom toolbar', async ({mount, expectScreenshot, page}) => {
+    await mount(<Stories.WithCustomToolbar />, {width: 1280});
+    await expectScreenshot({component: page});
+});
+
+test('ReactUnipika: with custom toolbar - search interaction', async ({
+    mount,
+    expectScreenshot,
+    page,
+}) => {
+    await mount(<Stories.WithCustomToolbar />, {width: 1280});
+
+    // Type in the custom search input
+    await page.locator('[data-qa="custom-toolbar-search"]').fill('level8_item4');
+
+    await expectScreenshot({component: page});
+});
+
+test('ReactUnipika: with custom toolbar - collapse all', async ({
+    mount,
+    expectScreenshot,
+    page,
+}) => {
+    await mount(<Stories.WithCustomToolbar />, {width: 1280});
+
+    // Click the toggle button to collapse all
+    await page.locator('[data-qa="custom-toolbar-toggle"]').click();
+
+    await expectScreenshot({component: page});
+});