Skip to content

Commit

Permalink
Merge pull request #25 from DannyFeliz/cleanup
Browse files Browse the repository at this point in the history 
Cleanup
  • Loading branch information
@DannyFeliz
DannyFeliz committed Jan 12, 2020
2 parents 7fd4148 + 578d509 commit 5447063
Show file tree
Hide file tree
Showing 2 changed files with 45 additions and 44 deletions.
49 changes: 27 additions & 22 deletions src/components/EmailDropdown.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@
:value="email"
:class="inputClasses"
@focus="handleEmailInputFocus"
@blur="handleEmailInputBlur"
@input="handleInputEvent"
@keyup.up="handleListNavigation('up')"
@keyup.down="handleListNavigation('down')"
Expand All @@ -25,14 +24,16 @@
tabindex="-1"
:data-dropdown-item-index="index"
class="email-dropdown-item"
:class="{'email-dropdown-item-focus': index === listFocusIndex && !isEmailInputFocused}"
@click="handleOptionSelection(domain)"
@keyup.esc="handleEscPress"
@keyup.enter="handleOptionSelection(domain)"
@keyup.up="handleListNavigation('up')"
@keyup.down="handleListNavigation('down')"
@keyup="convertCharToText"
>{{ emailWithoutDomain }}@{{ domain }}</li>
>
<span class="email-dropdown-item-username">{{ username }}</span
><span class="email-dropdown-item-domain">@{{ domain }}</span>
</li>
</ul>
</div>
</div>
Expand Down Expand Up @@ -89,9 +90,7 @@ export default {
data() {
return {
email: this.initialValue,
isOptionSelected: false,
isEscPressed: false,
isEmailInputFocused: false,
listFocusIndex: 0,
isFirstFocus: false,
hasclickedOutside: false,
Expand All @@ -105,40 +104,38 @@ export default {
},
computed: {
shouldShowList() {
return Boolean(this.domainsList.length && !this.optionIsSelected && !this.isEscPressed);
return Boolean(this.domainsList.length && !this.isOptionSelected && !this.isEscPressed);
},
includesAt() {
return this.email.toLowerCase().includes("@");
},
emailWithoutDomain() {
username() {
return this.email.toLowerCase().split("@")[0];
},
emailDomain() {
domain() {
return this.email.toLowerCase().split("@")[1] || "";
},
suggestionList() {
return this.domainsList.map(domain => `${this.emailWithoutDomain}@${domain}`.toLowerCase());
return this.domainsList.map(domain => `${this.username}@${domain}`.toLowerCase());
},
optionIsSelected() {
isOptionSelected() {
return this.suggestionList.includes(this.email.toLowerCase());
},
domainsList() {
if (!this.includesAt) {
return [];
}
if (!this.emailDomain.length && this.defaultDomains.length) {
return this.defaultDomains
.sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()))
.slice(0, this.maxSuggestions);
if (!this.domain.length && this.defaultDomains.length) {
return this.defaultDomains.slice(0, this.maxSuggestions);
}
if (!this.emailDomain) {
if (!this.domain) {
return [];
}
return this.domains
.filter(domain => domain.startsWith(this.emailDomain))
.filter(domain => domain.startsWith(this.domain))
.sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()))
.slice(0, this.maxSuggestions);
}
Expand Down Expand Up @@ -177,8 +174,7 @@ export default {
this.email = email;
},
handleOptionSelection(domain) {
this.email = `${this.emailWithoutDomain}@${domain}`;
this.isOptionSelected = true;
this.email = `${this.username}@${domain}`;
this.$refs.email.focus();
this.listFocusIndex = 0;
},
Expand All @@ -193,13 +189,9 @@ export default {
this.$refs.email.focus();
},
handleEmailInputFocus() {
this.isEmailInputFocused = true;
this.hasclickedOutside = false;
this.resetFocusIndex();
},
handleEmailInputBlur() {
this.isEmailInputFocused = false;
},
resetFocusIndex() {
this.isFirstFocus = false;
this.listFocusIndex = 0;
Expand Down Expand Up @@ -245,6 +237,10 @@ export default {
justify-content: center;
align-content: center;
input {
text-overflow: ellipsis;
}
.email-dropdown-list-container {
position: relative;
height: 0;
Expand Down Expand Up @@ -286,6 +282,15 @@ export default {
border: 0.1px solid darkgrey;
box-sizing: border-box;
}
&-username {
color: #999;
}
&-domain {
color: #101920;
font-weight: 500;
}
}
}
}
Expand Down
40 changes: 18 additions & 22 deletions tests/unit/email-dropdown.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ describe("EmailDropdown.vue", () => {

expect(wrapper.text()).to.be.empty;
expect(wrapper.find(".email-dropdown-list").exists()).to.be.false;
expect(wrapper.vm.optionIsSelected).to.be.true;
expect(wrapper.vm.isOptionSelected).to.be.true;
});

it("filter the suggestion list when type in the input", async () => {
Expand Down Expand Up @@ -135,39 +135,39 @@ describe("EmailDropdown.vue", () => {
});
});

describe("emailWithoutDomain", () => {
describe("username", () => {
it("returns the email without domain", () => {
propsData.initialValue = "hello@google.com";

const wrapper = shallowMount(EmailDropdown, {
propsData
});

expect(wrapper.vm.emailWithoutDomain).to.be.equal("hello");
expect(wrapper.vm.username).to.be.equal("hello");
});
});

describe("emailDomain", () => {
describe("domain", () => {
it("returns the email domain", () => {
propsData.initialValue = "hello@google.com";

const wrapper = shallowMount(EmailDropdown, {
propsData
});

expect(wrapper.vm.emailDomain).to.be.equal("google.com");
expect(wrapper.vm.domain).to.be.equal("google.com");
});
});

describe("optionIsSelected", () => {
describe("isOptionSelected", () => {
it("returns 'true' if the email match an item from the suggestion list", () => {
propsData.initialValue = "hello@google.com";

const wrapper = shallowMount(EmailDropdown, {
propsData
});

expect(wrapper.vm.optionIsSelected).to.be.true;
expect(wrapper.vm.isOptionSelected).to.be.true;
});

it("returns 'false' if the email doesn't match an item from the suggestion list", () => {
Expand All @@ -177,7 +177,7 @@ describe("EmailDropdown.vue", () => {
propsData
});

expect(wrapper.vm.optionIsSelected).to.be.true;
expect(wrapper.vm.isOptionSelected).to.be.true;
});
});

Expand All @@ -198,20 +198,20 @@ describe("EmailDropdown.vue", () => {
propsData
});
expect(wrapper.vm.includesAt).to.be.true;
expect(wrapper.vm.emailDomain).to.be.have.length(0);
expect(wrapper.vm.domain).to.be.have.length(0);
expect(wrapper.vm.defaultDomains).to.be.have.length.gt(0);
expect(wrapper.vm.domainsList).to.deep.equalInAnyOrder(propsData.defaultDomains);
});

it("returns the domains based on 'emailDomain'", () => {
it("returns the domains based on 'domain'", () => {
propsData.domains = ["google.com", "gmail.com"];
propsData.initialValue = "hello@g";

const wrapper = shallowMount(EmailDropdown, {
propsData
});
expect(wrapper.vm.includesAt).to.be.true;
expect(wrapper.vm.emailDomain).to.be.have.length(1);
expect(wrapper.vm.domain).to.be.have.length(1);
expect(wrapper.vm.domainsList).to.deep.equalInAnyOrder(propsData.domains);
});

Expand Down Expand Up @@ -250,22 +250,20 @@ describe("EmailDropdown.vue", () => {
propsData
});
expect(wrapper.vm.includesAt).to.be.true;
expect(wrapper.vm.emailDomain).to.be.have.length(0);
expect(wrapper.vm.domain).to.be.have.length(0);
expect(wrapper.vm.suggestionList).to.deep.equalInAnyOrder(expected);
});
});

describe("shouldShowList", () => {
it("returns 'true' if domainsList is 'true' and optionIsSelected is 'false'", () => {
it("returns 'true' if domainsList is 'true' and isOptionSelected is 'false'", () => {
propsData.initialValue = "hello@";
const wrapper = shallowMount(EmailDropdown, {
propsData
});

expect(wrapper.vm.domainsList)
.to.be.an("array")
.have.length.gt(0);
expect(wrapper.vm.optionIsSelected).to.be.false;
expect(wrapper.vm.domainsList).to.have.length.gt(0);
expect(wrapper.vm.isOptionSelected).to.be.false;
expect(wrapper.vm.shouldShowList).to.be.true;
});

Expand All @@ -274,19 +272,17 @@ describe("EmailDropdown.vue", () => {
const wrapper = shallowMount(EmailDropdown, {
propsData
});
expect(wrapper.vm.domainsList)
.to.be.an("array")
.have.length(0);
expect(wrapper.vm.domainsList).to.be.eql([]);
expect(wrapper.vm.shouldShowList).to.be.false;
});

it("returns 'false' if 'optionIsSelected' is false", () => {
it("returns 'false' if 'isOptionSelected' is false", () => {
propsData.initialValue = "hello";
const wrapper = shallowMount(EmailDropdown, {
propsData
});

expect(wrapper.vm.optionIsSelected).to.be.false;
expect(wrapper.vm.isOptionSelected).to.be.false;
expect(wrapper.vm.shouldShowList).to.be.false;
});
});
Expand Down

0 comments on commit 5447063

Please sign in to comment.