In this case, element and scope get compiled together to render our sound-button directive.

we’re using the module() and inject() helpers that comes with Angular mocks. Additionally, we’re defining the Audio object to create our mocks – primarily because Jasmine doesn’t know what the Audio tag is.

Note that our constructor for window.Audio binds SRC onto the audio mock. This is less than ideal – we can only have one active mock at a time, unless we set up an array which we aren’t going to do.

Then we get to our actual test:

it("should play and pause on click",function(){spyOn(audioMock,'play');spyOn(audioMock,'pause');angular.forEach(element.find('sound-button'),function(e){expect(audioMock.src).toBe(e.getAttribute('sound'));varngElement=angular.element(e);ngElement.triggerHandler('click');expect(audioMock.play).toHaveBeenCalled();ngElement.triggerHandler('click');expect(audioMock.pause).toHaveBeenCalled();expect(audioMock.currentTime).toBe(0);});});

This sets up our spies on the mock audio object, and then iterates over each sound-button element. During each iteration, we check to make sure that clicking the element triggers play and pause events respecitvely, and that the second event is actually a stop command (i.e. sets time to 0).

Passing the test

We actually kinda want to write a directive, right? That was the whole idea.