Vue_Style_Guide.md

Git Styleguide

Feature Branch Names

Feature branch names should start with the developers initials, followed by a / character, and then a descriptive snake case string, e.g.:

ed/this_is_a_new_feature

Do not use camel case for branch names please!

Vue / JS Styleguide

Unit Tests

Unit tests should be written in the following order

Snapshots for each state
Data function (if applicable)
Default props (if applicable)
Lifecycle hooks (if applicable)
Watch functions (if applicable)
Methods (if applicable)
Computed properties (if applicable)
User interactions, e.g. events (if applicable)

Vue Files

Vue file should be in order: template, script, style
Main div in template tag should start indented 1 tab char
JS in script tag should start indented 1 tab char
scss in style tag should start indented 1 tab char

JS in script tag should follow this order:

imports. Imports should use the following order:

// ------- Ordered Imports -------

// Third Party Dependencies (Alphebetical)
import Vue from 'vue'
import vSelect from 'vue-select'

// First Party Dependencies (Alphebetical)
import App from './App.vue'
import router from './router'
import { store } from './store/store'

// Styles (Alphebetical)
import 'vue-select/dist/vue-select.css';

Vuex store setup

// ------- Vuex Setup -------

const localVue = createLocalVue()
localVue.component("v-select", vSelect)
localVue.use(Vuex)

name
components
data
props
lifecycle hooks
watch functions
methods
computed

JS functions should be written with the following syntax:
```
 functionName() {
        function logic
 }
```

Syntax Formatting

Follow three blocks with space between while writing a test. Setup, Act(do stuff), Assertions
2 space tabs
No semicolons
Double quotes not single
Trailing comma
Add newline at E.O.F.
use shorthand tags for v-bind:class => :class etc
Attributes in objects should be justified IE:

        props: {
            description:    { type: String, default: "" },
            fontColor:      { type: String, default: colors.boomGreyDark },
            pxHeight:       { type: Number, default: 100 },
            pxWidth:        { type: Number, default: 400 },
            title:          { type: String, default: "Component Template" },
            tooltipContent: { type: String, default: "This is a tooltip example" },
        },

When import lines exceed 80 characters, break each value into its own line like so:

    import {
        presentRecordAttributeTerm,
        presentRecordAttributeValue,
        presentText,
    } from "@/lib/presenters"

“Don’t Play With Your Neighbor’s Toys” Rule:

Unit tests that rely on child components should be written in a way that the component tests are not more reliant on the child component than the actual component. (i.e. try to match the tested components reliance on knowing the inner workings of the child component. Refactor when necessary)
Unit tests should not directly call a method or specifically target an element by class name or id in a child component. Instead, it should produce the desired effect from the child when possible.

For example, when testing that a parent component receives an emitted event that is the result of calling handleUpdate() on the child, do the following:

** Good: **

       const component = mount(CurrentComponent)
       const childComponent = component.findComponent(ChildComponent)
   --> childComponent.vm.$emit("eventName", eventValue )
       expect(component.emitted()).toEqual({ eventName: [[ eventValue ]] })

** Bad: **

       const component = mount(CurrentComponent)
       const childComponent = component.findComponent(ChildComponent)
   --> childComponent.vm.handleUpdate(eventValue)
       expect(component.emitted()).toEqual({ eventName: [[ eventValue ]] })

ZaneMeroff/Vue_Style_Guide.md