Repository: angular
Issue: A unit test for a component with an animation does not behave as expected, failing the test
Labels: type: bug/fix,area: testing,area: animations,freq2: medium,P3

# 🐞 bug report
Apologises if I have not filled this out correctly, or if I missed a similar issue.

### Affected Package
Unsure, the issue is present when using either the BrowserAnimationsModule or the NoopAnimationsModule, in unit tests.

### Description
A component I created, is a slide in panel from the right. The slide in is animated using the Angular animations module. When using the application as normal, the slider appears and disappears as expected, animating as expected.

When testing the component using karma/jasmine the component does not behave as expected. One of two things will happen, either the panel is hidden and will not show, or the panel is visible initially and will not hide. When inspecting the styles of the slide in panel, there are some mangled styles that are not present when using the app as normal (style="width:50vw;opacity:1;0:width;1:opacity;opacity:1;webkit-opacity:1;width:50vw;").

The Component is supposed to be hidden initially, and when triggered, an animation with change from 0 width to 100% of its contents, and 0 opacity to 1 opacity. The test is checking the components opacity style to confirm that the component is visible. It is checked before and after the components activation. When there is a mouse click, that is not on the component, the component is supposed to hide itself again.

## 🔬 Minimal Reproduction
https://stackblitz.com/edit/angular-xblhso
As part of the reproduction, in the application window, there is a normal app version at the top of the window, which you can use to see how it should work. Then a jasmine section below that, with a unit test that is failing, as per description above.
Also this is my first time using stackblitz, hope it works the way it seems like it is supposed to...

<!--
If StackBlitz is not suitable for reproduction of your issue, please create a minimal GitHub repository with the reproduction of the issue.
A good way to make a minimal reproduction is to create a new app via `ng new repro-app` and add the minimum possible code to show the problem. 
Share the link to the repo below along with step-by-step instructions to reproduce the problem, as well as expected and actual behavior.

Issues that don't have enough info and can't be reproduced will be closed.

You can read more about issue submission guidelines here: https://github.com/angular/angular/blob/master/CONTRIBUTING.md#-submitting-an-issue
-->

## 🌍  Your Environment

**Angular Version:**
<pre><code>
$ ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 8.0.4
Node: 10.15.3
OS: win32 x64
Angular: 8.0.2
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router, upgrade

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.800.4
@angular-devkit/build-angular     0.800.4
@angular-devkit/build-optimizer   0.800.4
@angular-devkit/build-webpack     0.800.4
@angular-devkit/core              0.8.6
@angular-devkit/schematics        8.0.4
@angular/cli                      8.0.4
@ngtools/webpack                  8.0.4
@schematics/angular               8.0.4
@schematics/update                0.800.4
rxjs                              6.5.2
typescript                        3.4.5
webpack                           4.30.0
</code></pre>