MeltingDog's questions

Tenho vários arquivos que executam vários testes e retornam resultados em um arquivo de log.

Tenho funções auxiliares que criam um arquivo de log e adicionam dados a ele.

Quero nomear dinamicamente esse arquivo de log, com base na hora e data em que o script é executado. Para isso, preciso armazenar o nome do arquivo em uma variável no arquivo que dispara todos os testes ( main.js) e torná-lo disponível para as funções no meu helper-function.jsarquivo.

Tenho experimentado definir uma variável de ambiente, main.jsmas não obtive sucesso em fazer com que todas as funções auxiliares a leiam.

Embora pareça que eu possa defini-lo em main.js e fazer com que a função createLogs() o use, a updateLogs()função subsequente, que é exportada ( module.exports = {updateLogs}) para outros arquivos, não pode. Estou supondo que os outros arquivos simplesmente não estão "cientes" da variável de ambiente.

No entanto, codificar a variável de ambiente helper-functions.jsfunciona - ambas as funções auxiliares podem vê-la e usá-la.

Alguém sabe como posso definir process.env.LOGFILEum valor dinâmico e torná-lo disponível para todas as funções auxiliares? (Observação: devido a restrições de segurança, não posso usar pacotes de terceiros para fazer isso).

Meus arquivos são assim:

//main.js
const d = new Date();
const logName = "fooBar";
process.env.LOGFILE = logName + "-" + d.getDay() + "-" + d.getMonth() + "-" + d.getFullYear()  +  ".json";
createLogs(logName);

// Running tests on other files...

funções-auxiliares.js

//If I uncomment the below it works, but file name is hard coded.
//process.env.LOGFILE = "customLogs.json";
    
//Create log file when scripts are first run
const createLogs = (logName) => {
    exec('git branch --show-current', (err, stdout, stderr) => {
        if (err) {
            console.log("Error getting git branch:" + stderr);
        }

        const startTime = ((Date()).toLocaleString()).split('GMT')[0];
        const branchName = stdout ? stdout.replace(/(\r\n|\n|\r)/gm,"") : "no-branch";

        let repObjString = `{"details":{"name": "${logName}","time": "${startTime}","branch": "${branchName}"},"report":{}}`;

        const logFileName = `logs/${process.env.LOGFILE}`; //<== THIS WORKS
        if (!fs.existsSync(logFileName)) {
            console.log("Log doesnt exist. Making one...");
            fs.writeFile(logFileName, repObjString, function (err) {
                if (err) throw err;
                console.log('Creating file!');
            });
        }
    });
}

// Update logs
const updateLogs = (logObj) => {
    const logName = `logs/${process.env.LOGFILE}`; //<== THIS DOES NOT WORK

    fs.readFile(logName, 'utf8', function (err, logData) {
        if (err) throw err;
        Object.assign(logData["report"], logObj);
        fs.writeFile (logName, logData, function(err) {
            if (err) throw err;
            console.log('Log updated');
        });
    });
}

Estou escrevendo alguns testes automatizados usando node.js e Cypress, e como tenho muitos deles, quero agrupá-los e separá-los em seus próprios arquivos. Comecei a fazer isso, por exemplo:

//myscripts/prodPageTests.js

const { exec } = require('child_process');

let command = "npx cypress run --headless --browser chrome --spec './cypress/e2e/LoremProdPage.feature'";
// Other tests to come.
// Probably in some kind of loop with args.

exec(command, (error, stdout, stderr) => {
    if (error) {
        console.error(`Error executing command: ${error}`);
        return;
    }
    console.log(`Output:\n${stdout}`);
    if (stderr) {
        console.error(`Error Output:\n${stderr}`);
    }
});

Isso funciona, mas depois que é executado também recebo o aviso:

Error Output:

DevTools listening on ws://127.ip.address/devtools/browser/<some hash>
2025-02-19 10:18:07.287 Cypress[18578:4259699] WARNING: Secure coding is not enabled for restorable state! Enable secure coding by implementing NSApplicationDelegate.applicationSup

O que eu entendo ter algo a ver com o Mac Sonoma OS.

