CODEWITHSUNDEEP
angularproxyjasminekarma-jasminekarma-runner
Evan Kleiner
Evan Kleiner

Reputation: 514

Trouble configuring karma proxy at website root

I cannot configure karma to proxy a file at the root of my website. One of my angular components contains an embedded Ace editor, which looks for a file at http://localhost:9876/worker-html.js. I have successfully served the file in Karma using the files property

// Makes ace files available in tests
files: [
  { pattern: "../node_modules/ace-builds/src-min-noconflict/worker-html.js", watched: false, included:false, nocache:false, served:true }
],

and verified that it is served (by inspecting window.__karma__, which isn't always defined in the karma browser window and I don't know why, but that's a separate issue). I also verified that I can access the required file at this path:

http://localhost:9876/absoluteD:/Evan/programming%20stuff/Projects/Gneus/node_modules/ace-builds/src-min-noconflict/worker-html.js

However, I cannot for the life of me proxy it to the required URL (http://localhost:9876/worker-html.js). I've tried every reasonable proxy configuration that I can think of, so I think I'm missing something fundamental. Can someone please help me out? Here is the entirety of the karma config file for reference, with my latest proxy attempt included:

// Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('@angular-devkit/build-angular/plugins/karma')
    ],
    client: {
      clearContext: false, // leave Jasmine Spec Runner output visible in browser

      // Don't run tests in random order
      // If you update this, you have to restart ng test batch
      jasmine: {
        random: false
      }
    },

    // Makes ace files available in tests
    files: [
      { pattern: "../node_modules/ace-builds/src-min-noconflict/worker-html.js", watched: false, included:false, nocache:false, served:true }
    ],
    proxies: {
      '/worker-html.js': "http://localhost:9876/absoluteD:/Evan/programming stuff/Gneus/node_modules/ace-builds/src-min-noconflict/worker-html.js"
    },

    coverageIstanbulReporter: {
      dir: require('path').join(__dirname, '../coverage'),
      reports: ['html', 'lcovonly'],
      fixWebpackSourcePaths: true
    },
    reporters: ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false,

    
  });
};

Upvotes: 1

Views: 1248

Answers (1)

Evan Kleiner
Evan Kleiner

Reputation: 514

John's link in the comment above (dev.to/jwp/angular-karma-proxy-configuration-1kbb) led me to the correct proxy configuration. My issue was two-fold: I didn't understand the individual parts of the proxy object, and I had a mistake in the link I had copied (classic). Here are the the relevant parts of the working configuration file for anyone who who it might help:

basePath: '',
...

// Makes ace files available in tests
files: [
  { pattern: "../node_modules/ace-builds/src-min-noconflict/worker-html.js", watched: false, included:false, nocache:false, served:true }
],
proxies: {
  "/worker-html.js": { 
    "target": "http://localhost:9876/absoluteD:/Evan/programming stuff/Projects/Gneus/node_modules/ace-builds/src-min-noconflict/worker-html.js"
  }
},

Upvotes: 1

Related Questions