antd-form-fields
From this package you can import all basic form fields components and also wrappers for regression testing using cypress framework.
Implementation
First you need to install the module as dev dependency into your project.
npm install --save-dev GoodRequest/antd-form-fields
Form fileds
This is all types of form fields which module contains
- CheckboxField, CheckboxGroupField, RadioGroupField
- DateField, DateRangeField, DateRangePickerField, TimeField, TimeRangeField
- FileUploadField, ImdUploadField
- InputField, InputMaskedField, InputNumberField, InputPasswordField, TextareaField
- SwitchField, ToggleField
- SelectField
Usage
Import form field in component where you want to use it.
import { InputField } from 'antd-form-fields'
Cypress commands
Type | Selector |
---|---|
API Authentication with access and refresh token | cy.apiAuth() |
InputField | cy.setInputValue() |
SelectField | cy.selectOptionDropdown(), cy.clearDropdownSelection() |
SelectField with search | cy.setSearchBoxValueAndSelectFirstOption() |
FileUploadField, ImdUploadField | cy.uploadFile() |
Button | cy.clickButton () |
DeleteButton | cy.clickDeleteButtonWithConf() |
Check success toast message | cy.checkSuccessToastMessage() |
CheckboxField, CheckboxGroupField, RadioGroupField | cy.checkFirstCheckBox() |
Usage
If you want to use form fields selector for cypress tests you need import package and initialize method to cypress/support/commands.ts
file
import 'antd-form-fields'
import initializeCustomCommands from 'antd-form-fields/dist/commands/cypressCommands'
initializeCustomCommands()
Development
storybook needs as a dependency react and react dom.
npm run set-local-development
dont forgot to unset after you done
npm run unset-local-development
Run storybook to check form fields.
npm run storybook
Building for source
For production release:
npm run build
Tailwind-styles
Tailwind styles are set though variables in consumer (+ only in form), which is why they will not be applied in storybook.