Feat/testing

.gitignore

@@ -36,5 +36,3 @@ yarn-error.log*
 next-env.d.ts
 
 .vscode
-
-firebase.config.ts

firebase.config.ts

@@ -0,0 +1,11 @@
+const firebaseKeys = {
+  NEXT_PUBLIC_FIREBASE_API_KEY: 'test',
+  NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN: 'test',
+  NEXT_PUBLIC_FIREBASE_PROJECT_ID: 'test',
+  NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET: 'test',
+  NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID: 'test',
+  NEXT_PUBLIC_FIREBASE_APP_ID: 'test',
+  NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID: 'test',
+};
+
+export default firebaseKeys;

jest.config.mjs

@@ -11,6 +11,11 @@ const config = {
   coverageReporters: ['text', 'lcov', 'clover'],
   collectCoverageFrom: ['src/**/*.ts', 'src/**/*.tsx'],
   coverageDirectory: path.join(process.cwd(), 'coverage'),
+  coveragePathIgnorePatterns: [
+    'src/test/setup.ts',
+    'lib/store',
+    'src/pages/_document.tsx',
+  ],
 };
 
 export default createJestConfig(config);

src/components/EndpointEditor/EndpointEditor.tsx

@@ -14,7 +14,10 @@ const EndpointEditor = () => {
   const text = textContent[lang as keyof TextContentType].dashboard;
 
   return (
-    <div className={"flex flex-col items-start justify-between w-full"} data-testid="endpoint">
+    <div
+      className={'flex flex-col items-start justify-between w-full'}
+      data-testid="endpoint"
+    >
       {!isEditing ? (
         <div className="pl-2 my-5  h-[40px] text-gray-300 overflow-hidden whitespace-nowrap overflow-ellipsis">
           {inputValue}
@@ -24,9 +27,14 @@ const EndpointEditor = () => {
           className="pl-2 my-5 w-full  h-[40px] bg-white rounded text-black outline-none"
           value={inputValue}
           onChange={(e) => dispatch(setUrl(e.target.value))}
+          data-testid="input"
         />
       )}
-      <Button variant="secondary" onClick={() => setEditing(!isEditing)} data-testid="button">
+      <Button
+        variant="secondary"
+        onClick={() => setEditing(!isEditing)}
+        data-testid="button"
+      >
         {isEditing ? text.url.save : text.url.edit}
       </Button>
     </div>

src/components/Header/Header.tsx

@@ -10,8 +10,8 @@ import { textContent, TextContentType } from '@/lib/langText';
 import Image from 'next/image';
 import homeSvg from '@/images/home.svg';
 import exitSvg from '@/images/exit.svg';
-import signIn from '@/images/signin.svg'
-import signUp from '@/images/signup.svg'
+import signIn from '@/images/signin.svg';
+import signUp from '@/images/signup.svg';
 
 const Header = () => {
   const [isScrolled, setIsScrolled] = useState(false);

src/components/JSONViewerButtons/JSONViewerButtons.tsx

@@ -1,7 +1,7 @@
 import playImage from '@/images/play.svg';
 import Image from 'next/image';
 import broomImage from '@/images/broom.svg';
-import { useDispatch,  useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { fetchData } from '@/lib/store/slices';
 import { AppDispatch } from '@/lib/store/store';
 import { prettifyText } from '@/lib/utils';

src/components/QueryEditor/index.tsx

@@ -6,23 +6,23 @@ import { setQuery } from '@/lib/store/slices';
 import { dracula } from '@uiw/codemirror-theme-dracula';
 
 const QueryEditor = () => {
-    const query = useSelector((state: RootState) => state.data.query);
-    const dispatch = useDispatch<AppDispatch>();
+  const query = useSelector((state: RootState) => state.data.query);
+  const dispatch = useDispatch<AppDispatch>();
 
-    const editorChangeHandler = (value: string) => {
-        dispatch(setQuery(value));
-      };
+  const editorChangeHandler = (value: string) => {
+    dispatch(setQuery(value));
+  };
   return (
     <CodeMirror
-            value={query}
-            theme={dracula}
-            extensions={[javascript({ jsx: true })]}
-            width="100%"
-            height="100%"
-            className="max-h-[100%] w-full  min-h-[100%] h-full"
-            onChange={editorChangeHandler}
-          />
-  )
-}
+      value={query}
+      theme={dracula}
+      extensions={[javascript({ jsx: true })]}
+      width="100%"
+      height="100%"
+      className="max-h-[100%] w-full  min-h-[100%] h-full"
+      onChange={editorChangeHandler}
+    />
+  );
+};
 
-export default QueryEditor
+export default QueryEditor;

src/components/ResponseViewier/index.tsx

@@ -5,25 +5,25 @@ import CodeMirror from '@uiw/react-codemirror';
 import { useSelector } from 'react-redux';
 
 const ResponseViewier = () => {
-    const data = useSelector((state: RootState) => state.data.data);
-    const error = useSelector((state: RootState) => state.data.error);
+  const data = useSelector((state: RootState) => state.data.data);
+  const error = useSelector((state: RootState) => state.data.error);
   return (
     <CodeMirror
-          value={
-            JSON.stringify(data, null, 2) !== '{}'
-              ? JSON.stringify(data, null, 2)
-              : String(error) === null
-                ? ''
-                : String(error)
-          }
-          theme={dracula}
-          extensions={[javascript({ jsx: true })]}
-          width="100%"
-          height="100%"
-          className="max-h-[100%] w-full min-w-[100%] min-h-[100%] h-full"
-          readOnly
-        />
-  )
-}
+      value={
+        JSON.stringify(data, null, 2) !== '{}'
+          ? JSON.stringify(data, null, 2)
+          : String(error) === null
+            ? ''
+            : String(error)
+      }
+      theme={dracula}
+      extensions={[javascript({ jsx: true })]}
+      width="100%"
+      height="100%"
+      className="max-h-[100%] w-full min-w-[100%] min-h-[100%] h-full"
+      readOnly
+    />
+  );
+};
 
-export default ResponseViewier
+export default ResponseViewier;

src/lib/store/slices.ts

@@ -156,7 +156,6 @@ const dataSlice = createSlice({
     });
 
     builder.addCase(fetchSchema.rejected, (state) => {
-
       state.schemaLoading = false;
     });
   },

src/pages/layout.tsx

@@ -18,7 +18,7 @@ const Layout = ({ children }: { children: ReactNode }) => {
   }, []);
 
   return (
-    <div className='flex flex-col justify-between h-full'>
+    <div className="flex flex-col justify-between h-full">
       <Head>
         <title>GraphQl Sandbox</title>
       </Head>