fix(ods): lint test files

packages/ods/src/components/button/package.json

@@ -9,7 +9,7 @@
     "clean": "rimraf .stencil coverage dist docs-api www",
     "doc": "typedoc --pretty --plugin ../../../scripts/typedoc-plugin-decorator.js && node ../../../scripts/generate-typedoc-md.js",
     "lint:scss": "stylelint 'src/components/**/*.scss'",
-    "lint:ts": "eslint 'src/**/*.{js,ts,tsx}'",
+    "lint:ts": "eslint '{src,tests}/**/*.{js,ts,tsx}'",
     "start": "stencil build --dev --watch --serve",
     "test:e2e": "stencil test --e2e --config stencil.config.ts",
     "test:e2e:ci": "tsc --noEmit && stencil test --e2e --ci --config stencil.config.ts",

packages/ods/src/components/button/src/components/ods-button/ods-button.scss

@@ -92,7 +92,7 @@
         &:not(:disabled) {
           &:hover {
             #{$button}__icon {
-              background-color: #800015; // TODO var(--ods-color-??);
+              background-color: var(--ods-color-critical-700);
             }
           }
 
@@ -112,7 +112,7 @@
         &:not(:disabled) {
           &:hover {
             #{$button}__icon {
-              background-color: #800015; // TODO var(--ods-color-??);
+              background-color: var(--ods-color-critical-700);
             }
           }
 

packages/ods/src/components/button/src/constants/button-size.ts

@@ -1,7 +1,6 @@
 enum ODS_BUTTON_SIZE {
-  // TODO need actual list from design
-  sm = 'sm',
   md = 'md',
+  sm = 'sm',
 }
 
 type OdsButtonSize =`${ODS_BUTTON_SIZE}`;

packages/ods/src/components/button/tests/navigation/ods-button.e2e.ts

