teleren/devto huggingface dataset:
Testing form submit not working Jest, Enzyme in React 
Tags: help
Published: 2021-08-13 09:13:47

I’m creating a react app using nextjs (react 17.02 , next 11.1.0) and going to test a simple form submit using Jest and enzyme (jest 26.4.2, enzyme 3.11.0) getting a error. Test frameworks works fine. I can run  the other test cases but only getting the error when I try to test form submit.
What do I need to do to solve this or can someone provide a tutorial on how to test a form submit?
here is my signIn component.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jbz4biqj529mdb1xslr7.PNG)
Here is the signIn.test.js file
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vt4rvckunlcgghtv81o0.PNG)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/flcwqu7ddr32o2l2y4zs.PNG)
7 Ways to Write Good commit message
Tags: github, webdev
Published: 2021-08-13 09:08:13

## What is a commit message?
> Brief description of the changes you made to the codebase. So that other members of the team can understand all changes you made to the codebase.

## Why is it necessary to write a **good** commit message?
> It is a good habit to write a good commit message because people come and go but code remains there. So you should commit in such a way that future members and the member of other teams can understand What all changes you have made?

Let's see an example of the **GOOD & BAD** Commit message.


- Example1 ![carbon.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1628782797846/FzGBjcRak.png)
- Example 2

![carbon (1).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1628842791309/2q3lVkg5M.png)
### Points to remember while writing ***Commit message*** :

1. Divide the commit message into 2 parts: **subject** and **body**.
In the above *Example 2* **1st message is subject part** and **2nd message is body part**.

2. Mention the type of commit you are making in **Subject part** such as:
     -  Feat: For any new feature
     -  Fix: If you fix any bug
     -  Docs: Changes in documentation 
     - Style: Any changes in style like color, design etc.
     - Refactor: When you refactor the code
     - Test: Anything related to testing
     - Chore: Regular code maintenance

 

3. Limit the **subject** line to 50 characters.
4. Don't end the **subject** line with a period (.)
5.  Use the ***Imperative mood*** in **subject** line 
> Imperative mood is like giving orders. Like:  
   - Fix the bug
   - Change background color

6.  Wrap the **body** part at 72 characters.

7. Capitalize the **subject** line and each **paragraph**.


That's all for this blog. We will meet in the next blog until then ***Keep learning, Keep growing***.

Connect with me : 
-  [Twitter](https://twitter.com/Vanshsh2701)
-   [LinkedIn](https://www.linkedin.com/in/vanshsharma27/) 


Reference :  
[FreeCodeCamp](https://www.freecodecamp.org/news/writing-good-commit-messages-a-practical-guide/)  <br>  [Neogcamp](https://neog.camp/guide/lesson-two)
Email Template refractor
Tags: graphql, architecture
Published: 2021-08-13 09:05:05

A brief intro:-
I am a freelancer. Here I am describing me developing a email feature for one of a fastAPI , graphql project.

1. I have changed the schemas

TODO: - remove connection of 1 from 2 and then remove 2, make 1 workable.

2. Stuck in alembic migrations file.
- workaround, make a separate migration file and migrate relevant changes. (svaioud migration files)

I did it solved the alembic migration issue

linked list a <- b <- c, did it as a <- c.

Almost done :)))

Day 2
New Part:-

Add title field to Email Template filed.
1. schema changed
2. models changed, migration changed
3. Crud fine
4. Resolvers checked.
5. Let's test it.


Working :)))

Fix problem in create_email_template and other resolver..

tan-tana.. 
Feature is completed.
How to disable watch mode of Jest created by CRA
Tags: jest, createreactapp
Published: 2021-08-13 08:45:09

自动化流程时，是不需要交互操作的，这个时候可以将监控模式关闭
```
yarn test --watchAll=false
```

对于通过create-react-app创建的应用来说，yarn test其实是通过``react-scripts``来执行的，这个时候可以用``CI``变量来控制，是一样的效果：

```
CI=true yarn test
```

备忘：CI这个方案有个小缺点，貌似把默认的颜色都给禁用了，可能是考虑只是为了输出日志，能少一事就少一事吧。

### References
* https://jestjs.io/docs/cli#--watchall
* https://create-react-app.dev/docs/running-tests/#linux-macos-bash
Meteor 2.2.3 & 2.3.5 released!
Tags: meteor, node
Published: 2021-08-13 08:41:19

Meteor v2.2.3 & Meteor v2.3.5 have been released. These are security and bug fixing releases.

