convert test/Theme

Author: dcastil

packages/editor/test/Theme.js renamed to packages/editor/test/Theme.tsx

@@ -11,15 +11,16 @@ import { EditorProvider, Theme } from '../src'
 
 afterEach(cleanup)
 
-if (global.document) {
-  document.createRange = () => ({
-    setStart: () => {},
-    setEnd: () => {},
-    commonAncestorContainer: {
-      nodeName: 'BODY',
-      ownerDocument: document,
-    },
-  })
+if ((global as any).document) {
+  document.createRange = () =>
+    (({
+      setStart: () => {},
+      setEnd: () => {},
+      commonAncestorContainer: {
+        nodeName: 'BODY',
+        ownerDocument: document,
+      },
+    } as unknown) as Range)
 }
 
 const theme = {
@@ -53,7 +54,7 @@ test('edits theme.colors', async () => {
   let context
   const GetContext = props => {
     context = useThemeUI()
-    return false
+    return null
   }
   const tree = render(
     <EditorProvider theme={theme}>
@@ -63,26 +64,26 @@ test('edits theme.colors', async () => {
   )
   const swatch = tree.getByText('text')
   fireEvent.click(swatch)
-  const [ input ] = await waitForElement(() => tree.getAllByPlaceholderText('hex'))
+  const [input] = await waitForElement(() =>
+    tree.getAllByPlaceholderText('hex')
+  )
   fireEvent.change(input, {
     target: {
-      value: '#ff0000'
-    }
+      value: '#ff0000',
+    },
   })
   expect(context.theme.colors.text).toBe('#ff0000')
 })
 
 test('edits theme.colors within a color mode', async () => {
   let context
-  const GetContext = props => {
+  const GetContext = () => {
     context = useThemeUI()
-    return false
+    return null
   }
   const tree = render(
-    <Context.Provider
-      value={{
-        colorMode: 'dark',
-      }}>
+    // TODO: Remove any after @theme-ui/color-mode was transformed to TypeScript
+    <Context.Provider value={{ colorMode: 'dark' } as any}>
       <EditorProvider theme={theme}>
         <Theme.Colors />
         <GetContext />
@@ -91,20 +92,22 @@ test('edits theme.colors within a color mode', async () => {
   )
   const swatch = tree.getByText('text')
   fireEvent.click(swatch)
-  const [ input ] = await waitForElement(() => tree.getAllByPlaceholderText('hex'))
+  const [input] = await waitForElement(() =>
+    tree.getAllByPlaceholderText('hex')
+  )
   fireEvent.change(input, {
     target: {
-      value: '#ff0000'
-    }
+      value: '#ff0000',
+    },
   })
   expect(context.theme.colors.modes.dark.text).toBe('#ff0000')
 })
 
 test('edits theme.fontSizes', async () => {
   let context
-  const GetContext = props => {
+  const GetContext = () => {
     context = useThemeUI()
-    return false
+    return null
   }
   const tree = render(
     <EditorProvider theme={theme}>
@@ -115,8 +118,8 @@ test('edits theme.fontSizes', async () => {
   const input = await waitForElement(() => tree.getByLabelText('0'))
   fireEvent.change(input, {
     target: {
-      value: '11'
-    }
+      value: '11',
+    },
   })
   expect(context.theme.fontSizes[0]).toBe(11)
 })
@@ -125,7 +128,7 @@ test('supports non-array theme.fontSizes objects', async () => {
   let context
   const GetContext = props => {
     context = useThemeUI()
-    return false
+    return null
   }
   const tree = render(
     <EditorProvider
@@ -134,7 +137,7 @@ test('supports non-array theme.fontSizes objects', async () => {
           small: 12,
           normal: 16,
           large: 24,
-        }
+        },
       }}>
       <Theme.FontSizes />
       <GetContext />
@@ -143,8 +146,8 @@ test('supports non-array theme.fontSizes objects', async () => {
   const input = await waitForElement(() => tree.getByLabelText('small'))
   fireEvent.change(input, {
     target: {
-      value: '11'
-    }
+      value: '11',
+    },
   })
   expect(context.theme.fontSizes.small).toBe(11)
 })
@@ -153,7 +156,7 @@ test('renders without a theme', () => {
   let context
   const GetContext = props => {
     context = useThemeUI()
-    return false
+    return null
   }
   const tree = render(
     <EditorProvider>
@@ -172,7 +175,7 @@ test('edits theme.fontWeights', async () => {
   let context
   const GetContext = props => {
     context = useThemeUI()
-    return false
+    return null
   }
   const tree = render(
     <EditorProvider theme={theme}>
@@ -183,8 +186,8 @@ test('edits theme.fontWeights', async () => {
   const input = await waitForElement(() => tree.getByLabelText('body'))
   fireEvent.change(input, {
     target: {
-      value: '500'
-    }
+      value: '500',
+    },
   })
   expect(context.theme.fontWeights.body).toBe('500')
 })
@@ -193,7 +196,7 @@ test('edits theme.lineHeights', async () => {
   let context
   const GetContext = props => {
     context = useThemeUI()
-    return false
+    return null
   }
   const tree = render(
     <EditorProvider theme={theme}>
@@ -204,8 +207,8 @@ test('edits theme.lineHeights', async () => {
   const input = await waitForElement(() => tree.getByLabelText('body'))
   fireEvent.change(input, {
     target: {
-      value: '1.625'
-    }
+      value: '1.625',
+    },
   })
   expect(context.theme.lineHeights.body).toBe(1.625)
 })
@@ -214,7 +217,7 @@ test('edits theme.fonts', async () => {
   let context
   const GetContext = props => {
     context = useThemeUI()
-    return false
+    return null
   }
   const tree = render(
     <EditorProvider theme={theme}>
@@ -225,8 +228,8 @@ test('edits theme.fonts', async () => {
   const input = await waitForElement(() => tree.getByLabelText('body'))
   fireEvent.change(input, {
     target: {
-      value: 'Georgia'
-    }
+      value: 'Georgia',
+    },
   })
   expect(context.theme.fonts.body).toBe('Georgia')
   expect(context.theme.fonts.heading).toBe('Georgia, serif')
@@ -236,7 +239,7 @@ test('edits theme.space', async () => {
   let context
   const GetContext = props => {
     context = useThemeUI()
-    return false
+    return null
   }
   const tree = render(
     <EditorProvider theme={theme}>
@@ -247,8 +250,8 @@ test('edits theme.space', async () => {
   const input = await waitForElement(() => tree.getByLabelText('0'))
   fireEvent.change(input, {
     target: {
-      value: '2'
-    }
+      value: '2',
+    },
   })
   expect(context.theme.space[0]).toBe(2)
   expect(context.theme.space[1]).toBe(4)
@@ -258,7 +261,7 @@ test('supports non-array theme.space objects', async () => {
   let context
   const GetContext = props => {
     context = useThemeUI()
-    return false
+    return null
   }
   const tree = render(
     <EditorProvider
@@ -267,7 +270,7 @@ test('supports non-array theme.space objects', async () => {
           small: 4,
           normal: 8,
           large: 16,
-        }
+        },
       }}>
       <Theme.Space />
       <GetContext />
@@ -276,9 +279,8 @@ test('supports non-array theme.space objects', async () => {
   const input = await waitForElement(() => tree.getByLabelText('small'))
   fireEvent.change(input, {
     target: {
-      value: '3'
-    }
+      value: '3',
+    },
   })
   expect(context.theme.space.small).toBe(3)
 })
-