Skip to content

Commit

Permalink
Format
Browse files Browse the repository at this point in the history
  • Loading branch information
@raducristianpopa
raducristianpopa committed Jan 25, 2024
1 parent d2e1cfa commit 6491d71
Show file tree
Hide file tree
Showing 9 changed files with 209 additions and 202 deletions.
124 changes: 63 additions & 61 deletions packages/extension/src/components/__tests__/radio-group.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,104 +1,106 @@
import { fireEvent, render } from '@testing-library/react'
import React from 'react'
import { fireEvent, render } from '@testing-library/react';
import React from 'react';

import { Radio, RadioGroup } from '../radio-group'
import { Radio, RadioGroup } from '../radio-group';

describe('RadioGroup', () => {
const radioItems = [
{ label: 'Option 1', value: 'option1', checked: true },
{ label: 'Option 2', value: 'option2' },
]
];

it('should have the `flex-row` class when the `inline` variant is passed', () => {
const { queryByRole } = render(
<RadioGroup variant="inline" items={radioItems} name="radioName" />,
)
);

expect(queryByRole('radiogroup')).toBeInTheDocument()
expect(queryByRole('radiogroup')).toHaveClass('flex-row')
})
expect(queryByRole('radiogroup')).toBeInTheDocument();
expect(queryByRole('radiogroup')).toHaveClass('flex-row');
});

it('renders radio group correctly with items', () => {
const { getByRole } = render(<RadioGroup items={radioItems} name="radioGroup" />)
const { getByRole } = render(<RadioGroup items={radioItems} name="radioGroup" />);

const radioGroup = getByRole('radiogroup')
expect(radioGroup).toBeInTheDocument()
expect(radioGroup.childNodes.length).toBe(2) // Ensure two radio buttons are rendered
})
const radioGroup = getByRole('radiogroup');
expect(radioGroup).toBeInTheDocument();
expect(radioGroup.childNodes.length).toBe(2); // Ensure two radio buttons are rendered
});

it('renders radio group with no element checked by default', () => {
const radioItemsNotChecked = [
{ label: 'Option 1', value: 'option1' },
{ label: 'Option 2', value: 'option2' },
]
const { getByLabelText } = render(<RadioGroup items={radioItemsNotChecked} name="radioGroup" />)
];
const { getByLabelText } = render(
<RadioGroup items={radioItemsNotChecked} name="radioGroup" />,
);

const firstRadioButton = getByLabelText('Option 1')
const secondRadioButton = getByLabelText('Option 2')
const firstRadioButton = getByLabelText('Option 1');
const secondRadioButton = getByLabelText('Option 2');

expect(firstRadioButton).not.toBeChecked()
expect(secondRadioButton).not.toBeChecked()
})
expect(firstRadioButton).not.toBeChecked();
expect(secondRadioButton).not.toBeChecked();
});

it('handles keyboard navigation', () => {
const { getByLabelText } = render(<RadioGroup items={radioItems} name="radioGroup" />)
const { getByLabelText } = render(<RadioGroup items={radioItems} name="radioGroup" />);

const radioGroup = getByLabelText('Option 1')
fireEvent.keyDown(radioGroup, { key: 'ArrowRight', code: 'ArrowRight' })
let secondRadioButton = getByLabelText('Option 2')
expect(secondRadioButton).toBeChecked()
const radioGroup = getByLabelText('Option 1');
fireEvent.keyDown(radioGroup, { key: 'ArrowRight', code: 'ArrowRight' });
let secondRadioButton = getByLabelText('Option 2');
expect(secondRadioButton).toBeChecked();

fireEvent.keyDown(radioGroup, { key: 'ArrowLeft', code: 'ArrowLeft' })
let firstRadioButton = getByLabelText('Option 1')
expect(firstRadioButton).toBeChecked()
fireEvent.keyDown(radioGroup, { key: 'ArrowLeft', code: 'ArrowLeft' });
let firstRadioButton = getByLabelText('Option 1');
expect(firstRadioButton).toBeChecked();

fireEvent.keyDown(radioGroup, { key: 'ArrowUp', code: 'ArrowUp' })
secondRadioButton = getByLabelText('Option 2')
expect(secondRadioButton).toBeChecked()
fireEvent.keyDown(radioGroup, { key: 'ArrowUp', code: 'ArrowUp' });
secondRadioButton = getByLabelText('Option 2');
expect(secondRadioButton).toBeChecked();

fireEvent.keyDown(radioGroup, { key: 'ArrowDown', code: 'ArrowDown' })
firstRadioButton = getByLabelText('Option 1')
expect(firstRadioButton).toBeChecked()
})
fireEvent.keyDown(radioGroup, { key: 'ArrowDown', code: 'ArrowDown' });
firstRadioButton = getByLabelText('Option 1');
expect(firstRadioButton).toBeChecked();
});

it('changes selection on arrow keys', () => {
const { getByLabelText } = render(<RadioGroup items={radioItems} name="radioGroup" />)
const { getByLabelText } = render(<RadioGroup items={radioItems} name="radioGroup" />);

const radioGroup = getByLabelText('Option 1')
fireEvent.keyDown(radioGroup, { key: 'ArrowRight', code: 'ArrowRight' })
fireEvent.keyDown(radioGroup, { key: 'Enter', code: 'Enter' })
const secondRadioButton = getByLabelText('Option 2')
expect(secondRadioButton).toBeChecked()
})
const radioGroup = getByLabelText('Option 1');
fireEvent.keyDown(radioGroup, { key: 'ArrowRight', code: 'ArrowRight' });
fireEvent.keyDown(radioGroup, { key: 'Enter', code: 'Enter' });
const secondRadioButton = getByLabelText('Option 2');
expect(secondRadioButton).toBeChecked();
});

