2af219cf84
Skip test file - these will be replaced with API tests. Leaving them skipped for now to be used as reference for API testing
275 lines
9.1 KiB
JavaScript
275 lines
9.1 KiB
JavaScript
import filterTests from "../support/filterTests"
|
|
const interact = require("../support/interact")
|
|
|
|
filterTests(["all"], () => {
|
|
xcontext("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()
|
|
})
|
|
})
|
|
})
|
|
})
|