test(react-native-li): enhance test coverage

packages/react-native-li/src/MarkedListItem.tsx

@@ -45,6 +45,7 @@ export default function MarkedListItem({
   const markerString = counterRenderer.renderMarker(index + startIndex);
   return (
     <View
+      testID="marked-list-item"
       style={[rtlLineReversed ? styles.lineRtl : styles.lineLtr, style]}
       key={index}>
       {renderMarker({

packages/react-native-li/src/MarkerBox.tsx

@@ -10,5 +10,9 @@ import { MarkerBoxProps } from './shared-types';
  * @public
  */
 export default function MarkerBox({ style, markerString }: MarkerBoxProps) {
-  return <Text style={style}>{markerString}</Text>;
+  return (
+    <Text testID="marker-box" style={style}>
+      {markerString}
+    </Text>
+  );
 }

packages/react-native-li/src/__tests__/MarkedList.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react-native';
 import MarkedList from '../MarkedList';
-import { Text } from 'react-native';
+import { StyleSheet, Text } from 'react-native';
 import * as presets from '@jsamr/counter-style/presets';
 
 describe('MarkedList', () => {
@@ -18,4 +18,37 @@ describe('MarkedList', () => {
     const list = UNSAFE_getByType(MarkedList);
     expect(list.children.length).toBe(100);
   });
+
+  it('should reverse list items with rtlLineReversed', () => {
+    const { getByTestId } = render(
+      <MarkedList counterRenderer={presets.disc} rtlLineReversed>
+        <Text style={{ flexShrink: 1 }}>Lorem</Text>
+      </MarkedList>
+    );
+    const li = getByTestId('marked-list-item');
+    expect(StyleSheet.flatten(li.props.style)).toMatchObject({
+      flexDirection: 'row-reverse'
+    });
+  });
+  it('should reverse marker prefix, counter and suffix order with rtlMarkerReversed', () => {
+    const { getByTestId } = render(
+      <MarkedList counterRenderer={presets.disc} rtlMarkerReversed>
+        <Text style={{ flexShrink: 1 }}>Lorem</Text>
+      </MarkedList>
+    );
+    const mb = getByTestId('marker-box');
+    expect(mb.props.children).toBe(' •');
+  });
+  it('should allow to customize rtlMarkerReversed', () => {
+    const { getByTestId } = render(
+      <MarkedList
+        counterRenderer={presets.decimal}
+        startIndex={10}
+        rtlMarkerReversed={{ reverseCounter: true, reversePrefix: false }}>
+        <Text style={{ flexShrink: 1 }}>Lorem</Text>
+      </MarkedList>
+    );
+    const mb = getByTestId('marker-box');
+    expect(mb.props.children).toBe(' .01');
+  });
 });

packages/react-native-li/src/__tests__/useMarkedList.test.ts

@@ -18,4 +18,12 @@ describe('useMarkedList', () => {
     );
     expect(result.current.maxNumOfCodepoints).toBe(expectedLen);
   });
+  it('should work with 0 lengths', () => {
+    const expectedLen = counterRenderer.maxMarkerLenInRange(2, 1);
+    const { result } = renderHook(() =>
+      //@ts-expect-error
+      useMarkedList({ counterRenderer, startIndex: 2 })
+    );
+    expect(result.current.maxNumOfCodepoints).toBe(expectedLen);
+  });
 });

packages/react-native-li/src/useMarkedList.ts

@@ -30,7 +30,8 @@ export default function useMarkedList({
   computeMarkerBoxWidth = defaultComputeMarkerBoxWidth
 }: MarkedListProps & { length: number }): Omit<MarkedListItemProps, 'index'> {
   const maxNumOfCodepoints = useMemo(
-    () => counterRenderer.maxMarkerLenInRange(startIndex, startIndex + length - 1),
+    () =>
+      counterRenderer.maxMarkerLenInRange(startIndex, startIndex + length - 1),
     [counterRenderer, length, startIndex]
   );
   const syntheticRtlLineReversed = !I18nManager.isRTL && rtlLineReversed;