diff --git a/.changeset/sunny-beds-join.md b/.changeset/sunny-beds-join.md new file mode 100644 index 0000000000..064435dc68 --- /dev/null +++ b/.changeset/sunny-beds-join.md @@ -0,0 +1,5 @@ +--- + +--- + + diff --git a/packages/agentic/components/src/components/skeleton/skeleton.test.tsx b/packages/agentic/components/src/components/skeleton/skeleton.test.tsx index a393980e33..f24ed96c22 100644 --- a/packages/agentic/components/src/components/skeleton/skeleton.test.tsx +++ b/packages/agentic/components/src/components/skeleton/skeleton.test.tsx @@ -49,6 +49,59 @@ describe('Skeleton', () => { return node; } + it.each([ + { width: 0, height: 16 }, + { width: 120, height: 0 }, + ])('SKEL-002/SKEL-003 mounts only the input-transparent sweep for a positive rectangle: %j', async (emptyLayout) => { + const component = await renderSkeleton({ style: { width: 120, height: 16 } }); + const root = getRoot(component); + expect(root.children).toHaveLength(0); + + await fireEvent(root, 'layout', { nativeEvent: { layout: { ...emptyLayout, x: 0, y: 0 } } }); + expect(root.children).toHaveLength(0); + expect(Animated.loop).not.toHaveBeenCalled(); + + await fireEvent(root, 'layout', { nativeEvent: { layout: { width: 120, height: 16, x: 0, y: 0 } } }); + expect(root.children).toHaveLength(1); + expect(component.getByTestId('skeleton-shimmer', { includeHiddenElements: true }).props.pointerEvents).toBe('none'); + + await fireEvent(root, 'layout', { nativeEvent: { layout: { ...emptyLayout, x: 0, y: 0 } } }); + expect(root.children).toHaveLength(0); + }); + + it('SKEL-005 removes a running sweep when reduced motion changes and resumes after it is disabled', async () => { + const component = await renderSkeleton({ style: { width: 120, height: 16 } }); + await fireEvent(getRoot(component), 'layout', { nativeEvent: { layout: { width: 120, height: 16, x: 0, y: 0 } } }); + const animation = jest.mocked(Animated.loop).mock.results[0].value; + expect(animation.start).toHaveBeenCalledTimes(1); + expect(component.getByTestId('skeleton-shimmer', { includeHiddenElements: true })).toBeOnTheScreen(); + + mockUseReducedMotion.mockReturnValue(true); + await component.rerender(); + expect(animation.stop).toHaveBeenCalledTimes(1); + expect(getRoot(component).children).toHaveLength(0); + expect(getRootStyle(component).backgroundColor).toBe(defaultFlexTokens.color.backgroundNeutralSoft); + + mockUseReducedMotion.mockReturnValue(false); + await component.rerender(); + expect(animation.start).toHaveBeenCalledTimes(2); + expect(component.getByTestId('skeleton-shimmer', { includeHiddenElements: true })).toBeOnTheScreen(); + }); + + it('SKEL-001 retains owned hidden accessibility props even when caller root props request exposure', async () => { + const component = await renderSkeleton({ + accessible: true, + accessibilityElementsHidden: false, + importantForAccessibility: 'yes', + }); + + expect(getRoot(component).props).toMatchObject({ + accessible: false, + accessibilityElementsHidden: true, + importantForAccessibility: 'no-hide-descendants', + }); + }); + it('renders a decorative bar with themed fill and rounded corners', async () => { const component = await renderSkeleton({ style: { height: 16, width: 120 } });