Revert "#12781 Add a unified component for small modals (#12987)"

This reverts commit 591c9bc98c.
2021-05-06 14:18:31 -05:00
parent ec3c319059
commit 833e2b195d
11 changed files with 699 additions and 673 deletions
@@ -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');
  });
 });
@@ -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: '<div><slot name="modal-header"></slot><slot></slot><footer><slot name="modal-footer"></slot></footer></div>',
-        },
-      },
-    });
-  });
-
-  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"]');
-  });
-});
@@ -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');
-  });
-});