게시판 만들기 - 로그인 페이지 기능 테스트 정의 및 추가작업

정영찬·2022년 8월 23일

프로젝트 실습

목록 보기

33/60

로그인을 위한 페이지 의 기능 테스트를 정의한다. 스프링 시큐리티를 사용해서 만든 로그인 화면은 내가 직접 만든것이 아니라 이미 만들어진 것을 사용하는 것이기 때문에 검증된 기능인 것이 확실하다. 따라서, 해당 기능이 내 프로젝트내에서 존재하는가에대한 테스트는 이미 이전에 AuthControllerTest에서 만들어서 통과 했었다. 따라서 따로 추가해야할 작업을 진행했다.

gitignore에 jpabuddy 플러그인 설정 파일 항목 추가

jpabuddy의 설정 내용은 인텔리제이에서 .jpb라는 폴더 안에 내장되어있는데, jpabuddy는 인텔리제이 전용 플러그인이고, 다른 IDE로 이 프로젝트를 클론한다면 사용될 일이 전혀 없는 폴더이다. 따라서 gitignore 목록에 해당 폴더를 추가해주는 작업을 진행했다.

.gitignore

도메인 수정 - 회원 계정과 게시글, 댓글 관계 연결

현재 도메인은 게시글, 댓글, 회원 계정으로 나누어져 있는데, 설계를 진행하면서 연관관계를 완성하지 않고 넘어갔기 때문에 이 작업을 완료했다.

erd 다이어그램에서 유저 계정을 추가했을 때, 필드의 연관관계를 설정했었다.

다이어그램을 그려놓고 실제 코드에는 연관관계 설정을 하지 않았다.

간단히 요약하면, 게시글을 작성한 사람이 누구인지, 댓글을 쓴 사람이 누구인지를 판별하기위해 유저 계정의 id값을 가져오기로 했다.

루트경로 도메인에서 article 에 userAccount 항목을 추가. 이때 관계는 @ManyToOne으로 지정했다.
그리고 게시글을 id기준으로 정렬하는 것이 아닌 시간순으로 정렬을 하기 위해 @OrderBy의 값을 createdAt DESC로 변경했다.

그리고 article 생성자 항목에 댓글을 추가했다.

테스트 데이터에서 usser_account_id의 항목이 빠져있었기 때문에 mockaroo를 사용해서 테스트 데이터를 다시 만들었다.

JpaRepositoryTest의 내용또한 추가된 userAccount를 넣어서 수정했다.

자세한 커밋 내용은 링크를 참조할 것
https://github.com/jyc-coder/bulletin-board/pull/24

서비스 로직 테스트 코드 업데이트, DTO 재설계, 쿼리 메소드 작성

게시글과 댓글 관련 테스트 코드에서 내용을 추가하고, 연관된 DTO를 재설계했다.
테스트가 필요로 하는 repository 쿼리 메소드도 작성

ArticleServiceTest

테스트 항목중에서 게시글 검색시, 게시글 반환 테스트를 작성했는데, 이를 좀더 상세하게 나눠서 테스트를 작성했다. 검색어 없이 게시글을 검색했을때, 그리고 검색어를 입력한 다음에 검색했을 때를 나눠서 작성했다.

게시글 조회

이와 같이 searchArticles의 searchType와 searchKeyword값을 null로 했을 때에도 페이지가 나타나는지를 확인하는 테스트이다.

물론 사용자가 정보를 입력하고 검색했을 때에도 나타나야한다.

게시글 조회 테스트도 작성했다. 게시글 id와 함께 게시글을 만들어서 조회를 진행했을때 조회 메소드가 호출을 하는지의 여부를 확인한다.

만약에 존재하지 않는 게시글을 조회하면, 예외를 던지게 한다.

게시글 작성

게시글정보 입력시에 게시글을 생성하는지의 여부 테스트 작성

게시글 수정

모의 게시글을 하나 생성하고, 수정된 dto를 선언한뒤 수정 메소드를 호출하는지여부를 검사한다.

만약 존재하지 않는 게시글의 수정정보를 입력하면 경고 로그를 찍고 아무 행동도 하지 않는다.

