Skip to content

Commit

Permalink
fix(ui): #225: change 'account' to 'sub-account' (#234)
Browse files Browse the repository at this point in the history 
* fix(ui): #225: change 'account' to 'sub-account'

* fix: tests
  • Loading branch information
@VanishMax
VanishMax authored Nov 12, 2024
1 parent 132d0d7 commit ec9c184
Show file tree
Hide file tree
Showing 2 changed files with 56 additions and 49 deletions.
26 changes: 13 additions & 13 deletions packages/ui/components/ui/account-switcher/account-switcher.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ describe('<AccountSwitcher />', () => {
it('renders the current account', () => {
const { getByLabelText } = render(<AccountSwitcher account={123} onChange={vi.fn()} />);

expect(getByLabelText('Account #123')).toHaveValue(123);
expect(getByLabelText('Sub-Account #123')).toHaveValue(123);
});

describe('changing the account via the input field', () => {
Expand All @@ -15,14 +15,14 @@ describe('<AccountSwitcher />', () => {
const { getByLabelText } = render(<AccountSwitcher account={123} onChange={onChange} />);

expect(onChange).not.toHaveBeenCalled();
fireEvent.change(getByLabelText('Account #123'), { target: { value: 456 } });
fireEvent.change(getByLabelText('Sub-Account #123'), { target: { value: 456 } });
expect(onChange).toHaveBeenCalledWith(456);
});

it('has aria-disabled=false', () => {
const { getByLabelText } = render(<AccountSwitcher account={123} onChange={vi.fn()} />);

expect(getByLabelText('Account #123')).toHaveAttribute('aria-disabled', 'false');
expect(getByLabelText('Sub-Account #123')).toHaveAttribute('aria-disabled', 'false');
});

describe('when a filter has been passed', () => {
Expand All @@ -32,7 +32,7 @@ describe('<AccountSwitcher />', () => {
<AccountSwitcher account={123} onChange={onChange} filter={[1, 2, 3]} />,
);

fireEvent.change(getByLabelText('Account #123'), { target: { value: 456 } });
fireEvent.change(getByLabelText('Sub-Account #123'), { target: { value: 456 } });
expect(onChange).not.toHaveBeenCalled();
});

Expand All @@ -41,7 +41,7 @@ describe('<AccountSwitcher />', () => {
<AccountSwitcher account={123} onChange={vi.fn()} filter={[1, 2, 3]} />,
);

expect(getByLabelText('Account #123')).toHaveAttribute('aria-disabled', 'true');
expect(getByLabelText('Sub-Account #123')).toHaveAttribute('aria-disabled', 'true');
});
});
});
Expand All @@ -52,14 +52,14 @@ describe('<AccountSwitcher />', () => {
const { getByLabelText } = render(<AccountSwitcher account={123} onChange={onChange} />);

expect(onChange).not.toHaveBeenCalled();
fireEvent.click(getByLabelText('Previous account'));
fireEvent.click(getByLabelText('Previous sub-account'));
expect(onChange).toHaveBeenCalledWith(122);
});

it("is disabled when we're at account 0", () => {
const { queryByLabelText } = render(<AccountSwitcher account={0} onChange={vi.fn()} />);

expect(queryByLabelText('Previous account')?.parentElement).toBeDisabled();
expect(queryByLabelText('Previous sub-account')?.parentElement).toBeDisabled();
});

describe('when a filter has been passed', () => {
Expand All @@ -70,7 +70,7 @@ describe('<AccountSwitcher />', () => {
);

expect(onChange).not.toHaveBeenCalled();
fireEvent.click(getByLabelText('Previous account'));
fireEvent.click(getByLabelText('Previous sub-account'));
expect(onChange).toHaveBeenCalledWith(100);
});

Expand All @@ -79,7 +79,7 @@ describe('<AccountSwitcher />', () => {
<AccountSwitcher account={100} onChange={vi.fn()} filter={[123, 100]} />,
);

expect(queryByLabelText('Previous account')?.parentElement).toBeDisabled();
expect(queryByLabelText('Previous sub-account')?.parentElement).toBeDisabled();
});
});
});
Expand All @@ -90,14 +90,14 @@ describe('<AccountSwitcher />', () => {
const { getByLabelText } = render(<AccountSwitcher account={123} onChange={onChange} />);

expect(onChange).not.toHaveBeenCalled();
fireEvent.click(getByLabelText('Next account'));
fireEvent.click(getByLabelText('Next sub-account'));
expect(onChange).toHaveBeenCalledWith(124);
});

