Merge pull request #7100 from StoDevX/noticeview-snapshot-tests

Add basic snapshot tests to `notice` module using react-test-renderer

Author: rye

modules/notice/__tests__/LoadingView.test.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import {describe, expect, test} from '@jest/globals'
+
+import TestRenderer from 'react-test-renderer'
+import {LoadingView} from '../loading'
+
+describe('LoadingView', () => {
+	test('it displays "Loading…" when no text is supplied', () => {
+		const tree = TestRenderer.create(<LoadingView />).toJSON()
+		expect(tree).toMatchSnapshot()
+	})
+
+	test('it displays text when text is supplied', () => {
+		const tree = TestRenderer.create(<LoadingView text="foo bar" />).toJSON()
+		expect(tree).toMatchSnapshot()
+	})
+})

modules/notice/__tests__/NoticeView.test.tsx

@@ -0,0 +1,63 @@
+import React from 'react'
+import {StyleSheet} from 'react-native'
+import {describe, expect, it} from '@jest/globals'
+
+import TestRenderer from 'react-test-renderer'
+import {NoticeView} from '../notice'
+
+describe('NoticeView', () => {
+	describe('when given no text to display', () => {
+		it('displays "Notice!" as its text', () => {
+			const tree = TestRenderer.create(<NoticeView />).toJSON()
+			expect(tree).toMatchSnapshot()
+		})
+	})
+
+	describe('when given text to display', () => {
+		it('displays the text', () => {
+			const tree = TestRenderer.create(<NoticeView text="foo bar" />).toJSON()
+			expect(tree).toMatchSnapshot()
+		})
+	})
+
+	describe('when given view style overrides', () => {
+		it('applies view style overrides', () => {
+			const styleOverride = StyleSheet.create({
+				view: {
+					padding: 31,
+				},
+			})
+			const tree = TestRenderer.create(
+				<NoticeView style={styleOverride.view} text="foo bar" />,
+			).toJSON()
+			expect(tree).toMatchSnapshot()
+		})
+	})
+
+	describe('when instructed to display a spinner', () => {
+		it('displays a spinner', () => {
+			const tree = TestRenderer.create(
+				<NoticeView spinner={true} text="foo bar" />,
+			).toJSON()
+			expect(tree).toMatchSnapshot()
+		})
+	})
+
+	describe('when header text is given', () => {
+		it('displays the header text', () => {
+			const tree = TestRenderer.create(
+				<NoticeView header="blammo" text="foo bar" />,
+			).toJSON()
+			expect(tree).toMatchSnapshot()
+		})
+	})
+
+	describe('when buttonText is given', () => {
+		it('displays a button with the buttonText in its title', () => {
+			const tree = TestRenderer.create(
+				<NoticeView buttonText="button text" text="foo bar" />,
+			).toJSON()
+			expect(tree).toMatchSnapshot()
+		})
+	})
+})

modules/notice/__tests__/__snapshots__/LoadingView.test.tsx.snap

@@ -0,0 +1,99 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`LoadingView it displays "Loading…" when no text is supplied 1`] = `
+<View
+  style={
+    [
+      {
+        "alignItems": "center",
+        "backgroundColor": {
+          "semantic": [
+            "systemBackground",
+          ],
+        },
+        "flex": 1,
+        "justifyContent": "center",
+        "paddingHorizontal": 30,
+      },
+      undefined,
+    ]
+  }
+>
+  <ActivityIndicator
+    style={
+      {
+        "alignItems": "center",
+        "justifyContent": "center",
+        "padding": 8,
+      }
+    }
+  />
+  <Text
+    selectable={true}
+    style={
+      [
+        {
+          "color": {
+            "semantic": [
+              "label",
+            ],
+          },
+          "textAlign": "center",
+        },
+        undefined,
+      ]
+    }
+  >
+    Loading…
+  </Text>
+</View>
+`;
+
+exports[`LoadingView it displays text when text is supplied 1`] = `
+<View
+  style={
+    [
+      {
+        "alignItems": "center",
+        "backgroundColor": {
+          "semantic": [
+            "systemBackground",
+          ],
+        },
+        "flex": 1,
+        "justifyContent": "center",
+        "paddingHorizontal": 30,
+      },
+      undefined,
+    ]
+  }
+>
+  <ActivityIndicator
+    style={
+      {
+        "alignItems": "center",
+        "justifyContent": "center",
+        "padding": 8,
+      }
+    }
+  />
+  <Text
+    selectable={true}
+    style={
+      [
+        {
+          "color": {
+            "semantic": [
+              "label",
+            ],
+          },
+          "textAlign": "center",
+        },
+        undefined,
+      ]
+    }
+  >
+    foo bar
+  </Text>
+</View>
+`;