Como eu testo meus códigos stylus

[thiamsantos]

Estou iniciando a estudar TDD e me veio algumas dúvidas.
Existe alguma ferramenta boa de TDD para stylus?
Eu achei no google esse https://www.npmjs.com/package/stylus-test-runner mas não parece estar funcionando direito.

Se não como configurar Mocha/Jasmine para isso?

[fabriciofmsilva]

@thiamsantos o que parece que você quer é verificar a sintaxe do código que está escrevendo. Se esse cara que passou não está funcionando pode tentar usar esse aqui: Stylint.

Com relação ao TDD, não existe uma ferramenta para isso. TDD basicamente é uma técnica de desenvolvimento. O importante é você pegar os conceitos de TDD e aplicar ao seu workflow.

Já o Mocha/Jasmine é pra criar testes para JavaScript e não CSS/Stylus. Para testar a sintaxe em JS use os JSHints/JSLints da vida. Já com o Mocha ou Jasmine você pode criar testes para as suas lógicas, daí se aplica o TDD. 😄

[barbier]

Uma vez eu vi uma ferramenta para fazer testes unitários em SASS, mas eu sinceramente não vejo utilidade prática nisso.

[felipefialho]

Também não vejo. No fim ele gera um CSS, rs.

[wmartins]

Complementando o que o @fabriciofmsilva, existe uma outra ferramenta bacana para linting: o Stylelint - tem um "e" a mais haha.

E sobre TDD, qual o "nível" de teste que tu quer fazer @thiamsantos?

São coisas do tipo "vai gerar uma classe tal, com tais e tais estilos"?

[barbier]

@thiamsantos, não vou te deixar com uma resposta vazia como a que deixei ali em cima.
Parei pra ler esse link e vi que talvez dê pra encaixar uma ferramenta de testes em animações que sejam MUITO complexas, mas eu ainda acho que é usar um canhão para matar uma mosca.
CSS é uma linguagem onde os valores são absolutos, quero dizer, um elemento com um valor x terá aquele valor sempre, a menos que o programador altere com alguma pseudo-classe, :hover por exemplo.
Edit: (Opa! Vou parar de poluir as issues com respostas repetidas :) )
Por animações complexas eu quero dizer algo parecido com o gato da Rachel Nabors (Clique no box branco para começar o vídeo)

[thiamsantos]

Na verdade eu estou fazendo um "grid" em flexbox para fixar a sintaxe e tal. E gostaria de testar os mixins, apenas porque estou ficando cansado de ficar olhando o css compilado para ver se saiu o esperado.

Fazer algo como:

@describe col()

@it should output a column
.class
  col(1)

@expect
.class {
   flex: 0 0 16.666666666666668%;
}

Mas para projetos normais também não vejo necessidade de testar o stylus.

E @barbier sobre o gato de Rachel Nabors... WTF!!!!

[wmartins]

@thiamsantos, tava vendo algumas coisas do basscss e vi uma forma bacana (e bem simples) de testar o código:

https://github.com/basscss/basscss/blob/master/test/padding.spec.js

Lembrei dessa issue aqui, talvez isso seja uma outra alternativa também! :)

[thiamsantos]

Acho que eu achei uma solução legal nos testes do rupture. Basicamente o teste compila o código stylus e depois compara com os arquivos css esperados.