We Keep Coding

How can I get full HTML mochawesome report using codeceptjs running test in parallel mode?

I am using codeceptjs library in order to develop and run automated tests. Currently I'm in process of run those tests in paralell using NodeJS` workers. CodeceptJS proposes this opportunity and mention it in its documentation - https://codecept.io/parallel/#parallel-execution-by-workers.
Also I'm using such reporters as the Mochawesome, mocha-junit-reporter and codeceptjs-cli-reporter that I can use all-in-one with the help of Mocha-multi package.
Command which I use in order to run my tests is
codeceptjs run-workers --suites 4 --reporter mocha-multi
My codecept.conf.js file looks like that:
// Инициализация расширения dotenv, чтобы переменные из файла .env были доступны в тестах через объект process.env
require('dotenv').config();
const { setHeadlessWhen } = require('#codeceptjs/configure');
const { devices } = require('playwright');
const { BASE_URL, API_URL } = require('./utils/endpoints');
// Для запуска тестов в headless-режиме (как в bamboo) выполняется команда
// yarn e2e:ci
// Для запуска тестов в окне браузера выполняется команда
// yarn e2e
setHeadlessWhen(process.env.HEADLESS === 'true');
exports.config = {
tests: './e2e/*/*.test.js',
output: './output',
helpers: {
Playwright: {
url: `https://${BASE_URL}`,
show: true,
browser: 'chromium',
waitForNavigation: 'domcontentloaded',
waitForTimeout: 3000,
getPageTimeout: 10000,
emulate: devices['iPhone 6'],
},
REST: {
endpoint: `https://${API_URL}`,
},
Auth: {
require: './helpers/auth.js',
},
DataGenerator: {
require: './helpers/data-generator.js',
},
Cabinet: {
require: './helpers/cabinet.js',
},
Moderation: {
require: './helpers/moderation.js',
},
Advert: {
require: './helpers/advert.js',
},
User: {
require: './helpers/user.js',
},
Faker: {
require: './helpers/faker.js',
},
ChaiWrapper: {
require: 'codeceptjs-chai',
},
Mochawesome: {
uniqueScreenshotNames: true,
},
},
include: {
I: './steps_file.js',
// pages
SubmitPage: './pages/kaspi/Submit.js',
IndexPage: './pages/kaspi/Index.js',
AdvertPage: './pages/kaspi/AdvertPage.js',
EditAdvertPage: './pages/kaspi/EditAdvert.js',
CabinetActive: './pages/kaspi/CabinetActive.js',
// steps
EditAdvertStep: './steps/kaspi/EditAdvert.js',
AdvertPageStep: './steps/kaspi/AdvertPage.js',
CabinetStep: './steps/kaspi/Cabinet.js',
},
bootstrap: null,
mocha: {
reporterOptions: {
'codeceptjs-cli-reporter': {
stdout: '-',
options: {
verbose: true,
steps: true,
},
},
mochawesome: {
stdout: '-',
options: {
reportDir: './output',
reportFilename: 'report',
},
},
'mocha-junit-reporter': {
stdout: '-',
options: {
mochaFile: './output/report.[hash].xml',
attachments: true,
},
},
},
},
name: 'market-spa',
plugins: {
pauseOnFail: {},
retryFailedStep: {
enabled: true,
},
tryTo: {
enabled: true,
},
screenshotOnFail: {
enabled: true,
},
},
};
The problem is that when I get an HTML report created by Mochawesome it contains only results of the last NodeJS` worker. In other words, I expect that my HTML report will contain results of all of my 20 automated tests, but it only contains the results of 5 tests (those 15 tests were also running, but left no results).
By the way, the xml results that mocha-junit-reporter generates are doing well - it generates 4 different files with the results of each test suit.

TailwindCSS / PurgeCSS whitelist not working

I can't seem to get PurgeCSS to whitelist classes I use dynamically in the CMS.
Here are my config files:
/* postcss.config.js */
const purgecss = require('#fullhuman/postcss-purgecss')
module.exports = {
plugins: [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
require('postcss-nested'), // or require('postcss-nesting')
purgecss({
content: [
'**/*.twig',
],
defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
options: {
whitelist: [
'md:w-1/3',
],
},
})
]
}
/* tailwind.config.js */
const plugin = require('tailwindcss/plugin')
module.exports = {
theme: {
container: {
center: true,
},
extend: {
fontSize: {
'9xl': '10rem',
},
fontFamily: {
'sans': ['Roboto', 'system-ui'],
},
lineHeight: {
'11': '2.75rem',
'12': '3rem',
'14': '3.5rem',
}
},
},
variants: {
extend: {
borderColor: ['focus-visible'],
opacity: ['disabled'],
}
},
}
Tried various solutions I found, but nothing seem to do the trick, it keeps purging the classes I add to the whitelist. Any suggestions anyone?

I was using the wrong option name, it had to be safelist instead of whitelist.

As of today, I had to use the following code to safelist specific classes:
I used safelist on multiple classes I was using with random heights passed through React components as props.
module.exports = {
content: ['./src/**/*.{js,jsx,ts,tsx}'],
safelist: [
{
pattern:
/h-(1|2|3|4)/,
},
{
pattern:
/w-(1|2|3|4)/,
},
],
theme: {},
plugins: [],
};

How to use markdown-it plugins options in nuxt.js

I'm using #nuxtjs/markdownit to parse markdown files, I want to enable creating permanent links feature in 'markdown-it-anchor' plugin, I used following code in nuxt.config.js but not working:
modules: [
// Doc: https://axios.nuxtjs.org/usage
'#nuxtjs/axios',
'#nuxtjs/markdownit'
],
markdownit: {
preset: 'default',
linkify: true,
breaks: true,
typographer: true,
html: false,
use: [
'markdown-it-anchor',
'markdown-it-attrs',
'markdown-it-div',
'markdown-it-toc-done-right',
'markdown-it-emoji'
]
},
'markdown-it-anchor': {
level: 1,
// slugify: string => string,
permalink: true,
// renderPermalink: (slug, opts, state, permalink) => {},
permalinkClass: 'header-anchor',
permalinkSymbol: '¶',
permalinkBefore: true
},

Self answering: I found the syntax in this post
markdownit: {
preset: 'default',
linkify: true,
breaks: true,
typographer: true,
html: false,
use: [
[
'markdown-it-anchor',
{
level: 1,
// slugify: string => string,
permalink: true,
// renderPermalink: (slug, opts, state, permalink) => {},
permalinkClass: 'header-anchor',
permalinkSymbol: '¶',
permalinkBefore: true
}
],
'markdown-it-attrs',
'markdown-it-div',
'markdown-it-toc-done-right',
'markdown-it-emoji'
]
},

Why is my ES6 having different exports (exports || exports.default + named) depending on the scope of the import?

I have this in a yargs script:
const pkg = require(join(argv.path, 'package.json'));
const exported = require(join(argv.path, pkg.main));
console.log(exported);
If i try to read this source within the yargs script package pkg.main:
import SiteService, { SiteFunction } from 'site-service';
export const siteService = new SiteService('management', {
id: 1000,
othersIds: 1000,
});
export const siteFunction = new SiteFunction(siteService, {
id: 1000,
othersIds: 1000,
});
export default siteService;
The the value of exported is :
{ siteService:
SiteService {
name: 'management',
config: { id: 1000, othersIds: 1000 },
siteFunctionList: [] },
siteFunction:
SiteFunction {
siteService:
SiteService {
name: 'management',
config: [Object],
siteFunctionList: [] },
config: { id: 1000, othersIds: 1000 } },
default:
SiteService {
name: 'management',
config: { id: 1000, othersIds: 1000 },
siteFunctionList: [] } }
If i read the pkg.main of a different module with this content:
import React from 'react';
import Resource from 'ra-core/lib/Resource';
import Route from 'react-router-dom/Route';
import SiteService, { SiteFunction } from 'site-service';
const siteService = new SiteService('management', {
id: 1000,
otherIds: [1, 2],
});
import {
UsersList,
UsersCreate,
UsersEdit,
UsersShow,
} from './resources/users';
export const siteFunction = new SiteFunction(siteService, ({ pages, roles, permissions }) => [
<Resource
name="users"
list={UsersList}
edit={UsersEdit}
create={UsersCreate}
show={UsersShow}
/>,
], ({ pages, roles }) => [
], ({ pages, roles }) => [
{
name: 'management',
redirect: true,
from: '/management',
to: '/',
description: 'management',
},
]);
export default siteFunction;
I have the following output
SiteFunction {
siteService:
SiteService {
name: 'management',
config: { id: 1000, otherIds: [Array] },
siteFunctionList: [] },
config: [Function] }
Both project babel configuration in babel.config.js:
{
only: [
'src',
'styleguide',
],
comments: false,
presets: [
[
'#babel/preset-env',
{
modules: false,
},
],
'#babel/preset-react',
],
plugins: [
'babel-plugin-array-includes',
'#babel/plugin-transform-runtime',
'#babel/plugin-transform-async-to-generator',
'#babel/plugin-proposal-class-properties',
'#babel/plugin-syntax-dynamic-import',
'#babel/plugin-syntax-import-meta',
'#babel/plugin-proposal-json-strings',
[
'#babel/plugin-proposal-decorators',
{
legacy: true,
},
],
],
env: {
production: {
plugins: [
'babel-plugin-add-module-exports',
'#babel/plugin-transform-modules-commonjs',
],
},
test: {
plugins: [
'#babel/plugin-transform-modules-commonjs',
'babel-plugin-dynamic-import-node',
],
},
},
}
In both case, the pkg.main imported was in ES6 syntax, while the yargs script run was a ES5 transpiled file.
I believe this is not good, am I correct?
Where does the bug happen? Both projects have the same babel configuration.
Within my script, should I assume both cases can happen and should I support both?

fetch path field value from nested objects(Parent- child) using underscore.js

var levels= [
{
path: 'RS',
hasChild :true
},
{
path: 'MO',
hasChild: true
},
{
path: 'EL',
hasChild: true
},
{
path: 'CL',
hasChild: false
},
{
path: 'EL1',
hasChild: true
},
{
path: 'CL1',
hasChild: false
},
{
path: 'RS2',
hasChild :true
},
{
path: 'MO2',
hasChild: true
},
{
path: 'EL2',
hasChild: true
},
{
path: 'CL2',
hasChild: false
},
{
path: 'CL3',
hasChild: false
},
];
Is it possible to create complete path from the object 'level' using underscore.js?
For e.g. - RS\MO\EL\CL
RS\MO\EL1\CL1
RS2\MO2\EL2\CL2
RS2\MO2\CL3\CL3
In any of the above levels child can appear more than one. Please advise if underscore.js can do deep watching of nested array of objects.
Please apologize me for the bad formatting of nested array of objects above.

function parse (levels) {
var buffer = [], target = [];
levels.forEach(function (level) {
buffer.push(level.path);
if (!level.hasChild) {
target.push(buffer.join('/'));
buffer.splice(0, buffer.length + 1);
}
});
return levels;
}
Gives: [ 'RS/MO/EL/CL', 'EL1/CL1', 'RS2/MO2/EL2/CL2', 'CL3' ]
Given your current structure, the logic to get the desired output is unclear.
How should the program know that RS2 starts a new node, but EL1 doesn't?
EDIT:
This solve the problem, but honestly, its hacky. A better way is to structure the data in a better way.
function parse (levels) {
var buffer = [], target = [];
levels.forEach(function (level) {
if (level.hasChild) {
buffer.push(level.path);
}
else {
var tmp = buffer.slice();
tmp.push(level.path);
target.push(tmp.join('/'));
buffer.splice(buffer.length - 1, 1);
}
if (/^RS/.test(level.path)) {
buffer.splice(1, buffer.length);
}
});
return target;
}
Result: ['RS/MO/EL/CL', 'RS/MO/EL1/CL1', 'RS/MO2/EL2/CL2', 'RS/MO2/CL3']

use _.each for that
var path =""
_.each(levels,function(object){
path = path +object.path+"/"
})
console.log(path)
Output:"RS/MO/EL/CL/EL1/CL1/RS2/MO2/EL2/CL2/CL3/"
Edit:
I think your Json shoud be like this:
var levels = [
{
"path": "RS",
"hasChild": true,
"childerens": {
"path": "MO",
"hasChild": true,
"childe1": [
{
"path": "EL",
"hasChild": true
},
{
"path": "CL",
"hasChild": false
}
],
"childe2": [
{
"path": "EL1",
"hasChild": true
},
{
"path": "CL1",
"hasChild": false
}
]
},
"isParent": true
},
{
"path": "RS2",
"hasChild": true,
"childerens": {
"path": "MO2",
"hasChild": true,
"chiled1": [
{
"path": "EL2",
"hasChild": true
},
{
"path": "CL2",
"hasChild": false
}
],
"chiled2": [
{
"path": "CL3",
"hasChild": true
},
{
"path": "CL3",
"hasChild": false
}
]
},
"isParent": true
}
]
For validate json is wrong or right go to JSONLINT
Remove variable name for validation