From 7e191a48faee632165effcf61ca8d91c37cfccad Mon Sep 17 00:00:00 2001
From: BE-Webdesign <cromleyedwin89@gmail.com>
Date: Sun, 3 Dec 2017 12:33:57 -0500
Subject: [PATCH] Snapshot tests for BlockSwitcher component

Adds snapshot tests for the BlockSwitcher component. Covers a couple of
different test cases. This is not at 100% coverage yet, which will
definitely be tackled soon.
---
 editor/components/block-switcher/index.js     |   2 +-
 .../test/__snapshots__/index.js.snap          |  57 ++++++++++
 .../components/block-switcher/test/index.js   | 107 +++++++++++++++++-
 3 files changed, 162 insertions(+), 4 deletions(-)
 create mode 100644 editor/components/block-switcher/test/__snapshots__/index.js.snap

diff --git a/editor/components/block-switcher/index.js b/editor/components/block-switcher/index.js
index 54be221ea1e9e..81bc96d52cf7e 100644
--- a/editor/components/block-switcher/index.js
+++ b/editor/components/block-switcher/index.js
@@ -24,7 +24,7 @@ import { getBlock } from '../../selectors';
  */
 const { DOWN } = keycodes;
 
-function BlockSwitcher( { blocks, onTransform } ) {
+export function BlockSwitcher( { blocks, onTransform } ) {
 	if ( ! blocks || ! blocks[ 0 ] ) {
 		return null;
 	}
diff --git a/editor/components/block-switcher/test/__snapshots__/index.js.snap b/editor/components/block-switcher/test/__snapshots__/index.js.snap
new file mode 100644
index 0000000000000..bea2842cb8b87
--- /dev/null
+++ b/editor/components/block-switcher/test/__snapshots__/index.js.snap
@@ -0,0 +1,57 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BlockSwitcher Test block switcher with blocks 1`] = `
+<div
+  className="editor-block-switcher"
+>
+  <div
+    className="components-toolbar"
+  >
+    <button
+      aria-expanded={false}
+      aria-haspopup="true"
+      aria-label="Change block type"
+      className="components-button components-icon-button editor-block-switcher__toggle"
+      disabled={undefined}
+      onClick={[Function]}
+      onKeyDown={[Function]}
+      type="button"
+    >
+      <svg
+        aria-hidden={true}
+        className="dashicon dashicons-heading"
+        focusable="false"
+        height={20}
+        role="img"
+        viewBox="0 0 20 20"
+        width={20}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M12.5 4v5.2h-5V4H5v13h2.5v-5.2h5V17H15V4"
+        />
+      </svg>
+      <svg
+        aria-hidden={true}
+        className="dashicon dashicons-arrow-down"
+        focusable="false"
+        height={20}
+        role="img"
+        viewBox="0 0 20 20"
+        width={20}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M15 8l-4.03 6L7 8h8z"
+        />
+      </svg>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`BlockSwitcher Test block switcher with multi block of different types. 1`] = `null`;
+
+exports[`BlockSwitcher Test block switcher with multi block of same types. 1`] = `null`;
+
+exports[`BlockSwitcher Test block switcher without blocks 1`] = `null`;
diff --git a/editor/components/block-switcher/test/index.js b/editor/components/block-switcher/test/index.js
index a4976844bf398..ea363a97ac1b1 100644
--- a/editor/components/block-switcher/test/index.js
+++ b/editor/components/block-switcher/test/index.js
@@ -1,11 +1,112 @@
+/**
+ * External dependencies
+ */
+//import React from 'react';
+import renderer from 'react-test-renderer';
+
 /**
  * Internal dependencies
  */
 import { BlockSwitcher } from '../';
 
 describe( 'BlockSwitcher', () => {
-	test( 'sample test', () => {
-		// Just a placeholder.
-		expect( true ).toBe( true );
+	test( 'Test block switcher without blocks', () => {
+		const tree = renderer
+			.create( <BlockSwitcher /> )
+			.toJSON();
+
+		expect( tree ).toMatchSnapshot();
+	} );
+	test( 'Test block switcher with blocks', () => {
+		const block = {
+			attributes: {
+				content: [ 'How are you?' ],
+				nodeName: 'H2',
+			},
+			isValid: true,
+			name: 'core/heading',
+			originalContent: '<h2>How are you?</h2>',
+			uid: 'a1303fd6-3e60-4fff-a770-0e0ea656c5b9',
+		};
+
+		const blocks = [
+			block,
+		];
+
+		const tree = renderer
+			.create( <BlockSwitcher blocks={ blocks } /> )
+			.toJSON();
+
+		expect( tree ).toMatchSnapshot();
+	} );
+
+	test( 'Test block switcher with multi block of different types.', () => {
+		const block1 = {
+			attributes: {
+				content: [ 'How are you?' ],
+				nodeName: 'H2',
+			},
+			isValid: true,
+			name: 'core/heading',
+			originalContent: '<h2>How are you?</h2>',
+			uid: 'a1303fd6-3e60-4fff-a770-0e0ea656c5b9',
+		};
+
+		const block2 = {
+			attributes: {
+				content: [ 'I am great!' ],
+				nodeName: 'P',
+			},
+			isValid: true,
+			name: 'core/text',
+			originalContent: '<p>I am great!</p>',
+			uid: 'b1303fd6-3e60-4fff-a770-0e0ea656c5b9',
+		};
+
+		const blocks = [
+			block1,
+			block2,
+		];
+
+		const tree = renderer
+			.create( <BlockSwitcher blocks={ blocks } /> )
+			.toJSON();
+
+		expect( tree ).toMatchSnapshot();
+	} );
+
+	test( 'Test block switcher with multi block of same types.', () => {
+		const block1 = {
+			attributes: {
+				content: [ 'How are you?' ],
+				nodeName: 'H2',
+			},
+			isValid: true,
+			name: 'core/heading',
+			originalContent: '<h2>How are you?</h2>',
+			uid: 'a1303fd6-3e60-4fff-a770-0e0ea656c5b9',
+		};
+
+		const block2 = {
+			attributes: {
+				content: [ 'I am great!' ],
+				nodeName: 'H3',
+			},
+			isValid: true,
+			name: 'core/heading',
+			originalContent: '<h3>I am great!</h3>',
+			uid: 'b1303fd6-3e60-4fff-a770-0e0ea656c5b9',
+		};
+
+		const blocks = [
+			block1,
+			block2,
+		];
+
+		const tree = renderer
+			.create( <BlockSwitcher blocks={ blocks } /> )
+			.toJSON();
+
+		expect( tree ).toMatchSnapshot();
 	} );
 } );