diff --git a/README.md b/README.md
index 4689e5c..8518656 100644
--- a/README.md
+++ b/README.md
@@ -37,14 +37,14 @@ $ yarn add @mutualmobile/react-native-barricade
**1. Create and start Barricade**
-Create an instance of Barricade with the help of the `createBarricade` function along with an array of `RequestConfig` as its function argument.
+Create an instance of Barricade with the help of the `createBarricade` function. While calling this function, you can pass an array of `RequestConfig`(optional) to register the request configs. You can also register a request config later by making use of `registerRequest` method on the barricade instance.
**:warning: Make sure to do this in index.js so that you can start Barricade before hitting any API.**
```tsx
import { createBarricade } from '@mutualmobile/react-native-barricade';
-const requestConfig = []; // Array of RequestConfigs for all the APIs that needs to be mocked
+const requestConfig = []; // Optional: Array of RequestConfigs for all the APIs that needs to be mocked
const barricade = createBarricade(requestConfig);
barricade.start(); // Start the Barricade
@@ -76,7 +76,25 @@ const App = () => {
**3. Create RequestConfigs**
-Create a `RequestConfig` for each API you want to mock. Then, add these to the list of request configs shown in Step 1.
+Create a `RequestConfig` for each API you want to mock. Then, add these to the list of request configs shown in Step 1 or register them individually by calling the `registerRequest` method as shown below.
+
+```tsx
+import { getBarricadeInstance } from '@mutualmobile/react-native-barricade';
+
+const apiRequestConfig = {} // RequestConfig for a particular API that you wish to mock.
+getBarricadeInstance()?.registerRequest(apiRequestConfig);
+```
+
+**:warning: Make sure to call the `registerRequest` method only after barricade instance is created.**
+
+In case you want to unregister a config programmatically, you can do this by calling the `unregisterRequest` method similar to the registerRequest method.
+
+```tsx
+import { getBarricadeInstance } from '@mutualmobile/react-native-barricade';
+
+const apiRequestConfig = {} // RequestConfig object that was previously used for registering
+getBarricadeInstance()?.unregisterRequest(apiRequestConfig);
+```
**RequestConfig:**
| Property | Description | Type |
@@ -86,6 +104,7 @@ Create a `RequestConfig` for each API you want to mock. Then, add these to the l
| **`pathEvaluation`** | Data used to identify the current API triggered from the list of RequestConfigs. | `PathEvaluation` |
| **`responseHandler`** | List of mocked responses the current API can return with. By default, the first response from the list is selected. | `ResponseHandler[]` |
| **`delay`** | The time (in milliseconds) Barricade needs to wait before responding with the mocked response. This is optional and by default it's `400`. | `number` / `undefined` |
+| **`disabled`** | Boolean used to enable/disable mocking of current API. This is optional and by default it's `undefined`. | `boolean` / `undefined` |
**PathEvaluation:**
| Property | Description | Type |
@@ -159,9 +178,9 @@ const successResponseHandler = (request: Request) => {
Barricade comes packaged with an in-app interface that allows you to select the network responses at runtime. For this to be visible, you need to add the `BarricadeView` mentioned in Step 2 under **Usage**.
<p align="center">
-<img src="https://github.com/mutualmobile/react-native-barricade/blob/main/docs/screenshots/menu.png?raw=true" alt="Developer Menu" width="231" height="500"/>
-<img src="https://github.com/mutualmobile/react-native-barricade/blob/main/docs/screenshots/list.png?raw=true" alt="List View" width="231" height="500"/>
-<img src="https://github.com/mutualmobile/react-native-barricade/blob/main/docs/screenshots/detail.png?raw=true" alt="Detail View" width="231" height="500"/>
+<img src="https://github.com/mutualmobile/react-native-barricade/blob/main/docs/screenshots/developer-menu.png?raw=true" alt="Developer Menu" width="231" height="500"/>
+<img src="https://github.com/mutualmobile/react-native-barricade/blob/main/docs/screenshots/request-list.png?raw=true" alt="List View" width="231" height="500"/>
+<img src="https://github.com/mutualmobile/react-native-barricade/blob/main/docs/screenshots/response-list.png?raw=true" alt="Detail View" width="231" height="500"/>
</p>
With this in place and the device shaken, you'll be able to see an option for `Barricade` in React Native's developer menu. On tapping the `Barricade` option, you’ll be redirected to a screen with the list of mocked APIs.
@@ -186,7 +205,8 @@ const App = () => {
```
**Note:** In BarricadeView, apart from changing the selected response for any of the listed APIs, we can also:
-- Disable/Enable Barricade. This will stop/start mocking API calls and lets you check the app with the actual/mocked API responses at runtime.
+- Disable/Enable Barricade. This will stop/start mocking all the registered API calls and lets you check the app with the actual/mocked API responses at runtime.
+- Disable/Enable API Mock. This will stop/start mocking the current API calls and lets you check the app with the actual/mocked API response at runtime.
- Reset all the changes done to the list of selected responses.
## Store Submission
diff --git a/docs/media/demo.gif b/docs/media/demo.gif
index 940ab78..4c51a74 100644
Binary files a/docs/media/demo.gif and b/docs/media/demo.gif differ
diff --git a/docs/screenshots/detail.png b/docs/screenshots/detail.png
deleted file mode 100644
index 43c2d50..0000000
Binary files a/docs/screenshots/detail.png and /dev/null differ
diff --git a/docs/screenshots/developer-menu.png b/docs/screenshots/developer-menu.png
new file mode 100644
index 0000000..6771b1a
Binary files /dev/null and b/docs/screenshots/developer-menu.png differ
diff --git a/docs/screenshots/list.png b/docs/screenshots/list.png
deleted file mode 100644
index 099b451..0000000
Binary files a/docs/screenshots/list.png and /dev/null differ
diff --git a/docs/screenshots/menu.png b/docs/screenshots/menu.png
deleted file mode 100644
index bfcf465..0000000
Binary files a/docs/screenshots/menu.png and /dev/null differ
diff --git a/docs/screenshots/request-list.png b/docs/screenshots/request-list.png
new file mode 100644
index 0000000..9c6d92a
Binary files /dev/null and b/docs/screenshots/request-list.png differ
diff --git a/docs/screenshots/response-list.png b/docs/screenshots/response-list.png
new file mode 100644
index 0000000..25b56e5
Binary files /dev/null and b/docs/screenshots/response-list.png differ
diff --git a/example/mock-server/index.ts b/example/mock-server/index.ts
index 7844144..e58e717 100644
--- a/example/mock-server/index.ts
+++ b/example/mock-server/index.ts
@@ -1,12 +1,13 @@
-import { createBarricade } from '@mutualmobile/react-native-barricade';
+import {
+ createBarricade,
+ getBarricadeInstance,
+} from '@mutualmobile/react-native-barricade';
import { RecentApiRequestConfig } from './api/recent.api.mock';
import { SearchApiRequestConfig } from './api/search.api.mock';
export const mockServer = () => {
- const barricade = createBarricade([
- RecentApiRequestConfig,
- SearchApiRequestConfig,
- ]);
- barricade.start(); // We can all call this like - getBarricadeInstance()?.start();
+ const barricade = createBarricade([RecentApiRequestConfig]);
+ barricade.start(); // We can also call this like - getBarricadeInstance()?.start();
+ getBarricadeInstance()?.registerRequest(SearchApiRequestConfig);
};
diff --git a/src/__tests__/components/Footer.test.tsx b/src/__tests__/components/Footer.test.tsx
index 528caaf..10dd650 100644
--- a/src/__tests__/components/Footer.test.tsx
+++ b/src/__tests__/components/Footer.test.tsx
@@ -3,62 +3,33 @@ import { TouchableOpacity } from 'react-native';
import renderer, { act } from 'react-test-renderer';
import { Footer } from '../../components/Footer';
-import { Barricade } from '../../network/barricade';
-import {
- firstApiConfig,
- secondApiConfig,
- thirdApiConfig,
-} from '../data/barricade-test-data';
-
-let barricade: Barricade;
-beforeEach(() => {
- barricade = new Barricade([firstApiConfig, secondApiConfig, thirdApiConfig]);
- barricade.start();
-});
-
-afterEach(() => {
- jest.clearAllMocks();
- barricade.shutdown();
-});
-
-describe('given that Barricade is enabled,', () => {
- test('should match Footer snapshot', () => {
- const tree = renderer.create(<Footer barricade={barricade} />);
- expect(tree).toMatchSnapshot();
- expect.assertions(1);
-
- barricade.shutdown();
- });
-
- test('when "Disable barricade" button is pressed, should disable barricade', async () => {
- barricade.shutdown = jest.fn();
- const tree = renderer.create(<Footer barricade={barricade} />);
- const instance = tree.root;
- await act(() => instance.findByType(TouchableOpacity).props.onPress());
-
- expect(barricade.shutdown).toHaveBeenCalled();
- expect.assertions(1);
- });
+import { Strings } from '../../constants';
+import { LightThemeColors } from '../../theme/colors';
+
+test('should match Footer snapshot', () => {
+ const tree = renderer.create(
+ <Footer
+ title={Strings.DisableBarricade}
+ titleStyle={{ color: LightThemeColors.error }}
+ onPress={jest.fn}
+ />,
+ );
+ expect(tree).toMatchSnapshot();
+ expect.assertions(1);
});
-describe('given that Barricade is disabled,', () => {
- test('given that Barricade is disabled, should match Footer snapshot', () => {
- barricade.shutdown();
-
- const tree = renderer.create(<Footer barricade={barricade} />);
- expect(tree).toMatchSnapshot();
-
- expect.assertions(1);
- });
-
- test('when "Enable barricade" button is pressed, should enable barricade', async () => {
- barricade.shutdown();
- barricade.start = jest.fn();
- const tree = renderer.create(<Footer barricade={barricade} />);
- const instance = tree.root;
- await act(() => instance.findByType(TouchableOpacity).props.onPress());
-
- expect(barricade.start).toHaveBeenCalledTimes(1);
- expect.assertions(1);
- });
+test('given that onPress is passed to Footer, when its pressed should call the onPress prop', async () => {
+ const onPress = jest.fn();
+ const tree = renderer.create(
+ <Footer
+ onPress={onPress}
+ title={Strings.DisableBarricade}
+ titleStyle={{ color: LightThemeColors.error }}
+ />,
+ );
+ const instance = tree.root;
+ await act(() => instance.findByType(TouchableOpacity).props.onPress());
+
+ expect(onPress).toHaveBeenCalled();
+ expect.assertions(1);
});
diff --git a/src/__tests__/components/RequestDetail.test.tsx b/src/__tests__/components/RequestDetail.test.tsx
index 87ce305..6c5d2dc 100644
--- a/src/__tests__/components/RequestDetail.test.tsx
+++ b/src/__tests__/components/RequestDetail.test.tsx
@@ -1,7 +1,7 @@
import React from 'react';
-import { TouchableOpacity } from 'react-native';
import renderer, { act } from 'react-test-renderer';
+import { Footer } from '../../components/Footer';
import { RequestDetail } from '../../components/RequestDetail';
import { Barricade } from '../../network/barricade';
import {
@@ -21,16 +21,80 @@ afterEach(() => {
barricade.shutdown();
});
-test('should match RequestDetail snapshot', () => {
- const tree = renderer.create(
- <RequestDetail
- barricade={barricade}
- selectedListItemIndex={0}
- onBackPressed={jest.fn}
- />,
- );
- expect(tree).toMatchSnapshot();
- expect.assertions(1);
+describe('given that API is enabled,', () => {
+ test('should match snapshot', () => {
+ const selectedIndex = 0;
+ barricade.requestConfig[selectedIndex].disabled = false;
+
+ const tree = renderer.create(
+ <RequestDetail
+ barricade={barricade}
+ selectedListItemIndex={selectedIndex}
+ onBackPressed={jest.fn}
+ />,
+ );
+
+ expect(tree).toMatchSnapshot();
+ expect.assertions(1);
+ });
+
+ test('when "Disable API Mock" button is pressed, should disable API for mocking', async () => {
+ const selectedIndex = 0;
+ barricade.requestConfig[selectedIndex].disabled = false;
+
+ const tree = renderer.create(
+ <RequestDetail
+ barricade={barricade}
+ selectedListItemIndex={selectedIndex}
+ onBackPressed={jest.fn}
+ />,
+ );
+ const instance = tree.root;
+ await act(async () => {
+ await instance.findByType(Footer).props.onPress();
+ });
+
+ expect(barricade.requestConfig[selectedIndex].disabled).toBe(true);
+ expect.assertions(1);
+ });
+});
+
+describe('given that API is disabled,', () => {
+ test('should match snapshot', () => {
+ const selectedIndex = 0;
+ barricade.requestConfig[selectedIndex].disabled = true;
+
+ const tree = renderer.create(
+ <RequestDetail
+ barricade={barricade}
+ selectedListItemIndex={selectedIndex}
+ onBackPressed={jest.fn}
+ />,
+ );
+
+ expect(tree).toMatchSnapshot();
+ expect.assertions(1);
+ });
+
+ test('when "Enable API Mock" button is pressed, should enable API for mocking', async () => {
+ const selectedIndex = 0;
+ barricade.requestConfig[selectedIndex].disabled = true;
+
+ const tree = renderer.create(
+ <RequestDetail
+ barricade={barricade}
+ selectedListItemIndex={selectedIndex}
+ onBackPressed={jest.fn}
+ />,
+ );
+ const instance = tree.root;
+ await act(async () => {
+ await instance.findByType(Footer).props.onPress();
+ });
+
+ expect(barricade.requestConfig[selectedIndex].disabled).toBe(false);
+ expect.assertions(1);
+ });
});
test('when an selected list item is pressed, should select list item', async () => {
@@ -42,7 +106,13 @@ test('when an selected list item is pressed, should select list item', async ()
/>,
);
const instance = tree.root;
- await act(() => instance.findAllByType(TouchableOpacity)[1].props.onPress());
+ await act(() => {
+ const findAllByTestID = instance.findAll(
+ el => el.props.testID === 'responseListItem0',
+ );
+
+ findAllByTestID[0].props.onPress();
+ });
expect(barricade.requestConfig[0].responseHandler[0].isSelected).toBe(true);
expect.assertions(1);
@@ -57,7 +127,13 @@ test('when an unselected list item is pressed, should select list item', async (
/>,
);
const instance = tree.root;
- await act(() => instance.findAllByType(TouchableOpacity)[2].props.onPress());
+ await act(() => {
+ const findAllByTestID = instance.findAll(
+ el => el.props.testID === 'responseListItem1',
+ );
+
+ findAllByTestID[0].props.onPress();
+ });
expect(barricade.requestConfig[0].responseHandler[1].isSelected).toBe(true);
expect.assertions(1);
diff --git a/src/__tests__/components/RequestList.test.tsx b/src/__tests__/components/RequestList.test.tsx
index feaab44..9be17f0 100644
--- a/src/__tests__/components/RequestList.test.tsx
+++ b/src/__tests__/components/RequestList.test.tsx
@@ -1,6 +1,7 @@
import React from 'react';
import renderer, { act } from 'react-test-renderer';
+import { Footer } from '../../components/Footer';
import { Header } from '../../components/Header';
import { RequestList } from '../../components/RequestList';
import { Barricade } from '../../network/barricade';
@@ -20,7 +21,20 @@ afterEach(() => {
barricade.shutdown();
});
-test('should match RequestList snapshot', () => {
+test('given that all APIs are enabled, should match RequestList snapshot', () => {
+ const tree = renderer.create(
+ <RequestList
+ barricade={barricade}
+ onDonePressed={jest.fn}
+ onListItemPressed={jest.fn}
+ />,
+ );
+ expect(tree).toMatchSnapshot();
+ expect.assertions(1);
+});
+
+test('given that one API is disabled, should match RequestList snapshot', () => {
+ barricade.requestConfig[0].disabled = true;
const tree = renderer.create(
<RequestList
barricade={barricade}
@@ -80,7 +94,7 @@ test('when a list item is pressed, should call onListItemPressed', async () => {
const instance = tree.root;
await act(() => {
const findAllByTestID = instance.findAll(
- el => el.props.testID === 'listItem0',
+ el => el.props.testID === 'requestListItem0',
);
findAllByTestID[0].props.onPress();
@@ -89,3 +103,70 @@ test('when a list item is pressed, should call onListItemPressed', async () => {
expect(onListItemPressed).toHaveBeenCalled();
expect.assertions(1);
});
+
+describe('given that Barricade is enabled,', () => {
+ test('should match snapshot', () => {
+ const tree = renderer.create(
+ <RequestList
+ barricade={barricade}
+ onDonePressed={jest.fn}
+ onListItemPressed={jest.fn}
+ />,
+ );
+ expect(tree).toMatchSnapshot();
+ expect.assertions(1);
+ });
+
+ test('when "Disable barricade" button is pressed, should disable barricade', async () => {
+ barricade.shutdown = jest.fn();
+ const tree = renderer.create(
+ <RequestList
+ barricade={barricade}
+ onDonePressed={jest.fn}
+ onListItemPressed={jest.fn}
+ />,
+ );
+ const instance = tree.root;
+ await act(async () => {
+ await instance.findByType(Footer).props.onPress();
+ });
+
+ expect(barricade.shutdown).toHaveBeenCalled();
+ expect.assertions(1);
+ });
+});
+
+describe('given that Barricade is disabled,', () => {
+ test('should match snapshot', () => {
+ barricade.shutdown();
+ const tree = renderer.create(
+ <RequestList
+ barricade={barricade}
+ onDonePressed={jest.fn}
+ onListItemPressed={jest.fn}
+ />,
+ );
+
+ expect(tree).toMatchSnapshot();
+ expect.assertions(1);
+ });
+
+ test('when "Enable barricade" button is pressed, should enable barricade', async () => {
+ barricade.shutdown();
+ barricade.start = jest.fn();
+ const tree = renderer.create(
+ <RequestList
+ barricade={barricade}
+ onDonePressed={jest.fn}
+ onListItemPressed={jest.fn}
+ />,
+ );
+ const instance = tree.root;
+ await act(async () => {
+ await instance.findByType(Footer).props.onPress();
+ });
+
+ expect(barricade.start).toHaveBeenCalledTimes(1);
+ expect.assertions(1);
+ });
+});
diff --git a/src/__tests__/components/__snapshots__/BarricadeView.test.tsx.snap b/src/__tests__/components/__snapshots__/BarricadeView.test.tsx.snap
index 1ee2e2d..59206bf 100644
--- a/src/__tests__/components/__snapshots__/BarricadeView.test.tsx.snap
+++ b/src/__tests__/components/__snapshots__/BarricadeView.test.tsx.snap
@@ -221,6 +221,7 @@ exports[`given that theme is dark and detail view is selected, should match Barr
"paddingVertical": 19.714285714285715,
}
}
+ testID="responseListItem0"
>
<Text
style={
@@ -282,6 +283,7 @@ exports[`given that theme is dark and detail view is selected, should match Barr
"paddingVertical": 19.714285714285715,
}
}
+ testID="responseListItem1"
>
<Text
style={
@@ -304,6 +306,61 @@ exports[`given that theme is dark and detail view is selected, should match Barr
</View>
</View>
</RCTScrollView>
+ <View
+ style={
+ Array [
+ Object {
+ "borderTopWidth": 1,
+ "height": 50,
+ },
+ Object {
+ "backgroundColor": "#181818",
+ },
+ Object {
+ "borderColor": "#69696D",
+ },
+ ]
+ }
+ >
+ <View
+ accessible={true}
+ collapsable={false}
+ focusable={true}
+ onClick={[Function]}
+ onResponderGrant={[Function]}
+ onResponderMove={[Function]}
+ onResponderRelease={[Function]}
+ onResponderTerminate={[Function]}
+ onResponderTerminationRequest={[Function]}
+ onStartShouldSetResponder={[Function]}
+ style={
+ Object {
+ "alignItems": "center",
+ "flex": 1,
+ "justifyContent": "center",
+ "marginHorizontal": 24,
+ "opacity": 1,
+ }
+ }
+ >
+ <Text
+ numberOfLines={1}
+ style={
+ Array [
+ Object {
+ "fontSize": 36,
+ "textAlign": "center",
+ },
+ Object {
+ "color": "#EE0003",
+ },
+ ]
+ }
+ >
+ Disable API Mock
+ </Text>
+ </View>
+ </View>
</View>
</RCTSafeAreaView>
</Modal>
@@ -597,7 +654,7 @@ exports[`given that theme is dark and list view is selected, should match Barric
"paddingVertical": 19.714285714285715,
}
}
- testID="listItem0"
+ testID="requestListItem0"
>
<Text
style={
@@ -632,8 +689,21 @@ exports[`given that theme is dark and list view is selected, should match Barric
]
}
>
- Success
-
+ Success
+ <Text
+ style={
+ Array [
+ Object {
+ "fontSize": 24,
+ },
+ Object {
+ "color": "#00EA6E",
+ },
+ ]
+ }
+ >
+ ●
+ </Text>
<Text
style={
Array [
@@ -646,7 +716,7 @@ exports[`given that theme is dark and list view is selected, should match Barric
]
}
>
- ›
+ ›
</Text>
</Text>
</View>
@@ -678,7 +748,7 @@ exports[`given that theme is dark and list view is selected, should match Barric
"paddingVertical": 19.714285714285715,
}
}
- testID="listItem1"
+ testID="requestListItem1"
>
<Text
style={
@@ -713,8 +783,21 @@ exports[`given that theme is dark and list view is selected, should match Barric
]
}
>
- Error
-
+ Error
+ <Text
+ style={
+ Array [
+ Object {
+ "fontSize": 24,
+ },
+ Object {
+ "color": "#00EA6E",
+ },
+ ]
+ }
+ >
+ ●
+ </Text>
<Text
style={
Array [
@@ -727,7 +810,7 @@ exports[`given that theme is dark and list view is selected, should match Barric
]
}
>
- ›
+ ›
</Text>
</Text>
</View>
@@ -759,7 +842,7 @@ exports[`given that theme is dark and list view is selected, should match Barric
"paddingVertical": 19.714285714285715,
}
}
- testID="listItem2"
+ testID="requestListItem2"
>
<Text
style={
@@ -794,8 +877,21 @@ exports[`given that theme is dark and list view is selected, should match Barric
]
}
>
- Success
-
+ Success
+ <Text
+ style={
+ Array [
+ Object {
+ "fontSize": 24,
+ },
+ Object {
+ "color": "#00EA6E",
+ },
+ ]
+ }
+ >
+ ●
+ </Text>
<Text
style={
Array [
@@ -808,7 +904,7 @@ exports[`given that theme is dark and list view is selected, should match Barric
]
}
>
- ›
+ ›
</Text>
</Text>
</View>
@@ -1072,6 +1168,7 @@ exports[`given that theme is light and detail view is selected, should match Bar
"paddingVertical": 19.714285714285715,
}
}
+ testID="responseListItem0"
>
<Text
style={
@@ -1133,6 +1230,7 @@ exports[`given that theme is light and detail view is selected, should match Bar
"paddingVertical": 19.714285714285715,
}
}
+ testID="responseListItem1"
>
<Text
style={
@@ -1155,6 +1253,61 @@ exports[`given that theme is light and detail view is selected, should match Bar
</View>
</View>
</RCTScrollView>
+ <View
+ style={
+ Array [
+ Object {
+ "borderTopWidth": 1,
+ "height": 50,
+ },
+ Object {
+ "backgroundColor": "#EBEBEB",
+ },
+ Object {
+ "borderColor": "#DEDEDE",
+ },
+ ]
+ }
+ >
+ <View
+ accessible={true}
+ collapsable={false}
+ focusable={true}
+ onClick={[Function]}
+ onResponderGrant={[Function]}
+ onResponderMove={[Function]}
+ onResponderRelease={[Function]}
+ onResponderTerminate={[Function]}
+ onResponderTerminationRequest={[Function]}
+ onStartShouldSetResponder={[Function]}
+ style={
+ Object {
+ "alignItems": "center",
+ "flex": 1,
+ "justifyContent": "center",
+ "marginHorizontal": 24,
+ "opacity": 1,
+ }
+ }
+ >
+ <Text
+ numberOfLines={1}
+ style={
+ Array [
+ Object {
+ "fontSize": 36,
+ "textAlign": "center",
+ },
+ Object {
+ "color": "#EE0003",
+ },
+ ]
+ }
+ >
+ Disable API Mock
+ </Text>
+ </View>
+ </View>
</View>
</RCTSafeAreaView>
</Modal>
@@ -1448,7 +1601,7 @@ exports[`given that theme is light and list view is selected, should match Barri
"paddingVertical": 19.714285714285715,
}
}
- testID="listItem0"
+ testID="requestListItem0"
>
<Text
style={
@@ -1483,8 +1636,21 @@ exports[`given that theme is light and list view is selected, should match Barri
]
}
>
- Success
-
+ Success
+ <Text
+ style={
+ Array [
+ Object {
+ "fontSize": 24,
+ },
+ Object {
+ "color": "#00EA6E",
+ },
+ ]
+ }
+ >
+ ●
+ </Text>
<Text
style={
Array [
@@ -1497,7 +1663,7 @@ exports[`given that theme is light and list view is selected, should match Barri
]
}
>
- ›
+ ›
</Text>
</Text>
</View>
@@ -1529,7 +1695,7 @@ exports[`given that theme is light and list view is selected, should match Barri
"paddingVertical": 19.714285714285715,
}
}
- testID="listItem1"
+ testID="requestListItem1"
>
<Text
style={
@@ -1564,8 +1730,21 @@ exports[`given that theme is light and list view is selected, should match Barri
]
}
>
- Error
-
+ Error
+ <Text
+ style={
+ Array [
+ Object {
+ "fontSize": 24,
+ },
+ Object {
+ "color": "#00EA6E",
+ },
+ ]
+ }
+ >
+ ●
+ </Text>
<Text
style={
Array [
@@ -1578,7 +1757,7 @@ exports[`given that theme is light and list view is selected, should match Barri
]
}
>
- ›
+ ›
</Text>
</Text>
</View>
@@ -1610,7 +1789,7 @@ exports[`given that theme is light and list view is selected, should match Barri
"paddingVertical": 19.714285714285715,
}
}
- testID="listItem2"
+ testID="requestListItem2"
>
<Text
style={
@@ -1645,8 +1824,21 @@ exports[`given that theme is light and list view is selected, should match Barri
]
}
>
- Success
-
+ Success
+ <Text
+ style={
+ Array [
+ Object {
+ "fontSize": 24,
+ },
+ Object {
+ "color": "#00EA6E",
+ },
+ ]
+ }
+ >
+ ●
+ </Text>
<Text
style={
Array [
@@ -1659,7 +1851,7 @@ exports[`given that theme is light and list view is selected, should match Barri
]
}
>
- ›
+ ›
</Text>
</Text>
</View>
diff --git a/src/__tests__/components/__snapshots__/Footer.test.tsx.snap b/src/__tests__/components/__snapshots__/Footer.test.tsx.snap
index 1e06f26..1709ce6 100644
--- a/src/__tests__/components/__snapshots__/Footer.test.tsx.snap
+++ b/src/__tests__/components/__snapshots__/Footer.test.tsx.snap
@@ -1,64 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`given that Barricade is disabled, given that Barricade is disabled, should match Footer snapshot 1`] = `
-<View
- style={
- Array [
- Object {
- "borderTopWidth": 1,
- "height": 50,
- },
- Object {
- "backgroundColor": "#EBEBEB",
- },
- Object {
- "borderColor": "#DEDEDE",
- },
- ]
- }
->
- <View
- accessible={true}
- collapsable={false}
- focusable={true}
- onClick={[Function]}
- onResponderGrant={[Function]}
- onResponderMove={[Function]}
- onResponderRelease={[Function]}
- onResponderTerminate={[Function]}
- onResponderTerminationRequest={[Function]}
- onStartShouldSetResponder={[Function]}
- style={
- Object {
- "alignItems": "center",
- "flex": 1,
- "justifyContent": "center",
- "marginHorizontal": 24,
- "opacity": 1,
- }
- }
- >
- <Text
- numberOfLines={1}
- style={
- Array [
- Object {
- "fontSize": 36,
- "textAlign": "center",
- },
- Object {
- "color": "#007aa3",
- },
- ]
- }
- >
- Enable Barricade
- </Text>
- </View>
-</View>
-`;
-
-exports[`given that Barricade is enabled, should match Footer snapshot 1`] = `
+exports[`should match Footer snapshot 1`] = `
<View
style={
Array [
diff --git a/src/__tests__/components/__snapshots__/RequestDetail.test.tsx.snap b/src/__tests__/components/__snapshots__/RequestDetail.test.tsx.snap
index e665e23..0a4ce6b 100644
--- a/src/__tests__/components/__snapshots__/RequestDetail.test.tsx.snap
+++ b/src/__tests__/components/__snapshots__/RequestDetail.test.tsx.snap
@@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`should match RequestDetail snapshot 1`] = `
+exports[`given that API is disabled, should match snapshot 1`] = `
<View
style={
Array [
@@ -177,6 +177,7 @@ exports[`should match RequestDetail snapshot 1`] = `
"paddingVertical": 19.714285714285715,
}
}
+ testID="responseListItem0"
>
<Text
style={
@@ -238,6 +239,7 @@ exports[`should match RequestDetail snapshot 1`] = `
"paddingVertical": 19.714285714285715,
}
}
+ testID="responseListItem1"
>
<Text
style={
@@ -260,5 +262,380 @@ exports[`should match RequestDetail snapshot 1`] = `
</View>
</View>
</RCTScrollView>
+ <View
+ style={
+ Array [
+ Object {
+ "borderTopWidth": 1,
+ "height": 50,
+ },
+ Object {
+ "backgroundColor": "#EBEBEB",
+ },
+ Object {
+ "borderColor": "#DEDEDE",
+ },
+ ]
+ }
+ >
+ <View
+ accessible={true}
+ collapsable={false}
+ focusable={true}
+ onClick={[Function]}
+ onResponderGrant={[Function]}
+ onResponderMove={[Function]}
+ onResponderRelease={[Function]}
+ onResponderTerminate={[Function]}
+ onResponderTerminationRequest={[Function]}
+ onStartShouldSetResponder={[Function]}
+ style={
+ Object {
+ "alignItems": "center",
+ "flex": 1,
+ "justifyContent": "center",
+ "marginHorizontal": 24,
+ "opacity": 1,
+ }
+ }
+ >
+ <Text
+ numberOfLines={1}
+ style={
+ Array [
+ Object {
+ "fontSize": 36,
+ "textAlign": "center",
+ },
+ Object {
+ "color": "#007aa3",
+ },
+ ]
+ }
+ >
+ Enable API Mock
+ </Text>
+ </View>
+ </View>
+</View>
+`;
+
+exports[`given that API is enabled, should match snapshot 1`] = `
+<View
+ style={
+ Array [
+ Object {
+ "flex": 1,
+ },
+ Object {
+ "backgroundColor": "#ffffff",
+ },
+ ]
+ }
+>
+ <View
+ style={
+ Array [
+ Object {
+ "borderBottomWidth": 1,
+ },
+ Object {
+ "backgroundColor": "#EBEBEB",
+ },
+ Object {
+ "borderColor": "#DEDEDE",
+ },
+ ]
+ }
+ >
+ <View
+ style={
+ Object {
+ "alignItems": "center",
+ "flexDirection": "row",
+ "height": 82.14285714285714,
+ "marginHorizontal": 24,
+ }
+ }
+ >
+ <Text
+ numberOfLines={1}
+ style={
+ Array [
+ Object {
+ "fontSize": 40,
+ "fontWeight": "bold",
+ "left": 0,
+ "marginHorizontal": 140,
+ "position": "absolute",
+ "right": 0,
+ "textAlign": "center",
+ },
+ Object {
+ "color": "#181818",
+ },
+ ]
+ }
+ >
+ First API
+ </Text>
+ <View
+ accessible={true}
+ collapsable={false}
+ focusable={true}
+ onClick={[Function]}
+ onResponderGrant={[Function]}
+ onResponderMove={[Function]}
+ onResponderRelease={[Function]}
+ onResponderTerminate={[Function]}
+ onResponderTerminationRequest={[Function]}
+ onStartShouldSetResponder={[Function]}
+ style={
+ Object {
+ "marginRight": 20,
+ "opacity": 1,
+ }
+ }
+ >
+ <Text
+ style={
+ Array [
+ Object {
+ "fontSize": 36,
+ "margin": 16,
+ "textAlign": "center",
+ },
+ Object {
+ "color": "#007aa3",
+ },
+ ]
+ }
+ >
+ ‹ Back
+ </Text>
+ </View>
+ <View
+ style={
+ Object {
+ "flex": 1,
+ }
+ }
+ />
+ </View>
+ </View>
+ <RCTScrollView
+ contentContainerStyle={
+ Array [
+ Object {
+ "flexGrow": 1,
+ },
+ Object {
+ "backgroundColor": "#ffffff",
+ },
+ ]
+ }
+ data={
+ Array [
+ Object {
+ "handler": [Function],
+ "isSelected": true,
+ "label": "Success",
+ },
+ Object {
+ "handler": [Function],
+ "isSelected": false,
+ "label": "Error",
+ },
+ ]
+ }
+ getItem={[Function]}
+ getItemCount={[Function]}
+ keyExtractor={[Function]}
+ onContentSizeChange={[Function]}
+ onLayout={[Function]}
+ onMomentumScrollBegin={[Function]}
+ onMomentumScrollEnd={[Function]}
+ onScroll={[Function]}
+ onScrollBeginDrag={[Function]}
+ onScrollEndDrag={[Function]}
+ removeClippedSubviews={false}
+ renderItem={[Function]}
+ scrollEventThrottle={50}
+ stickyHeaderIndices={Array []}
+ style={
+ Object {
+ "flexGrow": 1,
+ }
+ }
+ viewabilityConfigCallbackPairs={Array []}
+ >
+ <View>
+ <View
+ onLayout={[Function]}
+ style={null}
+ >
+ <View
+ accessible={true}
+ collapsable={false}
+ focusable={true}
+ onClick={[Function]}
+ onResponderGrant={[Function]}
+ onResponderMove={[Function]}
+ onResponderRelease={[Function]}
+ onResponderTerminate={[Function]}
+ onResponderTerminationRequest={[Function]}
+ onStartShouldSetResponder={[Function]}
+ style={
+ Object {
+ "borderBottomWidth": 1,
+ "borderColor": "#DEDEDE",
+ "flex": 1,
+ "flexDirection": "row",
+ "justifyContent": "space-between",
+ "opacity": 1,
+ "paddingHorizontal": 40,
+ "paddingVertical": 19.714285714285715,
+ }
+ }
+ testID="responseListItem0"
+ >
+ <Text
+ style={
+ Array [
+ Object {
+ "flex": 1,
+ "fontSize": 36,
+ "fontWeight": "400",
+ "marginEnd": 20,
+ },
+ Object {
+ "color": "#181818",
+ },
+ ]
+ }
+ >
+ Success
+ </Text>
+ <Text
+ style={
+ Array [
+ Object {
+ "fontSize": 36,
+ },
+ Object {
+ "color": "#007aa3",
+ },
+ ]
+ }
+ >
+ ✓
+ </Text>
+ </View>
+ </View>
+ <View
+ onLayout={[Function]}
+ style={null}
+ >
+ <View
+ accessible={true}
+ collapsable={false}
+ focusable={true}
+ onClick={[Function]}
+ onResponderGrant={[Function]}
+ onResponderMove={[Function]}
+ onResponderRelease={[Function]}
+ onResponderTerminate={[Function]}
+ onResponderTerminationRequest={[Function]}
+ onStartShouldSetResponder={[Function]}
+ style={
+ Object {
+ "borderBottomWidth": 1,
+ "borderColor": "#DEDEDE",
+ "flex": 1,
+ "flexDirection": "row",
+ "justifyContent": "space-between",
+ "opacity": 1,
+ "paddingHorizontal": 40,
+ "paddingVertical": 19.714285714285715,
+ }
+ }
+ testID="responseListItem1"
+ >
+ <Text
+ style={
+ Array [
+ Object {
+ "flex": 1,
+ "fontSize": 36,
+ "fontWeight": "400",
+ "marginEnd": 20,
+ },
+ Object {
+ "color": "#181818",
+ },
+ ]
+ }
+ >
+ Error
+ </Text>
+ </View>
+ </View>
+ </View>
+ </RCTScrollView>
+ <View
+ style={
+ Array [
+ Object {
+ "borderTopWidth": 1,
+ "height": 50,
+ },
+ Object {
+ "backgroundColor": "#EBEBEB",
+ },
+ Object {
+ "borderColor": "#DEDEDE",
+ },
+ ]
+ }
+ >
+ <View
+ accessible={true}
+ collapsable={false}
+ focusable={true}
+ onClick={[Function]}
+ onResponderGrant={[Function]}
+ onResponderMove={[Function]}
+ onResponderRelease={[Function]}
+ onResponderTerminate={[Function]}
+ onResponderTerminationRequest={[Function]}
+ onStartShouldSetResponder={[Function]}
+ style={
+ Object {
+ "alignItems": "center",
+ "flex": 1,
+ "justifyContent": "center",
+ "marginHorizontal": 24,
+ "opacity": 1,
+ }
+ }
+ >
+ <Text
+ numberOfLines={1}
+ style={
+ Array [
+ Object {
+ "fontSize": 36,
+ "textAlign": "center",
+ },
+ Object {
+ "color": "#EE0003",
+ },
+ ]
+ }
+ >
+ Disable API Mock
+ </Text>
+ </View>
+ </View>
</View>
`;
diff --git a/src/__tests__/components/__snapshots__/RequestList.test.tsx.snap b/src/__tests__/components/__snapshots__/RequestList.test.tsx.snap
index d04c05e..04456cc 100644
--- a/src/__tests__/components/__snapshots__/RequestList.test.tsx.snap
+++ b/src/__tests__/components/__snapshots__/RequestList.test.tsx.snap
@@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`should match RequestList snapshot 1`] = `
+exports[`given that Barricade is disabled, should match snapshot 1`] = `
<View
style={
Array [
@@ -153,6 +153,7 @@ exports[`should match RequestList snapshot 1`] = `
Array [
Object {
"delay": 2000,
+ "disabled": true,
"label": "First API",
"method": "GET",
"pathEvaluation": Object {
@@ -268,7 +269,7 @@ exports[`should match RequestList snapshot 1`] = `
"paddingVertical": 19.714285714285715,
}
}
- testID="listItem0"
+ testID="requestListItem0"
>
<Text
style={
@@ -303,8 +304,1772 @@ exports[`should match RequestList snapshot 1`] = `
]
}
>
- Success
-
+ Success
+ <Text
+ style={
+ Array [
+ Object {
+ "fontSize": 24,
+ },
+ Object {
+ "color": "#EE0003",
+ },
+ ]
+ }
+ >
+ ●
+ </Text>
+ <Text
+ style={
+ Array [
+ Object {
+ "fontSize": 36,
+ },
+ Object {
+ "color": "#69696D",
+ },
+ ]
+ }
+ >
+ ›
+ </Text>
+ </Text>
+ </View>
+ </View>
+ <View
+ onLayout={[Function]}
+ style={null}
+ >
+ <View
+ accessible={true}
+ collapsable={false}
+ focusable={true}
+ onClick={[Function]}
+ onResponderGrant={[Function]}
+ onResponderMove={[Function]}
+ onResponderRelease={[Function]}
+ onResponderTerminate={[Function]}
+ onResponderTerminationRequest={[Function]}
+ onStartShouldSetResponder={[Function]}
+ style={
+ Object {
+ "borderBottomWidth": 1,
+ "borderColor": "#DEDEDE",
+ "flex": 1,
+ "flexDirection": "row",
+ "justifyContent": "space-between",
+ "opacity": 1,
+ "paddingHorizontal": 40,
+ "paddingVertical": 19.714285714285715,
+ }
+ }
+ testID="requestListItem1"
+ >
+ <Text
+ style={
+ Array [
+ Object {
+ "flex": 1,
+ "flexWrap": "wrap",
+ "fontSize": 36,
+ "fontWeight": "400",
+ "textAlign": "left",
+ },
+ Object {
+ "color": "#181818",
+ },
+ ]
+ }
+ >
+ Second API
+ </Text>
+ <Text
+ style={
+ Array [
+ Object {
+ "flex": 1,
+ "flexWrap": "wrap",
+ "fontSize": 32,
+ "textAlign": "right",
+ },
+ Object {
+ "color": "#69696D",
+ },
+ ]
+ }
+ >
+ Error
+ <Text
+ style={
+ Array [
+ Object {
+ "fontSize": 24,
+ },
+ Object {
+ "color": "#00EA6E",
+ },
+ ]
+ }
+ >
+ ●
+ </Text>
+ <Text
+ style={
+ Array [
+ Object {
+ "fontSize": 36,
+ },
+ Object {
+ "color": "#69696D",
+ },
+ ]
+ }
+ >
+ ›
+ </Text>
+ </Text>
+ </View>
+ </View>
+ <View
+ onLayout={[Function]}
+ style={null}
+ >
+ <View
+ accessible={true}
+ collapsable={false}
+ focusable={true}
+ onClick={[Function]}
+ onResponderGrant={[Function]}
+ onResponderMove={[Function]}
+ onResponderRelease={[Function]}
+ onResponderTerminate={[Function]}
+ onResponderTerminationRequest={[Function]}
+ onStartShouldSetResponder={[Function]}
+ style={
+ Object {
+ "borderBottomWidth": 1,
+ "borderColor": "#DEDEDE",
+ "flex": 1,
+ "flexDirection": "row",
+ "justifyContent": "space-between",
+ "opacity": 1,
+ "paddingHorizontal": 40,
+ "paddingVertical": 19.714285714285715,
+ }
+ }
+ testID="requestListItem2"
+ >
+ <Text
+ style={
+ Array [
+ Object {
+ "flex": 1,
+ "flexWrap": "wrap",
+ "fontSize": 36,
+ "fontWeight": "400",
+ "textAlign": "left",
+ },
+ Object {
+ "color": "#181818",
+ },
+ ]
+ }
+ >
+ Third API
+ </Text>
+ <Text
+ style={
+ Array [
+ Object {
+ "flex": 1,
+ "flexWrap": "wrap",
+ "fontSize": 32,
+ "textAlign": "right",
+ },
+ Object {
+ "color": "#69696D",
+ },
+ ]
+ }
+ >
+ Success
+ <Text
+ style={
+ Array [
+ Object {
+ "fontSize": 24,
+ },
+ Object {
+ "color": "#00EA6E",
+ },
+ ]
+ }
+ >
+ ●
+ </Text>
+ <Text
+ style={
+ Array [
+ Object {
+ "fontSize": 36,
+ },
+ Object {
+ "color": "#69696D",
+ },
+ ]
+ }
+ >
+ ›
+ </Text>
+ </Text>
+ </View>
+ </View>
+ </View>
+ </RCTScrollView>
+ <View
+ style={
+ Array [
+ Object {
+ "borderTopWidth": 1,
+ "height": 50,
+ },
+ Object {
+ "backgroundColor": "#EBEBEB",
+ },
+ Object {
+ "borderColor": "#DEDEDE",
+ },
+ ]
+ }
+ >
+ <View
+ accessible={true}
+ collapsable={false}
+ focusable={true}
+ onClick={[Function]}
+ onResponderGrant={[Function]}
+ onResponderMove={[Function]}
+ onResponderRelease={[Function]}
+ onResponderTerminate={[Function]}
+ onResponderTerminationRequest={[Function]}
+ onStartShouldSetResponder={[Function]}
+ style={
+ Object {
+ "alignItems": "center",
+ "flex": 1,
+ "justifyContent": "center",
+ "marginHorizontal": 24,
+ "opacity": 1,
+ }
+ }
+ >
+ <Text
+ numberOfLines={1}
+ style={
+ Array [
+ Object {
+ "fontSize": 36,
+ "textAlign": "center",
+ },
+ Object {
+ "color": "#007aa3",
+ },
+ ]
+ }
+ >
+ Enable Barricade
+ </Text>
+ </View>
+ </View>
+</View>
+`;
+
+exports[`given that Barricade is enabled, should match snapshot 1`] = `
+<View
+ style={
+ Array [
+ Object {
+ "flex": 1,
+ },
+ Object {
+ "backgroundColor": "#ffffff",
+ },
+ ]
+ }
+>
+ <View
+ style={
+ Array [
+ Object {
+ "borderBottomWidth": 1,
+ },
+ Object {
+ "backgroundColor": "#EBEBEB",
+ },
+ Object {
+ "borderColor": "#DEDEDE",
+ },
+ ]
+ }
+ >
+ <View
+ style={
+ Object {
+ "alignItems": "center",
+ "flexDirection": "row",
+ "height": 82.14285714285714,
+ "marginHorizontal": 24,
+ }
+ }
+ >
+ <Text
+ numberOfLines={1}
+ style={
+ Array [
+ Object {
+ "fontSize": 40,
+ "fontWeight": "bold",
+ "left": 0,
+ "marginHorizontal": 140,
+ "position": "absolute",
+ "right": 0,
+ "textAlign": "center",
+ },
+ Object {
+ "color": "#181818",
+ },
+ ]
+ }
+ >
+ Barricade
+ </Text>
+ <View
+ accessible={true}
+ collapsable={false}
+ focusable={true}
+ onClick={[Function]}
+ onResponderGrant={[Function]}
+ onResponderMove={[Function]}
+ onResponderRelease={[Function]}
+ onResponderTerminate={[Function]}
+ onResponderTerminationRequest={[Function]}
+ onStartShouldSetResponder={[Function]}
+ style={
+ Object {
+ "marginRight": 20,
+ "opacity": 1,
+ }
+ }
+ >
+ <Text
+ style={
+ Array [
+ Object {
+ "fontSize": 36,
+ "margin": 16,
+ "textAlign": "center",
+ },
+ Object {
+ "color": "#007aa3",
+ },
+ ]
+ }
+ >
+ Reset
+ </Text>
+ </View>
+ <View
+ style={
+ Object {
+ "flex": 1,
+ }
+ }
+ />
+ <View
+ accessible={true}
+ collapsable={false}
+ focusable={true}
+ onClick={[Function]}
+ onResponderGrant={[Function]}
+ onResponderMove={[Function]}
+ onResponderRelease={[Function]}
+ onResponderTerminate={[Function]}
+ onResponderTerminationRequest={[Function]}
+ onStartShouldSetResponder={[Function]}
+ style={
+ Object {
+ "marginLeft": 20,
+ "opacity": 1,
+ }
+ }
+ >
+ <Text
+ style={
+ Array [
+ Object {
+ "fontSize": 36,
+ "margin": 16,
+ "textAlign": "center",
+ },
+ Object {
+ "color": "#007aa3",
+ },
+ ]
+ }
+ >
+ Done
+ </Text>
+ </View>
+ </View>
+ </View>
+ <RCTScrollView
+ contentContainerStyle={
+ Array [
+ Object {
+ "flexGrow": 1,
+ },
+ Object {
+ "backgroundColor": "#ffffff",
+ },
+ ]
+ }
+ data={
+ Array [
+ Object {
+ "delay": 2000,
+ "disabled": true,
+ "label": "First API",
+ "method": "GET",
+ "pathEvaluation": Object {
+ "path": "/first/api",
+ "type": 2,
+ },
+ "responseHandler": Array [
+ Object {
+ "handler": [Function],
+ "isSelected": true,
+ "label": "Success",
+ },
+ Object {
+ "handler": [Function],
+ "isSelected": false,
+ "label": "Error",
+ },
+ ],
+ "selectedResponseLabel": "Success",
+ },
+ Object {
+ "label": "Second API",
+ "method": "POST",
+ "pathEvaluation": Object {
+ "path": "/second/api",
+ "type": 1,
+ },
+ "responseHandler": Array [
+ Object {
+ "handler": [Function],
+ "isSelected": false,
+ "label": "Success",
+ },
+ Object {
+ "handler": [Function],
+ "isSelected": true,
+ "label": "Error",
+ },
+ ],
+ "selectedResponseLabel": "Error",
+ },
+ Object {
+ "label": "Third API",
+ "method": "POST",
+ "pathEvaluation": Object {
+ "callback": [Function],
+ "path": "/third/api",
+ "type": 0,
+ },
+ "responseHandler": Array [
+ Object {
+ "handler": [Function],
+ "isSelected": true,
+ "label": "Success",
+ },
+ Object {
+ "handler": [Function],
+ "isSelected": false,
+ "label": "Error",
+ },
+ ],
+ "selectedResponseLabel": "Success",
+ },
+ ]
+ }
+ extraData={0}
+ getItem={[Function]}
+ getItemCount={[Function]}
+ keyExtractor={[Function]}
+ onContentSizeChange={[Function]}
+ onLayout={[Function]}
+ onMomentumScrollBegin={[Function]}
+ onMomentumScrollEnd={[Function]}
+ onScroll={[Function]}
+ onScrollBeginDrag={[Function]}
+ onScrollEndDrag={[Function]}
+ removeClippedSubviews={false}
+ renderItem={[Function]}
+ scrollEventThrottle={50}
+ stickyHeaderIndices={Array []}
+ style={
+ Object {
+ "flexGrow": 1,
+ }
+ }
+ viewabilityConfigCallbackPairs={Array []}
+ >
+ <View>
+ <View
+ onLayout={[Function]}
+ style={null}
+ >
+ <View
+ accessible={true}
+ collapsable={false}
+ focusable={true}
+ onClick={[Function]}
+ onResponderGrant={[Function]}
+ onResponderMove={[Function]}
+ onResponderRelease={[Function]}
+ onResponderTerminate={[Function]}
+ onResponderTerminationRequest={[Function]}
+ onStartShouldSetResponder={[Function]}
+ style={
+ Object {
+ "borderBottomWidth": 1,
+ "borderColor": "#DEDEDE",
+ "flex": 1,
+ "flexDirection": "row",
+ "justifyContent": "space-between",
+ "opacity": 1,
+ "paddingHorizontal": 40,
+ "paddingVertical": 19.714285714285715,
+ }
+ }
+ testID="requestListItem0"
+ >
+ <Text
+ style={
+ Array [
+ Object {
+ "flex": 1,
+ "flexWrap": "wrap",
+ "fontSize": 36,
+ "fontWeight": "400",
+ "textAlign": "left",
+ },
+ Object {
+ "color": "#181818",
+ },
+ ]
+ }
+ >
+ First API
+ </Text>
+ <Text
+ style={
+ Array [
+ Object {
+ "flex": 1,
+ "flexWrap": "wrap",
+ "fontSize": 32,
+ "textAlign": "right",
+ },
+ Object {
+ "color": "#69696D",
+ },
+ ]
+ }
+ >
+ Success
+ <Text
+ style={
+ Array [
+ Object {
+ "fontSize": 24,
+ },
+ Object {
+ "color": "#EE0003",
+ },
+ ]
+ }
+ >
+ ●
+ </Text>
+ <Text
+ style={
+ Array [
+ Object {
+ "fontSize": 36,
+ },
+ Object {
+ "color": "#69696D",
+ },
+ ]
+ }
+ >
+ ›
+ </Text>
+ </Text>
+ </View>
+ </View>
+ <View
+ onLayout={[Function]}
+ style={null}
+ >
+ <View
+ accessible={true}
+ collapsable={false}
+ focusable={true}
+ onClick={[Function]}
+ onResponderGrant={[Function]}
+ onResponderMove={[Function]}
+ onResponderRelease={[Function]}
+ onResponderTerminate={[Function]}
+ onResponderTerminationRequest={[Function]}
+ onStartShouldSetResponder={[Function]}
+ style={
+ Object {
+ "borderBottomWidth": 1,
+ "borderColor": "#DEDEDE",
+ "flex": 1,
+ "flexDirection": "row",
+ "justifyContent": "space-between",
+ "opacity": 1,
+ "paddingHorizontal": 40,
+ "paddingVertical": 19.714285714285715,
+ }
+ }
+ testID="requestListItem1"
+ >
+ <Text
+ style={
+ Array [
+ Object {
+ "flex": 1,
+ "flexWrap": "wrap",
+ "fontSize": 36,
+ "fontWeight": "400",
+ "textAlign": "left",
+ },
+ Object {
+ "color": "#181818",
+ },
+ ]
+ }
+ >
+ Second API
+ </Text>
+ <Text
+ style={
+ Array [
+ Object {
+ "flex": 1,
+ "flexWrap": "wrap",
+ "fontSize": 32,
+ "textAlign": "right",
+ },
+ Object {
+ "color": "#69696D",
+ },
+ ]
+ }
+ >
+ Error
+ <Text
+ style={
+ Array [
+ Object {
+ "fontSize": 24,
+ },
+ Object {
+ "color": "#00EA6E",
+ },
+ ]
+ }
+ >
+ ●
+ </Text>
+ <Text
+ style={
+ Array [
+ Object {
+ "fontSize": 36,
+ },
+ Object {
+ "color": "#69696D",
+ },
+ ]
+ }
+ >
+ ›
+ </Text>
+ </Text>
+ </View>
+ </View>
+ <View
+ onLayout={[Function]}
+ style={null}
+ >
+ <View
+ accessible={true}
+ collapsable={false}
+ focusable={true}
+ onClick={[Function]}
+ onResponderGrant={[Function]}
+ onResponderMove={[Function]}
+ onResponderRelease={[Function]}
+ onResponderTerminate={[Function]}
+ onResponderTerminationRequest={[Function]}
+ onStartShouldSetResponder={[Function]}
+ style={
+ Object {
+ "borderBottomWidth": 1,
+ "borderColor": "#DEDEDE",
+ "flex": 1,
+ "flexDirection": "row",
+ "justifyContent": "space-between",
+ "opacity": 1,
+ "paddingHorizontal": 40,
+ "paddingVertical": 19.714285714285715,
+ }
+ }
+ testID="requestListItem2"
+ >
+ <Text
+ style={
+ Array [
+ Object {
+ "flex": 1,
+ "flexWrap": "wrap",
+ "fontSize": 36,
+ "fontWeight": "400",
+ "textAlign": "left",
+ },
+ Object {
+ "color": "#181818",
+ },
+ ]
+ }
+ >
+ Third API
+ </Text>
+ <Text
+ style={
+ Array [
+ Object {
+ "flex": 1,
+ "flexWrap": "wrap",
+ "fontSize": 32,
+ "textAlign": "right",
+ },
+ Object {
+ "color": "#69696D",
+ },
+ ]
+ }
+ >
+ Success
+ <Text
+ style={
+ Array [
+ Object {
+ "fontSize": 24,
+ },
+ Object {
+ "color": "#00EA6E",
+ },
+ ]
+ }
+ >
+ ●
+ </Text>
+ <Text
+ style={
+ Array [
+ Object {
+ "fontSize": 36,
+ },
+ Object {
+ "color": "#69696D",
+ },
+ ]
+ }
+ >
+ ›
+ </Text>
+ </Text>
+ </View>
+ </View>
+ </View>
+ </RCTScrollView>
+ <View
+ style={
+ Array [
+ Object {
+ "borderTopWidth": 1,
+ "height": 50,
+ },
+ Object {
+ "backgroundColor": "#EBEBEB",
+ },
+ Object {
+ "borderColor": "#DEDEDE",
+ },
+ ]
+ }
+ >
+ <View
+ accessible={true}
+ collapsable={false}
+ focusable={true}
+ onClick={[Function]}
+ onResponderGrant={[Function]}
+ onResponderMove={[Function]}
+ onResponderRelease={[Function]}
+ onResponderTerminate={[Function]}
+ onResponderTerminationRequest={[Function]}
+ onStartShouldSetResponder={[Function]}
+ style={
+ Object {
+ "alignItems": "center",
+ "flex": 1,
+ "justifyContent": "center",
+ "marginHorizontal": 24,
+ "opacity": 1,
+ }
+ }
+ >
+ <Text
+ numberOfLines={1}
+ style={
+ Array [
+ Object {
+ "fontSize": 36,
+ "textAlign": "center",
+ },
+ Object {
+ "color": "#EE0003",
+ },
+ ]
+ }
+ >
+ Disable Barricade
+ </Text>
+ </View>
+ </View>
+</View>
+`;
+
+exports[`given that all APIs are enabled, should match RequestList snapshot 1`] = `
+<View
+ style={
+ Array [
+ Object {
+ "flex": 1,
+ },
+ Object {
+ "backgroundColor": "#ffffff",
+ },
+ ]
+ }
+>
+ <View
+ style={
+ Array [
+ Object {
+ "borderBottomWidth": 1,
+ },
+ Object {
+ "backgroundColor": "#EBEBEB",
+ },
+ Object {
+ "borderColor": "#DEDEDE",
+ },
+ ]
+ }
+ >
+ <View
+ style={
+ Object {
+ "alignItems": "center",
+ "flexDirection": "row",
+ "height": 82.14285714285714,
+ "marginHorizontal": 24,
+ }
+ }
+ >
+ <Text
+ numberOfLines={1}
+ style={
+ Array [
+ Object {
+ "fontSize": 40,
+ "fontWeight": "bold",
+ "left": 0,
+ "marginHorizontal": 140,
+ "position": "absolute",
+ "right": 0,
+ "textAlign": "center",
+ },
+ Object {
+ "color": "#181818",
+ },
+ ]
+ }
+ >
+ Barricade
+ </Text>
+ <View
+ accessible={true}
+ collapsable={false}
+ focusable={true}
+ onClick={[Function]}
+ onResponderGrant={[Function]}
+ onResponderMove={[Function]}
+ onResponderRelease={[Function]}
+ onResponderTerminate={[Function]}
+ onResponderTerminationRequest={[Function]}
+ onStartShouldSetResponder={[Function]}
+ style={
+ Object {
+ "marginRight": 20,
+ "opacity": 1,
+ }
+ }
+ >
+ <Text
+ style={
+ Array [
+ Object {
+ "fontSize": 36,
+ "margin": 16,
+ "textAlign": "center",
+ },
+ Object {
+ "color": "#007aa3",
+ },
+ ]
+ }
+ >
+ Reset
+ </Text>
+ </View>
+ <View
+ style={
+ Object {
+ "flex": 1,
+ }
+ }
+ />
+ <View
+ accessible={true}
+ collapsable={false}
+ focusable={true}
+ onClick={[Function]}
+ onResponderGrant={[Function]}
+ onResponderMove={[Function]}
+ onResponderRelease={[Function]}
+ onResponderTerminate={[Function]}
+ onResponderTerminationRequest={[Function]}
+ onStartShouldSetResponder={[Function]}
+ style={
+ Object {
+ "marginLeft": 20,
+ "opacity": 1,
+ }
+ }
+ >
+ <Text
+ style={
+ Array [
+ Object {
+ "fontSize": 36,
+ "margin": 16,
+ "textAlign": "center",
+ },
+ Object {
+ "color": "#007aa3",
+ },
+ ]
+ }
+ >
+ Done
+ </Text>
+ </View>
+ </View>
+ </View>
+ <RCTScrollView
+ contentContainerStyle={
+ Array [
+ Object {
+ "flexGrow": 1,
+ },
+ Object {
+ "backgroundColor": "#ffffff",
+ },
+ ]
+ }
+ data={
+ Array [
+ Object {
+ "delay": 2000,
+ "label": "First API",
+ "method": "GET",
+ "pathEvaluation": Object {
+ "path": "/first/api",
+ "type": 2,
+ },
+ "responseHandler": Array [
+ Object {
+ "handler": [Function],
+ "isSelected": true,
+ "label": "Success",
+ },
+ Object {
+ "handler": [Function],
+ "isSelected": false,
+ "label": "Error",
+ },
+ ],
+ "selectedResponseLabel": "Success",
+ },
+ Object {
+ "label": "Second API",
+ "method": "POST",
+ "pathEvaluation": Object {
+ "path": "/second/api",
+ "type": 1,
+ },
+ "responseHandler": Array [
+ Object {
+ "handler": [Function],
+ "isSelected": false,
+ "label": "Success",
+ },
+ Object {
+ "handler": [Function],
+ "isSelected": true,
+ "label": "Error",
+ },
+ ],
+ "selectedResponseLabel": "Error",
+ },
+ Object {
+ "label": "Third API",
+ "method": "POST",
+ "pathEvaluation": Object {
+ "callback": [Function],
+ "path": "/third/api",
+ "type": 0,
+ },
+ "responseHandler": Array [
+ Object {
+ "handler": [Function],
+ "isSelected": true,
+ "label": "Success",
+ },
+ Object {
+ "handler": [Function],
+ "isSelected": false,
+ "label": "Error",
+ },
+ ],
+ "selectedResponseLabel": "Success",
+ },
+ ]
+ }
+ extraData={0}
+ getItem={[Function]}
+ getItemCount={[Function]}
+ keyExtractor={[Function]}
+ onContentSizeChange={[Function]}
+ onLayout={[Function]}
+ onMomentumScrollBegin={[Function]}
+ onMomentumScrollEnd={[Function]}
+ onScroll={[Function]}
+ onScrollBeginDrag={[Function]}
+ onScrollEndDrag={[Function]}
+ removeClippedSubviews={false}
+ renderItem={[Function]}
+ scrollEventThrottle={50}
+ stickyHeaderIndices={Array []}
+ style={
+ Object {
+ "flexGrow": 1,
+ }
+ }
+ viewabilityConfigCallbackPairs={Array []}
+ >
+ <View>
+ <View
+ onLayout={[Function]}
+ style={null}
+ >
+ <View
+ accessible={true}
+ collapsable={false}
+ focusable={true}
+ onClick={[Function]}
+ onResponderGrant={[Function]}
+ onResponderMove={[Function]}
+ onResponderRelease={[Function]}
+ onResponderTerminate={[Function]}
+ onResponderTerminationRequest={[Function]}
+ onStartShouldSetResponder={[Function]}
+ style={
+ Object {
+ "borderBottomWidth": 1,
+ "borderColor": "#DEDEDE",
+ "flex": 1,
+ "flexDirection": "row",
+ "justifyContent": "space-between",
+ "opacity": 1,
+ "paddingHorizontal": 40,
+ "paddingVertical": 19.714285714285715,
+ }
+ }
+ testID="requestListItem0"
+ >
+ <Text
+ style={
+ Array [
+ Object {
+ "flex": 1,
+ "flexWrap": "wrap",
+ "fontSize": 36,
+ "fontWeight": "400",
+ "textAlign": "left",
+ },
+ Object {
+ "color": "#181818",
+ },
+ ]
+ }
+ >
+ First API
+ </Text>
+ <Text
+ style={
+ Array [
+ Object {
+ "flex": 1,
+ "flexWrap": "wrap",
+ "fontSize": 32,
+ "textAlign": "right",
+ },
+ Object {
+ "color": "#69696D",
+ },
+ ]
+ }
+ >
+ Success
+ <Text
+ style={
+ Array [
+ Object {
+ "fontSize": 24,
+ },
+ Object {
+ "color": "#00EA6E",
+ },
+ ]
+ }
+ >
+ ●
+ </Text>
+ <Text
+ style={
+ Array [
+ Object {
+ "fontSize": 36,
+ },
+ Object {
+ "color": "#69696D",
+ },
+ ]
+ }
+ >
+ ›
+ </Text>
+ </Text>
+ </View>
+ </View>
+ <View
+ onLayout={[Function]}
+ style={null}
+ >
+ <View
+ accessible={true}
+ collapsable={false}
+ focusable={true}
+ onClick={[Function]}
+ onResponderGrant={[Function]}
+ onResponderMove={[Function]}
+ onResponderRelease={[Function]}
+ onResponderTerminate={[Function]}
+ onResponderTerminationRequest={[Function]}
+ onStartShouldSetResponder={[Function]}
+ style={
+ Object {
+ "borderBottomWidth": 1,
+ "borderColor": "#DEDEDE",
+ "flex": 1,
+ "flexDirection": "row",
+ "justifyContent": "space-between",
+ "opacity": 1,
+ "paddingHorizontal": 40,
+ "paddingVertical": 19.714285714285715,
+ }
+ }
+ testID="requestListItem1"
+ >
+ <Text
+ style={
+ Array [
+ Object {
+ "flex": 1,
+ "flexWrap": "wrap",
+ "fontSize": 36,
+ "fontWeight": "400",
+ "textAlign": "left",
+ },
+ Object {
+ "color": "#181818",
+ },
+ ]
+ }
+ >
+ Second API
+ </Text>
+ <Text
+ style={
+ Array [
+ Object {
+ "flex": 1,
+ "flexWrap": "wrap",
+ "fontSize": 32,
+ "textAlign": "right",
+ },
+ Object {
+ "color": "#69696D",
+ },
+ ]
+ }
+ >
+ Error
+ <Text
+ style={
+ Array [
+ Object {
+ "fontSize": 24,
+ },
+ Object {
+ "color": "#00EA6E",
+ },
+ ]
+ }
+ >
+ ●
+ </Text>
+ <Text
+ style={
+ Array [
+ Object {
+ "fontSize": 36,
+ },
+ Object {
+ "color": "#69696D",
+ },
+ ]
+ }
+ >
+ ›
+ </Text>
+ </Text>
+ </View>
+ </View>
+ <View
+ onLayout={[Function]}
+ style={null}
+ >
+ <View
+ accessible={true}
+ collapsable={false}
+ focusable={true}
+ onClick={[Function]}
+ onResponderGrant={[Function]}
+ onResponderMove={[Function]}
+ onResponderRelease={[Function]}
+ onResponderTerminate={[Function]}
+ onResponderTerminationRequest={[Function]}
+ onStartShouldSetResponder={[Function]}
+ style={
+ Object {
+ "borderBottomWidth": 1,
+ "borderColor": "#DEDEDE",
+ "flex": 1,
+ "flexDirection": "row",
+ "justifyContent": "space-between",
+ "opacity": 1,
+ "paddingHorizontal": 40,
+ "paddingVertical": 19.714285714285715,
+ }
+ }
+ testID="requestListItem2"
+ >
+ <Text
+ style={
+ Array [
+ Object {
+ "flex": 1,
+ "flexWrap": "wrap",
+ "fontSize": 36,
+ "fontWeight": "400",
+ "textAlign": "left",
+ },
+ Object {
+ "color": "#181818",
+ },
+ ]
+ }
+ >
+ Third API
+ </Text>
+ <Text
+ style={
+ Array [
+ Object {
+ "flex": 1,
+ "flexWrap": "wrap",
+ "fontSize": 32,
+ "textAlign": "right",
+ },
+ Object {
+ "color": "#69696D",
+ },
+ ]
+ }
+ >
+ Success
+ <Text
+ style={
+ Array [
+ Object {
+ "fontSize": 24,
+ },
+ Object {
+ "color": "#00EA6E",
+ },
+ ]
+ }
+ >
+ ●
+ </Text>
+ <Text
+ style={
+ Array [
+ Object {
+ "fontSize": 36,
+ },
+ Object {
+ "color": "#69696D",
+ },
+ ]
+ }
+ >
+ ›
+ </Text>
+ </Text>
+ </View>
+ </View>
+ </View>
+ </RCTScrollView>
+ <View
+ style={
+ Array [
+ Object {
+ "borderTopWidth": 1,
+ "height": 50,
+ },
+ Object {
+ "backgroundColor": "#EBEBEB",
+ },
+ Object {
+ "borderColor": "#DEDEDE",
+ },
+ ]
+ }
+ >
+ <View
+ accessible={true}
+ collapsable={false}
+ focusable={true}
+ onClick={[Function]}
+ onResponderGrant={[Function]}
+ onResponderMove={[Function]}
+ onResponderRelease={[Function]}
+ onResponderTerminate={[Function]}
+ onResponderTerminationRequest={[Function]}
+ onStartShouldSetResponder={[Function]}
+ style={
+ Object {
+ "alignItems": "center",
+ "flex": 1,
+ "justifyContent": "center",
+ "marginHorizontal": 24,
+ "opacity": 1,
+ }
+ }
+ >
+ <Text
+ numberOfLines={1}
+ style={
+ Array [
+ Object {
+ "fontSize": 36,
+ "textAlign": "center",
+ },
+ Object {
+ "color": "#EE0003",
+ },
+ ]
+ }
+ >
+ Disable Barricade
+ </Text>
+ </View>
+ </View>
+</View>
+`;
+
+exports[`given that one API is disabled, should match RequestList snapshot 1`] = `
+<View
+ style={
+ Array [
+ Object {
+ "flex": 1,
+ },
+ Object {
+ "backgroundColor": "#ffffff",
+ },
+ ]
+ }
+>
+ <View
+ style={
+ Array [
+ Object {
+ "borderBottomWidth": 1,
+ },
+ Object {
+ "backgroundColor": "#EBEBEB",
+ },
+ Object {
+ "borderColor": "#DEDEDE",
+ },
+ ]
+ }
+ >
+ <View
+ style={
+ Object {
+ "alignItems": "center",
+ "flexDirection": "row",
+ "height": 82.14285714285714,
+ "marginHorizontal": 24,
+ }
+ }
+ >
+ <Text
+ numberOfLines={1}
+ style={
+ Array [
+ Object {
+ "fontSize": 40,
+ "fontWeight": "bold",
+ "left": 0,
+ "marginHorizontal": 140,
+ "position": "absolute",
+ "right": 0,
+ "textAlign": "center",
+ },
+ Object {
+ "color": "#181818",
+ },
+ ]
+ }
+ >
+ Barricade
+ </Text>
+ <View
+ accessible={true}
+ collapsable={false}
+ focusable={true}
+ onClick={[Function]}
+ onResponderGrant={[Function]}
+ onResponderMove={[Function]}
+ onResponderRelease={[Function]}
+ onResponderTerminate={[Function]}
+ onResponderTerminationRequest={[Function]}
+ onStartShouldSetResponder={[Function]}
+ style={
+ Object {
+ "marginRight": 20,
+ "opacity": 1,
+ }
+ }
+ >
+ <Text
+ style={
+ Array [
+ Object {
+ "fontSize": 36,
+ "margin": 16,
+ "textAlign": "center",
+ },
+ Object {
+ "color": "#007aa3",
+ },
+ ]
+ }
+ >
+ Reset
+ </Text>
+ </View>
+ <View
+ style={
+ Object {
+ "flex": 1,
+ }
+ }
+ />
+ <View
+ accessible={true}
+ collapsable={false}
+ focusable={true}
+ onClick={[Function]}
+ onResponderGrant={[Function]}
+ onResponderMove={[Function]}
+ onResponderRelease={[Function]}
+ onResponderTerminate={[Function]}
+ onResponderTerminationRequest={[Function]}
+ onStartShouldSetResponder={[Function]}
+ style={
+ Object {
+ "marginLeft": 20,
+ "opacity": 1,
+ }
+ }
+ >
+ <Text
+ style={
+ Array [
+ Object {
+ "fontSize": 36,
+ "margin": 16,
+ "textAlign": "center",
+ },
+ Object {
+ "color": "#007aa3",
+ },
+ ]
+ }
+ >
+ Done
+ </Text>
+ </View>
+ </View>
+ </View>
+ <RCTScrollView
+ contentContainerStyle={
+ Array [
+ Object {
+ "flexGrow": 1,
+ },
+ Object {
+ "backgroundColor": "#ffffff",
+ },
+ ]
+ }
+ data={
+ Array [
+ Object {
+ "delay": 2000,
+ "disabled": true,
+ "label": "First API",
+ "method": "GET",
+ "pathEvaluation": Object {
+ "path": "/first/api",
+ "type": 2,
+ },
+ "responseHandler": Array [
+ Object {
+ "handler": [Function],
+ "isSelected": true,
+ "label": "Success",
+ },
+ Object {
+ "handler": [Function],
+ "isSelected": false,
+ "label": "Error",
+ },
+ ],
+ "selectedResponseLabel": "Success",
+ },
+ Object {
+ "label": "Second API",
+ "method": "POST",
+ "pathEvaluation": Object {
+ "path": "/second/api",
+ "type": 1,
+ },
+ "responseHandler": Array [
+ Object {
+ "handler": [Function],
+ "isSelected": false,
+ "label": "Success",
+ },
+ Object {
+ "handler": [Function],
+ "isSelected": true,
+ "label": "Error",
+ },
+ ],
+ "selectedResponseLabel": "Error",
+ },
+ Object {
+ "label": "Third API",
+ "method": "POST",
+ "pathEvaluation": Object {
+ "callback": [Function],
+ "path": "/third/api",
+ "type": 0,
+ },
+ "responseHandler": Array [
+ Object {
+ "handler": [Function],
+ "isSelected": true,
+ "label": "Success",
+ },
+ Object {
+ "handler": [Function],
+ "isSelected": false,
+ "label": "Error",
+ },
+ ],
+ "selectedResponseLabel": "Success",
+ },
+ ]
+ }
+ extraData={0}
+ getItem={[Function]}
+ getItemCount={[Function]}
+ keyExtractor={[Function]}
+ onContentSizeChange={[Function]}
+ onLayout={[Function]}
+ onMomentumScrollBegin={[Function]}
+ onMomentumScrollEnd={[Function]}
+ onScroll={[Function]}
+ onScrollBeginDrag={[Function]}
+ onScrollEndDrag={[Function]}
+ removeClippedSubviews={false}
+ renderItem={[Function]}
+ scrollEventThrottle={50}
+ stickyHeaderIndices={Array []}
+ style={
+ Object {
+ "flexGrow": 1,
+ }
+ }
+ viewabilityConfigCallbackPairs={Array []}
+ >
+ <View>
+ <View
+ onLayout={[Function]}
+ style={null}
+ >
+ <View
+ accessible={true}
+ collapsable={false}
+ focusable={true}
+ onClick={[Function]}
+ onResponderGrant={[Function]}
+ onResponderMove={[Function]}
+ onResponderRelease={[Function]}
+ onResponderTerminate={[Function]}
+ onResponderTerminationRequest={[Function]}
+ onStartShouldSetResponder={[Function]}
+ style={
+ Object {
+ "borderBottomWidth": 1,
+ "borderColor": "#DEDEDE",
+ "flex": 1,
+ "flexDirection": "row",
+ "justifyContent": "space-between",
+ "opacity": 1,
+ "paddingHorizontal": 40,
+ "paddingVertical": 19.714285714285715,
+ }
+ }
+ testID="requestListItem0"
+ >
+ <Text
+ style={
+ Array [
+ Object {
+ "flex": 1,
+ "flexWrap": "wrap",
+ "fontSize": 36,
+ "fontWeight": "400",
+ "textAlign": "left",
+ },
+ Object {
+ "color": "#181818",
+ },
+ ]
+ }
+ >
+ First API
+ </Text>
+ <Text
+ style={
+ Array [
+ Object {
+ "flex": 1,
+ "flexWrap": "wrap",
+ "fontSize": 32,
+ "textAlign": "right",
+ },
+ Object {
+ "color": "#69696D",
+ },
+ ]
+ }
+ >
+ Success
+ <Text
+ style={
+ Array [
+ Object {
+ "fontSize": 24,
+ },
+ Object {
+ "color": "#EE0003",
+ },
+ ]
+ }
+ >
+ ●
+ </Text>
<Text
style={
Array [
@@ -317,7 +2082,7 @@ exports[`should match RequestList snapshot 1`] = `
]
}
>
- ›
+ ›
</Text>
</Text>
</View>
@@ -349,7 +2114,7 @@ exports[`should match RequestList snapshot 1`] = `
"paddingVertical": 19.714285714285715,
}
}
- testID="listItem1"
+ testID="requestListItem1"
>
<Text
style={
@@ -384,8 +2149,21 @@ exports[`should match RequestList snapshot 1`] = `
]
}
>
- Error
-
+ Error
+ <Text
+ style={
+ Array [
+ Object {
+ "fontSize": 24,
+ },
+ Object {
+ "color": "#00EA6E",
+ },
+ ]
+ }
+ >
+ ●
+ </Text>
<Text
style={
Array [
@@ -398,7 +2176,7 @@ exports[`should match RequestList snapshot 1`] = `
]
}
>
- ›
+ ›
</Text>
</Text>
</View>
@@ -430,7 +2208,7 @@ exports[`should match RequestList snapshot 1`] = `
"paddingVertical": 19.714285714285715,
}
}
- testID="listItem2"
+ testID="requestListItem2"
>
<Text
style={
@@ -465,8 +2243,21 @@ exports[`should match RequestList snapshot 1`] = `
]
}
>
- Success
-
+ Success
+ <Text
+ style={
+ Array [
+ Object {
+ "fontSize": 24,
+ },
+ Object {
+ "color": "#00EA6E",
+ },
+ ]
+ }
+ >
+ ●
+ </Text>
<Text
style={
Array [
@@ -479,7 +2270,7 @@ exports[`should match RequestList snapshot 1`] = `
]
}
>
- ›
+ ›
</Text>
</Text>
</View>
diff --git a/src/__tests__/network/barricade.test.ts b/src/__tests__/network/barricade.test.ts
index 105ffe7..0433bbe 100644
--- a/src/__tests__/network/barricade.test.ts
+++ b/src/__tests__/network/barricade.test.ts
@@ -1,5 +1,6 @@
jest.useFakeTimers();
+import { Method } from '../../network/barricade.types';
import { HttpStatusCode } from '../../network/http-codes';
import {
asyncResponseApiConfig,
@@ -15,7 +16,7 @@ import {
successResponse,
} from '../data/request-test-data';
-test('given that an instance of Barricade is created, should format and set requestConfig', () => {
+test('given that an instance of Barricade is created with requestConfig, should format and set requestConfig', () => {
const firstConfig = {
...firstApiConfig,
responseHandler: [
@@ -38,7 +39,7 @@ test('given that an instance of Barricade is created, should format and set requ
{ label: 'Error', isSelected: false, handler: jest.fn() },
],
};
- const formattedSeconfConfig = {
+ const formattedSecondConfig = {
...secondApiConfig,
selectedResponseLabel: 'Error',
responseHandler: [
@@ -51,12 +52,104 @@ test('given that an instance of Barricade is created, should format and set requ
const barricade = new Barricade.Barricade([firstConfig, secondConfig]);
expect(JSON.stringify(barricade.requestConfig)).toEqual(
- JSON.stringify([formattedFirstConfig, formattedSeconfConfig]),
+ JSON.stringify([formattedFirstConfig, formattedSecondConfig]),
);
expect.assertions(1);
});
+test('given that an instance of Barricade is created without requestConfig, requestConfig should be empty', () => {
+ const Barricade = require('../../network/barricade');
+ const barricade = new Barricade.Barricade();
+
+ expect(barricade.requestConfig).toEqual([]);
+
+ expect.assertions(1);
+});
+
+test('given that an instance of Barricade is created without requestConfig, when registerRequest is called should format and set requestConfig', () => {
+ const firstConfig = {
+ ...firstApiConfig,
+ responseHandler: [
+ { label: 'Success', handler: jest.fn() },
+ { label: 'Error', handler: jest.fn() },
+ ],
+ };
+ const formattedFirstConfig = {
+ ...firstApiConfig,
+ selectedResponseLabel: 'Success',
+ responseHandler: [
+ { label: 'Success', isSelected: true, handler: jest.fn() },
+ { label: 'Error', isSelected: false, handler: jest.fn() },
+ ],
+ };
+
+ const Barricade = require('../../network/barricade');
+ const barricade = new Barricade.Barricade();
+ barricade.registerRequest(firstConfig);
+
+ expect(JSON.stringify(barricade.requestConfig)).toEqual(
+ JSON.stringify([formattedFirstConfig]),
+ );
+ expect.assertions(1);
+});
+
+describe('given that Barricade is created and requestConfig is set,', () => {
+ const firstConfig = {
+ ...firstApiConfig,
+ responseHandler: [
+ { label: 'Success', handler: jest.fn() },
+ { label: 'Error', handler: jest.fn() },
+ ],
+ };
+ const secondConfig = {
+ ...secondApiConfig,
+ responseHandler: [
+ { label: 'Success', handler: jest.fn() },
+ { label: 'Error', isSelected: true, handler: jest.fn() },
+ ],
+ };
+ const formattedFirstConfig = {
+ ...firstApiConfig,
+ selectedResponseLabel: 'Success',
+ responseHandler: [
+ { label: 'Success', isSelected: true, handler: jest.fn() },
+ { label: 'Error', isSelected: false, handler: jest.fn() },
+ ],
+ };
+ const formattedSecondConfig = {
+ ...secondApiConfig,
+ selectedResponseLabel: 'Error',
+ responseHandler: [
+ { label: 'Success', isSelected: false, handler: jest.fn() },
+ { label: 'Error', isSelected: true, handler: jest.fn() },
+ ],
+ };
+ let barricade;
+ beforeEach(() => {
+ const Barricade = require('../../network/barricade');
+ barricade = new Barricade.Barricade([firstConfig, secondConfig]);
+ });
+
+ test('when unregisterRequest is called with a config in requestConfig, should remove config from requestConfig', () => {
+ barricade.unregisterRequest(secondConfig);
+
+ expect(JSON.stringify(barricade.requestConfig)).toEqual(
+ JSON.stringify([formattedFirstConfig]),
+ );
+ expect.assertions(1);
+ });
+
+ test('when unregisterRequest is called with a config not in requestConfig, should not remove config from requestConfig', () => {
+ barricade.unregisterRequest({ ...secondConfig, method: Method.Put });
+
+ expect(JSON.stringify(barricade.requestConfig)).toEqual(
+ JSON.stringify([formattedFirstConfig, formattedSecondConfig]),
+ );
+ expect.assertions(1);
+ });
+});
+
describe('given that start function is called,', () => {
let barricade;
afterEach(() => {
@@ -201,7 +294,7 @@ describe('given that shutdown function is called,', () => {
});
});
-test('given that inital requestConfig was updated, should reset requestConfig, when resetRequestConfig is called', () => {
+test('given that initial requestConfig was updated, should reset requestConfig, when resetRequestConfig is called', () => {
const firstConfig = {
...firstApiConfig,
responseHandler: [
@@ -224,7 +317,7 @@ test('given that inital requestConfig was updated, should reset requestConfig, w
{ label: 'Error', isSelected: false, handler: jest.fn() },
],
};
- const formattedSeconfConfig = {
+ const formattedSecondConfig = {
...secondApiConfig,
selectedResponseLabel: 'Error',
responseHandler: [
@@ -244,23 +337,23 @@ test('given that inital requestConfig was updated, should reset requestConfig, w
barricade.resetRequestConfig();
expect(JSON.stringify(barricade.requestConfig)).toEqual(
- JSON.stringify([formattedFirstConfig, formattedSeconfConfig]),
+ JSON.stringify([formattedFirstConfig, formattedSecondConfig]),
);
expect.assertions(1);
});
describe('given that barricade was started and handleRequest is called,', () => {
let barricade;
- const mockCreateNativeXMLHttpRequest = jest.fn();
+ const mockHandleNativeXMLHttpRequest = jest.fn();
beforeEach(() => {
jest.resetModules();
const Barricade = require('../../network/barricade');
barricade = new Barricade.Barricade([
- firstApiConfig,
- secondApiConfig,
- thirdApiConfig,
+ { ...firstApiConfig },
+ { ...secondApiConfig },
+ { ...thirdApiConfig },
]);
- barricade.handleNativeXMLHttpRequest = mockCreateNativeXMLHttpRequest;
+ barricade.handleNativeXMLHttpRequest = mockHandleNativeXMLHttpRequest;
barricade.start();
});
@@ -268,12 +361,26 @@ describe('given that barricade was started and handleRequest is called,', () =>
afterEach(() => {
jest.clearAllMocks();
barricade.shutdown();
+ barricade = undefined;
});
test('when an API which is not in requestConfig is triggered, should trigger API with nativeXMLHttpRequest', () => {
barricade.handleRequest(mockApiRequest);
- expect(mockCreateNativeXMLHttpRequest).toHaveBeenCalledWith(mockApiRequest);
+ expect(mockHandleNativeXMLHttpRequest).toHaveBeenCalledWith(mockApiRequest);
+ expect.assertions(1);
+ });
+
+ test('when an API which is in requestConfig which is disabled is triggered, should trigger API with nativeXMLHttpRequest', () => {
+ const request = getCustomMockApiRequest({
+ _method: firstApiConfig.method,
+ _url: firstApiConfig.pathEvaluation.path,
+ });
+ barricade.requestConfig[0].disabled = true;
+
+ barricade.handleRequest(request);
+
+ expect(mockHandleNativeXMLHttpRequest).toHaveBeenCalledWith(request);
expect.assertions(1);
});
@@ -286,7 +393,7 @@ describe('given that barricade was started and handleRequest is called,', () =>
barricade.resolveRequest = jest.fn();
barricade.handleRequest(request);
- expect(mockCreateNativeXMLHttpRequest).not.toHaveBeenCalled();
+ expect(mockHandleNativeXMLHttpRequest).not.toHaveBeenCalled();
expect(barricade.resolveRequest).toHaveBeenCalledWith(
request,
successResponse,
@@ -303,7 +410,7 @@ describe('given that barricade was started and handleRequest is called,', () =>
barricade.resolveRequest = jest.fn();
barricade.handleRequest(request);
- expect(mockCreateNativeXMLHttpRequest).toHaveBeenCalledWith(request);
+ expect(mockHandleNativeXMLHttpRequest).toHaveBeenCalledWith(request);
expect(barricade.resolveRequest).not.toHaveBeenCalled();
expect.assertions(2);
});
@@ -318,7 +425,7 @@ describe('given that barricade was started and handleRequest is called,', () =>
barricade.resolveRequest = jest.fn();
barricade.handleRequest(request);
- expect(mockCreateNativeXMLHttpRequest).not.toHaveBeenCalled();
+ expect(mockHandleNativeXMLHttpRequest).not.toHaveBeenCalled();
expect(barricade.resolveRequest).toHaveBeenCalledWith(
request,
errorResponse,
@@ -335,7 +442,7 @@ describe('given that barricade was started and handleRequest is called,', () =>
barricade.resolveRequest = jest.fn();
barricade.handleRequest(request);
- expect(mockCreateNativeXMLHttpRequest).toHaveBeenCalledWith(request);
+ expect(mockHandleNativeXMLHttpRequest).toHaveBeenCalledWith(request);
expect(barricade.resolveRequest).not.toHaveBeenCalled();
expect.assertions(2);
});
@@ -354,7 +461,7 @@ describe('given that barricade was started and handleRequest is called,', () =>
barricade.resolveRequest = jest.fn();
barricade.handleRequest(request);
- expect(mockCreateNativeXMLHttpRequest).not.toHaveBeenCalled();
+ expect(mockHandleNativeXMLHttpRequest).not.toHaveBeenCalled();
expect(barricade.resolveRequest).toHaveBeenCalledWith(
request,
successResponse,
@@ -375,7 +482,7 @@ describe('given that barricade was started and handleRequest is called,', () =>
barricade.resolveRequest = jest.fn();
barricade.handleRequest(request);
- expect(mockCreateNativeXMLHttpRequest).toHaveBeenCalledWith(request);
+ expect(mockHandleNativeXMLHttpRequest).toHaveBeenCalledWith(request);
expect(barricade.resolveRequest).not.toHaveBeenCalled();
expect.assertions(2);
});
@@ -394,7 +501,7 @@ describe('given that barricade was started and handleRequest is called,', () =>
barricade.resolveRequest = jest.fn();
barricade.handleRequest(request);
- expect(mockCreateNativeXMLHttpRequest).not.toHaveBeenCalled();
+ expect(mockHandleNativeXMLHttpRequest).not.toHaveBeenCalled();
expect(barricade.resolveRequest).toHaveBeenCalledWith(
request,
successResponse,
@@ -418,7 +525,7 @@ describe('given that barricade was started and handleRequest is called,', () =>
await jest.advanceTimersByTime(3000);
- expect(mockCreateNativeXMLHttpRequest).not.toHaveBeenCalled();
+ expect(mockHandleNativeXMLHttpRequest).not.toHaveBeenCalled();
expect(barricade.resolveRequest).toHaveBeenCalledWith(
request,
successResponse,
@@ -441,7 +548,7 @@ describe('given that barricade was started and handleRequest is called,', () =>
await jest.advanceTimersByTime(3000);
- expect(mockCreateNativeXMLHttpRequest).not.toHaveBeenCalled();
+ expect(mockHandleNativeXMLHttpRequest).not.toHaveBeenCalled();
expect(barricade.handleMockedXMLHttpRequest).toThrow(
new Error(
`Barricade intercepted undefined(undefined) API and threw an error - Cannot read properties of undefined (reading 'responseHandler').`,
diff --git a/src/components/BarricadeView.tsx b/src/components/BarricadeView.tsx
index df198f7..cb0cdae 100644
--- a/src/components/BarricadeView.tsx
+++ b/src/components/BarricadeView.tsx
@@ -42,7 +42,10 @@ export const BarricadeView = (props: BarricadeViewProps) => {
const renderContent = () => {
if (!barricade) {
return;
- } else if (viewType === ViewType.List) {
+ } else if (
+ viewType === ViewType.List ||
+ typeof selectedListItemIndex === 'undefined'
+ ) {
return (
<RequestList
barricade={barricade}
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 9e814f8..59c2f67 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,25 +1,25 @@
-import React, { useState } from 'react';
-import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import React from 'react';
+import {
+ NativeSyntheticEvent,
+ StyleSheet,
+ Text,
+ TextStyle,
+ TouchableOpacity,
+ View,
+} from 'react-native';
-import { Strings } from '../constants';
-import { Barricade } from '../network';
import { useThemedColor } from '../theme';
import { hScale } from '../utils';
export type FooterProps = {
- barricade: Barricade;
+ onPress?: (event: NativeSyntheticEvent<any>) => void;
+ title: string;
+ titleStyle: TextStyle;
};
const Footer = (props: FooterProps): JSX.Element => {
- const { barricade } = props;
+ const { onPress, title, titleStyle } = props;
const { themeColorStyle } = useThemedColor();
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
- const [refreshList, setRefreshList] = useState(0);
-
- const onButtonPressed = () => {
- barricade.running ? barricade.shutdown() : barricade.start();
- setRefreshList(Math.random());
- };
return (
<View
@@ -28,16 +28,9 @@ const Footer = (props: FooterProps): JSX.Element => {
themeColorStyle.background,
themeColorStyle.border,
]}>
- <TouchableOpacity onPress={onButtonPressed} style={styles.footer}>
- <Text
- numberOfLines={1}
- style={[
- styles.title,
- barricade.running ? themeColorStyle.error : themeColorStyle.primary,
- ]}>
- {barricade.running
- ? Strings.DisableBarricade
- : Strings.EnableBarricade}
+ <TouchableOpacity onPress={onPress} style={styles.footer}>
+ <Text numberOfLines={1} style={[styles.title, titleStyle]}>
+ {title}
</Text>
</TouchableOpacity>
</View>
diff --git a/src/components/RequestDetail.tsx b/src/components/RequestDetail.tsx
index 1e5a38e..457fd9c 100644
--- a/src/components/RequestDetail.tsx
+++ b/src/components/RequestDetail.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
import {
FlatList,
ListRenderItemInfo,
@@ -12,26 +12,37 @@ import { Strings, Unicode } from '../constants';
import { Barricade, ResponseHandler } from '../network';
import { useThemedColor } from '../theme';
import { hScale, vScale } from '../utils';
+import { Footer } from './Footer';
import { Header } from './Header';
type RequestDetailProps = {
barricade: Barricade;
- selectedListItemIndex?: number;
+ selectedListItemIndex: number;
onBackPressed: () => void;
};
const RequestDetail = (props: RequestDetailProps): JSX.Element => {
const { barricade, selectedListItemIndex, onBackPressed } = props;
const { themeColorStyle } = useThemedColor();
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
+ const [refreshList, setRefreshList] = useState(0);
+
+ const onFooterPressed = () => {
+ barricade.requestConfig[selectedListItemIndex].disabled =
+ !barricade.requestConfig[selectedListItemIndex].disabled;
+ setRefreshList(Math.random());
+ onBackPressed();
+ };
const onDetailItemPressed = (item: ResponseHandler, index: number) => {
if (!item.isSelected) {
- const requestConfig = barricade.requestConfig[selectedListItemIndex!];
+ const requestConfig = barricade.requestConfig[selectedListItemIndex];
requestConfig.responseHandler.map((responseHandler, i) => {
responseHandler.isSelected = index === i;
return responseHandler;
});
requestConfig.selectedResponseLabel = item.label;
+ requestConfig.disabled = false;
onBackPressed();
}
};
@@ -42,6 +53,7 @@ const RequestDetail = (props: RequestDetailProps): JSX.Element => {
}: ListRenderItemInfo<ResponseHandler>) => {
return (
<TouchableOpacity
+ testID={`responseListItem${index}`}
style={[styles.listItemContainer, themeColorStyle.border]}
onPress={() => onDetailItemPressed(item, index)}>
<Text style={[styles.label, themeColorStyle.textDark]}>
@@ -63,14 +75,27 @@ const RequestDetail = (props: RequestDetailProps): JSX.Element => {
title: `${Unicode.ChevronLeft} ${Strings.Back}`,
onPress: onBackPressed,
}}
- title={barricade?.requestConfig[selectedListItemIndex!]?.label ?? ''}
+ title={barricade.requestConfig[selectedListItemIndex]?.label}
/>
<FlatList
style={styles.listContainer}
contentContainerStyle={[styles.listContainer, themeColorStyle.surface]}
- data={barricade?.requestConfig[selectedListItemIndex!]?.responseHandler}
+ data={barricade.requestConfig[selectedListItemIndex]?.responseHandler}
renderItem={renderDetailItem}
/>
+ <Footer
+ onPress={onFooterPressed}
+ title={
+ barricade.requestConfig[selectedListItemIndex]?.disabled
+ ? Strings.EnableAPI
+ : Strings.DisableAPI
+ }
+ titleStyle={
+ barricade.requestConfig[selectedListItemIndex]?.disabled
+ ? themeColorStyle.primary
+ : themeColorStyle.error
+ }
+ />
</View>
);
};
diff --git a/src/components/RequestList.tsx b/src/components/RequestList.tsx
index 8f2ef3b..77e5501 100644
--- a/src/components/RequestList.tsx
+++ b/src/components/RequestList.tsx
@@ -28,28 +28,46 @@ const RequestList = (props: RequestListProps): JSX.Element => {
const [refreshList, setRefreshList] = useState(0);
const onResetPressed = () => {
- barricade?.resetRequestConfig();
+ barricade.resetRequestConfig();
setRefreshList(Math.random());
};
+ const onFooterPressed = () => {
+ barricade.running ? barricade.shutdown() : barricade.start();
+ setRefreshList(Math.random());
+ };
+
+ const renderSelectedResponse = (item: RequestConfigForLib) => {
+ return (
+ <Text style={[styles.value, themeColorStyle.textLight]}>
+ {`${item.selectedResponseLabel} `}
+ <Text
+ style={[
+ styles.circleIcon,
+ item.disabled ? themeColorStyle.error : themeColorStyle.success,
+ ]}>
+ {Unicode.Circle}
+ </Text>
+ <Text style={[styles.rightIcon, themeColorStyle.textLight]}>
+ {` ${Unicode.ChevronRight}`}
+ </Text>
+ </Text>
+ );
+ };
+
const renderListItem = ({
item,
index,
}: ListRenderItemInfo<RequestConfigForLib>) => {
return (
<TouchableOpacity
- testID={`listItem${index}`}
+ testID={`requestListItem${index}`}
style={[styles.listItemContainer, themeColorStyle.border]}
onPress={() => onListItemPressed(index)}>
<Text style={[styles.label, themeColorStyle.textDark]}>
{item.label}
</Text>
- <Text style={[styles.value, themeColorStyle.textLight]}>
- {item.selectedResponseLabel}{' '}
- <Text style={[styles.icon, themeColorStyle.textLight]}>
- {Unicode.ChevronRight}
- </Text>
- </Text>
+ {renderSelectedResponse(item)}
</TouchableOpacity>
);
};
@@ -64,11 +82,19 @@ const RequestList = (props: RequestListProps): JSX.Element => {
<FlatList
style={styles.listContainer}
contentContainerStyle={[styles.listContainer, themeColorStyle.surface]}
- data={barricade?.requestConfig}
+ data={barricade.requestConfig}
renderItem={renderListItem}
extraData={refreshList}
/>
- <Footer barricade={barricade} />
+ <Footer
+ onPress={onFooterPressed}
+ title={
+ barricade.running ? Strings.DisableBarricade : Strings.EnableBarricade
+ }
+ titleStyle={
+ barricade.running ? themeColorStyle.error : themeColorStyle.primary
+ }
+ />
</View>
);
};
@@ -99,7 +125,10 @@ const styles = StyleSheet.create({
textAlign: 'right',
fontSize: hScale(16),
},
- icon: {
+ circleIcon: {
+ fontSize: hScale(12),
+ },
+ rightIcon: {
fontSize: hScale(18),
},
});
diff --git a/src/constants/strings.ts b/src/constants/strings.ts
index 5e39cb8..df0f5d7 100644
--- a/src/constants/strings.ts
+++ b/src/constants/strings.ts
@@ -1,8 +1,11 @@
export const Strings = {
Back: 'Back',
Barricade: 'Barricade',
+ DisableAPI: 'Disable API Mock',
DisableBarricade: 'Disable Barricade',
+ Disabled: 'Disabled',
Done: 'Done',
+ EnableAPI: 'Enable API Mock',
EnableBarricade: 'Enable Barricade',
Reset: 'Reset',
};
diff --git a/src/constants/unicode.ts b/src/constants/unicode.ts
index 392aafb..c2cdac2 100644
--- a/src/constants/unicode.ts
+++ b/src/constants/unicode.ts
@@ -2,4 +2,5 @@ export const Unicode = {
ChevronLeft: '\u2039',
CheckMark: '\u2713',
ChevronRight: '\u203A',
+ Circle: '\u25CF',
};
diff --git a/src/index.tsx b/src/index.tsx
index 8a4e99d..8dee9b6 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -21,10 +21,10 @@ let barricade: Barricade | undefined;
/**
* Creates an instance of Barricade and initializes the array of RequestConfig passed to the function.
- * @param requests : Array of RequestConfig. Each item in this array should contain configuration of each API that you want to mock.
+ * @param requests : Optional Array of RequestConfig. Each item in this array should contain configuration of each API that you want to mock.
* @returns Instance of Barricade that was created.
*/
-const createBarricade = (requests: RequestConfig[]) => {
+const createBarricade = (requests?: RequestConfig[]) => {
barricade = new Barricade(requests);
if (__DEV__) {
DevSettings.addMenuItem(Strings.Barricade, () => {
diff --git a/src/network/barricade.ts b/src/network/barricade.ts
index 3299a5c..653f4ea 100644
--- a/src/network/barricade.ts
+++ b/src/network/barricade.ts
@@ -18,7 +18,7 @@ import { interceptor } from './interceptor';
export class Barricade {
/** Boolean that indicates whether the Barricade is enabled/disabled. */
running = false;
- private readonly _originalRequestConfig: RequestConfigForLib[] = [];
+ private _originalRequestConfig: RequestConfigForLib[] = [];
private _requestConfig: RequestConfigForLib[] = [];
private _nativeXMLHttpRequest: typeof XMLHttpRequest;
private _nativeFetch: RNFetch.fetch;
@@ -26,9 +26,9 @@ export class Barricade {
private _nativeRequest: RNFetch.Request;
private _nativeResponse: RNFetch.Response;
- constructor(requestConfig: RequestConfig[]) {
+ constructor(requestConfig?: RequestConfig[]) {
this.initRequestConfig(requestConfig);
- this._originalRequestConfig = ObjectUtils.cloneDeep(this.requestConfig);
+
this._nativeXMLHttpRequest = global.XMLHttpRequest;
this._nativeFetch = global.fetch;
this._nativeHeaders = global.Headers;
@@ -99,14 +99,17 @@ export class Barricade {
/**
* Formats the RequestConfig[] to RequestConfigForLib[] and sets it to _requestConfig
- * @param requests Array of RequestConfigs passed to be registered while creating an instance of Barricade.
+ * @param requests Optional Array of RequestConfigs passed to be registered while creating an instance of Barricade.
*/
- private initRequestConfig(requests: RequestConfig[]) {
- const updatedRequestConfig = requests.map<RequestConfig>(
- this.getRequestConfigForLib,
- );
+ private initRequestConfig(requests?: RequestConfig[]) {
+ if (requests?.length) {
+ const updatedRequestConfig = requests.map<RequestConfig>(
+ this.getRequestConfigForLib,
+ );
- this._requestConfig = updatedRequestConfig;
+ this._requestConfig = updatedRequestConfig;
+ this._originalRequestConfig = ObjectUtils.cloneDeep(this.requestConfig);
+ }
}
/**
@@ -127,7 +130,7 @@ export class Barricade {
requestUrl,
);
- if (requestConfig) {
+ if (requestConfig && !requestConfig.disabled) {
this.handleMockedXMLHttpRequest(
request,
requestConfig,
@@ -243,6 +246,19 @@ export class Barricade {
xhr.send(request._requestBody);
}
+ /**
+ * Registers an API to be mocked by Barricade.
+ * @param request RequestConfig data of an API call that needs to be registered for mocking.
+ */
+ registerRequest(request: RequestConfig) {
+ const updatedRequestConfig = this.getRequestConfigForLib(request);
+
+ this.requestConfig.push(updatedRequestConfig);
+ this._originalRequestConfig.push(
+ ObjectUtils.cloneDeep(updatedRequestConfig),
+ );
+ }
+
/**
* Resets selected responses for all the registered request config to its default value.
*/
@@ -298,4 +314,19 @@ export class Barricade {
global.Response = this._nativeResponse;
this.running = false;
}
+
+ /**
+ * Unregisters an API from being mocked by Barricade.
+ * @param request RequestConfig data of an API call that needs to be registered for mocking.
+ */
+ unregisterRequest(request: RequestConfig) {
+ const index = this.requestConfig.findIndex(
+ item => item.label === request.label && item.method === request.method,
+ );
+
+ if (index > -1) {
+ this.requestConfig.splice(index, 1);
+ this._originalRequestConfig.splice(index, 1);
+ }
+ }
}
diff --git a/src/network/barricade.types.ts b/src/network/barricade.types.ts
index 2cba902..a6345b3 100644
--- a/src/network/barricade.types.ts
+++ b/src/network/barricade.types.ts
@@ -35,6 +35,7 @@ export interface RequestConfig {
);
responseHandler: ResponseHandler[];
delay?: number;
+ disabled?: boolean;
}
export interface RequestConfigForLib extends RequestConfig {