From befb0792076ea58dba23e34524e58af80c648bfe Mon Sep 17 00:00:00 2001
From: Pavel Mineev <pavel@mineev.me>
Date: Wed, 28 Apr 2021 22:05:10 +0300
Subject: [PATCH] fix default avatar

- fix import of default avatar
- optimaze ghost svg
- add tests
- refactor avatar-icon
---
 .../avatar-icon/avatar-icon.spec.tsx          | 12 ++++++++++++
 .../components/avatar-icon/avatar-icon.svg    | 19 +++----------------
 .../components/avatar-icon/avatar-icon.tsx    | 11 ++++++-----
 3 files changed, 21 insertions(+), 21 deletions(-)
 create mode 100644 frontend/app/components/avatar-icon/avatar-icon.spec.tsx

diff --git a/frontend/app/components/avatar-icon/avatar-icon.spec.tsx b/frontend/app/components/avatar-icon/avatar-icon.spec.tsx
new file mode 100644
index 00000000..af4f526f
--- /dev/null
+++ b/frontend/app/components/avatar-icon/avatar-icon.spec.tsx
@@ -0,0 +1,12 @@
+import '@testing-library/jest-dom';
+import { h } from 'preact';
+import { render } from '@testing-library/preact';
+import { AvatarIcon } from './avatar-icon';
+
+describe('<AvatarIcon/>', () => {
+  it('should get', () => {
+    const { getByAltText } = render(<AvatarIcon alt="avatar" />);
+
+    expect(getByAltText('avatar')).toHaveAttribute('src', 'https://url-to-svg-image');
+  });
+});
diff --git a/frontend/app/components/avatar-icon/avatar-icon.svg b/frontend/app/components/avatar-icon/avatar-icon.svg
index 768b8b70..6004f60d 100644
--- a/frontend/app/components/avatar-icon/avatar-icon.svg
+++ b/frontend/app/components/avatar-icon/avatar-icon.svg
@@ -1,18 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <style>
-    .st6{fill:#8ED0CF}
-  </style>
-  <g>
-    <path d="M4.6 20.5s0 .1 0 0c.9 0 .9-.7 1.9-.7.9 0 .9.8 1.9.8.9 0 .9-.8 1.9-.8s.9.8 1.9.8c.9 0 .9-.8 1.9-.8.9 0 .9.8 1.9.8.9 0 .9-.8 1.9-.8.9 0 .9.8 1.8.8l-.7-3.5c-.2-1.3-.3-2.7-.3-4V9.5c0-3.6-2.9-6.9-6.5-7-3.8-.1-6.9 2.9-6.9 6.7v3.9c0 1.3-.1 2.7-.3 4l-.4 3.4z" fill="#f5f4f4"/>
-    <path d="M8 17.1c.1-1.3.2-2.7.2-4V9.2c0-3.6 1.6-6.5 3.7-6.7-3.6.1-6.5 3-6.5 6.7v3.9c0 1.3-.1 2.7-.3 4l-.5 3.5c.9 0 .9-.8 1.9-.8.7 0 .9.4 1.3.6l.2-3.3z" opacity=".5" fill="#fff"/>
-    <g>
-      <path class="st6" d="M19.3 17c-.2-1.3-.3-2.6-.3-3.9V9.4c0-3.8-2.9-7-6.6-7.3-1.9-.1-3.8.6-5.2 1.9-1.4 1.4-2.3 3.2-2.3 5.2v3.9c0 1.3-.1 2.6-.3 3.9l-.5 3.5c0 .1 0 .2.1.3.1.1.2.2.3.2.6 0 .9-.3 1.2-.5.2-.2.4-.3.7-.3.3 0 .5.1.7.3.3.2.6.5 1.2.5s.9-.3 1.2-.5c.2-.2.4-.3.7-.3s.5.1.7.3c.3.2.6.5 1.2.5s.9-.3 1.2-.5c.2-.2.4-.3.7-.3s.5.1.7.3c.3.2.6.5 1.2.5s.9-.3 1.2-.5c.2-.2.4-.3.7-.3.3 0 .5.1.7.3.3.2.6.5 1.2.5.1 0 .2 0 .3-.1.1-.1.1-.2.1-.3l-.8-3.6zm-.5 2.9c-.3-.2-.6-.5-1.2-.5s-.9.3-1.2.5c-.2.2-.4.3-.7.3-.3 0-.5-.1-.7-.3-.3-.2-.6-.5-1.2-.5s-.9.3-1.2.5c-.2.2-.4.3-.7.3-.3 0-.5-.1-.7-.3-.3-.2-.6-.5-1.2-.5s-.9.3-1.2.5c-.2.2-.4.3-.7.3-.3 0-.5-.1-.7-.3-.3-.2-.6-.5-1.2-.5s-.9.3-1.2.5c.2 0 .1.1 0 .1l.4-2.9c.2-1.3.3-2.7.3-4V9.2c0-1.8.7-3.4 2-4.6 1.3-1.2 2.9-1.8 4.7-1.7 3.3.2 5.9 3.1 5.9 6.5V13c0 1.3.1 2.7.3 4l.4 3c-.1 0-.2-.1-.2-.1z"/>
-      <path class="st6" d="M9.7 7.6c-.6 0-.8.8-.8 1.6s.2 1.6.8 1.6.8-.8.8-1.6-.3-1.6-.8-1.6z"/>
-      <path class="st6" d="M14.4 7.6c-.6 0-.8.8-.8 1.6s.2 1.6.8 1.6.8-.8.8-1.6-.3-1.6-.8-1.6z"/>
-    </g>
-    <linearGradient gradientUnits="userSpaceOnUse" x1="4.1669" y1="14.7127" x2="21.3949" y2="6.6792" gradientTransform="matrix(1 0 0 -1 0 24)">
-      <stop offset="0" stop-color="#fff" stop-opacity=".2"/>
-      <stop offset="1" stop-color="#fff" stop-opacity="0"/>
-    </linearGradient>
-  </g>
+  <path fill="#f5f4f4" d="M4.6 20.5s0 .1 0 0c.9 0 .9-.7 1.9-.7.9 0 .9.8 1.9.8.9 0 .9-.8 1.9-.8s.9.8 1.9.8c.9 0 .9-.8 1.9-.8.9 0 .9.8 1.9.8.9 0 .9-.8 1.9-.8.9 0 .9.8 1.8.8l-.7-3.5a27 27 0 01-.3-4V9.5c0-3.6-2.9-6.9-6.5-7a6.7 6.7 0 00-6.9 6.7v3.9a27 27 0 01-.3 4l-.4 3.4z"/>
+  <path fill="#fff" d="M8 17.1l.2-4V9.2c0-3.6 1.6-6.5 3.7-6.7-3.6.1-6.5 3-6.5 6.7v3.9a27 27 0 01-.3 4l-.5 3.5c.9 0 .9-.8 1.9-.8.7 0 .9.4 1.3.6l.2-3.3z" opacity=".5"/>
+  <path fill="#8ED0CF" d="M19.3 17l-.3-3.9V9.4c0-3.8-2.9-7-6.6-7.3a7.2 7.2 0 00-7.5 7.1v3.9L4.6 17l-.5 3.5.1.3.3.2c.6 0 .9-.3 1.2-.5.2-.2.4-.3.7-.3.3 0 .5.1.7.3.3.2.6.5 1.2.5s.9-.3 1.2-.5c.2-.2.4-.3.7-.3s.5.1.7.3c.3.2.6.5 1.2.5s.9-.3 1.2-.5c.2-.2.4-.3.7-.3s.5.1.7.3c.3.2.6.5 1.2.5s.9-.3 1.2-.5c.2-.2.4-.3.7-.3.3 0 .5.1.7.3.3.2.6.5 1.2.5l.3-.1.1-.3-.8-3.6zm-.5 2.9c-.3-.2-.6-.5-1.2-.5s-.9.3-1.2.5a1 1 0 01-.7.3 1 1 0 01-.7-.3c-.3-.2-.6-.5-1.2-.5s-.9.3-1.2.5a1 1 0 01-.7.3 1 1 0 01-.7-.3c-.3-.2-.6-.5-1.2-.5s-.9.3-1.2.5a1 1 0 01-.7.3 1 1 0 01-.7-.3c-.3-.2-.6-.5-1.2-.5s-.9.3-1.2.5c.2 0 .1.1 0 .1l.4-2.9c.2-1.3.3-2.7.3-4V9.2c0-1.8.7-3.4 2-4.6a6.2 6.2 0 014.7-1.7c3.3.2 5.9 3.1 5.9 6.5V13c0 1.3.1 2.7.3 4l.4 3-.2-.1zM9.7 7.6c-.6 0-.8.8-.8 1.6s.2 1.6.8 1.6.8-.8.8-1.6-.3-1.6-.8-1.6zm4.7 0c-.6 0-.8.8-.8 1.6s.2 1.6.8 1.6.8-.8.8-1.6-.3-1.6-.8-1.6z"/>
 </svg>
diff --git a/frontend/app/components/avatar-icon/avatar-icon.tsx b/frontend/app/components/avatar-icon/avatar-icon.tsx
index 57c7e344..0cca7df8 100644
--- a/frontend/app/components/avatar-icon/avatar-icon.tsx
+++ b/frontend/app/components/avatar-icon/avatar-icon.tsx
@@ -2,18 +2,19 @@ import { h, JSX } from 'preact';
 import b from 'bem-react-helper';
 import { Theme } from 'common/types';
 
-interface Props {
+type Props = JSX.HTMLAttributes<HTMLImageElement> & {
   picture?: string;
   mix?: string;
   theme?: Theme;
-}
+};
 
-export function AvatarIcon(props: Props & JSX.HTMLAttributes) {
+export function AvatarIcon({ mix, theme, picture, ...props }: Props) {
   return (
     <img
-      className={b('avatar-icon', { mix: props.mix }, { theme: props.theme, default: !props.picture })}
-      src={props.picture || require('./avatar-icon.svg')}
+      className={b('avatar-icon', { mix }, { theme, default: !picture })}
+      src={picture || require('./avatar-icon.svg').default}
       alt=""
+      {...props}
     />
   );
 }