424d2f6965
## Description
This PR upgrades Prettier to v2 + enforces TypeScript’s [`import
type`](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-8.html#type-only-imports-and-export)
syntax where applicable. It’s submitted as a separate PR so we can merge
it easily.
As a part of this PR, we reformat the codebase heavily:
- add `import type` everywhere where it’s required, and
- re-format the code to account for Prettier 2’s breaking changes:
https://prettier.io/blog/2020/03/21/2.0.0.html#breaking-changes
This PR is submitted against `release` to make sure all new code by team
members will adhere to new formatting standards, and we’ll have fewer
conflicts when merging `bundle-optimizations` into `release`. (I’ll
merge `release` back into `bundle-optimizations` once this PR is
merged.)
### Why is this needed?
This PR is needed because, for the Lodash optimization from
7cbb12af88,
we need to use `import type`. Otherwise, `babel-plugin-lodash` complains
that `LoDashStatic` is not a lodash function.
However, just using `import type` in the current codebase will give you
this:
<img width="962" alt="Screenshot 2023-03-08 at 17 45 59"
src="https://user-images.githubusercontent.com/2953267/223775744-407afa0c-e8b9-44a1-90f9-b879348da57f.png">
That’s because Prettier 1 can’t parse `import type` at all. To parse it,
we need to upgrade to Prettier 2.
### Why enforce `import type`?
Apart from just enabling `import type` support, this PR enforces
specifying `import type` everywhere it’s needed. (Developers will get
immediate TypeScript and ESLint errors when they forget to do so.)
I’m doing this because I believe `import type` improves DX and makes
refactorings easier.
Let’s say you had a few imports like below. Can you tell which of these
imports will increase the bundle size? (Tip: it’s not all of them!)
```ts
// app/client/src/workers/Linting/utils.ts
import { Position } from "codemirror";
import { LintError as JSHintError, LintOptions } from "jshint";
import { get, isEmpty, isNumber, keys, last, set } from "lodash";
```
It’s pretty hard, right?
What about now?
```ts
// app/client/src/workers/Linting/utils.ts
import type { Position } from "codemirror";
import type { LintError as JSHintError, LintOptions } from "jshint";
import { get, isEmpty, isNumber, keys, last, set } from "lodash";
```
Now, it’s clear that only `lodash` will be bundled.
This helps developers to see which imports are problematic, but it
_also_ helps with refactorings. Now, if you want to see where
`codemirror` is bundled, you can just grep for `import \{.*\} from
"codemirror"` – and you won’t get any type-only imports.
This also helps (some) bundlers. Upon transpiling, TypeScript erases
type-only imports completely. In some environment (not ours), this makes
the bundle smaller, as the bundler doesn’t need to bundle type-only
imports anymore.
## Type of change
- Chore (housekeeping or task changes that don't impact user perception)
## How Has This Been Tested?
This was tested to not break the build.
### Test Plan
> Add Testsmith test cases links that relate to this PR
### Issues raised during DP testing
> Link issues raised during DP testing for better visiblity and tracking
(copy link from comments dropped on this PR)
## Checklist:
### Dev activity
- [x] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my own code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag
### QA activity:
- [ ] Test plan has been approved by relevant developers
- [ ] Test plan has been peer reviewed by QA
- [ ] Cypress test cases have been added and approved by either SDET or
manual QA
- [ ] Organized project review call with relevant stakeholders after
Round 1/2 of QA
- [ ] Added Test Plan Approved label after reveiwing all Cypress test
---------
Co-authored-by: Satish Gandham <hello@satishgandham.com>
Co-authored-by: Satish Gandham <satish.iitg@gmail.com>
643 lines
24 KiB
TypeScript
643 lines
24 KiB
TypeScript
import { RenderModes } from "constants/WidgetConstants";
|
|
import { ValidationTypes } from "constants/WidgetValidation";
|
|
import { EvaluationSubstitutionType } from "entities/DataTree/dataTreeFactory";
|
|
import { AutocompleteDataType } from "./autocomplete/CodemirrorTernService";
|
|
import {
|
|
flattenObject,
|
|
getLocale,
|
|
getSubstringBetweenTwoWords,
|
|
captureInvalidDynamicBindingPath,
|
|
mergeWidgetConfig,
|
|
extractColorsFromString,
|
|
isNameValid,
|
|
pushToArray,
|
|
concatWithArray,
|
|
} from "./helpers";
|
|
import WidgetFactory from "./WidgetFactory";
|
|
import * as Sentry from "@sentry/react";
|
|
import { Colors } from "constants/Colors";
|
|
|
|
describe("flattenObject test", () => {
|
|
it("Check if non nested object is returned correctly", () => {
|
|
const testObject = {
|
|
isVisible: true,
|
|
isDisabled: false,
|
|
tableData: false,
|
|
};
|
|
|
|
expect(flattenObject(testObject)).toStrictEqual(testObject);
|
|
});
|
|
|
|
it("Check if nested objects are returned correctly", () => {
|
|
const tests = [
|
|
{
|
|
input: {
|
|
isVisible: true,
|
|
isDisabled: false,
|
|
tableData: false,
|
|
settings: {
|
|
color: [
|
|
{
|
|
headers: {
|
|
left: true,
|
|
},
|
|
},
|
|
],
|
|
},
|
|
},
|
|
output: {
|
|
isVisible: true,
|
|
isDisabled: false,
|
|
tableData: false,
|
|
"settings.color[0].headers.left": true,
|
|
},
|
|
},
|
|
{
|
|
input: {
|
|
isVisible: true,
|
|
isDisabled: false,
|
|
tableData: false,
|
|
settings: {
|
|
color: true,
|
|
},
|
|
},
|
|
output: {
|
|
isVisible: true,
|
|
isDisabled: false,
|
|
tableData: false,
|
|
"settings.color": true,
|
|
},
|
|
},
|
|
{
|
|
input: {
|
|
numbers: [1, 2, 3],
|
|
color: { header: "red" },
|
|
},
|
|
output: {
|
|
"numbers[0]": 1,
|
|
"numbers[1]": 2,
|
|
"numbers[2]": 3,
|
|
"color.header": "red",
|
|
},
|
|
},
|
|
{
|
|
input: {
|
|
name: null,
|
|
color: { header: {} },
|
|
users: {
|
|
id: undefined,
|
|
},
|
|
},
|
|
output: {
|
|
"color.header": {},
|
|
name: null,
|
|
"users.id": undefined,
|
|
},
|
|
},
|
|
];
|
|
|
|
tests.map((test) =>
|
|
expect(flattenObject(test.input)).toStrictEqual(test.output),
|
|
);
|
|
});
|
|
});
|
|
|
|
describe("#getSubstringBetweenTwoWords", () => {
|
|
it("returns substring between 2 words from a string", () => {
|
|
const input: [string, string, string][] = [
|
|
["aaa.bbb.ccc", "aaa.", ".ccc"],
|
|
["aaa.bbb.bbb.ccc", "aaa.", ".ccc"],
|
|
["aaa.aaa.aaa.aaa", "aaa", "aaa"],
|
|
["aaa...aaa.aaa.aaa", "aaa", "aaa"],
|
|
["aaa..bbb", "aaa.", ".bbb"],
|
|
["aaa.bbb", "aaa.", ".bbb"],
|
|
["aaabbb", "aaab", "abbb"],
|
|
];
|
|
|
|
const output = ["bbb", "bbb.bbb", ".aaa.aaa.", "...aaa.aaa.", "", "", ""];
|
|
|
|
input.forEach((inp, index) => {
|
|
expect(getSubstringBetweenTwoWords(...inp)).toBe(output[index]);
|
|
});
|
|
});
|
|
});
|
|
|
|
describe("#mergeWidgetConfig", () => {
|
|
it("should merge the widget configs", () => {
|
|
const base = [
|
|
{
|
|
sectionName: "General",
|
|
children: [
|
|
{
|
|
propertyName: "someWidgetConfig",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
sectionName: "icon",
|
|
children: [
|
|
{
|
|
propertyName: "someWidgetIconConfig",
|
|
},
|
|
],
|
|
},
|
|
];
|
|
const extended = [
|
|
{
|
|
sectionName: "General",
|
|
children: [
|
|
{
|
|
propertyName: "someOtherWidgetConfig",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
sectionName: "style",
|
|
children: [
|
|
{
|
|
propertyName: "someWidgetStyleConfig",
|
|
},
|
|
],
|
|
},
|
|
];
|
|
const expected = [
|
|
{
|
|
sectionName: "General",
|
|
children: [
|
|
{
|
|
propertyName: "someOtherWidgetConfig",
|
|
},
|
|
{
|
|
propertyName: "someWidgetConfig",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
sectionName: "style",
|
|
children: [
|
|
{
|
|
propertyName: "someWidgetStyleConfig",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
sectionName: "icon",
|
|
children: [
|
|
{
|
|
propertyName: "someWidgetIconConfig",
|
|
},
|
|
],
|
|
},
|
|
];
|
|
|
|
expect(mergeWidgetConfig(extended, base)).toEqual(expected);
|
|
});
|
|
});
|
|
|
|
describe("#getLocale", () => {
|
|
it("should test that getLocale is returning navigator.languages[0]", () => {
|
|
expect(getLocale()).toBe(navigator.languages[0]);
|
|
});
|
|
});
|
|
|
|
describe("#captureInvalidDynamicBindingPath", () => {
|
|
it("DSL should not be altered", () => {
|
|
const baseDSL = {
|
|
widgetName: "RadioGroup1",
|
|
dynamicPropertyPathList: [],
|
|
displayName: "Radio Group",
|
|
iconSVG: "/static/media/icon.ba2b2ee0.svg",
|
|
topRow: 57,
|
|
bottomRow: 65,
|
|
parentRowSpace: 10,
|
|
type: "RADIO_GROUP_WIDGET",
|
|
hideCard: false,
|
|
defaultOptionValue: "{{1}}",
|
|
animateLoading: true,
|
|
parentColumnSpace: 33.375,
|
|
dynamicTriggerPathList: [],
|
|
leftColumn: 42,
|
|
dynamicBindingPathList: [
|
|
{
|
|
key: "defaultOptionValue",
|
|
},
|
|
{
|
|
key: "options",
|
|
},
|
|
],
|
|
options:
|
|
'[\n {\n "label": "Yes",\n "value": {{1 > 0 ? 1 : 0}}\n },\n {\n "label": "No",\n "value": 2\n }\n]',
|
|
isDisabled: false,
|
|
key: "opzs6suotf",
|
|
isRequired: false,
|
|
rightColumn: 62,
|
|
widgetId: "s195otz2jm",
|
|
isVisible: true,
|
|
label: "",
|
|
version: 1,
|
|
parentId: "0",
|
|
renderMode: RenderModes.CANVAS,
|
|
isLoading: false,
|
|
};
|
|
|
|
const getPropertyConfig = jest.spyOn(
|
|
WidgetFactory,
|
|
"getWidgetPropertyPaneConfig",
|
|
);
|
|
getPropertyConfig.mockReturnValueOnce([
|
|
{
|
|
sectionName: "General",
|
|
children: [
|
|
{
|
|
helpText: "Displays a list of unique options",
|
|
propertyName: "options",
|
|
label: "Options",
|
|
controlType: "OPTION_INPUT",
|
|
isJSConvertible: true,
|
|
isBindProperty: true,
|
|
isTriggerProperty: false,
|
|
validation: {
|
|
type: ValidationTypes.FUNCTION,
|
|
params: {
|
|
expected: {
|
|
type: 'Array<{ "label": "string", "value": "string" | number}>',
|
|
example: '[{"label": "abc", "value": "abc" | 1}]',
|
|
autocompleteDataType: AutocompleteDataType.STRING,
|
|
},
|
|
fnString:
|
|
'function optionsCustomValidation(options, props, _) {\n var validationUtil = (options, _) => {\n var _isValid = true;\n var message = "";\n var valueType = "";\n var uniqueLabels = {};\n\n for (var i = 0; i < options.length; i++) {\n var _options$i = options[i],\n label = _options$i.label,\n value = _options$i.value;\n\n if (!valueType) {\n valueType = typeof value;\n } //Checks the uniqueness all the values in the options\n\n\n if (!uniqueLabels.hasOwnProperty(value)) {\n uniqueLabels[value] = "";\n } else {\n _isValid = false;\n message = "path:value must be unique. Duplicate values found";\n break;\n } //Check if the required field "label" is present:\n\n\n if (!label) {\n _isValid = false;\n message = "Invalid entry at index: " + i + ". Missing required key: label";\n break;\n } //Validation checks for the the label.\n\n\n if (_.isNil(label) || label === "" || typeof label !== "string" && typeof label !== "number") {\n _isValid = false;\n message = "Invalid entry at index: " + i + ". Value of key: label is invalid: This value does not evaluate to type string";\n break;\n } //Check if all the data types for the value prop is the same.\n\n\n if (typeof value !== valueType) {\n _isValid = false;\n message = "All value properties in options must have the same type";\n break;\n } //Check if the each object has value property.\n\n\n if (_.isNil(value)) {\n _isValid = false;\n message = \'This value does not evaluate to type Array<{ "label": "string", "value": "string" | number }>\';\n break;\n }\n }\n\n return {\n isValid: _isValid,\n parsed: _isValid ? options : [],\n messages: [message]\n };\n };\n\n var invalidResponse = {\n isValid: false,\n parsed: [],\n messages: [\'This value does not evaluate to type Array<{ "label": "string", "value": "string" | number }>\']\n };\n\n try {\n if (_.isString(options)) {\n options = JSON.parse(options);\n }\n\n if (Array.isArray(options)) {\n return validationUtil(options, _);\n } else {\n return invalidResponse;\n }\n } catch (e) {\n return invalidResponse;\n }\n}',
|
|
},
|
|
},
|
|
evaluationSubstitutionType:
|
|
EvaluationSubstitutionType.SMART_SUBSTITUTE,
|
|
id: "6su4u0bwoe",
|
|
},
|
|
{
|
|
helpText: "Sets a default selected option",
|
|
propertyName: "defaultOptionValue",
|
|
label: "Default Selected Value",
|
|
// placeholderText: "Y",
|
|
controlType: "INPUT_TEXT",
|
|
isBindProperty: true,
|
|
isTriggerProperty: false,
|
|
validation: {
|
|
type: ValidationTypes.FUNCTION,
|
|
params: {
|
|
expected: {
|
|
type: "string |\nnumber (only works in mustache syntax)",
|
|
example: "abc | {{1}}",
|
|
autocompleteDataType: AutocompleteDataType.STRING,
|
|
},
|
|
fnString:
|
|
'function defaultOptionValidation(value, props, _) {\n //Checks if the value is not of object type in {{}}\n if (_.isObject(value)) {\n return {\n isValid: false,\n parsed: JSON.stringify(value, null, 2),\n messages: ["This value does not evaluate to type: string or number"]\n };\n } //Checks if the value is not of boolean type in {{}}\n\n\n if (_.isBoolean(value)) {\n return {\n isValid: false,\n parsed: value,\n messages: ["This value does not evaluate to type: string or number"]\n };\n }\n\n return {\n isValid: true,\n parsed: value\n };\n}',
|
|
},
|
|
},
|
|
id: "8wpzo6szbl",
|
|
},
|
|
{
|
|
propertyName: "isRequired",
|
|
label: "Required",
|
|
helpText: "Makes input to the widget mandatory",
|
|
controlType: "SWITCH",
|
|
isJSConvertible: true,
|
|
isBindProperty: true,
|
|
isTriggerProperty: false,
|
|
validation: {
|
|
type: ValidationTypes.BOOLEAN,
|
|
},
|
|
id: "60kc73ivwp",
|
|
},
|
|
{
|
|
helpText: "Controls the visibility of the widget",
|
|
propertyName: "isVisible",
|
|
label: "Visible",
|
|
controlType: "SWITCH",
|
|
isJSConvertible: true,
|
|
isBindProperty: true,
|
|
isTriggerProperty: false,
|
|
validation: {
|
|
type: ValidationTypes.BOOLEAN,
|
|
},
|
|
id: "w4591dtf5l",
|
|
},
|
|
{
|
|
propertyName: "isDisabled",
|
|
label: "Disabled",
|
|
helpText: "Disables input to this widget",
|
|
controlType: "SWITCH",
|
|
isJSConvertible: true,
|
|
isBindProperty: true,
|
|
isTriggerProperty: false,
|
|
validation: {
|
|
type: ValidationTypes.BOOLEAN,
|
|
},
|
|
id: "6p7181ccec",
|
|
},
|
|
{
|
|
propertyName: "animateLoading",
|
|
label: "Animate Loading",
|
|
controlType: "SWITCH",
|
|
helpText: "Controls the loading of the widget",
|
|
// defaultValue: true,
|
|
isJSConvertible: true,
|
|
isBindProperty: true,
|
|
isTriggerProperty: false,
|
|
validation: {
|
|
type: ValidationTypes.BOOLEAN,
|
|
},
|
|
id: "y2gw796t2z",
|
|
},
|
|
],
|
|
id: "jfh7ud39r4",
|
|
},
|
|
{
|
|
sectionName: "Events",
|
|
children: [
|
|
{
|
|
helpText:
|
|
"Triggers an action when a user changes the selected option",
|
|
propertyName: "onSelectionChange",
|
|
label: "onSelectionChange",
|
|
controlType: "ACTION_SELECTOR",
|
|
isJSConvertible: true,
|
|
isBindProperty: true,
|
|
isTriggerProperty: true,
|
|
id: "wqgudnqu5n",
|
|
},
|
|
],
|
|
id: "b2k5a0t632",
|
|
},
|
|
]);
|
|
const newDsl = captureInvalidDynamicBindingPath(baseDSL);
|
|
expect(baseDSL).toEqual(newDsl);
|
|
});
|
|
|
|
it("Checks if dynamicBindingPathList contains a property path that doesn't have a binding", () => {
|
|
const baseDSL = {
|
|
widgetName: "RadioGroup1",
|
|
dynamicPropertyPathList: [],
|
|
displayName: "Radio Group",
|
|
iconSVG: "/static/media/icon.ba2b2ee0.svg",
|
|
topRow: 57,
|
|
bottomRow: 65,
|
|
parentRowSpace: 10,
|
|
type: "RADIO_GROUP_WIDGET",
|
|
hideCard: false,
|
|
defaultOptionValue: "{{1}}",
|
|
animateLoading: true,
|
|
parentColumnSpace: 33.375,
|
|
dynamicTriggerPathList: [],
|
|
leftColumn: 42,
|
|
dynamicBindingPathList: [
|
|
{
|
|
key: "defaultOptionValue",
|
|
},
|
|
{
|
|
key: "options",
|
|
},
|
|
],
|
|
options: [],
|
|
isDisabled: false,
|
|
key: "opzs6suotf",
|
|
isRequired: false,
|
|
rightColumn: 62,
|
|
widgetId: "s195otz2jm",
|
|
isVisible: true,
|
|
label: "",
|
|
version: 1,
|
|
parentId: "0",
|
|
renderMode: RenderModes.CANVAS,
|
|
isLoading: false,
|
|
};
|
|
|
|
const getPropertyConfig = jest.spyOn(
|
|
WidgetFactory,
|
|
"getWidgetPropertyPaneConfig",
|
|
);
|
|
getPropertyConfig.mockReturnValueOnce([
|
|
{
|
|
sectionName: "General",
|
|
children: [
|
|
{
|
|
helpText: "Displays a list of unique options",
|
|
propertyName: "options",
|
|
label: "Options",
|
|
controlType: "OPTION_INPUT",
|
|
isJSConvertible: true,
|
|
isBindProperty: true,
|
|
isTriggerProperty: false,
|
|
validation: {
|
|
type: ValidationTypes.FUNCTION,
|
|
params: {
|
|
expected: {
|
|
type: 'Array<{ "label": "string", "value": "string" | number}>',
|
|
example: '[{"label": "abc", "value": "abc" | 1}]',
|
|
autocompleteDataType: AutocompleteDataType.STRING,
|
|
},
|
|
fnString:
|
|
'function optionsCustomValidation(options, props, _) {\n var validationUtil = (options, _) => {\n var _isValid = true;\n var message = "";\n var valueType = "";\n var uniqueLabels = {};\n\n for (var i = 0; i < options.length; i++) {\n var _options$i = options[i],\n label = _options$i.label,\n value = _options$i.value;\n\n if (!valueType) {\n valueType = typeof value;\n } //Checks the uniqueness all the values in the options\n\n\n if (!uniqueLabels.hasOwnProperty(value)) {\n uniqueLabels[value] = "";\n } else {\n _isValid = false;\n message = "path:value must be unique. Duplicate values found";\n break;\n } //Check if the required field "label" is present:\n\n\n if (!label) {\n _isValid = false;\n message = "Invalid entry at index: " + i + ". Missing required key: label";\n break;\n } //Validation checks for the the label.\n\n\n if (_.isNil(label) || label === "" || typeof label !== "string" && typeof label !== "number") {\n _isValid = false;\n message = "Invalid entry at index: " + i + ". Value of key: label is invalid: This value does not evaluate to type string";\n break;\n } //Check if all the data types for the value prop is the same.\n\n\n if (typeof value !== valueType) {\n _isValid = false;\n message = "All value properties in options must have the same type";\n break;\n } //Check if the each object has value property.\n\n\n if (_.isNil(value)) {\n _isValid = false;\n message = \'This value does not evaluate to type Array<{ "label": "string", "value": "string" | number }>\';\n break;\n }\n }\n\n return {\n isValid: _isValid,\n parsed: _isValid ? options : [],\n messages: [message]\n };\n };\n\n var invalidResponse = {\n isValid: false,\n parsed: [],\n messages: [\'This value does not evaluate to type Array<{ "label": "string", "value": "string" | number }>\']\n };\n\n try {\n if (_.isString(options)) {\n options = JSON.parse(options);\n }\n\n if (Array.isArray(options)) {\n return validationUtil(options, _);\n } else {\n return invalidResponse;\n }\n } catch (e) {\n return invalidResponse;\n }\n}',
|
|
},
|
|
},
|
|
evaluationSubstitutionType:
|
|
EvaluationSubstitutionType.SMART_SUBSTITUTE,
|
|
id: "6su4u0bwoe",
|
|
},
|
|
{
|
|
helpText: "Sets a default selected option",
|
|
propertyName: "defaultOptionValue",
|
|
label: "Default Selected Value",
|
|
// placeholderText: "Y",
|
|
controlType: "INPUT_TEXT",
|
|
isBindProperty: true,
|
|
isTriggerProperty: false,
|
|
validation: {
|
|
type: ValidationTypes.FUNCTION,
|
|
params: {
|
|
expected: {
|
|
type: "string |\nnumber (only works in mustache syntax)",
|
|
example: "abc | {{1}}",
|
|
autocompleteDataType: AutocompleteDataType.STRING,
|
|
},
|
|
fnString:
|
|
'function defaultOptionValidation(value, props, _) {\n //Checks if the value is not of object type in {{}}\n if (_.isObject(value)) {\n return {\n isValid: false,\n parsed: JSON.stringify(value, null, 2),\n messages: ["This value does not evaluate to type: string or number"]\n };\n } //Checks if the value is not of boolean type in {{}}\n\n\n if (_.isBoolean(value)) {\n return {\n isValid: false,\n parsed: value,\n messages: ["This value does not evaluate to type: string or number"]\n };\n }\n\n return {\n isValid: true,\n parsed: value\n };\n}',
|
|
},
|
|
},
|
|
id: "8wpzo6szbl",
|
|
},
|
|
{
|
|
propertyName: "isRequired",
|
|
label: "Required",
|
|
helpText: "Makes input to the widget mandatory",
|
|
controlType: "SWITCH",
|
|
isJSConvertible: true,
|
|
isBindProperty: true,
|
|
isTriggerProperty: false,
|
|
validation: {
|
|
type: ValidationTypes.BOOLEAN,
|
|
},
|
|
id: "60kc73ivwp",
|
|
},
|
|
{
|
|
helpText: "Controls the visibility of the widget",
|
|
propertyName: "isVisible",
|
|
label: "Visible",
|
|
controlType: "SWITCH",
|
|
isJSConvertible: true,
|
|
isBindProperty: true,
|
|
isTriggerProperty: false,
|
|
validation: {
|
|
type: ValidationTypes.BOOLEAN,
|
|
},
|
|
id: "w4591dtf5l",
|
|
},
|
|
{
|
|
propertyName: "isDisabled",
|
|
label: "Disabled",
|
|
helpText: "Disables input to this widget",
|
|
controlType: "SWITCH",
|
|
isJSConvertible: true,
|
|
isBindProperty: true,
|
|
isTriggerProperty: false,
|
|
validation: {
|
|
type: ValidationTypes.BOOLEAN,
|
|
},
|
|
id: "6p7181ccec",
|
|
},
|
|
{
|
|
propertyName: "animateLoading",
|
|
label: "Animate Loading",
|
|
controlType: "SWITCH",
|
|
helpText: "Controls the loading of the widget",
|
|
// defaultValue: true,
|
|
isJSConvertible: true,
|
|
isBindProperty: true,
|
|
isTriggerProperty: false,
|
|
validation: {
|
|
type: ValidationTypes.BOOLEAN,
|
|
},
|
|
id: "y2gw796t2z",
|
|
},
|
|
],
|
|
id: "jfh7ud39r4",
|
|
},
|
|
{
|
|
sectionName: "Events",
|
|
children: [
|
|
{
|
|
helpText:
|
|
"Triggers an action when a user changes the selected option",
|
|
propertyName: "onSelectionChange",
|
|
label: "onSelectionChange",
|
|
controlType: "ACTION_SELECTOR",
|
|
isJSConvertible: true,
|
|
isBindProperty: true,
|
|
isTriggerProperty: true,
|
|
id: "wqgudnqu5n",
|
|
},
|
|
],
|
|
id: "b2k5a0t632",
|
|
},
|
|
]);
|
|
|
|
const sentrySpy = jest.spyOn(Sentry, "captureException");
|
|
|
|
captureInvalidDynamicBindingPath(baseDSL);
|
|
expect(sentrySpy).toHaveBeenCalledWith(
|
|
new Error(
|
|
`INVALID_DynamicPathBinding_CLIENT_ERROR: Invalid dynamic path binding list: RadioGroup1.options`,
|
|
),
|
|
);
|
|
});
|
|
});
|
|
|
|
describe("#extractColorsFromString", () => {
|
|
it("Check if the extractColorsFromString returns rgb, rgb, hex color strings", () => {
|
|
const borderWithHex = `2px solid ${Colors.GREEN}`;
|
|
const borderWithRgb = "2px solid rgb(0,0,0)";
|
|
const borderWithRgba = `2px solid ${Colors.BOX_SHADOW_DEFAULT_VARIANT1}`;
|
|
|
|
//Check Hex value
|
|
expect(extractColorsFromString(borderWithHex)[0]).toEqual("#03b365");
|
|
|
|
//Check rgba value
|
|
expect(extractColorsFromString(borderWithRgba)[0]).toEqual(
|
|
"rgba(0, 0, 0, 0.25)",
|
|
);
|
|
|
|
//Check rgb
|
|
expect(extractColorsFromString(borderWithRgb)[0]).toEqual("rgb(0,0,0)");
|
|
});
|
|
});
|
|
|
|
describe("isNameValid()", () => {
|
|
it("works properly", () => {
|
|
const invalidEntityNames = [
|
|
"console",
|
|
"Promise",
|
|
"appsmith",
|
|
"Math",
|
|
"yield",
|
|
"Boolean",
|
|
"ReferenceError",
|
|
"clearTimeout",
|
|
"parseInt",
|
|
"eval",
|
|
];
|
|
// Some window object methods and properties names should be valid entity names since evaluation is done
|
|
// in the worker thread, and some of the window methods and properties are not available there.
|
|
const validEntityNames = ["history", "parent", "screen"];
|
|
for (const invalidName of invalidEntityNames) {
|
|
expect(isNameValid(invalidName, {})).toBe(false);
|
|
}
|
|
for (const validName of validEntityNames) {
|
|
expect(isNameValid(validName, {})).toBe(true);
|
|
}
|
|
});
|
|
});
|
|
|
|
describe("pushToArray", () => {
|
|
it("adds to an undefined array", () => {
|
|
const item = "something";
|
|
const expected = ["something"];
|
|
const result = pushToArray(item);
|
|
expect(result).toStrictEqual(expected);
|
|
});
|
|
it("adds to an existing array", () => {
|
|
const item = "something";
|
|
const arr1 = ["another"];
|
|
const expected = ["another", "something"];
|
|
const result = pushToArray(item, arr1);
|
|
expect(result).toStrictEqual(expected);
|
|
});
|
|
it("adds to an existing array and make unique", () => {
|
|
const item = "something";
|
|
const arr1 = ["another", "another"];
|
|
const expected = ["another", "something"];
|
|
const result = pushToArray(item, arr1, true);
|
|
expect(result).toStrictEqual(expected);
|
|
});
|
|
});
|
|
|
|
describe("concatWithArray", () => {
|
|
it("adds to an undefined array", () => {
|
|
const items = ["something"];
|
|
const expected = ["something"];
|
|
const result = concatWithArray(items);
|
|
expect(result).toStrictEqual(expected);
|
|
});
|
|
it("adds to an existing array", () => {
|
|
const items = ["something"];
|
|
const arr1 = ["another"];
|
|
const expected = ["another", "something"];
|
|
const result = concatWithArray(items, arr1);
|
|
expect(result).toStrictEqual(expected);
|
|
});
|
|
it("adds to an existing array and make unique", () => {
|
|
const items = ["something"];
|
|
const arr1 = ["another", "another"];
|
|
const expected = ["another", "something"];
|
|
const result = concatWithArray(items, arr1, true);
|
|
expect(result).toStrictEqual(expected);
|
|
});
|
|
});
|