vpplatonov/vuejs

Recursive component VueJS with jest test

vuejs

A Vue.js project

<template>
  <ul v-if="items">
    <li v-for="item in items">
        {{item.title}}
        <NestedSetsItems v-if="item.subitems" :items="item.subitems"></NestedSetsItems>
    </li>
  </ul>
</template>

Input parameters

items array of Object:

[
  {
    title: 'Сlothes',
    left: 1,
    right: 22
  },
  {
    title: 'For men',
    left: 2,
    right: 9
  },
  {
    title: 'For women',
    left: 10,
    right: 21
  },
  ...
]  

Store format

Nested Sets

Component HTML output

<ul>
  <li>Сlothes
    <ul>
      <li>For men
        <ul>
          <li>Suits
            <ul>
              <li>Pants</li>
              <li>Jackets</li>
            </ul>
          </li>
         </ul> 
      </li>
      <li>For women
        <ul>
          <li>Dresses
            <ul>
              <li>Evening</li>
              <li>Summer</li>
            </ul>
          </li>
          <li>Skirts</li>
          <li>Blouses</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Restrictions

• Component use only ES5
• inside only ul and li elements
• empty ul/li node removed
• Component don't fix missed parameters structure but throw exceptions

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# run unit tests
npm run unit

# run all tests
npm test

For a detailed explanation on how things work, check out the Creating Reusable Components and Recursive components.