Merge pull request #1049 from jiji14/react-testing-setup

React Component Testing Setup
e-mission · Oct 17, 2023 · e2a2fde · e2a2fde
2 parents 3ae8150 + dd96275
commit e2a2fde
Show file tree

Hide file tree

Showing 7 changed files with 65 additions and 26 deletions.
diff --git a/babel.config.js b/babel.config.js
@@ -0,0 +1,4 @@
+module.exports = {
+  presets: ['@babel/preset-env', '@babel/preset-typescript', '@babel/preset-react'],
+  plugins: ['@babel/plugin-transform-flow-strip-types'],
+}
diff --git a/jest.config.js b/jest.config.js
@@ -0,0 +1,19 @@
+module.exports = {
+  testEnvironment: 'jsdom',
+  testPathIgnorePatterns: [
+    "/node_modules/",
+    "/platforms/",
+    "/plugins/",
+    "/lib/",
+    "/manual_lib/"
+  ],
+  preset: 'react-native',
+  transform: {
+    "^.+\\.(ts|tsx|js|jsx)$": "babel-jest"
+  },
+  transformIgnorePatterns: [
+    "node_modules/(?!((jest-)?react-native(-.*)?|@react-native(-community)?)/)"
+  ],
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+  moduleDirectories: ["node_modules", "src"],
+};
diff --git a/jest.config.json b/jest.config.json
diff --git a/package.serve.json b/package.serve.json
@@ -18,13 +18,16 @@
     "@babel/core": "^7.21.3",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
+    "@babel/plugin-transform-flow-strip-types": "^7.22.5",
     "@babel/preset-env": "^7.21.4",
     "@babel/preset-flow": "^7.21.4",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.4",
     "@ionic/cli": "6.20.8",
+    "@testing-library/react-native": "^12.3.0",
     "@types/luxon": "^3.3.0",
     "@types/react": "^18.2.20",
+    "babel-jest": "^29.7.0",
     "babel-loader": "^9.1.2",
     "babel-plugin-angularjs-annotate": "^0.10.0",
     "babel-plugin-optional-require": "^0.3.1",
@@ -41,8 +44,8 @@
     "sass": "^1.62.1",
     "sass-loader": "^13.3.1",
     "style-loader": "^3.3.3",
-    "ts-jest": "^29.1.1",
     "ts-loader": "^9.4.2",
+    "ts-node": "^10.9.1",
     "typescript": "^5.0.3",
     "url-loader": "^4.1.1",
     "webpack": "^5.0.1",

diff --git a/www/__tests__/LoadMoreButton.test.tsx b/www/__tests__/LoadMoreButton.test.tsx
@@ -0,0 +1,30 @@
+/**
+ * @jest-environment jsdom
+ */
+import React from 'react'
+import {render, fireEvent, waitFor, screen} from '@testing-library/react-native'
+import LoadMoreButton from '../js/diary/list/LoadMoreButton'
+
+
+describe("LoadMoreButton", () => {
+  it("renders correctly", async () => {
+    render(
+      <LoadMoreButton onPressFn={() => {}}>{}</LoadMoreButton>
+    );
+    await waitFor(() => {
+      expect(screen.getByTestId("load-button")).toBeTruthy();
+    });
+  });
+
+  it("calls onPressFn when clicked", () => {
+    const mockFn = jest.fn();
+    const { getByTestId } = render(
+      <LoadMoreButton onPressFn={mockFn}>{}</LoadMoreButton>
+    );
+    const loadButton = getByTestId("load-button");
+    fireEvent.press(loadButton);
+    expect(mockFn).toHaveBeenCalled();
+  });
+});
+
+
diff --git a/www/js/diary/list/LoadMoreButton.tsx b/www/js/diary/list/LoadMoreButton.tsx
@@ -6,7 +6,7 @@ const LoadMoreButton = ({ children, onPressFn, ...otherProps }) => {
   const { colors } = useTheme();
   return (
     <View style={s.container}>
-      <Button style={s.btn} mode='outlined' buttonColor={colors.onPrimary}
+      <Button testID="load-button" style={s.btn} mode='outlined' buttonColor={colors.onPrimary}
         textColor={colors.onBackground} onPress={onPressFn} {...otherProps}>
         {children}
       </Button>

diff --git a/www/js/survey/multilabel/MultiLabelButtonGroup.tsx b/www/js/survey/multilabel/MultiLabelButtonGroup.tsx
@@ -100,11 +100,13 @@ const MultilabelButtonGroup = ({ trip, buttonsInline=false }) => {
           )
         })}
       </View>
-      <View>
-        <IconButton icon='check-bold' mode='outlined' size={16} onPress={verifyTrip}
-                    disabled={trip.verifiability != 'can-verify'}
-                    style={{width: 20, height: 20, margin: 3}}/>
-      </View>
+      {trip.verifiability === 'can-verify' && (
+        <View style={{marginTop: 16}}>
+          <IconButton icon='check-bold' mode='outlined' size={18} onPress={verifyTrip}
+                      containerColor={colors.secondaryContainer}
+                      style={{width: 24, height: 24, margin: 3, borderColor: colors.secondary}} />
+        </View>
+      )}
     </View>
     <Modal visible={modalVisibleFor != null} transparent={true} onDismiss={() => dismiss()}>
       <Dialog visible={modalVisibleFor != null} onDismiss={() => dismiss()}>