import filterTests from "../support/filterTests" const interact = require("../support/interact") filterTests(["all"], () => { context("Create Components", () => { let headlineId before(() => { cy.login() cy.createTestApp() cy.createTable("dog") cy.addColumn("dog", "name", "Text") cy.addColumn("dog", "age", "Number") cy.addColumn("dog", "breed", "Options") cy.navigateToFrontend() cy.wait(1000) //allow the iframe some wiggle room }) //Use the tree to delete a selected component const deleteSelectedComponent = () => { cy.get( ".nav-item.selected .actions > div > .icon" ).click({ force: true, }) cy.get(".spectrum-Popover.is-open li").contains("Delete").click() cy.get(".spectrum-Modal button").contains("Delete Component").click({ force: true, }) } it("should add a container", () => { cy.searchAndAddComponent("Container").then(componentId => { cy.getComponent(componentId).should("exist") }) }) it("should add a headline", () => { cy.searchAndAddComponent("Headline").then(componentId => { headlineId = componentId cy.getComponent(headlineId).should("exist") }) }) it("should change the text of the headline", () => { const text = "Lorem ipsum dolor sit amet." cy.get("[data-cy=setting-text] input").type(text).blur() cy.getComponent(headlineId).should("have.text", text) }) it("should change the size of the headline", () => { cy.get("[data-cy=setting-size]").scrollIntoView().click() cy.get("[data-cy=setting-size]").within(() => { cy.get(".spectrum-Form-item li.spectrum-Menu-item") .contains("3XL") .click() }) cy.getComponent(headlineId).within(() => { cy.get(".spectrum-Heading").should("have.css", "font-size", "60px") }) }) it("should create a form and reset to match schema", () => { cy.searchAndAddComponent("Form").then(() => { cy.get("[data-cy=setting-dataSource]").contains("Custom").click() cy.get(interact.DROPDOWN).contains("dog").click() cy.wait(500) cy.searchAndAddComponent("Field Group").then(fieldGroupId => { cy.contains("Update form fields").click() cy.get(".spectrum-Modal") .get(".confirm-wrap .spectrum-Button") .click() cy.wait(500) cy.getComponent(fieldGroupId).within(() => { cy.contains("name").should("exist") cy.contains("age").should("exist") cy.contains("breed").should("exist") // cy.contains("image").should("exist") }) cy.getComponent(fieldGroupId).find("input").should("have.length", 2) cy.getComponent(fieldGroupId) .find(interact.SPECTRUM_PICKER) .should("have.length", 1) }) }) }) it("deletes a component", () => { cy.searchAndAddComponent("Paragraph").then(componentId => { cy.get("[data-cy=setting-_instanceName] input").type(componentId).blur() cy.get( ".nav-item.selected .actions > div > .icon" ).click({ force: true, }) cy.get(".spectrum-Popover.is-open li").contains("Delete").click() cy.get(".spectrum-Modal button").contains("Delete Component").click({ force: true, }) cy.getComponent(componentId).should("not.exist") }) }) it("should clear the iframe place holder when a form field has been set", () => { cy.searchAndAddComponent("Form").then(formId => { //For deletion cy.get("[data-cy=setting-_instanceName] input") .clear() .type(formId) .blur() cy.get("[data-cy=setting-dataSource]").contains("Custom").click() cy.get(".dropdown").contains("dog").click() const fieldTypeToColumnName = { "Text Field": "name", "Number Field": "age", "Options Picker": "breed", } const componentTypeLabels = Object.keys(fieldTypeToColumnName) const testFieldFocusOnCreate = componentLabel => { cy.log("Adding: " + componentLabel) return cy.searchAndAddComponent(componentLabel).then(componentId => { cy.get("[data-cy=setting-field] button.spectrum-Picker").click() //Click the first appropriate field. They are filtered by type cy.get( "[data-cy=setting-field] .spectrum-Popover.is-open li.spectrum-Menu-item" ) .contains(fieldTypeToColumnName[componentLabel]) .click() cy.wait(500) cy.getComponent(componentId) .find(".component-placeholder") .should("not.exist") }) } cy.wait(500) cy.wrap(componentTypeLabels) .each(label => { return testFieldFocusOnCreate(label) }) .then(() => { cy.get(".nav-item") .contains(formId) .click({ force: true }) deleteSelectedComponent() }) }) }) it("should populate the provider for charts with a data provider in its path", () => { cy.searchAndAddComponent("Data Provider").then(providerId => { //For deletion cy.get("[data-cy=setting-_instanceName] input") .clear() .type(providerId) .blur() cy.get("[data-cy=setting-dataSource]") .contains("Choose an option") .click() cy.get(`[data-cy=dataSource-popover-${providerId}] ul li`) .contains("dog") .click() const chartTypeLabels = [ "Bar Chart", "Line Chart", "Area Chart", "Pie Chart", "Donut Chart", "Candlestick Chart", ] const testFocusOnCreate = chartLabel => { cy.log("Adding: " + chartLabel) cy.searchAndAddComponent(chartLabel).then(componentId => { cy.get( "[data-cy=dataProvider-prop-control] .spectrum-Picker" ).should("not.have.class", "is-focused") // Pre populated. cy.get("[data-cy=dataProvider-prop-control] .spectrum-Picker-label") .contains(providerId) .should("exist") }) } cy.wait(1000) cy.wrap(chartTypeLabels) .each(label => { return testFocusOnCreate(label) }) .then(() => { cy.get(".nav-item") .contains(providerId) .click({ force: true }) deleteSelectedComponent() }) }) }) it("should replace the placeholder when a url is set on an image", () => { cy.searchAndAddComponent("Image").then(imageId => { cy.get("[data-cy=setting-_instanceName] input") .clear() .type(imageId) .blur() //return $("New Data Provider.Rows")[0]["Attachment"][0]["url"] //No minio, so just enter something local that will not reslove cy.get("[data-cy=url-prop-control] input[type=text]") .type("cypress/fixtures/ghost.png") .blur() cy.getComponent(imageId) .find(".component-placeholder") .should("not.exist") cy.getComponent(imageId).find(`img[alt=${imageId}]`).should("exist") cy.get(".nav-item") .contains(imageId) .click({ force: true }) deleteSelectedComponent() }) }) it("should add a markdown component.", () => { cy.searchAndAddComponent("Markdown Viewer").then(markdownId => { cy.get("[data-cy=setting-_instanceName] input") .clear() .type(markdownId) .blur() cy.get( "[data-cy=value-prop-control] input[type=text].spectrum-Textfield-input" ) .type("# Hi") .blur() cy.getComponent(markdownId) .find(".component-placeholder") .should("not.exist") cy.getComponent(markdownId) .find(".editor-preview-full h1") .contains("Hi") cy.get(".nav-item") .contains(markdownId) .click({ force: true }) deleteSelectedComponent() }) }) it("should direct the user when adding an Icon component.", () => { cy.searchAndAddComponent("Icon").then(iconId => { cy.get("[data-cy=setting-_instanceName] input") .clear() .type(iconId) .blur() cy.get("[data-cy=icon-prop-control] .spectrum-ActionButton").click() cy.get("[data-cy=icon-popover].spectrum-Popover.is-open").within(() => { cy.get(".search-input input").type("save").blur() cy.get(".search-input button").click({ force: true }) cy.get(".icon-area .icon-container").eq(0).click({ force: true }) }) cy.getComponent(iconId) .find(".component-placeholder") .should("not.exist") cy.getComponent(iconId).find("i.ri-save-fill").should("exist") cy.get(".nav-item") .contains(iconId) .click({ force: true }) deleteSelectedComponent() }) }) }) })