Vite build

.github/workflows/tests.yml

@@ -6,7 +6,32 @@ on:
   pull_request:
 
 jobs:
-  test:
+  #  test:
+  #    runs-on: ubuntu-latest
+  #    steps:
+  #      - uses: actions/checkout@v3
+  #      - name: Unit tests
+  #        uses: actions/setup-node@v3
+  #        with:
+  #          node-version: 18.x.x
+  #      - run: yarn
+  #      - run: yarn test
+  #      - name: cypress
+  #        uses: cypress-io/github-action@v5
+  #        with:
+  #          start: npm run e2e
+  #          command: npm run cy-ci
+  #      - name: SonarCloud Scan
+  #        uses: SonarSource/sonarcloud-github-action@master
+  #        env:
+  #          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+  #          SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}
+  #      - uses: actions/upload-artifact@v3
+  #        with:
+  #          name: cypress-videos
+  #          path: cypress/videos
+  #          if-no-files-found: ignore
+  e2e:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
@@ -15,41 +40,39 @@ jobs:
         with:
           node-version: 20.x.x
       - run: yarn
-      - run: yarn test
+      - name: Build
+        run: yarn build
       - name: cypress
-        if: ${{ false }}
         uses: cypress-io/github-action@v5
         with:
-          start: npm run e2e
+          start: npm run e2e,npm run preview
+          wait-on: http://localhost:8080
           command: npm run cy-ci
-      - name: SonarCloud Scan
-        uses: SonarSource/sonarcloud-github-action@master
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}
       - uses: actions/upload-artifact@v3
+        if: failure()
         with:
           name: cypress-videos
           path: cypress/videos
           if-no-files-found: ignore
-  lint:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - name: Lints
-        uses: actions/setup-node@v3
-        with:
-          node-version: 20.x.x
-      - run: yarn
-      - run: yarn lint
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - name: Lints
-        uses: actions/setup-node@v3
-        with:
-          node-version: 20.x.x
-      - run: yarn
-      - run: yarn build
 
+            #  lint:
+            #    runs-on: ubuntu-latest
+            #    steps:
+            #      - uses: actions/checkout@v3
+            #      - name: Lints
+            #        uses: actions/setup-node@v3
+            #        with:
+            #          node-version: 18.x.x
+            #      - run: yarn
+            #      - run: yarn lint
+            #  build:
+            #    runs-on: ubuntu-latest
+            #    steps:
+            #      - uses: actions/checkout@v3
+            #      - name: Lints
+            #        uses: actions/setup-node@v3
+            #        with:
+            #          node-version: 18.x.x
+            #      - run: yarn
+            #      - run: yarn build
+            #

.gitignore

@@ -8,7 +8,6 @@ cypress/videos
 *.log
 dist
 build
-public
 .idea
 test-report.xml
 

cypress.config.js

@@ -1,6 +1,5 @@
 const fetch = require('node-fetch');
 const { defineConfig } = require('cypress');
