Ember acceptance test not seeing updated DOM

I'm still getting into the depths of Ember's acceptance testing. One issue I seem to keep having is the DOM not getting updated after an event. For example, my page has a side menu. A simple toggle changes a property in it's component which then toggles a "hide" class on the menu itself:

Component

import Ember from 'ember';

export default Ember.Component.extend({
  menuHidden: true,
  actions: {
    toggleMenu(){
      this.set('menuHidden', !this.get('menuHidden'));
    },
  }
});

Template

<a id="menu-toggle" class="" >
  <span></span><span></span><span></span>
</a>
<div id="menu" class="">
  Dashboard
  
    
  
  <a href="javascript:void(0)" >Logout</a>
</div>

Acceptance Test

import { test } from 'ember-qunit';
import moduleForAcceptance from '../helpers/module-for-acceptance';

moduleForAcceptance('Acceptance | side menu');

test('side menu opens and closes', assert=>{

  logIn('my@email.com', 'password');

  andThen(()=>{
    assert.equal(find('#menu').attr('class'), 'hide', 'Hidden by default');

    click('#menu-toggle');

    andThen(()=>{
      assert.equal(find('#menu').attr('class'), '', 'Now visible');
    });
  });

});

Now this is running fine in the browser. The test is logging in fine with my custom helper (the menu is only visible when logged in) and if I drop a console.log into toggleMenu() it is being triggered by the test. But it fails the last assert. I've done a console.log on the menu's wrapper's HTML before the last assert, it's still seeing the #menu element with class=hide

Is there something obvious I'm doing wrong? I can't find many examples of people with multiple andThen calls in acceptance tests, so I've tried having it nested - as above - and pulling the second andThen out inline with the first one. No difference.