টেম্পলেট ইউআরএল সহ ইউনিট টেস্টিং অ্যাঙ্গুলারজেএসের নির্দেশ

Question

আমার একটি AngularJS ডিরেক্টরি রয়েছে যার templateUrlসংজ্ঞা দেওয়া আছে। আমি জেসমিনের সাথে এটি পরীক্ষা করার চেষ্টা করছি।

আমার জুঁই জাভাস্ক্রিপ্ট নিম্নলিখিত মত দেখায় সুপারিশ প্রতি এই :

describe('module: my.module', function () {
    beforeEach(module('my.module'));

    describe('my-directive directive', function () {
        var scope, $compile;
        beforeEach(inject(function (_$rootScope_, _$compile_, $injector) {
            scope = _$rootScope_;
            $compile = _$compile_;
            $httpBackend = $injector.get('$httpBackend');
            $httpBackend.whenGET('path/to/template.html').passThrough();
        }));

        describe('test', function () {
            var element;
            beforeEach(function () {
                element = $compile(
                    '<my-directive></my-directive>')(scope);
                angular.element(document.body).append(element);
            });

            afterEach(function () {
                element.remove();
            });

            it('test', function () {
                expect(element.html()).toBe('asdf');
            });

        });
    });
});

আমি যখন আমার জেসমিনের বিশেষ ত্রুটিতে এটি চালিত করি তখন আমি নিম্নলিখিত ত্রুটিটি পাই:

TypeError: Object #<Object> has no method 'passThrough'

আমি যা চাই তা হ'ল টেম্পলেট ইউআরএলটি লোড হওয়ার জন্য - আমি ব্যবহার করতে চাই না respond। আমি বিশ্বাস করি এটি এনজিমক ব্যবহার করে এর সাথে সম্পর্কিত হতে পারে পরিবর্তে ngMockE2E । যদি এই অপরাধী হয় তবে আমি কীভাবে আগেরটির বদলে ব্যবহার করব?

আগাম ধন্যবাদ!

Comments

আমি ব্যবহার করেছি না .passThrough();: যে ভাবে, কিন্তু ডক্স থেকে, আপনি ভালো কিছু চেষ্টা করেছি $httpBackend.expectGET('path/to/template.html'); // do action here $httpBackend.flush();আপনি যদি অনুরোধটি, অর্থাত্ ধরা অনুপস্থিত করছি না - আমি এই আপনার ব্যবহারের ভাল ফিট মনে whenGet()আসলে, কিন্তু এর পরিবর্তে পরীক্ষা এটা পাঠানো হয়, এবং তারপর এটা পাঠান?

— অ্যালেক্স ওসবার্ন

উত্তরের জন্য ধন্যবাদ. আমি মনে করি না যে expectGETঅনুরোধগুলি প্রেরণ করে ... কমপক্ষে বাক্সের বাইরে। ইন ডক্স সঙ্গে তাদের উদাহরণ /auth.pyএকটি আছে $httpBackend.whenপূর্বে $httpBackend.expectGETএবং $httpBackend.flushকল।

— জেরেড

এটি সঠিক, expectGetএকটি অনুরোধ চেষ্টা করা হয়েছে কিনা তা খতিয়ে দেখছে।

— অ্যালেক্স ওসবার্ন

আহ। ওয়েল $httpBackend, নির্দেশের অধীনে প্রদত্ত ইউআরএলটি ব্যবহার করতে templateUrlএবং এটি পেতে যেতে আমার কাছে মককে বলার একটি উপায় দরকার । আমি ভেবেছিলাম passThroughএই কাজ করবে। আপনি কি এটি করার আলাদা উপায় জানেন?

— জ্যারেড

হুম, আমি এখনও খুব বেশি e2e টেস্টিং করিনি, তবে ডক্সগুলি পরীক্ষা করে দেখছি - এর পরিবর্তে আপনি e2e ব্যাকএন্ড ব্যবহার করার চেষ্টা করেছেন - আমি মনে করি যে এজন্য আপনি কোনও পদ্ধতি পাসথ্রুটি পান নি - ডকসস.অঙ্গুলারজএস.আর.আইপিএইচটিএনজিএইচটিটিপি

