Commit e1cf3899 authored by Dallas Reedy's avatar Dallas Reedy Committed by Miguel Rincon

Be explicit about which props a Vue component takes

- list each of the props that are gathered from the `dataset`
- also, we don't need to overcomplicate the specs by nesting `props`
  within an options object if the only option we ever use is `props`
parent 8e70f39c
...@@ -7,16 +7,26 @@ export const initTrialStatusWidget = () => { ...@@ -7,16 +7,26 @@ export const initTrialStatusWidget = () => {
if (!el) return undefined; if (!el) return undefined;
const { daysRemaining, percentageComplete, ...props } = el.dataset; const {
containerId,
daysRemaining,
navIconImagePath,
percentageComplete,
planName,
plansHref,
} = el.dataset;
return new Vue({ return new Vue({
el, el,
render: (createElement) => render: (createElement) =>
createElement(TrialStatusWidget, { createElement(TrialStatusWidget, {
props: { props: {
...props, containerId,
daysRemaining: Number(daysRemaining), daysRemaining: Number(daysRemaining),
navIconImagePath,
percentageComplete: Number(percentageComplete), percentageComplete: Number(percentageComplete),
planName,
plansHref,
}, },
}), }),
}); });
...@@ -27,14 +37,27 @@ export const initTrialStatusPopover = () => { ...@@ -27,14 +37,27 @@ export const initTrialStatusPopover = () => {
if (!el) return undefined; if (!el) return undefined;
const { trialEndDate, ...props } = el.dataset; const {
containerId,
groupName,
planName,
plansHref,
purchaseHref,
targetId,
trialEndDate,
} = el.dataset;
return new Vue({ return new Vue({
el, el,
render: (createElement) => render: (createElement) =>
createElement(TrialStatusPopover, { createElement(TrialStatusPopover, {
props: { props: {
...props, containerId,
groupName,
planName,
plansHref,
purchaseHref,
targetId,
trialEndDate: new Date(trialEndDate), trialEndDate: new Date(trialEndDate),
}, },
}), }),
......
...@@ -8,7 +8,7 @@ describe('TrialStatusWidget component', () => { ...@@ -8,7 +8,7 @@ describe('TrialStatusWidget component', () => {
const getGlLink = () => wrapper.findComponent(GlLink); const getGlLink = () => wrapper.findComponent(GlLink);
const createComponent = ({ props } = {}) => { const createComponent = (props = {}) => {
return shallowMount(TrialStatusWidget, { return shallowMount(TrialStatusWidget, {
propsData: { propsData: {
daysRemaining: 20, daysRemaining: 20,
...@@ -49,7 +49,7 @@ describe('TrialStatusWidget component', () => { ...@@ -49,7 +49,7 @@ describe('TrialStatusWidget component', () => {
describe('with the optional containerId prop', () => { describe('with the optional containerId prop', () => {
beforeEach(() => { beforeEach(() => {
wrapper = createComponent({ props: { containerId: 'some-id' } }); wrapper = createComponent({ containerId: 'some-id' });
}); });
it('renders with the given id', () => { it('renders with the given id', () => {
......
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