Using $httpBackend mock on jsfiddle

6,104 views
Skip to first unread message

Vojta Jina

unread,
Feb 19, 2012, 8:39:07 PM2/19/12
to ang...@googlegroups.com
Hey folks,

jsfiddle is awesome, it really saves us a lot of time. The only problem is, that it's not that easy to write an example with xhr requests...
Angular has a mock version of $httpBackend, which allows you to specify your fake backend - that's useful for testing, but we can use it with jsfiddle as well.

Here is a simple example how to do it http://jsfiddle.net/vojtajina/DQHdk/

V.

Alex Strickland

unread,
Feb 20, 2012, 2:41:22 AM2/20/12
to ang...@googlegroups.com
On 2012/02/20 03:39 AM, Vojta Jina wrote:

> jsfiddle is awesome, it really saves us a lot of time. The only problem
> is, that it's not that easy to write an example with xhr requests...
> Angular has a mock version of $httpBackend, which allows you to specify
> your fake backend - that's useful for testing, but we can use it with
> jsfiddle as well.

There is also this:

http://doc.jsfiddle.net/use/echo.html

By the way, I can't see the source code (HTML or JavaScript) in jsFiddle
since a few weeks ago (with Chrome or IE). Anyone have an idea why?

Regards
Alex

Mykhailo Kotsur

unread,
Apr 3, 2012, 5:22:54 PM4/3/12
to ang...@googlegroups.com
Hi!

Scanning through http://docs-next.angularjs.org/api/angular.module.ngMockE2E.$httpBackend and old threads 3rd time and some questions are still not clear:

1. How can I configure $httpBackend from spec file? Or does it require changes in application code?
2. If It does, is there some example or 'best practice' of doing so?
3. If not, then I'm confused even more because myAppDev module seems to be never initialized if configured from jasmine spec.

Also I feel real lack of documentation/examples on this topic which I'd be happy to help to cover, but need to understand this magic first :-)

Mike

Igor Minar

unread,
Apr 4, 2012, 11:32:05 AM4/4/12
to ang...@googlegroups.com
You can check out the peepcode-tunes app which can be easily modified to work with the mock:


just edit the index.html to load tunesAppFake instead of tunesApp module and uncomment the module in the Tunes.js

/i

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/l9EBS35maA0J.

To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/angular?hl=en.

Mykhailo Kotsur

unread,
Apr 9, 2012, 8:50:21 AM4/9/12
to ang...@googlegroups.com
Yep, that worked.

Now I have:

angular.module('MainModuleDev', ['MainModule', 'ngMockE2E']).run(function($httpBackend, $resource) {
    $httpBackend.whenGET(/^\/js\/spec\/mocks.*\//).passThrough();
        $resource("/js/spec/mocks/model1.json").get()
    );
        $resource("/js/spec/mocks/model2.json").query()
    );
    $httpBackend.whenGET(/.*/).passThrough();
});

and MainModuleDev as ng-app in HTML. It allows to use external *.json files as mocks.

I think it's kind of ok for development to have fer URLs mocked and rest of them passed through, but what is suggested way to deploy application? Manual (scripted) substitution ng-app="MainModuleDev" -> ng-app="MainModule" ?



On Wednesday, 4 April 2012 17:32:05 UTC+2, Igor Minar wrote:
You can check out the peepcode-tunes app which can be easily modified to work with the mock:


just edit the index.html to load tunesAppFake instead of tunesApp module and uncomment the module in the Tunes.js

/i

On Tue, Apr 3, 2012 at 2:22 PM, Mykhailo Kotsur wrote:
Hi!

Scanning through http://docs-next.angularjs.org/api/angular.module.ngMockE2E.$httpBackend and old threads 3rd time and some questions are still not clear:

1. How can I configure $httpBackend from spec file? Or does it require changes in application code?
2. If It does, is there some example or 'best practice' of doing so?
3. If not, then I'm confused even more because myAppDev module seems to be never initialized if configured from jasmine spec.

Also I feel real lack of documentation/examples on this topic which I'd be happy to help to cover, but need to understand this magic first :-)

Mike


On Monday, 20 February 2012 02:39:07 UTC+1, Vojta Jína wrote:
Hey folks,

jsfiddle is awesome, it really saves us a lot of time. The only problem is, that it's not that easy to write an example with xhr requests...
Angular has a mock version of $httpBackend, which allows you to specify your fake backend - that's useful for testing, but we can use it with jsfiddle as well.

Here is a simple example how to do it http://jsfiddle.net/vojtajina/DQHdk/

V.

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/l9EBS35maA0J.

To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+unsubscribe@googlegroups.com.

Igor Minar

unread,
Apr 9, 2012, 1:43:53 PM4/9/12
to ang...@googlegroups.com
On Mon, Apr 9, 2012 at 5:50 AM, Mykhailo Kotsur <mic...@gmail.com> wrote:
Yep, that worked.

Now I have:

angular.module('MainModuleDev', ['MainModule', 'ngMockE2E']).run(function($httpBackend, $resource) {
    $httpBackend.whenGET(/^\/js\/spec\/mocks.*\//).passThrough();
        $resource("/js/spec/mocks/model1.json").get()
    );
        $resource("/js/spec/mocks/model2.json").query()
    );
    $httpBackend.whenGET(/.*/).passThrough();
});

and MainModuleDev as ng-app in HTML. It allows to use external *.json files as mocks.

I think it's kind of ok for development to have fer URLs mocked and rest of them passed through, but what is suggested way to deploy application? Manual (scripted) substitution ng-app="MainModuleDev" -> ng-app="MainModule" ?

I personally haven't used this on a big project yet, so for now I just manually switch the modules. Preprocessing or dynamically generating the html would be the right choice for a bigger app.

/i

Mykhailo Kotsur

unread,
Apr 9, 2012, 2:21:55 PM4/9/12
to ang...@googlegroups.com
Of course, you are right. 
Now I'm toying with an application which is a pure frontend, so totally forgotten that normally there is a 'big brother' on backend to take care of that :-)



On Monday, 9 April 2012 19:43:53 UTC+2, Igor Minar wrote:

justin...@gmail.com

unread,
Dec 14, 2012, 10:48:00 PM12/14/12
to ang...@googlegroups.com
I'm sorry for reviving an old thread but I couldn't find a better potential solution to my current problem.

@Mykhailo did you actually get the following snippet to work?

       $httpBackend.whenGET('https://api.site.com/e2e/test/model1').respond(
        $resource("/js/spec/mocks/model1.json").get()
    );

Im currently getting this error: 
   Uncaught Error: Unexpected request: GET /mockData.json
No more request expected 

...which I think should be expected.
/i

To unsubscribe from this group, send email to angular+u...@googlegroups.com.
Reply all
Reply to author
Forward
0 new messages