Quality — Cheat Sheet

Testing Fundamentals — Vitest and Jest

import { describe, it, expect, beforeEach, vi } from 'vitest'

describe('calculateReadiness', () => {
  let attempts

  beforeEach(() => { attempts = [] })      // fresh state per test

  it('returns provisional below five attempts', () => {
    const result = calculateReadiness(attempts)      // act
    expect(result.provisional).toBe(true)            // assert
  })

  it.each([
    [0, 'not started'],
    [45, 'developing'],
    [85, 'ready'],
  ])('labels %i as %s', (score, label) => {
    expect(labelFor(score)).toBe(label)
  })
})

// Matchers that matter
expect(x).toBe(1)                    // Object.is — primitives, identity
expect(obj).toEqual({ a: 1 })        // deep equality, ignores undefined keys
expect(obj).toStrictEqual({ a: 1 })  // deep, and does not ignore them
expect(arr).toHaveLength(3)
expect(arr).toContainEqual({ id: 1 })
expect(fn).toThrow(ValidationError)
expect(obj).toMatchObject({ id: 1 })  // subset match

Testing React Components

import { render, screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'

render(<ProblemCard problem={problem} onOpen={onOpen} />)

// Priority order
screen.getByRole('button', { name: /solve/i })     // best
screen.getByLabelText('Email')                      // form fields
screen.getByPlaceholderText('Search problems')
screen.getByText(/two sum/i)
screen.getByTestId('problem-card')                  // last resort

// If getByRole cannot find your button, a screen reader cannot
// either. The failing test is telling you about a real defect.

// get / query / find
getByRole(...)     // throws if missing — asserts presence
queryByRole(...)   // null if missing — the only way to assert absence
await findByRole(...)  // waits for it to appear — async

expect(screen.queryByText('Error')).not.toBeInTheDocument()

End-to-End Testing with Playwright

import { test, expect } from '@playwright/test'

test('a signed-in user can run a solution', async ({ page }) => {
  await page.goto('/dsa/problems/two-sum')

  await page.getByRole('button', { name: 'Run' }).click()
  await expect(page.getByText('3 of 3 tests passed')).toBeVisible()
})

// A locator is lazy and auto-retries: it waits for the element to
// exist, be visible, be stable and be enabled before acting.
// So this is never needed and hides real timing bugs:
await page.waitForTimeout(2000)      // avoid

// Assertions retry too, up to the timeout
await expect(page.getByRole('alert')).toHaveText(/saved/i)

// Locator priority mirrors Testing Library
page.getByRole('button', { name: 'Submit' })
page.getByLabel('Email')
page.getByTestId('editor')           // last resort

Linting, Formatting and CI Gates

// Prettier — formatting only, no correctness opinions
{ "semi": false, "singleQuote": true, "printWidth": 100 }

// ESLint — correctness and consistency (flat config)
export default [
  js.configs.recommended,
  ...tseslint.configs.recommendedTypeChecked,     // needs a tsconfig
  {
    rules: {
      '@typescript-eslint/no-floating-promises': 'error',
      '@typescript-eslint/no-explicit-any': 'warn',
      'react-hooks/exhaustive-deps': 'warn',
      'no-console': ['warn', { allow: ['warn', 'error'] }],
    },
  },
]

// no-floating-promises is the highest-value rule here:
saveProgress()      // forgot await — the error vanishes silently
// It catches more production bugs than every formatting rule combined.

// exhaustive-deps is the second: a stale closure in a useEffect
// is one of the hardest React bugs to find by reading.

Accessibility and Frontend Security

// A clickable div needs all of this to match a button
<div onClick={h} role="button" tabIndex={0}
     onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && h()}>

// A button just works
<button onClick={h}>Run</button>

// Elements that carry meaning for free
<nav> <main> <header> <footer> <aside>
<button> <a href> <label> <fieldset> <table>

// Labels — every input needs one
<label htmlFor="email">Email</label>
<input id="email" name="email" type="email" />
// An icon-only control needs an accessible name
<button aria-label="Close dialog"><X aria-hidden="true" /></button>

// Images: alt describes purpose; decorative images take alt=""
<img src={cover} alt="" />

// Headings are a document outline, not font sizes.
// One h1, no skipped levels — a screen-reader user navigates by them.