Add a test for disabled localStorage

Author: alexpermiakov

packages/theme-ui/test/color-modes.js

@@ -37,9 +37,9 @@ test('renders with color modes', () => {
             modes: {
               dark: {
                 text: 'white',
-              }
-            }
-          }
+              },
+            },
+          },
         }}>
         <Mode />
       </ThemeProvider>
@@ -64,8 +64,8 @@ test('renders with initial color mode name', () => {
           colors: {
             modes: {
               dark: {},
-            }
-          }
+            },
+          },
         }}>
         <Mode />
       </ThemeProvider>
@@ -212,8 +212,8 @@ test('inherits color mode state from parent context', () => {
         colors: {
           modes: {
             dark: {},
-          }
-        }
+          },
+        },
       }}>
       <ThemeProvider
         theme={{
@@ -518,3 +518,41 @@ test('raw color values are passed to theme-ui context when custom properties are
   )
   expect(color).toBe('tomato')
 })
+
+test('warns when localStorage is disabled', () => {
+  const originalWindow = window
+
+  const mockWindow = new Proxy(window, {
+    get: (obj, prop) => {
+      if (prop === 'localStorage') {
+        throw 'SecurityError: The operation is insecure.'
+      } else {
+        return obj[prop]
+      }
+    },
+  })
+
+  Object.defineProperty(global, 'window', {
+    value: mockWindow,
+    writable: true,
+  })
+
+  let mode
+  const Consumer = props => {
+    const [colorMode] = useColorMode()
+    mode = colorMode
+    return false
+  }
+
+  render(
+    <ThemeProvider>
+      <Consumer />
+    </ThemeProvider>
+  )
+  expect(mode).toBe('default')
+
+  Object.defineProperty(global, 'window', {
+    value: originalWindow,
+    writable: true,
+  })
+})