Add a form to demonstrate getDispatchedProductByDate query

Author: yogeshnikam671

package-lock.json

@@ -51,7 +51,7 @@
     "autoprefixer": "^10.4.19",
     "postcss": "^8.4.39",
     "specmatic": "^2.0.1",
-    "specmatic-beta": "github:znsio/specmatic-node-beta#2.0.3",
+    "specmatic-beta": "github:znsio/specmatic-node-beta#2.0.4",
     "tailwindcss": "^3.4.3"
   }
 }

package.json

@@ -1,5 +1,5 @@
 sources:
   - provider: git
     repository: https://github.com/znsio/specmatic-order-contracts.git
-    stub:
-      - io/specmatic/examples/store/graphql/products_bff.graphqls
+    consumes:
+      - io/specmatic/examples/store/graphql/products_bff.graphqls

specmatic.yml

@@ -3,6 +3,7 @@ import FindAvailableProductForm from './components/FindAvailableProductForm';
 import ProductForm from './components/ProductForm';
 import { ToastContainer, toast } from 'react-toastify';
 import { useEffect } from 'react';
+import GetDispatchedProductByDateForm from './components/GetDispatchedProductByDateForm';
 
 function App() {
 
@@ -26,6 +27,8 @@ function App() {
       <br/>
       <FindAvailableProductForm/>
       <br/>
+      <GetDispatchedProductByDateForm/>
+      <br/>
       <ToastContainer />
     </div>
   );

src/App.js

@@ -6,6 +6,7 @@ import { ApolloProvider } from "@apollo/client";
 import client from "../apolloClient";
 import FindAvailableProductForm from "../components/FindAvailableProductForm";
 import { startGraphQlStub, stopGraphQlStub } from "specmatic";
+import GetDispatchedProductByDateForm from "../components/GetDispatchedProductByDateForm";
 
 global.setImmediate = global.setImmediate || ((fn, ...args) => global.setTimeout(fn, 0, ...args));
 let stub;
@@ -72,6 +73,21 @@ describe("App component tests", () => {
       expect(screen.getAllByTestId("product").length).toBeGreaterThan(0);
     });
   });
+
+  test("should fetch dispatched product by date", async () => {
+    render(
+      <ApolloProvider client={client}>
+        <GetDispatchedProductByDateForm />
+      </ApolloProvider>
+    );
+
+    fireEvent.change(screen.getByTestId("date"), { target: { value: "2020-12-12" } });
+    fireEvent.click(screen.getByTestId("submit"));
+
+    await waitFor(() => {
+      expect(screen.getByText("12/12/2020")).toBeInTheDocument(); // Adjust the date format if needed
+    });
+});
 });
 
 afterAll(async () => {

src/__test__/App.test.js

@@ -0,0 +1,88 @@
+import React, { useEffect, useState } from 'react';
+import { useLazyQuery, gql } from '@apollo/client';
+import { toast } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+
+const GetDispatchedProductByDateForm = () => {
+  const [date, setDate] = useState('');
+  const [dispatchedProduct, setDispatchedProduct] = useState(null);
+
+  const formatDateString = (dateString) => {
+    return dateString.replace(/-/g, '/'); // Replace hyphens with slashes
+  };
+  
+  const GET_DISPATCHED_PRODUCT_BY_DATE = gql`
+    query {
+      getDispatchedProductByDate(date: "${formatDateString(date)}") {
+        id
+        dispatchDate
+      }
+    }
+  `;
+
+  const [getDispatchedProductByDate, { loading }] = useLazyQuery(GET_DISPATCHED_PRODUCT_BY_DATE, {
+    fetchPolicy: 'network-only',
+    onCompleted: (data) => {
+      setDispatchedProduct(data.getDispatchedProductByDate);
+    },
+    onError: () => {
+      setDispatchedProduct(null);
+      toast.error('Error fetching dispatched product');
+    },
+  });
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    if (!Date.parse(date)) {
+      toast.dismiss();
+      toast.error('Please enter a valid date');
+      return;
+    }
+    
+    getDispatchedProductByDate({ variables: { date } });
+  };
+
+  return (
+    <div className="max-w-md mx-auto p-8 bg-white shadow-lg rounded-lg">
+      <h1 className="text-2xl font-bold mb-4">Get Dispatched Product by Date</h1>
+      <form onSubmit={handleSubmit}>
+        <div className="mb-4">
+          <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="date">
+            Date
+          </label>
+          <input
+            type="date"
+            id="date"
+            data-testid="date"
+            className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+            value={date}
+            onChange={(e) => setDate(e.target.value)}
+          />
+        </div>
+        <div className="flex items-center justify-between">
+          <button
+            type="submit"
+            data-testid="submit"
+            className={`bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline ${loading && 'opacity-50 cursor-not-allowed'}`}
+            disabled={loading}
+          >
+            {loading ? 'Searching...' : 'Search'}
+          </button>
+        </div>
+      </form>
+      {dispatchedProduct && (
+        <div className="mt-8">
+          <h2 className="text-xl font-bold mb-4">Dispatched Product</h2>
+          <div className="p-4 border rounded-lg bg-gray-50 shadow-sm">
+            <p><strong>ID:</strong> {dispatchedProduct.id}</p>
+            <p><strong>Dispatch Date:</strong> {new Date(dispatchedProduct.dispatchDate).toLocaleDateString()}</p>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default GetDispatchedProductByDateForm;
+