✨ improve e2e tests

cypress/integration/first-test.js

@@ -1,8 +1,19 @@
 /* globals cy */
 
 describe('Homepage', () => {
-  it('should perform basic google search', () => {
-    cy.visit('/');
-    cy.get('#count').should('have.length', 1);
+  beforeEach(() => cy.visit('/'));
+
+  it('should display the count', () => {
+    cy.get('#counter > span').should('have.length', 1);
+  });
+
+  it('should increase the count', () => {
+    cy.get('#counter > button:last-child').click();
+    cy.get('#counter > span').should('contain', '1');
+  });
+
+  it('should decrease the count', () => {
+    cy.get('#counter > button:first-child').click();
+    cy.get('#counter > span').should('contain', '-1');
   });
 });

playground/src/components/Counter/Counter.tsx

@@ -7,17 +7,15 @@ const Counter = (): JSX.Element => {
   const [count, setCount] = useState(0);
 
   return (
-    <div tw="flex items-center justify-center w-full h-screen">
+    <div id="counter" tw="flex items-center justify-center w-full h-screen">
       <button
         type="button"
         onClick={() => setCount(i => i - 1)}
         tw="bg-blue-500 text-white rounded py-2 px-4"
       >
         -
       </button>
-      <span id="count" tw="px-4 font-bold text-2xl">
-        {count}
-      </span>
+      <span tw="px-4 font-bold text-2xl">{count}</span>
       <button
         type="button"
         onClick={() => setCount(i => i + 1)}