কর্ম + অ্যাঙ্গুলারজেএস পরীক্ষার মধ্যে একটি মক জেএসওএন ফাইল লোড হচ্ছে

Question

আমার কাছে একটি অ্যাঙ্গুলারজেএস অ্যাপ্লিকেশন রয়েছে যা কারমা + জেসমিন ব্যবহার করে পরীক্ষার জন্য সেট আপ করেছে। আমার একটি ফাংশন রয়েছে যা আমি পরীক্ষা করতে চাই যা একটি বড় JSON অবজেক্ট নিয়ে যায়, এটিকে এমন একটি ফর্ম্যাটে রূপান্তরিত করে যা অ্যাপ্লিকেশনের বাকী অংশে আরও উপভোগযোগ্য এবং রূপান্তরিত বস্তুটি ফেরত দেয়। এটাই.

আমার পরীক্ষাগুলির জন্য, আমি চাই আপনার কাছে বিদ্রূপযুক্ত JSON ফাইল (* .json) কেবলমাত্র জোক JSON সামগ্রী সহ - কোনও স্ক্রিপ্ট নেই। পরীক্ষার জন্য, আমি JSON ফাইলটি লোড করতে সক্ষম হতে চাই এবং আমি যে ফাংশনটি পরীক্ষা করছি তার মধ্যে বস্তুটি পাম্প করুন।

আমি জানি যে আমি এখানে বর্ণিত মোকার কারখানার মধ্যে জেএসএনকে এম্বেড করতে পারি: http://dailyjs.com/2013/05/16/angularjs-5/ তবে আমি সত্যিই চাই যে JSON স্ক্রিপ্টের মধ্যে অন্তর্ভুক্ত না হয় - কেবল সরল JSON নথি পত্র.

আমি কয়েকটি জিনিস চেষ্টা করেছি কিন্তু আমি এই অঞ্চলে মোটামুটি নুব। প্রথমত, আমি আমার জাসন ফাইলটি কেবল কী করবে তা দেখার জন্য আমার কর্মফল সেট আপ করেছি:

files = [
    ...
    'mock-data/**/*.json'
    ...
]

এর ফলস্বরূপ:

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

সুতরাং আমি এটিকে পরিবর্তন করে কেবল ফাইলগুলি পরিবেশন করেছি এবং সেগুলি "অন্তর্ভুক্ত" করে না:

files = [
    ...
    { pattern: 'mock-data/**/*.json', included: false }
    ...
]

এখন যেহেতু সেগুলি কেবল পরিবেশন করা হয়েছে, আমি ভেবেছিলাম আমার অনুমানের মধ্যে থেকে $ http ব্যবহার করে ফাইলটি লোড করার চেষ্টা করব:

$http('mock-data/two-metrics-with-anomalies.json')

আমি যখন পেয়েছি সেই দৌড়াতে:

Error: Unexpected request: GET mock-data/two-metrics-with-anomalies.json

আমার বোঝার মধ্যে যার অর্থ এটি $ httpBackend থেকে বিদ্রূপিত প্রতিক্রিয়ার প্রত্যাশা করে। সুতরাং ... এই মুহুর্তে আমি কৌণিক ইউটিলিটিগুলি ব্যবহার করে কীভাবে ফাইলটি লোড করব তা আমি জানতাম না তাই আমি ভেবেছিলাম যে আমি jQuery চেষ্টা করব যাতে আমি কমপক্ষে এটি কাজ করতে পারি কিনা তা দেখার জন্য:

$.getJSON('mock-data/two-metrics-with-anomalies.json').done(function(data) {
    console.log(data);
}).fail(function(response) {
    console.log(response);
});

এর ফলে:

Chrome 27.0 (Mac) LOG: { readyState: 4,
responseText: 'NOT FOUND',
status: 404,
statusText: 'Not Found' }

আমি চার্লসে এই অনুরোধটি পরিদর্শন করি এবং এটিতে একটি অনুরোধ জানাচ্ছে

/mock-data/two-metrics-with-anomalies.json

