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/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/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/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 1d74984..ab06e1c 100644 --- a/tests/e2e/specs/test.js +++ b/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"); }); }); 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"