Add tests

plugins/user-settings/src/components/AppSettingsList.tsx

@@ -15,12 +15,12 @@
  */
 import React from 'react';
 import { List } from '@material-ui/core';
-import { SidebarThemeToggle } from './ThemeToggle';
-import { SidebarPinButton } from './PinButton';
+import { ThemeToggle } from './ThemeToggle';
+import { PinButton } from './PinButton';
 
 export const AppSettingsList = () => (
   <List dense>
-    <SidebarThemeToggle />
-    <SidebarPinButton />
+    <ThemeToggle />
+    <PinButton />
   </List>
 );

plugins/user-settings/src/components/ConfiguredProviderSettings.test.tsx

@@ -0,0 +1,80 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {
+  ApiProvider,
+  ApiRegistry,
+  configApiRef,
+  ConfigReader,
+  googleAuthApiRef,
+} from '@backstage/core';
+import { renderWithEffects, wrapInTestApp } from '@backstage/test-utils';
+import { fireEvent } from '@testing-library/react';
+import * as React from 'react';
+import { ConfiguredProviderSettings } from './ConfiguredProviderSettings';
+
+const mockSignInHandler = jest.fn().mockReturnValue('');
+const mockGoogleAuth = {
+  sessionState$: () => ({
+    subscribe: () => ({
+      unsubscribe: () => null,
+    }),
+  }),
+  getIdToken: mockSignInHandler,
+};
+
+const createConfig = () =>
+  ConfigReader.fromConfigs([
+    {
+      context: '',
+      data: {
+        auth: {
+          providers: {
+            google: { development: {} },
+          },
+        },
+      },
+    },
+  ]);
+
+const config = createConfig();
+
+const apiRegistry = ApiRegistry.from([
+  [configApiRef, config],
+  [googleAuthApiRef, mockGoogleAuth],
+]);
+
+describe('<ConfiguredProviderSettings />', () => {
+  it('displays a provider and calls its sign-in handler on click', async () => {
+    const rendered = await renderWithEffects(
+      wrapInTestApp(
+        <ApiProvider apis={apiRegistry}>
+          <ConfiguredProviderSettings />
+        </ApiProvider>,
+      ),
+    );
+
+    expect(rendered.getByText('Google')).toBeInTheDocument();
+    expect(
+      rendered.getByText(googleAuthApiRef.description),
+    ).toBeInTheDocument();
+
+    const button = rendered.getByTitle('Sign in to Google');
+    expect(mockSignInHandler).toHaveBeenCalledTimes(1);
+    fireEvent.click(button);
+    expect(mockSignInHandler).toHaveBeenCalledTimes(2);
+  });
+});

plugins/user-settings/src/components/PinButton.test.tsx

@@ -0,0 +1,42 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { SidebarPinStateContext } from '@backstage/core';
+import { renderWithEffects, wrapInTestApp } from '@backstage/test-utils';
+import { fireEvent } from '@testing-library/react';
+import * as React from 'react';
+import { PinButton } from './PinButton';
+
+describe('<PinButton />', () => {
+  it('toggles the pin sidebar button', async () => {
+    const mockToggleFn = jest.fn();
+    const rendered = await renderWithEffects(
+      wrapInTestApp(
+        <SidebarPinStateContext.Provider
+          value={{ isPinned: false, toggleSidebarPinState: mockToggleFn }}
+        >
+          <PinButton />
+        </SidebarPinStateContext.Provider>,
+      ),
+    );
+
+    expect(rendered.getByText('Pin Sidebar')).toBeInTheDocument();
+
+    const pinButton = rendered.getByTitle('Pin Sidebar');
+    fireEvent.click(pinButton);
+    expect(mockToggleFn).toHaveBeenCalled();
+  });
+});

plugins/user-settings/src/components/PinButton.tsx

@@ -26,7 +26,7 @@ import LockOpenIcon from '@material-ui/icons/LockOpen';
 import { ToggleButton } from '@material-ui/lab';
 import { SidebarPinStateContext } from '@backstage/core';
 
