From b36fc4b1931a48c0ec1d0ae486c76a9f552dcd7c Mon Sep 17 00:00:00 2001 From: Yocelin Garcia Romero Date: Fri, 18 Jan 2019 17:05:12 -0600 Subject: [PATCH 1/3] Adding the first cypress test --- package.json | 1 + src/components/GxCompany.vue | 6 ++-- src/components/__tests__/SelectBranch.spec.js | 34 ++++++++++++++++++ tests/e2e/specs/test.js | 36 +++++++++++++++++-- yarn.lock | 1 + 5 files changed, 73 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 8c27293..373a44d 100644 --- a/package.json +++ b/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", diff --git a/src/components/GxCompany.vue b/src/components/GxCompany.vue index c344802..19b5009 100644 --- a/src/components/GxCompany.vue +++ b/src/components/GxCompany.vue @@ -12,8 +12,10 @@ RFC: {{ company.emitter.tax_id }} - - + +

diff --git a/src/components/__tests__/SelectBranch.spec.js b/src/components/__tests__/SelectBranch.spec.js index 9f6f946..52548c0 100644 --- a/src/components/__tests__/SelectBranch.spec.js +++ b/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(); + }); }); diff --git a/tests/e2e/specs/test.js b/tests/e2e/specs/test.js index 1d74984..5d48774 100644 --- a/tests/e2e/specs/test.js +++ b/tests/e2e/specs/test.js @@ -1,8 +1,38 @@ // 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"); }); }); diff --git a/yarn.lock b/yarn.lock index 5e0b9be..9a7f6df 100644 --- a/yarn.lock +++ b/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" From f8f07e852626c58c7ce250f30fb4a71486c14db1 Mon Sep 17 00:00:00 2001 From: Yocelin Garcia Romero Date: Fri, 18 Jan 2019 18:04:53 -0600 Subject: [PATCH 2/3] Trying to get access to store from cypress --- tests/e2e/specs/test.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/tests/e2e/specs/test.js b/tests/e2e/specs/test.js index 5d48774..e5f54ba 100644 --- a/tests/e2e/specs/test.js +++ b/tests/e2e/specs/test.js @@ -35,4 +35,14 @@ describe("Select Branch Cypress Test", () => { .click(); cy.get(".boton").should("be.visible"); }); + it("Using store", () => { + 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); + }); + }); }); From 5fe95a5ffa3950776fa290ed9bcc0da8c17ba38f Mon Sep 17 00:00:00 2001 From: Yocelin Garcia Romero Date: Mon, 21 Jan 2019 12:57:26 -0600 Subject: [PATCH 3/3] Adding final cypress test --- src/App.vue | 2 +- src/main.js | 4 +++- tests/e2e/specs/test.js | 31 +++++++++++++++++++++++++++++++ 3 files changed, 35 insertions(+), 2 deletions(-) diff --git a/src/App.vue b/src/App.vue index c10374a..98551c8 100644 --- a/src/App.vue +++ b/src/App.vue @@ -4,7 +4,7 @@ Home | About --> -
Loading...
+
Loading...
diff --git a/src/main.js b/src/main.js index 9466dcc..32814f0 100644 --- a/src/main.js +++ b/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; diff --git a/tests/e2e/specs/test.js b/tests/e2e/specs/test.js index e5f54ba..ab06e1c 100644 --- a/tests/e2e/specs/test.js +++ b/tests/e2e/specs/test.js @@ -36,6 +36,7 @@ describe("Select Branch Cypress Test", () => { cy.get(".boton").should("be.visible"); }); it("Using store", () => { + cy.visit("/"); Cypress.Commands.add("vuex", () => cy.window().its("app.$store")); Cypress.Commands.add("getCompanies", () => { @@ -45,4 +46,34 @@ describe("Select Branch Cypress Test", () => { .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"); + }); });