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.

Sign up for GitHub

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

test(storybook): test added for headings #311

Closed
wants to merge 5 commits into from
Closed

test(storybook): test added for headings #311

Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7af2a03
test(storybook): test added for headings
sanketshevkar Mar 20, 2021
20c5b9d
test(storybook): test added for headings
sanketshevkar Mar 29, 2021
997295b
test(storybook): test added for headings
sanketshevkar Apr 5, 2021
77269c4
feat(storybook): CSS constansts used for testing
sanketshevkar May 9, 2021
ec5ff06
Merge branch 'accordproject:master' into sanketshevkar/14/headingsTest
sanketshevkar Jun 1, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
59 changes: 59 additions & 0 deletions packages/storybook/cypress/storybook/markdownEditorHeader.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
// https://www.cypress.io/blog/2020/02/12/working-with-iframes-in-cypress/
const getIframeDocument = () =>
cy.get("#storybook-preview-iframe").its("0.contentDocument").should("exist");

const getIframeBody = () =>
getIframeDocument().its("body").should("not.be.undefined").then(cy.wrap);

describe(" Placing cursor in paragraph and changing to header 1, 2, 3", () => {
it("Change to Header 3", () => {
cy.visit("/");
//Finds the paragraph and place cursor
getIframeBody().find("#ap-rich-text-editor > p:nth-child(2)").click();
//Find heading dropdown and select heading-3
getIframeBody().find("#ap-rich-text-editor-toolbar > div.ui.simple.dropdown").click();
getIframeBody().find("#ap-rich-text-editor-toolbar > div.ui.active.visible.simple.dropdown > div.menu.transition.visible > div:nth-child(4)").click();
//checks if para changed to heading-3
getIframeBody().find("#This-is-text-This-is-italic-text-This-is-bold-text-This-is-a-undefined-This-is-inline-code").should('have.css', 'font-size', '16px', 'font-weight', 'bold');
//undo and check
getIframeBody().find("#ap-rich-text-editor-toolbar > svg:nth-child(11)").click();
getIframeBody().find("#ap-rich-text-editor > p:nth-child(2)").should('exist');
//redo and check
getIframeBody().find("#ap-rich-text-editor-toolbar > svg:nth-child(12)").click();
getIframeBody().find("#This-is-text-This-is-italic-text-This-is-bold-text-This-is-a-undefined-This-is-inline-code").should('have.css', 'font-size', '16px', 'font-weight', 'bold');
});
Copy link
Member

Choose a reason for hiding this comment

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

Some initial thoughts... (I'll still do more looking into this whole PR)

  • Maybe we make some constants at the top of the file to describe what a lot of these are? For example:
const BUTTON_UNDO = 'svg:nth-child(11)';
const ID_TOOLBAR = '#ap-rich-text-editor-toolbar';
// ... etc

Could potential make this more readable.

  • Similarly, could make a new line for each action:
getIframeBody()
  .find("#ap-rich-text-editor > p:nth-child(2)")
  .should('exist');
  • Not sure I understand the // undo and check part. When undoing, we check to see if the paragraph exists? Is this checking to see if it is a p and no longer has the heading properties?

Copy link
Member Author

Choose a reason for hiding this comment

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

Yup I wanted to check whether it is a paragraph or not. Should I stick to css checking as I did for headers?

I'll make the code format changes and commit the code.

Thanks for the review @irmerk .


it("Change to Header 2", () => {
cy.visit("/");
//Finds the paragraph and place cursor
getIframeBody().find("#ap-rich-text-editor > p:nth-child(2)").click();
//Find heading dropdown and select heading-2
getIframeBody().find("#ap-rich-text-editor-toolbar > div.ui.simple.dropdown").click();
getIframeBody().find("#ap-rich-text-editor-toolbar > div.ui.active.visible.simple.dropdown > div.menu.transition.visible > div:nth-child(3)").click();
//checks if para changed to heading-2
getIframeBody().find("#This-is-text-This-is-italic-text-This-is-bold-text-This-is-a-undefined-This-is-inline-code").should('have.css', 'font-size', '20px', 'font-weight', 'bold');
//undo and check
getIframeBody().find("#ap-rich-text-editor-toolbar > svg:nth-child(11)").click();
getIframeBody().find("#ap-rich-text-editor > p:nth-child(2)").should('exist');
//redo and check
getIframeBody().find("#ap-rich-text-editor-toolbar > svg:nth-child(12)").click();
getIframeBody().find("#This-is-text-This-is-italic-text-This-is-bold-text-This-is-a-undefined-This-is-inline-code").should('have.css', 'font-size', '20px', 'font-weight', 'bold');
});

it("Change to Header 1", () => {
cy.visit("/");
//Finds the paragraph and place cursor
getIframeBody().find("#ap-rich-text-editor > p:nth-child(2)").click();
getIframeBody().find("#ap-rich-text-editor-toolbar > div.ui.simple.dropdown").click();
//Find heading dropdown and select heading-1
getIframeBody().find("#ap-rich-text-editor-toolbar > div.ui.active.visible.simple.dropdown > div.menu.transition.visible > div:nth-child(2)").click();
//checks if para changed to heading-1
getIframeBody().find("#This-is-text-This-is-italic-text-This-is-bold-text-This-is-a-undefined-This-is-inline-code").should('have.css', 'font-size', '25px', 'font-weight', 'bold');
//undo and check
getIframeBody().find("#ap-rich-text-editor-toolbar > svg:nth-child(11)").click();
getIframeBody().find("#ap-rich-text-editor > p:nth-child(2)").should('exist');
//redo and check
getIframeBody().find("#ap-rich-text-editor-toolbar > svg:nth-child(12)").click();
getIframeBody().find("#This-is-text-This-is-italic-text-This-is-bold-text-This-is-a-undefined-This-is-inline-code").should('have.css', 'font-size', '25px', 'font-weight', 'bold');
});
});