start tests for components with FuelTypeLive

atoms/controls.tsx

@@ -0,0 +1,7 @@
+import { RefreshControl } from "react-native";
+
+type RefreshControlProps = React.ComponentProps<typeof RefreshControl>;
+
+export const Refresh = (props: RefreshControlProps) => {
+  return <RefreshControl {...props} />;
+};

components/FuelTypeLive.loaded.test.tsx

@@ -0,0 +1,73 @@
+import React from "react";
+import { render} from "@testing-library/react-native";
+import { FuelTypeLive as Comp } from "./FuelTypeLive";
+import { NavigationContainer } from "@react-navigation/native";
+import { FuelTypeLevel } from "../common/types";
+
+// local mocks
+const mockListItem = jest.fn();
+const mockIncompleteUnknownCategories = jest.fn();
+const mockDate = new Date(Date.parse("2023-01-01T00:45:13"));
+const mockRefetch = jest.fn();
+
+const mockSetNavOptions = jest.fn();
+const mockNav = {
+  setOptions: (x: any) => mockSetNavOptions(x),
+};
+
+// mock ../services/state/elexon-insights-api.hooks
+jest.mock("../services/state/elexon-insights-api.hooks", () => ({
+  useFuelTypeLiveQuery: () => ({
+    data: [
+      {
+        name: "coal",
+        level: 1,
+      },
+    ] as FuelTypeLevel[],
+    isLoading: false,
+    now: mockDate,
+    refetch: mockRefetch,
+  }),
+}));
+
+// mock IncompleteUnknownCategories from ../atoms/cards
+jest.mock("../atoms/cards", () => ({
+  IncompleteUnknownCategories: () => mockIncompleteUnknownCategories(),
+}));
+
+// mock ../atoms/list-items
+jest.mock("../atoms/list-items", () => ({
+  FuelTypeLive: (x: any) => mockListItem(x),
+}));
+
+//mock expo-router
+jest.mock("expo-router", () => ({
+  useNavigation: () => mockNav,
+}));
+
+describe("components/FuelTypeLive", () => {
+  beforeEach(() => {
+    mockListItem.mockClear();
+    mockIncompleteUnknownCategories.mockClear();
+    render(
+      <NavigationContainer>
+        <Comp />
+      </NavigationContainer>
+    );
+  });
+
+  test("expect mockListItem to be called with name coal and level 1 ", () => {
+    expect(mockListItem).toHaveBeenCalledWith({ name: "coal", level: 1 });
+  });
+
+  test("expect mockIncompleteUnknownCategories to be called and therefore rendered", () => {
+    expect(mockIncompleteUnknownCategories).toHaveBeenCalled();
+  });
+
+  test('expect mockSetNavOptions to be called with title "National Grid at: 00:00:00"', () => {
+    expect(mockSetNavOptions).toHaveBeenCalledWith({
+      title: "National Grid at: 00:45:13",
+    });
+  })
+
+});

components/FuelTypeLive.loading.test.tsx

