Unit Testing Service Element Class Change

I have a service that adds/removes classes to a couple of HTML elements.

I am trying to test these changes depending on which method is called.

define(['require', 'angular'], function (require, angular) {
    'use strict';

    var myFactory = function () {

        var header = angular.element("#app-header");
        var footer = angular.element(document.getElementsByClassName("app-footer"));
        var change = false;

        return {
            red: function() {
                header.addClass("alert-warning");
                footer.removeClass("notify");
                change = true;
            },
            black: function() {
                if (change) {
                    this.red();
                }
            }
        };
    };

    return myFactory;
});

I ahve tried:

describe('<-- MyFactory Spec ------>', function () {

    var myFactory, $compile, scope;

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

    beforeEach(inject(function(_myFactory_, _$compile_, _$rootScope_){
        myFactory = _myFactory_;
        $compile = _$compile_;
        scope = _$rootScope_.$new();
    }));

    it('should open the menu', function(){
        var header = angular.element("#app-header");
        header = $compile(header)(scope);
        scope.$digest();
        myFactory.red();
        scope.$apply();
        expect(header).toHaveClass('alert-warning');
        expect(change).toBeTruthy();
    });
});

With the above, i get error:

TypeError: 'undefined' is not a function (evaluating 'expect(header).toHaveClass('alert-warning')')