Repository: piccolo-orm/piccolo_admin (language: python)

Issue:
Write a Cypress test for media uploads
We recently added media upload support to Piccolo Admin.

You can see here in the UI (running `python -m piccolo_admin.example`):

<img width="698" alt="Screenshot 2022-09-04 at 23 44 35" src="https://user-images.githubusercontent.com/350976/188336270-bed73f51-4dcf-4975-8d45-a8a109104e8d.png">

It would be good to have Cypress tests for these. To learn more, see our [contributing docs](https://piccolo-admin.readthedocs.io/en/latest/contributing/index.html).


Discussion / hints:

Fix patch:
diff --git a/admin_ui/cypress/fixtures/piccolo.jpg b/admin_ui/cypress/fixtures/piccolo.jpg
new file mode 100644
index 00000000..67b8ec58
Binary files /dev/null and b/admin_ui/cypress/fixtures/piccolo.jpg differ


Test patch:
diff --git a/admin_ui/cypress/e2e/FileUpload.cy.ts b/admin_ui/cypress/e2e/FileUpload.cy.ts
new file mode 100644
index 00000000..1ccfe866
--- /dev/null
+++ b/admin_ui/cypress/e2e/FileUpload.cy.ts
@@ -0,0 +1,68 @@
+/// <reference types="Cypress" />
+
+context('Startup', () => {
+    beforeEach(() => {
+        cy.visit('/#/login?nextURL=%2F')
+    })
+
+    it('File upload', () => {
+        // Fill the username
+        cy.get('[name="username"]')
+            .type('piccolo')
+            .should('have.value', 'piccolo')
+
+        // Fill the password
+        cy.get('[name="password"]')
+            .type('piccolo123')
+            .should('have.value', 'piccolo123')
+
+        // Locate and submit the form
+        cy.get('form').submit();
+
+        // Verify the app redirected you to the admin page
+        cy.location('pathname', { timeout: 10000 })
+            .should('eq', '/');
+
+        // Verify the page title is "Piccolo Admin"
+        cy.title()
+            .should('eq', 'Piccolo Admin');
+
+        cy.contains('director').click();
+
+        // Update record
+        cy.wait(2000);
+
+        cy.get('a[href*="#/director/8"]')
+            .click();
+
+        cy.contains('h1', 'Edit director');
+
+        // Select file to upload
+        cy.get('input[type=file]').selectFile({
+            contents: 'cypress/fixtures/piccolo.jpg',
+            mimeType: 'image/jpeg'
+        })
+
+        cy.wait(3000);
+
+        // Locate and submit the form
+        cy.get('form').submit();
+
+        // Go back to directors page
+        cy.contains('a', 'Back').click();
+
+        cy.wait(2000);
+
+        // View the uploaded file
+        cy.contains('table tr td span a', '.jpg')
+            .click();
+
+        cy.wait(3000);
+
+        // Close preview of uploaded file
+        cy.get('div#media_viewer div.top_bar p.close a')
+            .click();
+
+    });
+
+});
\ No newline at end of file