teleren/devto huggingface dataset:
Make a reusable test with React Testing Library
Tags: webdev, react, beginners
Published: 2022-11-22 19:34:42

Photo by <a href="https://unsplash.com/@sigmund?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sigmund</a> on <a href="https://unsplash.com/s/photos/recycle?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
  

It can happen to have very similar tests across our suites. In one of my recent examples, I had to test if the UI of the footer of the pages in the application was correctly rendered, depending on a prop change.

The footer consists only of a box with inside an SVG icon and a text. But those are white when we have a dark background, and  dark gray when the background is white.

The logic is already in place, and the simple test steps would be: 
- render the page (component)
- get the elements to check
- check that the elements have the correct style.

The next -and boring- step would be placing this test inside each page test suite, and check for the color individually.

Instead, we can make a reusable test, like a normal function.
We can put it in some shared.js file so it can be picked up anytime.

```js
import { screen, waitFor } from '@testing-library/react'

const testPageFooterWithColor = (renderPage, expectedColor) => {
  test('it checks that the footer is present and has the correct color', async () => {
    renderPage()

    const footerText = screen.getByText('our footer text')

    await waitFor(() => {
      expect(footerText).toBeInTheDocument()
    })

    expect(footerText).toHaveStyle({ color: expectedColor })
  })
}

export { testPageFooterWithColor }
```

Then we can import it in our suites:
```js
  const renderCustomPage = () => {
    render(
      <CustomPage />,
      { wrapper: MemoryRouter },
    )
  }
  
  describe('our test suite', () => {
    ...our tests
     
    testPageFooterWithColor(renderCustomPage, 'white')
  })
```

Thank you for reading! Let's connect on [Twitter](https://twitter.com/AlexBuaiscia) or [Mastodon](@alex_@uiuxdev.social)!
Using ts-node in nx-monorepos
Tags: typescript, productivity, node, tooling
Published: 2022-11-22 19:10:10

