Sidenav, unit test : Cannot read property 'classList' of undefined

Hello,

my project is under angular4 and i used angular-cli to run the test (ng test)

I used the mz-sidenav component on my code without change anything for the moment (https://sherweb.github.io/ng2-materialize/sidenav) and when i tried to run unit test i had this error :

TypeError: Cannot read property 'classList' of undefined at EmulatedEncapsulationDomRenderer2.webpackJsonp../node_modules/@angular/platform-browser/@angular/platform-browser.es5.js.DefaultDomRenderer2.addClass (http://localhost:9876/_karma_webpack_/vendor.bundle.js:57837:70) at DebugRenderer2.webpackJsonp../node_modules/@angular/core/@angular/core.es5.js.DebugRenderer2.addClass (http://localhost:9876/_karma_webpack_/vendor.bundle.js:44310:23) at RendererAdapter.webpackJsonp../node_modules/@angular/core/@angular/core.es5.js.RendererAdapter.setElementClass (http://localhost:9876/_karma_webpack_/vendor.bundle.js:41533:27) at MzSidenavComponent.webpackJsonp../node_modules/ng2-materialize/dist/sidenav/sidenav.component.js.MzSidenavComponent.initCollapseButton (http://localhost:9876/_karma_webpack_/vendor.bundle.js:69355:27) at MzSidenavComponent.webpackJsonp../node_modules/ng2-materialize/dist/sidenav/sidenav.component.js.MzSidenavComponent.ngAfterViewInit (http://localhost:9876/_karma_webpack_/vendor.bundle.js:69340:14) at callProviderLifecycles (http://localhost:9876/_karma_webpack_/vendor.bundle.js:42156:18) at callElementProvidersLifecycles (http://localhost:9876/_karma_webpack_/vendor.bundle.js:42131:13) at callLifecycleHooksChildrenFirst (http://localhost:9876/_karma_webpack_/vendor.bundle.js:42115:17) at checkAndUpdateView (http://localhost:9876/_karma_webpack_/vendor.bundle.js:43133:5) at callViewAction (http://localhost:9876/_karma_webpack_/vendor.bundle.js:43440:17) at execComponentViewsAction (http://localhost:9876/_karma_webpack_/vendor.bundle.js:43386:13) at checkAndUpdateView (http://localhost:9876/_karma_webpack_/vendor.bundle.js:43131:5) at callWithDebugContext (http://localhost:9876/_karma_webpack_/vendor.bundle.js:44113:42) at Object.debugCheckAndUpdateView [as checkAndUpdateView] (http://localhost:9876/_karma_webpack_/vendor.bundle.js:43653:12) at ViewRef_.webpackJsonp../node_modules/@angular/core/@angular/core.es5.js.ViewRef_.detectChanges (http://localhost:9876/_karma_webpack_/vendor.bundle.js:41223:63)

[chych]

I’m agree with you it’s the solution that i adopted

[jfcere]

@chych the reason why your test fails is because it cannot find the provided collapseButtonId as it does not exist in the context of your test which only include the app-home-sidenav component.

If you absolutely want to keep them seperated you will need to create a fake collapse button element with the exact same button id in your app-home-sidenav test file.

function createCollapseButton(id: string): void {
  const collapseButton = document.createElement('a');
  collapseButton.setAttribute('id', id);
  document.body.appendChild(collapseButton);
}

beforeEach(() => {
  fixture = TestBed.createComponent(HomeSidenavComponent);
  component = fixture.componentInstance;
  // create fake collapse button in DOM before triggering 
  // change detection that initialize the component
  createCollapseButton('btnSidenav');
  fixture.detectChanges();
});

Although this would work I don’t suggest you to seperate the collapse button and the sidenav because your test won’t assure you that the button is really there at runtime or is really having the right id.