Update specs

package.json

@@ -17,12 +17,12 @@
     "basscss-align": "^1.0.1",
     "basscss-border": "^3.0.0",
     "basscss-colors": "^2.0.0",
-    "basscss-flexbox": "^1.0.0-beta1",
+    "basscss-flexbox": "^1.0.0-beta2",
     "basscss-grid": "^1.0.4",
     "basscss-hide": "^1.0.0-beta1",
     "basscss-layout": "^3.0.0",
-    "basscss-margin": "^1.0.1",
-    "basscss-padding": "^1.0.1",
+    "basscss-margin": "^1.0.2",
+    "basscss-padding": "^1.1.0",
     "basscss-position": "^2.0.0",
     "basscss-type-scale": "^1.0.1",
     "basscss-typography": "^3.0.0"

test/border.spec.js

@@ -25,40 +25,28 @@ describe('border', () => {
     expect(div.computedStyle.borderLeftWidth).to.equal('1px')
   })
 
-  it('should apply border color', () => {
-    div.className = 'border'
-    expect(div.computedStyle.borderTopColor).to.not.equal('none')
-    expect(div.computedStyle.borderRightColor).to.not.equal('none')
-    expect(div.computedStyle.borderBottomColor).to.not.equal('none')
-    expect(div.computedStyle.borderLeftColor).to.not.equal('none')
-  })
-
   it('should apply border top styles', () => {
     div.className = 'border-top'
     expect(div.computedStyle.borderTopWidth).to.equal('1px')
     expect(div.computedStyle.borderTopStyle).to.equal('solid')
-    expect(div.computedStyle.borderTopColor).to.not.equal('none')
   })
 
   it('should apply border right styles', () => {
     div.className = 'border-right'
     expect(div.computedStyle.borderRightWidth).to.equal('1px')
     expect(div.computedStyle.borderRightStyle).to.equal('solid')
-    expect(div.computedStyle.borderRightColor).to.not.equal('none')
   })
 
   it('should apply border bottom styles', () => {
     div.className = 'border-bottom'
     expect(div.computedStyle.borderBottomWidth).to.equal('1px')
     expect(div.computedStyle.borderBottomStyle).to.equal('solid')
-    expect(div.computedStyle.borderBottomColor).to.not.equal('none')
   })
 
   it('should apply border left styles', () => {
     div.className = 'border-left'
     expect(div.computedStyle.borderLeftWidth).to.equal('1px')
     expect(div.computedStyle.borderLeftStyle).to.equal('solid')
-    expect(div.computedStyle.borderLeftColor).to.not.equal('none')
   })
 
   it('should remove border styles', () => {

test/flexbox.spec.js

@@ -10,7 +10,159 @@ describe('flexbox', () => {
     expect(div.computedStyle.display).to.equal('flex')
   })
 
-  it('should contain more tests')
+  it('should set flex-direction', () => {
+    div.className = 'flex-column'
+    expect(div.computedStyle.flexDirection).to.equal('column')
+  })
+
+  it('should set flex-wrap', () => {
+    div.className = 'flex-wrap'
+    expect(div.computedStyle.flexWrap).to.equal('wrap')
+  })
+
+  it('should set align-items flex-start', () => {
+    div.className = 'align-items-start'
+    expect(div.computedStyle.alignItems).to.equal('flex-start')
+  })
+
+  it('should set align-items flex-end', () => {
+    div.className = 'align-items-end'
+    expect(div.computedStyle.alignItems).to.equal('flex-end')
+  })
+
+  it('should set align-items center', () => {
+    div.className = 'align-items-center'
+    expect(div.computedStyle.alignItems).to.equal('center')
+  })
+
+  it('should set align-items baseline', () => {
+    div.className = 'align-items-baseline'
+    expect(div.computedStyle.alignItems).to.equal('baseline')
+  })
+
+  it('should set align-items stretch', () => {
+    div.className = 'align-items-stretch'
+    expect(div.computedStyle.alignItems).to.equal('stretch')
+  })
+
+  it('should set align-self flex-start', () => {
+    div.className = 'align-self-start'
+    expect(div.computedStyle.alignSelf).to.equal('flex-start')
+  })
+
+  it('should set align-self flex-end', () => {
+    div.className = 'align-self-end'
+    expect(div.computedStyle.alignSelf).to.equal('flex-end')
+  })
+
+  it('should set align-self center', () => {
+    div.className = 'align-self-center'
+    expect(div.computedStyle.alignSelf).to.equal('center')
+  })
+
+  it('should set align-self baseline', () => {
+    div.className = 'align-self-baseline'
+    expect(div.computedStyle.alignSelf).to.equal('baseline')
+  })
+
+  it('should set align-self stretch', () => {
+    div.className = 'align-self-stretch'
+    expect(div.computedStyle.alignSelf).to.equal('stretch')
+  })
+
+  it('should set justify-content flex-start', () => {
+    div.className = 'justify-start'
+    expect(div.computedStyle.justifyContent).to.equal('flex-start')
+  })
+
+  it('should set justify-content flex-end', () => {
+    div.className = 'justify-end'
+    expect(div.computedStyle.justifyContent).to.equal('flex-end')
+  })
+
+  it('should set justify-content center', () => {
+    div.className = 'justify-center'
+    expect(div.computedStyle.justifyContent).to.equal('center')
+  })
+
+  it('should set justify-content space-between', () => {
+    div.className = 'justify-between'
+    expect(div.computedStyle.justifyContent).to.equal('space-between')
+  })
+
+  it('should set justify-content space-around', () => {
+    div.className = 'justify-around'
+    expect(div.computedStyle.justifyContent).to.equal('space-around')
+  })
+
+  it('should set align-content flex-start', () => {
+    div.className = 'align-content-start'
+    expect(div.computedStyle.alignContent).to.equal('flex-start')
+  })
+
+  it('should set align-content flex-end', () => {
+    div.className = 'align-content-end'
+    expect(div.computedStyle.alignContent).to.equal('flex-end')
+  })
+
+  it('should set align-content center', () => {
+    div.className = 'align-content-center'
+    expect(div.computedStyle.alignContent).to.equal('center')
+  })
+
+  it('should set align-content space-between', () => {
+    div.className = 'align-content-between'
+    expect(div.computedStyle.alignContent).to.equal('space-between')
+  })
+
+  it('should set align-content space-around', () => {
+    div.className = 'align-content-around'
+    expect(div.computedStyle.alignContent).to.equal('space-around')
+  })
+
+  it('should set align-content stretch', () => {
+    div.className = 'align-content-stretch'
+    expect(div.computedStyle.alignContent).to.equal('stretch')
+  })
+
+  it('should set flex to 1 1 auto', () => {
+    div.className = 'flex-auto'
+    expect(div.computedStyle.flexGrow).to.equal('1')
+    expect(div.computedStyle.flexShrink).to.equal('1')
+    expect(div.computedStyle.flexBasis).to.equal('auto')
+  })
+
+  it('should set flex none', () => {
+    div.className = 'flex-none'
+    expect(div.computedStyle.flexGrow).to.equal('0')
+    expect(div.computedStyle.flexShrink).to.equal('0')
+    expect(div.computedStyle.flexBasis).to.equal('auto')
+  })
+
+  it('should set order 0', () => {
+    div.className = 'order-0'
+    expect(div.computedStyle.order).to.equal('0')
+  })
+
+  it('should set order 1', () => {
+    div.className = 'order-1'
+    expect(div.computedStyle.order).to.equal('1')
+  })
+
+  it('should set order 2', () => {
+    div.className = 'order-2'
+    expect(div.computedStyle.order).to.equal('2')
+  })
+
+  it('should set order 3', () => {
+    div.className = 'order-3'
+    expect(div.computedStyle.order).to.equal('3')
+  })
+
+  it('should set order 99999', () => {
+    div.className = 'order-last'
+    expect(div.computedStyle.order).to.equal('99999')
+  })
 
 })
 

