Merge trunk

packages/js/src/dashboard/app.js

@@ -3,14 +3,13 @@
 import { Transition } from "@headlessui/react";
 import { AdjustmentsIcon, BellIcon } from "@heroicons/react/outline";
 import { __ } from "@wordpress/i18n";
+import { SidebarNavigation, useSvgAria } from "@yoast/ui-library";
 import { useEffect, useState } from "@wordpress/element";
-import { Paper, SidebarNavigation, Title, useSvgAria } from "@yoast/ui-library";
-import classNames from "classnames";
 import PropTypes from "prop-types";
 import { Link, Route, Routes, useLocation } from "react-router-dom";
 import { MenuItemLink, YoastLogo } from "../shared-admin/components";
 import { useSelectDashboard } from "./hooks";
-import { FirstTimeConfiguration } from "./routes";
+import { FirstTimeConfiguration, AlertCenter } from "./routes";
 import { moveNotices } from "../helpers/moveNotices";
 
 /**
@@ -47,35 +46,12 @@ const Menu = ( { idSuffix = "" } ) => {
 Menu.propTypes = {
 	idSuffix: PropTypes.string,
 };
-/**
- * @returns {JSX.Element} The dashboard content placeholder.
- */
-const Content = () => {
-	return <>
-		<header className="yst-p-8 yst-border-b yst-border-slate-200">
-			<div className="yst-max-w-screen-sm">
-				<Title>{ __( "Alert center", "wordpress-seo" ) }</Title>
-				<p className="yst-text-tiny yst-mt-3">
-					{ __( "Monitor and manage potential SEO problems affecting your site and stay informed with important notifications and updates.", "wordpress-seo" ) }
-				</p>
-			</div>
-		</header>
-		<div className="yst-h-full yst-p-8">
-			<div
-				className="yst-max-w-6xl yst-grid yst-gap-6 yst-grid-cols-1 sm:yst-grid-cols-2 min-[783px]:yst-grid-cols-1 lg:yst-grid-cols-2 xl:yst-grid-cols-4"
-			>
-				Content
-			</div>
-		</div>
-	</>;
-};
+
 /**
  * @returns {JSX.Element} The app component.
  */
 const App = () => {
 	const { pathname } = useLocation();
-	const isPremium = useSelectDashboard( "selectPreference", [], "isPremium" );
-
 	const [ notices, setNotices ] = useState( [] );
 
 	useEffect( () => {
@@ -103,14 +79,14 @@ const App = () => {
 						<Menu />
 					</SidebarNavigation.Sidebar>
 				</aside>
-				<div className={ classNames( "yst-flex yst-grow yst-flex-wrap", ! isPremium && "xl:yst-pr-[17.5rem]" ) }>
-					<div className="yst-grow yst-space-y-6 yst-mb-8 xl:yst-mb-0">
+				<div className="yst-grow">
+					<div className="yst-space-y-6 yst-mb-8 xl:yst-mb-0">
 						{
 							notices.map( ( notice, index ) => (
 								<div key={ index } className="yst-new-dashboard-notice" dangerouslySetInnerHTML={ { __html: notice.outerHTML } } />
 							) )
 						}
-						<Paper as="main">
+						<main>
 							<Transition
 								key={ pathname }
 								appear={ true }
@@ -120,11 +96,11 @@ const App = () => {
 								enterTo="yst-opacity-100"
 							>
 								<Routes>
-									<Route path="/" element={ <Content /> } />
+									<Route path="/" element={ <AlertCenter /> } />
 									<Route path="/first-time-configuration" element={ <FirstTimeConfiguration /> } />
 								</Routes>
 							</Transition>
-						</Paper>
+						</main>
 					</div>
 				</div>
 			</div>

packages/js/src/dashboard/components/index.js

@@ -1 +1,3 @@
 export { default as RouteLayout } from "./route-layout";
+export { Notifications } from "./notifications";
+export { Problems } from "./problems";

packages/js/src/dashboard/components/notifications.js

@@ -0,0 +1,12 @@
+import { Paper, Title } from "@yoast/ui-library";
+
+/**
+ * @returns {JSX.Element} The notifications component.
+ */
+export const Notifications = () => {
+	return (
+		<Paper className="yst-p-8">
+			<Title>Notifications</Title>
+		</Paper>
+	);
+};

packages/js/src/dashboard/components/problems.js

@@ -0,0 +1,12 @@
+import { Paper, Title } from "@yoast/ui-library";
+
+/**
+ * @returns {JSX.Element} The problems component.
+ */
+export const Problems = () => {
+	return (
+		<Paper className="yst-p-8">
+			<Title>Problems</Title>
+		</Paper>
+	);
+};

packages/js/src/dashboard/routes/alert-center.js

@@ -0,0 +1,25 @@
+import { __ } from "@wordpress/i18n";
+import { Paper, Title } from "@yoast/ui-library";
+import { Notifications, Problems } from "../components";
+
+/**
+ * @returns {JSX.Element} The dashboard content placeholder.
+ */
+export const AlertCenter = () => {
+	return <>
+		<Paper>
+			<header className="yst-p-8 yst-border-b yst-border-slate-200">
+				<div className="yst-max-w-screen-sm">
+					<Title>{ __( "Alert center", "wordpress-seo" ) }</Title>
+					<p className="yst-text-tiny yst-mt-3">
+						{ __( "Monitor and manage potential SEO problems affecting your site and stay informed with important notifications and updates.", "wordpress-seo" ) }
+					</p>
+				</div>
+			</header>
+		</Paper>
+		<div className="yst-grid lg:yst-grid-cols-2 yst-gap-8 yst-my-8">
+			<Problems />
+			<Notifications />
+		</div>
+	</>;
+};

packages/js/src/dashboard/routes/first-time-configuration.js

@@ -1,8 +1,7 @@
 import { __ } from "@wordpress/i18n";
-
+import { Paper } from "@yoast/ui-library";
 import FirstTimeConfigurationSteps from "../../first-time-configuration/first-time-configuration-steps";
 import {
-
 	RouteLayout,
 } from "../components";
 
@@ -11,15 +10,17 @@ import {
  */
 const FirstTimeConfiguration = () => {
 	return (
-		<RouteLayout
-			title={ __( "First-time configuration", "wordpress-seo" ) }
-			description={ __( "Tell us about your site, so we can get it ranked! Let's get your site in tip-top shape for the search engines. Follow these 5 steps to make Google understand what your site is about.", "wordpress-seo" ) }
-		>
-			<hr id="configuration-hr-top" />
-			<div id="yoast-configuration" className="yst-p-8 yst-max-w-[715px]">
-				<FirstTimeConfigurationSteps />
-			</div>
-		</RouteLayout>
+		<Paper>
+			<RouteLayout
+				title={ __( "First-time configuration", "wordpress-seo" ) }
+				description={ __( "Tell us about your site, so we can get it ranked! Let's get your site in tip-top shape for the search engines. Follow these 5 steps to make Google understand what your site is about.", "wordpress-seo" ) }
+			>
+				<hr id="configuration-hr-top" />
+				<div id="yoast-configuration" className="yst-p-8 yst-max-w-[715px]">
+					<FirstTimeConfigurationSteps />
+				</div>
+			</RouteLayout>
+		</Paper>
 	);
 };
 

packages/js/src/dashboard/routes/index.js

@@ -1,2 +1,3 @@
 export { default as FirstTimeConfiguration } from "./first-time-configuration";
+export { AlertCenter } from "./alert-center";
 

packages/yoastseo/spec/appSpec.js

@@ -1,5 +1,6 @@
 import MissingArgument from "../src/errors/missingArgument.js";
 import App from "../src/app.js";
+import Factory from "../src/helpers/factory";
 
 // Mock these function to prevent us from needing an actual DOM in the tests.
 App.prototype.showLoadingDialog = function() {};
@@ -8,23 +9,23 @@ App.prototype.removeLoadingDialog = function() {};
 App.prototype.runAnalyzer = function() {};
 
 // Makes lodash think this is a valid HTML element
-var mockElement = [];
+const mockElement = [];
 mockElement.nodeType = 1;
 
 global.document = {};
 document.getElementById = function() {
 	return mockElement;
 };
 
+const researcher = Factory.buildMockResearcher( {}, true, false );
+
 describe( "Creating an App", function() {
 	it( "throws an error when no args are given", function() {
-		expect( App ).toThrowError( MissingArgument );
+		expect( () => new App() ).toThrowError( MissingArgument );
 	} );
 
 	it( "throws on an empty args object", function() {
-		expect( function() {
-			new App( {} );
-		} ).toThrowError( MissingArgument );
+		expect( () => new App( {} ) ).toThrowError( MissingArgument );
 	} );
 
 	it( "throws on an invalid targets argument", function() {
@@ -50,6 +51,17 @@ describe( "Creating an App", function() {
 		} ).toThrowError( MissingArgument );
 	} );
 
+	it( "throws on a missing researcher argument", function() {
+		expect( function() {
+			new App( {
+				targets: {
+					snippet: "snippetID",
+					output: "outputID",
+				},
+			} );
+		} ).toThrowError( MissingArgument );
+	} );
+
 	it( "should work without an output ID", function() {
 		new App( {
 			targets: {
@@ -60,6 +72,7 @@ describe( "Creating an App", function() {
 					return {};
 				},
 			},
+			researcher: researcher,
 		} );
 	} );
 
@@ -74,6 +87,7 @@ describe( "Creating an App", function() {
 					return {};
 				},
 			},
+			researcher: researcher,
 		} );
 	} );
 } );

packages/yoastseo/spec/languageProcessing/values/ClauseSpec.js

@@ -40,11 +40,5 @@ describe( "a test for serializing and parsing a Clause class instance", function
 			isPassive: false,
 			participles: [],
 		} );
-		expect( mockClause.parse( mockClause.serialize() ) ).toEqual( {
-			_clauseText: "The cat is loved.",
-			_auxiliaries: [ "is" ],
-			_isPassive: false,
-			_participles: [],
-		} );
 	} );
 } );

