From fdd2d82f85dca6da2a4a8fc7890591cf4f238591 Mon Sep 17 00:00:00 2001 From: junyoung Date: Mon, 21 Nov 2022 16:45:27 +0900 Subject: [PATCH] =?UTF-8?q?[=EC=A0=95=EC=A4=80=EC=98=81]=20Chapter9=20?= =?UTF-8?q?=ED=85=8C=EC=8A=A4=ED=8A=B8=EC=BD=94=EB=93=9C=20=EC=88=98?= =?UTF-8?q?=EC=A0=95=EC=99=84=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../react-router-list/src/App.test.tsx | 99 +++- .../__snapshots__/index.test.tsx.snap | 42 ++ .../src/Components/PageHeader/index.test.tsx | 18 +- .../Add/__snapshots__/index.test.tsx.snap | 86 ++++ .../src/Pages/Add/index.test.tsx | 13 +- .../Detail/__snapshots__/index.test.tsx.snap | 72 +++ .../src/Pages/Detail/index.test.tsx | 29 +- .../List/__snapshots__/index.test.tsx.snap | 185 +++++++ .../src/Pages/List/index.test.tsx | 48 +- .../__snapshots__/index.test.tsx.snap | 2 +- .../src/Pages/NotFound/index.test.tsx | 2 +- .../src/Pages/NotFound/index.tsx | 2 +- .../src/__snapshots__/App.test.tsx.snap | 472 +++++++++++++++++- 13 files changed, 1000 insertions(+), 70 deletions(-) create mode 100644 junyoung/week5/chapter9/react-router-list/src/Components/PageHeader/__snapshots__/index.test.tsx.snap create mode 100644 junyoung/week5/chapter9/react-router-list/src/Pages/Add/__snapshots__/index.test.tsx.snap create mode 100644 junyoung/week5/chapter9/react-router-list/src/Pages/Detail/__snapshots__/index.test.tsx.snap create mode 100644 junyoung/week5/chapter9/react-router-list/src/Pages/List/__snapshots__/index.test.tsx.snap diff --git a/junyoung/week5/chapter9/react-router-list/src/App.test.tsx b/junyoung/week5/chapter9/react-router-list/src/App.test.tsx index e037d79..f1427e1 100644 --- a/junyoung/week5/chapter9/react-router-list/src/App.test.tsx +++ b/junyoung/week5/chapter9/react-router-list/src/App.test.tsx @@ -11,7 +11,7 @@ describe('', () => { history.push('/'); const { container } = render( - + , ); @@ -33,8 +33,8 @@ describe('', () => { const history = createMemoryHistory(); history.push('/'); - const { container } = render( - + const { container, rerender } = render( + , ); @@ -42,6 +42,12 @@ describe('', () => { const addButton = screen.getByText('+'); fireEvent.click(addButton); + rerender( + + + , + ); + const header = screen.getByText('할 일 추가'); expect(header).toBeInTheDocument(); const goBack = screen.getByText('돌아가기'); @@ -54,6 +60,13 @@ describe('', () => { expect(container).toMatchSnapshot(); fireEvent.click(goBack); + + rerender( + + + , + ); + expect(header.textContent).toBe('할 일 목록'); const toDoList = screen.getByTestId('toDoList'); expect(toDoList).toBeInTheDocument(); @@ -65,8 +78,8 @@ describe('', () => { const history = createMemoryHistory(); history.push('/'); - const { container } = render( - + const { container, rerender } = render( + , ); @@ -75,6 +88,12 @@ describe('', () => { expect(toDoItem).toBeInTheDocument(); fireEvent.click(toDoItem); + rerender( + + + , + ); + const header = screen.getByText('할 일 상세'); expect(header).toBeInTheDocument(); const goBack = screen.getByText('돌아가기'); @@ -87,6 +106,13 @@ describe('', () => { expect(container).toMatchSnapshot(); fireEvent.click(goBack); + + rerender( + + + , + ); + expect(header.textContent).toBe('할 일 목록'); const toDoList = screen.getByTestId('toDoList'); expect(toDoList).toBeInTheDocument(); @@ -94,10 +120,10 @@ describe('', () => { it('shows Not Found page if the user enters the wrong URL, and go back to List page', () => { const history = createMemoryHistory(); - history.push('/foo');//정의하지 않은 URL의미 + history.push('/foo'); - const { container } = render( - + const { container, rerender } = render( + , ); @@ -112,6 +138,14 @@ describe('', () => { expect(container).toMatchSnapshot(); fireEvent.click(goBack); + + rerender( + + + , + ); + + expect(header.textContent).toBe('할 일 목록'); const toDoList = screen.getByTestId('toDoList'); expect(toDoList).toBeInTheDocument(); @@ -121,8 +155,8 @@ describe('', () => { const history = createMemoryHistory(); history.push('/'); - render( - + const { rerender } = render( + , ); @@ -130,11 +164,24 @@ describe('', () => { const addButton = screen.getByText('+'); fireEvent.click(addButton); + rerender( + + + , + ); + const input = screen.getByPlaceholderText('할 일을 입력해 주세요'); const button = screen.getByText('추가'); fireEvent.change(input, { target: { value: 'New ToDo' } }); fireEvent.click(button); + + rerender( + + + , + ); + const header = screen.getByText('할 일 목록'); expect(header).toBeInTheDocument(); const newToDo = screen.getByText('New ToDo'); @@ -147,8 +194,8 @@ describe('', () => { const history = createMemoryHistory(); history.push('/'); - render( - + const { rerender } = render( + , ); @@ -159,6 +206,14 @@ describe('', () => { expect(deleteButton).toBeInTheDocument(); fireEvent.click(deleteButton); + + rerender( + + + , + ); + + expect(toDoItem).not.toBeInTheDocument(); expect(deleteButton).not.toBeInTheDocument(); expect(localStorage.getItem('ToDoList')).toBe('[]'); @@ -170,21 +225,37 @@ describe('', () => { const history = createMemoryHistory(); history.push('/'); - render( - + const { rerender } = render( + , ); const toDoItem = screen.getByText('ToDo 1'); expect(toDoItem).toBeInTheDocument(); + fireEvent.click(toDoItem); + + + rerender( + + + , + ); + + const header = screen.getByText('할 일 상세'); expect(header).toBeInTheDocument(); const deleteButton = screen.getByText('삭제'); fireEvent.click(deleteButton); + rerender( + + + , + ); + expect(header.textContent).toBe('할 일 목록'); const toDoList = screen.getByTestId('toDoList'); expect(toDoList).toBeInTheDocument(); diff --git a/junyoung/week5/chapter9/react-router-list/src/Components/PageHeader/__snapshots__/index.test.tsx.snap b/junyoung/week5/chapter9/react-router-list/src/Components/PageHeader/__snapshots__/index.test.tsx.snap new file mode 100644 index 0000000..244a454 --- /dev/null +++ b/junyoung/week5/chapter9/react-router-list/src/Components/PageHeader/__snapshots__/index.test.tsx.snap @@ -0,0 +1,42 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` renders component correctly 1`] = ` +.c0 { + position: absolute; + top: 0; + left: 0; + right: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + background-color: #1E40FF; +} + +.c1 { + padding: 20px; + color: #FFFFFF; + font-size: 20px; + font-weight: 600; +} + +
+
+
+ 할 일 목록 +
+
+
+`; diff --git a/junyoung/week5/chapter9/react-router-list/src/Components/PageHeader/index.test.tsx b/junyoung/week5/chapter9/react-router-list/src/Components/PageHeader/index.test.tsx index cbebd22..c229e54 100644 --- a/junyoung/week5/chapter9/react-router-list/src/Components/PageHeader/index.test.tsx +++ b/junyoung/week5/chapter9/react-router-list/src/Components/PageHeader/index.test.tsx @@ -13,7 +13,7 @@ describe('', () => { history.push('/'); const { container } = render( - + , ); @@ -31,7 +31,7 @@ describe('', () => { history.push('/add'); render( - + , ); @@ -48,7 +48,7 @@ describe('', () => { history.push('/detail/1'); render( - + , ); @@ -65,7 +65,7 @@ describe('', () => { history.push('/not_found'); render( - + , ); @@ -81,8 +81,8 @@ describe('', () => { const history = createMemoryHistory(); history.push('/not_found'); - render( - + const { rerender } = render( + , ); @@ -90,6 +90,12 @@ describe('', () => { const goBack = screen.getByText('돌아가기'); fireEvent.click(goBack); + rerender( + + + , + ); + const label = screen.getByText('할 일 목록'); expect(label).toBeInTheDocument(); expect(goBack).not.toBeInTheDocument(); diff --git a/junyoung/week5/chapter9/react-router-list/src/Pages/Add/__snapshots__/index.test.tsx.snap b/junyoung/week5/chapter9/react-router-list/src/Pages/Add/__snapshots__/index.test.tsx.snap new file mode 100644 index 0000000..e850e77 --- /dev/null +++ b/junyoung/week5/chapter9/react-router-list/src/Pages/Add/__snapshots__/index.test.tsx.snap @@ -0,0 +1,86 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` renders component correctly 1`] = ` +.c3 { + text-align: center; + background-color: #304FFE; + padding: 10px 20px; + border-radius: 8px; + cursor: pointer; +} + +.c3:hover { + background-color: #1E40FF; +} + +.c3:active { + box-shadow: inset 5px 5px 10px rgba(0,0,0,0.2); +} + +.c4 { + olor: #FFFFFF; + font-size: 16px; +} + +.c2 { + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + font-size: 16px; + padding: 10px 10px; + border-radius: 8px; + border: 1px solid #BDBDBD; + outline: none; +} + +.c1 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +.c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + background-color: #FFFFFF; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + padding: 20px; + border-radius: 8px; + box-shadow: 5px 5px 10px rgba(0,0,0,0.2); + position: relative; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +
+
+
+ +
+
+ 추가 +
+
+
+
+
+`; diff --git a/junyoung/week5/chapter9/react-router-list/src/Pages/Add/index.test.tsx b/junyoung/week5/chapter9/react-router-list/src/Pages/Add/index.test.tsx index 6474551..3498dec 100644 --- a/junyoung/week5/chapter9/react-router-list/src/Pages/Add/index.test.tsx +++ b/junyoung/week5/chapter9/react-router-list/src/Pages/Add/index.test.tsx @@ -13,7 +13,7 @@ describe('', () => { history.push('/add'); const { container } = render( - + , ); @@ -39,8 +39,9 @@ describe('', () => { ); }; - render( - + + const { rerender } = render( + , ); @@ -54,6 +55,12 @@ describe('', () => { fireEvent.change(input, { target: { value: 'New ToDo' } }); fireEvent.click(button); + rerender( + + + , + ); + expect(pathName.textContent).toBe('/'); expect(localStorage.getItem('ToDoList')).toBe('["New ToDo"]'); }); diff --git a/junyoung/week5/chapter9/react-router-list/src/Pages/Detail/__snapshots__/index.test.tsx.snap b/junyoung/week5/chapter9/react-router-list/src/Pages/Detail/__snapshots__/index.test.tsx.snap new file mode 100644 index 0000000..afe0cd1 --- /dev/null +++ b/junyoung/week5/chapter9/react-router-list/src/Pages/Detail/__snapshots__/index.test.tsx.snap @@ -0,0 +1,72 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` renders component correctly 1`] = ` +.c2 { + text-align: center; + background-color: #FF1744; + padding: 10px 20px; + border-radius: 8px; + cursor: pointer; +} + +.c2:hover { + background-color: #F01440; +} + +.c2:active { + box-shadow: inset 5px 5px 10px rgba(0,0,0,0.2); +} + +.c3 { + olor: #FFFFFF; + font-size: 16px; +} + +.c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + background-color: #FFFFFF; + padding: 20px; + border-radius: 8px; + box-shadow: 5px 5px 10px rgba(0,0,0,0.2); + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + +.c1 { + min-width: 350px; + height: 350px; + overflow-y: auto; + border: 1px solid #BDBDBD; + margin-bottom: 20px; + padding: 10px; +} + +
+
+
+ ToDo 1 +
+
+
+ 삭제 +
+
+
+
+`; diff --git a/junyoung/week5/chapter9/react-router-list/src/Pages/Detail/index.test.tsx b/junyoung/week5/chapter9/react-router-list/src/Pages/Detail/index.test.tsx index 79cf352..46d0916 100644 --- a/junyoung/week5/chapter9/react-router-list/src/Pages/Detail/index.test.tsx +++ b/junyoung/week5/chapter9/react-router-list/src/Pages/Detail/index.test.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Router, Route, useLocation } from 'react-router-dom'; +import { Router, Route, Routes, useLocation } from 'react-router-dom'; import { createMemoryHistory } from 'history'; import { render, screen, fireEvent } from '@testing-library/react'; import 'jest-styled-components'; @@ -15,10 +15,10 @@ describe('', () => { const { container } = render( - - - - + + + } /> + , ); @@ -43,13 +43,13 @@ describe('', () => { return
{pathname}
; }; - render( + const { rerender } = render( - + - - - + + } /> + , ); @@ -64,6 +64,15 @@ describe('', () => { fireEvent.click(button); + rerender( + + + + + , + ); + + expect(url.textContent).toBe('/'); expect(toDoItem).not.toBeInTheDocument(); expect(button).not.toBeInTheDocument(); diff --git a/junyoung/week5/chapter9/react-router-list/src/Pages/List/__snapshots__/index.test.tsx.snap b/junyoung/week5/chapter9/react-router-list/src/Pages/List/__snapshots__/index.test.tsx.snap new file mode 100644 index 0000000..c51717b --- /dev/null +++ b/junyoung/week5/chapter9/react-router-list/src/Pages/List/__snapshots__/index.test.tsx.snap @@ -0,0 +1,185 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` renders component correctly 1`] = ` +.c4 { + text-align: center; + background-color: #FF1744; + padding: 10px 20px; + border-radius: 8px; + cursor: pointer; +} + +.c4:hover { + background-color: #F01440; +} + +.c4:active { + box-shadow: inset 5px 5px 10px rgba(0,0,0,0.2); +} + +.c5 { + olor: #FFFFFF; + font-size: 16px; +} + +.c2 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + border-bottom: 1px solid #BDBDBD; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + margin: 10px; + padding: 10px; +} + +.c3 { + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + font-size: 16px; + margin-right: 20px; + -webkit-text-decoration: none; + text-decoration: none; +} + +.c1 { + min-width: 350px; + height: 400px; + overflow-y: scroll; + border: 1px solid #BDBDBD; + margin-bottom: 20px; +} + +.c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + background-color: #FFFFFF; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + padding: 20px; + border-radius: 8px; + box-shadow: 5px 5px 10px rgba(0,0,0,0.2); + position: relative; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c6 { + font-size: 20px; + color: #FFFFFF; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + width: 60px; + height: 60px; + border-radius: 30px; + cursor: pointer; + position: absolute; + bottom: -30px; + background-color: #304FFE; + box-shadow: 5px 5px 10px rgba(0,0,0,0.2); + -webkit-text-decoration: none; + text-decoration: none; +} + +.c6:hover { + background-color: #1E40FF; +} + +.c6:active { + box-shadow: inset 5px 5px 10px rgba(0,0,0,0.2); +} + +
+
+
+
+ + ToDo 1 + +
+
+ 삭제 +
+
+
+
+ + ToDo 2 + +
+
+ 삭제 +
+
+
+
+ + ToDo 3 + +
+
+ 삭제 +
+
+
+
+ + + + +
+
+`; diff --git a/junyoung/week5/chapter9/react-router-list/src/Pages/List/index.test.tsx b/junyoung/week5/chapter9/react-router-list/src/Pages/List/index.test.tsx index cc80aa5..30960bb 100644 --- a/junyoung/week5/chapter9/react-router-list/src/Pages/List/index.test.tsx +++ b/junyoung/week5/chapter9/react-router-list/src/Pages/List/index.test.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Router, useLocation } from 'react-router-dom'; +import { Router, useLocation , Routes, Route } from 'react-router-dom'; import { createMemoryHistory } from 'history'; import { render, screen, fireEvent } from '@testing-library/react'; import 'jest-styled-components'; @@ -16,11 +16,15 @@ describe('', () => { const { container } = render( - - + + + } /> + , ); + + {/* 3개 입력했을경우 테스트 작성 */} const toDoItem1 = screen.getByText('ToDo 1'); expect(toDoItem1).toBeInTheDocument(); @@ -50,8 +54,10 @@ describe('', () => { render( - - + + + } /> + , ); @@ -74,11 +80,13 @@ describe('', () => { localStorage.setItem('ToDoList', '["ToDo 1", "ToDo 2", "ToDo 3"]'); - render( + const { rerender } = render( - + - + + } /> + , ); @@ -89,7 +97,16 @@ describe('', () => { const toDoItem1 = screen.getByText('ToDo 2'); expect(toDoItem1.getAttribute('href')).toBe('/detail/1'); fireEvent.click(toDoItem1); - //버튼을 누르면 detail 페이지로 잘 이동하는지 + + + rerender( + + + + + , + ); + expect(url.textContent).toBe('/detail/1'); }); @@ -102,9 +119,9 @@ describe('', () => { const history = createMemoryHistory(); history.push('/'); - render( + const { rerender } = render( - + @@ -117,6 +134,15 @@ describe('', () => { const addButton = screen.getByText('+'); fireEvent.click(addButton); + rerender( + + + + + + , + ); + expect(url.textContent).toBe('/add'); }); }); \ No newline at end of file diff --git a/junyoung/week5/chapter9/react-router-list/src/Pages/NotFound/__snapshots__/index.test.tsx.snap b/junyoung/week5/chapter9/react-router-list/src/Pages/NotFound/__snapshots__/index.test.tsx.snap index 7c177c0..50df00a 100644 --- a/junyoung/week5/chapter9/react-router-list/src/Pages/NotFound/__snapshots__/index.test.tsx.snap +++ b/junyoung/week5/chapter9/react-router-list/src/Pages/NotFound/__snapshots__/index.test.tsx.snap @@ -9,7 +9,7 @@ exports[` renders component correctly 1`] = `
- Not Found 👼🏻 + Not Found 😿
`; diff --git a/junyoung/week5/chapter9/react-router-list/src/Pages/NotFound/index.test.tsx b/junyoung/week5/chapter9/react-router-list/src/Pages/NotFound/index.test.tsx index cee8610..1312b01 100644 --- a/junyoung/week5/chapter9/react-router-list/src/Pages/NotFound/index.test.tsx +++ b/junyoung/week5/chapter9/react-router-list/src/Pages/NotFound/index.test.tsx @@ -8,7 +8,7 @@ describe('', () => { it('renders component correctly', () => { const { container } = render(); - const message = screen.getByText('Not Found 👼🏻'); + const message = screen.getByText('Not Found 😿'); expect(message).toBeInTheDocument(); expect(container).toMatchSnapshot(); diff --git a/junyoung/week5/chapter9/react-router-list/src/Pages/NotFound/index.tsx b/junyoung/week5/chapter9/react-router-list/src/Pages/NotFound/index.tsx index e32990b..cbb793b 100644 --- a/junyoung/week5/chapter9/react-router-list/src/Pages/NotFound/index.tsx +++ b/junyoung/week5/chapter9/react-router-list/src/Pages/NotFound/index.tsx @@ -6,5 +6,5 @@ const Container = Styled.div` `; export const NotFound = () => { - return Not Found 👼🏻; + return Not Found 😿; }; diff --git a/junyoung/week5/chapter9/react-router-list/src/__snapshots__/App.test.tsx.snap b/junyoung/week5/chapter9/react-router-list/src/__snapshots__/App.test.tsx.snap index b9298b8..68d2977 100644 --- a/junyoung/week5/chapter9/react-router-list/src/__snapshots__/App.test.tsx.snap +++ b/junyoung/week5/chapter9/react-router-list/src/__snapshots__/App.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[` renders component correctly 1`] = ` -.c5 { +exports[` goes to Add page and go back to List page 1`] = ` +.c7 { text-align: center; background-color: #304FFE; padding: 10px 20px; @@ -9,20 +9,20 @@ exports[` renders component correctly 1`] = ` cursor: pointer; } -.c5:hover { +.c7:hover { background-color: #1E40FF; } -.c5:active { +.c7:active { box-shadow: inset 5px 5px 10px rgba(0,0,0,0.2); } -.c6 { +.c8 { olor: #FFFFFF; font-size: 16px; } -.c4 { +.c6 { -webkit-flex: 1; -ms-flex: 1; flex: 1; @@ -33,19 +33,220 @@ exports[` renders component correctly 1`] = ` outline: none; } +.c5 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +.c1 { + position: absolute; + top: 0; + left: 0; + right: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + background-color: #1E40FF; +} + +.c2 { + padding: 20px; + color: #FFFFFF; + font-size: 20px; + font-weight: 600; +} + .c3 { + padding: 20px; + color: #FFFFFF; + font-size: 16px; + font-weight: 600; + -webkit-text-decoration: none; + text-decoration: none; + position: absolute; + left: 20px; +} + +.c4 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + background-color: #FFFFFF; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + padding: 20px; + border-radius: 8px; + box-shadow: 5px 5px 10px rgba(0,0,0,0.2); + position: relative; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c0 { + min-height: 100vh; + background-color: #EEEEEE; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + +
+
+
+
+ 할 일 추가 +
+ + 돌아가기 + +
+
+
+ +
+
+ 추가 +
+
+
+
+
+
+`; + +exports[` goes to Detail page and go back to List page 1`] = ` +.c6 { + text-align: center; + background-color: #FF1744; + padding: 10px 20px; + border-radius: 8px; + cursor: pointer; +} + +.c6:hover { + background-color: #F01440; +} + +.c6:active { + box-shadow: inset 5px 5px 10px rgba(0,0,0,0.2); +} + +.c7 { + olor: #FFFFFF; + font-size: 16px; +} + +.c1 { + position: absolute; + top: 0; + left: 0; + right: 0; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + background-color: #1E40FF; } .c2 { + padding: 20px; + color: #FFFFFF; + font-size: 20px; + font-weight: 600; +} + +.c3 { + padding: 20px; + color: #FFFFFF; + font-size: 16px; + font-weight: 600; + -webkit-text-decoration: none; + text-decoration: none; + position: absolute; + left: 20px; +} + +.c4 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + background-color: #FFFFFF; + padding: 20px; + border-radius: 8px; + box-shadow: 5px 5px 10px rgba(0,0,0,0.2); + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + +.c5 { min-width: 350px; - height: 400px; - overflow-y: scroll; + height: 350px; + overflow-y: auto; border: 1px solid #BDBDBD; margin-bottom: 20px; + padding: 10px; } .c0 { @@ -68,7 +269,84 @@ exports[` renders component correctly 1`] = ` flex-direction: column; } +
+
+
+
+ 할 일 상세 +
+ + 돌아가기 + +
+
+
+ ToDo 1 +
+
+
+ 삭제 +
+
+
+
+
+`; + +exports[` renders component correctly 1`] = ` +.c4 { + min-width: 350px; + height: 400px; + overflow-y: scroll; + border: 1px solid #BDBDBD; + margin-bottom: 20px; +} + .c1 { + position: absolute; + top: 0; + left: 0; + right: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + background-color: #1E40FF; +} + +.c2 { + padding: 20px; + color: #FFFFFF; + font-size: 20px; + font-weight: 600; +} + +.c3 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -80,6 +358,66 @@ exports[` renders component correctly 1`] = ` padding: 20px; border-radius: 8px; box-shadow: 5px 5px 10px rgba(0,0,0,0.2); + position: relative; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c5 { + font-size: 20px; + color: #FFFFFF; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + width: 60px; + height: 60px; + border-radius: 30px; + cursor: pointer; + position: absolute; + bottom: -30px; + background-color: #304FFE; + box-shadow: 5px 5px 10px rgba(0,0,0,0.2); + -webkit-text-decoration: none; + text-decoration: none; +} + +.c5:hover { + background-color: #1E40FF; +} + +.c5:active { + box-shadow: inset 5px 5px 10px rgba(0,0,0,0.2); +} + +.c0 { + min-height: 100vh; + background-color: #EEEEEE; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; }
@@ -91,26 +429,114 @@ exports[` renders component correctly 1`] = ` >
+ 할 일 목록 +
+
+
+
+ + + + +
+
+ +`; + +exports[` shows Not Found page if the user enters the wrong URL, and go back to List page 1`] = ` +.c1 { + position: absolute; + top: 0; + left: 0; + right: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + background-color: #1E40FF; +} + +.c2 { + padding: 20px; + color: #FFFFFF; + font-size: 20px; + font-weight: 600; +} + +.c3 { + padding: 20px; + color: #FFFFFF; + font-size: 16px; + font-weight: 600; + -webkit-text-decoration: none; + text-decoration: none; + position: absolute; + left: 20px; +} + +.c4 { + font-size: 20px; +} + +.c0 { + min-height: 100vh; + background-color: #EEEEEE; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + +
+
+
- -
-
- 추가 -
-
+ 에러
+ + 돌아가기 + +
+
+ Not Found 😿