srujan/cypress_summarise_pdf

[srujankarthik]

Cypress Testing for Summarise PDF:

• Created custom function (parsing pdf to text)
• Change the cypress.config.tsto include the custom function
• add a pdf to test the pdf parsing to text and input to the text area

[srujankarthik]

describe("Cypress Testing PDF", () => {
  it("Summarise PDF", () => {
    // visit our beautiful website
    cy.visit("/");

    // check if the summarise button is disabled
    cy.get("#summarise-button-id").should("be.disabled");

    // wait
    cy.wait(1000);

    cy.get('input[type="file"]').attachFile("../case-study.pdf");

    // Wait for the PDF content to be processed
    cy.get("textarea#inputted-text").should(
      "have.value",
      "Ethics case study D Developing an Internet Constellation Summary After years of working your way up the corporate ladder, you are now Head of Engineering for a tech startup. The company has won a contract connected to a project creating a constellation of thousands of low Earth orbit satellites. This constellation has the potential to create a reliable system of internet access for areas of the world that are hard to reach by conventional infrastructure. Your company is one of those chosen to develop and build a low-cost, lightweight, efficient satellite that can be produced at scale. This is a huge accomplishment for you, as well as for your company. Dilemma A conference that brings together various project partners is met by protesters whose message is that the internet constellation has several potential negative impacts for nature and human communities. Disparaging comments have been made about your company’s participation in the project on social media. Some members of your team seem quite rattled by the protests, and you convene at a coffee shop to discuss. You remind and explain to your team members that they, and the company, have a duty to the client. Everyone has been hired to deliver a specific project and been excited about overcoming the technical challenges to ensure the project’s success. The team agrees, but also expresses concern about aspects that aren’t in the project remit, such as how the satellite will be maintained and what will happen to it at the end of its life. They demand that you pause your work until an ethical review is conducted. You report all of this to the CEO, who reacts with disappointment and unhappiness at your team’s actions. She argues that the only thing your company is doing is building the satellite: it’s not your responsibility what happens to it afterwards. She feels that it’s your job to get your team back in line and on task. How do you approach this situation? Discussion points How do you respond to this situation? What responsibilities do you have to your team, your boss, and the client? How will you balance these? Are the team’s engineers right to be concerned about the impact of their satellite within the wider constellation, or is it beyond their scope? While nature cannot speak for itself, if it could, what might be its position on the internet constellation? What aspects of the natural world might be affected by this technology in both the shortand long-term? For example, are there any direct or indirect effects on the health of humans and the ecosystems around them? Should the natural world of space be treated the same way as the natural world on earth? Who should make decisions about projects that affect nature on a global scale? What laws or regulations exist that govern internet constellations? Do we have obligations to future generations? Is it possible to have a moral contract with a person that may never be born? How do we know that people in the future, will value the same things we do now? Both creating the internet constellation and preventing its implementation seem to potentially benefit future generations. How do we balance these ‘goods’ and make a decision on how to proceed? Who gets to decide? Further reading This case study was adapted from the UK Engineering Professors Council Engineering Ethics Toolkit. You can find further resources regarding this case study on their website."
    );

    // Assert the word count (adjust the expected word count)
    cy.get("#word-count").should("contain", "572");

    // Assert that the "Summarise" button is enabled
    cy.get("#summarise-button-id").should("be.enabled");

    // Click the "Summarise" button
    cy.get("#summarise-button-id").click();
  });
});

I've tried this way and the test doesn't even run and this is the output I get @henrygoodman

That is one of the reason I tried implementing it the previous way, I wasn't able to find a fix for this

[henrygoodman]

describe("Cypress Testing PDF", () => {
  it("Summarise PDF", () => {
    // visit our beautiful website
    cy.visit("/");

    // check if the summarise button is disabled
    cy.get("#summarise-button-id").should("be.disabled");

    // wait
    cy.wait(1000);

    cy.get('input[type="file"]').attachFile("../case-study.pdf");

    // Wait for the PDF content to be processed
    cy.get("textarea#inputted-text").should(
      "have.value",
      "Ethics case study D Developing an Internet Constellation Summary After years of working your way up the corporate ladder, you are now Head of Engineering for a tech startup. The company has won a contract connected to a project creating a constellation of thousands of low Earth orbit satellites. This constellation has the potential to create a reliable system of internet access for areas of the world that are hard to reach by conventional infrastructure. Your company is one of those chosen to develop and build a low-cost, lightweight, efficient satellite that can be produced at scale. This is a huge accomplishment for you, as well as for your company. Dilemma A conference that brings together various project partners is met by protesters whose message is that the internet constellation has several potential negative impacts for nature and human communities. Disparaging comments have been made about your company’s participation in the project on social media. Some members of your team seem quite rattled by the protests, and you convene at a coffee shop to discuss. You remind and explain to your team members that they, and the company, have a duty to the client. Everyone has been hired to deliver a specific project and been excited about overcoming the technical challenges to ensure the project’s success. The team agrees, but also expresses concern about aspects that aren’t in the project remit, such as how the satellite will be maintained and what will happen to it at the end of its life. They demand that you pause your work until an ethical review is conducted. You report all of this to the CEO, who reacts with disappointment and unhappiness at your team’s actions. She argues that the only thing your company is doing is building the satellite: it’s not your responsibility what happens to it afterwards. She feels that it’s your job to get your team back in line and on task. How do you approach this situation? Discussion points How do you respond to this situation? What responsibilities do you have to your team, your boss, and the client? How will you balance these? Are the team’s engineers right to be concerned about the impact of their satellite within the wider constellation, or is it beyond their scope? While nature cannot speak for itself, if it could, what might be its position on the internet constellation? What aspects of the natural world might be affected by this technology in both the shortand long-term? For example, are there any direct or indirect effects on the health of humans and the ecosystems around them? Should the natural world of space be treated the same way as the natural world on earth? Who should make decisions about projects that affect nature on a global scale? What laws or regulations exist that govern internet constellations? Do we have obligations to future generations? Is it possible to have a moral contract with a person that may never be born? How do we know that people in the future, will value the same things we do now? Both creating the internet constellation and preventing its implementation seem to potentially benefit future generations. How do we balance these ‘goods’ and make a decision on how to proceed? Who gets to decide? Further reading This case study was adapted from the UK Engineering Professors Council Engineering Ethics Toolkit. You can find further resources regarding this case study on their website."
    );

    // Assert the word count (adjust the expected word count)
    cy.get("#word-count").should("contain", "572");

    // Assert that the "Summarise" button is enabled
    cy.get("#summarise-button-id").should("be.enabled");

    // Click the "Summarise" button
    cy.get("#summarise-button-id").click();
  });
});

