Jasmine test for multiple click events inside multi-select dropdown

I am writing some jasmine/karma tests for a angular component I have created. I'm just trying to understand the best way to write this test..I am compiling the directive here with no problems:

beforeEach(function (){
      DropdownDirective = testAPI.compileDirective("<ers-dropdown-select filter-mode=\"off\" dropdown-select-type=\"grid\" grid-column-headers=\"['Name', 'City', 'State', 'Zip']\" items=\"[{name: 'Jim', city: 'Minneapolis', state: 'MN', zip: 44332}]\" placeholder=\"Select Customer\" multi-select=\"true\"></ers-dropdown-select>");
    }); 

As you can see, I am setting the multi-select attribute to true, allowing the user to select multiple elements. If this is not included the user can select one item and then the dropdown closes on the angular click event.

Here is the code I get to pass in my test:

it("dropdown multi-select should remain open when clicked", function () {
         spyOnEvent("button", "click"); 
         spyOnEvent("li", "click");
         var element = DropdownDirective.find('li');

         $("button").click();
         expect("click").toHaveBeenTriggeredOn("button"); //this passes

         //once the click event takes place, the selectContainer gets the open class added to it, this class is toggled on and off as the button is clicked
         var selectContainer = DropdownDirective.find(".open");
         console.log(selectContainer); // this is shown below
         expect(selectContainer).not.toBeFalsy();

         //I'm testing to make sure the dropdown stays open even after an li has been clicked. This passes.
         $("li").click();
         expect("click").toHaveBeenTriggeredOn("li"); //this passes
         expect(selectContainer).not.toBeFalsy();

         //removes the open class from the div
         $("button").click();
         expect("click").toHaveBeenTriggeredOn("button");
         expect(selectContainer).not.toExist(); 
        console.log(selectContainer);  //shown below
    });

Here is what is shown in the console for the selectContainer when I am finding the "open" class. The open class appears inside this element once I click on the button to open the dropdown, and disappears once I close the button to close the dropdown. There is a lot more code inside this wrapper div but this should be sufficient to show.

  <div class="dropdown select-container ng-isolate-scope open" ng-class="{'open' : ctrl.open}"></div>

Once I click the button again to close the dropdown as shown above, I get this in the console for the selectContainer, as you can see the open class has been removed as it should:

<div class="dropdown select-container ng-isolate-scope" ng-class="{'open' : ctrl.open}"

I feel like there is a better way to test this so I just wanted to see. I'm wondering why something like these two tests don't pass in replace of ".not.toBeFalsy()":

  expect(selectContainer).toHaveClass("open");

or

  expect(selectContainer).toExist();

I get this error when I try to use "toHaveClass()":

   Expected { length : 0, prevObject : { 0 : HTMLNode, length : 1 }, context : undefined, selector : '.open' } to have class 'open'.
    Error: Expected { length : 0, prevObject : { 0 : HTMLNode, length : 1 }, context : undefined, selector : '.open' } to have class 'open'.

I get this error when I try to use "toExist()":

 Expected { length : 0, prevObject : { 0 : HTMLNode, length : 1 }, context : undefined, selector : '.open' } to exist.
    Error: Expected { length : 0, prevObject : { 0 : HTMLNode, length : 1 }, context : undefined, selector : '.open' } to exist.

Thanks for the time.