At my current work we use monorepos a lot. We use [nx](https://nx.dev/) as tool to manage the different projects in the repo.
Naturally you also need some scripts to automate some tasks in the repository. Sometimes you also want to use libraries of your monorepo inside these scripts.

To be able to do that you just need to install [tsconfig-paths](https://www.npmjs.com/package/tsconfig-paths) (`npm install -D tsconfig-paths`) and alter the `ts-config` file you use for [ts-node](https://www.npmjs.com/package/ts-node):

```json
{
  "extends": "./tsconfig.json",

  ...

  "ts-node": {
    // It is faster to skip typechecking.
    // Remove if you want ts-node to do typechecking.
    "transpileOnly": true,

    "files": true,

    "require": ["tsconfig-paths/register"],

    "compilerOptions": {
      // compilerOptions specified here will override those declared below,
      // but *only* in ts-node.  Useful if you want ts-node and tsc to use
      // different options with a single tsconfig.json.
    }
  }
}
```

The key part is the `"require": ["tsconfig-paths/register"]` as it enables ts-node to resolve the path of your libraries.
Creating custom snippets in VS Code
Tags: vscode, webdev, react
Published: 2022-11-22 19:01:50

Let’s improve your productivity as a developer by creating your own custom snippets in VS Code.

Snippets allow you to define templates that can be used in your code by just typing the snippet prefix.

The most simple ones will just put some text in your editor, but VS Code allows you to create more complex templates where you can specify the cursor position and the selected text after the snippet has been inserted.

There are some built-in snippets in VS Code, the ones that I use the most are the `for` one and `switch` one so I don't have to look for the syntax in Google.

The easiest way to create a snippet is by going into the editor command (`Command`  + `Shift` + `P` in Mac or `Control` + `Shift` + `P` in Windows) and type “snippets”, then select “Configure user snippets”, and then select the language for which you want it. This will open a json file where you can put your own snippets.

You’ll need to specify 3 things:

1. The name: this will be the name that appears in IntelliSense when you type the prefix.
2. The prefix: the characters that will identify your snippet and the ones that you’ll type to insert it in your code.
3. The body: the actual text that will be inserted.

## Examples

### `console.log(”<string>”);`

Use this snippet if you want to log a string:

```json
{
  ...
  "console.log string": {
    "prefix": "cls",
    "body": "console.log(\"$1\");",
  }
}
```

### `console.log({ object });`

If instead of a string you want to log a variable you can use the following one:

```json
{
  ...
  "console.log object": {
    "prefix": "clo",
    "body": "console.log({ $1 });",
  }
}
```

This snippet leverages the shorthand notation and logs an object whose key is the variable name you want to debug.

### `React component`

You can create even more complex snippets:

```json
{
  ...
  "React component": {
    "prefix": "rcp",
    "body": [
      "type ${TM_FILENAME_BASE}Props = {",
      "  $1",
      "};",
      "",
      "const ${TM_FILENAME_BASE} = ({ $2 }: ${TM_FILENAME_BASE}Props) => {",
      "  return ${3:null}",
      "};",
      "",
      "export default ${TM_FILENAME_BASE};"
    ]
  }
}
```

This will use the filename where it is being used. If your file is called `Test.tsx` it will place the following code in it:

```tsx
type TestProps = {
  
};

const Test = ({  }: TestProps) => {
  return null
};

export default Test;
```

The best part is that the $n defines the cursor position, so in our case the first cursor position will be in the type definition, the second one in the component signature so you pick the props you are going to use and the last one after the return. You can move from one position to the next one using the `Tab` key.
The book library: Code organization
Tags: haskell, library
Published: 2022-11-22 18:53:08

This little post would be about how I had, and I'm planning to organize the code inside my book library. This library is part of the reading management system that I'm working on. But, at the moment, this is where I'm focusing my efforts.

## How it is now

Originally, I did'n have a structured way to organize the code of my library. Currently, my code is organized like this:

1. Type Classes
2. Type declarations and newtype declarations with their functions next to them.
3. Sum data type definitions.


![Original organization](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e45y5v08om8l9sw3dbee.png)

## The base of the new way

Now, I'm planning to implement the following approach, described by [Eric Normand](https://ericnormand.me/) :

> -   Actions: Anything that depends on when it is run, or how many times it is run, or both [...].
> -   Calculations: Computations from input to output. They always give the same output when you give the same input. [...].
> -   Data: Recorded facts about events. [...]. [[1, p10](#1)]

## How it would be

How this would look without seeing the actual code:

- First I would put the data or in this case what is a book. Type classes, type and newtype declarations; type aliases, and data types.
- Then the calculations in this case and by the moment the functions to wrap and unwrap around my defined types, and other operations that don't need to interact with the outside world.
- Finally, I would put the actions, right now the only type of functions that I think could go here are time-related functions.


![New organization](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8pyhd2qa1b1qsd4u3gm0.png)


### References

<a name=1></a>[1] E. Normand, Grokking simplicity: taming complex software with functional thinking. Shelter Island, NY: Manning Publications Company, 2021.
A Simple Landing Page
Published: 2022-11-22 18:34:52

Curiosity is also a superpower that transform life ,only when the output is positive. Becoming a good front-end developer is a path i have choosen, and to stay on it requires knowing more, because the more i know, the more i become.

Today, i was able to design a landing page with the basic front-end technlogies (html,css,and js) No!! frameworks.

Please check it out and tell me what you think!!

https://ikechukwu411.github.io/Crypto-Landing-Page/

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wkab030g9stg8m87zexf.jpg)
Next.js and React Project Starter CLI with 30+ Plugins🚀
Tags: javascript, react, webdev, beginners
Published: 2022-11-22 18:32:45

We built an open source project starter for developers who want to get a jump-start on their Next.js and React application development. 

💫GitHub Repo: https://github.com/pankod/superplate

superplate handles everything so that you can focus on the code.It offers a full system build setup with no configuration for the best JavaScript UI framework single-page applications.

🚀 It ships with +30 plugins including popular UI Kits, testing frameworks and many useful developer tools.

🤘It reduces the amount of setup and configuration required, allowing you to quickly spin up projects without having to worry about tooling or frameworks.

⚡️It provides easy starting to your project in seconds with using industry-standard best practices and performance-oriented technologies such as React and Next.js.

You can easily develop your framework CLI and plugins according to your needs to on top of superplate codebase due to its framework/plugin agnostic nature.
Virtual Internships Alert
Tags: internship, resume, jobs, students
Published: 2022-11-22 18:10:06

If you don't have any work exprience and your resume is empty then you can do virtual internships to enhance your skills and to make your resume look good !

Learn directly from top companies

1. Register for [Forage](https://www.theforage.com/), and enroll in programs that help you explore career options.
2. View video instructions from actual employees and access curated resources to help you in the task.
3. Compare your work with model examples from the company and earn a certificate.
4. Add your certificate to your resume, CV, and LinkedIn.

Virtual work experience programs replicate work at top companies and help you gain the skills to be successful when applying and working there. In only 5-6 hours, learn the relevant tools necessary to complete a typical work day at that company.

Portal link- https://www.theforage.com/


Some Virtual Internships

J.P. Morgan Software Engineering
Apply- https://lnkd.in/dEsJScat


British Airways Data Science
Apply- https://lnkd.in/dQMadnCs


Cognizant Agile Methodology
Apply- https://lnkd.in/dxfxPFRS


Walmart Advanced Software Engineering
Apply- https://lnkd.in/dmv4Xcxw


Commonwealth Bank Software Engineering
Apply- https://lnkd.in/dcB4dygu


KPMG Data Analytics
Apply- https://lnkd.in/gDRd5udJ


Accenture UK Developer and Technology
Apply- https://lnkd.in/dixCVvqu


Accenture Data Analytics and Visualization
Apply- https://lnkd.in/dCAk3grw


General Electric Human Resources
Apply- https://lnkd.in/dhnPTemq


SAP Cybersecurity Engineering
Apply- https://lnkd.in/guPfG_yr


Deloitte Australia Technology
Apply- https://lnkd.in/dGQQZkq3


Electronic Arts Software Engineering 
Apply- https://lnkd.in/dAzxHvN5


Blackbird Australia Software Engineering
Apply- https://lnkd.in/dVqzSAUD


PwC Switzerland Power BI
Apply- https://lnkd.in/g7YCEXkX


Quantium Data Analytics
Apply- https://lnkd.in/d9qdC5GW


Cognizant Artificial Intelligence
Apply - https://lnkd.in/djPx9F8M


Hewlett Packard Enterprise Software Engineering
Apply - https://lnkd.in/ddHGNRcq


bp Digital Design & UX
Apply - https://lnkd.in/gEEUiY-j


Standard Bank Data Science
Apply - https://lnkd.in/di2WT-Nz


BCG Data Science & Analytics
Apply - https://lnkd.in/dDbMSesB


Skyscanner Front-End Software Engineering
Apply - https://lnkd.in/eqdE3FHn


Follow Linkedin page - https://lnkd.in/d_d-rhpc

Telegram group- https://lnkd.in/gD2spnpc

WhatsApp group - https://lnkd.in/dQuNdsNz
Can you learn something in 60 seconds?
Tags: youtube, aws, beginners, productivity
Published: 2022-11-22 18:04:13

This post will be about creating short videos on YouTube :)

## **Why short videos?**
Sometimes I wanted to quickly show how to do something. Basic stuff. Making a long video was missing the point, for one short tip. I don't like to waste time on unnecessary talk. Straight to the point is best.
When someone asked me about something. He usually wanted a short and specific answer on **how to do something**.

So I came up with the idea of making **short videos** about cloud basics. 

The good thing is that short videos are easy to record and the viewer doesn't get bored while watching.

I think videos are a great idea to **help people** and gain **more time for yourself**. Conducting training sessions was too repetitive for me. By recording a video once you talk about something and immediately thousands of people have access to it.

In my opinion, short videos can be helpful for the listener and the creator. In a maximum of **60 seconds** you need to share knowledge. Preferably with a practical example. The listener gets **condensed knowledge**. The creator learns **how to transfer his knowledge quickly**.

Of course, on my [YouTube channel](https://www.youtube.com/@WojciechLepczynski) I will also add longer videos in which I will try to explain more complicated things.
I try not to talk about theory, but focus more on practice and more realistic examples.

In the latest short video, you'll find out how to enable a new region in AWS, it's really simple. You'll also learn why it's a good thing to do:
https://youtube.com/watch?v=CPA7fGKyqmk&feature=share

If you are interested in my work, you can check out my blog https://lepczynski.it/en/
Jest, Vitest, and WebComponents
Tags: jest, vitest, shadowdom, webcomponents
Published: 2022-11-22 17:46:45

## Purpose

Jest and the newer Vitest are inextricably linked with frontend testing tools. While I personally do not care for these tools, its important to understand a lot of projects are tied to them. As a result, even though their web component support / DOM mocking isn't the best, we should at least look at what it does support.

## Shadow Root rendering

Jest underwent a major revamp and received support for web components around version [26.5.0](https://github.com/facebook/jest/blob/main/CHANGELOG.md#2650) when it introduced JSDOM version [16.2.0](https://github.com/jsdom/jsdom/blob/master/Changelog.md#1620) which added the ability to render shadow roots. Prior to this version, rendering of shadowRoots would not work as expected, so its important if your project is using shadowRoots, you make sure to check what version of JSDOM / Jest you're using.

## Mocking more of the DOM

This major revamp also included a number of mocks for built-in 
browser functions such as MutationObserver, document.createRange, and many others.

However, there are still some notable missing functionalities such as `matchMedia`, `IntersectionObserver`, `ResizeObserver`, and more that I'm sure I haven't bumped into. So if your WebComponents use these, make sure to mock those too!

https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom

## Jest transforms

I don't believe Vitest has this issue due to using ESM transforms via Vite, but when using Jest its important to remember that it expects CommonJS files, but will not transform node_modules for you. Many WebComponent libraries do not ship CJS files. So if you have an NPM package that ships ESM, you'll want to tell Jest to transform it via the `"transformIgnorePatterns"`.

For example, if I were using Shoelace, I'd do this:

```json
    "transformIgnorePatterns": ["node_modules/?!(@shoelace-style)"]
```

for more on transformIgnorePatterns, check this out:

https://jestjs.io/docs/tutorial-react-native#transformignorepatterns-customization

## Focus order and keyboard events

I've noticed focus order and keyboard events can get messed up in JSDOM. Here's a spot where I don't have a fix. I've noticed that JSDOM does not always behave as expected with these and the only thing I can chalk it up to is that its dispatching events rather than sending the real actions to a browser.

JSDOM and Jest / Vitest come with so many caveats for WebComponents and browser testing in general, I can't recommend them in good faith. Nobody browses the web in JSDOM. If you hook up a custom runner to Jest that uses a real browser, now you're cookin'! I guess all this to say most of my beef lies with JSDOM and not necessarily Jest itself...

There are other projects like [Playwright](https://playwright.dev/) and [Web Test Runner](https://modern-web.dev/docs/test-runner/overview/) which will give you a real browser to work with and more closely mirror how your users will use your components.
Resolving Merge Conflicts with Visual Studio Code
Tags: tutorial, vscode, productivity, codenewbie
Published: 2022-11-22 17:45:40

Today I launched my Discord server to talk about Open Source and Web Development, feel free to join: https://discord.gg/bqwyEa6We6

---

Merge conflicts can be scary, but if you know how to use your tools, there's no need to worry!
_(Unless you're merging two branches 3 months old and there are 57 files with multiple conflicts. In that case, panic is understandable!)_

Visual Studio Code recently introduced the [three-way merge editor](https://code.visualstudio.com/updates/v1_69#_3-way-merge-editor).

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yamh51rh5jo9r1h53xd0.png)

This was supposed to replace the old inline editor.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n858wrw2sgd723di76iw.png)

However, as soon as the new editor has been set as default, the community loudly asked to get their old UI back. Have a look at [Issue#160806](https://github.com/microsoft/vscode/issues/160806)

You can toggle which one you want to use from the `git.mergeEditor` setting.

To be honest, I really like the inline experience of handling merge conflicts that VSCode (and many other tools!) offers.

It makes everything easier as you don't need to worry about the UI, all you have to think about is the code that is conflicting.

I tested the three way editor and it's not bad, but it adds a layer that sometimes is unnecessary. Again, personal opinion here.

---

But what's the point in handling conflicts directly in your IDE?
The main advantage is that you already have all the tools you need, and while resolving the conflicts you can for example format the code and recompile without having to swap window.

Since I use VSCode as my primary IDE (actually, it's a text editor), I recorded a video showing the main features it offers to help you.

I also showcase both inline (old) and three-way (new) editors, so you can decide which one you like the most!

{% embed https://youtu.be/lz5OuKzvadQ %}

---

**What do you use to resolve merge conflicts? If the answer is Visual Studio Code, which one of the two UIs do you use, three way or inline?**

---

Thanks for reading this article, I hope you found it interesting!

I just launched my Discord server to talk about Open Source and Web Development, feel free to join: https://discord.gg/Gtzcg4sggn

Do you like my content? You might consider subscribing to my YouTube channel!
You can find it here:
[![YouTube](https://img.shields.io/badge/YouTube:%20Dev%20Leonardo-FF0000?style=for-the-badge&logo=youtube&logoColor=white)](https://www.youtube.com/channel/UC-KqnO3ez7vF-kyIQ_22rdA?sub_confirmation=1)

Feel free to follow me to get notified when new articles are out ;)
{% embed https://dev.to/balastrong %}
#PowerAutomate – Flow to use Open Trivia Database questions in a Microsoft Teams bot 🤖 1/N
Tags: englishpost, bot, microsoftteams
Published: 2022-11-23 19:58:53

---
title: #PowerAutomate – Flow to use Open Trivia Database questions in a Microsoft Teams bot 🤖 1/N
published: true
date: 2022-11-22 17:38:46 UTC
tags: EnglishPost,Bot,EnglishPost,MicrosoftTeams
canonical_url: 
---

Hi !

A couple of days ago, I found a super cool connector in the Power Platform that allows us to get trivia questions from the [Open Trivia Database](https://opentdb.com/).

I started to play around with the API, and hey, I created a bot that ask questions and present the options for the answers. Here is a couple of samples.

Q: In the first Left 4 Dead, you can play as either of these four characters.

![trivia question sample in teams](https://brunocapuano.files.wordpress.com/2022/11/image.png?w=1024)

Q: Which one of the following rhythm games was made by Harmonix?

![](https://brunocapuano.files.wordpress.com/2022/11/image-1.png?w=1024)

### Open Triviata Database API

OK, so let’s take a look at the API and the implementation. To get started using the Open Triviata Database API, use this URL:

```

https://www.otriviata.com/api.php?amount=2

```

This will return an amazing JSON with 2 questions, correct and incorrect answers, categories and more.

![JSON API response with 2 questions, correct and incorrect answers, categories and more.](https://brunocapuano.files.wordpress.com/2022/11/image-2.png?w=797)

```

{"results":[{"category":"Entertainment: Television","type":"multiple","difficulty":"easy","question":"In the cartoon 'SpongeBob SquarePants', what did the acronym E.V.I.L stand for?","id":"1086","correct_answer":"Every Villain Is Lemons","incorrect_answers":["Every Villain Is Lemonade","Every Villain Is Limes","Each Villain Is Lemonade"]},{"category":"Sports","type":"multiple","difficulty":"easy","question":"Which city did the former NHL team "The Nordiques" originiate from?","id":"2779","correct_answer":"Quebec City","incorrect_answers":["Houston","Montreal","New York"]}]}

```

This is super cool, and also is a great starting point for a Power Automate Flow. In next posts, I’ll explain how I created this.

![Power Automate to use Open Trivia Database questions in a teams bot](https://brunocapuano.files.wordpress.com/2022/11/image-3.png?w=1024)

And important: Join me in this 2-week FREE program @MSFTReactor  
and we will learn together about Microsoft Power Pages.  
We will also cover fundamentals of Power Pages architecture, components, features, and tooling.

#### [https://aka.ms/DecPowerPagesBootcamp](https://aka.ms/DecPowerPagesBootcamp) 

Starting on Dec 05 😀

Happy coding!

Greetings

El Bruno

More posts in my blog [ElBruno.com](https://www.elbruno.com).

* * *