fix Jest tests

Author: dcastil

packages/editor/src/ColorPicker.tsx

@@ -143,7 +143,7 @@ export const Picker = CustomPicker<CustomPickerForwardedProps>(
             Hue
             <Input
               {...props}
-              value={round(props.hsl.h)}
+              value={props.hsl ? Math.round(props.hsl.h) : ''}
               name="hue"
               label="h"
               // We need to cast to any because @types/react-color does not define types correctly
@@ -156,7 +156,7 @@ export const Picker = CustomPicker<CustomPickerForwardedProps>(
             Saturation
             <Input
               {...props}
-              value={round(props.hsl.s * 100)}
+              value={props.hsl ? Math.round(props.hsl.s * 100) : ''}
               name="saturation"
               label="s"
               // We need to cast to any because @types/react-color does not define types correctly
@@ -169,7 +169,7 @@ export const Picker = CustomPicker<CustomPickerForwardedProps>(
             Lightness
             <Input
               {...props}
-              value={round(props.hsl.l * 100)}
+              value={props.hsl ? Math.round(props.hsl.l * 100) : ''}
               name="lightness"
               label="l"
               // We need to cast to any because @types/react-color does not define types correctly

packages/editor/src/Combobox.tsx

@@ -20,7 +20,7 @@ const Chevron = () => (
   </svg>
 )
 
-const keys = {
+const keys: { [k: number]: string } = {
   38: 'up',
   40: 'down',
   27: 'escape',
@@ -121,7 +121,7 @@ const Combobox: <T extends string | number>(
     const val = options[i]
     if (val) onChange(val)
     setOpen(false)
-    input.current.select()
+    input.current && input.current.select()
   }
 
   return (

packages/editor/src/Styles.tsx

@@ -6,7 +6,7 @@ import { EditorContextValue } from './types'
 
 export default ({ tag = 'root' }) => {
   const context = useThemeUI() as EditorContextValue
-  const { styles = {} } = context.theme
+  const { styles = {} } = context.theme || {}
 
   const style = styles[tag] || {}
 
@@ -24,7 +24,11 @@ export default ({ tag = 'root' }) => {
   return (
     <Fragment>
       <b>theme.styles.{tag}</b>
-      <Sx.Typography value={style} onChange={setStyle} theme={context.theme} />
+      <Sx.Typography
+        value={style}
+        onChange={setStyle}
+        theme={context.theme || undefined}
+      />
       <Sx.Margin value={style} onChange={setStyle} />
       <Sx.Colors value={style} onChange={setStyle} />
     </Fragment>

packages/editor/src/Sx/ThemeColorPicker.tsx

@@ -23,7 +23,7 @@ export const ThemeColorPicker = ({
   // const { colors } = theme || context.theme || {}
   const _theme = theme || context.theme || {}
   const colors = _theme.colors || {}
-  const value = colors[props.value] || props.value
+  const value = props.value && (colors[props.value] || props.value)
   const options = [
     'transparent',
     ...Object.keys(colors)
@@ -67,7 +67,7 @@ export const ThemeColorPicker = ({
         {...popover}
         aria-label="Choose Color"
         style={{
-          zIndex: popover.visible ? 1 : null,
+          zIndex: popover.visible ? 1 : undefined,
         }}>
         <GithubPicker
           colors={options}

packages/editor/src/Theme/Colors.tsx

@@ -1,5 +1,6 @@
 /** @jsx jsx */
 import { jsx, useThemeUI } from 'theme-ui'
+// @ts-ignore: Remove @ts-ignore after @theme-ui/style-guide was transformed to TypeScript
 import { ColorPalette } from '@theme-ui/style-guide'
 import ColorPicker from '../ColorPicker'
 import { EditorContextValue } from '../types'
@@ -18,7 +19,7 @@ const Colors = (props: ColorsProps) => {
   const context = useThemeUI() as EditorContextValue
   // TODO: Remove any after @theme-ui/color-mode was transformed to TypeScript
   const mode = (context as any).colorMode
-  const { colors } = context.theme
+  const { colors } = context.theme || {}
 
   const onChange = (key: string) => (val: { hex: string }) => {
     let next = {}

packages/editor/src/Theme/FontSizes.tsx

@@ -6,7 +6,7 @@ import { EditorContextValue } from '../types'
 
 const FontSizes = () => {
   const context = useThemeUI() as EditorContextValue
-  const { fontSizes = [] } = context.theme
+  const { fontSizes = [] } = context.theme || {}
 
   const onChange = (key: string) => (
     e: React.ChangeEvent<HTMLInputElement>

packages/editor/src/Theme/FontWeights.tsx

@@ -9,7 +9,7 @@ const weights = [100, 200, 300, 400, 500, 600, 700, 800, 900]
 
 const FontWeights = () => {
   const context = useThemeUI() as EditorContextValue
-  const { fontWeights = {} } = context.theme
+  const { fontWeights = {} } = context.theme || {}
 
   const onChange = (key: string) => (val: string | number) => {
     context.setTheme({

packages/editor/src/Theme/Fonts.tsx

@@ -30,7 +30,7 @@ const defaultFonts = [
 
 const Fonts = ({ options = defaultFonts }) => {
   const context = useThemeUI() as EditorContextValue
-  const { fonts = {} } = context.theme
+  const { fonts = {} } = context.theme || {}
 
   const onChange = (key: string) => (val: CSS.FontFamilyProperty) => {
     context.setTheme({

packages/editor/src/Theme/LineHeights.tsx

@@ -6,7 +6,7 @@ import { EditorContextValue } from '../types'
 
 export default () => {
   const context = useThemeUI() as EditorContextValue
-  const { lineHeights = {} } = context.theme
+  const { lineHeights = {} } = context.theme || {}
 
   const onChange = (key: string) => (
     e: React.ChangeEvent<HTMLInputElement>

packages/editor/src/Theme/Space.tsx

@@ -8,7 +8,7 @@ const defaultSpace = [0, 4, 8, 16, 32, 64, 128, 256, 512]
 
 const Space = () => {
   const context = useThemeUI() as EditorContextValue
-  const { space = defaultSpace } = context.theme
+  const { space = defaultSpace } = context.theme || {}
 
   const onChange = (key: string) => (
     e: React.ChangeEvent<HTMLInputElement>