diff --git a/.github/workflows/cypress-end-to-end-tests.yml b/.github/workflows/cypress-end-to-end-tests.yml index 72596ac5a..b4b21f1ab 100644 --- a/.github/workflows/cypress-end-to-end-tests.yml +++ b/.github/workflows/cypress-end-to-end-tests.yml @@ -10,6 +10,7 @@ jobs: runs-on: ubuntu-latest # Set job outputs to values from filters step below outputs: + simple_static_task: ${{ steps.filter.outputs.simple_static_task }} static_react_task: ${{ steps.filter.outputs.static_react_task }} static_react_task_with_tips: ${{ steps.filter.outputs.static_react_task_with_tips }} mnist: ${{ steps.filter.outputs.mnist }} @@ -29,6 +30,8 @@ jobs: id: filter with: filters: | + simple_static_task: + - 'examples/simple_static_task/**' static_react_task: - 'examples/static_react_task/**' static_react_task_with_tips: @@ -52,6 +55,51 @@ jobs: mephisto-worker-addons: - 'packages/mephisto-worker-addons/src/**' + # Learn more about this test here: https://github.com/facebookresearch/Mephisto/pull/881 + simple_static_task: + needs: changes + if: ${{ (needs.changes.outputs.simple_static_task == 'true') || (needs.changes.outputs.mephisto-task == 'true') || (needs.changes.outputs.abstractions == 'true') || (needs.changes.outputs.data_model == 'true') || (needs.changes.outputs.operations == 'true') || (needs.changes.outputs.tools == 'true')}} + runs-on: ubuntu-latest + steps: + - name: 🔀 Checking out repo + uses: actions/checkout@v2 + + - name: 🐍 Installing python + uses: actions/setup-python@v2 + + - name: 🪨 Setup Node + uses: actions/setup-node@v1 + with: + node-version: 16 + + - name: 🤖 Install Mephisto + run: pip install -e . + + - name: 🖋 Create data directory + run: mkdir -p ~/mephisto/data + + - name: 📂 Set the data directory + run: mephisto config core.main_data_directory ~/mephisto/data + + - name: 📦 Setting up mephisto-task package + run: | + cd packages/mephisto-task + yarn install + yarn build + npm link + + - name: ⌛️ Running cypress tests + uses: cypress-io/github-action@v3.1.0 + with: + install: false + browser: chrome + project: ./mephisto/abstractions/blueprints/static_html_task/source + config-file: ./cypress.config.js + start: python ./examples/simple_static_task/static_test_script.py + wait-on: "http://localhost:3000/?worker_id=x&assignment_id=1" + command-prefix: yarn dlx + headless: true + # Learn more about this test here: https://github.com/facebookresearch/Mephisto/pull/795 static-react-task: needs: changes diff --git a/examples/simple_static_task/server_files/demo_task.html b/examples/simple_static_task/server_files/demo_task.html index a6969eff7..4bce0325f 100644 --- a/examples/simple_static_task/server_files/demo_task.html +++ b/examples/simple_static_task/server_files/demo_task.html @@ -31,7 +31,12 @@
 
-
@@ -54,11 +59,15 @@
-
+
Instructions
-
+

Below you are given a character name and description for someone from a fantasy story. Please rate how well the character description @@ -92,11 +101,11 @@

-

+

Character name: ${character_name}

-

+

Description: ${character_description}

