introduces data test selector instead of css selectors

app/templates/components/saved-state-indicator.hbs

@@ -1,7 +1,7 @@
 {{#if isGistSaving}}
   <span>Saving...</span>
 {{else if unsaved}}
-  <span class="test-unsaved-indicator">Unsaved</span>
+  <span data-test-unsaved-indicator>Unsaved</span>
 {{else}}
   <span>{{model.files.length}} files</span>
   {{#unless model.isNew}}

package.json

@@ -94,6 +94,7 @@
     "ember-route-action-helper": "^2.0.6",
     "ember-router-helpers": "^0.2.0",
     "ember-source": "~3.16.3",
+    "ember-test-selectors": "^4.0.0",
     "ember-test-waiters": "^2.0.0",
     "eslint-plugin-ember": "^7.7.2",
     "eslint-plugin-node": "^11.0.0",

tests/acceptance/fork-test.js

@@ -41,11 +41,11 @@ module('Acceptance | fork gist', function(hooks) {
 
     await visit('/35de43cb81fc35ddffb2');
 
-    assert.dom('.test-unsaved-indicator').doesNotExist("No unsaved indicator shown");
+    assert.dom('[data-test-unsaved-indicator]').doesNotExist("No unsaved indicator shown");
 
     await click('.test-fork-action');
 
-    assert.dom('.test-unsaved-indicator').doesNotExist("No unsaved indicator shown");
+    assert.dom('[data-test-unsaved-indicator]').doesNotExist("No unsaved indicator shown");
 
     let url = currentURL();
     let route = url.substr(url.lastIndexOf('/'));

tests/acceptance/gist-test.js

@@ -324,7 +324,7 @@ module('Acceptance | gist', function(hooks) {
   });
 
   test('unsaved indicator', async function(assert) {
-    const indicator = ".test-unsaved-indicator";
+    const indicator = "[data-test-unsaved-indicator]";
 
     await visit('/');
 
@@ -394,7 +394,7 @@ module('Acceptance | gist', function(hooks) {
       }
     ]);
 
-    assert.dom('.test-unsaved-indicator').doesNotExist("No unsaved indicator shown");
+    assert.dom('[data-test-unsaved-indicator]').doesNotExist("No unsaved indicator shown");
 
     await fillIn('.title input', "my twiddle");
     await triggerKeyEvent('.title input', 'keyup', 13);
@@ -404,7 +404,7 @@ module('Acceptance | gist', function(hooks) {
     await click('.test-copy-action');
     await waitForLoadedIFrame();
     assert.dom('.title input').hasValue("New Twiddle", "Description is reset");
-    assert.dom('.test-unsaved-indicator').doesNotExist("Unsaved indicator does not appear when gist is copied");
+    assert.dom('[data-test-unsaved-indicator]').doesNotExist("Unsaved indicator does not appear when gist is copied");
     assert.dom('.test-copy-action').doesNotExist("Menu item to copy gist is not shown anymore");
     assert.equal(outputContents(), 'hello world!');
   });
@@ -417,19 +417,19 @@ module('Acceptance | gist', function(hooks) {
       }
     ]);
 
-    assert.dom('.test-unsaved-indicator').doesNotExist("No unsaved indicator shown");
+    assert.dom('[data-test-unsaved-indicator]').doesNotExist("No unsaved indicator shown");
 
     await fillIn('.title input', "my twiddle");
     assert.dom('.title input').hasValue("my twiddle");
-    assert.dom('.test-unsaved-indicator').exists({ count: 1 }, "Changing title triggers unsaved indicator");
+    assert.dom('[data-test-unsaved-indicator]').exists({ count: 1 }, "Changing title triggers unsaved indicator");
 
     await click("#live-reload");
     await visit('/35de43cb81fc35ddffb2/copy');
     await click(".run-now");
     await waitForLoadedIFrame();
     assert.equal(currentURL(), '/');
     assert.dom('.title input').hasValue("New Twiddle", "Description is reset");
-    assert.dom('.test-unsaved-indicator').doesNotExist("Unsaved indicator does not appear when gist is copied");
+    assert.dom('[data-test-unsaved-indicator]').doesNotExist("Unsaved indicator does not appear when gist is copied");
     assert.equal(outputContents(), 'hello world!');
   });
 });

tests/acceptance/git-revision-test.js

@@ -51,7 +51,7 @@ module('Acceptance | gist-revision', function(hooks) {
       }
     ]);
 
-    assert.dom('.test-unsaved-indicator').doesNotExist("No unsaved indicator shown");
+    assert.dom('[data-test-unsaved-indicator]').doesNotExist("No unsaved indicator shown");
 
     await fillIn('.title input', "my twiddle");
     assert.dom('.title input').hasValue("my twiddle");
@@ -61,7 +61,7 @@ module('Acceptance | gist-revision', function(hooks) {
     await waitForLoadedIFrame();
 
     assert.dom('.title input').hasValue("New Twiddle", "Description is reset");
-    assert.dom('.test-unsaved-indicator').doesNotExist("Unsaved indicator does not appear when gist is copied");
+    assert.dom('[data-test-unsaved-indicator]').doesNotExist("Unsaved indicator does not appear when gist is copied");
     assert.dom('.test-copy-action').doesNotExist("Menu item to copy gist is not shown anymore");
     assert.equal(outputContents(), 'hello world!');
   });

tests/acceptance/save-test.js

@@ -37,16 +37,16 @@ module('Acceptance | save gist', function(hooks) {
 
     await visit('/35de43cb81fc35ddffb2');
 
-    assert.dom('.test-unsaved-indicator').doesNotExist("No unsaved indicator shown");
+    assert.dom('[data-test-unsaved-indicator]').doesNotExist("No unsaved indicator shown");
 
     await fillIn('.title input', "my twiddle");
 
     assert.dom('.title input').hasValue("my twiddle");
-    assert.dom('.test-unsaved-indicator').exists({ count: 1 }, "Changing title triggers unsaved indicator");
+    assert.dom('[data-test-unsaved-indicator]').exists({ count: 1 }, "Changing title triggers unsaved indicator");
 
     await click('.test-save-action');
 
-    assert.dom('.test-unsaved-indicator').doesNotExist("No unsaved indicator shown");
+    assert.dom('[data-test-unsaved-indicator]').doesNotExist("No unsaved indicator shown");
   });
 
   test('can save a gist without an id', async function(assert) {
@@ -58,16 +58,16 @@ module('Acceptance | save gist', function(hooks) {
 
     await visit('/');
 
-    assert.dom('.test-unsaved-indicator').doesNotExist("No unsaved indicator shown");
+    assert.dom('[data-test-unsaved-indicator]').doesNotExist("No unsaved indicator shown");
 
     await fillIn('.title input', "my twiddle");
 
     assert.dom('.title input').hasValue("my twiddle");
-    assert.dom('.test-unsaved-indicator').exists({ count: 1 }, "Changing title triggers unsaved indicator");
+    assert.dom('[data-test-unsaved-indicator]').exists({ count: 1 }, "Changing title triggers unsaved indicator");
 
     await click('.test-save-action');
 
-    assert.dom('.test-unsaved-indicator').doesNotExist("No unsaved indicator shown");
+    assert.dom('[data-test-unsaved-indicator]').doesNotExist("No unsaved indicator shown");
   });
 
   test('gist save on cmd+s shortcut', async function(assert) {

yarn.lock

@@ -5480,7 +5480,7 @@ ember-cli-valid-component-name@^1.0.0:
   dependencies:
     silent-error "^1.0.0"
 
-[email protected], ember-cli-version-checker@^2.0.0, ember-cli-version-checker@^2.1.0, ember-cli-version-checker@^2.1.1, ember-cli-version-checker@^2.1.2, ember-cli-version-checker@^3.0.0, ember-cli-version-checker@^3.0.1, ember-cli-version-checker@^3.1.2, ember-cli-version-checker@^3.1.3, ember-cli-version-checker@^4.1.0:
+[email protected], ember-cli-version-checker@^2.0.0, ember-cli-version-checker@^2.1.0, ember-cli-version-checker@^2.1.1, ember-cli-version-checker@^2.1.2, ember-cli-version-checker@^3.0.0, ember-cli-version-checker@^3.0.1, ember-cli-version-checker@^3.1.2, ember-cli-version-checker@^3.1.3, ember-cli-version-checker@^4.1.0, ember-cli-version-checker@^5.0.1:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/ember-cli-version-checker/-/ember-cli-version-checker-4.1.0.tgz#7fc9836bdbc87451d286ba6a9a89b23591d8bbb7"
   integrity sha512-yLf2YqotTSsjiXwx9Dt6H7AU0QcldFn5SLk/pG3Zqb0aHNeanBOPlx4/Ysa46ILGWYIh0fDH34AEVRueXTrQBQ==
@@ -5917,6 +5917,15 @@ ember-template-lint@^1.2.0:
     resolve "^1.15.1"
     strip-bom "^3.0.0"
 
+ember-test-selectors@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/ember-test-selectors/-/ember-test-selectors-4.0.0.tgz#84604b499ddbff290957c3fa0b1e7a9844f5174d"
+  integrity sha512-ABZ7+Xs8kcnVd9mp1AhGPuGPtaalz10cVpQIw1biA6TEscEnFhcJObtqyaxvF6C9AqfZ6p/MsgJZrXMPpgnpmw==
+  dependencies:
+    calculate-cache-key-for-tree "^2.0.0"
+    ember-cli-babel "^7.18.0"
+    ember-cli-version-checker "^5.0.1"
+
 ember-test-waiters@^1.1.1:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/ember-test-waiters/-/ember-test-waiters-1.2.0.tgz#c12ead4313934c24cff41857020cacdbf8e6effe"