initial testing set up

Author: johnwdunn20

test-extension/__tests__/ContinuousSlider.test.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import ContinuousSlider from '../src/components/ContinuousSlider'; // Adjust the import path as necessary
+import '@testing-library/jest-dom';
+
+describe('ContinuousSlider', () => {
+ it('renders correctly with given props', () => {
+ const handleChange = jest.fn();
+ const { asFragment } = render(<ContinuousSlider value={30} maxValue={100} onChange={handleChange} />);
+
+ const slider = screen.getByRole('slider');
+ expect(slider).toBeInTheDocument();
+ expect(slider).toHaveAttribute('aria-valuemax', '100');
+ expect(slider).toHaveAttribute('aria-valuenow', '30');
+ expect(asFragment()).toMatchSnapshot();
+ });
+
+ it('calls onChange with the new value when changed', async () => {
+ const handleChange = jest.fn();
+ render(<ContinuousSlider value={30} maxValue={100} onChange={handleChange} />);
+
+ // Assuming the slider allows keyboard input, you can simulate changes like this
+ const slider = screen.getByRole('slider');
+ await userEvent.click(slider);
+ await userEvent.keyboard('{arrowright}'); // Simulates pressing the right arrow key to increase the value
+
+ expect(handleChange).toHaveBeenCalledWith(expect.any(Number));
+ });
+
+});

test-extension/__tests__/DiffTab.test.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import DiffTab from '../src/containers/DiffTab';
+import '@testing-library/jest-dom';
+import { QueryDisplay } from '../src/types';
+import exp from 'constants';
+
+describe('DiffTab Component', () => {
+ const queryDisplayMock: QueryDisplay[][] = [
+ [
+ {
+ queryKey: 'Query 1',
+ queryData: { some: 'data' }
+ },
+ {
+ queryKey: 'Query 2',
+ queryData: { more: 'data' }
+ }
+ ],
+ [
+ {
+ queryKey: 'Query 1',
+ queryData: { some: 'different data' }
+ }
+ ]
+ ];
+
+ it('renders correctly with initial state', () => {
+ const { asFragment } = render(<DiffTab queryDisplay={queryDisplayMock} currentIndex={0} />);
+ expect(screen.getByLabelText(/Hide Unchanged Properties/i)).toBeInTheDocument();
+ expect(screen.getByText(/Query 1/i)).toBeInTheDocument();
+ expect(asFragment()).toMatchSnapshot();
+ });
+
+ it('toggles isHidden state on switch toggle', () => {
+ const { asFragment } = render(<DiffTab queryDisplay={queryDisplayMock} currentIndex={0} />);
+ fireEvent.click(screen.getByRole('checkbox')); // Clicks the switch
+ expect(screen.getByLabelText(/Show Unchanged Properties/i)).toBeInTheDocument();
+ expect(asFragment()).toMatchSnapshot();
+ });
+
+ it('renders JsonDiff component with correct props based on isHidden state', () => {
+ const { rerender, asFragment } = render(<DiffTab queryDisplay={queryDisplayMock} currentIndex={1} />);
+ let switchControl = screen.getByRole('checkbox');
+
+ // Initially, isHidden should be false, so "Hide" should be in the label
+ expect(switchControl).not.toBeChecked();
+ expect(screen.getByText(/Hide Unchanged Properties/i)).toBeInTheDocument();
+ expect(asFragment()).toMatchSnapshot();
+
+ // Toggle the switch to change isHidden state
+ fireEvent.click(switchControl);
+ // Rerendering is necessary only if the component's response to state changes cannot be detected without it
+ rerender(<DiffTab queryDisplay={queryDisplayMock} currentIndex={1} />);
+
+ // Now, isHidden should be true, so "Show" should be in the label
+ expect(screen.getByLabelText(/Show Unchanged Properties/i)).toBeInTheDocument();
+ expect(asFragment()).toMatchSnapshot();
+ });
+});

