diff --git a/_layouts/post.html b/_layouts/post.html
index 3f59b32..22cfb49 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -14,7 +14,6 @@
{{ page.title }}
{{ content }}
- {% include share-page.html %}
{% assign hasSimilar = '' %}
@@ -53,21 +52,3 @@
Related Posts
{{ page.next.title }} »
{% endif %}
-
-
diff --git a/_posts/2025-01-31-tester-pattern-react.md b/_posts/2025-01-31-tester-pattern-react.md
new file mode 100644
index 0000000..90f89b6
--- /dev/null
+++ b/_posts/2025-01-31-tester-pattern-react.md
@@ -0,0 +1,407 @@
+---
+layout: post
+title: "[WIP] The tester pattern in react"
+description: "Explorint the testern pattern in a react project"
+category: "develop"
+tags: ["javascript", "typescript", "react", "vite", "react-testing-library"]
+---
+
+The [tester pattern](https://www.testerpattern.nl/pattern) is a good way to structure your tests to improve the readability and to make very easy to write and expand the test suite.
+
+In the original webpage, the author explain the concepts in java, in this blog we will try the pattern in JavaScript, more specifically in a react SPA.
+
+The libraries that we will be using are:
+
+- vitest as the runner and mock library
+- react testing library to interact with react components.
+
+Let's explore the pattern in various examples with an increase level of
+complexity:
+
+
+- a simple component that draws a static message
+- a form with various inputs.
+- the same component, but the message is a quote from a web service. Using MSW for the test.
+
+
+# first scenario: simple component
+
+Let's test this component:
+
+```tsx
+export const HelloWorld = (props) => (
+
+ Hello {props.name}
+
+)
+```
+
+To test the rendering of this component, we can this test:
+
+```tsx
+describe('simpleComponent', () => {
+ it('renderAndUpdateGreeting', async () => {
+ const tester = new HelloWorldPageTester()
+ .withName('Arturo');
+
+ let asserter = await tester.whenRender();
+ await asserter.hasText("Hello Arturo");
+
+ tester.withName('Volpe');
+ asserter = await tester.whenRerender();
+ await asserter.hasText("Hello Volpe");
+ });
+});
+```
+
+For this simple case the boilerplate of adding a tester and asserter helper
+classes may be too much, but an interesting side-effect is that the test doesn't
+have any component-related selector.
+
+The test is in 'plain' english (with the limitation of the language) and the helper classes can be user for multiple tests.
+
+The tester and asserted used:
+
+```tsx
+class HelloWorldPageTester {
+
+ name: String = "";
+ component!: RenderResult;
+
+ withName(name: string) { this.name = name; return this; }
+
+ whenRender() {
+ this.component = render(
);
+ return new HelloWorldPageAsserter(this.component);
+ }
+
+ whenRerender() {
+ this.component.rerender(
);
+ return new HelloWorldPageAsserter(this.component);
+ }
+}
+
+class HelloWorldPageAsserter {
+ constructor(private component: RenderResult) {}
+
+ async hasText(expectedText: string) {
+ await this.component.findByText(expectedText);
+ return this;
+ }
+}
+```
+
+Links:
+
+* Component: [HelloWorld.tsx](https://github.com/aVolpe/vitest-tester-pattern-playground/blob/main/src/HelloWorld.tsx)
+* Test: [HelloWorld.test.tsx](https://github.com/aVolpe/vitest-tester-pattern-playground/blob/main/src/HelloWorld.test.tsx)
+
+## A note about async/await
+
+Ideally we want a fluent syntax when using the tester pattern, for example in
+Java we can have a bunch of asserts chained:
+
+```java
+new BookTester()
+ .givenAuthor("Arturo Volpe")
+ .givenHasChapter("1 - VITE")
+ .givenHasChapter("2 - The pattern")
+ .whenPublish() // return asserter
+ .thenHasInCover("Author: Arturo Volpe")
+ .thenHasInChapters(2);
+```
+
+To map this to a `react-testing-library` test, we need to use async/await,
+normally the asserter methods are required to be async in order to use the
+[findBy
+methods](https://testing-library.com/docs/dom-testing-library/api-async#findby-queries),
+so we need to migrate to:
+
+```typescript
+const tester = new BookComponentTester()
+ .givenAuthor("Arturo Volpe")
+ .givenHasChapter("1 - VITE")
+ .givenHasChapter("2 - The pattern");
+
+// normally here we render/fill the 'page'
+const asserter = await tester.whenRender();
+
+await asserter.thenHasInCover("Author: Arturo Volpe");
+await asserter.thenHasInChapters(2);
+```
+
+Maybe if someday the [pipeline
+operator](https://github.com/tc39/proposal-pipeline-operator?tab=readme-ov-file)
+added to the language, this will be more concise:
+
+```typescript
+new BookComponentTester()
+ .givenAuthor("Arturo Volpe")
+ .givenHasChapter("1 - VITE")
+ .givenHasChapter("2 - The pattern")
+ // normally here we render/fill the 'page'
+ |> await %.whenRender()
+ |> await %.thenHasInCover("Author: Arturo Volpe")
+ |> await %.thenHasInChapters(2)
+```
+
+# Second scenario: A simple form
+
+The tester pattern realy shines when we need to test different use cases that
+has a similar setup and need specific assertions, in this case we will have a
+form to edit some personal information (name and lastname).
+
+For the form we will use
+[react-hook-form](https://react-hook-form.com/get-started), and the [getting
+started page](https://react-hook-form.com/get-started) form with some small
+modifications.
+
+In this form, we have two inputs:
+
+* name: the first name, required, max length 10
+* lastname: the last name, not required, max length 20
+
+```tsx
+type Inputs = {
+ lastname: string
+ firstname: string
+}
+
+export function Step2Form(props: {
+ onSubmit: (dat: Inputs) => void
+}) {
+ const {
+ register,
+ handleSubmit,
+ watch,
+ formState: { errors },
+ } = useForm
()
+ const onSubmit: SubmitHandler = (data) => props.onSubmit(data);
+
+ return
+
+}
+```
+
+> Some spans are added to make the test easier to write, in the real world,
+those messages may appear under the inputs or in other parts of the form, the
+`data-testid` may be replaced with `findByRole`, etc.
+
+Ideally we want very descriptive tests for this form, an easy way to write all
+the different cases, required fields, invalid lengths, etc, lets start with a
+simple test that check that the 'happy path' works:
+
+```tsx
+describe('step2Form', () => {
+ it('renderValidValues', async () => {
+ const tester = new Step2FormPageTester()
+ .withName('Arturo')
+ .withLastname('Volpe');
+
+ let asserter = await tester.whenDoSubmit();
+ await asserter.hasAllFieldsValid();
+ });
+});
+```
+
+In this test we create a tester that populates both fields and clicks the
+button, in this case the tester is like a robot, we give the tester some
+instructions, and the tester execute the required steps.
+
+Reading this test we don't know anything about the internals of the component,
+we only know that we are asking the tester to submit the form with a given name
+and lastname. **The internals of the component and the complexity of the
+emulation of user actions is hidden to the test, making it easy to read and
+follow**.
+
+The tester for this form is slightly more complex:
+
+```tsx
+class Step2FormPageTester {
+
+ name: String = "";
+ lastname: String = "";
+ component!: RenderResult;
+
+ withName(name: string) { this.name = name; return this; }
+ withLastname(lastname: string) { this.lastname = lastname; return this; }
+
+ async whenDoSubmit() {
+ this.component = render();
+
+ await this.fillInput("firstname-input", this.name);
+ await this.fillInput("lastname-input", this.lastname);
+
+ return new Step2FormPageAsserter(this.component, this.submitCallback);
+ }
+
+ async fillInput(targetTestId: string, toInsert: string) {
+ const input = await this.component.findByTestId(targetTestId);
+ fireEvent.change(input, {target: {value: toInsert}})
+ return this;
+ }
+
+}
+
+class Step2FormPageAsserter {
+ constructor(private component: RenderResult,
+ private callback: (dat: Inputs) => void) {}
+
+ async hasText(expectedText: string) {
+ await this.component.findByText(expectedText);
+ return this;
+ }
+
+ async hasAllFieldsValid() {
+ return this.hasText('The form has 0 errors');
+ }
+}
+```
+
+We can see that there are some 'component kwnoledge' in the Tester, the tester
+knows how to find the desired inputs, and that logic, specially when we are
+testing front end components is very tricky, sometimes we need to wait it to
+render, sometimes we need to use a complex css selector, but all of that is
+hidden and is a implementation detail of the Tester.
+
+## Adding more tests cases
+
+Once we write the tester, adding more scenarios is trivial:
+
+```tsx
+ it('validateEmptyFields', async () => {
+ const tester = new Step2FormPageTester()
+ .withName('')
+ .withLastname('');
+
+ let asserter = await tester.whenDoSubmit();
+ await asserter.hasInvalidFieldsCount(1); // only the name is required
+ await asserter.hasInvalidFirstName();
+ });
+
+ it('validateInvalidFields', async () => {
+ const tester = new Step2FormPageTester()
+ .withName('super large name that exceed the expected length')
+ .withLastname('super large lastname that exceed the expected length');
+
+ let asserter = await tester.whenDoSubmit();
+ await asserter.hasInvalidFieldsCount(2);
+ await asserter.hasInvalidFirstName();
+ });
+```
+
+Adding two new tests only required two new assertions:
+
+```tsx
+// FormAsserter
+ async hasInvalidFieldsCount(expectedCount: number) {
+ return this.hasText(`The form has ${expectedCount} errors`);
+ }
+
+ async hasInvalidFirstName() {
+ return this.hasText(`This field is invalid`);
+ }
+```
+
+Using the tester pattern, adding more tests is easy once we have the tester and
+the asserter with many features.
+
+## An extra complexity, verifying the invocation to the callback
+
+The `Step2Form` component receives a callback as a property, this callback is
+invoked only when the form is valid, the first argument of the function is the
+valid object.
+
+To verify that the function is only called when we have a valid form, we need
+to mock a call, lets do that in the Tester:
+
+```tsx
+class Step2FormPageTester {
+
+ // ...
+ submitCallback: (dat: Inputs) => void = vi.fn();
+ // ...
+
+ async whenDoSubmit() {
+ // .. same as before
+
+ const bttn = await this.component
+ .findByText('Save');
+
+ fireEvent.click(bttn);
+
+ return new Step2FormPageAsserter(this.component, this.submitCallback);
+ }
+```
+
+> Here we can have two differente asserts, one to check for contents in the
+page, and another one to assert the invocations to the function. For simplicity,
+we will only use one.
+
+With this mock (`vn.fn()`) function, we can add assertions:
+
+```tsx
+class Step2FormPageAsserter {
+ constructor(private component: RenderResult,
+ private callback: (dat: Inputs) => void) {}
+
+ // ...
+
+ async callbackWasNotCalled() {
+ expect(this.callback).toHaveBeenCalledTimes(0);
+ return this;
+ }
+
+ async callbackWasCalledWith(expected: Inputs) {
+ expect(this.callback).toHaveBeenCalledWith(expected);
+ return this;
+ }
+}
+```
+
+And modify the tests:
+
+```tsx
+ it('renderValidValues', async () => {
+ const tester = new Step2FormPageTester()
+ .withName('Arturo')
+ .withLastname('Volpe');
+
+ let asserter = await tester.whenDoSubmit();
+ await asserter.hasAllFieldsValid();
+ await asserter.callbackWasCalledWith({
+ firstname: 'Arturo',
+ lastname: 'Volpe'
+ });
+ });
+ it('validateEmptyFields', async () => {
+ const tester = new Step2FormPageTester()
+ .withName('')
+ .withLastname('');
+
+ let asserter = await tester.whenDoSubmit();
+ await asserter.hasInvalidFieldsCount(1);
+ await asserter.hasInvalidFirstName();
+ await asserter.callbackWasNotCalled();
+ });
+```
+
+
+Links:
+
+* Component: [Step2Form.tsx](https://github.com/aVolpe/vitest-tester-pattern-playground/blob/main/src/Step2Form.tsx)
+* Test: [Step2Form.test.tsx](https://github.com/aVolpe/vitest-tester-pattern-playground/blob/main/src/Step2Form.test.tsx)
+
+All the source code for the examples is in the [vitest pattern playground github repo](https://github.com/aVolpe/vitest-tester-pattern-playground/tree/main)
\ No newline at end of file
diff --git a/static/css/syntax.css b/static/css/syntax.css
index 62eedce..6424046 100644
--- a/static/css/syntax.css
+++ b/static/css/syntax.css
@@ -1,59 +1,86 @@
-.highlight .hll { background-color: #49483e }
-.highlight .c { color: #75715e } /* Comment */
-.highlight .err { color: #960050; background-color: #1e0010 } /* Error */
-.highlight .k { color: #66d9ef } /* Keyword */
-.highlight .l { color: #ae81ff } /* Literal */
-.highlight .n { color: #f8f8f2 } /* Name */
-.highlight .o { color: #f92672 } /* Operator */
-.highlight .p { color: #f8f8f2 } /* Punctuation */
-.highlight .cm { color: #75715e } /* Comment.Multiline */
-.highlight .cp { color: #75715e } /* Comment.Preproc */
-.highlight .c1 { color: #75715e } /* Comment.Single */
-.highlight .cs { color: #75715e } /* Comment.Special */
-.highlight .ge { font-style: italic } /* Generic.Emph */
-.highlight .gs { font-weight: bold } /* Generic.Strong */
-.highlight .kc { color: #66d9ef } /* Keyword.Constant */
-.highlight .kd { color: #66d9ef } /* Keyword.Declaration */
-.highlight .kn { color: #f92672 } /* Keyword.Namespace */
-.highlight .kp { color: #66d9ef } /* Keyword.Pseudo */
-.highlight .kr { color: #66d9ef } /* Keyword.Reserved */
-.highlight .kt { color: #66d9ef } /* Keyword.Type */
-.highlight .ld { color: #e6db74 } /* Literal.Date */
-.highlight .m { color: #ae81ff } /* Literal.Number */
-.highlight .s { color: #e6db74 } /* Literal.String */
-.highlight .na { color: #a6e22e } /* Name.Attribute */
-.highlight .nb { color: #f8f8f2 } /* Name.Builtin */
-.highlight .nc { color: #a6e22e } /* Name.Class */
-.highlight .no { color: #66d9ef } /* Name.Constant */
-.highlight .nd { color: #a6e22e } /* Name.Decorator */
-.highlight .ni { color: #f8f8f2 } /* Name.Entity */
-.highlight .ne { color: #a6e22e } /* Name.Exception */
-.highlight .nf { color: #a6e22e } /* Name.Function */
-.highlight .nl { color: #f8f8f2 } /* Name.Label */
-.highlight .nn { color: #f8f8f2 } /* Name.Namespace */
-.highlight .nx { color: #a6e22e } /* Name.Other */
-.highlight .py { color: #f8f8f2 } /* Name.Property */
-.highlight .nt { color: #f92672 } /* Name.Tag */
-.highlight .nv { color: #f8f8f2 } /* Name.Variable */
-.highlight .ow { color: #f92672 } /* Operator.Word */
-.highlight .w { color: #f8f8f2 } /* Text.Whitespace */
-.highlight .mf { color: #ae81ff } /* Literal.Number.Float */
-.highlight .mh { color: #ae81ff } /* Literal.Number.Hex */
-.highlight .mi { color: #ae81ff } /* Literal.Number.Integer */
-.highlight .mo { color: #ae81ff } /* Literal.Number.Oct */
-.highlight .sb { color: #e6db74 } /* Literal.String.Backtick */
-.highlight .sc { color: #e6db74 } /* Literal.String.Char */
-.highlight .sd { color: #e6db74 } /* Literal.String.Doc */
-.highlight .s2 { color: #e6db74 } /* Literal.String.Double */
-.highlight .se { color: #ae81ff } /* Literal.String.Escape */
-.highlight .sh { color: #e6db74 } /* Literal.String.Heredoc */
-.highlight .si { color: #e6db74 } /* Literal.String.Interpol */
-.highlight .sx { color: #e6db74 } /* Literal.String.Other */
-.highlight .sr { color: #e6db74 } /* Literal.String.Regex */
-.highlight .s1 { color: #e6db74 } /* Literal.String.Single */
-.highlight .ss { color: #e6db74 } /* Literal.String.Symbol */
-.highlight .bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */
-.highlight .vc { color: #f8f8f2 } /* Name.Variable.Class */
-.highlight .vg { color: #f8f8f2 } /* Name.Variable.Global */
-.highlight .vi { color: #f8f8f2 } /* Name.Variable.Instance */
-.highlight .il { color: #ae81ff } /* Literal.Number.Integer.Long */
+/* This file was generated using `pygmentize -S nord-darker -f html -a .highlight` */
+pre { line-height: 125%; }
+td.linenos .normal { color: #D8DEE9; background-color: #242933; padding-left: 5px; padding-right: 5px; }
+span.linenos { color: #D8DEE9; background-color: #242933; padding-left: 5px; padding-right: 5px; }
+td.linenos .special { color: #242933; background-color: #D8DEE9; padding-left: 5px; padding-right: 5px; }
+span.linenos.special { color: #242933; background-color: #D8DEE9; padding-left: 5px; padding-right: 5px; }
+.highlight .hll { background-color: #3B4252 }
+.highlight { background: #242933; color: #d8dee9 }
+.highlight .c { color: #616e87; font-style: italic } /* Comment */
+.highlight .err { color: #bf616a } /* Error */
+.highlight .esc { color: #d8dee9 } /* Escape */
+.highlight .g { color: #d8dee9 } /* Generic */
+.highlight .k { color: #81a1c1; font-weight: bold } /* Keyword */
+.highlight .l { color: #d8dee9 } /* Literal */
+.highlight .n { color: #d8dee9 } /* Name */
+.highlight .o { color: #81a1c1; font-weight: bold } /* Operator */
+.highlight .x { color: #d8dee9 } /* Other */
+.highlight .p { color: #eceff4 } /* Punctuation */
+.highlight .ch { color: #616e87; font-style: italic } /* Comment.Hashbang */
+.highlight .cm { color: #616e87; font-style: italic } /* Comment.Multiline */
+.highlight .cp { color: #5e81ac; font-style: italic } /* Comment.Preproc */
+.highlight .cpf { color: #616e87; font-style: italic } /* Comment.PreprocFile */
+.highlight .c1 { color: #616e87; font-style: italic } /* Comment.Single */
+.highlight .cs { color: #616e87; font-style: italic } /* Comment.Special */
+.highlight .gd { color: #bf616a } /* Generic.Deleted */
+.highlight .ge { color: #d8dee9; font-style: italic } /* Generic.Emph */
+.highlight .ges { color: #d8dee9 } /* Generic.EmphStrong */
+.highlight .gr { color: #bf616a } /* Generic.Error */
+.highlight .gh { color: #88c0d0; font-weight: bold } /* Generic.Heading */
+.highlight .gi { color: #a3be8c } /* Generic.Inserted */
+.highlight .go { color: #d8dee9 } /* Generic.Output */
+.highlight .gp { color: #616e88; font-weight: bold } /* Generic.Prompt */
+.highlight .gs { color: #d8dee9; font-weight: bold } /* Generic.Strong */
+.highlight .gu { color: #88c0d0; font-weight: bold } /* Generic.Subheading */
+.highlight .gt { color: #bf616a } /* Generic.Traceback */
+.highlight .kc { color: #81a1c1; font-weight: bold } /* Keyword.Constant */
+.highlight .kd { color: #81a1c1; font-weight: bold } /* Keyword.Declaration */
+.highlight .kn { color: #81a1c1; font-weight: bold } /* Keyword.Namespace */
+.highlight .kp { color: #81a1c1 } /* Keyword.Pseudo */
+.highlight .kr { color: #81a1c1; font-weight: bold } /* Keyword.Reserved */
+.highlight .kt { color: #81a1c1 } /* Keyword.Type */
+.highlight .ld { color: #d8dee9 } /* Literal.Date */
+.highlight .m { color: #b48ead } /* Literal.Number */
+.highlight .s { color: #a3be8c } /* Literal.String */
+.highlight .na { color: #8fbcbb } /* Name.Attribute */
+.highlight .nb { color: #81a1c1 } /* Name.Builtin */
+.highlight .nc { color: #8fbcbb } /* Name.Class */
+.highlight .no { color: #8fbcbb } /* Name.Constant */
+.highlight .nd { color: #d08770 } /* Name.Decorator */
+.highlight .ni { color: #d08770 } /* Name.Entity */
+.highlight .ne { color: #bf616a } /* Name.Exception */
+.highlight .nf { color: #88c0d0 } /* Name.Function */
+.highlight .nl { color: #d8dee9 } /* Name.Label */
+.highlight .nn { color: #8fbcbb } /* Name.Namespace */
+.highlight .nx { color: #d8dee9 } /* Name.Other */
+.highlight .py { color: #d8dee9 } /* Name.Property */
+.highlight .nt { color: #81a1c1 } /* Name.Tag */
+.highlight .nv { color: #d8dee9 } /* Name.Variable */
+.highlight .ow { color: #81a1c1; font-weight: bold } /* Operator.Word */
+.highlight .pm { color: #eceff4 } /* Punctuation.Marker */
+.highlight .w { color: #d8dee9 } /* Text.Whitespace */
+.highlight .mb { color: #b48ead } /* Literal.Number.Bin */
+.highlight .mf { color: #b48ead } /* Literal.Number.Float */
+.highlight .mh { color: #b48ead } /* Literal.Number.Hex */
+.highlight .mi { color: #b48ead } /* Literal.Number.Integer */
+.highlight .mo { color: #b48ead } /* Literal.Number.Oct */
+.highlight .sa { color: #a3be8c } /* Literal.String.Affix */
+.highlight .sb { color: #a3be8c } /* Literal.String.Backtick */
+.highlight .sc { color: #a3be8c } /* Literal.String.Char */
+.highlight .dl { color: #a3be8c } /* Literal.String.Delimiter */
+.highlight .sd { color: #616e87 } /* Literal.String.Doc */
+.highlight .s2 { color: #a3be8c } /* Literal.String.Double */
+.highlight .se { color: #ebcb8b } /* Literal.String.Escape */
+.highlight .sh { color: #a3be8c } /* Literal.String.Heredoc */
+.highlight .si { color: #a3be8c } /* Literal.String.Interpol */
+.highlight .sx { color: #a3be8c } /* Literal.String.Other */
+.highlight .sr { color: #ebcb8b } /* Literal.String.Regex */
+.highlight .s1 { color: #a3be8c } /* Literal.String.Single */
+.highlight .ss { color: #a3be8c } /* Literal.String.Symbol */
+.highlight .bp { color: #81a1c1 } /* Name.Builtin.Pseudo */
+.highlight .fm { color: #88c0d0 } /* Name.Function.Magic */
+.highlight .vc { color: #d8dee9 } /* Name.Variable.Class */
+.highlight .vg { color: #d8dee9 } /* Name.Variable.Global */
+.highlight .vi { color: #d8dee9 } /* Name.Variable.Instance */
+.highlight .vm { color: #d8dee9 } /* Name.Variable.Magic */
+.highlight .il { color: #b48ead } /* Literal.Number.Integer.Long */
\ No newline at end of file
- 
+