-
Notifications
You must be signed in to change notification settings - Fork 76
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Sidenav, unit test : Cannot read property 'classList' of undefined #169
Comments
Hi @chych, can you provide a sample of your html, component and test code? I'm wondering if the error is related to your test code or to our library ... |
Actually my component is empty, no code except constructor..., My home component contains :
My header template:
My component containing(app-home-sidenav) :
My component html(app-home-sidenav) :
My component test(app-home-sidenav)
|
The solution i found it's to not separate my colapse button and the sidenav :
|
@chych the reason why your test fails is because it cannot find the provided 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 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. |
I'm agree with you it's the solution that i adopted |
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)
The text was updated successfully, but these errors were encountered: