dockleryxk / ng-simple-slideshow

A simple, responsive slideshow for Angular 4+.
https://ng-simple-slideshow.firebaseapp.com/
MIT License
123 stars 77 forks source link

Uncaught TypeError when testing component depending on SlideshowModule #70

Open bkimminich opened 5 years ago

bkimminich commented 5 years ago

I am having a test spec for a component that has a <slideshow> on it. I naively tried to do just import SlideshowModule in my spec, but it runs into

Uncaught TypeError: Cannot read property 'loaded' of undefined thrown

The test looks like this:

import { async, ComponentFixture, TestBed } from '@angular/core/testing'
import { SlideshowModule } from 'ng-simple-slideshow'
import { HttpClientTestingModule } from '@angular/common/http/testing'

import { AboutComponent } from './about.component'

describe('AboutComponent', () => {
  let component: AboutComponent
  let fixture: ComponentFixture<AboutComponent>

  beforeEach(async(() => {

    TestBed.configureTestingModule({
      imports: [
        HttpClientTestingModule,
        SlideshowModule
      ],
      declarations: [ AboutComponent ]
    })
    .compileComponents()
  }))

  beforeEach(() => {
    fixture = TestBed.createComponent(AboutComponent)
    component = fixture.componentInstance
    fixture.detectChanges()
  })

  it('should create', () => {
    expect(component).toBeTruthy()
  })
})

I tried to mock the SlideshowComponent, but I couldn't import that component and Angular complained with

The missing file seems to be part of a third party library. TS files in published libraries are often a sign of a badly packaged library. Please open an issue in the library repository to alert its author and ask them to package the library using the Angular Package Format (https://goo.gl/jB3GVv).

Can you provide me with any example where your module is either successfully imported or mocked in a test? Thank you!

dockleryxk commented 5 years ago

Currently, the package format used is Angular Package Format v4.

Per the changelog, I have plans to update the format to current standards.

As far as tests or mocks, this has not been done to my knowledge.

Finally, regarding the error Cannot read property 'loaded' of undefined thrown, I have a fix I am working on for this.

bkimminich commented 4 years ago

Hi @dockleryxk! Will this fix your working on be part of the next release?

bkimminich commented 4 years ago

This error has slightly changed to complain about nativeElement instead of loaded for me:

TypeError: Cannot read property 'nativeElement' of undefined
            at SlideshowComponent.setStyles (http://localhost:9876/_karma_webpack_/vendor.js:161073:55)
            at SlideshowComponent.ngDoCheck (http://localhost:9876/_karma_webpack_/vendor.js:160728:14)
            at callHook (http://localhost:9876/_karma_webpack_/vendor.js:61178:14)
            at callHooks (http://localhost:9876/_karma_webpack_/vendor.js:61144:17)
            at executeInitAndCheckHooks (http://localhost:9876/_karma_webpack_/vendor.js:61096:9)
            at selectIndexInternal (http://localhost:9876/_karma_webpack_/vendor.js:64315:17)
            at ɵɵadvance (http://localhost:9876/_karma_webpack_/vendor.js:64288:5)
            at AboutComponent_Template (ng:///AboutComponent.js:158:9)
            at executeTemplate (http://localhost:9876/_karma_webpack_/vendor.js:65438:9)
            at refreshView (http://localhost:9876/_karma_webpack_/vendor.js:65307:13)
Chrome Headless 85.0.4183.83 (Windows 10): Executed 1 of 504 (1 FAILED) (0 secs / 0.105 secs)
Chrome Headless 85.0.4183.83 (Windows 10) AboutComponent should create FAILED
        TypeError: Cannot read property 'nativeElement' of undefined
            at SlideshowComponent.setStyles (http://localhost:9876/_karma_webpack_/vendor.js:161073:55)
            at SlideshowComponent.ngDoCheck (http://localhost:9876/_karma_webpack_/vendor.js:160728:14)
            at callHook (http://localhost:9876/_karma_webpack_/vendor.js:61178:14)
            at callHooks (http://localhost:9876/_karma_webpack_/vendor.js:61144:17)
            at executeInitAndCheckHooks (http://localhost:9876/_karma_webpack_/vendor.js:61096:9)
            at selectIndexInternal (http://localhost:9876/_karma_webpack_/vendor.js:64315:17)
            at ɵɵadvance (http://localhost:9876/_karma_webpack_/vendor.js:64288:5)
            at AboutComponent_Template (ng:///AboutComponent.js:158:9)
            at executeTemplate (http://localhost:9876/_karma_webpack_/vendor.js:65438:9)

I am currently using ^1.3.0-beta.11. Any chance to resolve this and potential follow-ups in a future release?

bkimminich commented 3 years ago

Hi @dockleryxk! Any chance the package format update will make it into one of the next beta releases?