feat: Compact vs regular rows (#92)

* Compact vs regular rows * Update src/components/NetworkLogger.spec.tsx * test
alexbrazier · Dec 29, 2023 · 3913d9d · 3913d9d
1 parent ff5c12e
commit 3913d9d
Show file tree

Hide file tree

Showing 7 changed files with 114 additions and 25 deletions.
diff --git a/global-jest-setup.js b/global-jest-setup.js
@@ -0,0 +1,3 @@
+module.exports = async () => {
+  process.env.TZ = 'UTC';
+};
diff --git a/package.json b/package.json
@@ -79,7 +79,8 @@
     "modulePathIgnorePatterns": [
       "<rootDir>/example/node_modules",
       "<rootDir>/lib/"
-    ]
+    ],
+    "globalSetup": "<rootDir>/global-jest-setup.js"
   },
   "husky": {
     "hooks": {

diff --git a/src/components/NetworkLogger.spec.tsx b/src/components/NetworkLogger.spec.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import { render, fireEvent, act } from '@testing-library/react-native';
+
+import { act, fireEvent, render, within } from '@testing-library/react-native';
 import NetworkLogger, { NetworkLoggerProps } from './NetworkLogger';
 import logger from '../loggerSingleton';
 import NetworkRequestInfo from '../NetworkRequestInfo';
@@ -96,3 +97,59 @@ describe('options', () => {
     spyOnLoggerClearRequests.mockRestore();
   });
 });
+
+describe('regular vs compact row', () => {
+  it.each([true, false])('should render the row compact: %p', (compact) => {
+    const requests = [] as NetworkRequestInfo[];
+    const spyOnLoggerSetCallback = jest.spyOn(logger, 'setCallback');
+    const emitCallback = jest.fn();
+    spyOnLoggerSetCallback.mockImplementation((callback) => {
+      return emitCallback.mockImplementation((id: number) => {
+        if (id !== 1) {
+          const request = new NetworkRequestInfo(
+            `${id}`,
+            'XMLHttpRequest',
+            'GET',
+            `http://example.com/${id}`
+          );
+          requests.unshift(request);
+          return callback(requests);
+        }
+        const request = new NetworkRequestInfo(
+          '1',
+          'XMLHttpRequest',
+          'POST',
+          'http://example.com/1'
+        );
+        request.startTime = new Date('2000-01-01T12:34:00.000Z').getTime();
+        request.endTime = new Date('2000-01-01T12:34:56.789Z').getTime();
+        request.status = 200;
+        requests.unshift(request);
+        return callback(requests);
+      });
+    });
+
+    const { getByText } = render(<MyNetworkLogger compact={compact} />);
+
+    act(() => {
+      emitCallback(1);
+    });
+
+    const method = getByText(/^post$/i);
+    expect(method).toBeTruthy();
+    expect(!!within(method.parent!.parent!).queryByText(/^12:34:00$/i)).toBe(
+      compact
+    );
+
+    const status = getByText(/^200$/i);
+    expect(status).toBeTruthy();
+    expect(
+      within(status.parent!.parent!).queryByText(/^56789ms$/i)
+    ).toBeTruthy();
+    expect(within(status.parent!.parent!).queryByText(/^12:34:00$/i)).not.toBe(
+      compact
+    );
+
+    spyOnLoggerSetCallback.mockRestore();
+  });
+});
diff --git a/src/components/NetworkLogger.tsx b/src/components/NetworkLogger.tsx
@@ -13,6 +13,7 @@ import Unmounted from './Unmounted';
 interface Props {
   theme?: ThemeName | DeepPartial<Theme>;
   sort?: 'asc' | 'desc';
+  compact?: boolean;
   maxRows?: number;
 }
 
