Updated visual regression assertions (#243)

* chore: Updated development dependencies * chore: Created a variable for pnpm version * chore: Temporarily skipped jobs * chore: Updated assertions * Revert "chore: Temporarily skipped jobs" This reverts commit f7897f9. * chore: Added changesets --------- Co-authored-by: ijlee2 <[email protected]>
ijlee2 · Aug 29, 2024 · e229d5e · e229d5e
1 parent d358089
commit e229d5e
Show file tree

Hide file tree

Showing 10 changed files with 546 additions and 469 deletions.
diff --git a/.changeset/heavy-monkeys-confess.md b/.changeset/heavy-monkeys-confess.md
@@ -0,0 +1,5 @@
+---
+"docs-app": patch
+---
+
+Updated failing assertions
diff --git a/.changeset/three-walls-wonder.md b/.changeset/three-walls-wonder.md
@@ -0,0 +1,6 @@
+---
+"docs-app": patch
+"test-app": patch
+---
+
+Updated development dependencies
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -10,6 +10,7 @@ env:
   NODE_VERSION: 18
   PERCY_PARALLEL_NONCE: ${{ github.run_id }}-${{ github.run_number }}
   PERCY_PARALLEL_TOTAL: 9
+  PNPM_VERSION: 9
 
 jobs:
   lint:
@@ -29,7 +30,7 @@ jobs:
       - name: Set up pnpm
         uses: pnpm/action-setup@v4
         # with:
-        #   version: 9
+        #   version: ${{ env.PNPM_VERSION }}
 
       - name: Use Node.js ${{ env.NODE_VERSION }}
         uses: actions/setup-node@v4
@@ -56,7 +57,7 @@ jobs:
       - name: Set up pnpm
         uses: pnpm/action-setup@v4
         # with:
-        #   version: 9
+        #   version: ${{ env.PNPM_VERSION }}
 
       - name: Use Node.js ${{ env.NODE_VERSION }}
         uses: actions/setup-node@v4
@@ -121,7 +122,7 @@ jobs:
       - name: Set up pnpm
         uses: pnpm/action-setup@v4
         # with:
-        #   version: 9
+        #   version: ${{ env.PNPM_VERSION }}
 
       - name: Use Node.js ${{ env.NODE_VERSION }}
         uses: actions/setup-node@v4
@@ -164,7 +165,7 @@ jobs:
       - name: Set up pnpm
         uses: pnpm/action-setup@v4
         # with:
-        #   version: 9
+        #   version: ${{ env.PNPM_VERSION }}
 
       - name: Use Node.js ${{ env.NODE_VERSION }}
         uses: actions/setup-node@v4
@@ -205,7 +206,7 @@ jobs:
       - name: Set up pnpm
         uses: pnpm/action-setup@v4
         # with:
-        #   version: 9
+        #   version: ${{ env.PNPM_VERSION }}
 
       - name: Use Node.js ${{ env.NODE_VERSION }}
         uses: actions/setup-node@v4

diff --git a/configs/eslint/ember/package.json b/configs/eslint/ember/package.json
@@ -17,15 +17,15 @@
   },
   "dependencies": {
     "@rushstack/eslint-patch": "^1.10.4",
-    "@typescript-eslint/eslint-plugin": "^8.1.0",
-    "@typescript-eslint/parser": "^8.1.0",
+    "@typescript-eslint/eslint-plugin": "^8.3.0",
+    "@typescript-eslint/parser": "^8.3.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-import-resolver-typescript": "^3.6.1",
+    "eslint-import-resolver-typescript": "^3.6.3",
     "eslint-plugin-ember": "^12.1.1",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-n": "^17.10.2",
     "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-qunit": "^8.1.1",
+    "eslint-plugin-qunit": "^8.1.2",
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "eslint-plugin-typescript-sort-keys": "^3.2.0"
   },

diff --git a/configs/eslint/node/package.json b/configs/eslint/node/package.json
@@ -19,10 +19,10 @@
     "@babel/core": "^7.25.2",
     "@babel/eslint-parser": "7.25.1",
     "@rushstack/eslint-patch": "^1.10.4",
-    "@typescript-eslint/eslint-plugin": "^8.1.0",
-    "@typescript-eslint/parser": "^8.1.0",
+    "@typescript-eslint/eslint-plugin": "^8.3.0",
+    "@typescript-eslint/parser": "^8.3.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-import-resolver-typescript": "^3.6.1",
+    "eslint-import-resolver-typescript": "^3.6.3",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-n": "^17.10.2",
     "eslint-plugin-prettier": "^5.2.1",

diff --git a/docs-app/package.json b/docs-app/package.json
@@ -58,7 +58,7 @@
     "@glint/environment-ember-loose": "^1.4.0",
     "@glint/environment-ember-template-imports": "^1.4.0",
     "@glint/template": "^1.4.0",
-    "@percy/cli": "^1.29.1",
+    "@percy/cli": "^1.29.2",
     "@percy/ember": "^4.2.0",
     "@shared-configs/ember-template-lint": "workspace:*",
     "@shared-configs/eslint-config-ember": "workspace:*",
