add icon for paid patreon sub

frontend/app/common/types.ts

@@ -7,6 +7,7 @@ export type User = {
   block: boolean;
   verified: boolean;
   email_subscription?: boolean;
+  paid_sub?: boolean;
 };
 
 /** data which is used on user-info page */

frontend/app/components/auth/components/oauth.consts.ts

@@ -1,19 +1,19 @@
 export const OAUTH_DATA = {
-  facebook: require('./assets/facebook.svg').default as string,
-  twitter: require('./assets/twitter.svg').default as string,
-  patreon: require('./assets/patreon.svg').default as string,
-  google: require('./assets/google.svg').default as string,
-  microsoft: require('./assets/microsoft.svg').default as string,
-  yandex: require('./assets/yandex.svg').default as string,
-  dev: require('./assets/dev.svg').default as string,
+  facebook: require('assets/social/facebook.svg').default as string,
+  twitter: require('assets/social/twitter.svg').default as string,
+  patreon: require('assets/social/patreon.svg').default as string,
+  google: require('assets/social/google.svg').default as string,
+  microsoft: require('assets/social/microsoft.svg').default as string,
+  yandex: require('assets/social/yandex.svg').default as string,
+  dev: require('assets/social/dev.svg').default as string,
   github: {
     name: 'GitHub',
     icons: {
-      light: require('./assets/github-light.svg').default as string,
-      dark: require('./assets/github-dark.svg').default as string,
+      light: require('assets/social/github-light.svg').default as string,
+      dark: require('assets/social/github-dark.svg').default as string,
     },
   },
-  telegram: require('./assets/telegram.svg').default as string,
+  telegram: require('assets/social/telegram.svg').default as string,
 } as const;
 
 export const OAUTH_PROVIDERS = Object.keys(OAUTH_DATA);

frontend/app/components/comment/comment.module.css

@@ -0,0 +1,29 @@
+.user  {
+	display: flex;
+	align-items: center;
+}
+
+.user > * + * {
+	margin-left: 4px;
+}
+
+.verificationButton {
+	display:flex;
+	align-items: center;
+	padding: 2px;
+	width: 16px;
+	height: 16px;
+}
+
+.verificationIcon {
+	color: var(--color29);
+}
+
+.verificationIconInactive {
+	color: var(--color1);
+	transition: opacity 0.15s;
+
+  &:hover {
+    opacity: 0.75;
+  }
+}

frontend/app/components/comment/comment.test.tsx

@@ -1,16 +1,8 @@
 import { h } from 'preact';
 import { mount } from 'enzyme';
-
-jest.mock('react-intl', () => {
-  const messages = require('locales/en.json');
-  const reactIntl = jest.requireActual('react-intl');
-  const intlProvider = new reactIntl.IntlProvider({ locale: 'en', messages }, {});
-
-  return {
-    ...reactIntl,
-    useIntl: () => intlProvider.state.intl,
-  };
-});
+import '@testing-library/jest-dom';
+import { screen } from '@testing-library/preact';
+import { render } from 'tests/utils';
 
 import { useIntl, IntlProvider } from 'react-intl';
 
@@ -21,46 +13,89 @@ import { sleep } from 'utils/sleep';
 
 import { Comment, CommentProps } from './comment';
 
-function mountComment(props: CommentProps) {
-  function Wrapper(updateProps: Partial<CommentProps> = {}) {
-    const intl = useIntl();
-
-    return (
-      <IntlProvider locale="en" messages={enMessages}>
-        <Comment {...props} {...updateProps} intl={intl} />
-      </IntlProvider>
-    );
-  }
+function CommentWithIntl(props: CommentProps) {
+  return <Comment {...props} intl={useIntl()} />;
+}
 
-  return mount(<Wrapper />);
+// @depricated
+function mountComment(props: CommentProps) {
+  return mount(
+    <IntlProvider locale="en" messages={enMessages}>
+      <CommentWithIntl {...props} />
+    </IntlProvider>
+  );
 }
 
-const DefaultProps: Partial<CommentProps> = {
-  post_info: {
-    read_only: false,
-  } as PostInfo,
-  view: 'main',
-  data: {
-    text: 'test comment',
-    vote: 0,
+function getDefaultProps() {
+  return {
+    post_info: {
+      read_only: false,
+    } as PostInfo,
+    view: 'main',
+    data: {
+      text: 'test comment',
+      vote: 0,
+      user: {
+        id: 'someone',
+        name: 'username',
+        picture: 'somepicture-url',
+      },
+      time: new Date().toString(),
+      locator: {
+        url: 'somelocatorurl',
+        site: 'remark',
+      },
+    } as CommentType,
     user: {
-      id: 'someone',
+      admin: false,
+      id: 'testuser',
       picture: 'somepicture-url',
-    },
-    time: new Date().toString(),
-    locator: {
-      url: 'somelocatorurl',
-      site: 'remark',
-    },
-  } as CommentType,
-  user: {
-    admin: false,
-    id: 'testuser',
-    picture: 'somepicture-url',
-  } as User,
-} as CommentProps;
+    } as User,
+  } as CommentProps & { user: User };
+}
 