যেখানে আমি কর্মের দ্বারা "অন্তর্ভুক্ত" হওয়ার জন্য কনফিগার করা বাকি ফাইলগুলিতে অনুরোধ করা হচ্ছে, উদাহরণস্বরূপ:

/base/src/app.js

স্পষ্টতই কর্মফল ফাইলগুলি পরিবেশন করতে কিছু ধরণের বেস ডিরেক্টরি স্থাপন করছে। কিক্সের জন্য আমি আমার jquery ডেটার অনুরোধটিতে পরিবর্তন করেছি

$.getJSON('base/mock-data/two-metrics-with-anomalies.json')...

এবং এটি কাজ করে! তবে এখন আমি নোংরা অনুভব করছি এবং গোসল করা দরকার। আমাকে আবার পরিষ্কার মনে করতে সহায়তা করুন।

Answer 1

আমি কৌনিক বীজের সাথে একটি কৌণিক সেটআপ ব্যবহার করছি। আমি সোজা .json ফিক্সার ফাইল এবং জুঁই - jquery.js দিয়ে এটি সমাধান করেছি। অন্যরা এই উত্তরের জন্য ইঙ্গিত দিয়েছিল, তবে সমস্ত টুকরোটি সঠিক জায়গায় পেতে আমার কিছুটা সময় লেগেছে। আমি আশা করি এটি অন্য কাউকে সহায়তা করে।

আমার একটি ফোল্ডারে আমার জেসন ফাইল রয়েছে /test/mockএবং আমার ওয়েবঅ্যাপ রয়েছে /app।

আমার karma.conf.jsএই প্রবেশগুলি রয়েছে (অন্যদের মধ্যে):

basePath: '../',

files: [
      ... 
      'test/vendor/jasmine-jquery.js',
      'test/unit/**/*.js',

      // fixtures
      {pattern: 'test/mock/*.json', watched: true, served: true, included: false}
    ],

তারপরে আমার পরীক্ষার ফাইলটিতে রয়েছে:

describe('JobsCtrl', function(){
var $httpBackend, createController, scope;

beforeEach(inject(function ($injector, $rootScope, $controller) {

    $httpBackend = $injector.get('$httpBackend');
    jasmine.getJSONFixtures().fixturesPath='base/test/mock';

    $httpBackend.whenGET('http://blahblahurl/resultset/').respond(
        getJSONFixture('test_resultset_list.json')
    );

    scope = $rootScope.$new();
    $controller('JobsCtrl', {'$scope': scope});

}));


it('should have some resultsets', function() {
    $httpBackend.flush();
    expect(scope.result_sets.length).toBe(59);
});

});

আসল কৌশলটি jasmine.getJSONFixtures().fixturesPath='base/test/mock'; ছিল মূলত আমি এটি সেট করেছিলাম test/mockতবে baseসেখানে এটির দরকার ছিল । বেস ছাড়া, আমি এই জাতীয় ত্রুটি পেয়েছি:

Error: JSONFixture could not be loaded: /test/mock/test_resultset_list.json (status: error, message: undefined)
at /Users/camd/gitspace/treeherder-ui/webapp/test/vendor/jasmine-jquery.js:295

Comments

হাই ক্যামেরন, আমি একটি ত্রুটি পাচ্ছি: টাইপ এরির: অবজেক্ট # <অবজেক্ট> এর 'getJSONFixtures' এর কোন পদ্ধতি নেই ... জুঁই বা কিছু পরিবর্তন হয়েছে?

— মেলবোর্ন

বুঝতে পারিনি যে আমার কাছে জুঁই-জ্যুওয়ারি দরকার ... এটি ইনস্টল করা হয়েছে এবং ত্রুটিটি অদৃশ্য হয়ে গেছে

— মেলবোর্ন

এই পদ্ধতিরটি বেশ ভার্জোজ এবং জটিল মনে হচ্ছে ... আমি জানি না এই "ফিক্সচারগুলি" অতিরিক্ত সুবিধাগুলি সরবরাহ করে কিনা, তবে নীচের পদ্ধতিটি যদি আপনার সমস্ত কিছু সময় সময় JSON ফাইল পড়তে হয় তবে তা জিতে যায়।

