diff --git a/cypress/fixtures/img.jpeg b/cypress/fixtures/img.jpeg new file mode 100644 index 0000000..03bbe52 Binary files /dev/null and b/cypress/fixtures/img.jpeg differ diff --git a/cypress/integration/visitorCanRequestQuotes.feature.js b/cypress/integration/visitorCanRequestQuotes.feature.js index 6d7b07f..be295f7 100644 --- a/cypress/integration/visitorCanRequestQuotes.feature.js +++ b/cypress/integration/visitorCanRequestQuotes.feature.js @@ -51,6 +51,7 @@ describe("Visitor can request quotes", () => { cy.get('[name="energy_consumption"]').type("10000"); cy.get("[data-cy=button]").contains("Submit").click(); }); + cy.file_upload("img.jpeg", "#image-upload", "image/jpeg"); cy.get("[data-cy=message]").should( "contain", "Form successfully submitted." diff --git a/cypress/support/commands.js b/cypress/support/commands.js index ca4d256..53b6fee 100644 --- a/cypress/support/commands.js +++ b/cypress/support/commands.js @@ -1,25 +1,21 @@ -// *********************************************** -// This example commands.js shows you how to -// create various custom commands and overwrite -// existing commands. -// -// For more comprehensive examples of custom -// commands please read more here: -// https://on.cypress.io/custom-commands -// *********************************************** -// -// -// -- This is a parent command -- -// Cypress.Commands.add("login", (email, password) => { ... }) -// -// -// -- This is a child command -- -// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... }) -// -// -// -- This is a dual command -- -// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... }) -// -// -// -- This will overwrite an existing command -- -// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... }) +import 'cypress-file-upload' + +Cypress.Commands.add("file_upload", (file, element, type) => { + const selector = element; + const fixturePath = file; + cy.get(selector).then(subject => + cy.window().then(win => + cy + .fixture(fixturePath, "base64") + .then(Cypress.Blob.base64StringToBlob) + .then(blob => { + const el = subject[0] + const testFile = new win.File([blob], name, {type}) + const dataTransfer = new win.DataTransfer() + dataTransfer.items.add(testFile); + el.files = dataTransfer.files; + cy.wrap(subject).trigger("change", { force: true }) + }) + ) + ) +}) \ No newline at end of file diff --git a/package.json b/package.json index 9cada11..f5d8ef5 100644 --- a/package.json +++ b/package.json @@ -7,12 +7,14 @@ "@testing-library/react": "^9.3.2", "@testing-library/user-event": "^7.1.2", "axios": "^0.20.0", + "cypress-file-upload": "^4.1.1", "final-form": "^4.20.1", "j-tockauth": "^1.2.7", "react": "^16.13.1", "react-async-script-loader": "^0.3.0", "react-dom": "^16.13.1", "react-final-form": "^6.5.2", + "react-images-upload": "^1.2.8", "react-places-autocomplete": "^7.3.0", "react-redux": "^7.2.1", "react-responsive": "^8.1.0", diff --git a/src/components/QuotesPage.jsx b/src/components/QuotesPage.jsx index f55fb98..d654e8d 100644 --- a/src/components/QuotesPage.jsx +++ b/src/components/QuotesPage.jsx @@ -5,9 +5,19 @@ import TelephoneQuestion from "./mandatoryQuestions/TelephoneQuestion"; import AddressQuestion from "./mandatoryQuestions/AddressQuestion"; import axios from "axios"; import { Form } from "react-final-form"; +import ImageUploader from "react-images-upload"; const QuotesPage = () => { const [message, setMessage] = useState(""); + const [photos, setPhotos] = useState([]); + + const toBase64 = (file) => + new Promise((resolve, reject) => { + const reader = new FileReader(); + reader.readAsDataURL(file); + reader.onload = () => resolve(reader.result); + reader.onerror = (error) => reject(error); + }); const onSubmit = async (event) => { event.preventDefault(); @@ -49,6 +59,7 @@ const QuotesPage = () => { roof_length: roof_length.value, fuse_size: fuse_size.value, energy_consumption: energy_consumption.value, + images: photos, }; response = await axios.post("http://localhost:3000/api/v1/quotes", { @@ -63,6 +74,15 @@ const QuotesPage = () => { } }; + const onDrop = async (photo) => { + const encodedImages = []; + for (let image of photo) { + const encodedImage = await toBase64(image); + encodedImages.push(encodedImage); + } + setPhotos(encodedImages); + }; + return (
{ }} )} + ); }} diff --git a/yarn.lock b/yarn.lock index 703f042..413a251 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3835,6 +3835,13 @@ cyclist@^1.0.1: resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9" integrity sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk= +cypress-file-upload@^4.1.1: + version "4.1.1" + resolved "https://registry.yarnpkg.com/cypress-file-upload/-/cypress-file-upload-4.1.1.tgz#952713c8104ab7008de99c65bd63f74b244fe4df" + integrity sha512-tX6UhuJ63rNgjdzxglpX+ZYf/bM6PDhFMtt1qCBljLtAgdearqyfD1AHqyh59rOHCjfM+bf6FA3o9b/mdaX6pw== + dependencies: + mime "^2.4.4" + cypress@4.11.0: version "4.11.0" resolved "https://registry.yarnpkg.com/cypress/-/cypress-4.11.0.tgz#054b0b85fd3aea793f186249ee1216126d5f0a7e" @@ -9546,6 +9553,19 @@ react-final-form@^6.5.2: dependencies: "@babel/runtime" "^7.12.1" +react-flip-move@^3.0.4: + version "3.0.4" + resolved "https://registry.yarnpkg.com/react-flip-move/-/react-flip-move-3.0.4.tgz#261f66101fbc305f9b7b28959c5cf8236413ca74" + integrity sha512-HyUVv9g3t/BS7Yz9HgrtYSWyRNdR2F81nkj+C5iRY675AwlqCLB5JU9mnZWg0cdVz7IM4iquoyZx70vzZv3Z8Q== + +react-images-upload@^1.2.8: + version "1.2.8" + resolved "https://registry.yarnpkg.com/react-images-upload/-/react-images-upload-1.2.8.tgz#d1e993c50a0ca266aa7a9c7b7456167d80e9e6ab" + integrity sha512-d5mhAE0BfkLTlG5MLvKVw+q76LL8r5easgWW0TTBvXD8n6HXeLMZLwCuPiOibY1a3NRMXI4AnM1r34dqLOBjng== + dependencies: + react "^16.12.0" + react-flip-move "^3.0.4" + react-is@^16.12.0, react-is@^16.13.1, react-is@^16.6.0, react-is@^16.6.3, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.8.6, react-is@^16.9.0: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" @@ -9695,7 +9715,7 @@ react-test-renderer@^16.0.0-0: react-is "^16.8.6" scheduler "^0.19.1" -react@^16.13.1: +react@^16.12.0, react@^16.13.1: version "16.14.0" resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d" integrity sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==