@@ -0,0 +1,81 @@
+import React from "react";
+import { render, screen } from "@testing-library/react-native";
+import { FuelTypeLive as Comp } from "./FuelTypeLive";
+import { NavigationContainer } from "@react-navigation/native";
+import { FuelTypeLevel } from "../common/types";
+
+// local mocks
+const mockListItem = jest.fn();
+const mockIncompleteUnknownCategories = jest.fn();
+const mockRefetch = jest.fn();
+const mockRefresh = jest.fn();
+
+const mockSetNavOptions = jest.fn();
+const mockNav = {
+  setOptions: (x: any) => mockSetNavOptions(x),
+};
+
+// mock ../services/state/elexon-insights-api.hooks
+jest.mock("../services/state/elexon-insights-api.hooks", () => ({
+  useFuelTypeLiveQuery: () => ({
+    data: null,
+    isLoading: true,
+    now: null,
+    refetch: mockRefetch
+  }),
+}));
+
+// mock IncompleteUnknownCategories from ../atoms/cards
+jest.mock("../atoms/cards", () => ({
+  IncompleteUnknownCategories: () => mockIncompleteUnknownCategories(),
+}));
+
+// mock ../atoms/list-items
+jest.mock("../atoms/list-items", () => ({
+  FuelTypeLive: (x: any) => mockListItem(x),
+}));
+
+//mock expo-router
+jest.mock("expo-router", () => ({
+  useNavigation: () => mockNav,
+}));
+
+// mock atoms/controls/refresh
+jest.mock("../atoms/controls", () => ({
+  Refresh: (props: any) => mockRefresh(props)
+}));
+
+describe("components/FuelTypeLive", () => {
+  beforeEach(() => {
+    mockRefresh.mockClear();
+    mockListItem.mockClear();
+    mockIncompleteUnknownCategories.mockClear();
+    render(
+      <NavigationContainer>
+        <Comp />
+      </NavigationContainer>
+    );
+  });
+  test('expect refresh control to have been called with props refreshing true and a function on onRefresh', () => {
+    expect(mockRefresh).toHaveBeenCalledWith({
+      refreshing: true,
+      onRefresh: expect.any(Function),
+    })
+  })
+
+  test("expect mockListItem to not be called  ", () => {
+    expect(mockListItem).toHaveBeenCalledTimes(0);
+  });
+
+  test("expect mockIncompleteUnknownCategories to have been called and therefore rendered", () => {
+    expect(mockIncompleteUnknownCategories).toHaveBeenCalledTimes(1);
+  });
+
+  test('expect mockSetNavOptions to be called with title "National Grid at: 00:00:00"', () => {
+    expect(mockSetNavOptions).toHaveBeenCalledWith({
+      title: "Loading...",
+    });
+  })
+
+
+});

components/FuelTypeLive.tsx

@@ -1,10 +1,11 @@
 import React from "react";
-import { useFuelTypeLiveQuery } from "../services/state/elexon-insights-api.hooks";
 import { FlashList } from "@shopify/flash-list";
 import { useNavigation } from "expo-router";
-import * as at from "../atoms";
+import { useFuelTypeLiveQuery } from "../services/state/elexon-insights-api.hooks";
 import { RefreshControl } from "react-native-gesture-handler";
 import { IncompleteUnknownCategories } from "../atoms/cards";
+import { FuelTypeLive as ListItem } from "../atoms/list-items";
+import { Refresh } from "../atoms/controls";
 
 export const FuelTypeLive = () => {
   const nav = useNavigation();
@@ -18,14 +19,13 @@ export const FuelTypeLive = () => {
   }, [now]);
   return (
     <FlashList
+      testID='fuel-type-live-list'
       ListFooterComponent={IncompleteUnknownCategories}
-      refreshControl={
-        <RefreshControl refreshing={isLoading} onRefresh={refetch} />
-      }
+      refreshControl={<Refresh refreshing={isLoading} onRefresh={refetch} />}
       data={data}
       estimatedItemSize={1000}
       renderItem={({ item }) => (
-        <at.listItems.FuelTypeLive name={item.name} level={item.level} />
+        <ListItem name={item.name} level={item.level} />
       )}
     />
   );

components/UnitGroupLive.tsx

