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/actions.js b/src/actions.js
index b6e42bb..0d8a6fd 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() {
+    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 } = 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..68db944 100644
--- a/src/components/CompanyBranch.vue
+++ b/src/components/CompanyBranch.vue
@@ -1,16 +1,17 @@
 <template>
   <div class="item office">
     <button
+      :data-testid="`${branch.branch_id}_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 +43,3 @@ export default {
   }
 };
 </script>
-
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 31006c7..951b56a 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">
+    <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..38337ab 100644
--- a/src/components/GxCompany.vue
+++ b/src/components/GxCompany.vue
@@ -3,16 +3,17 @@
     <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>
+          <button v-if="isActive && showButton" class="question">Botón</button>
         </p>
       </div>
     </button>
diff --git a/src/components/SelectBranch.vue b/src/components/SelectBranch.vue
index 22c2fbe..0fef6c7 100644
--- a/src/components/SelectBranch.vue
+++ b/src/components/SelectBranch.vue
@@ -1,12 +1,10 @@
 <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/>
-      <!-- <GxBranches /> -->
+      <GxCompanies />
+      <GxBranches />
     </div>
   </div>
 </template>
diff --git a/src/components/__tests__/SelectBranch.spec.js b/src/components/__tests__/SelectBranch.spec.js
index f14f687..7b328b9 100644
--- a/src/components/__tests__/SelectBranch.spec.js
+++ b/src/components/__tests__/SelectBranch.spec.js
@@ -1,100 +1,299 @@
 /* eslint-disable no-undef */
 import { createLocalVue, mount } from "@vue/test-utils";
-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 GxCompany from "../GxCompany.vue";
+import { mutations } from "../../mutations";
+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();
+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("mutates the companies' 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);
+  });
+  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 });
+
+  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("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
+          }
+        }
+      ]
     })
-    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();
+  );
+  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 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
+          }
+        }
+      ]
     })
-    it('it renders branches when a company is selected', () => {
+  );
+  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"
+        }
+      ]
     })
-    it('highlihgts the selected branch', () => {
+  );
+  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
+          }
+        }
+      ]
     })
-});
\ No newline at end of file
+  );
+  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();
+});
+
+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/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/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 d7928b8..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 actions from "./actions";
+import { mutations } from "./mutations";
 
 Vue.use(Vuex);
 
@@ -11,23 +12,6 @@ export default new Vuex.Store({
     selectedCompanyId: null,
     selectedBranchId: null
   },
-  mutations: {
-    setCompanies(state, companies) {
-      console.log('Setting companies');
-      console.log(companies);
-
-
-      state.companies = companies;
-    },
-    setBranches(state, branches) {
-      state.branches = branches;
-    },
-    selectBranch(state, branchId) {
-      state.selectedBranchId = branchId
-    },
-    selectCompany(state, companyId) {
-      state.selectedCompanyId = companyId
-    },
-  },
+  mutations,
   actions
 });
diff --git a/tests/e2e/specs/test.js b/tests/e2e/specs/test.js
index 1d74984..91886e2 100644
--- a/tests/e2e/specs/test.js
+++ b/tests/e2e/specs/test.js
@@ -1,8 +1,67 @@
-// https://docs.cypress.io/api/introduction/api.html
+// import { throwError } from "rxjs";
+// import { cyan } from "ansi-colors";
 
 describe("My First Test", () => {
-  it("Visits the app root url", () => {
+  beforeEach(() => {
     cy.visit("/");
-    cy.contains("h1", "Welcome to Your Vue.js App");
+  });
+  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", () => {
+    cy.get("div .info").should("have.length.gt", 1);
+  });
+  it("Highlights the selected company", () => {
+    cy.get("button")
+      .eq(0)
+      .click()
+      .should("have.class", "active");
+  });
+  it("Renders branches when a company is selected", () => {
+    cy.get("[data-testid='QA Gestionix_button']").click();
+    cy.get(".select-item").should("have.length.gt", 9);
+  });
+  it("Renders the hidden button", () => {
+    cy.get("button :nth-child(4)")
+      .click({ multiple: true })
+      .get("button .question");
+  });
+  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"
+      ]);
   });
 });