— অ্যালেক্স ওসোর্ন

Answer 1

আপনি সঠিক যে এটি ngMock এর সাথে সম্পর্কিত। এনজিমক মডিউলটি প্রতিটি কৌণিক পরীক্ষার জন্য স্বয়ংক্রিয়ভাবে লোড করা হয়, এবং এটি পরিষেবাটির $httpBackendযে কোনও ব্যবহার পরিচালনা করতে মোককে আরম্ভ করে $http, যার মধ্যে টেমপ্লেট আনয়ন অন্তর্ভুক্ত। টেম্পলেট সিস্টেমটি এর মাধ্যমে টেমপ্লেটটি লোড করার চেষ্টা করে $httpএবং এটি মকের কাছে একটি "অপ্রত্যাশিত অনুরোধ" হয়ে ওঠে।

আপনার কীভাবে টেমপ্লেটগুলিকে প্রাক-লোড করার জন্য এমন উপায় প্রয়োজন $templateCacheযাতে এঙ্গুলার তাদের ব্যবহার না করেই জিজ্ঞাসা করলে তারা ইতিমধ্যে উপলব্ধ থাকে $http।

পছন্দের সমাধান: কর্ম

আপনি যদি নিজের পরীক্ষা চালানোর জন্য কর্মফল ব্যবহার করেন (এবং আপনার হওয়া উচিত) তবে আপনি এনজি-এইচটিএমএল 2 জেস প্রিপ্রসেসর দিয়ে টেমপ্লেটগুলি লোড করতে এটি কনফিগার করতে পারেন । এনজি-এইচটিএমএল 2 জে আপনার দ্বারা বর্ণিত এইচটিএমএল ফাইলগুলি পড়ে এবং এগুলি একটি কৌণিক মডিউলে রূপান্তর করে যা প্রি-লোড করে$templateCache ।

পদক্ষেপ 1: আপনার প্রিপ্রসেসরটি সক্ষম এবং কনফিগার করুন karma.conf.js

// karma.conf.js

preprocessors: {
    "path/to/templates/**/*.html": ["ng-html2js"]
},

ngHtml2JsPreprocessor: {
    // If your build process changes the path to your templates,
    // use stripPrefix and prependPrefix to adjust it.
    stripPrefix: "source/path/to/templates/.*/",
    prependPrefix: "web/path/to/templates/",

    // the name of the Angular module to create
    moduleName: "my.templates"
},

আপনি যদি আপনার অ্যাপ্লিকেশনটিকে স্কেফোল্ড করতে ইওমেন ব্যবহার করেন তবে এই কনফিগারটিটি কাজ করবে

plugins: [ 
  'karma-phantomjs-launcher', 
  'karma-jasmine', 
  'karma-ng-html2js-preprocessor' 
], 

preprocessors: { 
  'app/views/*.html': ['ng-html2js'] 
}, 

ngHtml2JsPreprocessor: { 
  stripPrefix: 'app/', 
  moduleName: 'my.templates' 
},

পদক্ষেপ 2: আপনার পরীক্ষাগুলিতে মডিউলটি ব্যবহার করুন

// my-test.js

beforeEach(module("my.templates"));    // load new module containing templates

একটি সম্পূর্ণ উদাহরণের জন্য, কৌনিক পরীক্ষার গুরু ভোজতা জিনার এই প্রমিত উদাহরণটি দেখুন । এটিতে একটি সম্পূর্ণ সেটআপ রয়েছে: কর্মফল, টেম্পলেট এবং পরীক্ষাগুলি tests

একটি অ-কর্ম সমাধান

যদি আপনি কোনও কারণেই কার্ম ব্যবহার না করেন (আমার উত্তরাধিকার অ্যাপ্লিকেশনটিতে একটি জটিল নকশা প্রক্রিয়া ছিল) এবং কেবল একটি ব্রাউজারে পরীক্ষা করে দেখছি, আমি খুঁজে পেয়েছি যে আপনি $httpBackendটেমপ্লেটটি সত্যিকারের জন্য আনতে কোনও কাঁচা এক্সএইচআর ব্যবহার করে এনজিমকের টেকওভার পেতে পারেন you এবং এটি sertোকান $templateCache। এই সমাধানটি অনেক কম নমনীয়, তবে এটি আপাতত কাজটি করে।

