fix: Show "Publish Immediately"

* Close #7195
* Close #8395
* Close #9030
* Close #9967
* Fix #10182

packages/editor/src/components/post-schedule/label.js

@@ -2,13 +2,17 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { dateI18n, getSettings } from '@wordpress/date';
+import { dateI18n, getSettings, moment } from '@wordpress/date';
 import { withSelect } from '@wordpress/data';
 
 function PostScheduleLabel( { date } ) {
 	const settings = getSettings();
-	return date ?
-		dateI18n( settings.formats.datetime, date ) :
+
+	// If the publishing datetime is after the current datetime, show the date
+	// the post is scheduled to go public.
+	// Otherwise we just display "Immediately".
+	return date && moment().isBefore( date ) ?
+		dateI18n( settings.formats.datetimeAbbreviated, date ) :
 		__( 'Immediately' );
 }
 

test/e2e/specs/datepicker.test.js

@@ -0,0 +1,59 @@
+/**
+ * Internal dependencies
+ */
+import { newPost } from '../support/utils';
+
+describe( 'Datepicker', () => {
+	beforeEach( async () => {
+		await newPost();
+	} );
+
+	it( 'should show the publishing date as "Immediately" if the date is not altered', async () => {
+		const publishingDate = await page.$eval(
+			'#edit-post-post-schedule__toggle',
+			( dateLabel ) => dateLabel.textContent
+		);
+
+		expect( publishingDate ).toEqual( 'Immediately' );
+	} );
+
+	it( 'should show the publishing date as "Immediately" if the date is in the past', async () => {
+		// Open the datepicker.
+		await page.click( '#edit-post-post-schedule__toggle' );
+
+		// Change the publishing date to a year in the past.
+		await page.click( '.components-datetime__time__form__container--year' );
+		await page.keyboard.press( 'ArrowDown' );
+
+		// Close the datepicker.
+		await page.click( '#edit-post-post-schedule__toggle' );
+
+		const publishingDate = await page.$eval(
+			'#edit-post-post-schedule__toggle',
+			( dateLabel ) => dateLabel.textContent
+		);
+
+		expect( publishingDate ).toEqual( 'Immediately' );
+	} );
+
+	it( 'should show the publishing date if the date is in the future', async () => {
+		// Open the datepicker.
+		await page.click( '#edit-post-post-schedule__toggle' );
+
+		// Change the publishing date to a year in the future.
+		await page.click( '.components-datetime__time__form__container--year' );
+		await page.keyboard.press( 'ArrowUp' );
+
+		// Close the datepicker.
+		await page.click( '#edit-post-post-schedule__toggle' );
+
+		const publishingDate = await page.$eval(
+			'#edit-post-post-schedule__toggle',
+			( dateLabel ) => dateLabel.textContent
+		);
+
+		expect( publishingDate ).not.toEqual( 'Immediately' );
+		// The expected date format will be "Sep 26, 2018 11:52 pm".
+		expect( publishingDate ).toMatch( /[A-Za-z]{3} \d{1,2}, \d{4} \d{1,2}:\d{2} [ap]m/ );
+	} );
+} );