Add table shorthand specs

Semantic-Org · Sep 30, 2016 · 6a94bf3 · 6a94bf3
1 parent fc640ff
commit 6a94bf3
Show file tree

Hide file tree

Showing 4 changed files with 104 additions and 4 deletions.
diff --git a/test/specs/collections/Table/Table-test.js b/test/specs/collections/Table/Table-test.js
@@ -38,8 +38,70 @@ describe('Table', () => {
   common.propValueOnlyToClassName(Table, 'color')
   common.propValueOnlyToClassName(Table, 'size')
 
-  it('renders as a thead by default', () => {
+  it('renders as a table by default', () => {
     shallow(<Table />)
         .should.have.tagName('table')
   })
+
+  describe('shorthand', () => {
+    let wrapper
+    let thead
+    let tbody
+    let tfoot
+
+    beforeEach(() => {
+      wrapper = undefined
+      thead = undefined
+      tbody = undefined
+      tfoot = undefined
+    })
+
+    const headerRow = ['Name', 'Status', 'Notes']
+
+    const bodyRow = ({ name, status, notes }) => [name || '', status || '', notes || '']
+
+    const footerRow = [{ colSpan: 3, content: 'Total' }]
+
+    const tableData = [
+      { name: undefined, status: undefined, notes: undefined },
+      { name: 'Jimmy', status: 'Requires Action', notes: undefined },
+      { name: 'Jamie', status: undefined, notes: 'Hostile' },
+      { name: 'Jill', status: undefined, notes: undefined },
+    ]
+
+    const wrapperMount = (props) => {
+      wrapper = mount(<Table {...props} />)
+
+      thead = wrapper.find('thead')
+      tbody = wrapper.find('tbody')
+      tfoot = wrapper.find('tfoot')
+    }
+
+    it('renders empty tbody with no shorthand', () => {
+      wrapperMount()
+
+      thead.should.have.lengthOf(0)
+
+      tbody.should.have.lengthOf(1)
+      tbody.find('tr').should.have.lengthOf(0)
+
+      tfoot.should.have.lengthOf(0)
+    })
+
+    it('renders the table', () => {
+      wrapperMount({ headerRow, bodyRow, footerRow, tableData })
+
+      thead.should.have.lengthOf(1)
+      thead.find('tr').should.have.lengthOf(1)
+      thead.find('tr').find('th').should.have.lengthOf(headerRow.length)
+
+      tbody.should.have.lengthOf(1)
+      tbody.find('tr').should.have.lengthOf(tableData.length)
+      tbody.find('tr').first().find('td').should.have.lengthOf(3)
+
+      tfoot.should.have.lengthOf(1)
+      tfoot.find('tr').should.have.lengthOf(1)
+      tfoot.find('tr').find('td').should.have.lengthOf(footerRow.length)
+    })
+  })
 })
diff --git a/test/specs/collections/Table/TableCell-test.js b/test/specs/collections/Table/TableCell-test.js
@@ -22,8 +22,23 @@ describe('TableCell', () => {
   })
   common.propKeyOnlyToClassName(TableCell, 'warning')
 
-  it('renders as a thead by default', () => {
+  it('renders as a td by default', () => {
     shallow(<TableCell />)
       .should.have.tagName('td')
   })
+
+  describe('shorthand', () => {
+    it('renders empty cell with no shorthand', () => {
+      const wrapper = shallow(<TableCell />)
+
+      wrapper.text().should.equal('')
+    })
+
+    it('renders the cell', () => {
+      const content = 'Hey there'
+      const wrapper = shallow(<TableCell content={content} />)
+
+      wrapper.text().should.equal(content)
+    })
+  })
 })
diff --git a/test/specs/collections/Table/TableHeaderCell-test.js b/test/specs/collections/Table/TableHeaderCell-test.js
@@ -6,7 +6,7 @@ import TableHeaderCell from 'src/collections/Table/TableHeaderCell'
 describe('TableHeaderCell', () => {
   common.isConformant(TableHeaderCell)
 
-  it('renders as a tfoot by default', () => {
+  it('renders as a th by default', () => {
     shallow(<TableHeaderCell />)
       .should.have.tagName('th')
   })

diff --git a/test/specs/collections/Table/TableRow-test.js b/test/specs/collections/Table/TableRow-test.js
@@ -17,8 +17,31 @@ describe('TableRow', () => {
   common.propKeyOnlyToClassName(TableRow, 'positive')
   common.propKeyOnlyToClassName(TableRow, 'warning')
 
-  it('renders as a thead by default', () => {
+  it('renders as a tr by default', () => {
     shallow(<TableRow />)
       .should.have.tagName('tr')
   })
+
+  describe('shorthand', () => {
+    const items = ['Name', 'Status', 'Notes']
+
+    it('renders empty tr with no shorthand', () => {
+      const wrapper = mount(<TableRow />)
+
+      wrapper.find('td').should.have.lengthOf(0)
+    })
+
+    it('renders the cells', () => {
+      const wrapper = mount(<TableRow items={items} />)
+
+      wrapper.find('td').should.have.lengthOf(items.length)
+    })
+
+    it('renders the cells using itemAs', () => {
+      const itemAs = 'th'
+      const wrapper = mount(<TableRow items={items} itemAs={itemAs} />)
+
+      wrapper.find(itemAs).should.have.lengthOf(items.length)
+    })
+  })
 })