chore(chrome): fill out component prop snapshot testing

packages/chrome/src/views/header/HeaderItem.spec.js

@@ -42,8 +42,8 @@ describe('HeaderItem', () => {
   });
 
   describe('States', () => {
-    it('renders current styling if provided', () => {
-      const wrapper = mount(<HeaderItem current />);
+    it('renders active styling if provided', () => {
+      const wrapper = mount(<HeaderItem active />);
 
       expect(wrapper).toMatchSnapshot();
     });

packages/chrome/src/views/header/HeaderItemText.spec.js

@@ -16,4 +16,10 @@ describe('HeaderItemText', () => {
 
     expect(wrapper).toMatchSnapshot();
   });
+
+  it('renders clipped styling if provided', () => {
+    const wrapper = shallow(<HeaderItemText clipped />);
+
+    expect(wrapper).toMatchSnapshot();
+  });
 });

packages/chrome/src/views/header/HeaderItemWrapper.spec.js

@@ -16,4 +16,52 @@ describe('HeaderItemWrapper', () => {
 
     expect(wrapper).toMatchSnapshot();
   });
+
+  it('renders maxX styling if provided', () => {
+    const wrapper = shallow(<HeaderItemWrapper maxX />);
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('renders maxY styling if provided', () => {
+    const wrapper = shallow(<HeaderItemWrapper maxY />);
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('renders round styling if provided', () => {
+    const wrapper = shallow(<HeaderItemWrapper round />);
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  describe('States', () => {
+    it('renders active styling if provided', () => {
+      const wrapper = shallow(<HeaderItemWrapper active />);
+
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    it('renders focused styling if provided', () => {
+      const wrapper = shallow(<HeaderItemWrapper focused />);
+
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    it('renders hovered styling if provided', () => {
+      const wrapper = shallow(<HeaderItemWrapper hovered />);
+
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+
+  describe('Products', () => {
+    ['chat', 'connect', 'explore', 'guide', 'message', 'support', 'talk'].forEach(product => {
+      it(`renders ${product} styling if provided`, () => {
+        const wrapper = shallow(<HeaderItemWrapper product={product} />);
+
+        expect(wrapper).toMatchSnapshot();
+      });
+    });
+  });
 });

packages/chrome/src/views/header/__snapshots__/HeaderItem.spec.js.snap

@@ -189,21 +189,21 @@ exports[`HeaderItem Products renders talk styling if provided 1`] = `
 </HeaderItem>
 `;
 
-exports[`HeaderItem States renders current styling if provided 1`] = `
+exports[`HeaderItem States renders active styling if provided 1`] = `
 <HeaderItem
-  current={true}
+  active={true}
 >
   <KeyboardFocusContainer>
     <HeaderItem__StyledHeaderItem
-      current={true}
+      active={true}
       focused={false}
       onBlur={[Function]}
       onFocus={[Function]}
       onMouseDown={[Function]}
       tabIndex={0}
     >
       <button
-        className="c-chrome__body__header__item "
+        className="c-chrome__body__header__item is-active "
         data-garden-id="chrome.header_item"
         data-garden-version="version"
         onBlur={[Function]}

packages/chrome/src/views/header/__snapshots__/HeaderItemText.spec.js.snap

@@ -1,5 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`HeaderItemText renders clipped styling if provided 1`] = `
+<span
+  className="c-chrome__body__header__item__text is-clipped "
+  data-garden-id="chrome.header_item_text"
+  data-garden-version="version"
+/>
+`;
+
 exports[`HeaderItemText renders default styling 1`] = `
 <span
   className="c-chrome__body__header__item__text "

packages/chrome/src/views/header/__snapshots__/HeaderItemWrapper.spec.js.snap

@@ -1,9 +1,113 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`HeaderItemWrapper Products renders chat styling if provided 1`] = `
+<div
+  className="c-chrome__body__header__item c-chrome__body__header__item--logo--chat "
+  data-garden-id="chrome.header_item_wrapper"
+  data-garden-version="version"
+/>
+`;
+
+exports[`HeaderItemWrapper Products renders connect styling if provided 1`] = `
+<div
+  className="c-chrome__body__header__item c-chrome__body__header__item--logo--connect "
+  data-garden-id="chrome.header_item_wrapper"
+  data-garden-version="version"
+/>
+`;
+
+exports[`HeaderItemWrapper Products renders explore styling if provided 1`] = `
+<div
+  className="c-chrome__body__header__item c-chrome__body__header__item--logo--explore "
+  data-garden-id="chrome.header_item_wrapper"
+  data-garden-version="version"
+/>
+`;
+
+exports[`HeaderItemWrapper Products renders guide styling if provided 1`] = `
+<div
+  className="c-chrome__body__header__item c-chrome__body__header__item--logo--guide "
+  data-garden-id="chrome.header_item_wrapper"
+  data-garden-version="version"
+/>
+`;
+
+exports[`HeaderItemWrapper Products renders message styling if provided 1`] = `
+<div
+  className="c-chrome__body__header__item c-chrome__body__header__item--logo--message "
+  data-garden-id="chrome.header_item_wrapper"
+  data-garden-version="version"
+/>
+`;
+
+exports[`HeaderItemWrapper Products renders support styling if provided 1`] = `
+<div
+  className="c-chrome__body__header__item c-chrome__body__header__item--logo--support "
+  data-garden-id="chrome.header_item_wrapper"
+  data-garden-version="version"
+/>
+`;
+
+exports[`HeaderItemWrapper Products renders talk styling if provided 1`] = `
+<div
+  className="c-chrome__body__header__item c-chrome__body__header__item--logo--talk "
+  data-garden-id="chrome.header_item_wrapper"
+  data-garden-version="version"
+/>
+`;
+
+exports[`HeaderItemWrapper States renders active styling if provided 1`] = `
+<div
+  className="c-chrome__body__header__item is-active "
+  data-garden-id="chrome.header_item_wrapper"
+  data-garden-version="version"
+/>
+`;
+
+exports[`HeaderItemWrapper States renders focused styling if provided 1`] = `
+<div
+  className="c-chrome__body__header__item is-focused "
+  data-garden-id="chrome.header_item_wrapper"
+  data-garden-version="version"
+/>
+`;
+
+exports[`HeaderItemWrapper States renders hovered styling if provided 1`] = `
+<div
+  className="c-chrome__body__header__item is-hovered "
+  data-garden-id="chrome.header_item_wrapper"
+  data-garden-version="version"
+/>
+`;
+
 exports[`HeaderItemWrapper renders default styling 1`] = `
 <div
   className="c-chrome__body__header__item "
   data-garden-id="chrome.header_item_wrapper"
   data-garden-version="version"
 />
 `;
+
+exports[`HeaderItemWrapper renders maxX styling if provided 1`] = `
+<div
+  className="c-chrome__body__header__item c-chrome__body__header__item--max-x "
+  data-garden-id="chrome.header_item_wrapper"
+  data-garden-version="version"
+/>
+`;
+
+exports[`HeaderItemWrapper renders maxY styling if provided 1`] = `
+<div
+  className="c-chrome__body__header__item c-chrome__body__header__item--max-y "
+  data-garden-id="chrome.header_item_wrapper"
+  data-garden-version="version"
+/>
+`;
+
+exports[`HeaderItemWrapper renders round styling if provided 1`] = `
+<div
+  className="c-chrome__body__header__item c-chrome__body__header__item--round "
+  data-garden-id="chrome.header_item_wrapper"
+  data-garden-version="version"
+/>
+`;

packages/chrome/src/views/nav/Nav.spec.js

@@ -15,4 +15,22 @@ describe('Nav', () => {
 
     expect(wrapper).toMatchSnapshot();
   });
+
+  it('renders expanded styling if provided', () => {
+    const wrapper = shallow(<Nav expanded />);
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('renders dark styling if provided', () => {
+    const wrapper = shallow(<Nav dark />);
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('renders light styling if provided', () => {
+    const wrapper = shallow(<Nav light />);
+
+    expect(wrapper).toMatchSnapshot();
+  });
 });

packages/chrome/src/views/nav/NavItem.spec.js

@@ -9,7 +9,7 @@ import React from 'react';
 import { mount } from 'enzyme';
 import NavItem from './NavItem';
 
-describe('SubNavItem', () => {
+describe('NavItem', () => {
   it('renders default styling', () => {
     const wrapper = mount(<NavItem />);
 
@@ -22,6 +22,12 @@ describe('SubNavItem', () => {
     expect(wrapper).toMatchSnapshot();
   });
 
+  it('renders brandmark styling if provided', () => {
+    const wrapper = mount(<NavItem brandmark />);
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
   describe('States', () => {
     it('renders current styling if provided', () => {
       const wrapper = mount(<NavItem current />);

packages/chrome/src/views/nav/NavItemText.spec.js

@@ -16,4 +16,10 @@ describe('NavItemText', () => {
 
     expect(wrapper).toMatchSnapshot();
   });
+
+  it('renders wrap styling if provided', () => {
+    const wrapper = shallow(<NavItemText wrap />);
+
+    expect(wrapper).toMatchSnapshot();
+  });
 });

packages/chrome/src/views/nav/__snapshots__/Nav.spec.js.snap

@@ -1,9 +1,33 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Nav renders dark styling if provided 1`] = `
+<nav
+  className="c-chrome__nav c-chrome__nav--dark "
+  data-garden-id="chrome.nav"
+  data-garden-version="version"
+/>
+`;
+
 exports[`Nav renders default styling 1`] = `
 <nav
   className="c-chrome__nav "
   data-garden-id="chrome.nav"
   data-garden-version="version"
 />
 `;
+
+exports[`Nav renders expanded styling if provided 1`] = `
+<nav
+  className="c-chrome__nav c-chrome__nav--expanded "
+  data-garden-id="chrome.nav"
+  data-garden-version="version"
+/>
+`;
+
+exports[`Nav renders light styling if provided 1`] = `
+<nav
+  className="c-chrome__nav c-chrome__nav--light "
+  data-garden-id="chrome.nav"
+  data-garden-version="version"
+/>
+`;