initial commit

packages/woocommerce-blocks/assets/js/base/components/label/test/__snapshots__/index.js.snap

@@ -0,0 +1,62 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Label with wrapperElement should render both label and screen reader label 1`] = `
+<label
+  className="foo-bar"
+  data-foo="bar"
+>
+  <span
+    aria-hidden="true"
+  >
+    Lorem
+  </span>
+  <span
+    className="screen-reader-text"
+  >
+    Ipsum
+  </span>
+</label>
+`;
+
+exports[`Label with wrapperElement should render only the label 1`] = `
+<label
+  className="foo-bar"
+  data-foo="bar"
+>
+  Lorem
+</label>
+`;
+
+exports[`Label with wrapperElement should render only the screen reader label 1`] = `
+<label
+  className="foo-bar screen-reader-text"
+  data-foo="bar"
+>
+  Ipsum
+</label>
+`;
+
+exports[`Label without wrapperElement should render both label and screen reader label 1`] = `
+Array [
+  <span
+    aria-hidden="true"
+  >
+    Lorem
+  </span>,
+  <span
+    className="screen-reader-text"
+  >
+    Ipsum
+  </span>,
+]
+`;
+
+exports[`Label without wrapperElement should render only the label 1`] = `"Lorem"`;
+
+exports[`Label without wrapperElement should render only the screen reader label 1`] = `
+<span
+  className="screen-reader-text"
+>
+  Ipsum
+</span>
+`;

packages/woocommerce-blocks/assets/js/base/components/label/test/index.js

@@ -0,0 +1,83 @@
+/**
+ * External dependencies
+ */
+import TestRenderer from 'react-test-renderer';
+
+/**
+ * Internal dependencies
+ */
+import Label from '../';
+
+describe( 'Label', () => {
+	describe( 'without wrapperElement', () => {
+		test( 'should render both label and screen reader label', () => {
+			const component = TestRenderer.create(
+				<Label label="Lorem" screenReaderLabel="Ipsum" />
+			);
+
+			expect( component.toJSON() ).toMatchSnapshot();
+		} );
+
+		test( 'should render only the label', () => {
+			const component = TestRenderer.create( <Label label="Lorem" /> );
+
+			expect( component.toJSON() ).toMatchSnapshot();
+		} );
+
+		test( 'should render only the screen reader label', () => {
+			const component = TestRenderer.create(
+				<Label screenReaderLabel="Ipsum" />
+			);
+
+			expect( component.toJSON() ).toMatchSnapshot();
+		} );
+	} );
+
+	describe( 'with wrapperElement', () => {
+		test( 'should render both label and screen reader label', () => {
+			const component = TestRenderer.create(
+				<Label
+					label="Lorem"
+					screenReaderLabel="Ipsum"
+					wrapperElement="label"
+					wrapperProps={ {
+						className: 'foo-bar',
+						'data-foo': 'bar',
+					} }
+				/>
+			);
+
+			expect( component.toJSON() ).toMatchSnapshot();
+		} );
+
+		test( 'should render only the label', () => {
+			const component = TestRenderer.create(
+				<Label
+					label="Lorem"
+					wrapperElement="label"
+					wrapperProps={ {
+						className: 'foo-bar',
+						'data-foo': 'bar',
+					} }
+				/>
+			);
+
+			expect( component.toJSON() ).toMatchSnapshot();
+		} );
+
+		test( 'should render only the screen reader label', () => {
+			const component = TestRenderer.create(
+				<Label
+					screenReaderLabel="Ipsum"
+					wrapperElement="label"
+					wrapperProps={ {
+						className: 'foo-bar',
+						'data-foo': 'bar',
+					} }
+				/>
+			);
+
+			expect( component.toJSON() ).toMatchSnapshot();
+		} );
+	} );
+} );