added capability to attach cucumber logs

CHANGELOG.MD

@@ -1,3 +1,6 @@
+# 0.0.8
+- added capability to attach cucumber logs
+
 # 0.0.7
 - fixed duplicated results in case of same feature name
 

package.json

@@ -1,12 +1,13 @@
 {
   "name": "@qavajs/html-formatter",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "main": "formatter/formatter.js",
   "scripts": {
-    "report:compile": "ts-node test/compile_report.ts",
-    "report:generate": "ts-node node_modules/.bin/qavajs run --config test/report.ts",
-    "test:e2e": "ts-node node_modules/.bin/qavajs run --config test-e2e/test.ts",
-    "debug:e2e": "ts-node node_modules/.bin/qavajs run --config test-e2e/test.ts --profile debug",
+    "report:compile": "node test/compile_report.js",
+    "report:compile:dev": "node test/compile_dev.js",
+    "report:generate": "ts-node --esm node_modules/.bin/qavajs run --config test/report.ts",
+    "test:e2e": "ts-node --esm node_modules/.bin/qavajs run --config test-e2e/test.ts",
+    "debug:e2e": "ts-node --esm node_modules/.bin/qavajs run --config test-e2e/test.ts --profile debug",
     "start": "node scripts/start.js",
     "build": "node scripts/build.js",
     "postbuild": "cp build/index.html formatter/index.html",
@@ -32,17 +33,18 @@
     ]
   },
   "devDependencies": {
-    "@babel/core": "7.12.3",
-    "@cucumber/cucumber": "^8.9.0",
-    "@epam/assets": "^4.9.1",
-    "@epam/promo": "^4.9.1",
-    "@epam/uui-components": "^4.9.1",
-    "@epam/uui-core": "^4.9.1",
+    "@babel/core": "^7.21.0",
+    "@cucumber/cucumber": "^9.0.0",
+    "@epam/assets": "^4.10.1-beta.1",
+    "@epam/promo": "^4.10.1-beta.1",
+    "@epam/uui-components": "^4.10.1-beta.1",
+    "@epam/uui-core": "^4.10.1-beta.1",
     "@pmmmwh/react-refresh-webpack-plugin": "0.4.3",
-    "@qavajs/cli": "^0.0.11",
+    "@qavajs/cli": "^0.0.19",
     "@qavajs/console-formatter": "^0.1.2",
-    "@qavajs/po-playwright": "^0.0.4",
-    "@qavajs/steps-playwright": "^0.0.7",
+    "@qavajs/memory": "^1.2.0",
+    "@qavajs/po-playwright": "^0.0.7",
+    "@qavajs/steps-playwright": "^0.0.14",
     "@qavajs/xunit-formatter": "^0.0.3",
     "@svgr/webpack": "5.5.0",
     "@testing-library/jest-dom": "^5.16.5",

src/components/LogsModal.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import {
+    ModalBlocker,
+    ModalFooter,
+    ModalHeader,
+    ModalWindow,
+    FlexRow,
+    Panel,
+    ScrollBars
+} from '@epam/promo';
+
+export const LogsModal = (modalProps: any) => {
+    return <>
+        <ModalBlocker blockerShadow='dark' {...modalProps}>
+            <ModalWindow style={{width: '100%', margin: 'auto'}}>
+                <Panel background="white">
+                    <ModalHeader title="Logs" onClose={() => modalProps.success('close')}/>
+                    <ScrollBars hasTopShadow hasBottomShadow>
+                        <FlexRow padding='24'>
+                            <pre style={{width: '100%'}}>
+                                {modalProps.logs.map((log: any, index: number) => <div key={index}>{log.data}</div>)}
+                            </pre>
+                        </FlexRow>
+                    </ScrollBars>
+                    <ModalFooter/>
+                </Panel>
+            </ModalWindow>
+        </ModalBlocker>
+    </>
+}

src/components/Step.tsx

@@ -10,12 +10,14 @@ import { ReactComponent as PendingIcon } from '@epam/assets/icons/common/navigat
 
 import { ReactComponent as ErrorIcon } from '@epam/assets/icons/common/notification-info-fill-24.svg';
 import { ReactComponent as AttachmentIcon } from '@epam/assets/icons/common/file-attachment-24.svg';
+import { ReactComponent as LogsIcon } from '@epam/assets/icons/common/content-code-24.svg';
 
 import css from '../App.module.scss';
 import { useUuiContext } from '@epam/uui-core';
 import { AttachmentModal } from './AttachmentModal';
 import { supportedMimeTypes } from '../utils/supportedMimeTypes';
-import { openInNewTab } from "../utils/openInNewTab";
+import { openInNewTab } from '../utils/openInNewTab';
+import { LogsModal } from './LogsModal';
 
 const icon = (status: string) => {
     switch (status) {
@@ -63,8 +65,15 @@ const handleAttachmentClick = (embedding: any, svc: any) => {
     return openInNewTab(embedding.data, embedding.mime_type)
 }
 
+const handleLogsClick = (logs: any[], svc: any) => {
+    return (e?: Event) => svc.uuiModals.show((props: any) => <LogsModal { ...props } logs={logs}/>)
+}
+
 export const Step = ({step}: {step: any}) => {
     const svc = useUuiContext();
+    const logs = step.embeddings
+        ? step.embeddings.filter((embedding: any) => embedding.mime_type === 'text/x.cucumber.log+plain')
+        : [];
 
     return <div style={{display: 'block'}}>
         <div style={{display: 'inline-flex'}}>
@@ -75,12 +84,20 @@ export const Step = ({step}: {step: any}) => {
                 color='red'
                 onClick={ () => svc.uuiModals.show((props) => <ErrorModal { ...props } error={step.result.error_message}/>) }
             />}
-            {step.embeddings && step.embeddings.map((embedding: any, index: any) => <LinkButton
-                key={index}
-                icon={ AttachmentIcon }
-                caption={ embedding.mime_type }
-                onClick={ handleAttachmentClick(embedding, svc) }
-            />)}
+            {logs.length > 0 && <LinkButton
+                icon={ LogsIcon }
+                caption='Logs'
+                onClick={ handleLogsClick(logs, svc) }
+            />}
+            {step.embeddings && step.embeddings
+                .filter((embedding: any) => embedding.mime_type !== 'text/x.cucumber.log+plain')
+                .map((embedding: any, index: any) => <LinkButton
+                    key={index}
+                    icon={ AttachmentIcon }
+                    caption={ embedding.mime_type }
+                    onClick={ handleAttachmentClick(embedding, svc) }
+                />)
+            }
         </div>
         <div style={{display: 'flex'}}>
             {step.arguments && step.arguments.map((arg: any, index: number) => <Argument key={index} arg={arg}/>)}

test-e2e/features/Logs.feature

@@ -0,0 +1,17 @@
+Feature: Logs
+
+  Background:
+    Given I open '$reportPage' url
+
+  Scenario Outline: verify that user can open logs (<scenario>)
+    When I click 'Main > Features Table > #LOGS in Rows > Name'
+    And I click 'Feature > #<scenario> in Scenarios > Title'
+    And I expect text of 'Feature > #<scenario> in Scenarios > #<step> in Steps > #<btn> of Attachments' to be equal 'Logs'
+    And I click 'Feature > #<scenario> in Scenarios > #<step> in Steps > #<btn> of Attachments'
+    And I expect text of 'Logs Overlay > Title' to be equal 'Logs'
+    And I expect text of 'Logs Overlay > Text' to be equal '<data>'
+
+    Examples:
+      | scenario                  | step                 | btn | data                                                                    |
+      | scenario passed with logs | passed step with log | 1   | some information in passed step\none more log line                      |
+      | scenario failed with logs | failed step with log | 2   | some information in failed step\nER: expected result\nAR: actual result |

test-e2e/features/MainPage.feature

@@ -14,22 +14,22 @@ Feature: Main Page
 
   Scenario: verify that user can open failed page
     When I click 'Header > Failed'
-    Then I expect number of elements in 'Failed > Features' collection to be equal '3'
+    Then I expect number of elements in 'Failed > Features' collection to be equal '4'
 
   Scenario: verify that user can filter only failed on main page
     When I click 'Main > Show Only Failed'
-    Then I expect number of elements in 'Main > Features Table > Rows' collection to be equal '3'
+    Then I expect number of elements in 'Main > Features Table > Rows' collection to be equal '4'
 
   Scenario: verify that user can filter only failed and search on main page
     When I click 'Main > Show Only Failed'
-    Then I expect number of elements in 'Main > Features Table > Rows' collection to be equal '3'
+    Then I expect number of elements in 'Main > Features Table > Rows' collection to be equal '4'
     When I type 'feature2' to 'Main > Search'
     Then I expect number of elements in 'Main > Features Table > Rows' collection to be equal '1'
     And I expect text of 'Main > Features Table > #1 of Rows > Name' to be equal 'FEATURE2'
 
   Scenario: verify that filter state is saved
     When I click 'Main > Show Only Failed'
-    Then I expect number of elements in 'Main > Features Table > Rows' collection to be equal '3'
+    Then I expect number of elements in 'Main > Features Table > Rows' collection to be equal '4'
     When I refresh page
-    Then I expect number of elements in 'Main > Features Table > Rows' collection to be equal '3'
+    Then I expect number of elements in 'Main > Features Table > Rows' collection to be equal '4'
 

test-e2e/po/components/Feature.ts

@@ -2,8 +2,8 @@ import { $, $$, Component } from '@qavajs/po-playwright';
 import Scenario from './Scenario';
 
 export default class Feature extends Component {
-    Title = $('.t2Air._2NWkE._16JVi._2LUBH._1S5Yu._1YeLH');
-    Scenarios = $$(new Scenario('.LW8md.QQ7Qd.viC1y.XVxPc._3pEr7._2Njnp._2tefK'));
+    Title = $('.FlexRow_root__DtoT7 .Text_root__wYraY.text-layout_font-size-14__zmBoh');
+    Scenarios = $$(new Scenario('[class*=Accordion_container]'));
     Search = $('[placeholder="Search"]');
-    ShowOnlyFailed = $('._1e-RT._29dT7._2ksiK.-clickable');
+    ShowOnlyFailed = $('[class*=Switch_container]');
 }

test-e2e/po/components/FeaturesTable.ts

@@ -1,7 +1,7 @@
 import { $, $$, Component } from '@qavajs/po-playwright';
 
 class Row extends Component {
-    Name = $('.mcDo6 .P755f .uui-caption');
+    Name = $('a[href*=feature]');
 }
 
 export default class FeaturesTable extends Component {

test-e2e/po/components/Header.ts

@@ -1,6 +1,6 @@
 import { $, $$, Component } from '@qavajs/po-playwright';
 
 export default class Header extends Component {
-    Failed = $('a._2meUz.uui-button-box.uui-enabled.-clickable._1u3-d.GyoMz.z4sy9.uui-no-left-icon.uui-no-right-icon.App_failedTitle__b4CvK');
-    Metadata = $('._36Wif + button');
+    Failed = $('a[href*=failed-scenarios]');
+    Metadata = $('button');
 }

test-e2e/po/components/LogsOverlay.ts

@@ -0,0 +1,7 @@
+import { $, $$, Component } from '@qavajs/po-playwright';
+import Overlay from './Overlay';
+
+export default class LogsOverlay extends Overlay {
+    Text = $('pre');
+
+}

test-e2e/po/components/Main.ts

@@ -4,5 +4,5 @@ import FeaturesTable from './FeaturesTable';
 export default class Main extends Component {
     FeaturesTable = $(new FeaturesTable('.App_features__1Nyen'));
     Search = $('[placeholder="Search"]');
-    ShowOnlyFailed = $('._1e-RT._29dT7._2ksiK.-clickable');
+    ShowOnlyFailed = $('[class*=Switch_container]');
 }

test-e2e/po/components/MetadataOverlay.ts

@@ -7,5 +7,5 @@ class Row extends Component {
 }
 
 export default class MetadataOverlay extends Overlay {
-    Rows = $$(new Row('._30bAc div[role="row"]'));
+    Rows = $$(new Row('[class*=DataTable_listContainer] div[role="row"]'));
 }

test-e2e/po/components/Overlay.ts

@@ -1,6 +1,6 @@
 import { $, $$, Component } from '@qavajs/po-playwright';
 
 export default class Overlay extends Component {
-    Title = $('.t2Air._2NWkE._16JVi.h-QZx._7sAnq._12oQ-._2khSS');
-    X = $('._2meUz.uui-button-box.uui-enabled.-clickable.CsQyo._18biJ');
+    Title = $('[class*=Text_root][class*=text-layout_line-height-24]');
+    X = $('.IconContainer_container__wSE-F');
 }

test-e2e/po/components/Scenario.ts

@@ -5,6 +5,6 @@ class Step extends Component {
 }
 
 export default class Scenario extends Component {
-    Title = $('.uui-accordion-toggler .t2Air._2NWkE._16JVi._2LUBH._30qZ_._1YeLH._2khSS');
+    Title = $('.uui-accordion-toggle-container > div > div');
     Steps = $$(new Step('.uui-accordion-body > div'));
 }

test-e2e/po/index.ts

@@ -6,12 +6,14 @@ import Header from './components/Header';
 import Failed from './components/Failed';
 import MetadataOverlay from './components/MetadataOverlay';
 import AttachmentOverlay from './components/AttachmentOverlay';
+import LogsOverlay from './components/LogsOverlay';
 
 export default class App {
     Main = $(new Main('main'));
     Feature = $(new Feature('main'));
     Failed = $(new Failed('main'));
-    Header = $(new Header('._1USbx._3lNb7'));
+    Header = $(new Header('[class*=MainMenu_root]'));
     MetadataOverlay = $(new MetadataOverlay('.uui-modal-window'));
     AttachmentOverlay = $(new AttachmentOverlay('.uui-modal-window'));
+    LogsOverlay = $(new LogsOverlay('.uui-modal-window'));
 }

test-e2e/test.ts

@@ -21,6 +21,7 @@ const common = {
     },
     memory: new Memory(),
     pageObject: new App(),
+    retry: 1,
     publishQuiet: true
 };
 

test/compile_dev.js

@@ -0,0 +1,6 @@
+const fs = require('fs');
+
+const template = fs.readFileSync('./public/index.html', 'utf-8');
+const json = fs.readFileSync('./test/report.json', 'utf-8');
+
+fs.writeFileSync('./public/index.html', template.replace('SOURCE_DATA', json).replace('METADATA', '[]'));

test/compile_report.js

@@ -0,0 +1,6 @@
+const fs = require('fs');
+
+const template = fs.readFileSync('./build/index.html', 'utf-8');
+const json = fs.readFileSync('./test/report.json', 'utf-8');
+
+fs.writeFileSync('./test/report.html', template.replace('SOURCE_DATA', json).replace('METADATA', '[]'));

test/features/Logs.feature

@@ -0,0 +1,7 @@
+Feature: Logs
+
+  Scenario: scenario passed with logs
+    When passed step with log
+
+  Scenario: scenario failed with logs
+    And failed step with log

test/step_definitions/custom_steps.ts

@@ -48,3 +48,15 @@ When('unsupported base64 attachment', function () {
     this.attach(require('../attachments/unsupportedBase64').default, 'base64:application/zip');
 });
 
+When('passed step with log', function () {
+    this.log('some information in passed step');
+    this.log('one more log line')
+
+});
+When('failed step with log', function () {
+    this.log('some information in failed step');
+    this.log('ER: expected result');
+    this.log('AR: actual result');
+    throw new Error('failed step');
+});
+