pagopa · Vangaorth · Jan 26, 2024 · Jan 23, 2024 · Jan 24, 2024 · Jan 24, 2024
@@ -1,22 +1,27 @@
-import { Text as NBButtonText } from "native-base";
 import * as React from "react";
 import { StyleSheet, View } from "react-native";
-import { IOColors, hexToRgba } from "@pagopa/io-app-design-system";
+import {
+  ButtonOutline,
+  IOColors,
+  hexToRgba
+} from "@pagopa/io-app-design-system";
 import I18n from "../i18n";
-import variables from "../theme/variables";
+import { useIOSelector } from "../store/hooks";
+import { isDesignSystemEnabledSelector } from "../store/reducers/persistedPreferences";
 import ButtonDefaultOpacity from "./ButtonDefaultOpacity";
-import BoxedRefreshIndicator from "./ui/BoxedRefreshIndicator";
 import { Overlay } from "./ui/Overlay";
 import { IOStyles } from "./core/variables/IOStyles";
 import { Body } from "./core/typography/Body";
+import BoxedRefreshIndicator from "./ui/BoxedRefreshIndicator";
 
 const styles = StyleSheet.create({
   textCaption: {
-    padding: variables.contentPadding
+    padding: 24
   }
 });
 
 type Props = Readonly<{
+  children?: React.ReactNode;
   isLoading: boolean;
   loadingCaption?: string;
   loadingOpacity?: number;
@@ -26,51 +31,56 @@ type Props = Readonly<{
 /**
  * A Component to display and overlay spinner conditionally
  */
-class LoadingSpinnerOverlay extends React.Component<Props> {
-  public render() {
-    const {
-      children,
-      isLoading,
-      loadingCaption,
-      loadingOpacity = 0.7,
-      onCancel
-    } = this.props;
-    return (
-      <Overlay
-        backgroundColor={hexToRgba(IOColors.white, loadingOpacity)}
-        foreground={
-          isLoading && (
-            <BoxedRefreshIndicator
-              caption={
-                <View style={styles.textCaption}>
-                  <Body accessible={true} style={{ textAlign: "center" }}>
-                    {loadingCaption || I18n.t("global.remoteStates.wait")}
-                  </Body>
-                </View>
-              }
-              action={
-                onCancel && (
-                  <View style={IOStyles.selfCenter}>
+const LoadingSpinnerOverlay = ({
+  children,
+  isLoading,
+  loadingCaption,
+  loadingOpacity = 0.7,
+  onCancel
+}: Props) => {
+  const isDesignSystemEnabled = useIOSelector(isDesignSystemEnabledSelector);
+  return (
+    <Overlay
+      backgroundColor={hexToRgba(IOColors.white, loadingOpacity)}
+      foreground={
+        isLoading && (
+          <BoxedRefreshIndicator
+            caption={
+              <View style={styles.textCaption}>
+                <Body accessible={true} style={{ textAlign: "center" }}>
+                  {loadingCaption || I18n.t("global.remoteStates.wait")}
+                </Body>
+              </View>
+            }
+            action={
+              onCancel && (
+                <View style={IOStyles.selfCenter}>
+                  {isDesignSystemEnabled ? (
+                    <ButtonOutline
+                      accessibilityLabel={I18n.t("global.buttons.cancel")}
+                      onPress={onCancel}
+                      testID="loadingSpinnerOverlayCancelButton"
+                      label={I18n.t("global.buttons.cancel")}
+                    />
+                  ) : (
                     <ButtonDefaultOpacity
                       onPress={onCancel}
                       cancel={true}
                       testID={"loadingSpinnerOverlayCancelButton"}
                     >
-                      <NBButtonText>
-                        {I18n.t("global.buttons.cancel")}
-                      </NBButtonText>
+                      <Body>{I18n.t("global.buttons.cancel")}</Body>
                     </ButtonDefaultOpacity>
-                  </View>
-                )
-              }
-            />
-          )
-        }
-      >
-        {children}
-      </Overlay>
-    );
-  }
-}
+                  )}
+                </View>
+              )
+            }
+          />
+        )
+      }
+    >
+      {children}
+    </Overlay>
+  );
+};
 
 export default LoadingSpinnerOverlay;
@@ -0,0 +1,77 @@
+import * as React from "react";
+import { Text } from "react-native";
+import { render } from "@testing-library/react-native";
+import configureMockStore from "redux-mock-store";
+import { Provider } from "react-redux";
+import { appReducer } from "../../store/reducers";
+import { applicationChangeState } from "../../store/actions/application";
+import { preferencesDesignSystemSetEnabled } from "../../store/actions/persistedPreferences";
+import { GlobalState } from "../../store/reducers/types";
+import LoadingSpinnerOverlay from "../LoadingSpinnerOverlay";
+
+describe("LoadingSpinnerOverlay", () => {
+  it("Should match base no-loading snapshot", () => {
+    const component = renderComponent(false);
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it("Should match base loading snapshot", () => {
+    const component = renderComponent(true);
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it("Should match all-properties and not-loading snapshot", () => {
+    const child = <Text>This is a child</Text>;
+    const loadingCaption = "This is the loading caption";
+    const loadingOpacity = 0.65;
+    const onCancelCallback = () => undefined;
+    const component = renderComponent(
+      false,
+      child,
+      loadingCaption,
+      loadingOpacity,
+      onCancelCallback
+    );
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it("Should match all-properties and loading snapshot", () => {
+    const child = <Text>This is a child</Text>;
+    const loadingCaption = "This is the loading caption";
+    const loadingOpacity = 0.65;
+    const onCancelCallback = () => undefined;
+    const component = renderComponent(
+      true,
+      child,
+      loadingCaption,
+      loadingOpacity,
+      onCancelCallback
+    );
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+});
+
+const renderComponent = (
+  isLoading: boolean,
+  children?: React.ReactNode,
+  loadingCaption?: string,
+  loadingOpacity?: number,
+  onCancel?: () => void
+) => {
+  const initialState = appReducer(undefined, applicationChangeState("active"));
+  const dsState = appReducer(
+    initialState,
+    preferencesDesignSystemSetEnabled({ isDesignSystemEnabled: true })
+  );
+  const mockStore = configureMockStore<GlobalState>();
+  const store: ReturnType<typeof mockStore> = mockStore(dsState);
+  return render(
+    <Provider store={store}>
+      <LoadingSpinnerOverlay
+        isLoading={isLoading}
+        loadingCaption={loadingCaption}
+        loadingOpacity={loadingOpacity}
+        onCancel={onCancel}
+      >
+        {children}
+      </LoadingSpinnerOverlay>
+    </Provider>
+  );
+};
@@ -1,11 +1,28 @@
 import { render } from "@testing-library/react-native";
+import { Provider } from "react-redux";
+import configureMockStore from "redux-mock-store";
 import React from "react";
 import WebviewComponent from "../WebviewComponent";
+import { appReducer } from "../../store/reducers";
+import { applicationChangeState } from "../../store/actions/application";
+import { GlobalState } from "../../store/reducers/types";
 
 describe("WebviewComponent tests", () => {
   it("snapshot for component", () => {
+    const globalState = appReducer(undefined, applicationChangeState("active"));
+    const enrichedState = {
+      ...globalState,
+      persistedPreferences: {
+        ...globalState.persistedPreferences,
+        isDesignSystemEnabled: false
+      }
+    };
+    const mockStore = configureMockStore<GlobalState>();
+    const store: ReturnType<typeof mockStore> = mockStore(enrichedState);
     const component = render(
-      <WebviewComponent source={{ uri: "https://google.com" }} />
+      <Provider store={store}>
+        <WebviewComponent source={{ uri: "https://google.com" }} />
+      </Provider>
     );
     expect(component).toMatchSnapshot();
   });