diff --git a/website/client/src/assets/scss/mixins.scss b/website/client/src/assets/scss/mixins.scss index b9efbd4b72..561be306ed 100644 --- a/website/client/src/assets/scss/mixins.scss +++ b/website/client/src/assets/scss/mixins.scss @@ -1,5 +1,3 @@ -@import '~@/assets/scss/colors.scss'; - @mixin centeredModal() { display: flex; justify-content: center; @@ -8,58 +6,4 @@ header, footer { border: 0; } -} - -@mixin smallModal() { - .modal-content { - border-radius: 8px; - box-shadow: 0 14px 28px 0 rgba($black, 0.24), 0 10px 10px 0 rgba($black, 0.28); - } - - @media (min-width: 576px) { - max-width: 20.625rem; - } - - header { - padding: 0; - border: none; - - h5 { - margin: 2rem auto 1rem; - color: $purple-200; - } - - button { - position: absolute; - right: 18px; - top: 12px; - font-weight: 100; - } - } - - footer { - padding: 0; - border: none; - - button { - margin: 0 auto 2rem; - } - } - - .greyed { - background-color: $gray-700; - } - - .modal-body { - padding: 0; - } - - .modal-text { - margin: 1.5rem; - min-height: auto !important; - } - - footer.greyed { - padding: 0 1.5rem 1rem; - } } \ No newline at end of file diff --git a/website/client/src/components/achievements/dropCapReached.vue b/website/client/src/components/achievements/dropCapReached.vue index b9a1072c77..a804fd78fa 100644 --- a/website/client/src/components/achievements/dropCapReached.vue +++ b/website/client/src/components/achievements/dropCapReached.vue @@ -1,63 +1,135 @@ + + diff --git a/website/client/src/components/achievements/wonChallenge.vue b/website/client/src/components/achievements/wonChallenge.vue index 4f7375299f..53ab170d63 100644 --- a/website/client/src/components/achievements/wonChallenge.vue +++ b/website/client/src/components/achievements/wonChallenge.vue @@ -1,72 +1,177 @@ + + diff --git a/website/client/src/components/payments/successModal.vue b/website/client/src/components/payments/successModal.vue index fd1e0a91b0..c816a3300d 100644 --- a/website/client/src/components/payments/successModal.vue +++ b/website/client/src/components/payments/successModal.vue @@ -1,12 +1,11 @@ @@ -122,10 +208,6 @@ import checkIcon from '@/assets/svg/check.svg'; import gemIcon from '@/assets/svg/gem.svg'; import subscriptionBlocks from '@/../../common/script/content/subscriptionBlocks'; -function groupPlanCost (price, memberCount = 1) { - return price + 3 * (memberCount - 1); -} - export default { data () { return { @@ -133,66 +215,35 @@ export default { check: checkIcon, gem: gemIcon, }), - isFromBalance: false, - gems: false, - boldSubTitle: false, - subTitle: '', - details: '', - renew: false, + paymentData: {}, }; }, computed: { - title () { - return this.$t(this.isFromBalance ? 'success' : 'paymentSuccessful'); + groupPlanCost () { + const sub = this.paymentData.subscription; + const memberCount = this.paymentData.group.memberCount || 1; + return sub.price + 3 * (memberCount - 1); + }, + isFromBalance () { + return this.paymentData.paymentType === 'gift-gems-balance'; }, }, mounted () { this.$root.$on('habitica:payment-success', data => { - const type = data.paymentType; - this.isFromBalance = type.includes('balance'); - this.gems = type.includes('gems'); - - if (this.gems) { - this.setGemData(type === 'gems', data); - } else { - this.setSubscriptionData(type, data); + if (['subscription', 'groupPlan', 'gift-subscription'].indexOf(data.paymentType) !== -1) { + data.subscription = subscriptionBlocks[data.subscriptionKey || data.gift.subscription.key]; } + this.paymentData = data; this.$root.$emit('bv::show::modal', 'payments-success-modal'); }); }, beforeDestroy () { + this.paymentData = {}; this.$root.$off('habitica:payments-success'); }, methods: { - setGemData (boughtGems, data) { - this.subTitle = boughtGems ? this.$t('paymentYouReceived') - : this.$t('paymentYouSentGems', { name: data.giftReceiver }); - this.boldSubTitle = boughtGems; - this.details = boughtGems ? data.gemsBlock.gems : data.gift.gems.amount; - this.renew = false; - }, - setSubscriptionData (type, data) { - const { price, months } = subscriptionBlocks[ - data.subscriptionKey || data.gift.subscription.key - ]; - const gift = type.includes('gift'); - const groupPlan = type.includes('group'); - const subbed = type === 'subscription'; - const amount = groupPlan ? groupPlanCost(price, data.group.memberCount) : price; - - if (groupPlan) { - this.subTitle = this.$t(data.newGroup ? 'groupPlanCreated' - : 'groupPlanUpgraded', { groupName: data.group.name }); - } else { - this.subTitle = subbed ? this.$t('nowSubscribed') - : this.$t('paymentYouSentSubscription', { name: data.giftReceiver, months }); - } - - this.boldSubTitle = subbed; - this.details = gift ? '' : this.$t('paymentSubBilling', { amount, months }); - this.renew = !gift; - }, close () { + this.paymentData = {}; this.$root.$emit('bv::hide::modal', 'payments-success-modal'); }, }, diff --git a/website/client/src/components/ui/modal/smallModal.vue b/website/client/src/components/ui/modal/smallModal.vue deleted file mode 100644 index 612dd06a20..0000000000 --- a/website/client/src/components/ui/modal/smallModal.vue +++ /dev/null @@ -1,56 +0,0 @@ - - - - - - diff --git a/website/client/src/components/ui/modal/starred.vue b/website/client/src/components/ui/modal/starred.vue deleted file mode 100644 index 93afd81914..0000000000 --- a/website/client/src/components/ui/modal/starred.vue +++ /dev/null @@ -1,40 +0,0 @@ - - - - - diff --git a/website/client/src/components/ui/modal/your-rewards.vue b/website/client/src/components/ui/modal/your-rewards.vue deleted file mode 100644 index cd265a806a..0000000000 --- a/website/client/src/components/ui/modal/your-rewards.vue +++ /dev/null @@ -1,51 +0,0 @@ - - - - - diff --git a/website/client/tests/unit/components/achievements/levelUp.spec.js b/website/client/tests/unit/components/achievements/levelUp.spec.js index fbf2a850c3..1888f5cf68 100644 --- a/website/client/tests/unit/components/achievements/levelUp.spec.js +++ b/website/client/tests/unit/components/achievements/levelUp.spec.js @@ -1,61 +1,78 @@ -import { shallowMount, createLocalVue } from '@vue/test-utils'; -import Store from '@/libs/store'; +import LevelUp from '@/components/achievements/levelUp.vue'; -import LevelUp from '@/components/achievements/levelUp'; +/* +// I couldn't get rendering to work for the modal, this is what I tried. +// Now the testing is done by overriding `this` for the exported computed +// functions directly. I intend to come back to this later to test it +// properly in a rendered component. + +import { mount, createLocalVue } from '@vue/test-utils'; +import BootstrapVue from 'bootstrap-vue'; +import Store from '@/libs/store'; const localVue = createLocalVue(); localVue.use(Store); +localVue.use(BootstrapVue); + +function createContainer () { + const container = document.createElement('div'); + document.body.appendChild(container); + return container; +} +*/ describe('LevelUp', () => { - function createWrapper (level = 10) { - const wrapper = shallowMount(LevelUp, { - store: new Store({ - state: { - user: { - data: { - stats: { - lvl: level, - buffs: {}, - }, - preferences: { hair: {} }, - items: { gear: { equipped: {} } }, - }, - }, - }, - getters: { 'members:hasClass': () => () => false }, - actions: {}, - }), - localVue, - mocks: { $t: (...args) => args.map(JSON.stringify).join(' ') }, - stubs: ['b-modal'], + function testFunction (name, level = 10) { + return LevelUp.computed[name].bind({ + user: { stats: { lvl: level } }, + $t: (...args) => args.map(JSON.stringify).join(' '), }); - - return wrapper; } - it('displays the right level in the title', () => { - const wrapper = createWrapper(12); + /* + // More potential rendering code + let wrapper; + beforeEach(async () => { + wrapper = mount(LevelUp, { + store: new Store({ + state: { user: { data: createUser() } }, + getters: {}, + actions: {}, + }), + propsData: { + static: true, + visible: true, + }, + localVue, + mocks: { $t: string => string }, + attachTo: createContainer(), + }); + }); + */ - expect(wrapper.vm.title).to.equal('"reachedLevel" {"level":12}'); + it('displays the right level in the title', () => { + const title = testFunction('title', 12); + + expect(title()).to.equal('"reachedLevel" {"level":12}'); }); it('does not display rewards for level 10', () => { - const wrapper = createWrapper(); + const displayRewardQuest = testFunction('displayRewardQuest', 10); - expect(wrapper.vm.displayRewardQuest).to.be.false; + expect(displayRewardQuest()).to.be.false; }); [15, 30, 40, 60].forEach(level => { it(`does display rewards for level ${level}`, () => { - const wrapper = createWrapper(level); + const displayRewardQuest = testFunction('displayRewardQuest', level); - expect(wrapper.vm.displayRewardQuest).to.be.true; + expect(displayRewardQuest()).to.be.true; }); }); it('generates the right test class for level 15', () => { - const wrapper = createWrapper(15); + const questClass = testFunction('questClass', 15); - expect(wrapper.vm.questClass).to.equal('scroll inventory_quest_scroll_atom1'); + expect(questClass()).to.equal('scroll inventory_quest_scroll_atom1'); }); }); diff --git a/website/client/tests/unit/components/payments/successModal.spec.js b/website/client/tests/unit/components/payments/successModal.spec.js deleted file mode 100644 index 5beed18f4e..0000000000 --- a/website/client/tests/unit/components/payments/successModal.spec.js +++ /dev/null @@ -1,141 +0,0 @@ -import { shallowMount, createLocalVue } from '@vue/test-utils'; - -import Store from '@/libs/store'; - -import successModal from '@/components/payments/successModal'; - -const localVue = createLocalVue(); -localVue.use(Store); - -describe('Success modal', () => { - let wrapper; - - function firePaymentSuccess (data) { - wrapper.vm.$root.$emit('habitica:payment-success', data); - } - - beforeEach(async () => { - wrapper = shallowMount(successModal, { - store: new Store({ - state: {}, - getters: {}, - actions: {}, - }), - localVue, - mocks: { $t: (...args) => JSON.stringify(args) }, - stubs: { - 'b-modal': { - template: '
', - }, - }, - }); - }); - - it('Displays payment success when buying gems', () => { - firePaymentSuccess({ - paymentType: 'gems', - gemsBlock: { gems: 5 }, - }); - - expect(wrapper.find('h2').text()).to.equal('["paymentSuccessful"]'); - expect(wrapper.find('section :first-child').text()).to.equal('["paymentYouReceived"]'); - expect(wrapper.find('.details-block').text()).to.equal('5'); - expect(wrapper.find('footer').text()).to.equal('["giftSubscriptionText4"]'); - }); - - it('Displays success when gifting gems from balance', () => { - firePaymentSuccess({ - paymentType: 'gift-gems-balance', - giftReceiver: 'Lucky User', - gift: { gems: { amount: 3 } }, - }); - - expect(wrapper.find('h2').text()).to.equal('["success"]'); - expect(wrapper.find('section :first-child').text()).to.equal('["paymentYouSentGems",{"name":"Lucky User"}]'); - expect(wrapper.find('.details-block').text()).to.equal('3'); - }); - - it('Displays payment success when gifting gems through payment', () => { - firePaymentSuccess({ - paymentType: 'gift-gems', - giftReceiver: 'Lucky User', - gift: { gems: { amount: 7 } }, - }); - - expect(wrapper.find('h2').text()).to.equal('["paymentSuccessful"]'); - expect(wrapper.find('section :first-child').text()).to.equal('["paymentYouSentGems",{"name":"Lucky User"}]'); - expect(wrapper.find('.details-block').text()).to.equal('7'); - expect(wrapper.find('footer').text()).to.equal('["giftSubscriptionText4"]'); - }); - - it('Displays payment success when gifting subscription', () => { - firePaymentSuccess({ - paymentType: 'gift-subscription', - giftReceiver: 'Very lucky User', - subscriptionKey: 'basic_6mo', - }); - - expect(wrapper.find('h2').text()).to.equal('["paymentSuccessful"]'); - expect(wrapper.find('section :first-child').text()).to.equal('["paymentYouSentSubscription",{"name":"Very lucky User","months":6}]'); - expect(wrapper.find('.details-block').exists()).to.be.false; - expect(wrapper.find('footer').text()).to.equal('["giftSubscriptionText4"]'); - }); - - it('Displays payment success when subscribing', () => { - firePaymentSuccess({ - paymentType: 'subscription', - subscriptionKey: 'basic_6mo', - }); - - expect(wrapper.find('h2').text()).to.equal('["paymentSuccessful"]'); - expect(wrapper.find('section :first-child').text()).to.equal('["nowSubscribed"]'); - expect(wrapper.find('.details-block').text()).to.equal('["paymentSubBilling",{"amount":30,"months":6}]'); - expect(wrapper.find('footer').text()).to.equal('["giftSubscriptionText4"]'); - }); - - it('Displays payment success when creating new group plan', () => { - firePaymentSuccess({ - paymentType: 'groupPlan', - subscriptionKey: 'basic_6mo', - newGroup: true, - group: { - name: 'The best group', - memberCount: 5, - }, - }); - - expect(wrapper.find('h2').text()).to.equal('["paymentSuccessful"]'); - expect(wrapper.find('section :first-child').text()).to.equal('["groupPlanCreated",{"groupName":"The best group"}]'); - expect(wrapper.find('.details-block').text()).to.equal('["paymentSubBilling",{"amount":42,"months":6}]'); - expect(wrapper.find('footer').text()).to.equal('["giftSubscriptionText4"]'); - }); - - it('Displays payment success when upgrading group plan', () => { - firePaymentSuccess({ - paymentType: 'groupPlan', - subscriptionKey: 'basic_6mo', - group: { - name: 'The best group', - memberCount: 2, - }, - }); - - expect(wrapper.find('h2').text()).to.equal('["paymentSuccessful"]'); - expect(wrapper.find('section :first-child').text()).to.equal('["groupPlanUpgraded",{"groupName":"The best group"}]'); - expect(wrapper.find('.details-block').text()).to.equal('["paymentSubBilling",{"amount":33,"months":6}]'); - expect(wrapper.find('footer').text()).to.equal('["giftSubscriptionText4"]'); - }); - - it('Displays payment success when upgrading group plan without memberCount', () => { - firePaymentSuccess({ - paymentType: 'groupPlan', - subscriptionKey: 'basic_3mo', - group: { name: 'The solo group' }, - }); - - expect(wrapper.find('h2').text()).to.equal('["paymentSuccessful"]'); - expect(wrapper.find('section :first-child').text()).to.equal('["groupPlanUpgraded",{"groupName":"The solo group"}]'); - expect(wrapper.find('.details-block').text()).to.equal('["paymentSubBilling",{"amount":15,"months":3}]'); - expect(wrapper.find('footer').text()).to.equal('["giftSubscriptionText4"]'); - }); -}); diff --git a/website/client/tests/unit/components/ui/modal/smallModal.spec.js b/website/client/tests/unit/components/ui/modal/smallModal.spec.js deleted file mode 100644 index a6875722e6..0000000000 --- a/website/client/tests/unit/components/ui/modal/smallModal.spec.js +++ /dev/null @@ -1,33 +0,0 @@ -import { mount, createLocalVue } from '@vue/test-utils'; -import BootstrapVue from 'bootstrap-vue'; -import Store from '@/libs/store'; - -import smallModal from '@/components/ui/modal/smallModal'; - -const localVue = createLocalVue(); -localVue.use(Store); -localVue.use(BootstrapVue); - -describe('Small modal', () => { - let wrapper; - beforeEach(async () => { - wrapper = mount(smallModal, { - store: new Store({ - state: {}, - getters: {}, - actions: {}, - }), - propsData: { - id: 'test-small-modal', - title: 'Test title', - }, - localVue, - mocks: { $t: (s, args) => s + JSON.stringify(args) }, - }); - wrapper.setData({ disableLazyRender: true }); - }); - - it('Displays passed in title in Bootstrap modal with passed in ID', () => { - expect(wrapper.find('#test-small-modal .modal-sm .modal-title').text()).to.equal('Test title'); - }); -});