alexreardon

Testing Suspense behaviour with Playwright

Generated with AI.

This guide describes a pattern for testing components that use React Suspense. Real-world Suspense boundaries resolve based on data fetches, lazy imports, or module loads. To test them deterministically we need to pause the suspended state, assert what the UI looks like while suspended, then resolve on demand and assert what it looks like after.

The core idea

Do not let the suspended promise resolve on its own. Instead:

alexreardon

Generated by AI

CSS Anchor Positioning: Auto-Flipping Arrows with Popovers

Purpose: This document is a comprehensive reference for developers and AI assistants implementing CSS anchor-positioned popovers with arrows that automatically flip direction when using position-try-fallbacks. It covers the core technique, the position-area property (including the critical span keywords), and complete working examples.

Table of Contents

1. The Problem
2. The Solution: clip-path margin-box

alexreardon

// A simple script to clear all notifications in Slack.
// 1. Open Slack on the web (not in the app as you cannot open the dev tools console)
// 2. Copy paste into your console
(async () => {
  function goToNotifications() {
    const button = document.querySelector('[data-qa="tab_rail_activity_button"]');
    if (!(button instanceof HTMLElement)) {
      throw Error('Count not find activities button');
    }
    button.click();

alexreardon

// This file polyfills DOMRect
// DOMRect is currently not polyfilled by jsdom

(() => {
	if (typeof window === 'undefined') {
		return;
	}
	if (window.DOMRect) {
		return;
	}

alexreardon

/* data-transfer-item-list.spec.ts */

import invariant from 'tiny-invariant';

test('add(data, format) should add a string item', done => {
  const list = new DataTransferItemList();

  list.add('Hello world', 'text/plain');

  const item: DataTransferItem = list[0];

alexreardon

// This file polyfills DragEvent for jsdom
// https://github.com/jsdom/jsdom/issues/2913
// This file is in JS rather than TS, as our jsdom setup files currently need to be in JS
// Good news: DragEvents are almost the same as MouseEvents

(() => {
  if (typeof window === 'undefined') {
    return;
  }

alexreardon

function add(a: number, b: number): number {
  return a + b;
}

type MyParameters<TFunc extends (...args: any[]) => unknown> = TFunc extends (
  ...args: infer TArgs
) => unknown
  ? TArgs
  : unknown;

alexreardon

// This file polyfills `Element.prototype.scrollBy`
// scrollBy(x-coord, y-coord)
// scrollBy(options)
(() => {
  if (typeof Element === 'undefined') {
    return;
  }
  if (typeof Element.prototype.scrollBy !== 'undefined') {
    return;
  }

alexreardon

const interactions: number[][] = [];

function sum(values: number[]) {
  return values.reduce((acc, current) => acc + current, 0);
}

function average(values: number[]): number {
  if (!values.length) {
    return 0;
  }

alexreardon

export {};

const allCollectedFps: number[][] = [];

function sum(values: number[]) {
  return values.reduce((acc, current) => acc + current, 0);
}

function average(values: number[]): number {
  if (!values.length) {