e2e tests

Author: bvaughn

.github/workflows/playwright.yml

@@ -0,0 +1,37 @@
+name: "Playwright Tests"
+on: [pull_request]
+jobs:
+  e2e-tests:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 10
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile --recursive
+
+      - name: Cache Playwright browser binaries
+        id: playwright-cache
+        uses: actions/cache@v4
+        with:
+          path: ~/.cache/ms-playwright # Default Linux path
+          key: ${{ runner.os }}-playwright-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-playwright-
+
+      - name: Install Playwright browsers and dependencies (on cache miss)
+        if: steps.playwright-cache.outputs.cache-hit != 'true'
+        run: pnpm e2e:install
+
+      - name: Build library
+        run: pnpm prerelease
+      - name: Run Playwright tests
+        run: pnpm dev:integrations & pnpm e2e:test
+      - uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-report
+          path: integrations/tests/test-results/
+          retention-days: 14

.gitignore

@@ -12,6 +12,8 @@ node_modules
 /docs
 *.local
 
+integrations/tests/test-results
+
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json

.prettierignore

@@ -3,4 +3,4 @@
 /generated
 /public
 
-README.md
+integrations/next/.next

eslint.config.js

@@ -6,7 +6,12 @@ import tseslint from "typescript-eslint";
 import { globalIgnores } from "eslint/config";
 
 export default tseslint.config([
-  globalIgnores(["dist", "docs", "public/generated"]),
+  globalIgnores([
+    "dist",
+    "docs",
+    "public/generated",
+    "integrations/next/.next"
+  ]),
   {
     files: ["**/*.{ts,tsx}"],
     extends: [

integrations/next/.gitignore

@@ -0,0 +1 @@
+.next

integrations/next/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

integrations/next/app/components/RowComponent.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import { type RowComponentProps } from "react-window";
+
+export function RowComponent({ index, style }: RowComponentProps<object>) {
+  return (
+    <div className="flex items-center" style={style}>
+      Row {index}
+    </div>
+  );
+}

integrations/next/app/decoder/[encoded]/Decoder.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { useState } from "react";
+import { Decoder as DecoderExternal } from "../../../../tests";
+
+export function Decoder({
+  encoded: encodedProp,
+  searchParams: searchParamsMap
+}: {
+  encoded: string;
+  searchParams: { [key: string]: string | undefined } | undefined;
+}) {
+  const [encoded] = useState(() => decodeURIComponent(encodedProp));
+
+  const [searchParams] = useState(() => {
+    const params = new URLSearchParams();
+    for (const key in searchParamsMap) {
+      params.set(key, searchParamsMap[key] ?? "");
+    }
+
+    return params;
+  });
+
+  return <DecoderExternal encoded={encoded} searchParams={searchParams} />;
+}

integrations/next/app/decoder/[encoded]/page.tsx

@@ -0,0 +1,15 @@
+import { Decoder } from "./Decoder";
+
+export default async function Page({
+  params,
+  searchParams: searchParamsPromise
+}: {
+  params: Promise<{ encoded: string }>;
+  searchParams?: { [key: string]: string | undefined };
+}) {
+  const { encoded } = await params;
+
+  const searchParams = await searchParamsPromise;
+
+  return <Decoder encoded={encoded} searchParams={searchParams} />;
+}