Skip to content

Instantly share code, notes, and snippets.

View marcoemrich's full-sized avatar

Marco Emrich marcoemrich

View GitHub Profile
@marcoemrich
marcoemrich / gist:bf55fd372374eac84e57f42817075954
Created September 20, 2023 00:47
CSS for Tic Tac Toe Exercise
button.cell + button.cell {
margin: 0;
}
.board {
/* border: 1px solid black; */
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 0px;
width: 300px;
@marcoemrich
marcoemrich / tic_tac_toe.js
Created July 3, 2020 14:35
JS-Testing: Model of Tic Tac Toe
import * as R from 'ramda'
export default class TicTacToe {
constructor(fields, currentPlayer = 'X') {
this.fields = fields;
this.currentPlayer = currentPlayer;
};
static startWithSize(width, height) {
return new TicTacToe(Array(width * height).fill(" "));
@marcoemrich
marcoemrich / cell.js
Created July 3, 2020 14:33
JS-Testing: cell.js
import React from 'react'
export const Cell = ({ owner = '', cellNr, onClick } = { owner: '' }) =>
<button
className={`cell cell_${cellNr}`}
data-cell-nr={cellNr}
onClick={onClick}
data-testid="cell">
{owner}
</button>;
@marcoemrich
marcoemrich / board.js
Created July 3, 2020 14:32
JS Testing: board.js
import React, {useState} from 'react'
import {Cell} from "./cell.js"
import * as R from 'ramda'
const mapIndexed = R.addIndex(R.map);
export const Board = props => {
const [state, setState] = useState(props.game);
const handleCellClick = e => setState(state.mark(Number(e.target.dataset["cellNr"])));
@marcoemrich
marcoemrich / error output
Created July 3, 2020 14:29
JS Testing: Assertion Example output
● greater than in obj › jest equal
expect(received).toBeTruthy()
Received: false
● greater than in obj › jest greater
expect(received).toBeGreaterThan(expected)
@marcoemrich
marcoemrich / error output
Created July 3, 2020 14:29
JS Testing: Assertion Example output
● greater than in obj › jest equal
expect(received).toBeTruthy()
Received: false
● greater than in obj › jest greater
expect(received).toBeGreaterThan(expected)
@marcoemrich
marcoemrich / some.spec.js
Last active July 3, 2020 14:26
JS-Testing: describe-it-structure
describe("...", () => {
it("...", () => {
...
})
});
@marcoemrich
marcoemrich / ttt_testing_lib.spec.js
Last active July 3, 2020 14:26
JS-Testing: Testing Library testid example
it('should have the right number of cells', () => {
const { container, getAllByTestId } = render(<Board game={TicTacToe.startWithSize(4, 4)} />);
expect(
getAllByTestId("cell").length
).toEqual(16);
});
@marcoemrich
marcoemrich / ttt_enzyme.spec.js
Last active July 3, 2020 14:26
JS-Testing: Enzyme shallow rendering example
describe('Board', () => {
it('should have the right number of cells', () => {
const wrapper = shallow(<Board game={TicTacToe.startWithSize(4, 4)} />);
expect(wrapper.find(Cell).length).toEqual(16);
});
});
@marcoemrich
marcoemrich / http.spec.js
Last active July 3, 2020 14:27
JS-Testing: Supertest example taken from README
describe('GET /user', function() {
it('responds with json', function(done) {
request(app)
.get('/user')
.set('Accept', 'application/json')
.expect('Content-Type', /json/)
.expect(200, done);
});
});