냉장고 가계부 프로젝트 18

fridge-web 프로젝트에서 FridgeControllerTests 클래스를 리팩토링한다.

public class FridgeControllerTests extends ControllerBase {
    
    @Override
    protected void setUp() {
        
    }
    
    @Test
    public void findCreateFridgeButtonAndClick() {
        browser.get(BASE_URL + "/fridges");
        WebElement createFridgeBtn = browser.findElementById("btnCreateFridge");
        assertThat(createFridgeBtn).isNotNull();
        
        createFridgeBtn.click();
        assertThat(browser.getCurrentUrl()).isEqualTo(BASE_URL + "/fridges/add");
    }
    
    @Test
    public void fillInCreateFormAndSubmit() {
        browser.get(BASE_URL + "/fridges/add");
        
        String nickname = "myFridge";
        WebElement nicknameElement = browser.findElement(By.name("nickname"));
        nicknameElement.sendKeys(nickname);
        browser.findElementByTagName("form").submit();
        
        WebDriverWait wait = new WebDriverWait(browser, 10);
        wait.until(ExpectedConditions.alertIsPresent());
        Alert alert = browser.switchTo().alert();
        assertThat(alert.getText()).isEqualTo(nickname + "을 생성했습니다.");
        alert.accept();
    }

}

기존에는 create 테스트 메서드 하나에 목록페이지에서 시작해서 등록페이지까지 한번에 테스트를 했는데, 이부분을 두개의 메서드로 나눠서 따로 테스트한다.

findCreateFridgeButtonAndClick 메서드는 /fridges 페이지로 이동해서 버튼을 찾고 클릭해서 등록페이지로 이동하는지를 검증한다.

fillInCreateFormAndSubmit 메서드는 등록 폼 페이지로 이동해서 nickname 필드에 값을 입력하고 submit 한다. 등록처리가 성공적으로 끝나면 alert 가 나오는데 alert의 text를 검증한다.

테스트를 수행해서 이상이 없는지 확인한다.

FridgeControllerTests 클래스에 냉장고 상세, 목록기능 테스트 메서드를 작성한다.

    @MockBean
    private JpaFridgeRepository fridgeRepository;
    
    private Fridge myFridge;
    private static final Integer ID = 1;
    private static final String BASE_PATH = "http://localhost";
    
    @Before
    public void setUp() {
        myFridge = new Fridge("myFridge");
        myFridge.setId(ID);
    }

    @Test
    public void loadFridgeById() throws Exception {
        when(fridgeRepository.findOne(ID)).thenReturn(myFridge);
        final ResultActions resultAction = mvc.perform(get("/fridges/" + ID));
        resultAction.andExpect(status().isOk());
        verifyResultActions(resultAction);
    }

    @Test
    public void findAllFridges() throws Exception {
        List<Fridge> fridges = Arrays.asList(myFridge);
        given(fridgeRepository.findAll()).willReturn(fridges);
        
        final ResultActions result = mvc.perform(get("/fridges").accept(MediaType.APPLICATION_JSON_UTF8));
        result.andExpect(status().isOk())
            .andExpect(content().contentType(MediaType.APPLICATION_JSON_UTF8))
            .andExpect(jsonPath("_links.self.href", equalTo(BASE_PATH + "/fridges")))
            .andExpect(jsonPath("_embedded.fridgeResourceList[0].id", equalTo(myFridge.getId().intValue())))
            .andExpect(jsonPath("_embedded.fridgeResourceList[0].nickname", equalTo(myFridge.getNickname())))
            .andExpect(jsonPath("_embedded.fridgeResourceList[0]._links.self.href", equalTo(BASE_PATH + "/fridges/" + myFridge.getId().intValue())));
    }

별도의 로직은 없으므로 repository에서 호출해서 사용하기 위해 JpaFridgeRepository Mock객체를 생성한다. loadFridgeById 테스트 메서드는 /fridges/{id} URL 을 GET방식으로 호출하면 응답상태코드는 ok, 응답본문은 verifyResultActions 메서드에서 검증한다.
findAllFridges 테스트 메서드는 /fridges URL을 GET방식으로 호출하면 응답상태코드는 ok, 응답본문은 json 형태로 전달받은 List 형태의 Fridge를 검증한다.

FridgeController 클래스를 구현한다.

    @Autowired
    private JpaFridgeRepository jpaFridgeRepository;

    @GetMapping("/{id}")
    public ResponseEntity<FridgeResource> loadFridgeById(@PathVariable final int id) {
        Fridge fridge = jpaFridgeRepository.findOne(id);
        if(fridge == null) {
            return ResponseEntity.noContent().build();
        }
        return ResponseEntity.ok(assembler.toResource(fridge));
    }

    @GetMapping
    public ResponseEntity<Resources<FridgeResource>> findAllFridges() {
        List<Fridge> fridges = jpaFridgeRepository.findAll();
        List<FridgeResource> fridgeResources = assembler.toResources(fridges);
        Link link = linkTo(methodOn(FridgeController.class).findAllFridges()).withSelfRel();
        Resources<FridgeResource> resources = new Resources<>(fridgeResources, link);
        return ResponseEntity.ok(resources);
    }

loadFridgeById메서드는 id값을 uri변수로 전달받고, JpaFridgeRepository.findOne 메서드를 이용해서 단일 로우를 검색하고 결과가 없을 경우 noContent 응답상태코드를 전달하고, 로우가 있다면 assembler를 이용해서 fridge객체를 resource 객체로 변환해서 응답하며 응답상태코드는 OK 로 리턴한다.