@@ -105,14 +114,26 @@
- - - +
diff --git a/mephisto/abstractions/blueprints/static_html_task/source/cypress.config.js b/mephisto/abstractions/blueprints/static_html_task/source/cypress.config.js new file mode 100644 index 000000000..95d38a32e --- /dev/null +++ b/mephisto/abstractions/blueprints/static_html_task/source/cypress.config.js @@ -0,0 +1,7 @@ +module.exports = { + video: false, + + e2e: { + baseUrl: "http://localhost:3000/?worker_id=x&assignment_id=1", + }, +}; diff --git a/mephisto/abstractions/blueprints/static_html_task/source/cypress/e2e/simple_static_task.cy.js b/mephisto/abstractions/blueprints/static_html_task/source/cypress/e2e/simple_static_task.cy.js new file mode 100644 index 000000000..af92657b0 --- /dev/null +++ b/mephisto/abstractions/blueprints/static_html_task/source/cypress/e2e/simple_static_task.cy.js @@ -0,0 +1,53 @@ +describe("Loads simple_static_task", () => { + it("Makes request for agent", () => { + cy.intercept({ pathname: "/request_agent" }).as("agentRequest"); + cy.visit("/"); + cy.wait("@agentRequest").then((interception) => { + expect(interception.response.statusCode).to.eq(200); + }); + }); + it("Loads correct elements", () => { + cy.get('[data-cy="close-modal-button"]'); + cy.get('[data-cy="instructions-panel-header"]'); + cy.get('[data-cy="instructions-panel-body"]'); + cy.get('[data-cy="character-name-paragraph"]'); + cy.get('[data-cy="character-description-paragraph"]'); + cy.get('[data-cy="character-dropdown"]'); + cy.get('[data-cy="submit-button"]'); + }); +}); + +describe("Submits the html_static_task", () => { + it("Closing starting modal", () => { + cy.get('[data-cy="close-modal-button"]').as("modalButton").click(); + cy.get("@modalButton").should("not.be.visible"); + }); + it("Select a character name description", () => { + cy.get('[data-cy="character-dropdown"]').select("Good"); + cy.get('[data-cy="character-dropdown"]').select("Bad"); + }); + it("Upload a file", () => { + cy.fixture("bliss.png").then((fileContent) => { + cy.get('[data-cy="character-file-input"]').attachFile({ + fileContent: fileContent.toString(), + fileName: "bliss.png", + mimeType: "image/png", + }); + }); + }); + it("Submit the task", () => { + cy.on("window:alert", (txt) => { + expect(txt).to.contains( + 'The task has been submitted! Data: {"rating":"bad"' + ); + expect(txt).to.contains('"name":"bliss.png"'); + expect(txt).to.contains('"size":51824'); + expect(txt).to.contains('"type":"image/png"'); + }); + cy.intercept({ pathname: "/submit_task" }).as("submitTask"); + cy.get('[data-cy="submit-button"]').click(); + cy.wait("@submitTask").then((interception) => { + expect(interception.response.statusCode).to.eq(200); + }); + }); +}); diff --git a/mephisto/abstractions/blueprints/static_html_task/source/cypress/fixtures/bliss.png b/mephisto/abstractions/blueprints/static_html_task/source/cypress/fixtures/bliss.png new file mode 100644 index 000000000..62e30f6e9 Binary files /dev/null and b/mephisto/abstractions/blueprints/static_html_task/source/cypress/fixtures/bliss.png differ diff --git a/mephisto/abstractions/blueprints/static_html_task/source/cypress/support/commands.js b/mephisto/abstractions/blueprints/static_html_task/source/cypress/support/commands.js new file mode 100644 index 000000000..d94c8d8b0 --- /dev/null +++ b/mephisto/abstractions/blueprints/static_html_task/source/cypress/support/commands.js @@ -0,0 +1 @@ +import "cypress-file-upload"; diff --git a/mephisto/abstractions/blueprints/static_html_task/source/cypress/support/e2e.js b/mephisto/abstractions/blueprints/static_html_task/source/cypress/support/e2e.js new file mode 100644 index 000000000..f887c29ae --- /dev/null +++ b/mephisto/abstractions/blueprints/static_html_task/source/cypress/support/e2e.js @@ -0,0 +1 @@ +import "./commands"; diff --git a/mephisto/abstractions/blueprints/static_html_task/source/dev/app.jsx b/mephisto/abstractions/blueprints/static_html_task/source/dev/app.jsx index 42984450f..f6acd4cb9 100644 --- a/mephisto/abstractions/blueprints/static_html_task/source/dev/app.jsx +++ b/mephisto/abstractions/blueprints/static_html_task/source/dev/app.jsx @@ -50,6 +50,18 @@ function MainApp() { handleSubmit(objData); } else { formData.append("USED_AGENT_ID", agentId); + + objData.file1.size === 0 + ? (objData.file1 = {}) + : (objData.file1 = { + lastModified: objData.file1.lastModified + ? objData.file1.lastModified + : -1, + name: objData.file1.name ? objData.file1.name : "", + size: objData.file1.size ? objData.file1.size : -1, + type: objData.file1.type ? objData.file1.type : "", + }); + formData.append("final_string_data", JSON.stringify(objData)); postData("/submit_task", formData) .then((data) => { @@ -121,7 +133,7 @@ function SubmitFrame({ children, onSubmit, currentTask }) { {children}
-