Testing angular components without using module mock

my.component.js

let Component = {
    template: `
    <div>
        <h1>{{$ctrl.title}}</h1>
        <form ng-if="!$ctrl.successs">
            form data...
        </form>
        
        <div 
            id="success-block" 
            ng-if="$ctrl.successs">
            {{$ctrl.success}}
        </div>
    </div>
    `
}

class Controller {

    constructor() {}

    $onInit() {
        this.title = 'My Component';
        this.success = '';
    }

    onSuccess() {
        this.successs = 'Success!!';
    }

}

Controller.$inject = [];

Component.controller = Controller;

export default Component;

my.test.js

import MyComponent from './my.component';

describe('Component: forgot-password', function () {
    let element, $rootScope, scope, $compile, component;

    beforeEach(inject(($injector) => {
        $rootScope = $injector.get('$rootScope');
        $compile = $injector.get('$compile');

        // init our controller
        component = new MyComponent.controller();
        component.$onInit();

        // init scope and attach our controller
        scope = $rootScope.$new();
        scope.$ctrl = component;

        // compile the template
        element = $compile(MyComponent.template)(scope);
        scope.$apply();
    }));


    it('should show the form and have the success block hidden', function () {
        expect(find('#success-block').length).toEqual(0);
        expect(find('form').length).toEqual(1);
    });

    it('should show the success block and remove the form', function () {
        component.onSuccess();
        scope.$apply();

        expect(find('#success-block').length).toEqual(1);
        expect(find('form').length).toEqual(0);
    });

    /**
     * Helper to find elements in the template
     */
    function find(selector) {
        return angular.element(element[0].querySelector(selector));
    }

});