fix(clipboard): lint

ovh · Feb 26, 2024 · 5c6f557 · 5c6f557
1 parent bc4f243
commit 5c6f557
Show file tree

Hide file tree

Showing 10 changed files with 99 additions and 120 deletions.
diff --git a/packages/components/src/clipboard/package.json b/packages/components/src/clipboard/package.json
@@ -17,7 +17,7 @@
     "doc": "typedoc --json ./docs-api/typedoc.json --pretty && node ../../../../scripts/generate-typedoc-md.js",
     "doc:api": "typedoc",
     "lint:scss": "stylelint 'src/components/**/*.scss'",
-    "FIXME_lint:ts": "eslint 'src/**/*.{js,ts,tsx}'",
+    "lint:ts": "eslint 'src/**/*.{js,ts,tsx}'",
     "start": "stencil build --dev --watch --serve",
     "test:e2e": "stencil test --e2e --config stencil.config.ts",
     "test:e2e:ci": "stencil test --config stencil.config.ts --e2e --ci",

diff --git a/packages/components/src/clipboard/src/components/osds-clipboard/core/controller.spec.ts b/packages/components/src/clipboard/src/components/osds-clipboard/core/controller.spec.ts
@@ -1,9 +1,8 @@
+import type { OcdkSurface } from '@ovhcloud/ods-cdk';
 import type { OdsLoggerSpyReferences } from '@ovhcloud/ods-common-testing';
-
-import { OcdkSurface, OcdkSurfaceMock } from '@ovhcloud/ods-cdk';
+import { OcdkSurfaceMock } from '@ovhcloud/ods-cdk';
 import { Ods, OdsLogger } from '@ovhcloud/ods-common-core';
 import { OdsClearLoggerSpy, OdsInitializeLoggerSpy } from '@ovhcloud/ods-common-testing';
-
 import { OdsClipboardController } from './controller';
 import { OsdsClipboard } from '../osds-clipboard';
 
