chore: Fix linting errors

.eslintrc.js

@@ -27,6 +27,7 @@ module.exports = {
     'jest',
   ],
   rules: {
+    '@typescript-eslint/no-unused-expressions': 'off',
     '@typescript-eslint/no-empty-function': 'off',
     '@typescript-eslint/no-namespace': 'off',
     '@typescript-eslint/no-unused-vars': 'error',
@@ -113,7 +114,7 @@ module.exports = {
     {
       files: ['*.js', 'build-tools/**'],
       rules: {
-        '@typescript-eslint/no-var-requires': 'off',
+        '@typescript-eslint/no-require-imports': 'off',
       },
       env: {
         browser: false,

package.json

@@ -16,7 +16,7 @@
     "test:integ": "gulp test:integ",
     "test:motion": "gulp test:motion",
     "lint": "npm-run-all --parallel lint:*",
-    "lint:eslint": "exit 0",
+    "lint:eslint": "eslint --ignore-path .gitignore --ext ts,tsx,js .",
     "lint:stylelint": "stylelint --ignore-path .gitignore --fix '{src,pages}/**/*.{css,scss}'",
     "start": "npm-run-all --parallel start:watch start:dev",
     "start:watch": "gulp watch",

pages/select/select.test.async.page.tsx

@@ -101,7 +101,7 @@ export default class App extends React.Component {
         status: hasNextPage ? 'pending' : 'finished',
         options: this.pageNumber === 0 ? items : this.state.options.concat(items),
       });
-    } catch (error) {
+    } catch {
       this.setState({
         status: 'error',
       });

src/__tests__/functional-tests/public-exports.test.ts

@@ -1,11 +1,11 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 
+import { readFileSync } from 'fs';
 import path from 'path';
 
 // There are no typings for package.json
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const packageJson = require('../../../lib/components/package.json');
+const packageJson = JSON.parse(readFileSync(path.join(__dirname, '../../../lib/components/package.json'), 'utf-8'));
 
 test('all exports declarations resolve to a file', () => {
   for (const exportPath of Object.values<string>(packageJson.exports)) {

src/__tests__/functional-tests/ssr.test.ts

@@ -52,6 +52,6 @@ describe.each(vrOnlyComponents)('VR only component %s', componentName => {
   test('should throw an error in classic', () => {
     const { default: Component } = requireComponent(componentName);
     const props = getRequiredPropsForComponent(componentName);
-    expect(() => renderToStaticMarkup(React.createElement(Component, props, 'test content'))).toThrowError();
+    expect(() => renderToStaticMarkup(React.createElement(Component, props, 'test content'))).toThrow();
   });
 });

src/__tests__/snapshot-tests/test-utils-selectors.test.tsx

@@ -7,6 +7,7 @@ import glob from 'glob';
 import { flatten, zip } from 'lodash';
 import path from 'path';
 
+// eslint-disable-next-line @typescript-eslint/no-require-imports
 const defaultPlugins = [require('@babel/plugin-syntax-typescript')] as const;
 
 // The test extracts generated selectors from the compiled output and matches those against the snapshot.
@@ -86,11 +87,11 @@ function extractSelectorProperties(file: string, onExtract: (filePath: string, p
     } as PluginObj;
   }
   const source = fs.readFileSync(file, 'utf-8');
-  transformSync(source, { babelrc: false, configFile: false, plugins: [...defaultPlugins, extractor] })?.code;
+  transformSync(source, { babelrc: false, configFile: false, plugins: [...defaultPlugins, extractor] });
 }
 
 function extractComponentSelectors(file: string, usedProperties: string[], onExtract: (selector: string) => void) {
-  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
   const source = require(file);
   if (typeof source.default !== 'object') {
     throw new Error(`Unexpected selectors file format at ${file}.`);

src/__tests__/utils.tsx

@@ -1,5 +1,3 @@
-/* eslint-env node */
-/* eslint-disable header/header */
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
@@ -62,16 +60,19 @@ function wrap({ default: Component }: { default: React.ComponentType }, Wrapper:
 
 export function requireComponent(componentName: string): any {
   if (componentName === 'split-panel') {
-    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
     return wrap(require(path.join(componentsDir, 'split-panel')), WrappedSplitPanel);
   }
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
   return require(path.join(componentsDir, componentName));
 }
 
 export function requireComponentDefinition(componentName: string): any {
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
   return require(path.join(definitionsDir, componentName));
 }
 
 export function requireDesignTokensFile(fileName: string): any {
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
   return require(path.join(designTokensDir, fileName));
 }

src/anchor-navigation/__integ__/anchor-navigation.test.ts

@@ -43,7 +43,7 @@ describe('AnchorNavigation', () => {
     setupTest(async page => {
       // Get element position in page
       const targetAnchorLink = wrapper.findAnchorLinkByHref('#section-1-1-1');
-      expect(await page.getElementAttribute(targetAnchorLink.toSelector(), 'aria-current')).toBeNull;
+      expect(await page.getElementAttribute(targetAnchorLink.toSelector(), 'aria-current')).toBeNull();
       await page.click(targetAnchorLink.toSelector());
       await page.waitForVisible('#section-1-1-1');
       return expect(await page.getElementAttribute(targetAnchorLink.toSelector(), 'aria-current')).toBe('true');

src/app-layout-toolbar/__tests__/app-layout-toolbar.test.tsx

@@ -30,7 +30,7 @@ describe('AppLayoutToolbar component', () => {
   test('throws an error when use in classic theme', () => {
     globalWithFlags[Symbol.for('awsui-visual-refresh-flag')] = () => false;
 
-    expect(() => render(<AppLayoutToolbar content={<div></div>} />)).toThrowError(
+    expect(() => render(<AppLayoutToolbar content={<div></div>} />)).toThrow(
       'AppLayoutToolbar component is not supported in the Classic theme. Please switch to the Refresh theme. For more details, refer to the documentation.'
     );
   });

src/app-layout/__tests__/desktop.test.tsx

@@ -304,7 +304,7 @@ describeEachAppLayout({ themes: ['classic'], sizes: ['desktop'] }, () => {
 
 describeEachAppLayout({ themes: ['refresh', 'refresh-toolbar'], sizes: ['desktop'] }, ({ theme }) => {
   const styles = theme === 'refresh' ? visualRefreshStyles : toolbarStyles;
-  test('renders roles only when aria labels are not provided', () => {
+  test(`${theme} - renders roles only when aria labels are not provided`, () => {
     const { wrapper } = renderComponent(<AppLayout navigationHide={true} drawers={[testDrawerWithoutLabels]} />);
 
     expect(wrapper.findDrawerTriggerById(testDrawer.id)!.getElement()).not.toHaveAttribute('aria-label');
@@ -314,7 +314,7 @@ describeEachAppLayout({ themes: ['refresh', 'refresh-toolbar'], sizes: ['desktop
     expect(wrapper.findByClassName(styles['drawers-trigger-content'])!.getElement()).toHaveAttribute('role', 'toolbar');
   });
 
-  test('renders roles and aria labels when provided', () => {
+  test(`${theme} - renders roles and aria labels when provided`, () => {
     const { wrapper } = renderComponent(<AppLayout drawers={[testDrawer]} ariaLabels={{ drawers: 'Drawers' }} />);
 
     expect(wrapper.findDrawerTriggerById('security')!.getElement()).toHaveAttribute(

src/app-layout/__tests__/header-variant.test.tsx

@@ -54,7 +54,7 @@ describeEachAppLayout({ themes: ['refresh', 'refresh-toolbar'], sizes: ['desktop
 });
 
 describeEachAppLayout({ themes: ['refresh', 'refresh-toolbar'], sizes: ['mobile'] }, ({ theme }) => {
-  describe('headerVariant', () => {
+  describe(`${theme} - headerVariant`, () => {
     test('default', () => {
       const { wrapper } = renderComponent(
         <AppLayout notifications="Notifications" breadcrumbs="Breadcrumbs" content="aaa" />

src/area-chart/__integ__/page-objects/area-chart-page.ts

@@ -43,7 +43,7 @@ export default class AreaChartPageObject extends BasePageObject {
     try {
       const label = await this.getElementAttribute(selector, 'aria-label');
       return label;
-    } catch (ignore) {
+    } catch {
       return null;
     }
   }

src/attribute-editor/__tests__/attribute-editor.test.tsx

@@ -487,6 +487,29 @@ describe('Attribute Editor', () => {
       expectRowErrorTextContent(wrapper, 0, ['Error with key 0']);
       expect(wrapper.findRow(1)!.findFields()[0].findWarning()).toBe(null);
     });
+
+    test('should warn if no layout supplied for >6 attributes', () => {
+      render(<AttributeEditor {...defaultProps} definition={new Array(7)} />);
+      expect(console.warn).toHaveBeenCalledWith(
+        'AttributeEditor',
+        '`gridLayout` is required for more than 6 attributes. Cannot render.'
+      );
+    });
+    test('should warn if no grid layout found for current breakpoint', () => {
+      containerQueryBreakpoint = 'm';
+      render(<AttributeEditor {...defaultProps} gridLayout={[{ breakpoint: 'xl', rows: [] }]} />);
+      expect(console.warn).toHaveBeenCalledWith(
+        'AttributeEditor',
+        'No `gridLayout` entry found for breakpoint m. Cannot render.'
+      );
+    });
+    test('should warn if grid layout does not match definition', () => {
+      render(<AttributeEditor {...defaultProps} gridLayout={[{ rows: [[1]] }]} />);
+      expect(console.warn).toHaveBeenCalledWith(
+        'AttributeEditor',
+        'Incorrect number of columns in layout (1) for definition (3). Cannot render.'
+      );
+    });
   });
 
   describe('form submission', () => {
@@ -670,29 +693,4 @@ describe('Attribute Editor', () => {
       expect(useContainerQuery).toHaveBeenCalledWith(expect.any(Function), ['default,xl,s']);
     });
   });
-
-  describe('warnings', () => {
-    test('should warn if no layout supplied for >6 attributes', () => {
-      render(<AttributeEditor {...defaultProps} definition={new Array(7)} />);
-      expect(console.warn).toHaveBeenCalledWith(
-        'AttributeEditor',
-        '`gridLayout` is required for more than 6 attributes. Cannot render.'
-      );
-    });
-    test('should warn if no grid layout found for current breakpoint', () => {
-      containerQueryBreakpoint = 'm';
-      render(<AttributeEditor {...defaultProps} gridLayout={[{ breakpoint: 'xl', rows: [] }]} />);
-      expect(console.warn).toHaveBeenCalledWith(
-        'AttributeEditor',
-        'No `gridLayout` entry found for breakpoint m. Cannot render.'
-      );
-    });
-    test('should warn if grid layout does not match definition', () => {
-      render(<AttributeEditor {...defaultProps} gridLayout={[{ rows: [[1]] }]} />);
-      expect(console.warn).toHaveBeenCalledWith(
-        'AttributeEditor',
-        'Incorrect number of columns in layout (1) for definition (3). Cannot render.'
-      );
-    });
-  });
 });

src/collection-preferences/__tests__/striped-rows.test.tsx

@@ -32,7 +32,7 @@ describe('Striped rows', () => {
     wrapper.findTriggerButton().click();
     isChecked(wrapper);
   });
-  test('displays as checked when value specified in preferences property is true', () => {
+  test('does not display as checked when value specified in preferences property is false', () => {
     const wrapper = renderWithStripedRows({ preferences: { stripedRows: false }, onConfirm: () => {} });
     wrapper.findTriggerButton().click();
     isChecked(wrapper, false);

src/collection-preferences/__tests__/wrap-lines.test.tsx

@@ -27,12 +27,12 @@ describe('Wrap lines', () => {
       'Wrap lines description'
     );
   });
-  test('displays as checked when value specified in preferences property is true', () => {
+  test('lines are wrapped when value specified in preferences property is true', () => {
     const wrapper = renderwithWrapLines({ preferences: { wrapLines: true }, onConfirm: () => {} });
     wrapper.findTriggerButton().click();
     isChecked(wrapper);
   });
-  test('displays as checked when value specified in preferences property is true', () => {
+  test('lines are not wrapped when value specified in preferences property is false', () => {
     const wrapper = renderwithWrapLines({ preferences: { wrapLines: false }, onConfirm: () => {} });
     wrapper.findTriggerButton().click();
     isChecked(wrapper, false);

src/content-layout/__tests__/content-layout.test.tsx

@@ -77,7 +77,7 @@ function renderContentLayout(props: ContentLayoutProps = {}) {
         expect(wrapper.findNotifications()!.getElement()).toHaveTextContent('Notifications');
       });
 
-      test('renders notifications slot', () => {
+      test('renders breadcrumbs slot', () => {
         const { wrapper } = renderContentLayout({
           breadcrumbs: <>Breadcrumbs</>,
         });

src/date-range-picker/calendar/__tests__/calendar-month.test.tsx

@@ -210,7 +210,7 @@ describe('Date range picker calendar with month granularity', () => {
         expect(findFocusableMonthText(wrapper)).toBe('Feb');
       });
 
-      test('should go to the previous year via left', () => {
+      test('should go to the previous year via up', () => {
         Mockdate.set(new Date('2018-03-01T12:30:20'));
 
         const { wrapper } = renderDateRangePicker({ ...defaultProps, value: null });

src/form-field/__tests__/form-field-control-id.test.tsx

@@ -65,7 +65,7 @@ describe('controlId', () => {
       expect(wrapper.findLabel()?.getElement()).toHaveAttribute('for', formFieldControlId);
       expect(wrapper.findDescription()?.getElement().id).toBe(`${formFieldControlId}-description`);
       expect(wrapper.find(errorSelector)?.getElement().id).toBe(`${formFieldControlId}-error`);
-      expect(wrapper.find(warningSelector)).toBeUndefined;
+      expect(wrapper.find(warningSelector)).toBeNull();
       expect(wrapper.findConstraint()?.getElement().id).toBe(`${formFieldControlId}-constraint`);
     });
 

src/internal/components/dropdown/__integ__/child-dropdown.test.ts

@@ -99,23 +99,9 @@ describe('Child dropdown', () => {
       }
     )
   );
+
   test(
-    'opens to the bottom right and wraps text',
-    setupChildTest(
-      '#/light/dropdown/interior-with-wrapping',
-      'parentDropdown5',
-      'childDropdown5',
-      async (parentDropdown, childDropdown) => {
-        const parentDropdownPosition = await parentDropdown.getBoundingBox(parentDropdown.getOpenDropdown());
-        const childDropdownPosition = await childDropdown.getBoundingBox(childDropdown.getOpenDropdown());
-        const childTriggerPosition = await childDropdown.getBoundingBox(childDropdown.getTrigger());
-        expect(childDropdownPosition.right).toBeGreaterThan(parentDropdownPosition.right);
-        expect(childTriggerPosition.bottom).toBeLessThan(childDropdownPosition.bottom);
-      }
-    )
-  );
-  test(
-    'opens to the bottom right and wraps text',
+    'opens to the top left and wraps text',
     setupChildTest(
       '#/light/dropdown/interior-with-wrapping',
       'parentDropdown6',

src/internal/events/index.ts

@@ -3,9 +3,9 @@
 import React from 'react';
 
 // This is a part of our public types API. We cannot change this in the current major version
-// eslint-disable-next-line @typescript-eslint/ban-types
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
 export type NonCancelableEventHandler<Detail = {}> = (event: NonCancelableCustomEvent<Detail>) => void;
-// eslint-disable-next-line @typescript-eslint/ban-types
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
 export type CancelableEventHandler<Detail = {}> = (event: CustomEvent<Detail>) => void;
 
 export type NonCancelableCustomEvent<DetailType> = Omit<CustomEvent<DetailType>, 'preventDefault'>;

src/internal/plugins/api.ts

@@ -51,6 +51,9 @@ function findUpApi(currentWindow: WindowWithApi): AwsuiApi | undefined {
     }
 
     return findUpApi(currentWindow.parent as WindowWithApi);
+
+    // Consumers in the past have not always been able to support not specifiying the value so we keep and ignore
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
   } catch (ex) {
     // Most likely a cross-origin access error
     return undefined;

src/internal/utils/check-safe-url.ts

@@ -15,6 +15,9 @@ export function checkSafeUrl(component: string, url: string | undefined | null):
   let parsedUrl: URL;
   try {
     parsedUrl = new URL(url);
+
+    // Consumers in the past have not always been able to support not specifiying the value so we keep and ignore
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
   } catch (e) {
     // If the URL cannot be parsed by the browser, it likely does not pose a security risk.
     return;

src/live-region/__tests__/live-region.test.tsx

@@ -9,7 +9,7 @@ import styles from '../../../lib/components/live-region/test-classes/styles.css.
 
 const renderLiveRegion = async (jsx: React.ReactElement) => {
   const { container } = render(jsx);
-  await waitFor(() => expect(document.querySelector('[aria-live=polite]')));
+  await waitFor(() => document.querySelector('[aria-live=polite]'));
   jest.runAllTimers();
 
   return {

src/radio-group/__tests__/radio-group.test.tsx

@@ -313,7 +313,7 @@ describe('value', () => {
       expect(id1).not.toBe(id2);
     });
 
-    test('generates a own unique ids for setting up label relations when controlId is not set', () => {
+    test('generates a own unique ids for setting up label relations when controlId is partially set', () => {
       const id1 = 'control-id-1';
 
       const { wrapper } = renderRadioGroup(

src/slider/__tests__/slider.test.tsx

@@ -5,6 +5,7 @@ import { fireEvent, render, screen } from '@testing-library/react';
 
 import { warnOnce } from '@cloudscape-design/component-toolkit/internal';
 
+import '../../__a11y__/to-validate-a11y';
 import TestI18nProvider from '../../../lib/components/i18n/testing';
 import customCssProps from '../../../lib/components/internal/generated/custom-css-properties';
 import Slider, { SliderProps } from '../../../lib/components/slider';
@@ -325,7 +326,7 @@ describe('Slider i18n', () => {
 });
 
 describe('Slider a11y', () => {
-  test('Valides a11y', () => {
+  test('Validatees a11y', () => {
     const wrapper = renderSlider({
       min: 0,
       max: 100,
@@ -336,7 +337,7 @@ describe('Slider a11y', () => {
       ariaLabel: 'aria label',
     });
 
-    expect(wrapper.getElement()).toValidateA11y;
+    expect(wrapper.getElement()).toValidateA11y();
   });
 
   test('Renders correct aria label', () => {

src/table/__tests__/analytics-metadata.test.tsx

@@ -256,7 +256,7 @@ describe('Table renders correct analytics metadata', () => {
         )
       );
     });
-    test('with sortingField', () => {
+    test('with sortingDisabled', () => {
       const wrapper = renderTable({ sortingDisabled: true });
       const columnHeaders = wrapper.findColumnHeaders();
       const element = columnHeaders[0]!.getElement();

src/table/__tests__/header-cell.test.tsx

@@ -27,6 +27,7 @@ jest.mock('@cloudscape-design/component-toolkit/internal', () => ({
 
 const tableRole = 'table';
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const testItem = {
   test: 'test',
 };