Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: light UI redesign #30

Open
wants to merge 22 commits into
base: master
Choose a base branch
from
Open

feat: light UI redesign #30

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
3046ba3
resolve merge
postrad May 17, 2020
8fdb6da
added Constants folder with colors
postrad May 17, 2020
9632ca8
clean up
postrad May 17, 2020
e570df9
Merge branch 'master' into light-redesign
postrad May 25, 2020
65cff3a
redesign custom input
postrad May 25, 2020
be425ad
more style tweaks
postrad May 25, 2020
9b4978f
Merge branch 'master' into light-redesign
postrad Jun 20, 2020
5270296
added current color text and style tweaks
postrad Jun 20, 2020
00f510f
removed url text
postrad Jun 20, 2020
455854e
linting fixes
postrad Jun 20, 2020
53f613d
fixed customInput test
postrad Jun 20, 2020
3fea811
fixed tests
postrad Jun 20, 2020
800f11a
adding a for and id to label and input
postrad Jun 20, 2020
f8ea525
removed unused import
postrad Jun 20, 2020
c26c0fb
disabled aria label rule
postrad Jun 20, 2020
701d845
added colorButton tests
postrad Jun 20, 2020
98ab742
more lil unit tests
postrad Jun 20, 2020
b35c74f
add css custom properties for better dynamic styles
postrad Jun 22, 2020
e64a79e
removed space
postrad Jun 22, 2020
5bf37fa
added enum
postrad Jun 22, 2020
cc0c32c
appeased linter
postrad Jun 22, 2020
af392bb
removed bang
postrad Jun 22, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 5 additions & 50 deletions src/components/__tests__/popup.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import {
RenderResult,
waitFor,
fireEvent,
getAllByTestId,
} from '@testing-library/react';
import { act } from 'react-dom/test-utils';

Expand All @@ -26,63 +27,17 @@ describe('Popup', () => {
utils = render(<Popup />);
});

const { queryAllByLabelText } = utils;
const { queryAllByLabelText, getByTestId, getAllByTestId } = utils;

(chromeHelpers.getActiveColor as jest.Mock).mockResolvedValue(COLORS[0]);

await waitFor(() => expect(chromeHelpers.getActiveColor).toHaveBeenCalled());

const colorButtons = queryAllByLabelText('save color');
const colorButtons = getAllByTestId('color button');
const whiteList = queryAllByLabelText('whitelist toggle');
const customForm = queryAllByLabelText('custom form');

expect(colorButtons[0]).toHaveClass('colorLinks--button active');
expect(whiteList.length).toEqual(1);
expect(customForm.length).toEqual(0);
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Custom form exists in the DOM now, even when it isn't visible.

});

it('should show custom input when no active color found', async () => {
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Active color always exists, so I removed this test.

let utils = {} as RenderResult;

act(async () => {
utils = render(<Popup />);
});

const { getByLabelText, queryAllByLabelText, container } = utils;

(chromeHelpers.getActiveColor as jest.Mock).mockResolvedValue('');

await waitFor(() => expect(chromeHelpers.getActiveColor).toHaveBeenCalled());

const customColor = getByLabelText('custom color');
const customForm = queryAllByLabelText('custom form');

expect(customColor).toHaveClass('colorLinks--button active');
await waitFor(() => expect(customForm.length).toEqual(1), { container });
});

it('should show a custom input when the custom color button is clicked', async () => {
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This functionality no longer exists.

let utils = {} as RenderResult;

act(async () => {
utils = render(<Popup />);
});

const { queryAllByLabelText, queryByLabelText } = utils;
(chromeHelpers.getActiveColor as jest.Mock).mockResolvedValue(COLORS[0]);

await waitFor(() => expect(chromeHelpers.getActiveColor).toHaveBeenCalled());

const colorButtons = queryAllByLabelText('save color');
const customColorButton = queryByLabelText('custom color');
const customForm = queryAllByLabelText('custom form');

expect(colorButtons[0]).toHaveClass('colorLinks--button active');
expect(customForm.length).toEqual(0);

fireEvent.click(customColorButton);

waitFor(() => expect(customForm.length).toEqual(1));
});

it('should save a color when a color button is clicked', async () => {
Expand All @@ -92,12 +47,12 @@ describe('Popup', () => {
utils = render(<Popup />);
});

const { queryAllByLabelText } = utils;
const { queryAllByLabelText, getAllByTestId } = utils;
(chromeHelpers.getActiveColor as jest.Mock).mockResolvedValue(COLORS[0]);

await waitFor(() => expect(chromeHelpers.getActiveColor).toHaveBeenCalled());

const colorButtons = queryAllByLabelText('save color');
const colorButtons = getAllByTestId('color button');
const customForm = queryAllByLabelText('custom form');

expect(colorButtons[0]).toHaveClass('colorLinks--button active');
Expand Down
2 changes: 1 addition & 1 deletion src/components/colorButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ interface OwnProps {
const ColorButton: FC<OwnProps> = ({ color, clickHandler, active }) => (
<div>
<button
aria-label="save color"
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We don't need an aria-label, since this is clearly an extension that assists people who can see, and this label would only benefit screen reader users.

data-testid="color button"
type="button"
className={`colorLinks--button${active ? ' active' : ''}`}
onClick={clickHandler}
Expand Down