— সেপ্টেম্বর

Answer 2

ফিক্সচারের মাধ্যমে জেএসনকে পরিবেশন করা সবচেয়ে সহজ তবে আমাদের সেটআপের কারণে আমরা খুব সহজেই এটি করতে পারি নি তাই আমি একটি বিকল্প সহায়ক সহায়ক ফাংশন লিখেছিলাম:

ভান্ডার

ইনস্টল করুন

$ bower install karma-read-json --save

  OR

$ npm install karma-read-json --save-dev

  OR

$ yarn add karma-read-json --dev

ব্যবহার

1. আপনার কর্ম ফাইলগুলিতে কর্ম-পঠন-json.js রাখুন। উদাহরণ:

   files = [
     ...
     'bower_components/karma-read-json/karma-read-json.js',
     ...
   ]
   

2. আপনার JSON কর্ম দ্বারা পরিবেশিত হচ্ছে তা নিশ্চিত করুন। উদাহরণ:

   files = [
     ...
     {pattern: 'json/**/*.json', included: false},
     ...
   ]
   

3. readJSONআপনার পরীক্ষায় ফাংশনটি ব্যবহার করুন । উদাহরণ:

   var valid_respond = readJSON('json/foobar.json');
   $httpBackend.whenGET(/.*/).respond(valid_respond);
   

Comments

কার্মা-রিড-জসন হ'ল একটি দুর্দান্ত বিকল্প যদি আপনি বোভার ব্যবহার করতে বা ইনস্টল করতে অক্ষম হন, যা জুঁই-জিকুরির প্রয়োজন। (বিগ-কর্পোরেশন পলিসি, আমার ক্ষেত্রে)) আমি সবেমাত্র এনএমপি ( এনপিএমজেএস / প্যাকেজ / কর্মমা-রিড- জসন ) এর মাধ্যমে ইনস্টল করেছি এবং এটি দুর্দান্ত কাজ করেছে।

— মেলিসা অ্যাভেরি-ওয়েয়ার

আমি মনে করি এটি সর্বোত্তম পন্থা কারণ এটি বোরের উপর নির্ভরতার প্রয়োজন হয় না ... কেবল কর্ম / জুঁই এবং কার্মা-পঠন-জেসন। এমনকি এর npm install karma-read-jsonপরিবর্তে দৌড়ে আমি এটি করতে সক্ষম হয়েছিbower install karma-read-json

— এরিক ফুলার

কর্মফলের জন্য দুর্দান্ত প্রতিক্রিয়া - পরিষ্কার বর্ণনার জন্য ধন্যবাদ!

— nomadoj

ক) এই প্ল্যাটফর্মে নতুন নতুন, খ) জঙ্গিটি একটি কৌণিক মডিউল তৈরির চেষ্টা করছে না। এটি আমার পক্ষে ভাল কাজ করেছে। আমার সেট আপটি করমা.কমফিগ.জেসন -> ফাইলগুলিতে চেপে গেছে [] .. আমি কার্মা.কনফিগ.জসনে কোনও কিছুই যুক্ত করি নি .. এছাড়াও: "কনট বৈধ_নিংসে = রিডজেএসএন ('../ সম্পদ / সংগঠন.জসন'); "যেখানে সম্পদ সম্পদের মানক অবস্থান location

— ই

Answer 3

আমি আমার টেস্টকেসগুলিতে বাহ্যিক ডেটা লোড করার একটি সমাধান খুঁজে পেতে লড়াই করে যাচ্ছি। উপরের লিঙ্ক: http://dailyjs.com/2013/05/16/angularjs-5/ আমার জন্য কাজ করেছেন।

কিছু নোট:

"ডিফল্ট জেএসএন" আপনার মক ডেটা ফাইলের কী হিসাবে ব্যবহার করা দরকার, এটি ঠিক আছে, আপনি কেবল ডিফল্ট জেএসওএন উল্লেখ করতে পারেন।

