From d0f980a227df804feecb3b68bda3a0028dabc62f Mon Sep 17 00:00:00 2001
From: Thomas Leing <bluezebragames@gmail.com>
Date: Mon, 30 Dec 2019 19:32:54 -0500
Subject: [PATCH] Added icon unit tests and additional storybook (#3988)

---
 .../components/amplify-icon/amplify-icon.spec.ts  | 15 +++++++++++++++
 .../amplify-icon/amplify-icon.stories.tsx         | 13 ++++++++++++-
 2 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/packages/amplify-ui-components/src/components/amplify-icon/amplify-icon.spec.ts b/packages/amplify-ui-components/src/components/amplify-icon/amplify-icon.spec.ts
index e1bacf41948..9bcc98ff9ae 100644
--- a/packages/amplify-ui-components/src/components/amplify-icon/amplify-icon.spec.ts
+++ b/packages/amplify-ui-components/src/components/amplify-icon/amplify-icon.spec.ts
@@ -12,6 +12,15 @@ async function snapshotTestIcon(iconName: string) {
   expect(page.root).toMatchSnapshot();
 }
 
+async function snapshotOverrideTestIcon(iconName: string) {
+  const page = await newSpecPage({
+    components: [AmplifyIcon],
+    html: `<amplify-icon name='${iconName}' override-style='true'></amplify-icon>`,
+  });
+
+  expect(page.root).toMatchSnapshot();
+}
+
 /** Tests */
 describe('amplify-icon spec:', () => {
   describe('Render logic ->', () => {
@@ -19,4 +28,10 @@ describe('amplify-icon spec:', () => {
       it(`renders ${name} correctly`, async () => snapshotTestIcon(name));
     });
   });
+  describe('Component logic ->', () => {
+    it(`has overrideStyle false by default`, async () => {
+      const icon = new AmplifyIcon();
+      expect(icon.overrideStyle).toBe(false);
+    });
+  });
 });
\ No newline at end of file
diff --git a/packages/amplify-ui-components/src/components/amplify-icon/amplify-icon.stories.tsx b/packages/amplify-ui-components/src/components/amplify-icon/amplify-icon.stories.tsx
index 8594f234e07..bbeaee4d327 100644
--- a/packages/amplify-ui-components/src/components/amplify-icon/amplify-icon.stories.tsx
+++ b/packages/amplify-ui-components/src/components/amplify-icon/amplify-icon.stories.tsx
@@ -11,5 +11,16 @@ amplifyIcon.add('with icon', () => {
   
   const name = select(label, iconNames, defaultValue);
 
-  return `<amplify-icon name="${name}"></amplify-icon>`;
+  return `<amplify-icon override-style="true" name="${name}"></amplify-icon>`;
 });
+
+amplifyIcon.add('with two icons', () => {
+  const label = 'Icon Name';
+  const iconNames = Object.keys(icons);
+  const defaultValue = 'sound-mute';
+  
+  const name1 = select(label, iconNames, defaultValue);
+  const name2 = select("test", ['sound-mute', 'sound'], 'sound');
+
+  return `<div><amplify-icon override-style="true" name="${name1}"></amplify-icon><amplify-icon override-style="true" name="${name2}"></amplify-icon></div>`;
+});
\ No newline at end of file