🎉 bump version to 1.0.0

.npmignore

@@ -1,9 +1,12 @@
 docs
 src
+lib
+test
 dist/index.docs.css
 dist/index.docs.js
 .babelrc
 .eslintrc.js
+.travis.yml
 webpack.config.js
 yarn.lock
 index.html

.travis.yml

@@ -0,0 +1,6 @@
+language: node_js
+node_js:
+  - '9'
+script:
+  - yarn run lint
+  - yarn run test

README.md

@@ -4,6 +4,10 @@
 
 Office UI Fabric implementation for Vue.js, build with [office-ui-fabric-js](https://github.com/OfficeDev/office-ui-fabric-js)
 
+## Dependencies
+
+- vue.js 2.2.0+
+
 ## Installation
 
 ```
@@ -44,6 +48,10 @@ $ yarn run server
 
 $ yarn run bundle
 
+// runing the test
+
+$ yarn run test
+
 ```
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "office-ui-fabric-vue",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "description": "Office UI Fabric implementation for Vue.js",
   "main": "dist/index.js",
   "author": "aidewoode <[email protected]>",
@@ -22,7 +22,8 @@
     "server": "./node_modules/.bin/webpack-dev-server --inline --hot --env.development",
     "bundle": "./node_modules/.bin/webpack --env.production",
     "bundleLib": "./node_modules/.bin/webpack --env.production --env.lib",
-    "test": "./node_modules/.bin/jest"
+    "test": "./node_modules/.bin/jest",
+    "lint": "./node_modules/.bin/eslint --ext .js,.vue src"
   },
   "devDependencies": {
     "babel-core": "^6.24.1",

src/components/pivot/Pivot.vue

@@ -41,6 +41,7 @@
         };
       }
     },
+
     created() {
       this.eventHub.$on('addPivotItem', this.addPivotItem);
     },

src/components/table/Table.vue

@@ -17,11 +17,12 @@
 <script>
   // Note: The Selectable Table haven't create
   import type from '../../mixins/props/type';
+  import eventHub from '../../mixins/eventHub';
 
   export default {
     name: 'ou-table',
 
-    mixins: [type('fixed')],
+    mixins: [type('fixed'), eventHub],
 
     props: {
       data: {
@@ -47,6 +48,20 @@
           [`ms-Table--${this.type}`]: !!this.type
         };
       }
+    },
+
+    created() {
+      this.eventHub.$on('addTableColumnItems', this.addTableColumnItems);
+    },
+
+    beforeDestroy() {
+      this.eventHub.$off('addTableColumnItems', this.tableColumnItems);
+    },
+
+    methods: {
+      addTableColumnItems(value) {
+        this.tableColumnItems.push(value);
+      }
     }
   };
 </script>

src/components/table/TableColumn.vue

@@ -7,6 +7,8 @@
   export default {
     name: 'ou-table-column',
 
+    inject: ['eventHub'],
+
     props: {
       prop: {
         type: String,
@@ -15,7 +17,7 @@
     },
 
     beforeMount() {
-      this.$parent.tableColumnItems.push(this.prop);
+      this.eventHub.$emit('addTableColumnItems', this.prop);
     }
   };
 </script>

src/components/toggle/Toggle.vue

@@ -4,7 +4,7 @@
       {{ description }}
     </span>
     <input type='checkbox' class='ms-Toggle-input'/>
-    <span @click='toggle'>
+    <span class='ms-Toggle-trigger' @click='toggle'>
       <label
         class='ms-Toggle-field'
         tabindex='0'

test/date_picker.test.js

@@ -32,7 +32,7 @@ describe('DatePicker', () => {
 
     wrapper.vm.$on('input', inputEvent);
     wrapper.setProps({ value: '2018-01-01'});
-    wrapper.vm.$el.querySelector('.ms-DatePicker-table tbody tr:first-child td:last-child div').click();
+    wrapper.element.querySelector('.ms-DatePicker-table tbody tr:first-child td:last-child div').click();
 
     expect(inputEvent).toBeCalledWith('2018-01-06');
   });

test/dialog.test.js

@@ -51,7 +51,7 @@ describe('Dialog', () => {
 
     wrapper.vm.$on('input', inputEvent);
     wrapper.setProps({ value: true });
-    wrapper.vm.$el.parentElement.querySelector('.ms-Overlay').click();
+    wrapper.element.parentElement.querySelector('.ms-Overlay').click();
 
     expect(inputEvent).toBeCalledWith(false);
   });
@@ -62,7 +62,7 @@ describe('Dialog', () => {
 
     expect(wrapper.find('.ms-Dialog').classes()).toContain('is-open');
 
-    wrapper.vm.$el.parentElement.querySelector('.ms-Overlay').click();
+    wrapper.element.parentElement.querySelector('.ms-Overlay').click();
     expect(wrapper.find('.ms-Dialog').classes()).toContain('is-open');
   });
 });

