Fix tests

I don’t love testing for the Tailwind classes in page
objects but what’s the alternative? Either data attributes
that don’t necessarily connect to visual differences or
actually asserting on the visual effects? 🧐

gathering/app/templates/region.hbs

@@ -32,11 +32,12 @@
       </select>
     </LabeledInput>
 
-    <LabeledInput @label='notes' as |utilities|>
+    <LabeledInput @label='hours' as |utilities|>
       <Input
         id={{utilities.label}}
-        @value={{this.model.notes}}
-        class='notes {{utilities.inputClasses}}'
+        @value={{this.model.hours}}
+        class='{{utilities.inputClasses}}'
+        data-test-hours-field
       />
     </LabeledInput>
 

gathering/app/templates/sync.hbs

@@ -34,6 +34,7 @@
               class='border-2 border-black p-2'
               type='button'
               {{on 'click' (fn this.setDestination database)}}
+              data-test-database-name
             >
               {{database}}
             </button>

gathering/app/templates/waypoint.hbs

@@ -70,9 +70,9 @@
       <LabeledInput class='flex-1' @label='page number' as |utilities|>
         <Input
           id={{utilities.label}}
-          @value={{this.model.number}}
+          @value={{this.model.page}}
           class='{{utilities.inputClasses}}'
-          data-test-number-field
+          data-test-page-field
         />
       </LabeledInput>
 
@@ -94,7 +94,7 @@
           id={{utilities.label}}
           class={{utilities.inputClasses}}
           @value={{this.model.credit}}
-          data-test-credit
+          data-test-credit-field
         />
       </LabeledInput>
 
@@ -140,23 +140,26 @@
 
     <section class='my-2 flex justify-between gap-2'>
       <button
-        class='save w-full bg-green-500 p-2'
+        class='w-full bg-green-500 p-2'
         type='button'
         {{on 'click' (fn this.save this.model)}}
+        data-test-save-button
       >
         Save
       </button>
       <button
-        class='delete w-full bg-red-500 p-2'
+        class='w-full bg-red-500 p-2'
         type='button'
         {{on 'click' (fn this.delete this.model)}}
+        data-test-delete-button
       >
         Delete
       </button>
       <button
-        class='cancel w-full bg-yellow-500 p-2'
+        class='w-full bg-yellow-500 p-2'
         type='button'
         {{on 'click' (fn this.cancel this.model)}}
+        data-test-cancel-button
       >
         Cancel
       </button>

gathering/tests/pages/destinations.js

@@ -53,13 +53,13 @@ export default PageObject.create({
   headerRegion: {
     scope: '[data-test-header-region]',
     click: clickable(),
-    isActive: hasClass('success'),
+    isActive: hasClass('bg-black'),
   },
 
   headerAwesomeness: {
     scope: '[data-test-header-awesomeness]',
     click: clickable(),
-    isActive: hasClass('success'),
+    isActive: hasClass('bg-black'),
   },
 
   destinations: collection('.destination', {
@@ -69,7 +69,7 @@ export default PageObject.create({
     risk: text('.risk'),
     mask: text('.mask'),
 
-    isIncomplete: hasClass('incomplete'),
+    isIncomplete: hasClass('border-x-red-500'),
     hasMeetings: hasClass('meetings'),
 
     region: { scope: '[data-test-destination-region]' },

gathering/tests/pages/regions.js

@@ -9,18 +9,18 @@ import PageObject, {
 } from 'ember-cli-page-object';
 import { findOne } from 'ember-cli-page-object/extend';
 
-const nesting = function () {
+const nesting = function (selector) {
   return {
     isDescriptor: true,
 
     get() {
-      let nestingClass = Array.from(findOne(this).classList).find((klass) =>
-        klass.startsWith('nesting-')
+      let nestingClass = Array.from(findOne(this, selector).classList).find(
+        (klass) => klass.startsWith('pl-')
       );
 
       if (nestingClass) {
-        let number = nestingClass.replace('nesting-', '');
-        return parseInt(number);
+        let number = parseInt(nestingClass.replace('pl-', ''));
+        return (number - 2) / 3;
       }
     },
   };
@@ -34,7 +34,7 @@ export default PageObject.create({
     name: text('.name'),
     hours: text('[data-test-hours]'),
     isIncomplete: hasClass('incomplete'),
-    nesting: nesting(),
+    nesting: nesting('.name'),
 
     edit: clickable('.edit'),
   }),

gathering/tests/pages/sync.js

@@ -10,8 +10,8 @@ export default PageObject.create({
   sync: clickable('button.sync'),
 
   databases: collection('.databases .database', {
-    name: text('a'),
-    click: clickable('a'),
+    name: text('[data-test-database-name]'),
+    click: clickable('[data-test-database-name]'),
     remove: clickable('[data-test-remove]'),
   }),
 

gathering/tests/pages/teams.js

@@ -14,20 +14,23 @@ export default PageObject.create({
 
   teams: collection('[data-test-team]', {
     id: attribute('data-test-team-id', 'tr[data-test-team-id]'),
-    name: { scope: '[data-test-name]', isChanged: hasClass('changed') },
-    users: { scope: '[data-test-users]', isChanged: hasClass('changed') },
-    notes: { scope: '[data-test-notes]', isChanged: hasClass('changed') },
+    name: { scope: '[data-test-name]', isChanged: hasClass('bg-yellow-500') },
+    users: { scope: '[data-test-users]', isChanged: hasClass('bg-yellow-500') },
+    notes: { scope: '[data-test-notes]', isChanged: hasClass('bg-yellow-500') },
     riskAversion: {
       scope: '[data-test-risk-aversion]',
-      isChanged: hasClass('changed'),
+      isChanged: hasClass('bg-yellow-500'),
+    },
+    phones: {
+      scope: '[data-test-phones]',
+      isChanged: hasClass('bg-yellow-500'),
     },
-    phones: { scope: '[data-test-phones]', isChanged: hasClass('changed') },
 
     identifier: {
       scope: '[data-test-identifier]',
     },
 
-    isNew: hasClass('new', '[data-test-team-id]'),
+    isNew: hasClass('border-green-500', '[data-test-team-id]'),
     hasChanges: isPresent('[data-test-changes]'),
 
     originalName: text('[data-test-original-name]'),

gathering/tests/pages/waypoints.js

@@ -50,15 +50,15 @@ export default PageObject.create({
   headerRegion: {
     scope: '[data-test-header-region]',
     click: clickable(),
-    isActive: hasClass('success'),
+    isActive: hasClass('bg-black'),
   },
 
   waypoints: collection('[data-test-waypoint]', {
     name: text('[data-test-name]'),
     author: text('[data-test-author]'),
     region: { scope: '[data-test-region]' },
 
-    isIncomplete: hasClass('incomplete'),
+    isIncomplete: hasClass('border-x-red-500'),
 
     status: {
       scope: '[data-test-status]',