feat: Optimize visual refresh detection and add development warning (#567)

Author: just-boris

src/internal/hooks/use-visual-mode/__tests__/use-visual-mode.test.tsx

@@ -1,19 +1,10 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React, { useRef } from 'react';
-import { useCurrentMode, useDensityMode, useVisualRefresh } from '../index';
+import { useCurrentMode, useDensityMode, useVisualRefresh, clearVisualRefreshState } from '../index';
 import { render, screen } from '@testing-library/react';
 import { mutate } from './utils';
 
-const originalFn = window.CSS.supports;
-beforeEach(() => {
-  window.CSS.supports = jest.fn().mockReturnValue(true);
-});
-
-afterEach(() => {
-  window.CSS.supports = originalFn;
-});
-
 jest.mock('../../../environment', () => ({ ALWAYS_VISUAL_REFRESH: false }), { virtual: true });
 
 describe('useCurrentMode', () => {
@@ -83,11 +74,32 @@ describe('useVisualRefresh', () => {
     return <div data-testid="current-mode">{isRefresh.toString()}</div>;
   }
 
-  test('should return false when CSS-variables are not supported', () => {
-    (window.CSS.supports as jest.Mock).mockReturnValue(false);
+  beforeEach(() => clearVisualRefreshState());
+  afterEach(() => document.body.classList.remove('awsui-visual-refresh'));
+  afterEach(() => jest.restoreAllMocks());
+
+  test('should return false when class name is not present', () => {
     render(<App />);
     expect(screen.getByTestId('current-mode')).toHaveTextContent('false');
   });
+
+  test('should return true when class name is present', () => {
+    document.body.classList.add('awsui-visual-refresh');
+    render(<App />);
+    expect(screen.getByTestId('current-mode')).toHaveTextContent('true');
+  });
+
+  test('should print a warning when late visual refresh class name was detected', () => {
+    jest.spyOn(console, 'warn').mockImplementation(() => {});
+    const { rerender } = render(<App />);
+    expect(screen.getByTestId('current-mode')).toHaveTextContent('false');
+    expect(console.warn).not.toHaveBeenCalled();
+
+    document.body.classList.add('awsui-visual-refresh');
+    rerender(<App />);
+    expect(console.warn).toHaveBeenCalledWith(expect.stringMatching(/Dynamic visual refresh change detected/));
+    expect(screen.getByTestId('current-mode')).toHaveTextContent('false');
+  });
 });
 
 // The above suites cover majority of cases

src/internal/hooks/use-visual-mode/__tests__/use-visual-refresh.test.tsx src/internal/hooks/use-visual-mode/__tests__/use-visual-refresh-static.test.tsx

@@ -6,15 +6,6 @@ import { render, screen } from '@testing-library/react';
 
 jest.mock('../../../environment', () => ({ ALWAYS_VISUAL_REFRESH: true }), { virtual: true });
 
-const originalFn = window.CSS.supports;
-beforeEach(() => {
-  window.CSS.supports = jest.fn().mockReturnValue(true);
-});
-
-afterEach(() => {
-  window.CSS.supports = originalFn;
-});
-
 describe('useVisualRefresh with locked visual refresh mode', () => {
   function App() {
     const isRefresh = useVisualRefresh();

src/internal/hooks/use-visual-mode/index.ts

@@ -5,6 +5,8 @@ import { ALWAYS_VISUAL_REFRESH } from '../../environment';
 import { isMotionDisabled } from '../../motion';
 import { findUpUntil } from '../../utils/dom';
 import { useMutationObserver } from '../use-mutation-observer';
+import { isDevelopment } from '../../is-development';
+import { warnOnce } from '../../logging';
 
 export function useCurrentMode(elementRef: React.RefObject<HTMLElement>) {
   const [value, setValue] = useState<'light' | 'dark'>('light');
@@ -30,19 +32,32 @@ export function useDensityMode(elementRef: React.RefObject<HTMLElement>) {
   return value;
 }
 
+export const useVisualRefresh = ALWAYS_VISUAL_REFRESH ? () => true : useVisualRefreshDynamic;
+
 // We expect VR is to be set only once and before the application is rendered.
 let visualRefreshState: undefined | boolean = undefined;
 
-export function useVisualRefresh() {
+// for testing
+export function clearVisualRefreshState() {
+  visualRefreshState = undefined;
+}
+
+function detectVisualRefresh() {
+  return typeof document !== 'undefined' && !!document.querySelector('.awsui-visual-refresh');
+}
+
+export function useVisualRefreshDynamic() {
   if (visualRefreshState === undefined) {
-    const supportsCSSVariables = typeof window !== 'undefined' && window.CSS?.supports?.('color', 'var(--test-var)');
-
-    if (ALWAYS_VISUAL_REFRESH) {
-      visualRefreshState = true;
-    } else if (!supportsCSSVariables) {
-      visualRefreshState = false;
-    } else {
-      visualRefreshState = !!document.querySelector('.awsui-visual-refresh');
+    visualRefreshState = detectVisualRefresh();
+  }
+  if (isDevelopment) {
+    const newVisualRefreshState = detectVisualRefresh();
+    if (newVisualRefreshState !== visualRefreshState) {
+      warnOnce(
+        'Visual Refresh',
+        'Dynamic visual refresh change detected. This is not supported. ' +
+          'Make sure `awsui-visual-refresh` is attached to the `<body>` element before initial React render'
+      );
     }
   }
   return visualRefreshState;