it("is disabled when we're at the maximum account index", () => {
const { queryByLabelText } = render(<AccountSwitcher account={2 ** 32} onChange={vi.fn()} />);

expect(queryByLabelText('Next account')?.parentElement).toBeDisabled();
expect(queryByLabelText('Next sub-account')?.parentElement).toBeDisabled();
});

describe('when a filter has been passed', () => {
Expand All @@ -108,7 +108,7 @@ describe('<AccountSwitcher />', () => {
);

expect(onChange).not.toHaveBeenCalled();
fireEvent.click(getByLabelText('Next account'));
fireEvent.click(getByLabelText('Next sub-account'));
expect(onChange).toHaveBeenCalledWith(123);
});

Expand All @@ -117,7 +117,7 @@ describe('<AccountSwitcher />', () => {
<AccountSwitcher account={123} onChange={vi.fn()} filter={[123, 100]} />,
);

expect(queryByLabelText('Next account')?.parentElement).toBeDisabled();
expect(queryByLabelText('Next sub-account')?.parentElement).toBeDisabled();
});
});
});
Expand Down
79 changes: 43 additions & 36 deletions packages/ui/components/ui/account-switcher/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,50 +68,57 @@ export const AccountSwitcher = ({
disabled={!previousButtonEnabled}
>
<ArrowLeftIcon
aria-label='Previous account'
aria-label='Previous sub-account'
role='button'
onClick={handleClickPrevious}
className='size-6 hover:cursor-pointer'
/>
</Button>
<div className='select-none text-center font-headline text-xl font-semibold leading-[30px]'>
<div className='flex flex-row flex-wrap items-end gap-[6px]'>
<span>Account</span>
<div className='flex items-end gap-0'>
<p>#</p>
<div className='relative w-min min-w-[24px]'>
<Input
aria-label={`Account #${account}`}
aria-disabled={!!filter}
variant='transparent'
type='number'
className='mb-[3px] h-6 py-[2px] font-headline text-xl font-semibold leading-[30px]'
onChange={e => {
/**
* Don't allow manual account number entry when there's a
* filter.
*
* @todo: Change this to only call `handleChange()` when the
* user presses Enter? Then it could validate that the entered
* account index is in the filter.
*/
if (filter) {
return;
}
{account === 0 ? (
<span>Main Account</span>
) : (
<>
<span>Sub-Account</span>

const value = Number(e.target.value);
const valueLength = e.target.value.replace(/^0+/, '').length;
<div className='flex items-end gap-0'>
<p>#</p>
<div className='relative w-min min-w-[24px]'>
<Input
aria-label={`Sub-Account #${account}`}
aria-disabled={!!filter}
variant='transparent'
type='number'
className='mb-[3px] h-6 py-[2px] font-headline text-xl font-semibold leading-[30px]'
onChange={e => {
/**
* Don't allow manual account number entry when there's a
* filter.
*
* @todo: Change this to only call `handleChange()` when the
* user presses Enter? Then it could validate that the entered
* account index is in the filter.
*/
if (filter) {
return;
}

if (value > MAX_INDEX || valueLength > MAX_INDEX.toString().length) {
return;
}
handleChange(value);
}}
style={{ width: `${inputCharWidth}ch` }}
value={account ? account.toString().replace(/^0+/, '') : '0'} // Removes leading zeros (e.g. 00123 -> 123
/>
</div>
</div>
const value = Number(e.target.value);
const valueLength = e.target.value.replace(/^0+/, '').length;

if (value > MAX_INDEX || valueLength > MAX_INDEX.toString().length) {
return;
}
handleChange(value);
}}
style={{ width: `${inputCharWidth}ch` }}
value={account ? account.toString().replace(/^0+/, '') : '0'} // Removes leading zeros (e.g. 00123 -> 123
/>
</div>
</div>
</>
)}
</div>
</div>
<Button
Expand All @@ -123,7 +130,7 @@ export const AccountSwitcher = ({
disabled={!nextButtonEnabled}
>
<ArrowRightIcon
aria-label='Next account'
aria-label='Next sub-account'
role='button'
onClick={handleClickNext}
className='size-6 hover:cursor-pointer'
Expand Down

0 comments on commit ec9c184

Please sign in to comment.