Skip to content

Commit

Permalink
test: refactored tests & added utility tests (#94)
Browse files Browse the repository at this point in the history 
* test: refactored all tests and added utils test

* test: added calendar utils tests

* test: added tests for timepicker utils

* test: mock date and fix tests

* chore: added timezone in github action

* chore: fix gh action
  • Loading branch information
@anuraghazra
anuraghazra authored Oct 15, 2020
1 parent 0512adb commit 84614cb
Show file tree
Hide file tree
Showing 13 changed files with 411 additions and 147 deletions.
5 changes: 5 additions & 0 deletions .github/workflows/test.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,11 @@ jobs:
restore-keys: |
${{ runner.os }}-yarn-
- name: Setup timezone
uses: zcong1993/setup-timezone@master
with:
timezone: Asia/Kolkata

- name: install deps
run: yarn
- name: Test
Expand Down
2 changes: 2 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,7 @@
"@types/jest": "26.0.14",
"@types/jest-axe": "3.5.0",
"@types/jest-in-case": "1.0.2",
"@types/mockdate": "^2.0.0",
"@types/react": "16.9.52",
"@types/react-dom": "16.9.8",
"@types/react-transition-group": "4.4.0",
Expand Down Expand Up @@ -114,6 +115,7 @@
"jest-matcher-utils": "26.5.2",
"lint-staged": "10.4.0",
"lodash": "4.17.20",
"mockdate": "^3.0.2",
"prettier": "2.1.2",
"react": "16.13.1",
"react-dom": "16.13.1",
Expand Down
194 changes: 97 additions & 97 deletions src/accordion/__tests__/Accordion.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,42 +31,42 @@ const AccordionComponent = (props: any) => {
);
};

