Update CSS selector name in test helper (#236)

* chore: Updated class name

* chore: Updated test assertions

---------

Co-authored-by: ijlee2 <ijlee2@users.noreply.github.com>

docs-app/tests/acceptance/album/visual-regression-test.ts

@@ -50,16 +50,17 @@ module('Acceptance | album', function (hooks) {
 
   test('@w3 @h1 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);
   });

docs-app/tests/helpers/reset-viewport.ts

@@ -2,14 +2,14 @@
   Do not allow ember-qunit to resize the viewport! Resizing the viewport causes
   issues with tests and Percy snapshots for this addon.
 
-  https://github.com/emberjs/ember-qunit/blob/master/vendor/ember-qunit/test-container-styles.css
+  https://github.com/emberjs/ember-qunit/blob/v8.1.0/addon/src/test-container-styles.css#L33
 */
 export function resetViewport(hooks: NestedHooks): void {
   hooks.beforeEach(function () {
     const testingContainer = document.getElementById(
       'ember-testing-container',
     )!;
 
-    testingContainer.classList.add('full-screen');
+    testingContainer.classList.add('ember-testing-container-full-screen');
   });
 }