fix: [M3-7725] - Unit tests button enabled assertions (#10142)

* Save progress

* Wrap up interceptor logic

* Added changeset: Unit tests Button enabled assertions

packages/manager/.changeset/pr-10142-fixed-1707158870254.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+Unit tests Button enabled assertions ([#10142](https://github.com/linode/manager/pull/10142))

packages/manager/src/testSetup.ts

@@ -1,9 +1,8 @@
+import matchers from '@testing-library/jest-dom/matchers';
 import Enzyme from 'enzyme';
 // @ts-expect-error not a big deal, we can suffer
 import Adapter from 'enzyme-adapter-react-16';
-
 import { expect } from 'vitest';
-import matchers from '@testing-library/jest-dom/matchers';
 
 // // Enzyme React 17 adapter.
 // Enzyme.configure({ adapter: new Adapter() });
@@ -60,3 +59,75 @@ vi.mock('highlight.js/lib/highlight', () => ({
     registerLanguage: vi.fn(),
   },
 }));
+
+/**
+ ***************************************
+ *  Custom matchers & matchers overrides
+ ***************************************
+ */
+
+/**
+ * Matcher override for toBeDisabled and toBeEnabled
+ *
+ * The reason for overriding those matchers is that we need to check for the aria-disabled attribute as well.
+ * When a button is disabled, it will not necessarily have the `disabled` attribute. but it will have an aria-disabled attribute set to true.
+ */
+const ariaDisabledAttribute = 'aria-disabled';
+
+const isElementDisabled = (element: HTMLElement) => {
+  // We really only want to check for `aria-disabled` on buttons since this is a Cloud Manager customization
+  return element.tagName.toLowerCase() === 'button'
+    ? element.getAttribute(ariaDisabledAttribute) === 'true' ||
+        element.hasAttribute('disabled')
+    : element.hasAttribute('disabled');
+};
+
+interface HandleResult {
+  condition: boolean;
+  element: HTMLElement;
+  expectedState: 'disabled' | 'enabled';
+  thisInstance: any;
+}
+
+const handleResult = ({
+  condition,
+  element,
+  expectedState,
+  thisInstance,
+}: HandleResult) => {
+  const message = `${thisInstance?.utils?.printReceived(
+    element ?? ''
+  )}\n\n expected ${element?.tagName} to be ${expectedState}`;
+  return condition
+    ? {
+        message: () => '',
+        pass: true,
+      }
+    : {
+        message: () => message,
+        pass: false,
+      };
+};
+
+expect.extend({
+  toBeDisabled(this: any, element: HTMLElement) {
+    const isDisabled = isElementDisabled(element);
+
+    return handleResult({
+      condition: isDisabled,
+      element,
+      expectedState: 'disabled',
+      thisInstance: this,
+    });
+  },
+  toBeEnabled(this: any, element: HTMLElement) {
+    const isEnabled = !isElementDisabled(element);
+
+    return handleResult({
+      condition: isEnabled,
+      element,
+      expectedState: 'enabled',
+      thisInstance: this,
+    });
+  },
+});