PromucFlow_constructor/app/client/src/components/editorComponents/utils.test.ts
Hetu Nandu 5ee7f83cdf
chore: Init Plugin Action Response (#36485)
## Description

Response Pane stuff

- Move Api Response into its own component and sub components
- Move Api Headers response into its own component and sub components
- A lot of these are also used by queries and js so maybe we will create
a common folder for that
- Add a logic to render the bottom tabs in the module. Allows for
extension via hook

Fixes #36155

## Automation

/ok-to-test tags="@tag.Datasource"

### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/11026260058>
> Commit: c3b5b4b8f0e0668ff43adae1b22d320a5e6d347d
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=11026260058&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Datasource`
> Spec:
> <hr>Wed, 25 Sep 2024 05:04:24 UTC
<!-- end of auto-generated comment: Cypress test results  -->


## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [x] No


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Introduced new components for displaying API responses, including
`ApiFormatSegmentedResponse` and `ApiResponseHeaders`.
- Enhanced user interaction with a segmented control for switching
between different API response formats.
  
- **Improvements**
- Added utility functions for improved handling and validation of API
response headers and HTML content.
  
- **Bug Fixes**
- Improved error handling for API response states to ensure accurate
feedback during user interactions.

- **Chores**
- Added tests for new utility functions to validate their functionality
and ensure reliability.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2024-09-25 13:14:26 +05:30

268 lines
6.9 KiB
TypeScript

import { getJSResponseViewState, JSResponseState } from "./utils";
const TEST_JS_FUNCTION_ID = "627ccff468e1fa5185b7f901";
const TEST_JS_FUNCTION_BASE_ID = "627ccff468e1fa5185b7f912";
const TEST_JS_FUNCTION = {
id: TEST_JS_FUNCTION_ID,
baseId: TEST_JS_FUNCTION_BASE_ID,
applicationId: "627aaf637e9e9b75e43ad2ff",
workspaceId: "61e52bb4847aa804d79fc7c1",
pluginType: "JS",
pluginId: "6138c786168857325f78ef3e",
name: "myFun234y",
fullyQualifiedName: "JSObject1.myFun234y",
datasource: {
userPermissions: [],
name: "UNUSED_DATASOURCE",
pluginId: "6138c786168857325f78ef3e",
workspaceId: "61e52bb4847aa804d79fc7c1",
messages: [],
isValid: true,
new: true,
},
pageId: "627aaf637e9e9b75e43ad302",
collectionId: "627ccff468e1fa5185b7f904",
actionConfiguration: {
timeoutInMillisecond: 10000,
paginationType: "NONE",
encodeParamsToggle: true,
body: "async () => {\n\t\t//use async-await or promises here\n\t\t\n\t}",
jsArguments: [],
isAsync: true,
},
executeOnLoad: false,
clientSideExecution: true,
dynamicBindingPathList: [
{
key: "body",
},
],
isValid: true,
invalids: [],
messages: [],
jsonPathKeys: [
"async () => {\n\t\t//use async-await or promises here\n\t\t\n\t}",
],
confirmBeforeExecute: false,
userPermissions: ["read:actions", "execute:actions", "manage:actions"],
validName: "JSObject1.myFun234y",
cacheResponse: "",
};
describe("GetJSResponseViewState", () => {
it("1. returns 'NoResponse' at default state", () => {
const currentFunction = null,
isDirty = {},
isExecuting = {},
isSaving = false,
responses = {};
const expectedState = JSResponseState.NoResponse;
const actualState = getJSResponseViewState(
currentFunction,
isDirty,
isExecuting,
isSaving,
responses,
);
expect(expectedState).toBe(actualState);
});
it("2. returns 'NoResponse' when an entity is still saving but no execution has begun", () => {
const currentFunction = TEST_JS_FUNCTION,
isDirty = {},
isExecuting = {},
isSaving = true,
responses = {};
const expectedState = JSResponseState.NoResponse;
const actualState = getJSResponseViewState(
currentFunction,
isDirty,
isExecuting,
isSaving,
responses,
);
expect(expectedState).toBe(actualState);
});
it("3. returns 'IsUpdating' when an entity is still saving and execution has started", () => {
const currentFunction = TEST_JS_FUNCTION,
isDirty = {},
isExecuting = {
[TEST_JS_FUNCTION_ID]: true,
},
isSaving = true,
responses = {};
const expectedState = JSResponseState.IsUpdating;
const actualState = getJSResponseViewState(
currentFunction,
isDirty,
isExecuting,
isSaving,
responses,
);
expect(expectedState).toBe(actualState);
});
it("4. returns 'IsExecuting' when no entity is saving and execution has begun", () => {
const currentFunction = TEST_JS_FUNCTION,
isDirty = {},
isExecuting = {
[TEST_JS_FUNCTION_ID]: true,
},
isSaving = false,
responses = {};
const expectedState = JSResponseState.IsExecuting;
const actualState = getJSResponseViewState(
currentFunction,
isDirty,
isExecuting,
isSaving,
responses,
);
expect(expectedState).toBe(actualState);
});
it("5. returns 'IsDirty' when function has finished executing and there is parse error", () => {
const currentFunction = TEST_JS_FUNCTION,
isDirty = {
[TEST_JS_FUNCTION_ID]: true,
},
isExecuting = {
[TEST_JS_FUNCTION_ID]: false,
},
isSaving = false,
responses = {
[TEST_JS_FUNCTION_ID]: undefined,
};
const expectedState = JSResponseState.IsDirty;
const actualState = getJSResponseViewState(
currentFunction,
isDirty,
isExecuting,
isSaving,
responses,
);
expect(expectedState).toBe(actualState);
});
it("6. returns 'IsExecuting' when function is still executing and has a previous response", () => {
const currentFunction = TEST_JS_FUNCTION,
isDirty = {},
isExecuting = {
[TEST_JS_FUNCTION_ID]: true,
},
isSaving = false,
responses = {
[TEST_JS_FUNCTION_ID]: "test response",
};
const expectedState = JSResponseState.IsExecuting;
const actualState = getJSResponseViewState(
currentFunction,
isDirty,
isExecuting,
isSaving,
responses,
);
expect(expectedState).toBe(actualState);
});
it("7. returns 'NoReturnValue' when function is done executing and returns 'undefined'", () => {
const currentFunction = TEST_JS_FUNCTION,
isDirty = {},
isExecuting = {
[TEST_JS_FUNCTION_ID]: false,
},
isSaving = false,
responses = {
[TEST_JS_FUNCTION_ID]: undefined,
};
const expectedState = JSResponseState.NoReturnValue;
const actualState = getJSResponseViewState(
currentFunction,
isDirty,
isExecuting,
isSaving,
responses,
);
expect(expectedState).toBe(actualState);
});
it("8. returns 'ShowResponse' when function is done executing and returns a valid response", () => {
const currentFunction = TEST_JS_FUNCTION,
isDirty = {},
isExecuting = {
[TEST_JS_FUNCTION_ID]: false,
},
isSaving = false,
responses = {
[TEST_JS_FUNCTION_ID]: {},
};
const expectedState = JSResponseState.ShowResponse;
const actualState = getJSResponseViewState(
currentFunction,
isDirty,
isExecuting,
isSaving,
responses,
);
expect(expectedState).toBe(actualState);
});
it("9. returns 'IsExecuting' when no entity is saving ,execution has begun and function has a previous response", () => {
const currentFunction = TEST_JS_FUNCTION,
isDirty = {},
isExecuting = {
[TEST_JS_FUNCTION_ID]: true,
},
isSaving = false,
responses = {
[TEST_JS_FUNCTION_ID]: "previous response",
};
const expectedState = JSResponseState.IsExecuting;
const actualState = getJSResponseViewState(
currentFunction,
isDirty,
isExecuting,
isSaving,
responses,
);
expect(expectedState).toBe(actualState);
});
it("10. returns 'NoResponse' when no entity is saving , execution has not begun and function has a no previous response", () => {
const currentFunction = TEST_JS_FUNCTION,
isDirty = {},
isExecuting = {
[TEST_JS_FUNCTION_ID]: false,
},
isSaving = false,
responses = {};
const expectedState = JSResponseState.NoResponse;
const actualState = getJSResponseViewState(
currentFunction,
isDirty,
isExecuting,
isSaving,
responses,
);
expect(expectedState).toBe(actualState);
});
});