@@ -21,7 +20,7 @@ describe('spec:ods-clipboard-controller', () => {
 
   Ods.instance().logging(false);
 
-  function setup(attributes: Partial<OsdsClipboard> = {}) {
+  function setup(attributes: Partial<OsdsClipboard> = {}): void {
     component = new OdsClipboardMock(attributes);
     controller = new OdsClipboardController(component);
   }
@@ -44,7 +43,7 @@ describe('spec:ods-clipboard-controller', () => {
     expect(controller).toBeTruthy();
   });
 
-  describe('method: checkForClickOutside', () => {
+  describe('method:checkForClickOutside', () => {
     it('should do nothing if there is no surface', async() => {
       setup();
 
@@ -57,7 +56,6 @@ describe('spec:ods-clipboard-controller', () => {
       const target = document.createElement('OSDS-BUTTON');
       Object.defineProperty(event, 'target', { value: target });
 
-
       expect(() => {
         controller.checkForClickOutside(event);
       }).not.toThrow();
@@ -123,7 +121,7 @@ describe('spec:ods-clipboard-controller', () => {
     });
   });
 
-  describe('method: closeSurface', () => {
+  describe('method:closeSurface', () => {
     it('should do nothing if there is no surface', async() => {
       setup();
 
@@ -132,6 +130,7 @@ describe('spec:ods-clipboard-controller', () => {
       }).not.toThrow();
       expect(component.surface).toBeUndefined();
     });
+
     it('should do nothing if surface is closed', async() => {
       setup(component);
       component.surface = new OcdkSurfaceMock() as unknown as OcdkSurface;
@@ -142,8 +141,8 @@ describe('spec:ods-clipboard-controller', () => {
       }).not.toThrow();
       expect(component.surface.opened).toBe(false);
       expect(component.surface.close).toHaveBeenCalledTimes(0);
-
     });
+
     it('should close the surface', async() => {
       setup(component);
       component.surface = new OcdkSurfaceMock() as unknown as OcdkSurface;

diff --git a/packages/components/src/clipboard/src/components/osds-clipboard/core/controller.ts b/packages/components/src/clipboard/src/components/osds-clipboard/core/controller.ts
@@ -1,15 +1,27 @@
 import type { OsdsClipboard } from '../osds-clipboard';
-
 import { writeOnClipboard } from '@ovhcloud/ods-common-core';
 
-
 class OdsClipboardController {
   private component: OsdsClipboard;
 
   constructor(component: OsdsClipboard) {
     this.component = component;
   }
 
+  checkForClickOutside(event: MouseEvent): void {
+    if (this.component.el.contains(event.target as Node) || this.component.surface === undefined || !this.component.surface.opened) {
+      return;
+    }
+
+    this.closeSurface();
+  }
+
+  closeSurface(): void {
+    if (this.component.surface && this.component.surface.opened) {
+      this.component.surface.close();
+    }
+  }
+
   async handlerClick(value: string): Promise<void> {
     const successMessage = this.component.el.querySelector('[slot=success-message]')?.innerHTML;
     const errorMessage = this.component.el.querySelector('[slot=error-message]')?.innerHTML;
@@ -34,20 +46,6 @@ class OdsClipboardController {
       this.component.surface.setAnchorElement(this.component.anchor);
     }
   }
-
-  closeSurface(): void {
-    if (this.component.surface && this.component.surface.opened) {
-      this.component.surface.close();
-    }
-  }
-
-  checkForClickOutside(event: MouseEvent): void {
-    if (this.component.el.contains(event.target as Node) || this.component.surface === undefined || !this.component.surface.opened) {
-      return;
-    }
-
-    this.closeSurface();
-  }
 }
 
 export {

diff --git a/packages/components/src/clipboard/src/components/osds-clipboard/interfaces/attributes.ts b/packages/components/src/clipboard/src/components/osds-clipboard/interfaces/attributes.ts
@@ -9,6 +9,6 @@ interface OdsClipboardAttribute {
   value: string;
 }
 
-export {
+export type {
   OdsClipboardAttribute,
 };
diff --git a/packages/components/src/clipboard/src/components/osds-clipboard/interfaces/events.ts b/packages/components/src/clipboard/src/components/osds-clipboard/interfaces/events.ts
@@ -4,6 +4,6 @@ interface OdsClipboardEvent {
     odsClipboardCopied: EventEmitter<string>;
 }
 
-export {
+export type {
   OdsClipboardEvent,
 };
diff --git a/packages/components/src/clipboard/src/components/osds-clipboard/interfaces/methods.ts b/packages/components/src/clipboard/src/components/osds-clipboard/interfaces/methods.ts
@@ -5,6 +5,6 @@ interface OdsClipboardMethod {
   closeSurface(): Promise<void>;
 }
 
-export {
+export type {
   OdsClipboardMethod,
 };
diff --git a/...s/components/src/clipboard/src/components/osds-clipboard/osds-clipboard.e2e.screenshot.ts b/...s/components/src/clipboard/src/components/osds-clipboard/osds-clipboard.e2e.screenshot.ts
@@ -1,17 +1,14 @@
 import type { OdsClipboardAttribute } from './interfaces/attributes';
 import type { E2EPage } from '@stencil/core/testing';
-
 import { odsComponentAttributes2StringAttributes, odsStringAttributes2Str } from '@ovhcloud/ods-common-testing';
 import { newE2EPage } from '@stencil/core/testing';
-
 import { DEFAULT_ATTRIBUTE } from './constants/default-attributes';
 
-
 describe('e2e:osds-clipboard', () => {
   const baseAttribute = { value: '' };
   let page: E2EPage;
 
-  async function setup({ attributes = {}, html = '' }: { attributes?: Partial<OdsClipboardAttribute>, html?: string } = {}) {
+  async function setup({ attributes = {}, html = '' }: { attributes?: Partial<OdsClipboardAttribute>, html?: string } = {}): Promise<void> {
     const stringAttributes = odsComponentAttributes2StringAttributes<OdsClipboardAttribute>({ ...baseAttribute, ...attributes }, DEFAULT_ATTRIBUTE);
 
     page = await newE2EPage();
@@ -24,27 +21,24 @@ describe('e2e:osds-clipboard', () => {
   }
 
   describe('screenshots', () => {
-    [false, true].forEach((flex) => {
-      [false, true].forEach((disabled) => {
-        [undefined, 'value'].forEach((value) => {
-          it([flex, disabled, value].join(', '), async() => {
-            await setup({
-              attributes: {
-                flex,
-                disabled,
-                value,
-              },
-            });
-            await page.waitForChanges();
+    [false, true].forEach((disabled) => {
+      [undefined, 'value'].forEach((value) => {
+        it([disabled, value].join(', '), async() => {
+          await setup({
+            attributes: {
+              disabled,
+              value,
+            },
+          });
+          await page.waitForChanges();
 
-            await page.evaluate(() => {
-              const element = document.querySelector('osds-clipboard') as HTMLElement;
-              return { width: element.clientWidth, height: element.clientHeight };
-            });
-            await page.setViewport({ width: 600, height: 600 });
-            const results = await page.compareScreenshot('clipboard', { fullPage: false, omitBackground: true });
-            expect(results).toMatchScreenshot({ allowableMismatchedRatio: 0 });
+          await page.evaluate(() => {
+            const element = document.querySelector('osds-clipboard') as HTMLElement;
+            return { height: element.clientHeight, width: element.clientWidth };
           });
+          await page.setViewport({ height: 600, width: 600 });
+          const results = await page.compareScreenshot('clipboard', { fullPage: false, omitBackground: true });
+          expect(results).toMatchScreenshot({ allowableMismatchedRatio: 0 });
         });
       });
     });

diff --git a/packages/components/src/clipboard/src/components/osds-clipboard/osds-clipboard.e2e.ts b/packages/components/src/clipboard/src/components/osds-clipboard/osds-clipboard.e2e.ts
@@ -1,12 +1,9 @@
 import type { OdsClipboardAttribute } from './interfaces/attributes';
 import type { E2EElement, E2EPage } from '@stencil/core/testing';
-
 import { odsComponentAttributes2StringAttributes, odsStringAttributes2Str } from '@ovhcloud/ods-common-testing';
 import { newE2EPage } from '@stencil/core/testing';
-
 import { DEFAULT_ATTRIBUTE } from './constants/default-attributes';
 
-
 describe('e2e:osds-clipboard', () => {
   const baseAttribute = { value: '' };
   let page: E2EPage;
@@ -18,15 +15,16 @@ describe('e2e:osds-clipboard', () => {
     await page.evaluate(() => {
       let clipboardText = '';
       const clipboard = {
-        writeText: (text: string) => new Promise((resolve) => resolve(clipboardText = text)),
         readText: () => new Promise((resolve) => resolve(clipboardText)),
+        writeText: (text: string) => new Promise((resolve) => resolve(clipboardText = text)),
       };
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       (window['navigator'] as any)['clipboard'] = clipboard;
       Object.defineProperty(navigator, 'clipboard', { value: clipboard });
     });
   }
 
-  async function setup({ attributes = {}, html = '' }: { attributes?: Partial<OdsClipboardAttribute>, html?: string } = {}) {
+  async function setup({ attributes = {}, html = '' }: { attributes?: Partial<OdsClipboardAttribute>, html?: string } = {}): Promise<void> {
     const stringAttributes = odsComponentAttributes2StringAttributes<OdsClipboardAttribute>({ ...baseAttribute, ...attributes }, DEFAULT_ATTRIBUTE);
 
     page = await newE2EPage();
@@ -78,18 +76,18 @@ describe('e2e:osds-clipboard', () => {
 
   it('should not copy the input value because of disabled', async() => {
     const value = 'text to copy';
-    await setup({ attributes: { value, disabled: true } });
+    await setup({ attributes: { disabled: true, value } });
     await page.evaluate(() => navigator.clipboard.writeText(''));
 
     await input.click();
 
     expect(await page.evaluate(() => navigator.clipboard.readText())).toBe('');
   });
 
-  it('should noy copy the input value with keyboard', async() => {
+  it('should not copy the input value with keyboard', async() => {
     const value = 'text to copy';
 
-    await setup({ attributes: { value, disabled: true } });
+    await setup({ attributes: { disabled: true, value } });
 
     await page.keyboard.press('Tab');
     await page.keyboard.press('Enter');

diff --git a/packages/components/src/clipboard/src/components/osds-clipboard/osds-clipboard.spec.ts b/packages/components/src/clipboard/src/components/osds-clipboard/osds-clipboard.spec.ts
@@ -3,16 +3,13 @@ jest.mock('./core/controller'); // keep jest.mock before any
 
 import type { OdsClipboardAttribute } from './interfaces/attributes';
 import type { SpecPage } from '@stencil/core/testing';
-
 import { ocdkIsSurface } from '@ovhcloud/ods-cdk';
 import { odsComponentAttributes2StringAttributes, odsStringAttributes2Str, odsUnitTestAttribute } from '@ovhcloud/ods-common-testing';
 import { newSpecPage } from '@stencil/core/testing';
-
 import { DEFAULT_ATTRIBUTE } from './constants/default-attributes';
 import { OdsClipboardController } from './core/controller';
 import { OsdsClipboard } from './osds-clipboard';
 
-
 describe('spec:osds-clipboard', () => {
   const baseAttribute = { value: '' };
   let page: SpecPage;
@@ -25,11 +22,11 @@ describe('spec:osds-clipboard', () => {
     jest.clearAllMocks();
   });
 
-  function mockSurfaceElements() {
+  function mockSurfaceElements(): void {
     (ocdkIsSurface as unknown as jest.Mock).mockImplementation(() => true);
   }
 
-  async function setup({ attributes = {} }: { attributes?: Partial<OdsClipboardAttribute> } = {}) {
+  async function setup({ attributes = {} }: { attributes?: Partial<OdsClipboardAttribute> } = {}): Promise<void> {
     const stringAttributes = odsComponentAttributes2StringAttributes<OdsClipboardAttribute>({ ...baseAttribute, ...attributes }, DEFAULT_ATTRIBUTE);
 
     page = await newSpecPage({
@@ -104,41 +101,41 @@ describe('spec:osds-clipboard', () => {
 
   describe('attributes', () => {
     const config = {
-      instance: () => instance,
-      page: () => page,
-      root: () => page.root,
-      wait: () => page.waitForChanges(),
+      instance: (): OsdsClipboard => instance,
+      page: (): SpecPage => page,
+      root: (): SpecPage['root'] => page.root,
+      wait: (): Promise<void> => page.waitForChanges(),
     };
 
     describe('inline', () => {
       odsUnitTestAttribute<OdsClipboardAttribute, 'inline'>({
-        name: 'inline',
         defaultValue: DEFAULT_ATTRIBUTE.inline,
+        name: 'inline',
         newValue: false,
-        value: true,
         setup: (value) => setup({ attributes: { ['inline']: value } }),
+        value: true,
         ...config,
       });
     });
 
     describe('disabled', () => {
       odsUnitTestAttribute<OdsClipboardAttribute, 'disabled'>({
-        name: 'disabled',
         defaultValue: DEFAULT_ATTRIBUTE.disabled,
+        name: 'disabled',
         newValue: false,
-        value: true,
         setup: (value) => setup({ attributes: { ['disabled']: value } }),
+        value: true,
         ...config,
       });
     });
 
     describe('value', () => {
       odsUnitTestAttribute<OdsClipboardAttribute, 'value'>({
-        name: 'value',
         defaultValue: DEFAULT_ATTRIBUTE.value,
+        name: 'value',
         newValue: 'value',
-        value: 'new value',
         setup: (value) => setup({ attributes: { ['value']: value } }),
+        value: 'new value',
         ...config,
       });
     });