component.spec.js

/* global describe, it, expect, beforeEach */

import HelpSidebar from '@/components/help/Sidebar';
import HelpStateManager from '@/services/help-state-manager';
import { createLocalVue, mount } from '@vue/test-utils';

describe('HelpSidebar', () => {
  let subject;

  beforeEach(() => {
    const localVue = createLocalVue();
    subject = mount(HelpSidebar, {
      localVue,
      propsData: { state: new HelpStateManager(), debug: true },
    });
  });

  it('renders the initial state component', () => {
    expect(subject.text()).to.contain('1-initial');
  });

  it('skips', () => {
    subject.find('.js-skip').trigger('click');
    expect(subject.vm.state.currentState.id).to.equal('2-solution-connected'); // OK
    expect(subject.text()).to.contain('2-solution-connected'); // FAIL
  });

  it('exits');
});

component.vue

<template lang='pug'>
.help-sidebar
  button.js-skip(@click='skip')
    | Skip

  button.js-exit(@click='exit')
    | Exit

  template(v-if='debug')
    | {{ state.currentState }}
</template>

<script>
import HelpStateManager from '@/services/help-state-manager';

export default {
  name: 'HelpSidebar',
  props: {
    state: HelpStateManager,
    debug: {
      type: Boolean,
      default: false,
    },
  },

  methods: {
    skip() {
      this.state.jump();
    },

    exit() {
      this.state.end();
    }
  }
};
</script>

HelpStateManager.js

export const States = {
  INITIAL: { id: '1-initial', next: 'CONNECTED' },
  CONNECTED: { id: '2-connected', next: 'END' },
  END: { id: '3-end' }
};

export default class HelpStateManager {
  constructor() {
    this.currentState = States.INITIAL;
  }

  jump() {
    this.currentState = States[this.currentState.next];
  }

  end() {
    this.currentState = States.END;
  }
}