mirror/iNaturalistReactNative
1
0
Fork 0
mirror of https://github.com/inaturalist/iNaturalistReactNative.git synced 2025-12-23 22:18:36 -05:00
Code Issues Packages Projects Releases Wiki Activity

415 snapshot testing for UI buttons (#458)

Browse Source 
* Add font weight to Typography elements

* Add Heading5

* Typography snapshot tests

* Add letterSpacing to Heading 4 and 5

* Update Button padding

* Update Button styling

* Add rounded-lg

* Code style and comments

* Add button tests

* Added loading state color to buttons

* Add default color to text

* Use text class name instead

* Change text

* Add non default color text

* Snapshot for icon

* Default text color into button snap

* Update INatIcon.js

* Add Divider component

* Updates to Tabs UI

* Update color

* Add Divider test

* Show underline only when active

* Tabs snapshot

* Update Button UI

* Revert "Update Button UI"

This reverts commit 5361f57dac.

* Update ActivityCount.js

* Get color from theme in buttons

* Use translated string for hints in Tabs snapshots

* Refactor fct args

* Update Tabs

* Remove async

* Use .each in Button test

* Remove comment

* Structuring

* Remove duplicate application of style defaults

* Remove async from Typography
This commit is contained in:
Johannes Klein
2023-02-15 11:31:16 +01:00
committed by GitHub
parent 7a98b6faf1
commit 621c39dfda
55 changed files with 1904 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/INatIcon.js
View File

@@ -1,6 +1,7 @@
/**
* INatIcon icon set component.
* Usage: <INatIcon name="icon-name" size={20} color="#4F8EF7" />
* If no color is specified, the default color is #000000.
*/
import createIconSet from "react-native-vector-icons/lib/create-icon-set";
@@ -86,6 +87,7 @@ const glyphMap = {
const iconSet = createIconSet( glyphMap, "inaturalisticons", "inaturalisticons.ttf" );
export default iconSet;
export const {
Button,
getImageSource,

6
src/components/ObsDetails/FlagItemModal.js
View File

@@ -1,7 +1,7 @@
// @flow
import CheckBox from "@react-native-community/checkbox";
import createFlag from "api/flags";
import Button from "components/SharedComponents/Buttons/Button";
import { Button } from "components/SharedComponents";
import {
Modal,
SafeAreaView,
@@ -181,12 +181,12 @@ const FlagItemModal = ( {
)}
<View className="flex-row justify-center m-4">
<Button
className="rounded m-2"
className="m-2"
text={t( "Cancel" )}
onPress={() => resetFlagModal()}
/>
<Button
className="rounded m-2"
className="m-2"
text={t( "Save" )}
onPress={submitFlag}
level="primary"

2
src/components/Observations/LoginPrompt.js
View File

@@ -16,7 +16,7 @@ const LoginPrompt = ( ): Node => {
<Button
level="neutral"
text={t( "LOG-IN-TO-INATURALIST" )}
className="py-1 mt-5"
className="mt-5"
onPress={( ) => navigation.navigate( "login" )}
/>
</>

4
src/components/SharedComponents/ActivityCount/ActivityCount.js
View File

@@ -1,6 +1,6 @@
// @flow
import classnames from "classnames";
import classNames from "classnames";
import INatIcon from "components/INatIcon";
import Body3 from "components/SharedComponents/Typography/Body3";
import { View } from "components/styledComponents";
@@ -33,7 +33,7 @@ const ActivityCount = ( {
const defaultColor = theme.colors.primary;
return (
<View
className={classnames( "flex-row items-center", margin )}
className={classNames( "flex-row items-center", margin )}
accessible
accessibilityLabel={accessibilityLabel || t( "Intl-number", { val: count || 0 } )}
accessibilityHint={accessibilityHint}

70
src/components/SharedComponents/Buttons/Button.js
View File

@@ -3,7 +3,7 @@
import Heading4 from "components/SharedComponents/Typography/Heading4";
import { Pressable } from "components/styledComponents";
import * as React from "react";
import { ActivityIndicator } from "react-native-paper";
import { ActivityIndicator, useTheme } from "react-native-paper";
type ButtonProps = {
text: string,
@@ -19,26 +19,31 @@ type ButtonProps = {
}
const setStyles = ( {
level,
isPrimary,
isFocus,
isWarning,
disabled,
className
} ) => {
let buttonClass = "rounded flex-row justify-center items-center py-1.5 px-8";
let textClass = "text-white tracking-widest";
let buttonClass = "rounded-lg flex-row justify-center items-center py-[13px] px-[10px]";
let textClass = "text-white";
if ( className ) {
buttonClass = buttonClass.concat( " ", className );
}
if ( level === "warning" ) {
if ( isWarning ) {
buttonClass = buttonClass.concat( " ", "bg-warningRed" );
} else if ( level === "primary" ) {
} else if ( isPrimary ) {
buttonClass = buttonClass.concat( " ", "bg-darkGray" );
} else if ( level === "focus" ) {
buttonClass = buttonClass.concat( " ", "bg-inatGreen" );
} else if ( isFocus ) {
buttonClass = buttonClass.concat( " ", "bg-focusGreen" );
} else {
buttonClass = buttonClass.concat( " ", "border border-darkGray border-[2.6px]" );
textClass = textClass.concat( " ", "color-darkGray" );
buttonClass = buttonClass.concat(
" ",
"border border-darkGray border-[3px]"
);
textClass = textClass.concat( " ", "text-darkGray" );
}
if ( disabled ) {
@@ -48,6 +53,22 @@ const setStyles = ( {
return { buttonClass, textClass };
};
const activityIndicatorColor = ( {
isPrimary, isWarning, isFocus, theme
} ) => {
if ( isPrimary ) {
return theme.colors.onPrimary;
}
if ( isFocus ) {
return theme.colors.onSecondary;
}
if ( isWarning ) {
return theme.colors.onError;
}
// Default color of ActivityIndicator is primary anyways, but we need to return something
return theme.colors.primary;
};
const Button = ( {
text,
onPress,
@@ -60,7 +81,19 @@ const Button = ( {
accessibilityRole,
accessibilityHint
}: ButtonProps ): React.Node => {
const { buttonClass, textClass } = setStyles( { disabled, level, className } );
const isPrimary = level === "primary";
const isWarning = level === "warning";
const isFocus = level === "focus";
const isNeutral = !isPrimary && !isWarning && !isFocus;
const { buttonClass, textClass } = setStyles( {
disabled,
isPrimary,
isFocus,
isWarning,
className
} );
const theme = useTheme();
return (
<Pressable
@@ -69,14 +102,21 @@ const Button = ( {
style={style}
disabled={disabled}
testID={testID}
// has no accessibilityLabel prop because then the button text is read as label
accessibilityRole={accessibilityRole || "button"}
accessibilityState={{ disabled }}
accessibilityHint={accessibilityHint}
>
{loading && <ActivityIndicator size={18} className="mr-2" />}
<Heading4 className={textClass}>
{text}
</Heading4>
{loading && (
<ActivityIndicator
size={18}
className="mr-2"
color={!isNeutral && activityIndicatorColor( {
isPrimary, isWarning, isFocus, theme
} )}
/>
)}
<Heading4 className={textClass}>{text}</Heading4>
</Pressable>
);
};

11
src/components/SharedComponents/Divider/Divider.js Normal file
View File

@@ -0,0 +1,11 @@
// @flow
import { View } from "components/styledComponents";
import type { Node } from "react";
import React from "react";
const Divider = (): Node => (
<View className="h-[1px] bg-lightGray" />
);
export default Divider;

84
src/components/SharedComponents/Tabs/Tabs.js
View File

@@ -1,11 +1,12 @@
// @flow
import { Text, View } from "components/styledComponents";
import { t } from "i18next";
import Divider from "components/SharedComponents/Divider/Divider";
import Heading4 from "components/SharedComponents/Typography/Heading4";
import { View } from "components/styledComponents";
import type { Node } from "react";
import React from "react";
import { useTranslation } from "react-i18next";
import { TouchableOpacity } from "react-native";
import colors from "styles/tailwindColors";
type Tab = {
id: string,
@@ -20,47 +21,42 @@ type Props = {
}
const DEFAULT_TABS = [];
const Tabs = ( { tabs = DEFAULT_TABS, activeId }: Props ): Node => (
<View
className="bg-white flex flex-row"
accessibilityRole="tablist"
>
{
tabs.map( ( {
id, text, onPress, testID
} ) => {
const active = activeId === id;
const borderClass = `${active ? "bg-primary" : "bg-white"} h-1 rounded-t-lg`;
return (
<View key={id} className="flex-1">
<TouchableOpacity
onPress={( ...args ) => {
if ( !active ) {
onPress( ...args );
}
}}
testID={testID || `${id}-tab`}
accessibilityRole="tab"
accessibilityLabel={text}
accessibilityHint={t( "Switches-to-tab", { tab: text } )}
accessibilityState={{
selected: active,
expanded: active
}}
>
<Text
className="text-xl self-center py-2"
style={{ color: active ? colors.focus : colors.grayText }}
const Tabs = ( { tabs = DEFAULT_TABS, activeId }: Props ): Node => {
const { t } = useTranslation();
return (
<>
<View className="flex flex-row" accessibilityRole="tablist">
{tabs.map( ( {
id, text, onPress, testID
} ) => {
const active = activeId === id;
return (
<View key={id} className="flex-1">
<TouchableOpacity
onPress={( ...args ) => {
if ( !active ) {
onPress( ...args );
}
}}
testID={testID || `${id}-tab`}
accessibilityRole="tab"
accessibilityLabel={text}
accessibilityHint={t( "Switches-to-tab", { tab: text } )}
accessibilityState={{
selected: active,
expanded: active
}}
>
{text}
</Text>
<View className={borderClass} />
</TouchableOpacity>
</View>
);
} )
}
</View>
);
<Heading4 className="self-center py-[4px]">{text}</Heading4>
{ active && <View className="h-[4px] rounded-t bg-darkGray" /> }
</TouchableOpacity>
</View>
);
} )}
</View>
<Divider />
</>
);
};
export default Tabs;

6
src/components/SharedComponents/Typography/Body1.js
View File

@@ -5,7 +5,9 @@ import React from "react";
import INatTextLight from "./INatTextLight";
// eslint-disable-next-line react/jsx-props-no-spreading
const Body1 = ( props: any ): Node => <INatTextLight className="text-base" {...props} />;
const Body1 = ( props: any ): Node => (
// eslint-disable-next-line react/jsx-props-no-spreading
<INatTextLight className="text-base font-medium text-darkGray" {...props} />
);
export default Body1;

6
src/components/SharedComponents/Typography/Body2.js
View File

@@ -5,7 +5,9 @@ import React from "react";
import INatTextLight from "./INatTextLight";
// eslint-disable-next-line react/jsx-props-no-spreading
const Body2 = ( props: any ): Node => <INatTextLight {...props} />;
const Body2 = ( props: any ): Node => (
// eslint-disable-next-line react/jsx-props-no-spreading
<INatTextLight className="text-md font-light text-darkGray" {...props} />
);
export default Body2;

6
src/components/SharedComponents/Typography/Body3.js
View File

@@ -5,7 +5,9 @@ import React from "react";
import INatTextLight from "./INatTextLight";
// eslint-disable-next-line react/jsx-props-no-spreading
const Body3 = ( props: any ): Node => <INatTextLight className="text-sm" {...props} />;
const Body3 = ( props: any ): Node => (
// eslint-disable-next-line react/jsx-props-no-spreading
<INatTextLight className="text-sm font-normal text-darkGray" {...props} />
);
export default Body3;

6
src/components/SharedComponents/Typography/Body4.js
View File

@@ -5,7 +5,9 @@ import React from "react";
import INatTextLight from "./INatTextLight";
// eslint-disable-next-line react/jsx-props-no-spreading
const Body4 = ( props: any ): Node => <INatTextLight className="text-xs" {...props} />;
const Body4 = ( props: any ): Node => (
// eslint-disable-next-line react/jsx-props-no-spreading
<INatTextLight className="text-xs font-light text-darkGray" {...props} />
);
export default Body4;

6
src/components/SharedComponents/Typography/Heading1.js
View File

@@ -5,7 +5,9 @@ import React from "react";
import INatText from "./INatText";
// eslint-disable-next-line react/jsx-props-no-spreading
const Heading1 = ( props: any ): Node => <INatText className="text-3xl" {...props} />;
const Heading1 = ( props: any ): Node => (
// eslint-disable-next-line react/jsx-props-no-spreading
<INatText className="text-3xl font-semibold text-darkGray" {...props} />
);
export default Heading1;

6
src/components/SharedComponents/Typography/Heading2.js
View File

@@ -5,7 +5,9 @@ import React from "react";
import INatText from "./INatText";
// eslint-disable-next-line react/jsx-props-no-spreading
const Heading2 = ( props: any ): Node => <INatText className="text-2xl" {...props} />;
const Heading2 = ( props: any ): Node => (
// eslint-disable-next-line react/jsx-props-no-spreading
<INatText className="text-2xl font-semibold text-darkGray" {...props} />
);
export default Heading2;

6
src/components/SharedComponents/Typography/Heading3.js
View File

@@ -5,7 +5,9 @@ import React from "react";
import INatText from "./INatText";
// eslint-disable-next-line react/jsx-props-no-spreading
const Heading3 = ( props: any ): Node => <INatText className="text-lg" {...props} />;
const Heading3 = ( props: any ): Node => (
// eslint-disable-next-line react/jsx-props-no-spreading
<INatText className="text-lg font-semibold text-darkGray" {...props} />
);
export default Heading3;

9
src/components/SharedComponents/Typography/Heading4.js
View File

@@ -5,7 +5,12 @@ import React from "react";
import INatText from "./INatText";
// eslint-disable-next-line react/jsx-props-no-spreading
const Heading4 = ( props: any ): Node => <INatText {...props} />;
const Heading4 = ( props: any ): Node => (
<INatText
className="text-md leading-[19px] font-semibold tracking-[2px] text-darkGray"
// eslint-disable-next-line react/jsx-props-no-spreading
{...props}
/>
);
export default Heading4;

16
src/components/SharedComponents/Typography/Heading5.js Normal file
View File

@@ -0,0 +1,16 @@
// @flow
import type { Node } from "react";
import React from "react";
import INatText from "./INatText";
const Heading5 = ( props: any ): Node => (
<INatText
className="text-2xs font-semibold tracking-[1px] text-darkGray"
// eslint-disable-next-line react/jsx-props-no-spreading
{...props}
/>
);
export default Heading5;

6
src/components/SharedComponents/Typography/List1.js
View File

@@ -5,7 +5,9 @@ import React from "react";
import INatTextLight from "./INatTextLight";
// eslint-disable-next-line react/jsx-props-no-spreading
const List1 = ( props: any ): Node => <INatTextLight className="text-base" {...props} />;
const List1 = ( props: any ): Node => (
// eslint-disable-next-line react/jsx-props-no-spreading
<INatTextLight className="text-base font-medium text-darkGray" {...props} />
);
export default List1;

11
src/components/SharedComponents/Typography/List2.js
View File

@@ -5,9 +5,12 @@ import React from "react";
import INatTextLight from "./INatTextLight";
const List2 = (
props: any
// eslint-disable-next-line react/jsx-props-no-spreading
): Node => <INatTextLight className="text-sm leading-[17px]" {...props} />;
const List2 = ( props: any ): Node => (
<INatTextLight
className="text-sm leading-[17px] font-light text-darkGray"
// eslint-disable-next-line react/jsx-props-no-spreading
{...props}
/>
);
export default List2;

6
src/components/SharedComponents/Typography/Subheading1.js
View File

@@ -5,7 +5,9 @@ import React from "react";
import INatTextLight from "./INatTextLight";
// eslint-disable-next-line react/jsx-props-no-spreading
const Subheading1 = ( props: any ): Node => <INatTextLight className="text-xl" {...props} />;
const Subheading1 = ( props: any ): Node => (
// eslint-disable-next-line react/jsx-props-no-spreading
<INatTextLight className="text-xl font-light text-darkGray" {...props} />
);
export default Subheading1;

2
src/components/SharedComponents/UserIcon/UserIcon.js
View File

@@ -15,7 +15,7 @@ const UserIcon = ( { uri, small, active }: Props ): React.Node => {
const size = small ? "w-[22px] h-[22px]" : "w-[40px] h-[40px]";
const border = "border-[3px] border-inatGreen";
const className = classNames( "rounded-full", size, active && border );
// For unknown reasons, the border doesn't show up on Android using nativewind classNames
// For unknown reasons, the green border doesn't show up on Android using nativewind classNames
// but it works with style, might warrant further investigation or an issue in nativewind
const style = { borderColor: colors.inatGreen, borderWidth: 3 };
return (

2
src/components/SharedComponents/index.js
View File

@@ -3,6 +3,7 @@ export { default as Button } from "./Buttons/Button";
export { default as CloseButton } from "./Buttons/CloseButton";
export { default as EvidenceButton } from "./Buttons/EvidenceButton";
export { default as DateDisplay } from "./DateDisplay";
export { default as Divider } from "./Divider/Divider";
export { default as InlineUser } from "./InlineUser/InlineUser";
export { default as ObservationLocation } from "./ObservationLocation";
export { default as QualityGradeStatus } from "./QualityGradeStatus/QualityGradeStatus";
@@ -15,6 +16,7 @@ export { default as Heading1 } from "./Typography/Heading1";
export { default as Heading2 } from "./Typography/Heading2";
export { default as Heading3 } from "./Typography/Heading3";
export { default as Heading4 } from "./Typography/Heading4";
export { default as Heading5 } from "./Typography/Heading5";
export { default as List1 } from "./Typography/List1";
export { default as List2 } from "./Typography/List2";
export { default as Subheading1 } from "./Typography/Subheading1";

75
src/components/UiLibrary.js
View File

@@ -9,11 +9,13 @@ import {
Button,
CloseButton,
DateDisplay,
Divider,
EvidenceButton,
Heading1,
Heading2,
Heading3,
Heading4,
Heading5,
InlineUser,
List1,
List2,
@@ -28,7 +30,7 @@ import SecondaryCTAButton from "components/SharedComponents/Buttons/SecondaryCTA
import UserText from "components/SharedComponents/UserText";
import ViewWithFooter from "components/SharedComponents/ViewWithFooter";
import { fontMonoClass, ScrollView, View } from "components/styledComponents";
import React from "react";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { Alert } from "react-native";
import { IconButton, useTheme } from "react-native-paper";
@@ -40,6 +42,7 @@ const UiLibrary = () => {
const { t } = useTranslation();
const theme = useTheme();
const currentUser = useCurrentUser();
const [loading, setLoading] = useState( false );
const userText = `
User-generated text should support markdown, like **bold**, *italic*, and [links](https://www.inaturalistorg).
`.trim();
@@ -58,16 +61,30 @@ const UiLibrary = () => {
className="mb-2"
level="primary"
text="PRIMARY BUTTON"
loading={loading}
onPress={() => setLoading( !loading )}
accessibilityHint="Describes the result of performing the tap action on this element."
/>
<Button className="mb-2" text="NEUTRAL BUTTON" />
<Button
className="mb-2"
text="NEUTRAL BUTTON"
loading={loading}
onPress={() => setLoading( !loading )}
/>
<Button
className="mb-2"
level="focus"
text="FOCUS BUTTON"
onPress={() => Alert.alert( "You Tapped a Button", "Or did you click it? Fight me." )}
loading={loading}
onPress={() => setLoading( !loading )}
/>
<Button
className="mb-2"
level="warning"
text="WARNING BUTTON"
loading={loading}
onPress={() => setLoading( !loading )}
/>
<Button className="mb-2" level="warning" text="WARNING BUTTON" />
<Button
className="mb-2"
level="primary"
@@ -137,6 +154,10 @@ const UiLibrary = () => {
<Heading2 className="my-2">Heading2</Heading2>
<Heading3 className="my-2">Heading3</Heading3>
<Heading4 className="my-2">Heading4</Heading4>
<Heading4 className="my-2 text-focusGreen">
Heading4 (non-default color)
</Heading4>
<Heading5 className="my-2">Heading5</Heading5>
<Subheading1 className="my-2">Subheading1</Subheading1>
<Body1 className="my-2">Body1</Body1>
<Body2 className="my-2">Body2</Body2>
@@ -196,19 +217,21 @@ const UiLibrary = () => {
Make sure you're exporting glyphMap from components/INatIcon.js to see
all custom icons
</Body1>
{Object.keys( glyphMap ).sort().map( iconName => (
<Body1 key={`icons-${iconName}`}>
<INatIcon
name={iconName}
className="p-3"
key={iconName}
onPress={() => Alert.alert( "", `You tapped on the ${iconName} icon` )}
size={20}
/>
{ " " }
{iconName}
</Body1>
) )}
{Object.keys( glyphMap )
.sort()
.map( iconName => (
<Body1 key={`icons-${iconName}`}>
<INatIcon
name={iconName}
className="p-3"
key={iconName}
onPress={() => Alert.alert( "", `You tapped on the ${iconName} icon` )}
size={20}
/>
{" "}
{iconName}
</Body1>
) )}
<Heading2 className="my-2">User Icons</Heading2>
<View className="flex flex-row justify-between mb-3">
@@ -240,27 +263,30 @@ const UiLibrary = () => {
</View>
</View>
<Heading2>Tabs component</Heading2>
<Heading2 className="my-2">Tabs component</Heading2>
<Tabs
tabs={[
{
id: "TAB1",
text: "Tab1",
text: "TAB1",
onPress: () => {
console.log( "Tab1" );
console.log( "TAB1" );
}
},
{
id: "TAB2",
text: "Tab2",
text: "TAB2",
onPress: () => {
console.log( "Tab2" );
console.log( "TAB2" );
}
}
]}
activeId="TAB1"
/>
<Heading2 className="my-2">Divider component</Heading2>
<Divider />
<Heading2 className="my-2">Date Display Component</Heading2>
<DateDisplay dateString="2023-12-14T21:07:41-09:30" />
@@ -341,7 +367,10 @@ const UiLibrary = () => {
<ObsStatus
layout="vertical"
observation={{ comments: [1, 2, 3], identifications: [1, 2, 3, 4, 5, 6] }}
observation={{
comments: [1, 2, 3],
identifications: [1, 2, 3, 4, 5, 6]
}}
color={theme.colors.primary}
/>

75
tailwind.config.js
View File

@@ -9,37 +9,59 @@ module.exports = {
theme: {
extend: {
fontSize: {
"3xl": ["26px", {
lineHeight: "31px"
}
"3xl": [
"26px",
{
lineHeight: "31px"
}
],
"2xl": ["22px", {
lineHeight: "26px"
}
"2xl": [
"22px",
{
lineHeight: "26px"
}
],
xl: ["21px", {
lineHeight: "25px"
}
xl: [
"21px",
{
lineHeight: "25px"
}
],
lg: ["19px", {
lineHeight: "23px"
}
lg: [
"19px",
{
lineHeight: "23px"
}
],
base: ["18px", {
lineHeight: "22px"
}
base: [
"18px",
{
lineHeight: "22px"
}
],
md: ["16px", {
lineHeight: "18px"
}
md: [
"16px",
{
lineHeight: "18px"
}
],
sm: ["14px", {
lineHeight: "18px"
}
sm: [
"14px",
{
lineHeight: "18px"
}
],
xs: ["12px", {
lineHeight: "14px"
}
xs: [
"12px",
{
lineHeight: "14px"
}
],
"2xs": [
"8px",
{
lineHeight: "10px"
}
]
},
height: {
@@ -61,7 +83,8 @@ module.exports = {
},
borderRadius: {
// tried using rem value here, but it wouldn't load on iOS or Android
DEFAULT: "7px"
DEFAULT: "7px",
lg: "8px"
}
},
colors: {
@@ -77,7 +100,7 @@ module.exports = {
inatGreen: "#77b300",
inatGreenDisabled: "#cce2a4",
gray: "#393939",
lightGray: "#f5f5f5",
lightGray: "#e8e8e8",
midGray: "#cccccc",
borderGray: "#d1d1d1",
grayText: "#999999",

28
tests/unit/components/INatIcon.test.js Normal file
View File

@@ -0,0 +1,28 @@
import { render, screen } from "@testing-library/react-native";
import INatIcon, { glyphMap } from "components/INatIcon";
import React from "react";
const iconName = "camera";
describe( "INatIcon", () => {
it( "renders correctly", () => {
render(
<INatIcon
name={iconName}
size={20}
color="#4F8EF7"
/>
);
// Snapshot test
expect( screen ).toMatchSnapshot();
} );
} );
describe( "glyphMap", () => {
it( "is an object", () => {
expect( glyphMap ).toBeInstanceOf( Object );
} );
it( "has icon name as key", () => {
expect( glyphMap ).toHaveProperty( iconName );
} );
} );

38
tests/unit/components/SharedComponents/Buttons/Button.test.js Normal file
View File

@@ -0,0 +1,38 @@
import { render, screen } from "@testing-library/react-native";
import { Button } from "components/SharedComponents";
import React from "react";
describe.each( [["primary"], ["warning"], ["focus"], ["neutral"]] )(
"Button %s",
level => {
it( "should render correctly", () => {
render( <Button level={level} text={`${level.toUpperCase()} BUTTON`} /> );
// Snapshot test
expect( screen ).toMatchSnapshot();
} );
it( "has no accessibility errors", () => {
const button = <Button level={level} text={`${level.toUpperCase()} BUTTON`} />;
expect( button ).toBeAccessible();
} );
describe( "when disabled", () => {
it( "should render correctly", () => {
render( <Button level={level} text={`${level.toUpperCase()} DISABLED`} disabled /> );
// Snapshot test
expect( screen ).toMatchSnapshot();
} );
it( "has no accessibility errors", () => {
const button = (
<Button level={level} text={`${level.toUpperCase()} DISABLED`} disabled />
);
expect( button ).toBeAccessible();
} );
} );
}
);

769
tests/unit/components/SharedComponents/Buttons/__snapshots__/Button.test.js.snap Normal file
View File

@@ -0,0 +1,769 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Button focus should render correctly 1`] = `
<View
accessibilityRole="button"
accessibilityState={
Object {
"disabled": false,
}
}
accessible={true}
collapsable={false}
focusable={true}
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderRelease={[Function]}
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
style={
Array [
Array [
Object {
"borderBottomLeftRadius": 8,
"borderBottomRightRadius": 8,
"borderTopLeftRadius": 8,
"borderTopRightRadius": 8,
},
Object {
"flexDirection": "row",
},
Object {
"justifyContent": "center",
},
Object {
"alignItems": "center",
},
Object {
"paddingBottom": 13,
"paddingTop": 13,
},
Object {
"paddingLeft": 10,
"paddingRight": 10,
},
Object {
"backgroundColor": "#74AC00",
},
],
]
}
>
<Text
style={
Array [
Object {
"fontFamily": "Whitney-Medium",
},
Array [
Object {
"fontSize": 16,
"lineHeight": 18,
},
Object {
"lineHeight": 19,
},
Object {
"fontWeight": "600",
},
Object {
"letterSpacing": 2,
},
Object {
"color": "#454545",
},
Array [
Object {
"color": "#ffffff",
},
],
],
]
}
>
FOCUS BUTTON
</Text>
</View>
`;
exports[`Button focus when disabled should render correctly 1`] = `
<View
accessibilityRole="button"
accessibilityState={
Object {
"disabled": true,
}
}
accessible={true}
collapsable={false}
focusable={true}
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderRelease={[Function]}
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
style={
Array [
Array [
Object {
"borderBottomLeftRadius": 8,
"borderBottomRightRadius": 8,
"borderTopLeftRadius": 8,
"borderTopRightRadius": 8,
},
Object {
"flexDirection": "row",
},
Object {
"justifyContent": "center",
},
Object {
"alignItems": "center",
},
Object {
"paddingBottom": 13,
"paddingTop": 13,
},
Object {
"paddingLeft": 10,
"paddingRight": 10,
},
Object {
"backgroundColor": "#74AC00",
},
Object {
"opacity": 0.5,
},
],
]
}
>
<Text
style={
Array [
Object {
"fontFamily": "Whitney-Medium",
},
Array [
Object {
"fontSize": 16,
"lineHeight": 18,
},
Object {
"lineHeight": 19,
},
Object {
"fontWeight": "600",
},
Object {
"letterSpacing": 2,
},
Object {
"color": "#454545",
},
Array [
Object {
"color": "#ffffff",
},
],
],
]
}
>
FOCUS DISABLED
</Text>
</View>
`;
exports[`Button neutral should render correctly 1`] = `
<View
accessibilityRole="button"
accessibilityState={
Object {
"disabled": false,
}
}
accessible={true}
collapsable={false}
focusable={true}
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderRelease={[Function]}
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
style={
Array [
Array [
Object {
"borderBottomLeftRadius": 8,
"borderBottomRightRadius": 8,
"borderTopLeftRadius": 8,
"borderTopRightRadius": 8,
},
Object {
"flexDirection": "row",
},
Object {
"justifyContent": "center",
},
Object {
"alignItems": "center",
},
Object {
"paddingBottom": 13,
"paddingTop": 13,
},
Object {
"paddingLeft": 10,
"paddingRight": 10,
},
Object {
"borderBottomWidth": 1,
"borderLeftWidth": 1,
"borderRightWidth": 1,
"borderTopWidth": 1,
},
Object {
"borderBottomColor": "#454545",
"borderLeftColor": "#454545",
"borderRightColor": "#454545",
"borderTopColor": "#454545",
},
Object {
"borderBottomWidth": 3,
"borderLeftWidth": 3,
"borderRightWidth": 3,
"borderTopWidth": 3,
},
],
]
}
>
<Text
style={
Array [
Object {
"fontFamily": "Whitney-Medium",
},
Array [
Object {
"fontSize": 16,
"lineHeight": 18,
},
Object {
"lineHeight": 19,
},
Object {
"fontWeight": "600",
},
Object {
"letterSpacing": 2,
},
Object {
"color": "#454545",
},
Array [
Object {
"color": "#ffffff",
},
Object {
"color": "#454545",
},
],
],
]
}
>
NEUTRAL BUTTON
</Text>
</View>
`;
exports[`Button neutral when disabled should render correctly 1`] = `
<View
accessibilityRole="button"
accessibilityState={
Object {
"disabled": true,
}
}
accessible={true}
collapsable={false}
focusable={true}
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderRelease={[Function]}
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
style={
Array [
Array [
Object {
"borderBottomLeftRadius": 8,
"borderBottomRightRadius": 8,
"borderTopLeftRadius": 8,
"borderTopRightRadius": 8,
},
Object {
"flexDirection": "row",
},
Object {
"justifyContent": "center",
},
Object {
"alignItems": "center",
},
Object {
"paddingBottom": 13,
"paddingTop": 13,
},
Object {
"paddingLeft": 10,
"paddingRight": 10,
},
Object {
"borderBottomWidth": 1,
"borderLeftWidth": 1,
"borderRightWidth": 1,
"borderTopWidth": 1,
},
Object {
"borderBottomColor": "#454545",
"borderLeftColor": "#454545",
"borderRightColor": "#454545",
"borderTopColor": "#454545",
},
Object {
"borderBottomWidth": 3,
"borderLeftWidth": 3,
"borderRightWidth": 3,
"borderTopWidth": 3,
},
Object {
"opacity": 0.5,
},
],
]
}
>
<Text
style={
Array [
Object {
"fontFamily": "Whitney-Medium",
},
Array [
Object {
"fontSize": 16,
"lineHeight": 18,
},
Object {
"lineHeight": 19,
},
Object {
"fontWeight": "600",
},
Object {
"letterSpacing": 2,
},
Object {
"color": "#454545",
},
Array [
Object {
"color": "#ffffff",
},
Object {
"color": "#454545",
},
],
],
]
}
>
NEUTRAL DISABLED
</Text>
</View>
`;
exports[`Button primary should render correctly 1`] = `
<View
accessibilityRole="button"
accessibilityState={
Object {
"disabled": false,
}
}
accessible={true}
collapsable={false}
focusable={true}
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderRelease={[Function]}
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
style={
Array [
Array [
Object {
"borderBottomLeftRadius": 8,
"borderBottomRightRadius": 8,
"borderTopLeftRadius": 8,
"borderTopRightRadius": 8,
},
Object {
"flexDirection": "row",
},
Object {
"justifyContent": "center",
},
Object {
"alignItems": "center",
},
Object {
"paddingBottom": 13,
"paddingTop": 13,
},
Object {
"paddingLeft": 10,
"paddingRight": 10,
},
Object {
"backgroundColor": "#454545",
},
],
]
}
>
<Text
style={
Array [
Object {
"fontFamily": "Whitney-Medium",
},
Array [
Object {
"fontSize": 16,
"lineHeight": 18,
},
Object {
"lineHeight": 19,
},
Object {
"fontWeight": "600",
},
Object {
"letterSpacing": 2,
},
Object {
"color": "#454545",
},
Array [
Object {
"color": "#ffffff",
},
],
],
]
}
>
PRIMARY BUTTON
</Text>
</View>
`;
exports[`Button primary when disabled should render correctly 1`] = `
<View
accessibilityRole="button"
accessibilityState={
Object {
"disabled": true,
}
}
accessible={true}
collapsable={false}
focusable={true}
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderRelease={[Function]}
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
style={
Array [
Array [
Object {
"borderBottomLeftRadius": 8,
"borderBottomRightRadius": 8,
"borderTopLeftRadius": 8,
"borderTopRightRadius": 8,
},
Object {
"flexDirection": "row",
},
Object {
"justifyContent": "center",
},
Object {
"alignItems": "center",
},
Object {
"paddingBottom": 13,
"paddingTop": 13,
},
Object {
"paddingLeft": 10,
"paddingRight": 10,
},
Object {
"backgroundColor": "#454545",
},
Object {
"opacity": 0.5,
},
],
]
}
>
<Text
style={
Array [
Object {
"fontFamily": "Whitney-Medium",
},
Array [
Object {
"fontSize": 16,
"lineHeight": 18,
},
Object {
"lineHeight": 19,
},
Object {
"fontWeight": "600",
},
Object {
"letterSpacing": 2,
},
Object {
"color": "#454545",
},
Array [
Object {
"color": "#ffffff",
},
],
],
]
}
>
PRIMARY DISABLED
</Text>
</View>
`;
exports[`Button warning should render correctly 1`] = `
<View
accessibilityRole="button"
accessibilityState={
Object {
"disabled": false,
}
}
accessible={true}
collapsable={false}
focusable={true}
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderRelease={[Function]}
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
style={
Array [
Array [
Object {
"borderBottomLeftRadius": 8,
"borderBottomRightRadius": 8,
"borderTopLeftRadius": 8,
"borderTopRightRadius": 8,
},
Object {
"flexDirection": "row",
},
Object {
"justifyContent": "center",
},
Object {
"alignItems": "center",
},
Object {
"paddingBottom": 13,
"paddingTop": 13,
},
Object {
"paddingLeft": 10,
"paddingRight": 10,
},
Object {
"backgroundColor": "#9B1010",
},
],
]
}
>
<Text
style={
Array [
Object {
"fontFamily": "Whitney-Medium",
},
Array [
Object {
"fontSize": 16,
"lineHeight": 18,
},
Object {
"lineHeight": 19,
},
Object {
"fontWeight": "600",
},
Object {
"letterSpacing": 2,
},
Object {
"color": "#454545",
},
Array [
Object {
"color": "#ffffff",
},
],
],
]
}
>
WARNING BUTTON
</Text>
</View>
`;
exports[`Button warning when disabled should render correctly 1`] = `
<View
accessibilityRole="button"
accessibilityState={
Object {
"disabled": true,
}
}
accessible={true}
collapsable={false}
focusable={true}
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderRelease={[Function]}
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
style={
Array [
Array [
Object {
"borderBottomLeftRadius": 8,
"borderBottomRightRadius": 8,
"borderTopLeftRadius": 8,
"borderTopRightRadius": 8,
},
Object {
"flexDirection": "row",
},
Object {
"justifyContent": "center",
},
Object {
"alignItems": "center",
},
Object {
"paddingBottom": 13,
"paddingTop": 13,
},
Object {
"paddingLeft": 10,
"paddingRight": 10,
},
Object {
"backgroundColor": "#9B1010",
},
Object {
"opacity": 0.5,
},
],
]
}
>
<Text
style={
Array [
Object {
"fontFamily": "Whitney-Medium",
},
Array [
Object {
"fontSize": 16,
"lineHeight": 18,
},
Object {
"lineHeight": 19,
},
Object {
"fontWeight": "600",
},
Object {
"letterSpacing": 2,
},
Object {
"color": "#454545",
},
Array [
Object {
"color": "#ffffff",
},
],
],
]
}
>
WARNING DISABLED
</Text>
</View>
`;

11
tests/unit/components/SharedComponents/Divider/Divider.test.js Normal file
View File

@@ -0,0 +1,11 @@
import { render, screen } from "@testing-library/react-native";
import { Divider } from "components/SharedComponents";
import React from "react";
describe( "Divider", () => {
it( "should render correctly", () => {
render( <Divider /> );
expect( screen ).toMatchSnapshot();
} );
} );

18
tests/unit/components/SharedComponents/Divider/__snapshots__/Divider.test.js.snap Normal file
View File

@@ -0,0 +1,18 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Divider should render correctly 1`] = `
<View
style={
Array [
Array [
Object {
"height": 1,
},
Object {
"backgroundColor": "#e8e8e8",
},
],
]
}
/>
`;

17
tests/unit/components/Tabs.test.js → tests/unit/components/SharedComponents/Tabs/Tabs.test.js
View File

@@ -1,9 +1,8 @@
import { fireEvent, screen } from "@testing-library/react-native";
import { fireEvent, render, screen } from "@testing-library/react-native";
import { Tabs } from "components/SharedComponents";
import initI18next from "i18n/initI18next";
import React from "react";
import { renderComponent } from "../../helpers/render";
const TAB_1 = "TAB_1";
const TAB_2 = "TAB_2";
const tab1Click = jest.fn();
@@ -23,6 +22,16 @@ const tabs = [
];
describe( "Tabs", () => {
beforeAll( async () => {
await initI18next();
} );
it( "should render correctly", () => {
render( <Tabs tabs={tabs} activeId={TAB_1} /> );
expect( screen ).toMatchSnapshot();
} );
it( "should not have accessibility errors", () => {
const tabComp = <Tabs tabs={tabs} activeId={TAB_1} />;
@@ -30,7 +39,7 @@ describe( "Tabs", () => {
} );
it( "should be clicked and display proper text", async () => {
renderComponent( <Tabs tabs={tabs} activeId={TAB_1} /> );
render( <Tabs tabs={tabs} activeId={TAB_1} /> );
const tab1 = await screen.findByLabelText( TAB_1 );
const tab2 = await screen.findByLabelText( TAB_2 );

214
tests/unit/components/SharedComponents/Tabs/__snapshots__/Tabs.test.js.snap Normal file
View File

@@ -0,0 +1,214 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Tabs should render correctly 1`] = `
Array [
<View
accessibilityRole="tablist"
style={
Array [
Array [
Object {
"display": "flex",
},
Object {
"flexDirection": "row",
},
],
]
}
>
<View
style={
Array [
Array [
Object {
"flexBasis": "0%",
"flexGrow": 1,
"flexShrink": 1,
},
],
]
}
>
<View
accessibilityHint="Switches to TAB_1 tab."
accessibilityLabel="TAB_1"
accessibilityRole="tab"
accessibilityState={
Object {
"expanded": true,
"selected": true,
}
}
accessible={true}
collapsable={false}
focusable={true}
onClick={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderRelease={[Function]}
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
style={
Object {
"opacity": 1,
}
}
testID="TAB_1-tab"
>
<Text
style={
Array [
Object {
"fontFamily": "Whitney-Medium",
},
Array [
Object {
"fontSize": 16,
"lineHeight": 18,
},
Object {
"lineHeight": 19,
},
Object {
"fontWeight": "600",
},
Object {
"letterSpacing": 2,
},
Object {
"color": "#454545",
},
Array [
Object {
"alignSelf": "center",
},
Object {
"paddingBottom": 4,
"paddingTop": 4,
},
],
],
]
}
>
TAB_1
</Text>
<View
style={
Array [
Array [
Object {
"height": 4,
},
Object {
"borderTopLeftRadius": 7,
"borderTopRightRadius": 7,
},
Object {
"backgroundColor": "#454545",
},
],
]
}
/>
</View>
</View>
<View
style={
Array [
Array [
Object {
"flexBasis": "0%",
"flexGrow": 1,
"flexShrink": 1,
},
],
]
}
>
<View
accessibilityHint="Switches to TAB_2 tab."
accessibilityLabel="TAB_2"
accessibilityRole="tab"
accessibilityState={
Object {
"expanded": false,
"selected": false,
}
}
accessible={true}
collapsable={false}
focusable={true}
onClick={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderRelease={[Function]}
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
style={
Object {
"opacity": 1,
}
}
testID="TAB_2-tab"
>
<Text
style={
Array [
Object {
"fontFamily": "Whitney-Medium",
},
Array [
Object {
"fontSize": 16,
"lineHeight": 18,
},
Object {
"lineHeight": 19,
},
Object {
"fontWeight": "600",
},
Object {
"letterSpacing": 2,
},
Object {
"color": "#454545",
},
Array [
Object {
"alignSelf": "center",
},
Object {
"paddingBottom": 4,
"paddingTop": 4,
},
],
],
]
}
>
TAB_2
</Text>
</View>
</View>
</View>,
<View
style={
Array [
Array [
Object {
"height": 1,
},
Object {
"backgroundColor": "#e8e8e8",
},
],
]
}
/>,
]
`;

14
tests/unit/components/SharedComponents/Typography/Body1.test.js Normal file
View File

@@ -0,0 +1,14 @@
import { render, screen } from "@testing-library/react-native";
import { Body1 } from "components/SharedComponents";
import React from "react";
const text = "Body1";
describe( "Body1", () => {
it( "renders correctly", () => {
render( <Body1>{text}</Body1> );
// Snapshot test
expect( screen ).toMatchSnapshot();
} );
} );

14
tests/unit/components/SharedComponents/Typography/Body2.test.js Normal file
View File

@@ -0,0 +1,14 @@
import { render, screen } from "@testing-library/react-native";
import { Body2 } from "components/SharedComponents";
import React from "react";
const text = "Body2";
describe( "Body2", () => {
it( "renders correctly", () => {
render( <Body2>{text}</Body2> );
// Snapshot test
expect( screen ).toMatchSnapshot();
} );
} );

14
tests/unit/components/SharedComponents/Typography/Body3.test.js Normal file
View File

@@ -0,0 +1,14 @@
import { render, screen } from "@testing-library/react-native";
import { Body3 } from "components/SharedComponents";
import React from "react";
const text = "Body3";
describe( "Body3", () => {
it( "renders correctly", () => {
render( <Body3>{text}</Body3> );
// Snapshot test
expect( screen ).toMatchSnapshot();
} );
} );

14
tests/unit/components/SharedComponents/Typography/Body4.test.js Normal file
View File

@@ -0,0 +1,14 @@
import { render, screen } from "@testing-library/react-native";
import { Body4 } from "components/SharedComponents";
import React from "react";
const text = "Body4";
describe( "Body4", () => {
it( "renders correctly", () => {
render( <Body4>{text}</Body4> );
// Snapshot test
expect( screen ).toMatchSnapshot();
} );
} );

14
tests/unit/components/SharedComponents/Typography/Heading1.test.js Normal file
View File

@@ -0,0 +1,14 @@
import { render, screen } from "@testing-library/react-native";
import { Heading1 } from "components/SharedComponents";
import React from "react";
const text = "Heading1";
describe( "Heading1", () => {
it( "renders correctly", () => {
render( <Heading1>{text}</Heading1> );
// Snapshot test
expect( screen ).toMatchSnapshot();
} );
} );

14
tests/unit/components/SharedComponents/Typography/Heading2.test.js Normal file
View File

@@ -0,0 +1,14 @@
import { render, screen } from "@testing-library/react-native";
import { Heading2 } from "components/SharedComponents";
import React from "react";
const text = "Heading2";
describe( "Heading2", () => {
it( "renders correctly", () => {
render( <Heading2>{text}</Heading2> );
// Snapshot test
expect( screen ).toMatchSnapshot();
} );
} );

14
tests/unit/components/SharedComponents/Typography/Heading3.test.js Normal file
View File

@@ -0,0 +1,14 @@
import { render, screen } from "@testing-library/react-native";
import { Heading3 } from "components/SharedComponents";
import React from "react";
const text = "Heading3";
describe( "Heading3", () => {
it( "renders correctly", () => {
render( <Heading3>{text}</Heading3> );
// Snapshot test
expect( screen ).toMatchSnapshot();
} );
} );

14
tests/unit/components/SharedComponents/Typography/Heading4.test.js Normal file
View File

@@ -0,0 +1,14 @@
import { render, screen } from "@testing-library/react-native";
import { Heading4 } from "components/SharedComponents";
import React from "react";
const text = "Heading4";
describe( "Heading4", () => {
it( "renders correctly", () => {
render( <Heading4>{text}</Heading4> );
// Snapshot test
expect( screen ).toMatchSnapshot();
} );
} );

14
tests/unit/components/SharedComponents/Typography/Heading5.test.js Normal file
View File

@@ -0,0 +1,14 @@
import { render, screen } from "@testing-library/react-native";
import { Heading5 } from "components/SharedComponents";
import React from "react";
const text = "Heading5";
describe( "Heading5", () => {
it( "renders correctly", () => {
render( <Heading5>{text}</Heading5> );
// Snapshot test
expect( screen ).toMatchSnapshot();
} );
} );

14
tests/unit/components/SharedComponents/Typography/List1.test.js Normal file
View File

@@ -0,0 +1,14 @@
import { render, screen } from "@testing-library/react-native";
import { List1 } from "components/SharedComponents";
import React from "react";
const text = "List1";
describe( "List1", () => {
it( "renders correctly", () => {
render( <List1>{text}</List1> );
// Snapshot test
expect( screen ).toMatchSnapshot();
} );
} );

14
tests/unit/components/SharedComponents/Typography/List2.test.js Normal file
View File

@@ -0,0 +1,14 @@
import { render, screen } from "@testing-library/react-native";
import { List2 } from "components/SharedComponents";
import React from "react";
const text = "List2";
describe( "List2", () => {
it( "renders correctly", () => {
render( <List2>{text}</List2> );
// Snapshot test
expect( screen ).toMatchSnapshot();
} );
} );

14
tests/unit/components/SharedComponents/Typography/Subheading1.test.js Normal file
View File

@@ -0,0 +1,14 @@
import { render, screen } from "@testing-library/react-native";
import { Subheading1 } from "components/SharedComponents";
import React from "react";
const text = "Subheading1";
describe( "Subheading1", () => {
it( "renders correctly", () => {
render( <Subheading1>{text}</Subheading1> );
// Snapshot test
expect( screen ).toMatchSnapshot();
} );
} );

27
tests/unit/components/SharedComponents/Typography/__snapshots__/Body1.test.js.snap Normal file
View File

@@ -0,0 +1,27 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Body1 renders correctly 1`] = `
<Text
style={
Array [
Object {
"fontFamily": "Whitney-Light",
},
Array [
Object {
"fontSize": 18,
"lineHeight": 22,
},
Object {
"fontWeight": "500",
},
Object {
"color": "#454545",
},
],
]
}
>
Body1
</Text>
`;

27
tests/unit/components/SharedComponents/Typography/__snapshots__/Body2.test.js.snap Normal file
View File

@@ -0,0 +1,27 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Body2 renders correctly 1`] = `
<Text
style={
Array [
Object {
"fontFamily": "Whitney-Light",
},
Array [
Object {
"fontSize": 16,
"lineHeight": 18,
},
Object {
"fontWeight": "300",
},
Object {
"color": "#454545",
},
],
]
}
>
Body2
</Text>
`;

27
tests/unit/components/SharedComponents/Typography/__snapshots__/Body3.test.js.snap Normal file
View File

@@ -0,0 +1,27 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Body3 renders correctly 1`] = `
<Text
style={
Array [
Object {
"fontFamily": "Whitney-Light",
},
Array [
Object {
"fontSize": 14,
"lineHeight": 18,
},
Object {
"fontWeight": "400",
},
Object {
"color": "#454545",
},
],
]
}
>
Body3
</Text>
`;

27
tests/unit/components/SharedComponents/Typography/__snapshots__/Body4.test.js.snap Normal file
View File

@@ -0,0 +1,27 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Body4 renders correctly 1`] = `
<Text
style={
Array [
Object {
"fontFamily": "Whitney-Light",
},
Array [
Object {
"fontSize": 12,
"lineHeight": 14,
},
Object {
"fontWeight": "300",
},
Object {
"color": "#454545",
},
],
]
}
>
Body4
</Text>
`;

27
tests/unit/components/SharedComponents/Typography/__snapshots__/Heading1.test.js.snap Normal file
View File

@@ -0,0 +1,27 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Heading1 renders correctly 1`] = `
<Text
style={
Array [
Object {
"fontFamily": "Whitney-Medium",
},
Array [
Object {
"fontSize": 26,
"lineHeight": 31,
},
Object {
"fontWeight": "600",
},
Object {
"color": "#454545",
},
],
]
}
>
Heading1
</Text>
`;

27
tests/unit/components/SharedComponents/Typography/__snapshots__/Heading2.test.js.snap Normal file
View File

@@ -0,0 +1,27 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Heading2 renders correctly 1`] = `
<Text
style={
Array [
Object {
"fontFamily": "Whitney-Medium",
},
Array [
Object {
"fontSize": 22,
"lineHeight": 26,
},
Object {
"fontWeight": "600",
},
Object {
"color": "#454545",
},
],
]
}
>
Heading2
</Text>
`;

27
tests/unit/components/SharedComponents/Typography/__snapshots__/Heading3.test.js.snap Normal file
View File

@@ -0,0 +1,27 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Heading3 renders correctly 1`] = `
<Text
style={
Array [
Object {
"fontFamily": "Whitney-Medium",
},
Array [
Object {
"fontSize": 19,
"lineHeight": 23,
},
Object {
"fontWeight": "600",
},
Object {
"color": "#454545",
},
],
]
}
>
Heading3
</Text>
`;

33
tests/unit/components/SharedComponents/Typography/__snapshots__/Heading4.test.js.snap Normal file
View File

@@ -0,0 +1,33 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Heading4 renders correctly 1`] = `
<Text
style={
Array [
Object {
"fontFamily": "Whitney-Medium",
},
Array [
Object {
"fontSize": 16,
"lineHeight": 18,
},
Object {
"lineHeight": 19,
},
Object {
"fontWeight": "600",
},
Object {
"letterSpacing": 2,
},
Object {
"color": "#454545",
},
],
]
}
>
Heading4
</Text>
`;

30
tests/unit/components/SharedComponents/Typography/__snapshots__/Heading5.test.js.snap Normal file
View File

@@ -0,0 +1,30 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Heading5 renders correctly 1`] = `
<Text
style={
Array [
Object {
"fontFamily": "Whitney-Medium",
},
Array [
Object {
"fontSize": 8,
"lineHeight": 10,
},
Object {
"fontWeight": "600",
},
Object {
"letterSpacing": 1,
},
Object {
"color": "#454545",
},
],
]
}
>
Heading5
</Text>
`;

27
tests/unit/components/SharedComponents/Typography/__snapshots__/List1.test.js.snap Normal file
View File

@@ -0,0 +1,27 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`List1 renders correctly 1`] = `
<Text
style={
Array [
Object {
"fontFamily": "Whitney-Light",
},
Array [
Object {
"fontSize": 18,
"lineHeight": 22,
},
Object {
"fontWeight": "500",
},
Object {
"color": "#454545",
},
],
]
}
>
List1
</Text>
`;

30
tests/unit/components/SharedComponents/Typography/__snapshots__/List2.test.js.snap Normal file
View File

@@ -0,0 +1,30 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`List2 renders correctly 1`] = `
<Text
style={
Array [
Object {
"fontFamily": "Whitney-Light",
},
Array [
Object {
"fontSize": 14,
"lineHeight": 18,
},
Object {
"lineHeight": 17,
},
Object {
"fontWeight": "300",
},
Object {
"color": "#454545",
},
],
]
}
>
List2
</Text>
`;

27
tests/unit/components/SharedComponents/Typography/__snapshots__/Subheading1.test.js.snap Normal file
View File

@@ -0,0 +1,27 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Subheading1 renders correctly 1`] = `
<Text
style={
Array [
Object {
"fontFamily": "Whitney-Light",
},
Array [
Object {
"fontSize": 21,
"lineHeight": 25,
},
Object {
"fontWeight": "300",
},
Object {
"color": "#454545",
},
],
]
}
>
Subheading1
</Text>
`;

25
tests/unit/components/__snapshots__/INatIcon.test.js.snap Normal file
View File

@@ -0,0 +1,25 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`INatIcon renders correctly 1`] = `
<Text
allowFontScaling={false}
selectable={false}
style={
Array [
Object {
"color": "#4F8EF7",
"fontSize": 20,
},
undefined,
Object {
"fontFamily": "inaturalisticons",
"fontStyle": "normal",
"fontWeight": "normal",
},
Object {},
]
}
>
</Text>
`;