@@ -75,7 +75,7 @@
     "d3-scale": "^4.0.2",
     "d3-selection": "^3.0.0",
     "d3-shape": "^3.2.0",
-    "ember-a11y-refocus": "^4.1.1",
+    "ember-a11y-refocus": "^4.1.4",
     "ember-a11y-testing": "^6.1.1",
     "ember-auto-import": "^2.7.4",
     "ember-cli": "~5.10.0",
@@ -94,23 +94,23 @@
     "ember-qunit": "^8.1.0",
     "ember-resolver": "^12.0.1",
     "ember-source": "~5.10.2",
-    "ember-svg-jar": "^2.4.9",
+    "ember-svg-jar": "^2.5.0",
     "ember-template-imports": "^4.1.1",
     "ember-template-lint": "^6.0.0",
     "ember-test-selectors": "^7.0.0",
     "ember-truth-helpers": "^4.0.3",
-    "embroider-css-modules": "^2.0.9",
+    "embroider-css-modules": "^2.0.10",
     "eslint": "^8.57.0",
     "loader.js": "^4.7.0",
     "postcss": "^8.4.41",
     "postcss-loader": "^8.1.1",
     "prettier": "^3.3.3",
-    "qunit": "^2.21.1",
+    "qunit": "^2.22.0",
     "qunit-dom": "^3.2.0",
-    "stylelint": "^16.8.1",
-    "type-css-modules": "^1.0.11",
+    "stylelint": "^16.9.0",
+    "type-css-modules": "^1.0.13",
     "typescript": "^5.5.4",
-    "webpack": "^5.93.0"
+    "webpack": "^5.94.0"
   },
   "engines": {
     "node": "18.* || >= 20"

diff --git a/docs-app/tests/acceptance/album/visual-regression-test.ts b/docs-app/tests/acceptance/album/visual-regression-test.ts
@@ -101,16 +101,17 @@ module('Acceptance | album', function (hooks) {
 
   test('@w3 @h2 Visual snapshot', async function (assert) {
     assert
-      .dom('[data-test-table="Tracks"]')
-      .exists('We see the album tracks in a table.');
-
-    assert
-      .dom('[data-test-table="Tracks"] [data-test-row]')
-      .exists({ count: 11 }, 'We see 11 tracks.');
+      .dom('[data-test-list="Tracks"]')
+      .exists('We see the album tracks in a list.')
+      .hasAttribute(
+        'data-css-grid',
+        '4 x 3',
+        'We see 11 tracks in a 4 x 3 grid.',
+      );
 
     assert
       .dom('[data-test-track-lyrics]')
-      .exists("We see the current track's lyrics.");
+      .doesNotExist("We don't see the current track's lyrics.");
 
     await takeSnapshot(assert);
   });

diff --git a/docs-app/tests/acceptance/dashboard/visual-regression-test.ts b/docs-app/tests/acceptance/dashboard/visual-regression-test.ts
@@ -25,17 +25,11 @@ module('Acceptance | dashboard', function (hooks) {
 
     assert
       .dom('[data-test-widget="2"] [data-test-field="Annual Revenue"]')
-      .hasText(
-        'Annual revenue: $2.3 billion',
-        'We see the annual revenue in correct format.',
-      );
+      .hasText('$2.3 billion', 'We see the annual revenue in correct format.');
 
     assert
       .dom('[data-test-widget="2"] [data-test-field="Relevant Years"]')
-      .hasText(
-        'Relevant years: 1973 - 1982',
-        'We see the relevant years in correct format.',
-      );
+      .hasText('1973 - 1982', 'We see the relevant years in correct format.');
 
     // Widget 3
     assert
@@ -220,17 +214,11 @@ module('Acceptance | dashboard', function (hooks) {
 
     assert
       .dom('[data-test-widget="2"] [data-test-field="Annual Revenue"]')
-      .hasText(
-        'Annual revenue: $2.3 billion',
-        'We see the annual revenue in correct format.',
-      );
+      .hasText('$2.3 billion', 'We see the annual revenue in correct format.');
 
     assert
       .dom('[data-test-widget="2"] [data-test-field="Relevant Years"]')
-      .hasText(
-        'Relevant years: 1973 - 1982',
-        'We see the relevant years in correct format.',
-      );
+      .hasText('1973 - 1982', 'We see the relevant years in correct format.');
 
     // Widget 3
     assert
@@ -415,17 +403,11 @@ module('Acceptance | dashboard', function (hooks) {
 
     assert
       .dom('[data-test-widget="2"] [data-test-field="Annual Revenue"]')
-      .hasText(
-        'Annual revenue: $2.3 billion',
-        'We see the annual revenue in correct format.',
-      );
+      .hasText('$2.3 billion', 'We see the annual revenue in correct format.');
 
     assert
       .dom('[data-test-widget="2"] [data-test-field="Relevant Years"]')
-      .hasText(
-        'Relevant years: 1973 - 1982',
-        'We see the relevant years in correct format.',
-      );
+      .hasText('1973 - 1982', 'We see the relevant years in correct format.');
 
     // Widget 3
     assert