diff --git a/package.json b/package.json index 55fd6b363e..ec0a2d57c9 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,7 @@ "bootstrap": "lerna bootstrap && lerna link", "bootstrap:clean": "run-s clean bootstrap", "build": "yarn build:all", - "build:all": "run-s build:icons build:core build:react build:angular build:angularjs", + "build:all": "run-s build:icons build:core build:react build:angular build:angularjs build:vue", "build:angular": "cd ./angular && yarn build:lib", "build:angularjs": "cd ./angularjs && yarn build", "build:core": "cd ./core && yarn build:lib", @@ -17,35 +17,40 @@ "build:react": "cd ./react && yarn build:lib", "build:sinks": "cd ./core && yarn build:app", "build:utils": "cd ./utils && yarn build", + "build:vue": "cd ./vue && yarn build", "build:data": "rimraf ./data && node ./tools/generateComponentsData.js", "serve:core": "cd ./core && yarn open:dist", "ci:publish": "yarn release", - "ci:test": "run-s ci:test:icons ci:test:core ci:test:react ci:test:angular", + "ci:test": "run-s ci:test:icons ci:test:core ci:test:react ci:test:angular ci:test:vue", "ci:test:core": "cd ./core && yarn test", "ci:test:core:percy": "cd ./core && yarn test:percy", "ci:test:icons": "cd ./icons && yarn test", "ci:test:react": "cd ./react && yarn test:CI", "ci:test:angular": "cd ./angular && yarn test:CI", "ci:test:percy": "run-s ci:test:icons ci:test:core:percy ci:test:react ci:test:angular", + "ci:test:vue": "cd ./vue && yarn test:CI", "cypress:verify": "cypress verify", "clean": "rimraf node_modules/ **/node_modules/", "commit": "npx git-cz", "data": "run-s build:data data:pushToDB", "data:pushToDB": "node ./tools/postComponentsToDB.js", - "lint:all": "run-p lint:icons lint:core lint:react lint:angular", + "lint:all": "run-p lint:icons lint:core lint:react lint:angular lint:vue", "lint:angular": "cd ./angular && yarn lint", "lint:icons": "cd ./icons && yarn lint", "lint:core": "cd ./core && yarn lint", "lint:react": "cd ./react && yarn lint", + "lint:vue": "cd ./vue && yarn lint", "release": "./tools/release.sh", - "start:all": "run-p start:core start:angular start:react", + "start:all": "run-p start:core start:angular start:react start:vue", "start:angular": "cd ./angular && yarn start", "start:core": "cd ./core && yarn start", "start:react": "cd ./react && yarn start", - "test:all": "run-p test:angular test:react", + "start:vue": "cd ./vue && yarn start", + "test:all": "run-p test:angular test:react test:vue", "test:react": "cd ./react && yarn test", "test:angular": "cd ./angular && yarn test", "test:angularjs": "cd ./angularjs && yarn test", + "test:vue": "cd ./vue && yarn test", "postinstall": "rimraf angular/src/lib/node_modules/rxjs && yarn build:utils" }, "devDependencies": { diff --git a/vue/CHANGELOG.md b/vue/CHANGELOG.md old mode 100755 new mode 100644 diff --git a/vue/CONTRIBUTING.md b/vue/CONTRIBUTING.md new file mode 100755 index 0000000000..3ab385b70a --- /dev/null +++ b/vue/CONTRIBUTING.md @@ -0,0 +1,65 @@ + +# Contributing + +##### We'd love for you to contribute to our source code and to make Momentum UI Vue even better than it is today! Below are the guidelines to follow. + +## Table of Contents + +- [Questions, Issues or Ideas](../CONTRIBUTING.md#question) + - [Issues](../CONTRIBUTING.md#issue) + - [Features](../CONTRIBUTING.md#feature) +- [Requirements](../CONTRIBUTING.md#requirements) +- [Development Environment](../CONTRIBUTING.md#environment) +- [Running the project locally](#running) +- [Adding a new component](#component) +- [Testing](#testing) +- [Code Guidelines](#rules) +- [Commit Guidelines](../CONTRIBUTING.md#commit) +- [Submitting a Code Review](../CONTRIBUTING.md#code-review) + +## Running the project locally + +* Run the play script which will build and watch the library, then serve it at localhost:5000 + * `yarn start` from the vue (momentum-ui/vue) directory + * `yarn start:vue` from the root (momentum-ui) directory +* You can access the playground `localhost:5000` + +## Adding a new component +1. cd into the vue directory: `cd vue/` +2. Use yarn scripts to create yourComponent. Replace `` with the kebab-cased name of the new component. + * Create Component: `yarn new ` +3. Start the app and the new component will now be availble in the Playground. + +### Your components directory should look like this: +``` bash +└── lib + └── sample # component directory + ├── sample.vue # component file + ├── index.js # barrel file + ├── examples # examples directory + | ├── example-sample-default.vue # default example component + | └── index.json # examples barrel file + └── tests # tests directory + ├── sample.spec.js # component unit test + └── __snapshots__ # snapshots directory (will be generated Jest) + └── sample.spec.js.snap # snapshots file (will be generated by Jest) +``` +**You can also reference the sample component at `src/lib/sample/` + +## Testing +* In the `/tests/` directory, ensure that you add tests to cover all of the component code. +* Run the test and ensure that all tests are passing by running: + * `yarn test` from the vue (momentum-ui/vue) directory + * `yarn test:vue` from the root (momentum-ui) directory + + +## Coding Guidelines + +### Vue TypeScript + +We follow the vue [Style Guide](https://vue.io/guide/styleguide) + + +## License + +By contributing your code to the `@momentum-ui/vue` GitHub repository, you agree to license your contribution under the MIT license. diff --git a/vue/package.json b/vue/package.json index 7e1bb25900..0761b9c879 100755 --- a/vue/package.json +++ b/vue/package.json @@ -10,14 +10,18 @@ ], "typings": "types/index.d.ts", "scripts": { + "build": "yarn build:lib", "build:lib": "node tools/bin/build-lib.js", "build:example": "node tools/bin/build-example.js", "clean": "rimraf lib", "deploy:build": "yarn run build:lib", "dist": "yarn run clean && yarn run build:lib && yarn run lint && webpack --config tools/webpack.conf.js && webpack --config tools/webpack.common.js && webpack --config tools/webpack.component.js", "lint": "eslint src/**/* --quiet", - "play": "yarn run build:lib && yarn run build:example && cross-env NODE_ENV=development PLAY_ENV=true webpack-dev-server --config tools/webpack.demo.js", - "test": "jest" + "new": "node tools/bin/new.js", + "start": "yarn run build:lib && yarn run build:example && cross-env NODE_ENV=development PLAY_ENV=true webpack-dev-server --config tools/webpack.demo.js", + "test": "jest", + "test:aot": "yarn build --prod", + "test:CI": "yarn test:aot && jest --maxWorkers=2 --bail" }, "homepage": "http://momentum.design", "repository": { diff --git a/vue/src/lib/sample/examples/example-sample-default.vue b/vue/src/lib/sample/examples/example-sample-default.vue new file mode 100644 index 0000000000..7ba13bd655 --- /dev/null +++ b/vue/src/lib/sample/examples/example-sample-default.vue @@ -0,0 +1,11 @@ + + + diff --git a/vue/src/lib/sample/examples/index.json b/vue/src/lib/sample/examples/index.json new file mode 100644 index 0000000000..85c9a026fe --- /dev/null +++ b/vue/src/lib/sample/examples/index.json @@ -0,0 +1,3 @@ +[ + "example-sample-default" +] diff --git a/vue/src/lib/sample/index.js b/vue/src/lib/sample/index.js old mode 100755 new mode 100644 diff --git a/vue/src/lib/sample/sample.vue b/vue/src/lib/sample/sample.vue old mode 100755 new mode 100644 diff --git a/vue/src/lib/sample/tests/__snapshots__/sample.spec.js.snap b/vue/src/lib/sample/tests/__snapshots__/sample.spec.js.snap new file mode 100644 index 0000000000..a0d93dda97 --- /dev/null +++ b/vue/src/lib/sample/tests/__snapshots__/sample.spec.js.snap @@ -0,0 +1,3 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Sample should match snapshot 1`] = `
`; diff --git a/vue/src/lib/sample/tests/sample.spec.js b/vue/src/lib/sample/tests/sample.spec.js new file mode 100644 index 0000000000..80cb16e87d --- /dev/null +++ b/vue/src/lib/sample/tests/sample.spec.js @@ -0,0 +1,9 @@ +import { shallowMount } from '@vue/test-utils'; +import Sample from '../sample.vue'; + +describe('Sample', () => { + it('should match snapshot', () => { + const wrapper = shallowMount(Sample); + expect(wrapper.html()).toMatchSnapshot(); + }); +}); diff --git a/vue/tools/bin/new.js b/vue/tools/bin/new.js index 0a345ae0e5..28e9fbf580 100755 --- a/vue/tools/bin/new.js +++ b/vue/tools/bin/new.js @@ -42,24 +42,41 @@ export default { }, { filename: path.join('./tests', `${componentname}.spec.js`), - content: `import { createTest, destroyVM } from '../util'; -import ${ComponentName} from 'src/lib/${componentname}'; + content: `import { shallowMount } from '@vue/test-utils'; +import ${ComponentName} from '../${componentname}'; describe('${ComponentName}', () => { - let vm; - afterEach(() => { - destroyVM(vm); - }); - - it('create', () => { - vm = createTest(${ComponentName}, true); - expect(vm.$el).to.exist; + it('should match snapshot', () => { + const wrapper = shallowMount(${ComponentName}); + expect(wrapper.html()).toMatchSnapshot(); }); }); ` }, { - filename: path.join('./../types', `${componentname}.d.ts`), + filename: path.join('./examples', `example-${componentname}-default.vue`), + content: ` + + +` + }, + { + filename: './examples/index.json', + content: `[ + "example-${componentname}-default" +] +` + }, + { + filename: path.join('../../../types', `${componentname}.d.ts`), content: `import { MomentumUIComponent } from './component' /** ${ComponentName} Component */ diff --git a/vue/types/momentum-ui.d.ts b/vue/types/momentum-ui.d.ts index c7eb9cf295..4329afe327 100755 --- a/vue/types/momentum-ui.d.ts +++ b/vue/types/momentum-ui.d.ts @@ -14,4 +14,3 @@ export function install (vue: typeof Vue, options: InstallationOptions): void /** Bagde Component */ export class Badge extends Badge {} -