Estou curioso: existe uma solução alternativa para isso com o node.js?

Sou novo no Cypress e configurei um monte de funções auxiliares em seu próprio arquivo. Quero que uma dessas funções retorne um valor, no entanto, estou ficando preso em como fazer isso dentro da estrutura síncrona do Cypress.

Continuo recebendo o erro

CypressError: cy.then()falhou porque você está misturando código assíncrono e síncrono.

Tentei implementar uma correção semelhante à mencionada aqui Cypress retornando valor síncrono dentro do comando assíncrono? mas sem sucesso.

Meu código é assim:

Função auxiliar:

//helperFunction.js
module.exports.schemaChecker = () => {
    cy.get('script:contains("@context")').its('length').then((len) => {
        cy.task('log', 'Schemas: ' + len);
        if (len > 1) {
            return "fail";
        }
    })
}

Arquivo de teste:

import { schemaChecker, } from '../../support/helperFunctions.js';
// other stuff...

Given('I am on X page', () => {
    cy.viewport(1480, 1000);
    cy.visit(pageUrl);

    schemaChecker().then((response) => {
        if (response == "fail") {
           // Do something
        };
    })
});

Tentei algumas variações disso (por exemplo: if (schemaChecker() == "fail") {}), mas não tenho certeza de como fazê-los funcionar juntos e não consegui encontrar nada útil no Google.

Alguém poderia me indicar a direção certa?

Tenho um objeto JS extenso com muitos objetos aninhados, por exemplo:

data = {
  sundriesIncreases : {
    month1: { projectedIncrease: 1.3, actualIncrease: 1.3 },
    month2: { projectedIncrease: 1.6, actualIncrease: 1.5 },
    month3: { projectedIncrease: 1.4, actualIncrease: 1.4 },
    month4: { projectedIncrease: 2, actualIncrease: 2.1 },
    month5: { projectedIncrease: 1.2, actualIncrease: 1.3 },
    //etc
  },
  //etc
}

Estou usando um loop para percorrer um conjunto de dados diferente e quero usar o índice desse loop para recuperar os dados dos meses correspondentes da matriz.

No entanto, estou tendo problemas para descobrir como obter um determinado valor do array filho pelo índice.

Até agora tentei obtê-lo por índice assim:

customerNumbers.forEach((amt, index) => {
   let actInc = data.sundriesIncreases[index].actualIncrease;
   console.log(`amt=${val} index=${index} increase=${actInc}`)
});

E convertendo o objeto pai em um array:

var increasesArr = Object.entries(data.sundriesIncreases);
customerNumbers.forEach((amt, index) => {
   let actInc = increasesArr[index].actualIncrease;
   console.log(`amt=${val} index=${index} increase=${actInc}`)
});

Mas até agora nada funciona.

Claro

customerNumbers.forEach((amt, index) => {
   if (index == 0) {
     let actInc = data.sundriesIncreases.month1.actualIncrease;
     console.log(`amt=${val} index=${index} increase=${actInc}`)
   }
});

funciona, mas não é o ideal.

Uma pesquisa no Google sobre o problema revela muitas informações sobre como obter a chave por valor e também sobre como fazer o oposto.

Alguém poderia me indicar a direção certa?

Tenho um componente React que fica dentro de uma página web normal (portanto, não é um SPA).

Há uma função Vanilla JS, dentro de outra função JS, nesta página da web que desejo chamar de dentro do meu componente React. Esta função se parece com:

const getInfo = (() => {
  const updateInfo = (dataId) => {
    //Do something
  }
  const showInfo = (dataId) => {
    //Do something
  }
  return {updateInfo, showInfo}
})();

E eles são chamados nas páginas da web (normais) como:

getInfo.updateInfo("1324");

Agora, quero incluir isso no meu componente React. Então, criei uma função auxiliar, simplesmente copiando o acima.

const getInfo = (() => {
  const updateInfo = (dataId) => {
    //Do something
  }
  const showInfo = (dataId) => {
    //Do something
  }
  return {updateInfo, showInfo}
})();

E chamando-o de dentro de outra função auxiliar, como de costume:

