Skip to content

Commit 62826e4

Browse files
Merge pull request #50 from oslabs-beta/john/tree
John/tree
2 parents 2e2a786 + adb14c9 commit 62826e4

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

46 files changed

+8839
-1789
lines changed

.github/workflows/deployChrome.yml

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
name: Publish Chrome Extension
2+
on:
3+
push:
4+
branches:
5+
- main
6+
7+
jobs:
8+
build-and-publish:
9+
runs-on: ubuntu-latest
10+
steps:
11+
- uses: actions/checkout@v4
12+
13+
- name: Setup Node.js
14+
uses: actions/setup-node@v4
15+
with:
16+
node-version: '20.7.0'
17+
18+
- name: Install Dependencies
19+
run: cd package && npm ci
20+
21+
- name: Build
22+
run: cd package && npm run build
23+
24+
# https://developer.chrome.com/docs/webstore/using-api
25+
# Challenges:
26+
# 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
27+
# 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.
28+

.github/workflows/npmPublish.yml

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
name: Publish NPM Package
2+
3+
on:
4+
push:
5+
branches:
6+
- main
7+
8+
jobs:
9+
build-and-publish:
10+
runs-on: ubuntu-latest
11+
steps:
12+
- uses: actions/checkout@v4
13+
14+
- name: Setup Node.js
15+
uses: actions/setup-node@v4
16+
with:
17+
node-version: '20.7.0'
18+
registry-url: 'https://registry.npmjs.org/'
19+
20+
# Ideally we automatically update the version number in package.json
21+
22+
- name: Install Dependencies
23+
run: cd package && npm ci
24+
25+
- name: Build
26+
run: cd package && npm run build
27+
28+
- name: Publish to NPM
29+
run: cd package && npm publish
30+
env:
31+
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/tests.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ jobs:
1616
- name: Use Node.js 18
1717
uses: actions/setup-node@v4
1818
with:
19-
node-version: 18
19+
node-version: '20.7.0'
2020
cache: 'npm'
2121
- name: Install Extension dependencies
2222
run: |

.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
node_modules/
22
dist
3+
coverage/

extension/.eslintrc.js

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
// 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@*
2+
3+
// I think they need to be updated in the package package.json file
4+
5+
module.exports = {
6+
"env": {
7+
"browser": true,
8+
"es2021": true
9+
},
10+
"extends": [
11+
"standard-with-typescript",
12+
"plugin:react/recommended"
13+
],
14+
"overrides": [
15+
{
16+
"env": {
17+
"node": true
18+
},
19+
"files": [
20+
".eslintrc.{js,cjs}"
21+
],
22+
"parserOptions": {
23+
"sourceType": "script"
24+
}
25+
}
26+
],
27+
"parserOptions": {
28+
"ecmaVersion": "latest",
29+
"sourceType": "module"
30+
},
31+
"plugins": [
32+
"react"
33+
],
34+
"rules": {
35+
}
36+
}
Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import * as React from 'react';
2+
import { render, screen, fireEvent } from '@testing-library/react';
3+
import userEvent from '@testing-library/user-event';
4+
import ContinuousSlider from '../src/components/ContinuousSlider'; // Adjust the import path as necessary
5+
import '@testing-library/jest-dom';
6+
7+
describe('ContinuousSlider', () => {
8+
it('renders correctly with given props', () => {
9+
const handleChange = jest.fn();
10+
const { asFragment } = render(<ContinuousSlider value={30} maxValue={100} onChange={handleChange} />);
11+
12+
const slider = screen.getByRole('slider');
13+
expect(slider).toBeInTheDocument();
14+
expect(slider).toHaveAttribute('aria-valuemax', '100');
15+
expect(slider).toHaveAttribute('aria-valuenow', '30');
16+
expect(asFragment()).toMatchSnapshot();
17+
});
18+
19+
it('calls onChange with the new value when changed', async () => {
20+
const handleChange = jest.fn();
21+
render(<ContinuousSlider value={30} maxValue={100} onChange={handleChange} />);
22+
23+
// Assuming the slider allows keyboard input, you can simulate changes like this
24+
const slider = screen.getByRole('slider');
25+
await userEvent.click(slider);
26+
await userEvent.keyboard('{arrowright}'); // Simulates pressing the right arrow key to increase the value
27+
28+
expect(handleChange).toHaveBeenCalledWith(expect.any(Number));
29+
});
30+
31+
});