// my-test.js

// Make template available to unit tests without Karma
//
// Disclaimer: Not using Karma may result in bad karma.
beforeEach(inject(function($templateCache) {
    var directiveTemplate = null;
    var req = new XMLHttpRequest();
    req.onload = function() {
        directiveTemplate = this.responseText;
    };
    // Note that the relative path may be different from your unit test HTML file.
    // Using `false` as the third parameter to open() makes the operation synchronous.
    // Gentle reminder that boolean parameters are not the best API choice.
    req.open("get", "../../partials/directiveTemplate.html", false);
    req.send();
    $templateCache.put("partials/directiveTemplate.html", directiveTemplate);
}));

সিরিয়াসলি, যদিও। কর্মফল ব্যবহার করুন । এটি সেট আপ করতে সামান্য কাজ লাগে, তবে এটি আপনাকে কমান্ড লাইন থেকে এক সাথে একাধিক ব্রাউজারে আপনার সমস্ত পরীক্ষা চালাতে দেয়। সুতরাং আপনি এটি আপনার অবিচ্ছিন্ন ইন্টিগ্রেশন সিস্টেমের অংশ হিসাবে রাখতে পারেন এবং / অথবা আপনি এটিকে আপনার সম্পাদক থেকে একটি শর্টকাট কী তৈরি করতে পারেন। Alt-ট্যাব-রিফ্রেশ-বিজ্ঞাপন-ইনফিনিটামের চেয়ে অনেক বেশি ভাল।

Comments

এটি সুস্পষ্ট হতে পারে তবে অন্যরা যদি একই জিনিসটিতে আটকে যায় এবং উত্তরগুলির জন্য এখানে সন্ধান করে: আমি বিভাগে preprocessorsফাইলের প্যাটার্ন (উদাহরণস্বরূপ "path/to/templates/**/*.html") যোগ না করেও এটি কাজ করতে পারি না । fileskarma.conf.js

— জোহান

তাহলে কি চালানোর আগে প্রতিক্রিয়ার জন্য অপেক্ষা না করে কোনও বড় সমস্যা আছে? যখন অনুরোধটি ফিরে আসবে তখনই এটি কী মান আপডেট করবে (IE 30 সেকেন্ড সময় নেয়)?

— জ্যাকি

@ জ্যাকি আমি ধরে নিয়েছি আপনি "নন-কর্ম" উদাহরণের বিষয়ে কথা বলছেন যেখানে আমি falseএক্সএইচআর এর openকলটির জন্য এটি প্যারামিটারটি সংহত করে তুলছি । যদি আপনি এটি না করেন, কার্যকর করা টেমপ্লেটটি লোড না করেই, আনন্দদায়কভাবে চালিয়ে যাওয়া এবং আপনার পরীক্ষাগুলি কার্যকর করা শুরু করবে। এটি আপনার একই সমস্যায় ফিরে আসে: 1) টেমপ্লেটের জন্য অনুরোধটি বাইরে যায়। 2) পরীক্ষা চালানো শুরু। 3) পরীক্ষাটি একটি নির্দেশনা সংকলন করে এবং টেমপ্লেটটি এখনও লোড হয় না। 4) কৌণিক তার $httpপরিষেবাটির মাধ্যমে টেমপ্লেটটির জন্য অনুরোধ করে , যা উপহাস করা হয়। 5) মোক $httpপরিষেবাটি অভিযোগ করে: "অপ্রত্যাশিত অনুরোধ"।

— স্লিপিমারফ

আমি কর্মা ছাড়াই গ্রান্ট-জুঁই চালাতে সক্ষম হয়েছি।

— ফ্ল্যাভারস্পেকেপ

আরেকটা জিনিস: আপনি কর্মফল-NG-html2js-প্রাক প্রসেসর (ইনস্টল করতে হবে npm install --save-dev karma-ng-html2js-preprocessor), এবং আপনার এর প্লাগ-ইন অধ্যায় থেকে এটি যোগ karma.conf.jsঅনুযায়ী, stackoverflow.com/a/19077966/859631 ।

— ভিনসেন্ট

Answer 2

