Skip to content

Commit

Permalink
Add test newbill
Browse files Browse the repository at this point in the history
  • Loading branch information
AlexGrouard committed Feb 22, 2023
1 parent b94495c commit 93c6dfd
Show file tree
Hide file tree
Showing 3 changed files with 168 additions and 128 deletions.
130 changes: 79 additions & 51 deletions src/__tests__/NewBill.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
* @jest-environment jsdom
*/
import "@testing-library/jest-dom";
import userEvent from "@testing-library/user-event";
import { screen, waitFor } from "@testing-library/dom";
import NewBillUI from "../views/NewBillUI.js";
import NewBill from "../containers/NewBill.js";
Expand All @@ -10,39 +11,10 @@ import { localStorageMock } from "../__mocks__/localStorage.js";
import mockStore from "../__mocks__/store.js";
import router from "../app/Router.js";

jest.mock("../app/store", () => mockStore);

describe("Given I am connected as an employee", () => {
describe("When I am on NewBill Page", () => {
/* test("Then I should be able to choose an expense from a list", () => {
const html = NewBillUI()
document.body.innerHTML = html
const expenseList = screen.getByLabelText('Type de dépense').length
expect(expenseList).toEqual(6)
}) */
test("Then the mail icon in vertical layout should be highlighted", async () => {
Object.defineProperty(window, "localStorage", {
value: localStorageMock,
});
window.localStorage.setItem(
"user",
JSON.stringify({
type: "Employee",
})
);
const root = document.createElement("div");
root.setAttribute("id", "root");
document.body.append(root);
router();
window.onNavigate(ROUTES_PATH.Bills);

const html = NewBillUI();
document.body.innerHTML = html;

await waitFor(() => screen.getByTestId("icon-window"));
const mailIcon = screen.getByTestId("icon-mail");
expect(mailIcon).toHaveClass("active-icon");
});

test("Then input should be there", () => {
const html = NewBillUI();
document.body.innerHTML = html;
Expand All @@ -53,43 +25,99 @@ describe("Given I am connected as an employee", () => {
expect(screen.getByTestId("pct")).toBeTruthy();
expect(screen.getByTestId("commentary")).toBeTruthy();
});
});
});

test("Then a user can fill up the form", () => {
describe("Given I am connected as an employee", () => {
describe("When I am on NewBill Page", () => {
test("Then I should be able to choose an expense from a list", () => {
const html = NewBillUI();
document.body.innerHTML = html;
userEvent.selectOptions(screen.getByTestId("expense-type"), [
screen.getByText("Services en ligne"),
]);
expect(screen.getByTestId("expense-type").value).toMatch(
"Services en ligne"
);
});

//user can use the dropdown menu
//expect(depenseType).toHaveValue('Transports');
test("Then a user can fill up the form", () => {
const html = NewBillUI();
document.body.innerHTML = html;

screen.getByTestId("expense-name").value = "Manual Test";
expect(screen.getByTestId("expense-name")).toHaveValue("Manual Test");
userEvent.type(screen.getByTestId("expense-name"), "Manual Test");
expect(screen.getByTestId("expense-name").value).toMatch("Manual Test");

screen.getByTestId("amount").value = "10";
expect(screen.getByTestId("amount")).toHaveValue(parseInt("10"));
userEvent.type(screen.getByTestId("amount"), "10");
expect(screen.getByTestId("amount").value).toMatch("10");

screen.getByTestId("datepicker").value = "01/01/2015";
expect(screen.getByTestId("datepicker")).toHaveValue("01/01/2015");
userEvent.type(screen.getByTestId("datepicker"), "01012015");
expect(screen.getByTestId("datepicker").value).toMatch("01/01/2015");

screen.getByTestId("vat").value = "01";
expect(screen.getByTestId("vat")).toHaveValue(parseInt("01"));
userEvent.type(screen.getByTestId("vat"), "01");
expect(screen.getByTestId("vat").value).toMatch("01");

screen.getByTestId("pct").value = "15";
expect(screen.getByTestId("pct")).toHaveValue(parseInt("15"));
userEvent.type(screen.getByTestId("pct"), "15");
expect(screen.getByTestId("pct").value).toMatch("15");

screen.getByTestId("commentary").value =
"some text with Commentry and Numbers 10";
expect(screen.getByTestId("commentary")).toHaveValue(
userEvent.type(
screen.getByTestId("commentary"),
"some text with Commentry and Numbers 10"
);
expect(screen.getByTestId("commentary").value).toMatch(
"some text with Commentry and Numbers 10"
);
});
test("Then user should only be able to upload a file in PNG,JPEG or JPG", () => {
//click on the upload button
//add a dummy file

expect(screen.getByText("Envoyer")).toBeDisabled();
test("Then user should be able to upload a file", () => {
const filePng = new File(["test"], "test.png", { type: "image/png" });
userEvent.upload(screen.getByTestId("file"), filePng);
expect(screen.getByText("Envoyer")).toBeEnabled();
});

test("An error should appear if the format is wrong", () => {
const filePdf = new File(["test"], "test.pdf", { type: "document/pdf" });
userEvent.upload(screen.getByTestId("file"), filePdf);
expect(screen.getByTestId("error")).toBeVisible();
});

test("the form should be submitted", () => {
const newBill = new NewBill();
expect(newBill).not.toThrow("error");
});
it.todo("then a new line should appear in the bill page");
});
});

describe("Given I am connected as an employee", () => {
describe("When I am on NewBill Page", () => {
it.todo(
"Should fill the form with mock data from a JSON file (fake API call)"
//use store to get the data
//add value to the matching input
//check file
//submit
);
//mail icon test case (does not depend on Newbill page)
/* test("Then the mail icon in vertical layout should be highlighted", async () => {
Object.defineProperty(window, "localStorage", {
value: localStorageMock,
});
window.localStorage.setItem(
"user",
JSON.stringify({
type: "Employee",
})
);
const root = document.createElement("div");
root.setAttribute("id", "root");
document.body.append(root);
router();
window.onNavigate(ROUTES_PATH.Bills);
await waitFor(() => screen.getByTestId("icon-mail"));
const mailIcon = screen.getByTestId("icon-mail");
expect(mailIcon).toHaveClass("active-icon");
}); */
});
});
154 changes: 84 additions & 70 deletions src/containers/NewBill.js
Original file line number Diff line number Diff line change
@@ -1,91 +1,105 @@
import { ROUTES_PATH } from '../constants/routes.js'
import Logout from "./Logout.js"
import { ROUTES_PATH } from "../constants/routes.js";
import Logout from "./Logout.js";

export default class NewBill {
constructor({ document, onNavigate, store, localStorage }) {
this.document = document
this.onNavigate = onNavigate
this.store = store
const formNewBill = this.document.querySelector(`form[data-testid="form-new-bill"]`)
formNewBill.addEventListener("submit", this.handleSubmit)
const file = this.document.querySelector(`input[data-testid="file"]`)
file.addEventListener("change", this.handleChangeFile)
this.fileUrl = null
this.fileName = null
this.billId = null
new Logout({ document, localStorage, onNavigate })
//disable submit button
this.document = document;
this.onNavigate = onNavigate;
this.store = store;
const formNewBill = this.document.querySelector(
`form[data-testid="form-new-bill"]`
);
formNewBill.addEventListener("submit", this.handleSubmit);
const file = this.document.querySelector(`input[data-testid="file"]`);
file.addEventListener("change", this.handleChangeFile);
this.fileUrl = null;
this.fileName = null;
this.billId = null;
new Logout({ document, localStorage, onNavigate });
}
handleChangeFile = e => {
e.preventDefault()
const file = this.document.querySelector(`input[data-testid="file"]`).files[0]
const filePath = e.target.value.split(/\\/g)
const fileName = filePath[filePath.length-1]
let fileExtension = fileName.split('.')
fileExtension = fileExtension[1]
const formData = new FormData()
const email = JSON.parse(localStorage.getItem("user")).email
const submitButton = document.getElementById("btn-send-bill")
handleChangeFile = (e) => {
e.preventDefault();
const file = this.document.querySelector(`input[data-testid="file"]`)
.files[0];
const filePath = e.target.value.split(/\\/g);
const fileName = filePath[filePath.length - 1];
let fileExtension = fileName.split(".");
fileExtension = fileExtension[1];
const formData = new FormData();
const email = JSON.parse(localStorage.getItem("user")).email;
const submitButton = document.getElementById("btn-send-bill");
const errorMessage = document.getElementById("error-message");

formData.append('file', file)
formData.append('email', email)
formData.append("file", file);
formData.append("email", email);

if (fileExtension != "png" && fileExtension != "jpg" && fileExtension != "jpeg") {
submitButton.disabled = true
errorMessage.style.display = "block"
}
else {
submitButton.disabled = false
errorMessage.style.display = "none"
if (
fileExtension != "png" &&
fileExtension != "jpg" &&
fileExtension != "jpeg"
) {
submitButton.disabled = true;
errorMessage.style.display = "block";
} else {
submitButton.disabled = false;
errorMessage.style.display = "none";
this.store
.bills()
.create({
data: formData,
headers: {
noContentType: true
}
})
.then(({fileUrl, key}) => {
console.log(fileUrl)
this.billId = key
this.fileUrl = fileUrl
this.fileName = fileName

}).catch(error => console.error(error))
.bills()
.create({
data: formData,
headers: {
noContentType: true,
},
})
.then(({ fileUrl, key }) => {
//console.log(fileUrl);
this.billId = key;
this.fileUrl = fileUrl;
this.fileName = fileName;
})
.catch((error) => console.error(error));
}
}
};

handleSubmit = e => {
e.preventDefault()
console.log('e.target.querySelector(`input[data-testid="datepicker"]`).value', e.target.querySelector(`input[data-testid="datepicker"]`).value)
const email = JSON.parse(localStorage.getItem("user")).email
handleSubmit = (e) => {
e.preventDefault();
/* console.log(
'e.target.querySelector(`input[data-testid="datepicker"]`).value',
e.target.querySelector(`input[data-testid="datepicker"]`).value
); */
const email = JSON.parse(localStorage.getItem("user")).email;
const bill = {
email,
type: e.target.querySelector(`select[data-testid="expense-type"]`).value,
name: e.target.querySelector(`input[data-testid="expense-name"]`).value,
amount: parseInt(e.target.querySelector(`input[data-testid="amount"]`).value),
date: e.target.querySelector(`input[data-testid="datepicker"]`).value,
name: e.target.querySelector(`input[data-testid="expense-name"]`).value,
amount: parseInt(
e.target.querySelector(`input[data-testid="amount"]`).value
),
date: e.target.querySelector(`input[data-testid="datepicker"]`).value,
vat: e.target.querySelector(`input[data-testid="vat"]`).value,
pct: parseInt(e.target.querySelector(`input[data-testid="pct"]`).value) || 20,
commentary: e.target.querySelector(`textarea[data-testid="commentary"]`).value,
pct:
parseInt(e.target.querySelector(`input[data-testid="pct"]`).value) ||
20,
commentary: e.target.querySelector(`textarea[data-testid="commentary"]`)
.value,
fileUrl: this.fileUrl,
fileName: this.fileName,
status: 'pending'
}
this.updateBill(bill)
this.onNavigate(ROUTES_PATH['Bills'])
}
status: "pending",
};
this.updateBill(bill);
this.onNavigate(ROUTES_PATH["Bills"]);
};

// not need to cover this function by tests
updateBill = (bill) => {
if (this.store) {
this.store
.bills()
.update({data: JSON.stringify(bill), selector: this.billId})
.then(() => {
this.onNavigate(ROUTES_PATH['Bills'])
})
.catch(error => console.error(error))
.bills()
.update({ data: JSON.stringify(bill), selector: this.billId })
.then(() => {
this.onNavigate(ROUTES_PATH["Bills"]);
})
.catch((error) => console.error(error));
}
}
}
};
}
12 changes: 5 additions & 7 deletions src/views/NewBillUI.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
import VerticalLayout from './VerticalLayout.js'
import VerticalLayout from "./VerticalLayout.js";

export default () => {

return (`
return `
<div class='layout'>
${VerticalLayout(120)}
<div class='content'>
Expand Down Expand Up @@ -56,8 +55,7 @@ export default () => {
<div class="col-half">
<label for="file" class="bold-label">Justificatif</label>
<input required type="file" class="form-control blue-border" data-testid="file" />
<div id="error-message">mauvaise extension merci d'utiliser PNG,JPEG or JPG</div>
<div id="error-message" data-testid="error">mauvaise extension merci d'utiliser PNG,JPEG or JPG</div>
</div>
</div>
</div>
Expand All @@ -72,5 +70,5 @@ export default () => {
</div>
</div>
</div>
`)
}
`;
};

0 comments on commit 93c6dfd

Please sign in to comment.