Fix test

Author: johnsimons

src/Frontend/src/components/CodeEditor.vue

@@ -18,6 +18,7 @@ const props = withDefaults(
     readOnly?: boolean;
     showGutter?: boolean;
     showCopyToClipboard?: boolean;
+    ariaLabel?: string;
   }>(),
   { readOnly: true, showGutter: true, showCopyToClipboard: true }
 );
@@ -48,7 +49,7 @@ const extensions = computed(() => {
 </script>
 
 <template>
-  <div class="wrapper">
+  <div class="wrapper" :aria-label="ariaLabel">
     <div v-if="props.showCopyToClipboard" class="toolbar">
       <CopyToClipboard :value="code" />
     </div>

src/Frontend/src/components/CopyToClipboard.vue

@@ -19,6 +19,6 @@ async function copyToClipboard() {
 
 <template>
   <Tippy content="Copied" ref="tippyRef" trigger="manual">
-    <button type="button" class="btn btn-sm" @click="copyToClipboard"><i class="fa fa-copy"></i> Copy to clipboard</button>
+    <button type="button" class="btn btn-secondary btn-sm" @click="copyToClipboard"><i class="fa fa-copy"></i> Copy to clipboard</button>
   </Tippy>
 </template>

src/Frontend/src/components/failedmessages/EditRetryDialog.vue

@@ -231,7 +231,7 @@ onMounted(() => {
                       </table>
                       <div role="tabpanel" v-if="panel === 2 && !localMessage.bodyUnavailable" style="height: calc(100% - 260px)">
                         <div style="margin-top: 20px">
-                          <CodeEditor role="textbox" aria-label="message body" :read-only="!localMessage.isContentTypeSupported" v-model="localMessage.messageBody" :language="localMessage.language" :show-gutter="true"></CodeEditor>
+                          <CodeEditor aria-label="message body" :read-only="!localMessage.isContentTypeSupported" v-model="localMessage.messageBody" :language="localMessage.language" :show-gutter="true"></CodeEditor>
                         </div>
                         <span class="empty-error" v-if="localMessage.isBodyEmpty"><i class="fa fa-exclamation-triangle"></i> Message body cannot be empty</span>
                         <span class="reset-body" v-if="localMessage.isBodyChanged"><i class="fa fa-undo" v-tippy="`Reset changes`"></i> <a @click="resetBodyChanges()" href="javascript:void(0)">Reset changes</a></span>

src/Frontend/test/specs/failedmessages/edit-and-retry.spec.ts

@@ -77,7 +77,7 @@ describe("FEATURE: Editing failed messages", () => {
         await messageEditor.switchToMessageBodyTab();
 
         //Then The message body should be editable
-        expect(messageEditor.bodyFieldIsDisabled()).toBeFalsy();
+        expect(messageEditor.bodyFieldIsReadOnly()).toBeFalsy();
       });
     });
 
@@ -103,7 +103,7 @@ describe("FEATURE: Editing failed messages", () => {
       await messageEditor.switchToMessageBodyTab();
 
       //Then The message body should NOT be editable
-      expect(messageEditor.bodyFieldIsDisabled()).toBeTruthy();
+      expect(messageEditor.bodyFieldIsReadOnly()).toBeTruthy();
       expect(
         messageEditor.hasWarningMatchingText(/message body cannot be edited because content type "application\/octet-stream" is not supported\. only messages with content types "application\/json" and "text\/xml" can be edited\./i)
       ).toBeTruthy();

src/Frontend/test/specs/failedmessages/questions/getEditAndRetryEditor.ts

@@ -9,8 +9,9 @@ export async function getEditAndRetryEditor() {
       await UserEvent.click(tab);
     },
 
-    bodyFieldIsDisabled() {
-      return within(dialog).getByRole("textbox", { name: "message body" }).hasAttribute("readonly");
+    bodyFieldIsReadOnly() {
+      const textbox = within(within(dialog).getByLabelText("message body")).getByRole("textbox");
+      return textbox.ariaReadOnly === "true";
     },
 
     hasWarningMatchingText(legendText: RegExp) {