-export const SidebarPinButton = () => {
+export const PinButton = () => {
   const { isPinned, toggleSidebarPinState } = useContext(
     SidebarPinStateContext,
   );

plugins/user-settings/src/components/SettingsDialog.test.tsx

@@ -0,0 +1,50 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {
+  ApiProvider,
+  ApiRegistry,
+  FeatureFlags,
+  featureFlagsApiRef,
+} from '@backstage/core';
+import { renderWithEffects, wrapInTestApp } from '@backstage/test-utils';
+import * as React from 'react';
+import { SettingsDialog } from './SettingsDialog';
+
+const apiRegistry = ApiRegistry.from([
+  [featureFlagsApiRef, new FeatureFlags()],
+]);
+
+describe('<SettingsDialog />', () => {
+  const mockRef = { current: null };
+
+  it('displays the users name and email, and the tabs and titles', async () => {
+    const rendered = await renderWithEffects(
+      wrapInTestApp(
+        <ApiProvider apis={apiRegistry}>
+          <SettingsDialog popoverActionRef={mockRef} />
+        </ApiProvider>,
+      ),
+    );
+
+    expect(rendered.getByText('Guest')).toBeInTheDocument();
+    expect(rendered.getByText('guest@example.com')).toBeInTheDocument();
+    expect(rendered.getByText('App Settings')).toBeInTheDocument();
+    expect(rendered.getByText('Additional Settings')).toBeInTheDocument();
+    expect(rendered.getByText('Auth Providers')).toBeInTheDocument();
+    expect(rendered.getByText('Feature Flags')).toBeInTheDocument();
+  });
+});

plugins/user-settings/src/components/ThemeToggle.test.tsx

@@ -0,0 +1,58 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {
+  ApiProvider,
+  ApiRegistry,
+  appThemeApiRef,
+  AppThemeSelector,
+} from '@backstage/core';
+import { renderWithEffects, wrapInTestApp } from '@backstage/test-utils';
+import { lightTheme } from '@backstage/theme';
+import { fireEvent } from '@testing-library/react';
+import * as React from 'react';
+import { ThemeToggle } from './ThemeToggle';
+
+const mockTheme = {
+  id: 'light',
+  title: 'Mock Theme',
+  variant: 'light' as 'light', // wut?
+  theme: lightTheme,
+};
+
+const apiRegistry = ApiRegistry.from([
+  [appThemeApiRef, AppThemeSelector.createWithStorage([mockTheme])],
+]);
+
+describe('<ThemeToggle />', () => {
+  it('toggles the theme select button', async () => {
+    const themeApi = apiRegistry.get(appThemeApiRef);
+    const rendered = await renderWithEffects(
+      wrapInTestApp(
+        <ApiProvider apis={apiRegistry}>
+          <ThemeToggle />
+        </ApiProvider>,
+      ),
+    );
+
+    expect(rendered.getByText('Theme')).toBeInTheDocument();
+
+    const themeButton = rendered.getByTitle('Select Mock Theme');
+    expect(themeApi?.getActiveThemeId()).toBe(undefined);
+    fireEvent.click(themeButton);
+    expect(themeApi?.getActiveThemeId()).toBe('light');
+  });
+});

plugins/user-settings/src/components/ThemeToggle.tsx

@@ -27,7 +27,7 @@ import {
   Tooltip,
 } from '@material-ui/core';
 
-export const SidebarThemeToggle = () => {
+export const ThemeToggle = () => {
   const appThemeApi = useApi(appThemeApiRef);
   const themeId = useObservable(
     appThemeApi.activeThemeId$(),
@@ -89,7 +89,8 @@ export const SidebarThemeToggle = () => {
         >
           {themeIds.map(theme => (
             <TooltipToggleButton
-              title={`Select ${theme.variant} theme`}
+              key={theme.id}
+              title={`Select ${theme.title}`}
               value={theme.variant}
             >
               <ThemeIcon theme={theme} />

plugins/user-settings/src/components/UserSettings.test.tsx

@@ -0,0 +1,26 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as React from 'react';
+import { renderWithEffects, wrapInTestApp } from '@backstage/test-utils';
+import { UserSettings } from './UserSettings';
+
+describe('<UserSettings />', () => {
+  it('renders', async () => {
+    const rendered = await renderWithEffects(wrapInTestApp(<UserSettings />));
+    expect(rendered.getByText('G')).toBeInTheDocument();
+  });
+});

plugins/user-settings/src/components/UserSettingsMenu.test.tsx

@@ -0,0 +1,33 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { renderWithEffects, wrapInTestApp } from '@backstage/test-utils';
+import { fireEvent } from '@testing-library/react';
+import * as React from 'react';
+import { UserSettingsMenu } from './UserSettingsMenu';
+
+describe('<UserSettingsMenu />', () => {
+  it('displays a menu button with a sign-out option', async () => {
+    const rendered = await renderWithEffects(
+      wrapInTestApp(<UserSettingsMenu />),
+    );
+
+    const menuButton = rendered.getByLabelText('more');
+    fireEvent.click(menuButton);
+
+    expect(rendered.getByText('Sign Out')).toBeInTheDocument();
+  });
+});

plugins/user-settings/src/components/UserSettingsMenu.tsx

@@ -39,7 +39,7 @@ export const UserSettingsMenu = () => {
 
   return (
     <>
-      <IconButton onClick={handleOpen}>
+      <IconButton aria-label="more" onClick={handleOpen}>
         <MoreVertIcon />
       </IconButton>
       <Menu anchorEl={anchorEl} open={open} onClose={handleClose}>

plugins/user-settings/src/plugin.ts

@@ -14,17 +14,7 @@
  * limitations under the License.
  */
 import { createPlugin } from '@backstage/core';
-// import ExampleComponent from './components/ExampleComponent';
-
-// export const rootRouteRef = createRouteRef({
-//   path: '/user-settings',
-//   title: 'user-settings',
-// });
 
 export const plugin = createPlugin({
   id: 'user-settings',
-  // apis: [createApiFactory(GCPApiRef, new GCPClient())],
-  // register({ router }) {
-  //   router.addRoute(rootRouteRef, ExampleComponent);
-  // },
 });