Blocking behaviour while typing fixed + added spinner (#6)

* Some README tweaks

* Next's staticProps blocking beheaviour while typing fixed + Added spinner

* Testing for previous fix

* Faker deprecational update

tests/components/CustomError.test.tsx

@@ -2,7 +2,7 @@ import { render, screen } from "../reactUtils";
 import faker from "faker";
 import CustomError from "../../components/CustomError";
 
-const code = faker.random.number({ min: 400, max: 599 });
+const code = faker.datatype.number({ min: 400, max: 599 });
 const text = faker.random.words();
 
 it("loads the layout correctly", async () => {
@@ -16,7 +16,7 @@ it("loads the layout correctly", async () => {
 });
 
 it("renders the correct status code & text", () => {
-    const code = faker.random.number({ min: 400, max: 599 });
+    const code = faker.datatype.number({ min: 400, max: 599 });
     render(<CustomError statusCode={code} statusText={text} />);
 
     expect(screen.getByText(code)).toBeVisible();

tests/pages/[[...slug]].test.tsx

@@ -61,7 +61,7 @@ describe("getStaticProps", () => {
 
 describe("Page", () => {
     const translationRes = faker.random.words();
-    const randomAudio = Array.from({ length: 10 }, () => faker.random.number(100));
+    const randomAudio = Array.from({ length: 10 }, () => faker.datatype.number(100));
     const audio = {
         source: randomAudio,
         target: randomAudio
@@ -84,11 +84,17 @@ describe("Page", () => {
         userEvent.type(query, faker.random.words());
 
         await waitFor(
-            () => expect(Router.push).not.toHaveBeenCalled(),
+            () => {
+                expect(Router.push).not.toHaveBeenCalled();
+                expect(screen.queryByText(/loading translation/i)).not.toBeInTheDocument();
+            },
             { timeout: 250 }
         );
         await waitFor(
-            () => expect(Router.push).toHaveBeenCalledTimes(1),
+            () => {
+                expect(Router.push).toHaveBeenCalledTimes(1);
+                expect(screen.getByText(/loading translation/i)).toBeInTheDocument();
+            },
             { timeout: 2500 }
         );
     });

tests/utils/reducer.test.ts

@@ -21,7 +21,8 @@ it("changes all fields", () => {
         target: faker.random.locale(),
         query,
         delayedQuery: query,
-        translation: faker.random.words()
+        translation: faker.random.words(),
+        isLoading: faker.datatype.boolean()
     };
 
     const res = langReducer(initialState, {
@@ -46,7 +47,8 @@ it("switches the languages & the translations", () => {
         target: state.source,
         query: state.translation,
         delayedQuery: state.translation,
-        translation: ""
+        translation: "",
+        isLoading: initialState.isLoading
     });
 });
 

tests/utils/translate.test.ts

@@ -20,7 +20,7 @@ describe("googleScrape", () => {
     });
 
     it("returns correct message on request error", async () => {
-        const status = faker.random.number({ min: 400, max: 499 });
+        const status = faker.datatype.number({ min: 400, max: 499 });
         resolveFetchWith({ status });
 
         const res = await googleScrape(source, target, query);
@@ -61,7 +61,7 @@ describe("extractSlug", () => {
     it("returns empty object on 0 or >4 params", () => {
         expect(extractSlug([])).toStrictEqual({});
 
-        const length = faker.random.number({ min: 4, max: 50 });
+        const length = faker.datatype.number({ min: 4, max: 50 });
         const array = Array(length).fill("");
         expect(extractSlug(array)).toStrictEqual({});
     });
@@ -74,7 +74,7 @@ describe("textToSpeechScrape", () => {
     });
 
     it("returns 'null' on request error", async () => {
-        const status = faker.random.number({ min: 400, max: 499 });
+        const status = faker.datatype.number({ min: 400, max: 499 });
         resolveFetchWith({ status });
         expect(await textToSpeechScrape(target, query)).toBeNull();
     });