@@ -26,6 +27,7 @@ const sortRequests = (requests: NetworkRequestInfo[], sort: 'asc' | 'desc') => {
 const NetworkLogger: React.FC<Props> = ({
   theme = 'light',
   sort = 'desc',
+  compact = false,
   maxRows,
 }) => {
   const [requests, setRequests] = useState(logger.getRequests());
@@ -132,6 +134,7 @@ const NetworkLogger: React.FC<Props> = ({
                 </View>
               )}
               <RequestList
+                compact={compact}
                 requestsInfo={requestsInfo}
                 options={options}
                 showDetails={showDetails && !!request}

diff --git a/src/components/Options.tsx b/src/components/Options.tsx
@@ -49,8 +49,8 @@ const Options: React.FC<Props> = ({ options }) => {
             {options.map(({ text, onPress }) => (
               <Button
                 key={text}
-                onPress={async () => {
-                  await onPress();
+                onPress={() => {
+                  onPress();
                   setOpenOptions(false);
                 }}
               >

diff --git a/src/components/RequestList.tsx b/src/components/RequestList.tsx
@@ -11,6 +11,7 @@ interface Props {
   onPressItem: (item: NetworkRequestInfo['id']) => void;
   options: { text: string; onPress: () => void }[];
   showDetails: boolean;
+  compact: boolean;
   maxRows: number;
 }
 
@@ -19,6 +20,7 @@ const RequestList: React.FC<Props> = ({
   onPressItem,
   options,
   showDetails,
+  compact,
   maxRows,
 }) => {
   const styles = useThemedStyles(themedStyles);
@@ -50,7 +52,11 @@ const RequestList: React.FC<Props> = ({
         keyExtractor={(item) => item.id}
         data={filteredRequests}
         renderItem={({ item }) => (
-          <ResultItem request={item} onPress={() => onPressItem(item.id)} />
+          <ResultItem
+            request={item}
+            onPress={() => onPressItem(item.id)}
+            compact={compact}
+          />
         )}
       />
     </View>

diff --git a/src/components/ResultItem.tsx b/src/components/ResultItem.tsx
@@ -8,9 +8,10 @@ interface Props {
   request: NetworkRequestInfoRow;
   onPress?(): void;
   style?: any;
+  compact?: boolean;
 }
 
-const ResultItem: React.FC<Props> = ({ style, request, onPress }) => {
+const ResultItem: React.FC<Props> = ({ style, request, onPress, compact }) => {
   const styles = useThemedStyles(themedStyles);
   const theme = useTheme();
   const onDetailsPage = !onPress;
@@ -63,23 +64,34 @@ const ResultItem: React.FC<Props> = ({ style, request, onPress }) => {
       style={[styles.container, style]}
       {...(onPress && { accessibilityRole: 'button', onPress })}
     >
-      <View style={styles.leftContainer}>
-        <Text
-          style={[styles.text, styles.method]}
-          accessibilityLabel={`Method: ${request.method}`}
-        >
-          {request.method}
-        </Text>
-        <Text
-          style={[styles.status, getStatusStyles(request.status)]}
-          accessibilityLabel={`Response status ${status}`}
-        >
-          {status}
-        </Text>
-        <Text style={styles.text}>
-          {request.duration > 0 ? `${request.duration}ms` : 'pending'}
-        </Text>
-        <Text style={styles.time}>{getTime(request.startTime)}</Text>
+      <View
+        style={compact ? styles.leftContainerCompact : styles.leftContainer}
+      >
+        <View style={styles.leftContainerSplit}>
+          <Text
+            style={[styles.text, styles.method]}
+            accessibilityLabel={`Method: ${request.method}`}
+          >
+            {request.method}
+          </Text>
+          {compact && (
+            <Text style={styles.time}>{getTime(request.startTime)}</Text>
+          )}
+        </View>
+        <View style={styles.leftContainerSplit}>
+          <Text
+            style={[styles.status, getStatusStyles(request.status)]}
+            accessibilityLabel={`Response status ${status}`}
+          >
+            {status}
+          </Text>
+          <Text style={styles.time}>
+            {request.duration > 0 ? `${request.duration}ms` : 'pending'}
+          </Text>
+          {!compact && (
+            <Text style={styles.time}>{getTime(request.startTime)}</Text>
+          )}
+        </View>
       </View>
       <View style={[styles.content]}>
         <Text
@@ -119,6 +131,13 @@ const themedStyles = (theme: Theme) =>
       flexDirection: 'column',
       alignItems: 'center',
     },
+    leftContainerCompact: {
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    leftContainerSplit: {
+      alignItems: 'center',
+    },
     status: {
       fontWeight: 'bold',
       borderWidth: 1,
@@ -157,8 +176,8 @@ const themedStyles = (theme: Theme) =>
       backgroundColor: theme.colors.secondary,
       borderRadius: 10,
       alignSelf: 'flex-start',
-      padding: 5,
-      marginTop: 5,
+      padding: 4,
+      marginTop: 4,
     },
     gqlText: {
       color: theme.colors.onSecondary,