From 6a21048cca05d4c7f5ec7d5ce748260180c32c29 Mon Sep 17 00:00:00 2001
From: Hans Pagel <hans.pagel@ueber.io>
Date: Tue, 26 Jan 2021 18:18:45 +0100
Subject: [PATCH] testing insertTable command

---
 docs/src/demos/Nodes/Table/index.spec.js | 72 +++++++++++++++++++++++-
 docs/src/demos/Nodes/Table/index.vue     | 28 +--------
 packages/extension-table/src/table.ts    |  7 ++-
 3 files changed, 77 insertions(+), 30 deletions(-)

diff --git a/docs/src/demos/Nodes/Table/index.spec.js b/docs/src/demos/Nodes/Table/index.spec.js
index 7f58e674..75f20351 100644
--- a/docs/src/demos/Nodes/Table/index.spec.js
+++ b/docs/src/demos/Nodes/Table/index.spec.js
@@ -3,5 +3,75 @@ context('/demos/Nodes/Table', () => {
     cy.visit('/demos/Nodes/Table')
   })
 
-  // TODO: Write tests
+  beforeEach(() => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor.commands.clearContent()
+    })
+  })
+
+  it('creates a table (1x1)', () => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor.commands.insertTable({ cols: 1, rows: 1, withHeaderRow: false })
+
+      cy.get('.ProseMirror').find('td').its('length').should('eq', 1)
+      cy.get('.ProseMirror').find('tr').its('length').should('eq', 1)
+    })
+  })
+
+  it('creates a table (3x1)', () => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor.commands.insertTable({ cols: 3, rows: 1, withHeaderRow: false })
+
+      cy.get('.ProseMirror').find('td').its('length').should('eq', 3)
+      cy.get('.ProseMirror').find('tr').its('length').should('eq', 1)
+    })
+  })
+
+  it('creates a table (1x3)', () => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor.commands.insertTable({ cols: 1, rows: 3, withHeaderRow: false })
+
+      cy.get('.ProseMirror').find('td').its('length').should('eq', 3)
+      cy.get('.ProseMirror').find('tr').its('length').should('eq', 3)
+    })
+  })
+
+  it('creates a table with header row (1x3)', () => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor.commands.insertTable({ cols: 1, rows: 3, withHeaderRow: true })
+
+      cy.get('.ProseMirror').find('th').its('length').should('eq', 1)
+      cy.get('.ProseMirror').find('td').its('length').should('eq', 2)
+      cy.get('.ProseMirror').find('tr').its('length').should('eq', 3)
+    })
+  })
+
+  it('creates a table with correct defaults (3x3, th)', () => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor.commands.insertTable()
+
+      cy.get('.ProseMirror').find('th').its('length').should('eq', 3)
+      cy.get('.ProseMirror').find('td').its('length').should('eq', 6)
+      cy.get('.ProseMirror').find('tr').its('length').should('eq', 3)
+    })
+  })
+
+  it('generates correct markup for a table (1x1)', () => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor.commands.insertTable({ cols: 1, rows: 1, withHeaderRow: false })
+
+      const html = editor.getHTML()
+      expect(html).to.equal('<table><tbody><tr><td colspan="1" rowspan="1"><p></p></td></tr></tbody></table>')
+    })
+  })
+
+  it('generates correct markup for a table (1x1, th)', () => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor.commands.insertTable({ cols: 1, rows: 1, withHeaderRow: true })
+
+      const html = editor.getHTML()
+      expect(html).to.equal('<table><tbody><tr><th colspan="1" rowspan="1"><p></p></th></tr></tbody></table>')
+    })
+  })
+
 })
diff --git a/docs/src/demos/Nodes/Table/index.vue b/docs/src/demos/Nodes/Table/index.vue
index 6df0fecd..1841f5a0 100644
--- a/docs/src/demos/Nodes/Table/index.vue
+++ b/docs/src/demos/Nodes/Table/index.vue
@@ -42,7 +42,7 @@
     <button @click="editor.chain().focus().mergeOrSplit().run()">
       mergeOrSplit
     </button>
-    <button @click="editor.chain().focus().setCellAttribute('color', 'pink').run()">
+    <button @click="editor.chain().focus().setCellAttribute('colspan', 2).run()">
       setCellAttribute
     </button>
     <button @click="editor.chain().focus().fixTables().run()">
@@ -93,31 +93,7 @@ export default {
         }),
         TableRow,
         TableHeader,
-        TableCell.extend({
-          addAttributes() {
-            return {
-              // original attributes
-              colspan: {
-                default: 1,
-              },
-              rowspan: {
-                default: 1,
-              },
-              colwidth: {
-                default: null,
-              },
-              // add a color attribute to the table cell
-              color: {
-                default: null,
-                renderHTML: attributes => {
-                  return {
-                    style: `color: ${attributes.color}`,
-                  }
-                },
-              },
-            }
-          },
-        }),
+        TableCell,
       ],
       content: `
         <table>
diff --git a/packages/extension-table/src/table.ts b/packages/extension-table/src/table.ts
index 5856a450..45bee3d3 100644
--- a/packages/extension-table/src/table.ts
+++ b/packages/extension-table/src/table.ts
@@ -74,11 +74,12 @@ export const Table = Node.create({
 
   addCommands() {
     return {
-      insertTable: ({ rows = 3, cols = 3, withHeaderRow = true }): Command => ({ tr, dispatch, editor }) => {
-        const offset = tr.selection.anchor + 1
-        const node = createTable(editor.schema, rows, cols, withHeaderRow)
+      insertTable: (options = { rows: 3, cols: 3, withHeaderRow: true }): Command => ({ tr, dispatch, editor }) => {
+        const node = createTable(editor.schema, options.rows, options.cols, options.withHeaderRow)
 
         if (dispatch) {
+          const offset = tr.selection.anchor + 1
+
           tr.replaceSelectionWith(node)
             .scrollIntoView()
             .setSelection(TextSelection.near(tr.doc.resolve(offset)))