cách khắc phục cảnh báo 404 cho hình ảnh trong quá trình kiểm tra đơn vị nghiệp

Tôi đang thử nghiệm đơn vị một trong những chỉ thị của mình (anglejs) bằng cách sử dụng grunt / karma / phantomjs / jasmine. Các bài kiểm tra của tôi chạy tốt

describe('bar foo', function () {
    beforeEach(inject(function ($rootScope, $compile) {
        elm = angular.element('<img bar-foo src="img1.png"/>');
        scope = $rootScope.$new();
        $compile(elm)();
        scope.$digest();
    }));
    ....
});

nhưng tôi nhận được những 404

WARN [web-server]: 404: /img1.png
WARN [web-server]: 404: /img2.png
...

Mặc dù chúng không làm gì cả, chúng sẽ thêm nhiễu vào đầu ra nhật ký. Có cách nào để sửa lỗi này ? (Tất nhiên là không thay đổi logLevel của karma, vì tôi muốn thấy chúng)

Đó là bởi vì bạn cần phải định cấu hình nghiệp để tải sau đó phục vụ chúng khi được yêu cầu;)

Trong tệp karma.conf.js của bạn, bạn nên có các tệp và / hoặc mẫu được xác định như:

// list of files / patterns to load in the browser
files : [
  {pattern: 'app/lib/angular.js', watched: true, included: true, served: true},
  {pattern: 'app/lib/angular-*.js', watched: true, included: true, served: true},
  {pattern: 'app/lib/**/*.js', watched: true, included: true, served: true},
  {pattern: 'app/js/**/*.js', watched: true, included: true, served: true},
  // add the line below with the correct path pattern for your case
  {pattern: 'path/to/**/*.png', watched: false, included: false, served: true},
  // important: notice that "included" must be false to avoid errors
  // otherwise Karma will include them as scripts
  {pattern: 'test/lib/**/*.js', watched: true, included: true, served: true},
  {pattern: 'test/unit/**/*.js', watched: true, included: true, served: true},
],

// list of files to exclude
exclude: [

],

// ...

Bạn có thể xem ở đây để biết thêm thông tin :)

CHỈNH SỬA: Nếu bạn sử dụng máy chủ web nodejs để chạy ứng dụng của mình, bạn có thể thêm nó vào karma.conf.js:

proxies: {
  '/path/to/img/': 'http://localhost:8000/path/to/img/'
},

EDIT2: Nếu bạn không sử dụng hoặc muốn sử dụng máy chủ khác, bạn có thể xác định proxy cục bộ nhưng vì Karma không cung cấp quyền truy cập vào cổng đang sử dụng, theo cách động, nếu karma bắt đầu trên một cổng khác 9876 (mặc định), bạn vẫn sẽ nhận được những 404 khó chịu ...

proxies =  {
  '/images/': '/base/images/'
};

Vấn đề liên quan: https://github.com/karma-runner/karma/issues/872

Mảnh ghép khó hiểu đối với tôi là thư mục ảo 'cơ sở'. Nếu bạn không biết điều đó cần được đưa vào đường dẫn nội dung của đồ đạc của mình, bạn sẽ khó gỡ lỗi.

Theo tài liệu cấu hình

Theo mặc định, tất cả nội dung được phân phát tại http: // localhost: [PORT] / base /

Lưu ý: điều này có thể không đúng với các phiên bản khác - tôi đang sử dụng 0.12.14 và nó hoạt động với tôi nhưng tài liệu 0.10 không đề cập đến nó.

Sau khi chỉ định mẫu tệp:

{ pattern: 'Test/images/*.gif', watched: false, included: false, served: true, nocache: false },

Tôi có thể sử dụng cái này trong đồ đạc của mình:

<img src="base/Test/images/myimage.gif" />

Và tôi không cần proxy vào thời điểm đó.

Bạn có thể tạo phần mềm trung gian chung bên trong karma.conf.js của mình - hơi cao nhưng đã làm được việc cho tôi

Đầu tiên xác định hình ảnh giả 1px (tôi đã sử dụng base64):

const DUMMIES = {
  png: {
    base64: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==',
    type: 'image/png'
  },
  jpg: {
    base64: 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAABAAEDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD3+iiigD//2Q==',
    type: 'image/jpeg'
  },
  gif: {
    base64: 'data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=',
    type: 'image/gif'
  }
};

Sau đó xác định chức năng phần mềm trung gian:

function surpassImage404sMiddleware(req, res, next) {
  const imageExt = req.url.split('.').pop();
  const dummy = DUMMIES[imageExt];

  if (dummy) {
    // Table of files to ignore
    const imgPaths = ['/another-cat-image.png'];
    const isFakeImage = imgPaths.indexOf(req.url) !== -1;

    // URL to ignore
    const isCMSImage = req.url.indexOf('/cms/images/') !== -1;

    if (isFakeImage || isCMSImage) {
      const img = Buffer.from(dummy.base64, 'base64');
      res.writeHead(200, {
        'Content-Type': dummy.type,
        'Content-Length': img.length
      });
      return res.end(img);
    }
  }
  next();
}

Áp dụng phần mềm trung gian trong nghiệp vụ của bạn

{
    basePath: '',
    frameworks: ['jasmine', '@angular/cli'],
    middleware: ['surpassImage404sMiddleware'],
    plugins: [
      ...
      {'middleware:surpassImage404sMiddleware': ['value', surpassImage404sMiddleware]}
    ],
    ...
}

Dựa trên câu trả lời của @ glepretre, tôi đã tạo một tệp .png trống và thêm tệp này vào cấu hình để ẩn cảnh báo 404:

proxies: {
  '/img/generic.png': 'test/assets/img/generic.png'
}

Để khắc phục, karma.conf.jshãy nhớ trỏ đến tệp được cung cấp bằng proxy của bạn:

files: [
  { pattern: './src/img/fake.jpg', watched: false, included: false, served: true },
],
proxies: {
  '/image.jpg': '/base/src/img/fake.jpg',
  '/fake-avatar': '/base/src/img/fake.jpg',
  '/folder/0x500.jpg': '/base/src/img/fake.jpg',
  '/undefined': '/base/src/img/fake.jpg'
}

Mặc dù nó là một chủ đề cũ, tôi đã mất vài giờ để thực sự có được hình ảnh của mình để thực sự được phục vụ từ nghiệp chướng để loại bỏ 404. Các ý kiến ​​chỉ là không đủ kỹ lưỡng. Tôi tin rằng tôi có thể làm rõ giải pháp với ảnh chụp màn hình này. Về cơ bản, một điều mà nhiều nhận xét còn thiếu là thực tế là giá trị proxy phải bắt đầu bằng "/ base" , mặc dù base không có trong bất kỳ thư mục nào của tôi, cũng không có trong yêu cầu của tôi.

("base" không có dấu gạch chéo phía trước dẫn đến nghiệp trả về YÊU CẦU 400 BAD)

Bây giờ sau khi chạy thử nghiệm ng , tôi có thể phân phối thành công "./src/assets/favicon.png" từ url: http: // localhost: 9876 / test / dummy.png

Trong dự án của tôi, tôi đang sử dụng các phiên bản gói npm sau:

• nghiệp v4.3.0
• jasmine-core v3.2.1
• karma-jasmine v1.1.2
• @ angle / cli v8.3.5
• góc v8.2.7

Nếu bạn có đường dẫn gốc ở đâu đó trong tệp cấu hình của mình, bạn cũng có thể sử dụng một cái gì đó như sau:

proxies: {
  '/bower_components/': config.root + '/client/bower_components/'
}