[@mantine/hooks] use-media-query: Fix given initialValue not being us…

…ed (#3085)

* Add undefined check to override boolean validation

* Removed initialValue. Fetch directly from query

* Updated tests and reset initialValue

src/mantine-hooks/src/use-color-scheme/use-color-scheme.story.tsx

@@ -0,0 +1,28 @@
+import React, { useEffect, useState } from 'react';
+import { storiesOf } from '@storybook/react';
+import { useColorScheme } from './use-color-scheme';
+
+const Demo = () => {
+  const colorScheme = useColorScheme(undefined, {
+    getInitialValueInEffect: false,
+  });
+  const [history, setHistory] = useState([]);
+
+  useEffect(() => {
+    setHistory((current) => [...current, colorScheme]);
+  }, [colorScheme, setHistory]);
+
+  return (
+    <div>
+      {history.map((mode, i) => (
+        <div key={i}>Color Scheme: {mode}</div>
+      ))}
+    </div>
+  );
+};
+
+storiesOf('Hooks/use-color-scheme', module).add('General usage', () => (
+  <div style={{ padding: 40 }}>
+    <Demo />
+  </div>
+));

src/mantine-hooks/src/use-color-scheme/use-color-scheme.test.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+// import { renderHook } from '@testing-library/react-hooks';
+import { render } from '@testing-library/react';
+import { useColorScheme } from './use-color-scheme';
+
+describe('@maintine/hooks/use-color-scheme', () => {
+  let trace = jest.fn<(colorScheme: string) => void, string[]>();
+  const mockmatchMedia = jest.fn().mockImplementation(() => ({
+    matches: true,
+    media: '',
+    onchange: null,
+    addListener: jest.fn(),
+    removeListener: jest.fn(),
+  }));
+  const retainMatchMedia = window.matchMedia;
+  beforeEach(() => {
+    trace = jest.fn();
+    window.matchMedia = retainMatchMedia;
+  });
+  function WrapperComponent({
+    initialValue,
+    getInitialValueInEffect = true,
+  }: {
+    initialValue?: 'light' | 'dark';
+    getInitialValueInEffect?: boolean;
+  }) {
+    const colorScheme = useColorScheme(initialValue, {
+      getInitialValueInEffect,
+    });
+    trace(colorScheme);
+    return <>{colorScheme}</>;
+  }
+
+  it('correctly returns initial dark state without useEffect', async () => {
+    render(<WrapperComponent initialValue="dark" getInitialValueInEffect={false} />);
+    expect(trace).toHaveBeenCalledTimes(2);
+    expect(trace.mock.calls[0][0]).toBe('dark');
+    expect(trace.mock.calls[1][0]).toBe('light');
+  });
+  it('correctly returns initial dark state state without useEffect', async () => {
+    window.matchMedia = mockmatchMedia;
+    render(<WrapperComponent initialValue="dark" getInitialValueInEffect={false} />);
+    expect(trace).toHaveBeenCalledTimes(1);
+    expect(trace.mock.calls[0][0]).toBe('dark');
+  });
+
+  it('correctly returns initial light state with useEffect', async () => {
+    render(<WrapperComponent initialValue="dark" getInitialValueInEffect />);
+    expect(trace).toHaveBeenCalledTimes(2);
+    expect(trace.mock.calls[0][0]).toBe('dark');
+    expect(trace.mock.calls[1][0]).toBe('light');
+  });
+  it('correctly returns initial dark state with useEffect', async () => {
+    window.matchMedia = mockmatchMedia;
+    render(<WrapperComponent initialValue="dark" getInitialValueInEffect />);
+    expect(trace).toHaveBeenCalledTimes(1);
+    expect(trace.mock.calls[0][0]).toBe('dark');
+  });
+  it('correctly returns initial light state with deafult props', async () => {
+    render(<WrapperComponent />);
+    expect(trace).toHaveBeenCalledTimes(1);
+    expect(trace.mock.calls[0][0]).toBe('light');
+  });
+  it('correctly returns initial dark state with deafult props', async () => {
+    window.matchMedia = mockmatchMedia;
+    render(<WrapperComponent />);
+    expect(trace).toHaveBeenCalledTimes(2);
+    expect(trace.mock.calls[0][0]).toBe('light');
+    expect(trace.mock.calls[1][0]).toBe('dark');
+  });
+});

src/mantine-hooks/src/use-media-query/use-media-query.ts

@@ -40,7 +40,7 @@ export function useMediaQuery(
   }
 ) {
   const [matches, setMatches] = useState(
-    getInitialValueInEffect ? false : getInitialValue(query, initialValue)
+    getInitialValueInEffect ? initialValue : getInitialValue(query, initialValue)
   );
   const queryRef = useRef<MediaQueryList>();