test: address ag-grid-storybook-e2 visual regressions (#516)

* test: address ag-grid-storybook-e2 visual regressions

* Update ready logic

* Update ready logic

Author: johnhwhite

apps/ag-grid-storybook-e2e/src/integration/ag-grid-stories.component.spec.ts

@@ -18,7 +18,10 @@ describe(`ag-grid-storybook`, () => {
           .should('exist')
           .should('be.visible')
           .screenshot(
-            `aggridstoriescomponent-aggridstories--ag-grid-stories-${theme}`
+            `aggridstoriescomponent-aggridstories--ag-grid-stories-${theme}`,
+            {
+              clip: { x: 0, y: 0, width: 1300, height: 600 },
+            }
           )
           .percySnapshot(
             `aggridstoriescomponent-aggridstories--ag-grid-stories-${theme}`,
@@ -27,8 +30,8 @@ describe(`ag-grid-storybook`, () => {
               scope: '#root',
               percyCSS: `
                 /* Avoid "virtual rows" in the screenshot. */
-                :root {
-                  --viewport-height: 600px;
+                #root {
+                  height: 600px;
                 }
               `,
             }

apps/ag-grid-storybook-e2e/src/integration/data-manager.component.spec.ts

@@ -25,7 +25,10 @@ describe(`ag-grid-storybook data manager`, () => {
               .should('exist')
               .should('be.visible')
               .screenshot(
-                `datamanagercomponent-datamanager--data-manager-${domLayout}-${theme}`
+                `datamanagercomponent-datamanager--data-manager-${domLayout}-${theme}`,
+                {
+                  clip: { x: 0, y: 0, width: 1300, height: 600 },
+                }
               )
               .percySnapshot(
                 `datamanagercomponent-datamanager--data-manager-${domLayout}-${theme}`,
@@ -34,8 +37,8 @@ describe(`ag-grid-storybook data manager`, () => {
                   scope: '#root',
                   percyCSS: `
                     /* Avoid "virtual rows" in the screenshot. */
-                    :root {
-                      --viewport-height: 600px;
+                    #root {
+                      height: 600px;
                     }
                   `,
                 }

apps/ag-grid-storybook/src/app/ag-grid/ag-grid-stories.component.ts

@@ -8,7 +8,8 @@ import {
 import { SkyAgGridService, SkyCellType } from '@skyux/ag-grid';
 
 import { GridOptions } from 'ag-grid-community';
-import { BehaviorSubject } from 'rxjs';
+import { BehaviorSubject, timer } from 'rxjs';
+import { first } from 'rxjs/operators';
 
 import { columnDefinitions, data } from '../shared/baseball-players-data';
 
@@ -67,7 +68,10 @@ export class AgGridStoriesComponent implements OnInit {
         },
         domLayout: this.domLayout,
         onGridReady: () => {
-          this.ready.next(true);
+          // Delay to allow the grid to render before capturing the screenshot.
+          timer(800)
+            .pipe(first())
+            .subscribe(() => this.ready.next(true));
         },
       },
     });

apps/ag-grid-storybook/src/app/data-manager/data-manager.component.ts

@@ -14,7 +14,8 @@ import {
 } from '@skyux/data-manager';
 
 import { GridOptions } from 'ag-grid-community';
-import { BehaviorSubject } from 'rxjs';
+import { BehaviorSubject, timer } from 'rxjs';
+import { first } from 'rxjs/operators';
 
 import { columnDefinitions, data } from '../shared/baseball-players-data';
 
@@ -152,7 +153,10 @@ export class DataManagerComponent implements OnInit {
         },
         domLayout: this.domLayout,
         onGridReady: () => {
-          this.ready.next(true);
+          // Delay to allow the grid to render before capturing the screenshot.
+          timer(800)
+            .pipe(first())
+            .subscribe(() => this.ready.next(true));
         },
       },
     });