getReferenceById를 진행했을때 EntityNotFoundException을 던지는 상황에서 수정메소드를 호출하면 아무런 변화가 없는지를 확인한다.

게시글 삭제

게시글 ID를 입력하면 게시글을 삭제한다.

테스트를 진행하기 위해서 가짜 데이터를 생성하는 메소드를 작성했다. dto,게시글,유저의 정보를 생성하는 테스트 픽스쳐를 생성해서 활용했다.

private Article createArticle(){
        return Article.of(
                createUserAccount(),
                "title",
                "content",
                "#java"
        );
    }

    private ArticleDto createArticleDto() {
        return createArticleDto("title","content","#java");
    }

    private ArticleDto createArticleDto(String title, String content, String hashtag) {
        return ArticleDto.of(1L,
                createUserAccountDto(),
                title,
                content,
                hashtag,
                LocalDateTime.now(),
                "Jyc",
                LocalDateTime.now(),
                "Jyc"
                );
    }

    private UserAccountDto createUserAccountDto() {
        return UserAccountDto.of(
                1L,
                "jyc",
                "password",
                "jyc@mail.com",
                "Jyc",
                "This is memo",
                LocalDateTime.now(),
                "jyc",
                LocalDateTime.now(),
                "jyc"
        );

ArticleCommentServiceTest

게시글에서 작성한테스트와 내용이 비슷하다. 기본적인 crud테스트를 작성하고, 이를위한 테스트 픽스쳐들도 생성했다.

댓글 조회

게시글 ID를 조회했을 때, 해당하는 댓글의 리스트를 반환하는지의 여부를 확인하는 테스트이다.

댓글 생성

댓글정보를 입력하면, 당연히 댓글을 저장해줘야한다.
ArticleCommentDto를 생성해주고 해당 dto의 Id의 게시글에 댓글이 추가되는지를 테스트한다.

만약에 댓글저장을 시도했으나 해당하는 게시글이 없다면 아무런 작업도 진행하지 않게 해야한다.

댓글 수정

원래 있던 댓글 내용 대신 수정하는 댓글의 내용을 지정하고 수정 메소드를 호출했을때 댓글의 내용이 변경되었는지를 확인한다.

마찬가지로 없는 댓글 정보를 수정할려고 하면, 경고 로그를 찍고 아무런 동작도 하지 않게 해야한다.

댓글 삭제

뷰 디자인 업데이트 및 템플릿추가

게시글 본문 가로 스크롤바가 생기지 않게 wrapping을 적용했다.
검색 페이지 , 해시태그 전용 검색 페이지, 회원 가입 페이지를 간단하게 만들었다.

article-content.css

/* 게시글 본문 */
#article-content > pre {
  white-space: pre-wrap; /* Since CSS 2.1 */
  white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
  white-space: -pre-wrap; /* Opera 4-6 */
  white-space: -o-pre-wrap; /* Opera 7 */
  word-wrap: break-word; /* Internet Explorer 5.5+ */
}

본문의 pre 부분에 white-space 속성중 pre-wrap을 부여했다. pre-wrap은 공백을 코드에 있는 그대로 표시하며, 코드에 줄바꿈이 없어도 자동 줄바꿈을 해주는 속성이다.

search.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Articles</title>
</head>
<body>
    게시글 검색
</body>
</html>

serch-hashtag.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>Articles</title>
</head>
<body>
    게시글 해시태그 검색
</body>
</html>

sign-up.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>회원가입</title>
</head>
<body>
    <header>
        header 템플릿 삽입부
        <hr>
    </header>
    <form>
        <label for="userId">Id</label>
        <input id="userId" type="text" required>
        <label for="password">Password</label>
        <input id="password" type="password" required>
        <label for="email">Email</label>
        <input id="email" type="email" placeholder="you@example.com">
        <label for="nickname">Nickname</label>
        <input id="nickname" type="text">
        <label for="memo">메모</label>
        <textarea id="memo" rows="3"></textarea>
        <button type="submit">가입하기</button>
    </form>

    <footer>
        <hr>
        footer 템플릿 삽입부
    </footer>
</body>
</html>