Cache updates (#25)

0.0.22 - Add the ability to edit cached responses. - feat: users may now edit the cached responses - feat: persist cache filters - patch: use routing to navigate acrsoss the ui - patch: clean-up global state management - patch: attempt to close any jambox process prior to e2e tests - fix: crash when deleting unknown cached id - fix: waterfall ui - feat: css filter - fix: unknown props warnings
ballercat · Jul 17, 2023 · 376b5e2 · 376b5e2
1 parent d612889
commit 376b5e2
Show file tree

Hide file tree

Showing 28 changed files with 470 additions and 343 deletions.
diff --git a/.gitignore b/.gitignore
@@ -2,6 +2,7 @@
 node_modules
 coverage
 coverage-cypress
+cypress/screenshots
 cypress/videos
 .DS_Store
 *.log

diff --git a/.yarn/cache/deepmerge-npm-4.2.2-112165ced2-a8c43a1ed8.zip b/.yarn/cache/deepmerge-npm-4.2.2-112165ced2-a8c43a1ed8.zip
diff --git a/.yarn/cache/deepmerge-npm-4.3.1-4f751a0844-2024c6a980.zip b/.yarn/cache/deepmerge-npm-4.3.1-4f751a0844-2024c6a980.zip
diff --git a/.yarn/cache/svelte-routing-npm-1.11.0-60999ac9f6-a2924bfb9c.zip b/.yarn/cache/svelte-routing-npm-1.11.0-60999ac9f6-a2924bfb9c.zip
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,12 @@
+## 0.0.22 - Implement cached response update flow
+
+- feat: users may now edit the cached responses
+- feat: persist cache filters
+- patch: use routing to navigate acrsoss the ui
+- patch: clean-up global state management
+- patch: attempt to close any jambox process prior to e2e tests
+- fix: crash when deleting unknown cached id
+
 ## 0.0.21 - Bugfix cache read on startup
 
 - fix: correctly read all json caches on startup

diff --git a/e2e-backend.mjs b/e2e-backend.mjs
@@ -1,6 +1,15 @@
 #!/usr/bin/env node
+import http from 'http';
 import tinyServer from './src/utils/tiny-server.mjs';
 import jamboxServer from './src/server/index.mjs';
 
-await tinyServer(7777);
-await jamboxServer({ port: 9000 });
+const launch = async () => {
+  await tinyServer(7777);
+  await jamboxServer({ port: 9000 });
+};
+
+// Shutdown any other server currently running
+http
+  .request('http://localhost:9000/shutdown', { method: 'GET' }, launch)
+  .on('error', launch)
+  .end();
diff --git a/ext/Api.js b/ext/Api.js
@@ -128,14 +128,14 @@ export default class API {
     });
   }
 
