John/tree

.github/workflows/deployChrome.yml

@@ -0,0 +1,28 @@
+name: Publish Chrome Extension
+on:
+ push:
+ branches:
+ - main
+
+jobs:
+ build-and-publish:
+ runs-on: ubuntu-latest
+ steps:
+ - uses: actions/checkout@v4
+
+ - name: Setup Node.js
+ uses: actions/setup-node@v4
+ with:
+ node-version: '20.7.0'
+
+ - name: Install Dependencies
+ run: cd package && npm ci
+
+ - name: Build
+ run: cd package && npm run build
+
+ # https://developer.chrome.com/docs/webstore/using-api
+ # Challenges:
+ # Chrome Extensions go through a review so all changes to npm package need to be backward compatable because we can publish npm before the extension is approved and we don't know when the extension will be approved
+ # Not clear if we zip it like we did when we uploaded it manually. When we uploaded it manually we zipped the dist folder and uploaded just that.
+

.github/workflows/npmPublish.yml

@@ -0,0 +1,31 @@
+name: Publish NPM Package
+
+on:
+ push:
+ branches:
+ - main
+
+jobs:
+ build-and-publish:
+ runs-on: ubuntu-latest
+ steps:
+ - uses: actions/checkout@v4
+
+ - name: Setup Node.js
+ uses: actions/setup-node@v4
+ with:
+ node-version: '20.7.0'
+ registry-url: 'https://registry.npmjs.org/'
+
+ # Ideally we automatically update the version number in package.json
+
+ - name: Install Dependencies
+ run: cd package && npm ci
+
+ - name: Build
+ run: cd package && npm run build
+
+ - name: Publish to NPM
+ run: cd package && npm publish
+ env:
+ NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/tests.yml

@@ -16,7 +16,7 @@ jobs:
  - name: Use Node.js 18
  uses: actions/setup-node@v4
  with:
- node-version: 18
+ node-version: '20.7.0'
  cache: 'npm'
  - name: Install Extension dependencies
  run: |

.gitignore

@@ -1,2 +1,3 @@
 node_modules/
 dist
+coverage/

extension/.eslintrc.js

@@ -0,0 +1,36 @@
+// peer dependencies errored because of older versions: Installing eslint-plugin-react@latest, eslint-config-standard-with-typescript@latest, @typescript-eslint/eslint-plugin@^6.4.0, eslint@^8.0.1, eslint-plugin-import@^2.25.2, eslint-plugin-n@^15.0.0 || ^16.0.0 , eslint-plugin-promise@^6.0.0, typescript@*
+
+// I think they need to be updated in the package package.json file
+
+module.exports = {
+ "env": {
+ "browser": true,
+ "es2021": true
+ },
+ "extends": [
+ "standard-with-typescript",
+ "plugin:react/recommended"
+ ],
+ "overrides": [
+ {
+ "env": {
+ "node": true
+ },
+ "files": [
+ ".eslintrc.{js,cjs}"
+ ],
+ "parserOptions": {
+ "sourceType": "script"
+ }
+ }
+ ],
+ "parserOptions": {
+ "ecmaVersion": "latest",
+ "sourceType": "module"
+ },
+ "plugins": [
+ "react"
+ ],
+ "rules": {
+ }
+}

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));
+ });
+
+});

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();
+ });
+});

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();
+ });
+
+});

extension/__tests__/JsonFormatter.tsx → extension/__tests__/JsonFormatter.test.tsx

@@ -3,11 +3,13 @@ import { render } from '@testing-library/react';
 import JsonFormatter from '../src/components/JsonFormatter';
 
 describe('JsonFormatter component', () => {
- it('renders without crashing', () => {
- render(<JsonFormatter
+ 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();
  });
 });

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>
+`;