Spinner: Change spinner icon when prefers-reduced-motion is set (#87641)

* change spinner icon when prefers-reduced-motion is set

* update mock

* remove outdated comment

* fix matchMedia mocks

* update spinner aria label

public/app/core/components/AppChrome/OrganizationSwitcher/OrganizationSwitcher.test.tsx

@@ -30,11 +30,14 @@ const renderWithProvider = ({ initialState }: { initialState?: Partial<appTypes.
 
 describe('OrganisationSwitcher', () => {
   beforeEach(() => {
-    (window.matchMedia as jest.Mock).mockImplementation(() => ({
-      addEventListener: jest.fn(),
-      removeEventListener: jest.fn(),
-      matches: true,
-    }));
+    jest.spyOn(window, 'matchMedia').mockImplementation(
+      () =>
+        ({
+          addEventListener: jest.fn(),
+          removeEventListener: jest.fn(),
+          matches: true,
+        }) as unknown as MediaQueryList
+    );
   });
 
   it('should only render if more than one organisations', () => {
@@ -80,11 +83,14 @@ describe('OrganisationSwitcher', () => {
   });
 
   it('should render a picker in mobile screen', () => {
-    (window.matchMedia as jest.Mock).mockImplementation(() => ({
-      addEventListener: jest.fn(),
-      removeEventListener: jest.fn(),
-      matches: false,
-    }));
+    jest.spyOn(window, 'matchMedia').mockImplementation(
+      () =>
+        ({
+          addEventListener: jest.fn(),
+          removeEventListener: jest.fn(),
+          matches: false,
+        }) as unknown as MediaQueryList
+    );
     renderWithProvider({
       initialState: {
         organization: {

public/app/core/components/AppChrome/TopBar/TopSearchBarSection.test.tsx

@@ -14,11 +14,14 @@ const renderComponent = (options?: { props: TopSearchBarSectionProps }) => {
 
 describe('TopSearchBarSection', () => {
   it('should use a wrapper on non mobile screen', () => {
-    (window.matchMedia as jest.Mock).mockImplementation(() => ({
-      addEventListener: jest.fn(),
-      removeEventListener: jest.fn(),
-      matches: true,
-    }));
+    jest.spyOn(window, 'matchMedia').mockImplementation(
+      () =>
+        ({
+          addEventListener: jest.fn(),
+          removeEventListener: jest.fn(),
+          matches: true,
+        }) as unknown as MediaQueryList
+    );
 
     const component = renderComponent();
 
@@ -27,11 +30,14 @@ describe('TopSearchBarSection', () => {
   });
 
   it('should not use a wrapper on mobile screen', () => {
-    (window.matchMedia as jest.Mock).mockImplementation(() => ({
-      addEventListener: jest.fn(),
-      removeEventListener: jest.fn(),
-      matches: false,
-    }));
+    jest.spyOn(window, 'matchMedia').mockImplementation(
+      () =>
+        ({
+          addEventListener: jest.fn(),
+          removeEventListener: jest.fn(),
+          matches: false,
+        }) as unknown as MediaQueryList
+    );
 
     const component = renderComponent();
 

public/locales/en-US/grafana.json

@@ -618,6 +618,9 @@
     "select": {
       "no-options-label": "No options found",
       "placeholder": "Choose"
+    },
+    "spinner": {
+      "aria-label": "Loading"
     }
   },
   "graph": {

public/locales/pseudo-LOCALE/grafana.json

@@ -618,6 +618,9 @@
     "select": {
       "no-options-label": "Ńő őpŧįőʼnş ƒőūʼnđ",
       "placeholder": "Cĥőőşę"
+    },
+    "spinner": {
+      "aria-label": "Ŀőäđįʼnģ"
     }
   },
   "graph": {

public/test/jest-setup.ts

@@ -34,19 +34,15 @@ global.grafanaBootData = {
   navTree: [],
 };
 
-// https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
-Object.defineProperty(global, 'matchMedia', {
-  writable: true,
-  value: jest.fn().mockImplementation((query) => ({
-    matches: false,
-    media: query,
-    onchange: null,
-    addListener: jest.fn(), // deprecated
-    removeListener: jest.fn(), // deprecated
-    addEventListener: jest.fn(),
-    removeEventListener: jest.fn(),
-    dispatchEvent: jest.fn(),
-  })),
+window.matchMedia = (query) => ({
+  matches: false,
+  media: query,
+  onchange: null,
+  addListener: jest.fn(), // Deprecated
+  removeListener: jest.fn(), // Deprecated
+  addEventListener: jest.fn(),
+  removeEventListener: jest.fn(),
+  dispatchEvent: jest.fn(),
 });
 
 angular.module('grafana', ['ngRoute']);