Fix multiple unstable VRTs - including Google Charts

assets/js/components/SelectionPanel/index.stories.js

@@ -105,7 +105,8 @@ function Template( {
 export const Default = Template.bind( {} );
 Default.storyName = 'Default';
 Default.scenario = {
-	delay: 1500,
+	readySelector:
+		'.googlesitekit-selection-panel-item:first-of-type .mdc-checkbox__native-control:focus',
 };
 
 export const WithSavedItems = Template.bind( {} );

assets/js/components/wp-dashboard/WPDashboardWidgets.stories.js

@@ -116,9 +116,7 @@ ReadyWithActivateAnalyticsCTA.args = {
 	},
 };
 
-ReadyWithActivateAnalyticsCTA.scenario = {
-	// delay: 6000, // This extra delay is required to fix unstable VRTs. TODO: remove if not required.
-};
+ReadyWithActivateAnalyticsCTA.scenario = {};
 
 export const ReadyWithCompleteAnalyticsActivationCTA = Template.bind( {} );
 ReadyWithCompleteAnalyticsActivationCTA.storyName =

assets/js/modules/analytics-4/components/dashboard/DashboardAllTrafficWidgetGA4/indexEntityDashboard.stories.js

@@ -49,7 +49,12 @@ const widgetComponentProps = getWidgetComponentProps(
 );
 
 function Template() {
-	return <DashboardAllTrafficWidgetGA4 { ...widgetComponentProps } />;
+	// Min height added to fix rare VRT instability where the mobile VRT for Zero Data was not capturing the full height.
+	return (
+		<div style={ { minHeight: '980px' } }>
+			<DashboardAllTrafficWidgetGA4 { ...widgetComponentProps } />
+		</div>
+	);
 }
 
 const baseAllTrafficOptions = {
@@ -167,7 +172,7 @@ EntityDashboardLoaded.args = {
 };
 EntityDashboardLoaded.scenario = {
 	readySelector: '[id^="googlesitekit-chart-"] svg',
-	delay: 200,
+	delay: 400, // This extended delay is required to fix rare VRT instability where the chart in this scenario does not render in the standard delay.
 };
 
 export const EntityDashboardLoading = Template.bind( {} );
@@ -225,7 +230,7 @@ EntityDashboardDataUnavailable.args = {
 };
 EntityDashboardDataUnavailable.scenario = {
 	readySelector: '[id^="googlesitekit-chart-"] svg',
-	delay: 200,
+	delay: 400, // This extended delay is required to fix rare VRT instability where the chart in this scenario does not render in the standard delay.
 };
 
 export const EntityDashboardZeroData = Template.bind( {} );
@@ -269,7 +274,7 @@ EntityDashboardZeroData.args = {
 };
 EntityDashboardZeroData.scenario = {
 	readySelector: '[id^="googlesitekit-chart-"] svg',
-	delay: 200,
+	delay: 400, // This extended delay is required to fix rare VRT instability where the chart in this scenario does not render in the standard delay.
 };
 
 export const EntityDashboardError = Template.bind( {} );
@@ -316,7 +321,7 @@ EntityDashboardOneRowOfData.args = {
 };
 EntityDashboardOneRowOfData.scenario = {
 	readySelector: '[id^="googlesitekit-chart-"] svg',
-	delay: 200,
+	delay: 400, // This extended delay is required to fix rare VRT instability where the chart in this scenario does not render in the standard delay.
 };
 
 export const NoDataInComparisonDateRange = Template.bind( {} );
@@ -332,7 +337,7 @@ NoDataInComparisonDateRange.args = {
 };
 NoDataInComparisonDateRange.scenario = {
 	readySelector: '[id^="googlesitekit-chart-"] svg',
-	delay: 200,
+	delay: 400, // This extended delay is required to fix rare VRT instability where the chart in this scenario does not render in the standard delay.
 };
 
 export default {

assets/js/modules/analytics-4/components/dashboard/DashboardAllTrafficWidgetGA4/indexMainDashboard.stories.js

@@ -173,7 +173,7 @@ MainDashboardLoaded.args = {
 };
 MainDashboardLoaded.scenario = {
 	readySelector: '[id^="googlesitekit-chart-"] svg',
-	delay: 200,
+	delay: 400, // This extended delay is required to fix rare VRT instability where the chart in this scenario does not render in the standard delay.
 };
 
 export const MainDashboardLoading = Template.bind( {} );
@@ -235,7 +235,7 @@ MainDashboardDataUnavailable.args = {
 };
 MainDashboardDataUnavailable.scenario = {
 	readySelector: '[id^="googlesitekit-chart-"] svg',
-	delay: 200,
+	delay: 400, // This extended delay is required to fix rare VRT instability where the chart in this scenario does not render in the standard delay.
 };
 
 export const MainDashboardZeroData = Template.bind( {} );
@@ -279,7 +279,7 @@ MainDashboardZeroData.args = {
 };
 MainDashboardZeroData.scenario = {
 	readySelector: '[id^="googlesitekit-chart-"] svg',
-	delay: 200,
+	delay: 400, // This extended delay is required to fix rare VRT instability where the chart in this scenario does not render in the standard delay.
 };
 
 export const MainDashboardError = Template.bind( {} );
@@ -326,7 +326,7 @@ MainDashboardOneRowOfData.args = {
 };
 MainDashboardOneRowOfData.scenario = {
 	readySelector: '[id^="googlesitekit-chart-"] svg',
-	delay: 200,
+	delay: 400, // This extended delay is required to fix rare VRT instability where the chart in this scenario does not render in the standard delay.
 };
 
 export const NoDataInComparisonDateRange = Template.bind( {} );
@@ -342,7 +342,7 @@ NoDataInComparisonDateRange.args = {
 };
 NoDataInComparisonDateRange.scenario = {
 	readySelector: '[id^="googlesitekit-chart-"] svg',
-	delay: 200,
+	delay: 400, // This extended delay is required to fix rare VRT instability where the chart in this scenario does not render in the standard delay.
 };
 
 export default {

assets/js/modules/search-console/components/dashboard/SearchFunnelWidgetGA4/index.stories.js

@@ -294,9 +294,9 @@ ReadyWithActivateAnalyticsCTA.args = {
 		provideSearchConsoleMockReport( registry, searchConsoleArgs );
 	},
 };
-
 ReadyWithActivateAnalyticsCTA.scenario = {
-	delay: 3000,
+	readySelector: '[id^="googlesitekit-chart-"] svg',
+	delay: 400, // This extended delay is required to fix rare VRT instability where the chart in this scenario does not render in the standard delay.
 };
 
 export const ReadyWithCompleteAnalyticsActivationCTA = Template.bind( {} );
@@ -336,9 +336,9 @@ ReadyWithCreateKeyEventCTA.args = {
 		}
 	},
 };
-
 ReadyWithCreateKeyEventCTA.scenario = {
-	delay: 3000,
+	readySelector: '[id^="googlesitekit-chart-"] svg',
+	delay: 400, // This extended delay is required to fix rare VRT instability where the chart in this scenario does not render in the standard delay.
 };
 
 export const Loading = Template.bind( {} );
@@ -485,7 +485,10 @@ NoDataInComparisonDateRange.args = {
 		}
 	},
 };
-NoDataInComparisonDateRange.scenario = {};
+NoDataInComparisonDateRange.scenario = {
+	readySelector: '[id^="googlesitekit-chart-"] svg',
+	delay: 400, // This extended delay is required to fix rare VRT instability where the chart in this scenario does not render in the standard delay.
+};
 
 export default {
 	title: 'Modules/SearchConsole/Widgets/SearchFunnelWidgetGA4',