From 0efcbbf31a8d05a6b327b73964bb74e9c7cb5c14 Mon Sep 17 00:00:00 2001
From: Diana Carrillo <dianacarrillo.psic@outlook.com>
Date: Wed, 16 Jan 2019 17:50:43 -0600
Subject: [PATCH 1/5] =?UTF-8?q?1=20test=20m=C3=A1s.=20incomplete=3F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/actions.js                                |  58 ++--
 src/components/CompanyBranch.vue              |   7 +-
 src/components/GxBranches.vue                 |   8 +-
 src/components/GxCompanies.vue                |   7 +-
 src/components/GxCompany.vue                  |   9 +-
 src/components/SelectBranch.vue               |   2 +-
 src/components/__tests__/SelectBranch.spec.js | 250 +++++++++++-------
 src/store.js                                  |  13 +-
 8 files changed, 212 insertions(+), 142 deletions(-)

diff --git a/src/actions.js b/src/actions.js
index b6e42bb..28fc07e 100644
--- a/src/actions.js
+++ b/src/actions.js
@@ -3,38 +3,38 @@ axios.defaults.headers["Cache-Control"] = "no-cache";
 axios.defaults.baseURL = "https://api-test.gestionix.com/api/v3";
 
 export default {
-    async login(context) {
-        const { data } = await axios({
-            method: "post",
-            url: "/users/authentication",
-            data: {
-                user: "qa@gestionix.com",
-                password: "gestionix"
-            }
-        });
+  async login(context) {
+    const { data } = await axios({
+      method: "post",
+      url: "/users/authentication",
+      data: {
+        user: "qa@gestionix.com",
+        password: "gestionix"
+      }
+    });
 
-        const { access_token, user_id } = data;
+    const { access_token, user_id } = data;
 
-        axios.defaults.headers.common["Authorization"] = `Bearer ${access_token}`;
+    axios.defaults.headers.common["Authorization"] = `Bearer ${access_token}`;
 
-        return true;
-    },
-    async getCompanies({ commit, state }) {
-        console.log("Dispatching action");
+    return true;
+  },
+  async getCompanies({ commit }) {
+    // console.log("Dispatching action");
 
-        const { data } = await axios.get("/users/companies");
+    const { data } = await axios.get("/users/companies");
 
-        commit("setCompanies", data);
+    commit("setCompanies", data);
 
-        return true;
-    },
-    async getBranches({ commit, state }, companyId) {
-        commit('selectCompany', companyId);
-        const { data } = await axios.get("/branch_offices", {
-            headers: {
-                Company: companyId
-            }
-        });
-        commit("setBranches", data);
-    }
-}
\ No newline at end of file
+    return true;
+  },
+  async getBranches({ commit }, companyId) {
+    commit("selectCompany", companyId);
+    const { data } = await axios.get("/branch_offices", {
+      headers: {
+        Company: companyId
+      }
+    });
+    commit("setBranches", data);
+  }
+};
diff --git a/src/components/CompanyBranch.vue b/src/components/CompanyBranch.vue
index 21b2760..258505a 100644
--- a/src/components/CompanyBranch.vue
+++ b/src/components/CompanyBranch.vue
@@ -2,15 +2,15 @@
   <div class="item office">
     <button
       class="select-item"
-      :class="{'active': isActive}"
+      :class="{ active: isActive }"
       :disabled="!branch.active"
       @click="selectBranch"
     >
       <div class="info">
         <p>
-          <strong>{{branch.name}}</strong>
+          <strong>{{ branch.name }}</strong>
           <span v-if="branch.active" class="on"></span>
-          <span>{{branch.description}}</span>
+          <span>{{ branch.description }}</span>
         </p>
       </div>
     </button>
@@ -42,4 +42,3 @@ export default {
   }
 };
 </script>
-
diff --git a/src/components/GxBranches.vue b/src/components/GxBranches.vue
index 31006c7..88488a6 100644
--- a/src/components/GxBranches.vue
+++ b/src/components/GxBranches.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="column branches is-half" :class="{'is-hidden': isHidden}">
-    <CompanyShops v-if="shops.length > 0" :branches="shops"/>
-    <CompanyWarehouses v-if="warehouses.length > 0" :branches="warehouses"/>
-    <CompanyOffices v-if="offices.length > 0" :branches="offices"/>
+  <div class="column branches is-half" :class="{ 'is-hidden': isHidden }">
+    <CompanyShops v-if="shops.length > 0" :branches="shops" />
+    <CompanyWarehouses v-if="warehouses.length > 0" :branches="warehouses" />
+    <CompanyOffices v-if="offices.length > 0" :branches="offices" />
   </div>
 </template>
 <script>
diff --git a/src/components/GxCompanies.vue b/src/components/GxCompanies.vue
index cddb5fc..274133f 100644
--- a/src/components/GxCompanies.vue
+++ b/src/components/GxCompanies.vue
@@ -5,7 +5,12 @@
       <h4>Empresas</h4>
     </div>
     <div v-if="loading">Loading...</div>
-    <GxCompany v-else v-for="company in companies" :company="company" :key="company.company_id"/>
+    <GxCompany
+      v-else
+      v-for="company in companies"
+      :company="company"
+      :key="company.company_id"
+    />
   </div>
 </template>
 <script>
diff --git a/src/components/GxCompany.vue b/src/components/GxCompany.vue
index f93ea27..c344802 100644
--- a/src/components/GxCompany.vue
+++ b/src/components/GxCompany.vue
@@ -3,14 +3,15 @@
     <button
       :data-testid="`${company.emitter.commercial_name}_button`"
       class="select-item"
-      :class="{'active': isActive}"
+      :class="{ active: isActive }"
       @click="getBranches()"
     >
       <div class="info">
         <p>
