diff --git a/package.json b/package.json index ca5cd28..a4e2896 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "type": "module", "main": "./dist/react-native-portable-text.es.js", "module": "./dist/react-native-portable-text.es.js", + "types": "./dist/index.d.ts", "files": [ "dist" ], diff --git a/src/components/block.tsx b/src/components/block.tsx index fda5e0f..26790bf 100644 --- a/src/components/block.tsx +++ b/src/components/block.tsx @@ -3,7 +3,7 @@ import {View, Text} from 'react-native' import type {PortableTextComponent} from '@portabletext/react' import type {PortableTextBlock, PortableTextBlockStyle} from '@portabletext/types' -import {blockStyles, textStyles} from './styles' +import {PortableTextFontTheme, blockStyles, getTextStylesWithTheme, textStyles} from './styles' type BlockStyleName = keyof typeof blockStyles @@ -18,6 +18,24 @@ export const DefaultBlock: PortableTextComponent = ({children ) } +export const getDefaultBlockWithTheme = ( + theme: PortableTextFontTheme, +): PortableTextComponent => { + const textStylesWithTheme = getTextStylesWithTheme(theme) + + const DefaultBlockWithTheme: PortableTextComponent = ({children, value}) => { + const style = (value.style || 'normal') as BlockStyleName + + return ( + + {children} + + ) + } + + return DefaultBlockWithTheme +} + export const defaultBlockStyles: Record< PortableTextBlockStyle, PortableTextComponent | undefined @@ -31,3 +49,19 @@ export const defaultBlockStyles: Record< h5: DefaultBlock, h6: DefaultBlock, } + +export const getDefaultBlockStylesWithTheme = ( + theme: PortableTextFontTheme, +): Record | undefined> => { + const defaultBlockWithTheme = getDefaultBlockWithTheme(theme) + return { + normal: defaultBlockWithTheme, + blockquote: defaultBlockWithTheme, + h1: defaultBlockWithTheme, + h2: defaultBlockWithTheme, + h3: defaultBlockWithTheme, + h4: defaultBlockWithTheme, + h5: defaultBlockWithTheme, + h6: defaultBlockWithTheme, + } +} diff --git a/src/components/defaults.tsx b/src/components/defaults.tsx index 1682b91..905a09a 100644 --- a/src/components/defaults.tsx +++ b/src/components/defaults.tsx @@ -2,9 +2,9 @@ import React from 'react' import {Text} from 'react-native' import type {PortableTextReactComponents} from '@portabletext/react' -import {defaultMarks} from './marks' -import {defaultBlockStyles} from './block' -import {DefaultList, defaultListItems} from './list' +import {defaultMarks, getDefaultMarksWithTheme} from './marks' +import {defaultBlockStyles, getDefaultBlockStylesWithTheme} from './block' +import {DefaultList, defaultListItems, getDefaultListItemsWithTheme} from './list' import { DefaultUnknownType, DefaultUnknownMark, @@ -12,6 +12,7 @@ import { DefaultUnknownListItem, DefaultUnknownBlockStyle, } from './unknown' +import {PortableTextFontTheme} from './styles' export const DefaultHardBreak = () => {'\n'} @@ -30,3 +31,23 @@ export const defaultComponents: PortableTextReactComponents = { unknownListItem: DefaultUnknownListItem, unknownBlockStyle: DefaultUnknownBlockStyle, } + +export const getDefaultComponentsWithTheme = ( + theme: PortableTextFontTheme, +): PortableTextReactComponents => { + return { + types: {}, + + block: getDefaultBlockStylesWithTheme(theme), + marks: getDefaultMarksWithTheme(theme), + list: DefaultList, + listItem: getDefaultListItemsWithTheme(theme), + hardBreak: DefaultHardBreak, + + unknownType: DefaultUnknownType, + unknownMark: DefaultUnknownMark, + unknownList: DefaultUnknownList, + unknownListItem: DefaultUnknownListItem, + unknownBlockStyle: DefaultUnknownBlockStyle, + } +} diff --git a/src/components/list.tsx b/src/components/list.tsx index 0367084..2a642ea 100644 --- a/src/components/list.tsx +++ b/src/components/list.tsx @@ -3,7 +3,7 @@ import {View, Text} from 'react-native' import type {PortableTextListComponent, PortableTextListItemComponent} from '@portabletext/react' import type {PortableTextListItemType} from '@portabletext/types' -import {listStyles} from './styles' +import {PortableTextFontTheme, getListStylesWithTheme, listStyles} from './styles' export const DefaultList: PortableTextListComponent = ({value, children}) => { const base = value.level > 1 ? listStyles.listDeep : listStyles.list @@ -28,3 +28,29 @@ export const defaultListItems: Record< ), } + +export const getDefaultListItemsWithTheme = ( + theme: PortableTextFontTheme, +): Record => { + const listStylesWithTheme = getListStylesWithTheme(theme) + + const defaultListItemsWithTheme: Record< + PortableTextListItemType, + PortableTextListItemComponent | undefined + > = { + bullet: ({children}) => ( + + {'\u00B7'} + {children} + + ), + number: ({children, index}) => ( + + {index + 1}. + {children} + + ), + } + + return defaultListItemsWithTheme +} diff --git a/src/components/marks.tsx b/src/components/marks.tsx index e578475..8dd8271 100644 --- a/src/components/marks.tsx +++ b/src/components/marks.tsx @@ -2,7 +2,7 @@ import React, {useCallback} from 'react' import {Text, Linking} from 'react-native' import type {PortableTextMarkComponent} from '@portabletext/react' import type {TypedObject} from '@portabletext/types' -import {markStyles} from './styles' +import {PortableTextFontTheme, markStyles, getMarkStylesWithTheme} from './styles' interface DefaultLink extends TypedObject { _type: 'link' @@ -28,3 +28,20 @@ export const defaultMarks: Record 'strike-through': ({children}) => {children}, link, } + +export const getDefaultMarksWithTheme = ( + theme: PortableTextFontTheme, +): Record => { + const markStylesWithTheme = getMarkStylesWithTheme(theme) + + return { + em: ({children}) => {children}, + strong: ({children}) => {children}, + code: ({children}) => {children}, + underline: ({children}) => {children}, + 'strike-through': ({children}) => ( + {children} + ), + link, + } +} diff --git a/src/components/styles.ts b/src/components/styles.ts index 794fa72..e356ea2 100644 --- a/src/components/styles.ts +++ b/src/components/styles.ts @@ -1,4 +1,24 @@ -import {StyleSheet} from 'react-native' +import {StyleSheet, TextStyle} from 'react-native' + +type LinkTheme = Record<'link', {color: string}> + +type StrongTheme = Record<'strong', {fontWeight: TextStyle['fontWeight']; fontFamily: string}> + +type CodeTheme = Record<'code', {backgroundColor: string; color: string}> + +export type PortableTextFontTheme = Record< + keyof typeof blockStyles | 'bulletListIcon' | 'listItem', + { + fontWeight?: TextStyle['fontWeight'] + fontSize?: number + color?: string + fontFamily?: string + lineHeight?: number + } +> & + LinkTheme & + StrongTheme & + CodeTheme export const blockStyles = StyleSheet.create({ normal: {marginBottom: 16}, @@ -45,6 +65,43 @@ export const listStyles = StyleSheet.create({ }, }) +export const getListStylesWithTheme = (theme: PortableTextFontTheme) => + StyleSheet.create({ + list: { + marginVertical: 16, + }, + + listDeep: { + marginVertical: 0, + }, + + listItem: { + flex: 1, + flexWrap: 'wrap', + flexDirection: 'row', + fontSize: theme.listItem.fontSize, + fontWeight: theme.listItem.fontWeight, + color: theme.listItem.color, + fontFamily: theme.listItem.fontFamily, + lineHeight: theme.listItem.lineHeight, + }, + + bulletListIcon: { + marginLeft: 10, + marginRight: 10, + fontSize: theme.bulletListIcon.fontSize, + fontWeight: theme.bulletListIcon.fontWeight, + color: theme.bulletListIcon.color, + fontFamily: theme.bulletListIcon.fontFamily, + lineHeight: theme.bulletListIcon.lineHeight, + }, + + listItemWrapper: { + flexDirection: 'row', + justifyContent: 'flex-start', + }, + }) + export const textStyles = StyleSheet.create({ h1: { fontWeight: 'bold', @@ -80,6 +137,10 @@ export const textStyles = StyleSheet.create({ blockquote: {}, }) +export const getTextStylesWithTheme = (theme: PortableTextFontTheme) => { + return StyleSheet.create(theme) +} + export const markStyles = StyleSheet.create({ strong: { fontWeight: 'bold', @@ -109,6 +170,39 @@ export const markStyles = StyleSheet.create({ }, }) +export const getMarkStylesWithTheme = (theme: PortableTextFontTheme) => { + return StyleSheet.create({ + strong: { + fontWeight: theme.strong.fontWeight, + fontFamily: theme.strong.fontFamily, + }, + + em: { + fontStyle: 'italic', + }, + + link: { + textDecorationLine: 'underline', + color: theme.link.color, + }, + + underline: { + textDecorationLine: 'underline', + }, + + strikeThrough: { + textDecorationLine: 'line-through', + }, + + code: { + paddingVertical: 3, + paddingHorizontal: 5, + backgroundColor: theme.code.backgroundColor, + color: theme.code.color, + }, + }) +} + export const utilityStyles = StyleSheet.create({ hidden: { display: 'none', diff --git a/src/index.ts b/src/index.ts index 40b2bfa..b716875 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,3 +1,4 @@ export * from '@portabletext/react' export {PortableText} from './react-native-portable-text' -export {defaultComponents} from './components/defaults' +export {defaultComponents, getDefaultComponentsWithTheme} from './components/defaults' +export type {PortableTextFontTheme} from './components/styles' diff --git a/src/react-native-portable-text.tsx b/src/react-native-portable-text.tsx index ed398d0..7a36589 100644 --- a/src/react-native-portable-text.tsx +++ b/src/react-native-portable-text.tsx @@ -2,15 +2,14 @@ import React from 'react' import type {PortableTextProps} from '@portabletext/react' import type {TypedObject, PortableTextBlock} from '@portabletext/types' import {PortableText as BasePortableText, mergeComponents} from '@portabletext/react' -import {defaultComponents} from './components/defaults' +import {defaultComponents, getDefaultComponentsWithTheme} from './components/defaults' +import {PortableTextFontTheme} from './components/styles' export function PortableText( - props: Omit, 'listNestingMode'>, + props: Omit, 'listNestingMode'> & {theme?: PortableTextFontTheme}, ) { + const components = props.theme ? getDefaultComponentsWithTheme(props.theme) : defaultComponents return ( - + ) } diff --git a/test/__snapshots__/runthrough.test.tsx.snap b/test/__snapshots__/runthrough.test.tsx.snap index 4324513..cf42bd1 100644 --- a/test/__snapshots__/runthrough.test.tsx.snap +++ b/test/__snapshots__/runthrough.test.tsx.snap @@ -5539,3 +5539,7080 @@ exports[`never mutates input > styledListItems 1`] = ` , ] `; + +exports[`with theme > allBasicMarks 1`] = ` + + + + code + + + strong + + + em + + + underline + + + strike-through + + + link + + + +`; + +exports[`with theme > allDefaultBlockStyles 1`] = ` +[ + + + Sanity + + , + + + The outline + + , + + + More narrow details + + , + + + Even less thing + + , + + + Small header + + , + + + Lowest thing + + , + + + A block quote of awesomeness + + , + + + Plain old normal block + + , + + + Default to "normal" style + + , +] +`; + +exports[`with theme > basicBulletList 1`] = ` +[ + + + Let's test some of these lists! + + , + + + + · + + + Bullet 1 + + + + + · + + + Bullet 2 + + + + + · + + + Bullet 3 + + + , +] +`; + +exports[`with theme > basicMarkMultipleAdjacentSpans 1`] = ` + + + + A word of + warning; + + Sanity is addictive. + + +`; + +exports[`with theme > basicMarkNestedMarks 1`] = ` + + + + A word of + + warning; + + + Sanity is addictive. + + +`; + +exports[`with theme > basicMarkSingleSpan 1`] = ` + + + + sanity + + is the name of the CLI tool. + + +`; + +exports[`with theme > basicNumberedList 1`] = ` +[ + + + Let's test some of these lists! + + , + + + + 1 + . + + + Number 1 + + + + + 2 + . + + + Number 2 + + + + + 3 + . + + + Number 3 + + + , +] +`; + +exports[`with theme > customBlockType 1`] = ` + + Unknown block type "code", specify a component for it in the \`components.types\` prop + +`; + +exports[`with theme > customListItemType 1`] = ` + + + + · + + + Square 1 + + + + + · + + + Square 2 + + + + · + + + Dat disc + + + + + + + + · + + + Square 3 + + + +`; + +exports[`with theme > customMarks 1`] = ` + + + + Sanity + + + +`; + +exports[`with theme > deepWeirdLists 1`] = ` +[ + + + + · + + + Item a + + + + + · + + + Item b + + + , + + + + 1 + . + + + Item 1 + + + + + 2 + . + + + Item 2 + + + + 1 + . + + + Item 2, a + + + + + 2 + . + + + Item 2, b + + + + + + + + 3 + . + + + Item 3 + + + , + + + , + + + + · + + + In + + + + · + + + Out + + + + + + + + · + + + In + + + + · + + + Out + + + + · + + + Even More + + + + · + + + Even deeper + + + + + + + + + + + · + + + Two steps back + + + + + + + + · + + + All the way back + + + + · + + + Skip a step + + + + + + , + + + + 1 + . + + + New list + + + + 1 + . + + + Next level + + + + + + , + + + + · + + + New bullet list + + + , +] +`; + +exports[`with theme > emptyArray 1`] = `null`; + +exports[`with theme > emptyBlock 1`] = ` + + + +`; + +exports[`with theme > hardBreaks 1`] = ` + + + A paragraph + + + + + can have hard + + + + + + + + + breaks. + + +`; + +exports[`with theme > imageSupport 1`] = ` +[ + + + Also, images are pretty common. + + , + + Unknown block type "image", specify a component for it in the \`components.types\` prop + , +] +`; + +exports[`with theme > imageWithHotspot 1`] = ` +[ + + + Also, images are pretty common. + + , + + Unknown block type "image", specify a component for it in the \`components.types\` prop + , +] +`; + +exports[`with theme > inlineBlockWithText 1`] = ` + + + Men, + + Unknown block type "button", specify a component for it in the \`components.types\` prop + + , da! + + +`; + +exports[`with theme > inlineImages 1`] = ` +[ + + + + Foo! Bar! + + + Unknown block type "image", specify a component for it in the \`components.types\` prop + + Neat + + , + + + + Foo! Bar! + + + Unknown block type "image", specify a component for it in the \`components.types\` prop + + + Baz! + + + , + + + Foo! Bar! + + Unknown block type "image", specify a component for it in the \`components.types\` prop + + + Baz! + + + , +] +`; + +exports[`with theme > inlineNodes 1`] = ` +[ + + + I enjoyed it. It's not perfect, but I give it a strong + + Unknown block type "rating", specify a component for it in the \`components.types\` prop + + , and look forward to the next season! + + , + + + Sibling paragraph + + , +] +`; + +exports[`with theme > keyless 1`] = ` +[ + + + sanity + is a full time job + + , + + + in a world that + is always changing + + , +] +`; + +exports[`with theme > linkMarkDef 1`] = ` + + + A word of warning; + + Sanity + + is addictive. + + +`; + +exports[`with theme > listIssue 1`] = ` +[ + + + Lorem ipsum + + , + + + Lorem ipsum + + , + + + + 1 + . + + + Lorem ipsum + + + + + 2 + . + + + Lorem ipsum + + + + + 3 + . + + + Lorem ipsum + + + + + 4 + . + + + Lorem ipsum + + + + + 5 + . + + + Lorem ipsum + + + + + 6 + . + + + Lorem ipsum + + + + + 7 + . + + + Lorem ipsum + + + + + 8 + . + + + Lorem ipsum + + + + + 9 + . + + + Lorem ipsum + + + + + 10 + . + + + Lorem ipsum + + + , + + + Lorem ipsum + + , + + + Lorem ipsum + + , + + + Lorem ipsum + + , + + + Lorem ipsum + + , + + + Lorem ipsum + + , + + + Lorem ipsum + + Lorem ipsum + + Lorem ipsum + + Lorem ipsum + + Lorem ipsum + + Lorem ipsum + + Lorem ipsum + + , + + + Lorem ipsum + + , + + + + · + + + Lorem ipsum + + + + + · + + + Lorem ipsum + + + + + · + + + Lorem ipsum + + + , + + + Lorem ipsum + + , + + + + · + + + Lorem ipsum + + + + + · + + + Lorem ipsum + + + + + · + + + Lorem ipsum + + + + + · + + + Lorem ipsum + + + + + · + + + Lorem ipsum + + + + + · + + + Lorem ipsum + + + , + + + Lorem ipsum + + , + + + + · + + + Lorem ipsum + + + + + · + + + Lorem ipsum + + + + + · + + + Lorem ipsum + + Lorem ipsum + + Lorem ipsum + + + , + + + Lorem ipsum + + , + + + + · + + + Lorem ipsum + + + + + · + + + Lorem ipsum + + + + + · + + + Lorem ipsum + + + + + · + + + Lorem ipsum + + + , + + + Lorem ipsum + + , + + + + · + + + Lorem ipsum + + + + + · + + + Lorem ipsum + + + , + + + Lorem ipsum + + , + + + + · + + + Lorem ipsum + + + + + · + + + Lorem ipsum + + + , + + + Lorem ipsum + + , + + + + · + + + Lorem ipsum + + + + + · + + + Lorem ipsum + + + + · + + + Lorem ipsum + + + + + · + + + Lorem ipsum + + + + + · + + + Lorem ipsum + + + + + · + + + Lorem ipsum + + + + + + + + · + + + Lorem ipsum + + + + · + + + Lorem ipsum + + + + + · + + + Lorem ipsum + + + + + · + + + Lorem ipsum + + + + + · + + + Lorem ipsum + + + + + · + + + Lorem ipsum + + + + + · + + + Lorem ipsum + + + + + · + + + Lorem ipsum + + + + + + , + + + Lorem ipsum + + , + + + Lorem ipsum + + , + + + Lorem ipsum + + Lorem ipsum + + + , + + + Lorem ipsum + + , + + + Lorem ipsum + + , + + + Lorem ipsum + + , + + + Lorem ipsum + + , + + + Lorem ipsum + + , + + + + 1 + . + + + Lorem ipsum + + + + + 2 + . + + + Lorem ipsum + + + + + 3 + . + + + Lorem ipsum + + + + + 4 + . + + + Lorem ipsum + + + + + 5 + . + + + Lorem ipsum + + + , + + + Lorem ipsum + + , + + + Lorem ipsum + + , + + + Lorem ipsum + + , + + + + · + + + Lorem ipsum + + Lorem ipsum + + Lorem ipsum + + + + + · + + + Lorem ipsum + + Lorem ipsum + + Lorem ipsum + + + + + · + + + Lorem ipsum + + Lorem ipsum + + Lorem ipsum + + + + + · + + + Lorem ipsum + + Lorem ipsum + + Lorem ipsum + + + + + · + + + Lorem ipsum + + Lorem ipsum + + Lorem ipsum + + + + + · + + + Lorem ipsum + + Lorem ipsum + + Lorem ipsum + + + + + · + + + Lorem ipsum + + Lorem ipsum + + Lorem ipsum + + + , + + + Lorem ipsum + + , + + + Lorem ipsum + + , +] +`; + +exports[`with theme > listWithoutLevel 1`] = ` +[ + + + In-person access: Research appointments + + , + + + The collection may be examined by arranging a research appointment + + in advance + + by contacting the ACT archivist by email or phone. ACT generally does not accept walk-in research patrons, although requests may be made in person at the Archivist’s office (E15-222). ACT recommends arranging appointments at least three weeks in advance in order to ensure availability. ACT reserves the right to cancel research appointments at any time. Appointment scheduling is subject to institute holidays and closings. + + , + + + The collection space is located at: + + + + + 20 Ames Street + + + + + Building E15-235 + + + + + Cambridge, Massachusetts 02139 + + , + + + In-person access: Space policies + + , + + + + · + + + The Archivist or an authorized ACT staff member must attend researchers at all times. + + + + + · + + + No pens, markers, or adhesives (e.g. “Post-it” notes) are permitted in the collection space; pencils will be provided upon request. + + + + + · + + + Cotton gloves must be worn when handling collection materials; gloves will be provided by the Archivist. + + + + + · + + + No food or beverages are permitted in the collection space. + + + + + · + + + Laptop use is permitted in the collection space, as well as digital cameras and cellphones. Unless otherwise authorized, any equipment in the collection space (including but not limited to computers, telephones, scanners, and viewing equipment) is for use by ACT staff members only. + + + + + · + + + Photocopying machines in the ACT hallway will be accessible by patrons under the supervision of the Archivist. + + + + + · + + + Patrons may only browse materials that have been made available for access. + + + , + + + Remote access: Reference requests + + , + + + For patrons who are unable to arrange for an on-campus visit to the Archives and Special Collections, reference questions may be directed to the Archivist remotely by email or phone. Generally, emails and phone calls will receive a response within 72 hours of receipt. Requests are typically filled in the order they are received. + + , + + + + Use of patron information + + + , + + + Patrons requesting collection materials in person or remotely may be asked to provide certain information to the Archivist, such as contact information and topic(s) of research. This information is only used to track requests for statistical evaluations of collection use and will not be disclosed to outside organizations for any purpose. ACT will endeavor to protect the privacy of all patrons accessing collections. + + , + + + + Fees + + + , + + + ACT reserves the right to charge an hourly rate for requests that require more than three hours of research on behalf of a patron (remote requests). Collection materials may be scanned and made available upon request, but digitization of certain materials may incur costs. Additionally, requests to publish, exhibit, or otherwise reproduce and display collection materials may incur use fees. + + , + + + + Use of MIT-owned materials by patrons + + + , + + + Permission to examine collection materials in person or remotely (by receiving transfers of digitized materials) does not imply or grant permission to publish or exhibit those materials. Permission to publish, exhibit, or otherwise use collection materials is granted on a case by case basis in accordance with MIT policy, restrictions that may have been placed on materials by donors or depositors, and copyright law. To request permission to publish, exhibit, or otherwise use collection materials, contact the Archivist. + + When permission is granted by MIT, patrons must comply with all guidelines provided by ACT for citations, credits, and copyright statements. Exclusive rights to examine or publish material will not be granted. + + + , +] +`; + +exports[`with theme > marksAllTheWayDown 1`] = ` + + + + + + Sanity + FTW + + + + + +`; + +exports[`with theme > materializedImageSupport 1`] = ` +[ + + + Also, images are pretty common. + + , + + Unknown block type "image", specify a component for it in the \`components.types\` prop + , +] +`; + +exports[`with theme > messyLinkText 1`] = ` + + + + Sanity + + can be used to power almost any + + + + app + + or website + + + . + + +`; + +exports[`with theme > missingMarkComponent 1`] = ` + + + + A word of + + warning; + + + Sanity is addictive. + + +`; + +exports[`with theme > multipleSpans 1`] = ` + + + Span number one. + And span number two. + + +`; + +exports[`with theme > nestedLists 1`] = ` +[ + + + Span + + , + + + + · + + + Item 1, level 1 + + + + + · + + + Item 2, level 1 + + + + 1 + . + + + Item 3, level 2 + + + + 1 + . + + + Item 4, level 3 + + + + + + + + 2 + . + + + Item 5, level 2 + + + + + 3 + . + + + Item 6, level 2 + + + + + + + + · + + + Item 7, level 1 + + + + + · + + + Item 8, level 1 + + + , + + + + 1 + . + + + Item 1 of list 2 + + + + + 2 + . + + + Item 2 of list 2 + + + + 1 + . + + + Item 3 of list 2, level 2 + + + + + + , + + + Just a block + + , +] +`; + +exports[`with theme > overrideDefaultMarks 1`] = ` + + + + Sanity + + + +`; + +exports[`with theme > overrideDefaults 1`] = ` + + Unknown block type "image", specify a component for it in the \`components.types\` prop + +`; + +exports[`with theme > plainHeaderBlock 1`] = ` + + + Dat heading + + +`; + +exports[`with theme > singleSpan 1`] = ` + + + Plain text. + + +`; + +exports[`with theme > styledListItems 1`] = ` +[ + + + Let's test some of these lists! + + , + + + + · + + + Bullet 1 + + + + + · + + + + + Bullet 2 + + + + + + + · + + + Bullet 3 + + + , +] +`; diff --git a/test/runthrough.test.tsx b/test/runthrough.test.tsx index d1926d9..f2fc809 100644 --- a/test/runthrough.test.tsx +++ b/test/runthrough.test.tsx @@ -28,3 +28,104 @@ test('never mutates input', () => { expect(originalInput).toMatchObject(passedInput) } }) + +test('with theme', () => { + for (const [key, fixture] of Object.entries(fixtures)) { + if (key === 'default') { + continue + } + + const tree = renderer + .create( + , + ) + .toJSON() + + expect(tree).toMatchSnapshot(key) + } +})