cypress test

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "axios": "^0.18.0",
+    "cypress": "^3.1.4",
     "dom-testing-library": "^3.16.3",
     "flush-promises": "^1.0.2",
     "register-service-worker": "^1.5.2",

src/App.vue

@@ -4,7 +4,7 @@
       <router-link to="/">Home</router-link> |
       <router-link to="/about">About</router-link>
     </div>-->
-    <div v-if="loading">Loading...</div>
+    <div v-if="loading" class="loading">Loading...</div>
     <router-view v-else />
   </div>
 </template>

src/components/GxCompany.vue

@@ -12,8 +12,10 @@
           <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 @click="showButton = !showButton" class="showButton">
+            Show button
+          </button>
+          <button v-if="isActive && showButton" class="boton">Botón</button>
         </p>
       </div>
     </button>

src/components/__tests__/SelectBranch.spec.js

@@ -316,4 +316,38 @@ describe("SelectBranch.vue", () => {
     expect(store.state.selectedBranchId).toBe(4721);
     done();
   });
+  it("Shows a second button when clicks the 'Show button' button", async done => {
+    axios.get.mockImplementation(() =>
+      Promise.resolve({
+        data: [
+          {
+            company_id: 5072,
+            emitter: {
+              tax_id: "VAVV820109B46",
+              business_name: "Soy una Branch 1",
+              commercial_name: "Soy una Branch 1"
+            }
+          },
+          {
+            company_id: 4721,
+            emitter: {
+              tax_id: "VAVV820109B47",
+              business_name: "Soy una Branch 2",
+              commercial_name: "Soy una Branch 2"
+            }
+          }
+        ]
+      })
+    );
+    const { getByTestId } = render(SelectBranch, { store });
+
+    await flushPromises();
+
+    const buttonTestId = `${"Soy una Branch 1"}_button`;
+    const button = getByTestId(buttonTestId);
+    fireEvent.click(button);
+
+    //expect(store.data.showButton).toBe(true);
+    done();
+  });
 });

src/main.js

@@ -6,8 +6,10 @@ import "./registerServiceWorker";
 
 Vue.config.productionTip = false;
 
-new Vue({
+const myBranch = new Vue({
   router,
   store,
   render: h => h(App)
 }).$mount("#app");
+
+window.app = myBranch;

tests/e2e/specs/test.js

@@ -1,8 +1,79 @@
 // https://docs.cypress.io/api/introduction/api.html
 
-describe("My First Test", () => {
-  it("Visits the app root url", () => {
+describe("Select Branch Cypress Test", () => {
+  it("It renders the Select Branch component, but not the branches", () => {
     cy.visit("/");
-    cy.contains("h1", "Welcome to Your Vue.js App");
+    cy.get(".outer-20-b").should("contain", "Regresar");
+    cy.get(".branches").should("not.be.visible");
+  });
+  it("It renders the companies array but not the branches array before click someone", () => {
+    cy.visit("/");
+    cy.get(".companies").should("have.length.gt", 1);
+    cy.get(".branches").should("not.be.visible");
+  });
+  it("Click one company and get the active class", () => {
+    cy.visit("/");
+    cy.get(".select-item")
+      .eq(0)
+      .click();
+    cy.get(".active").should("be.visible");
+  });
+  it("Click one company and get branches zone", () => {
+    cy.visit("/");
+    cy.get(".select-item")
+      .eq(0)
+      .click();
+    cy.get(".branches").should("be.visible");
+  });
+  it("Find the button child 'Botón' when the company is active and 'Show button' have been clicked", () => {
+    cy.visit("/");
+    cy.get(".select-item")
+      .eq(0)
+      .click();
+    cy.get(".showButton")
+      .eq(0)
+      .click();
+    cy.get(".boton").should("be.visible");
+  });
+  it("Using store", () => {
+    cy.visit("/");
+    Cypress.Commands.add("vuex", () => cy.window().its("app.$store"));
+
+    Cypress.Commands.add("getCompanies", () => {
+      cy.vuex().invoke("dispatch", "getCompanies");
+      cy.vuex()
+        .its("mutations.selectCompany")
+        .should("state.selectedCompanyId", true);
+    });
+  });
+  it("The routes for companies http request are working ok", () => {
+    cy.visit("/");
+    cy.server();
+    cy.route({
+      method: "GET",
+      url: "/users/companies"
+    }).as("companyResponse");
+  });
+  it("Store dispatch actions change selectedCompanyId", () => {
+    cy.visit("/");
+    const getStore = () => cy.window().its("app.$store");
+    cy.get(".select-item")
+      .eq(0)
+      .click();
+    getStore()
+      .its("state")
+      .should("contain", {
+        selectedCompanyId: 1104
+      });
+  });
+  it("Dont rendering the app if the credentials are not available", () => {
+    cy.visit("/");
+    cy.server({
+      method: "POST",
+      url: "/users/authentication",
+      status: 401,
+      response: {}
+    });
+    cy.get(".loading").should("be.visible");
   });
 });

yarn.lock

@@ -2705,6 +2705,7 @@ cyclist@~0.2.2:
 cypress@^3.1.4:
   version "3.1.4"
   resolved "https://registry.yarnpkg.com/cypress/-/cypress-3.1.4.tgz#2af04da05e09f9d3871d05713b364472744c4216"
+  integrity sha512-8VJYtCAFqHXMnRDo4vdomR2CqfmhtReoplmbkXVspeKhKxU8WsZl0Nh5yeil8txxhq+YQwDrInItUqIm35Vw+g==
   dependencies:
     "@cypress/listr-verbose-renderer" "0.4.1"
     "@cypress/xvfb" "1.2.3"