-
Notifications
You must be signed in to change notification settings - Fork 32
Fundamental Vue Development Guide
If you want to contribute to Fundamental Vue this document is for you. This guide describes how to build, edit, test, document and debug Fundamental Vue locally. We will start from zero and describe each step of the way. Feel free to skip any steps you feel are not relevant to you.
Fundamental Vue uses Yarn.
You should follow the official Yarn installation instructions in order to install Yarn.
Clone the Fundamental Vue repository:
$ git clone git@github.com:SAP/fundamental-vue.git$ cd fundamental-vue
$ yarn install.
├── README.md
├── package.json
├── node_modules/
├── …
├── src/
│ ├── docs/ (Documentation App)
│ ├── components/ (Vue Components)
│ └── tools/ (Build Tools)
└── …
You can edit the source code using (almost) any editor. However, we highly recommend using Visual Studio Code.
Let's assume you made a change to the source code. The next thing you probably want is to see your changes. The best way to see your change is to serve the documentation:
$ yarn serveThere are two yarn-scripts related to testing.
Execute all unit tests:
$ yarn testExecute all tests and watch for changes:
$ yarn test:watchE2E-Tests:
$ yarn test:e2eDebugging Tests:
It is possible to debug tests. The following instructions work by using Visual Studio Code. There may be other ways to debug tests but up to this point there was no need to debug tests in another way. If you are not using Visual Studio Code and have the need to debug tests please create an issue.
- Install the official Jest extension for Visual Studio Code.
- You may have to reload Visual Studio Code if you are using a version of Visual Studio Code released before February 2019.
- Add the following setting to your
settings.jsonfile:
{
"jest.debugCodeLens.showWhenTestStateIn": [
"fail", "unknown", "pass", "skip"
]
}This ensures that Jest's code lenses are always visible in tests.
- Make sure that Auto Attach is turned on.
- Open a terminal and cd into the
ui-directory. - Set a breakpoing in a test of interest (using Visual Studio Code) and then execute the following command:
$ node --inspect-brk ./node_modules/.bin/vue-cli-service test:unit --runInBandIf you want to create a production build of Fundamental Vue and the documentation simply execute:
$ yarn buildAfter a successful build you should see the artefacts in the dist-folder.
Once you have a production build in your dist-folder simply execute
$ npm packThis will create a tarball that can be used by Yarn or NPM.