From 93dbd75cc1dee8d17b7a14523aa2860931cafe01 Mon Sep 17 00:00:00 2001 From: jetzable Date: Mon, 7 Jan 2019 10:06:36 -0600 Subject: [PATCH] Updating select branch style and classes --- src/components/BranchPicker.vue | 34 ++--- src/components/CompanyList.vue | 43 +++--- src/components/ListItem.vue | 128 +++++++++--------- src/components/StoreList.vue | 98 +++++++------- src/components/__tests__/BranchPicker.test.js | 90 ++++++++++++ src/components/__tests__/CompanyList.test.js | 3 +- src/store.js | 4 +- 7 files changed, 238 insertions(+), 162 deletions(-) create mode 100644 src/components/__tests__/BranchPicker.test.js diff --git a/src/components/BranchPicker.vue b/src/components/BranchPicker.vue index 36ce93f..2ece102 100644 --- a/src/components/BranchPicker.vue +++ b/src/components/BranchPicker.vue @@ -1,14 +1,14 @@ @@ -17,29 +17,15 @@ import { mapGetters } from "vuex"; import CompanyList from "./CompanyList.vue"; import StoreList from "./StoreList.vue"; import LocationList from "./LocationList.vue"; -import { log } from "util"; export default { name: "BranchPicker", computed: { - ...mapGetters(["showStoreColumn", "showLocationColumn"]) - }, - data() { - return { - closeColumns: false - }; - }, - methods: { - handleCloseColumns() { - this.closeColumns = !this.closeColumns; - } + ...mapGetters(["showStoreColumn"]) }, components: { CompanyList, - StoreList, - LocationList + StoreList } }; - - -
\ No newline at end of file + \ No newline at end of file diff --git a/src/components/CompanyList.vue b/src/components/CompanyList.vue index dfa4823..f9a4b7a 100644 --- a/src/components/CompanyList.vue +++ b/src/components/CompanyList.vue @@ -1,26 +1,27 @@ + \ No newline at end of file diff --git a/src/components/ListItem.vue b/src/components/ListItem.vue index 8bb2c21..eb214f7 100644 --- a/src/components/ListItem.vue +++ b/src/components/ListItem.vue @@ -1,69 +1,69 @@ diff --git a/src/components/StoreList.vue b/src/components/StoreList.vue index edd5929..3ea2f4c 100644 --- a/src/components/StoreList.vue +++ b/src/components/StoreList.vue @@ -1,55 +1,55 @@ diff --git a/src/components/__tests__/BranchPicker.test.js b/src/components/__tests__/BranchPicker.test.js new file mode 100644 index 0000000..963d34f --- /dev/null +++ b/src/components/__tests__/BranchPicker.test.js @@ -0,0 +1,90 @@ +import { + createLocalVue, + mount +} from "@vue/test-utils"; +import { + getQueriesForElement, + prettyDOM, + wait, + fireEvent +} from "dom-testing-library"; +import Vuex from "vuex"; +import BranchPicker from '../BranchPicker.vue'; + +function render(component, options, storeOptions) { + const localVue = createLocalVue(); + localVue.use(Vuex); + + const store = new Vuex.Store(storeOptions); + + const wrapper = mount(component, { + localVue, + attachToDocument: true, + ...options, + store + }); + + return { + wrapper, + ...getQueriesForElement(wrapper.element), + debug: () => console.log(prettyDOM(wrapper.element)) + }; +} +describe("BranchPicker", () => { + const branches = [ + { + branch_id: 144, + type: "Store", + name: "San Juan", + active: true + }, + { + branch_id: 4687, + type: "Shop", + name: "Fer_Pruebas_test", + active: true + }, + { + branch_id: 4706, + type: "Shop", + name: "David Test", + active: true + }, + { + branch_id: 145, + type: "Shop", + name: "Coyoacán", + active: true + } + ]; + let getters = { + companiesFromServer: () => [ + { + company_id: 17, + active: true, + status: true, + emitter: { + id: 11, + tax_id: "JAR1106038RA", + business_name: "Soluciones Eléctricas", + commercial_name: "Soluciones Eléctricas Ibarra Updated S.A. de C.V." + } + } + ], + branchList: () => branches, + showStoreColumn: () => true + }; + let actions = { + getCompaniesFromServer: jest.fn(), + handleCompanySelect: jest.fn(id => id) + }; + + let storeOptions = { + getters, + actions + }; + test("calls store action getCompaniesFromServer when the component is rendered", async () => { + const { wrapper, getByText } = render(BranchPicker, {}, storeOptions); + expect(getByText("Empresas")).toBeTruthy(); + }); +}); diff --git a/src/components/__tests__/CompanyList.test.js b/src/components/__tests__/CompanyList.test.js index 97e6425..e08d01e 100644 --- a/src/components/__tests__/CompanyList.test.js +++ b/src/components/__tests__/CompanyList.test.js @@ -71,6 +71,7 @@ describe("CompanyList", () => { } } ], + showRequest: () => false, branchList: () => branches, showStoreColumn: () => true }; @@ -92,12 +93,10 @@ describe("CompanyList", () => { const company = wrapper.find('button'); company.trigger('click'); expect(getByText(branches[1].name)).toBeTruthy(); - expect(company.classes()).toContain('active'); }); test("it adds active class to company according to selection", () => { const { wrapper, getByText, debug } = render(BranchPicker, {}, storeOptions); const company = wrapper.find('button'); - company.trigger('click'); expect(company.classes()).toContain('active'); }); diff --git a/src/store.js b/src/store.js index 38210d2..bf59c18 100644 --- a/src/store.js +++ b/src/store.js @@ -49,7 +49,7 @@ export const actions = { } }); commit("setCompaniesList", companies); - const currentToken = "eyJhbGciOiJSUzI1NiIsImtpZCI6IjFCRTVGOTQ2MTI0NTMyMkYxOTE4RTZERDVBREIzOTI4REFBMjg1RDciLCJ0eXAiOiJKV1QiLCJ4NXQiOiJHLVg1UmhKRk1pOFpHT2JkV3RzNUtOcWloZGMifQ.eyJuYmYiOjE1NDY1NDkxMzIsImV4cCI6MTU0NjU4OTEzMiwiaXNzIjoiaHR0cHM6Ly9nZXN0aW9uaXgtaWRlbnRpdHlzZXJ2aWNlLW9hdXRoMi1hcGktdGVzdC5henVyZXdlYnNpdGVzLm5ldCIsImF1ZCI6WyJodHRwczovL2dlc3Rpb25peC1pZGVudGl0eXNlcnZpY2Utb2F1dGgyLWFwaS10ZXN0LmF6dXJld2Vic2l0ZXMubmV0L3Jlc291cmNlcyIsImdlc3Rpb25peF9hcGkiXSwiY2xpZW50X2lkIjoiR2VzdGlvbml4LUFwaSIsInN1YiI6ImEyZjdmOGY1LTI0ZjktNDU2Yi04Zjg5LWUzN2VmYzQzOWFkMiIsImF1dGhfdGltZSI6MTU0NjU0OTEzMiwiaWRwIjoibG9jYWwiLCJuYW1lIjpbIk1hcmNvIEFudG9uaW8iLCJNYXJjbyBBbnRvbmlvIiwiTWFyY28gQW50b25pbyIsIk1hcmNvIEFudG9uaW8iLCJNYXJjbyBBbnRvbmlvIiwiTWFyY28gQW50b25pbyIsIk1hcmNvIEFudG9uaW8iLCJNYXJjbyBBbnRvbmlvIiwiTWFyY28gQW50b25pbyIsIk1hcmNvIEFudG9uaW8iXSwiZW1haWwiOlsiaG9nYXJAZ2VzdGlvbml4LmNvbSIsImNlc2FyLnZhcmdhc0BnZXN0aW9uaXguY29tIiwiY29yZ293YXJlMkBnbWFpbC5jb20iLCJob2dhckBnZXN0aW9uaXguY29tIiwiY29yZ293YXJlMkBnbWFpbC5jb20iLCJob2dhckBnZXN0aW9uaXguY29tIiwiY29yZ293YXJlMkBnbWFpbC5jb20iLCJob2dhckBnZXN0aW9uaXguY29tIiwiY29yZ293YXJlMkBnbWFpbC5jb20iLCJob2dhckBnZXN0aW9uaXguY29tIiwiaG9nYXJAZ2VzdGlvbml4LmNvbSJdLCJzY29wZSI6WyJnZXN0aW9uaXhfYXBpIiwib2ZmbGluZV9hY2Nlc3MiXSwiYW1yIjpbInB3ZCJdfQ.Exl0Zou-SXJN9r7KPctN19yyCQjERREl4wy3__T88atYF4AH3SySCMWUlh7I_qJBISlhfuGKHmqGNUrjR0a0YvBkFKHomBSRO3bNNUQF23NQo-67kLylWEem1gIueiGn1lf5XtKwSE_ZtFgb3b_HDxkxNqjKYOE9Quu4URbypxt2oTpJOLlwdgQ2jelFiT4H__rbr1ZsGSEN4xss9HnTg53-5Jmv0UhqWnRjrjy0QJO-FhBZHyhai-fZNjITMcygbXPRi3W5TytjPpgD_8olygJTMh5WhoZxyIFv-YjSpieAAl7iNoivPzNgEPuHOBshrAbZJtEJjFJBKHQDUzIj2Xn-ai-SIjibHW823VhW7btiKsoJYG5cW398s657vZuehIYohs3E-65Ktnf3CYIWxLM-IAwCkU6b58v7ifuRKuXmil5k_vqQYl1dlHq-Tp5I5D0i34OKqmnPKhbwO3PXrVlR2xIijFuuTnZwBIAdj96Q7vyCWjSjGM9lFLaVcoEQlaJ5xezUlDBavr3q0MiKpUA11ACOncsQNF3F_1c64YPcdTrbnUmDEpAOD-CupvrfKoz-0STlsdBds8DE95e5rj5mLkqb0rpKTywdZpR_KBp2fzZm-Hu6DB40zpoMEbnrDY6aloMfFyHfvNL9ipMTZyfNrC9eiezsV9zk2ir6zx8"; + const currentToken = "eyJhbGciOiJSUzI1NiIsImtpZCI6IjFCRTVGOTQ2MTI0NTMyMkYxOTE4RTZERDVBREIzOTI4REFBMjg1RDciLCJ0eXAiOiJKV1QiLCJ4NXQiOiJHLVg1UmhKRk1pOFpHT2JkV3RzNUtOcWloZGMifQ.eyJuYmYiOjE1NDY4NzQ0OTQsImV4cCI6MTU0NjkxNDQ5NCwiaXNzIjoiaHR0cHM6Ly9hdXRoLXRlc3QuZ2VzdGlvbml4LmNvbSIsImF1ZCI6WyJodHRwczovL2F1dGgtdGVzdC5nZXN0aW9uaXguY29tL3Jlc291cmNlcyIsImdlc3Rpb25peF9hcGkiXSwiY2xpZW50X2lkIjoiR2VzdGlvbml4LUFwaSIsInN1YiI6ImEyZjdmOGY1LTI0ZjktNDU2Yi04Zjg5LWUzN2VmYzQzOWFkMiIsImF1dGhfdGltZSI6MTU0Njg3NDQ5NCwiaWRwIjoibG9jYWwiLCJuYW1lIjpbIk1hcmNvIEFudG9uaW8iLCJNYXJjbyBBbnRvbmlvIiwiTWFyY28gQW50b25pbyIsIk1hcmNvIEFudG9uaW8iLCJNYXJjbyBBbnRvbmlvIiwiTWFyY28gQW50b25pbyIsIk1hcmNvIEFudG9uaW8iLCJNYXJjbyBBbnRvbmlvIiwiTWFyY28gQW50b25pbyIsIk1hcmNvIEFudG9uaW8iXSwiZW1haWwiOlsiaG9nYXJAZ2VzdGlvbml4LmNvbSIsImNlc2FyLnZhcmdhc0BnZXN0aW9uaXguY29tIiwiY29yZ293YXJlMkBnbWFpbC5jb20iLCJob2dhckBnZXN0aW9uaXguY29tIiwiY29yZ293YXJlMkBnbWFpbC5jb20iLCJob2dhckBnZXN0aW9uaXguY29tIiwiY29yZ293YXJlMkBnbWFpbC5jb20iLCJob2dhckBnZXN0aW9uaXguY29tIiwiY29yZ293YXJlMkBnbWFpbC5jb20iLCJob2dhckBnZXN0aW9uaXguY29tIiwiaG9nYXJAZ2VzdGlvbml4LmNvbSJdLCJzY29wZSI6WyJnZXN0aW9uaXhfYXBpIiwib2ZmbGluZV9hY2Nlc3MiXSwiYW1yIjpbInB3ZCJdfQ.eUdieIrTL7GjAzvKMj5f4pCzAmChetdPlcWQPl-_-pWHE-mZZhMBCA-uR_ruYdlsn8LJrzT1_FLt2LV8gijkpXf-xuVzej5Qo6B5iXaicHeQYJnagvDt7_knAU_Y4ly8fvP10seo_nhRZHiQAs4q0cjbml5D4hq-DdiLaYcsS1okNq2XrqN4JAiVPy2JBA4Uv5PPodRbPpo0ru392K_hSpeJFicNXN8EQbyBvEYxVaEbmjQWuq7vnAPY_4Afo0p2FxDnGX9TOpb1kCU0cM8De35l5EG90eVOK2aWYwMi5zW7lQuKnW9R1jiuQQdrQW39tVuOV9ABrl7GY6grsj1nWnywfNxRHQI8C-8wFJxLBeaTMfbq0HtryulGzIqPspBXwkXxiJBufHDHAYgOLCo7hNySuwpcVNX2XFKKoDwQxGYRhelZqxsK5NkoAM5Ukq5d7JH61sMMcjqA9aFfLHgVLY0xF51vHFd_r6b2QKWNyZ8LGK04vW6BayLBMqBvQtlK6HMz_0N7j2cxrTxiRT1NC-UWhEd4iOlZFdj1kuYewlDNDggqQs48tQ7f1XpYGHBwFPLY9XudpzFxUj8ZGUkSPGPDguyNoSGkrbUs0hpGBQpbUonzasZakmFNSVbS1pD62h926BLXxlfp7X2zy6KxrMo9snl4Gbo0QVYo83N0BnU"; Axios.get("https://api-test.gestionix.com/api/v3//branch_offices/?", { headers: { Authorization: `Bearer ${currentToken}`, @@ -83,7 +83,7 @@ export const actions = { getCompaniesFromServer: ({ commit }) => { - const currentToken = "eyJhbGciOiJSUzI1NiIsImtpZCI6IjFCRTVGOTQ2MTI0NTMyMkYxOTE4RTZERDVBREIzOTI4REFBMjg1RDciLCJ0eXAiOiJKV1QiLCJ4NXQiOiJHLVg1UmhKRk1pOFpHT2JkV3RzNUtOcWloZGMifQ.eyJuYmYiOjE1NDY1NDkxMzIsImV4cCI6MTU0NjU4OTEzMiwiaXNzIjoiaHR0cHM6Ly9nZXN0aW9uaXgtaWRlbnRpdHlzZXJ2aWNlLW9hdXRoMi1hcGktdGVzdC5henVyZXdlYnNpdGVzLm5ldCIsImF1ZCI6WyJodHRwczovL2dlc3Rpb25peC1pZGVudGl0eXNlcnZpY2Utb2F1dGgyLWFwaS10ZXN0LmF6dXJld2Vic2l0ZXMubmV0L3Jlc291cmNlcyIsImdlc3Rpb25peF9hcGkiXSwiY2xpZW50X2lkIjoiR2VzdGlvbml4LUFwaSIsInN1YiI6ImEyZjdmOGY1LTI0ZjktNDU2Yi04Zjg5LWUzN2VmYzQzOWFkMiIsImF1dGhfdGltZSI6MTU0NjU0OTEzMiwiaWRwIjoibG9jYWwiLCJuYW1lIjpbIk1hcmNvIEFudG9uaW8iLCJNYXJjbyBBbnRvbmlvIiwiTWFyY28gQW50b25pbyIsIk1hcmNvIEFudG9uaW8iLCJNYXJjbyBBbnRvbmlvIiwiTWFyY28gQW50b25pbyIsIk1hcmNvIEFudG9uaW8iLCJNYXJjbyBBbnRvbmlvIiwiTWFyY28gQW50b25pbyIsIk1hcmNvIEFudG9uaW8iXSwiZW1haWwiOlsiaG9nYXJAZ2VzdGlvbml4LmNvbSIsImNlc2FyLnZhcmdhc0BnZXN0aW9uaXguY29tIiwiY29yZ293YXJlMkBnbWFpbC5jb20iLCJob2dhckBnZXN0aW9uaXguY29tIiwiY29yZ293YXJlMkBnbWFpbC5jb20iLCJob2dhckBnZXN0aW9uaXguY29tIiwiY29yZ293YXJlMkBnbWFpbC5jb20iLCJob2dhckBnZXN0aW9uaXguY29tIiwiY29yZ293YXJlMkBnbWFpbC5jb20iLCJob2dhckBnZXN0aW9uaXguY29tIiwiaG9nYXJAZ2VzdGlvbml4LmNvbSJdLCJzY29wZSI6WyJnZXN0aW9uaXhfYXBpIiwib2ZmbGluZV9hY2Nlc3MiXSwiYW1yIjpbInB3ZCJdfQ.Exl0Zou-SXJN9r7KPctN19yyCQjERREl4wy3__T88atYF4AH3SySCMWUlh7I_qJBISlhfuGKHmqGNUrjR0a0YvBkFKHomBSRO3bNNUQF23NQo-67kLylWEem1gIueiGn1lf5XtKwSE_ZtFgb3b_HDxkxNqjKYOE9Quu4URbypxt2oTpJOLlwdgQ2jelFiT4H__rbr1ZsGSEN4xss9HnTg53-5Jmv0UhqWnRjrjy0QJO-FhBZHyhai-fZNjITMcygbXPRi3W5TytjPpgD_8olygJTMh5WhoZxyIFv-YjSpieAAl7iNoivPzNgEPuHOBshrAbZJtEJjFJBKHQDUzIj2Xn-ai-SIjibHW823VhW7btiKsoJYG5cW398s657vZuehIYohs3E-65Ktnf3CYIWxLM-IAwCkU6b58v7ifuRKuXmil5k_vqQYl1dlHq-Tp5I5D0i34OKqmnPKhbwO3PXrVlR2xIijFuuTnZwBIAdj96Q7vyCWjSjGM9lFLaVcoEQlaJ5xezUlDBavr3q0MiKpUA11ACOncsQNF3F_1c64YPcdTrbnUmDEpAOD-CupvrfKoz-0STlsdBds8DE95e5rj5mLkqb0rpKTywdZpR_KBp2fzZm-Hu6DB40zpoMEbnrDY6aloMfFyHfvNL9ipMTZyfNrC9eiezsV9zk2ir6zx8"; + const currentToken = "eyJhbGciOiJSUzI1NiIsImtpZCI6IjFCRTVGOTQ2MTI0NTMyMkYxOTE4RTZERDVBREIzOTI4REFBMjg1RDciLCJ0eXAiOiJKV1QiLCJ4NXQiOiJHLVg1UmhKRk1pOFpHT2JkV3RzNUtOcWloZGMifQ.eyJuYmYiOjE1NDY4NzQ0OTQsImV4cCI6MTU0NjkxNDQ5NCwiaXNzIjoiaHR0cHM6Ly9hdXRoLXRlc3QuZ2VzdGlvbml4LmNvbSIsImF1ZCI6WyJodHRwczovL2F1dGgtdGVzdC5nZXN0aW9uaXguY29tL3Jlc291cmNlcyIsImdlc3Rpb25peF9hcGkiXSwiY2xpZW50X2lkIjoiR2VzdGlvbml4LUFwaSIsInN1YiI6ImEyZjdmOGY1LTI0ZjktNDU2Yi04Zjg5LWUzN2VmYzQzOWFkMiIsImF1dGhfdGltZSI6MTU0Njg3NDQ5NCwiaWRwIjoibG9jYWwiLCJuYW1lIjpbIk1hcmNvIEFudG9uaW8iLCJNYXJjbyBBbnRvbmlvIiwiTWFyY28gQW50b25pbyIsIk1hcmNvIEFudG9uaW8iLCJNYXJjbyBBbnRvbmlvIiwiTWFyY28gQW50b25pbyIsIk1hcmNvIEFudG9uaW8iLCJNYXJjbyBBbnRvbmlvIiwiTWFyY28gQW50b25pbyIsIk1hcmNvIEFudG9uaW8iXSwiZW1haWwiOlsiaG9nYXJAZ2VzdGlvbml4LmNvbSIsImNlc2FyLnZhcmdhc0BnZXN0aW9uaXguY29tIiwiY29yZ293YXJlMkBnbWFpbC5jb20iLCJob2dhckBnZXN0aW9uaXguY29tIiwiY29yZ293YXJlMkBnbWFpbC5jb20iLCJob2dhckBnZXN0aW9uaXguY29tIiwiY29yZ293YXJlMkBnbWFpbC5jb20iLCJob2dhckBnZXN0aW9uaXguY29tIiwiY29yZ293YXJlMkBnbWFpbC5jb20iLCJob2dhckBnZXN0aW9uaXguY29tIiwiaG9nYXJAZ2VzdGlvbml4LmNvbSJdLCJzY29wZSI6WyJnZXN0aW9uaXhfYXBpIiwib2ZmbGluZV9hY2Nlc3MiXSwiYW1yIjpbInB3ZCJdfQ.eUdieIrTL7GjAzvKMj5f4pCzAmChetdPlcWQPl-_-pWHE-mZZhMBCA-uR_ruYdlsn8LJrzT1_FLt2LV8gijkpXf-xuVzej5Qo6B5iXaicHeQYJnagvDt7_knAU_Y4ly8fvP10seo_nhRZHiQAs4q0cjbml5D4hq-DdiLaYcsS1okNq2XrqN4JAiVPy2JBA4Uv5PPodRbPpo0ru392K_hSpeJFicNXN8EQbyBvEYxVaEbmjQWuq7vnAPY_4Afo0p2FxDnGX9TOpb1kCU0cM8De35l5EG90eVOK2aWYwMi5zW7lQuKnW9R1jiuQQdrQW39tVuOV9ABrl7GY6grsj1nWnywfNxRHQI8C-8wFJxLBeaTMfbq0HtryulGzIqPspBXwkXxiJBufHDHAYgOLCo7hNySuwpcVNX2XFKKoDwQxGYRhelZqxsK5NkoAM5Ukq5d7JH61sMMcjqA9aFfLHgVLY0xF51vHFd_r6b2QKWNyZ8LGK04vW6BayLBMqBvQtlK6HMz_0N7j2cxrTxiRT1NC-UWhEd4iOlZFdj1kuYewlDNDggqQs48tQ7f1XpYGHBwFPLY9XudpzFxUj8ZGUkSPGPDguyNoSGkrbUs0hpGBQpbUonzasZakmFNSVbS1pD62h926BLXxlfp7X2zy6KxrMo9snl4Gbo0QVYo83N0BnU"; Axios.get("https://api-test.gestionix.com/api/v3/users/companies", { headers: { Authorization: `Bearer ${currentToken}`