diff --git a/cypress/fixtures/me.json b/cypress/fixtures/me.json index 2b91b9b..923a4f1 100644 --- a/cypress/fixtures/me.json +++ b/cypress/fixtures/me.json @@ -1,5 +1,6 @@ { "id": "user-1", "email": "jane.doe@octo.com", - "name": "Jane Doe" + "name": "Jane Doe", + "photo": "https://www.fillmurray.com/150/150" } diff --git a/cypress/integration/home_page/home_page.spec.js b/cypress/integration/home_page/home_page.spec.js index a3af730..395dc04 100644 --- a/cypress/integration/home_page/home_page.spec.js +++ b/cypress/integration/home_page/home_page.spec.js @@ -11,7 +11,11 @@ function ensureQuestionIsDisplayed({ id, title, timeAgo, authorName }) { .contains("Postée par " + authorName) .should("exist"); - containerEl.click(); + cy.get(`[data-cy="author-profil-picture"]`) + .invoke("attr", "src") + .should("equal", "https://www.fillmurray.com/150/150"); + + cy.get(`[data-cy="question-${id}"]`).click(); cy.url().should("include", `/question/${id}`); cy.go("back"); diff --git a/cypress/integration/question_page/question_page.spec.js b/cypress/integration/question_page/question_page.spec.js index f3c00cb..537b397 100644 --- a/cypress/integration/question_page/question_page.spec.js +++ b/cypress/integration/question_page/question_page.spec.js @@ -17,6 +17,9 @@ function ensureQuestionInfoIsDisplayed() { cy.get(`[data-cy="author-name"]`) .contains("Postée par Test User 1") .should("exist"); + cy.get(`[data-cy="author-profil-picture"]`) + .invoke("attr", "src") + .should("equal", "https://www.fillmurray.com/150/150"); } function ensureResultIsDisplayed(label) { diff --git a/src/api-models.ts b/src/api-models.ts new file mode 100644 index 0000000..8a1a1cc --- /dev/null +++ b/src/api-models.ts @@ -0,0 +1,27 @@ +export interface MeApi { + id: string; + email: string; + name: string; + photo: string | null; +} + +export interface UserApi { + id: string; + name: string; + photo: string | null; +} + +export interface AnswerApi { + id: string; + title: string; + description: string; +} + +export interface QuestionApi { + id: string; + title: string; + description: string; + endingDate: string; + user: UserApi; + answers: AnswerApi[]; +} diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index 0d439a1..dc91ffe 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -17,7 +17,7 @@ export const Header: React.FC = () => {

{me.name}

 diff --git a/src/components/Header/styles.ts b/src/components/Header/styles.ts index f92d695..87e996b 100644 --- a/src/components/Header/styles.ts +++ b/src/components/Header/styles.ts @@ -42,5 +42,4 @@ export const UserAvatar = styled.img` border-radius: 50%; width: 4rem; height: 4rem; - border: 1px solid #555; `; diff --git a/src/components/QuestionDetail/QuestionDetail.tsx b/src/components/QuestionDetail/QuestionDetail.tsx index 89d0c59..013d558 100644 --- a/src/components/QuestionDetail/QuestionDetail.tsx +++ b/src/components/QuestionDetail/QuestionDetail.tsx @@ -49,7 +49,8 @@ export const QuestionDetail: React.FC = ({ id }) => {
diff --git a/src/components/QuestionsList/QuestionsList.tsx b/src/components/QuestionsList/QuestionsList.tsx index a4af55a..c29a2a7 100644 --- a/src/components/QuestionsList/QuestionsList.tsx +++ b/src/components/QuestionsList/QuestionsList.tsx @@ -52,12 +52,13 @@ export const QuestionsList: React.FC = () => {
    {questions.map(question => ( - + diff --git a/src/models.ts b/src/models.ts index dff64d5..3c91d64 100644 --- a/src/models.ts +++ b/src/models.ts @@ -1,7 +1,13 @@ export interface User { id: string; name: string; - photo: string | null; + photo: string; +} + +export interface Answer { + id: string; + title: string; + description: string; } export interface Question { @@ -20,16 +26,11 @@ export interface QuestionCreate { answers: Answer[]; } -export interface Answer { - id: string; - title: string; - description: string; -} - export interface Me { id: string; email: string; name: string; + photo: string; } export interface Vote { diff --git a/src/services/Me.test.ts b/src/services/Me.test.ts index f7dc22e..6ee1c1d 100644 --- a/src/services/Me.test.ts +++ b/src/services/Me.test.ts @@ -1,6 +1,7 @@ import axios from "axios"; import { Me } from "../models"; +import { MeApi } from "../api-models"; import { MeService, createMeService } from "./Me"; jest.mock("axios"); @@ -14,18 +15,24 @@ beforeEach(() => { describe("fetchMe", () => { it("Calls GET /me", async () => { // Given - const me: Me = { - email: "sarah.walker@octo.com", + const meApi: MeApi = { id: "user-1", - name: "Sarah walker" + name: "Sarah walker", + email: "sarah.walker@octo.com", + photo: null }; - - (axios.get as jest.Mock).mockResolvedValue({ data: me }); + (axios.get as jest.Mock).mockResolvedValue({ data: meApi }); // When const result = await service.fetchMe(); // Then + const me: Me = { + id: "user-1", + name: "Sarah walker", + email: "sarah.walker@octo.com", + photo: "https://www.fillmurray.com/150/150" + }; expect(result).toEqual(me); expect(axios.get).toHaveBeenCalledTimes(1); expect(axios.get).toHaveBeenCalledWith("/me"); diff --git a/src/services/Me.ts b/src/services/Me.ts index b68021e..a506086 100644 --- a/src/services/Me.ts +++ b/src/services/Me.ts @@ -1,13 +1,24 @@ -import { AxiosInstance } from "axios"; +import { AxiosInstance, AxiosResponse } from "axios"; import { Me } from "../models"; +import { MeApi } from "../api-models"; export function createMeService(http: AxiosInstance) { function fetchMe(): Promise { - return http.get("/me").then(response => response.data); + return http.get("/me").then(formatApiResponse); } return { fetchMe }; } +const formatApiResponse = (meApiResponse: AxiosResponse): Me => { + const data = meApiResponse.data + return { + id: data.id, + name: data.name, + email: data.email, + photo: data.photo || "https://www.fillmurray.com/150/150", + } +} + export type MeService = ReturnType; diff --git a/src/services/Question.test.ts b/src/services/Question.test.ts index 53f22f5..e25fd79 100644 --- a/src/services/Question.test.ts +++ b/src/services/Question.test.ts @@ -1,4 +1,6 @@ import { fixtures } from "../../test-utils"; +import { QuestionApi } from "../api-models"; +import { Question } from "../models"; import { QuestionService, createQuestionService } from "./Question"; @@ -18,13 +20,14 @@ beforeEach(() => { describe("fetchQuestions", () => { it("Calls GET /questions", async () => { // Given - const questions = fixtures.someQuestions(); - httpClient.get.mockResolvedValue({ data: questions }); + const questionsApi: QuestionApi[] = fixtures.someApiQuestions(); + httpClient.get.mockResolvedValue({ data: questionsApi }); // When const result = await service.fetchQuestions(); // Then + const questions: Question[] = fixtures.someQuestions(); expect(result).toEqual(questions); expect(httpClient.get).toHaveBeenCalledTimes(1); expect(httpClient.get).toHaveBeenCalledWith("/questions"); @@ -35,13 +38,14 @@ describe("fetchQuestions", () => { it("Calls GET /questions/42", async () => { // Given const questionId = "42"; - const question = fixtures.aQuestion(questionId); - httpClient.get.mockResolvedValue({ data: question }); + const questionApi: QuestionApi = fixtures.anApiQuestion(questionId); + httpClient.get.mockResolvedValue({ data: questionApi }); // When const result = await service.fetchQuestion(questionId); // Then + const question: Question = fixtures.aQuestion(questionId); expect(result).toEqual(question); expect(httpClient.get).toHaveBeenCalledTimes(1); expect(httpClient.get).toHaveBeenCalledWith("/questions/42"); diff --git a/src/services/Question.ts b/src/services/Question.ts index bee9e7d..6f66426 100644 --- a/src/services/Question.ts +++ b/src/services/Question.ts @@ -1,16 +1,16 @@ import { AxiosInstance } from "axios"; - +import { QuestionApi } from "../api-models"; import { Question, QuestionCreate } from "../models"; export function createQuestionService(http: AxiosInstance) { function fetchQuestions(): Promise { - return http.get("/questions").then(response => response.data); + return http.get("/questions").then(response => response.data.map(formatApiResponse)); } function fetchQuestion(questionId: string) { return http - .get(`/questions/${questionId}`) - .then(response => response.data); + .get(`/questions/${questionId}`) + .then(response => formatApiResponse(response.data)); } function createQuestion(question: QuestionCreate) { @@ -20,4 +20,20 @@ export function createQuestionService(http: AxiosInstance) { return { fetchQuestions, fetchQuestion, createQuestion }; } +const formatApiResponse = (questionApi: QuestionApi): Question => { + const userApi = questionApi.user + return { + id: questionApi.id, + title: questionApi.title, + description: questionApi.description, + endingDate: questionApi.endingDate, + answers: questionApi.answers, + user: { + id: userApi.id, + name: userApi.name, + photo: userApi.photo || "https://www.fillmurray.com/200/200" + } + } +} + export type QuestionService = ReturnType; diff --git a/test-utils/fixtures/index.ts b/test-utils/fixtures/index.ts index 0cc658a..585a468 100644 --- a/test-utils/fixtures/index.ts +++ b/test-utils/fixtures/index.ts @@ -1,2 +1,3 @@ export * from "./votes"; export * from "./questions"; +export * from "./questions-api"; diff --git a/test-utils/fixtures/questions-api.ts b/test-utils/fixtures/questions-api.ts new file mode 100644 index 0000000..528ed1f --- /dev/null +++ b/test-utils/fixtures/questions-api.ts @@ -0,0 +1,36 @@ +import { QuestionApi } from "../../src/api-models"; + +export function anApiQuestion(id: string): QuestionApi { + return { + id, + title: "Quel nom pour la league?", + description: "Il faut choisir", + endingDate: "2019-11-08T13:45:01+00:00", + user: { + id: "208294780284604222681", + name: "Test User", + photo: null + }, + answers: [ + { + id: "1", + title: "WAM", + description: "dgsdgd" + }, + { + id: "2", + title: "IDEA", + description: "dgsdgd" + }, + { + id: "3", + title: "FAME", + description: "dgsdgd" + } + ] + }; +} + +export function someApiQuestions(): QuestionApi[] { + return [anApiQuestion("1")]; +} diff --git a/test-utils/fixtures/questions.ts b/test-utils/fixtures/questions.ts index 320f63d..29072e4 100644 --- a/test-utils/fixtures/questions.ts +++ b/test-utils/fixtures/questions.ts @@ -9,7 +9,7 @@ export function aQuestion(id: string): Question { user: { id: "208294780284604222681", name: "Test User", - photo: null + photo: "https://www.fillmurray.com/200/200" }, answers: [ {