Reverse Order Button is now disabled instead of removed upon empty list

Systems-Development-and-Frameworks · Nov 9, 2020 · df5495f · df5495f
1 parent 4e58c0f
commit df5495f
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 6 deletions.
diff --git a/webapp/dojo_news/src/App.spec.js b/webapp/dojo_news/src/App.spec.js
@@ -177,7 +177,8 @@ describe("Reverse Order Button", () => {
             }
         });
 
-        expect(wrapperWithEmptyList.text()).not.toContain("Reverse Order");
+        expect(wrapperWithEmptyList.find("#reverse-order-button").element.hasAttribute("disabled")).toBeTruthy();
+        expect(wrapperWithEmptyList.find("#reverse-order-button").element.getAttribute("disabled")).toEqual("disabled");
     });
 
     it('Reverse-Button is hidden upon empty list', async () => {
@@ -190,14 +191,16 @@ describe("Reverse Order Button", () => {
                 ]
             }
         });
-        expect(wrapper.text()).toContain("Reverse Order");
+        expect(wrapper.find("#reverse-order-button").element.hasAttribute("disabled")).not.toBeTruthy();
+        expect(wrapper.find("#reverse-order-button").element.getAttribute("disabled")).not.toEqual("disabled");
 
         wrapper.vm.removeNewsListItem(0);
         wrapper.vm.removeNewsListItem(1);
         wrapper.vm.removeNewsListItem(2);
         await Vue.nextTick();
 
-        expect(wrapper.text()).not.toContain("Reverse Order");
+        expect(wrapper.find("#reverse-order-button").element.hasAttribute("disabled")).toBeTruthy();
+        expect(wrapper.find("#reverse-order-button").element.getAttribute("disabled")).toEqual("disabled");
     });
 
     it('Reverse-Button shows up again upon non-empty list', async () => {
@@ -206,11 +209,13 @@ describe("Reverse Order Button", () => {
                 initialNewsListItems: []
             }
         });
-        expect(wrapperWithEmptyList.text()).not.toContain("Reverse Order");
+        expect(wrapperWithEmptyList.find("#reverse-order-button").element.hasAttribute("disabled")).toBeTruthy();
+        expect(wrapperWithEmptyList.find("#reverse-order-button").element.getAttribute("disabled")).toEqual("disabled");
 
         wrapperWithEmptyList.vm.createNewsListItem("Test");
         await Vue.nextTick();
 
-        expect(wrapperWithEmptyList.text()).toContain("Reverse Order");
+        expect(wrapperWithEmptyList.find("#reverse-order-button").element.hasAttribute("disabled")).not.toBeTruthy();
+        expect(wrapperWithEmptyList.find("#reverse-order-button").element.getAttribute("disabled")).not.toEqual("disabled");
     });
 });
diff --git a/webapp/dojo_news/src/App.vue b/webapp/dojo_news/src/App.vue
@@ -19,7 +19,7 @@
       </div>
     </div>
     <NewsListItemInput @create="createNewsListItem($event);"/>
-    <button type="button" @click="toggleOrder()" v-if="newsListItems.length" id="reverse-order-button">Reverse Order
+    <button type="button" @click="toggleOrder()" :disabled="!newsListItems.length" id="reverse-order-button">Reverse Order
     </button>
   </div>
 </template>