chore(react): remove direct usage of react-test-renderer and types (#…

…6255)

.changeset/cool-pots-fold.md

@@ -0,0 +1,8 @@
+---
+"@aws-amplify/ui-react-core-notifications": patch
+"@aws-amplify/ui-react-core": patch
+"@aws-amplify/ui-react-liveness": patch
+"@aws-amplify/ui-react-native": patch
+---
+
+chore(react): remove direct usage of react-test-renderer and types

examples/react-native/src/features/InAppMessaging/Demo/Example.tsx

@@ -1,9 +1,11 @@
 import React from 'react';
+import { ScrollView, StyleSheet, Text, View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
 import { Amplify } from 'aws-amplify';
 import { initializeInAppMessaging } from 'aws-amplify/in-app-messaging';
-import { SafeAreaView, StyleSheet, Text, View } from 'react-native';
-
 import { withInAppMessaging } from '@aws-amplify/ui-react-native';
+
 import { Button, Checkbox, Radio, RadioGroup } from '../../../ui';
 import { useInAppDemo, ACTIONS, LAYOUTS, ORIENTATIONS } from './utils';
 import config from './aws-exports';
@@ -55,83 +57,85 @@ function Demo() {
 
   return (
     <SafeAreaView style={styles.wrapper}>
-      <View style={styles.container}>
-        <Text style={styles.heading}>Configure Demo Message</Text>
-        <DemoRadioGroup
-          data={LAYOUTS}
-          label="Layout"
-          onChange={handleAction('setLayout')}
-          value={layout}
-        />
-        <DemoDivider />
-        <DemoCheckbox
-          label="Has Header"
-          onChange={handleAction('setHasHeader')}
-          selected={hasHeader}
-          value={hasHeader}
-        />
-        <DemoDivider />
-        <DemoCheckbox
-          label="Has Message"
-          onChange={handleAction('setHasMessage')}
-          selected={hasMessage}
-          value={hasMessage}
-        />
-        <DemoDivider />
-        <DemoCheckbox
-          selected={hasImage}
-          label="Has Image"
-          onChange={handleAction('setHasImage')}
-          value={hasImage}
-        />
-        <DemoDivider />
-        <DemoRadioGroup
-          data={ORIENTATIONS}
-          direction="horizontal"
-          disabled={!hasImage}
-          label="Image Orientation"
-          onChange={handleAction('setImageOrientation')}
-          value={imageOrientation}
-        />
-        <DemoDivider />
-        <DemoCheckbox
-          label="Has Primary Button"
-          onChange={handleAction('setHasPrimaryButton')}
-          selected={hasPrimaryButton}
-          value={hasPrimaryButton}
-        />
-        <DemoDivider />
-        <DemoRadioGroup
-          data={ACTIONS}
-          disabled={!hasPrimaryButton}
-          label="Primary Button Action"
-          onChange={handleAction('setPrimaryButtonAction')}
-          value={primaryButtonAction}
-        />
-        <DemoDivider />
-        <DemoCheckbox
-          disabled={!hasPrimaryButton}
-          label="Has Secondary Button"
-          onChange={handleAction('setHasSecondaryButton')}
-          selected={hasSecondaryButton}
-          value={hasSecondaryButton}
-        />
-        <DemoDivider />
-        <DemoRadioGroup
-          data={ACTIONS}
-          disabled={!hasPrimaryButton || !hasSecondaryButton}
-          label="Secondary Button Action"
-          onChange={handleAction('setSecondaryButtonAction')}
-          value={secondaryButtonAction}
-        />
-        <Button
-          onPress={displayDemoMessage}
-          style={styles.button}
-          textStyle={styles.buttonLabel}
-        >
-          Display Demo Message
-        </Button>
-      </View>
+      <ScrollView>
+        <View style={styles.container}>
+          <Text style={styles.heading}>Configure Demo Message</Text>
+          <DemoRadioGroup
+            data={LAYOUTS}
+            label="Layout"
+            onChange={handleAction('setLayout')}
+            value={layout}
+          />
+          <DemoDivider />
+          <DemoCheckbox
+            label="Has Header"
+            onChange={handleAction('setHasHeader')}
+            selected={hasHeader}
+            value={hasHeader}
+          />
+          <DemoDivider />
+          <DemoCheckbox
+            label="Has Message"
+            onChange={handleAction('setHasMessage')}
+            selected={hasMessage}
+            value={hasMessage}
+          />
+          <DemoDivider />
+          <DemoCheckbox
+            selected={hasImage}
+            label="Has Image"
+            onChange={handleAction('setHasImage')}
+            value={hasImage}
+          />
+          <DemoDivider />
+          <DemoRadioGroup
+            data={ORIENTATIONS}
+            direction="horizontal"
+            disabled={!hasImage}
+            label="Image Orientation"
+            onChange={handleAction('setImageOrientation')}
+            value={imageOrientation}
+          />
+          <DemoDivider />
+          <DemoCheckbox
+            label="Has Primary Button"
+            onChange={handleAction('setHasPrimaryButton')}
+            selected={hasPrimaryButton}
+            value={hasPrimaryButton}
+          />
+          <DemoDivider />
+          <DemoRadioGroup
+            data={ACTIONS}
+            disabled={!hasPrimaryButton}
+            label="Primary Button Action"
+            onChange={handleAction('setPrimaryButtonAction')}
+            value={primaryButtonAction}
+          />
+          <DemoDivider />
+          <DemoCheckbox
+            disabled={!hasPrimaryButton}
+            label="Has Secondary Button"
+            onChange={handleAction('setHasSecondaryButton')}
+            selected={hasSecondaryButton}
+            value={hasSecondaryButton}
+          />
+          <DemoDivider />
+          <DemoRadioGroup
+            data={ACTIONS}
+            disabled={!hasPrimaryButton || !hasSecondaryButton}
+            label="Secondary Button Action"
+            onChange={handleAction('setSecondaryButtonAction')}
+            value={secondaryButtonAction}
+          />
+          <Button
+            onPress={displayDemoMessage}
+            style={styles.button}
+            textStyle={styles.buttonLabel}
+          >
+            Display Demo Message
+          </Button>
+        </View>
+      </ScrollView>
     </SafeAreaView>
   );
 }
@@ -152,7 +156,7 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     justifyContent: 'center',
-    paddingHorizontal: 24,
+    paddingHorizontal: 16,
   },
   divider: {
     backgroundColor: 'black',
@@ -164,7 +168,8 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     fontSize: 24,
     fontWeight: '700',
-    marginVertical: 8,
+    marginBottom: 8,
+    marginTop: 24,
   },
   label: {
     fontSize: 18,

packages/react-core-notifications/src/InAppMessaging/context/InAppMessagingContext/InAppMessagingContext.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { InAppMessage } from '../../types';
+import { useInAppMessagingState } from './useInAppMessagingState';
+
+export interface InAppMessagingContextType {
+  clearMessage: () => void;
+  displayMessage: (message: InAppMessage) => void;
+  message: InAppMessage | null;
+}
+
+const InAppMessagingContext =
+  React.createContext<InAppMessagingContextType | null>(null);
+
+export default InAppMessagingContext;
+
+export interface InAppMessagingProviderProps {
+  children: React.ReactNode;
+}
+
+export interface UseInAppMessaging extends InAppMessagingContextType {}
+
+export const ERROR_MESSAGE =
+  '`useInAppMessaging` must be called from within `InAppMessagingProvider`';
+
+/**
+ * Utility hook used to access the InAppMessagingContext values
+ *
+ * @returns {InAppMessagingContextType} InAppMessaging context values
+ */
+export function useInAppMessaging(): UseInAppMessaging {
+  const context = React.useContext(InAppMessagingContext);
+
+  if (!context) {
+    throw new Error(ERROR_MESSAGE);
+  }
+  return context;
+}
+
+export function InAppMessagingProvider({
+  children,
+}: InAppMessagingProviderProps): React.JSX.Element {
+  const value = useInAppMessagingState();
+
+  return (
+    <InAppMessagingContext.Provider value={value}>
+      {children}
+    </InAppMessagingContext.Provider>
+  );
+}

packages/react-core-notifications/src/InAppMessaging/context/InAppMessagingContext/__tests__/InAppMessagingContext.spec.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { renderHook } from '@testing-library/react';
+
+import { InAppMessagingContextType } from '..';
+
+import {
+  ERROR_MESSAGE,
+  InAppMessagingProvider,
+  useInAppMessaging,
+} from '../InAppMessagingContext';
+
+const clearMessage = jest.fn();
+const displayMessage = jest.fn();
+const message = null;
+
+jest.mock('../useInAppMessagingState', () => ({
+  useInAppMessagingState: (): InAppMessagingContextType => ({
+    clearMessage,
+    displayMessage,
+    message,
+  }),
+}));
+
+jest.mock('aws-amplify/in-app-messaging');
+
+describe('useInAppMessaging', () => {
+  it('provides the values of InAppMessagingContext to consumers wrapped in InAppMessagingProvider', () => {
+    const { result } = renderHook(() => useInAppMessaging(), {
+      wrapper: ({ children }) => (
+        <InAppMessagingProvider>{children}</InAppMessagingProvider>
+      ),
+    });
+
+    expect(result.current).toStrictEqual({
+      clearMessage,
+      displayMessage,
+      message,
+    });
+  });
+
+  it('throws an error when called outside an InAppMessagingProvider', () => {
+    /* eslint-disable no-console */
+    // monkeypatch console.error into a no-op temporarily to supress React printed error regarding lack of
+    // ErrorBoundary component
+    const original = console.error;
+    console.error = () => {};
+
+    expect(() => renderHook(() => useInAppMessaging())).toThrow(ERROR_MESSAGE);
+
+    console.error = original;
+    /* eslint-enable no-console */
+  });
+});