it('changes selection on clicking radio buttons', () => {
const { getByLabelText } = render(<RadioGroup items={radioItems} name="radioGroup" />)
const { getByLabelText } = render(<RadioGroup items={radioItems} name="radioGroup" />);

const secondRadioButton = getByLabelText('Option 2')
fireEvent.click(secondRadioButton)
expect(secondRadioButton).toBeChecked()
})
})
const secondRadioButton = getByLabelText('Option 2');
fireEvent.click(secondRadioButton);
expect(secondRadioButton).toBeChecked();
});
});

describe('Radio', () => {
it('renders radio button correctly with label', () => {
const { getByLabelText } = render(<Radio label="Option 1" value="option1" name="radioGroup" />)
const { getByLabelText } = render(<Radio label="Option 1" value="option1" name="radioGroup" />);

const radioButton = getByLabelText('Option 1')
expect(radioButton).toBeInTheDocument()
expect(radioButton).toHaveAttribute('type', 'radio')
expect(radioButton).not.toBeChecked()
const radioButton = getByLabelText('Option 1');
expect(radioButton).toBeInTheDocument();
expect(radioButton).toHaveAttribute('type', 'radio');
expect(radioButton).not.toBeChecked();

fireEvent.click(radioButton)
expect(radioButton).toBeChecked()
})
fireEvent.click(radioButton);
expect(radioButton).toBeChecked();
});

it('renders disabled radio button', () => {
const { getByLabelText } = render(
<Radio label="Option 1" value="option1" name="radioGroup" disabled />,
)
);

const radioButton = getByLabelText('Option 1')
expect(radioButton).toBeDisabled()
})
})
const radioButton = getByLabelText('Option 1');
expect(radioButton).toBeDisabled();
});
});
14 changes: 8 additions & 6 deletions packages/extension/src/components/icons.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,8 @@ export const ArrowBack = (props: React.SVGProps<SVGSVGElement>) => {
viewBox="0 0 25 25"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}>
{...props}
>
<mask id="mask0_169_196" maskUnits="userSpaceOnUse" x="0" y="0" width="25" height="25">
<rect x="0.75" y="0.5" width="24" height="24" fill="#C4C4C4" />
</mask>
Expand All @@ -38,8 +39,8 @@ export const ArrowBack = (props: React.SVGProps<SVGSVGElement>) => {
/>
</g>
</svg>
)
}
);
};

export const Settings = (props: React.SVGProps<SVGSVGElement>) => {
return (
Expand All @@ -49,7 +50,8 @@ export const Settings = (props: React.SVGProps<SVGSVGElement>) => {
height="25"
viewBox="0 0 25 25"
fill="none"
{...props}>
{...props}
>
<mask id="mask0_140_3136" maskUnits="userSpaceOnUse" x="0" y="0" width="25" height="25">
<rect x="0.75" y="0.5" width="24" height="24" fill="#C4C4C4" />
</mask>
Expand All @@ -60,8 +62,8 @@ export const Settings = (props: React.SVGProps<SVGSVGElement>) => {
/>
</g>
</svg>
)
}
);
};

export const DollarSign = (props: React.SVGProps<SVGSVGElement>) => {
return (
Expand Down
24 changes: 12 additions & 12 deletions packages/extension/src/components/layout/header.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
import React, { useMemo } from 'react'
import { Link, useLocation } from 'react-router-dom'
import { runtime } from 'webextension-polyfill'
import React, { useMemo } from 'react';
import { Link, useLocation } from 'react-router-dom';
import { runtime } from 'webextension-polyfill';

import { ArrowBack, Settings } from '../icons'
import { ROUTES } from '../router-provider'
import { ArrowBack, Settings } from '../icons';
import { ROUTES } from '../router-provider';

const Logo = runtime.getURL('assets/images/logo.svg')
const Logo = runtime.getURL('assets/images/logo.svg');

const NavigationButton = () => {
const location = useLocation()
const location = useLocation();

const component = useMemo(
() =>
Expand All @@ -23,10 +23,10 @@ const NavigationButton = () => {
),

[location],
)
);

return component
}
return component;
};

export const Header = () => {
return (
Expand All @@ -39,5 +39,5 @@ export const Header = () => {
<NavigationButton />
</div>
</div>
)
}
);
};
14 changes: 7 additions & 7 deletions packages/extension/src/components/layout/main-layout.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import React from 'react'
import { Outlet } from 'react-router-dom'
import React from 'react';
import { Outlet } from 'react-router-dom';

import { Header } from './header'
import { Header } from './header';

const Divider = () => {
return <div className="mb-8 bg-divider-gradient w-100 h-1" />
}
return <div className="mb-8 bg-divider-gradient w-100 h-1" />;
};

export const MainLayout = () => {
return (
Expand All @@ -16,5 +16,5 @@ export const MainLayout = () => {
<Outlet />
</main>
</div>
)
}
);
};
Loading

0 comments on commit 6491d71

Please sign in to comment.