fix: add prefer-dom-node-dataset rule (#5107)

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';

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

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,

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');
 });
 

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'),

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;
 };