Merge pull request #1098 from ueokande/replace-redux-with-react-hooks

Refactor state management with React Hooks on Console

4 files changed, 74 insertions, 48 deletions

diff --git a/test/console/components/ErrorMessage.test.tsx b/test/console/components/ErrorMessage.test.tsx
new file mode 100644
index 0000000..46ec0b0
--- /dev/null
+++ b/test/console/components/ErrorMessage.test.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+import ReactTestRenderer from "react-test-renderer";
+import { expect } from "chai";
+import ErrorMessage from "../../../src/console/components/ErrorMessage";
+
+describe("console/components/console/completion/ErrorMessage", () => {
+  it("renders an error message", () => {
+    const root = ReactTestRenderer.create(
+      <ErrorMessage mode="error">Hello!</ErrorMessage>
+    ).root;
+
+    const p = root.findByType("p");
+
+    expect(p.props["role"]).to.equal("alert");
+    expect(p.children).to.deep.equal(["Hello!"]);
+  });
+});
diff --git a/test/console/components/InfoMessage.test.tsx b/test/console/components/InfoMessage.test.tsx
new file mode 100644
index 0000000..5b678ff
--- /dev/null
+++ b/test/console/components/InfoMessage.test.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+import ReactTestRenderer from "react-test-renderer";
+import { expect } from "chai";
+import InfoMessage from "../../../src/console/components/InfoMessage";
+
+describe("console/components/console/completion/InfoMessage", () => {
+  it("renders an information message", () => {
+    const root = ReactTestRenderer.create(
+      <InfoMessage mode="info">Hello!</InfoMessage>
+    ).root;
+
+    const p = root.findByType("p");
+
+    expect(p.props["role"]).to.equal("status");
+    expect(p.children).to.deep.equal(["Hello!"]);
+  });
+});
diff --git a/test/console/components/console/Completion.test.tsx b/test/console/components/console/Completion.test.tsx
index 0e4e21f..9b47637 100644
--- a/test/console/components/console/Completion.test.tsx
+++ b/test/console/components/console/Completion.test.tsx
@@ -100,9 +100,14 @@ describe("console/components/console/completion/Completion", () => {
   });
 
   it("scrolls up to down with select", () => {
-    const component = ReactTestRenderer.create(
-      <Completion completions={completions} size={3} select={1} />
-    );
+    let component: ReturnType<ReactTestRenderer["create"]> | null = null;
+
+    ReactTestRenderer.act(() => {
+      component = ReactTestRenderer.create(
+        <Completion completions={completions} size={3} select={1} />
+      );
+    });
+
     const root = component.root;
 
     let items = root.findAllByType(CompletionItem);
@@ -126,9 +131,11 @@ describe("console/components/console/completion/Completion", () => {
       false,
     ]);
 
-    component.update(
-      <Completion completions={completions} size={3} select={2} />
-    );
+    ReactTestRenderer.act(() => {
+      component.update(
+        <Completion completions={completions} size={3} select={2} />
+      );
+    });
     items = root.findAllByType(CompletionItem);
     showns = root
       .findAllByProps({ role: "group" })
@@ -151,9 +158,11 @@ describe("console/components/console/completion/Completion", () => {
     ]);
     expect(items[2].props.highlight).to.be.true;
 
-    component.update(
-      <Completion completions={completions} size={3} select={3} />
-    );
+    ReactTestRenderer.act(() => {
+      component.update(
+        <Completion completions={completions} size={3} select={3} />
+      );
+    });
     items = root.findAllByType(CompletionItem);
     showns = root
       .findAllByProps({ role: "group" })
@@ -178,9 +187,13 @@ describe("console/components/console/completion/Completion", () => {
   });
 
   it("scrolls down to up with select", () => {
-    const component = ReactTestRenderer.create(
-      <Completion completions={completions} size={3} select={5} />
-    );
+    let component: ReturnType<ReactTestRenderer["create"]> | null = null;
+
+    ReactTestRenderer.act(() => {
+      component = ReactTestRenderer.create(
+        <Completion completions={completions} size={3} select={5} />
+      );
+    });
     const root = component.root;
 
     let items = root.findAllByType(CompletionItem);
@@ -206,9 +219,11 @@ describe("console/components/console/completion/Completion", () => {
     ]);
     expect(items[5].props.highlight).to.be.true;
 
-    component.update(
-      <Completion completions={completions} size={3} select={4} />
-    );
+    ReactTestRenderer.act(() => {
+      component.update(
+        <Completion completions={completions} size={3} select={4} />
+      );
+    });
     items = root.findAllByType(CompletionItem);
     showns = root
       .findAllByProps({ role: "group" })
@@ -231,9 +246,11 @@ describe("console/components/console/completion/Completion", () => {
     ]);
     expect(items[4].props.highlight).to.be.true;
 
-    component.update(
-      <Completion completions={completions} size={3} select={3} />
-    );
+    ReactTestRenderer.act(() => {
+      component.update(
+        <Completion completions={completions} size={3} select={3} />
+      );
+    });
     items = root.findAllByType(CompletionItem);
     showns = root
       .findAllByProps({ role: "group" })
@@ -256,9 +273,11 @@ describe("console/components/console/completion/Completion", () => {
     ]);
     expect(items[3].props.highlight).to.be.true;
 
-    component.update(
-      <Completion completions={completions} size={3} select={2} />
-    );
+    ReactTestRenderer.act(() => {
+      component.update(
+        <Completion completions={completions} size={3} select={2} />
+      );
+    });
     items = root.findAllByType(CompletionItem);
     showns = root
       .findAllByProps({ role: "group" })
diff --git a/test/console/components/console/Message.test.tsx b/test/console/components/console/Message.test.tsx
deleted file mode 100644
index f8f950a..0000000
--- a/test/console/components/console/Message.test.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from "react";
-import ReactTestRenderer from "react-test-renderer";
-import { expect } from "chai";
-import Message from "../../../../src/console/components/console/Message";
-
-describe("console/components/console/completion/Message", () => {
-  it("renders an information message", () => {
-    const root = ReactTestRenderer.create(<Message mode="info">Hello!</Message>)
-      .root;
-
-    const p = root.findByType("p");
-
-    expect(p.props["role"]).to.equal("status");
-    expect(p.children).to.deep.equal(["Hello!"]);
-  });
-
-  it("renders an error message", () => {
-    const root = ReactTestRenderer.create(
-      <Message mode="error">Hello!</Message>
-    ).root;
-
-    const p = root.findByType("p");
-
-    expect(p.props["role"]).to.equal("alert");
-    expect(p.children).to.deep.equal(["Hello!"]);
-  });
-});