const calculate = () => {
   getInfo.updateInfo("1324");
   // Other React helper function stuff
}

Porém quando tento compilar recebo o erro

getInfo.updateInfo não é uma função

Alguém sabe como posso usar getInfo.updateInfo();as funções auxiliares do meu componente React?

Quero que o Cypress verifique se o link para uma página está correto clicando no link e vendo se o URL contém uma determinada sequência de caracteres.

Para isso, criei a função:

checkLink = (linkEl, expectedPath) => {
    let pathString = linkEl.prop('href') ? linkEl.prop('href') : 'no-href';
    if (expectedPath && (pathString != 'no-href')) {
        cy.task('log', 'Checking link: '  + pathString + ' ' + expectedPath);
        cy.get(linkEl).click();
        cy.url().should('include', expectedPath);
        cy.go('back');
    }
}

Na maioria dos casos isso funcionou bem.

No entanto, não funcionaria se o link tivesse um target="_blank"atributo. Então adicionei .invoke('removeAttr', 'target')e alterei a função para ser a seguinte:

checkLink = (linkEl, expectedPath) => {
    let pathString = linkEl.prop('href') ? linkEl.prop('href') : 'no-href';
    if (expectedPath && (pathString != 'no-href')) {
        cy.task('log', 'Checking link: '  + pathString + ' ' + expectedPath);
        cy.get(linkEl).invoke('removeAttr', 'target').click();
        cy.url().should('include', expectedPath);
        cy.go('back');
    }
}

No entanto, agora ele parece não conseguir obter a URL da página que visita. Por exemplo, recebo o erro:

 AssertionError: Timed out retrying after 4000ms: expected '' to include 'mystring'

Se eu executar o teste como o título, posso ver a página (com a string esperada na URL) carregar bem. Parece que o Cypress não está recebendo cy.url()mais nada por algum motivo.

Alguém sabe o porquê disso?

Tenho um campo de entrada:

<input type="range" id="amtRange" value="0" min="280" max="1400">

Quero obter o valor do minatributo e ver se ele é menor que outro valor pré-existente, ou seja, o valor no minatributo (280) deve ser menor que o número na amtvariável.

Posso obter o valor como uma string assim:

cy.get('#amtRange').invoke('attr', 'min');

Mas não consigo descobrir como passá-lo como um inteiro. Eu tentei o seguinte:

const amt = 286;
let minAmt = cy.get('#amtRange').invoke('attr', 'min');
minAmt = parseInt(minAmt);
minAmt.should('be.lessThan', amt);

Mas isso produz o erro: TypeError: minAmt.should is not a function.

Eu também tentei:

const amt = 286;
cy.get('#amtRange').then(($amtInput) => {
    let minAmt = parseInt($amtInput.invoke('attr', 'min'));
    minAmt.should('be.lessThan', amt);
});

Mas isso produz o erro: $amtInput.invoke is not a function.

Como posso conseguir isso?

Estou criando um aplicativo em React e colocando-o em uma página do meu site.

Tenho um widget/plugin de chat de terceiros no meu site e gostaria que ele fosse ativado quando um botão específico fosse clicado no meu componente React. No vanilla JS, isso geralmente é feito com a seguinte função:

LiveChat.openChatWindow();

No entanto, não consigo descobrir agora como chamar essa função de dentro do meu componente React.

Eu tentei

  const launchChat = () => {
    LiveChat.openChatWindow();
  }
// Other code

  <a class="btn chat-btn" onClick={launchChat}>Chat to us</a>

Mas o aplicativo não compila porque, é claro, LiveChatnão está definido (na minha máquina local).

Também não consigo iniciar o chat detectando um clique de fora do componente, porque, é claro, o botão é criado pelo React, e não no DOM.

$(function(){
  $(".chat-btn").click(function(){
    LiveChat.openChatWindow();
  });
});

Alguém sabe como devo proceder?

Sou novo no React e estou usando o React CountUp para animar uma contagem crescente de números, por exemplo:

<CountUp end={totalAmount} />

Isso funciona: sempre que totalAmountfor alterado, o CountUp animará uma contagem de 0 até o novo número.

