## Description Appsmith so far could only support UMD builds of any JS library. This meant that users would have to figure a compatible UMD build that works with Appsmith and test if works within Appsmith. Most libraries on jsDelivr have ESM builds shipped out of the box and support these libraries should take away the UMD pain from the users. #### PR fixes following issue(s) Fixes #26424 > #### Media > A video or a GIF is preferred. when using Loom, don’t embed because it looks like it’s a GIF. instead, just link to the video > > #### Type of change - New feature (non-breaking change which adds functionality) > > ## Testing > #### How Has This Been Tested? - [x] Manual - [x] Cypress > > #### Test Plan - [x] Installation/uninstallation - [x] lint error check post uninstall - [x] Installation/uninstallation on git connected app - [x] edit & view mode check - [x] incorrect URL format > > #### Issues raised during DP testing None **caveat** - Libraries that require to be run on worker will fail eg: https://cdn.jsdelivr.net/npm/@javfres/speech-generator@1.0.5/+esm > > > ## Checklist: #### Dev activity - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my own code - [x] 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 - [x] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [ ] PR is being merged under a feature flag #### QA activity: - [x] [Speedbreak features](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-) have been covered - [x] Test plan covers all impacted features and [areas of interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#areas-of-interest-) - [ ] Test plan has been peer reviewed by project stakeholders and other QA members - [x] Manually tested functionality on DP - [ ] We had an implementation alignment call with stakeholders post QA Round 2 - [ ] Cypress test cases have been added and approved by SDET/manual QA - [ ] Added `Test Plan Approved` label after Cypress tests were reviewed - [ ] Added `Test Plan Approved` label after JUnit tests were reviewed --------- Co-authored-by: Aishwarya UR <aishwarya@appsmith.com>
88 lines
2.6 KiB
TypeScript
88 lines
2.6 KiB
TypeScript
import { ObjectsRegistry } from "../Objects/Registry";
|
|
|
|
export class LibraryInstaller {
|
|
private _aggregateHelper = ObjectsRegistry.AggregateHelper;
|
|
private _installer_trigger_locator =
|
|
".t--entity-add-btn.group.libraries button";
|
|
private _installer_close_locator =
|
|
".ads-v2-popover__body-header .ads-v2-icon";
|
|
|
|
private getLibraryLocatorInExplorer(libraryName: string) {
|
|
return `.t--installed-library-${libraryName}`;
|
|
}
|
|
|
|
private getLibraryCardLocator(libraryName: string) {
|
|
return `div.library-card.t--${libraryName}`;
|
|
}
|
|
|
|
private libraryURLLocator = "[data-testid='library-url']";
|
|
private installBtnLocator = "[data-testid='install-library-btn']";
|
|
|
|
public OpenInstaller(force = false) {
|
|
this._aggregateHelper.GetNClick(this._installer_trigger_locator, 0, force);
|
|
}
|
|
|
|
public CloseInstaller() {
|
|
this._aggregateHelper.GetNClick(this._installer_close_locator);
|
|
}
|
|
|
|
public installLibrary(
|
|
libraryName: string,
|
|
accessor: string,
|
|
checkIfSuccessful = true,
|
|
) {
|
|
cy.get(this.getLibraryCardLocator(libraryName))
|
|
.find(".t--download")
|
|
.click();
|
|
if (checkIfSuccessful) this.assertInstall(libraryName, accessor);
|
|
}
|
|
|
|
public installLibraryViaURL(
|
|
url: string,
|
|
accessor: string,
|
|
checkIfSuccessful = true,
|
|
) {
|
|
this._aggregateHelper.TypeText(this.libraryURLLocator, url);
|
|
this._aggregateHelper.GetNClick(this.installBtnLocator);
|
|
if (checkIfSuccessful) {
|
|
this._aggregateHelper.AssertContains(
|
|
`Installation Successful. You can access the library via ${accessor}`,
|
|
);
|
|
}
|
|
}
|
|
|
|
private assertInstall(libraryName: string, accessor: string) {
|
|
this._aggregateHelper.AssertContains(
|
|
`Installation Successful. You can access the library via ${accessor}`,
|
|
);
|
|
cy.get(this.getLibraryCardLocator(libraryName))
|
|
.find(".installed")
|
|
.should("be.visible");
|
|
this._aggregateHelper.AssertElementExist(
|
|
this.getLibraryLocatorInExplorer(libraryName),
|
|
);
|
|
}
|
|
|
|
public uninstallLibrary(libraryName: string) {
|
|
cy.get(this.getLibraryLocatorInExplorer(libraryName))
|
|
.realHover()
|
|
.find(".t--uninstall-library")
|
|
.click();
|
|
}
|
|
|
|
public assertUnInstall(libraryName: string) {
|
|
this._aggregateHelper.AssertContains(
|
|
`${libraryName} is uninstalled successfully.`,
|
|
);
|
|
this._aggregateHelper.AssertElementAbsence(
|
|
this.getLibraryLocatorInExplorer(libraryName),
|
|
);
|
|
}
|
|
|
|
public AssertLibraryinExplorer(libraryName: string) {
|
|
this._aggregateHelper.AssertElementExist(
|
|
this.getLibraryLocatorInExplorer(libraryName),
|
|
);
|
|
}
|
|
}
|