Enhancement/8418 Remove KMW redundant VRT Scenarios

assets/js/components/KeyMetrics/MetricTileNumeric.stories.js

@@ -71,6 +71,48 @@ ZeroChange.scenario = {
 	delay: 250,
 };
 
+export const ZeroData = Template.bind( {} );
+ZeroData.storyName = 'Zero Data';
+ZeroData.args = {
+	title: 'New Visitors',
+	metricValue: 0,
+	subText: 'of 0 total visitors',
+	currentValue: 0,
+	previousValue: 0,
+};
+// Since the "Zero" state is similar for all "numeric" KMW tiles, this should be
+// the sole scenario and should not be added to any other "numeric" type KMW components.
+ZeroData.scenario = {
+	label: 'KeyMetrics/MetricTileNumeric/ZeroData',
+	delay: 250,
+};
+
+export const Loading = Template.bind( {} );
+Loading.storyName = 'Loading';
+Loading.args = {
+	title: 'New Visitors',
+	metricValue: 0,
+	subText: 'of 0 total visitors',
+	currentValue: 0,
+	previousValue: 0,
+	loading: true,
+};
+// Since the "Loading" state is the same for all KMW tiles, this is the sole scenario
+// and should not be added to any other generic `MetricTile___` or KMW component.
+Loading.scenario = {
+	label: 'KeyMetrics/MetricTileNumeric/Loading',
+};
+Loading.decorators = [
+	( Story ) => {
+		// Ensure the animation is paused for VRT tests to correctly capture the loading state.
+		return (
+			<div className="googlesitekit-vrt-animation-paused">
+				<Story />
+			</div>
+		);
+	},
+];
+
 export default {
 	title: 'Key Metrics/WidgetTiles/MetricTileNumeric',
 	component: MetricTileNumeric,

assets/js/components/KeyMetrics/MetricTileTable.stories.js

@@ -104,6 +104,8 @@ ZeroData.args = {
 		return <div>No data available</div>;
 	},
 };
+// Since the "Zero" state is similar for all "tabular" KMW tiles, this should be
+// the sole scenario and should not be added to any other "table" type KMW components.
 ZeroData.scenario = {
 	label: 'KeyMetrics/MetricTileTable/ZeroData',
 	delay: 250,

assets/js/components/KeyMetrics/MetricTileText.stories.js

@@ -71,6 +71,22 @@ ZeroChange.scenario = {
 	delay: 250,
 };
 
+export const ZeroData = Template.bind( {} );
+ZeroData.storyName = 'Zero Data';
+ZeroData.args = {
+	title: 'Most engaged traffic source',
+	metricValue: '-',
+	subText: '0% of engaged sessions',
+	currentValue: 0,
+	previousValue: 0,
+};
+// Since the "Zero" state is similar for all "textual" KMW tiles, this should be
+// the sole scenario and should not be added to any other "text" type KMW components.
+ZeroData.scenario = {
+	label: 'KeyMetrics/MetricTileText/ZeroData',
+	delay: 250,
+};
+
 export const Loading = Template.bind( {} );
 Loading.storyName = 'Loading';
 Loading.args = {

assets/js/modules/adsense/components/widgets/TopEarningContentWidget.stories.js

@@ -163,10 +163,6 @@ ZeroData.args = {
 		} );
 	},
 };
-ZeroData.scenario = {
-	label: 'KeyMetrics/TopEarningContentWidget/ZeroData',
-	delay: 250,
-};
 
 export const Error = Template.bind( {} );
 Error.storyName = 'Error';
@@ -192,10 +188,6 @@ Error.args = {
 		] );
 	},
 };
-Error.scenario = {
-	label: 'KeyMetrics/PopularContent/Error',
-	delay: 250,
-};
 
 export const InsufficientPermissions = Template.bind( {} );
 InsufficientPermissions.storyName = 'Insufficient Permissions';
@@ -221,10 +213,6 @@ InsufficientPermissions.args = {
 		] );
 	},
 };
-InsufficientPermissions.scenario = {
-	label: 'KeyMetrics/PopularContent/InsufficientPermissions',
-	delay: 250,
-};
 
 export const AdSenseNotLinked = Template.bind( {} );
 AdSenseNotLinked.storyName = 'AdSense Not Linked';

assets/js/modules/analytics-4/components/widgets/EngagedTrafficSourceWidget.stories.js

@@ -91,9 +91,6 @@ ZeroData.args = {
 		} );
 	},
 };
-ZeroData.scenario = {
-	label: 'KeyMetrics/EngagedTrafficSourceWidget/ZeroData',
-};
 
 export const Error = Template.bind( {} );
 Error.storyName = 'Error';
