ToolJet/cypress-tests/cypress/e2e/happyPath/appbuilder/commonTestcases/components/componentsBasicHappypath.cy.js

import { commonWidgetSelector, commonSelectors } from "Selectors/common";
import { fake } from "Fixtures/fake";
import { tableText } from "Texts/table";
import { tableSelector } from "Selectors/table";
import {
  verifyComponent,
  deleteComponentAndVerify,
  verifyComponentWithOutLabel,
} from "Support/utils/basicComponents";
import {
  openAccordion,
  verifyAndModifyParameter,
  openEditorSidebar,
  verifyAndModifyToggleFx,
  addDefaultEventHandler,
  addAndVerifyTooltip,
  editAndVerifyWidgetName,
  verifyComponentValueFromInspector,
  fillBoxShadowParams,
  selectColourFromColourPicker,
  addTextWidgetToVerifyValue,
  verifyBoxShadowCss,
  verifyTooltip,
  verifyWidgetText,
  closeAccordions,
} from "Support/utils/commonWidget";
import {
  commonText,
  commonWidgetText,
  codeMirrorInputLabel,
} from "Texts/common";
import { resizeQueryPanel } from "Support/utils/dataSource";

describe("Basic components", () => {
  const data = {};
  beforeEach(() => {
    data.appName = `${fake.companyName}-${fake.companyName}-App`;
    cy.apiLogin();
    cy.apiCreateApp(data.appName);
    cy.openApp();
    cy.modifyCanvasSize(1200, 900);
    cy.intercept("GET", "/api/comments/*").as("loadComments");
    resizeQueryPanel(0);
  });
  afterEach(() => {
    cy.apiDeleteApp();
  });

  it("Should verify Toggle switch", () => {
    cy.dragAndDropWidget("Toggle Switch", 300, 300);
    verifyComponent("toggleswitch1");

    cy.resizeWidget("toggleswitch1", 650, 400, false);

    openEditorSidebar("toggleswitch1");
    editAndVerifyWidgetName("toggleswitch2");

    verifyAndModifyParameter(commonWidgetText.parameterLabel, "label");
    cy.forceClickOnCanvas();
    cy.waitForAutoSave();
    cy.get(
      '[data-cy="draggable-widget-toggleswitch2"] > .form-check-label'
    ).should("have.text", "label");

    cy.openInCurrentTab(commonWidgetSelector.previewButton);
    cy.wait(1500);
    verifyComponent("toggleswitch2");
    cy.get(
      '[data-cy="draggable-widget-toggleswitch2"] > .form-check-label'
    ).should("have.text", "label");

    cy.go("back");
    cy.waitForAppLoad();
    resizeQueryPanel(0);
    deleteComponentAndVerify("toggleswitch2");
  });

  it("Should verify Checkbox", () => {
    resizeQueryPanel("0");
    cy.dragAndDropWidget("Checkbox", 300, 300);
    // cy.resizeWidget("checkbox1", 50, 200,false);
    cy.forceClickOnCanvas();
    verifyComponent("checkbox1");

    openEditorSidebar("checkbox1");
    editAndVerifyWidgetName("checkbox2");
    cy.resizeWidget("checkbox2", 650, 400, false);

    verifyAndModifyParameter(commonWidgetText.parameterLabel, "label");
    cy.forceClickOnCanvas();
    cy.get('[data-cy="draggable-widget-checkbox2"] .form-check-label').should(
      "have.text",
      "label"
    );
    cy.waitForAutoSave();

    cy.openInCurrentTab(commonWidgetSelector.previewButton);
    verifyComponent("checkbox2");

    cy.go("back");
    resizeQueryPanel(0);
    deleteComponentAndVerify("checkbox2");
  });

  it("Should verify Radio Button", () => {
    cy.dragAndDropWidget("Radio Button", 300, 300);
    // cy.resizeWidget("radiobutton1", 100, 200,false);
    cy.forceClickOnCanvas();
    verifyComponent("radiobutton1");

    cy.resizeWidget("radiobutton1", 650, 400, false);

    openEditorSidebar("radiobutton1");
    editAndVerifyWidgetName("radiobutton2");

    verifyAndModifyParameter(commonWidgetText.parameterLabel, "label");
    cy.forceClickOnCanvas();
    cy.waitForAutoSave();
    cy.get('[data-cy="draggable-widget-radiobutton2"] > .col-auto').should(
      "have.text",
      "label"
    );

    cy.openInCurrentTab(commonWidgetSelector.previewButton);
    verifyComponent("radiobutton2");

    cy.go("back");
    resizeQueryPanel(0);
    deleteComponentAndVerify("radiobutton2");
  });
  it("Should verify Dropdown", () => {
    resizeQueryPanel("0");
    cy.dragAndDropWidget("Dropdown", 300, 300);
    cy.resizeWidget("dropdown1", 400, 500, false);
    cy.forceClickOnCanvas();
    verifyComponent("dropdown1");

    openEditorSidebar("dropdown1");
    editAndVerifyWidgetName("dropdown2");
    cy.resizeWidget("dropdown2", 650, 400, false);

    verifyAndModifyParameter(commonWidgetText.parameterLabel, "label");
    cy.forceClickOnCanvas();
    cy.waitForAutoSave();
    cy.get('[data-cy="draggable-widget-dropdown2"] > .col-auto').should(
      "have.text",
      "label"
    );

    cy.openInCurrentTab(commonWidgetSelector.previewButton);
    verifyComponent("dropdown2");

    cy.go("back");
    resizeQueryPanel(0);
    deleteComponentAndVerify("dropdown2");
  });
  //pending
  it("Should verify Rating", () => {
    cy.dragAndDropWidget("Rating", 300, 300);
    cy.get('[data-cy="draggable-widget-starrating1"]').click({ force: true });
    cy.resizeWidget("starrating1", 400, 500, false);
    cy.forceClickOnCanvas();
    verifyComponent("starrating1");

    openEditorSidebar("starrating1");
    editAndVerifyWidgetName("starrating2");
    cy.resizeWidget("starrating2", 650, 400, false);

    verifyAndModifyParameter(commonWidgetText.parameterLabel, "label");
    cy.forceClickOnCanvas();
    cy.waitForAutoSave();
    cy.get('[data-cy="draggable-widget-starrating2"] > .col-auto').should(
      "have.text",
      "label"
    );

    cy.openInCurrentTab(commonWidgetSelector.previewButton);
    verifyComponent("starrating2");

    cy.go("back");
    resizeQueryPanel(0);
    deleteComponentAndVerify("starrating2");
  });

  it("Should verify Button Group", () => {
    cy.dragAndDropWidget("Button Group", 300, 300);
    cy.forceClickOnCanvas();
    verifyComponent("buttongroup1");

    cy.resizeWidget("buttongroup1", 650, 400, false);

    openEditorSidebar("buttongroup1");
    editAndVerifyWidgetName("buttongroup2");

    verifyAndModifyParameter(commonWidgetText.parameterLabel, "label");
    cy.forceClickOnCanvas();
    cy.waitForAutoSave();
    cy.get(
      '[data-cy="draggable-widget-buttongroup2"] > .widget-buttongroup-label'
    ).should("have.text", "label");

    cy.openInCurrentTab(commonWidgetSelector.previewButton);
    verifyComponent("buttongroup2");

    cy.go("back");
    resizeQueryPanel(0);
    deleteComponentAndVerify("buttongroup2");
  });

  it("Should verify Calendar", () => {
    cy.dragAndDropWidget("Calendar", 300, 300);
    cy.get('[data-cy="draggable-widget-calendar1"]').click({ force: true });
    cy.forceClickOnCanvas();
    verifyComponent("calendar1");

    cy.resizeWidget("calendar1", 650, 400, false);

    openEditorSidebar("calendar1");
    editAndVerifyWidgetName("calendar2");

    cy.waitForAutoSave();
    cy.openInCurrentTab(commonWidgetSelector.previewButton);
    verifyComponent("calendar2");

    cy.go("back");
    resizeQueryPanel(0);
    deleteComponentAndVerify("calendar2");
  });

  it("Should verify Chart", () => {
    cy.dragAndDropWidget("Chart", 300, 300);
    cy.get('[data-cy="draggable-widget-chart1"]').click({ force: true });
    verifyComponent("chart1");

    openEditorSidebar("chart1");
    editAndVerifyWidgetName("chart2", ["Chart data", "Properties"]);
    // cy.resizeWidget("chart1", 650, 400, false);

    verifyAndModifyParameter("Title", "label");
    cy.forceClickOnCanvas();
    cy.resizeWidget("chart2", 650, 400, false);
    cy.get('[data-cy="draggable-widget-chart2"]').should(
      "contain.text",
      "label"
    );
    cy.waitForAutoSave();

    cy.openInCurrentTab(commonWidgetSelector.previewButton);
    verifyComponent("chart2");

    cy.go("back");
    resizeQueryPanel(0);
    deleteComponentAndVerify("chart2");
  });

  it("Should verify Circular Progress Bar", () => {
    cy.dragAndDropWidget("Circular Progressbar", 300, 300);
    cy.forceClickOnCanvas();
    verifyComponent("circularprogressbar1");

    cy.resizeWidget("circularprogressbar1", 650, 400, false);

    openEditorSidebar("circularprogressbar1");
    editAndVerifyWidgetName("circularprogressbar2");

    cy.forceClickOnCanvas();
    cy.waitForAutoSave();

    cy.openInCurrentTab(commonWidgetSelector.previewButton);
    verifyComponent("circularprogressbar2");

    cy.go("back");
    resizeQueryPanel(0);
    deleteComponentAndVerify("circularprogressbar2");
  });

  it("Should verify Code Editor", () => {
    cy.dragAndDropWidget("Code Editor", 300, 300);
    cy.get('[data-cy="draggable-widget-codeeditor1"]').click({ force: true });
    cy.forceClickOnCanvas();
    verifyComponent("codeeditor1");

    cy.resizeWidget("codeeditor1", 650, 400, false);

    openEditorSidebar("codeeditor1");
    editAndVerifyWidgetName("codeeditor2");
    cy.forceClickOnCanvas();
    cy.waitForAutoSave();

    cy.openInCurrentTab(commonWidgetSelector.previewButton);
    verifyComponent("codeeditor2");

    cy.go("back");
    resizeQueryPanel(0);
    deleteComponentAndVerify("codeeditor2");
  });

  it("Should verify Color Picker", () => {
    cy.dragAndDropWidget("Color Picker", 300, 300);
    cy.get('[data-cy="draggable-widget-colorpicker1"]').click({ force: true });
    cy.forceClickOnCanvas();
    verifyComponent("colorpicker1");

    cy.resizeWidget("colorpicker1", 650, 400, false);

    openEditorSidebar("colorpicker1");
    editAndVerifyWidgetName("colorpicker2");

    cy.forceClickOnCanvas();
    cy.waitForAutoSave();

    cy.openInCurrentTab(commonWidgetSelector.previewButton);
    verifyComponent("colorpicker2");

    cy.go("back");
    resizeQueryPanel(0);
    deleteComponentAndVerify("colorpicker2");
  });
  it("Should verify Custom Component", () => {
    cy.dragAndDropWidget("Custom Component", 300, 300);
    // cy.get('[data-cy="draggable-widget-customcomponent1"]').click({
    //   force: true,
    // });
    // cy.forceClickOnCanvas();
    verifyComponent("customcomponent1");
    openEditorSidebar("customcomponent1");

    // editAndVerifyWidgetName("customcomponent2", ["Code"]);
    closeAccordions(["Code"]);
    cy.get(commonWidgetSelector.WidgetNameInputField).type(
      "{selectAll}{backspace}customcomponent2",
      { delay: 30 }
    );
    cy.forceClickOnCanvas();
    cy.waitForAutoSave();
    cy.resizeWidget("customcomponent2", 650, 400, false);
    cy.wait(2000);
    cy.get(
      commonWidgetSelector.draggableWidget("customcomponent2")
    ).realHover();
    cy.get(commonWidgetSelector.widgetConfigHandle("customcomponent2"))
      .click()
      .should("have.text", "customcomponent2");

    cy.openInCurrentTab(commonWidgetSelector.previewButton);
    verifyComponent("customcomponent2", ["Code"]);

    cy.go("back");
    resizeQueryPanel(0);
    deleteComponentAndVerify("customcomponent2");
  });

  it("Should verify Container", () => {
    cy.dragAndDropWidget("Container", 300, 300);
    cy.forceClickOnCanvas();
    verifyComponent("container1");

    openEditorSidebar("container1");
    editAndVerifyWidgetName("container2", ["Devices"]);

    cy.forceClickOnCanvas();
    cy.resizeWidget("container2", 650, 400, false);
    cy.waitForAutoSave();

    cy.openInCurrentTab(commonWidgetSelector.previewButton);
    verifyComponent("container2", ["Devices"]);

    cy.go("back");
    resizeQueryPanel(0);
    deleteComponentAndVerify("container2");
  });

  it("Should verify Date-Range Picker", () => {
    cy.dragAndDropWidget("Range Picker", 300, 300);

    cy.forceClickOnCanvas();
    verifyComponent("daterangepicker1");

    cy.resizeWidget("daterangepicker1", 650, 400, false);

    openEditorSidebar("daterangepicker1");
    editAndVerifyWidgetName("daterangepicker2");

    cy.forceClickOnCanvas();
    cy.waitForAutoSave();

    cy.openInCurrentTab(commonWidgetSelector.previewButton);
    verifyComponent("daterangepicker2");

    cy.go("back");
    resizeQueryPanel(0);
    deleteComponentAndVerify("daterangepicker2");
  });
  // visible issue
  it.skip("Should verify Divider", () => {
    verifyComponentWithOutLabel(
      "Divider",
      "divider1",
      "divider2",
      data.appName
    );
  });

  it("Should verify File Picker", () => {
    verifyComponentWithOutLabel(
      "File Picker",
      "filepicker1",
      "filepicker2",
      data.appName
    );
  });

  it("Should verify Form", () => {
    cy.dragAndDropWidget("Form", 300, 300);
    verifyComponent("form1");

    cy.resizeWidget("form1", 650, 400, false);

    openEditorSidebar("form1");
    editAndVerifyWidgetName("form2", []);

    cy.waitForAutoSave();

    cy.openInCurrentTab(commonWidgetSelector.previewButton);
    verifyComponent("form2");

    cy.go("back");
    cy.waitForAppLoad();
    cy.wait(1500);
    resizeQueryPanel(0);
    deleteComponentAndVerify("form2");
  });

  it("Should verify HTML", () => {
    cy.dragAndDropWidget("HTML Viewe", 300, 300, "HTML Viewer"); // search logic WIP
    verifyComponent("html1");

    cy.resizeWidget("html1", 650, 400, false);

    openEditorSidebar("html1");
    editAndVerifyWidgetName("html2");

    cy.waitForAutoSave();

    cy.openInCurrentTab(commonWidgetSelector.previewButton);
    verifyComponent("html2");

    cy.go("back");
    resizeQueryPanel(0);
    deleteComponentAndVerify("html2");
  });

  it("Should verify Icon", () => {
    verifyComponentWithOutLabel("Icon", "icon1", "icon2", data.appName);
  });

  it("Should verify Iframe", () => {
    verifyComponentWithOutLabel("Iframe", "iframe1", "iframe2", data.appName);
  });

  it.skip("Should verify Kanban", () => {
    verifyComponentWithOutLabel("Kanban", "kanban1", "kanban2", data.appName);
  });

  it("Should verify Link", () => {
    verifyComponentWithOutLabel("Link", "link1", "link2", data.appName);
  });

  it.skip("Should verify Map", () => {
    cy.dragAndDropWidget("Map", 300, 300);
    cy.get("body").then(($body) => {
      if ($body.find(".dismissButton").length > 0) {
        cy.get(".dismissButton").click();
      }
    });

    verifyComponent("map1");

    cy.resizeWidget("map1", 650, 400, false);

    openEditorSidebar("map1");
    editAndVerifyWidgetName("map2");

    cy.waitForAutoSave();

    cy.openInCurrentTab(commonWidgetSelector.previewButton);
    verifyComponent("map2");

    cy.go("back");
    resizeQueryPanel(0);
    deleteComponentAndVerify("map2");
  });

  it("Should verify Modal", () => {
    verifyComponentWithOutLabel("Modal", "modal1", "modal2", data.appName);
  });

  it("Should verify PDF", () => {
    cy.dragAndDropWidget("PDF", 300, 300);
    verifyComponent("pdf1");

    cy.resizeWidget("pdf1", 650, 400, false);

    openEditorSidebar("pdf1");
    editAndVerifyWidgetName("pdf2");

    cy.waitForAutoSave();

    cy.openInCurrentTab(commonWidgetSelector.previewButton);
    verifyComponent("pdf2");

    cy.go("back");
    resizeQueryPanel(0);
    deleteComponentAndVerify("pdf2");
  });

  it("Should verify Pagination", () => {
    verifyComponentWithOutLabel(
      "Pagination",
      "pagination1",
      "pagination2",
      data.appName
    );
  });

  it("Should verify QR Scanner", () => {
    verifyComponentWithOutLabel(
      "QR Scanner",
      "qrscanner1",
      "qrscanner2",
      data.appName
    );
  });

  it("Should verify Range Slider", () => {
    verifyComponentWithOutLabel(
      "Range Slider",
      "rangeslider1",
      "rangeslider2",
      data.appName
    );
  });

  it("Should verify Rich Text Editor", () => {
    verifyComponentWithOutLabel(
      "Text Editor",
      "richtexteditor1",
      "richtexteditor2",
      data.appName
    );
  });

  it("Should verify Spinner", () => {
    verifyComponentWithOutLabel(
      "Spinner",
      "spinner1",
      "spinner2",
      data.appName
    );
  });

  it("Should verify Statistics", () => {
    verifyComponentWithOutLabel(
      "Statistics",
      "statistics1",
      "statistics2",
      data.appName
    );
  });

  it("Should verify Steps", () => {
    verifyComponentWithOutLabel("Steps", "steps1", "steps2", data.appName);
  });

  it("Should verify SVG Image", () => {
    verifyComponentWithOutLabel(
      "SVG Image",
      "svgimage1",
      "svgimage2",
      data.appName
    );
  });

  it("Should verify Tabs", () => {
    resizeQueryPanel("0");
    cy.dragAndDropWidget("Tabs", 300, 300);
    verifyComponent("tabs1");
    // deleteComponentAndVerify("image1");

    cy.resizeWidget("tabs1", 650, 400, false);

    openEditorSidebar("tabs1");
    editAndVerifyWidgetName("tabs2");

    cy.waitForAutoSave();

    cy.openInCurrentTab(commonWidgetSelector.previewButton);
    verifyComponent("tabs2");

    cy.go("back");
    resizeQueryPanel(0);
    deleteComponentAndVerify("tabs2");
  });

  it("Should verify Tags", () => {
    verifyComponentWithOutLabel("Tags", "tags1", "tags2", data.appName);
  });

  it("Should verify Text area", () => {
    verifyComponentWithOutLabel(
      "Text area",
      "textarea1",
      "textarea2",
      data.appName
    );
  });

  it("Should verify Timeline", () => {
    verifyComponentWithOutLabel(
      "Timeline",
      "timeline1",
      "timeline2",
      data.appName
    );
  });
  it("Should verify Timer", () => {
    verifyComponentWithOutLabel("Timer", "timer1", "timer2", data.appName);
  });

  it("Should verify Tree Select", () => {
    verifyComponentWithOutLabel(
      "Tree Select",
      "treeselect1",
      "treeselect2",
      data.appName
    );
  });

  it("Should verify Vertical Divider", () => {
    verifyComponentWithOutLabel(
      "Vertical Divider",
      "verticaldivider1",
      "verticaldivider2",
      data.appName
    );
  });
});