test("Accordion should have proper keyboard navigation", () => {
const { getByText: text } = render(<AccordionComponent />);

press.Tab();
expect(text("Trigger 1")).toHaveFocus();
press.ArrowDown();
expect(text("Trigger 2")).toHaveFocus();
press.ArrowDown();
expect(text("Trigger 3")).toHaveFocus();
press.ArrowDown();
expect(text("Trigger 3")).toHaveFocus();
press.ArrowUp();
expect(text("Trigger 2")).toHaveFocus();
press.ArrowUp();
expect(text("Trigger 1")).toHaveFocus();
});
describe("Accordion", () => {
it("Accordion should have proper keyboard navigation", () => {
const { getByText: text } = render(<AccordionComponent />);

test("Accordion should have proper keyboard navigation when on loop", () => {
const { getByText: text } = render(<AccordionComponent loop />);

press.Tab();
expect(text("Trigger 1")).toHaveFocus();
press.ArrowDown();
expect(text("Trigger 2")).toHaveFocus();
press.ArrowDown();
expect(text("Trigger 3")).toHaveFocus();
press.ArrowDown();
expect(text("Trigger 1")).toHaveFocus();
press.ArrowUp();
expect(text("Trigger 3")).toHaveFocus();
press.ArrowUp();
expect(text("Trigger 2")).toHaveFocus();
});
press.Tab();
expect(text("Trigger 1")).toHaveFocus();
press.ArrowDown();
expect(text("Trigger 2")).toHaveFocus();
press.ArrowDown();
expect(text("Trigger 3")).toHaveFocus();
press.ArrowDown();
expect(text("Trigger 3")).toHaveFocus();
press.ArrowUp();
expect(text("Trigger 2")).toHaveFocus();
press.ArrowUp();
expect(text("Trigger 1")).toHaveFocus();
});

it("Accordion should have proper keyboard navigation when on loop", () => {
const { getByText: text } = render(<AccordionComponent loop />);

press.Tab();
expect(text("Trigger 1")).toHaveFocus();
press.ArrowDown();
expect(text("Trigger 2")).toHaveFocus();
press.ArrowDown();
expect(text("Trigger 3")).toHaveFocus();
press.ArrowDown();
expect(text("Trigger 1")).toHaveFocus();
press.ArrowUp();
expect(text("Trigger 3")).toHaveFocus();
press.ArrowUp();
expect(text("Trigger 2")).toHaveFocus();
});

[true, false].forEach(toggle => {
test(`Accordion allowToggle: ${toggle}`, () => {
it.each([true, false])("Accordion allowToggle: %s", toggle => {
const { getByText: text } = render(
<AccordionComponent allowToggle={toggle} />,
);
Expand All @@ -89,86 +89,86 @@ test("Accordion should have proper keyboard navigation when on loop", () => {
expect(text("Panel 1")).toBeVisible();
}
});
});

test("Accordion should open/close properly", () => {
const { getByText: text } = render(<AccordionComponent />);
it("Accordion should open/close properly", () => {
const { getByText: text } = render(<AccordionComponent />);

press.Tab();
expect(text("Trigger 1")).toHaveFocus();
expect(text("Panel 1")).not.toBeVisible();
press.Enter();
expect(text("Panel 1")).toBeVisible();
press.Tab();
expect(text("Trigger 1")).toHaveFocus();
expect(text("Panel 1")).not.toBeVisible();
press.Enter();
expect(text("Panel 1")).toBeVisible();

// go to next panel
press.ArrowDown();
expect(text("Panel 2")).not.toBeVisible();
press.Enter();
expect(text("Panel 2")).toBeVisible();
// go to next panel
press.ArrowDown();
expect(text("Panel 2")).not.toBeVisible();
press.Enter();
expect(text("Panel 2")).toBeVisible();

// panel 1 should be closed now if allowMultiple: false
expect(text("Panel 1")).not.toBeVisible();
});
// panel 1 should be closed now if allowMultiple: false
expect(text("Panel 1")).not.toBeVisible();
});

test("Accordion should open/close properly with AllowMultiple", () => {
const { getByText: text } = render(<AccordionComponent allowMultiple />);
it("Accordion should open/close properly with AllowMultiple", () => {
const { getByText: text } = render(<AccordionComponent allowMultiple />);

press.Tab();
expect(text("Trigger 1")).toHaveFocus();
expect(text("Panel 1")).not.toBeVisible();
press.Tab();
expect(text("Trigger 1")).toHaveFocus();
expect(text("Panel 1")).not.toBeVisible();

press.Enter();
expect(text("Panel 1")).toBeVisible();
press.Enter();
expect(text("Panel 1")).toBeVisible();

// go to next panel
press.ArrowDown();
press.Enter();
expect(text("Panel 2")).toBeVisible();
// go to next panel
press.ArrowDown();
press.Enter();
expect(text("Panel 2")).toBeVisible();

// panel 1 should be visible since allowmultiple is true
expect(text("Panel 1")).toBeVisible();
});
// panel 1 should be visible since allowmultiple is true
expect(text("Panel 1")).toBeVisible();
});

test("Accordion should have none selected by default", () => {
const { getByText: text } = render(<AccordionComponent />);
it("Accordion should have none selected by default", () => {
const { getByText: text } = render(<AccordionComponent />);

press.Tab();
expect(text("Panel 1")).not.toBeVisible();
expect(text("Panel 2")).not.toBeVisible();
expect(text("Panel 3")).not.toBeVisible();
});
press.Tab();
expect(text("Panel 1")).not.toBeVisible();
expect(text("Panel 2")).not.toBeVisible();
expect(text("Panel 3")).not.toBeVisible();
});

test("Accordion with selectedId given to be selected properly", () => {
const { getByText: text } = render(
<AccordionComponent selectedId="accordion-2" />,
);
it("Accordion with selectedId given to be selected properly", () => {
const { getByText: text } = render(
<AccordionComponent selectedId="accordion-2" />,
);

press.Tab();
expect(text("Panel 1")).not.toBeVisible();
expect(text("Panel 2")).toBeVisible();
});
press.Tab();
expect(text("Panel 1")).not.toBeVisible();
expect(text("Panel 2")).toBeVisible();
});

test("Accordion manual: false", () => {
const { getByText: text } = render(<AccordionComponent manual={false} />);
it("Accordion manual: false", () => {
const { getByText: text } = render(<AccordionComponent manual={false} />);

press.Tab();
expect(text("Trigger 1")).toHaveFocus();
expect(text("Panel 1")).toBeVisible();
press.Tab();
expect(text("Trigger 1")).toHaveFocus();
expect(text("Panel 1")).toBeVisible();

// go to next panel
press.ArrowDown();
expect(text("Trigger 2")).toHaveFocus();
expect(text("Panel 2")).toBeVisible();
// go to next panel
press.ArrowDown();
expect(text("Trigger 2")).toHaveFocus();
expect(text("Panel 2")).toBeVisible();

// go to next panel
press.ArrowDown();
expect(text("Trigger 3")).toHaveFocus();
expect(text("Panel 3")).toBeVisible();
});
// go to next panel
press.ArrowDown();
expect(text("Trigger 3")).toHaveFocus();
expect(text("Panel 3")).toBeVisible();
});

test("Accordion renders with no a11y violations", async () => {
const { container } = render(<AccordionComponent />);
const results = await axe(container);
test("Accordion renders with no a11y violations", async () => {
const { container } = render(<AccordionComponent />);
const results = await axe(container);

expect(results).toHaveNoViolations();
expect(results).toHaveNoViolations();
});
});
2 changes: 1 addition & 1 deletion src/accordion/__tests__/AccordionState.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ function render({
.result;
}

test("initial state", () => {
test("Accordion: initial state", () => {
const result = render();
expect(result.current).toMatchInlineSnapshot(`
Object {
Expand Down
64 changes: 32 additions & 32 deletions src/calendar/__tests__/Calendar.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,40 +129,40 @@ describe("Calendar", () => {
expect(label("Friday, November 6, 2020")).toHaveFocus();
expect(testId("current-year")).toHaveTextContent("November 2020");
});
});

test("should have min/max values", async () => {
const { getByLabelText: label } = render(
<CalendarComp
defaultValue={format(new Date(2020, 10, 7), "yyyy-MM-dd")}
minValue={format(subWeeks(new Date(2020, 10, 7), 1), "yyyy-MM-dd")}
maxValue={format(addWeeks(new Date(2020, 10, 7), 1), "yyyy-MM-dd")}
/>,
);
test("should have min/max values", async () => {
const { getByLabelText: label } = render(
<CalendarComp
defaultValue={format(new Date(2020, 10, 7), "yyyy-MM-dd")}
minValue={format(subWeeks(new Date(2020, 10, 7), 1), "yyyy-MM-dd")}
maxValue={format(addWeeks(new Date(2020, 10, 7), 1), "yyyy-MM-dd")}
/>,
);

press.Tab();
press.Tab();
press.Tab();
press.Tab();
press.Tab();
expect(label("Saturday, November 7, 2020 selected")).toHaveFocus();

// try to go outside the min max value
press.ArrowUp();
press.ArrowUp();
press.ArrowUp();
press.ArrowUp();
expect(label("Saturday, October 31, 2020")).toHaveFocus();

press.ArrowDown();
press.ArrowDown();
press.ArrowDown();
expect(label("Saturday, November 14, 2020")).toHaveFocus();
});
press.Tab();
press.Tab();
press.Tab();
press.Tab();
press.Tab();
expect(label("Saturday, November 7, 2020 selected")).toHaveFocus();

// try to go outside the min max value
press.ArrowUp();
press.ArrowUp();
press.ArrowUp();
press.ArrowUp();
expect(label("Saturday, October 31, 2020")).toHaveFocus();

press.ArrowDown();
press.ArrowDown();
press.ArrowDown();
expect(label("Saturday, November 14, 2020")).toHaveFocus();
});

test("Calendar renders with no a11y violations", async () => {
const { container } = render(<CalendarComp />);
const results = await axe(container);
test("Calendar renders with no a11y violations", async () => {
const { container } = render(<CalendarComp />);
const results = await axe(container);

expect(results).toHaveNoViolations();
expect(results).toHaveNoViolations();
});
});
10 changes: 5 additions & 5 deletions src/calendar/__tests__/RangeCalendar.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -158,11 +158,11 @@ describe("RangeCalendar", () => {
const start = baseElement.querySelector("[data-is-selection-start]");
expect(start).toHaveTextContent("14");
});
});

test("RangeCalendar renders with no a11y violations", async () => {
const { container } = render(<RangeCalendarComp />);
const results = await axe(container);
test("RangeCalendar renders with no a11y violations", async () => {
const { container } = render(<RangeCalendarComp />);
const results = await axe(container);

expect(results).toHaveNoViolations();
expect(results).toHaveNoViolations();
});
});
Loading

0 comments on commit 84614cb

Please sign in to comment.