Skip to content

Effects: Restore new post setup as non-dirtying change#4836

Merged
aduth merged 5 commits intomasterfrom
fix/save-auto-draft-empty-title
Feb 7, 2018
Merged

Effects: Restore new post setup as non-dirtying change#4836
aduth merged 5 commits intomasterfrom
fix/save-auto-draft-empty-title

Conversation

@aduth
Copy link
Copy Markdown
Member

@aduth aduth commented Feb 2, 2018

Regression introduced in #3983

This pull request seeks to resolve an issue where saving a new post which has an empty title will set the title as "Auto Draft".

When starting a new post, a temporary post is created with "Auto Draft" as the assigned title. Obviously, we do not want to display this title to the user, so we artificially set the title to an empty string during editor initialization.

In the case that the user never sets a title of their own, we must also include the empty string value in the save request. This relies on a complex exchange whereby:

  • The empty title is considered a change, so as to be included in the save payload
  • But the change is not dirtying so that the user is not prompted about changes when navigating away from an untouched editor

To resolve this, we can add additional reset types to the withChangeDetection higher-order reducer applied for state.editor. The RESET_POST action must occur before SETUP_NEW_POST so the post setup is considered a change, but SETUP_NEW_POST must also reset change detection.

In the course of implementing this, I also discovered that SETUP_NEW_POST should also be a reset type for change history, as prior to this change, "Undo" would be offered as an option for a new post.

Next steps:

I'd encourage exploring two tasks in the future, as this flow is rather fragile:

  • We should not have to artificially make changes on behalf of the user when the editor initializes. Can we avoid "Auto Draft" ever being a title for the auto-draft post?
  • Add integration tests for editor initialization, e.g. "After the editor finishes loading, there should be a title change, but not dirty, and with no history". I was going to add these here, but given how the editor store is shared, it wasn't clear how we isolate/reset/tear down this in unit tests (cc @youknowriad @gziolo).
    • Edit: I guess these could be e2e tests? Added in 7dce790.

Testing instructions:

  1. Navigate to Posts > Add New
  2. Refresh the page
  3. Note that there is no prompt about unsaved changes
  4. Note that the Undo button is disabled
  5. Add some content
  6. Save the post
  7. Note that the title is still empty after save

@aduth aduth added [Type] Bug An existing feature does not function as intended [Priority] High Used to indicate top priority items that need quick attention labels Feb 2, 2018
@aduth aduth added this to the 2.2 milestone Feb 2, 2018
@aduth aduth force-pushed the fix/save-auto-draft-empty-title branch from 7dce790 to daac48c Compare February 6, 2018 21:01
@aduth aduth force-pushed the fix/save-auto-draft-empty-title branch from daac48c to 88f922e Compare February 6, 2018 21:24
@aduth
Copy link
Copy Markdown
Member Author

aduth commented Feb 6, 2018

The added E2E tests here illustrated a pain point, which is that Cypress provides Mocha + Chai in its testing environment, conflicting with ESLint rules we have configured for Jest (extended via eslint-plugin-jest/recommended. I've resorted to copying the root configuration into a new root configuration for the Cypress tests, removing the Jest/React-specific references, and adding those necessary to support Mocha/Chai.

// `.eslintrc.json`, the exceptions being that since Cypress is preconfigured
// with Mocha & Chai, we need to broadly disable the Jest rules, which is
// otherwise difficult to do. This file could be made more minimal once all of
// the Gutenberg-specific rules are migrated to a common WordPress config.
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wonder if there's a way to override the root config instead of copying it

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agreed, that would be the best solution. I would leave it as it is. We are going to tackle it together with @ntwb as part of @wordpress/packages soon.

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The previous iteration of the configuration file is how to override the root config (i.e. ESLint will look in all parent directories until it finds a config with root: true). The problem is that by opting into many Jest presets, there are many rules and env values we'd need to disable individually.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's more complicated than I would expect.

cy.get( '.editor-history__redo:not( :disabled )' ).should( 'not.exist' );
} );

it( 'Should not prompt to confirm unsaved changes', ( done ) => {
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was afraid this was a false positive because I thought Cypress would remove all popovers but confirmed it's breaking correctly when needed.


cy.reload();
} );
} );
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

❤️ Nice test

Copy link
Copy Markdown
Contributor

@youknowriad youknowriad left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM 👍

@aduth aduth merged commit 149204d into master Feb 7, 2018
@aduth aduth deleted the fix/save-auto-draft-empty-title branch February 7, 2018 23:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Priority] High Used to indicate top priority items that need quick attention [Type] Bug An existing feature does not function as intended

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants