@stackoverflow/stacks - npm Package Compare versions

Comparing version 1.6.6 to 1.6.7

package.json

@@ -8,3 +8,3 @@ {
   },
-  "version": "1.6.6",
+  "version": "1.6.7",
   "files": [
@@ -26,4 +26,7 @@ "dist",
     "start:eleventy": "cd ./docs && eleventy --serve",
-    "test": "backstop test",
-    "approve": "backstop approve",
+    "test": "web-test-runner",
+    "test:unit": "web-test-runner --group=unit",
+    "test:unit:watch": "web-test-runner --group=unit --watch",
+    "test:visual": "web-test-runner --group=visual",
+    "test:visual:update": "web-test-runner --group=visual --update-visual-baseline",
     "prepublishOnly": "npm run build",
@@ -42,9 +45,18 @@ "lint": "concurrently -n w: npm:lint:*",
     "@11ty/eleventy": "^1.0.2",
-    "@highlightjs/cdn-assets": "^11.6.0",
-    "@stackoverflow/stacks-editor": "^0.8.2",
-    "@stackoverflow/stacks-icons": "^3.1.0",
-    "@typescript-eslint/eslint-plugin": "^5.42.0",
+    "@highlightjs/cdn-assets": "^11.7.0",
+    "@open-wc/testing": "^3.1.7",
+    "@rollup/plugin-commonjs": "^24.0.0",
+    "@rollup/plugin-replace": "^5.0.1",
+    "@stackoverflow/stacks-editor": "^0.8.3",
+    "@stackoverflow/stacks-icons": "^4.0.0",
+    "@testing-library/dom": "^8.19.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@typescript-eslint/eslint-plugin": "^5.47.1",
     "@typescript-eslint/parser": "^5.46.0",
-    "backstopjs": "^6.1.4",
-    "concurrently": "^7.5.0",
+    "@web/dev-server-esbuild": "^0.3.3",
+    "@web/dev-server-rollup": "https://github.com/giamir/web/raw/fix-dev-server-rollup/packages/dev-server-rollup/web-dev-server-rollup-0.3.19.tgz",
+    "@web/test-runner": "^0.15.0",
+    "@web/test-runner-playwright": "^0.9.0",
+    "@web/test-runner-visual-regression": "^0.7.0",
+    "concurrently": "^7.6.0",
     "css-loader": "^6.7.2",
@@ -66,2 +78,3 @@ "cssnano": "^5.1.14",
     "prettier": "^2.7.1",
+    "rollup-plugin-postcss": "^4.0.2",
     "stylelint": "^14.16.0",
@@ -72,3 +85,3 @@ "stylelint-config-recommended": "^9.0.0",
     "ts-loader": "^9.4.2",
-    "typescript": "^4.9.3",
+    "typescript": "^4.9.4",
     "webpack": "^5.75.0",
@@ -92,3 +105,6 @@ "webpack-cli": "^5.0.0",
     "not Android > 0"
-  ]
+  ],
+  "overrides": {
+    "aria-query": "~5.0.0"
+  }
 }

README.md

 # Stacks
 
+[![ci status][gh-action-badge]][gh-action-url] [![npm version][npm-badge]][npm-url]
+
 Stacks is Stack Overflow’s design system. It includes the resources needed to create consistent, predictable interfaces and workflows that conform to Stack Overflow’s principles, design language, and best practices.
@@ -58,6 +60,44 @@
 ## Testing Stacks
-Stacks has implemented visual regression testing with [Backstop](https://github.com/garris/BackstopJS). To test if your new feature introduces visual regressions, run `npm run test` in a new Terminal window while Stacks is running. After the tests have run, a new browser window with any regressions will show. If the regressions are desired, you can run `npm run approve` to establish the new baseline.
 
-Individual routes to test are found in [backstop.json](/backstop.json)
+Run all test suites by running:
+```sh
+npm test
+```
+### Unit/Component Tests
 
+Unit/Component tests are written with [DOM Testing Library](https://testing-library.com/docs/dom-testing-library/intro).
+Please follow the library's principles and documentation to write tests.
+
+Stacks uses [Web Test Runner](https://modern-web.dev/docs/test-runner/overview/) and [Playwright](https://modern-web.dev/docs/test-runner/browser-launchers/playwright/) to run tests in a real browser context.
+
+Execute the unit/component tests suite by running:
+```sh
+npm run test:unit
+```
+or if you prefer watch mode run:
+```sh
+npm run test:unit:watch
+```
+
+### Visual Regression Tests
+
+**Prerequisite:** 
+In order to pull and upload baseline images you need to have `git lfs` installed in your local machine. Please follow [this guide](https://docs.github.com/en/repositories/working-with-files/managing-large-files/installing-git-large-file-storage) to install that.
+
+
+This [Web Test Runner plugin](https://www.npmjs.com/package/@web/test-runner-visual-regression) is used to run visual regression tests. [DOM Testing Library](https://testing-library.com/docs/dom-testing-library/intro).
+Visual regression tests end with this suffix `*.visual.test.ts`.
+
+Execute the visual regression tests suite by running:
+```sh
+npm run test:visual
+```
+
+Update the visual baseline via:
+```sh
+npm run test:visual:update
+```
+
+Failing tests (including diffs) can be found under `screenshots/[browser]/failed/` folders.
+
 ## Bugs and feature requests
@@ -71,1 +111,6 @@ Have a bug or feature request? First search existing or closed issues to make sure the issue hasn’t been noted yet. If not, review our [issue guidelines](/CONTRIBUTING.md#open-an-issue) for submitting [a bug report](/CONTRIBUTING.md#reporting-bugs) or [feature request](/CONTRIBUTING.md#feature-requests).
 Code and documentation copyright 2017-2022 Stack Exchange, Inc and released under the [MIT License](/LICENSE.MD).
+
+[gh-action-url]: https://github.com/StackExchange/Stacks/actions/workflows/main.yml
+[gh-action-badge]: https://github.com/StackExchange/Stacks/actions/workflows/main.yml/badge.svg?branch=develop
+[npm-url]: https://npmjs.org/package/@stackoverflow/stacks
+[npm-badge]: https://img.shields.io/npm/v/@stackoverflow/stacks.svg

No alert changes

Improved metrics

Total package byte prevSize

1973683

increased by0.31%

Number of package files

87

increased by2.35%

Lines of code

33744

increased by0.26%

Number of lines in readme file

115

increased by64.29%

Worsened metrics

Dev dependency count

43

increased by30.3%

No dependency changes