Skip to content

Commit

Permalink
Repair the test failed on cell component - caused by get test instances
Browse files Browse the repository at this point in the history
  • Loading branch information
@zourdyzou
zourdyzou committed Jul 29, 2022
1 parent 7db31f5 commit f3a82f3
Show file tree
Hide file tree
Showing 4 changed files with 359 additions and 31 deletions.
277 changes: 277 additions & 0 deletions src/components/grid/cell/__snapshots__/cell.test.tsx.snap
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,277 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Testing the CELL component Cell renders correct 1`] = `
<DocumentFragment>
<div
class="closedFrame revealedFrame"
data-testid="1,1"
role="cell"
style="color: rgba(0, 0, 0, 0);"
>
0
</div>
</DocumentFragment>
`;

exports[`Testing the CELL component Cell renders correct 2`] = `
<DocumentFragment>
<div
class="closedFrame revealedFrame"
data-testid="1,1"
role="cell"
style="color: rgb(42, 72, 236);"
>
1
</div>
</DocumentFragment>
`;

exports[`Testing the CELL component Cell renders correct 3`] = `
<DocumentFragment>
<div
class="closedFrame revealedFrame"
data-testid="1,1"
role="cell"
style="color: rgb(43, 177, 61);"
>
2
</div>
</DocumentFragment>
`;

exports[`Testing the CELL component Cell renders correct 4`] = `
<DocumentFragment>
<div
class="closedFrame revealedFrame"
data-testid="1,1"
role="cell"
style="color: rgb(236, 101, 97);"
>
3
</div>
</DocumentFragment>
`;

exports[`Testing the CELL component Cell renders correct 5`] = `
<DocumentFragment>
<div
class="closedFrame revealedFrame"
data-testid="1,1"
role="cell"
style="color: rgb(35, 61, 183);"
>
4
</div>
</DocumentFragment>
`;

exports[`Testing the CELL component Cell renders correct 6`] = `
<DocumentFragment>
<div
class="closedFrame revealedFrame"
data-testid="1,1"
role="cell"
style="color: rgb(166, 7, 15);"
>
5
</div>
</DocumentFragment>
`;

exports[`Testing the CELL component Cell renders correct 7`] = `
<DocumentFragment>
<div
class="closedFrame revealedFrame"
data-testid="1,1"
role="cell"
style="color: rgb(228, 0, 175);"
>
6
</div>
</DocumentFragment>
`;

exports[`Testing the CELL component Cell renders correct 8`] = `
<DocumentFragment>
<div
class="closedFrame revealedFrame"
data-testid="1,1"
role="cell"
style="color: rgb(144, 106, 2);"
>
7
</div>
</DocumentFragment>
`;

exports[`Testing the CELL component Cell renders correct 9`] = `
<DocumentFragment>
<div
class="closedFrame revealedFrame"
data-testid="1,1"
role="cell"
style="color: rgb(250, 7, 7);"
>
8
</div>
</DocumentFragment>
`;

exports[`Testing the CELL component Cell renders correct 10`] = `
<DocumentFragment>
<div
class="closedFrame revealedFrame bombFrame"
data-testid="1,1"
role="cell"
>
<div
class="bombEntity"
data-testid="bomb_1,1"
/>
</div>
</DocumentFragment>
`;

exports[`Testing the CELL component Cell renders correct 11`] = `
<DocumentFragment>
<div
class="closedFrame changedBorderColor"
data-testid="1,1"
role="cell"
/>
</DocumentFragment>
`;

exports[`Testing the CELL component Cell renders correct 12`] = `
<DocumentFragment>
<div
class="closedFrame changedBorderColor"
data-testid="1,1"
role="cell"
>
<div
class="flagComponent"
data-testid="flag_1,1"
/>
</div>
</DocumentFragment>
`;

exports[`Testing the CELL component Cell renders correct 13`] = `
<DocumentFragment>
<div
class="closedFrame changedBorderColor"
data-testid="1,1"
role="cell"
>
<div
class="flagComponent flagTransparent"
data-testid="weakFlag_1,1"
/>
</div>
</DocumentFragment>
`;

exports[`Testing the CELL component Closed Frame renders correct 1`] = `
<DocumentFragment>
<div
class="closedFrame transparentClosedFrame"
/>
</DocumentFragment>
`;

exports[`Testing the CELL component Closed Frame renders correct 2`] = `
<DocumentFragment>
<div
class="closedFrame transparentClosedFrame"
/>
</DocumentFragment>
`;

exports[`Testing the CELL component Closed Frame renders correct 3`] = `
<DocumentFragment>
<div
class="closedFrame transparentClosedFrame"
/>
</DocumentFragment>
`;

exports[`Testing the CELL component Closed Frame renders correct 4`] = `
<DocumentFragment>
<div
class="closedFrame transparentClosedFrame"
/>
</DocumentFragment>
`;

exports[`Testing the CELL component Closed Frame renders correct 5`] = `
<DocumentFragment>
<div
class="closedFrame transparentClosedFrame"
/>
</DocumentFragment>
`;

exports[`Testing the CELL component Closed Frame renders correct 6`] = `
<DocumentFragment>
<div
class="closedFrame transparentClosedFrame"
/>
</DocumentFragment>
`;

exports[`Testing the CELL component Closed Frame renders correct 7`] = `
<DocumentFragment>
<div
class="closedFrame transparentClosedFrame"
/>
</DocumentFragment>
`;

exports[`Testing the CELL component Closed Frame renders correct 8`] = `
<DocumentFragment>
<div
class="closedFrame transparentClosedFrame"
/>
</DocumentFragment>
`;

exports[`Testing the CELL component Closed Frame renders correct 9`] = `
<DocumentFragment>
<div
class="closedFrame transparentClosedFrame"
/>
</DocumentFragment>
`;

exports[`Testing the CELL component Closed Frame renders correct 10`] = `
<DocumentFragment>
<div
class="closedFrame transparentClosedFrame"
/>
</DocumentFragment>
`;

exports[`Testing the CELL component Closed Frame renders correct 11`] = `
<DocumentFragment>
<div
class="closedFrame transparentClosedFrame"
/>
</DocumentFragment>
`;

exports[`Testing the CELL component Closed Frame renders correct 12`] = `
<DocumentFragment>
<div
class="closedFrame transparentClosedFrame"
/>
</DocumentFragment>
`;

exports[`Testing the CELL component Closed Frame renders correct 13`] = `
<DocumentFragment>
<div
class="closedFrame transparentClosedFrame"
/>
</DocumentFragment>
`;
73 changes: 60 additions & 13 deletions src/components/grid/cell/cell.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,74 @@
import { CellState, Coordinates } from "@helpers/field";
import { fireEvent, render, screen } from "@testing-library/react";
import { CellState, Cell as CellType, Coordinates } from "@helpers/field";
import { createEvent, fireEvent, render, screen } from "@testing-library/react";
import React from "react";

import { CellComponent } from "./cell";
import { CellComponent, ClosedFrame, areEqual, isActiveCell } from "./cell";

describe("Testing the CELL component", function () {
const coords: Coordinates = [1, 1];
const props = {
coords,
flagCounter: 0,
bombs: 10,
onClick: jest.fn(),
onContextMenu: jest.fn(),
};

for (let cell = CellState.empty; cell <= CellState.weakMark; cell++) {
it("should check preventDefault contextMenu for every type of cell", function () {
const internalProps = {
coords,
onClick: jest.fn(),
onContextMenu: jest.fn(),
};
it("Cell renders correct", () => {
const { asFragment } = render(<CellComponent children={cell} {...props} />);

render(<CellComponent children={cell} {...internalProps} />);
expect(asFragment()).toMatchSnapshot();
});
it("Closed Frame renders correct", () => {
const { asFragment } = render(<ClosedFrame mouseDown={true} />);
expect(asFragment()).toMatchSnapshot();
});

it("Check prevent default contextMenu for every type of cell", () => {
render(<CellComponent children={cell} {...props} />);

expect(true).toBe(true);
const cellComp = screen.getByRole("cell");

const contextMenuEvent = createEvent.contextMenu(cellComp);
fireEvent(cellComp, contextMenuEvent);

expect(contextMenuEvent.defaultPrevented).toBe(true);
});

it("onClick and onContextMenu handler should be called for active cells", function () {
expect(true).toBe(true);
it("onClick and onContextMenu handler should be called for active cells", () => {
render(<CellComponent children={cell} {...props} />);

const cellComp = screen.getByRole("cell");

fireEvent.click(cellComp);
fireEvent.contextMenu(cellComp);

if (isActiveCell(cell)) {
expect(props.onClick).toBeCalled();
expect(props.onContextMenu).toBeCalled();
} else {
expect(props.onClick).not.toBeCalled();
expect(props.onContextMenu).not.toBeCalled();
}
});
}

it("Check areEqual", () => {
const prevProps = {
...props,
children: 0 as CellType,
};

expect(areEqual(prevProps, { ...prevProps })).toBe(true);

expect(areEqual(prevProps, { ...prevProps, coords: [2, 1] })).toBe(false);
expect(areEqual(prevProps, { ...prevProps, coords: [1, 2] })).toBe(false);
expect(areEqual(prevProps, { ...prevProps, coords: [2, 2] })).toBe(false);
expect(areEqual(prevProps, { ...prevProps, coords: [1, 0] })).toBe(false);

expect(areEqual(prevProps, { ...prevProps, children: 1 as CellType })).toBe(false);
expect(areEqual(prevProps, { ...prevProps, onClick: jest.fn() })).toBe(false);
expect(areEqual(prevProps, { ...prevProps, onContextMenu: jest.fn() })).toBe(false);
});
});
Loading

0 comments on commit f3a82f3

Please sign in to comment.