The tracker works, and you have been checking that by looking at it. A test checks it for you,
every time anything changes. @ng-native/testing mounts the real Angular Native components,
renderer, style engine and touch handling onto a fake Fabric, an in-memory stand-in for React
Native's renderer. Queries read the native tree that was committed and the props each view was
given. The fake does not run Yoga layout, draw pixels, open a keyboard or run a platform's
accessibility services, so those need the app on a device or a simulator. In an app, these tests
run in Node in milliseconds; here they run in the page, on the same fake.
The tests are written with Vitest, as an app's would be. app.spec.ts has one already.
render draws a component, and screen finds what it drew, the way a person would: by its text,
or by its role. Add this test to the existing App group in app.spec.ts:
it('shows every habit, and how many are left', async () => {
await render(App);
expect(screen.getByText('Drink water')).toBeTruthy();
expect(screen.getByText('Read ten pages')).toBeTruthy();
expect(screen.getByText('Walk')).toBeTruthy();
expect(screen.getByText('2 left to do')).toBeTruthy();
});
getByText throws when nothing matches, and the error lists what was on screen instead, so a
failing test says what it found.
The checks here run your tests against copies of the app: one that works, and one with the habit
rows taken out. To complete this step, at least one test has to pass against the first and fail
against the second. A test that checks only the heading passes against both, so it cannot notice
that the habits are gone.