Improve type testing for older versions of TypeScript (#254)

* Run types tests with multiple versions of TypeScript

* Test older versions of TypeScript by separate @ts-expect-error tests

* Remove old versions test from GitHub actions workflow

* Add comment

.github/workflows/test.yml

@@ -16,5 +16,4 @@ jobs:
  - run: yarn run lint
  - run: yarn run typecheck
  - run: yarn run test:unit
- - run: yarn run test:versions
  - run: yarn run test:types

package.json

@@ -10,8 +10,7 @@
  "scripts": {
  "test": "yarn lint && yarn test:unit && yarn test:versions && yarn test:types && yarn typecheck",
  "test:unit": "jest",
- "test:versions": "./tests/versions/scripts/test.sh",
- "test:types": "tsc -p ./tests/types",
+ "test:types": "zx --quiet ./tests/types/scripts/test.mjs",
  "lint": "eslint '{src,types}/**/*.{ts,js}' && yarn prettier-check",
  "typecheck": "tsc",
  "build": "yarn clean && yarn rollup -c",
@@ -57,6 +56,7 @@
  "rollup-plugin-babel": "^4.3.3",
  "rollup-plugin-typescript2": "^0.25.3",
  "ts-jest": "^24.3.0",
- "typescript": "^4.1.2"
+ "typescript": "^4.1.2",
+ "zx": "^4.2.0"
  }
 }

tests/types/.eslintignore

@@ -0,0 +1 @@
+src

tests/types/scripts/test.mjs

@@ -0,0 +1,48 @@
+#!/usr/bin/env zx
+
+import fs from 'fs';
+import 'zx/globals';
+
+const VERSIONS = [
+ 'next',
+ 'beta',
+ 'latest',
+ '3.9.7',
+ '3.8.3',
+ '3.7.4',
+ '3.6.3',
+ '3.5.1',
+ '3.4.4',
+ '3.3.3',
+ '3.2.1',
+
+ // Attempting to test on 3.1.1 currently fails. I believe it is not a
+ // fundamental incompability with the types, just some tsconfig.json changes
+ // that are needed. Skipping for now
+ // '3.1.1',
+];
+
+const TYPE_TESTS_DIR = `${__dirname}/..`;
+
+// Ensure working directory is test directory
+cd(TYPE_TESTS_DIR);
+
+if (fs.existsSync(`${TYPE_TESTS_DIR}/package.json`)) {
+ await $`rm package.json`;
+}
+
+await $`yarn init -sy`;
+
+for (const version of VERSIONS) {
+ console.log(`--- Testing with TypeScript version ${version}`);
+ await $`yarn add -s --no-progress typescript@${version}`;
+ await $`yarn run tsc --strict --noEmit src/valid.ts`;
+
+ // TypeScript versions >= 3.9.0 support [@ts-expect-error][0], which lets us
+ // write tests for types that we expect to cause errors
+ //
+ // [0]: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-9.html#-ts-expect-error-comments
+ if (version >= '3.9.0') {
+ await $`yarn run tsc --strict --noEmit src/invalid.ts`;
+ }
+}

tests/types/src/invalid.ts

@@ -0,0 +1,91 @@
+///<reference path='../../../types/index.d.ts' />
+
+import {
+ Stripe,
+ StripeElements,
+ StripeCardElement,
+ StripeIbanElement,
+ StripePaymentElement,
+} from '@stripe/stripe-js';
+
+declare const stripe: Stripe;
+declare const elements: StripeElements;
+declare const cardElement: StripeCardElement;
+declare const ibanElement: StripeIbanElement;
+declare const paymentElement: StripePaymentElement;
+
+elements.update({
+ // @ts-expect-error: `clientSecret` is not updatable
+ clientSecret: 'pk_foo_secret_bar',
+});
+
+elements.update({
+ // @ts-expect-error: `fonts` is not updatable
+ fonts: [],
+});
+
+paymentElement.on('change', (e) => {
+ // @ts-expect-error: `error` is not present on PaymentElement "change" event.
+ if (e.error) {
+ }
+});
+
+stripe
+ .confirmPayment({elements, confirmParams: {return_url: ''}})
+ .then((res) => {
+ if (res.error) {
+ }
+
+ // @ts-expect-error redirect only, no paymentIntent expected
+ if (res.paymentIntent) {
+ }
+ });
+
+stripe
+ .confirmPayment({
+ elements,
+ confirmParams: {return_url: ''},
+ redirect: 'always',
+ })
+ .then((res) => {
+ if (res.error) {
+ }
+
+ // @ts-expect-error redirect only, no paymentIntent expected
+ if (res.paymentIntent) {
+ }
+ });
+
+stripe.confirmSetup({elements, confirmParams: {return_url: ''}}).then((res) => {
+ if (res.error) {
+ }
+
+ // @ts-expect-error redirect only, no paymentIntent expected
+ if (res.paymentIntent) {
+ }
+});
+
+stripe
+ .confirmSetup({elements, confirmParams: {return_url: ''}, redirect: 'always'})
+ .then((res) => {
+ if (res.error) {
+ }
+
+ // @ts-expect-error redirect only, no paymentIntent expected
+ if (res.paymentIntent) {
+ }
+ });
+
+stripe.createToken(cardElement, {
+ currency: '',
+ name: '',
+ // @ts-expect-error: `extra_property` is not valid
+ extra_property: '',
+});
+
+// @ts-expect-error: `extra_property` is not valid
+stripe.createToken(ibanElement, {
+ currency: '',
+ account_holder_name: '',
+ extra_property: '',
+});

