title: Loading a mock JSON file within Karma+AngularJS test
body: <p>I have an AngularJS app set up with tests using Karma+Jasmine. I have a function I want to test that takes a large JSON object, converts it to a format that's more consumable by the rest of the app, and returns that converted object. That's it.</p>
  
  <p>For my tests, I'd like you have separate JSON files (*.json) with mock JSON content only--no script. For the test, I'd like to be able to load the JSON file in and pump the object into the function I'm testing.</p>
  
  <p>I know I can embed the JSON within a mock factory as described here: <a href="http://dailyjs.com/2013/05/16/angularjs-5/" rel="noreferrer">http://dailyjs.com/2013/05/16/angularjs-5/</a> but I really want the JSON to not be contained within script--just straight JSON files.</p>
  
  <p>I've tried a few things but I'm fairly noob in this area. First, I set up my Karma to include my JSON file just to see what it would do: </p>
  
  <pre><code>files = [
      ...
      'mock-data/**/*.json'
      ...
  ]
  </code></pre>
  
  <p>This resulted in:</p>
  
  <pre><code>Chrome 27.0 (Mac) ERROR
  Uncaught SyntaxError: Unexpected token :
  at /Users/aaron/p4workspace4/depot/sitecatalyst/branches/anomaly_detection/client/anomaly-detection/mock-data/two-metrics-with-anomalies.json:2
  </code></pre>
  
  <p>So then I changed it to just serve the files and not "include" them: </p>
  
  <pre><code>files = [
      ...
      { pattern: 'mock-data/**/*.json', included: false }
      ...
  ]
  </code></pre>
  
  <p>Now that they're only served, I thought I'd try to load in the file using $http from within my spec:</p>
  
  <pre><code>$http('mock-data/two-metrics-with-anomalies.json')
  </code></pre>
  
  <p>When I ran the spec I received:</p>
  
  <pre><code>Error: Unexpected request: GET mock-data/two-metrics-with-anomalies.json
  </code></pre>
  
  <p>Which in my understanding means it expects a mocked response from $httpBackend. So...at this point I didn't know how to load the file using Angular utilities so I thought I'd try jQuery to see if I could at least get that to work:</p>
  
  <pre><code>$.getJSON('mock-data/two-metrics-with-anomalies.json').done(function(data) {
      console.log(data);
  }).fail(function(response) {
      console.log(response);
  });
  </code></pre>
  
  <p>This results in:</p>
  
  <pre><code>Chrome 27.0 (Mac) LOG: { readyState: 4,
  responseText: 'NOT FOUND',
  status: 404,
  statusText: 'Not Found' }
  </code></pre>
  
  <p>I inspect this request in Charles and it's making a request to</p>
  
  <pre><code>/mock-data/two-metrics-with-anomalies.json
  </code></pre>
  
  <p>Whereas the rest of the files I've configured to be "included" by Karma are being requested at, for example:</p>
  
  <pre><code>/base/src/app.js
  </code></pre>
  
  <p>Apparently Karma's setting up some sort of base directory to serve the files from. So for kicks I changed my jquery data request to</p>
  
  <pre><code>$.getJSON('base/mock-data/two-metrics-with-anomalies.json')...
  </code></pre>
  
  <p>And it works! But now I feel dirty and need to take a shower. Help me feel clean again.</p>