馃И 780 implementing new way of creating tests #791
Conversation
| @@ -10,14 +10,19 @@ describe('Create test', () => { | |||
| it('should create a basic GET test from scratch', () => { | |||
| const $form = openCreateTestModal(); | |||
|
|
|||
| $form.get('[data-cy=method-select]').click(); | |||
There was a problem hiding this comment.
Updating the creation test flows to match the new page
| @@ -0,0 +1,22 @@ | |||
| import * as S from './CreateTestHeader.styled'; | |||
There was a problem hiding this comment.
New header component for the create test page
| testSuite: string; | ||
| } | ||
|
|
||
| const BasicDetails = () => { |
There was a problem hiding this comment.
This is one of the default steps forms that can be reused for multiple plugins
| selectedDemo?: IDemoTestExample; | ||
| } | ||
|
|
||
| const BasicDetailsForm = ({form, onSubmit, onSelectDemo, onValidation, selectedDemo}: IProps) => { |
| const SelectPlugin = () => { | ||
| const {onUpdatePlugin, pluginName, onNext} = useCreateTest(); | ||
| const [selectedPlugin, setSelectedPlugin] = useState(pluginName); | ||
|
|
There was a problem hiding this comment.
The initial step when creating a test, it shows the list of available plugins
| [SupportedPlugins.REST]: Rest, | ||
| [SupportedPlugins.Messaging]: {}, | ||
| [SupportedPlugins.RPC]: {}, | ||
| [SupportedPlugins.Postman]: {}, |
There was a problem hiding this comment.
Adding the component mapping for our factories 馃彮
| const {stepNumber, stepList, onPrev, onCreateTest, isLoading} = useCreateTest(); | ||
|
|
||
| return ( | ||
| <S.Footer> |
There was a problem hiding this comment.
Navigation control for the steps
| } | ||
|
|
||
| const CreateTestSteps = ({stepList, selectedKey, pluginName, onGoTo}: IProps) => { | ||
| return ( |
There was a problem hiding this comment.
Depending on the selected plugins the steps will be changing
| onSelect(plugin: IPlugin): void; | ||
| } | ||
|
|
||
| const PluginCard = ({plugin: {title, description, isActive}, plugin, onSelect, isSelected}: IProps) => { |
| ], | ||
| }; | ||
|
|
||
| const Rest: IPlugin = { |
There was a problem hiding this comment.
This is where we create the plugins by specifying each of the steps, types, active status, and whatnot
|
|
||
| export const useCreateTest = () => useContext(Context); | ||
|
|
||
| const CreateTestProvider = ({children}: IProps) => { |
There was a problem hiding this comment.
Provides the draft test, navigation control and creation of the test
| pluginName: SupportedPlugins.REST, | ||
| }; | ||
|
|
||
| const createTestSlice = createSlice({ |
There was a problem hiding this comment.
Stores everything related to the create test flow
| }, [form, request]); | ||
|
|
||
| useEffect(() => { | ||
| onRefreshData(); |
There was a problem hiding this comment.
Curious, why do we need this effect?
There was a problem hiding this comment.
The form gets stale if you go back one or multiple steps and if you change something at a prev step it wont reflect the changes.
| {title}{' '} | ||
| {!isActive && ( | ||
| <> | ||
| - <a href={GITHUB_ISSUES_URL}>Coming soon!</a> |
There was a problem hiding this comment.
maybe a target blank here
This PR is quite chunky! 馃ゴ We are adding a new way of creating tests by migration from the modal to a new page. We are also introducing plugins and sequences depending on the different steps a plugin might have.
Changes
Fixes
Checklist
https://www.loom.com/share/8f192908584542f1b30cb74267609981