No entanto, quero animá-lo para contar a partir de qualquer que seja o número anterior. Por exemplo, se as totalAmountmudanças forem de 70 para 100, quero que o animado conte apenas a partir de 70. Como está agora, qualquer totalAmountmudança nele sempre começará em 0.

Vejo que há um updateprop disponível, mas não tenho certeza de como usá-lo. Eu tentei:

<CountUp end={totalAmount} update={totalAmount} />

Vejo que há uma maneira de fazer isso em um "gancho", mas, para ser honesto, não tenho ideia de como incorporar um gancho ao meu componente React mais amplo.

Alguém poderia me indicar a direção certa?

Tenho um arquivo .js em meu projeto que importa um pacote NPM e possui 2 funções que usam esse pacote:

//replacePaths.js
import {replaceInFile} from 'replace-in-file';
async function replace() {
    const options = {
        files: 'src/**/*.jsx',
        from: 'dev/svgs/icons-main.svg',
        to: 'staging/media/svgs/icons-main.svg',
    };

    try {
        const results = await replaceInFile(options);
    } catch (error) {
        console.error('Error occurred:', error);
    }
}

async function revert() {
    const options = {
        files: 'src/**/*.jsx',
        from: 'staging/media/svgs/icons-main.svg',
        to: 'dev/svgs/icons-main.svg',
    };

    try {
        const results = await replaceInFile(options);
    } catch (error) {
        console.error('Error occurred:', error);
    }
}
module.exports = {
    replace,
    revert
};

Quero poder executar essas funções na linha de comando. Pesquisei no Google e, para fazer isso, basta adicionar o seguinte ao meu package.jsonarquivo:

"scripts": {
    ...
    "replace": "node replacePaths.js replace",
    "revert" : "node replacePaths.js revert",
    ...
}

Eu sou o primeiro deles na linha de comando como tal: npm run replace, mas recebi o erro ReferenceError: module is not defined in ES module scope.

Pesquisando isso no Google, mudei a exportsparte para:

export default replace;
export default revert;

e tentei novamente. Não recebi nenhum erro, apenas node replacePaths.js replaceimprimi a linha no console.

Posso executar as funções removendo a parte de exportação e apenas colocando replace()ou revert()no arquivo JS, mas isso não é útil para mim se eu quiser ter 2 funções no mesmo arquivo.

Alguém seria capaz de me indicar a direção certa?

Quero poder enviar um elemento HTML como string em um suporte para o meu componente. Entendo que posso renderizar isso, dangerouslySetInnerHTML()mas não quero definir o HTML "interno" de nada - só quero renderizar o elemento HTML conforme ele vem do suporte.

Por exemplo, se eu enviar, <a href="/somepage" data-attr="somthing">Link here</a>quero apenas 'imprimir' apenas aquele elemento da tag âncora no meu componente.

dangerouslySetInnerHTML()poderia funcionar, mas eu teria que agrupar meu elemento enviado em outro elemento.

Por exemplo:

<div dangerouslySetInnerHTML={{ __html: linkHtml }} />

Renderizaria:

<div><a href="/somepage" data-attr="somthing">Link here</a></div>

O pacote React HTML Parser parece fazer o que eu quero, mas gostaria de saber se existe uma maneira de fazer isso sem usar primeiro um pacote de terceiros.

Alguém sabe se existe uma maneira de conseguir isso?

Estou tentando construir um teste no Selenium Webdriver para verificar os valores de 2 divs que possuem o mesmo nome de classe.

Por exemplo, HTML:

<div class="prod-card">
  <div class="prices">
    <div class="price-wrap">
      From: 
      <div class="price">$9.99</div>
    </div>
    <div class="price-wrap">
      To: 
      <div class="price">$19.99</div>
    </div>
  </div>
</div>

Tenho tentado usar o localizador Xpath do Selenium, mas não consigo localizar o segundo div.

Por exemplo, o seguinte funciona:

let lowerPrice = await driver.findElement(By.xpath("//div[@class='price'][1]")).getText();
lowerPrice = lowerPrice.trim();
assert.equal(lowerPrice, expectations[i].lowerPrice);

