diff --git a/src/components/JsonViewer/JsonViewer.tsx b/src/components/JsonViewer/JsonViewer.tsx index 8ae9d9b9..ba2738e8 100644 --- a/src/components/JsonViewer/JsonViewer.tsx +++ b/src/components/JsonViewer/JsonViewer.tsx @@ -41,6 +41,7 @@ const Json = (props: JsonProps) => { {options => ( setNode(node!)} diff --git a/src/components/__tests__/JsonViewer.tsx b/src/components/__tests__/JsonViewer.tsx index 35b5d179..ae3ba9de 100644 --- a/src/components/__tests__/JsonViewer.tsx +++ b/src/components/__tests__/JsonViewer.tsx @@ -2,6 +2,7 @@ import { mount, ReactWrapper } from 'enzyme'; import * as React from 'react'; +import { act } from 'react'; import { JsonViewer } from '../'; import { withTheme } from '../testProviders'; @@ -50,5 +51,54 @@ describe('Components', () => { expect(flatDataComponent.html()).not.toContain('Expand all'); expect(flatDataComponent.html()).not.toContain('Collapse all'); }); + + describe('Keyboard Navigation', () => { + let component: ReactWrapper; + const data = { + a: 1, + b: { + c: + // Long string to test horizontal scrolling + Array(100).fill('hello').join(''), + }, + }; + + beforeEach(() => { + component = mount(withTheme()); + ClipboardService.copySelected = origCopySelected; + }); + + test('should handle arrow key navigation', () => { + const prismDiv = component.find('div[tabIndex=0]'); + const divElement = prismDiv.getDOMNode(); + + // Mock scrollLeft before events + Object.defineProperty(divElement, 'scrollLeft', { + get: jest.fn(() => 0), + set: jest.fn(), + }); + + // Trigger events inside act() + act(() => { + divElement.dispatchEvent( + new KeyboardEvent('keydown', { + key: 'ArrowRight', + bubbles: true, + }), + ); + }); + + act(() => { + divElement.dispatchEvent( + new KeyboardEvent('keydown', { + key: 'ArrowLeft', + bubbles: true, + }), + ); + }); + + expect(divElement.scrollLeft).toBe(0); + }); + }); }); });