User Settings redesign

.eslintrc.js

@@ -9,7 +9,7 @@ module.exports = {
 
   extends: ['airbnb-base', 'airbnb-typescript/base', 'prettier', 'plugin:@typescript-eslint/recommended'],
 
-  plugins: ['mocha', 'more', '@typescript-eslint'],
+  plugins: ['mocha', 'more', '@typescript-eslint', 'perfectionist'],
   parser: '@typescript-eslint/parser',
   parserOptions: { project: ['./tsconfig.json'] },
 
@@ -54,6 +54,36 @@ module.exports = {
     'import/order': 'off',
     'no-useless-catch': 'off',
 
+     'perfectionist/sort-imports': 'error',
+      'perfectionist/sort-named-imports': 'error',
+      'perfectionist/sort-classes': [
+        'error', 
+        {
+          partitionByComment: true,
+        },
+      ],
+      'perfectionist/sort-union-types': [
+        'error',
+        {
+          // This ensures null/undefined come after other types for better readability
+          groups: [
+            'named',
+            'keyword',
+            'operator',
+            'literal',
+            'function',
+            'import',
+            'conditional',
+            'object',
+            'tuple',
+            'intersection',
+            'union',
+            'nullish',
+          ],
+        }
+      ],
+
+
     quotes: [
       'error',
       'single',

.gitignore

@@ -21,3 +21,5 @@ output/
 dist/
 .eslintcache
 *-difference.png
+*-current*.png
+*-diff*.png

eslint.config.mjs

@@ -1,5 +1,5 @@
 import eslint from '@eslint/js';
-import tseslint from 'typescript-eslint';
+import tseslint from '@typescript-eslint/eslint-plugin';
 import globals from 'globals';
 
 export default tseslint.config(

global.setup.ts

@@ -1,9 +1,10 @@
 import { readdirSync, rm } from 'fs-extra';
+import { isEmpty } from 'lodash';
 import { homedir } from 'os';
 import { join } from 'path';
+
 import { MULTI_PREFIX, NODE_ENV } from './tests/automation/setup/open';
 import { isLinux, isMacOS } from './tests/os_utils';
-import { isEmpty } from 'lodash';
 
 const getDirectoriesOfSessionDataPath = (source: string) =>
   readdirSync(source, { withFileTypes: true })

package.json

@@ -9,6 +9,8 @@
     "@playwright/test": "^1.51",
     "@types/fs-extra": "^11.0.1",
     "@types/lodash": "^4.14.196",
+    "@types/pixelmatch": "^5.2.6",
+    "@types/pngjs": "^6.0.5",
     "@types/uuid": "^9.0.8",
     "@typescript-eslint/eslint-plugin": "^6.2.1",
     "@typescript-eslint/parser": "^6.0.0",
@@ -23,9 +25,12 @@
     "eslint-plugin-import": "^2.28.0",
     "eslint-plugin-mocha": "^10.1.0",
     "eslint-plugin-more": "^1.0.5",
+    "eslint-plugin-perfectionist": "^4.15.0",
     "fs-extra": "^11.1.1",
     "lodash": "^4.17.21",
+    "pngjs": "^7.0.0",
     "prettier": "^3.0.1",
+    "sharp": "^0.34.4",
     "typescript": "^5.1.6",
     "uuid": "^9.0.1"
   },
@@ -39,5 +44,7 @@
     "allure-create": "allure generate ./allure-results",
     "allure-open": "allure open ./allure-report"
   },
-  "dependencies": {}
+  "dependencies": {
+    "pixelmatch": "^7.1.0"
+  }
 }

playwright.config.ts

@@ -1,7 +1,7 @@
 import { defineConfig } from '@playwright/test';
+import dotenv from 'dotenv';
 import { toNumber } from 'lodash';
 
-import dotenv from 'dotenv';
 import { screenshotFolder } from './tests/automation/constants/variables';
 
 dotenv.config();

sessionReporter.ts

@@ -7,6 +7,7 @@ import type {
   TestError,
   TestResult,
 } from '@playwright/test/reporter';
+
 import chalk from 'chalk';
 import { Dictionary, groupBy, isString, mean, sortBy } from 'lodash';
 
@@ -74,14 +75,14 @@ function printFailedTestLogs() {
 }
 
 class SessionReporter implements Reporter {
-  private startTime = 0;
+  private allResults: Array<TestAndResult> = [];
 
   private allTestsCount = 0;
 
-  private allResults: Array<TestAndResult> = [];
-
   private countWorkers = 1;
 
+  private startTime = 0;
+
   onBegin(config: FullConfig, suite: Suite) {
     this.allTestsCount = suite.allTests().length;
     this.countWorkers = config.workers;
@@ -92,6 +93,56 @@ class SessionReporter implements Reporter {
     this.startTime = Date.now();
   }
 
+  onEnd(result: FullResult) {
+    console.log(
+      chalk.bgWhiteBright.black(
+        `\n\n\n\t\tFinished the run: ${result.status}, count of tests run: ${
+          this.allResults.length
+        }, took ${Math.floor(
+          (Date.now() - this.startTime) / (60 * 1000),
+        )} minute(s)`,
+      ),
+    );
+    const { allFailedSoFar, allPassedSoFar, partiallyPassed } =
+      this.groupResultsByTestName();
+
+    sortByTitle(allPassedSoFar).forEach((m) => formatGroupedByResults(m));
+    sortByTitle(partiallyPassed).forEach((m) => formatGroupedByResults(m));
+    sortByTitle(allFailedSoFar).forEach((m) => formatGroupedByResults(m));
+  }
+
+  onError?(error: TestError) {
+    console.info('global error:', error);
+  }
+
+  onStdErr?(
+    chunk: Buffer | string,
+    test: TestCase | void,
+    _result: TestResult | void,
+  ) {
+    if (printOngoingTestLogs()) {
+      process.stdout.write(
+        `"${test ? `${chalk.cyanBright(test.title)}` : ''}":err: ${
+          isString(chunk) ? chunk : chunk.toString('utf-8')
+        }`,
+      );
+    }
+  }
+
+  onStdOut?(
+    chunk: Buffer | string,
+    test: TestCase | void,
+    _result: TestResult | void,
+  ) {
+    if (printOngoingTestLogs()) {
+      process.stdout.write(
+        `"${test ? `${chalk.cyanBright(test.title)}` : ''}": ${
+          isString(chunk) ? chunk : chunk.toString('utf-8')
+        }`,
+      );
+    }
+  }
+
   onTestBegin(test: TestCase, result: TestResult) {
     console.log(
       chalk.magenta(
@@ -200,56 +251,6 @@ class SessionReporter implements Reporter {
       ),
     };
   }
-
-  onEnd(result: FullResult) {
-    console.log(
-      chalk.bgWhiteBright.black(
-        `\n\n\n\t\tFinished the run: ${result.status}, count of tests run: ${
-          this.allResults.length
-        }, took ${Math.floor(
-          (Date.now() - this.startTime) / (60 * 1000),
-        )} minute(s)`,
-      ),
-    );
-    const { allFailedSoFar, allPassedSoFar, partiallyPassed } =
-      this.groupResultsByTestName();
-
-    sortByTitle(allPassedSoFar).forEach((m) => formatGroupedByResults(m));
-    sortByTitle(partiallyPassed).forEach((m) => formatGroupedByResults(m));
-    sortByTitle(allFailedSoFar).forEach((m) => formatGroupedByResults(m));
-  }
-
-  onStdOut?(
-    chunk: string | Buffer,
-    test: void | TestCase,
-    _result: void | TestResult,
-  ) {
-    if (printOngoingTestLogs()) {
-      process.stdout.write(
-        `"${test ? `${chalk.cyanBright(test.title)}` : ''}": ${
-          isString(chunk) ? chunk : chunk.toString('utf-8')
-        }`,
-      );
-    }
-  }
-
-  onStdErr?(
-    chunk: string | Buffer,
-    test: void | TestCase,
-    _result: void | TestResult,
-  ) {
-    if (printOngoingTestLogs()) {
-      process.stdout.write(
-        `"${test ? `${chalk.cyanBright(test.title)}` : ''}":err: ${
-          isString(chunk) ? chunk : chunk.toString('utf-8')
-        }`,
-      );
-    }
-  }
-
-  onError?(error: TestError) {
-    console.info('global error:', error);
-  }
 }
 
 export default SessionReporter;

tests/automation/call_checks.spec.ts

@@ -8,7 +8,7 @@ test_Alice_1W_Bob_1W(
   'Voice calls',
   async ({ alice, aliceWindow1, bob, bobWindow1 }) => {
     await createContact(aliceWindow1, bobWindow1, alice, bob);
-    await makeVoiceCall(aliceWindow1, bobWindow1, alice, bob);
+    await makeVoiceCall(aliceWindow1, bobWindow1);
     // In the receivers window, the message is 'Call in progress'
     await waitForTestIdWithText(
       bobWindow1,

tests/automation/community_tests.spec.ts

@@ -1,19 +1,20 @@
 import { testCommunityName } from './constants/community';
+import { Conversation, HomeScreen } from './locators';
 import { test_Alice_1W_Bob_1W, test_Alice_2W } from './setup/sessionTest';
 import { joinCommunity } from './utilities/join_community';
 import { sendMessage } from './utilities/message';
 import { replyTo } from './utilities/reply_message';
 import { sendMedia } from './utilities/send_media';
-import { clickOnTestIdWithText } from './utilities/utils';
+import { clickOn, clickOnWithText } from './utilities/utils';
 
 test_Alice_2W('Join community', async ({ aliceWindow1, aliceWindow2 }) => {
   await joinCommunity(aliceWindow1);
-  await clickOnTestIdWithText(aliceWindow1, 'scroll-to-bottom-button');
+  await clickOn(aliceWindow1, Conversation.scrollToBottomButton);
   await sendMessage(aliceWindow1, 'Hello, community!');
   // Check linked device for community
-  await clickOnTestIdWithText(
+  await clickOnWithText(
     aliceWindow2,
-    'module-conversation__user__profile-name',
+    HomeScreen.conversationItemName,
     testCommunityName,
   );
 });
@@ -29,15 +30,16 @@ test_Alice_1W_Bob_1W(
     //   waitForLoadingAnimationToFinish(aliceWindow1, 'loading-spinner'),
     //   waitForLoadingAnimationToFinish(bobWindow1, 'loading-spinner'),
     // ]);
-    await Promise.all([
-      clickOnTestIdWithText(aliceWindow1, 'scroll-to-bottom-button'),
-      clickOnTestIdWithText(bobWindow1, 'scroll-to-bottom-button'),
-    ]);
+    await Promise.all(
+      [aliceWindow1, bobWindow1].map((window) =>
+        clickOn(window, Conversation.scrollToBottomButton),
+      ),
+    );
     await sendMessage(aliceWindow1, testMessage);
     // Check linked device for community
-    await clickOnTestIdWithText(
+    await clickOnWithText(
       aliceWindow1,
-      'module-conversation__user__profile-name',
+      HomeScreen.conversationItemName,
       testCommunityName,
     );
     await sendMedia(

tests/automation/constants/variables.ts

@@ -1,8 +1,8 @@
 import {
-  DMTimeOption,
   DisappearActions,
   DisappearGroupType,
   DisappearType,
+  DMTimeOption,
   MediaType,
 } from '../types/testing';
 
@@ -42,7 +42,7 @@ export const mediaArray = [
 
 type DisappearingOption = {
   timeOption: DMTimeOption;
-  disappearingMessagesType: DisappearType | DisappearGroupType;
+  disappearingMessagesType: DisappearGroupType | DisappearType;
   disappearAction: DisappearActions;
 };