{"action":"created","issue":{"url":"https://api.github.com/repos/getsaf/shallow-render/issues/59","repository_url":"https://api.github.com/repos/getsaf/shallow-render","labels_url":"https://api.github.com/repos/getsaf/shallow-render/issues/59/labels{/name}","comments_url":"https://api.github.com/repos/getsaf/shallow-render/issues/59/comments","events_url":"https://api.github.com/repos/getsaf/shallow-render/issues/59/events","html_url":"https://github.com/getsaf/shallow-render/issues/59","id":355682236,"node_id":"MDU6SXNzdWUzNTU2ODIyMzY=","number":59,"title":"How to use with animations?","user":{"login":"kylecannon","id":867978,"node_id":"MDQ6VXNlcjg2Nzk3OA==","avatar_url":"https://avatars2.githubusercontent.com/u/867978?v=4","gravatar_id":"","url":"https://api.github.com/users/kylecannon","html_url":"https://github.com/kylecannon","followers_url":"https://api.github.com/users/kylecannon/followers","following_url":"https://api.github.com/users/kylecannon/following{/other_user}","gists_url":"https://api.github.com/users/kylecannon/gists{/gist_id}","starred_url":"https://api.github.com/users/kylecannon/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/kylecannon/subscriptions","organizations_url":"https://api.github.com/users/kylecannon/orgs","repos_url":"https://api.github.com/users/kylecannon/repos","events_url":"https://api.github.com/users/kylecannon/events{/privacy}","received_events_url":"https://api.github.com/users/kylecannon/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":12,"created_at":"2018-08-30T17:27:52Z","updated_at":"2018-09-11T14:47:37Z","closed_at":"2018-09-11T14:47:37Z","author_association":"NONE","body":"First off, thank you so much for the library. I am having an issue when I have animations triggers though with using this library. Example:\r\n\r\n\r\n```typescript\r\n@Component({\r\n    selector: 'app-applications-grid',\r\n    templateUrl: './applications-grid.component.html',\r\n    styleUrls: ['./applications-grid.component.scss'],\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    animations: [\r\n        trigger('applicationAnimation', [\r\n            transition('* => *', [\r\n                query(\r\n                    ':enter',\r\n                    [\r\n                        style({ opacity: 0, transform: 'translateY(-100px)' }),\r\n                        stagger(50, [animate('400ms ease-out', style({ opacity: 1, transform: 'none' }))]),\r\n                    ],\r\n                    { optional: true }\r\n                ),\r\n            ]),\r\n        ]),\r\n    ],\r\n})\r\nexport class ApplicationsGridComponent {\r\n    @Input() applications: ApplicationDetail[];\r\n\r\n    trackByFn(idx, { name }: ApplicationDetail) {\r\n        return name;\r\n    }\r\n}\r\n```\r\n\r\nwith a template of\r\n```html\r\n<section class=\"application-grid\" [@applicationAnimation]=\"applications?.length\">\r\n    <app-applications-grid-item *ngFor=\"let application of applications; trackBy: trackByFn\" [item]=\"application\"></app-applications-grid-item>\r\n</section>\r\n```\r\n\r\nThis error is thrown:\r\n\r\n```\r\nHeadlessChrome 0.0.0 (Linux 0.0.0) ApplicationsGridComponent should create FAILED\r\n\tError: Found the synthetic property @applicationAnimation. Please include either \"BrowserAnimationsModule\" or \"NoopAnimationsModule\" in your application.\r\n\t    at checkNoSyntheticProp node_modules/@angular/platform-browser/fesm5/platform-browser.js:1296:1)\r\n\t    at EmulatedEncapsulationDomRenderer2.push../node_modules/@angular/platform-browser/fesm5/platform-browser.js.DefaultDomRenderer2.setProperty node_modules/@angular/platform-browser/fesm5/platform-browser.js:1280:1)\r\n\t    at DebugRenderer2.push../node_modules/@angular/core/fesm5/core.js.DebugRenderer2.setProperty node_modules/@angular/core/fesm5/core.js:11207:1)\r\n\t    at setElementProperty node_modules/@angular/core/fesm5/core.js:7966:1)\r\n\t    at checkAndUpdateElementValue node_modules/@angular/core/fesm5/core.js:7917:1)\r\n\t    at checkAndUpdateElementInline node_modules/@angular/core/fesm5/core.js:7864:1)\r\n\t    at checkAndUpdateNodeInline node_modules/@angular/core/fesm5/core.js:10205:1)\r\n\t    at checkAndUpdateNode node_modules/@angular/core/fesm5/core.js:10171:1)\r\n\t    at debugCheckAndUpdateNode node_modules/@angular/core/fesm5/core.js:10804:1)\r\n\t    at debugCheckRenderNodeFn node_modules/@angular/core/fesm5/core.js:10790:1)\r\nHeadlessChrome 0.0.0 (Linux 0.0.0) ApplicationsGridComponent should create FAILED\r\n\tError: Found the synthetic property @applicationAnimation. Please include either \"BrowserAnimationsModule\" or \"NoopAnimationsModule\" in your application.\r\n\t    at checkNoSyntheticProp node_modules/@angular/platform-browser/fesm5/platform-browser.js:1296:1)\r\n\t    at EmulatedEncapsulationDomRenderer2.push../node_modules/@angular/platform-browser/fesm5/platform-browser.js.DefaultDomRenderer2.setProperty node_modules/@angular/platform-browser/fesm5/platform-browser.js:1280:1)\r\n\t    at DebugRenderer2.push../node_modules/@angular/core/fesm5/core.js.DebugRenderer2.setProperty node_modules/@angular/core/fesm5/core.js:11207:1)\r\n\t    at setElementProperty node_modules/@angular/core/fesm5/core.js:7966:1)\r\n\t    at checkAndUpdateElementValue node_modules/@angular/core/fesm5/core.js:7917:1)\r\n\t    at checkAndUpdateElementInline node_modules/@angular/core/fesm5/core.js:7864:1)\r\n\t    at checkAndUpdateNodeInline node_modules/@angular/core/fesm5/core.js:10205:1)\r\n\t    at checkAndUpdateNode node_modules/@angular/core/fesm5/core.js:10171:1)\r\n\t    at debugCheckAndUpdateNode node_modules/@angular/core/fesm5/core.js:10804:1)\r\n```\r\n\r\nIf I create a testing module that imports the `NoopAnimationsModule`,\r\n\r\n```typescript\r\n@NgModule({\r\n    imports: [NoopAnimationsModule, ApplicationsModule],\r\n    exports: [ApplicationsModule],\r\n})\r\nexport class ApplicationsTestModule {\r\n}\r\n\r\ndescribe('ApplicationsGridComponent', () => {\r\n    let shallow: Shallow<ApplicationsGridComponent>;\r\n\r\n    beforeEach(() => {\r\n        shallow = new Shallow(ApplicationsGridComponent, ApplicationsTestModule);\r\n    });\r\n\r\n    const applications = mockApps;\r\n\r\n    it('should create', async () => {\r\n        const res = await shallow.render(\r\n            `<app-applications-grid [applications]=\"applications\"></app-applications-grid>`,\r\n            { bind: { applications } },\r\n        );\r\n    });\r\n});\r\n```\r\n\r\n the test fails with the following error:\r\n\r\n```\r\nHeadlessChrome 0.0.0 (Linux 0.0.0) ApplicationsGridComponent should create FAILED\r\n\tTypeError: this.delegate.createRenderer is not a function\r\n\t    at DebugRendererFactory2.push../node_modules/@angular/core/fesm5/core.js.DebugRendererFactory2.createRenderer node_modules/@angular/core/fesm5/core.js:11067:1)\r\n\t    at createRootData node_modules/@angular/core/fesm5/core.js:10538:1)\r\n\t    at Object.debugCreateRootView [as createRootView] node_modules/@angular/core/fesm5/core.js:10531:1)\r\n\t    at ComponentFactory_.push../node_modules/@angular/core/fesm5/core.js.ComponentFactory_.create node_modules/@angular/core/fesm5/core.js:8361:1)\r\n\t    at initComponent node_modules/@angular/core/fesm5/testing.js:1163:1)\r\n\t    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke node_modules/zone.js/dist/zone.js:388:1)\r\n\t    at ProxyZoneSpec.push../node_modules/zone.js/dist/zone-testing.js.ProxyZoneSpec.onInvoke node_modules/zone.js/dist/zone-testing.js:288:1)\r\n\t    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke node_modules/zone.js/dist/zone.js:387:1)\r\n\t    at Object.onInvoke node_modules/@angular/core/fesm5/core.js:3671:1)\r\n\t    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke node_modules/zone.js/dist/zone.js:38HeadlessChrome 0.0.0 (Linux 0.0.0): Executed 1 of 125 (1 FAILED) (skipped 124) ERROR (0.096 secs / 0.072 secs)\r\n```\r\n\r\nAny ideas?"},"comment":{"url":"https://api.github.com/repos/getsaf/shallow-render/issues/comments/420300732","html_url":"https://github.com/getsaf/shallow-render/issues/59#issuecomment-420300732","issue_url":"https://api.github.com/repos/getsaf/shallow-render/issues/59","id":420300732,"node_id":"MDEyOklzc3VlQ29tbWVudDQyMDMwMDczMg==","user":{"login":"getsaf","id":10538908,"node_id":"MDQ6VXNlcjEwNTM4OTA4","avatar_url":"https://avatars1.githubusercontent.com/u/10538908?v=4","gravatar_id":"","url":"https://api.github.com/users/getsaf","html_url":"https://github.com/getsaf","followers_url":"https://api.github.com/users/getsaf/followers","following_url":"https://api.github.com/users/getsaf/following{/other_user}","gists_url":"https://api.github.com/users/getsaf/gists{/gist_id}","starred_url":"https://api.github.com/users/getsaf/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/getsaf/subscriptions","organizations_url":"https://api.github.com/users/getsaf/orgs","repos_url":"https://api.github.com/users/getsaf/repos","events_url":"https://api.github.com/users/getsaf/events{/privacy}","received_events_url":"https://api.github.com/users/getsaf/received_events","type":"User","site_admin":false},"created_at":"2018-09-11T14:47:37Z","updated_at":"2018-09-11T14:47:37Z","author_association":"OWNER","body":"Closing this issue, I think the Animations issue is solved here."}}
{"actor":{"display_login":"getsaf"}}