From 0e56c6b45baacf94880c3c4ab9476034ec62f471 Mon Sep 17 00:00:00 2001
From: "Jules Sam. Randolph" <jules.sam.randolph@gmail.com>
Date: Tue, 13 Apr 2021 19:01:21 -0300
Subject: [PATCH] test(react-native-li): enhance test coverage

---
 .../react-native-li/src/MarkedListItem.tsx    |  1 +
 packages/react-native-li/src/MarkerBox.tsx    |  6 +++-
 .../src/__tests__/MarkedList.test.tsx         | 35 ++++++++++++++++++-
 .../src/__tests__/useMarkedList.test.ts       |  8 +++++
 packages/react-native-li/src/useMarkedList.ts |  3 +-
 5 files changed, 50 insertions(+), 3 deletions(-)

diff --git a/packages/react-native-li/src/MarkedListItem.tsx b/packages/react-native-li/src/MarkedListItem.tsx
index 4764fd3..93a6bf6 100644
--- a/packages/react-native-li/src/MarkedListItem.tsx
+++ b/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({
diff --git a/packages/react-native-li/src/MarkerBox.tsx b/packages/react-native-li/src/MarkerBox.tsx
index 62add4f..f3660e1 100644
--- a/packages/react-native-li/src/MarkerBox.tsx
+++ b/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>
+  );
 }
diff --git a/packages/react-native-li/src/__tests__/MarkedList.test.tsx b/packages/react-native-li/src/__tests__/MarkedList.test.tsx
index 71c68a3..0c26c7a 100644
--- a/packages/react-native-li/src/__tests__/MarkedList.test.tsx
+++ b/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');
+  });
 });
diff --git a/packages/react-native-li/src/__tests__/useMarkedList.test.ts b/packages/react-native-li/src/__tests__/useMarkedList.test.ts
index 248071f..c690ab1 100644
--- a/packages/react-native-li/src/__tests__/useMarkedList.test.ts
+++ b/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);
+  });
 });
diff --git a/packages/react-native-li/src/useMarkedList.ts b/packages/react-native-li/src/useMarkedList.ts
index 2b1d61a..da8da76 100644
--- a/packages/react-native-li/src/useMarkedList.ts
+++ b/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;