Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cannot type in draftjs-based editors #596

Closed
dziamid opened this issue Aug 18, 2017 · 22 comments · Fixed by #2016
Closed

Cannot type in draftjs-based editors #596

dziamid opened this issue Aug 18, 2017 · 22 comments · Fixed by #2016
Assignees
Labels
pkg/driver This is due to an issue in the packages/driver directory type: bug
Milestone

Comments

@dziamid
Copy link

dziamid commented Aug 18, 2017

Current behavior:

image

Desired behavior:

image

How to reproduce:

https://github.com/dziamid/cypress-draftjs

Test code:

describe('React RTE', function(){

  it('i cannot simply type', function () {

    cy
        .visit('https://react-rte.org/demo')
        .get('[contenteditable]').eq(0).type('I am typing')
        .get('textarea').eq(0).contains('I am typing')
  });


})
  • Operating System:
    Ubuntu 16.04
  • Cypress Version:
    Cypress CLI: 0.13.1
    Cypress App: 0.19.4
  • Browser Version:
    Chrome 59
    Electron 53
@brian-mann
Copy link
Member

We'll take a look but we have a ton of cy.type improvements coming in 0.20.0 which are already done. This has likely already been fixed but we'll double check today.

@jennifer-shehane
Copy link
Member

Can confirm, is a bug, still happens in 0.20.0

@tomekbonior
Copy link

looks like issue still occurs
@dziamid Did you sort it out somehow?

@jennifer-shehane jennifer-shehane added pkg/driver This is due to an issue in the packages/driver directory good first issue Good for newcomers stage: needs investigating Someone from Cypress needs to look at this labels Nov 1, 2017
@vasilesmartup
Copy link

I can type in draft.js component, but no events are triggered, so the text is not being persisten by the app. Tried also triggering manually the events, no luck

@WickyNilliams
Copy link

This is still happening in cypress 1.4.1. This is the major blocker for us adopting cypress, as our app relies heavily on draft-js

@zth
Copy link

zth commented Jan 17, 2018

Same here, it's happening for us as well, and also a major blocker for using Cypress unfortunately. I'd love to be able to help out somehow here, is there anything we can do to help? Open to anything really, we currently just need a way to input simple text and a few key strokes like enter etc.

@jennifer-shehane
Copy link
Member

Fixing this would likely entail knowing the implementation of draft.js, what events they are expecting, seeing what and when events are triggered natively when typing into draft.js and comparing that to our type implementation to see what events we are not triggering or not triggering correctly.

Draft.js code: https://github.com/facebook/draft-js

Our cy.type() code: https://github.com/cypress-io/cypress/blob/develop/packages/driver/src/cy/commands/actions/type.coffee

Also, native events will be helpful when that is out: #311

@WickyNilliams
Copy link

In case this information is of use to you: webdriver/selenium-based testing frameworks do not have this problem. webdriverio's setValue works as expected

@WickyNilliams
Copy link

WickyNilliams commented Jan 17, 2018

I may not understand the type() code correctly, but could this line be to blame? Since draftjs uses contenteditable

return if options.$el.is("textarea,[contenteditable]")

@jennifer-shehane
Copy link
Member

@WickyNilliams No, that code basically means that Cypress does not emit a change or submit event during typing or when pressing 'enter' on contenteditable DOM. Those are indeed not fired when typing or pressing enter when manually typing into draft.js (I am using their demo as reference).

@WickyNilliams
Copy link

I managed to get typing working by dropping down to using DOM directly. Our RichTextEditor component fires changes on blur (only internal state is updated on change), so we needed to focus, then type, then blur the editor. Here is the code. Hope it helps someone:

export const typeIntoDraftEditor = (selector, text) => {
  cy.get(selector).then(input => {
    var textarea = input.get(0);
    textarea.dispatchEvent(new Event("focus"));
 
    var textEvent = document.createEvent("TextEvent");
    textEvent.initTextEvent("textInput", true, true, null, text);
    textarea.dispatchEvent(textEvent);
 
    textarea.dispatchEvent(new Event("blur"));
  });
};

@birchw
Copy link

birchw commented Mar 6, 2018

@WickyNilliams thanks for the function! Any chance you could provide an example call please, I'm struggling to determine what selector to use. Thanks!

@WickyNilliams
Copy link

@dolyst sure!

Draft's Editor component can accept a webDriverTestID prop. This is output as a data-testid attribute.

So, assuming an editor like:

<Editor webDriverTestID="foo" />

Then the following would work with my function above:

typeIntoDraftEditor(`[data-testid="foo"]`, "hello world")

Hope that helps :)

@birchw
Copy link

birchw commented Mar 6, 2018

@WickyNilliams. Thanks very much!

@andreyvital
Copy link

@jennifer-shehane any progress?

@jennifer-shehane
Copy link
Member

No, we are not currently working on this. We welcome pull requests though, even if they are 'work in progress'!

@averboe
Copy link

averboe commented Jun 10, 2018

Having the same issue. Many people are complaining about it. Is there any fix for that?

@kuceb
Copy link
Contributor

kuceb commented Jul 12, 2018

This issue will be fixed in upcoming patch release, along with many other cy.type improvements mentioned in #1241

@jennifer-shehane jennifer-shehane added stage: pending release and removed stage: needs investigating Someone from Cypress needs to look at this labels Jul 12, 2018
@MrDismal
Copy link

Having same issue or at least a similar issue as to others here.
I am able to get Cypress to type in the JS Draft Editor, but once out of the editing state, the text is not saved, but I am able to select all remove the text.

@kuceb
Copy link
Contributor

kuceb commented Jul 16, 2018

Changes are in PR #2016 , with added support for {uparrow} and {downarrow}. Here's an example:

cy.visit('https://draftjs.org/')
cy.get('[contenteditable]').click()
cy.contains('.RichEditor-styleButton', 'Monospace').click()
cy.get('[contenteditable]')
   .type(`
foo
bar
baz{leftarrow}{leftarrow}{uparrow}11{uparrow}22{downarrow}{downarrow}33`
.replace(/\n/g, '{enter}')
   )
   .should('have.prop', 'innerText', '\nfoo22\nb11ar\nbaz33\n')

image

@kuceb kuceb added this to the 3.0.3 milestone Jul 16, 2018
brian-mann pushed a commit that referenced this issue Jul 23, 2018
this grew to a large PR fixing many cy.type issues.

fix #365
fix #420
fix #586 
fix #593 
fix #596 
fix #610 
fix #651
fix #940
fix #1002 
fix #1108
fix #1171
fix #1209 
fix #1234 
fix #1366
fix #1381 
fix #1684 
fix #1686
fix #1926 
fix #2056
fix #2096 
fix #2110 
fix #2173
fix #2187
@jennifer-shehane jennifer-shehane added stage: pending release and removed stage: needs review The PR code is done & tested, needs review stage: needs investigating Someone from Cypress needs to look at this stage: in progress labels Jul 23, 2018
@brettimus
Copy link

Hallo! I know this is closed, but I wanted to ask the draft users on this thread if they

  1. have example repos with cypress tests, and/or
  2. they found any quirks testing draft editors with cypress

@averboe @MrDismal @WickyNilliams @dziamid

@kuceb
Copy link
Contributor

kuceb commented May 10, 2019

@brettimus on quirk is that typing {enter} does not trigger in input event. That's getting fixed in #311

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
pkg/driver This is due to an issue in the packages/driver directory type: bug
Projects
None yet
Development

Successfully merging a pull request may close this issue.