Adding snapshot tests for components

Author: edimossilva

volume/blog-frontend/tests/unit/components/__snapshots__/App.spec.js.snap

@@ -2,13 +2,16 @@
 
 exports[`App is a valid component 1`] = `
 <div>
+  <div>
+    <p>not registred</p> <button>Login</button>
+  </div>
   <nav>
     <ul>
-      <li><a href="#/login" class="router-link">Login</a></li>
       <li><a href="#/blogs" class="router-link">List Blogs</a></li>
       <li><a href="#/blogs/new" class="router-link">Create Blog</a></li>
     </ul>
   </nav>
   <!---->
+  <modal name="modal" width="300" height="300"><b></b></modal>
 </div>
 `;

volume/blog-frontend/tests/unit/components/blog/create-blog/CreateBlog.spec.js

@@ -6,5 +6,7 @@ describe('CreateBlog.vue', () => {
     const wrapper = shallowMount(CreateBlog)
 
     expect(wrapper.isVueInstance()).toBeTruthy()
+    expect(wrapper).toMatchSnapshot()
+
   })
 })

volume/blog-frontend/tests/unit/components/blog/create-blog/__snapshots__/CreateBlog.spec.js.snap

@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CreateBlog.vue is a valid component 1`] = `
+<div>
+  <p>Create Blog</p>
+  <div><label> Name: </label> <input type="text"></div>
+  <div><label> Visibility: </label> <select>
+      <option selected="selected" value="false">public</option>
+      <option value="true">private</option>
+    </select></div> <button>Create</button>
+</div>
+`;

volume/blog-frontend/tests/unit/components/blog/list-blog/__snapshots__/ListBlog.spec.js.snap

@@ -9,22 +9,23 @@ exports[`ListBlog.vue render blogs 1`] = `
         <th>id</th>
         <th>name</th>
         <th>private</th>
-        <th>show</th>
-        <th>Delete</th>
+        <th>owner</th>
       </tr>
     </thead>
     <tbody>
       <tr>
         <td>1</td>
         <td>mockName1</td>
         <td>true</td>
+        <td></td>
         <td><button class="ListBlog__showBlog-button-js">Show</button></td>
         <td><button class="ListBlog__deleteBlog-button-js">Delete</button></td>
       </tr>
       <tr>
         <td>2</td>
         <td>mockName2</td>
         <td>false</td>
+        <td></td>
         <td><button class="ListBlog__showBlog-button-js">Show</button></td>
         <td><button class="ListBlog__deleteBlog-button-js">Delete</button></td>
       </tr>

volume/blog-frontend/tests/unit/components/blog/show-blog/ShowBlog.spec.js

@@ -0,0 +1,25 @@
+import { shallowMount } from '@vue/test-utils'
+import ShowBlog from '@/components/blog/show-blog/ShowBlog'
+
+describe('ShowBlog.vue', () => {
+  it('is a valid component', () => {
+    const mockBlog = {
+      name: "mockName",
+      title: "mockTitle",
+      private: "mockPrivate",
+
+      posts: [
+        { id: 1, owner: "mockOwner", title: "mockTitle1", is_private: true },
+        { id: 2, owner: "mockOwner", title: "mockTitle2", is_private: false },
+      ]
+    }
+    const wrapper = shallowMount(ShowBlog, {
+      methods: { getBlog: jest.fn() },
+      propsData: { id: 1 },
+      data() { return { blog: mockBlog } }
+    });
+
+    expect(wrapper.isVueInstance()).toBeTruthy()
+    expect(wrapper).toMatchSnapshot()
+  })
+})

volume/blog-frontend/tests/unit/components/blog/show-blog/__snapshots__/ShowBlog.spec.js.snap

@@ -0,0 +1,37 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ShowBlog.vue is a valid component 1`] = `
+<div>
+  <div>
+    <h3> Blog Name: mockName </h3>
+  </div>
+  <table>
+    <thead>
+      <tr>
+        <th>id</th>
+        <th>title</th>
+        <th>owner</th>
+        <th>private</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>1</td>
+        <td>mockTitle1</td>
+        <td>mockOwner</td>
+        <td>true</td>
+        <td><button>Show post</button></td>
+        <td><button>Delete post</button></td>
+      </tr>
+      <tr>
+        <td>2</td>
+        <td>mockTitle2</td>
+        <td>mockOwner</td>
+        <td>false</td>
+        <td><button>Show post</button></td>
+        <td><button>Delete post</button></td>
+      </tr>
+    </tbody>
+  </table> <button>Create Post</button>
+</div>
+`;

volume/blog-frontend/tests/unit/components/login/Login.spec.js

@@ -18,7 +18,11 @@ describe('Login.vue', () => {
   const mockToken = "mockToken"
 
   it('is a valid component', () => {
-    const wrapper = mount(Login)
+    const wrapper = mount(Login, {
+      stubs: {
+        modal: true
+      }
+    })
 
     expect(wrapper.isVueInstance()).toBeTruthy()
     expect(wrapper).toMatchSnapshot()
@@ -29,7 +33,11 @@ describe('Login.vue', () => {
       const doLoginSpy = jest.fn()
       Login.methods.doLogin = doLoginSpy
 
-      const wrapper = mount(Login)
+      const wrapper = mount(Login, {
+        stubs: {
+          modal: true
+        }
+      })
 
       beforeEach(() => {
         // fill username 
@@ -60,24 +68,22 @@ describe('Login.vue', () => {
       const wrapper = mount(Login, {
         localVue,
         router,
-        store
+        store,
+        stubs: {
+          modal: true
+        }
       })
 
+      const user = { token: "token", username: "username", userId: "userId", accessLevel: "accessLevel" }
       beforeEach(() => {
         const response = {
-          data: {
-            token: mockToken,
-            username: mockUsername
-          }
+          data: user
         }
         wrapper.vm.onLoginSuccess(response)
       });
 
       it('should save username in store', () => {
-        expect(store.state.username).toEqual(mockUsername)
-      })
-      it('should save token in store', () => {
-        expect(store.state.authToken).toEqual(mockToken)
+        expect(store.state.user).toEqual(user)
       })
     })
   })

volume/blog-frontend/tests/unit/components/login/create-login/CreateLogin.spec.js

@@ -0,0 +1,10 @@
+import { shallowMount } from '@vue/test-utils'
+import CreateBlog from '@/components/blog/create-blog/CreateBlog'
+
+describe('CreateBlog.vue', () => {
+  it('is a valid component', () => {
+    const wrapper = shallowMount(CreateBlog)
+
+    expect(wrapper.isVueInstance()).toBeTruthy()
+  })
+})

volume/blog-frontend/tests/unit/components/post/create-post/CreatePost.spec.js

@@ -0,0 +1,13 @@
+import { shallowMount } from '@vue/test-utils'
+import CreatePost from '@/components/post/create-post/CreatePost'
+
+describe('CreatePost.vue', () => {
+  it('is a valid component', () => {
+    const wrapper = shallowMount(CreatePost, {
+      propsData: { blogId: 1 },
+    });
+
+    expect(wrapper.isVueInstance()).toBeTruthy()
+    expect(wrapper).toMatchSnapshot()
+  })
+})

volume/blog-frontend/tests/unit/components/post/create-post/__snapshots__/CreatePost.spec.js.snap

@@ -0,0 +1,8 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CreatePost.vue is a valid component 1`] = `
+<div>
+  <p>Create Post</p>
+  <div><label> title: </label> <input type="text"></div> <button>Create</button>
+</div>
+`;