-const webpackConfig = require('./webpack.config.js');
 
 module.exports = defineConfig({
   viewportHeight: 720,
@@ -11,12 +10,25 @@ module.exports = defineConfig({
     specPattern: 'ext/**/*.cy.js',
     devServer: {
       framework: 'svelte',
-      bundler: 'webpack',
-      webpackConfig,
+      bundler: 'vite',
     },
     setupNodeEvents(on, config) {
       require('./cypress-node-events')(on);
 
+      // Shutdown the server after `yarn cypress run --component completes
+      // This ensures that c8 outputs the lcov.info file properly
+      on('after:run', () => {
+        return fetch('http://localhost:9000/shutdown');
+      });
+      return config;
+    },
+  },
+  e2e: {
+    video: true,
+    baseUrl: 'http://localhost:8080',
+    setupNodeEvents(on, config) {
+      require('./cypress-node-events')(on);
+
       // Shutdown the server after `yarn cypress run --component completes
       // This ensures that c8 outputs the lcov.info file properly
       on('after:run', () => {

cypress/e2e/App.cy.js

@@ -0,0 +1,69 @@
+describe('Web Extension', () => {
+  it('can display seen requests', () => {
+    // Jambox should generate a static hash for the URL below
+    const HASH = '2be35430d93be811753ecfd6ba828878';
+    const STUB_HASH = 'cd4482b36a608021cd943786ecb54c5d';
+    const testURL = 'http://jambox-test.com/returnThisAsJson';
+    cy.visit('/');
+    cy.task('jambox.reset');
+
+    cy.request(testURL);
+
+    // 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="${testURL}"]`).as('request');
+
+    cy.get('@request').contains('200');
+    cy.get('@request').contains('fetch');
+
+    cy.get('@request').click({ force: true });
+
+    cy.get('[data-cy-id="request-info"]').as('modal');
+
+    cy.get('@modal').contains(testURL);
+    cy.get('[data-cy-id="select-response-tab"]').click();
+    cy.get('@modal').contains('path');
+    cy.get('@modal').contains('/returnThisAsJson');
+
+    cy.get('[data-cy-id="back-to-waterfall"]').click();
+
+    cy.get('@modal').should('not.exist');
+
+    // When network requests are blocked no caching happens, so disable blocking
+    cy.get(`[data-cy-id="block-network"]`).as('block-network').uncheck();
+    cy.get('@block-network').should('have.prop', 'indeterminate');
+
+    cy.wait(50);
+    cy.request(testURL);
+
+    cy.get('[data-cy-id="cache-link"]').click();
+
+    cy.get(`[data-cy-id="cache-cell-edit-${HASH}"]`).as('test-edit');
+    cy.get('@test-edit').click();
+    cy.get('[data-cy-id="select-request-tab"]').click();
+    cy.get('[data-cy-id="cache-detail"]').contains(testURL);
+
+    cy.get('[data-cy-id="cache-detail"]').contains('path');
+    cy.get('[data-cy-id="cache-detail"]').contains('/returnThisAsJson');
+
+    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(`[data-cy-id="cache-cell-edit-${STUB_HASH}"]`).as('stub');
+    cy.get('@stub').click();
+    cy.get('[data-cy-id="select-response-tab"]').click();
+    cy.get('[data-cy-id="cache-detail"]').contains('test-stub');
+
+    // all of the seen requests will only persist in-memory
+    // next cy.task('jambox-reset') will clear them
+  });
+});

cypress/e2e/Cache.cy.js

@@ -0,0 +1,109 @@
+// static hashes for requests used below
+const A = 'ba20ccbb470042f3200692cad1926c1c';
+const B = 'f4c55ab257c689845921746061bfeb73';
+const C = 'cd4482b36a608021cd943786ecb54c5d';
+
+describe('Cache UI', () => {
+  it('can edit response objects', () => {
+    // load jambox config from cwd
+    cy.visit('/');
+    cy.task('jambox.reset');
+
+    // 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-${A}"]`).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');
+  });
+
+  it('can persist records and delete them after', () => {
+    cy.visit('/');
+    // load jambox config from cwd
+    cy.task('jambox.reset');
+
+    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-${A}"]`).as('test-persist-A');
+    cy.get(`[data-cy-id="cache-cell-edit-${B}"]`).as('test-persist');
+    cy.get(`[data-cy-id="select-row-${B}"]`).as('test-persist-select');
+    cy.get(`[data-cy-id="select-row-${A}"]`).as('test-persist-select-A');
+    cy.get(`[data-cy-id="cache-cell-edit-${C}"]`).as('test-in-memory-cache');
+
+    // Persist should be click-able
+    cy.get('@test-persist-select').click();
+    cy.get('@test-persist-select-A').click();
+    cy.get('[data-cy-id="cache-persist"]').click();
+    cy.get(`[data-cy-id="cache-cell-persisted-true-${B}"]`).should('exist');
+
+    // Edit persisted record
+    cy.get('@test-persist').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();
+
+    // Back to Waterfall
+    cy.get('[data-cy-id="waterfall-link"]').click();
+
+    // Reset jambox. This deletes in-memory cache
+    cy.task('jambox.reset');
+
+    // Back to cache
+    cy.get('[data-cy-id="cache-link"]').click();
+
+    // Cache should be loaded from a tape and contain the edited
+    cy.get('@test-persist').click();
+    cy.get('[data-cy-id="select-response-tab"]').click();
+    cy.get('[data-cy-id="cache-detail"]').contains('foobar');
+
+    // Back to cache
+    cy.get('[data-cy-id="cache-link"]').click();
+
+    // The pathC cached value was not persisted and should no longer exist in UI
+    cy.get('@test-in-memory-cache').should('not.exist');
+
+    cy.get('@test-persist-select').click();
+    cy.get('@test-persist-select-A').click();
+    cy.get('[data-cy-id="cache-delete"]').click();
+
+    cy.get('@test-persist').should('not.exist');
+    cy.get('@test-persist-A').should('not.exist');
+  });
+});

cypress/support/component.js

@@ -20,8 +20,8 @@
 // require('./commands')
 
 // import { mount } from 'cypress/svelte/dist/cypress-svelte.esm-bundler.js';
-require('./commands');
-const { mount } = require('cypress/svelte');
+import './commands';
+import { mount } from 'cypress/svelte';
 Cypress.Commands.add('mount', mount);
 
 // Example use:

ext/App.svelte

@@ -5,14 +5,13 @@
     createMemorySource,
   } from 'svelte-routing/src/history';
   import { store, reducer } from './store.js';
-  import Cache from './Cache';
+  import Cache from './Cache/index.svelte';
   import Checkbox from './Checkbox.svelte';
   import Waterfall from './Waterfall.svelte';
-  import RequestInfo from './RequestInfo';
+  import RequestInfo from './RequestInfo/index.svelte';
   import CacheEntry from './CacheEntry.svelte';
 
   export let api;
-
   let search = $store.search;
   const history = createHistory(createMemorySource());
   const chrome = window.chrome;
@@ -144,7 +143,7 @@
           <input
             type="search"
             bind:value={search}
-            autocomplete
+            autocomplete="on"
             placeholder="search"
           />
         </div>