findAllFridges 메서드는 repository에서 findAll 메서드를 호출한다. 리턴된 List를 assembler를 이용해서 Resources 객체로 변환하고 link를 설정하고 응답본문에 전달한다.

API가 완성되었으므로 UI를 구현하기 위해 fridge-web 프로젝트를 연다.
먼저 FridgeControllerTests 테스트 메서드부터 작성한다. 형태는 food와 매우 비슷하다. 단순한 CRUD가 반복되므로 food와 비슷할 수 밖에 없다.

    @Autowired
    private RestTemplate restTemplate;
    
    private static final String FRIDGE_API_URL = "http://localhost:8081";

    @Test
    public void clickAnchorTagFromFridges() {
        FridgeCommand fridge = new FridgeCommand();
        fridge.setNickname("myFridge");
        fridge.setId(createFridge(fridge));
        
        browser.get(BASE_URL + "/fridges");
        
        String viewPageUrl = BASE_URL + "/fridges/" + fridge.getId();
        
        List<WebElement> anchors = browser.findElementsByLinkText(fridge.getNickname());
        assertThat(anchors).filteredOn(new Condition<WebElement>() {
            @Override
            public boolean matches(WebElement element) {
                return element.getAttribute("href").equals(viewPageUrl);
            }
        });
        
        WebElement anchorTag = anchors.stream()
                .filter(element -> element.getAttribute("href").equals(viewPageUrl))
                .findAny()
                .orElse(null);
        
        anchorTag.click();
        
        assertThat(browser.getCurrentUrl()).isEqualTo(viewPageUrl);
    }
    
    private Integer createFridge(FridgeCommand fridgeCommand) {
        String nickname = fridgeCommand.getNickname();
        ResponseEntity<FridgeCommand> response = restTemplate.postForEntity(FRIDGE_API_URL + "/fridges", nickname, FridgeCommand.class);
        assertThat(response.getStatusCode()).isEqualTo(HttpStatus.CREATED);
        FridgeCommand fridge = response.getBody();
        assertThat(fridge.getId()).isPositive();
        return fridge.getId();
    }

RestTemplate은 등록 API를 호출하기 위해 선언한다. FRIDGE_API_URL 은 API 서버 URL이다. 전체적으로 FoodControllerTests 클래스와 다르지 않다.

FridgeController를 구현한다.

    @GetMapping
    public String fridges(Model model) {
        ResponseEntity<Resources<FridgeCommand>> response = restTemplate.exchange("/fridges", 
                HttpMethod.GET, 
                null, 
                new ParameterizedTypeReference<Resources<FridgeCommand>>() {}, 
                Collections.emptyMap());
        if(response.getStatusCode().is2xxSuccessful()) {
            model.addAttribute("fridgeList", response.getBody().getContent());
        }
        return "fridges/fridges";
    }

    @GetMapping("/{id}")
    public String updateFridgeForm(@PathVariable int id, Model model) {
        ResponseEntity<FridgeCommand> response = restTemplate.getForEntity("/fridges/{id}", FridgeCommand.class, id);
        if(response.getStatusCode().is2xxSuccessful()) {
            model.addAttribute("fridgeCommand", response.getBody());
        }
        return "fridges/updateFridgeForm";
    }

updateFridgeForm 메서드는 /fridges/{id} 형태의 URL을 GET 방식으로 매핑된다. 실제 API서버를 RestTemplate 으로 HTTP 통신하여 fridge 객체를 불러온다. 응답상태가 성공이면 model에 fridgeCommand 라는 키를 가지는 fridge 인스턴스를 View로 보낸다. View name은 updateFridgeForm 이다.

비어있던 fridges 메서드에 목록을 불러오는 통신을 한다. 통신이 성공적으로 응답하면 model에 fridgeList 를 추가한다.

fridges.html View 페이지를 구현한다.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <title>Fridge</title>
  <script th:inline="javascript" th:if="${!#strings.isEmpty(registerMessage)}">
  alert([[${registerMessage}]]);
  </script>
</head>
<body>
  <h2>Fridges</h2>
  <a href="/fridges/add" th:href="@{/fridges/add}" id="btnCreateFridge">등록</a>
  <table>
  <thead>
  <tr>
    <th>ID</th>
    <th>Nickname</th>
  </tr>
  </thead>
  <tbody>
  <tr th:each="fridge : ${fridgeList}">
    <td th:text="${fridge.id}">1</td>
    <td><a href="/fridges/1" th:href="@{/fridges/{id}(id=${fridge.id})}" th:text="${fridge.nickname}">myFridge</a></td>
  </tr>
  </tbody>
  </table>
</body>
</html>

기존의 anchor Tag만 있던 목록 View는 Table태그를 추가한다. 열(Col)은 ID, Nickname 을 보여주고 nickname은 상세기능을 위해 anchor tag로 감싼다.

다음은 상세 View 파일이다.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <title>Fridge</title>
</head>
<body>
  <h2>냉장고 상세</h2>
  <form th:action="@{/fridges/{id}(id=${fridgeCommand.id})}" th:object="${fridgeCommand}" th:method="put">
 <div th:if="${#fields.hasErrors('*')}">
     <ul>
         <li th:each="err : ${#fields.errors('*')}" th:text="${err}">Input is incorrect</li>
     </ul>
 </div>
    <label for="nickname">이름: 
     <input type="text" th:field="*{nickname}" />
    </label><br/>
    <button type="submit">저장</button>
  </form>
</body>
</html>

method가 post에서 put방식으로 변경된 부분을 제외하면 fridge 등록 View와 차이가 없다.

테스트를 수행하여 문제가 없는지 확인한다.

이전글: 냉장고 가계부 프로젝트 17
다음글: 냉장고 가계부 프로젝트 19