Revert "First level of questions and redirection along with unit tests" (#2702)
Summary:
This reverts commit 2e87164152.
Causing OSS tests to break: https://github.com/facebook/flipper/runs/3358415851
Pull Request resolved: https://github.com/facebook/flipper/pull/2702
Differential Revision: D30393320
Pulled By: passy
fbshipit-source-id: a326a59d35fdbe0af0c52a2502a01ab9753d2e60
This commit is contained in:
Pascal Hartig
committed by
Facebook GitHub Bot
Facebook GitHub Bot
parent
0cb6c0b3d2
commit
75c4f20c8a
@@ -29,8 +29,7 @@ import BaseDevice, {OS} from '../../server/devices/BaseDevice';
|
|||||||
import Client from '../../Client';
|
import Client from '../../Client';
|
||||||
import {State} from '../../reducers';
|
import {State} from '../../reducers';
|
||||||
import {brandColors, brandIcons, colors} from '../../ui/components/colors';
|
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;
|
const {Text} = Typography;
|
||||||
|
|
||||||
@@ -109,8 +108,7 @@ export function AppSelector() {
|
|||||||
</Dropdown>
|
</Dropdown>
|
||||||
</Radio.Group>
|
</Radio.Group>
|
||||||
) : (
|
) : (
|
||||||
// GK check to decide if troubleshooting guide will be visible or not
|
<TroubleshootingGuide />
|
||||||
<TroubleshootingGuide showGuide={GK.get('flipper_self_sufficiency')} />
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,73 +0,0 @@
|
|||||||
/**
|
|
||||||
* 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(
|
|
||||||
<Provider store={store}>
|
|
||||||
<TroubleshootingGuide showGuide />,
|
|
||||||
</Provider>,
|
|
||||||
);
|
|
||||||
|
|
||||||
// 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');
|
|
||||||
});
|
|
||||||
@@ -10,6 +10,6 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import {NoDevices} from '../NoDevices';
|
import {NoDevices} from '../NoDevices';
|
||||||
|
|
||||||
export function TroubleshootingGuide(_props: {showGuide: boolean}) {
|
export default function TroubleshootingGuide() {
|
||||||
return <NoDevices />;
|
return <NoDevices />;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,61 +0,0 @@
|
|||||||
/**
|
|
||||||
* 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 (
|
|
||||||
<Modal
|
|
||||||
title="Troubleshooting Guide"
|
|
||||||
visible
|
|
||||||
width={650}
|
|
||||||
footer={null}
|
|
||||||
onCancel={() => props.toggleModal('next')}
|
|
||||||
bodyStyle={{maxHeight: 800, overflow: 'auto'}}>
|
|
||||||
<Layout.Container gap="huge">
|
|
||||||
<Text>What problem are you facing?</Text>
|
|
||||||
<Radio.Group onChange={handleChange}>
|
|
||||||
<Space direction="vertical">
|
|
||||||
<Radio value={'cannot_see_device'}>
|
|
||||||
<Text>Can't see the device.</Text>
|
|
||||||
</Radio>
|
|
||||||
<Radio value={'cannot_see_app'}>
|
|
||||||
<Text>Can see the device but not the app.</Text>
|
|
||||||
</Radio>
|
|
||||||
<Radio value={'cannot_see_plugin'}>
|
|
||||||
<Text>Can see the device and the app but not the plugin.</Text>
|
|
||||||
</Radio>
|
|
||||||
</Space>
|
|
||||||
</Radio.Group>
|
|
||||||
<Button
|
|
||||||
type="primary"
|
|
||||||
style={{flex: 0.1, marginLeft: 500}}
|
|
||||||
onClick={() => props.onAnswer(answer, props.toggleModal)}>
|
|
||||||
Next
|
|
||||||
</Button>
|
|
||||||
</Layout.Container>
|
|
||||||
</Modal>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,26 +0,0 @@
|
|||||||
/**
|
|
||||||
* 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 (
|
|
||||||
<Modal
|
|
||||||
title="Work in progress Q1 !"
|
|
||||||
visible
|
|
||||||
width={650}
|
|
||||||
footer={null}
|
|
||||||
onCancel={() => props.toggleModal('next')}
|
|
||||||
bodyStyle={{maxHeight: 800, overflow: 'auto'}}></Modal>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,26 +0,0 @@
|
|||||||
/**
|
|
||||||
* 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 (
|
|
||||||
<Modal
|
|
||||||
title="Work in progress Q2 !"
|
|
||||||
visible
|
|
||||||
width={650}
|
|
||||||
footer={null}
|
|
||||||
onCancel={() => props.toggleModal('next')}
|
|
||||||
bodyStyle={{maxHeight: 800, overflow: 'auto'}}></Modal>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,26 +0,0 @@
|
|||||||
/**
|
|
||||||
* 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 (
|
|
||||||
<Modal
|
|
||||||
title="Work in progress Q3 !"
|
|
||||||
visible
|
|
||||||
width={650}
|
|
||||||
footer={null}
|
|
||||||
onCancel={() => props.toggleModal('next')}
|
|
||||||
bodyStyle={{maxHeight: 800, overflow: 'auto'}}></Modal>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user