chore: Upgrade tsconfigs (#1419)

pages/app/index.tsx

@@ -24,8 +24,7 @@ function App() {
     urlParams: { density, motionDisabled },
   } = useContext(AppContext);
 
-  const isAppLayout =
-    pageId !== undefined && (pageId.indexOf('app-layout') > -1 || pageId.indexOf('content-layout') > -1);
+  const isAppLayout = pageId !== undefined && (pageId.includes('app-layout') || pageId.includes('content-layout'));
   // AppLayout already contains <main>
   // Also, AppLayout pages should resemble the ConsoleNav 2.0 styles
   const ContentTag = isAppLayout ? 'div' : 'main';

pages/cards/selection.page.tsx

@@ -13,7 +13,7 @@ interface Item {
 const ariaLabels: CardsProps<Item>['ariaLabels'] = {
   selectionGroupLabel: 'group label',
   itemSelectionLabel: ({ selectedItems }, item) =>
-    `${item.text} is ${selectedItems.indexOf(item) < 0 ? 'not ' : ''}selected`,
+    `${item.text} is ${!selectedItems.includes(item) ? 'not ' : ''}selected`,
 };
 
 function createSimpleItems(count: number) {

pages/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "lib": ["ES2015", "DOM"],
+    "lib": ["ES2020", "DOM"],
     "target": "ES2015",
     "declaration": false,
     "declarationMap": false,

src/__a11y__/run-a11y-tests.ts

@@ -6,7 +6,7 @@ import useBrowser from '@cloudscape-design/browser-test-tools/use-browser';
 import { findAllPages } from '../__integ__/utils';
 import A11yPageObject from './a11y-page-object';
 
-type Theme = string;
+type Theme = 'default' | 'visual-refresh';
 type Mode = 'light' | 'dark';
 
 function setupTest(url: string, testFn: (page: A11yPageObject) => Promise<void>) {
@@ -19,21 +19,19 @@ function setupTest(url: string, testFn: (page: A11yPageObject) => Promise<void>)
 }
 
 function urlFormatter(inputUrl: string, theme: Theme, mode: Mode) {
-  return `#/${mode}/${inputUrl}?visualRefresh=${theme.indexOf('visual-refresh') !== -1 ? 'true' : 'false'}`;
+  return `#/${mode}/${inputUrl}?visualRefresh=${theme === 'visual-refresh' ? 'true' : 'false'}`;
 }
 
 export default function runA11yTests(theme: Theme, mode: Mode, skip: string[] = []) {
   describe(`A11y checks for ${mode} ${theme}`, () => {
     findAllPages().forEach(inputUrl => {
-      const testFunction =
-        [
-          ...skip,
-          'theming/tokens',
-          // this page intentionally has issues to test the helper
-          'undefined-texts',
-        ].indexOf(inputUrl) === -1
-          ? test
-          : test.skip;
+      const skipPages = [
+        ...skip,
+        'theming/tokens',
+        // this page intentionally has issues to test the helper
+        'undefined-texts',
+      ];
+      const testFunction = skipPages.includes(inputUrl) ? test.skip : test;
       const url = urlFormatter(inputUrl, theme, mode);
       testFunction(
         url,

src/__tests__/form-field-controls-integration.test.tsx

@@ -82,7 +82,7 @@ formFieldControlComponents.forEach(({ componentName, findNativeElement }) => {
   }
 
   describe(`${componentName}`, () => {
-    const isGroupComponent = ['radio-group', 'tiles'].indexOf(componentName) !== -1;
+    const isGroupComponent = ['radio-group', 'tiles'].includes(componentName);
     if (!isGroupComponent) {
       describe('controlId', () => {
         test('applies controlId from FormField when controlId is not set on itself', () => {

src/multiselect/__integ__/page-objects/multiselect-page.ts

@@ -1,10 +1,8 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import { strict as assert } from 'assert';
 import { MultiselectWrapper } from '../../../../lib/components/test-utils/selectors';
 import SelectPageObject from '../../../select/__integ__/page-objects/select-page';
 import optionStyles from '../../../../lib/components/internal/components/option/styles.selectors.js';
-import selectableItemStyles from '../../../../lib/components/internal/components/selectable-item/styles.selectors.js';
 
 export default class MultiselectPageObject extends SelectPageObject<MultiselectWrapper> {
   getOptionInGroup(groupNumber: number, optionNumber: number) {
@@ -15,15 +13,6 @@ export default class MultiselectPageObject extends SelectPageObject<MultiselectW
     await this.click(this.getOptionInGroup(groupNumber, optionNumber));
   }
 
-  async assertOptionSelected(groupNumber: number, optionNumber: number, isSelected: boolean) {
-    const className = await this.getElementAttribute(this.getOptionInGroup(groupNumber, optionNumber), 'class');
-    assert.equal(
-      className.indexOf(selectableItemStyles.selected),
-      isSelected,
-      `Option should be ${isSelected ? '' : 'not '} selected`
-    );
-  }
-
   clickTokenToggle() {
     return this.click(this.wrapper.findTokenToggle().toSelector());
   }

src/test-utils/tsconfig.json

@@ -4,7 +4,7 @@
     "incremental": true,
     "module": "CommonJS",
     "target": "ES2015",
-    "lib": ["ES2015", "DOM"],
+    "lib": ["ES2020", "DOM"],
     "declaration": true,
     "allowSyntheticDefaultImports": true,
     "outDir": "../../lib/components/test-utils",

tsconfig.integ.json

@@ -1,8 +1,7 @@
 {
+  "extends": "@tsconfig/node16/tsconfig.json",
   "compilerOptions": {
-    "module": "commonjs",
-    "target": "es2017",
-    "lib": ["es2017", "dom"],
+    "lib": ["es2020", "dom"],
     "types": ["jest"],
     "noEmit": true,
     "strict": true,

tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "lib": ["ES2015", "ES2017.Intl", "ES2018.Intl", "ES2020.Intl", "DOM"],
+    "lib": ["ES2020", "DOM"],
     "target": "ES2015",
     "types": [],
     "module": "ES2015",

tsconfig.unit.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "target": "es2018",
-    "lib": ["es2018", "dom"],
+    "lib": ["es2020", "dom"],
     "types": ["node", "jest", "@testing-library/jest-dom"],
     "moduleResolution": "node",
     "downlevelIteration": true,