From 123f091e5b8904e55b39de3af041a803cb274f22 Mon Sep 17 00:00:00 2001 From: LongYinan Date: Wed, 29 Nov 2023 04:43:35 +0000 Subject: [PATCH] fix: add prefer-dom-node-dataset rule (#5107) --- .eslintrc.js | 1 + .../affine/setting-modal/general-setting/plans/index.tsx | 3 +-- .../plugins/image-preview/src/component/index.jotai.ts | 2 +- tests/affine-desktop/e2e/basic.spec.ts | 8 ++------ tests/affine-local/e2e/all-page.spec.ts | 2 +- tests/affine-local/e2e/image-preview.spec.ts | 1 + tests/affine-local/e2e/settings.spec.ts | 8 ++------ tests/affine-local/e2e/theme.spec.ts | 8 ++------ tests/kit/utils/filter.ts | 2 ++ 9 files changed, 13 insertions(+), 22 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 0c55bc1e06..39d04c0798 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -207,6 +207,7 @@ const config = { ], 'unicorn/no-unnecessary-await': 'error', 'unicorn/no-useless-fallback-in-spread': 'error', + 'unicorn/prefer-dom-node-dataset': 'error', 'sonarjs/no-all-duplicated-branches': 'error', 'sonarjs/no-element-overwrite': 'error', 'sonarjs/no-empty-collection': 'error', diff --git a/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/index.tsx b/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/index.tsx index c7cda5e661..ff6f8555ba 100644 --- a/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/index.tsx +++ b/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/index.tsx @@ -84,8 +84,7 @@ const Settings = () => { scrollWrapper.current.getBoundingClientRect().left - parseInt(wrapperComputedStyle.paddingLeft) : 0; - const appeared = - scrollWrapper.current.getAttribute('data-appeared') === 'true'; + const appeared = scrollWrapper.current.dataset.appeared === 'true'; const animationFrameId = requestAnimationFrame(() => { scrollWrapper.current?.scrollTo({ behavior: appeared ? 'smooth' : 'instant', diff --git a/packages/plugins/image-preview/src/component/index.jotai.ts b/packages/plugins/image-preview/src/component/index.jotai.ts index 67aa51d95d..0322bc78b6 100644 --- a/packages/plugins/image-preview/src/component/index.jotai.ts +++ b/packages/plugins/image-preview/src/component/index.jotai.ts @@ -9,7 +9,7 @@ previewBlockIdAtom.onMount = set => { if (target?.tagName === 'IMG') { const imageBlock = target.closest('affine-image'); if (imageBlock) { - const blockId = imageBlock.getAttribute('data-block-id'); + const blockId = imageBlock.dataset.blockId; if (!blockId) return; set(blockId); } diff --git a/tests/affine-desktop/e2e/basic.spec.ts b/tests/affine-desktop/e2e/basic.spec.ts index c77223a573..5ff31caf87 100644 --- a/tests/affine-desktop/e2e/basic.spec.ts +++ b/tests/affine-desktop/e2e/basic.spec.ts @@ -114,9 +114,7 @@ test('clientBorder value should disable by default on window', async ({ test('app theme', async ({ page, electronApp }) => { const root = page.locator('html'); { - const themeMode = await root.evaluate(element => - element.getAttribute('data-theme') - ); + const themeMode = await root.evaluate(element => element.dataset.theme); expect(themeMode).toBe('light'); const theme = await electronApp.evaluate(({ nativeTheme }) => { @@ -131,9 +129,7 @@ test('app theme', async ({ page, electronApp }) => { await page.getByTestId('appearance-panel-trigger').click(); await page.waitForTimeout(50); await page.getByTestId('dark-theme-trigger').click(); - const themeMode = await root.evaluate(element => - element.getAttribute('data-theme') - ); + const themeMode = await root.evaluate(element => element.dataset.theme); expect(themeMode).toBe('dark'); const theme = await electronApp.evaluate(({ nativeTheme }) => { return nativeTheme.shouldUseDarkColors ? 'dark' : 'light'; diff --git a/tests/affine-local/e2e/all-page.spec.ts b/tests/affine-local/e2e/all-page.spec.ts index 488abb2657..5ed1c78770 100644 --- a/tests/affine-local/e2e/all-page.spec.ts +++ b/tests/affine-local/e2e/all-page.spec.ts @@ -1,3 +1,4 @@ +/* eslint-disable unicorn/prefer-dom-node-dataset */ import { test } from '@affine-test/kit/playwright'; import { changeFilter, @@ -307,7 +308,6 @@ test('select a group of items by clicking "Select All" in group header', async ( const selectedGroupItemTotalCount = await page .locator('[data-testid="page-list-group-header"]') .getAttribute('data-group-items-count'); - expect(selectedItemCount).toBe(selectedGroupItemTotalCount); // check the selected count is equal to the one displayed in the floating toolbar diff --git a/tests/affine-local/e2e/image-preview.spec.ts b/tests/affine-local/e2e/image-preview.spec.ts index a0a62666b8..118952323a 100644 --- a/tests/affine-local/e2e/image-preview.spec.ts +++ b/tests/affine-local/e2e/image-preview.spec.ts @@ -1,3 +1,4 @@ +/* eslint-disable unicorn/prefer-dom-node-dataset */ import { openHomePage } from '@affine-test/kit/utils/load-page'; import { clickNewPageButton, diff --git a/tests/affine-local/e2e/settings.spec.ts b/tests/affine-local/e2e/settings.spec.ts index 2b3c65d059..ba5e866aa2 100644 --- a/tests/affine-local/e2e/settings.spec.ts +++ b/tests/affine-local/e2e/settings.spec.ts @@ -49,15 +49,11 @@ test('Change theme', async ({ page }) => { const root = page.locator('html'); await page.getByTestId('light-theme-trigger').click(); - const lightMode = await root.evaluate(element => - element.getAttribute('data-theme') - ); + const lightMode = await root.evaluate(element => element.dataset.theme); expect(lightMode).toBe('light'); await page.getByTestId('dark-theme-trigger').click(); - const darkMode = await root.evaluate(element => - element.getAttribute('data-theme') - ); + const darkMode = await root.evaluate(element => element.dataset.theme); expect(darkMode).toBe('dark'); }); diff --git a/tests/affine-local/e2e/theme.spec.ts b/tests/affine-local/e2e/theme.spec.ts index 2e4d3c39b2..ae383963f5 100644 --- a/tests/affine-local/e2e/theme.spec.ts +++ b/tests/affine-local/e2e/theme.spec.ts @@ -14,9 +14,7 @@ test('default white', async ({ browser }) => { await openHomePage(page); await waitForEditorLoad(page); const root = page.locator('html'); - const themeMode = await root.evaluate(element => - element.getAttribute('data-theme') - ); + const themeMode = await root.evaluate(element => element.dataset.theme); expect(themeMode).toBe('light'); await page.screenshot({ path: resolve(testResultDir, 'affine-light-theme.png'), @@ -25,9 +23,7 @@ test('default white', async ({ browser }) => { await page.getByTestId('appearance-panel-trigger').click(); await page.waitForTimeout(50); await page.getByTestId('dark-theme-trigger').click(); - const darkMode = await root.evaluate(element => - element.getAttribute('data-theme') - ); + const darkMode = await root.evaluate(element => element.dataset.theme); expect(darkMode).toBe('dark'); await page.screenshot({ path: resolve(testResultDir, 'affine-dark-theme.png'), diff --git a/tests/kit/utils/filter.ts b/tests/kit/utils/filter.ts index dc1edaf81b..e4809fd622 100644 --- a/tests/kit/utils/filter.ts +++ b/tests/kit/utils/filter.ts @@ -48,6 +48,8 @@ export const getPagesCount = async (page: Page) => { return 0; } + // locator is not a HTMLElement, so we can't use dataset + // eslint-disable-next-line unicorn/prefer-dom-node-dataset const count = await locator.getAttribute('data-total-count'); return count ? parseInt(count) : 0; };