Cícero Ednilson

Blog sobre Desenvolvimento de Softwares

Home » Desenvolvendo uma aplicação Web com Angular 4 e Spring Boot – Parte 7: Testando a aplicação.

Desenvolvendo uma aplicação Web com Angular 4 e Spring Boot – Parte 7: Testando a aplicação.

0 Flares Twitter 0 Facebook 0 Filament.io 0 Flares ×

Nessa parte no nosso tutorial vamos realizar os testes para ver se a nossa aplicação está funcionando 100%.

Páginas do tutorial.

Desenvolvendo uma aplicação Web com Angular 4 e Spring Boot – Parte 1: Introdução.

Desenvolvendo uma aplicação Web com Angular 4 e Spring Boot – Parte 2: Criando o Banco de Dados

Desenvolvendo uma aplicação Web com Angular 4 e Spring Boot – Parte 3: Criando o serviço Rest com Spring Boot.

Desenvolvendo uma aplicação Web com Angular 4 e Spring Boot – Parte 4: Criando a aplicação com Angular CLI.

Desenvolvendo uma aplicação Web com Angular 4 e Spring Boot – Parte 5: Criando os acessos ao Serviço REST.

Desenvolvendo uma aplicação Web com Angular 4 e Spring Boot – Parte 6: Criando o CRUD.

Desenvolvendo uma aplicação Web com Angular 4 e Spring Boot – Parte 7: Testando a aplicação.

Iniciando a aplicação.

Se a sua aplicação estiver parada basta executar com o comando abaixo.

1
ng serve --open

Executando o Server

E então deve ser aberto o browser como mostra a imagem abaixo.

Depois vamos clicar no menu consulta, vamos ver que não vai mostrar nenhum registro, e se abrirmos o console do browser vamos ver que está dando erro de Cross-domain.

Dica: Erro de Cross-domain se refere à uma aplicação web que tenta se comunicar com algum recurso fora do seu domínio ou servidor web. Isso pode ser na forma de requisições de rede para outros servidores ou compartilhamento de dados de diferentes domínios.

Corrigindo problema de Cross-domain.

Para resolver esse problema vamos abrir o fonte do nosso serviço REST e vamos dar o acesso para a nossa aplicação atráves da Annotation @CrossOrigin.

A nossa classe PessoaService deve ficar como mostra o código abaixo.

1
2
3
4
5
@CrossOrigin(origins  = "http://localhost:4200")
@RestController
@RequestMapping("/service")
public class PessoaService {
}

Na nossa Annotation @CrossOrigin informamos o domínio onde está rodando a nossa aplicação que vai ter acesso ao nosso serviço REST, depois basta executar novamente o serviço.

Voltando aos testes.

Depois de corrigirmos o problema Cross-domain vamos atualizar a página de consulta , e então devemos ver os registros que cadastramos via serviço nos passos anteriores.

Agora vamos clicar no menu Cadastro e vamo cadastrar um novo registro como mostra a imagem abaixo.

47

Depois de clicarmos em salvar devemos ver uma mensagem de sucesso como mostra a imagem abaixo.

Se clicarmos em salvar sem preencher nenhum campo vamos ver a Exception retornanda do nosso serviço.

Abaixo podemos ver a parte do Angular que trata a resposta do nosso serviço REST.

Agora na página de consulta vamos clicar em Editar em algum registro.

Quando clicamos em editar é executado o método abaixo que vai redirecionar o usuário para a página de edição de registro.

A página de edição de registro é a mesma que usamos no cadastro, mas se for passado o id sabemos que aquele registro deve ser alterado, veja essa regra no componente que fica em cadastro.component.ts.

Depois de alterar o registro vamos ver a mensagem abaixo.

54

E logo depois a aplicação vai nos redirecionado para a página de consulta e podemos ver o nosso registro alterado.

Abaixo podemos ver o código que altera o registro e depois redireciona o usuário.

Agora vamos clicar em Excluir em um registro, e depois vamos clicar em OK na mensagem de confirmação.

Após a exclusão devemos ver a mensagem abaixo.

E então vamos ver que o registro não se encontra mais na nossa consulta.

No nosso componente consulta.component.ts podemos ver toda a rotina da ação que exclui um registro.

É isso ai amigos, vamos ficando por aqui com o nosso tutorial de Angular, espero que vocês gostem, e até o próximo tutorial.

Pegue o código fonte do serviço Rest aqui.

Pegue o código fonte da aplicação Angular aqui.

Comentários

Name of author

Name: ciceroednilson@gmail.com

2 thoughts on “Desenvolvendo uma aplicação Web com Angular 4 e Spring Boot – Parte 7: Testando a aplicação.

  • Cicero, boa tarde.

    Curto bastante seu blog, queria te pedir uma luz rs

    Teria como fazer um tutorial de Java + SpringBoot + AngularJS (1.x) no intellij?

    Agradeço muito cara seus ensinamentos,
    Abs,

    Reply
    • ciceroednilson@gmail.com Post author

      Em primeiro lugar muito obrigado por visitar o blog Pedro!

      A IDE só influencia na criação do projeto, mas o desenvolvimento é o mesmo.

      Tenta realizar o download do código fonte do meu tutorial e tenta importar no Intellij.

      No momento estou sem tempo para criar um tutorial assim, mas vou ver se faço no futuro!

      Reply

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

0 Flares Twitter 0 Facebook 0 Filament.io 0 Flares ×