আমি যা করতে পেরেছি তা হ'ল টেমপ্লেট ক্যাশে পেয়ে সেখানে ভিউটি স্থাপন করা। এনজিমক ব্যবহার না করার বিষয়ে আমার নিয়ন্ত্রণ নেই, দেখা যাচ্ছে:

beforeEach(inject(function(_$rootScope_, _$compile_, $templateCache) {
    $scope = _$rootScope_;
    $compile = _$compile_;
    $templateCache.put('path/to/template.html', '<div>Here goes the template</div>');
}));

Comments

এই পদ্ধতির সাথে আমার অভিযোগ এখানে ... এখন যদি আমাদের এইচটিএমএল একটি বড় টুকরো থাকে যা আমরা টেম্পলেট ক্যাশে একটি স্ট্রিং হিসাবে ইনজেকশন করতে যাচ্ছি তবে আমরা যখন শেষ প্রান্তে এইচটিএমএল পরিবর্তন করব তখন আমরা কী করব? ? পরীক্ষায় এইচটিএমএলও পরিবর্তন করবেন? আইএমও এটি একটি অনর্থক উত্তর এবং কারণটি আমরা টেম্পলেট ওভার টেম্পলেট ইউআরএল বিকল্পটি ব্যবহার করে চলেছি। যদিও আমি আমার এইচটিএমএলকে নির্দেশের একটি বৃহত স্ট্রিং হিসাবে রাখা অত্যন্ত পছন্দ করি না - এটি এইচটিএমএল এর দুটি স্থান আপডেট না করার সবচেয়ে টেকসই সমাধান solution HTML এর সাথে সময়ের সাথে মেলে না এমনটি আরও বেশি ইমেজিং নিতে পারে না।

— স্টেন মুচো

Answer 3

প্রাথমিক সমস্যাটি এটি যুক্ত করে সমাধান করা যেতে পারে:

beforeEach(angular.mock.module('ngMockE2E'));

যে কারণ এটি খোঁজ করে $ httpBackend মধ্যে ngMock ডিফল্টরূপে মডিউল এবং এটি সম্পূর্ণ নয়।

Comments

আসলে এটিই মূল প্রশ্নের সঠিক উত্তর (এটিই আমাকে সাহায্য করেছিল)।

— মাদুর

এটি চেষ্টা করেও পাসথ্রু () এখনও আমার পক্ষে কাজ করেনি। এটি এখনও "অপ্রত্যাশিত অনুরোধ" ত্রুটি দিয়েছে।

— frodo2975

Answer 4

আমি যে সমাধানটি পৌঁছেছি তার জন্য জুঁই - jquery.js এবং একটি প্রক্সি সার্ভার দরকার।

আমি এই পদক্ষেপগুলি অনুসরণ করেছি:

1. কর্মফল.কম:

আপনার ফাইলগুলিতে জুঁই - jquery.js যুক্ত করুন

files = [
    JASMINE,
    JASMINE_ADAPTER,
    ...,
    jasmine-jquery-1.3.1,
    ...
]

এমন একটি প্রক্সি সার্ভার যুক্ত করুন যা আপনার ফিক্সচারগুলিকে সার্ভার করবে

proxies = {
    '/' : 'http://localhost:3502/'
};

2. আপনার অনুমান

   ('মাইস্পেক', ফাংশন () {var $ স্কোপ, টেম্পলেট; জেসমিন.জেট ফিক্সচারস ()। ফিক্সচারপথ = 'পাবলিক / পার্টিয়াল /'; // কাস্টম পাথ বর্ণনা করুন যাতে আপনি অ্যাপটিতে আগে ব্যবহারযোগ্য আসল টেমপ্লেট পরিবেশন করতে পারেন প্রতিটি (ফাংশন) () {টেমপ্লেট = কৌণিক.এলিমেন্ট ('');

       module('project');
       inject(function($injector, $controller, $rootScope, $compile, $templateCache) {
           $templateCache.put('partials/resources-list.html', jasmine.getFixtures().getFixtureHtml_('resources-list.html')); //loadFixture function doesn't return a string
           $scope = $rootScope.$new();
           $compile(template)($scope);
           $scope.$apply();
       })
   });

   });

