style: linting fixes

.eslintrc

@@ -24,6 +24,7 @@
     "newline-after-var": "off",
     "no-undefined": "off",
     "comma-dangle": "off",
-    "complexity": "off"
+    "complexity": "off",
+    "max-statements": ["warn", 16]
   }
 }

src/commands/init/index.ts

@@ -17,7 +17,7 @@ export const fixtures = targets
     folder
   }))
 
-export function getFeatures({ stack, version }: (typeof fixtures)[0], next: boolean) {
+export function getFeatures({ stack, version }: Pick<(typeof fixtures)[0], 'stack' | 'version'>, next: boolean) {
   return [
     stack === 'angular' && new App.Features.Angular(version as 12 | 13 | 14 | 15, next),
     stack === 'react' && new App.Features.React(version, stack, next),
@@ -44,7 +44,12 @@ export function validate(stacks: string[], stackVersions: string[] | null): { er
   }
 
   if (stacks.length === 1 && stackVersions && stackVersions.length > 0) {
-    const unknownVersions = stackVersions.filter(v => !targets.find(t => t.stack === stacks[0])?.versions.includes(Number(v)))
+    const [stack] = stacks
+    const unknownVersions = stackVersions.filter(v => {
+      const target = targets.find(t => t.stack === stack)
+
+      return !target?.versions?.includes(Number(v))
+    })
 
     if (unknownVersions.length > 0) {
       return { error: `Unknown stack versions: ${unknownVersions.join(', ')}` }

src/commands/test/index.ts

@@ -1,5 +1,6 @@
-import { join } from 'path'
 import fs from 'fs'
+import { join } from 'path'
+
 import { appsCachePath } from '../../consts'
 
 export async function validateTestRun(app: string, dist: string): Promise<{ error: string | null }> {

src/consts.ts

@@ -1,5 +1,5 @@
-import { join } from 'path'
 import { devices } from '@playwright/test'
+import { join } from 'path'
 
 export const dotFolder = '.rete-qa'
 export const appsCachePath = join(dotFolder, 'apps')

src/index.ts

@@ -1,15 +1,16 @@
 #!/usr/bin/env node
 
+import chalk from 'chalk'
 import { createCommand } from 'commander'
 import execa from 'execa'
-import chalk from 'chalk'
 import fs from 'fs'
-import { join, dirname, resolve } from 'path'
+import { dirname, join, resolve } from 'path'
 import { App } from 'rete-kit'
-import { appsCachePath, projects } from './consts'
-import { log } from './ui'
+
 import { fixtures, getFeatures, stackNames, validate } from './commands/init'
 import { validateTestRun } from './commands/test'
+import { appsCachePath, projects } from './consts'
+import { log } from './ui'
 
 const program = createCommand()
 
@@ -72,6 +73,14 @@ program
     }
   })
 
+interface TestOptions {
+  updateSnapshots?: boolean
+  stack?: string
+  stackVersions?: string
+  project?: string
+  grep?: string
+}
+
 program
   .command('test')
   .description(`Run tests for previously initialized apps`)
@@ -80,7 +89,7 @@ program
   .option('-s --stack <stack>', `Stacks to test, comma-separated (${stackNames.join(',')})`)
   .option('-sv --stack-versions <stack-version>', `Versions to test, comma-separated`)
   .option('-p --project <project>', `Project (${projects.map(p => p.name)})`)
-  .action(async (options: { updateSnapshots?: boolean, stack?: string, stackVersions?: string, project?: string, grep?: string }) => {
+  .action(async (options: TestOptions) => {
     const stacks = options.stack ? options.stack.split(',') : null
     const stackVersions = options.stackVersions ? options.stackVersions.split(',') : null
     let exitCode = 0

src/playwright.config.ts

@@ -1,5 +1,6 @@
 import { defineConfig } from '@playwright/test';
 import { join } from 'path';
+
 import { appsCachePath, projects } from './consts'
 
 const { APP, SERVE } = process.env

src/tests/customization.spec.ts

@@ -1,4 +1,5 @@
-import { test, expect } from '@playwright/test'
+import { expect, test } from '@playwright/test'
+
 import { getGraphView, takeBeforeEach } from './helper'
 
 const { getContainer } = takeBeforeEach('?template=customization', 1000, 500)

src/tests/helper.ts

@@ -1,9 +1,13 @@
-import { test, expect, ElementHandle, Page } from '@playwright/test'
+import { ElementHandle, expect, Page, test } from '@playwright/test'
 
-type Node = ElementHandle<HTMLElement | SVGElement>
-type Connection = ElementHandle<HTMLElement | SVGElement>
+type Element = ElementHandle<HTMLElement | SVGElement>
+type Node = Element
+type Connection = Element
+type Side = 'right' | 'left'
+type HandlerPosition = 'corner' | 'center'
+type Selector = Element
 
-export async function getGraphView(container: ElementHandle<HTMLElement | SVGElement>) {
+export async function getGraphView(container: Element) {
   const area = await container?.$('> div')
 
   if (!area) throw 'area'
@@ -73,7 +77,7 @@ export function toRect(box: { x: number, y: number, width: number, height: numbe
 }
 
 export function takeBeforeEach(path: string, timeoutBefore: number, timeoutAfter: number) {
-  let container!: ElementHandle<HTMLElement | SVGElement>
+  let container!: Element
 
   test.beforeEach(async ({ page }) => {
     await page.goto(`http://localhost:3000/${path}`)
@@ -101,7 +105,7 @@ export function takeBeforeEach(path: string, timeoutBefore: number, timeoutAfter
   }
 }
 
-export async function pickNode(page: Page, node: ElementHandle<HTMLElement | SVGElement>) {
+export async function pickNode(page: Page, node: Selector) {
   const beforeBox = await boundingBox(node)
   const pickOffset = { x: 20, y: 20 }
 
@@ -110,7 +114,7 @@ export async function pickNode(page: Page, node: ElementHandle<HTMLElement | SVG
   await page.mouse.up({ button: 'left' })
 }
 
-export async function clickCenter(page: Page, selector: ElementHandle<HTMLElement | SVGElement> | string, button: 'right' | 'left' = 'left') {
+export async function clickCenter(page: Page, selector: Selector | string, button: Side = 'left') {
   const element = typeof selector === 'string' ? await page.$(selector) : selector
   if (!element) throw new Error('cannot find element')
   const beforeBox = await boundingBox(element)
@@ -121,12 +125,14 @@ export async function clickCenter(page: Page, selector: ElementHandle<HTMLElemen
   await page.mouse.up({ button })
 }
 
-export async function move(page: Page, node: ElementHandle<HTMLElement | SVGElement>, dx: number, dy: number, handlerPosition: 'corner' | 'center' = 'corner', options?: {
+export async function move(page: Page, node: Selector, dx: number, dy: number, handlerPosition: HandlerPosition = 'corner', options?: {
   down?: () => Promise<void>,
   up?: () => Promise<void>
 }) {
   const beforeBox = await boundingBox(node)
-  const pickOffset = handlerPosition === 'corner' ? { x: 20, y: 20 } : { x: beforeBox.width / 2, y: beforeBox.height / 2 }
+  const pickOffset = handlerPosition === 'corner'
+    ? { x: 20, y: 20 }
+    : { x: beforeBox.width / 2, y: beforeBox.height / 2 }
 
   await page.mouse.move(beforeBox.x + pickOffset.x, beforeBox.y + pickOffset.y)
   if (options?.down) {

src/tests/index.spec.ts

@@ -1,5 +1,6 @@
-import { test, expect } from '@playwright/test'
+import { expect, test } from '@playwright/test'
 import tinycolor from 'tinycolor2'
+
 import { getBackgroundColor, getGraphView, move, pickNode, setInputValue, takeBeforeEach } from './helper'
 
 const { getContainer } = takeBeforeEach('', 500, 500)

src/tests/minimap.spec.ts

@@ -1,4 +1,5 @@
-import { test, expect } from '@playwright/test'
+import { expect, test } from '@playwright/test'
+
 import { getGraphView, getPositions, isInside, isOutside, move, takeBeforeEach } from './helper'
 
 test.describe('Minimap', () => {
@@ -55,7 +56,9 @@ test.describe('Minimap', () => {
   })
 
   test('translate mini viewport', async ({ page }) => {
-    test.skip(String(process.env.APP).startsWith('react16'), 'React.js v16 has problems with minimap viewport translation')
+    const shouldSkip = String(process.env.APP).startsWith('react16')
+
+    test.skip(shouldSkip, 'React.js v16 has problems with minimap viewport translation')
 
     await page.waitForSelector('[data-testid="minimap-viewport"]')
 

src/tests/perf.spec.ts

@@ -1,9 +1,17 @@
-import { test, expect } from '@playwright/test'
+import { expect, test } from '@playwright/test'
+
 import { getGraphView, takeBeforeEach } from './helper'
 
+const skipWebkitMessage = [
+  'WebKit has problems running Angular apps with a lot of elements',
+  '(at least in WSL2 environment)'
+].join(' ')
+
 test.describe('Perf', () => {
   test.beforeEach(({ browserName }) => {
-    test.skip(browserName === 'webkit' && String(process.env.APP).startsWith('angular'), 'WebKit has problems running Angular apps with a lot of elements (at least in WSL2 environment)')
+    const shouldSkip = browserName === 'webkit' && String(process.env.APP).startsWith('angular')
+
+    test.skip(shouldSkip, skipWebkitMessage)
   })
   const { getContainer } = takeBeforeEach('?template=perf&rows=10&cols=10', 500, 500)
 

src/tests/reroute.spec.ts

@@ -1,5 +1,6 @@
-import { test, expect, ElementHandle } from '@playwright/test'
-import { getGraphView, move, clickCenter, takeBeforeEach } from './helper'
+import { ElementHandle, expect, test } from '@playwright/test'
+
+import { clickCenter, getGraphView, move, takeBeforeEach } from './helper'
 
 async function getConnectionPath(connection: ElementHandle<HTMLElement | SVGElement>) {
   const path = await connection.$('path')
@@ -26,7 +27,6 @@ test.describe('Reroute', () => {
     expect(await page.screenshot()).toMatchSnapshot('added-pin.png')
   })
 
-
   test('add pin and translate node', async ({ page }) => {
     const { nodes, connections } = await getGraphView(getContainer())
 

src/tests/scopes.spec.ts

@@ -1,4 +1,5 @@
-import { test, expect } from '@playwright/test'
+import { expect, test } from '@playwright/test'
+
 import { boundingBox, getGraphView, isInside, move, pickNode, takeBeforeEach, toRect } from './helper'
 
 test.describe('Scopes', () => {
@@ -16,7 +17,6 @@ test.describe('Scopes', () => {
     expect(await page.screenshot()).toMatchSnapshot('scopes.png')
   })
 
-  // eslint-disable-next-line max-statements
   test('has correct sizes', async () => {
     const { findNodes } = await getGraphView(getContainer())
 

src/ui.ts

@@ -5,7 +5,7 @@ export function log(type: 'success' | 'fail', label?: string) {
     if (type === 'success') {
       console.log('\n', label ? chalk.bgGreen(` ${label} `) : '', chalk.green(...args))
     } else if (type === 'fail') {
-      console.log('\n', label ? chalk.black.bgRgb(220,50,50)(` ${label} `) : '', chalk.red(...args))
+      console.log('\n', label ? chalk.black.bgRgb(220, 50, 50)(` ${label} `) : '', chalk.red(...args))
     } else {
       throw new Error(`type "${type}" isn't allowed`)
     }