Skip to content

Commit

Permalink
Merge pull request #7 from fmorency/more-more-more-tests
Browse files Browse the repository at this point in the history 
test: more tests and refactor
  • Loading branch information
@chalabi2
chalabi2 authored Sep 4, 2024
2 parents 999c9bc + 96212c6 commit 0e9cdfd
Show file tree
Hide file tree
Showing 14 changed files with 266 additions and 205 deletions.
Binary file modified bun.lockb
View file
Binary file not shown.
13 changes: 5 additions & 8 deletions components/bank/forms/__tests__/ibcSendForm.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ function renderWithProps(props = {}) {
return renderWithChainProvider(<IbcSendForm {...defaultProps} {...props} />);
}

// TODO: Validate form inputs in component
describe('IbcSendForm Component', () => {
afterEach(cleanup);

Expand Down Expand Up @@ -60,14 +59,12 @@ describe('IbcSendForm Component', () => {
expect(amountInput).toHaveValue('100');
});

// // TODO: Make this test pass
// test('send button is disabled when inputs are invalid', () => {
// renderWithProps();
// const sendButton = screen.getByLabelText('send-btn');
// expect(sendButton).toBeDisabled();
// });
test('send button is disabled when inputs are invalid', () => {
renderWithProps();
const sendButton = screen.getByLabelText('send-btn');
expect(sendButton).toBeDisabled();
});

// TODO: Fix inputs to be valid
test('send button is enabled when inputs are valid', () => {
renderWithProps();
fireEvent.change(screen.getByPlaceholderText('Recipient address'), {
Expand Down
13 changes: 5 additions & 8 deletions components/bank/forms/__tests__/sendForm.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,6 @@ function renderWithProps(props = {}) {
return renderWithChainProvider(<SendForm {...defaultProps} {...props} />);
}

// TODO: Validate form inputs in component
describe('SendForm Component', () => {
afterEach(cleanup);

Expand Down Expand Up @@ -67,14 +66,12 @@ describe('SendForm Component', () => {
expect(amountInput).toHaveValue('100');
});

// TODO: Make this test pass
// test('send button is disabled when inputs are invalid', () => {
// renderWithProps();
// const sendButton = screen.getByText('Send');
// expect(sendButton).toBeDisabled();
// });
test('send button is disabled when inputs are invalid', () => {
renderWithProps();
const sendButton = screen.getByText('Send');
expect(sendButton).toBeDisabled();
});

// TODO: Fix inputs to be valid
test('send button is enabled when inputs are valid', () => {
renderWithProps();
fireEvent.change(screen.getByPlaceholderText('Recipient address'), {
Expand Down
4 changes: 3 additions & 1 deletion components/groups/forms/groups/GroupDetailsForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,8 +53,10 @@ export default function GroupDetails({
validationSchema={GroupSchema}
onSubmit={nextStep}
validateOnChange={true}
validateOnMount={true}
enableReinitialize
>
{({ isValid, dirty, setFieldValue }) => (
{({ isValid, setFieldValue }) => (
<Form className="min-h-[330px]">
<div className="grid gap-5 my-6 sm:grid-cols-2">
<TextInput
Expand Down
47 changes: 25 additions & 22 deletions components/groups/forms/groups/GroupPolicyForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,13 @@ const GroupPolicySchema = Yup.object().shape({
.min(1, 'Minimum voting threshold is 1'),
});

enum VotingUnit {
Hours = 'hours',
Days = 'days',
Weeks = 'weeks',
Months = 'months',
}

export default function GroupPolicyForm({
nextStep,
prevStep,
Expand All @@ -25,18 +32,22 @@ export default function GroupPolicyForm({
nextStep: () => void;
prevStep: () => void;
}>) {
const [votingUnit, setVotingUnit] = useState('days');
const updateField = (field: keyof FormData, value: any) => {
dispatch({ type: 'UPDATE_FIELD', field, value });
};

const [votingUnit, setVotingUnit] = useState(VotingUnit.Days);
const [votingAmount, setVotingAmount] = useState(1);

const convertToSeconds = (unit: string, amount: number): number => {
const convertToSeconds = (unit: VotingUnit, amount: number): number => {
switch (unit) {
case 'hours':
case VotingUnit.Hours:
return amount * 3600;
case 'days':
case VotingUnit.Days:
return amount * 86400;
case 'weeks':
case VotingUnit.Weeks:
return amount * 604800;
case 'months':
case VotingUnit.Months:
return amount * 2592000;
default:
return 0;
Expand All @@ -45,17 +56,13 @@ export default function GroupPolicyForm({

useEffect(() => {
const votingPeriodSeconds = convertToSeconds(votingUnit, votingAmount);
dispatch({
type: 'UPDATE_FIELD',
field: 'votingPeriod',
value: {
seconds: BigInt(votingPeriodSeconds),
nanos: 0,
},
updateField('votingPeriod', {
seconds: BigInt(votingPeriodSeconds),
nanos: 0,
});
}, [votingUnit, votingAmount, dispatch]);

const handleUnitChange = (unit: string) => {
const handleUnitChange = (unit: VotingUnit) => {
setVotingUnit(unit);
};

Expand Down Expand Up @@ -106,7 +113,7 @@ export default function GroupPolicyForm({
tabIndex={0}
className="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52 mt-1"
>
{['hours', 'days', 'weeks', 'months'].map(unit => (
{Object.values(VotingUnit).map(unit => (
<li key={unit}>
<a onClick={() => handleUnitChange(unit)}>
{unit.charAt(0).toUpperCase() + unit.slice(1)}
Expand All @@ -132,12 +139,8 @@ export default function GroupPolicyForm({
label=""
value={formData.votingThreshold}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
const value = Math.max(1, parseInt(e.target.value) || 1);
dispatch({
type: 'UPDATE_FIELD',
field: 'votingThreshold',
value: value.toString(),
});
const value = Math.max(1, parseInt(e.target.value));
updateField('votingThreshold', value.toString());
setFieldValue('votingThreshold', value);
}}
min={1}
Expand All @@ -148,7 +151,7 @@ export default function GroupPolicyForm({
<button
type="submit"
className="w-full btn btn-primary"
disabled={!isValid}
disabled={!isValid || !dirty}
onClick={() => {
nextStep();
}}
Expand Down
158 changes: 80 additions & 78 deletions components/groups/forms/groups/MemberInfoForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ const MemberSchema = Yup.object().shape({
const MemberInfoSchema = Yup.object().shape({
members: Yup.array().of(MemberSchema).min(1, 'At least one member is required'),
});

export default function MemberInfoForm({
formData,
dispatch,
Expand All @@ -29,7 +30,6 @@ export default function MemberInfoForm({
address: string;
}>) {
const [numberOfMembers, setNumberOfMembers] = useState(formData.members.length);
console.log('formData', formData);
const updateMembers = () => {
const currentLength = formData.members.length;
if (numberOfMembers > currentLength) {
Expand Down Expand Up @@ -103,92 +103,95 @@ export default function MemberInfoForm({
validateOnChange={true}
validateOnBlur={true}
>
{({ values, isValid, dirty, setFieldValue }) => (
<Form className="min-h-[330px]">
<div className="overflow-y-scroll max-h-[550px] min-h-[330px]">
<FieldArray name="members">
{() => (
<>
{values.members.map((member, index) => (
<div key={index} className="grid grid-cols-3 gap-4 mb-4 p-1">
<div className="relative">
{({ values, isValid, errors, setFieldValue }) => {
return (
<Form className="min-h-[330px]">
<div className="overflow-y-scroll max-h-[550px] min-h-[330px]">
{errors.members && <div className="text-red-500"></div>}
<FieldArray name="members">
{() => (
<>
{values.members.map((member, index) => (
<div key={index} className="grid grid-cols-3 gap-4 mb-4 p-1">
<div className="relative">
<TextInput
name={`members.${index}.address`}
label="Address"
placeholder="manifest1..."
value={member.address}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setFieldValue(`members.${index}.address`, e.target.value);
dispatch({
type: 'UPDATE_MEMBER',
index,
field: 'address',
value: e.target.value,
});
}}
className={`input input-bordered w-full ${
index === 0 ? 'rounded-tr-none rounded-br-none' : ''
}`}
/>
{index === 0 && (
<button
type="button"
onClick={() => {
setFieldValue(`members.${index}.address`, address);
dispatch({
type: 'UPDATE_MEMBER',
index,
field: 'address',
value: address,
});
}}
aria-label="Paste address"
className="btn btn-primary rounded-tr-lg rounded-br-lg rounded-bl-none rounded-tl-none"
>
<PiAddressBook className="w-6 h-6" />
</button>
)}
</div>
<TextInput
name={`members.${index}.address`}
label="Address"
placeholder="manifest1..."
value={member.address}
name={`members.${index}.name`}
label="Name"
placeholder="Alice"
value={member.name}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setFieldValue(`members.${index}.address`, e.target.value);
setFieldValue(`members.${index}.name`, e.target.value);
dispatch({
type: 'UPDATE_MEMBER',
index,
field: 'address',
field: 'name',
value: e.target.value,
});
}}
className={`input input-bordered w-full ${
index === 0 ? 'rounded-tr-none rounded-br-none' : ''
}`}
className="input input-bordered w-full"
/>
<NumberInput
name={`members.${index}.weight`}
label="Weight"
placeholder="1"
value={member.weight}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
const value = Math.max(1, parseInt(e.target.value) || 1);
setFieldValue(`members.${index}.weight`, value);
dispatch({
type: 'UPDATE_MEMBER',
index,
field: 'weight',
value: value.toString(),
});
}}
min={1}
className="input input-bordered w-full"
/>
{index === 0 && (
<button
type="button"
onClick={() => {
setFieldValue(`members.${index}.address`, address);
dispatch({
type: 'UPDATE_MEMBER',
index,
field: 'address',
value: address,
});
}}
aria-label="Paste address"
className="btn btn-primary rounded-tr-lg rounded-br-lg rounded-bl-none rounded-tl-none"
>
<PiAddressBook className="w-6 h-6" />
</button>
)}
</div>
<TextInput
name={`members.${index}.name`}
label="Name"
placeholder="Alice"
value={member.name}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setFieldValue(`members.${index}.name`, e.target.value);
dispatch({
type: 'UPDATE_MEMBER',
index,
field: 'name',
value: e.target.value,
});
}}
className="input input-bordered w-full"
/>
<NumberInput
name={`members.${index}.weight`}
label="Weight"
placeholder="1"
value={member.weight}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
const value = Math.max(1, parseInt(e.target.value) || 1);
setFieldValue(`members.${index}.weight`, value);
dispatch({
type: 'UPDATE_MEMBER',
index,
field: 'weight',
value: value.toString(),
});
}}
min={1}
className="input input-bordered w-full"
/>
</div>
))}
</>
)}
</FieldArray>
</div>
))}
</>
)}
</FieldArray>
</div>


<button
type="submit"
Expand All @@ -201,7 +204,6 @@ export default function MemberInfoForm({
</Form>
)}
</Formik>

<div className="flex space-x-3 ga-4 mt-6">
<button
onClick={prevStep}
Expand Down
Loading

0 comments on commit 0e9cdfd

Please sign in to comment.