-
Notifications
You must be signed in to change notification settings - Fork 904
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #21721 from Yoast/html-parser/text-alignment-asses…
…sment Uses the HTML parser for the text alignment assessment
- Loading branch information
Showing
7 changed files
with
165 additions
and
180 deletions.
There are no files selected for viewing
14 changes: 0 additions & 14 deletions
14
packages/yoastseo/spec/languageProcessing/helpers/html/findEmptyDivisionsSpec.js
This file was deleted.
Oops, something went wrong.
90 changes: 53 additions & 37 deletions
90
packages/yoastseo/spec/languageProcessing/researches/getLongCenterAlignedTextsSpec.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,91 +1,107 @@ | ||
| import getLongCenterAlignedTexts from "../../../src/languageProcessing/researches/getLongCenterAlignedTexts.js"; | ||
| import EnglishResearcher from "../../../src/languageProcessing/languages/en/Researcher"; | ||
| import Paper from "../../../src/values/Paper.js"; | ||
| import buildTree from "../../specHelpers/parse/buildTree"; | ||
|
|
||
| describe( "a test for getting elements of too long center aligned text", function() { | ||
| it( "returns the text and type of element if a too long paragraph with center aligned text is found", function() { | ||
| const mockPaper = new Paper( "<p class=\"has-text-align-center\">This is a paragraph with a bit more than fifty characters." + | ||
| "</p><p class=\"has-text-align-center\">This is a short text.</p>" ); | ||
| expect( getLongCenterAlignedTexts( mockPaper ) ).toEqual( [ | ||
| { text: "<p class='has-text-align-center'>This is a paragraph with a bit more than fifty characters.</p>", elementType: "paragraph" }, | ||
| ] ); | ||
| const mockResearcher = new EnglishResearcher( mockPaper ); | ||
| buildTree( mockPaper, mockResearcher ); | ||
| expect( getLongCenterAlignedTexts( mockPaper ).length ).toEqual( 1 ); | ||
| expect( getLongCenterAlignedTexts( mockPaper )[ 0 ].innerText() ).toEqual( | ||
| "This is a paragraph with a bit more than fifty characters." ); | ||
| } ); | ||
| it( "returns one object for each too long paragraph", function() { | ||
| const mockPaper = new Paper( "<p class=\"has-text-align-center\">This is a paragraph with a bit more than fifty characters." + | ||
| "</p><p class=\"has-text-align-center\">This is another paragraph with a bit more than fifty characters.</p>" ); | ||
| expect( getLongCenterAlignedTexts( mockPaper ) ).toEqual( [ | ||
| { | ||
| text: "<p class='has-text-align-center'>This is a paragraph with a bit more than fifty characters.</p>", | ||
| elementType: "paragraph", | ||
| }, | ||
| { | ||
| text: "<p class='has-text-align-center'>This is another paragraph with a bit more than fifty characters.</p>", | ||
| elementType: "paragraph", | ||
| }, | ||
| ] ); | ||
| const mockResearcher = new EnglishResearcher( mockPaper ); | ||
| buildTree( mockPaper, mockResearcher ); | ||
| expect( getLongCenterAlignedTexts( mockPaper ).length ).toEqual( 2 ); | ||
| expect( getLongCenterAlignedTexts( mockPaper )[ 0 ].innerText() ).toEqual( | ||
| "This is a paragraph with a bit more than fifty characters." ); | ||
| expect( getLongCenterAlignedTexts( mockPaper )[ 1 ].innerText() ).toEqual( | ||
| "This is another paragraph with a bit more than fifty characters." ); | ||
| } ); | ||
| it( "returns the text and type of element if a too long heading with center aligned text is found", function() { | ||
| const mockPaper = new Paper( "<h2 class=\"has-text-align-center\">This is a heading with a bit more than fifty characters." + | ||
| "</h2><h2 class=\"has-text-align-center\">This is a short heading.</h2>" ); | ||
| expect( getLongCenterAlignedTexts( mockPaper ) ).toEqual( [ | ||
| { text: "<h2 class='has-text-align-center'>This is a heading with a bit more than fifty characters.</h2>", elementType: "heading" }, | ||
| ] ); | ||
| const mockResearcher = new EnglishResearcher( mockPaper ); | ||
| buildTree( mockPaper, mockResearcher ); | ||
| expect( getLongCenterAlignedTexts( mockPaper ).length ).toEqual( 1 ); | ||
| expect( getLongCenterAlignedTexts( mockPaper )[ 0 ].innerText() ).toEqual( | ||
| "This is a heading with a bit more than fifty characters." ); | ||
| } ); | ||
| it( "returns one object for each too long heading", function() { | ||
| const mockPaper = new Paper( "<h3 class=\"has-text-align-center\">This is a heading with a bit more than fifty characters." + | ||
| "</h3><h4 class=\"has-text-align-center\">This is another heading with a bit more than fifty characters.</h4>" ); | ||
| expect( getLongCenterAlignedTexts( mockPaper ) ).toEqual( [ | ||
| { | ||
| text: "<h3 class='has-text-align-center'>This is a heading with a bit more than fifty characters.</h3>", | ||
| elementType: "heading", | ||
| }, | ||
| { | ||
| text: "<h4 class='has-text-align-center'>This is another heading with a bit more than fifty characters.</h4>", | ||
| elementType: "heading", | ||
| }, | ||
| ] ); | ||
| const mockResearcher = new EnglishResearcher( mockPaper ); | ||
| buildTree( mockPaper, mockResearcher ); | ||
| expect( getLongCenterAlignedTexts( mockPaper ).length ).toEqual( 2 ); | ||
| expect( getLongCenterAlignedTexts( mockPaper )[ 0 ].innerText() ).toEqual( | ||
| "This is a heading with a bit more than fifty characters." ); | ||
| expect( getLongCenterAlignedTexts( mockPaper )[ 1 ].innerText() ).toEqual( | ||
| "This is another heading with a bit more than fifty characters." ); | ||
| } ); | ||
| it( "returns the objects for both headings and paragraphs when both contain too long center aligned text", function() { | ||
| const mockPaper = new Paper( "<h5 class=\"has-text-align-center\">This is a heading with a bit more than fifty characters." + | ||
| "</h5><p class=\"has-text-align-center\">This is a paragraph with a bit more than fifty characters.</p>" ); | ||
| expect( getLongCenterAlignedTexts( mockPaper ) ).toEqual( [ | ||
| { text: "<p class='has-text-align-center'>This is a paragraph with a bit more than fifty characters.</p>", elementType: "paragraph" }, | ||
| { text: "<h5 class='has-text-align-center'>This is a heading with a bit more than fifty characters.</h5>", elementType: "heading" }, | ||
| ] ); | ||
| const mockResearcher = new EnglishResearcher( mockPaper ); | ||
| buildTree( mockPaper, mockResearcher ); | ||
| expect( getLongCenterAlignedTexts( mockPaper ).length ).toEqual( 2 ); | ||
| expect( getLongCenterAlignedTexts( mockPaper )[ 0 ].innerText() ).toEqual( | ||
| "This is a paragraph with a bit more than fifty characters." ); | ||
| expect( getLongCenterAlignedTexts( mockPaper )[ 1 ].innerText() ).toEqual( | ||
| "This is a heading with a bit more than fifty characters." ); | ||
| } ); | ||
| it( "also detects the center-aligned elements if the class name is in single quotes", function() { | ||
| const mockPaper = new Paper( "<p class='has-text-align-center'>This is a paragraph with a bit more than fifty characters." + | ||
| "</p><p class='has-text-align-center'>This is a short text.</p>" ); | ||
| expect( getLongCenterAlignedTexts( mockPaper ) ).toEqual( [ | ||
| { text: "<p class='has-text-align-center'>This is a paragraph with a bit more than fifty characters.</p>", elementType: "paragraph" }, | ||
| ] ); | ||
| const mockResearcher = new EnglishResearcher( mockPaper ); | ||
| buildTree( mockPaper, mockResearcher ); | ||
| expect( getLongCenterAlignedTexts( mockPaper ).length ).toEqual( 1 ); | ||
| expect( getLongCenterAlignedTexts( mockPaper )[ 0 ].innerText() ).toEqual( | ||
| "This is a paragraph with a bit more than fifty characters." ); | ||
| } ); | ||
| it( "also detects the center-aligned elements if there are multiple class names", function() { | ||
| const mockPaper = new Paper( "<p class='block-editor-rich-text__editable block-editor-block-list__block" + | ||
| " wp-block has-text-align-center is-selected wp-block-heading rich-text'>This is a paragraph with a bit more than fifty characters." + | ||
| "</p><p class='has-text-align-center'>This is a short text.</p>" ); | ||
| expect( getLongCenterAlignedTexts( mockPaper ) ).toEqual( [ | ||
| { text: "<p class='block-editor-rich-text__editable block-editor-block-list__block wp-block has-text-align-center is-selected " + | ||
| "wp-block-heading rich-text'>This is a paragraph with a bit more than fifty characters.</p>", elementType: "paragraph" }, | ||
| ] ); | ||
| const mockResearcher = new EnglishResearcher( mockPaper ); | ||
| buildTree( mockPaper, mockResearcher ); | ||
| expect( getLongCenterAlignedTexts( mockPaper ).length ).toEqual( 1 ); | ||
| expect( getLongCenterAlignedTexts( mockPaper )[ 0 ].innerText() ).toEqual( | ||
| "This is a paragraph with a bit more than fifty characters." ); | ||
| } ); | ||
| it( "does not include html tags in the character count", function() { | ||
| const mockPaper = new Paper( "<p class=\"has-text-align-center\">This text is too long if you count html tags.</p>" ); | ||
| const mockResearcher = new EnglishResearcher( mockPaper ); | ||
| buildTree( mockPaper, mockResearcher ); | ||
| expect( getLongCenterAlignedTexts( mockPaper ) ).toEqual( [] ); | ||
| } ); | ||
| it( "returns an empty array if no long center aligned texts are found", function() { | ||
| const mockPaper = new Paper( "<p>Lorem ipsum</p><h3>heading</h3>" ); | ||
| const mockResearcher = new EnglishResearcher( mockPaper ); | ||
| buildTree( mockPaper, mockResearcher ); | ||
| expect( getLongCenterAlignedTexts( mockPaper ) ).toEqual( [] ); | ||
| } ); | ||
| it( "returns an empty array if a long center aligned text is found inside a blockquote", function() { | ||
| const mockPaper = new Paper( "<blockquote><p class=\"has-text-align-center\">Lorem ipsum</p></blockquote>" ); | ||
| const mockResearcher = new EnglishResearcher( mockPaper ); | ||
| buildTree( mockPaper, mockResearcher ); | ||
| expect( getLongCenterAlignedTexts( mockPaper ) ).toEqual( [] ); | ||
| } ); | ||
| it( "returns an empty array if an element with short center aligned text is found", function() { | ||
| const mockPaper = new Paper( "<p class=\"has-text-align-center\">Lorem ipsum</p><h4 class=\"has-text-align-center\">Lorem ipsum</h4>" ); | ||
| const mockResearcher = new EnglishResearcher( mockPaper ); | ||
| buildTree( mockPaper, mockResearcher ); | ||
| expect( getLongCenterAlignedTexts( mockPaper ) ).toEqual( [] ); | ||
| } ); | ||
| it( "returns an empty array if the element with center alignment is not a paragraph or a heading", function() { | ||
| const mockPaper = new Paper( "<ul class=\"has-text-align-center\"><li>List item</li></ul>" ); | ||
| const mockResearcher = new EnglishResearcher( mockPaper ); | ||
| buildTree( mockPaper, mockResearcher ); | ||
| expect( getLongCenterAlignedTexts( mockPaper ) ).toEqual( [] ); | ||
| } ); | ||
| } ); |
Oops, something went wrong.