extension/__tests__/DiffTab.test.tsx

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import React from 'react';
2+
import { render, screen, fireEvent } from '@testing-library/react';
3+
import DiffTab from '../src/containers/DiffTab';
4+
import '@testing-library/jest-dom';
5+
import { QueryDisplay } from '../src/types';
6+
import exp from 'constants';
7+
8+
describe('DiffTab Component', () => {
9+
const queryDisplayMock: QueryDisplay[][] = [
10+
[
11+
{
12+
queryKey: 'Query 1',
13+
queryData: { some: 'data' }
14+
},
15+
{
16+
queryKey: 'Query 2',
17+
queryData: { more: 'data' }
18+
}
19+
],
20+
[
21+
{
22+
queryKey: 'Query 1',
23+
queryData: { some: 'different data' }
24+
}
25+
]
26+
];
27+
28+
it('renders correctly with initial state', () => {
29+
const { asFragment } = render(<DiffTab queryDisplay={queryDisplayMock} currentIndex={0} />);
30+
expect(screen.getByLabelText(/Hide Unchanged Properties/i)).toBeInTheDocument();
31+
expect(screen.getByText(/Query 1/i)).toBeInTheDocument();
32+
expect(asFragment()).toMatchSnapshot();
33+
});
34+
35+
it('toggles isHidden state on switch toggle', () => {
36+
const { asFragment } = render(<DiffTab queryDisplay={queryDisplayMock} currentIndex={0} />);
37+
fireEvent.click(screen.getByRole('checkbox')); // Clicks the switch
38+
expect(screen.getByLabelText(/Show Unchanged Properties/i)).toBeInTheDocument();
39+
expect(asFragment()).toMatchSnapshot();
40+
});
41+
42+
it('renders JsonDiff component with correct props based on isHidden state', () => {
43+
const { rerender, asFragment } = render(<DiffTab queryDisplay={queryDisplayMock} currentIndex={1} />);
44+
let switchControl = screen.getByRole('checkbox');
45+
46+
// Initially, isHidden should be false, so "Hide" should be in the label
47+
expect(switchControl).not.toBeChecked();
48+
expect(screen.getByText(/Hide Unchanged Properties/i)).toBeInTheDocument();
49+
expect(asFragment()).toMatchSnapshot();
50+
51+
// Toggle the switch to change isHidden state
52+
fireEvent.click(switchControl);
53+
// Rerendering is necessary only if the component's response to state changes cannot be detected without it
54+
rerender(<DiffTab queryDisplay={queryDisplayMock} currentIndex={1} />);
55+
56+
// Now, isHidden should be true, so "Show" should be in the label
57+
expect(screen.getByLabelText(/Show Unchanged Properties/i)).toBeInTheDocument();
58+
expect(asFragment()).toMatchSnapshot();
59+
});
60+
});