First of all we have update to latest Node per the [Node.js August security release](https://nodejs.org/en/blog/vulnerability/aug-2021-security-releases/). This means Node [v12.22.5](https://nodejs.org/en/blog/release/v12.22.5/) for Meteor v2.2.3 and Node [v14.17.5](https://nodejs.org/en/blog/release/v14.17.5/) for Meteor v2.3.5.

Both releases also bring Typescript [v4.3.5](https://github.com/Microsoft/TypeScript/releases/tag/v4.3.5) and `@meteorjs/babel@7.12.0` which brings with it the latest Babel which was brought in to solve a `BABEL_PARSER_SYNTAX_ERROR` which occurred on [d3-array](https://github.com/meteor/meteor/issues/11525).

Meteor v2.3.5 also has an additional [bug fix](https://github.com/meteor/meteor/pull/11584) for source maps that were broken in VS Code.

As of now, Meteor v2.3.5 is not recommended release which is a standard practice to wait a few days after release for early adopters to try it to see if anything was missed. If you are such an early adopter you can update to this release by the following command:

```bash
meteor update --release 2.3.5
```

Or you can change it to `2.2.3` if you are still on the 2.2.x stage of Meteor.

Next major release for Meteor is [v2.4](https://github.com/meteor/meteor/pull/11488) which will bring some major improvements and new features. Stay tuned for more!

--------
If you like my work, please support me on [GitHub Sponsors ❤️](https://github.com/sponsors/StorytellerCZ).
Sorting array without using splice to get the exact output
Published: 2021-08-13 08:20:43

const getfunction = async ({ query, queryCondition, params }) => {

  try {
      const candidates = []
      const rejectedArray = []
      const droppedArray = []
let alldata = await CollectionName.aggregate(
          {
            $sort: sortQuery
          },  
      ])
for (var x=0; x<alldata.length; x++) {
        
        if(alldata[x].stat != 'Rejected' && alldata[x].stat != 'Dropped') {
          candidates.push(alldata[x])
        }
        else if(alldata[x].stat === 'Dropped') {
          droppedArray.push(alldata[x])
        }
        else if(alldata[x].stat === 'Rejected') {
          rejectedArray.push(alldata[x])
        }   
    }
  
    for(var y=0; y<droppedArray.length; y++) {
      candidates.push(droppedArray[y])
    }
    for(var z=0; z<rejectedArray.length; z++) {
      candidates.push(rejectedArray[z])
    }
} //close try
catch (err) {
     console.log(err)
  }
} //close function
Code with Codespaces and deploy with Qovery
Tags: codespaces, github
Published: 2021-08-13 08:03:36

12 years ago, when I started to work as a Developer, I would not have bet that I will write software and manage infrastructure right from our browser. At the time, web IDE did not exist. And managing infrastructure from the browser was super early. Today, it is all possible, and the future looks bright!

I am proud to announce that you can edit your code via GitHub Codespaces right from Qovery.

Take a look at this short introduction video.

[![Code with Codespaces and deploy with Qovery](https://cdn.loom.com/sessions/thumbnails/45c6259964e24c9fab850b702d2bc46e-with-play.gif)](https://www.loom.com/share/45c6259964e24c9fab850b702d2bc46e)

Happy coding 😎
Astro recipe collection website - Part 2 Homepage rendering
Tags: astro
Published: 2021-08-13 08:01:04

In this series, we are building a recipe website in Astro. We already made a start by [setting up our collections](https://daily-dev-tips.com/posts/astro-recipe-collection-website-part-1-setup-collections/).

Today we'll learn how we can render the five latest articles on the homepage.

![Showing part of the collection on homepage Astro](https://cdn.hashnode.com/res/hashnode/image/upload/v1628230603240/0z-isVdQ8.png)

## Adding a collection to our homepage

So far, we have been using the default homepage that Astro came with. We want to change that to showcase the last five recipes dynamically.

> Note: Where dynamically means on every build.

To get started with this, let's clean up the homepage. This way, we will have a blank canvas, to begin with.

```jsx
---
const title = 'Astro Recipe Website';
---
<!-- HTML Code -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>{title}</title>
    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
    <link rel="stylesheet" href="/style/global.css">
</head>
<body>

</body>
</html>
```

As you can see, we have a section of Frontmatter again. This is the section between the three dashes where we defined the title.

In this section, we will also load the five last recipes.

```jsx
---
const title = 'Astro Recipe Website';
const recipes = Astro.fetchContent('./recipe/*.md')
    .sort((a, b) => a.date.localeCompare(b.date)).slice(0, 5);
---
```

We use the same method of loading the content by leveraging the `fetchContent` ability of Astro.
Then we sort the articles based on their date and slice the array only to return five items.

Then we want to loop through these results and render an article for each recipe.

```html
<section>
  {recipes.map(recipe => (
  <article>
    <a href="{recipe.url}">
      <img src="{recipe.image}" alt="{recipe.title}" />
      <h3>{recipe.title}</h3>
    </a>
  </article>
  ))}
</section>
```

This will render a section with our five recipes and show the image and a heading with the title.
When we click the card, it takes us to that recipe.

Let's also add some very basic CSS so it will look a bit better.
The following code can be placed in the head of your `index.astro` file.

```jsx
<style lang="scss">
	section {
	    display: grid;
	    grid-template: '1fr 1fr 1fr 1fr 1fr';
	}
	article {
	    padding: 1rem;
	    img {
	        object-fit: cover;
	        width: 100%;
	        height: 200px;
	        margin-bottom: 0.5rem;
	    }
	    h3 {
	        color: #fff;
	    }
	}
</style>
```

You can find the complete code on [GitHub](https://github.com/rebelchris/astro-recipe-website/tree/part-2-homepage).

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
Django -> 3 ways to call Serializer
Tags: django, developer
Published: 2021-08-13 07:38:31


Every serializer can be used for both reading and writing operations. The way it is initialized determines the action that it will fulfill. In these terms we can distinguish 3 types of serializers: create, update and retrieve.

## Retrieve:
If in your view you want to serialize data that will be transmitted outside of your API, this is how you do it:
```python
def retrieve(self, request, *args, **kwargs):
    instance = self.get_object()
    serializer = ProfileSerializer(instance=instance)
    return Response(serializer.data)
```
In here you are passing `instance` (only) as argument so serilaizer will know that it does not need to perform any action. It will simply serialize your data and return it.

## Create:

In your create view, where you are saving your data you will define it in a different way:
```python
def create(self, request, *args, **kwargs):
    serializer = ProfileSerializer(data=request.data)
    serializer.is_valid(raise_exception=True)
    serializer.save()
    return Response(serializer.data)
```
In here you are passing `data` (only) as argument so serilaizer will know that it needs to invoke all validations and then create method to save our object.

## Update:

When updating an instance, you need to provide instance as well as data:
```python
def update(self, request, *args, **kwargs):
    instance = self.get_object()
    serializer = ProfileSerializer(
        instance=instance,
        data=request.data
    )
    serializer.is_valid(raise_exception=True)
    serializer.save()
    return Response(serializer.data)
```
If you are passing both `data` and `instance` as argument, serilaizer will know that it needs to invoke all validations and then update method to update an existing object.

## Point to Note:
`serializer.save()` invokes an appropriate internal method (create/update) based on arguments passed at the time of initialization.

For Retrieve  -> You need to pass instance (only)
For Create    -> You need to pass data (only)
For Update    -> You need to pass both instance and data.
How to Start Automatic Car Wash Business - USA
Tags: manufacturers, vehicles, automotive, industry
Published: 2021-08-13 07:02:21

In the last 10 years, the population of cars has increased manyfold. In today's context, most cars are driven by the owners themselves and would any day prefer to have a quick car wash, rather than leaving the car the whole day at a service station.

The Car Wash industry has grown from as simple as hand wash to sophisticated high impact pressure jet wash technology. Owning and running a car wash these days, is not just a mere business but, its one of the most lucrative and respected business.

When starting a car wash business you may like to consider all the key points which may affect your business today as well as, in future.
String Replace in Shell with sed [RE#4]
Tags: article, productivity, bash, devops
Published: 2021-08-13 08:53:50

---
title: String Replace in Shell with sed [RE#4]
date: 2021-08-13 00:00:00 UTC
tags: article, productivity, bash, devops
canonical_url: https://babakks.github.io/article/2021/08/13/re-004-string-replace-in-shell-with-sed.html
published: true
series: "Regular Encounters" 
---

Though 99% of the time we use a text editor like `vim` or `nano`, still knowing how to do simple string manipulations via shell commands is more than necessary. The simplest use case emerges in CI/CD pipeline where you may need to replace some placeholder with a specific text (e.g., a dynamic docker image tag). 🤖

One simple tool for this purpose is `sed`. For example, to replace “[tag]” with “abcdef” execute:

```
echo "docker push -t app:[tag]" | sed -e 's/[tag]/abcdef/g'

```

You can also use `sed` just like `grep` and pass a file to be used as the input stream:

```
sed -e 's/[tag]/abcdef/g' input-file.txt

```

You may add more expressions by adding any number of `-e expression` arguments:

```
sed -e 's/[tag]/abcdef/g' -e 's/[image]/app/g' input-file.txt

```

ℹ️ To learn more useful applications of `sed` have a look at [this](https://www.geeksforgeeks.org/sed-command-in-linux-unix-with-examples/amp/) article.

* * *

**_About Regular Encounters_**  
_I’ve decided to record my daily encounters with professional issues on a somewhat regular basis. Not all of them are equally important/unique/intricate, but are indeed practical, real, and of course,_ **_textually minimal._**
How to simulate clicking a button in Testing Library
Tags: testinglibrary, react
Published: 2021-08-13 06:42:14

引入``user-event``
```
import userEvent from '@testing-library/user-event'
```

锁定一个按钮，直接触发``click``事件
```
const { queryByTestId } = render(<App />);
const increaseButton = queryByTestId('increase-button');
userEvent.click(increaseButton)
```

触发以后，就可以测试点击以后的效果了，比如在这个例子里，点击了+1按钮，结果区域就会数值上加1。
```
const result = queryByTestId('result');
expect(result.textContent).toBe('1');
```

对应的按钮
```
// JavaScript
const [result, setResult] = useState(0);

// HTML
<button data-testid="increase-button" onClick={() => setResult(result+1)}>+1</button>
```

### References
* https://testing-library.com/docs/ecosystem-user-event
Hexagon 1.4.0 released!!! 🎉
Tags: kotlin, microservices, news, showdev
Published: 2021-08-13 06:36:59


Hello fellow Kotlin lovers... The 1.4.0 version of the Hexagon Toolkit got released!

[Hexagon](https://hexagonkt.com) is a Microservices Toolkit that aims to provide all you need to develop applications that run on Cloud environments.

This is a minor release, but I think it is important to note because it contains a lot of internal improvements (and a lot of contributions from the past [Hacktoberfest](https://hacktoberfest.digitalocean.com)).

Another important event tied to this release is that it is the first release since [Bikramjeet Singh] joined the project. Welcome Bikramjeet!

[Bikramjeet Singh]: https://github.com/BikramjeetSingh

Features
--------
This release brings the following features:

* Logging modules: Programmatically change logging level on packages not having to rely on configuration files (shaving some ms. to the start up time).
* Server options and parameters: Fine tune the HTTP Server adapter under the hood (i.e., changing the number of worker threads).
* Server features: Allow the development of Server Adapters with a subset of the functionalities. Some features could be ZIP support or Sessions support. Adapter's users can also use those adapters with a subset of the supported features to improve memory usage and overall performance.
* Serialization modularization. Serialization formats have been moved to their own modules, making the final service include only the ones used (and saving disk on the binary distribution).
* Recover Java 8 support (Jetty not supported, but Servlet is). This can be handy if you work in a slow-moving-company and want to use Hexagon to build some tools, do testing... or delivering production services if you dare 😉

Thanks to Contributors
----------------------
* [Build mock servers from OpenAPI specs for testing](https://github.com/hexagonkt/hexagon/issues/312) by [Bikramjeet Singh](https://github.com/BikramjeetSingh)
* [Latest MkDocs Material](https://github.com/hexagonkt/hexagon/issues/339) by [SalmonKing72](https://github.com/SalmonKing72)
* [Fix error parsing query parameters](https://github.com/hexagonkt/hexagon/issues/328) by [Petr Kadlec](https://github.com/pedro-cze)
* [Parse query and form parameters into type](https://github.com/hexagonkt/hexagon/issues/311) by [Anooj](https://github.com/AnoojPoozhikuth)
* [Review Templates Port](https://github.com/hexagonkt/hexagon/issues/310) by [Jens Dornieden](https://github.com/jdornieden)
* [Add compression support](https://github.com/hexagonkt/hexagon/issues/34) by [Sumit Kumar Pradhan](https://github.com/sumitkp18)

Future Steps
------------
1. Complete the functionality set (security, Websockets and OpenAPI).
2. Change the API: make it more consistent and switch to middleware filters instead before/after.

Spread the Word
---------------
* Play with the toolkit and share your feedback :)
* [Tweet about it](https://twitter.com/hexagon_kt)
* [Give it a :star:](https://github.com/hexagonkt/hexagon/stargazers)
* [Contribute!](https://hexagonkt.com/contributing)
Use VS Code on Github using any browser
Tags: vscode, github, code, editing
Published: 2021-08-13 06:35:17

##Want to use VS Code on Github using your browser


* Login to your github account
* Go to any GitHub repo
* Press the . key on your keyboard

You'll get Visual Studio Code in the browser to edit the repo. 

You can edit, search, install (some) extensions and use commit back to the repo

Link to my video [https://youtu.be/wZGqEgr4ybI] on youtube
Create a Simple Quiz App using JavaScript
Tags: html, css, javascript
Published: 2021-08-13 06:24:45

This is a Simple Quiz website.
1. Frontend is built using HTML, CSS & JavaScript
2. Deployed on Netlify
3. UI is not looking so good yeah but it's decent. I had to focus on the features not on UI because I've to know how it works. if you're also a JavaScript beginner and want to know how it works please check my git repo

###Live Preview : https://quize-application.netlify.app/

###GitHub Repo : {% github Aman2221/Quiz-App %}

If there are any errors, please consider sharing
Thank You❤️️❤️️
HTML tags | figure-figcaption
Tags: html, tags, figure, figcaption
Published: 2021-08-13 06:16:16

`<figure>` is used to **specify standalone content** that may have **an occasional caption indicated with** `<figcaption>`. The content type can be a photo, an illustration, a diagram, a quote, a code snippet...

Even if the content is related to the main flow of information, **it should be able to move without affecting it**. The outline of the `<figure>` content is excluded from the main outline of the document.

The `<figcaption>` can be the first or last child of the `<figure>`. If there is more than one, the first one that appears will be taken into account.

`<figure>` has an **implicit ARIA role** `figure`.

- Type: *block* / *block*
- Self-closing: *No* / *No*
- Semantic value: *Yes* / *Yes*

[Definition and example `<figure>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure) - [Definition and example `<figcaption>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figcaption) | [Support `<figure>`](https://caniuse.com/mdn-html_elements_figure) - [Support `<figcaption>`](https://caniuse.com/mdn-html_elements_figcaption)
How to config python provider for neovim
Tags: neovim, python, pip
Published: 2021-08-13 06:15:01

先确认Python2和Python3的执行路径：
```
which python
# /usr/bin/python

which python3
# /usr/bin/python
```

修改``~/.config/nvim/init.vim``，增加python运行路径的设置
```
let g:python_host_prog = '/usr/bin/python'
let g:python3_host_prog = '/usr/bin/python3'
```

安装Python2的provider
```
python -m pip install pynvim --user
```

安装Python3的provider
```
python3 -m pip install pynvim --user
```

如果提示pip需要升级，我们就升级一下
```
python3 -m pip install --upgrade pip --user
```

最后，打开nvim，运行``:checkhealth``检查一下，可以看到成功配置的信息：
```
## Python 2 provider (optional)
  - INFO: Using: g:python_host_prog = "/usr/bin/python"
  - INFO: Executable: /usr/bin/python
  - INFO: Python version: 2.7.16
  - INFO: pynvim version: 0.4.3
  - OK: Latest pynvim is installed.

## Python 3 provider (optional)
  - INFO: Using: g:python3_host_prog = "/usr/bin/python3"
  - INFO: Executable: /usr/bin/python3
  - INFO: Python version: 3.8.2
  - INFO: pynvim version: 0.4.3
  - OK: Latest pynvim is installed.
```
Designing Hotel Management System With RADZEN Blazor Web Assembly Part 3 (Setup Of Security Infrastructure)
Tags: webassembly, radzen, csharp, blazor
Published: 2021-08-13 05:03:09

In this video, I show you how to set up the app's security infrastructure. I show you how to create roles and I create a user.

{% youtube TmJagcFw744 %}
MacOS Monterey
Published: 2021-08-13 04:43:54

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/65tkjti96ukx0qvhzqjy.png)

% /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

% echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> /Users/mars/.zprofile
% eval "$(/opt/homebrew/bin/brew shellenv)"

% echo 'export PATH="/Applications/Sublime Text.app/Contents/SharedSupport/bin:$PATH"' >> ~/.zprofile
% subl


#
How would you assign each value from an array to each card,which is a markup?
Tags: javascript, html
Published: 2021-08-13 04:27:55

I am working on my novice portfolio project,but this project turned out to be way difficult and challenging for a newbie coder like me.

Thing is,I have this API games data,each of these games have ID.
I have rendered the html game cards through JavaScript string markup to make it dynamic.problem is I can not assign these data to each cards.how would u suggest it?
Say, 20 interger numbers for 20 dynamically rendered html markup?