diff --git a/src/components/BranchPicker.vue b/src/components/BranchPicker.vue index 0d50944..36ce93f 100644 --- a/src/components/BranchPicker.vue +++ b/src/components/BranchPicker.vue @@ -1,45 +1,45 @@
\ No newline at end of file diff --git a/src/components/ListItem.vue b/src/components/ListItem.vue index aaa3f31..8bb2c21 100644 --- a/src/components/ListItem.vue +++ b/src/components/ListItem.vue @@ -32,11 +32,11 @@
- + /> --> diff --git a/src/components/__tests__/BranchPicker.test.js b/src/components/__tests__/BranchPicker.test.js deleted file mode 100644 index 9556c94..0000000 --- a/src/components/__tests__/BranchPicker.test.js +++ /dev/null @@ -1,50 +0,0 @@ - -import { - createLocalVue, - mount -} from "@vue/test-utils"; -import { - getQueriesForElement, - prettyDOM, - wait, - fireEvent -} from "dom-testing-library"; -import Vuex from "vuex"; -import { state, mutations, actions, getters } from '@/store.js'; -import BranchPicker from "../BranchPicker.vue"; - -function render(component, options) { - const localVue = createLocalVue(); - localVue.use(Vuex); - - - const store = new Vuex.Store({ state, mutations, actions, getters }); - const wrapper = mount(component, { - localVue, - attachToDocument: true, - ...options, - store - }); - - return { - wrapper, - ...getQueriesForElement(wrapper.element), - debug: () => console.log(prettyDOM(wrapper.element)) - }; -} - -describe("BranchPicker", () => { - it("It properly renders companies.", async () => { - const { - wrapper, - getByText, - debug - } = render(BranchPicker); - const commit = jest.fn(); - expect(getByText("Empresas")).toBeTruthy(); - await actions.getCompaniesFromServer({ commit }) - .then(resp => console.log(resp)); - expect(getByText('Artículos para el hogar SA de CV')).toBeTruthy(); - }); -}); - diff --git a/src/components/__tests__/CompanyList.test.js b/src/components/__tests__/CompanyList.test.js new file mode 100644 index 0000000..97e6425 --- /dev/null +++ b/src/components/__tests__/CompanyList.test.js @@ -0,0 +1,104 @@ +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'; +import CompanyList from "../CompanyList.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("CompanyList", () => { + 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(CompanyList, {}, storeOptions); + expect(getByText("Soluciones Eléctricas")).toBeTruthy(); + }); + test("it renders branches according to selection", () => { + const { wrapper, getByText, debug } = render(BranchPicker, {}, storeOptions); + 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/components/__tests__/ListItem.test.js b/src/components/__tests__/ListItem.test.js deleted file mode 100644 index be660ad..0000000 --- a/src/components/__tests__/ListItem.test.js +++ /dev/null @@ -1,59 +0,0 @@ -import { - createLocalVue, - mount -} from "@vue/test-utils"; -import { - getQueriesForElement, - prettyDOM, - wait, - fireEvent -} from "dom-testing-library"; - -import ListItem from '@/components/ListItem.vue'; - - -function render(component, options) { - const localVue = createLocalVue(); - const wrapper = mount(component, { - localVue, - attachToDocument: true, - ...options - }); - - return { - wrapper, - ...getQueriesForElement(wrapper.element), - debug: () => console.log(prettyDOM(wrapper.element)) - }; -} - - -// describe("ListItem", () => { -// it('It opens request for disabled item', async () => { -// const hideRequest = jest.fn((showRequest) => { -// showRequest = !showRequest; -// }); -// const handleCompanySelect = jest.fn(); -// const { -// wrapper, -// getByText, -// debug -// } = render(ListItem, { -// propsData: { -// company: { -// name: "Store3", -// key: "1234567890", -// status: false -// }, -// showRequest: false, -// requestId: '1234567890', -// handleRequest: hideRequest, -// handleCompanySelect: handleCompanySelect -// } -// }); -// expect(wrapper).not.toContain('Solicitar permiso para la Tienda'); -// const question = wrapper.find('a'); -// await question.trigger('click'); -// expect(getByText('¿Solicitar permiso para la Tienda Store3?')).toBeTruthy(); -// }); -// }) \ No newline at end of file