Merge pull request #3984 from aryaemami59/rn-example-ci

Add React Native demo app to CI workflow

.github/workflows/tests.yml

@@ -149,7 +149,7 @@ jobs:
       fail-fast: false
       matrix:
         node: ['18.x']
-        example: ['cra4', 'cra5', 'next', 'vite', 'node-standard', 'node-esm', 'expo']
+        example: ['cra4', 'cra5', 'next', 'vite', 'node-standard', 'node-esm', 'react-native', 'expo']
     defaults:
       run:
         working-directory: ./examples/publish-ci/${{ matrix.example }}

examples/publish-ci/react-native/.bundle/config

@@ -0,0 +1,2 @@
+BUNDLE_PATH: "vendor/bundle"
+BUNDLE_FORCE_RUBY_PLATFORM: 1

examples/publish-ci/react-native/.eslintrc.json

@@ -0,0 +1,34 @@
+{
+  "extends": [
+    "eslint:recommended",
+    "@react-native",
+    "plugin:react/jsx-runtime",
+    "prettier"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": { "project": true, "tsconfigRootDir": "./" },
+  "plugins": ["@typescript-eslint"],
+  "root": true,
+  "rules": {
+    "@typescript-eslint/consistent-type-imports": [
+      2,
+      { "fixStyle": "separate-type-imports" }
+    ],
+    "@typescript-eslint/no-restricted-imports": [
+      2,
+      {
+        "paths": [
+          {
+            "name": "react-redux",
+            "importNames": ["useSelector", "useStore", "useDispatch"],
+            "message": "Please use pre-typed versions from `src/app/hooks.ts` instead."
+          }
+        ]
+      }
+    ]
+  },
+  "overrides": [
+    { "files": ["*.{c,m,}{t,j}s", "*.{t,j}sx"] },
+    { "files": ["*{test,spec}.{t,j}s?(x)"], "env": { "jest": true } }
+  ]
+}

examples/publish-ci/react-native/.gitignore

@@ -0,0 +1,70 @@
+# OSX
+#
+.DS_Store
+
+# Xcode
+#
+build/
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+*.xccheckout
+*.moved-aside
+DerivedData
+*.hmap
+*.ipa
+*.xcuserstate
+ios/.xcode.env.local
+
+# Android/IntelliJ
+#
+build/
+.idea
+.gradle
+local.properties
+*.iml
+*.hprof
+.cxx/
+*.keystore
+!debug.keystore
+
+# node.js
+#
+node_modules/
+npm-debug.log
+yarn-error.log
+.yarn/
+
+# fastlane
+#
+# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
+# screenshots whenever they are needed.
+# For more information about the recommended setup visit:
+# https://docs.fastlane.tools/best-practices/source-control/
+
+**/fastlane/report.xml
+**/fastlane/Preview.html
+**/fastlane/screenshots
+**/fastlane/test_output
+
+# Bundle artifact
+*.jsbundle
+
+# Ruby / CocoaPods
+/ios/Pods/
+/vendor/bundle/
+
+# Temporary files created by Metro to check the health of the file watcher
+.metro-health-check*
+
+# testing
+/coverage
+
+#IDE
+.vscode

examples/publish-ci/react-native/.prettierrc.json

@@ -0,0 +1,4 @@
+{
+  "arrowParens": "avoid",
+  "semi": false
+}

examples/publish-ci/react-native/.watchmanconfig

@@ -0,0 +1 @@
+{}

examples/publish-ci/react-native/App.test.tsx

@@ -0,0 +1,105 @@
+import { screen, waitFor } from "@testing-library/react-native"
+import { App } from "./App"
+import { renderWithProviders } from "./src/utils/test-utils"
+
+test("App should have correct initial render", () => {
+  renderWithProviders(<App />)
+
+  // The app should be rendered correctly
+  expect(screen.getByText(/learn more redux/i)).toBeOnTheScreen()
+
+  // Initial state: count should be 0, incrementValue should be 2
+  expect(screen.getByLabelText("Count")).toHaveTextContent("0")
+  expect(screen.getByLabelText("Set increment amount")).toHaveDisplayValue("2")
+})
+
+test("Increment value and Decrement value should work as expected", async () => {
+  const { user } = renderWithProviders(<App />)
+
+  // Click on "+" => Count should be 1
+  await user.press(screen.getByLabelText("Increment value"))
+  expect(screen.getByLabelText("Count")).toHaveTextContent("1")
+
+  // Click on "-" => Count should be 0
+  await user.press(screen.getByLabelText("Decrement value"))
+  expect(screen.getByLabelText("Count")).toHaveTextContent("0")
+})
+
+test("Add Amount should work as expected", async () => {
+  const { user } = renderWithProviders(<App />)
+
+  // "Add Amount" button is clicked => Count should be 2
+  await user.press(screen.getByText("Add Amount"))
+  expect(screen.getByLabelText("Count")).toHaveTextContent("2")
+
+  const incrementValueInput = screen.getByLabelText("Set increment amount")
+  // incrementValue is 2, click on "Add Amount" => Count should be 4
+  await user.clear(incrementValueInput)
+  await user.type(incrementValueInput, "2")
+  await user.press(screen.getByText("Add Amount"))
+  expect(screen.getByLabelText("Count")).toHaveTextContent("4")
+
+  // [Negative number] incrementValue is -1, click on "Add Amount" => Count should be 3
+  await user.clear(incrementValueInput)
+  await user.type(incrementValueInput, "-1")
+  await user.press(screen.getByText("Add Amount"))
+  expect(screen.getByLabelText("Count")).toHaveTextContent("3")
+})
+
+it("Add Async should work as expected", async () => {
+  const { user } = renderWithProviders(<App />)
+
+  // "Add Async" button is clicked => Count should be 2
+  await user.press(screen.getByText("Add Async"))
+
+  await waitFor(() => {
+    expect(screen.getByLabelText("Count")).toHaveTextContent("2")
+  })
+
+  const incrementValueInput = screen.getByLabelText("Set increment amount")
+  // incrementValue is 2, click on "Add Async" => Count should be 4
+  await user.clear(incrementValueInput)
+  await user.type(incrementValueInput, "2")
+
+  await user.press(screen.getByText("Add Async"))
+  await waitFor(() => {
+    expect(screen.getByLabelText("Count")).toHaveTextContent("4")
+  })
+
+  // [Negative number] incrementValue is -1, click on "Add Async" => Count should be 3
+  await user.clear(incrementValueInput)
+  await user.type(incrementValueInput, "-1")
+  await user.press(screen.getByText("Add Async"))
+  await waitFor(() => {
+    expect(screen.getByLabelText("Count")).toHaveTextContent("3")
+  })
+})
+
+test("Add If Odd should work as expected", async () => {
+  const { user } = renderWithProviders(<App />)
+
+  // "Add If Odd" button is clicked => Count should stay 0
+  await user.press(screen.getByText("Add If Odd"))
+  expect(screen.getByLabelText("Count")).toHaveTextContent("0")
+
+  // Click on "+" => Count should be updated to 1
+  await user.press(screen.getByLabelText("Increment value"))
+  expect(screen.getByLabelText("Count")).toHaveTextContent("1")
+
+  // "Add If Odd" button is clicked => Count should be updated to 3
+  await user.press(screen.getByText("Add If Odd"))
+  expect(screen.getByLabelText("Count")).toHaveTextContent("3")
+
+  const incrementValueInput = screen.getByLabelText("Set increment amount")
+  // incrementValue is 1, click on "Add If Odd" => Count should be updated to 4
+  await user.clear(incrementValueInput)
+  await user.type(incrementValueInput, "1")
+  await user.press(screen.getByText("Add If Odd"))
+  expect(screen.getByLabelText("Count")).toHaveTextContent("4")
+
+  // click on "Add If Odd" => Count should stay 4
+  await user.clear(incrementValueInput)
+  await user.type(incrementValueInput, "-1")
+  await user.press(screen.getByText("Add If Odd"))
+  expect(screen.getByLabelText("Count")).toHaveTextContent("4")
+})

examples/publish-ci/react-native/App.tsx

@@ -0,0 +1,78 @@
+import {
+  SafeAreaView,
+  ScrollView,
+  StatusBar,
+  StyleSheet,
+  Text,
+  View,
+  useColorScheme,
+} from "react-native"
+import { Counter } from "./src/features/counter/Counter"
+
+import {
+  DebugInstructions,
+  HermesBadge,
+  LearnMoreLinks,
+  ReloadInstructions,
+} from "react-native/Libraries/NewAppScreen"
+import { Header } from "./src/components/Header"
+import { LearnReduxLinks } from "./src/components/LearnReduxLinks"
+import { Section } from "./src/components/Section"
+import { TypedColors } from "./src/constants/TypedColors"
+import { Quotes } from "./src/features/quotes/Quotes"
+
+export const App = () => {
+  const isDarkMode = useColorScheme() === "dark"
+
+  const backgroundStyle = {
+    backgroundColor: isDarkMode ? TypedColors.darker : TypedColors.lighter,
+  }
+
+  return (
+    <SafeAreaView style={backgroundStyle}>
+      <StatusBar
+        barStyle={isDarkMode ? "light-content" : "dark-content"}
+        backgroundColor={backgroundStyle.backgroundColor}
+      />
+      <ScrollView
+        contentInsetAdjustmentBehavior="automatic"
+        style={backgroundStyle}
+      >
+        <Header />
+        <HermesBadge />
+        <View
+          style={{
+            backgroundColor: isDarkMode ? TypedColors.black : TypedColors.white,
+          }}
+        >
+          <Counter />
+          <Quotes />
+          <Section title="Step One">
+            Edit <Text style={styles.highlight}>App.tsx</Text> to change this
+            screen and then come back to see your edits.
+          </Section>
+          <Section title="See Your Changes">
+            <ReloadInstructions />
+          </Section>
+          <Section title="Debug">
+            <DebugInstructions />
+          </Section>
+          <Section title="Learn More Redux">
+            Discover what to do next with Redux:
+          </Section>
+          <LearnReduxLinks />
+          <Section title="Learn More React Native">
+            Read the docs to discover what to do next:
+          </Section>
+          <LearnMoreLinks />
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  )
+}
+
+const styles = StyleSheet.create({
+  highlight: {
+    fontWeight: "700",
+  },
+})

examples/publish-ci/react-native/Gemfile

@@ -0,0 +1,7 @@
+source 'https://rubygems.org'
+
+# You may use http://rbenv.org/ or https://rvm.io/ to install and use this version
+ruby ">= 2.6.10"
+
+gem 'cocoapods', '~> 1.13'
+gem 'activesupport', '>= 6.1.7.3', '< 7.1.0'