I've tried this way and the test doesn't even run and this is the output I get @henrygoodman

That is one of the reason I tried implementing it the previous way, I wasn't able to find a fix for this

When you run cy.get() it looks for a CSS selector. Typically in elements where you upload files, it will have an input[type=file] selector, hence the example. It is failing because our element (the input textarea) does not have that CSS selector, since we upload by drag and drop. To fix it, you simply need to give it a selector that allows Cypress to identify the input textarea div (in which the HandlePDFInput stuff gets called, look in Home.tsx for this).

Also you said attachFile, it should be selectFile as per the link I gave, not sure where you got attach from ahaha

cy.get("textarea#inputted-text").selectFile('../case-study.pdf', { action: 'drag-drop' })

Conventionally, you can also add custom selectors to elements just for cypress testing, like data-cy="input_textarea". Then, you can select the element with cy.get('[data-cy="input_textarea"]'). This would also work with cy.get("textarea#inputted-text"). You just have to make sure you're selecting the right element, as right now nothing is being selected (since no div's have a CSS tag with input[type=file]`. https://docs.cypress.io/guides/references/best-practices

Give this ago and should make some progress

[srujankarthik]

Try 1:

const pdfFile = "../case-study.pdf";
describe("Cypress Testing PDF", () => {
  it("Summarise PDF", () => {
    // visit our beautiful website
    cy.visit("/");

    // check if the summarise button is disabled
    cy.get("#summarise-button-id").should("be.disabled");

    // wait
    cy.wait(1000);

    const textareaSelector = '[data-cy="input_textarea"]';

    cy.get(textareaSelector).trigger("dragstart", { dataTransfer: {} });
    cy.get(textareaSelector).trigger("drop", {
      dataTransfer: { files: [pdfFile] },
    });

    cy.get("#summarise-button-id").should("be.enabled");
  });
});

with this you have this

[srujankarthik]

Try 2:

describe("Cypress Testing PDF", () => {
  it("Summarise PDF", () => {
    // visit our beautiful website
    cy.visit("/");

    // check if the summarise button is disabled
    cy.get("#summarise-button-id").should("be.disabled");

    // wait
    cy.wait(1000);

    const textareaSelector = '[data-cy="input_textarea"]';

    const pdfFile = new File(
      [
        "Text Insights is your go-to solution for harnessing the power of Natural Language Processing (NLP). Our product empowers users to effortlessly summarise and analyse text content, providing invaluable insights. Whether you're a student grappling with voluminous textbooks, an educator seeking efficient content evaluation, or a professional navigating the digital landscape, Text Insights has you covered. We prioritise simplicity, customisation, and accuracy, making complex tasks a breeze. Powered by open-source models, our tool offers an ethical and transparent approach to text processing. With Text Insights, you unlock a world of concise understanding and sentiment analysis, enriching your text-related endeavours.Our product empowers users to effortlessly summarise and analyse text content, providing invaluable insights. Whether you're a student grappling with voluminous textbooks, an educator seeking efficient content evaluation, or a professional navigating the digital landscape, Text Insights has you covered. We prioritise simplicity, customisation, and accuracy, making complex tasks a breeze. Powered by open-source models, our tool offers an ethical and transparent approach to text processing. With Text Insights, you unlock a world of concise understanding and sentiment analysis, enriching your text-related endeavours.",
      ],
      "example.pdf",
      {
        type: "application/pdf",
      }
    );

    cy.get(textareaSelector).trigger("dragstart", { dataTransfer: {} });
    cy.get(textareaSelector).trigger("drop", {
      dataTransfer: { files: [pdfFile] },
    });

    cy.wait(3000);

    cy.get("#summarise-button-id").should("be.enabled");
  });
});

this is like this

[srujankarthik]

@henrygoodman so I tried 2 diff ways, one errors out whilst parsing the PDF while the other doesn't recognise it

[srujankarthik]

@gracebilliris or @henrygoodman if anyone of you could approve pr :)

[henrygoodman]

Sorry I was late to re-review this, I have some feedback though which might be useful anyway

• super good we got the drag and drop working, this was the majority of the test so thankful to get that working
• ideally should still have kept assertions for the word count, and ensuring the input text is the same as the expected text in the PDF. this was just an oversight since we just wanted to get this test working more than anything, so I understand 👍
• unused stuff can be removed like readPdf function etc