diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json new file mode 100644 index 00000000..c482f4af --- /dev/null +++ b/.devcontainer/devcontainer.json @@ -0,0 +1,26 @@ +// .devcontainer/devcontainer.json +{ + "name": "Node.js & TypeScript (Playwright)", + "image": "mcr.microsoft.com/playwright:v1.55.1-noble", + // Install browsers + "postCreateCommand": "npm install; npx playwright install", + // Start virtual Xserver for tests and leave running + "postStartCommand": "nohup bash -c 'Xvfb $DISPLAY -screen 0 1280x720x16 &'", + "containerEnv": { + "DISPLAY": ":99" + }, + "portsAttributes": { + "51204": { + "label": "Vitest UI" + }, + "5173": { + "label": "Vite Dev Server" + }, + "6006": { + "label": "Storybook" + }, + "3000": { + "label": "Docs Site" + } + } +} diff --git a/.gitignore b/.gitignore index 31b2ce2a..148da8e2 100644 --- a/.gitignore +++ b/.gitignore @@ -24,6 +24,7 @@ tscommand* *.log *.sql *.sqlite +nohup.out # Sublime workspace settings # *.sublime-workspace diff --git a/CHANGELOG.md b/CHANGELOG.md index b29893d8..01eb1d50 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -15,7 +15,8 @@ This project adheres to [Semantic Versioning](http://semver.org/). ### Added -- +- DX: Support for [Visual Studio Code Dev Containers](https://code.visualstudio.com/docs/devcontainers/containers) for an out-of-the-box contribution dev environment +- DX: Support for [Vitest UI](https://vitest.dev/guide/ui.html) for browser testing ### Fixed @@ -23,7 +24,8 @@ This project adheres to [Semantic Versioning](http://semver.org/). ### Updates -- +- Deps: Upgraded to Playwright 1.55.1 +- Tests: Split test suite into `unit` and `visual` tests ### Changed diff --git a/README.md b/README.md index 1b3c825d..e1117756 100644 --- a/README.md +++ b/README.md @@ -45,14 +45,6 @@ Compiled examples can be found [in the Excalibur Samples collection](http://exca Please read our [Contributing Guidelines](.github/CONTRIBUTING.md) and our [Code of Conduct](.github/CODE_OF_CONDUCT.md). Whether you've spotted a bug, have a question, or think of a new feature, we thank you for your help! -## Mac/Linux - -Prerequisites -* Docker for Mac https://docs.docker.com/desktop/mac/install/ -* In the root, run `docker compose build` (setup build environment and installs dependencies, only needed once) -* To run tests in watch mode `docker compose run --rm dev npm run test:watch` -* To run a build `docker compose run --rm dev npm run all` - # Writing Documentation We love when people help improve our documentation. You can contribute to the docs in this repo under [`/site`](https://github.com/excaliburjs/Excalibur/tree/main/site) @@ -62,6 +54,18 @@ We love when people help improve our documentation. You can contribute to the do The Excalibur.js team primarily uses [Visual Studio Code](http://code.visualstudio.com) as a platform agnostic editor to allow the widest contributions possible. However, you can always use your own preferred editor. +**Dev Container Support** + +In supported editors, you may be prompted to **Open in a Dev Container**. This is a great way to contribute if you don't want to install Playwright and +its dependencies on your machine and keep everything isolated. + +Dev Containers require [Docker](https://docs.docker.com/desktop/) (or [Podman](https://podman.io/)) to be installed and should work across all platforms. + +_Supported Editors_ + +- [Visual Studio documentation](https://code.visualstudio.com/docs/devcontainers/containers) +- [Web Storm documentation](https://www.jetbrains.com/help/webstorm/connect-to-devcontainer.html) + ## Testing [![Browserstack](/assets/browserstack-logo-150x34.png?raw=true)](http://browserstack.com/) @@ -77,8 +81,12 @@ After cloning the repository, run: ```sh npm install +npx playwright install --with-deps ``` +> [!TIP] +> If you are using a Dev Container, this is handled for you automatically! The `--with-deps` flag installs system dependencies, which may be needed depending on your OS. + You can then run the npm tasks for various purposes: ```bash diff --git a/docker-compose.yml b/docker-compose.yml deleted file mode 100644 index 8eab9ae7..00000000 --- a/docker-compose.yml +++ /dev/null @@ -1,12 +0,0 @@ -version: '3' - -services: - dev: - build: - context: . - dockerfile: docker/Dockerfile - working_dir: /opt/app - container_name: 'dev' - volumes: - - './:/opt/app' - - /opt/app/node_modules diff --git a/docker/Dockerfile b/docker/Dockerfile deleted file mode 100644 index 28672c07..00000000 --- a/docker/Dockerfile +++ /dev/null @@ -1,20 +0,0 @@ -from ubuntu:22.04 -# Referenced https://github.com/actions/virtual-environments/blob/main/images/linux/Ubuntu2004-Readme.md -# ubuntu-latest https://github.com/actions/virtual-environments - -# Chrome wants a timezone -ENV TZ=America/Chicago -RUN ln -snf /usr/share/zoneinfo/$TZ /etc/localtime && echo $TZ > /etc/timezone - -RUN apt update -# Install Chromium Shared Deps (puppeteer in npm comes with chromium binary) -RUN apt install -y wget curl gnupg libnss3-dev libgdk-pixbuf2.0-dev libgtk-3-dev libxss-dev libasound2 - -# Install node -RUN curl -sL https://deb.nodesource.com/setup_16.x | bash - -RUN apt-get -y install nodejs - - -WORKDIR /opt/app -ADD package.json package-lock.json /opt/app/ -RUN npm install \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 21d69610..4b99a338 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,6 +23,7 @@ "@types/webpack-env": "1.18.8", "@vitest/browser": "3.2.4", "@vitest/coverage-istanbul": "3.2.4", + "@vitest/ui": "3.2.4", "concurrently": "9.2.0", "copyfiles": "2.4.1", "coveralls-next": "5.0.0", @@ -45,7 +46,7 @@ "karma-webpack": "5.0.1", "lint-staged": "15.5.2", "pixelmatch": "5.3.0", - "playwright": "1.54.2", + "playwright": "1.55.1", "prettier": "3.6.2", "puppeteer": "24.15.0", "raw-loader": "4.0.2", @@ -4125,6 +4126,28 @@ "node": ">=14.0.0" } }, + "node_modules/@vitest/ui": { + "version": "3.2.4", + "resolved": "https://registry.npmjs.org/@vitest/ui/-/ui-3.2.4.tgz", + "integrity": "sha512-hGISOaP18plkzbWEcP/QvtRW1xDXF2+96HbEX6byqQhAUbiS5oH6/9JwW+QsQCIYON2bI6QZBF+2PvOmrRZ9wA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@vitest/utils": "3.2.4", + "fflate": "^0.8.2", + "flatted": "^3.3.3", + "pathe": "^2.0.3", + "sirv": "^3.0.1", + "tinyglobby": "^0.2.14", + "tinyrainbow": "^2.0.0" + }, + "funding": { + "url": "https://opencollective.com/vitest" + }, + "peerDependencies": { + "vitest": "3.2.4" + } + }, "node_modules/@vitest/utils": { "version": "3.2.4", "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-3.2.4.tgz", @@ -7514,6 +7537,13 @@ "pend": "~1.2.0" } }, + "node_modules/fflate": { + "version": "0.8.2", + "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz", + "integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==", + "dev": true, + "license": "MIT" + }, "node_modules/file-entry-cache": { "version": "8.0.0", "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz", @@ -7582,9 +7612,9 @@ } }, "node_modules/flatted": { - "version": "3.3.2", - "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.2.tgz", - "integrity": "sha512-AiwGJM8YcNOaobumgtng+6NHuOqC3A7MixFeDafM3X9cIUM+xUXoS5Vfgf+OihAYe20fxqNM9yPBXJzRtZ/4eA==", + "version": "3.3.3", + "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.3.tgz", + "integrity": "sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==", "dev": true, "license": "ISC" }, @@ -10314,13 +10344,13 @@ } }, "node_modules/playwright": { - "version": "1.54.2", - "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.54.2.tgz", - "integrity": "sha512-Hu/BMoA1NAdRUuulyvQC0pEqZ4vQbGfn8f7wPXcnqQmM+zct9UliKxsIkLNmz/ku7LElUNqmaiv1TG/aL5ACsw==", + "version": "1.55.1", + "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.55.1.tgz", + "integrity": "sha512-cJW4Xd/G3v5ovXtJJ52MAOclqeac9S/aGGgRzLabuF8TnIb6xHvMzKIa6JmrRzUkeXJgfL1MhukP0NK6l39h3A==", "dev": true, "license": "Apache-2.0", "dependencies": { - "playwright-core": "1.54.2" + "playwright-core": "1.55.1" }, "bin": { "playwright": "cli.js" @@ -10333,9 +10363,9 @@ } }, "node_modules/playwright-core": { - "version": "1.54.2", - "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.54.2.tgz", - "integrity": "sha512-n5r4HFbMmWsB4twG7tJLDN9gmBUeSPcsBZiWSE4DnYz9mJMAFqr2ID7+eGC9kpEnxExJ1epttwR59LEWCk8mtA==", + "version": "1.55.1", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.55.1.tgz", + "integrity": "sha512-Z6Mh9mkwX+zxSlHqdr5AOcJnfp+xUWLCt9uKV18fhzA8eyxUd8NUWzAjxUh55RZKSYwDGX0cfaySdhZJGMoJ+w==", "dev": true, "license": "Apache-2.0", "bin": { diff --git a/package.json b/package.json index 6b03378b..93e75e42 100644 --- a/package.json +++ b/package.json @@ -66,13 +66,13 @@ "visual": "storybook dev -p 6006", "build-storybook": "storybook build -o build-storybook", "sandbox": "cd sandbox && vite", - "test": "vitest", + "test": "vitest --ui", + "test:ci": "vitest", "test:watch": "npm run test -- --watch", "test:unit": "vitest --project unit", "test:unit:headless": "npm run test:unit -- --browser.headless", "test:visual": "vitest --project visual", "test:visual:headless": "npm run test:visual -- --browser.headless", - "test:ci": "npm run test -- --silent --hideSkippedTests", "apidocs": "node scripts/apidocs.js", "release": "cross-env release=true npm run all", "prepare": "husky" @@ -92,6 +92,7 @@ "@types/webpack-env": "1.18.8", "@vitest/browser": "3.2.4", "@vitest/coverage-istanbul": "3.2.4", + "@vitest/ui": "3.2.4", "concurrently": "9.2.0", "copyfiles": "2.4.1", "coveralls-next": "5.0.0", @@ -114,7 +115,7 @@ "karma-webpack": "5.0.1", "lint-staged": "15.5.2", "pixelmatch": "5.3.0", - "playwright": "1.54.2", + "playwright": "1.55.1", "prettier": "3.6.2", "puppeteer": "24.15.0", "raw-loader": "4.0.2", @@ -130,13 +131,13 @@ "typedoc": "0.25.13", "typescript": "5.6.3", "typescript-eslint": "8.38.0", + "url-loader": "4.1.1", "vite": "6.3.6", "vite-plugin-banner": "0.8.1", "vite-plugin-static-copy": "3.1.2", "vitest": "3.2.4", "webpack": "5.101.0", - "webpack-cli": "5.1.4", - "url-loader": "4.1.1" + "webpack-cli": "5.1.4" }, "lint-staged": { "*.{js,jsx,ts,tsx,html,json,md,yml,yaml}": "prettier --write", diff --git a/vitest.config.ts b/vitest.config.ts index d85cdb14..4332e270 100644 --- a/vitest.config.ts +++ b/vitest.config.ts @@ -18,6 +18,8 @@ export default defineConfig( } }, test: { + api: { host: '0.0.0.0' }, + silent: 'passed-only', reporters: [['default', { summary: false }], new EngineInstanceReporter(), new MemoryReporter()], // enable with --coverage param coverage: {