@@ -15,8 +15,7 @@ type UnitGroupLiveProps = {
 };
 export const UnitGroupLive: React.FC<UnitGroupLiveProps> = ({ ug }) => {
   log.debug(`UnitGroupLive ${ug.details.name}`);
-  const query = useUnitGroupLiveQuery(ug);
-
+  const query = useUnitGroupLiveQuery(ug)
   return (
     <>
       <FlashList

components/UnitGroupsLive.tsx

@@ -9,6 +9,7 @@ import { SearchUnitGroups } from "../atoms/inputs";
 import log from "../services/log";
 import { StyleSheet } from "react-native";
 import { urls } from "../services/nav";
+import { Refresh } from "../atoms/controls";
 
 export const UnitGroupsLive = () => {
   log.debug(`UnitGroupsLive`);
@@ -38,6 +39,7 @@ export const UnitGroupLiveWithSearch: React.FC<
 > = ({ search }) => {
   const router = useRouter();
   const query = useUnitGroupsLiveQuery();
+
   const { data, now, isLoading, refetch } = query;
   const filteredData = useMemo(() => {
     if (!data) return data;
@@ -61,7 +63,7 @@ export const UnitGroupLiveWithSearch: React.FC<
   return (
     <FlashList
       refreshControl={
-        <RefreshControl refreshing={isLoading} onRefresh={refetch} />
+        <Refresh refreshing={isLoading} onRefresh={refetch} />
       }
       ListFooterComponent={IncompleteUnknownCategories}
       data={filteredData}

jest.config.js

@@ -4,5 +4,8 @@ module.exports = {
   testEnvironment: 'jsdom',
   transformIgnorePatterns: [
     "node_modules/(?!(jest-)?@react-native|react-native|react-native-elements|@rneui|@expo|expo-font|expo-modules-core|expo-asset|expo/*)"
-  ]
+  ],
+  setupFiles: [
+    "<rootDir>/jest/setup.js"
+  ],
 };

jest/setup.js

@@ -0,0 +1,18 @@
+// include this line for mocking react-native-gesture-handler
+import 'react-native-gesture-handler/jestSetup';
+
+// include this section and the NativeAnimatedHelper section for mocking react-native-reanimated
+jest.mock('react-native-reanimated', () => {
+  const Reanimated = require('react-native-reanimated/mock');
+
+  // The mock for `call` immediately calls the callback which is incorrect
+  // So we override it with a no-op
+  Reanimated.default.call = () => {};
+
+  return Reanimated;
+});
+
+// Silence the warning: Animated: `useNativeDriver` is not supported because the native animated module is missing
+jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');
+
+require("@shopify/flash-list/jestSetup");

package.json

@@ -43,6 +43,7 @@
     "react-native": "0.72.6",
     "react-native-gesture-handler": "~2.12.0",
     "react-native-maps": "1.7.1",
+    "react-native-reanimated": "^3.6.1",
     "react-native-safe-area-context": "4.6.3",
     "react-native-screens": "~3.22.0",
     "react-native-svg": "13.9.0",

yarn.lock

@@ -804,6 +804,13 @@
     "@babel/helper-plugin-utils" "^7.22.5"
     "@babel/plugin-syntax-numeric-separator" "^7.10.4"
 
+"@babel/plugin-transform-object-assign@^7.16.7":
+  version "7.23.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-assign/-/plugin-transform-object-assign-7.23.3.tgz#64177e8cf943460c7f0e1c410277546804f59625"
+  integrity sha512-TPJ6O7gVC2rlQH2hvQGRH273G1xdoloCj9Pc07Q7JbIZYDi+Sv5gaE2fu+r5E7qK4zyt6vj0FbZaZTRU5C3OMA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+
 "@babel/plugin-transform-object-rest-spread@^7.23.4":
   version "7.23.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.23.4.tgz#2b9c2d26bf62710460bdc0d1730d4f1048361b83"
@@ -1112,7 +1119,7 @@
     "@babel/types" "^7.4.4"
     esutils "^2.0.2"
 
-"@babel/preset-typescript@^7.13.0":
+"@babel/preset-typescript@^7.13.0", "@babel/preset-typescript@^7.16.7":
   version "7.23.3"
   resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.23.3.tgz#14534b34ed5b6d435aa05f1ae1c5e7adcc01d913"
   integrity sha512-17oIGVlqz6CchO9RFYn5U6ZpWRZIngayYCtrPRSgANSwC2V1Jb+iP74nVxzzXJte8b8BYxrL1yY96xfhTBrNNQ==
@@ -9092,6 +9099,16 @@ react-native-ratings@^8.1.0:
   dependencies:
     lodash "^4.17.15"
 
+react-native-reanimated@^3.6.1:
+  version "3.6.1"
+  resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-3.6.1.tgz#5add41efafac6d0befd9786e752e7f26dbe903b7"
+  integrity sha512-F4vG9Yf9PKmE3GaWtVGUpzj3SM6YY2cx1yRHCwiMd1uY7W0gU017LfcVUorboJnj0y5QZqEriEK1Usq2Y8YZqg==
+  dependencies:
+    "@babel/plugin-transform-object-assign" "^7.16.7"
+    "@babel/preset-typescript" "^7.16.7"
+    convert-source-map "^2.0.0"
+    invariant "^2.2.4"
+
 [email protected]:
   version "4.6.3"
   resolved "https://registry.yarnpkg.com/react-native-safe-area-context/-/react-native-safe-area-context-4.6.3.tgz#f06cfea05b1c4b018aa9758667a109f619c62b55"