test: animating between named colors with "loop"

Author: aleclarson

packages/core/src/SpringValue.test.ts

@@ -509,7 +509,23 @@ function describeTarget(name: string, create: (from: number) => OpaqueTarget) {
     })
 
     describe('when animating a string', () => {
-      it.todo('animates as expected')
+      it('animates as expected', async () => {
+        const spring = new SpringValue('yellow')
+        spring.start('red', {
+          config: { duration: frameLength * 3 },
+        })
+
+        await advanceUntilIdle()
+        spring.start({
+          loop: true,
+          reverse: true,
+        })
+
+        await advanceUntilValue(spring, 'yellow')
+        await advanceUntilValue(spring, 'red')
+        await advanceUntilValue(spring, 'yellow')
+        expect(getFrames(spring)).toMatchSnapshot()
+      })
     })
 
     describe('when animating an array', () => {

packages/core/src/__snapshots__/SpringValue.test.ts.snap

@@ -234,3 +234,37 @@ Array [
   0.022634843307857987,
 ]
 `;
+
+exports[`SpringValue when our target is an Interpolation when animating a string animates as expected 1`] = `
+Array [
+  "rgba(255, 170, 0, 1)",
+  "rgba(255, 85, 0, 1)",
+  "red",
+  "rgba(255, 85, 0, 1)",
+  "rgba(255, 170, 0, 1)",
+  "yellow",
+  "rgba(255, 170, 0, 1)",
+  "rgba(255, 85, 0, 1)",
+  "red",
+  "rgba(255, 85, 0, 1)",
+  "rgba(255, 170, 0, 1)",
+  "yellow",
+]
+`;
+
+exports[`SpringValue when our target is another SpringValue when animating a string animates as expected 1`] = `
+Array [
+  "rgba(255, 170, 0, 1)",
+  "rgba(255, 85, 0, 1)",
+  "red",
+  "rgba(255, 85, 0, 1)",
+  "rgba(255, 170, 0, 1)",
+  "yellow",
+  "rgba(255, 170, 0, 1)",
+  "rgba(255, 85, 0, 1)",
+  "red",
+  "rgba(255, 85, 0, 1)",
+  "rgba(255, 170, 0, 1)",
+  "yellow",
+]
+`;