tests/types/index.ts → tests/types/src/valid.ts

@@ -1,4 +1,4 @@
-///<reference path='../../types/index.d.ts' />
+///<reference path='../../../types/index.d.ts' />
 
 import {assert, Has} from 'conditional-type-checks';
 
@@ -51,12 +51,12 @@ const stripePromise: Promise<Stripe | null> = loadStripe('');
 const stripeConnectPromise = loadStripe('', {stripeAccount: '', locale: 'en'});
 
 type TypeModule = typeof import('@stripe/stripe-js');
-type SrcModule = typeof import('../../src/index');
+type SrcModule = typeof import('../../../src/index');
 
 // Makes sure that the implementation matches the type definitions
 // Checking for compatibility both ways ensures that the exports
 // are equivalent with nothing missing on either side.
-import('../../src/index').then((srcModule: TypeModule) => {});
+import('../../../src/index').then((srcModule: TypeModule) => {});
 import('@stripe/stripe-js').then((typeModule: SrcModule) => {});
 
 const stripe: Stripe = window.Stripe!('pk_123');
@@ -134,14 +134,6 @@ elements.update({
  },
  },
 });
-elements.update({
- // @ts-expect-error: `clientSecret` is not updatable
- clientSecret: 'pk_foo_secret_bar',
-});
-elements.update({
- // @ts-expect-error: `fonts` is not updatable
- fonts: [],
-});
 
 const auBankAccountElement = elements.create('auBankAccount', {});
 
@@ -198,13 +190,6 @@ const retrievedCardCvcElement: StripeCardCvcElement | null = elements.getElement
  'cardCvc'
 );
 
-stripe.createToken(cardElement, {
- currency: '',
- name: '',
- // @ts-expect-error: `extra_property` is not valid
- extra_property: '',
-});
-
 const fpxBankElement = elements.create('fpxBank', {
  style: MY_STYLE,
  value: '',
@@ -227,13 +212,6 @@ const retrievedIbanElement: StripeIbanElement | null = elements.getElement(
  'iban'
 );
 
-// @ts-expect-error: `extra_property` is not valid
-stripe.createToken(ibanElement, {
- currency: '',
- account_holder_name: '',
- extra_property: '',
-});
-
 const idealBankElement = elements.create('idealBank', {
  style: MY_STYLE,
  value: '',
@@ -330,12 +308,6 @@ paymentElement
  }) => {}
  );
 
-paymentElement.on('change', (e) => {
- // @ts-expect-error: `error` is not present on PaymentElement "change" event.
- if (e.error) {
- }
-});
-
 paymentElement.collapse();
 
 affirmMessageElement.on('ready', (e: {elementType: 'affirmMessage'}) => {});
@@ -1908,37 +1880,6 @@ stripe
  }) => null
  );
 
-stripe
- .confirmPayment({
- elements,
- confirmParams: {
- return_url: '',
- },
- })
- .then((res) => {
- if (res.error) {
- }
- // @ts-expect-error redirect only, no paymentIntent expected
- if (res.paymentIntent) {
- }
- });
-
-stripe
- .confirmPayment({
- elements,
- confirmParams: {
- return_url: '',
- },
- redirect: 'always',
- })
- .then((res) => {
- if (res.error) {
- }
- // @ts-expect-error redirect only, no paymentIntent expected
- if (res.paymentIntent) {
- }
- });
-
 stripe
  .confirmPayment({
  elements,
@@ -1963,37 +1904,6 @@ stripe
  }
  });
 
-stripe
- .confirmSetup({
- elements,
- confirmParams: {
- return_url: '',
- },
- })
- .then((res) => {
- if (res.error) {
- }
- // @ts-expect-error redirect only, no paymentIntent expected
- if (res.paymentIntent) {
- }
- });
-
-stripe
- .confirmSetup({
- elements,
- confirmParams: {
- return_url: '',
- },
- redirect: 'always',
- })
- .then((res) => {
- if (res.error) {
- }
- // @ts-expect-error redirect only, no paymentIntent expected
- if (res.paymentIntent) {
- }
- });
-
 stripe
  .confirmSetup({
  elements,