From 4d043107b80e104c3a029acb405dd69a8371a9a8 Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Sat, 3 Apr 2021 18:05:20 +0900 Subject: Make Completion as a React.FC --- .../console/components/console/Completion.test.tsx | 61 ++++++++++++++-------- 1 file changed, 40 insertions(+), 21 deletions(-) (limited to 'test/console/components') 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( - - ); + let component: ReturnType | null = null; + + ReactTestRenderer.act(() => { + component = ReactTestRenderer.create( + + ); + }); + const root = component.root; let items = root.findAllByType(CompletionItem); @@ -126,9 +131,11 @@ describe("console/components/console/completion/Completion", () => { false, ]); - component.update( - - ); + ReactTestRenderer.act(() => { + component.update( + + ); + }); 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( - - ); + ReactTestRenderer.act(() => { + component.update( + + ); + }); 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( - - ); + let component: ReturnType | null = null; + + ReactTestRenderer.act(() => { + component = ReactTestRenderer.create( + + ); + }); 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( - - ); + ReactTestRenderer.act(() => { + component.update( + + ); + }); 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( - - ); + ReactTestRenderer.act(() => { + component.update( + + ); + }); 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( - - ); + ReactTestRenderer.act(() => { + component.update( + + ); + }); items = root.findAllByType(CompletionItem); showns = root .findAllByProps({ role: "group" }) -- cgit v1.2.3 From 2b1079525b86dad45df11e6ad29a89989a6416ab Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Sun, 4 Apr 2021 16:44:47 +0900 Subject: Separate Message to InfoMessage and ErrorMessage --- src/console/components/Console.tsx | 10 +++++-- src/console/components/ErrorMessage.tsx | 15 +++++++++++ src/console/components/InfoMessage.tsx | 15 +++++++++++ src/console/components/console/Message.tsx | 33 ------------------------ test/console/components/ErrorMessage.test.tsx | 17 ++++++++++++ test/console/components/InfoMessage.test.tsx | 17 ++++++++++++ test/console/components/console/Message.test.tsx | 27 ------------------- 7 files changed, 72 insertions(+), 62 deletions(-) create mode 100644 src/console/components/ErrorMessage.tsx create mode 100644 src/console/components/InfoMessage.tsx delete mode 100644 src/console/components/console/Message.tsx create mode 100644 test/console/components/ErrorMessage.test.tsx create mode 100644 test/console/components/InfoMessage.test.tsx delete mode 100644 test/console/components/console/Message.test.tsx (limited to 'test/console/components') diff --git a/src/console/components/Console.tsx b/src/console/components/Console.tsx index fa91336..951b627 100644 --- a/src/console/components/Console.tsx +++ b/src/console/components/Console.tsx @@ -1,7 +1,8 @@ import React from "react"; import Input from "./console/Input"; import Completion from "./console/Completion"; -import Message from "./console/Message"; +import InfoMessage from "./InfoMessage"; +import ErrorMessage from "./ErrorMessage"; import * as consoleActions from "../../console/actions/console"; import CommandLineParser, { InputPhase, @@ -199,10 +200,15 @@ const Console: React.FC = () => { ); case "info": + return ( + + {state.messageText} + + ); case "error": return ( - {state.messageText} + {state.messageText} ); default: diff --git a/src/console/components/ErrorMessage.tsx b/src/console/components/ErrorMessage.tsx new file mode 100644 index 0000000..93b049b --- /dev/null +++ b/src/console/components/ErrorMessage.tsx @@ -0,0 +1,15 @@ +import React from "react"; +import { styled } from "./ColorSchemeProvider"; + +const Wrapper = styled.p` + border-top: 1px solid gray; + background-color: ${({ theme }) => theme.consoleErrorBackground}; + color: ${({ theme }) => theme.consoleErrorForeground}; + font-weight: bold; +`; + +const ErrorMessage: React.FC = ({ children }) => { + return {children}; +}; + +export default ErrorMessage; diff --git a/src/console/components/InfoMessage.tsx b/src/console/components/InfoMessage.tsx new file mode 100644 index 0000000..02ad27d --- /dev/null +++ b/src/console/components/InfoMessage.tsx @@ -0,0 +1,15 @@ +import React from "react"; +import { styled } from "./ColorSchemeProvider"; + +const Wrapper = styled.p` + border-top: 1px solid gray; + background-color: ${({ theme }) => theme.consoleInfoBackground}; + color: ${({ theme }) => theme.consoleInfoForeground}; + font-weight: normal; +`; + +const InfoMessage: React.FC = ({ children }) => { + return {children}; +}; + +export default InfoMessage; diff --git a/src/console/components/console/Message.tsx b/src/console/components/console/Message.tsx deleted file mode 100644 index 8dcdb5a..0000000 --- a/src/console/components/console/Message.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import React from "react"; -import { styled } from "../ColorSchemeProvider"; - -const Error = styled.p` - border-top: 1px solid gray; - background-color: ${({ theme }) => theme.consoleErrorBackground}; - color: ${({ theme }) => theme.consoleErrorForeground}; - font-weight: bold; -`; - -const Info = styled.p` - border-top: 1px solid gray; - background-color: ${({ theme }) => theme.consoleInfoBackground}; - color: ${({ theme }) => theme.consoleInfoForeground}; - font-weight: normal; -`; - -interface Props { - mode: string; - children: string; -} - -const Message: React.FC = ({ mode, children }) => { - switch (mode) { - case "error": - return {children}; - case "info": - return {children}; - } - return null; -}; - -export default Message; 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( + Hello! + ).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( + Hello! + ).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/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(Hello!) - .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( - Hello! - ).root; - - const p = root.findByType("p"); - - expect(p.props["role"]).to.equal("alert"); - expect(p.children).to.deep.equal(["Hello!"]); - }); -}); -- cgit v1.2.3