3. আপনার অ্যাপের মূল ডিরেক্টরিতে একটি সার্ভার চালান

   পাইথন-মি সিম্পল এইচটিটিপিএস সার্ভার 3502

4. কর্মফল চালান।

এটি নির্ধারণ করতে আমার কিছুটা সময় লেগেছিল, অনেকগুলি পোস্ট সন্ধান করার পরে, আমি মনে করি এটি সম্পর্কে নথিপত্র আরও পরিষ্কার হওয়া উচিত, কারণ এটি এত গুরুত্বপূর্ণ একটি বিষয়।

Comments

এ থেকে সম্পদ সরবরাহ localhost/base/specsএবং python -m SimpleHTTPServer 3502এটি ঠিক করার সাথে সাথে একটি প্রক্সি সার্ভার যুক্ত করতে আমার সমস্যা হয়েছিল । আপনি স্যার একটি প্রতিভা!

— pbojinov

আমি আমার পরীক্ষাগুলিতে ile সংকলন করে একটি খালি উপাদান ফিরে পেয়েছিলাম। অন্যান্য জায়গাগুলি $ স্কোপ। $ ডাইজেস্ট () চালানোর পরামর্শ দেয়: এখনও খালি। চলমান $ সুযোগ। $ প্রয়োগ () যদিও কাজ করেছে। আমি মনে করি এটি কারণ যে আমি আমার নির্দেশিকায় একটি নিয়ামক ব্যবহার করছি? নিশ্চিত না. পরামর্শের জন্য ধন্যবাদ! সাহায্য করেছেন!

— স্যাম সিমনস

Answer 5

আমার সমাধান:

test/karma-utils.js:

function httpGetSync(filePath) {
  var xhr = new XMLHttpRequest();
  xhr.open("GET", "/base/app/" + filePath, false);
  xhr.send();
  return xhr.responseText;
}

function preloadTemplate(path) {
  return inject(function ($templateCache) {
    var response = httpGetSync(path);
    $templateCache.put(path, response);
  });
}

karma.config.js:

files: [
  //(...)
  'test/karma-utils.js',
  'test/mock/**/*.js',
  'test/spec/**/*.js'
],

পরীক্ষা:

'use strict';
describe('Directive: gowiliEvent', function () {
  // load the directive's module
  beforeEach(module('frontendSrcApp'));
  var element,
    scope;
  beforeEach(preloadTemplate('views/directives/event.html'));
  beforeEach(inject(function ($rootScope) {
    scope = $rootScope.$new();
  }));
  it('should exist', inject(function ($compile) {
    element = angular.element('<event></-event>');
    element = $compile(element)(scope);
    scope.$digest();
    expect(element.html()).toContain('div');
  }));
});

Comments

প্রথম শালীন সমাধান যা ডেভসকে কর্ম ব্যবহার করতে বাধ্য করার চেষ্টা করে না। কৌণিক ছেলেরা এত শীতল কিছুর মাঝে কেন এত খারাপ এবং সহজেই এড়ানো যায়? পিএফএফ

— ফ্যাবিও মিলহিরো

আমি দেখতে পাচ্ছি যে আপনি একটি 'পরীক্ষা / উপহাস / ** / *। জেএস' যোগ করছেন এবং আমি মনে করি এটি পরিষেবা এবং সমস্ত মতো উপহাসকৃত জিনিসগুলি লোড করা? আমি উপহাসের পরিষেবাগুলির কোড সদৃশ এড়ানোর উপায়গুলি খুঁজছি। আপনি কি আমাদের আরও কিছু দেখাবেন?

— স্টিফেন

ঠিক মনে রাখবেন না, তবে উদাহরণস্বরূপ $ http পরিষেবার জন্য জেএসএনএস-এর জন্য সেটিংস সেটিংস ছিল। অভিনব কিছু না।

— বারটেক

আজ এই সমস্যাটি ছিল - দুর্দান্ত সমাধান। আমরা কর্মফল ব্যবহার করি তবে আমরা চটজপাহও ব্যবহার করি - কোনও কারণেই আমাদের পরীক্ষা করার নির্দেশকে একক করতে সক্ষম করার জন্য কেবলমাত্র কর্মফল এবং কেবল কর্মফল ব্যবহার করতে বাধ্য করা উচিত নয়।

