PromucFlow_constructor/app/client/cypress/support/queryCommands.js
Ivan Akulov 424d2f6965
chore: upgrade to prettier v2 + enforce import types (#21013)Co-authored-by: Satish Gandham <hello@satishgandham.com> Co-authored-by: Satish Gandham <satish.iitg@gmail.com>
## 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>
2023-03-16 17:11:47 +05:30

286 lines
8.3 KiB
JavaScript

/* eslint-disable cypress/no-unnecessary-waiting */
/* eslint-disable cypress/no-assigning-return-values */
import { ObjectsRegistry } from "../support/Objects/Registry";
require("cy-verify-downloads").addCustomCommand();
require("cypress-file-upload");
const jsEditorLocators = require("../locators/JSEditor.json");
const datasourceEditor = require("../locators/DatasourcesEditor.json");
const datasourceFormData = require("../fixtures/datasources.json");
const commonlocators = require("../locators/commonlocators.json");
const queryEditor = require("../locators/QueryEditor.json");
const widgetsPage = require("../locators/Widgets.json");
const apiwidget = require("../locators/apiWidgetslocator.json");
const explorer = require("../locators/explorerlocators.json");
const datasource = require("../locators/DatasourcesEditor.json");
const formControls = require("../locators/FormControl.json");
const queryLocators = require("../locators/QueryEditor.json");
const { AggregateHelper } = ObjectsRegistry;
export const initLocalstorage = () => {
cy.window().then((window) => {
window.localStorage.setItem("ShowCommentsButtonToolTip", "");
window.localStorage.setItem("updateDismissed", "true");
});
};
Cypress.Commands.add("NavigateToQueryEditor", () => {
cy.get(explorer.addDBQueryEntity).last().click({ force: true });
});
Cypress.Commands.add("NavigateToQueriesInExplorer", () => {
cy.get(explorer.entityQuery).click({ force: true });
});
Cypress.Commands.add("NavigateToActiveDSQueryPane", (datasourceName) => {
cy.NavigateToQueryEditor();
cy.NavigateToActiveTab();
cy.get(datasource.datasourceCard)
.contains(datasourceName)
.scrollIntoView()
.should("be.visible")
.closest(datasource.datasourceCard)
.within(() => {
cy.get(queryLocators.createQuery).click({ force: true });
})
.wait(2000); //for the specified page to load
});
Cypress.Commands.add("NavigateToDSGeneratePage", (datasourceName) => {
cy.NavigateToQueryEditor();
cy.NavigateToActiveTab();
cy.get(datasource.datasourceCard)
.contains(datasourceName)
.scrollIntoView()
.should("be.visible")
.closest(datasource.datasourceCard)
.within(() => {
cy.get(datasource.datasourceCardGeneratePageBtn).click();
})
.wait(2000); //for the specified page to load
});
Cypress.Commands.add("ClickGotIt", () => {
cy.get("span:contains('GOT IT')").click();
});
Cypress.Commands.add("fillGoogleSheetsDatasourceForm", () => {
cy.get(datasourceEditor["scope"]).click();
});
Cypress.Commands.add("fillAuthenticatedAPIForm", () => {
const URL = datasourceFormData["authenticatedApiUrl"];
cy.get(datasourceEditor.url).type(URL);
});
Cypress.Commands.add("runQuery", (expectedRes = true) => {
cy.onlyQueryRun();
AggregateHelper.CheckForErrorToast("Failed to initialize pool");
cy.wait(2000); //for postexecute to go thru
cy.wait("@postExecute").should(
"have.nested.property",
"response.body.data.isExecutionSuccess",
expectedRes,
);
// cy.wait("@postExecute").should(
// "have.nested.property",
// "response.body.responseMeta.status",
// 200,
// );
});
Cypress.Commands.add("onlyQueryRun", () => {
cy.xpath(queryEditor.runQuery).last().click({ force: true }).wait(1000);
cy.get(".cs-spinner").should("not.exist");
});
Cypress.Commands.add("RunQueryWithoutWaitingForResolution", () => {
cy.xpath(queryEditor.runQuery).last().click({ force: true });
});
Cypress.Commands.add("hoverAndClick", () => {
cy.xpath(apiwidget.popover)
.last()
.should("be.hidden")
.invoke("show")
.click({ force: true });
cy.xpath(apiwidget.popover).last().click({ force: true });
});
Cypress.Commands.add("hoverAndClickParticularIndex", (index) => {
cy.xpath(apiwidget.popover)
.eq(index)
.should("be.hidden")
.invoke("show")
.click({ force: true });
});
Cypress.Commands.add("deleteQuery", () => {
cy.hoverAndClick();
cy.get(apiwidget.delete).click({ force: true });
cy.get(apiwidget.deleteConfirm).click({ force: true });
cy.wait("@deleteAction").should(
"have.nested.property",
"response.body.responseMeta.status",
200,
);
});
Cypress.Commands.add("deleteQueryUsingContext", () => {
cy.get(queryEditor.queryMoreAction).first().click();
cy.get(queryEditor.deleteUsingContext).click();
cy.get(queryEditor.deleteUsingContext).contains("Are you sure?").click();
cy.wait("@deleteAction").should(
"have.nested.property",
"response.body.responseMeta.status",
200,
);
});
Cypress.Commands.add("runAndDeleteQuery", () => {
cy.runQuery();
cy.deleteQueryUsingContext();
});
Cypress.Commands.add("executeDbQuery", (queryName) => {
cy.get(widgetsPage.buttonOnClick)
.get(commonlocators.dropdownSelectButton)
.eq(0)
.click({ force: true })
.get("ul.bp3-menu")
.children()
.contains("Execute a query")
.click({ force: true })
.get("ul.bp3-menu")
.children()
.contains(queryName)
.click({ force: true });
});
Cypress.Commands.add("CreateMockQuery", (queryName) => {
// cy.get(queryEditor.addNewQueryBtn).click({ force: true });
// cy.get(queryEditor.createQuery)
// .first()
// .click({ force: true });
cy.get(queryEditor.queryNameField).type(queryName + "{enter}", {
force: true,
});
cy.assertPageSave();
cy.get(queryEditor.templateMenu + " div")
.contains("Select")
.click({ force: true });
cy.runQuery();
// cy.wait(3000);
// cy.get(queryEditor.runQuery)
// .click({force: true});
});
Cypress.Commands.add("ValidateQueryParams", (param) => {
cy.xpath(apiwidget.paramsTab).should("be.visible").click({ force: true });
cy.validateCodeEditorContent(apiwidget.paramKey, param.key);
cy.validateCodeEditorContent(apiwidget.paramValue, param.value);
});
// from hereeee
// targeting normal dropdowns, we can simply use the label names
Cypress.Commands.add(
"TargetDropdownAndSelectOption",
(dropdownIdentifier, option, isDynamic = false) => {
if (isDynamic) {
cy.wait(5000);
}
cy.get(dropdownIdentifier)
.scrollIntoView()
.should("be.visible")
.click({ multiple: true });
cy.get(formControls.dropdownWrapper)
.should("be.visible")
.contains(option)
.first()
.click();
cy.wait(2000);
},
);
// targeting multiselect dropdowns, we target the data-cy value of the options
Cypress.Commands.add(
"TargetMultiSelectDropdownAndSelectOptions",
(dropdownIdentifier, options, isDynamic = false) => {
if (isDynamic) {
cy.wait(5000);
}
cy.get(dropdownIdentifier)
.scrollIntoView()
.should("be.visible")
.click({ multiple: true });
options &&
options.map((option) => {
cy.get(formControls.dropdownWrapper)
.should("be.visible")
.get(option) // we use a get instead of contains.
.first()
.click({ force: true });
});
},
);
Cypress.Commands.add(
"TargetFormControlAndSwitchViewType",
(formControlIdentifier, newViewType) => {
cy.get(formControlIdentifier).scrollIntoView().should("be.visible").click();
if (newViewType === "json") {
cy.get(formControlIdentifier)
.should("be.visible")
.should("have.class", "is-active");
} else if (newViewType === "component") {
cy.get(formControlIdentifier)
.should("be.visible")
.should("not.have.class", "is-active");
}
},
);
Cypress.Commands.add(
"VerifyCurrentDropdownOption",
(dropdownIdentifier, option) => {
cy.get(dropdownIdentifier)
.scrollIntoView()
.should("be.visible")
.contains(option)
.should("be.visible");
},
);
Cypress.Commands.add(
"ValidateAndSelectDropdownOption",
(dropdownIdentifier, currentOption, newOption, isDynamic = false) => {
cy.VerifyCurrentDropdownOption(dropdownIdentifier, currentOption);
if (newOption) {
cy.TargetDropdownAndSelectOption(
dropdownIdentifier,
newOption,
isDynamic,
);
cy.wait(2000);
}
},
);
Cypress.Commands.add("NavigateToAction", (actionName) => {
cy.get(queryEditor.navigateToAction)
.contains(actionName)
.should("be.visible")
.click();
});
Cypress.Commands.add("SelecJSFunctionAndRun", (functionName) => {
cy.xpath("//span[@name='expand-more']").first().click();
cy.get(`[data-cy='t--dropdown-option-${functionName}']`).click();
cy.get(jsEditorLocators.runButton).first().click();
});