+const DefaultProps = getDefaultProps();
 describe('<Comment />', () => {
+  it('should render patreon subscriber icon', async () => {
+    const props = getDefaultProps() as CommentProps;
+    props.data.user.paid_sub = true;
+
+    render(<CommentWithIntl {...props} />);
+    const patreonSubscriberIcon = await screen.findByAltText('Patreon Paid Subscriber');
+    expect(patreonSubscriberIcon).toBeVisible();
+    expect(patreonSubscriberIcon.tagName).toBe('IMG');
+  });
+
+  describe('verification', () => {
+    it('should render active verification icon', () => {
+      const props = getDefaultProps();
+      props.data.user.verified = true;
+      render(<CommentWithIntl {...props} />);
+      expect(screen.getByTitle('Verified user')).toBeVisible();
+    });
+
+    it('should not render verification icon', () => {
+      const props = getDefaultProps();
+      render(<CommentWithIntl {...props} />);
+      expect(screen.queryByTitle('Verified user')).not.toBeInTheDocument();
+    });
+
+    it('should render verification button for admin', () => {
+      const props = getDefaultProps();
+      props.user.admin = true;
+      render(<CommentWithIntl {...props} />);
+      expect(screen.getByTitle('Toggle verification')).toBeVisible();
+    });
+
+    it('should render active verification icon for admin', () => {
+      const props = getDefaultProps();
+      props.user.admin = true;
+      props.data.user.verified = true;
+      render(<CommentWithIntl {...props} />);
+      expect(screen.queryByTitle('Verified user')).toBeVisible();
+    });
+  });
+
   describe('voting', () => {
     it('should be disabled for an anonymous user', () => {
       const wrapper = mountComment({ ...DefaultProps, user: { id: 'anonymous_1' } } as CommentProps);
@@ -226,54 +261,24 @@ describe('<Comment />', () => {
       expect(controls.at(0).text()).toEqual('Hide');
     });
 
-    it('verification badge clickable for admin', () => {
-      const element = mountComment({ ...DefaultProps, user: { ...DefaultProps.user, admin: true } } as CommentProps);
-
-      const controls = element.find('.comment__verification').first();
-      expect(controls.hasClass('comment__verification_clickable')).toEqual(true);
-    });
-
-    it('verification badge not clickable for regular user', () => {
-      const element = mountComment({
-        ...DefaultProps,
-        data: { ...DefaultProps.data, user: { ...DefaultProps.data!.user, verified: true } },
-      } as CommentProps);
-
-      const controls = element.find('.comment__verification').first();
-      expect(controls.hasClass('comment__verification_clickable')).toEqual(false);
-    });
-
-    it('should be editable', () => {
+    it('should be editable', async () => {
       StaticStore.config.edit_duration = 300;
 
-      const initTime = new Date().toString();
-      const changedTime = new Date(Date.now() + 10 * 1000).toString();
-      const props = {
-        ...DefaultProps,
-        user: DefaultProps.user as User,
-        data: {
-          ...DefaultProps.data,
-          id: '100',
-          user: DefaultProps.user as User,
-          vote: 1,
-          time: initTime,
-          delete: false,
-          orig: 'test',
-        } as CommentType,
-        repliesCount: 0,
-      } as CommentProps;
-      const component = mountComment(props);
-      const comment = component.find(Comment);
-
-      expect((comment.state('editDeadline') as Date).getTime()).toBe(
-        new Date(new Date(initTime).getTime() + 300 * 1000).getTime()
-      );
-
-      component.setProps({ data: { ...props.data, time: changedTime } });
+      const props = getDefaultProps();
+      props.repliesCount = 0;
+      props.user!.id = '100';
+      props.data.user.id = '100';
+      Object.assign(props.data, {
+        id: '101',
+        vote: 1,
+        time: new Date().toString(),
+        delete: false,
+        orig: 'test',
+      });
 
-      expect((comment.state('editDeadline') as Date).getTime()).toBe(
-        new Date(new Date(changedTime).getTime() + 300 * 1000).getTime()
-      );
+      render(<CommentWithIntl {...props} />);
+      // it can be less than 300 due to test checks time
+      expect(['299', '300']).toContain(screen.getByRole('timer').innerText);
     });
 
     it('should not be editable', () => {