(test): add test for subscription retry after failed subscription

packages/functional-tests/package.json

@@ -17,7 +17,7 @@
     "fxa-payments-server": "workspace:*",
     "fxa-settings": "workspace:*",
     "jsqr": "^1.4.0",
-    "playwright": "^1.18.0",
+    "playwright": "^1.20.0",
     "upng-js": "^2.1.0"
   }
 }

packages/functional-tests/pages/products/index.ts

@@ -9,6 +9,7 @@ export class SubscribePage extends BaseLayout {
 
   async setCreditCardInfo() {
     const frame = this.page.frame({ url: /elements-inner-card/ });
+    await frame.fill('.InputElement[name=cardnumber]', '');
     await frame.fill('.InputElement[name=cardnumber]', '4242424242424242');
     await frame.fill('.InputElement[name=exp-date]', '555');
     await frame.fill('.InputElement[name=cvc]', '333');
@@ -17,6 +18,16 @@ export class SubscribePage extends BaseLayout {
     await this.page.click('button[type=submit]');
   }
 
+  async setFailedCreditCardInfo() {
+    const frame = this.page.frame({ url: /elements-inner-card/ });
+    await frame.fill('.InputElement[name=cardnumber]', '4000000000000341');
+    await frame.fill('.InputElement[name=exp-date]', '666');
+    await frame.fill('.InputElement[name=cvc]', '444');
+    await frame.fill('.InputElement[name=postal]', '77777');
+    await this.page.check('input[type=checkbox]');
+    await this.page.click('button[type=submit]');
+  }
+
   async setPayPalInfo() {
     await this.page.check('[data-testid="confirm"]');
     const [paypalWindow] = await Promise.all([
@@ -35,18 +46,9 @@ export class SubscribePage extends BaseLayout {
     await paypalWindow.click('button[id=consentButton]');
   }
 
-  /*submit() {
-    return Promise.all([
-      this.page.click('button[type=submit]'),
-      this.page.waitForResponse(
-        (r) =>
-          r.request().method() === 'GET' &&
-          /\/mozilla-subscriptions\/customer\/billing-and-subscriptions$/.test(
-            r.request().url()
-          )
-      ),
-    ]);
-  }*/
+  async clickTryAgain() {
+    return Promise.all([this.page.click('[data-testid="retry-link"]')]);
+  }
 
   submit() {
     return Promise.all([

packages/functional-tests/tests/subscription.spec.ts

@@ -36,3 +36,24 @@ test.describe('severity-1', () => {
     expect(await relier.isPro()).toBe(true);
   });
 });
+
+test.describe('severity-1', () => {
+  test('subscribe with credit card after initial failed subscription', async ({
+    pages: { relier, login, subscribe },
+  }, { project }) => {
+    test.skip(project.name === 'production', 'prod needs a valid credit card');
+    test.skip(project.name === 'local', 'No need to be run on local');
+    test.slow();
+    await relier.goto();
+    await relier.clickSubscribe();
+    await subscribe.setFullName();
+    await subscribe.setFailedCreditCardInfo();
+    await subscribe.clickTryAgain();
+    await subscribe.setCreditCardInfo();
+    await subscribe.submit();
+    await relier.goto();
+    await relier.clickEmailFirst();
+    await login.submit();
+    expect(await relier.isPro()).toBe(true);
+  });
+});