-          <strong>{{ companyDisplayName }}</strong>
-          <span class="on"></span>
-          <span v-if="company.emitter.tax_id">RFC: {{ company.emitter.tax_id }}</span>
+          <strong>{{ companyDisplayName }}</strong> <span class="on"></span>
+          <span v-if="company.emitter.tax_id"
+            >RFC: {{ company.emitter.tax_id }}</span
+          >
           <button @click="showButton = !showButton">Show button</button>
           <button v-if="isActive && showButton">Botón</button>
         </p>
diff --git a/src/components/SelectBranch.vue b/src/components/SelectBranch.vue
index 22c2fbe..0d0214a 100644
--- a/src/components/SelectBranch.vue
+++ b/src/components/SelectBranch.vue
@@ -6,7 +6,7 @@
     </div>
     <div class="columns">
       <GxCompanies/>
-      <!-- <GxBranches /> -->
+      <GxBranches />
     </div>
   </div>
 </template>
diff --git a/src/components/__tests__/SelectBranch.spec.js b/src/components/__tests__/SelectBranch.spec.js
index f14f687..f404950 100644
--- a/src/components/__tests__/SelectBranch.spec.js
+++ b/src/components/__tests__/SelectBranch.spec.js
@@ -1,100 +1,166 @@
 /* eslint-disable no-undef */
 import { createLocalVue, mount } from "@vue/test-utils";
-import Vue from "vue";
+// import Vue from "vue";
 import Vuex from "vuex";
-import { getQueriesForElement, prettyDOM, fireEvent } from "dom-testing-library";
-import SelectBranch from '../SelectBranch.vue';
-import axios from 'axios';
-import store from '../../store';
-const flushPromises = require('flush-promises');
+import {
+  getQueriesForElement,
+  prettyDOM,
+  fireEvent
+} from "dom-testing-library";
+import SelectBranch from "../SelectBranch.vue";
+import GxBranches from "../GxBranches.vue";
+import axios from "axios";
+import store from "../../store";
+// import { promised } from "q";
+const flushPromises = require("flush-promises");
 
-jest.mock('axios');
+jest.mock("axios");
 
-let localVue
+let localVue;
 function render(component, options) {
-    localVue = createLocalVue();
-    localVue.use(Vuex);
-    const wrapper = mount(component, {
-        localVue,
-        attachToDocument: true,
-        ...options
-    });
-
-    return {
-        wrapper,
-        ...getQueriesForElement(wrapper.element),
-        debug: () => console.log(prettyDOM(wrapper.element))
-    };
+  localVue = createLocalVue();
+  localVue.use(Vuex);
+  const wrapper = mount(component, {
+    localVue,
+    attachToDocument: true,
+    ...options
+  });
+
+  return {
+    wrapper,
+    ...getQueriesForElement(wrapper.element),
+    debug: () => console.log(prettyDOM(wrapper.element))
+  };
 }
 
-describe('SelectBranch.vue', () => {
-    it('renders companies', async (done) => {
-        const companyName = 'Una compañía'
-        axios.get.mockImplementation(() => Promise.resolve({
-            data: [
-                {
-                    "company_id": 1104,
-                    "emitter": {
-                        "tax_id": "VAVV820109B47",
-                        "business_name": companyName,
-                        "commercial_name": companyName,
-                    },
-                }
-            ]
-        }));
-
-        const { getByText } = render(SelectBranch, { store });
-
-        await flushPromises();
-
-        expect(getByText(companyName)).toBeTruthy();
-        done();
-    })
-    it('highlihgts the selected company', async (done) => {
-        const companyName = 'Una compañía'
-        axios.get.mockImplementation(() => Promise.resolve({
-            data: [
-                {
-                    "company_id": 1104,
-                    "emitter": {
-                        "tax_id": "VAVV820109B47",
-                        "business_name": companyName,
-                        "commercial_name": companyName,
-                    },
-                }
-            ]
-        }));
-        const { getByTestId } = render(SelectBranch, { store });
-
-        await flushPromises();
-
-        axios.get.mockImplementation(() => Promise.resolve({
-            data: [
-                {
-                    "branch_id": 1104,
-                    "emitter": {
-                        "tax_id": "VAVV820109B47",
-                        "business_name": companyName,
-                        "commercial_name": companyName,
-                    },
-                }
-            ]
-        }));
-
-        const buttonTestId = `${companyName}_button`;
-        const button = getByTestId(buttonTestId);
-        fireEvent.click(button);
-
-        await flushPromises();
-
-        expect(button.classList.contains('active')).toBe(true);
-
-        done();
-    })
-    it('it renders branches when a company is selected', () => {
-
-    })
-    it('highlihgts the selected branch', () => {
-
-    })
-});
\ No newline at end of file
+describe("SelectBranch.vue", () => {
+  it("renders companies", async done => {
+    const companyName = "Una compañía";
+    axios.get.mockImplementation(() =>
+      Promise.resolve({
+        data: [
+          {
+            company_id: 1104,
+            emitter: {
+              tax_id: "VAVV820109B47",
+              business_name: companyName,
+              commercial_name: companyName
+            }
+          }
+        ]
+      })
+    );
+
+    const { getByText } = render(SelectBranch, { store });
+
+    await flushPromises();
+
+    expect(getByText(companyName)).toBeTruthy();
+    done();
+  });
+  it("highlights the selected company", async done => {
+    const companyName = "Una compañía";
+    axios.get.mockImplementation(() =>
+      Promise.resolve({
+        data: [
+          {
+            company_id: 1104,
+            emitter: {
+              tax_id: "VAVV820109B47",
+              business_name: companyName,
+              commercial_name: companyName
+            }
+          }
+        ]
+      })
+    );
+    const { getByTestId } = render(SelectBranch, { store });
+
+    await flushPromises();
+
+    axios.get.mockImplementation(() =>
+      Promise.resolve({
+        data: [
+          {
+            company_id: 1104,
+            emitter: {
+              tax_id: "VAVV820109B47",
+              business_name: companyName,
+              commercial_name: companyName
+            }
+          }
+        ]
+      })
+    );
+
+    const buttonTestId = `${companyName}_button`;
+    const button = getByTestId(buttonTestId);
+    fireEvent.click(button);
+
+    await flushPromises();
+
+    expect(button.classList.contains("active")).toBe(true);
+
+    done();
+  });
+  it("it renders branches when a company is selected", async done => {
+    const companyName = "Una compañía";
+    axios.get.mockImplementation(() =>
+      Promise.resolve({
+        data: [
+          {
+            company_id: 1104,
+            emitter: {
+              tax_id: "VAVV820109B47",
+              business_name: companyName,
+              commercial_name: companyName
+            }
+          }
+        ]
+      })
+    );
+    const { getByTestId } = render(SelectBranch, { store });
+
+    await flushPromises();
+
+    axios.get.mockImplementation(() =>
+      Promise.resolve({
+        data: [
+          {
+            branch_id: 1104,
+            emitter: {
+              tax_id: "VAVV820109B47",
+              business_name: companyName,
+              commercial_name: companyName
+            }
+          }
+        ]
+      })
+    );
+
+    const buttonTestId = `${companyName}_button`;
+    const button = getByTestId(buttonTestId);
+
+    fireEvent.click(button);
+    // await flushPromises();
+    const wrapper = mount(GxBranches, { store });
+    expect(wrapper.find(GxBranches).exists()).toBe(true);
+    // const branchName = "Pedido-venta";
+    // axios.get.mockImplementation(() => {
+    //   Promise.resolve({
+    //     data: [
+    //       {
+    //         branch_id: 1104,
+    //         description: "https://gestionixpm.atlassian.net/browse/GXDEV-8210",
+    //         name: branchName
+    //       }
+    //     ]
+    //   });
+    // });
+    // const { getByText } = render(GxBranches, { store });
+    // await flushPromises();
+
+    // expect(getByText(branchName)).toBeTruthy();
+    done();
+  });
+});
diff --git a/src/store.js b/src/store.js
index d7928b8..088d880 100644
--- a/src/store.js
+++ b/src/store.js
@@ -1,6 +1,6 @@
 import Vue from "vue";
 import Vuex from "vuex";