উপহাসড্যাশবোর্ড জেএসএন.জেএস:

'use strict'
angular.module('mockedDashboardJSON',[])
.value('defaultJSON',{
    fakeData1:{'really':'fake2'},
    fakeData2:{'history':'faked'}
});

তারপরে আপনার পরীক্ষার ফাইলে:

beforeEach(module('yourApp','mockedDashboardJSON'));
var YourControlNameCtrl, scope, $httpBackend, mockedDashboardJSON;
beforeEach(function(_$httpBackend_,defaultJSON){
    $httpBackend.when('GET','yourAPI/call/here').respond(defaultJSON.fakeData1);
    //Your controller setup 
    ....
});

it('should test my fake stuff',function(){
    $httpBackend.flush();
    //your test expectation stuff here
    ....
}

Comments

আমার সন্দেহ আছে .. জেসন ফাইলের জন্য কি একটি মডিউল থাকবে? কারণ আমি একক মানগুলিতে একাধিক মান যুক্ত করার চেষ্টা করেছি, আমি দ্বিতীয় জসনের জন্য অজানা সরবরাহকারীর ত্রুটি পাচ্ছি

— পাওয়ান

Answer 4

আপনার সমাধানটি সঠিক বলে মনে হচ্ছে তবে এটি সম্পর্কে 2 টি জিনিস আমার পছন্দ নয়:

• এটি জুঁই ব্যবহার করে
• এটির জন্য নতুন শেখার বক্ররেখা প্রয়োজন

আমি কেবল এই সমস্যায় পড়েছি এবং সময়সীমা বেঁধে দেওয়ার মতো সময় না থাকায় এটি দ্রুত সমাধান করতে হয়েছিল এবং আমি নিম্নলিখিতটি করেছি

আমার জসন রিসোর্সটি বিশাল ছিল, এবং আমি এটিকে পরীক্ষায় আটকানোর জন্য অনুলিপি করতে পারি নি তাই আমাকে এটির একটি পৃথক ফাইল রাখতে হয়েছিল - তবে আমি সিদ্ধান্ত নিয়েছিলাম যে এটি জাসন এর চেয়ে জাভাস্ক্রিপ্ট হিসাবে রাখবে, এবং তখন আমি কেবল এটি করেছি:

var someUniqueName = ... the json ...

এবং আমি এটি কর্মফলের মধ্যে অন্তর্ভুক্ত ...

যদি প্রয়োজন হয় তবে আমি ব্যাকএন্ডের HTTP প্রতিক্রিয়াটিকে এখনও উপহাস করতে পারি।

$httpBackend.whenGET('/some/path').respond(someUniqueName);

আমি এখানে অন্তর্ভুক্ত করার জন্য একটি নতুন কৌণিক মডিউলটিও লিখতে পারি এবং তারপরে জসন রিসোর্সটিকে এমন কিছু হিসাবে পরিবর্তন করতে পারি

angular.module('hugeJsonResource', []).constant('SomeUniqueName', ... the json ... );

এবং তারপরে কেবল SomeUniqueNameপরীক্ষায় ইনজেক্ট করুন যা দেখতে আরও পরিষ্কার er

এমনকি এটি একটি পরিষেবা মোড়ানো

angular.module('allTestResources',[]).service('AllTestResources', function AllTestResources( SomeUniqueName , SomeOtherUniqueName, ... ){
   this.resource1 = SomeUniqueName;
   this.resource2 = SomeOtherUniqueName; 
})

এই সমাধানগুলি আমার কাছে দ্রুত, ঠিক যেমন পরিষ্কার ছিল, এবং কোনও নতুন শেখার বক্ররেখার প্রয়োজন পড়েনি। সুতরাং আমি এই এক পছন্দ।

Answer 5

আমি একই জিনিস খুঁজছিলাম। আমি এই পদ্ধতির চেষ্টা করতে যাচ্ছি । এটি মক ডেটা ফাইলগুলি অন্তর্ভুক্ত করার জন্য কনফিগারেশন ফাইলগুলি ব্যবহার করে তবে ফাইলগুলি জসনের চেয়ে কিছুটা বেশি, কারণ জসনটি কৌণিক.মডিউল ('মকডাটাডমডিউল') এ পাস করতে হবে value মান এবং তারপরে আপনার ইউনিট পরীক্ষাগুলি একাধিক মডিউলও লোড করতে পারে এবং তারপরেই প্রতিটি সেট ইনজেক্ট কলটিতে ইনজেক্ট করার জন্য মান সেটটি উপলব্ধ।

এছাড়াও আরও একটি পদ্ধতির সন্ধান পেয়েছে যা এক্সএইচআর অনুরোধগুলির জন্য আশাব্যঞ্জক বলে মনে হয় যা ব্যয়বহুল নয়, এটি মিডওয়ে টেস্টিংয়ের বর্ণনা দেয় যা একটি দুর্দান্ত পোস্ট যা আমি যদি সঠিকভাবে বুঝতে পারি তবে আপনার কন্ট্রোলার / পরিষেবাটি আসলে e2e পরীক্ষার মতো ডেটা পুনরুদ্ধার করতে দেয় তবে আপনার মিডওয়ে পরীক্ষায় প্রকৃতপক্ষে রয়েছে নিয়ামক সুযোগ অ্যাক্সেস (e2e আমি মনে করি না)।

Answer 6

কর্মা প্রিপ্রসেসরগুলি রয়েছে যা জেএসওএন ফাইলগুলির সাথেও কাজ করে। এখানে একটি আছে:

https://www.npmjs.org/package/karma-ng-json2js- পূর্বপ্রসেসর

এবং নির্লজ্জ প্লাগ, এটি আমি বিকাশ করেছি যা প্রয়োজনীয় জেএস সমর্থন করে

https://www.npmjs.org/package/karma-ng-json2js-preprocessor-requirejs

Answer 7

জেসন ফাইলগুলিকে __html__ গ্লোবালে যুক্ত করার জন্য আপনি কর্ম-এইচটিএমএল 2 জেস-প্রিপ্রসেসর ব্যবহার করতে পারেন ।

বিশদে এই উত্তরটি দেখুন: https://stackoverflow.com/a/22103160/439021

Answer 8

ক্যামেরনের জবাবের বিকল্প নেই , প্রয়োজন ছাড়া jasmine-jqueryবা কোনও অতিরিক্ত কার্ম কনফিগারেশন ছাড়াই পরীক্ষা করার জন্য যেমন একটি কৌণিক পরিষেবাটি ব্যবহার করে $resource:

angular.module('myApp').factory('MyService', function ($resource) {
    var Service = $resource('/:user/resultset');
    return {
        getResultSet: function (user) {
            return Service.get({user: user}).$promise;
        }
    };
});

এবং সংশ্লিষ্ট ইউনিট পরীক্ষা:

describe('MyServiceTest', function(){
    var $httpBackend, MyService, testResultSet, otherTestData ;

    beforeEach(function (done) {
        module('myApp');
        inject(function ($injector) {
            $httpBackend = $injector.get('$httpBackend');
            MyService = $injector.get('MyService');
        });
        // Loading fixtures
        $.when(
            $.getJSON('base/test/mock/test_resultset.json', function (data) { testResultSet = data; }),
            $.getJSON('base/test/mock/test_other_data.json', function (data) { otherTestData = data; })
        ).then(done);
    });

    it('should have some resultset', function() {
        $httpBackend.expectGET('/blahblahurl/resultset').respond(testResultSet);
        MyService.getResultSet('blahblahurl').then(function (resultSet) {
            expect(resultSet.length).toBe(59);
        });
        $httpBackend.flush();
    });
});

Comments

$ হিসাবে কখন $। কখন এবং get .GETJSON?

— ম্যাট

jQuery ফাংশন: w .হিন] (http://api.jquery.com/jquery.when), [get .getJSON

— সিমন