wrote test to test async change time

Author: kucher-mx

__tests__/__snapshots__/react-pure-time.tests.js.snap renamed to __tests__/__snapshots__/react-pure-time.test.tsx.snap

@@ -143,3 +143,19 @@ exports[`Time component behavior Renders right with string 1990-06-16 13:22:17 1
   16.06.1990 13:22:17
 </span>
 `;
+
+exports[`test async behavior of the Time component 1 minute change to hour 1`] = `
+<span
+  className=""
+>
+   1 hour ago
+</span>
+`;
+
+exports[`test async behavior of the Time component Render Time component with relative time 1`] = `
+<span
+  className=""
+>
+   45 minutes ago
+</span>
+`;

__tests__/helpers/data-mocked.const.ts

@@ -0,0 +1,37 @@
+it("", () => {
+  expect(1).toBe(1);
+});
+
+const monthNames = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December",
+];
+
+const CurrentTimeStamp = new Date();
+const TimeStampHour = new Date(CurrentTimeStamp);
+TimeStampHour.setHours(CurrentTimeStamp.getHours() - 1);
+TimeStampHour.setMinutes(Math.abs(CurrentTimeStamp.getMinutes() + 1));
+
+const TimeStampMinutes = new Date(CurrentTimeStamp);
+TimeStampMinutes.setHours(CurrentTimeStamp.getHours() - 1);
+TimeStampMinutes.setMinutes(Math.abs(CurrentTimeStamp.getMinutes() + 15));
+
+const mockedStringHour = `${
+  monthNames[TimeStampHour.getMonth()]
+} ${TimeStampHour.getDate()}, ${TimeStampHour.getFullYear()}, ${TimeStampHour.getHours()}:${TimeStampHour.getMinutes()}`;
+
+const mockedStringMinutes = `${
+  monthNames[TimeStampMinutes.getMonth()]
+} ${TimeStampMinutes.getDate()}, ${TimeStampMinutes.getFullYear()}, ${TimeStampMinutes.getHours()}:${TimeStampMinutes.getMinutes()}`;
+
+export { mockedStringHour, mockedStringMinutes };

__tests__/react-pure-time.tests.js renamed to __tests__/react-pure-time.test.tsx

@@ -1,7 +1,42 @@
-/* global describe expect it */
-import React from "react";
-import Time from "../src/react-pure-time.tsx";
-import renderer from "react-test-renderer";
+/**
+ * @jest-environment jsdom
+ */
+
+import * as React from "react";
+import * as renderer from "react-test-renderer";
+import Time from "../src/react-pure-time";
+
+import {
+  mockedStringHour,
+  mockedStringMinutes,
+} from "./helpers/data-mocked.const";
+
+jest.setTimeout(100000);
+describe("test async behavior of the Time component", () => {
+  it("Render Time component with relative time", (done) => {
+    const TimeComponent = renderer.create(
+      <Time value={mockedStringMinutes} relativeTime />
+    );
+    renderer.act(() => {
+      setTimeout(() => {
+        expect(TimeComponent.toJSON()).toMatchSnapshot();
+        done();
+      }, 1000);
+    });
+  });
+
+  it("1 minute change to hour", (done) => {
+    const TimeComponent = renderer.create(
+      <Time value={mockedStringHour} relativeTime />
+    );
+    renderer.act(() => {
+      setTimeout(() => {
+        expect(TimeComponent.toJSON()).toMatchSnapshot();
+        done();
+      }, 61000);
+    });
+  });
+});
 
 describe("Time component behavior", () => {
   it("Renders default placeholder with empty props", () => {

example/example.min.js

@@ -100,7 +100,7 @@ const ModalContainer = () => (
           <td>September 2, 2003, 2:26 am</td>
           <td>relativeTime</td>
           <td>
-            <Time value="September 2, 2003, 2:26 am" relativeTime />
+            <Time value="October 29, 2021, 08:40 am" relativeTime />
           </td>
           <td>
             <Time

example/example.tsx

@@ -38,8 +38,10 @@
     "@babel/preset-es2015": "^7.0.0-beta.53",
     "@babel/preset-react": "^7.0.0-beta.40",
     "@babel/preset-typescript": "7.15.0",
-    "@types/react": "^17.0.31",
+    "@types/jest": "^27.0.2",
+    "@types/react": "^17.0.33",
     "@types/react-dom": "^17.0.10",
+    "@types/react-test-renderer": "^17.0.1",
     "babel-loader": "^8.0.0-beta.0",
     "babel-plugin-react-transform": "^3.0.0",
     "conventional-changelog": "^1.1.7",

package-lock.json

@@ -153,6 +153,7 @@ const Time = (props: Props) => {
       });
       interval = window.setInterval(() => {
         const date = new Date(props.value);
+        const diff = getRelativeTimeDiff(date);
         setState({
           currentUnit: props.unit || bestFit(diff),
           relativeTime: calculateRelativeTime(