— lwalden

আমরা কৌণিক দিয়ে জ্যাঙ্গো ব্যবহার করছি, এবং এটি কোনও নির্দেশকে পরীক্ষা করার জন্য একটি মোহন এর মতো কাজ করেছে যা এটির টেম্পলেটটি লোড করে static, যেমন, beforeEach(preloadTemplate(static_url +'seed/partials/beChartDropdown.html')); ধন্যবাদ!

— অ্যালেক ল্যান্ডগ্রাফ

Answer 6

আপনি গ্রান্ট ব্যবহার করছেন, আপনি গ্রান্ট-কৌণিক-টেম্পলেট ব্যবহার করতে পারেন। এটি টেমপ্লেট ক্যাশে আপনার টেম্পলেটগুলি লোড করে এবং এটি আপনার চশমা কনফিগারেশনের পক্ষে স্বচ্ছ।

আমার নমুনা কনফিগারেশন:

module.exports = function(grunt) {

  grunt.initConfig({

    pkg: grunt.file.readJSON('package.json'),

    ngtemplates: {
        myapp: {
          options: {
            base:       'public/partials',
            prepend:    'partials/',
            module:     'project'
          },
          src:          'public/partials/*.html',
          dest:         'spec/javascripts/angular/helpers/templates.js'
        }
    },

    watch: {
        templates: {
            files: ['public/partials/*.html'],
            tasks: ['ngtemplates']
        }
    }

  });

  grunt.loadNpmTasks('grunt-angular-templates');
  grunt.loadNpmTasks('grunt-contrib-watch');

};

Answer 7

আমি একই সমস্যাটিকে নির্বাচিত সমাধানের চেয়ে কিছুটা ভিন্ন উপায়ে সমাধান করেছি।

1. প্রথমে, আমি কর্মের জন্য এনজি-এইচটিএমএল 2 জস প্লাগইন ইনস্টল ও কনফিগার করেছি । Karma.conf.js ফাইলটিতে:

   preprocessors: {
     'path/to/templates/**/*.html': 'ng-html2js'
   },
   ngHtml2JsPreprocessor: {
   // you might need to strip the main directory prefix in the URL request
     stripPrefix: 'path/'
   }

2. তারপরে আমি পূর্ববর্তী প্রতিটিটিতে তৈরি মডিউলটি লোড করেছি। আপনার স্পেস.জেএস ফাইলটিতে:

   beforeEach(module('myApp', 'to/templates/myTemplate.html'));

3. তারপরে আমি এটিকে ভেরিয়েবলের মধ্যে সঞ্চয় করতে $ টেমপ্লেটক্যাচ.জেট ব্যবহার করেছি। আপনার স্পেস.জেএস ফাইলটিতে:

   var element,
       $scope,
       template;
   
   beforeEach(inject(function($rootScope, $compile, $templateCache) {
     $scope = $rootScope.$new();
     element = $compile('<div my-directive></div>')($scope);
     template = $templateCache.get('to/templates/myTemplate.html');
     $scope.$digest();
   }));

4. অবশেষে, আমি এটি এইভাবে পরীক্ষা করেছি। আপনার স্পেস.জেএস ফাইলটিতে:

   describe('element', function() {
     it('should contain the template', function() {
       expect(element.html()).toMatch(template);
     });
   });

Answer 8

টেমপ্লেট এইচটিএমএলকে গতিশীলভাবে $ টেমপ্লেট ক্যাশে লোড করতে আপনি এখানে html2js কর্ম পূর্ব প্রসেসর ব্যবহার করতে পারেন, এখানে বর্ণিত

