web-renderer-test

Skill do Claudea, który ułatwia tworzenie testów dla web renderera w projekcie Remotion. Wykorzystuje vitest do wizualnego testowania snapshot'ami. Pozwala szybko dodawać nowe przypadki testowe poprzez definiowanie fixture'ów komponentów React, a następnie pisanie testów, które renderują te komponenty i porównują wyniki z wcześniej zapisanymi obrazami. Idealny dla deweloperów pracujących nad Remotionem, którzy chcą systematycznie testować zachowanie renderera.

1. Utwórz nowy fixture w katalogu packages/web-renderer/src/test/fixtures. Fixture to plik TypeScript zawierający komponent React (np. z AbsoluteFill) oraz konfigurację (wymiary, fps, liczbę klatek, identyfikator). 2. Dodaj swój fixture do pliku packages/web-renderer/src/test/Root.tsx, aby umożliwić jego podgląd w interfejsie. 3. Stwórz plik testowy w katalogu packages/web-renderer/src/test, który importuje fixture oraz funkcję renderStillOnWeb. Test powinien renderować fixture na klatce 0 i porównywać wynik z wcześniej zapisanym obrazem za pomocą funkcji testImage. 4. Uruchom test poleceniem bunx vitest src/test/video.test.tsx, aby sprawdzić, czy renderowanie przebiega poprawnie. 5. Jeśli test przejdzie, snapshot zostanie zapisany. Przy kolejnych uruchomieniach test będzie porównywać nowe renderowanie z zapisanym obrazem. 6. Zaktualizuj dokumentację w pliku packages/docs/docs/client-side-rendering/limitations.mdx, aby odzwierciedlić nowe ograniczenia lub możliwości renderera, jeśli test ujawnił istotne informacje.