luan0ap

good doc! some quick answers -

It seems like act() is being recommended for wrapping all state updates in React tests, but is it necessary to use it everywhere if you can use waitForElement to turn the whole test async?

This is a very good question, and something I grappled with earlier. A couple of things that stood out for me -

• waiting for an element is indeed pretty close to what a user's experience is like; ie - a user 'waits' for the form to show itself, after which they fill it in and click a button, then 'wait' for the success screen etc. Ultimately, act() makes this test stronger - it'll ensure that effects, and queued promises, have been flushed before you interact with the element. wrapping waitForElement with act() (the async version, ie), will make this invisible to the user, but with the guarantee that their UI is 'stable'.

• I couldn't assume that all tests would use waitForElement. For example, using timers is common for testing transitions and such. In these scenarios too, ac

luan0ap

Uma série de posts sobre CSS in JS

0. Estilos como objetos

Primeiramente, um exercicio. Podemos representar o CSS como texto puro? Bora tentar:

let redText = { color: 'red' };

Show de bola, deve ser claro o que este código acima deve "fazer" né. então bora tentar de novo:

luan0ap

// permutation: Permutação
// P(n) = n!
// Exemplo: número de anagramas da palavra LIVRO = P(5) = n!
// Possibilidades de uma fila de 25 pessoas = P(25) = 25!

// combination: Combinação
// C(p,n) = = n! / p!(n - p)!
// Exemplo: formar comissão de 3 pessoas escolhidas entre 10 pessoas. C(3,10) = 10! / 3!(10 - 3)!

// arrangement: Arranjo

luan0ap

var v = 42;
var o = { a: 1, b: [2,3,4] };

logger`This is my value: ${v} and another: ${o}`;
// This is my value: 42 and another: {"a":1,"b":[2,3,4]}

try {

luan0ap

const memoize = (fn) => {
	let cache = {}, key;
	return (...args) => {
		key = JSON.stringify(args);
		return cache[key] || (cache[key] = fn.call(null, ...args));
	}
};

luan0ap

const condition = true;

const App = () => (
  <div>
    <h1>This is always visible</h1>
    {
      condition && (
        <div>
          <h2>Show me</h2>
          <p>Description</p>