Firebase Test

[ghost]

Hello,

How can I be able to test my controller that is using firebase....

                var ref = new window_browser.MockFirebase(FIRE_URL).child(uri);

                ref.push(test_data);

                ref.flush();
                createCalendarController();
                expect(scope.eventSources).toEqual(1);

That is what i have. My controller uses firebase. I have injected the override on a BeforeEach block

[bendrucker]

If you post more code I might be able to help.

[ghost]

Thank you for the quick reply

I am trying to replicate the way Angular Mocks uses httpBackend. My controller fetches data from firebase using $firebaseArray

My intention is to use Mockfirebase to create some data which when my controller tries to fetch should have the same data created using Mock Firebase.... In short the way you'd test using httpBackend

beforeEach(function (){
                window.MockFirebase.override();
                module("emr.scheduling.controllers");
                module("emr.scheduling.services");
                module("emrApp.config");
                module("emr.common.services");

                inject(["$rootScope", "$controller", "$httpBackend",
                    "emr.scheduling.services.fullcalendar","$window",
                    "emr.common.services.firebaseService",
                    function ($rootScope, $controller, $httpBackend,
                        fulCal, $window, firebaseService) {

                    scope = $rootScope.$new();
                    httpBackend = $httpBackend;
                    fullCalendarService = fulCal;
                    window_browser = $window;
                    firebase = firebaseService;
                    createCalendarController = function(){
                        $controller("emr.scheduling.controllers.fullcalendar",
                        {$scope: scope, fulCal:fullCalendarService});
                    };
                }]);

                test_data = [
                    {
                        "title": "Another event2 - Ian",
                        "start": "2015-08-01T04:30:52.045626Z",
                        "end": "2015-08-01T04:45:52.045626Z",
                        "allDay":false,
                        "owner": "Ian"
                    },
                    {
                        "title": "Another event - Short - Brian",
                        "start": "2015-07-02T04:51:52.045626Z",
                        "end": "2015-07-02T04:51:52.045626Z",
                        "allDay":false,
                        "owner": "Brian"
                    }

                ];

            });

            it("should retrieve data from firebase",
                inject(["FIRE_URL", "SCHEDULING_FIREBASE_URL",function (FIRE_URL,uri){

                    //FIRE_URL = my_url.firebaseio.com
                    // uri = /scheduling
                    var ref = window_browser.MockFirebase(FIRE_URL + uri);

                    ref.push(test_data);
                    createCalendarController();
                    ref.flush();
                    expect(scope.eventSources).toEqual(1);
                }])
            );

[bendrucker]

You're welcome to try to replicate $httpBackend using MockFirebase, but MockFirebase has no connection to Angular. I doubt you'll be successful though because the semantics of HTTP calls and WebSockets are very different. You can't use a declarative API as easily for two way communication.

[ghost]

Sorry about opening an issue it felt like the only place i could get some help.

What way would you advice if I was to conduct unit tests on Firebase code used on my controller... For arguments sake lets say I have the following line in my controller....

$scope.data = $firebaseArray(new Firebase(someURL));

what the test should do is to basically check if $scope.data is populated with some data. Would mockfirebase be a good candidate for it?

[bendrucker]

Yes, MockFirebase will help. I'd advise reading the AngularFire unit tests if you want an Angular focused example.

[ghost]

Hey.. I went through the tests but they don't seem to have a solution for me.... Maybe you can take a look at the following code and tell me where I am going wrong... In my test I am am trying to see if $scope.eventSources has the test data I have declared in the test

angular.module("scheduling.controllers"])

.controller("scheduling.controllers.fullcalendar",
    ["$scope", function($scope){
        var events;
        $scope.eventSources = [];
        $scope.events = [];

       $firebaseArray(new Firebase('http://myapp.firebaseio.com/scheduling')).$loaded(function (data){
            events = data;
            $scope.eventSources.push(events);
        });
}]);

Thats the controller I am testing

describe("Unit tests for the Calendar controller", function(){
        beforeEach(function (){
            window.MockFirebase.override();
        });

        describe("Tests for the fullcalendar controller", function (){
            var scope,  test_data;
            var createCalendarController;

            beforeEach(function (){
                module("emr.scheduling.controllers");

                inject(["$rootScope", "$controller",
                    function ($rootScope, $controller) {

                    scope = $rootScope.$new();

                    createCalendarController = function(){
                        $controller("scheduling.controllers.fullcalendar",
                        {$scope: scope});
                    };
                }]);

                test_data = [
                    {
                        "title": "Another event2 - Ian",
                        "start": "2015-08-01T04:30:52.045626Z",
                        "end": "2015-08-01T04:45:52.045626Z",
                        "allDay":false,
                        "owner": "Ian"
                    }
                ];

            });

            it("should retrieve data from firebase",
                inject(["FIRE_URL", "SCHEDULING_FIREBASE_URL","$timeout",
                    function (FIRE_URL,uri, $timeout){

                    var ref = new window.MockFirebase('http://myapp.firebaseio.com/scheduling'); 
                    //creating data that my controller will fetch below

                    ref.push(test_data);
                    ref.flush();
                    createCalendarController();

                    //$timeout.flush();
                    expect(scope.eventSources).toEqual(1);
                    console.log(scope.eventSources);
                }])
            );
        });
    });

})();

[bendrucker]

Sorry, can't fix your code for you. If you can provide a more targeted question I might be able to help.

[ghost]

Cool... Well the tests works fine when I use new Firebase(url) but once I bring in $firebaseArray(new Firebase(url)) for Angular it no longer works. Whats the support for $firebaseArray on MockFirebase?

[bendrucker]

Whats the support for $firebaseArray on MockFirebase?

None. MockFirebase has no knowledge of Angular, nor does it need any. You may need to trigger a digest cycle.

[ghost]

Yooo!!! Thanks Bro!!! That worked. Owe you some beers... Is it okay if I do a README for it and create a PR. I see very many people with the same issue.

[bendrucker]

Glad to help. I'd be happy to consider an addition to the tutorials/ folder that's Angular/AngularFire specific.

[ghost]

Hey... mockfirebase doesn't have support for the orderBy* queries currently?

[bendrucker]

Nope

[ghost]

Any workarounds or I just need to do my own mock for that...

[Jerome2606]

@ikosen can you share any code about your unit test, I'm looking to reproduce a similar test see https://github.com/casetext/fingular/issues/2