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.

Installing Yarn (required)

Fundamental Vue uses Yarn.

You should follow the official Yarn installation instructions in order to install Yarn.

Getting the Code

Clone the Fundamental Vue repository:

$ git clone git@github.com:SAP/fundamental-vue.git

Installing Dependencies

$ cd fundamental-vue
$ yarn install

Project Structure

.
├── README.md
├── package.json
├── node_modules/
├── …
├── src/
│   ├── docs/         (Documentation App)
│   ├── components/   (Vue Components)
│   └── tools/        (Build Tools)
└── …

Editing the Source Code

You can edit the source code using (almost) any editor. However, we highly recommend using Visual Studio Code.

Serving the Documentation & Components

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 serve

Executing tests

There are two yarn-scripts related to testing.

Execute all unit tests:

$ yarn test

Execute all tests and watch for changes:

$ yarn test:watch

E2E-Tests:

$ yarn test:e2e

Debugging 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.

1. Install the official Jest extension for Visual Studio Code.
2. You may have to reload Visual Studio Code if you are using a version of Visual Studio Code released before February 2019.
3. Add the following setting to your settings.json file:

{
  "jest.debugCodeLens.showWhenTestStateIn": [
    "fail", "unknown", "pass", "skip"
  ]
}

This ensures that Jest's code lenses are always visible in tests.

4. Make sure that Auto Attach is turned on.
5. Open a terminal and cd into the ui-directory.
6. 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 --runInBand

Production Build

If you want to create a production build of Fundamental Vue and the documentation simply execute:

$ yarn build

After a successful build you should see the artefacts in the dist-folder.

Creating an NPM Package

Once you have a production build in your dist-folder simply execute

$ npm pack

This will create a tarball that can be used by Yarn or NPM.