I am trying to run some tests for some basic angular code that I have written. You can refer to this post for controller code details - https://wordpress.com/read/post/feed/37884742/822834869

But baseline is I am getting values directly in Angular JS controller from Salesforce apex server. So something like this -

$scope.contacts = {!contactListJSON};

How can I populate contactListJSON directly before my test suite runs in Jasmine js..




A key mechanism Angular uses to make it testable is dependency injection. This allows you to replace parts of your JavaScript code with mock code. So for your example, an appropriate approach would be to move the server requests into a service and replace that service with a mock version for your tests.

However, for your example you are relying on the JavaScript being processed through Visualforce so the {! } expressions are processed when the page is generated. I am not even sure how you are going to get the JavaScript loaded in Jasmine as Jasmine normally works with 100% JavaScript files not files containing other markup.

As a last resort you can use this sort of approach to handle both the Visualforce case and the non-Visualforce (testing) case but not separating the concerns makes for poorer quality code:

var isVisualforce = '{!""}' == '';
var testContactListJSON = [...];
$scope.contacts = isVisualforce
        ? JSON.parse('{!contactListJSON}')
        : testContactListJSON;

While everything in a single Visualforce page is a good place to start, if you want to create an Angular app of any size and also to ensure it is testable, breaking the app up into separate components makes sense. A good Salesforce example to start with is metadaddy-sfdc/IssuesInGitHub. You'll have to Google to find how to use Visualforce.remoting.Manager from a separate service JavaScript file.

| improve this answer | |
  • I dont know what you do but your answers are always straight and to the point. Thanks.!! Now, definitely in my current phase, I am more as a learner of angular with SF and testing frameworks (also a noob). Big fan of Seperations of Concerns so definitely will be moving codes once I have understood more around angular and Jasmine etc. There were 2 options that I was thinking - 1. you mentioned making JS code understand that it is test environment or actual execution 2. Move the values to scope variables or global values (which seems pretty bad way of doing.) I will try some stuff here..THanks – Kaushik Ray Oct 4 '15 at 10:33
  • @KaushikRay I think your approach to learning about this is spot on. You are starting with the simplest solution and discovering why things need making a bit more complicated. Better than starting with pile of patterns and 3rd party code that you don't know the reasons for. – Keith C Oct 4 '15 at 10:37
  • @KaushikRay As an end goal, data is usually best served through Angular service methods that can then be mocked in tests. That means no longer relying on Visualforce {! }. – Keith C Oct 4 '15 at 10:40
  • Thanks for the details. I was trying out option where I can have a Boolean as you suggested. But in a jasmine framework specs, any idea how I can populate values to a variable like isVisualforce which is not a part of $scope etc.? Kind of moving back to original question – Kaushik Ray Oct 4 '15 at 13:20
  • I think it does not matter as even If I am able to populate the variable jasmine does not allow other mark up anywhere in code even when it is not being called in actual JS. Need to think something else – Kaushik Ray Oct 4 '15 at 13:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.