From 4728c83b47fe2f84eb27ee388d6cfde4ca81d83c Mon Sep 17 00:00:00 2001 From: hasparus Date: Mon, 27 Dec 2021 23:42:27 +0100 Subject: [PATCH 01/18] test: increase code coverage and test @theme-ui/css/utils --- packages/color/test/index.tsx | 9 +++++ packages/css/test/utils.ts | 62 ++++++++++++++++++++++++++++++++++ packages/tachyons/src/index.ts | 2 ++ 3 files changed, 73 insertions(+) create mode 100644 packages/css/test/utils.ts diff --git a/packages/color/test/index.tsx b/packages/color/test/index.tsx index 2478e782b..9ed1a7e30 100644 --- a/packages/color/test/index.tsx +++ b/packages/color/test/index.tsx @@ -26,6 +26,7 @@ import { complement, invert, grayscale, + getColor, } from '../src' expect.extend(matchers) @@ -373,3 +374,11 @@ test('typechecks', () => { } //#endregion }) + +describe('getColor', () => { + test('throws error if given CSS custom property', () => { + expect(() => getColor({}, 'var(--theme-ui-colors-primary)')).toThrow( + 'A CSS property was passed to `getColor`.' + ) + }) +}) diff --git a/packages/css/test/utils.ts b/packages/css/test/utils.ts new file mode 100644 index 000000000..0c401b988 --- /dev/null +++ b/packages/css/test/utils.ts @@ -0,0 +1,62 @@ +import { Theme } from '../src' +import { makeColorsScale, makeStyles, makeTheme } from '../src/utils' +import { AssertTrue, expecter, IsExact } from '@theme-ui/test-utils' + +const symbolPretendingToBeTheme = Symbol() as Theme + +describe(makeTheme, () => { + it('returns input unchanged', () => { + const actual = makeTheme(symbolPretendingToBeTheme) + expect(actual).toEqual(symbolPretendingToBeTheme) + }) + + it('preserves type of the argument', () => { + const theme = makeTheme({ + colors: { + primary: 'tomato', + }, + }) + + type _ = AssertTrue< + IsExact + > + }) + + it('is exposed from entrypoint /utils and validates Theme type', () => { + expecter('import { makeTheme } from "@theme-ui/css/utils"')( + 'const t = makeTheme("banana")' + ).toFail(/Type '"banana"' has no properties in common with type 'Theme'./) + }) +}) + +describe(makeStyles, () => { + it('returns input unchanged', () => { + const actual = makeTheme(symbolPretendingToBeTheme) + expect(actual).toEqual(symbolPretendingToBeTheme) + }) + + it('preserves type of the argument', () => { + const styles = makeStyles({ + code: {}, + }) + + type _ = AssertTrue> + }) +}) + +describe(makeColorsScale, () => { + it('returns input unchanged', () => { + const actual = makeTheme(symbolPretendingToBeTheme) + expect(actual).toEqual(symbolPretendingToBeTheme) + }) + + it('preserves type of the argument', () => { + const colors = makeColorsScale({ + blue: { + light: '#e6f7ff', + }, + }) + + type _ = AssertTrue> + }) +}) diff --git a/packages/tachyons/src/index.ts b/packages/tachyons/src/index.ts index b598f4867..b9df49636 100644 --- a/packages/tachyons/src/index.ts +++ b/packages/tachyons/src/index.ts @@ -1,3 +1,5 @@ +/* istanbul ignore file */ + import { Theme } from '@theme-ui/css' const KEY_MAPPING: { From 30d75ed9c02bf06dbb7f4a597a2c69be73f92675 Mon Sep 17 00:00:00 2001 From: Akash Date: Wed, 29 Dec 2021 09:16:48 +0000 Subject: [PATCH 02/18] chore: replace ThemeContext.Provider with ThemeProvider --- packages/docs/src/components/presets-demo.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/docs/src/components/presets-demo.js b/packages/docs/src/components/presets-demo.js index 5074f3b0f..b11c4a7ad 100644 --- a/packages/docs/src/components/presets-demo.js +++ b/packages/docs/src/components/presets-demo.js @@ -1,6 +1,5 @@ /** @jsx jsx */ -import { jsx, Themed, components, Select } from 'theme-ui' -import { ThemeContext } from '@emotion/react' +import { jsx, Themed, components, Select, ThemeProvider } from 'theme-ui' import { MDXProvider } from '@mdx-js/react' import { useState } from 'react' import { Helmet } from 'react-helmet' @@ -16,7 +15,8 @@ import Lorem from './lorem.mdx' export default function PresetsDemo() { const [theme, setTheme] = useState('base') - const preset = presets[theme] + const preset = presets[theme] + return (
@@ -57,7 +57,7 @@ export default function PresetsDemo() { ))} - + ({...preset})}> Colors @@ -94,7 +94,7 @@ export default function PresetsDemo() { }} /> - +
) From 296aa99c3e88f3b3087966045bd17962bef38823 Mon Sep 17 00:00:00 2001 From: Akash Date: Wed, 29 Dec 2021 09:28:33 +0000 Subject: [PATCH 03/18] chore: preset object instead of func, extra padding to select field for down-caret. --- packages/docs/src/components/presets-demo.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/docs/src/components/presets-demo.js b/packages/docs/src/components/presets-demo.js index b11c4a7ad..c7d9a08e6 100644 --- a/packages/docs/src/components/presets-demo.js +++ b/packages/docs/src/components/presets-demo.js @@ -46,7 +46,7 @@ export default function PresetsDemo() { Preset: - ({...preset})}> + Colors From 544f60bdc41f8811c86e8ce55bc03b28feaac6dc Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Wed, 29 Dec 2021 23:23:11 +0100 Subject: [PATCH 04/18] Update packages/docs/src/components/presets-demo.js --- packages/docs/src/components/presets-demo.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/docs/src/components/presets-demo.js b/packages/docs/src/components/presets-demo.js index c7d9a08e6..ca23b89fa 100644 --- a/packages/docs/src/components/presets-demo.js +++ b/packages/docs/src/components/presets-demo.js @@ -46,7 +46,7 @@ export default function PresetsDemo() { Preset: