const Button = {
  // You can insert dark theme mode here
  // mode(first, second) -> first is for light theme, second is for dark theme
  baseStyle: (props: any) => {
    return {
      color: themeTools.mode('red.300', 'blue.300')(props),
    };
  },
  // You can also define or modify existing variant of component here
  variants: {
    solid: (props: any) => {
      return {
        _text: {
          fontFamily: props.fontFamily,
          fontWeight: props.fontWeight,
        },
        ...props,
      };
    },
    outlineLime: (props: any) => {
      return {
        borderWidth: '1',
        borderColor: 'current.100',
        _text: {
          color: 'current.100',
          fontWeight: props.fontWeight,
          fontFamily: props.fontFamily,
        },
        ...props,
      };
    },
  },
};
// You need to insert this object to the native-base's extendTheme function

import { createApi } from '@reduxjs/toolkit/dist/query/react';
import { functionsBaseQuery } from '../baseQuery';

export interface IProductsDetail {
  id: number;
  title: string;
  description: string;
  price: number;
  discountPercentage: number;
  rating: number;
  stock: number;
  brand: string;
  category: string;
  thumbnail: string;
  images: string[];
}

export interface IProducts {
  products: IProductsDetail[];
  total: number;
  skip: number;
  limit: number;
}

const reducerPath = 'productsAPI';

export const productsAPI = createApi({
  reducerPath: reducerPath,
  baseQuery: functionsBaseQuery(),
  tagTypes: ['Products'], //Provide tags that are available for this api
  keepUnusedDataFor: process.env.NODE_ENV !== 'test' ? 60 : 0,
  endpoints: (builder) => ({
    getProduct: builder.query<IProducts, string>({ //Rule of thumb, query is used for GET method
      query: (query) => `/products/search?q=${query}`,
      providesTags: ['Products'], //Provide the corresponding tags from tagTypes
    }),
    refetchProducts: builder.mutation<null, void>({ //Rule of thumb, mutation is used for POST, PATCH, DELETE method
      // The query is not relevant here, so a `null` returning `queryFn` is used
      queryFn: () => ({ data: null }),
      // This mutation takes advantage of tag invalidation behaviour to trigger
      // any queries that provide the 'Post' or 'User' tags to re-fetch if the queries
      // are currently subscribed to the cached data.
      // Meaning if we call this, it will call getProduct to update the cached data
      invalidatesTags: ['Products'],
    }),
  }),
});

export const { useGetProductQuery } = productsAPI;
export const productsQueryReducer = { [reducerPath]: productsAPI.reducer };

import { AllTheProviders } from '../../__mocks__/utils/wrapper';
import { renderHook } from '@testing-library/react-hooks/native';
import { useGetProductQuery } from '../../services';
import { products } from '../../__mocks__/testData';

const updateTimeout = 5000;

describe('FOProductsSection screen', () => {
  it('handles good response', async () => {
    fetchMock.mockResponse(JSON.stringify({ data: products }));
    const { result, waitForNextUpdate } = renderHook(() => useGetProductQuery(undefined), {
      wrapper: AllTheProviders,
    });
    const initialResponse = result.current;
    expect(initialResponse.data).toBeUndefined();
    expect(initialResponse.isLoading).toBe(true);
    await waitForNextUpdate({ timeout: updateTimeout });

    const nextResponse = result.current;
    expect(nextResponse.data).toBeDefined();
    expect(nextResponse.isLoading).toBe(false);
    expect(nextResponse.isSuccess).toBe(true);
  });

  it('handles error response', async () => {
    fetchMock.mockReject(new Error('Internal Server Error'));
    const { result, waitForNextUpdate } = renderHook(() => useGetProductQuery(undefined), {
      wrapper: AllTheProviders,
    });
    const initialResponse = result.current;
    expect(initialResponse.data).toBeUndefined();
    expect(initialResponse.isLoading).toBe(true);

    await waitForNextUpdate({ timeout: updateTimeout });

    const nextResponse = result.current;
    expect(nextResponse.data).toBeUndefined();
    expect(nextResponse.isLoading).toBe(false);
    expect(nextResponse.isError).toBe(true);
  });
});

import React from 'react';
import * as hooks from '../../../services/products';
import FOProductsSection from '../FOProductsSection';
import { render } from '../../../__mocks__/utils/wrapper';
import { products } from '../../../__mocks__/testData';

describe('FOProductsSection screen', () => {
  it('can shows 4 data correctly', async () => {
    jest.spyOn(hooks, 'useGetProductQuery').mockReturnValue({
      data: products,
      isError: false,
      isLoading: false,
      refetch: function (): void {
        throw new Error('Function not implemented.');
      },
    });
    const { findAllByTestId } = render(<FOProductsSection query={'Apple'} />);
    expect((await findAllByTestId('FMProductsCard')).length).toBe(4);
  });
});