Skip to content

Adding tests for Companies and Branches #17

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jetzable merged 2 commits into from
Jan 4, 2019
Merged

Adding tests for Companies and Branches #17

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8572eb2
Adding test for companies and branch
jetzable Jan 4, 2019
ba3255b
Adding test for companies and branch
jetzable Jan 4, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
76 changes: 38 additions & 38 deletions src/components/BranchPicker.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,45 +1,45 @@
<template>
<div class="select-branch" style="border: 2px solid purple;">
<div class="outer-20-b">
<a @click="handleCloseColumns">
<i class="far fa-times-circle"></i> Cerrar
</a>
</div>
<div>
<CompanyList class="is-one-third"/>
<StoreList :class="{'is-hidden': showStoreColumn}" class="is-one-third"/>
<LocationList :class="{'is-hidden': showLocationColumn}" class="is-one-third"/>
</div>
</div>
<div class="select-branch" style="border: 2px solid purple;">
<div class="outer-20-b">
<a @click="handleCloseColumns">
<i class="far fa-times-circle"></i> Cerrar
</a>
</div>
<div>
<CompanyList class="is-one-third"/>
<StoreList :class="{'is-hidden': showStoreColumn}" class="is-one-third"/>
<!-- <LocationList :class="{'is-hidden': showLocationColumn}" class="is-one-third"/> -->
</div>
</div>
</template>
<script>
import { mapGetters } from "vuex";
import CompanyList from "./CompanyList.vue";
import StoreList from "./StoreList.vue";
import LocationList from "./LocationList.vue";
import { log } from "util";
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;
}
},
components: {
CompanyList,
StoreList,
LocationList
}
};
export default {
name: "BranchPicker",
computed: {
...mapGetters(["showStoreColumn", "showLocationColumn"])
},
data() {
return {
closeColumns: false
};
},
methods: {
handleCloseColumns() {
this.closeColumns = !this.closeColumns;
}
},
components: {
CompanyList,
StoreList,
LocationList
}
};
</script>

<div class="columns" :class="{'is-hidden': closeColumns}">
4 changes: 2 additions & 2 deletions src/components/ListItem.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,11 +32,11 @@
</div>
<a class="fas fa-question-circle" @click="handleRequest(company.emitter.tax_id)"></a>
</button>
<Request
<!-- <Request
:class="{'show': showRequest}"
v-if="company.emitter.tax_id === requestId"
:company="company"
/>
/> -->
</div>
</template>
<script>
Expand Down
110 changes: 55 additions & 55 deletions src/components/ListStore.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,60 +1,60 @@
<template>
<div class="item">
<button class="select-item" v-if="company.active" @click="handleStoreSelect(company.branch_id)">
<div class="info">
<p>
{{ company.name }}
<span class="on"></span>
<span>RFC: {{ company.branch_id }}</span>
</p>
</div>
</button>
<button class="select-item" disabled v-if="!company.active">
<div class="info">
<span>
{{company.name}}
<div class="popover_wrapper">
<i class="fas fa-lock-alt"></i>
<div class="push popover_content up">
<p class="popover_message">
No tienes
<strong>permiso</strong> para modificar la información
</p>
</div>
</div>
<div class="d-block">RFC: {{ company.branch_id}}</div>
</span>
</div>
<a class="fas fa-question-circle" @click="handleRequest(company.branch_id)"></a>
</button>
<Request :class="{'show': showRequest}" v-if="company.branch_id === requestId"/>
</div>
<div class="item">
<button class="select-item" v-if="company.active" @click="handleStoreSelect(company.branch_id)">
<div class="info">
<p>
{{ company.name }}
<span class="on"></span>
<span>RFC: {{ company.branch_id }}</span>
</p>
</div>
</button>
<button class="select-item" disabled v-if="!company.active">
<div class="info">
<span>
{{company.name}}
<div class="popover_wrapper">
<i class="fas fa-lock-alt"></i>
<div class="push popover_content up">
<p class="popover_message">
No tienes
<strong>permiso</strong> para modificar la información
</p>
</div>
</div>
<div class="d-block">RFC: {{ company.branch_id}}</div>
</span>
</div>
<a class="fas fa-question-circle" @click="handleRequest(company.branch_id)"></a>
</button>
<!-- <Request :class="{'show': showRequest}" v-if="company.branch_id === requestId"/> -->
</div>
</template>
<script>
import { mapGetters } from "vuex";
import Request from "@/components/Request.vue";
import { mapGetters } from "vuex";
import Request from "@/components/Request.vue";

export default {
methods: {
handleStoreSelect(storeId) {
this.$store.dispatch("handleStoreSelect", storeId);
},
handleRequest(id) {
this.$store.dispatch("handleRequest", id);
}
},
computed: {
...mapGetters(["showRequest", "requestId"])
},
props: {
company: {
type: Object,
required: true
}
},
name: "ListStore",
components: {
Request
}
};
export default {
methods: {
handleStoreSelect(storeId) {
this.$store.dispatch("handleStoreSelect", storeId);
},
handleRequest(id) {
this.$store.dispatch("handleRequest", id);
}
},
computed: {
...mapGetters(["showRequest", "requestId"])
},
props: {
company: {
type: Object,
required: true
}
},
name: "ListStore",
components: {
Request
}
};
</script>
50 changes: 0 additions & 50 deletions src/components/__tests__/BranchPicker.test.js
View file
Open in desktop

This file was deleted.

104 changes: 104 additions & 0 deletions src/components/__tests__/CompanyList.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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');
});
});
Loading