कर्म इकाई परीक्षण के दौरान छवियों के लिए 404 चेतावनी को कैसे ठीक करें

Question

मैं अपने निर्देशों (एंगुलरज) में से एक को ग्रन्ट / कर्म / फैंटमज / चमेली का उपयोग करके यूनिट परीक्षण कर रहा हूं। मेरे परीक्षण ठीक चलते हैं

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();
    }));
    ....
});

लेकिन मुझे ये 404 मिलते हैं

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

हालांकि वे कुछ भी नहीं करते हैं, वे लॉग आउटपुट में शोर जोड़ते हैं। क्या इसे ठीक करने का कोई तरीका है ? (निश्चित रूप से कर्म के लॉग-इन को बदले बिना, क्योंकि मैं उन्हें देखना चाहता हूं)

Comments

क्या यह एक अलग ब्राउज़र में बना रहता है? मुझे पता है कि एफएफ में इस प्रकार की कॉल के लिए 404 त्रुटियों के साथ कुछ ज्ञात समस्याएं हैं।

— निकोलस हेज़ल

यह प्रेत होना है। मैंने क्रोम की जाँच की जो 404 को भी दिखाता है। ध्यान दें कि वे चेतावनी हैं, त्रुटियां नहीं!

— १६:०६ पर जीनलूका स्कलजेरी

एनजी- src मदद का उपयोग करता है?

— इतन पीर

अच्छी कोशिश, लेकिन इसका एक ही नतीजा है

— जीनलूका स्कलजेरी १३'१४

Answer 1

ऐसा इसलिए है क्योंकि आपको लोड करने के लिए कर्म को कॉन्फ़िगर करने की आवश्यकता है, फिर अनुरोध किए जाने पर उनकी सेवा करें;)

आपके कर्म.कॉन्फ़.जेएस फ़ाइल में आपको पहले से ही परिभाषित फ़ाइलें और / या प्रतिमान होना चाहिए:

// 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: [

],

// ...

आप अधिक जानकारी के लिए यहां एक नज़र रख सकते हैं :)

संपादित करें: यदि आप अपने ऐप को चलाने के लिए एक नोड-वेब-सर्वर का उपयोग करते हैं, तो आप इसे कर्म में जोड़ सकते हैं ।conf.js:

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

EDIT2: यदि आप उपयोग नहीं करते हैं या किसी अन्य सर्वर का उपयोग करना चाहते हैं, तो आप स्थानीय प्रॉक्सी को परिभाषित कर सकते हैं, लेकिन जैसा कि कर्मा उपयोग में पोर्ट प्रदान नहीं करता है, गतिशील रूप से, यदि कर्म 9876 (डिफ़ॉल्ट) की तुलना में किसी अन्य पोर्ट पर शुरू होता है, तो आप अभी भी उन 404 कष्टप्रद हो ...

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

संबंधित मुद्दा: https://github.com/karma-runner/karma/issues/872

Comments

मेरे मामले में ये चित्र मौजूद नहीं हैं। समाधान आप प्रदान फ़ाइलें मौजूद मौजूद है, है ना?

— जीनलूका स्केलेजरी

हां बिल्कुल! मुझे लगता है कि मुझे गलत समझा गया, गैर-मौजूदा फ़ाइलों के लिए 404 त्रुटियां होने का कोई मतलब है, है ना? आप छवियों से संबंधित चेतावनियाँ छिपाना चाहेंगे? लॉग स्तर को बदले बिना, मुझे कोई समाधान नहीं दिखता है, इसके अलावा, यह अन्य चेतावनियों को छिपाएगा, जो जोखिम भरा होगा। उदाहरण के लिए "परीक्षण / img" फ़ोल्डर में खाली। Png फाइलें क्यों नहीं बनाते हैं? :)

— 11:22 पर glepretre

किसी कारण से मैं इसे काम नहीं कर सकता। HTML में उपयोग किए गए url और karm.conf.js में पैटर्न के बीच क्या संबंध है? उदाहरण के लिए यदि मेरे पास परीक्षण / संपत्ति / img.png में एक छवि है , तो यूआरएल क्या होना चाहिए?

— १२:४al पर जीनलूका स्कलजेरी

मेरी क्षमायाचना, यह समाधान काम करना चाहिए लेकिन मुझे 404 त्रुटियां भी हुईं। मेरा मानना ​​है कि यह कर्म में कार्यान्वयन की कमी से संबंधित है और मुझे आश्चर्य है कि हम इसे प्राप्त करने वाले एकमात्र हैं। मुझे यह काम करने के लिए एक (बिट हैसी) तरीका मिला, लेकिन आपको कर्म के समानांतर में एक और (वेब) सर्वर चलाने की आवश्यकता होगी। मैं अपने उत्तर को संपादित करूंगा। ;)

— भूतल्रे

