Skip to content

Commit

Permalink
add more tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@siriwatknp
siriwatknp committed Aug 24, 2022
1 parent 4be701c commit 8847f8f
Show file tree
Hide file tree
Showing 2 changed files with 175 additions and 31 deletions.
134 changes: 131 additions & 3 deletions packages/mui-system/src/cssVars/useCurrentColorScheme.test.js
View file
Expand Up @@ -324,6 +324,73 @@ describe('useCurrentColorScheme', () => {
});
});

it('change only the mode specified as key', () => {
const Data = () => {
const { setColorScheme, ...data } = useCurrentColorScheme({
defaultMode: 'light',
defaultLightColorScheme: 'light',
defaultDarkColorScheme: 'dark',
supportedColorSchemes: ['light', 'paper', 'dark', 'dim'],
});
return (
<div>
<div data-testid="data">{JSON.stringify(data)}</div>
<button onClick={() => setColorScheme('paper')}>first</button>
<button onClick={() => setColorScheme({ dark: 'dim' })}>second</button>
</div>
);
};
const { getByText, getByTestId } = render(<Data />);

fireEvent.click(getByText('first'));

expect(JSON.parse(getByTestId('data').textContent)).to.deep.equal({
mode: 'light',
lightColorScheme: 'paper',
darkColorScheme: 'dark',
colorScheme: 'paper',
});

fireEvent.click(getByText('second'));

expect(JSON.parse(getByTestId('data').textContent)).to.deep.equal({
mode: 'light',
lightColorScheme: 'paper',
darkColorScheme: 'dim',
colorScheme: 'paper',
});
});

it('able to setMode and setColorScheme in the same event', () => {
const Data = () => {
const { setColorScheme, setMode, ...data } = useCurrentColorScheme({
defaultLightColorScheme: 'light',
defaultDarkColorScheme: 'dark',
supportedColorSchemes: ['light', 'paper', 'dark', 'dim'],
});
return (
<button
onClick={() => {
setMode('dark');
setColorScheme({ light: 'paper', dark: 'dim' });
}}
>
{JSON.stringify(data)}
</button>
);
};
const { container } = render(<Data />);

fireEvent.click(container.firstChild);

expect(JSON.parse(container.firstChild.textContent)).to.deep.equal({
mode: 'dark',
lightColorScheme: 'paper',
darkColorScheme: 'dim',
colorScheme: 'dim',
});
});

