[DO NOT MERGE: Prototype] feat(visual-tests): replace percy with vizzly ember sdk

.github/workflows/ci.yml

@@ -51,6 +51,8 @@ jobs:
             ${{ runner.os }}-yarn-
 
       - run: yarn install --immutable
-      - run: yarn ci-test
+      - name: Install Playwright Chromium
+        run: node_modules/.bin/playwright-core install chromium --with-deps
+      - run: yarn vizzly:test
         env:
-          PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
+          VIZZLY_TOKEN: ${{ secrets.VIZZLY_TOKEN }}

.gitignore

@@ -39,4 +39,7 @@ MODULE_REPORT.md
 .pnp.*
 
 # Storybook Auto Generated
-.storybook/preview-head.html
+.storybook/preview-head.html
+
+# Vizzly local TDD baselines
+.vizzly/

ember-cli-build.js

@@ -3,7 +3,7 @@ const { resolve } = require('path');
 const EmberAddon = require('ember-cli/lib/broccoli/ember-addon');
 const postcssParser = require('postcss-scss');
 const tailwind = require('tailwindcss');
-const sass = require('@mozaic-ds/postcss-sass');
+const sass = require('@csstools/postcss-sass');
 const autoprefixer = require('autoprefixer');
 const colorModFunctions = require('@alexlafroscia/postcss-color-mod-function');
 

package.json

@@ -10,6 +10,8 @@
     "start": "ember server",
     "test": "ember exam",
     "ci-test": "EMBER_ENV=test QUNIT_CONSOLE_GROUPER=false PERCY_TOKEN=$PERCY_TOKEN percy exec -- ember exam",
+    "vizzly:test": "EMBER_ENV=test QUNIT_CONSOLE_GROUPER=false vizzly run \"ember exam\"",
+    "vizzly:tdd": "EMBER_ENV=test QUNIT_CONSOLE_GROUPER=false vizzly tdd run \"ember exam\"",
     "release": "release-it",
     "prepare": "husky install",
     "postinstall": "husky install",
@@ -24,7 +26,7 @@
     "@babel/core": "^7.14.6",
     "@commitlint/cli": "^17.0.3",
     "@commitlint/config-conventional": "^17.0.3",
-    "@csstools/postcss-sass": "^4.0.0",
+    "@csstools/postcss-sass": "^5.1.1",
     "@ember/jquery": "^2.0.0",
     "@ember/optional-features": "^2.0.0",
     "@ember/test-helpers": "^2.7.0",
@@ -34,7 +36,6 @@
     "@movable/prettier-config": "^1.0.0",
     "@movable/tailwind-config": "^3.5.2",
     "@movable/template-lint-plugin": "^3.0.2",
-    "@mozaic-ds/postcss-sass": "4.0.0-next.0",
     "@percy/cli": "^1.16.0",
     "@percy/ember": "^3.0.0",
     "@release-it/conventional-changelog": "^4.3.0",
@@ -44,13 +45,15 @@
     "@storybook/addon-links": "^6.4.20",
     "@storybook/ember": "^6.4.20",
     "@storybook/ember-cli-storybook": "^0.5.0",
+    "@vizzly-testing/cli": "^0.29.6",
+    "@vizzly-testing/ember": "^0.0.3",
     "autoprefixer": "^10.3.6",
     "babel-loader": "^8.2.2",
     "babel-plugin-ember-modules-api-polyfill": "^3.5.0",
     "babel-plugin-htmlbars-inline-precompile": "^5.3.1",
     "broccoli-asset-rev": "^3.0.0",
     "chalk": "^4.1.2",
-    "ember-auto-import": "^1.12.0",
+    "ember-auto-import": "^2.12.1",
     "ember-cli": "~3.28.0",
     "ember-cli-dependency-checker": "^3.2.0",
     "ember-cli-deprecation-workflow": "^2.0.0",
@@ -89,7 +92,8 @@
     "sinon": "^10.0.0",
     "tailwindcss": "^2.2.19",
     "testdouble": "^3.16.5",
-    "testdouble-qunit": "^3.0.3"
+    "testdouble-qunit": "^3.0.3",
+    "webpack": "^5.105.3"
   },
   "resolutions": {
     "shell-quote": "^1.7.3",
@@ -166,7 +170,7 @@
     "*.{hbs,json,md,yml}": "prettier --write"
   },
   "volta": {
-    "node": "14.17.1",
+    "node": "20.19.5",
     "yarn": "1.22.10"
   },
   "packageManager": "yarn@3.1.1"

testem.js

@@ -1,8 +1,10 @@
 'use strict';
 
+const { configure } = require('@vizzly-testing/ember');
+
 const parallel = process.env.EMBER_EXAM_SPLIT_COUNT || 1;
 
-module.exports = {
+module.exports = configure({
   test_page: 'tests/index.html?hidepassed',
   disable_watching: true,
   parallel,
@@ -23,4 +25,4 @@ module.exports = {
       ].filter(Boolean),
     },
   },
-};
+});

tests/helpers/vizzly-snapshot.js