@@ -119,6 +116,8 @@ Error.args = {
 		] );
 	},
 };
+// Since the "Error" state is the same for all KMW tiles, this is the sole scenario
+// and should not be added to any other generic `MetricTile___` or KMW component.
 Error.scenario = {
 	label: 'KeyMetrics/EngagedTrafficSource/Error',
 	delay: 250,
@@ -148,6 +147,9 @@ InsufficientPermissions.args = {
 		] );
 	},
 };
+// Since the "Insufficient Permissions Error" state is the same for all KMW tiles,
+// this is the sole scenario and should not be added to any other generic
+// `MetricTile___` or KMW component.
 InsufficientPermissions.scenario = {
 	label: 'KeyMetrics/EngagedTrafficSource/InsufficientPermissions',
 	delay: 250,

assets/js/modules/analytics-4/components/widgets/LeastEngagingPagesWidget.stories.js

@@ -280,10 +280,6 @@ ZeroData.args = {
 		} );
 	},
 };
-ZeroData.scenario = {
-	label: 'KeyMetrics/LeastEngagingPagesWidget/ZeroData',
-	delay: 250,
-};
 
 export const Error = Template.bind( {} );
 Error.storyName = 'Error';
@@ -309,10 +305,6 @@ Error.args = {
 		] );
 	},
 };
-Error.scenario = {
-	label: 'KeyMetrics/LeastEngagingPagesWidget/Error',
-	delay: 250,
-};
 
 export const InsufficientPermissions = Template.bind( {} );
 InsufficientPermissions.storyName = 'Insufficient Permissions';
@@ -339,11 +331,6 @@ InsufficientPermissions.args = {
 	},
 };
 
-InsufficientPermissions.scenario = {
-	label: 'KeyMetrics/LeastEngagingPagesWidget/InsufficientPermissions',
-	delay: 250,
-};
-
 export default {
 	title: 'Key Metrics/LeastEngagingPagesWidget',
 	decorators: [

assets/js/modules/analytics-4/components/widgets/MostEngagingPagesWidget.stories.js

@@ -298,10 +298,6 @@ ZeroData.args = {
 		} );
 	},
 };
-ZeroData.scenario = {
-	label: 'KeyMetrics/MostEngagingPagesWidget/ZeroData',
-	delay: 250,
-};
 
 export const Error = Template.bind( {} );
 Error.storyName = 'Error';
@@ -327,10 +323,6 @@ Error.args = {
 		] );
 	},
 };
-Error.scenario = {
-	label: 'KeyMetrics/MostEngagingPagesWidget/Error',
-	delay: 250,
-};
 
 export const InsufficientPermissions = Template.bind( {} );
 InsufficientPermissions.storyName = 'Insufficient Permissions';
@@ -357,11 +349,6 @@ InsufficientPermissions.args = {
 	},
 };
 
-InsufficientPermissions.scenario = {
-	label: 'KeyMetrics/MostEngagingPagesWidget/InsufficientPermissions',
-	delay: 250,
-};
-
 export default {
 	title: 'Key Metrics/MostEngagingPagesWidget',
 	decorators: [

assets/js/modules/analytics-4/components/widgets/NewVisitorsWidget.stories.js

@@ -96,10 +96,6 @@ ZeroData.args = {
 		} );
 	},
 };
-ZeroData.scenario = {
-	label: 'KeyMetrics/NewVisitors/ZeroData',
-	delay: 250,
-};
 
 export const Error = Template.bind( {} );
 Error.storyName = 'Error';
@@ -125,10 +121,6 @@ Error.args = {
 		] );
 	},
 };
-Error.scenario = {
-	label: 'KeyMetrics/NewVisitors/Error',
-	delay: 250,
-};
 
 export const InsufficientPermissions = Template.bind( {} );
 InsufficientPermissions.storyName = 'Insufficient Permissions';
@@ -155,11 +147,6 @@ InsufficientPermissions.args = {
 	},
 };
 
-InsufficientPermissions.scenario = {
-	label: 'KeyMetrics/NewVisitors/InsufficientPermissions',
-	delay: 250,
-};
-
 export default {
 	title: 'Key Metrics/NewVisitors',
 	decorators: [

assets/js/modules/analytics-4/components/widgets/PagesPerVisitWidget.stories.js

@@ -110,10 +110,6 @@ ZeroData.args = {
 		} );
 	},
 };
-ZeroData.scenario = {
-	label: 'KeyMetrics/PagesPerVisit/ZeroData',
-	delay: 250,
-};
 
 export const Error = Template.bind( {} );
 Error.storyName = 'Error';
