[plugins/welcome] split feature flag button into separate Component (with tests)

plugins/welcome/src/components/WelcomePage/ToggleFeatureFlagButton.test.tsx

@@ -0,0 +1,68 @@
+/*
+ * 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 React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import ToggleFeatureFlagButton from './ToggleFeatureFlagButton';
+import {
+  ApiRegistry,
+  featureFlagsApiRef,
+  ApiProvider,
+  FeatureFlags,
+} from '@backstage/core';
+
+describe('ToggleFeatureFlagButton', () => {
+  beforeEach(() => {
+    window.localStorage.clear();
+  });
+
+  it('should enable the feature flag', () => {
+    const rendered = render(
+      <ApiProvider
+        apis={ApiRegistry.from([[featureFlagsApiRef, FeatureFlags]])}
+      >
+        <ToggleFeatureFlagButton />
+      </ApiProvider>,
+    );
+
+    const button = rendered.getByTestId('button-switch-feature-flag-state');
+    expect(button).toBeInTheDocument();
+
+    expect(window.localStorage.featureFlags).toBeUndefined();
+    fireEvent.click(button);
+    expect(window.localStorage.featureFlags).toBe(
+      '{"enable-welcome-box":true}',
+    );
+  });
+
+  it('should disable the feature flag', () => {
+    const rendered = render(
+      <ApiProvider
+        apis={ApiRegistry.from([[featureFlagsApiRef, FeatureFlags]])}
+      >
+        <ToggleFeatureFlagButton />
+      </ApiProvider>,
+    );
+
+    const button = rendered.getByTestId('button-switch-feature-flag-state');
+    expect(button).toBeInTheDocument();
+
+    expect(window.localStorage.featureFlags).toBeUndefined();
+    fireEvent.click(button);
+    fireEvent.click(button);
+    expect(window.localStorage.featureFlags).toBe('{}');
+  });
+});

plugins/welcome/src/components/WelcomePage/ToggleFeatureFlagButton.tsx

@@ -0,0 +1,49 @@
+/*
+ * 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 React, { FC } from 'react';
+import { Button } from '@material-ui/core';
+import { FeatureFlagState, featureFlagsApiRef, useApi } from '@backstage/core';
+
+const ToggleFeatureFlagButton: FC<{}> = () => {
+  const featureFlagsApi = useApi(featureFlagsApiRef);
+
+  const handleClick = () => {
+    const isEnabled = featureFlagsApi.get('enable-welcome-box');
+    featureFlagsApi.set(
+      'enable-welcome-box',
+      isEnabled ? FeatureFlagState.NotEnabled : FeatureFlagState.Enabled,
+    );
+    window.location.reload();
+  };
+
+  return (
+    <Button
+      variant="contained"
+      color="secondary"
+      onClick={handleClick}
+      data-testid="button-switch-feature-flag-state"
+    >
+      {featureFlagsApi.get('enable-welcome-box') ===
+        FeatureFlagState.NotEnabled &&
+        'Enable "enable-welcome-box" feature flag'}
+      {featureFlagsApi.get('enable-welcome-box') === FeatureFlagState.Enabled &&
+        'Disable "enable-welcome-box" feature flag'}
+    </Button>
+  );
+};
+
+export default ToggleFeatureFlagButton;

plugins/welcome/src/components/WelcomePage/WelcomePage.tsx

@@ -23,7 +23,6 @@ import {
   ListItem,
   ListItemText,
   Link,
-  Button,
 } from '@material-ui/core';
 import Timer from '../Timer';
 import {
@@ -34,13 +33,11 @@ import {
   pageTheme,
   ContentHeader,
   SupportButton,
-  featureFlagsApiRef,
-  useApi,
 } from '@backstage/core';
 import ErrorButton from './ErrorButton';
+import ToggleFeatureFlagButton from './ToggleFeatureFlagButton';
 
 const WelcomePage: FC<{}> = () => {
-  const featureFlagsApi = useApi(featureFlagsApiRef);
   const profile = { givenName: '' };
 
   return (
@@ -127,22 +124,7 @@ const WelcomePage: FC<{}> = () => {
               <ErrorButton />
               <br />
               <br />
-              <Button
-                variant="contained"
-                color="secondary"
-                onClick={() => {
-                  featureFlagsApi.set(
-                    'enable-welcome-box',
-                    !featureFlagsApi.get('enable-welcome-box'),
-                  );
-                  window.location.reload();
-                }}
-              >
-                {featureFlagsApi.get('enable-welcome-box')
-                  ? 'Disable '
-                  : 'Enable '}{' '}
-                'enable-welcome-box' feature flag
-              </Button>
+              <ToggleFeatureFlagButton />
             </InfoCard>
           </Grid>
         </Grid>