-import actions from './actions';
+import actions from "./actions";
 
 Vue.use(Vuex);
 
@@ -13,21 +13,20 @@ export default new Vuex.Store({
   },
   mutations: {
     setCompanies(state, companies) {
-      console.log('Setting companies');
-      console.log(companies);
-
+      // console.log(companies);
 
       state.companies = companies;
     },
     setBranches(state, branches) {
+      // console.log(branches);
       state.branches = branches;
     },
     selectBranch(state, branchId) {
-      state.selectedBranchId = branchId
+      state.selectedBranchId = branchId;
     },
     selectCompany(state, companyId) {
-      state.selectedCompanyId = companyId
-    },
+      state.selectedCompanyId = companyId;
+    }
   },
   actions
 });

From ebe9ed8ebdc1669072374306d283db139ca6b4bb Mon Sep 17 00:00:00 2001
From: Diana Carrillo <dianacarrillo.psic@outlook.com>
Date: Thu, 17 Jan 2019 15:55:30 -0600
Subject: [PATCH 2/5] updating tests

---
 src/actions.js                                |   4 +-
 src/components/CompanyBranch.vue              |   1 +
 src/components/CompanyOffices.vue             |   6 +-
 src/components/CompanyShops.vue               |   8 +-
 src/components/CompanyWarehouses.vue          |   8 +-
 src/components/GxBranches.vue                 |   2 +-
 src/components/SelectBranch.vue               |   6 +-
 src/components/__tests__/SelectBranch.spec.js | 147 +++++++++++++++---
 src/mutations.js                              |  16 ++
 src/store.js                                  |  19 +--
 10 files changed, 164 insertions(+), 53 deletions(-)
 create mode 100644 src/mutations.js