@@ -139,10 +135,6 @@ Error.args = {
 		] );
 	},
 };
-Error.scenario = {
-	label: 'KeyMetrics/PagesPerVisit/Error',
-	delay: 250,
-};
 
 export const InsufficientPermissions = Template.bind( {} );
 InsufficientPermissions.storyName = 'Insufficient Permissions';
@@ -169,11 +161,6 @@ InsufficientPermissions.args = {
 	},
 };
 
-InsufficientPermissions.scenario = {
-	label: 'KeyMetrics/PagesPerVisit/InsufficientPermissions',
-	delay: 250,
-};
-
 export default {
 	title: 'Key Metrics/PagesPerVisit',
 	decorators: [

assets/js/modules/analytics-4/components/widgets/PopularAuthorsWidget.stories.js

@@ -107,9 +107,6 @@ ZeroData.args = {
 		} );
 	},
 };
-ZeroData.scenario = {
-	label: 'KeyMetrics/PopularAuthorsWidget/ZeroData',
-};
 
 export const GatheringData = Template.bind( {} );
 GatheringData.storyName = 'Gathering Data';
@@ -122,6 +119,9 @@ GatheringData.args = {
 		);
 	},
 };
+// Since the "Gathering Data" state is the same for all KMW tiles that require
+// custom dimensions, this is the sole scenario and should not be added to any
+// other generic `MetricTile___` or KMW component.
 GatheringData.scenario = {
 	label: 'KeyMetrics/PopularAuthorsWidget/GatheringData',
 };
@@ -136,6 +136,13 @@ ErrorMissingCustomDimensions.args = {
 		} );
 	},
 };
+// Since the "Error Missing Custom Dimensions" state is the same for all KMW tiles
+// that require custom dimensions, this is the sole scenario and should not be
+// added to any other generic `MetricTile___` or KMW component.
+ErrorMissingCustomDimensions.scenario = {
+	label: 'KeyMetrics/PopularAuthorsWidget/ErrorMissingCustomDimensions',
+	delay: 250,
+};
 
 export const ErrorCustomDimensionsInsufficientPermissions = Template.bind( {} );
 ErrorCustomDimensionsInsufficientPermissions.storyName =
@@ -158,6 +165,13 @@ ErrorCustomDimensionsInsufficientPermissions.args = {
 		} );
 	},
 };
+// Since the "Error Custom Dimensions Insufficient Permissions" state is the same for
+// all KMW tiles that require custom dimensions,, this is the sole scenario and should
+// not be added to any other generic `MetricTile___` or KMW component.
+ErrorCustomDimensionsInsufficientPermissions.scenario = {
+	label: 'KeyMetrics/PopularAuthorsWidget/ErrorCustomDimensionsGeneric',
+	delay: 250,
+};
 
 export const ErrorCustomDimensionsGeneric = Template.bind( {} );
 ErrorCustomDimensionsGeneric.storyName =
@@ -180,6 +194,13 @@ ErrorCustomDimensionsGeneric.args = {
 		} );
 	},
 };
+// Since the "Error Custom Dimensions Generic" state is the same for all KMW tiles
+// that require custom dimensions, this is the sole scenario and should not be added
+// to any other generic `MetricTile___` or KMW component.
+ErrorCustomDimensionsGeneric.scenario = {
+	label: 'KeyMetrics/PopularAuthorsWidget/ErrorCustomDimensionsGeneric',
+	delay: 250,
+};
 
 export default {
 	title: 'Key Metrics/PopularAuthorsWidget',

assets/js/modules/analytics-4/components/widgets/PopularContentWidget.stories.js

@@ -157,10 +157,6 @@ ZeroData.args = {
 		} );
 	},
 };
-ZeroData.scenario = {
-	label: 'KeyMetrics/PopularContentWidget/ZeroData',
-	delay: 250,
-};
 
 export const Error = Template.bind( {} );
 Error.storyName = 'Error';
@@ -186,10 +182,6 @@ Error.args = {
 		] );
 	},
 };
-Error.scenario = {
-	label: 'KeyMetrics/PopularContent/Error',
-	delay: 250,
-};
 
 export const InsufficientPermissions = Template.bind( {} );
 InsufficientPermissions.storyName = 'Insufficient Permissions';
@@ -216,11 +208,6 @@ InsufficientPermissions.args = {
 	},
 };
 
-InsufficientPermissions.scenario = {
-	label: 'KeyMetrics/PopularContent/InsufficientPermissions',
-	delay: 250,
-};
-
 export default {
 	title: 'Key Metrics/PopularContentWidget',
 	decorators: [