@@ -26,11 +28,21 @@ in the popup like this:
-You can click the small arrow beside the URL and specify a response to mock, when the same request is encountered next:
+Request headers for listened requests are listed below the response form as shown in the screenshot.
+
+
+
+#### Response data returned by backend server
+
+Many a times, before defining you mock response text, you would want to look at the response data returned by the server when the request is made. On clicking `Fetch Response` button, the `textarea` gets filled with the response data from the real server as shown below. However, You can completely skip this step and move on to typing out mock response text.
+
+
-
+#### Specifying mock response data
-You can specify the [Content-Type header][content-type] field and HTTP response [status code][status-code] through the dropdown available.
+You can click the small arrow beside the URL, which shows a form in which you can specify a response to mock, when the same request is encountered next. You also need to specify the [Content-Type header][content-type] field and [status code][status-code] for the mock response through the dropdown available as shown below.
+
+
Once the above fields are filled and checkbox is checked, click the `INTERCEPT` button. If the interception is successfull, it shows a success message as below:
@@ -40,20 +52,22 @@ You can intercept/mock multiple calls by checking as many checkboxes as you want
-Henceforth the same AJAX request is requested by the browser, the browser is given a fake/mock response instead of the real one.
+Henceforth the same AJAX request is made by the browser, the browser is given a fake/mock response instead of the real one.
-You can also stop listening for `AJAX calls` by clicking the `STOP LISTENING`
+You can also stop listening for `AJAX calls` by clicking the `STOP LISTENING` button. Requests made henceforth won't be listed on UI.
The toggle switch is used to disable `INTERCEPTOR`. If the toggle is switched to `OFF` state, it displays a message saying `Interception Disabled` as below.
-In the `disabled` state, the extension won't mock any previously intercepted calls.
-Also, the extension's icon beside the url address bar turns red for that particular tab as in screenshot above.
+In the `disabled` state, the extension won't mock any previously intercepted calls. Instead all `XHR's` are routed to the server.
+The extension's icon beside the url address bar turns red for that particular tab as in screenshot above.
To mock the calls again, just toggle the switch to `ON` state, check the requests that are to be mocked and click `INTERCEPT` button.
+This [blogpost](https://crypt.codemancers.com/posts/2018-04-24-intro-to-interceptor/) makes things much more clear.
+
## TODO
* ~~A user should be able to click on the extension button and see a popup with a list of all AJAX requests.~~
@@ -64,6 +78,12 @@ To mock the calls again, just toggle the switch to `ON` state, check the request
* ~~Mocked requests should hit a sinon fakeServer.~~
* ~~User should be able to disable/enable mocking for a page without clearing persisted settings for the URL.~~
+## Attribution
+
+Icons for this projects are used from [The Noun Project](https://thenounproject.com/)
+
+ * [Download](https://thenounproject.com/prosymbols/collection/set-of-line-essentials-icons-2/?i=790723) icon used is by [ProSymbols](https://thenounproject.com/prosymbols/) from the [Noun Project](http://thenounproject.com/).
+
## License
MIT
diff --git a/app/actions/index.ts b/app/actions/index.ts
index 6dfab0d..2e43678 100644
--- a/app/actions/index.ts
+++ b/app/actions/index.ts
@@ -15,6 +15,9 @@ export const CONTENT_TYPE_CHANGE = "CONTENT_TYPE_CHANGE"
export const PAGINATION_CHANGE = "PAGINATION_CHANGE"
export const UPDATE_MESSAGE = "UPDATE_MESSAGE"
export const UPDATE_INTERCEPTOR_STATUS = "UPDATE_INTERCEPTOR_STATUS"
+export const FETCH_DATA = "FETCH_DATA"
+export const FETCH_DATA_SUCCESS = "FETCH_DATA_SUCCESS"
+export const FETCH_DATA_FAILURE = "FETCH_DATA_FAILURE"
// Action Creators
export function startListening (enabledStatus:boolean){
@@ -58,4 +61,16 @@ export function sendMessageToUI(message:string){
}
export function updateInterceptorStatus(tabId:number, value:boolean){
return {type : UPDATE_INTERCEPTOR_STATUS, payload : {tabId, value}}
-}
\ No newline at end of file
+}
+export function fetchResponse(requestDetails:object) {
+ return {
+ type: FETCH_DATA,
+ requestDetails
+ }
+}
+export function fetchSuccess(data:string, requestId:number){
+ return {type: FETCH_DATA_SUCCESS, payload : {response : data, requestId } }
+}
+export function fetchFailure(error:string, requestId:number){
+ return {type : FETCH_DATA_FAILURE, payload : {error : error, requestId } }
+}
diff --git a/app/components/Intercept_Components/InterceptTextBox.tsx b/app/components/Intercept_Components/InterceptTextBox.tsx
index 132ce04..3503e77 100644
--- a/app/components/Intercept_Components/InterceptTextBox.tsx
+++ b/app/components/Intercept_Components/InterceptTextBox.tsx
@@ -2,103 +2,121 @@ import * as React from "react";
import {RequestHeaderList} from "./RequestHeaderList";
export const InterceptTextBox = props => {
+ const requestId = props.rowProps.checkbox.requestId;
const defaultResponseText = "";
const defaultStatusCode = "200";
const defaultContentType = "application/json";
- const responseTextValue = props.responseText[props.rowProps.checkbox.requestId] || defaultResponseText;
- const statusCodeValue = props.statusCodes[props.rowProps.checkbox.requestId] || defaultStatusCode;
- const contentTypeValue = props.contentType[props.rowProps.checkbox.requestId] || defaultContentType;
+ const responseTextValue = props.responseText[requestId] || defaultResponseText;
+ const statusCodeValue = props.statusCodes[requestId] || defaultStatusCode;
+ const contentTypeValue = props.contentType[requestId] || defaultContentType;
return (
- {props.responseError[requestId]}
+ ) : null}