test/dropdown.test.js

@@ -45,7 +45,7 @@ describe('Dropdown', () => {
   });
 
   test('should return a value when selected', () => {
-    const rootElement = wrapper.vm.$el;
+    const rootElement = wrapper.element;
     const inputEvent = jest.fn();
 
     wrapper.vm.$on('input', inputEvent);
@@ -57,9 +57,9 @@ describe('Dropdown', () => {
 
   test('should can set selected status by value', () => {
     wrapper.setProps({ value: '1' });
-    const dropdownItems = wrapper.vm.$el.querySelectorAll('.ms-Dropdown-item');
+    const dropdownItems = wrapper.element.querySelectorAll('.ms-Dropdown-item');
 
-    expect(wrapper.vm.$el.querySelector('.ms-Dropdown-title').textContent).toBe('1');
+    expect(wrapper.element.querySelector('.ms-Dropdown-title').textContent).toBe('1');
     expect(dropdownItems[1].classList.contains('is-selected')).toBeTruthy();
     expect(dropdownItems[0].classList.contains('is-selected')).toBeFalsy();
     expect(dropdownItems[2].classList.contains('is-selected')).toBeFalsy();

test/panel.test.js

@@ -48,7 +48,7 @@ describe('Panel', () => {
 
     wrapper.vm.$on('input', inputEvent);
     wrapper.setProps({ value: true });
-    wrapper.vm.$el.parentElement.querySelector('.ms-Overlay').click();
+    wrapper.element.parentElement.querySelector('.ms-Overlay').click();
 
     expect(inputEvent).toBeCalledWith(false);
   });

test/search_box.test.js

@@ -0,0 +1,46 @@
+import { mount } from 'vue-test-utils';
+
+import fabric from '../lib/office-ui-fabric';
+import SearchBox from '../src/components/search_box/SearchBox.vue';
+
+describe('SearchBox', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = mount(SearchBox, {
+      propsData: {
+        placeholder: 'placeholder'
+      },
+
+      mocks: {
+        $fabric: fabric
+      }
+    });
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  test('should render correct', () => {
+    expect(wrapper.contains('.ms-SearchBox')).toBeTruthy();
+    expect(wrapper.contains('.ms-SearchBox-field')).toBeTruthy();
+    expect(wrapper.find('.ms-SearchBox-text').text()).toBe('placeholder');
+  });
+
+  test('should return value when input text', () => {
+    const inputEvent = jest.fn();
+
+    wrapper.vm.$on('input', inputEvent);
+    wrapper.find('.ms-SearchBox-field').element.value = 'input';
+    wrapper.find('.ms-SearchBox-field').trigger('input');
+
+    expect(inputEvent).toBeCalledWith('input');
+  });
+
+  test('should can set input text by value', () => {
+    wrapper.setProps({ value: 'input' });
+
+    expect(wrapper.find('.ms-SearchBox-field').element.value).toBe('input');
+  });
+});

test/spinner.test.js

@@ -0,0 +1,29 @@
+import { mount } from 'vue-test-utils';
+
+import fabric from '../lib/office-ui-fabric';
+import Spinner from '../src/components/spinner/Spinner.vue';
+
+describe('Spinner', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = mount(Spinner, {
+      propsData: {
+        label: 'label'
+      },
+
+      mocks: {
+        $fabric: fabric
+      }
+    });
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  test('should render correct', () => {
+    expect(wrapper.contains('.ms-Spinner')).toBeTruthy();
+    expect(wrapper.find('.ms-Spinner-label').text()).toBe('label');
+  });
+});

test/table.test.js

@@ -0,0 +1,57 @@
+import { mount, createLocalVue } from 'vue-test-utils';
+
+import Table from '../src/components/table/Table.vue';
+import TableColumn from '../src/components/table/TableColumn.vue';
+
+describe('Table', () => {
+  const defaultSlot = [
+    "<table-column prop='name'>Name</table-column>",
+    "<table-column prop='age'>Age</table-column>",
+  ];
+
+  const tableData = [
+    { name: 'Ed', age: '24' },
+    { name: 'Jack', age: '30' },
+    { name: 'Blues', age: '51' },
+  ];
+
+  let wrapper;
+
+  beforeEach(() => {
+    const localVue = createLocalVue();
+
+    localVue.component('table-column', TableColumn);
+
+    wrapper = mount(Table, {
+      propsData: {
+        data: tableData
+      },
+
+      slots: {
+        default: defaultSlot,
+      },
+
+      localVue
+    });
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  test('should render correct', () => {
+    const tableColumnProps = ['name', 'age']
+
+    expect(wrapper.contains('.ms-Table')).toBeTruthy();
+    expect(wrapper.findAll('th').length).toBe(defaultSlot.length);
+    expect(wrapper.findAll('tbody tr').length).toBe(tableData.length);
+    expect(wrapper.findAll('th').at(0).text()).toBe('Name');
+    expect(wrapper.findAll('th').at(1).text()).toBe('Age');
+
+    wrapper.element.querySelectorAll('tbody tr').forEach((trElement, trIndex) => {
+      trElement.childNodes.forEach((tdElement, tdIndex) => {
+        expect(tdElement.textContent.trim()).toBe(tableData[trIndex][tableColumnProps[tdIndex]]);
+      });
+    });
+  });
+});

test/text_field.test.js

@@ -0,0 +1,53 @@
+import { mount } from 'vue-test-utils';
+
+import fabric from '../lib/office-ui-fabric';
+import TextField from '../src/components/text_field/TextField.vue';
+
+describe('TextField', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = mount(TextField, {
+      propsData: {
+        label: 'label'
+      },
+
+      mocks: {
+        $fabric: fabric
+      }
+    });
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  test('should render correct', () => {
+    expect(wrapper.contains('.ms-TextField')).toBeTruthy();
+    expect(wrapper.contains('input')).toBeTruthy();
+    expect(wrapper.find('.ms-Label').text()).toBe('label');
+  });
+
+  test('should be textarea when type is multiline ', () => {
+    wrapper.setProps({ type: 'multiline' });
+
+    expect(wrapper.contains('input')).toBeFalsy();
+    expect(wrapper.contains('textarea')).toBeTruthy();
+  });
+
+  test('should return value when input text', () => {
+    const inputEvent = jest.fn();
+
+    wrapper.vm.$on('input', inputEvent);
+    wrapper.find('.ms-TextField-field').element.value = 'input';
+    wrapper.find('.ms-TextField-field').trigger('input');
+
+    expect(inputEvent).toBeCalledWith('input');
+  });
+
+  test('should can set input text by value', () => {
+    wrapper.setProps({ value: 'input' });
+
+    expect(wrapper.find('.ms-TextField-field').element.value).toBe('input');
+  });
+});