feat: text component (#1392)

v3/.vscode/settings.json

@@ -6,6 +6,7 @@
   },
   "typescript.tsdk": "./node_modules/typescript/lib",
   "cSpell.words": [
+    "ccrte",
     "Chakra",
     "clsx",
     "colord",

v3/cypress/e2e/text.spec.ts

@@ -0,0 +1,57 @@
+import { ComponentElements as c } from "../support/elements/component-elements"
+import { kTextTileTestId, TextTileElements as t } from "../support/elements/text-tile"
+import { ToolbarElements as toolbar } from "../support/elements/toolbar-elements"
+
+const textDefaultTitle = "Text"
+
+context("Text tile", () => {
+  beforeEach(function () {
+      const queryParams = "?sample=mammals&dashboard&mouseSensor"
+      const url = `${Cypress.config("index")}${queryParams}`
+      cy.visit(url)
+      cy.wait(1000) // Ensuring the page and components are fully loaded.
+  })
+  it("updates text title with undo/redo", () => {
+    const newTextTileName = "My Text"
+    c.getComponentTitle(kTextTileTestId).should("have.text", textDefaultTitle)
+    c.changeComponentTitle(kTextTileTestId, newTextTileName)
+    c.getComponentTitle(kTextTileTestId).should("have.text", newTextTileName)
+
+    cy.log("Check update text title with undo/redo")
+    // Undo title change
+    toolbar.getUndoTool().click()
+    c.getComponentTitle(kTextTileTestId).should("have.text", textDefaultTitle)
+
+    // Redo title change
+    toolbar.getRedoTool().click()
+    c.getComponentTitle(kTextTileTestId).should("have.text", newTextTileName)
+  })
+  it("close text tile from close button with undo/redo", () => {
+    c.closeComponent(kTextTileTestId)
+    c.checkComponentDoesNotExist(kTextTileTestId)
+
+    // Undo closing text tile (Reopen)
+    toolbar.getUndoTool().click()
+    c.checkComponentExists(kTextTileTestId)
+
+    // Redo closing text tile
+    toolbar.getRedoTool().click()
+    c.checkComponentDoesNotExist(kTextTileTestId)
+  })
+  it("can type in text tile", () => {
+    // focus the text tile
+    t.getTextTileContent().click()
+    const textToType = "This is some text."
+    t.getTextTileContent().type(textToType)
+    t.getTextTileContent().should("have.text", textToType)
+    // blur the text tile
+    cy.get(".codap-container").click()
+    t.getTextTileContent().should("have.text", textToType)
+    // Undo typing
+    toolbar.getUndoTool().click()
+    t.getTextTileContent().should("not.have.text", textToType)
+    // Redo typing
+    toolbar.getRedoTool().click()
+    t.getTextTileContent().should("have.text", textToType)
+  })
+})

v3/cypress/e2e/toolbar.spec.ts

@@ -104,9 +104,10 @@ context("codap toolbar", () => {
     cy.visit("#file=examples:Four%20Seals")
     toolbar.getTilesButton().click()
     toolbar.getTilesListMenu().should("be.visible")
-    toolbar.getTilesListMenuItem().should("have.length", 3)
+    toolbar.getTilesListMenuItem().should("have.length", 4)
     toolbar.getTilesListMenuItem().eq(0).should("have.text", "Tracks/Measurements")
     toolbar.getTilesListMenuItem().eq(1).should("have.text", "Measurements")
     toolbar.getTilesListMenuItem().eq(2).should("have.text", "Measurements")
+    toolbar.getTilesListMenuItem().eq(3).should("have.text", "Getting Started")
   })
 })

v3/cypress/support/elements/text-tile.ts

@@ -0,0 +1,13 @@
+import { ComponentElements as c } from "./component-elements"
+
+export const kTextTileTestId = "codap-text"
+export const kTextContentClass = ".codap-text-content"
+
+export const TextTileElements = {
+  getTextTile() {
+    return c.getComponentTile(kTextTileTestId)
+  },
+  getTextTileContent() {
+    return cy.get(kTextContentClass)
+  }
+}