valor-software / ngx-bootstrap

Fast and reliable Bootstrap widgets in Angular (supports Ivy engine)
https://valor-software.com/ngx-bootstrap
MIT License
5.52k stars 1.69k forks source link

TypeError when running unit tests with ngx-bootstrap popover #6356

Open ryanhubbell opened 2 years ago

ryanhubbell commented 2 years ago

Bug description:

I'm getting this stack trace when running unit tests via jasmine that contain ngx-bootstrap's popover.

An error was thrown in afterAll TypeError: Cannot read property 'match' of undefined at initData (http://localhost:9876/_karma_webpack_/webpack:/node_modules/ngx-bootstrap/__ivy_ngcc__/positioning/fesm2015/ngx-bootstrap-positioning.js:852:1) at Positioning.positionElements (http://localhost:9876/_karma_webpack_/webpack:/node_modules/ngx-bootstrap/__ivy_ngcc__/positioning/fesm2015/ngx-bootstrap-positioning.js:975:1) at positionElements (http://localhost:9876/_karma_webpack_/webpack:/node_modules/ngx-bootstrap/__ivy_ngcc__/positioning/fesm2015/ngx-bootstrap-positioning.js:984:1) at http://localhost:9876/_karma_webpack_/webpack:/node_modules/ngx-bootstrap/__ivy_ngcc__/positioning/fesm2015/ngx-bootstrap-positioning.js:1016:1 at <Jasmine> at SafeSubscriber._next (http://localhost:9876/_karma_webpack_/webpack:/node_modules/ngx-bootstrap/__ivy_ngcc__/positioning/fesm2015/ngx-bootstrap-positioning.js:1015:1) at SafeSubscriber.__tryOrUnsub (http://localhost:9876/_karma_webpack_/webpack:/node_modules/rxjs/_esm2015/internal/Subscriber.js:183:1) at SafeSubscriber.next (http://localhost:9876/_karma_webpack_/webpack:/node_modules/rxjs/_esm2015/internal/Subscriber.js:122:1) at Subscriber._next (http://localhost:9876/_karma_webpack_/webpack:/node_modules/rxjs/_esm2015/internal/Subscriber.js:72:1) at Subscriber.next (http://localhost:9876/_karma_webpack_/webpack:/node_modules/rxjs/_esm2015/internal/Subscriber.js:49:1)

I'm not sure how to debug this, as it's happening outside any of the code that I have written. The project currently has 337 tests. When I run all the tests, it fails every time. It's strange because it doesn't happen inside of any particular test. If I run the tests for just the component that uses popover, they will succeed without issue every once in a while (this varies greatly...sometimes its hard to get them to work, other times it works without issue 3 or 4 times).

I'm sorry, I don't know how to reproduce this issue outside of the project I'm currently working in (and cannot share it).

ngx-bootstrap: 7.0.0, 7.1.0, 7.1.2

Angular: 12.2.10

Bootstrap: 3.3.6

Build system: Angular CLI

Expected behavior

I expect running tests not to fail with the error I posted above. The error doesn't seem to happen on any particular test, other than they are tests for a component which uses the popover.

ryanhubbell commented 2 years ago

So I rolled back to version 6.0.0, and I don't get this issue. It seems to have been introduced in 7.0.0.

frontendflorian commented 1 year ago

I just experienced a similar error after upgrading to Angular 14. Could resolve it by correcting the placement value of the according popover element from right auto to auto: Old version: <button popover="My awesome text in a popover" placement="right auto">My button</button> New version: <button [...] placement="auto">[...]</button> Don't know if the former was ever supported and I'm not sure why this errors occurred now. Probably due to some internal dependency upgrade within my project. At least I see ngx-bootstrap v9 instead of v6.2.0 in my yarn.lock now after upgrading some dependencies.

torrobinson commented 5 months ago

@frontendflorian thankfully Google brought me here - you were right - after upgrading from Angular 13->16 and the libraries along with it, any diagonal placements started throwing vague errors as it appears (according to the docs) only orthogonal placements are supported.

I did a regex search in VSC of placement="(top|bottom)-(left|right)" to find the offending placements, and converting them to only top/bottom/left/right helped!