Vue Component Unit Testing
0
I have a counter component - pretty straight forward.
<div> + </div>
<input type="text" v-model="countData" />
<div> - </div>
Detailed code is here - https://github.com/Shreerang/Vue-Nuggets/blob/master/src/components/QuantitySelector/QuantitySelector.vue
I am trying to unit test this component.
it('Renders a default quantity selector with the max count set to 6', () =>
const wrapper = shallowMount(QuantitySelector);
wrapper.find('input[type="text"]').setValue('1');
expect(wrapper.find('input[type="text"]').element.value).toBe('1'); // notice here that the value is a String, whereas I expect it to be a Number
wrapper.findAll('div').at(2).trigger('click');
expect(wrapper.vm.countData).toBe('2'); // This fails as countData becomes "11" instead of doing a 1 + 1 = 2 and then becoming Number 2.
expect(wrapper.find('input[type="text"]').element.value).toBe(2); // You can notice the same thing as above.
wrapper.find('input[type="text"]').setValue(wrapper.vm.countData); // Do I have to do this? This does not seem right to me :frowning:
);
I am not able to get this unit test to work! Any help with this is appreciated!
unit-testing vue.js vuejs2 jestjs vue-component
edited Nov 15 '18 at 16:40
skyboyer
4,15811333
asked Nov 15 '18 at 1:05
ShreerangShreerang
12012
add a comment |
0
I have a counter component - pretty straight forward.
<div> + </div>
<input type="text" v-model="countData" />
<div> - </div>
Detailed code is here - https://github.com/Shreerang/Vue-Nuggets/blob/master/src/components/QuantitySelector/QuantitySelector.vue
I am trying to unit test this component.
it('Renders a default quantity selector with the max count set to 6', () =>
const wrapper = shallowMount(QuantitySelector);
wrapper.find('input[type="text"]').setValue('1');
expect(wrapper.find('input[type="text"]').element.value).toBe('1'); // notice here that the value is a String, whereas I expect it to be a Number
wrapper.findAll('div').at(2).trigger('click');
expect(wrapper.vm.countData).toBe('2'); // This fails as countData becomes "11" instead of doing a 1 + 1 = 2 and then becoming Number 2.
expect(wrapper.find('input[type="text"]').element.value).toBe(2); // You can notice the same thing as above.
wrapper.find('input[type="text"]').setValue(wrapper.vm.countData); // Do I have to do this? This does not seem right to me :frowning:
);
I am not able to get this unit test to work! Any help with this is appreciated!
unit-testing vue.js vuejs2 jestjs vue-component
edited Nov 15 '18 at 16:40
skyboyer
4,15811333
asked Nov 15 '18 at 1:05
ShreerangShreerang
12012
add a comment |
0
0
0
I have a counter component - pretty straight forward.
<div> + </div>
<input type="text" v-model="countData" />
<div> - </div>
Detailed code is here - https://github.com/Shreerang/Vue-Nuggets/blob/master/src/components/QuantitySelector/QuantitySelector.vue
I am trying to unit test this component.
it('Renders a default quantity selector with the max count set to 6', () =>
const wrapper = shallowMount(QuantitySelector);
wrapper.find('input[type="text"]').setValue('1');
expect(wrapper.find('input[type="text"]').element.value).toBe('1'); // notice here that the value is a String, whereas I expect it to be a Number
wrapper.findAll('div').at(2).trigger('click');
expect(wrapper.vm.countData).toBe('2'); // This fails as countData becomes "11" instead of doing a 1 + 1 = 2 and then becoming Number 2.
expect(wrapper.find('input[type="text"]').element.value).toBe(2); // You can notice the same thing as above.
wrapper.find('input[type="text"]').setValue(wrapper.vm.countData); // Do I have to do this? This does not seem right to me :frowning:
);
I am not able to get this unit test to work! Any help with this is appreciated!
unit-testing vue.js vuejs2 jestjs vue-component
edited Nov 15 '18 at 16:40
skyboyer
4,15811333
asked Nov 15 '18 at 1:05
ShreerangShreerang
12012
I have a counter component - pretty straight forward.
<div> + </div>
<input type="text" v-model="countData" />
<div> - </div>
Detailed code is here - https://github.com/Shreerang/Vue-Nuggets/blob/master/src/components/QuantitySelector/QuantitySelector.vue
I am trying to unit test this component.
it('Renders a default quantity selector with the max count set to 6', () =>
const wrapper = shallowMount(QuantitySelector);
wrapper.find('input[type="text"]').setValue('1');
expect(wrapper.find('input[type="text"]').element.value).toBe('1'); // notice here that the value is a String, whereas I expect it to be a Number
wrapper.findAll('div').at(2).trigger('click');
expect(wrapper.vm.countData).toBe('2'); // This fails as countData becomes "11" instead of doing a 1 + 1 = 2 and then becoming Number 2.
expect(wrapper.find('input[type="text"]').element.value).toBe(2); // You can notice the same thing as above.
wrapper.find('input[type="text"]').setValue(wrapper.vm.countData); // Do I have to do this? This does not seem right to me :frowning:
);
I am not able to get this unit test to work! Any help with this is appreciated!
unit-testing vue.js vuejs2 jestjs vue-component
unit-testing vue.js vuejs2 jestjs vue-component
edited Nov 15 '18 at 16:40
skyboyer
4,15811333
asked Nov 15 '18 at 1:05
ShreerangShreerang
12012
edited Nov 15 '18 at 16:40
skyboyer
4,15811333
asked Nov 15 '18 at 1:05
ShreerangShreerang
12012
edited Nov 15 '18 at 16:40
skyboyer
4,15811333
edited Nov 15 '18 at 16:40
skyboyer
4,15811333
edited Nov 15 '18 at 16:40
skyboyer
4,15811333
4,15811333
asked Nov 15 '18 at 1:05
ShreerangShreerang
12012
asked Nov 15 '18 at 1:05
ShreerangShreerang
12012
asked Nov 15 '18 at 1:05
ShreerangShreerang
12012
12012
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
0
Text fields contain text values. Note that you even specified a text value: setValue('1'). If you change the value in the input manually, (say, to 3) and press the increment button, it becomes 31. Your test is telling you the truth.
You need to change your functions to convert to number. [Update] As your comment informed me, Vue has a .number modifier for v-model for this very purpose
new Vue(
el: '#app',
name: 'quantity-selector',
props:
count:
type: Number,
default: 1,
, // Makes sense to have default product count value
maxCount:
type: Number,
default: 6,
, // maxCount makes sense when you have a restriction on the max quantity for a product
iconDimensions:
type: Number,
default: 15,
,
minusIconFillColor:
type: String,
default: '#000',
,
plusIconFillColor:
type: String,
default: '#000',
,
isCountEditable:
type: Boolean,
default: true,
,
,
data()
return
countData: this.count,
;
,
computed:
minusIconColor: function()
return this.countData === this.count ? '#CCC' : this.minusIconFillColor;
,
plusIconColor: function()
return this.countData === this.maxCount ? '#CCC' : this.plusIconFillColor;
,
,
methods:
decrement: function()
if (this.countData > this.count)
this.countData -= 1;
,
increment: function()
if (this.countData < this.maxCount)
this.countData += 1;
,
adjustCount: function()
if (this.countData > this.maxCount)
this.countData = this.maxCount;
else if (this.countData < this.count)
this.countData = this.count;
else
if (isNaN(Number(this.countData)))
this.countData = this.count;
,
);.nugget-quantity-counter
display: inline-flex;
.nugget-quantity-counter div:first-child
border: solid 1px #ccc;
border-radius: 5px 0px 0px 5px;
.nugget-quantity-counter div:nth-child(2)
border-top: solid 1px #ccc;
border-bottom: solid 1px #ccc;
display: flex;
flex-direction: column;
justify-content: center;
.nugget-quantity-counter input[type='text']
border-top: solid 1px #ccc;
border-bottom: solid 1px #ccc;
border-left: none;
border-right: none;
text-align: center;
width: 20px;
padding: 12px;
margin: 0;
font-size: 16px;
.nugget-quantity-counter div:last-child
border: solid 1px #ccc;
border-radius: 0px 5px 5px 0px;
.nugget-quantity-counter > div
cursor: pointer;
padding: 12px;
width: 20px;
text-align: center;
.nugget-quantity-counter > div > svg
height: 100%;
<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
<div @click="decrement">
<svg viewBox="0 0 24 24" :width="iconDimensions" :height="iconDimensions">
<g>
<path d='M64 0 M2 11 L2 13 L22 13 L22 11 Z' :fill="minusIconColor" />
</g>
</svg>
</div>
<input v-if="isCountEditable" type="text" v-model.number="countData" @blur="adjustCount" />
<div v-else>countData</div>
<div @click="increment">
<svg viewBox="0 0 24 24" :width="iconDimensions" :height="iconDimensions">
<g>
<path d="M 11 2 L 11 11 L 2 11 L 2 13 L 11 13 L 11 22 L 13 22 L 13 13 L 22 13 L 22 11 L 13 11 L 13 2 Z" :fill="plusIconColor" />
</g>
</svg>
</div>
</div>answered Nov 15 '18 at 1:34
Roy JRoy J
28k33361
Thanks Roy. I had figured out as much. The Number and Text String thing. What confuses me is that how is the component working as expected then. See here - ecommerce-vue-nuggets.herokuapp.com
– Shreerang
Nov 15 '18 at 1:52
1
It works as I describe: manually set the value of the first input to 3, then click the plus. You have 31 in the blank. You start with a number value, but when the value is changed in the text item, it becomes a text value.
– Roy J
Nov 15 '18 at 1:58
1
Hi Roy. Though your answer pointed me in the right direction, I think we do not need to add Number(this.countData) everywhere. Instead we can<input type="text" v-model.number="countData" />This.numbermodifier onv-modelwill fix the issue.
– Shreerang
Nov 15 '18 at 19:03
I've updated my answer with that, which is of course a better option. Thanks for sharing that information!
– Roy J
Nov 15 '18 at 19:14
I too was given this answer on the Vue Forum! Thanks to LinusBorg - forum.vuejs.org/t/vue-unit-test/48709/2
– Shreerang
Nov 15 '18 at 19:16
|
show 2 more comments
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53311015%2fvue-component-unit-testing%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
Text fields contain text values. Note that you even specified a text value: setValue('1'). If you change the value in the input manually, (say, to 3) and press the increment button, it becomes 31. Your test is telling you the truth.
You need to change your functions to convert to number. [Update] As your comment informed me, Vue has a .number modifier for v-model for this very purpose
new Vue(
el: '#app',
name: 'quantity-selector',
props:
count:
type: Number,
default: 1,
, // Makes sense to have default product count value
maxCount:
type: Number,
default: 6,
, // maxCount makes sense when you have a restriction on the max quantity for a product
iconDimensions:
type: Number,
default: 15,
,
minusIconFillColor:
type: String,
default: '#000',
,
plusIconFillColor:
type: String,
default: '#000',
,
isCountEditable:
type: Boolean,
default: true,
,
,
data()
return
countData: this.count,
;
,
computed:
minusIconColor: function()
return this.countData === this.count ? '#CCC' : this.minusIconFillColor;
,
plusIconColor: function()
return this.countData === this.maxCount ? '#CCC' : this.plusIconFillColor;
,
,
methods:
decrement: function()
if (this.countData > this.count)
this.countData -= 1;
,
increment: function()
if (this.countData < this.maxCount)
this.countData += 1;
,
adjustCount: function()
if (this.countData > this.maxCount)
this.countData = this.maxCount;
else if (this.countData < this.count)
this.countData = this.count;
else
if (isNaN(Number(this.countData)))
this.countData = this.count;
,
);.nugget-quantity-counter
display: inline-flex;
.nugget-quantity-counter div:first-child
border: solid 1px #ccc;
border-radius: 5px 0px 0px 5px;
.nugget-quantity-counter div:nth-child(2)
border-top: solid 1px #ccc;
border-bottom: solid 1px #ccc;
display: flex;
flex-direction: column;
justify-content: center;
.nugget-quantity-counter input[type='text']
border-top: solid 1px #ccc;
border-bottom: solid 1px #ccc;
border-left: none;
border-right: none;
text-align: center;
width: 20px;
padding: 12px;
margin: 0;
font-size: 16px;
.nugget-quantity-counter div:last-child
border: solid 1px #ccc;
border-radius: 0px 5px 5px 0px;
.nugget-quantity-counter > div
cursor: pointer;
padding: 12px;
width: 20px;
text-align: center;
.nugget-quantity-counter > div > svg
height: 100%;
<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
<div @click="decrement">
<svg viewBox="0 0 24 24" :width="iconDimensions" :height="iconDimensions">
<g>
<path d='M64 0 M2 11 L2 13 L22 13 L22 11 Z' :fill="minusIconColor" />
</g>
</svg>
</div>
<input v-if="isCountEditable" type="text" v-model.number="countData" @blur="adjustCount" />
<div v-else>countData</div>
<div @click="increment">
<svg viewBox="0 0 24 24" :width="iconDimensions" :height="iconDimensions">
<g>
<path d="M 11 2 L 11 11 L 2 11 L 2 13 L 11 13 L 11 22 L 13 22 L 13 13 L 22 13 L 22 11 L 13 11 L 13 2 Z" :fill="plusIconColor" />
</g>
</svg>
</div>
</div>answered Nov 15 '18 at 1:34
Roy JRoy J
28k33361
Thanks Roy. I had figured out as much. The Number and Text String thing. What confuses me is that how is the component working as expected then. See here - ecommerce-vue-nuggets.herokuapp.com
– Shreerang
Nov 15 '18 at 1:52
1
It works as I describe: manually set the value of the first input to 3, then click the plus. You have 31 in the blank. You start with a number value, but when the value is changed in the text item, it becomes a text value.
– Roy J
Nov 15 '18 at 1:58
1
Hi Roy. Though your answer pointed me in the right direction, I think we do not need to add Number(this.countData) everywhere. Instead we can<input type="text" v-model.number="countData" />This.numbermodifier onv-modelwill fix the issue.
– Shreerang
Nov 15 '18 at 19:03
I've updated my answer with that, which is of course a better option. Thanks for sharing that information!
– Roy J
Nov 15 '18 at 19:14
I too was given this answer on the Vue Forum! Thanks to LinusBorg - forum.vuejs.org/t/vue-unit-test/48709/2
– Shreerang
Nov 15 '18 at 19:16
|
show 2 more comments
0
Text fields contain text values. Note that you even specified a text value: setValue('1'). If you change the value in the input manually, (say, to 3) and press the increment button, it becomes 31. Your test is telling you the truth.
You need to change your functions to convert to number. [Update] As your comment informed me, Vue has a .number modifier for v-model for this very purpose
new Vue(
el: '#app',
name: 'quantity-selector',
props:
count:
type: Number,
default: 1,
, // Makes sense to have default product count value
maxCount:
type: Number,
default: 6,
, // maxCount makes sense when you have a restriction on the max quantity for a product
iconDimensions:
type: Number,
default: 15,
,
minusIconFillColor:
type: String,
default: '#000',
,
plusIconFillColor:
type: String,
default: '#000',
,
isCountEditable:
type: Boolean,
default: true,
,
,
data()
return
countData: this.count,
;
,
computed:
minusIconColor: function()
return this.countData === this.count ? '#CCC' : this.minusIconFillColor;
,
plusIconColor: function()
return this.countData === this.maxCount ? '#CCC' : this.plusIconFillColor;
,
,
methods:
decrement: function()
if (this.countData > this.count)
this.countData -= 1;
,
increment: function()
if (this.countData < this.maxCount)
this.countData += 1;
,
adjustCount: function()
if (this.countData > this.maxCount)
this.countData = this.maxCount;
else if (this.countData < this.count)
this.countData = this.count;
else
if (isNaN(Number(this.countData)))
this.countData = this.count;
,
);.nugget-quantity-counter
display: inline-flex;
.nugget-quantity-counter div:first-child
border: solid 1px #ccc;
border-radius: 5px 0px 0px 5px;
.nugget-quantity-counter div:nth-child(2)
border-top: solid 1px #ccc;
border-bottom: solid 1px #ccc;
display: flex;
flex-direction: column;
justify-content: center;
.nugget-quantity-counter input[type='text']
border-top: solid 1px #ccc;
border-bottom: solid 1px #ccc;
border-left: none;
border-right: none;
text-align: center;
width: 20px;
padding: 12px;
margin: 0;
font-size: 16px;
.nugget-quantity-counter div:last-child
border: solid 1px #ccc;
border-radius: 0px 5px 5px 0px;
.nugget-quantity-counter > div
cursor: pointer;
padding: 12px;
width: 20px;
text-align: center;
.nugget-quantity-counter > div > svg
height: 100%;
<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
<div @click="decrement">
<svg viewBox="0 0 24 24" :width="iconDimensions" :height="iconDimensions">
<g>
<path d='M64 0 M2 11 L2 13 L22 13 L22 11 Z' :fill="minusIconColor" />
</g>
</svg>
</div>
<input v-if="isCountEditable" type="text" v-model.number="countData" @blur="adjustCount" />
<div v-else>countData</div>
<div @click="increment">
<svg viewBox="0 0 24 24" :width="iconDimensions" :height="iconDimensions">
<g>
<path d="M 11 2 L 11 11 L 2 11 L 2 13 L 11 13 L 11 22 L 13 22 L 13 13 L 22 13 L 22 11 L 13 11 L 13 2 Z" :fill="plusIconColor" />
</g>
</svg>
</div>
</div>answered Nov 15 '18 at 1:34
Roy JRoy J
28k33361
Thanks Roy. I had figured out as much. The Number and Text String thing. What confuses me is that how is the component working as expected then. See here - ecommerce-vue-nuggets.herokuapp.com
– Shreerang
Nov 15 '18 at 1:52
1
It works as I describe: manually set the value of the first input to 3, then click the plus. You have 31 in the blank. You start with a number value, but when the value is changed in the text item, it becomes a text value.
– Roy J
Nov 15 '18 at 1:58
1
Hi Roy. Though your answer pointed me in the right direction, I think we do not need to add Number(this.countData) everywhere. Instead we can<input type="text" v-model.number="countData" />This.numbermodifier onv-modelwill fix the issue.
– Shreerang
Nov 15 '18 at 19:03
I've updated my answer with that, which is of course a better option. Thanks for sharing that information!
– Roy J
Nov 15 '18 at 19:14
I too was given this answer on the Vue Forum! Thanks to LinusBorg - forum.vuejs.org/t/vue-unit-test/48709/2
– Shreerang
Nov 15 '18 at 19:16
|
show 2 more comments
0
0
0
Text fields contain text values. Note that you even specified a text value: setValue('1'). If you change the value in the input manually, (say, to 3) and press the increment button, it becomes 31. Your test is telling you the truth.
You need to change your functions to convert to number. [Update] As your comment informed me, Vue has a .number modifier for v-model for this very purpose
new Vue(
el: '#app',
name: 'quantity-selector',
props:
count:
type: Number,
default: 1,
, // Makes sense to have default product count value
maxCount:
type: Number,
default: 6,
, // maxCount makes sense when you have a restriction on the max quantity for a product
iconDimensions:
type: Number,
default: 15,
,
minusIconFillColor:
type: String,
default: '#000',
,
plusIconFillColor:
type: String,
default: '#000',
,
isCountEditable:
type: Boolean,
default: true,
,
,
data()
return
countData: this.count,
;
,
computed:
minusIconColor: function()
return this.countData === this.count ? '#CCC' : this.minusIconFillColor;
,
plusIconColor: function()
return this.countData === this.maxCount ? '#CCC' : this.plusIconFillColor;
,
,
methods:
decrement: function()
if (this.countData > this.count)
this.countData -= 1;
,
increment: function()
if (this.countData < this.maxCount)
this.countData += 1;
,
adjustCount: function()
if (this.countData > this.maxCount)
this.countData = this.maxCount;
else if (this.countData < this.count)
this.countData = this.count;
else
if (isNaN(Number(this.countData)))
this.countData = this.count;
,
);.nugget-quantity-counter
display: inline-flex;
.nugget-quantity-counter div:first-child
border: solid 1px #ccc;
border-radius: 5px 0px 0px 5px;
.nugget-quantity-counter div:nth-child(2)
border-top: solid 1px #ccc;
border-bottom: solid 1px #ccc;
display: flex;
flex-direction: column;
justify-content: center;
.nugget-quantity-counter input[type='text']
border-top: solid 1px #ccc;
border-bottom: solid 1px #ccc;
border-left: none;
border-right: none;
text-align: center;
width: 20px;
padding: 12px;
margin: 0;
font-size: 16px;
.nugget-quantity-counter div:last-child
border: solid 1px #ccc;
border-radius: 0px 5px 5px 0px;
.nugget-quantity-counter > div
cursor: pointer;
padding: 12px;
width: 20px;
text-align: center;
.nugget-quantity-counter > div > svg
height: 100%;
<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
<div @click="decrement">
<svg viewBox="0 0 24 24" :width="iconDimensions" :height="iconDimensions">
<g>
<path d='M64 0 M2 11 L2 13 L22 13 L22 11 Z' :fill="minusIconColor" />
</g>
</svg>
</div>
<input v-if="isCountEditable" type="text" v-model.number="countData" @blur="adjustCount" />
<div v-else>countData</div>
<div @click="increment">
<svg viewBox="0 0 24 24" :width="iconDimensions" :height="iconDimensions">
<g>
<path d="M 11 2 L 11 11 L 2 11 L 2 13 L 11 13 L 11 22 L 13 22 L 13 13 L 22 13 L 22 11 L 13 11 L 13 2 Z" :fill="plusIconColor" />
</g>
</svg>
</div>
</div>answered Nov 15 '18 at 1:34
Roy JRoy J
28k33361
Text fields contain text values. Note that you even specified a text value: setValue('1'). If you change the value in the input manually, (say, to 3) and press the increment button, it becomes 31. Your test is telling you the truth.
You need to change your functions to convert to number. [Update] As your comment informed me, Vue has a .number modifier for v-model for this very purpose
new Vue(
el: '#app',
name: 'quantity-selector',
props:
count:
type: Number,
default: 1,
, // Makes sense to have default product count value
maxCount:
type: Number,
default: 6,
, // maxCount makes sense when you have a restriction on the max quantity for a product
iconDimensions:
type: Number,
default: 15,
,
minusIconFillColor:
type: String,
default: '#000',
,
plusIconFillColor:
type: String,
default: '#000',
,
isCountEditable:
type: Boolean,
default: true,
,
,
data()
return
countData: this.count,
;
,
computed:
minusIconColor: function()
return this.countData === this.count ? '#CCC' : this.minusIconFillColor;
,
plusIconColor: function()
return this.countData === this.maxCount ? '#CCC' : this.plusIconFillColor;
,
,
methods:
decrement: function()
if (this.countData > this.count)
this.countData -= 1;
,
increment: function()
if (this.countData < this.maxCount)
this.countData += 1;
,
adjustCount: function()
if (this.countData > this.maxCount)
this.countData = this.maxCount;
else if (this.countData < this.count)
this.countData = this.count;
else
if (isNaN(Number(this.countData)))
this.countData = this.count;
,
);.nugget-quantity-counter
display: inline-flex;
.nugget-quantity-counter div:first-child
border: solid 1px #ccc;
border-radius: 5px 0px 0px 5px;
.nugget-quantity-counter div:nth-child(2)
border-top: solid 1px #ccc;
border-bottom: solid 1px #ccc;
display: flex;
flex-direction: column;
justify-content: center;
.nugget-quantity-counter input[type='text']
border-top: solid 1px #ccc;
border-bottom: solid 1px #ccc;
border-left: none;
border-right: none;
text-align: center;
width: 20px;
padding: 12px;
margin: 0;
font-size: 16px;
.nugget-quantity-counter div:last-child
border: solid 1px #ccc;
border-radius: 0px 5px 5px 0px;
.nugget-quantity-counter > div
cursor: pointer;
padding: 12px;
width: 20px;
text-align: center;
.nugget-quantity-counter > div > svg
height: 100%;
<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
<div @click="decrement">
<svg viewBox="0 0 24 24" :width="iconDimensions" :height="iconDimensions">
<g>
<path d='M64 0 M2 11 L2 13 L22 13 L22 11 Z' :fill="minusIconColor" />
</g>
</svg>
</div>
<input v-if="isCountEditable" type="text" v-model.number="countData" @blur="adjustCount" />
<div v-else>countData</div>
<div @click="increment">
<svg viewBox="0 0 24 24" :width="iconDimensions" :height="iconDimensions">
<g>
<path d="M 11 2 L 11 11 L 2 11 L 2 13 L 11 13 L 11 22 L 13 22 L 13 13 L 22 13 L 22 11 L 13 11 L 13 2 Z" :fill="plusIconColor" />
</g>
</svg>
</div>
</div>new Vue(
el: '#app',
name: 'quantity-selector',
props:
count:
type: Number,
default: 1,
, // Makes sense to have default product count value
maxCount:
type: Number,
default: 6,
, // maxCount makes sense when you have a restriction on the max quantity for a product
iconDimensions:
type: Number,
default: 15,
,
minusIconFillColor:
type: String,
default: '#000',
,
plusIconFillColor:
type: String,
default: '#000',
,
isCountEditable:
type: Boolean,
default: true,
,
,
data()
return
countData: this.count,
;
,
computed:
minusIconColor: function()
return this.countData === this.count ? '#CCC' : this.minusIconFillColor;
,
plusIconColor: function()
return this.countData === this.maxCount ? '#CCC' : this.plusIconFillColor;
,
,
methods:
decrement: function()
if (this.countData > this.count)
this.countData -= 1;
,
increment: function()
if (this.countData < this.maxCount)
this.countData += 1;
,
adjustCount: function()
if (this.countData > this.maxCount)
this.countData = this.maxCount;
else if (this.countData < this.count)
this.countData = this.count;
else
if (isNaN(Number(this.countData)))
this.countData = this.count;
,
);.nugget-quantity-counter
display: inline-flex;
.nugget-quantity-counter div:first-child
border: solid 1px #ccc;
border-radius: 5px 0px 0px 5px;
.nugget-quantity-counter div:nth-child(2)
border-top: solid 1px #ccc;
border-bottom: solid 1px #ccc;
display: flex;
flex-direction: column;
justify-content: center;
.nugget-quantity-counter input[type='text']
border-top: solid 1px #ccc;
border-bottom: solid 1px #ccc;
border-left: none;
border-right: none;
text-align: center;
width: 20px;
padding: 12px;
margin: 0;
font-size: 16px;
.nugget-quantity-counter div:last-child
border: solid 1px #ccc;
border-radius: 0px 5px 5px 0px;
.nugget-quantity-counter > div
cursor: pointer;
padding: 12px;
width: 20px;
text-align: center;
.nugget-quantity-counter > div > svg
height: 100%;
<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
<div @click="decrement">
<svg viewBox="0 0 24 24" :width="iconDimensions" :height="iconDimensions">
<g>
<path d='M64 0 M2 11 L2 13 L22 13 L22 11 Z' :fill="minusIconColor" />
</g>
</svg>
</div>
<input v-if="isCountEditable" type="text" v-model.number="countData" @blur="adjustCount" />
<div v-else>countData</div>
<div @click="increment">
<svg viewBox="0 0 24 24" :width="iconDimensions" :height="iconDimensions">
<g>
<path d="M 11 2 L 11 11 L 2 11 L 2 13 L 11 13 L 11 22 L 13 22 L 13 13 L 22 13 L 22 11 L 13 11 L 13 2 Z" :fill="plusIconColor" />
</g>
</svg>
</div>
</div>new Vue(
el: '#app',
name: 'quantity-selector',
props:
count:
type: Number,
default: 1,
, // Makes sense to have default product count value
maxCount:
type: Number,
default: 6,
, // maxCount makes sense when you have a restriction on the max quantity for a product
iconDimensions:
type: Number,
default: 15,
,
minusIconFillColor:
type: String,
default: '#000',
,
plusIconFillColor:
type: String,
default: '#000',
,
isCountEditable:
type: Boolean,
default: true,
,
,
data()
return
countData: this.count,
;
,
computed:
minusIconColor: function()
return this.countData === this.count ? '#CCC' : this.minusIconFillColor;
,
plusIconColor: function()
return this.countData === this.maxCount ? '#CCC' : this.plusIconFillColor;
,
,
methods:
decrement: function()
if (this.countData > this.count)
this.countData -= 1;
,
increment: function()
if (this.countData < this.maxCount)
this.countData += 1;
,
adjustCount: function()
if (this.countData > this.maxCount)
this.countData = this.maxCount;
else if (this.countData < this.count)
this.countData = this.count;
else
if (isNaN(Number(this.countData)))
this.countData = this.count;
,
);.nugget-quantity-counter
display: inline-flex;
.nugget-quantity-counter div:first-child
border: solid 1px #ccc;
border-radius: 5px 0px 0px 5px;
.nugget-quantity-counter div:nth-child(2)
border-top: solid 1px #ccc;
border-bottom: solid 1px #ccc;
display: flex;
flex-direction: column;
justify-content: center;
.nugget-quantity-counter input[type='text']
border-top: solid 1px #ccc;
border-bottom: solid 1px #ccc;
border-left: none;
border-right: none;
text-align: center;
width: 20px;
padding: 12px;
margin: 0;
font-size: 16px;
.nugget-quantity-counter div:last-child
border: solid 1px #ccc;
border-radius: 0px 5px 5px 0px;
.nugget-quantity-counter > div
cursor: pointer;
padding: 12px;
width: 20px;
text-align: center;
.nugget-quantity-counter > div > svg
height: 100%;
<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
<div @click="decrement">
<svg viewBox="0 0 24 24" :width="iconDimensions" :height="iconDimensions">
<g>
<path d='M64 0 M2 11 L2 13 L22 13 L22 11 Z' :fill="minusIconColor" />
</g>
</svg>
</div>
<input v-if="isCountEditable" type="text" v-model.number="countData" @blur="adjustCount" />
<div v-else>countData</div>
<div @click="increment">
<svg viewBox="0 0 24 24" :width="iconDimensions" :height="iconDimensions">
<g>
<path d="M 11 2 L 11 11 L 2 11 L 2 13 L 11 13 L 11 22 L 13 22 L 13 13 L 22 13 L 22 11 L 13 11 L 13 2 Z" :fill="plusIconColor" />
</g>
</svg>
</div>
</div>answered Nov 15 '18 at 1:34
Roy JRoy J
28k33361
edited Nov 15 '18 at 19:13
answered Nov 15 '18 at 1:34
Roy JRoy J
28k33361
answered Nov 15 '18 at 1:34
Roy JRoy J
28k33361
answered Nov 15 '18 at 1:34
Roy JRoy J
28k33361
28k33361
Thanks Roy. I had figured out as much. The Number and Text String thing. What confuses me is that how is the component working as expected then. See here - ecommerce-vue-nuggets.herokuapp.com
– Shreerang
Nov 15 '18 at 1:52
1
It works as I describe: manually set the value of the first input to 3, then click the plus. You have 31 in the blank. You start with a number value, but when the value is changed in the text item, it becomes a text value.
– Roy J
Nov 15 '18 at 1:58
1
Hi Roy. Though your answer pointed me in the right direction, I think we do not need to add Number(this.countData) everywhere. Instead we can<input type="text" v-model.number="countData" />This.numbermodifier onv-modelwill fix the issue.
– Shreerang
Nov 15 '18 at 19:03
I've updated my answer with that, which is of course a better option. Thanks for sharing that information!
– Roy J
Nov 15 '18 at 19:14
I too was given this answer on the Vue Forum! Thanks to LinusBorg - forum.vuejs.org/t/vue-unit-test/48709/2
– Shreerang
Nov 15 '18 at 19:16
|
show 2 more comments
Thanks Roy. I had figured out as much. The Number and Text String thing. What confuses me is that how is the component working as expected then. See here - ecommerce-vue-nuggets.herokuapp.com
– Shreerang
Nov 15 '18 at 1:52
1
It works as I describe: manually set the value of the first input to 3, then click the plus. You have 31 in the blank. You start with a number value, but when the value is changed in the text item, it becomes a text value.
– Roy J
Nov 15 '18 at 1:58
1
Hi Roy. Though your answer pointed me in the right direction, I think we do not need to add Number(this.countData) everywhere. Instead we can<input type="text" v-model.number="countData" />This.numbermodifier onv-modelwill fix the issue.
– Shreerang
Nov 15 '18 at 19:03
I've updated my answer with that, which is of course a better option. Thanks for sharing that information!
– Roy J
Nov 15 '18 at 19:14
I too was given this answer on the Vue Forum! Thanks to LinusBorg - forum.vuejs.org/t/vue-unit-test/48709/2
– Shreerang
Nov 15 '18 at 19:16
Thanks Roy. I had figured out as much. The Number and Text String thing. What confuses me is that how is the component working as expected then. See here - ecommerce-vue-nuggets.herokuapp.com
– Shreerang
Nov 15 '18 at 1:52
Thanks Roy. I had figured out as much. The Number and Text String thing. What confuses me is that how is the component working as expected then. See here - ecommerce-vue-nuggets.herokuapp.com
– Shreerang
Nov 15 '18 at 1:52
1
1
It works as I describe: manually set the value of the first input to 3, then click the plus. You have 31 in the blank. You start with a number value, but when the value is changed in the text item, it becomes a text value.
– Roy J
Nov 15 '18 at 1:58
It works as I describe: manually set the value of the first input to 3, then click the plus. You have 31 in the blank. You start with a number value, but when the value is changed in the text item, it becomes a text value.
– Roy J
Nov 15 '18 at 1:58
1
1
Hi Roy. Though your answer pointed me in the right direction, I think we do not need to add Number(this.countData) everywhere. Instead we can
<input type="text" v-model.number="countData" /> This .number modifier on v-model will fix the issue.– Shreerang
Nov 15 '18 at 19:03
Hi Roy. Though your answer pointed me in the right direction, I think we do not need to add Number(this.countData) everywhere. Instead we can
<input type="text" v-model.number="countData" /> This .number modifier on v-model will fix the issue.– Shreerang
Nov 15 '18 at 19:03
I've updated my answer with that, which is of course a better option. Thanks for sharing that information!
– Roy J
Nov 15 '18 at 19:14
I've updated my answer with that, which is of course a better option. Thanks for sharing that information!
– Roy J
Nov 15 '18 at 19:14
I too was given this answer on the Vue Forum! Thanks to LinusBorg - forum.vuejs.org/t/vue-unit-test/48709/2
– Shreerang
Nov 15 '18 at 19:16
I too was given this answer on the Vue Forum! Thanks to LinusBorg - forum.vuejs.org/t/vue-unit-test/48709/2
– Shreerang
Nov 15 '18 at 19:16
|
show 2 more comments
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53311015%2fvue-component-unit-testing%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