এটি conf.js ফাইলটিতে আপনার ফাইলগুলিতে 'html' টেমপ্লেট যুক্ত করার সাথে সাথে প্রিপ্রসেসরেস = {'এ ফোটে .html': 'html2js' s;

আর ব্যবহার করুন

beforeEach(module('..'));

beforeEach(module('...html', '...html'));

আপনার জেএস পরীক্ষার ফাইলের মধ্যে

Comments

আমি পাচ্ছিUncaught SyntaxError: Unexpected token <

— মেলবোর্ন

Answer 9

যদি আপনি কর্মফল ব্যবহার করছেন তবে আপনার বাহ্যিক এইচটিএমএল টেমপ্লেটগুলি প্রাক-সংকলন করতে এবং কৌণিক পরীক্ষা পরীক্ষার সময় এইচটিটিপি পেতে চেষ্টা করবেন তা এড়াতে কর্ম-এনজি-এইচটিএমএল 2 জেস-প্রিপ্রসেসর ব্যবহার বিবেচনা করুন। আমি আমাদের বেশ কয়েকজনের জন্য এটির সাথে লড়াই করেছি - আমার ক্ষেত্রে টেমপ্লেট ইউআরএল এর আংশিক পথগুলি সাধারণ অ্যাপ্লিকেশন প্রয়োগের সময় সমাধান হয়েছিল তবে পরীক্ষার সময় নয় - অ্যাপ্লিকেশন বনাম টেস্ট দির কাঠামোর পার্থক্যের কারণে।

Answer 10

আপনি যদি জেসমিন- মাভেন -প্লাগইনটি প্রয়োজনীয় জেএস -এর সাথে একসাথে ব্যবহার করছেন তবে আপনি টেমপ্লেট সামগ্রীটি একটি ভেরিয়েবলের মধ্যে লোড করতে টেক্সট প্লাগইনটি ব্যবহার করতে পারেন এবং এটি টেম্পলেট ক্যাশে রেখে দিতে পারেন put

define(['angular', 'text!path/to/template.html', 'angular-route', 'angular-mocks'], function(ng, directiveTemplate) {
    "use strict";

    describe('Directive TestSuite', function () {

        beforeEach(inject(function( $templateCache) {
            $templateCache.put("path/to/template.html", directiveTemplate);
        }));

    });
});

Comments

আপনি কি কর্ম ছাড়া এই কাজ করতে পারেন?

— উইনেমুকা

Answer 11

আপনি যদি পরীক্ষাগুলিতে প্রয়োজনীয় জেএস ব্যবহার করেন তবে আপনি এইচটিএমএল টেমপ্লেটটি টানতে এবং এটি $ টেমপ্লেট ক্যাশে রাখতে 'পাঠ্য' প্লাগইনটি ব্যবহার করতে পারেন।

require(["text!template.html", "module-file"], function (templateHtml){
  describe("Thing", function () {

    var element, scope;

    beforeEach(module('module'));

    beforeEach(inject(function($templateCache, $rootScope, $compile){

      // VOILA!
      $templateCache.put('/path/to/the/template.html', templateHtml);  

      element = angular.element('<my-thing></my-thing>');
      scope = $rootScope;
      $compile(element)(scope);   

      scope.$digest();
    }));
  });
});

Answer 12

আমি টেমপ্লেট ক্যাশে সমস্ত টেমপ্লেট সংকলন করে এই সমস্যাটি সমাধান করি। আমি গুল্প ব্যবহার করছি, আপনিও গ্রান্টের জন্য একই রকম সমাধান পেতে পারেন। আমার টেমপ্লেটগুলিতে নির্দেশাবলী, মডেলগুলি দেখে মনে হচ্ছে

`templateUrl: '/templates/directives/sidebar/tree.html'`

1. আমার প্যাকেজ.জসনে একটি নতুন এনপিএম প্যাকেজ যুক্ত করুন

   "gulp-angular-templatecache": "1.*"

2. গুল্প ফাইলে টেম্পলেটচিহ্ন এবং একটি নতুন টাস্ক যুক্ত করুন:

   var templateCache = require('gulp-angular-templatecache'); ... ... gulp.task('compileTemplates', function () { gulp.src([ './app/templates/**/*.html' ]).pipe(templateCache('templates.js', { transformUrl: function (url) { return '/templates/' + url; } })) .pipe(gulp.dest('wwwroot/assets/js')); });

3. ইনডেক্স.ইচটিএমএলে সমস্ত জেএস ফাইল যুক্ত করুন

   <script src="/assets/js/lib.js"></script> <script src="/assets/js/app.js"></script> <script src="/assets/js/templates.js"></script>

4. উপভোগ করুন!