Add Snapshot Tests for Button, Pressable, and ScrollView (#10597)

* Snapshot Tests * Update Colors * Update Colors * Update Colors * Update Colors * Update Colors * Update Colors * Fix Colors * Fix Hex * Fix Hex * Fix Hex
microsoft · Sep 29, 2022 · 19110d7 · 19110d7
1 parent a0606f3
commit 19110d7
Show file tree

Hide file tree

Showing 6 changed files with 6,765 additions and 0 deletions.
diff --git a/packages/e2e-test-app/test/ButtonComponentTest.test.ts b/packages/e2e-test-app/test/ButtonComponentTest.test.ts
@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ * Licensed under the MIT License.
+ *
+ * @format
+ */
+
+import {dumpVisualTree} from '@react-native-windows/automation-commands';
+import {goToComponentExample} from './RNTesterNavigation';
+
+beforeAll(async () => {
+  await goToComponentExample('Button');
+});
+
+describe('ButtonTests', () => {
+  test('Buttons have default styling', async () => {
+    const dump = await dumpVisualTree('button_default_styling');
+    expect(dump).toMatchSnapshot();
+  });
+  test('Buttons can have custom colors', async () => {
+    const dump = await dumpVisualTree('cancel_button');
+    expect(dump).toMatchSnapshot();
+  });
+  test('Buttons can be disabled', async () => {
+    const dump = await dumpVisualTree('disabled_button');
+    expect(dump).toMatchSnapshot();
+  });
+  test('Buttons can have accessibility labels', async () => {
+    const dump = await dumpVisualTree('accessibilityLabel_button');
+    expect(dump).toMatchSnapshot();
+  });
+  test('Buttons can have accessibility states', async () => {
+    const dump = await dumpVisualTree('accessibilityState_button');
+    expect(dump).toMatchSnapshot();
+  });
+});
diff --git a/packages/e2e-test-app/test/PressableComponentTest.test.ts b/packages/e2e-test-app/test/PressableComponentTest.test.ts
@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ * Licensed under the MIT License.
+ *
+ * @format
+ */
+
+import {dumpVisualTree} from '@react-native-windows/automation-commands';
+import {goToComponentExample} from './RNTesterNavigation';
+
+beforeAll(async () => {
+  await goToComponentExample('Pressable');
+});
+
+describe('PressableTests', () => {
+  test('Pressables can change text on press/rest, state rest', async () => {
+    const dump = await dumpVisualTree('pressable_press_console');
+    expect(dump).toMatchSnapshot();
+  });
+  test('Pressables can have event handlers', async () => {
+    const dump = await dumpVisualTree('pressable_feedback_events_button');
+    expect(dump).toMatchSnapshot();
+  });
+  test('Pressables can have delayed event handlers', async () => {
+    const dump = await dumpVisualTree('pressable_delay_events_button');
+    expect(dump).toMatchSnapshot();
+  });
+  test('Pressables can have hit slop functionality', async () => {
+    const dump = await dumpVisualTree('pressable_hit_slop_button');
+    expect(dump).toMatchSnapshot();
+  });
+});
diff --git a/packages/e2e-test-app/test/ScrollViewComponentTest.test.ts b/packages/e2e-test-app/test/ScrollViewComponentTest.test.ts
@@ -0,0 +1,56 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ * Licensed under the MIT License.
+ *
+ * @format
+ */
+
+import {dumpVisualTree} from '@react-native-windows/automation-commands';
+import {goToComponentExample} from './RNTesterNavigation';
+
+beforeAll(async () => {
+  await goToComponentExample('ScrollView');
+});
+
+describe('ScrollViewTests', () => {
+  test('ScrollViews can scroll an item list vertically', async () => {
+    const dump = await dumpVisualTree('scroll_vertical');
+    expect(dump).toMatchSnapshot();
+  });
+  test('ScrollView has scrollTo method, scroll to top button', async () => {
+    const dump = await dumpVisualTree('scroll_to_top_button');
+    expect(dump).toMatchSnapshot();
+  });
+  test('ScrollView has scrollTo method, scroll to bottom button', async () => {
+    const dump = await dumpVisualTree('scroll_to_bottom_button');
+    expect(dump).toMatchSnapshot();
+  });
+  test('ScrollViews has flash scroll indicators', async () => {
+    const dump = await dumpVisualTree('flash_scroll_indicators_button');
+    expect(dump).toMatchSnapshot();
+  });
+  test('ScrollViews can scroll an item list horizontally', async () => {
+    const dump = await dumpVisualTree('scroll_horizontal');
+    expect(dump).toMatchSnapshot();
+  });
+  test('ScrollView has scrollTo method, scroll to start button', async () => {
+    const dump = await dumpVisualTree('scroll_to_start_button');
+    expect(dump).toMatchSnapshot();
+  });
+  test('ScrollView has scrollTo method, scroll to end button', async () => {
+    const dump = await dumpVisualTree('scroll_to_end_button');
+    expect(dump).toMatchSnapshot();
+  });
+  test('ScrollViews can have sticky headers', async () => {
+    const dump = await dumpVisualTree('scroll_sticky_header');
+    expect(dump).toMatchSnapshot();
+  });
+  test('ScrollViews can have multiple sticky headers', async () => {
+    const dump = await dumpVisualTree('scroll_multiple_sticky_headers');
+    expect(dump).toMatchSnapshot();
+  });
+  test('ScrollViews can have pressable sticky headers', async () => {
+    const dump = await dumpVisualTree('scroll_pressable_sticky_header');
+    expect(dump).toMatchSnapshot();
+  });
+});