added some more funky functional unit tests

acammies

2018-04-10 90ac1e0cbb38570ec2a0ff4be183d2e83b5261aa

added some more funky functional unit tests

 tests/unit/AboutLabs.spec.js

New file
@@ -0,0 +1,10 @@
import { shallow } from "@vue/test-utils";
import AboutLabs from '@/components/AboutLabs.vue'
import * as all from "../unit/setup.js";

describe("AboutLabs.vue", () => {
    it("has the expected html structure", () => {
        const wrapper = shallow(AboutLabs);
        expect(wrapper.element).toMatchSnapshot();
    })
})

 tests/unit/Header.spec.js

New file
@@ -0,0 +1,10 @@
import { shallow } from "@vue/test-utils";
import Header from '@/components/Header.vue'
import * as all from "../unit/setup.js";

describe("Header.vue", () => {
    it("has the expected html structure", () => {
        const wrapper = shallow(Header);
        expect(wrapper.element).toMatchSnapshot();
    })
})

 tests/unit/ListOfTodos.spec.js

New file
@@ -0,0 +1,50 @@
import { shallow, createLocalVue } from "@vue/test-utils";
import Vuex from "vuex";
import ListOfTodos from "@/components/ListOfTodos.vue";
// import { expect } from 'chai'

import * as all from "../unit/setup.js";

const localVue = createLocalVue();

localVue.use(Vuex);

describe("ListOfTodos.vue", () => {
  let store;
  const todos = [
    {
      title: "Learn awesome things about Labs",
      completed: false,
      important: false
    }
  ];
  const actions = {
    loadTodos: jest.fn()
  }
  const getters = {
    todos: jest.fn()
  }
  beforeEach(() => {
    
    store = new Vuex.Store({
      state: {},
      propsData: { todos },
      actions, getters
    });
  });

  it("calls the loadTodos function from actionsjs when created", () => {
    const wrapper = shallow(ListOfTodos, { store, localVue });
    expect(actions.loadTodos).toHaveBeenCalled();
  })

  it("maps getters with todos when computed", () => {
    const wrapper = shallow(ListOfTodos, { store, localVue });
    expect(getters.todos).toHaveBeenCalled();
  })

  it("has the expected html structure", () => {
    const wrapper = shallow(ListOfTodos, { store, localVue });
    expect(wrapper.element).toMatchSnapshot();
  });
});

 tests/unit/ListOfTodos.specnot.js

File was deleted

 tests/unit/NewTodo.spec.js

@@ -1,4 +1,4 @@
import { shallow, createLocalVue } from "@vue/test-utils";
import { shallow, createLocalVue, mount } from "@vue/test-utils";
import Vuex from 'vuex';
import NewTodo from "@/components/NewTodo.vue";
// import { expect } from 'chai'
@@ -57,6 +57,11 @@
    expect(wrapper.element).toMatchSnapshot();
  });

  // it("has the expected html structure", () => {
  //   const wrapper = mount(NewTodo);
  //   expect(wrapper.element).toMatchSnapshot();
  // });

  // it("renders newTodo as test string ", () => {
  //   const wrapper = shallow(NewTodo, {
  //     propsData: { newTodo: "test string" }

 tests/unit/XofYItems.specs.js

 tests/unit/__snapshots__/AboutLabs.spec.js.snap

New file
@@ -0,0 +1,67 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`AboutLabs.vue has the expected html structure 1`] = `
<div>
  <h3>
    Learn more about Open Innovation Labs
  </h3>
   
  <ul>
    <li>
      <a
        href="https://www.redhat.com/en/engage/open-innovation-labs-20170905?sc_cid=701f2000000tvPOAAY"
        target="_blank"
      >
        Labs Homepage
      </a>
    </li>
    <li>
      <a
        href="https://www.redhat.com/en/services/consulting/open-innovation-labs/locations"
        target="_blank"
      >
        Lab Locations
      </a>
    </li>
    <li>
      <a
        href="https://www.redhat.com/en/explore/my-open-innovation-lab-stack"
        target="_blank"
      >
        Labs Tech
      </a>
    </li>
    <li>
      <a
        href="https://developers.redhat.com/blog/2018/01/26/part-1-inside-open-innovation-labs-residency/"
        target="_blank"
      >
        Inside a Residency Blog
      </a>
    </li>
  </ul>
   
  <h3>
    Connect with us
  </h3>
   
  <ul>
    <li>
      <a
        href="https://www.youtube.com/watch?v=RxOKoqpDuIA"
        target="_blank"
      >
        YouTube
      </a>
    </li>
    <li>
      <a
        href="https://twitter.com/redhatlabs?lang=en"
        target="_blank"
      >
        Twitter
      </a>
    </li>
  </ul>
</div>
`;

 tests/unit/__snapshots__/Header.spec.js.snap

New file
@@ -0,0 +1,33 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Header.vue has the expected html structure 1`] = `
<div
  class="todo-header"
>
  <div
    class="overlay"
  />
   
  <time
    class="clearfix"
  >
    <span
      class="day"
    >
      10
    </span>
     
    <span
      class="dayofweek"
    >
      Tuesday
    </span>
     
    <span
      class="dayofweek"
    >
      April, 2018
    </span>
  </time>
</div>
`;

 tests/unit/__snapshots__/ListOfTodos.spec.js.snap

New file
@@ -0,0 +1,9 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`ListOfTodos.vue has the expected html structure 1`] = `
<div>
  <ul
    class="md-list md-theme-default"
  />
</div>
`;