test/grid.spec.js

@@ -19,12 +19,6 @@ describe('grid', () => {
     it('should set max-width', () => {
       expect(container.computedStyle.maxWidth).to.equal('1024px')
     })
-    // it('should set margin-left auto', () => {
-    //   expect(container.computedStyle.marginLeft).to.equal('auto')
-    // })
-    // it('should set margin-right auto', () => {
-    //   expect(container.computedStyle.marginRight).to.equal('auto')
-    // })
   })
 
   describe('col', () => {

test/hide.spec.js

@@ -5,53 +5,63 @@ describe('hide', () => {
 
   const div = addElement('div')
 
-  it('should accessibly hide')
+  it('should accessibly hide', () => {
+    div.className = 'hide'
+    expect(div.computedStyle.position).to.equal('absolute')
+    expect(div.computedStyle.height).to.equal('1px')
+    expect(div.computedStyle.width).to.equal('1px')
+    expect(div.computedStyle.overflow).to.equal('hidden')
+    expect(div.computedStyle.clip).to.equal('rect(1px, 1px, 1px, 1px)')
+  })
+
+  it('should set display none', () => {
+    div.className = 'display-none'
+    expect(div.computedStyle.display).to.equal('none')
+  })
 
-  /*
   context('below sm breakpoint', () => {
     beforeEach(() => {
       // Resize window
     })
 
-    it('should set display none for sm-show')
-    it('should set display none for md-show')
-    it('should set display none for lg-show')
+    it('should set display none for xs-hide')
+    it('should not set display none for sm-hide')
+    it('should not set display none for md-hide')
+    it('should not set display none for lg-hide')
   })
 
-  context('above sm breakpoint', () => {
+  context('between sm and md breakpoint', () => {
     beforeEach(() => {
       // Resize window
     })
 
-    it('should set display block for sm-show')
+    it('should not set display none for xs-hide')
     it('should set display none for sm-hide')
-    it('should set display none for md-show')
-    it('should set display none for lg-show')
+    it('should not set display none for md-hide')
+    it('should not set display none for lg-hide')
   })
 
-  context('above md breakpoint', () => {
+  context('between md and lg breakpoint', () => {
     beforeEach(() => {
       // Resize window
     })
-    it('should set display block for sm-show')
-    it('should set display none for sm-hide')
-    it('should set display block for md-show')
+
+    it('should not set display none for xs-hide')
+    it('should not set display none for sm-hide')
     it('should set display none for md-hide')
-    it('should set display none for lg-show')
+    it('should not set display none for lg-hide')
   })
 
   context('above lg breakpoint', () => {
     beforeEach(() => {
       // Resize window
     })
-    it('should set display block for sm-show')
-    it('should set display none for sm-hide')
-    it('should set display block for md-show')
-    it('should set display none for md-hide')
-    it('should set display block for lg-show')
+
+    it('should not set display none for xs-hide')
+    it('should not set display none for sm-hide')
+    it('should not set display none for md-hide')
     it('should set display none for lg-hide')
   })
-  */
 
 
 })

test/layout.spec.js

@@ -63,4 +63,9 @@ describe('layout', () => {
     expect(div.computedStyle.overflow).to.equal('auto')
   })
 
+  it('should set box-sizing border-box', () => {
+    div.className = 'border-box'
+    expect(div.computedStyle.boxSizing).to.equal('border-box')
+  })
 })
+