it('reset colorScheme', () => {
const Data = () => {
const { setColorScheme, ...data } = useCurrentColorScheme({
Expand Down Expand Up @@ -411,9 +478,9 @@ describe('useCurrentColorScheme', () => {

fireEvent.click(container.firstChild);

expect(global.localStorage.setItem.calledWith(DEFAULT_MODE_STORAGE_KEY, 'dark')).to.equal(
true,
);
expect(
global.localStorage.setItem.lastCall.calledWith(DEFAULT_MODE_STORAGE_KEY, 'dark'),
).to.equal(true);
});

it('save system mode', () => {
Expand Down Expand Up @@ -624,5 +691,66 @@ describe('useCurrentColorScheme', () => {
colorScheme: 'dark-dim',
});
});

it('reset mode in storage', () => {
const Data = () => {
const { setMode } = useCurrentColorScheme({
defaultMode: 'system',
defaultLightColorScheme: 'light',
defaultDarkColorScheme: 'dark',
supportedColorSchemes: ['light', 'dark'],
});
return (
<div>
<button data-testid="dark" onClick={() => setMode('dark')} />
<button data-testid="reset" onClick={() => setMode(null)} />
</div>
);
};
render(<Data />);

fireEvent.click(screen.getByTestId('dark'));

fireEvent.click(screen.getByTestId('reset'));

expect(
global.localStorage.setItem.lastCall.calledWith(DEFAULT_MODE_STORAGE_KEY, 'system'),
).to.equal(true);
});

it('reset color scheme in storage', () => {
const Data = () => {
const { setColorScheme } = useCurrentColorScheme({
defaultMode: 'system',
defaultLightColorScheme: 'light',
defaultDarkColorScheme: 'dark',
supportedColorSchemes: ['light', 'dark'],
});
return (
<div>
<button data-testid="dark" onClick={() => setColorScheme('dark')} />
<button data-testid="reset" onClick={() => setColorScheme(null)} />
</div>
);
};
render(<Data />);

fireEvent.click(screen.getByTestId('dark'));

global.localStorage.setItem.resetHistory();
expect(global.localStorage.setItem.callCount).to.equal(0); // reset the calls to neglect inital setItem in the assertion below

fireEvent.click(screen.getByTestId('reset'));

expect(
global.localStorage.setItem.calledWith(
`${DEFAULT_COLOR_SCHEME_STORAGE_KEY}-light`,
'light',
),
).to.equal(true);
expect(
global.localStorage.setItem.calledWith(`${DEFAULT_COLOR_SCHEME_STORAGE_KEY}-dark`, 'dark'),
).to.equal(true);
});
});
});
72 changes: 44 additions & 28 deletions packages/mui-system/src/cssVars/useCurrentColorScheme.ts
View file
Expand Up @@ -155,10 +155,11 @@ export default function useCurrentColorScheme<SupportedColorScheme extends strin
const setMode: Result<SupportedColorScheme>['setMode'] = React.useCallback(
(mode) => {
setState((currentState) => {
const newMode = !mode ? defaultMode : mode;
if (mode === currentState.mode) {
// do nothing if mode does not change
return currentState;
}
const newMode = !mode ? defaultMode : mode;
try {
localStorage.setItem(modeStorageKey, newMode);
} catch (e) {
Expand All @@ -176,18 +177,26 @@ export default function useCurrentColorScheme<SupportedColorScheme extends strin

const setColorScheme: Result<SupportedColorScheme>['setColorScheme'] = React.useCallback(
(value) => {
if (!value || typeof value === 'string') {
if (!value) {
setState((currentState) => {
try {
localStorage.setItem(`${colorSchemeStorageKey}-light`, defaultLightColorScheme);
localStorage.setItem(`${colorSchemeStorageKey}-dark`, defaultDarkColorScheme);
} catch (e) {
// Unsupported
}
return {
...currentState,
lightColorScheme: defaultLightColorScheme,
darkColorScheme: defaultDarkColorScheme,
};
});
} else if (typeof value === 'string') {
if (value && !joinedColorSchemes.includes(value)) {
console.error(`\`${value}\` does not exist in \`theme.colorSchemes\`.`);
} else {
setState((currentState) => {
const newState = { ...currentState };
if (!value) {
// reset to default color scheme
newState.lightColorScheme = defaultLightColorScheme;
newState.darkColorScheme = defaultDarkColorScheme;
return newState;
}
processState(currentState, (mode) => {
try {
localStorage.setItem(`${colorSchemeStorageKey}-${mode}`, value);
Expand All @@ -204,33 +213,40 @@ export default function useCurrentColorScheme<SupportedColorScheme extends strin
return newState;
});
}
} else if (
(value.light && !joinedColorSchemes.includes(value.light)) ||
(value.dark && !joinedColorSchemes.includes(value.dark))
) {
console.error(`\`${value}\` does not exist in \`theme.colorSchemes\`.`);
} else {
setState((currentState) => {
const newState = { ...currentState };
if (value.light || value.light === null) {
newState.lightColorScheme =
value.light === null ? defaultLightColorScheme : value.light;
const newLightColorScheme = value.light === null ? defaultLightColorScheme : value.light;
const newDarkColorScheme = value.dark === null ? defaultDarkColorScheme : value.dark;

if (newLightColorScheme) {
if (!joinedColorSchemes.includes(newLightColorScheme)) {
console.error(`\`${newLightColorScheme}\` does not exist in \`theme.colorSchemes\`.`);
} else {
newState.lightColorScheme = newLightColorScheme;
try {
localStorage.setItem(`${colorSchemeStorageKey}-light`, newLightColorScheme);
} catch (error) {
// Unsupported
}
}
}
if (value.dark || value.dark === null) {
newState.darkColorScheme = value.dark === null ? defaultDarkColorScheme : value.dark;

if (newDarkColorScheme) {
if (!joinedColorSchemes.includes(newDarkColorScheme)) {
console.error(`\`${newDarkColorScheme}\` does not exist in \`theme.colorSchemes\`.`);
} else {
newState.darkColorScheme = newDarkColorScheme;
try {
localStorage.setItem(`${colorSchemeStorageKey}-dark`, newDarkColorScheme);
} catch (error) {
// Unsupported
}
}
}

return newState;
});
try {
if (value.light) {
localStorage.setItem(`${colorSchemeStorageKey}-light`, value.light);
}
if (value.dark) {
localStorage.setItem(`${colorSchemeStorageKey}-dark`, value.dark);
}
} catch (e) {
// Unsupported
}
}
},
[joinedColorSchemes, colorSchemeStorageKey, defaultLightColorScheme, defaultDarkColorScheme],
Expand Down

0 comments on commit 8847f8f

Please sign in to comment.