Merge pull request unoplatform#16389 from Youssef1313/stabilize-snapshot

ci: Stabilize snapshot tests more

src/SamplesApp/UITests.Shared/Helpers/WaitableSampleImageHelpers.cs

@@ -0,0 +1,54 @@
+using System.Linq;
+using System.Threading.Tasks;
+using Microsoft.UI.Xaml.Controls;
+using Microsoft.UI.Xaml.Media;
+using Microsoft.UI.Xaml.Media.Imaging;
+
+namespace UITests.Shared.Helpers;
+
+internal static class WaitableSampleImageHelpers
+{
+	private static Task WaitImage(ImageBrush image)
+	{
+		var tcs = new TaskCompletionSource();
+		image.ImageOpened += (_, _) => tcs.SetResult();
+		image.ImageFailed += (_, _) => tcs.SetResult();
+		return tcs.Task;
+	}
+
+	private static Task WaitImage(Image image)
+	{
+		var tcs = new TaskCompletionSource();
+		image.ImageOpened += (_, _) => tcs.SetResult();
+		image.ImageFailed += (_, _) => tcs.SetResult();
+		return tcs.Task;
+	}
+
+	private static Task WaitImage(SvgImageSource image)
+	{
+		var tcs = new TaskCompletionSource();
+		image.Opened += (_, _) => tcs.SetResult();
+		image.OpenFailed += (_, _) => tcs.SetResult();
+		return tcs.Task;
+	}
+
+	private static Task WaitImage(BitmapImage image)
+	{
+		var tcs = new TaskCompletionSource();
+		image.ImageOpened += (_, _) => tcs.SetResult();
+		image.ImageFailed += (_, _) => tcs.SetResult();
+		return tcs.Task;
+	}
+
+	public static Task WaitAllImages(params ImageBrush[] images)
+		=> Task.WhenAll(images.Select(WaitImage));
+
+	public static Task WaitAllImages(params Image[] images)
+		=> Task.WhenAll(images.Select(WaitImage));
+
+	public static Task WaitAllImages(params SvgImageSource[] images)
+		=> Task.WhenAll(images.Select(WaitImage));
+
+	public static Task WaitAllImages(params BitmapImage[] images)
+		=> Task.WhenAll(images.Select(WaitImage));
+}

src/SamplesApp/UITests.Shared/Microsoft_UI_Xaml_Controls/ProgressRing/ProgressRingHeightTest.xaml.cs

@@ -6,7 +6,7 @@ namespace UITests.Microsoft_UI_Xaml_Controls.ProgressRing;
 /// <summary>
 /// An empty page that can be used on its own or navigated to within a Frame.
 /// </summary>
