Merge pull request #57 from oslabs-beta/dev

Dev

Author: austin-cavanagh

.github/workflows/tests.yml

@@ -1,13 +1,14 @@
 name: Run Tests and Build
 on: 
+  # Updated to only run on pull requests to dev because all pushed to main will go through dev
   pull_request:
     branches:
-      - main
-      - dev
-  push:
-    branches:
-      - main
+      # - main
       - dev
+  # push:
+  #   branches:
+  #     - main
+  #     - dev
 jobs:
   unit-testing-extension:
     runs-on: ubuntu-latest
@@ -16,7 +17,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: |
@@ -30,7 +31,7 @@ jobs:
         run: |
           cd extension
           npm test
-  unit-testing-package:
+  unit-testing-package-react:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
@@ -41,18 +42,18 @@ jobs:
           cache: 'npm'          
       - name: Install Package dependencies
         run: |
-          cd package
+          cd package-react
           npm ci
       - name: Install linux handler for github actions
         run: |
-          cd package
+          cd package-react
           npm i @rollup/rollup-linux-x64-gnu
       - name: Build Package
         run: |
-          cd package
+          cd package-react
           npm run build
       - name: Test Package
         run: |
-          cd package
+          cd package-react
           npm test
 

.gitignore

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

README.md

@@ -44,7 +44,7 @@ React Query Rewind introduces a powerful DevTool extension designed to work in c
     _picture of importing the component_
 
     ```javascript
-    import ReactQueryRewind from 'react-query-rewind';
+    import ReactQueryRewind from "react-query-rewind";
     ```
 
 3.  Place ReactQueryRewind next to the root of your application inside the QueryClientProvider component.
@@ -61,26 +61,26 @@ React Query Rewind introduces a powerful DevTool extension designed to work in c
 4.  Open the Chrome DevTool Extension and start coding!
 
        <p align="left">
-      <img src="./assets/chrome-devtool.png" alt="Component Placement" width="600"/>
+      <img src="https://i.imgur.com/xTEPI20.png" alt="Component Placement" width="600"/>
     </p>
 
 # Features
 
 - <b>Query States: </b>Upon opening RQRewind in Chrome Dev Tools, you will see the Queries tab open with a drop down menu listing the query keys of all the incoming queries. Select the queries that you want to monitor, make changes on the web app, and the changes of query states will be logged as reflected by the growing number above the play bar. Use the play bar to navigate to a particular state snapshot that you would like to inspect.
 
-<p align="center"><img src="./assets/query-states.gif" width='800' style="margin-top: 1em; margin-bottom: 1em;"></p>
+<p align="center"><img src="https://i.imgur.com/g8KrqAg.gif" width='800' style="margin-top: 1em; margin-bottom: 1em;"></p>
 
 - <b>State Diff: </b>Toggle on the Diff button to see state changes between each snapshot highlighted. Turn on the switch on top of the page to show only parts of the state that are changed.
 
-<p align="center"><img src="./assets/state-diff.gif" width='800' style="margin-top: 1em; margin-bottom: 1em;"></p>
+<p align="center"><img src="https://i.imgur.com/a8KAgXZ.gif" width='800' style="margin-top: 1em; margin-bottom: 1em;"></p>
 
 - <b>Live UI Change: </b>As you review the state change history, there is also the option to turn on the time travel mode by clicking on the clock icon button. Under time travel mode, when visiting a logged state snapshot on RQRewindl, the UI of the app will change accordingly. Turn off time travel mode for RQRewind to continue logging future state changes.
 
-<p align="center"><img src="./assets/UI-change.gif" width='800' style="margin-top: 1em; margin-bottom: 1em;"></p>
+<p align="center"><img src="https://i.imgur.com/AZ3QGuf.gif" width='800' style="margin-top: 1em; margin-bottom: 1em;"></p>
 
 - <b>Component Tree: </b> Click on the Component Tree tab and turn on the Start Profiling switch. Click on any component on the app, and view the component tree that is rendered on the dev tools panel.
 
-<p align="center"><img src="./assets/component-tree.gif" width='800' style="margin-top: 1em; margin-bottom: 1em;"></p>
+<p align="center"><img src="https://i.imgur.com/qa5UJTW.gif" width='800' style="margin-top: 1em; margin-bottom: 1em;"></p>
 
 # Contributing
 
@@ -111,43 +111,6 @@ Rui Fan - [GitHub](https://github.com/ruifan-IU) - [LinkedIn](https://www.linked
 Project Link: [React Query Rewind](https://github.com/oslabs-beta/react-query-rewind-chrome)
 
 # License
+[MIT](https://www.mit.edu/~amini/LICENSE.md)
 
-_MIT Link_
-
-<p align="right">(<a href="#readme-top">back to top</a>)</p>
-
-<!-- TABLE OF CONTENTS -->
-<!-- <details>
-  <summary>Table of Contents</summary>
-  <ol>
-    <li>
-      <a href="#about-the-project">About The Project</a>
-      <ul>
-        <li><a href="#built-with">Built With</a></li>
-      </ul>
-    </li>
-    <li>
-      <a href="#getting-started">Getting Started</a>
-      <ul>
-        <li><a href="#prerequisites">Prerequisites</a></li>
-        <li><a href="#installation">Installation</a></li>
-      </ul>
-    </li>
-    <li><a href="#usage">Usage</a></li>
-    <li><a href="#roadmap">Roadmap</a></li>
-    <li><a href="#contributing">Contributing</a></li>
-    <li><a href="#license">License</a></li>
-    <li><a href="#contact">Contact</a></li>
-    <li><a href="#acknowledgments">Acknowledgments</a></li>
-  </ol>
-</details> -->
-
-<!-- <p align="right">(<a href="#readme-top">back to top</a>)</p> -->
-
-<!-- <a name="website" href="ARE WE GONNA HAVE A WEBSITE">Website</a> -->
-
-<!-- [![Contributors](https://img.shields.io/github/contributors/oslabs-beta/react-query-rewind-chrome.svg?style=for-the-badge)](https://github.com/oslabs-beta/react-query-rewind-chrome/graphs/contributors)
-[![Forks](https://img.shields.io/github/forks/oslabs-beta/react-query-rewind-chrome.svg?style=for-the-badge)](https://github.com/oslabs-beta/react-query-rewind-chrome/forks)
-[![Stargazers](https://img.shields.io/github/stars/oslabs-beta/react-query-rewind-chrome.svg?style=for-the-badge)](https://github.com/oslabs-beta/react-query-rewind-chrome/stargazers)
-[![Issues](https://img.shields.io/github/issues/oslabs-beta/react-query-rewind-chrome.svg?style=for-the-badge)](https://github.com/oslabs-beta/react-query-rewind-chrome/issues)
-[![MIT License](https://img.shields.io/github/license/oslabs-beta/react-query-rewind-chrome.svg?style=for-the-badge)](https://github.com/oslabs-beta/react-query-rewind-chrome/blob/main/LICENSE) -->
+<p align="right">(<a href="#readme-top">back to top</a>)</p>

extension/.gitignore

@@ -1,2 +1,2 @@
-node_modules
-build/
+node_modules/
+dist/

extension/LICENSE

@@ -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__/ContinuousSlider.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__/DiffTab.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__/JsonDiff.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();
   });
 });