diff --git a/desktop/app/src/sandy-chrome/appinspect/AppSelector.tsx b/desktop/app/src/sandy-chrome/appinspect/AppSelector.tsx index b5e95a036..e8297db95 100644 --- a/desktop/app/src/sandy-chrome/appinspect/AppSelector.tsx +++ b/desktop/app/src/sandy-chrome/appinspect/AppSelector.tsx @@ -29,7 +29,8 @@ import BaseDevice, {OS} from '../../server/devices/BaseDevice'; import Client from '../../Client'; import {State} from '../../reducers'; import {brandColors, brandIcons, colors} from '../../ui/components/colors'; -import TroubleshootingGuide from './fb-stubs/TroubleshootingGuide'; +import {TroubleshootingGuide} from './fb-stubs/TroubleshootingGuide'; +import GK from '../../fb-stubs/GK'; const {Text} = Typography; @@ -108,7 +109,8 @@ export function AppSelector() { ) : ( - + // GK check to decide if troubleshooting guide will be visible or not + ); } diff --git a/desktop/app/src/sandy-chrome/appinspect/__tests__/TroubleshootingGuide.node.tsx b/desktop/app/src/sandy-chrome/appinspect/__tests__/TroubleshootingGuide.node.tsx new file mode 100644 index 000000000..851eb4ecf --- /dev/null +++ b/desktop/app/src/sandy-chrome/appinspect/__tests__/TroubleshootingGuide.node.tsx @@ -0,0 +1,73 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @format + */ + +import {render, fireEvent} from '@testing-library/react'; +import React from 'react'; +import {TroubleshootingGuide} from '../fb/TroubleshootingGuide'; +import {Provider} from 'react-redux'; +import {createMockFlipperWithPlugin} from '../../../test-utils/createMockFlipperWithPlugin'; +import {TestUtils} from 'flipper-plugin'; +import {loadNext} from '../fb/TroubleshootingGuide'; + +test('render initial screen of troubleshooting guide correctly', async () => { + const TestPlugin = TestUtils.createTestPlugin({ + plugin() { + return {}; + }, + }); + + const {store} = await createMockFlipperWithPlugin(TestPlugin); + + const res = render( + + , + , + ); + + // Clicking on the troubleshooting guide button to launch the guide + fireEvent.click(res.getByText('Troubleshooting Guide')); + + // Checking if the 3 initial questions appear + expect(res.queryAllByText("Can't see the device.").length).toBe(1); + expect(res.queryAllByText('Can see the device but not the app.').length).toBe( + 1, + ); + expect( + res.queryAllByText('Can see the device and the app but not the plugin.') + .length, + ).toBe(1); + + // Clicking on close + fireEvent.click(res.getByRole('button', {name: 'Close'})); + + // Checking if close on the modal popup works and the questions are no longer visible + expect(res.queryAllByText("Can't see the device.").length).toBe(0); + expect(res.queryAllByText('Can see the device but not the app.').length).toBe( + 0, + ); + expect( + res.queryAllByText('Can see the device and the app but not the plugin.') + .length, + ).toBe(0); + + // Clicking on the first radio checkbox ie the first question after re-launching the guide + fireEvent.click(res.getByText('Troubleshooting Guide')); + fireEvent.click(res.getByText("Can't see the device.")); + fireEvent.click(res.getByText('Next')); + + // Checking if the screen of the first question shows up + expect(res.queryAllByText('Work in progress Q1 !').length).toBe(1); +}); + +test('check return value of loadNext function', async () => { + const toggleModal = jest.fn(); + const result = loadNext('cannot_see_device', toggleModal); + // Checking loadNext returns 'q1' which will be used to toggleModal when the user input in the previous screen was 'opt1' + expect(result).toBe('question1'); +}); diff --git a/desktop/app/src/sandy-chrome/appinspect/fb-stubs/TroubleshootingGuide.tsx b/desktop/app/src/sandy-chrome/appinspect/fb-stubs/TroubleshootingGuide.tsx index f7e7ee642..0c624dd00 100644 --- a/desktop/app/src/sandy-chrome/appinspect/fb-stubs/TroubleshootingGuide.tsx +++ b/desktop/app/src/sandy-chrome/appinspect/fb-stubs/TroubleshootingGuide.tsx @@ -10,6 +10,6 @@ import React from 'react'; import {NoDevices} from '../NoDevices'; -export default function TroubleshootingGuide() { +export function TroubleshootingGuide(_props: {showGuide: boolean}) { return ; } diff --git a/desktop/app/src/sandy-chrome/appinspect/troubleshooting/GuideFirstScreen.tsx b/desktop/app/src/sandy-chrome/appinspect/troubleshooting/GuideFirstScreen.tsx new file mode 100644 index 000000000..9e2abfa70 --- /dev/null +++ b/desktop/app/src/sandy-chrome/appinspect/troubleshooting/GuideFirstScreen.tsx @@ -0,0 +1,61 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @format + */ + +import React, {useState} from 'react'; +import {Modal, Typography, Radio, Space, Button, RadioChangeEvent} from 'antd'; +import {Layout} from 'flipper-plugin'; +import {ModalDialog} from '../fb/TroubleshootingGuide'; + +const {Text} = Typography; + +export function GuideFirstScreen(props: { + toggleModal: (showModal: ModalDialog) => void; + onAnswer: ( + answer: string, + toggleModal: (showModal: ModalDialog) => void, + ) => void; +}) { + const [answer, setAnswer] = useState(''); + const handleChange = (e: RadioChangeEvent) => { + setAnswer(e.target.value); + }; + + return ( + props.toggleModal('next')} + bodyStyle={{maxHeight: 800, overflow: 'auto'}}> + + What problem are you facing? + + + + Can't see the device. + + + Can see the device but not the app. + + + Can see the device and the app but not the plugin. + + + + + + + ); +} diff --git a/desktop/app/src/sandy-chrome/appinspect/troubleshooting/Question1.tsx b/desktop/app/src/sandy-chrome/appinspect/troubleshooting/Question1.tsx new file mode 100644 index 000000000..ec3b2d06a --- /dev/null +++ b/desktop/app/src/sandy-chrome/appinspect/troubleshooting/Question1.tsx @@ -0,0 +1,26 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @format + */ + +import React from 'react'; +import {Modal} from 'antd'; +import {ModalDialog} from '../fb/TroubleshootingGuide'; + +export function Question1(props: { + toggleModal: (showModal: ModalDialog) => void; +}) { + return ( + props.toggleModal('next')} + bodyStyle={{maxHeight: 800, overflow: 'auto'}}> + ); +} diff --git a/desktop/app/src/sandy-chrome/appinspect/troubleshooting/Question2.tsx b/desktop/app/src/sandy-chrome/appinspect/troubleshooting/Question2.tsx new file mode 100644 index 000000000..f3c183520 --- /dev/null +++ b/desktop/app/src/sandy-chrome/appinspect/troubleshooting/Question2.tsx @@ -0,0 +1,26 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @format + */ + +import React from 'react'; +import {Modal} from 'antd'; +import {ModalDialog} from '../fb/TroubleshootingGuide'; + +export function Question2(props: { + toggleModal: (showModal: ModalDialog) => void; +}) { + return ( + props.toggleModal('next')} + bodyStyle={{maxHeight: 800, overflow: 'auto'}}> + ); +} diff --git a/desktop/app/src/sandy-chrome/appinspect/troubleshooting/Question3.tsx b/desktop/app/src/sandy-chrome/appinspect/troubleshooting/Question3.tsx new file mode 100644 index 000000000..046f757db --- /dev/null +++ b/desktop/app/src/sandy-chrome/appinspect/troubleshooting/Question3.tsx @@ -0,0 +1,26 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @format + */ + +import React from 'react'; +import {Modal} from 'antd'; +import {ModalDialog} from '../fb/TroubleshootingGuide'; + +export function Question3(props: { + toggleModal: (showModal: ModalDialog) => void; +}) { + return ( + props.toggleModal('next')} + bodyStyle={{maxHeight: 800, overflow: 'auto'}}> + ); +}