Commit c0e7f3bd authored by Vitaly Slobodin's avatar Vitaly Slobodin

Add unit tests for summary_details.vue

parent ca50fc42
......@@ -63,22 +63,22 @@ export default {
<template>
<div>
<div class="d-flex justify-content-between bold gl-mt-3 gl-mb-3">
<div class="js-selected-plan">
<div data-testid="selected-plan">
{{ sprintf($options.i18n.selectedPlanText, { selectedPlanText }) }}
<span v-if="quantity > 0" class="js-quantity">{{
<span v-if="quantity > 0" data-testid="quantity">{{
sprintf($options.i18n.quantity, { quantity })
}}</span>
</div>
<div class="js-amount">{{ formatAmount(totalExVat, quantity > 0) }}</div>
<div data-testid="amount">{{ formatAmount(totalExVat, quantity > 0) }}</div>
</div>
<div class="text-secondary js-per-unit">
<div class="text-secondary" data-testid="price-per-unit">
{{
sprintf($options.i18n.pricePerUnitPerYear, {
selectedPlanPrice: selectedPlanPrice.toLocaleString(),
})
}}
</div>
<div v-if="purchaseHasExpiration" class="text-secondary js-dates">
<div v-if="purchaseHasExpiration" class="text-secondary" data-testid="subscription-period">
{{
sprintf($options.i18n.dates, {
startDate: formatDate(startDate),
......@@ -90,17 +90,17 @@ export default {
<div class="border-bottom gl-mt-3 gl-mb-3"></div>
<div class="d-flex justify-content-between text-secondary">
<div>{{ $options.i18n.subtotal }}</div>
<div class="js-total-ex-vat">{{ formatAmount(totalExVat, quantity > 0) }}</div>
<div data-testid="total-ex-vat">{{ formatAmount(totalExVat, quantity > 0) }}</div>
</div>
<div class="d-flex justify-content-between text-secondary">
<div>{{ $options.i18n.tax }}</div>
<div class="js-vat">{{ formatAmount(vat, quantity > 0) }}</div>
<div data-testid="vat">{{ formatAmount(vat, quantity > 0) }}</div>
</div>
</div>
<div class="border-bottom gl-mt-3 gl-mb-3"></div>
<div class="d-flex justify-content-between bold gl-font-lg">
<div>{{ $options.i18n.total }}</div>
<div class="js-total-amount">{{ formatAmount(totalAmount, quantity > 0) }}</div>
<div data-itestid="total-amount">{{ formatAmount(totalAmount, quantity > 0) }}</div>
</div>
</div>
</template>
import { shallowMount } from '@vue/test-utils';
import SummaryDetails from 'ee/subscriptions/buy_minutes/components/order_summary/summary_details.vue';
describe('SummaryDetails', () => {
let wrapper;
const createComponent = (props = {}) => {
return shallowMount(SummaryDetails, {
propsData: {
vat: 8,
totalExVat: 10,
selectedPlanText: 'Test',
selectedPlanPrice: 10,
totalAmount: 10,
quantity: 1,
...props,
},
});
};
const findQuantity = () => wrapper.find('[data-testid="quantity"]');
const findSubscriptionPeriod = () => wrapper.find('[data-testid="subscription-period"]');
const findTotalExVat = () => wrapper.find('[data-testid="total-ex-vat"]');
const findVat = () => wrapper.find('[data-testid="vat"]');
afterEach(() => {
wrapper.destroy();
});
describe('rendering', () => {
beforeEach(() => {
wrapper = createComponent();
});
it('renders the plan name', () => {
expect(wrapper.find('[data-testid="selected-plan"]').text()).toMatchInterpolatedText(
'Test plan (x1)',
);
});
it('renders the price per unit', () => {
expect(wrapper.find('[data-testid="price-per-unit"]').text()).toBe('$10 per pack per year');
});
});
describe('when quantity is greater then zero', () => {
beforeEach(() => {
wrapper = createComponent();
});
it('renders quantity', () => {
expect(findQuantity().isVisible()).toBe(true);
expect(findQuantity().text()).toBe('(x1)');
});
});
describe('when quantity is less or equal to zero', () => {
beforeEach(() => {
wrapper = createComponent({ quantity: 0 });
});
it('does not render quantity', () => {
expect(wrapper.find('[data-testid="quantity"]').exists()).toBe(false);
});
});
describe('when subscription has expiration', () => {
beforeEach(() => {
wrapper = createComponent({ purchaseHasExpiration: true });
});
it('renders subscription period', () => {
expect(findSubscriptionPeriod().isVisible()).toBe(true);
expect(findSubscriptionPeriod().text()).toBe('Jul 6, 2020 - Jul 6, 2021');
});
});
describe('when subscription does not have expiration', () => {
beforeEach(() => {
wrapper = createComponent({ purchaseHasExpiration: false });
});
it('does not render subscription period', () => {
expect(findSubscriptionPeriod().exists()).toBe(false);
});
});
describe('when tax rate is applied', () => {
beforeEach(() => {
wrapper = createComponent({ taxRate: 8 });
});
it('renders tax fields', () => {
expect(findTotalExVat().isVisible()).toBe(true);
expect(findTotalExVat().text()).toBe('$10');
expect(findVat().isVisible()).toBe(true);
expect(findVat().text()).toBe('$8');
});
});
describe('when tax rate is not applied', () => {
beforeEach(() => {
wrapper = createComponent();
});
it('does not render tax fields', () => {
expect(findTotalExVat().exists()).toBe(false);
expect(findVat().exists()).toBe(false);
});
});
});
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment