search

angular / angular

Deliver web apps with confidence 🚀
https://angular.dev
MIT License
96.05k stars 25.41k forks source link

Jest Test - Angular 13 : TypeError: element.animate is not a function when Mat Table is present #45379

Closed turbo-xav closed 2 years ago

turbo-xav commented 2 years ago

Which @angular/* package(s) are the source of the bug?

animations

Is this a regression?

Yes

Description

Hello,

When i execute test with Jest after upgrading Angular to V13, I obtain an error : TypeError: element.animate is not a function It occurs when Mat-Table element is present in Component's HTML template. <table mat-table [dataSource]="persons" matSort> ....

Thanks for your help

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

● PersonComponent › should create

    TypeError: element.animate is not a function

      37 |     fixture = TestBed.createComponent(PersonComponent);
      38 |     component = fixture.componentInstance;
    > 39 |     fixture.detectChanges();
         |             ^
      40 |   });
      41 |
      42 |   it('should create', () => {

      at WebAnimationsPlayer._triggerWebAnimation (node_modules/@angular/animations/fesm2015/browser.mjs:4263:24)
      at WebAnimationsPlayer._buildPlayer (node_modules/@angular/animations/fesm2015/browser.mjs:4246:18)
      at WebAnimationsPlayer.play (node_modules/@angular/animations/fesm2015/browser.mjs:4275:14)
      at TransitionAnimationPlayer.play (node_modules/@angular/animations/fesm2015/browser.mjs:3827:38)
      at node_modules/@angular/animations/fesm2015/browser.mjs:3611:20
          at Array.forEach (<anonymous>)
      at TransitionAnimationEngine._flushAnimations (node_modules/@angular/animations/fesm2015/browser.mjs:3604:21)
      at TransitionAnimationEngine.flush (node_modules/@angular/animations/fesm2015/browser.mjs:3232:32)
      at InjectableAnimationEngine.flush (node_modules/@angular/animations/fesm2015/browser.mjs:4092:32)
      at node_modules/@angular/platform-browser/fesm2015/animations.mjs:212:29
      at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:407:30)
      at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:3765:43)
      at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:406:56)
      at Zone.Object.<anonymous>.Zone.run (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:167:47)
      at NgZone.runOutsideAngular (node_modules/@angular/core/fesm2015/core.mjs:25447:28)
      at AnimationRendererFactory.end (node_modules/@angular/platform-browser/fesm2015/animations.mjs:210:24)
      at renderComponentOrTemplate (node_modules/@angular/core/fesm2015/core.mjs:9602:29)
      at tickRootContext (node_modules/@angular/core/fesm2015/core.mjs:10829:9)
      at detectChangesInRootView (node_modules/@angular/core/fesm2015/core.mjs:10854:5)
      at RootViewRef.detectChanges (node_modules/@angular/core/fesm2015/core.mjs:21451:9)
      at ComponentFixture._tick (node_modules/@angular/core/fesm2015/testing.mjs:140:32)
      at node_modules/@angular/core/fesm2015/testing.mjs:153:22
      at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:407:30)
      at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:3765:43)
      at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:406:56)
      at Object.onInvoke (node_modules/@angular/core/fesm2015/core.mjs:25548:33)
      at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:406:56)
      at Zone.Object.<anonymous>.Zone.run (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:167:47)
      at NgZone.run (node_modules/@angular/core/fesm2015/core.mjs:25402:28)
      at ComponentFixture.detectChanges (node_modules/@angular/core/fesm2015/testing.mjs:152:25)
      at src/app/components/persons/person.component.spec.ts:39:13
      at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:407:30)
      at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:3765:43)
      at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:406:56)
      at Zone.Object.<anonymous>.Zone.run (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:167:47)
      at Object.wrappedFunc (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:4250:34)

Please provide the environment you discovered this bug in (run ng version)

Angular Cli : 13.2.6
Nodejs : V14.17.2
Npm : 6.14.13
OS : Window 10

"dependencies": {
    "@angular/animations": "^13.2.6",
    "@angular/cdk": "^13.2.6",
    "@angular/common": "^13.2.6",
    "@angular/compiler": "^13.2.6",
    "@angular/core": "^13.2.6",
    "@angular/forms": "^13.2.6",
    "@angular/material": "^13.2.6",
    "@angular/platform-browser": "^13.2.6",
    "@angular/platform-browser-dynamic": "^13.2.6",
    "@angular/router": "^13.2.6",
    "@auth0/angular-jwt": "^5.0.2",
    "@ngx-translate/core": "^13.0.0",
    "@ngx-translate/http-loader": "^6.0.0",
    "file-saver": "^2.0.5",
    "material-design-icons-iconfont": "6.1.0",
    "pdfmake": "^0.1.71",
    "pfe2-snackbar": "^13.0.0",
    "pfe2-spinner-loader": "^2.0.6",
    "roboto-fontface": "^0.10.0",
    "rxjs": "^6.6.7",
    "tslib": "^2.0.0",
    "zone.js": "^0.11.5"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^13.2.6",
    "@angular-eslint/builder": "^13.1.0",
    "@angular-eslint/eslint-plugin": "^13.1.0",
    "@angular-eslint/eslint-plugin-template": "^13.1.0",
    "@angular-eslint/schematics": "^13.1.0",
    "@angular-eslint/template-parser": "^13.1.0",
    "@angular/cli": "^13.2.6",
    "@angular/compiler-cli": "^13.2.6",
    "@angular/language-service": "^13.2.6",
    "@compodoc/compodoc": "^1.1.13",
    "@types/file-saver": "^2.0.3",
    "@types/jasmine": "^3.8.1",
    "@types/jasminewd2": "^2.0.10",
    "@types/jest": "^27.4.1",
    "@types/node": "^16.3.1",
    "@types/pdfmake": "^0.1.18",
    "@typescript-eslint/eslint-plugin": "^4.28.2",
    "@typescript-eslint/parser": "^4.28.2",
    "eslint": "^7.6.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-import": "^2.23.4",
    "eslint-plugin-jsdoc": "^35.4.3",
    "eslint-plugin-prefer-arrow": "^1.2.3",
    "eslint-plugin-prettier": "^3.4.0",
    "http-server": "^0.12.3",
    "jest": "^27.5.1",
    "jest-extended": "^2.0.0",
    "jest-html-reporter": "^3.4.2",
    "jest-junit": "^13.0.0",
    "jest-preset-angular": "^11.1.1",
    "jest-sonar": "^0.2.12",
    "prettier": "^2.2.1",
    "ts-jest": "^27.1.3",
    "ts-node": "^10.7.0",
    "typescript": "~4.5.5",
    "webpack-bundle-analyzer": "^4.1.0"
  }

Anything else?

No response

alan-agius4 commented 2 years ago

Duplicate of https://github.com/angular/angular/issues/45016

Likely you are using BrowserAnimationsModule instead of NoopAnimationsModule in your unit tests.

turbo-xav commented 2 years ago

Thanks it works ;)

jonnytest1 commented 2 years ago

weird it just suddenly stopped working with the BroswerAnimationsMOdule

angular-automatic-lock-bot[bot] commented 2 years ago

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.