test-extension/__tests__/JsonDiff.test.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import JsonDiff from '../src/components/JsonDiff';
+
+describe('JsonDiff Component', () => {
+ it('displays initial state message for empty currentJson and snapshot', () => {
+ const { getByText, asFragment } = render(
+ <JsonDiff
+ oldJson={undefined}
+ currentJson=""
+ queryKey="testQueryKey"
+ isHidden={false}
+ />
+ );
+ expect(getByText(/Initial state - no comparison available/i)).toBeInTheDocument();
+ expect(asFragment()).toMatchSnapshot();
+ });
+
+ it('displays a diff when there are differences between oldJson and currentJson and snapshot', () => {
+ const oldJson = { key: "oldValue" };
+ const currentJson = { key: "newValue" };
+ const { container, asFragment } = render(
+ <JsonDiff
+ oldJson={oldJson}
+ currentJson={currentJson}
+ queryKey="testQueryKey"
+ isHidden={false}
+ />
+ );
+ // Assert that the diff is displayed
+ expect(container.querySelector('.jsondiffpatch-delta')).not.toBeNull();
+ expect(asFragment()).toMatchSnapshot();
+ });
+ 
+
+ it('displays no changes message when oldJson and currentJson are the same', () => {
+ const json = { key: "value" };
+ const { getByText, asFragment } = render(
+ <JsonDiff
+ oldJson={json}
+ currentJson={json}
+ queryKey="testQueryKey"
+ isHidden={false}
+ />
+ );
+ expect(getByText(/QueryKey data not modified on this state change/i)).toBeInTheDocument();
+ expect(asFragment()).toMatchSnapshot();
+ });
+
+ it('toggles visibility based on isHidden prop', () => {
+ const json = { key: "value" };
+ const newJson = { key: "newValue" };
+ const { container, rerender, asFragment } = render(
+ <JsonDiff
+ oldJson={json}
+ currentJson={newJson}
+ queryKey="testQueryKey"
+ isHidden={true}
+ />
+ );
+ // Initially, the class indicating hidden changes should be present
+ expect(container.querySelector('.jsondiffpatch-unchanged-hidden')).not.toBeNull();
+ expect(asFragment()).toMatchSnapshot();
+ 
+ // Rerender with isHidden = false and check if the class is removed
+ rerender(
+ <JsonDiff
+ oldJson={json}
+ currentJson={newJson}
+ queryKey="testQueryKey"
+ isHidden={false}
+ />
+ );
+ expect(container.querySelector('.jsondiffpatch-unchanged-hidden')).toBeNull();
+ expect(asFragment()).toMatchSnapshot();
+ });
+ 
+});

test-extension/__tests__/JsonFormatter.test.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import JsonFormatter from '../src/components/JsonFormatter';
+
+describe('JsonFormatter component', () => {
+ it('renders without crashing and snapshot', () => {
+ const { asFragment } = render(<JsonFormatter
+ key={1}
+ queryKey={'[posts-one]'}
+ jsonData={{val: 'test', arr: [1,2,3]}}
+ />);
+
+ expect(asFragment()).toMatchSnapshot();
+ });
+});

test-extension/__tests__/__snapshots__/ContinuousSlider.test.tsx.snap

@@ -0,0 +1,37 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ContinuousSlider renders correctly with given props 1`] = `
+<DocumentFragment>
+ <span
+ class="MuiSlider-root MuiSlider-colorPrimary MuiSlider-sizeMedium css-187mznn-MuiSlider-root"
+ >
+ <span
+ class="MuiSlider-rail css-14pt78w-MuiSlider-rail"
+ />
+ <span
+ class="MuiSlider-track css-1gv0vcd-MuiSlider-track"
+ style="left: 0%; width: 30%;"
+ />
+ <span
+ class="MuiSlider-thumb MuiSlider-thumbSizeMedium MuiSlider-thumbColorPrimary MuiSlider-thumb MuiSlider-thumbSizeMedium MuiSlider-thumbColorPrimary css-eg0mwd-MuiSlider-thumb"
+ data-index="0"
+ style="left: 30%;"
+ >
+ <input
+ aria-labelledby="continuous-slider"
+ aria-orientation="horizontal"
+ aria-valuemax="100"
+ aria-valuemin="0"
+ aria-valuenow="30"
+ data-index="0"
+ max="100"
+ min="0"
+ step="1"
+ style="border: 0px; height: 100%; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 100%; direction: ltr;"
+ type="range"
+ value="30"
+ />
+ </span>
+ </span>
+</DocumentFragment>
+`;