extension/__tests__/JsonDiff.test.tsx

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import React from 'react';
2+
import { render } from '@testing-library/react';
3+
import '@testing-library/jest-dom';
4+
import JsonDiff from '../src/components/JsonDiff';
5+
6+
describe('JsonDiff Component', () => {
7+
it('displays initial state message for empty currentJson and snapshot', () => {
8+
const { getByText, asFragment } = render(
9+
<JsonDiff
10+
oldJson={undefined}
11+
currentJson=""
12+
queryKey="testQueryKey"
13+
isHidden={false}
14+
/>
15+
);
16+
expect(getByText(/Initial state - no comparison available/i)).toBeInTheDocument();
17+
expect(asFragment()).toMatchSnapshot();
18+
});
19+
20+
it('displays a diff when there are differences between oldJson and currentJson and snapshot', () => {
21+
const oldJson = { key: "oldValue" };
22+
const currentJson = { key: "newValue" };
23+
const { container, asFragment } = render(
24+
<JsonDiff
25+
oldJson={oldJson}
26+
currentJson={currentJson}
27+
queryKey="testQueryKey"
28+
isHidden={false}
29+
/>
30+
);
31+
// Assert that the diff is displayed
32+
expect(container.querySelector('.jsondiffpatch-delta')).not.toBeNull();
33+
expect(asFragment()).toMatchSnapshot();
34+
});
35+
36+
37+
it('displays no changes message when oldJson and currentJson are the same', () => {
38+
const json = { key: "value" };
39+
const { getByText, asFragment } = render(
40+
<JsonDiff
41+
oldJson={json}
42+
currentJson={json}
43+
queryKey="testQueryKey"
44+
isHidden={false}
45+
/>
46+
);
47+
expect(getByText(/QueryKey data not modified on this state change/i)).toBeInTheDocument();
48+
expect(asFragment()).toMatchSnapshot();
49+
});
50+
51+
it('toggles visibility based on isHidden prop', () => {
52+
const json = { key: "value" };
53+
const newJson = { key: "newValue" };
54+
const { container, rerender, asFragment } = render(
55+
<JsonDiff
56+
oldJson={json}
57+
currentJson={newJson}
58+
queryKey="testQueryKey"
59+
isHidden={true}
60+
/>
61+
);
62+
// Initially, the class indicating hidden changes should be present
63+
expect(container.querySelector('.jsondiffpatch-unchanged-hidden')).not.toBeNull();
64+
expect(asFragment()).toMatchSnapshot();
65+
66+
// Rerender with isHidden = false and check if the class is removed
67+
rerender(
68+
<JsonDiff
69+
oldJson={json}
70+
currentJson={newJson}
71+
queryKey="testQueryKey"
72+
isHidden={false}
73+
/>
74+
);
75+
expect(container.querySelector('.jsondiffpatch-unchanged-hidden')).toBeNull();
76+
expect(asFragment()).toMatchSnapshot();
77+
});
78+
79+
});

extension/__tests__/JsonFormatter.tsx renamed to extension/__tests__/JsonFormatter.test.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,13 @@ import { render } from '@testing-library/react';
33
import JsonFormatter from '../src/components/JsonFormatter';
44

55
describe('JsonFormatter component', () => {
6-
it('renders without crashing', () => {
7-
render(<JsonFormatter
6+
it('renders without crashing and snapshot', () => {
7+
const { asFragment } = render(<JsonFormatter
88
key={1}
99
queryKey={'[posts-one]'}
1010
jsonData={{val: 'test', arr: [1,2,3]}}
1111
/>);
12+
13+
expect(asFragment()).toMatchSnapshot();
1214
});
1315
});
Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`ContinuousSlider renders correctly with given props 1`] = `
4+
<DocumentFragment>
5+
<span
6+
class="MuiSlider-root MuiSlider-colorPrimary MuiSlider-sizeMedium css-187mznn-MuiSlider-root"
7+
>
8+
<span
9+
class="MuiSlider-rail css-14pt78w-MuiSlider-rail"
10+
/>
11+
<span
12+
class="MuiSlider-track css-1gv0vcd-MuiSlider-track"
13+
style="left: 0%; width: 30%;"
14+
/>
15+
<span
16+
class="MuiSlider-thumb MuiSlider-thumbSizeMedium MuiSlider-thumbColorPrimary MuiSlider-thumb MuiSlider-thumbSizeMedium MuiSlider-thumbColorPrimary css-eg0mwd-MuiSlider-thumb"
17+
data-index="0"
18+
style="left: 30%;"
19+
>
20+
<input
21+
aria-labelledby="continuous-slider"
22+
aria-orientation="horizontal"
23+
aria-valuemax="100"
24+
aria-valuemin="0"
25+
aria-valuenow="30"
26+
data-index="0"
27+
max="100"
28+
min="0"
29+
step="1"
30+
style="border: 0px; height: 100%; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 100%; direction: ltr;"
31+
type="range"
32+
value="30"
33+
/>
34+
</span>
35+
</span>
36+
</DocumentFragment>
37+
`;

0 commit comments

Comments
 (0)