11 to 9, Day 9

Today, ToDoList

• Toy Project - NGMA
  • 예외 처리 추가

---

예외 처리 추가

본인을 짝꿍으로 선택할 때 예외

    @Test
    @WithUserDetails(value = "jilee@example.com", setupBefore = TestExecutionEvent.TEST_EXECUTION)
    public void pickMySelf() throws Exception {
        AccountDto accountDto = new AccountDto();
        accountDto.setEmail("jilee@example.com");
        String accountDtoJson = objectMapper.writeValueAsString(accountDto);

        mvc.perform(post("/account/pick")
                .contentType(MediaType.APPLICATION_JSON)
                .content(accountDtoJson))
                .andDo(print())
                .andExpect(status().isBadRequest())
                .andExpect(content().string("자신은 짝꿍이 될 수 없어요.."));
    }

    public void pickLover(Account account, Account lover) {
        if (account.getEmail().equals(lover.getEmail())) {
            throw new PickMySelfException();
        }
        account.setLover(lover);
        lover.getWaiter().add(account);
        account.setLoverState(LoverState.WAITING);
        accountRepository.save(account);
        accountRepository.save(lover);
    }

public class PickMySelfException extends RuntimeException{
    public PickMySelfException() {
        super("자신은 짝꿍이 될 수 없습니다.");
    }
}

response를 문자열로 받아서 Modal 본문으로 전달하기

modal-body에 비어있는 form-control-error 요소 추가

                <div class="modal-body">
                    <form class="needs-validation" novalidate>
                        <div class="col-sm-10">
                            <label for="email" class="form-label">상대방의 Email 주소를 입력해주세요.</label>
                            <input type="email" class="form-control" id="email" name="email" placeholder="" value="" required>
                            <div class="invalid-feedback">
                                상대방의 Email 주소를 입력해 주세요.
                            </div>
                            <div class='form-control-error'></div>
                        </div>
                    </form>
                </div>

ajax error 부분을 response 받아서 Modal 화면에 출력하도록 변경

function submitCoupleForm(){
    $.ajax({
        type: "POST",
        url: "http://localhost:8080/account/pick",
        contentType: "application/json",
        dataType: "json",
        cache:false,
        data: JSON.stringify($("form#coupleForm").serializeObject()),
        success: function(response){
            $("#coupleModal").modal('hide');
            loadCoupleState();
        },
        error: function(request){
            $(".form-control-error").empty();
            $(".form-control-error").append(request.responseText);
        }
    });
}

Modal을 닫고 다시 열었을때 오류 내용을 제거하기 위해 js 함수 추가

$(document).ready(function () {
    $(document).on("click","[data-bs-dismiss='modal']",function (event) {
        $(".form-control-error").empty();
    });
});