packages/yoastseo/spec/languageProcessing/values/SentenceSpec.js

@@ -64,15 +64,5 @@ describe( "Creates a sentence object", function() {
 			isPassive: true,
 			sentenceText: "Cats are adored.",
 		} );
-		expect( sentence.parse( sentence.serialize() ) ).toEqual( {
-			_clauses: [
-				{ _auxiliaries: [ "are" ],
-					_clauseText: "Cats are adored",
-					_isPassive: true,
-					_participles: [],
-				} ],
-			_isPassive: true,
-			_sentenceText: "Cats are adored.",
-		} );
 	} );
 } );

packages/yoastseo/spec/scoring/assessments/readability/SubheadingDistributionTooLongAssessmentSpec.js

@@ -3,7 +3,7 @@ import SubheadingDistributionTooLong from "../../../../src/scoring/assessments/r
 import Paper from "../../../../src/values/Paper.js";
 import Factory from "../../../../src/helpers/factory.js";
 import Mark from "../../../../src/values/Mark.js";
-import CornerStoneContentAssessor from "../../../../src/scoring/assessors/cornerstone/contentAssessor.js";
+import CornerstoneContentAssessor from "../../../../src/scoring/assessors/cornerstone/contentAssessor.js";
 import ProductCornerstoneContentAssessor from "../../../../src/scoring/assessors/productPages/cornerstone/contentAssessor.js";
 import DefaultResearcher from "../../../../src/languageProcessing/languages/_default/Researcher.js";
 import EnglishResearcher from "../../../../src/languageProcessing/languages/en/Researcher.js";