diff --git a/src/actions.js b/src/actions.js
index 28fc07e..0d8a6fd 100644
--- a/src/actions.js
+++ b/src/actions.js
@@ -3,7 +3,7 @@ axios.defaults.headers["Cache-Control"] = "no-cache";
 axios.defaults.baseURL = "https://api-test.gestionix.com/api/v3";
 
 export default {
-  async login(context) {
+  async login() {
     const { data } = await axios({
       method: "post",
       url: "/users/authentication",
@@ -13,7 +13,7 @@ export default {
       }
     });
 
-    const { access_token, user_id } = data;
+    const { access_token } = data;
 
     axios.defaults.headers.common["Authorization"] = `Bearer ${access_token}`;
 
diff --git a/src/components/CompanyBranch.vue b/src/components/CompanyBranch.vue
index 258505a..68db944 100644
--- a/src/components/CompanyBranch.vue
+++ b/src/components/CompanyBranch.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="item office">
     <button
+      :data-testid="`${branch.branch_id}_button`"
       class="select-item"
       :class="{ active: isActive }"
       :disabled="!branch.active"
diff --git a/src/components/CompanyOffices.vue b/src/components/CompanyOffices.vue
index 5993275..a26324f 100644
--- a/src/components/CompanyOffices.vue
+++ b/src/components/CompanyOffices.vue
@@ -4,7 +4,11 @@
       <div class="icon offices"></div>
       <h4>Oficinas</h4>
     </div>
-    <CompanyBranch v-for="branch in branches" :key="branch.branch_id" :branch="branch"/>
+    <CompanyBranch
+      v-for="branch in branches"
+      :key="branch.branch_id"
+      :branch="branch"
+    />
   </div>
 </template>
 <script>
diff --git a/src/components/CompanyShops.vue b/src/components/CompanyShops.vue
index ac01daa..d986ec9 100644
--- a/src/components/CompanyShops.vue
+++ b/src/components/CompanyShops.vue
@@ -4,8 +4,12 @@
       <div class="icon stores"></div>
       <h4>Tiendas</h4>
     </div>
-    <CompanyBranch v-for="branch in branches" :key="branch.branch_id" :branch="branch"/>
-    <hr>
+    <CompanyBranch
+      v-for="branch in branches"
+      :key="branch.branch_id"
+      :branch="branch"
+    />
+    <hr />
   </div>
 </template>
 <script>
diff --git a/src/components/CompanyWarehouses.vue b/src/components/CompanyWarehouses.vue
index 673818e..3b77038 100644
--- a/src/components/CompanyWarehouses.vue
+++ b/src/components/CompanyWarehouses.vue
@@ -4,8 +4,12 @@
       <div class="icon warehouses"></div>
       <h4>Almacenes</h4>
     </div>
-    <CompanyBranch v-for="branch in branches" :key="branch.branch_id" :branch="branch"/>
-    <hr>
+    <CompanyBranch
+      v-for="branch in branches"
+      :key="branch.branch_id"
+      :branch="branch"
+    />
+    <hr />
   </div>
 </template>
 <script>
diff --git a/src/components/GxBranches.vue b/src/components/GxBranches.vue
index 88488a6..951b56a 100644
--- a/src/components/GxBranches.vue
+++ b/src/components/GxBranches.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="column branches is-half" :class="{ 'is-hidden': isHidden }">
+  <div class="column branches is-half">
     <CompanyShops v-if="shops.length > 0" :branches="shops" />
     <CompanyWarehouses v-if="warehouses.length > 0" :branches="warehouses" />
     <CompanyOffices v-if="offices.length > 0" :branches="offices" />
diff --git a/src/components/SelectBranch.vue b/src/components/SelectBranch.vue
index 0d0214a..0fef6c7 100644
--- a/src/components/SelectBranch.vue
+++ b/src/components/SelectBranch.vue
@@ -1,11 +1,9 @@
 <template>
   <!-- selecciona sucursal -->
   <div class="select-branch">
-    <div class="outer-20-b">
-      <a href="#">&lt; Regresar</a>
-    </div>
+    <div class="outer-20-b"><a href="#">&lt; Regresar</a></div>
     <div class="columns">
-      <GxCompanies/>
+      <GxCompanies />
       <GxBranches />
     </div>
   </div>
diff --git a/src/components/__tests__/SelectBranch.spec.js b/src/components/__tests__/SelectBranch.spec.js
index f404950..add5cdc 100644
--- a/src/components/__tests__/SelectBranch.spec.js
+++ b/src/components/__tests__/SelectBranch.spec.js
@@ -11,6 +11,7 @@ import SelectBranch from "../SelectBranch.vue";
 import GxBranches from "../GxBranches.vue";
 import axios from "axios";
 import store from "../../store";
+import { mutations } from "../../mutations";
 // import { promised } from "q";
 const flushPromises = require("flush-promises");
 
@@ -103,7 +104,7 @@ describe("SelectBranch.vue", () => {
 
     done();
   });
-  it("it renders branches when a company is selected", async done => {
+  it("Has GxBranches as a child", async done => {
     const companyName = "Una compañía";
     axios.get.mockImplementation(() =>
       Promise.resolve({
@@ -123,16 +124,15 @@ describe("SelectBranch.vue", () => {
 
     await flushPromises();
 
+    const branchId = 1104;
     axios.get.mockImplementation(() =>
       Promise.resolve({
         data: [
           {
-            branch_id: 1104,
-            emitter: {
-              tax_id: "VAVV820109B47",
-              business_name: companyName,
-              commercial_name: companyName
-            }
+            branch_id: branchId,
+            description: "branch",
+            name: "name branches",
+            type: "Shop"
           }
         ]
       })
@@ -142,25 +142,124 @@ describe("SelectBranch.vue", () => {
     const button = getByTestId(buttonTestId);
 
     fireEvent.click(button);
-    // await flushPromises();
     const wrapper = mount(GxBranches, { store });
     expect(wrapper.find(GxBranches).exists()).toBe(true);
-    // const branchName = "Pedido-venta";
-    // axios.get.mockImplementation(() => {
-    //   Promise.resolve({
-    //     data: [
-    //       {
-    //         branch_id: 1104,
-    //         description: "https://gestionixpm.atlassian.net/browse/GXDEV-8210",
-    //         name: branchName
-    //       }
-    //     ]
-    //   });
-    // });
-    // const { getByText } = render(GxBranches, { store });
-    // await flushPromises();
-
-    // expect(getByText(branchName)).toBeTruthy();
     done();
   });
+  it("Renders branches when a company is selected ", async done => {
+    const companyName = "Una compañía";
+    axios.get.mockImplementation(() =>
+      Promise.resolve({
+        data: [
+          {
+            company_id: 1104,
+            emitter: {
+              tax_id: "VAVV820109B47",
+              business_name: companyName,
+              commercial_name: companyName
+            }
+          }
+        ]
+      })
+    );
+    const { getByTestId } = render(SelectBranch, { store });
+    await flushPromises();
+
+    const branchId = 1104;
+    axios.get.mockImplementation(() =>
+      Promise.resolve({
+        data: [
+          {
+            branch_id: branchId,
+            description: "branch",
+            name: "name branches",
+            type: "Shop"
+          }
+        ]
+      })
+    );
+    const buttonTestIdCompany = `${companyName}_button`;
+    const button = getByTestId(buttonTestIdCompany);
+    fireEvent.click(button);
+    await flushPromises();
+    const branches = [
+      {
+        branch_id: branchId,
+        description: "branch",
+        name: "name branches",
+        type: "Shop"
+      }
+    ];
+    expect(store.state.branches).toEqual(branches);
+    expect(store.state.selectedBranchId).toBe(null);
+
+    done();
+  });
+  it("Highlights the correct branch", async done => {
+    const companyName = "Una compañía";
+    axios.get.mockImplementation(() =>
+      Promise.resolve({
+        data: [
+          {
+            company_id: 1104,
+            emitter: {
+              tax_id: "VAVV820109B47",
+              business_name: companyName,
+              commercial_name: companyName
+            }
+          }
+        ]
+      })
+    );
+    const { getByTestId } = render(SelectBranch, { store });
+
+    await flushPromises();
+
+    const branchId = 1104;
+    axios.get.mockImplementation(() =>
+      Promise.resolve({
+        data: [
+          {
+            branch_id: branchId,
+            description: "branch",
+            name: "name branches",
+            type: "Shop"
+          }
+        ]
+      })
+    );
+    const buttonTestIdCompany = `${companyName}_button`;
+    const buttonCompany = getByTestId(buttonTestIdCompany);
+    fireEvent.click(buttonCompany);
+
+    await flushPromises();
+    const buttonTestIdBranches = `${branchId}_button`;
+    console.log(buttonTestIdBranches);
+    const buttonBranch = getByTestId(buttonTestIdBranches);
+    fireEvent.click(buttonBranch);
+
+    await flushPromises();
+    expect(store.state.selectedBranchId).toEqual(branchId);
+    expect(buttonBranch.classList.contains("active")).toBe(true);
+    done();
+  });
+
+  it("mutates the company state", () => {
+    const companyName = "Una compañía";
+    const companies = [
+      {
+        company_id: 1104,
+        emitter: {
+          tax_id: "VAVV820109B47",
+          business_name: companyName,
+          commercial_name: companyName
+        }
+      }
+    ];
+    const state = {
+      companies: []
+    };
+    mutations.setCompanies(state, companies);
+    expect(state.companies).toEqual(companies);
+  });
 });
diff --git a/src/mutations.js b/src/mutations.js
new file mode 100644
index 0000000..8c159af
--- /dev/null
+++ b/src/mutations.js
@@ -0,0 +1,16 @@
+export const mutations = {
+  setCompanies(state, companies) {
+    // console.log(companies);
+    state.companies = companies;
+  },
+  setBranches(state, branches) {
+    console.log(branches);
+    state.branches = branches;
+  },
+  selectBranch(state, branchId) {
+    state.selectedBranchId = branchId;
+  },
+  selectCompany(state, companyId) {
+    state.selectedCompanyId = companyId;
+  }
+};
diff --git a/src/store.js b/src/store.js
index 088d880..8731b3e 100644
--- a/src/store.js
+++ b/src/store.js
@@ -1,6 +1,7 @@
 import Vue from "vue";
 import Vuex from "vuex";
 import actions from "./actions";
+import { mutations } from "./mutations";
 
 Vue.use(Vuex);
 
@@ -11,22 +12,6 @@ export default new Vuex.Store({
     selectedCompanyId: null,
     selectedBranchId: null
   },
-  mutations: {
-    setCompanies(state, companies) {
-      // console.log(companies);
-
-      state.companies = companies;
-    },
-    setBranches(state, branches) {
-      // console.log(branches);
-      state.branches = branches;
-    },
-    selectBranch(state, branchId) {
-      state.selectedBranchId = branchId;
-    },
-    selectCompany(state, companyId) {
-      state.selectedCompanyId = companyId;
-    }
-  },
+  mutations,
   actions
 });

From 569a42cac846b2177d7728e8f3ed54d4238443af Mon Sep 17 00:00:00 2001
From: Diana Carrillo <dianacarrillo.psic@outlook.com>
Date: Thu, 17 Jan 2019 16:58:35 -0600
Subject: [PATCH 3/5] updating tests

---
 src/components/__tests__/SelectBranch.spec.js | 379 +++++++++---------
 1 file changed, 196 insertions(+), 183 deletions(-)

diff --git a/src/components/__tests__/SelectBranch.spec.js b/src/components/__tests__/SelectBranch.spec.js
index add5cdc..82e90c8 100644
--- a/src/components/__tests__/SelectBranch.spec.js
+++ b/src/components/__tests__/SelectBranch.spec.js
@@ -1,6 +1,5 @@
 /* eslint-disable no-undef */
 import { createLocalVue, mount } from "@vue/test-utils";
-// import Vue from "vue";
 import Vuex from "vuex";
 import {
   getQueriesForElement,
@@ -12,7 +11,6 @@ import GxBranches from "../GxBranches.vue";
 import axios from "axios";
 import store from "../../store";
 import { mutations } from "../../mutations";
-// import { promised } from "q";
 const flushPromises = require("flush-promises");
 
 jest.mock("axios");
@@ -59,207 +57,222 @@ describe("SelectBranch.vue", () => {
     expect(getByText(companyName)).toBeTruthy();
     done();
   });
-  it("highlights the selected company", async done => {
+  it("mutates the companies' state", () => {
     const companyName = "Una compañía";
-    axios.get.mockImplementation(() =>
-      Promise.resolve({
-        data: [
-          {
-            company_id: 1104,
-            emitter: {
-              tax_id: "VAVV820109B47",
-              business_name: companyName,
-              commercial_name: companyName
-            }
+    const companies = [
+      {
+        company_id: 1104,
+        emitter: {
+          tax_id: "VAVV820109B47",
+          business_name: companyName,
+          commercial_name: companyName
+        }
+      }
+    ];
+    const state = {
+      companies: []
+    };
+    mutations.setCompanies(state, companies);
+    expect(state.companies).toEqual(companies);
+  });
+  it("mutates branches' state", () => {
+    const branchId = 1104;
+    const branches = [
+      {
+        branch_id: branchId,
+        description: "branch",
+        name: "name branches",
+        type: "Shop"
+      }
+    ];
+    const state = {
+      branches: []
+    };
+    mutations.setBranches(state, branches);
+    expect(state.branches).toEqual(branches);
+  });
+});
+it("highlights the selected company", async done => {
+  const companyName = "Una compañía";
+  axios.get.mockImplementation(() =>
+    Promise.resolve({
+      data: [
+        {
+          company_id: 1104,
+          emitter: {
+            tax_id: "VAVV820109B47",
+            business_name: companyName,
+            commercial_name: companyName
           }
-        ]
-      })
-    );
-    const { getByTestId } = render(SelectBranch, { store });
+        }
+      ]
+    })
+  );
+  const { getByTestId } = render(SelectBranch, { store });
 
-    await flushPromises();
+  await flushPromises();
 
-    axios.get.mockImplementation(() =>
-      Promise.resolve({
-        data: [
-          {
-            company_id: 1104,
-            emitter: {
-              tax_id: "VAVV820109B47",
-              business_name: companyName,
-              commercial_name: companyName
-            }
+  axios.get.mockImplementation(() =>
+    Promise.resolve({
+      data: [
+        {
+          company_id: 1104,
+          emitter: {
+            tax_id: "VAVV820109B47",
+            business_name: companyName,
+            commercial_name: companyName
           }
-        ]
-      })
-    );
+        }
+      ]
+    })
+  );
 
-    const buttonTestId = `${companyName}_button`;
-    const button = getByTestId(buttonTestId);
-    fireEvent.click(button);
+  const buttonTestId = `${companyName}_button`;
+  const button = getByTestId(buttonTestId);
+  fireEvent.click(button);
 
-    await flushPromises();
+  await flushPromises();
 
-    expect(button.classList.contains("active")).toBe(true);
+  expect(button.classList.contains("active")).toBe(true);
 
-    done();
-  });
-  it("Has GxBranches as a child", async done => {
-    const companyName = "Una compañía";
-    axios.get.mockImplementation(() =>
-      Promise.resolve({
-        data: [
-          {
-            company_id: 1104,
-            emitter: {
-              tax_id: "VAVV820109B47",
-              business_name: companyName,
-              commercial_name: companyName
-            }
+  done();
+});
+it("Has GxBranches as a child", async done => {
+  const companyName = "Una compañía";
+  axios.get.mockImplementation(() =>
+    Promise.resolve({
+      data: [
+        {
+          company_id: 1104,
+          emitter: {
+            tax_id: "VAVV820109B47",
+            business_name: companyName,
+            commercial_name: companyName
           }
-        ]
-      })
-    );
-    const { getByTestId } = render(SelectBranch, { store });
+        }
+      ]
+    })
+  );
+  const { getByTestId } = render(SelectBranch, { store });
 
-    await flushPromises();
+  await flushPromises();
 
-    const branchId = 1104;
-    axios.get.mockImplementation(() =>
-      Promise.resolve({
-        data: [
-          {
-            branch_id: branchId,
-            description: "branch",
-            name: "name branches",
-            type: "Shop"
-          }
-        ]
-      })
-    );
+  const branchId = 1104;
+  axios.get.mockImplementation(() =>
+    Promise.resolve({
+      data: [
+        {
+          branch_id: branchId,
+          description: "branch",
+          name: "name branches",
+          type: "Shop"
+        }
+      ]
+    })
+  );
 
-    const buttonTestId = `${companyName}_button`;
-    const button = getByTestId(buttonTestId);
+  const buttonTestId = `${companyName}_button`;
+  const button = getByTestId(buttonTestId);
 
-    fireEvent.click(button);
-    const wrapper = mount(GxBranches, { store });
-    expect(wrapper.find(GxBranches).exists()).toBe(true);
-    done();
-  });
-  it("Renders branches when a company is selected ", async done => {
-    const companyName = "Una compañía";
-    axios.get.mockImplementation(() =>
-      Promise.resolve({
-        data: [
-          {
-            company_id: 1104,
-            emitter: {
-              tax_id: "VAVV820109B47",
-              business_name: companyName,
-              commercial_name: companyName
-            }
+  fireEvent.click(button);
+  const wrapper = mount(GxBranches, { store });
+  expect(wrapper.find(GxBranches).exists()).toBe(true);
+  done();
+});
+it("Renders branches when a company is selected ", async done => {
+  const companyName = "Una compañía";
+  axios.get.mockImplementation(() =>
+    Promise.resolve({
+      data: [
+        {
+          company_id: 1104,
+          emitter: {
+            tax_id: "VAVV820109B47",
+            business_name: companyName,
+            commercial_name: companyName
           }
-        ]
-      })
-    );
-    const { getByTestId } = render(SelectBranch, { store });
-    await flushPromises();
+        }
+      ]
+    })
+  );
+  const { getByTestId } = render(SelectBranch, { store });
+  await flushPromises();
 
-    const branchId = 1104;
-    axios.get.mockImplementation(() =>
-      Promise.resolve({
-        data: [
-          {
-            branch_id: branchId,
-            description: "branch",
-            name: "name branches",
-            type: "Shop"
-          }
-        ]
-      })
-    );
-    const buttonTestIdCompany = `${companyName}_button`;
-    const button = getByTestId(buttonTestIdCompany);
-    fireEvent.click(button);
-    await flushPromises();
-    const branches = [
-      {
-        branch_id: branchId,
-        description: "branch",
-        name: "name branches",
-        type: "Shop"
-      }
-    ];
-    expect(store.state.branches).toEqual(branches);
-    expect(store.state.selectedBranchId).toBe(null);
+  const branchId = 1104;
+  axios.get.mockImplementation(() =>
+    Promise.resolve({
+      data: [
+        {
+          branch_id: branchId,
+          description: "branch",
+          name: "name branches",
+          type: "Shop"
+        }
+      ]
+    })
+  );
+  const buttonTestIdCompany = `${companyName}_button`;
+  const button = getByTestId(buttonTestIdCompany);
+  fireEvent.click(button);
+  await flushPromises();
+  const branches = [
+    {
+      branch_id: branchId,
+      description: "branch",
+      name: "name branches",
+      type: "Shop"
+    }
+  ];
+  expect(store.state.branches).toEqual(branches);
+  expect(store.state.selectedBranchId).toBe(null);
 
-    done();
-  });
-  it("Highlights the correct branch", async done => {
-    const companyName = "Una compañía";
-    axios.get.mockImplementation(() =>
-      Promise.resolve({
-        data: [
-          {
-            company_id: 1104,
-            emitter: {
-              tax_id: "VAVV820109B47",
-              business_name: companyName,
-              commercial_name: companyName
-            }
+  done();
+});
+it("Highlights the correct branch", async done => {
+  const companyName = "Una compañía";
+  axios.get.mockImplementation(() =>
+    Promise.resolve({
+      data: [
+        {
+          company_id: 1104,
+          emitter: {
+            tax_id: "VAVV820109B47",
+            business_name: companyName,
+            commercial_name: companyName
           }
-        ]
-      })
-    );
-    const { getByTestId } = render(SelectBranch, { store });
-
-    await flushPromises();
+        }
+      ]
+    })
+  );
+  const { getByTestId } = render(SelectBranch, { store });
 
-    const branchId = 1104;
-    axios.get.mockImplementation(() =>
-      Promise.resolve({
-        data: [
-          {
-            branch_id: branchId,
-            description: "branch",
-            name: "name branches",
-            type: "Shop"
-          }
-        ]
-      })
-    );
-    const buttonTestIdCompany = `${companyName}_button`;
-    const buttonCompany = getByTestId(buttonTestIdCompany);
-    fireEvent.click(buttonCompany);
+  await flushPromises();
 
-    await flushPromises();
-    const buttonTestIdBranches = `${branchId}_button`;
-    console.log(buttonTestIdBranches);
-    const buttonBranch = getByTestId(buttonTestIdBranches);
-    fireEvent.click(buttonBranch);
+  const branchId = 1104;
+  axios.get.mockImplementation(() =>
+    Promise.resolve({
+      data: [
+        {
+          branch_id: branchId,
+          description: "branch",
+          name: "name branches",
+          type: "Shop"
+        }
+      ]
+    })
+  );
+  const buttonTestIdCompany = `${companyName}_button`;
+  const buttonCompany = getByTestId(buttonTestIdCompany);
+  fireEvent.click(buttonCompany);
 
-    await flushPromises();
-    expect(store.state.selectedBranchId).toEqual(branchId);
-    expect(buttonBranch.classList.contains("active")).toBe(true);
-    done();
-  });
+  await flushPromises();
+  const buttonTestIdBranches = `${branchId}_button`;
+  console.log(buttonTestIdBranches);
+  const buttonBranch = getByTestId(buttonTestIdBranches);
+  fireEvent.click(buttonBranch);
 
-  it("mutates the company state", () => {
-    const companyName = "Una compañía";
-    const companies = [
-      {
-        company_id: 1104,
-        emitter: {
-          tax_id: "VAVV820109B47",
-          business_name: companyName,
-          commercial_name: companyName
-        }
-      }
-    ];
-    const state = {
-      companies: []
-    };
-    mutations.setCompanies(state, companies);
-    expect(state.companies).toEqual(companies);
-  });
+  await flushPromises();
+  expect(store.state.selectedBranchId).toEqual(branchId);
+  expect(buttonBranch.classList.contains("active")).toBe(true);
+  done();
 });

From 07ed599c8831ae605f14794c3d0e3773983d3f17 Mon Sep 17 00:00:00 2001
From: Diana Carrillo <dianacarrillo.psic@outlook.com>
Date: Fri, 18 Jan 2019 17:53:45 -0600
Subject: [PATCH 4/5] tests with cypress

---
 cypress.json                                  |  3 +-
 src/components/GxCompany.vue                  |  2 +-
 src/components/__tests__/SelectBranch.spec.js | 21 +++++++++
 tests/e2e/specs/test.js                       | 45 ++++++++++++++++++-
 4 files changed, 67 insertions(+), 4 deletions(-)

diff --git a/cypress.json b/cypress.json
index 470c720..acac844 100644
--- a/cypress.json
+++ b/cypress.json
@@ -1,3 +1,4 @@
 {
+  "baseUrl": "http://localhost:8080",
   "pluginsFile": "tests/e2e/plugins/index.js"
-}
+}
\ No newline at end of file
diff --git a/src/components/GxCompany.vue b/src/components/GxCompany.vue
index c344802..38337ab 100644
--- a/src/components/GxCompany.vue
+++ b/src/components/GxCompany.vue
@@ -13,7 +13,7 @@
             >RFC: {{ company.emitter.tax_id }}</span
           >
           <button @click="showButton = !showButton">Show button</button>
-          <button v-if="isActive && showButton">Botón</button>
+          <button v-if="isActive && showButton" class="question">Botón</button>
         </p>
       </div>
     </button>
diff --git a/src/components/__tests__/SelectBranch.spec.js b/src/components/__tests__/SelectBranch.spec.js
index 82e90c8..7b328b9 100644
--- a/src/components/__tests__/SelectBranch.spec.js
+++ b/src/components/__tests__/SelectBranch.spec.js
@@ -10,6 +10,7 @@ import SelectBranch from "../SelectBranch.vue";
 import GxBranches from "../GxBranches.vue";
 import axios from "axios";
 import store from "../../store";
+import GxCompany from "../GxCompany.vue";
 import { mutations } from "../../mutations";
 const flushPromises = require("flush-promises");
 
@@ -276,3 +277,23 @@ it("Highlights the correct branch", async done => {
   expect(buttonBranch.classList.contains("active")).toBe(true);
   done();
 });
+
+describe("GxCompany", () => {
+  const companyName = "Una compañía";
+  const { wrapper } = render(GxCompany, {
+    propsData: {
+      company: {
+        company_id: 1104,
+        emitter: {
+          tax_id: "VAVV820109B47",
+          business_name: companyName,
+          commercial_name: companyName
+        }
+      }
+    }
+  });
+  it("Shows the hidden button", () => {
+    // const button = wrapper.findAll("button").at(1);
+    expect(wrapper.data.showButton).toBe(true);
+  });
+});
diff --git a/tests/e2e/specs/test.js b/tests/e2e/specs/test.js
index 1d74984..985063f 100644
--- a/tests/e2e/specs/test.js
+++ b/tests/e2e/specs/test.js
@@ -1,8 +1,49 @@
+import { throwError } from "rxjs";
+import { cyan } from "ansi-colors";
+
 // https://docs.cypress.io/api/introduction/api.html
 
 describe("My First Test", () => {
-  it("Visits the app root url", () => {
+  // before each test
+  beforeEach(() => {
     cy.visit("/");
-    cy.contains("h1", "Welcome to Your Vue.js App");
+  });
+  const user = cy;
+
+  it("Renders companies", () => {
+    user.get(".info").should("have.length.gt", 1);
+  });
+  it("highlights the selected company", () => {
+    user
+      .get("[data-testid='QA Gestionix_button']")
+      .click()
+      .should("have.class", "active");
+  });
+  it("Renders branches when a company is selected", () => {
+    user.get("[data-testid='QA Gestionix_button']").click();
+    user.get(".info").should("have.length.gt", 9);
+  });
+  it("Renders the hidden button", () => {
+    user
+      .get(".info")
+      .children()
+      .should("have.length", 2)
+      .get("button :nth-child(4)")
+      .click({ multiple: true })
+      .get("button .question");
+  });
+  // it("disabled unactive branches", () => {
+  //   user
+  //     .get("[data-testid='QA Gestionix_button']")
+  //     .click()
+  //     .get("[data-testid='QA Gestionix_button']")
+  //     .should("have.attr", "disabled");
+  // });
+  it("can authenticate", () => {
+    user.server().route({
+      method: "POST",
+      url: "/ users / authentication",
+      status: 200
+    });
   });
 });

From e86fdc19824d7c2a10eebdeef530d48962c3186f Mon Sep 17 00:00:00 2001
From: Diana Carrillo <dianacarrillo.psic@outlook.com>
Date: Mon, 21 Jan 2019 13:47:40 -0600
Subject: [PATCH 5/5] updating tests

---
 src/main.js             |  4 ++-
 tests/e2e/specs/test.js | 78 +++++++++++++++++++++++++----------------
 2 files changed, 51 insertions(+), 31 deletions(-)

diff --git a/src/main.js b/src/main.js
index 9466dcc..1cf55ed 100644
--- a/src/main.js
+++ b/src/main.js
@@ -6,8 +6,10 @@ import "./registerServiceWorker";
 
 Vue.config.productionTip = false;
 
-new Vue({
+const app = new Vue({
   router,
   store,
   render: h => h(App)
 }).$mount("#app");
+
+window.app = app;
diff --git a/tests/e2e/specs/test.js b/tests/e2e/specs/test.js
index 985063f..91886e2 100644
--- a/tests/e2e/specs/test.js
+++ b/tests/e2e/specs/test.js
@@ -1,49 +1,67 @@
-import { throwError } from "rxjs";
-import { cyan } from "ansi-colors";
-
-// https://docs.cypress.io/api/introduction/api.html
+// import { throwError } from "rxjs";
+// import { cyan } from "ansi-colors";
 
 describe("My First Test", () => {
-  // before each test
   beforeEach(() => {
     cy.visit("/");
   });
-  const user = cy;
+  it(".app element is visible", () => {
+    cy.get("#app").should("be.visible");
+  });
+  it("Can authenticate", () => {
+    cy.server().route({
+      method: "POST",
+      url: "/ users / authentication",
+      status: 200
+    });
+  });
+  it("Can render companies", () => {
+    cy.server()
+      .route({
+        method: "GET",
+        url: "/users/companies"
+      })
+      .as("companiesColumn");
+  });
+
+  it("Renders the title for companies", () => {
+    cy.get("h4").contains("Empresas");
+  });
 
   it("Renders companies", () => {
-    user.get(".info").should("have.length.gt", 1);
+    cy.get("div .info").should("have.length.gt", 1);
   });
-  it("highlights the selected company", () => {
-    user
-      .get("[data-testid='QA Gestionix_button']")
+  it("Highlights the selected company", () => {
+    cy.get("button")
+      .eq(0)
       .click()
       .should("have.class", "active");
   });
   it("Renders branches when a company is selected", () => {
-    user.get("[data-testid='QA Gestionix_button']").click();
-    user.get(".info").should("have.length.gt", 9);
+    cy.get("[data-testid='QA Gestionix_button']").click();
+    cy.get(".select-item").should("have.length.gt", 9);
   });
   it("Renders the hidden button", () => {
-    user
-      .get(".info")
-      .children()
-      .should("have.length", 2)
-      .get("button :nth-child(4)")
+    cy.get("button :nth-child(4)")
       .click({ multiple: true })
       .get("button .question");
   });
-  // it("disabled unactive branches", () => {
-  //   user
-  //     .get("[data-testid='QA Gestionix_button']")
-  //     .click()
-  //     .get("[data-testid='QA Gestionix_button']")
-  //     .should("have.attr", "disabled");
-  // });
-  it("can authenticate", () => {
-    user.server().route({
-      method: "POST",
-      url: "/ users / authentication",
-      status: 200
-    });
+  it("Disables  unactive branches", () => {
+    cy.get("[data-testid='QA Gestionix_button']")
+      .click()
+      .get("[data-testid='4721_button']")
+      .should("have.attr", "disabled");
+  });
+
+  const getStore = () => cy.window().its("app.$store");
+  it("Has properties companies, branches, selectedCompanyId, selectedBranchId", () => {
+    getStore()
+      .its("state")
+      .should("have.keys", [
+        "companies",
+        "branches",
+        "selectedCompanyId",
+        "selectedBranchId"
+      ]);
   });
 });