@@ -0,0 +1,46 @@
+import { vizzlyScreenshot } from '@vizzly-testing/ember/test-support';
+
+/**
+ * @param {Assert|string} assert
+ * @return {string}
+ */
+export function nameFromAssert(assert) {
+  if (assert.test?.module?.name && assert.test?.testName) {
+    return `${assert.test.module.name} | ${assert.test.testName}`;
+  } else {
+    return assert;
+  }
+}
+
+/**
+ * @param {Assert|string} assert
+ * @param {string} label
+ * @return {string}
+ */
+export function createSnapshotName(assert, label) {
+  if (label) {
+    return `${nameFromAssert(assert)} | ${label}`;
+  }
+
+  return nameFromAssert(assert);
+}
+
+/**
+ * Drop-in replacement for percySnapshotWithLabel using Vizzly.
+ *
+ * @param {Assert|string} assert
+ * @param {string|object} labelOrOptions
+ * @param {object} optionsOrNothing
+ */
+export default function vizzlySnapshotWithLabel(assert, labelOrOptions, optionsOrNothing) {
+  let label = labelOrOptions;
+  let options = optionsOrNothing;
+
+  // Handle options provided as second argument w/o additional label
+  if (typeof labelOrOptions !== 'string') {
+    options = label;
+    label = undefined;
+  }
+
+  return vizzlyScreenshot(createSnapshotName(assert, label), options);
+}

tests/integration/components/expanding-list-test.js

@@ -2,7 +2,7 @@ import { hbs } from 'ember-cli-htmlbars';
 import sinon from 'sinon';
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
-import percySnapshot from '@percy/ember';
+import percySnapshot from '../../helpers/vizzly-snapshot';
 import { render, click } from '@ember/test-helpers';
 
 module('Integration | component | fluid-lab/expanding-list', function (hooks) {

tests/integration/components/fluid-banner-test.js

@@ -2,7 +2,7 @@ import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import { render } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
-import percySnapshot from '../../helpers/percy-snapshot';
+import percySnapshot from '../../helpers/vizzly-snapshot';
 
 module('Integration | Component | fluid-banner', function (hooks) {
   setupRenderingTest(hooks);

tests/integration/components/fluid-checkbox-test.js

@@ -3,7 +3,7 @@ import { setupRenderingTest } from 'ember-qunit';
 import { click, find, render, triggerKeyEvent } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
 import td from 'testdouble';
-import percySnapshot from '@percy/ember';
+import percySnapshot from '../../helpers/vizzly-snapshot';
 
 module('Integration | Component | fluid-checkbox', function (hooks) {
   setupRenderingTest(hooks);

tests/integration/components/fluid-date-input-test.js

@@ -2,7 +2,7 @@ import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import { click, render } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
-import percySnapshot from '@percy/ember';
+import percySnapshot from '../../helpers/vizzly-snapshot';
 import td from 'testdouble';
 import sinon from 'sinon';
 

tests/integration/components/fluid-drawer-test.js

@@ -3,7 +3,7 @@ import { setupRenderingTest } from 'ember-qunit';
 import { click, render } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
 import td from 'testdouble';
-import percySnapshot from '@percy/ember';
+import percySnapshot from '../../helpers/vizzly-snapshot';
 
 module('Integration | Component | fluid-drawer', function (hooks) {
   setupRenderingTest(hooks);

tests/integration/components/fluid-form-field-test.js

@@ -2,7 +2,7 @@ import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import { find, render } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
-import percySnapshot from '@percy/ember';
+import percySnapshot from '../../helpers/vizzly-snapshot';
 
 module('Integration | Component | fluid-form-field', function (hooks) {
   setupRenderingTest(hooks);

tests/integration/components/fluid-modal-test.js

@@ -2,7 +2,7 @@ import { module, test, skip } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import { click, find, render, settled } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
-import percySnapshot from '@percy/ember';
+import percySnapshot from '../../helpers/vizzly-snapshot';
 import td from 'testdouble';
 
 module('Integration | Component | FluidModal', function (hooks) {

tests/integration/components/fluid-select-test.js

@@ -4,7 +4,7 @@ import { settled, findAll, click, render } from '@ember/test-helpers';
 import { A } from '@ember/array';
 import { hbs } from 'ember-cli-htmlbars';
 import component from '@movable/fluid/test-support/pages/fluid-select';
-import percySnapshot from '../../helpers/percy-snapshot';
+import percySnapshot from '../../helpers/vizzly-snapshot';
 
 module('Integration | Component | fluid-select', function (hooks) {
   setupRenderingTest(hooks);

tests/integration/components/fluid-split-button-test.js

@@ -3,7 +3,7 @@ import { setupRenderingTest } from 'ember-qunit';
 import { click, find, render, triggerKeyEvent } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
 import td from 'testdouble';
-import percySnapshot from '@percy/ember';
+import percySnapshot from '../../helpers/vizzly-snapshot';
 
 module('Integration | Component | fluid-split-button', function (hooks) {
   setupRenderingTest(hooks);

tests/integration/components/fluid-text-input-test.js

@@ -3,7 +3,7 @@ import { setupRenderingTest } from 'ember-qunit';
 import { fillIn, render } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
 import td from 'testdouble';
-import percySnapshot from '@percy/ember';
+import percySnapshot from '../../helpers/vizzly-snapshot';
 
 module('Integration | Component | fluid-text-input', function (hooks) {
   setupRenderingTest(hooks);

tests/integration/components/fluid-tooltip-test.js

@@ -2,7 +2,7 @@ import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import { render, triggerEvent } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
-import percySnapshot from '@percy/ember';
+import percySnapshot from '../../helpers/vizzly-snapshot';
 
 module('Integration | Component | fluid-tooltip', function (hooks) {
   setupRenderingTest(hooks);

tests/integration/components/modal-test.js

@@ -3,7 +3,7 @@ import { setupRenderingTest } from 'ember-qunit';
 import { click, find, render } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
 import td from 'testdouble';
-import percySnapshot from '@percy/ember';
+import percySnapshot from '../../helpers/vizzly-snapshot';
 
 module('Integration | Component | modal', function (hooks) {
   setupRenderingTest(hooks);