@@ -5,7 +5,7 @@ describe('ods-button navigation', () => {
   let el: E2EElement;
   let page: E2EPage;
 
-  async function bindClick() {
+  async function bindClick(): Promise<void> {
     await page.exposeFunction('onClick', () => {
       clickSpy.call(null);
     });
@@ -17,7 +17,7 @@ describe('ods-button navigation', () => {
     });
   }
 
-  async function isFocused() {
+  async function isFocused(): Promise<boolean> {
     return await page.evaluate(() => {
       const element = document.querySelector('ods-button');
       return document.activeElement === element;

packages/ods/src/components/button/tests/rendering/ods-button.e2e.ts

@@ -15,7 +15,6 @@ describe('ods-button rendering', () => {
       await page.addStyleTag({ content: customStyle });
     }
 
-
     el = await page.find('ods-button');
   }
 

packages/ods/src/components/button/tests/rendering/ods-button.spec.ts

@@ -1,4 +1,4 @@
-import { newSpecPage, type SpecPage } from '@stencil/core/testing';
+import { type SpecPage, newSpecPage } from '@stencil/core/testing';
 import { ODS_BUTTON_COLOR, ODS_BUTTON_SIZE, ODS_BUTTON_VARIANT, OdsButton } from '../../src';
 
 describe('ods-button rendering', () => {
@@ -13,7 +13,7 @@ describe('ods-button rendering', () => {
 
     root = page.root;
   }
-// TODO describe attributes + lifecycle
+
   describe('color', () => {
     it('should be reflected', async() => {
       const dummyValue = 'dummy value';
@@ -24,7 +24,7 @@ describe('ods-button rendering', () => {
     });
 
     it('should render with expected default value', async() => {
-      await setup(`<ods-button>Dummy Button</ods-button>`);
+      await setup('<ods-button>Dummy Button</ods-button>');
 
       expect(root?.getAttribute('color')).toBe(ODS_BUTTON_COLOR.primary);
     });
@@ -40,35 +40,35 @@ describe('ods-button rendering', () => {
     });
 
     it('should not be set by default', async() => {
-      await setup(`<ods-button></ods-button>`);
+      await setup('<ods-button></ods-button>');
 
       expect(root?.getAttribute('icon')).toBeNull();
     });
   });
 
   describe('isDisabled', () => {
     it('should be reflected', async() => {
-      await setup(`<ods-button is-disabled>Dummy Button</ods-button>`);
+      await setup('<ods-button is-disabled>Dummy Button</ods-button>');
 
       expect(root?.getAttribute('disabled')).toBe('');
     });
 
     it('should render with expected default value', async() => {
-      await setup(`<ods-button>Dummy Button</ods-button>`);
+      await setup('<ods-button>Dummy Button</ods-button>');
 
       expect(root?.getAttribute('disabled')).toBeNull();
     });
   });
 
   describe('isLoading', () => {
     it('should be reflected', async() => {
-      await setup(`<ods-button is-loading>Dummy Button</ods-button>`);
+      await setup('<ods-button is-loading>Dummy Button</ods-button>');
 
       expect(root?.getAttribute('is-loading')).toBe('');
     });
 
     it('should render with expected default value', async() => {
-      await setup(`<ods-button>Dummy Button</ods-button>`);
+      await setup('<ods-button>Dummy Button</ods-button>');
 
       expect(root?.getAttribute('is-loading')).toBeNull();
     });
@@ -84,7 +84,7 @@ describe('ods-button rendering', () => {
     });
 
     it('should not be set by default', async() => {
-      await setup(`<ods-button></ods-button>`);
+      await setup('<ods-button></ods-button>');
 
       expect(root?.getAttribute('label')).toBeNull();
     });
@@ -100,7 +100,7 @@ describe('ods-button rendering', () => {
     });
 
     it('should render with expected default value', async() => {
-      await setup(`<ods-button>Dummy Button</ods-button>`);
+      await setup('<ods-button>Dummy Button</ods-button>');
 
       expect(root?.getAttribute('size')).toBe(ODS_BUTTON_SIZE.md);
     });
@@ -116,7 +116,7 @@ describe('ods-button rendering', () => {
     });
 
     it('should render with expected default value', async() => {
-      await setup(`<ods-button>Dummy Button</ods-button>`);
+      await setup('<ods-button>Dummy Button</ods-button>');
 
       expect(root?.getAttribute('type')).toBe('button');
     });
@@ -132,7 +132,7 @@ describe('ods-button rendering', () => {
     });
 
     it('should render with expected default value', async() => {
-      await setup(`<ods-button>Dummy Button</ods-button>`);
+      await setup('<ods-button>Dummy Button</ods-button>');
 
       expect(root?.getAttribute('variant')).toBe(ODS_BUTTON_VARIANT.default);
     });

packages/ods/src/components/icon/package.json

@@ -9,7 +9,7 @@
     "clean": "rimraf .stencil coverage dist docs-api www",
     "doc": "typedoc --pretty --plugin ../../../scripts/typedoc-plugin-decorator.js && node ../../../scripts/generate-typedoc-md.js",
     "lint:scss": "stylelint 'src/components/**/*.scss'",
-    "lint:ts": "eslint 'src/**/*.{js,ts,tsx}'",
+    "lint:ts": "eslint '{src,tests}/**/*.{js,ts,tsx}'",
     "start": "stencil build --dev --watch --serve",
     "test:e2e": "stencil test --e2e --config stencil.config.ts",
     "test:e2e:ci": "tsc --noEmit && stencil test --e2e --ci --config stencil.config.ts",

packages/ods/src/components/icon/tests/rendering/ods-icon.spec.ts

@@ -25,7 +25,7 @@ describe('ods-icon rendering', () => {
     });
 
     it('should render with expected default value', async() => {
-      await setup(`<ods-icon></ods-icon>`);
+      await setup('<ods-icon></ods-icon>');
 
       expect(root?.getAttribute('alt')).toBe('');
     });
@@ -41,7 +41,7 @@ describe('ods-icon rendering', () => {
     });
 
     it('should not be set by default', async() => {
-      await setup(`<ods-icon></ods-icon>`);
+      await setup('<ods-icon></ods-icon>');
 
       expect(root?.getAttribute('name')).toBeNull();
     });

packages/ods/src/components/skeleton/package.json

@@ -9,7 +9,7 @@
     "clean": "rimraf .stencil coverage dist docs-api www",
     "doc": "typedoc --pretty --plugin ../../../scripts/typedoc-plugin-decorator.js && node ../../../scripts/generate-typedoc-md.js",
     "lint:scss": "stylelint 'src/components/**/*.scss'",
-    "lint:ts": "eslint 'src/**/*.{js,ts,tsx}'",
+    "lint:ts": "eslint '{src,tests}/**/*.{js,ts,tsx}'",
     "start": "stencil build --dev --watch --serve",
     "test:e2e": "stencil test --e2e --config stencil.config.ts",
     "test:e2e:ci": "tsc --noEmit && stencil test --e2e --ci --config stencil.config.ts",

packages/ods/src/components/spinner/package.json

@@ -9,7 +9,7 @@
     "clean": "rimraf .stencil coverage dist docs-api www",
     "doc": "typedoc --pretty --plugin ../../../scripts/typedoc-plugin-decorator.js && node ../../../scripts/generate-typedoc-md.js",
     "lint:scss": "stylelint 'src/components/**/*.scss'",
-    "lint:ts": "eslint 'src/**/*.{js,ts,tsx}'",
+    "lint:ts": "eslint '{src,tests}/**/*.{js,ts,tsx}'",
     "start": "stencil build --dev --watch --serve",
     "test:e2e": "stencil test --e2e --config stencil.config.ts",
     "test:e2e:ci": "tsc --noEmit && stencil test --e2e --ci --config stencil.config.ts",

packages/ods/src/components/spinner/tests/rendering/ods-spinner.e2e.ts

@@ -45,7 +45,7 @@ describe('ods-spinner rendering', () => {
         <ods-spinner size="${ODS_SPINNER_SIZE.sm}"></ods-spinner>
         <ods-spinner size="${ODS_SPINNER_SIZE.md}"></ods-spinner>
         <ods-spinner size="${ODS_SPINNER_SIZE.lg}"></ods-spinner>
-      `)
+      `);
 
       const smSpinner = await page.find(`ods-spinner[size=${ODS_SPINNER_SIZE.sm}]`);
       const mdSpinner = await page.find(`ods-spinner[size=${ODS_SPINNER_SIZE.md}]`);

packages/ods/src/components/spinner/tests/rendering/ods-spinner.spec.ts

@@ -26,7 +26,7 @@ describe('ods-spinner rendering', () => {
       });
 
       it('should render with expected default value', async() => {
-        await setup(`<ods-spinner></ods-spinner>`);
+        await setup('<ods-spinner></ods-spinner>');
 
         expect(container?.classList.contains('ods-spinner__container--primary')).toBe(true);
       });
@@ -60,7 +60,7 @@ describe('ods-spinner rendering', () => {
       });
 
       it('should render with expected default value', async() => {
-        await setup(`<ods-spinner></ods-spinner>`);
+        await setup('<ods-spinner></ods-spinner>');
 
         expect(root?.getAttribute('size')).toBe(ODS_SPINNER_SIZE.md);
       });

packages/ods/src/components/text/package.json

@@ -9,7 +9,7 @@
     "clean": "rimraf .stencil coverage dist docs-api www",
     "doc": "typedoc --pretty --plugin ../../../scripts/typedoc-plugin-decorator.js && node ../../../scripts/generate-typedoc-md.js",
     "lint:scss": "stylelint 'src/components/**/*.scss'",
-    "lint:ts": "eslint 'src/**/*.{js,ts,tsx}'",
+    "lint:ts": "eslint '{src,tests}/**/*.{js,ts,tsx}'",
     "start": "stencil build --dev --watch --serve",
     "test:e2e": "stencil test --e2e --config stencil.config.ts",
     "test:e2e:ci": "tsc --noEmit && stencil test --e2e --ci --config stencil.config.ts",

packages/ods/src/components/text/tests/rendering/ods-text.spec.ts

@@ -27,7 +27,7 @@ describe('ods-text rendering', () => {
     });
 
     it('should render with expected default value', async() => {
-      await setup(`<ods-text></ods-text>`);
+      await setup('<ods-text></ods-text>');
 
       expect(root?.getAttribute('preset')).toBe(ODS_TEXT_PRESET.paragraph);
     });

packages/ods/src/components/tooltip/package.json

@@ -9,7 +9,7 @@
     "clean": "rimraf .stencil coverage dist docs-api www",
     "doc": "typedoc --pretty --plugin ../../../scripts/typedoc-plugin-decorator.js && node ../../../scripts/generate-typedoc-md.js",
     "lint:scss": "stylelint 'src/components/**/*.scss'",
-    "lint:ts": "eslint 'src/**/*.{js,ts,tsx}'",
+    "lint:ts": "eslint '{src,tests}/**/*.{js,ts,tsx}'",
     "start": "stencil build --dev --watch --serve",
     "test:e2e": "stencil test --e2e --config stencil.config.ts",
     "test:e2e:ci": "tsc --noEmit && stencil test --e2e --ci --config stencil.config.ts",

packages/ods/src/components/tooltip/tests/controller/ods-tooltip.spec.ts

@@ -7,8 +7,8 @@ jest.mock('@floating-ui/dom', () => ({
   shift: jest.fn().mockReturnValue('shift middleware'),
 }));
 
-import { hideTooltip, showTooltip } from '../../src/controller/ods-tooltip';
 import { arrow, autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom';
+import { hideTooltip, showTooltip } from '../../src/controller/ods-tooltip';
 
 describe('ods-tooltip controller', () => {
   beforeEach(jest.clearAllMocks);
@@ -75,10 +75,10 @@ describe('ods-tooltip controller', () => {
 
         (autoUpdate as jest.Mock).mockImplementation((_t, _p, cb) => cb(dummyPosition, dummyDom));
         (computePosition as jest.Mock).mockResolvedValue({
+          middlewareData: {},
+          placement: 'top',
           x: expectedPopperX,
           y: expectedPopperY,
-          placement: 'top',
-          middlewareData: {},
         });
 
         showTooltip(dummyPosition, dummyDom);
@@ -127,10 +127,10 @@ describe('ods-tooltip controller', () => {
 
         (autoUpdate as jest.Mock).mockImplementation((_t, _p, cb) => cb(dummyPosition, dummyDom));
         (computePosition as jest.Mock).mockResolvedValue({
+          middlewareData: dummyMiddlewareData,
+          placement: 'top',
           x: expectedPopperX,
           y: expectedPopperY,
-          placement: 'top',
-          middlewareData: dummyMiddlewareData,
         });
 
         showTooltip(dummyPosition, dummyDom);
@@ -161,5 +161,5 @@ describe('ods-tooltip controller', () => {
         expect(dummyArrow.style.top).toBe(`${dummyMiddlewareData.arrow.y}px`);
       });
     });
-  })
+  });
 });

packages/ods/src/components/tooltip/tests/navigation/ods-tooltip.e2e.ts

@@ -36,7 +36,7 @@ describe('ods-tooltip navigation', () => {
         Not a trigger
       </button>
     `);
-  })
+  });
 
   it('should be visible on trigger focus using tabulation', async() => {
     expect(await isTooltipVisible()).toBe(false);

packages/ods/src/components/tooltip/tests/rendering/ods-tooltip.e2e.ts

@@ -41,14 +41,14 @@ describe('ods-tooltip rendering', () => {
   });
 
   describe('position', () => {
-    async function getRect(selector: string) {
+    async function getRect(selector: string): Promise<{ bottom: number, left: number, right: number, top: number }> {
       return await page.evaluate((selector: string) => {
         const { bottom, left, right, top } = document.querySelector(selector)!.getBoundingClientRect();
         return { bottom, left, right, top };
       }, selector);
     }
 
-    async function renderPosition(position: OdsTooltipPosition, customStyle?: string) {
+    async function renderPosition(position: OdsTooltipPosition, customStyle?: string): Promise<void> {
       await setup(`<ods-tooltip position="${position}" trigger-id="${triggerId}">Tooltip content</ods-tooltip>`, customStyle);
     }
 

packages/ods/src/components/tooltip/tests/rendering/ods-tooltip.spec.ts

@@ -24,14 +24,14 @@ describe('ods-tooltip rendering', () => {
     });
 
     it('should render with expected default value', async() => {
-      await setup(`<ods-tooltip></ods-tooltip>`);
+      await setup('<ods-tooltip></ods-tooltip>');
 
       expect(root?.getAttribute('position')).toBe(ODS_TOOLTIP_POSITION.top);
     });
   });
 
   describe('triggerId', () => {
-    it('should be reflected', async () => {
+    it('should be reflected', async() => {
       const dummyValue = 'dummy value';
 
       await setup(`<ods-tooltip triggerId="${dummyValue}"></ods-tooltip>`);
@@ -40,21 +40,21 @@ describe('ods-tooltip rendering', () => {
     });
 
     it('should not be set by default', async() => {
-      await setup(`<ods-tooltip></ods-tooltip>`);
+      await setup('<ods-tooltip></ods-tooltip>');
 
       expect(root?.getAttribute('triggerId')).toBeNull();
     });
   });
 
   describe('withArrow', () => {
-    it('should be reflected', async () => {
-      await setup(`<ods-tooltip withArrow></ods-tooltip>`);
+    it('should be reflected', async() => {
+      await setup('<ods-tooltip withArrow></ods-tooltip>');
 
       expect(root?.getAttribute('withArrow')).not.toBeNull();
     });
 
     it('should not be set by default', async() => {
-      await setup(`<ods-tooltip></ods-tooltip>`);
+      await setup('<ods-tooltip></ods-tooltip>');
 
       expect(root?.getAttribute('withArrow')).toBeNull();
     });

scripts/component-generator/templates/component/package.json.hbs

@@ -9,7 +9,7 @@
     "clean": "rimraf .stencil coverage dist docs-api www",
     "doc": "typedoc --pretty --plugin ../../../scripts/typedoc-plugin-decorator.js && node ../../../scripts/generate-typedoc-md.js",
     "lint:scss": "stylelint 'src/components/**/*.scss'",
-    "lint:ts": "eslint 'src/**/*.{js,ts,tsx}'",
+    "lint:ts": "eslint '{src,tests}/**/*.{js,ts,tsx}'",
     "start": "stencil build --dev --watch --serve",
     "test:e2e": "stencil test --e2e --config stencil.config.ts",
     "test:e2e:ci": "tsc --noEmit && stencil test --e2e --ci --config stencil.config.ts",