Merge pull request #881 from facebookresearch/add-cypress-test-to-sim…

…ple-static-task

Add cypress test to simple static task

.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

examples/simple_static_task/server_files/demo_task.html

@@ -31,7 +31,12 @@
       <div class="modal-body" id="modal">&nbsp;</div>
 
       <div class="modal-footer">
-        <button class="btn btn-secondary" data-dismiss="modal" type="button">
+        <button
+          data-cy="close-modal-button"
+          class="btn btn-secondary"
+          data-dismiss="modal"
+          type="button"
+        >
           Close
         </button>
       </div>
@@ -54,11 +59,15 @@
   <div class="row col-xs-12 col-md-12">
     <!-- Instructions -->
     <div class="panel panel-primary">
-      <div class="panel-heading">
+      <div class="panel-heading" data-cy="instructions-panel-header">
         <strong> Instructions </strong>
       </div>
 
-      <div class="panel-body" id="instructions">
+      <div
+        class="panel-body"
+        id="instructions"
+        data-cy="instructions-panel-body"
+      >
         <p>
           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 @@
     <!-- Content Body -->
 
     <div class="input_location">
-      <p>
+      <p data-cy="character-name-paragraph">
         <strong> Character name: </strong>
         <span id="char"> ${character_name} </span>
       </p>
-      <p>
+      <p data-cy="character-description-paragraph">
         <strong> Description: </strong>
         <span id="persona"> ${character_description} </span>
       </p>
@@ -105,14 +114,26 @@
     <section>
       <fieldset>
         <div class="input-group">
-          <label>Rate the matching of character name to description</label>
-          <select class="form-control" name="rating">
+          <label for="character-dropdown"
+            >Rate the matching of character name to description</label
+          >
+          <select
+            id="character-dropdown"
+            class="form-control"
+            name="rating"
+            data-cy="character-dropdown"
+          >
             <option selected="selected" value="">(select one)</option>
             <option value="good">Good</option>
             <option value="passable">Passable</option>
             <option value="bad">Bad</option>
           </select>
-          <input type="file" name="file1" id="upload_files_1" />
+          <input
+            data-cy="character-file-input"
+            type="file"
+            name="file1"
+            id="upload_files_1"
+          />
         </div>
       </fieldset>
     </section>

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",
+  },
+};

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);
+    });
+  });
+});

mephisto/abstractions/blueprints/static_html_task/source/cypress/support/commands.js

@@ -0,0 +1 @@
+import "cypress-file-upload";

mephisto/abstractions/blueprints/static_html_task/source/cypress/support/e2e.js

@@ -0,0 +1 @@
+import "./commands";

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}
         <div>
           <div style={{ display: "flex", justifyContent: "center" }}>
-            <Button type="submit" disabled={submitting}>
+            <Button type="submit" disabled={submitting} data-cy="submit-button">
               <span
                 style={{ marginRight: 5 }}
                 className="glyphicon glyphicon-ok"