Added icon unit tests and additional storybook (#3988)

packages/amplify-ui-components/src/components/amplify-icon/amplify-icon.spec.ts

@@ -12,11 +12,26 @@ 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 ->', () => {
     Object.keys(icons).map(name => {
       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);
+    });
+  });
 });

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>`;
+});