tests for logs

pkg/dashboard/frontend/cypress/e2e/a11y.cy.ts

@@ -7,7 +7,9 @@ describe('a11y test suite', () => {
     '/storage',
     '/secrets',
     '/topics',
+    '/jobs',
     '/websockets',
+    '/logs',
     '/not-found',
   ]
 

pkg/dashboard/frontend/cypress/e2e/logs.cy.ts

@@ -0,0 +1,60 @@
+describe('logs test suite', () => {
+  beforeEach(() => {
+    cy.viewport('macbook-16')
+
+    cy.visit('/logs')
+
+    cy.wait(500)
+  })
+
+  it(`Should create logs for started service`, () => {
+    const expectedServices = [
+      'test-app_services-my-test-secret',
+      'test-app_services-my-test-service',
+      'test-app_services-my-test-db',
+    ]
+
+    cy.getTestEl('test-row0-service').should(($el) => {
+      expect($el.text()).to.be.oneOf(expectedServices)
+    })
+    cy.getTestEl('test-row1-service').should(($el) => {
+      expect($el.text()).to.be.oneOf(expectedServices)
+    })
+    cy.getTestEl('test-row2-service').should(($el) => {
+      expect($el.text()).to.be.oneOf(expectedServices)
+    })
+  })
+
+  it(`Should create logs for nodemon`, () => {
+    const expectedLogs = [
+      '$ nodemon -r dotenv/config services/my-test-secret.ts',
+      '$ nodemon -r dotenv/config services/my-test-service.ts',
+      '$ nodemon -r dotenv/config services/my-test-db.ts',
+    ]
+
+    cy.getTestEl('test-row6-msg').should(($el) => {
+      expect($el.text()).to.be.oneOf(expectedLogs)
+    })
+    cy.getTestEl('test-row7-msg').should(($el) => {
+      expect($el.text()).to.be.oneOf(expectedLogs)
+    })
+    cy.getTestEl('test-row8-msg').should(($el) => {
+      expect($el.text()).to.be.oneOf(expectedLogs)
+    })
+  })
+
+  it(`Should purge logs`, () => {
+    cy.getTestEl('logs').children().should('have.length.above', 2)
+
+    cy.intercept('DELETE', '/api/logs').as('purge')
+
+    cy.getTestEl('purge-logs-btn').click()
+
+    cy.wait('@purge')
+
+    cy.getTestEl('logs')
+      .children()
+      .first()
+      .should('have.text', 'No logs available')
+  })
+})

pkg/dashboard/frontend/src/components/logs/LogsExplorer.tsx

@@ -15,6 +15,7 @@ const Logs: React.FC = () => {
       <div className="relative flex flex-col">
         <div className="flex">
           <Button
+            data-testid="purge-logs-btn"
             onClick={purgeLogs}
             variant="destructive"
             className="ml-auto"
@@ -29,39 +30,53 @@ const Logs: React.FC = () => {
           <span>Service</span>
           <span>Message</span>
         </div>
-        <div className="mt-1 flex flex-col font-mono text-sm">
-          {logs.map(({ msg, time, serviceName }, i) => {
-            const formattedLine = msg.trim()
-            return (
-              <div
-                key={i}
-                className={cn(
-                  'mt-0.5 grid cursor-pointer grid-cols-[200px_150px_1fr] items-start gap-x-2 whitespace-pre-wrap rounded-sm px-1 py-[2px] hover:bg-gray-100 dark:hover:bg-gray-700',
-                  {
-                    'bg-red-100 hover:bg-red-200 dark:bg-red-800/70 dark:hover:bg-red-800/90':
-                      msg.toLowerCase().includes('error'),
-                    'bg-orange-100 hover:bg-orange-200 dark:bg-orange-500/60 dark:hover:bg-orange-500/70':
-                      msg.toLowerCase().includes('warning'),
-                  },
-                )}
-              >
-                <span className="w-[200px] truncate">
-                  {format(new Date(time), 'MMM dd, HH:mm:ss.SS')}
-                </span>
-                <Tooltip>
-                  <TooltipTrigger className="w-[150px] truncate">
-                    <span>{serviceName}</span>
-                  </TooltipTrigger>
-                  <TooltipContent>
-                    <p>{serviceName}</p>
-                  </TooltipContent>
-                </Tooltip>
-                <span className="border-l pl-2">
-                  {ansiToReact(formattedLine)}
-                </span>
-              </div>
-            )
-          })}
+        <div
+          className="mt-1 flex flex-col font-mono text-sm"
+          data-testid="logs"
+        >
+          {logs.length > 0 ? (
+            logs.map(({ msg, time, serviceName }, i) => {
+              const formattedLine = msg.trim()
+              return (
+                <div
+                  key={i}
+                  className={cn(
+                    'mt-0.5 grid cursor-pointer grid-cols-[200px_150px_1fr] items-start gap-x-2 whitespace-pre-wrap rounded-sm px-1 py-[2px] hover:bg-gray-100 dark:hover:bg-gray-700',
+                    {
+                      'bg-red-100 hover:bg-red-200 dark:bg-red-800/70 dark:hover:bg-red-800/90':
+                        msg.toLowerCase().includes('error'),
+                      'bg-orange-100 hover:bg-orange-200 dark:bg-orange-500/60 dark:hover:bg-orange-500/70':
+                        msg.toLowerCase().includes('warning'),
+                    },
+                  )}
+                >
+                  <span className="w-[200px] truncate">
+                    {format(new Date(time), 'MMM dd, HH:mm:ss.SS')}
+                  </span>
+                  <Tooltip>
+                    <TooltipTrigger className="w-[150px] truncate">
+                      <span data-testid={`test-row${i}-service`}>
+                        {serviceName}
+                      </span>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <p>{serviceName}</p>
+                    </TooltipContent>
+                  </Tooltip>
+                  <span
+                    className="border-l pl-2"
+                    data-testid={`test-row${i}-msg`}
+                  >
+                    {ansiToReact(formattedLine)}
+                  </span>
+                </div>
+              )
+            })
+          ) : (
+            <div className="mt-4 p-1 text-center font-body text-lg font-semibold tracking-wide text-gray-500 dark:text-gray-400">
+              No logs available
+            </div>
+          )}
         </div>
       </div>
     </AppLayout>