Embed can remove best tag

test/e2e/tests/Moderator/BestCommentTest.js

@@ -11,24 +11,38 @@ module.exports = {
     embedStreamPage
       .login(users.moderator);
   },
-  'Moderator marks their comment as BEST': client => {
+  'Moderator marks/unmarks their comment as BEST': client => {
     const embedStreamPage = client.page.embedStreamPage();
 
-    const setBestCommentButton = '@setBestButton';
-    const unsetBestCommentButton = '@unsetBestButton';
+    const setBestCommentButton = '.e2e__set-best-comment';
+    const unsetBestCommentButton = '.e2e__unset-best-comment';
 
     embedStreamPage
-      .postComment('Hi everyone. Isn\'t this the BEST comment!?')
+      .postComment(`Hi everyone. Isn't this the BEST comment!? ${String(Math.random()).slice(2)}`)
       .waitForElementVisible(setBestCommentButton, 2000)
       .click(setBestCommentButton)
-      .waitForElementVisible(unsetBestCommentButton, 2000, () => {
-        client.assert.elementNotPresent(setBestCommentButton);
-      });
+      .waitForElementVisible(unsetBestCommentButton, 2000);
 
     // on refresh, it should still be tagged as best :)
     client.refresh();
-    client.page.embedStreamPage().ready()
-      .waitForElementVisible('.e2e__unset-best-comment', 2000);
+    embedStreamPage.ready()
+
+      // (bengo) I have no idea why, but if the selector here is '@unsetBestButton', it doesn't find it... I think nightwatch bug?
+      // this is why I am not using @elements. Advice appreciated.
+      .waitForElementVisible(unsetBestCommentButton, 2000);
+
+    // now remove the best tag
+    embedStreamPage
+      .click(unsetBestCommentButton);
+
+    embedStreamPage
+      .waitForElementVisible(setBestCommentButton, 2000);
+
+    // on refresh it should still be untagged best
+    client.refresh();
+    embedStreamPage.ready()
+      .waitForElementVisible(setBestCommentButton);
+
   },
   after: client => {
     client.end();