Revamping the project

[NoriSte]

It's time to revamp the project since it has not been updated for a while. Below is a first list of improvements to discuss.

Chapters to add

1. A new chapter about how much are visual regression tests hard and why we should rely on premium services (done by @muratkeremozcan)
2. A new chapter about snapshot testing to discourage using it (like https://dev.to/noriste/my-take-on-snapshot-testing-19k6) (assigned to @NoriSte)
3. A longer (but under 20s) E2E test is better than three E2E tests which they require they own setup/teardown to be faster when run in series but also independent (assigned to @NoriSte because comes from what written for Hasura) (Add the "independent or long e2e test" chapter and move Murat in the steering committee #38)
4. How much is important to keep the abstraction low (assigned to @NoriSte because comes from what written for Hasura. (Add the 'Keep abstraction low to ease debugging the tests' chapter #37)
5. From unreadable React Component Tests to simple, stupid ones https://dev.to/noriste/from-unreadable-react-component-tests-to-simple-stupid-ones-3ge6 (Add the "From unreadable React Component Tests to simple, stupid ones" chapter #39)
6. Mention @muratkeremozcan book somewhere (still unassigned)
7. Add a contract testing article (here is on dev.to) (Add the "Decouple the back-end and front-end test through Contract Testing" chapter #40)
8. Add the Hasura use case (Add the "Hasura E2E tests chronicles, February 2023" chapter #41)

Chapters to update

⏳ Home page

1. Clearly state your preference for Cypress pointing to https://github.com/NoriSte/ui-testing-best-practices/blob/master/sections/tools/ui-testing-problems-cypress.md indicating where/why there are Cypress-oriented contents (assigned to @NoriSte)

---

component-vs-integration-vs-e2e-testing.md

(still unassigned)

1. Remove reference to Storyshots
2. In the "the interaction/state tests" part, mention Storybook testing
3. Link Cypress Component testing and Playwright component testing instead of the internal chapter
4. Add some bolds to ease reading it
5. Link to the new "Visual Regression testing" chapter
6. Link to the new "Snapshot testing" chapter

---

✅ avoid-perfectionism.md

(assigned to @NoriSte)

1. Add some bolds to ease reading it

---

✅ choose-a-reference-browser.md

(assigned to @NoriSte)

1. Remove the table that gets outdated in a while
2. Speak about PlayWright DX (https://twitter.com/NoriSte/status/1539880589813338112)

---

✅ write-test-then-fix-bug.md

(assigned to @NoriSte)

1. Add some bolds to ease reading it

---

✅ await-dont-sleep.md

(assigned to @NoriSte)

1. Leave only the Cypress examples

---

✅ ui-tests-debugging-best-practices.md

(assigned to @NoriSte because comes from what written for Hasura)

1. Look at Hasura resources and share more best practices
2. Add a paragraph about long vs short E2E tests (also related to https://github.com/NoriSte/ui-testing-best-practices/blob/master/sections/advanced/test-states.md)

---

✅ Test the server schema

1. Mention Pact

---

✅ top-to-bottom-approach.md

(still unassigned)

1. Create dark-theme-friendly version of the images and use Github's ability to switch images based on the theme

---

✅ tests-as-documentation.md

(assigned to @NoriSte because comes from what written for Hasura)

1. Link to the generic best practices where are you going to talk about comments in UI tests (come from Hasura experience)
2. Touch the "bad selectors" point
3. Explain how much within can be helpful to improve the selector's readability
4. Should mention TS-based fixtures instead of JSONs

---

✅ cypress-and-storybook.md

(assigned to @NoriSte because he knows almost everything here)

1. Remove every reference to Storybook and keep the tests
2. Link at the top to the new "From unreadable React Component Tests to simple, stupid ones" chapter
3. Mark it as obsolete and reduce its importance on the home page

---

✅ cypress-and-storybook-exposing-component-from-story.md

(still unassigned)

1. Mark it as obsolete and reduce its importance on the home page (maybe create an "outdated" section?)

---

✅ cypress-react-component-test.md

(still unassigned)

1. Mark it as obsolete and reduce its importance on the home page (maybe create an "outdated" section?)

---

✅ test-flake.md

(assigned to @NoriSte)

1. Mention Replay.io integration with tests

[muratkeremozcan]

@NoriSte I believe we should remove all obsolete component testing related content, and add one new section.

[NoriSte]

I also report here the feedback I received from a talented former colleague of mine. I also add some feedback of mine in turn.

• More information about combinatorial testing will help.

@muratkeremozcan that's your bread 😊

• Hard to read. A website or even a google doc with a table of contents tree would be much easier to read.

I never thought much about it, but this means that a lot of readers gave up at the first impression due to the messy/missing TOC.

• A detailed explanation about why Cypress tests are better than RTL/jest tests will be very helpful.

Also, comparing it to Storybook testing is worth it, IMO, since it's a recent player in the market and it's valuable.

• I especially like the chapter, ‘Use your testing tool as your primary development tool’. It’s mind-bending and presents a new perspective to look at UI development. I’ll try this out for a side project and see how it goes.

I'd like in the future to write a new one, called more generically "never manually test", because it does not matter if we use Cypress, Storybook, unit tests, a combination of all of them, the only goal is respecting (wisely) the "never manually test, you are slow and also requires you a second testing step".

• Some content about best practices for running tests in CI/CD environments will help. (Eg: should E2E tests be run on merge to main or for every push to every PR?)