Merge pull request #6653 from wordpress-mobile/test/add-dark-mode-tests

test: Add dark mode tests

__device-tests__/gutenberg-editor-gallery-visual.test.js

@@ -2,7 +2,8 @@
  * Internal dependencies
  */
 const { blockNames } = editorPage;
-import { takeScreenshot } from './utils';
+const { toggleDarkMode } = e2eUtils;
+import { takeScreenshot, takeScreenshotByElement } from './utils';
 
 describe( 'Gutenberg Editor Visual test for Gallery Block', () => {
 	it( 'should be able to render the placeholder correctly', async () => {
@@ -31,4 +32,22 @@ describe( 'Gutenberg Editor Visual test for Gallery Block', () => {
 		const screenshot = await takeScreenshot();
 		expect( screenshot ).toMatchImageSnapshot();
 	} );
+
+	it( 'should display correct colors for dark mode', async () => {
+		await toggleDarkMode( editorPage.driver, true );
+		await editorPage.initializeEditor( {
+			initialData: [ e2eTestData.galleryBlockTwoImages ].join( '\n\n' ),
+		} );
+
+		const block = await editorPage.selectBlock(
+			await editorPage.getBlockAtPosition( blockNames.gallery )
+		);
+		await editorPage.driver.pause( 5000 ); // Wait for images to load
+
+		const screenshot = await takeScreenshotByElement( block, {
+			padding: 7,
+		} );
+		await toggleDarkMode( editorPage.driver, false );
+		expect( screenshot ).toMatchImageSnapshot();
+	} );
 } );

__device-tests__/gutenberg-editor-media-text-visual.test.js

@@ -0,0 +1,39 @@
+/**
+ * Internal dependencies
+ */
+const { blockNames } = editorPage;
+const { toggleDarkMode } = e2eUtils;
+import { takeScreenshotByElement } from './utils';
+
+const mediaTextBlock = `<!-- wp:media-text -->
+<div class="wp-block-media-text is-stacked-on-mobile"><figure class="wp-block-media-text__media"></figure><div class="wp-block-media-text__content"><!-- wp:paragraph -->
+<p></p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:media-text -->`;
+
+describe( 'Gutenberg Editor Visual test for Media & Text Block', () => {
+	it( 'should display correct colors for dark mode', async () => {
+		await toggleDarkMode( editorPage.driver, true );
+		await editorPage.initializeEditor( {
+			initialData: mediaTextBlock,
+		} );
+
+		const tapOutsideMediaButton = {
+			offset: {
+				x: ( width ) => Math.floor( width * -0.5 + 20 ),
+				y: ( height ) => Math.floor( height * -0.5 + 20 ),
+			},
+		};
+
+		const block = await editorPage.selectBlock(
+			await editorPage.getBlockAtPosition( blockNames.mediaText ),
+			tapOutsideMediaButton
+		);
+
+		const screenshot = await takeScreenshotByElement( block, {
+			padding: 7,
+		} );
+		await toggleDarkMode( editorPage.driver, false );
+		expect( screenshot ).toMatchImageSnapshot();
+	} );
+} );

__device-tests__/gutenberg-editor-quote-visual.test.js

@@ -0,0 +1,28 @@
+/**
+ * Internal dependencies
+ */
+const { blockNames } = editorPage;
+const { toggleDarkMode } = e2eUtils;
+import { takeScreenshotByElement } from './utils';
+
+const quoteBlock = `<!-- wp:quote -->
+<blockquote class="wp-block-quote"><!-- wp:paragraph -->
+<p>Hello, world!</p>
+<!-- /wp:paragraph --><cite>A person</cite></blockquote>
+<!-- /wp:quote -->`;
+
+describe( 'Gutenberg Editor Visual test for Quote Block', () => {
+	it( 'should display correct colors for dark mode', async () => {
+		await toggleDarkMode( editorPage.driver, true );
+		await editorPage.initializeEditor( {
+			initialData: quoteBlock,
+		} );
+
+		const block = await editorPage.getBlockAtPosition( blockNames.quote );
+		const screenshot = await takeScreenshotByElement( block, {
+			padding: 7,
+		} );
+		await toggleDarkMode( editorPage.driver, false );
+		expect( screenshot ).toMatchImageSnapshot();
+	} );
+} );

__device-tests__/gutenberg-editor-shortcode-visual.test.js

@@ -0,0 +1,24 @@
+/**
+ * Internal dependencies
+ */
+const { blockNames } = editorPage;
+const { toggleDarkMode } = e2eUtils;
+import { takeScreenshotByElement } from './utils';
+
+const shortcodeBlock = `<!-- wp:shortcode /-->`;
+
+describe( 'Gutenberg Editor Visual test for Shortcode Block', () => {
+	it( 'should display correct colors for dark mode', async () => {
+		await toggleDarkMode( editorPage.driver, true );
+		await editorPage.initializeEditor( {
+			initialData: shortcodeBlock,
+		} );
+
+		const block = await editorPage.getBlockAtPosition(
+			blockNames.shortcode
+		);
+		const screenshot = await takeScreenshotByElement( block );
+		await toggleDarkMode( editorPage.driver, false );
+		expect( screenshot ).toMatchImageSnapshot();
+	} );
+} );