Migrate component tests to cypress (#5759)

Author: itsisak

.drone.yml

@@ -245,7 +245,7 @@ steps:
       - corepack enable
       - pnpm --filter lego-webapp preview
 
-  - name: cypress
+  - name: cypress_e2e
     image: cypress/browsers:node-20.18.0-chrome-130.0.6723.69-1-ff-131.0.3-edge-130.0.2849.52-1
     shm_size: 512m
     ipc: host
@@ -270,7 +270,24 @@ steps:
       - ./wait-for-it.sh -t 180 legocypresshelper:3030
       - npm i -g corepack
       - corepack enable
-      - pnpm --filter lego-webapp exec cypress run --record
+      - pnpm --filter lego-webapp exec cypress run --e2e --record
+  
+  - name: cypress_component
+    image: cypress/browsers:node-20.18.0-chrome-130.0.6723.69-1-ff-131.0.3-edge-130.0.2849.52-1
+    when:
+      event: [push]
+      branch:
+        exclude: [build]
+    depends_on:
+      - install_cypress
+      - build
+    environment: 
+        TZ: Europe/Oslo
+        CYPRESS_CACHE_FOLDER: /drone/src/.cypress_cache
+    commands:
+      - npm i -g corepack
+      - corepack enable
+      - pnpm --filter lego-webapp exec cypress run --component --config video=false,screenshotOnRunFailure=false
 
   - name: docker
     image: plugins/docker
@@ -285,7 +302,8 @@ steps:
       - lint
       - typescript
       - frontend
-      - cypress
+      - cypress_e2e
+      - cypress_component
     environment:
       SENTRY_AUTH_TOKEN:
         from_secret: sentry_auth_token

README.md

@@ -87,7 +87,7 @@ A coverage report can be generated by running `pnpm test -- --coverage`.
 
 </details>
 
-<details><summary><code>Cypress E2E (End-to-end tests)</code></summary>
+<details><summary><code>Cypress E2E and Component tests</code></summary>
 
 ### End to end tests (cypress)
 
@@ -140,6 +140,20 @@ And you run cypress headlessly (no visible browser) in another terminal
 pnpm cypress run
 ```
 
+### Component tests (cypress)
+Component tests does not depend on anything to run
+
+Simply open cypress
+```bash
+$ pnpm cypress open
+```
+
+or run in terminal
+```bash
+pnpm cypress run --component
+```
+
+
 #### STRIPE
 
 In order to run the payment end-2-end tests, a few extra steps are required. First one has to install the stripe cli, log in and then run

lego-webapp/components/Comments/Comment.tsx

@@ -40,7 +40,7 @@ const Comment = ({
 
   return (
     <>
-      <div className={styles.comment}>
+      <div className={styles.comment} data-testid="comment">
         {author ? (
           <Flex alignItems="center" justifyContent="space-between">
             <Flex alignItems="center" gap="var(--spacing-md)">

lego-webapp/components/Comments/CommentTree.tsx

@@ -66,7 +66,7 @@ function CommentTree({
     );
   });
 
-  return <div>{tree}</div>;
+  return <div data-testid="comment-tree">{tree}</div>;
 }
 
 export default CommentTree;

lego-webapp/components/Comments/__tests__/CommentTree.spec.tsx

@@ -17,4 +17,11 @@ export default defineConfig({
     baseUrl: 'http://localhost:3000',
     specPattern: 'cypress/e2e/**/*.{js,jsx,ts,tsx}',
   },
+  component: {
+    specPattern: 'cypress/component/**/*.cy.{js,jsx,ts,tsx}',
+    devServer: {
+      framework: 'react',
+      bundler: 'vite',
+    },
+  },
 });

lego-webapp/components/Comments/__tests__/CommentView.spec.tsx

@@ -0,0 +1,38 @@
+import CommentView from '~/components/Comments/CommentView';
+import comments from '~/cypress/fixtures/comments';
+
+describe('<CommentView />', () => {
+  beforeEach(() => {
+    cy.mount(
+      <CommentView contentTarget="articles.article-1" comments={comments} />,
+    );
+  });
+
+  it('renders a comment tree', () => {
+    cy.get('[data-testid="comment-tree"]').should('exist');
+  });
+
+  it('renders all comments', () => {
+    cy.get('[data-testid="comment"]').then(($comments) => {
+      expect($comments.length).to.equal(comments.length);
+    });
+  });
+
+  it('renders the top level comments at root level', () => {
+    cy.get('[data-ischild="false"]').then(($rootComments) => {
+      const rootCommentsCount = comments.filter(
+        (comment) => comment.parent === null,
+      ).length;
+      expect($rootComments.length).to.equal(rootCommentsCount);
+    });
+  });
+
+  it('renders nested comments', () => {
+    cy.get('[data-ischild="true"]').then(($nestedComments) => {
+      const nestedCommentsCount = comments.filter(
+        (comment) => comment.parent !== null,
+      ).length;
+      expect($nestedComments.length).to.equal(nestedCommentsCount);
+    });
+  });
+});