@@ -583,7 +583,7 @@ describe( "Language-specific configuration for specific types of content is used
 		expect( assessment._config.farTooMany ).toEqual( japaneseConfig.defaultParameters.farTooMany );
 	} );
 
-	let cornerStoneContentAssessor = new CornerStoneContentAssessor( englishResearcher );
+	let cornerStoneContentAssessor = new CornerstoneContentAssessor( englishResearcher );
 	let productCornerstoneContentAssessor = new ProductCornerstoneContentAssessor( englishResearcher, mockOptions );
 
 	[ cornerStoneContentAssessor, productCornerstoneContentAssessor ].forEach( assessor => {
@@ -617,7 +617,7 @@ describe( "Language-specific configuration for specific types of content is used
 		} );
 	} );
 
-	cornerStoneContentAssessor = new CornerStoneContentAssessor( japaneseResearcher );
+	cornerStoneContentAssessor = new CornerstoneContentAssessor( japaneseResearcher );
 	productCornerstoneContentAssessor = new ProductCornerstoneContentAssessor( japaneseResearcher, mockOptions );
 
 	[ cornerStoneContentAssessor, productCornerstoneContentAssessor ].forEach( assessor => {

packages/yoastseo/spec/scoring/assessors/storePostsAndPages/cornerstone/contentAssessorSpec.js

@@ -185,13 +185,13 @@ describe( "A test for content assessor for English", function() {
 			expect( assessments.length ).toBe( expected );
 			expect( assessments.map( ( { identifier } ) => identifier ) ).toEqual(
 				[
-					"subheadingsTooLong",
 					"textParagraphTooLong",
-					"textSentenceLength",
 					"textTransitionWords",
 					"passiveVoice",
 					"textPresence",
 					"sentenceBeginnings",
+					"subheadingsTooLong",
+					"textSentenceLength",
 					"wordComplexity",
 				]
 			);
@@ -323,10 +323,10 @@ describe( "calculateOverallScore for non-English that uses Default researcher",
 			expect( assessments.length ).toBe( expected );
 			expect( assessments.map( ( { identifier } ) => identifier ) ).toEqual(
 				[
-					"subheadingsTooLong",
 					"textParagraphTooLong",
-					"textSentenceLength",
 					"textPresence",
+					"subheadingsTooLong",
+					"textSentenceLength",
 				]
 			);
 		} );