Head and meta tags handling (#1537)

* Created required tags.

* Added tests.

* Using syntetictag instead of synteticTag.

* synthetictag spelling change.

* Addressed PR Changes

* Removing title tags filtering.

* Removed snapshot testing for HeadProvider component.

* Renaming HeadProvider to VeniaHeadProvider.

* Minor name change.

* Refactoring tests to not use @testing-library.

* Adding site name to venia ui upward yml.

* Moving head provider to venia-ui.

* Wrapping app with head provider.

* Changing title upon lading in category page.

* Changing title upon landing in product page.

* Snapshop update.

* Not showing category title while loading.

* Snapshot update.

* Reverting minor changes.

* Snapshot update.

* Mock react-head components

* Fix App snapshot

packages/venia-ui/lib/RootComponents/Category/__tests__/__snapshots__/categoryContent.spec.js.snap

@@ -1,32 +1,37 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders the correct tree 1`] = `
-<article
-  className="a"
->
-  <h1
-    className="b"
+<React.Fragment>
+  <Title>
+    Venia
+  </Title>
+  <article
+    className="a"
   >
-    <div />
-  </h1>
-  <section
-    className="c"
-  >
-    <Classify(Gallery)
-      data={
-        Object {
-          "id": 1,
+    <h1
+      className="b"
+    >
+      <div />
+    </h1>
+    <section
+      className="c"
+    >
+      <Classify(Gallery)
+        data={
+          Object {
+            "id": 1,
+          }
         }
-      }
-      pageSize={6}
-    />
-  </section>
-  <div
-    className="d"
-  >
-    <Classify(Pagination)
-      pageControl={Object {}}
-    />
-  </div>
-</article>
+        pageSize={6}
+      />
+    </section>
+    <div
+      className="d"
+    >
+      <Classify(Pagination)
+        pageControl={Object {}}
+      />
+    </div>
+  </article>
+</React.Fragment>
 `;

packages/venia-ui/lib/RootComponents/Category/categoryContent.js

@@ -1,6 +1,7 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import { shape, string } from 'prop-types';
 
+import { Title } from '../../components/Head';
 import { mergeClasses } from '../../classify';
 import FilterModal from '../../components/FilterModal';
 import Gallery from '../../components/Gallery';
@@ -13,6 +14,7 @@ const CategoryContent = props => {
     const filters = data ? data.products.filters : null;
     const items = data ? data.products.items : null;
     const title = data ? data.category.name : null;
+    const titleContent = title ? `${title} - Venia` : 'Venia';
 
     const header = filters ? (
         <div className={classes.headerButtons}>
@@ -27,21 +29,23 @@ const CategoryContent = props => {
     ) : null;
 
     const modal = filters ? <FilterModal filters={filters} /> : null;
-
     return (
-        <article className={classes.root}>
-            <h1 className={classes.title}>
-                <div className={classes.categoryTitle}>{title}</div>
-            </h1>
-            {header}
-            <section className={classes.gallery}>
-                <Gallery data={items} pageSize={pageSize} />
-            </section>
-            <div className={classes.pagination}>
-                <Pagination pageControl={pageControl} />
-            </div>
-            {modal}
-        </article>
+        <Fragment>
+            <Title>{titleContent}</Title>
+            <article className={classes.root}>
+                <h1 className={classes.title}>
+                    <div className={classes.categoryTitle}>{title}</div>
+                </h1>
+                {header}
+                <section className={classes.gallery}>
+                    <Gallery data={items} pageSize={pageSize} />
+                </section>
+                <div className={classes.pagination}>
+                    <Pagination pageControl={pageControl} />
+                </div>
+                {modal}
+            </article>
+        </Fragment>
     );
 };
 

packages/venia-ui/lib/RootComponents/Product/product.js

@@ -1,7 +1,9 @@
-import React, { Component } from 'react';
+import React, { Fragment, Component } from 'react';
 import { string, func } from 'prop-types';
 
 import { connect, Query } from '@magento/venia-drivers';
+
+import { Title } from '../../components/Head';
 import { addItemToCart } from '../../actions/cart';
 import ErrorView from '../../components/ErrorView';
 import { fullPageLoadingIndicator } from '../../components/LoadingIndicator';
@@ -58,10 +60,13 @@ class Product extends Component {
                     }
 
                     return (
-                        <ProductFullDetail
-                            product={this.mapProduct(product)}
-                            addToCart={this.props.addItemToCart}
-                        />
+                        <Fragment>
+                            <Title>{`${product.name} - Venia`}</Title>
+                            <ProductFullDetail
+                                product={this.mapProduct(product)}
+                                addToCart={this.props.addItemToCart}
+                            />
+                        </Fragment>
                     );
                 }}
             </Query>