Mas isso não funciona:

let higherPrice = await driver.findElement(By.xpath("//div[@class='price'][2]")).getText();
higherPrice = higherPrice.trim();
assert.equal(higherPrice, expectations[i].higherPrice);

eu recebo o erroNoSuchElementError: Unable to locate element: //div[@class='price'][2]

Não sei por que isso funciona bem ao encontrar o primeiro elemento, mas não o segundo.

Alguém saberia por quê?

Estou compilando o SASS em um projeto Create-React-App em um ambiente MacOS, com Node.js.

Estou enfrentando um problema em que meu projeto não consegue compilar devido aos caracteres UTF-8 %3Ce %3E(representando <and >), por exemplo, na regra CSS:

  background-image: url("data:image/svg+xml,%3Csvg...svg%3E");

Alguém saberia se existe uma alternativa para usar %3Ce %3Eao colocar o código fonte SVG em um arquivo .scss?

EDITAR:

Erro que estou recebendo no Storybook:

SassError: variável indefinida. node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].oneOf[7].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[ 1].rules[5].oneOf[7].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[5].oneOf[7].use[ 3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[5].oneOf[7].use[4]!./src/styles/components/components.scss indefinido

274 │imagem de fundo: url("data:image/svg+xml,%3Csvg width='464' height='243' xmlns='http://www.w3.org/2000/svg'%3E%3Cg #{$fill-stroke} fill-rule='evenodd'%3E%3Cpath d='M463.409 18.439l-.02 223.245L364.326 130.1l99.084-111.661zM231.847.5c10.354 0 20.063 4.372 26. 808 12.006 h0l104,333 117,516L263,256 242,5H1,112L205,216 12,505A35,488 35,488 0 01231,847,5z'/%3E%3C/g%3E%3C/svg%3E"); │
^^^^^^^^^^^^

src/styles/mixins/_svgs.scss 274:123 linha-chave()

O SCSS em questão é um mixin (você pode codificar as variáveis ​​para testar):

@mixin keyline($color: 'green', $style: 'stroke') {
    $colorcode: colourcode($color);
    @if $style == fill {
        $fill-stroke: "fill='%23#{$colorcode}'";
    }
    @else {
       $fill-stroke: "fill='none' stroke='%23#{$colorcode}'";
    }
    background-image: url("data:image/svg+xml,%3Csvg width='464' height='243' xmlns='http://www.w3.org/2000/svg'%3E%3Cg #{$fill-stroke} fill-rule='evenodd'%3E%3Cpath d='M463.409 18.439l-.02 223.245L364.326 130.1l99.084-111.661zM231.847.5c10.354 0 20.063 4.372 26.808 12.006h0l104.333 117.516L263.256 242.5H1.112L205.216 12.505A35.488 35.488 0 01231.847.5z'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
}

Estou recriando um componente de botão HTML existente que usa o <svg>elemento e uma folha de sprite de ícone para ícones.

Quero poder criar o <svg>elemento se um iconStringprop tiver um valor e adicioná-lo ao conteúdo do botão.

Estou tendo dificuldade em "construir" esse <svg>elemento dentro de uma variável, ex:

  if (iconString && label) {
    buttonContent = <svg className="btn-icon"><use xlink:href="/svgs/icons.svg#' + iconString + '"></use></svg> + label;
  }

Não consigo encontrar ou descobrir a maneira correta de usar <svg>os <use>elementos e junto com os adereços iconStringe label.

Alguém seria capaz de me apontar na direção certa?

Meu código completo é:

export const button = ({ type, size, iconString, label, ...props }) => {
  let buttonContent = '';
  if (iconString && label) {
    buttonContent = <svg className="btn-icon"><use xlink:href="/svgs/icons.svg#' + iconString + '"></use></svg> + label;
  }
  else {
    buttonContent = label;
  }

  return (
    <button
      type="button"
      className={['btn', `btn-${size}`, `btn-${type}`].join(' ')}
      {...props}
    >
      {buttonContent}
    </button>
  );
};