From 0493ece73eefa78c8943ac293b75ca7589844b21 Mon Sep 17 00:00:00 2001
From: Vyrtsev Mikhail <reeywhaar@gmail.com>
Date: Fri, 26 Jul 2019 23:20:02 +0300
Subject: [PATCH] fix auth panel providers sorting

---
 .../components/auth-panel/auth-panel.test.tsx | 57 +++++++++++++++----
 .../app/components/auth-panel/auth-panel.tsx  |  2 +-
 2 files changed, 48 insertions(+), 11 deletions(-)

diff --git a/frontend/app/components/auth-panel/auth-panel.test.tsx b/frontend/app/components/auth-panel/auth-panel.test.tsx
index 001f33c7..c00882fb 100644
--- a/frontend/app/components/auth-panel/auth-panel.test.tsx
+++ b/frontend/app/components/auth-panel/auth-panel.test.tsx
@@ -43,23 +43,60 @@ describe('<AuthPanel />', () => {
       expect(providerLinks[1].textContent).toEqual('GitHub');
     });
 
-    it('should place selected provider first', () => {
-      const element = <AuthPanel {...(DefaultProps as Props)} provider={{ name: 'github' }} user={null} />;
+    describe('sorting', () => {
+      it('should place selected provider first', () => {
+        const element = (
+          <AuthPanel
+            {...(DefaultProps as Props)}
+            providers={['google', 'github', 'yandex']}
+            provider={{ name: 'github' }}
+            user={null}
+          />
+        );
 
-      render(element, container);
+        render(element, container);
 
-      const authPanelColumn = container.querySelectorAll('.auth-panel__column');
+        const authPanelColumn = container.querySelectorAll('.auth-panel__column');
 
-      expect(authPanelColumn.length).toEqual(2);
+        expect(authPanelColumn.length).toEqual(2);
 
-      const authForm = authPanelColumn[0];
+        const authForm = authPanelColumn[0];
 
-      expect(authForm.textContent).toEqual(expect.stringContaining('Sign in to comment using'));
+        expect(authForm.textContent).toEqual(expect.stringContaining('Sign in to comment using'));
 
-      const providerLinks = authForm.querySelectorAll('.auth-panel__pseudo-link');
+        const providerLinks = authForm.querySelectorAll('.auth-panel__pseudo-link');
 
-      expect(providerLinks[0].textContent).toEqual('GitHub');
-      expect(providerLinks[1].textContent).toEqual('Google');
+        expect(providerLinks[0].textContent).toEqual('GitHub');
+        expect(providerLinks[1].textContent).toEqual('Google');
+        expect(providerLinks[2].textContent).toEqual('Yandex');
+      });
+
+      it('should do nothing if provider not found', () => {
+        const element = (
+          <AuthPanel
+            {...(DefaultProps as Props)}
+            providers={['google', 'github', 'yandex']}
+            provider={{ name: 'baidu' }}
+            user={null}
+          />
+        );
+
+        render(element, container);
+
+        const authPanelColumn = container.querySelectorAll('.auth-panel__column');
+
+        expect(authPanelColumn.length).toEqual(2);
+
+        const authForm = authPanelColumn[0];
+
+        expect(authForm.textContent).toEqual(expect.stringContaining('Sign in to comment using'));
+
+        const providerLinks = authForm.querySelectorAll('.auth-panel__pseudo-link');
+
+        expect(providerLinks[0].textContent).toEqual('Google');
+        expect(providerLinks[1].textContent).toEqual('GitHub');
+        expect(providerLinks[2].textContent).toEqual('Yandex');
+      });
     });
 
     it('should render login form with google and github provider for read-only post', () => {
diff --git a/frontend/app/components/auth-panel/auth-panel.tsx b/frontend/app/components/auth-panel/auth-panel.tsx
index 30fc4363..8e0da2a5 100644
--- a/frontend/app/components/auth-panel/auth-panel.tsx
+++ b/frontend/app/components/auth-panel/auth-panel.tsx
@@ -243,7 +243,7 @@ export class AuthPanel extends Component<Props, State> {
     const sortedProviders = ((): typeof providers => {
       if (!this.props.provider.name) return providers;
       const lastProviderIndex = providers.indexOf(this.props.provider.name as typeof providers[0]);
-      if (!lastProviderIndex) return providers;
+      if (lastProviderIndex < 1) return providers;
       return [
         this.props.provider.name as typeof providers[0],
         ...providers.slice(0, lastProviderIndex),