-  updateCache(id, values) {
+  updateCache(id, { response }) {
     return fetch(`${this.apiURL.toString()}/cache`, {
       headers: { 'Content-Type': 'application/json' },
       method: 'POST',
       body: JSON.stringify({
         action: {
           type: 'update',
-          payload: { id, values },
+          payload: { id, response },
         },
       }),
     });

diff --git a/ext/App.cy.js b/ext/App.cy.js
@@ -48,7 +48,7 @@ describe('Web Extension', () => {
     cy.get('@modal').contains('path');
     cy.get('@modal').contains('/returnThisAsJson');
 
-    cy.get('[data-cy-id="modal-background"]').click({ force: true });
+    cy.get('[data-cy-id="back-to-waterfall"]').click();
 
     cy.get('@modal').should('not.exist');
 
@@ -69,14 +69,15 @@ describe('Web Extension', () => {
     cy.get('[data-cy-id="cache-detail"]').contains('path');
     cy.get('[data-cy-id="cache-detail"]').contains('/returnThisAsJson');
 
-    cy.get('[data-cy-id="modal-background"]').click({ force: true });
+    cy.get('[data-cy-id="back-to-cache"]').click();
 
     cy.get('[data-cy-id="cache-detail"]').should('not.exist');
 
     // clear cache
     cy.get('@test-edit').click();
     cy.get('[data-cy-id="cache-delete"]').click();
     cy.get('[data-cy-id="cache-detail"]').should('not.exist');
+
     cy.get('@test-edit')
       .should('not.exist')
       .then(() => {

diff --git a/ext/App.svelte b/ext/App.svelte
@@ -1,19 +1,24 @@
 <script>
+  import { Router, Route } from 'svelte-routing';
+  import {
+    createHistory,
+    createMemorySource,
+  } from 'svelte-routing/src/history';
   import { store, reducer } from './store.js';
   import Cache from './Cache';
   import Checkbox from './Checkbox.svelte';
   import Waterfall from './Waterfall.svelte';
   import SideNav from './SideNav.svelte';
   import RequestInfo from './RequestInfo';
-  import Modal from './Modal.svelte';
+  import CacheEntry from './CacheEntry.svelte';
 
   export let api;
 
+  const history = createHistory(createMemorySource());
   const chrome = window.chrome;
   let pauseChecked = false;
   let cleanup;
-  let path = '/Waterfall';
-  let selection = null;
+  let url = '/';
 
   api.getConfig().then((payload) => {
     store.update((state) => reducer(state, { type: 'config', payload }));
@@ -50,53 +55,48 @@
 </script>
 
 <main class="Container">
-  <SideNav
-    onNavigation={(selection) => {
-      path = selection;
-    }}
-    {path}
-  />
-  <div class="Box">
-    <div class="TopBar">
-      <Checkbox
-        checked={$store.config.paused}
-        inline
-        id="pause-proxy"
-        name="pause-proxy"
-        label="Pause Proxy"
-        onClick={() => {
-          api.pause(!$store.config.paused);
-        }}
-      />
-      <Checkbox
-        inline
-        id="block-network"
-        name="block-network"
-        checked={$store.config.blockNetworkRequests}
-        label="Block Network"
-        onClick={() => {
-          api.blockNetworkRequests(!$store.config.blockNetworkRequests);
-        }}
-      />
+  <Router {url} {history}>
+    <SideNav />
+    <div class="Box">
+      <div class="TopBar">
+        <Checkbox
+          checked={$store.config.paused}
+          inline
+          id="pause-proxy"
+          name="pause-proxy"
+          label="Pause Proxy"
+          onClick={() => {
+            api.pause(!$store.config.paused);
+          }}
+        />
+        <Checkbox
+          inline
+          id="block-network"
+          name="block-network"
+          checked={$store.config.blockNetworkRequests}
+          label="Block Network"
+          onClick={() => {
+            api.blockNetworkRequests(!$store.config.blockNetworkRequests);
+          }}
+        />
+      </div>
+      <Route path="/">
+        <Waterfall data={$store} {history} />
+      </Route>
+      <Route path="/cache">
+        <Cache cache={$store.cache} />
+      </Route>
+      <Route path="/cache/entry/:id" let:params>
+        <CacheEntry cacheEntry={$store.cache[params.id]} {api} {history} />
+      </Route>
+      <Route path="/request/:id" let:params>
+        <RequestInfo
+          response={$store.http[params.id].response}
+          request={$store.http[params.id].request}
+        />
+      </Route>
     </div>
-    {#if path === '/Waterfall'}
-      <Waterfall data={$store} onSelection={(value) => (selection = value)} />
-    {/if}
-    {#if path === '/Cache'}
-      <Cache
-        cache={$store.cache}
-        {api}
-        onSelection={(row) => {
-          selection = row;
-        }}
-      />
-    {/if}
-  </div>
-  {#if selection}
-    <Modal on:close={() => (selection = null)}>
-      <RequestInfo {...selection} />
-    </Modal>
-  {/if}
+  </Router>
 </main>
 
 <style>

diff --git a/ext/Cache.cy.js b/ext/Cache.cy.js
@@ -0,0 +1,71 @@
+import API from './Api';
+import App from './App.svelte';
+
+let api;
+before(async () => {
+  await cy.task('set-jambox-config', {
+    blockNetworkRequests: false,
+    forward: {
+      'http://jambox-test.com': {
+        target: 'http://localhost:7777',
+        paths: ['**'],
+      },
+    },
+    cache: {
+      dir: '.jambox',
+      write: 'auto',
+      stage: ['jambox-test.com/**'],
+    },
+  });
+  api = await API.create();
+});
+
+describe('Cache UI', () => {
+  it('can edit response objects', () => {
+    cy.mount(App, { props: { api } });
+
+    // Additional requests to fill up the cache
+    cy.request('http://jambox-test.com/pathA');
+    cy.request('http://jambox-test.com/pathB');
+    cy.request('http://jambox-test.com/pathC');
+
+    cy.get('[data-cy-id="cache-link"]').click();
+    cy.get(
+      '[data-cy-id="cache-cell-edit-f4c55ab257c689845921746061bfeb73"]'
+    ).as('test-edit');
+
+    cy.get('@test-edit').click();
+    cy.get('[data-cy-id="select-response-tab"]').click();
+
+    // Edit body
+    cy.get('[data-cy-id="select-response-tab"]').click();
+    cy.get(
+      '[data-path="%2Fbody"] > .jse-props > .jse-json-node > .jse-contents-outer > .jse-contents > .jse-value'
+    ).dblclick();
+    cy.get('.jse-editable-div').clear();
+    cy.get('.jse-editable-div').type('foobar{enter}');
+    cy.get('[data-cy-id="update-response-btn"]').click();
+
+    // Close
+    cy.get('[data-cy-id="back-to-cache"]').click({ force: true });
+
+    // Open modal
+    cy.get('@test-edit').click();
+    cy.get('[data-cy-id="select-response-tab"]').click();
+    cy.get('[data-cy-id="cache-detail"]').contains('foobar');
+
+    // clear cache
+    cy.get('[data-cy-id="select-details-tab"]').click();
+    cy.get('[data-cy-id="cache-delete"]').click();
+    cy.get('[data-cy-id="cache-detail"]').should('not.exist');
+
+    cy.wait(1).then(() => {
+      // cleanup
+      return api.delete([
+        'ba20ccbb470042f3200692cad1926c1c',
+        'f4c55ab257c689845921746061bfeb73',
+        'cd4482b36a608021cd943786ecb54c5d',
+      ]);
+    });
+  });
+});
diff --git a/ext/Cache/Breadcrumb.svelte b/ext/Cache/Breadcrumb.svelte
diff --git a/ext/Cache/Cell.svelte b/ext/Cache/Cell.svelte
@@ -1,7 +1,7 @@
 <script>
+  import { Link } from 'svelte-routing';
   export let row;
   export let col;
-  export let onEdit;
 
   const shorten = (str) => {
     if (str.length > 30) {
@@ -10,7 +10,6 @@
 
     return str;
   };
-
   let value, cyID;
   $: value =
     col.key === 'host' || col.key === 'path'
@@ -21,12 +20,8 @@
 
 <div class="Cell">
   {#if col.key === 'edit'}
-    <button
-      inline
-      data-cy-id="cache-cell-{cyID}"
-      on:click={() => {
-        onEdit(row.id);
-      }}>Edit</button
+    <Link to="/cache/entry/{row.id}" data-cy-id="cache-cell-{cyID}"
+      >{row.id}</Link
     >
   {:else}
     <span data-cy-id="cache-cell-{cyID}">{value}</span>