-[Sample("Progress")]
+[Sample("Progress", IgnoreInSnapshotTests = true)]
 public sealed partial class ProgressRingHeightTest : Page
 {
 	public ProgressRingHeightTest()

src/SamplesApp/UITests.Shared/Microsoft_UI_Xaml_Controls/ProgressRing/WinUIProgressRingPage.xaml.cs

@@ -6,7 +6,7 @@
 
 namespace UITests.Microsoft_UI_Xaml_Controls.ProgressRing
 {
-	[Sample("Progress", "MUX")]
+	[Sample("Progress", "MUX", IgnoreInSnapshotTests = true)]
 	public sealed partial class WinUIProgressRingPage : Page
 	{
 		public WinUIProgressRingPage()

src/SamplesApp/UITests.Shared/UITests.Shared.projitems

@@ -5380,6 +5380,7 @@
     <Compile Include="$(MSBuildThisFileDirectory)Helpers\IWaitableSample.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)Helpers\UWPViewHelper.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)Helpers\ViewModelBase.cs" />
+    <Compile Include="$(MSBuildThisFileDirectory)Helpers\WaitableSampleImageHelpers.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)Lottie\LottieEmbeddedJson.xaml.cs">
       <DependentUpon>LottieEmbeddedJson.xaml</DependentUpon>
     </Compile>
@@ -9656,4 +9657,4 @@
     </Compile>
   </ItemGroup>
   <Import Project="ItemExclusions.props" />
-</Project>
+</Project>

src/SamplesApp/UITests.Shared/Windows_Media/MediaPlayerTests.xaml.cs

@@ -22,7 +22,7 @@
 
 namespace UITests.Windows_Media
 {
-	[SampleControlInfo("Windows.Media", "MediaPlayer")]
+	[SampleControlInfo("Windows.Media", "MediaPlayer", IgnoreInSnapshotTests = true)]
 	public sealed partial class MediaPlayerTests : Page
 	{
 		public MediaPlayerTests()

src/SamplesApp/UITests.Shared/Windows_UI_Xaml_Controls/ImageTests/ImageInStackPanel.xaml

@@ -20,7 +20,7 @@
 		<TextBlock Text="Images with MaxHeight and Uniform Stretch inside a vertical StackPanel with HorizontalAlignment not set to Stretch, don't appear on Android." />
 		<StackPanel Orientation="Vertical"
 							HorizontalAlignment="Left">
-			<Image Source="http://lh5.ggpht.com/lxBMauupBiLIpgOgu5apeiX_YStXeHRLK1oneS4NfwwNt7fGDKMP0KpQIMwfjfL9GdHRVEavmg7gOrj5RYC4qwrjh3Y0jCWFDj83jzg"
+			<Image x:Name="image1" Source="http://lh5.ggpht.com/lxBMauupBiLIpgOgu5apeiX_YStXeHRLK1oneS4NfwwNt7fGDKMP0KpQIMwfjfL9GdHRVEavmg7gOrj5RYC4qwrjh3Y0jCWFDj83jzg"
 							   MaxHeight="200"
 							   Stretch="Uniform" />
 		</StackPanel>

src/SamplesApp/UITests.Shared/Windows_UI_Xaml_Controls/ImageTests/ImageInStackPanel.xaml.cs

@@ -1,14 +1,21 @@
 using Uno.UI.Samples.Controls;
 using Microsoft.UI.Xaml.Controls;
+using UITests.Shared.Helpers;
+using System.Threading.Tasks;
 
 namespace Uno.UI.Samples.UITests.Image
 {
 	[SampleControlInfo(category: "Image", Description = "ImageInStackPanel")]
-	public sealed partial class ImageInStackPanel : UserControl
+	public sealed partial class ImageInStackPanel : UserControl, IWaitableSample
 	{
+		private readonly Task _samplePreparedTask;
+
 		public ImageInStackPanel()
 		{
 			this.InitializeComponent();
+			_samplePreparedTask = WaitableSampleImageHelpers.WaitAllImages(image1);
 		}
+
+		public Task SamplePreparedTask => _samplePreparedTask;
 	}
 }

src/SamplesApp/UITests.Shared/Windows_UI_Xaml_Controls/ImageTests/SvgImageSource_Icons.xaml

@@ -11,11 +11,11 @@
 
 	<Grid Padding="20">
 		<StackPanel Spacing="8" Width="200">
-			<Image Source="ms-appx:///Assets/Formats/couch.svg" Stretch="UniformToFill" Width="40" Height="40" />
+			<Image x:Name="image1" Source="ms-appx:///Assets/Formats/couch.svg" Stretch="UniformToFill" Width="40" Height="40" />
 			<Button HorizontalAlignment="Center" Click="OnClick" x:Name="MenuButton">Click me</Button>
 			<Button HorizontalAlignment="Center" Click="OnDelayedClick" x:Name="MenuDelayedButton">Click me (delayed)</Button>
-			<mux:ImageIcon Source="ms-appx:///Assets/Formats/heliocentric.svg" />
-			<BitmapIcon UriSource="ms-appx:///Assets/Formats/bookstack.svg" />
+			<mux:ImageIcon x:Name="imageIcon1" Source="ms-appx:///Assets/Formats/heliocentric.svg" />
+			<BitmapIcon x:Name="bitmapIcon1" UriSource="ms-appx:///Assets/Formats/bookstack.svg" />
 		</StackPanel>
 	</Grid>
 </Page>

src/SamplesApp/UITests.Shared/Windows_UI_Xaml_Controls/ImageTests/SvgImageSource_Icons.xaml.cs

@@ -12,17 +12,26 @@
 using Microsoft.UI.Xaml.Controls.Primitives;
 using Microsoft.UI.Xaml.Media;
 using Microsoft.UI.Xaml.Media.Imaging;
+using UITests.Shared.Helpers;
 
 namespace UITests.Windows_UI_Xaml_Controls.ImageTests;
 
 [Sample("Image")]
-public sealed partial class SvgImageSource_Icons : Page
+public sealed partial class SvgImageSource_Icons : Page, IWaitableSample
 {
+	private readonly Task _samplePreparedTask;
+
 	public SvgImageSource_Icons()
 	{
 		this.InitializeComponent();
+		_samplePreparedTask = Task.WhenAll(
+			WaitableSampleImageHelpers.WaitAllImages(image1),
+			WaitableSampleImageHelpers.WaitAllImages((SvgImageSource)imageIcon1.Source)
+		);
 	}
 
+	public Task SamplePreparedTask => _samplePreparedTask;
+
 	private async void OnClick(object sender, RoutedEventArgs args)
 	{
 		var svgImageSource = new SvgImageSource { RasterizePixelHeight = 48, RasterizePixelWidth = 48 };

src/SamplesApp/UITests.Shared/Windows_UI_Xaml_Controls/ImageTests/Uniform100x100.xaml

@@ -9,7 +9,7 @@
 			 d:DesignHeight="300"
 			 d:DesignWidth="400">
 
-	<Image Source="https://lh5.ggpht.com/lxBMauupBiLIpgOgu5apeiX_YStXeHRLK1oneS4NfwwNt7fGDKMP0KpQIMwfjfL9GdHRVEavmg7gOrj5RYC4qwrjh3Y0jCWFDj83jzg"
+	<Image x:Name="image1" Source="https://lh5.ggpht.com/lxBMauupBiLIpgOgu5apeiX_YStXeHRLK1oneS4NfwwNt7fGDKMP0KpQIMwfjfL9GdHRVEavmg7gOrj5RYC4qwrjh3Y0jCWFDj83jzg"
 				   Width="100"
 				   Height="100"
 				   Stretch="Uniform" />

src/SamplesApp/UITests.Shared/Windows_UI_Xaml_Controls/ImageTests/Uniform100x100.xaml.cs

@@ -13,15 +13,22 @@
 using Microsoft.UI.Xaml.Input;
 using Microsoft.UI.Xaml.Media;
 using Microsoft.UI.Xaml.Navigation;
+using UITests.Shared.Helpers;
+using System.Threading.Tasks;
 
 namespace Uno.UI.Samples.UITests.ImageTestsControl
 {
 	[SampleControlInfo("Image", "Uniform100x100", Description = "Uniform100x100")]
-	public sealed partial class Uniform100x100 : UserControl
+	public sealed partial class Uniform100x100 : UserControl, IWaitableSample
 	{
+		private readonly Task _samplePreparedTask;
+
 		public Uniform100x100()
 		{
 			this.InitializeComponent();
+			_samplePreparedTask = WaitableSampleImageHelpers.WaitAllImages(image1);
 		}
+
+		public Task SamplePreparedTask => _samplePreparedTask;
 	}
 }

src/SamplesApp/UITests.Shared/Windows_UI_Xaml_Controls/ImageTests/UniformAlignmentCenterInDoubleStackPanelWebUri.xaml

@@ -1,18 +1,10 @@
 <UserControl x:Class="Uno.UI.Samples.UITests.ImageTestsControl.UniformAlignmentCenterInDoubleStackPanelWebUri"
-    xmlns:controls="using:Uno.UI.Samples.Controls"
 			 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 			 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 			 xmlns:local="GenericApp.Views.Content.UITests.ImageTestsControl"
 			 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 			 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-			 xmlns:u="using:nVentive.Umbrella.Views.Controls"
-			 xmlns:uBehaviors="using:nVentive.Umbrella.Views.Behaviors"
-			 xmlns:ios="http://nventive.com/ios"
-			 xmlns:win="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-			 xmlns:android="http://nventive.com/android"
-			 mc:Ignorable="d ios android"
-			 d:DesignHeight="500"
-			 d:DesignWidth="400">
+			 mc:Ignorable="d">
 
 	<StackPanel
     Orientation="Horizontal"
@@ -25,7 +17,7 @@
 			<TextBlock Text="Inner StackPanel"/>
 			<TextBlock Text="This image has Stretch set to Uniform and HorizontalAlignment + VerticalAlignment set to Center" />
 
-			<Image Source="http://lh5.ggpht.com/lxBMauupBiLIpgOgu5apeiX_YStXeHRLK1oneS4NfwwNt7fGDKMP0KpQIMwfjfL9GdHRVEavmg7gOrj5RYC4qwrjh3Y0jCWFDj83jzg" 
+			<Image x:Name="image1" Source="http://lh5.ggpht.com/lxBMauupBiLIpgOgu5apeiX_YStXeHRLK1oneS4NfwwNt7fGDKMP0KpQIMwfjfL9GdHRVEavmg7gOrj5RYC4qwrjh3Y0jCWFDj83jzg" 
 					   Stretch="Uniform"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"/>

src/SamplesApp/UITests.Shared/Windows_UI_Xaml_Controls/ImageTests/UniformAlignmentCenterInDoubleStackPanelWebUri.xaml.cs

@@ -13,15 +13,22 @@
 using Microsoft.UI.Xaml.Input;
 using Microsoft.UI.Xaml.Media;
 using Microsoft.UI.Xaml.Navigation;
+using UITests.Shared.Helpers;
+using System.Threading.Tasks;
 
 namespace Uno.UI.Samples.UITests.ImageTestsControl
 {
 	[SampleControlInfo("Image", "UniformAlignmentCenterInDoubleStackPanelWebUri", Description = "UniformAlignmentCenterInDoubleStackPanelWebUri - The image below should still appear the second time the sample is loaded")]
-	public sealed partial class UniformAlignmentCenterInDoubleStackPanelWebUri : UserControl
+	public sealed partial class UniformAlignmentCenterInDoubleStackPanelWebUri : UserControl, IWaitableSample
 	{
+		private readonly Task _samplePreparedTask;
+
 		public UniformAlignmentCenterInDoubleStackPanelWebUri()
 		{
 			this.InitializeComponent();
+			_samplePreparedTask = WaitableSampleImageHelpers.WaitAllImages(image1);
 		}
+
+		public Task SamplePreparedTask => _samplePreparedTask;
 	}
 }

src/SamplesApp/UITests.Shared/Windows_UI_Xaml_Controls/MediaPlayerElement/MediaPlayerElement_3gp_Extension.xaml.cs

@@ -18,7 +18,7 @@
 
 namespace UITests.Shared.Windows_UI_Xaml_Controls.MediaPlayerElement
 {
-	[SampleControlInfo("MediaPlayerElement", "Using .3gp", description: "Test .3gp video")]
+	[SampleControlInfo("MediaPlayerElement", "Using .3gp", description: "Test .3gp video", IgnoreInSnapshotTests = true)]
 	public sealed partial class MediaPlayerElement_3gp_Extension : UserControl
 	{
 		public MediaPlayerElement_3gp_Extension()

src/SamplesApp/UITests.Shared/Windows_UI_Xaml_Controls/MediaPlayerElement/MediaPlayerElement_Mp3_Extension.xaml.cs

@@ -16,7 +16,7 @@
 
 namespace UITests.Shared.Windows_UI_Xaml_Controls.MediaPlayerElement
 {
-	[SampleControlInfo("MediaPlayerElement", "Using .mp3 (Audio only)", description: "MediaPlayerElement test using .mp3 (Audio only) with PosterSource")]
+	[SampleControlInfo("MediaPlayerElement", "Using .mp3 (Audio only)", description: "MediaPlayerElement test using .mp3 (Audio only) with PosterSource", IgnoreInSnapshotTests = true)]
 	public sealed partial class MediaPlayerElement_Mp3_Extension : Page
 	{
 		public MediaPlayerElement_Mp3_Extension()

src/SamplesApp/UITests.Shared/Windows_UI_Xaml_Controls/MediaPlayerElement/MediaPlayerElement_Sources.xaml.cs

@@ -19,7 +19,7 @@
 
 namespace UITests.Shared.Windows_UI_Xaml_Controls.MediaPlayerElement
 {
-	[SampleControlInfo("MediaPlayerElement", "Sources", description: "Test for dynamic sources")]
+	[SampleControlInfo("MediaPlayerElement", "Sources", description: "Test for dynamic sources", IgnoreInSnapshotTests = true)]
 	public sealed partial class MediaPlayerElement_Sources : UserControl
 	{
 		public MediaPlayerElement_Sources()

src/SamplesApp/UITests.Shared/Windows_UI_Xaml_Media/ImageBrushTests/BorderImageBrush.xaml

@@ -1,68 +1,52 @@
 <UserControl x:Class="Uno.UI.Samples.UITests.ImageBrushTestControl.BorderImageBrush"
-			 xmlns:controls="using:Uno.UI.Samples.Controls"
 			 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 			 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 			 xmlns:local="using:Uno.UI.Samples.UITests"
 			 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 			 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-			 xmlns:u="using:Uno.UI.Samples.Controls"
-			 xmlns:uBehaviors="using:Uno.UI.Samples.Behaviors"
-			 xmlns:ios="http://uno.ui/ios"
-			 xmlns:win="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-			 xmlns:android="http://uno.ui/android"
-			 xmlns:not_ios="http://uno.ui/not_ios"
-			 xmlns:shapes="clr-namespace:Microsoft.UI.Xaml.Shapes;assembly=Uno"
-			 mc:Ignorable="d ios android"
-			 d:DesignHeight="600"
-			 d:DesignWidth="400">
-    <controls:SampleControl SampleDescription="BorderImageBrush">
-        <controls:SampleControl.SampleContent>
-            <DataTemplate>
-                <StackPanel>
-                    <TextBlock Text="This should display an image with a red border." />
-                    <Border BorderBrush="Red"
-							BorderThickness="30"
-							CornerRadius="50,0,25,10"
-							Width="200"
-							Height="100">
-                        <Border.Background>
-                            <ImageBrush x:Name="imageBrush1" ImageSource="http://lh5.ggpht.com/lxBMauupBiLIpgOgu5apeiX_YStXeHRLK1oneS4NfwwNt7fGDKMP0KpQIMwfjfL9GdHRVEavmg7gOrj5RYC4qwrjh3Y0jCWFDj83jzg" />
-                        </Border.Background>
-                    </Border>
+			 mc:Ignorable="d">
+	<StackPanel>
+		<TextBlock Text="This should display an image with a red border." />
+		<Border BorderBrush="Red"
+						BorderThickness="30"
+						CornerRadius="50,0,25,10"
+						Width="200"
+						Height="100">
+			<Border.Background>
+				<ImageBrush x:Name="imageBrush1" ImageSource="http://lh5.ggpht.com/lxBMauupBiLIpgOgu5apeiX_YStXeHRLK1oneS4NfwwNt7fGDKMP0KpQIMwfjfL9GdHRVEavmg7gOrj5RYC4qwrjh3Y0jCWFDj83jzg" />
+			</Border.Background>
+		</Border>
 
-                    <TextBlock Text="This should display a red rectangle with an image border brush." />
-                    <Border Background="Red"
-							BorderThickness="30"
-							CornerRadius="10,0,10,0"
-							Width="200"
-							Height="100">
-                        <Border.BorderBrush>
-							<ImageBrush x:Name="imageBrush2" ImageSource="http://lh5.ggpht.com/lxBMauupBiLIpgOgu5apeiX_YStXeHRLK1oneS4NfwwNt7fGDKMP0KpQIMwfjfL9GdHRVEavmg7gOrj5RYC4qwrjh3Y0jCWFDj83jzg" />
-                        </Border.BorderBrush>
-                    </Border>
-
-					<TextBlock Text="This should display a thin red circle with an image fill." />
-                    <Border BorderBrush="Red"
-							BorderThickness="1"
-							CornerRadius="100"
-							Width="200"
-							Height="200">
-                        <Border.Background>
-							<ImageBrush x:Name="imageBrush3" ImageSource="http://lh5.ggpht.com/lxBMauupBiLIpgOgu5apeiX_YStXeHRLK1oneS4NfwwNt7fGDKMP0KpQIMwfjfL9GdHRVEavmg7gOrj5RYC4qwrjh3Y0jCWFDj83jzg" />
-                        </Border.Background>
-                    </Border>
-
-					<TextBlock Text="This should display a rectangle with variable border thickness (48,24,12,6) with an image inside." />
-                    <Border BorderBrush="Red"
-							BorderThickness="48,24,12,6"
-							Width="200"
-							Height="100">
-                        <Border.Background>
-							<ImageBrush x:Name="imageBrush4" ImageSource="http://lh5.ggpht.com/lxBMauupBiLIpgOgu5apeiX_YStXeHRLK1oneS4NfwwNt7fGDKMP0KpQIMwfjfL9GdHRVEavmg7gOrj5RYC4qwrjh3Y0jCWFDj83jzg" />
-                        </Border.Background>
-                    </Border>
-                </StackPanel>
-            </DataTemplate>
-        </controls:SampleControl.SampleContent>
-    </controls:SampleControl>
+		<TextBlock Text="This should display a red rectangle with an image border brush." />
+		<Border Background="Red"
+						BorderThickness="30"
+						CornerRadius="10,0,10,0"
+						Width="200"
+						Height="100">
+			<Border.BorderBrush>
+				<ImageBrush x:Name="imageBrush2" ImageSource="http://lh5.ggpht.com/lxBMauupBiLIpgOgu5apeiX_YStXeHRLK1oneS4NfwwNt7fGDKMP0KpQIMwfjfL9GdHRVEavmg7gOrj5RYC4qwrjh3Y0jCWFDj83jzg" />
+			</Border.BorderBrush>
+		</Border>
+
+		<TextBlock Text="This should display a thin red circle with an image fill." />
+		<Border BorderBrush="Red"
+						BorderThickness="1"
+						CornerRadius="100"
+						Width="200"
+						Height="200">
+			<Border.Background>
+				<ImageBrush x:Name="imageBrush3" ImageSource="http://lh5.ggpht.com/lxBMauupBiLIpgOgu5apeiX_YStXeHRLK1oneS4NfwwNt7fGDKMP0KpQIMwfjfL9GdHRVEavmg7gOrj5RYC4qwrjh3Y0jCWFDj83jzg" />
+			</Border.Background>
+		</Border>
+
+		<TextBlock Text="This should display a rectangle with variable border thickness (48,24,12,6) with an image inside." />
+		<Border BorderBrush="Red"
+						BorderThickness="48,24,12,6"
+						Width="200"
+						Height="100">
+			<Border.Background>
+				<ImageBrush x:Name="imageBrush4" ImageSource="http://lh5.ggpht.com/lxBMauupBiLIpgOgu5apeiX_YStXeHRLK1oneS4NfwwNt7fGDKMP0KpQIMwfjfL9GdHRVEavmg7gOrj5RYC4qwrjh3Y0jCWFDj83jzg" />
+			</Border.Background>
+		</Border>
+	</StackPanel>
 </UserControl>