add cypress tests for subscription page
This commit is contained in:
Nuwan
parent
7b0d6c153e
commit
05d8db9cfa
|
|
@ -0,0 +1,129 @@
|
|||
/// <reference types="cypress" />
|
||||
|
||||
import makeFakeUser from '../../factories/user';
|
||||
|
||||
describe('User subscribe to a plan', () => {
|
||||
beforeEach(() => {
|
||||
// Log in to the application or navigate to the account page
|
||||
// where the change email feature is available
|
||||
const currentUser = makeFakeUser({
|
||||
email: 'sam@example.com'
|
||||
});
|
||||
cy.stubAuthenticate({ ...currentUser });
|
||||
|
||||
Cypress.on('window:before:load', win => {
|
||||
win.gon = {
|
||||
//session variables
|
||||
global: {
|
||||
subscription_codes: [
|
||||
{
|
||||
id: null,
|
||||
name: 'Free',
|
||||
price: 0,
|
||||
cycle: 'month'
|
||||
},
|
||||
{
|
||||
id: 'jamsubsilver',
|
||||
name: 'Silver',
|
||||
price: 4.99,
|
||||
cycle: 'month'
|
||||
},
|
||||
{
|
||||
id: 'jamsubgold',
|
||||
name: 'Gold',
|
||||
price: 9.99,
|
||||
cycle: 'month'
|
||||
},
|
||||
{
|
||||
id: 'jamsubplatinum',
|
||||
name: 'Platinum',
|
||||
price: 19.99,
|
||||
cycle: 'month'
|
||||
},
|
||||
{
|
||||
id: 'jamsubsilveryearly',
|
||||
name: 'Silver',
|
||||
price: 49.99,
|
||||
cycle: 'year'
|
||||
},
|
||||
{
|
||||
id: 'jamsubgoldyearly',
|
||||
name: 'Gold',
|
||||
price: 99.99,
|
||||
cycle: 'year'
|
||||
},
|
||||
{
|
||||
id: 'jamsubplatinumyearly',
|
||||
name: 'Platinum',
|
||||
price: 199.99,
|
||||
cycle: 'year'
|
||||
},
|
||||
]
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
cy.intercept('GET', /\S+\/get_subscription/, {
|
||||
statusCode: 200,
|
||||
body: {
|
||||
past_due: false,
|
||||
has_billing_info: true,
|
||||
plan_code: 'jamsubsilver',
|
||||
desired_plan_code: 'jamsubgold',
|
||||
admin_overide_plan_code: null,
|
||||
admin_overide_ends_at: null,
|
||||
in_trial: false,
|
||||
trial_ends_at: null,
|
||||
subscription: {
|
||||
|
||||
},
|
||||
subscription_rules: {
|
||||
remaining_monthly_play_time: null
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
it('should display the current plan', () => {
|
||||
cy.visit('/account/subscription');
|
||||
|
||||
// Assert that the current plan is displayed
|
||||
cy.get('[data-testid=changeSubscriptionForm]').within($form => {
|
||||
cy.get('label').contains('Subscription Plan');
|
||||
cy.get('.select-plan__single-value').should('contain', 'Gold ($9.99/month)');
|
||||
cy.get('input[type=submit]').should('have.value', 'Save Plan').should('be.disabled');
|
||||
});
|
||||
|
||||
cy.get('[data-testid=playtime]').within($playtime => {
|
||||
cy.get('label').contains('You have unlimited play time');
|
||||
});
|
||||
|
||||
cy.get('[data-testid=subscription-explanation]').within($expl => {
|
||||
cy.get('.alert').contains('You are currently on the Silver (monthly) level, thank you!');
|
||||
});
|
||||
});
|
||||
|
||||
it('change plan', () => {
|
||||
cy.visit('/account/subscription');
|
||||
|
||||
cy.get('[data-testid=changeSubscriptionForm]').within($form => {
|
||||
cy.get('.select-plan__control').click();
|
||||
cy.get('.select-plan__option').contains('Platinum ($19.99/month)').click();
|
||||
cy.get('input[type=submit]').should('be.enabled').click();
|
||||
});
|
||||
|
||||
const text = 'You have selected the PLATINUM MONTHLY PLAN and will be charged US$19.99'
|
||||
cy.contains('.modal-body', text).should('be.visible');
|
||||
cy.get('.modal-content').find('.modal-footer').contains('OK').click();
|
||||
|
||||
cy.get('.modal-body').should('not.be.visible');
|
||||
// cy.get('[data-testid=subscription-explanation]').within($expl => {
|
||||
// cy.get('.alert').contains('You are currently on the Silver (monthly) level, thank you! And your plan and billing will switch to the Platinum (monthly) level on the next billing cycle.');
|
||||
// });
|
||||
cy.get('input[type=submit]').should('be.disabled')
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
|
|
@ -45,10 +45,10 @@ function JKSubscriptionPlan({ userPlan, setUserPlan, getDisplayName }) {
|
|||
const yearly = [{ value: 'yearly', isDisabled: true, label: '-------- YEARLY PLANS --------' }];
|
||||
window.gon.global.subscription_codes.forEach(plan => {
|
||||
if (plan.cycle === 'month') {
|
||||
monthly.push({ value: plan.id || '', label: `${plan.name} (${plan.price.toFixed(2)}/${plan.cycle})` });
|
||||
monthly.push({ value: plan.id || '', label: `${plan.name} ($${plan.price.toFixed(2)}/${plan.cycle})` });
|
||||
}
|
||||
if (plan.cycle === 'year') {
|
||||
yearly.push({ value: plan.id || '', label: `${plan.name} (${plan.price.toFixed(2)}/${plan.cycle})` });
|
||||
yearly.push({ value: plan.id || '', label: `${plan.name} ($${plan.price.toFixed(2)}/${plan.cycle})` });
|
||||
}
|
||||
});
|
||||
const all = [...monthly, ...yearly];
|
||||
|
|
@ -159,7 +159,7 @@ function JKSubscriptionPlan({ userPlan, setUserPlan, getDisplayName }) {
|
|||
<Form
|
||||
className="mt-2"
|
||||
onSubmit={handleSubmit(onSubmit)}
|
||||
data-testid="edit_email_form"
|
||||
data-testid="changeSubscriptionForm"
|
||||
>
|
||||
{plans && userPlan && userPlan.plan_code && (
|
||||
<>
|
||||
|
|
@ -171,10 +171,10 @@ function JKSubscriptionPlan({ userPlan, setUserPlan, getDisplayName }) {
|
|||
render={({ field: { onChange, value } }) => {
|
||||
const plan = plans.find(plan => plan.value === value);
|
||||
if (!plan) {
|
||||
return <Select data-testid="countrySelect" onChange={handleChange} options={plans} />;
|
||||
return <Select classNamePrefix="select-plan" data-testid="countrySelect" onChange={handleChange} options={plans} />;
|
||||
}
|
||||
return (
|
||||
<Select data-testid="countrySelect" value={plan} onChange={handleChange} options={plans} />
|
||||
<Select classNamePrefix="select-plan" data-testid="countrySelect" value={plan} onChange={handleChange} options={plans} />
|
||||
);
|
||||
}}
|
||||
/>
|
||||
|
|
@ -186,7 +186,6 @@ function JKSubscriptionPlan({ userPlan, setUserPlan, getDisplayName }) {
|
|||
className="btn btn-primary"
|
||||
value={t('subscription.current_plan.submit')}
|
||||
disabled={submitting || [userPlan.desired_plan_code].includes(getValues('plan_code'))}
|
||||
data-testid="email_submit"
|
||||
/>
|
||||
<span className="ml-2">{submitting && <FontAwesomeIcon icon="spinner" />}</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -144,7 +144,8 @@ function JKSubscriptionPlaytime({ userPlan, getDisplayName }) {
|
|||
if (userPlan.subscription.plan.plan_code !== userPlan.plan_code) {
|
||||
billingAddendumTxt = ` You have paid only for the <strong>${planNameWithCycle(
|
||||
userPlan.subscription.plan.plan_code
|
||||
)}</strong> level for the current billing cycle, so there will be a change to the <strong>${this.planNameWithCycle(userPlan.subscription.pending_subscription.plan.plan_code
|
||||
)}</strong> level for the current billing cycle, so there will be a change to the <strong>${planNameWithCycle(
|
||||
userPlan.subscription.pending_subscription.plan.plan_code
|
||||
)}</strong> level on the next billing cycle.`;
|
||||
} else {
|
||||
billingAddendumTxt = ` And your plan and billing will switch to the <strong>${planNameWithCycle(
|
||||
|
|
@ -168,22 +169,23 @@ function JKSubscriptionPlaytime({ userPlan, getDisplayName }) {
|
|||
<h5>{t('subscription.play_time.title')}</h5>
|
||||
</CardHeader>
|
||||
<CardBody className="bg-light" style={{ minHeight: 300, minWidth: 280 }}>
|
||||
<div>
|
||||
<div data-testid="playtime">
|
||||
{userPlan && userPlan.subscription_rules.remaining_month_play_time ? (
|
||||
<div className="play-time">
|
||||
<p>
|
||||
You have <strong>{planNameWithCycle(userPlan.subscription_rules.remaining_month_play_time)}</strong> remaining
|
||||
this month. Only the time you spend in a session with 2 or more people uses your session play time.
|
||||
</p>
|
||||
<label>
|
||||
You have <strong>{planNameWithCycle(userPlan.subscription_rules.remaining_month_play_time)}</strong>{' '}
|
||||
remaining this month. Only the time you spend in a session with 2 or more people uses your session play
|
||||
time.
|
||||
</label>
|
||||
</div>
|
||||
) : (
|
||||
<div className="play-time">
|
||||
<p>You have unlimited play time.</p>
|
||||
<label>You have unlimited play time.</label>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mt-3">
|
||||
<div className="mt-3" data-testid="subscription-explanation">
|
||||
<small>
|
||||
{explanation && (
|
||||
<div className="alert alert-info">
|
||||
|
|
|
|||
Loading…
Reference in New Issue