tests: complete layout tests (bootstrap-vue#1452)

tmorehouse · web-flow · commit d59ba53e8a13 · 2017-12-11T21:38:37.000-04:00
diff --git a/src/components/layout/col.spec.js b/src/components/layout/col.spec.js
@@ -103,4 +103,9 @@ describe('col', async () => {
     const { $refs } = window.app
     expect($refs.tag).toBeElement('section')
   })
+
+  it("should apply '.align-self-*' class with 'align-self' prop", async () => {
+    const { $refs } = window.app
+    expect($refs.alignSelf).toHaveClass('align-self-center')
+  })
 })
diff --git a/src/components/layout/container.spec.js b/src/components/layout/container.spec.js
@@ -1,6 +1,6 @@
 import { loadFixture, testVM } from '../../../tests/utils'
 
-describe('form-row', async () => {
+describe('container', async () => {
   beforeEach(loadFixture(__dirname, 'container'))
   testVM()
 
diff --git a/src/components/layout/fixtures/col.html b/src/components/layout/fixtures/col.html
@@ -36,6 +36,7 @@ <h1>Hello Vue!</h1>
             </div>
             <b-col tag="section"
                    ref="tag"></b-col>
+            <b-col align-self="center" ref="alignSelf"></b-col>
         </div>
     </div>
 </div>
diff --git a/src/components/layout/fixtures/row.html b/src/components/layout/fixtures/row.html
@@ -1,10 +1,14 @@
 <div id="app">
     <!-- default -->
     <b-row ref="default">default</b-row>
-    <br>
     <!-- custom tag prop -->
     <b-row tag="p" ref="custom">custom</b-row>
-    <br>
     <!-- no-gutters prop -->
     <b-row no-gutters ref="noGutters">no gutters</b-row>
+    <!-- align-v prop -->
+    <b-row align-v="center" ref="alignV">align v</b-row>
+    <!-- align-h prop -->
+    <b-row align-h="center" ref="alignH">align h</b-row>
+    <!-- align-h prop -->
+    <b-row align-content="center" ref="alignContent">align content</b-row>
 </div>
diff --git a/src/components/layout/row.spec.js b/src/components/layout/row.spec.js
@@ -20,6 +20,24 @@ describe('form-row', async () => {
     expect($refs.noGutters).toHaveClass('no-gutters')
   })
 
+  it('alignV should contain classes', async () => {
+    const { app: { $refs } } = window
+    expect($refs.alignV).toHaveClass('row')
+    expect($refs.alignV).toHaveClass('align-items-center')
+  })
+
+  it('alignH should contain classes', async () => {
+    const { app: { $refs } } = window
+    expect($refs.alignH).toHaveClass('row')
+    expect($refs.alignH).toHaveClass('justify-content-center')
+  })
+
+  it('alignContent should contain classes', async () => {
+    const { app: { $refs } } = window
+    expect($refs.alignContent).toHaveClass('row')
+    expect($refs.alignContent).toHaveClass('align-content-center')
+  })
+
   it('default should have content', async () => {
     const { app: { $refs } } = window
     expect($refs.default.textContent).toContain('default')