EDIT2 के जवाब में यदि आप एक कस्टम पोर्ट पर कर्म चलाते हैं, तो आप कर्मा सर्वर के पूर्ण यूआरआई से लिंक करके 404 से बच सकते हैं: (मानकर port: 9999)proxies = { '/images/': 'http://localhost:9999/base/images/' };

— जोश

Answer 2

मेरे लिए पहेली का भ्रामक टुकड़ा 'आधार' वर्चुअल फ़ोल्डर था। यदि आप नहीं जानते हैं कि आपके जुड़नार के संपत्ति पथ में शामिल करने की आवश्यकता है, तो आपको डिबग करना मुश्किल होगा।

कॉन्फ़िगरेशन दस्तावेज़ के अनुसार

डिफ़ॉल्ट रूप से सभी संपत्तियां http: // localhost पर दी जाती हैं: [PORT] / आधार /

नोट: यह अन्य संस्करणों के लिए सही नहीं हो सकता है - मैं ०.१२.१४ पर हूं और यह मेरे लिए काम करता है लेकिन ०.१० डॉक्स ने इसका उल्लेख नहीं किया है।

फ़ाइलों के पैटर्न को निर्दिष्ट करने के बाद:

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

मैं अपने फिक्सेटर में इसका इस्तेमाल कर सकता हूं:

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

और मुझे उस बिंदु पर प्रॉक्सी की आवश्यकता नहीं थी।

Comments

यह क्लिनिक है। शीर्ष उत्तर यह बताते हैं लेकिन बहुत संक्षेप में - विस्तार के लिए धन्यवाद।

— jlb

Answer 3

आप अपने कर्म के अंदर जेनेरिक मिडलवेयर बना सकते हैं। शीर्ष पर बिट - मेरे लिए काम किया

पहले डमी 1 पीएक्स छवियों को परिभाषित करें (मैंने बेस 64 का उपयोग किया है):

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'
  }
};

फिर मिडलवेयर फ़ंक्शन को परिभाषित करें:

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();
}

मध्य कर्म को अपने कर्म में लगाएँ

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

Comments

क्या आपने कभी इसे एक वास्तविक पैकेज में बनाया है? मैं सिर्फ

— npm

यदि आप सभी छवि अनुरोधों को दबाना चाहते हैं, req.headers.acceptतो यह देखने के लिए जांचें कि imageक्या इसमें सम्‍मिलित है और यदि ऐसा होता है तो 204 लौटाएं।

— क्लींज

Answer 4

@ Glepretre के उत्तर के आधार पर, मैंने एक खाली .png फ़ाइल बनाई है और इसे 404 चेतावनियों को छिपाने के लिए कॉन्फ़िगर में जोड़ा है:

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

Answer 5

ठीक करने के लिए, karma.conf.jsअपने परदे के पीछे अपने परदे के साथ सेवा करने के लिए इंगित करने के लिए सुनिश्चित करें:

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'
}

Answer 6

भले ही इसका एक पुराना धागा है, लेकिन मुझे अपनी छवि प्राप्त करने के लिए वास्तव में 404 को खत्म करने के लिए मेरी छवि प्राप्त करने में कुछ घंटों का समय लगा। टिप्पणियां अभी पूरी तरह से पर्याप्त नहीं थीं। मुझे विश्वास है कि मैं इस स्क्रीनशॉट के साथ समाधान को स्पष्ट कर सकता हूं। अनिवार्य रूप से एक बात जो कई टिप्पणियां गायब थीं, यह तथ्य है कि प्रॉक्सी मूल्य "/ आधार" से शुरू होना चाहिए , भले ही आधार मेरे किसी भी फ़ोल्डर पथ में नहीं है, और न ही मेरे अनुरोधों में है।

("आधार" फॉरवर्ड स्लैश के परिणामस्वरूप कर्म का परिणाम 400 BAD REQUEST लौट आया)

अब एनजी टेस्ट चलाने के बाद , मैं सफलतापूर्वक url से "./src/assets/favicon.png" सेवा कर सकता हूं: http: // localhost: 9876 / test / dummy.png

अपनी परियोजना में मैं निम्नलिखित npm पैकेज संस्करणों का उपयोग कर रहा हूं:

• कर्म v4.3.0
• चमेली-कोर v3.2.1
• कर्म-चमेली v1.1.2
• @ कोणीय / क्ली v8.3.5
• कोणीय v8.2.7

Comments

यह अंतर्दृष्टि मेरे लिए यह समझने में विशेष रूप से सहायक थी कि आधार क्षेत्र के भीतर फ़ाइलों को परोसने के लिए (कर्म के दृष्टिकोण से) और आधार क्षेत्र के बाहर (जो अंततः मेरा मुद्दा था) में अंतर था, जो तब मुझे github.com/karma की ओर ले गया -रुनेर / कर्म / मुद्दे / 2703 । तो, इस स्पष्टीकरण के लिए धन्यवाद।

— dpmott

Answer 7

यदि आपकी कॉन्फ़िगरेशन फ़ाइल में कहीं रूट है तो आप कुछ इस तरह से भी उपयोग कर सकते हैं:

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