DEV Community: Jay

"Hello World" dotnet core in Mac OSX

Jay — Sun, 01 Aug 2021 13:30:38 +0000

Setting up Development Environment

Install brew

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

Install dotnet-core-sdk and version 3.1.411

brew tap isen-ng/dotnet-sdk-versions
brew install --cask dotnet-sdk3-1-400

Check the dotnet version

dotnet --version

Optional install Visual Studio Code as your editor

brew install --cask visual-studio-code

Create `Hello World` Console application

dotnet new console -o hello-world
cd hello-world
dotnet run

Vite Plugin for Vue 3 testing

Jay — Wed, 07 Oct 2020 10:00:55 +0000

Why need test?

Get an error if we break code
Save time (don't need to test manually)
- It speeds up development because you don’t have to test everything manually after every change.
Integrate into build workflow
Improve your code

Vite is an opinionated web dev build tool that serves your code via native ES Module imports during dev and bundles it with Rollup for production.

Vue-Test-Utils is a utilities for testing Vue components

Getting Started
Adding Test
Create a Vite Plugin

Getting Started

Lets create a folder mkdir vue-testing
cd vue-testing then npm init -y
Install dependencies

 npm install vue@3.0.0
 npm install vite @vue/test-utils@^2.0.0-beta.5 --save-dev

Create ./src/App.vue

 <template>
   <h1>
     Hello world!
   </h1>
 </template>

 <script>
 export default { 
  name: 'App'
 }
 </script>

Create ./src/main.js root director

import {createApp} from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

Add index.html

 <!DOCTYPE html>
 <html lang="en">
 </head>
   <body>
     <div id="app"></div>
     <script type="module" src="./src/main.js"></script>
   </body>
 </html>

Update or Add scripts to your package.json file

  "scripts": {
    "serve": "vite",
    ....
  }

Now we can run our application to make sure everything is working.

npm run serve

Adding Test to your application

Lets create a folder mkdir test
cd test
Create ./test/App.spec.js

import { mount } from '@vue/test-utils'
import App from '../src/App.vue'

 describe('App.spec.js', () => {
  it('renders', () => {
    const wrapper = mount(App, { attachTo: '#root' })
    expect(wrapper.html()).to.contain('Hello')
  })
 })

Create ./test/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue Testing</title>
  <link href="https://unpkg.com/mocha@4.0.1/mocha.css" rel="stylesheet"/>
  <script src="https://unpkg.com/chai@4.1.2/chai.js"></script>
  <script src="https://unpkg.com/mocha@4.0.1/mocha.js"></script>
  <style>
    #meta > * {
      margin: 20px 50px 0 50px;
      font-weight: 200;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    }

    #meta > h1 { font-size: 2em; }
    #meta > h2 { font-size: 1.5em; }

    #root {
      margin: 20px 50px 0 50px;
    }
  </style>
  <script>
    mocha.setup('bdd')
    window.expect = chai.expect
  </script>
</head>
<body>
  <div id="meta">
    <h2>Mocha HTML Reporter</h2>
    <div>
      <div id="mocha" style="margin: 0;"></div>
    </div>
  </div>

</body>
</html>

Add setup

  beforeEach(() => {
    delete window["__VUE_DEVTOOLS_TOAST__"]

    const existingRoot = document.getElementById('root')
    if (existingRoot) {
      existingRoot.innerHTML = ''
      return
    }
    const root = document.createElement('div')
    root.id = 'root'
    document.body.appendChild(root)
  })

  afterEach(() => {
    document.getElementById('root').remove()
  })

Load all spec or test files

import('./test/App.spec.js').then(() => {
  mocha.setup({ reporter: 'html' })
  mocha.checkLeaks()
  mocha.run()
})

Run the test

npm run serve

Go to http://localhost:3000/test
Open the browser console, you will have expected error, vite can only process es module, and @babel/parser is commonjs module
Vite under the hood uses rollup to build Single File Component SFC, so lets use rollup to convert @babel/parser to es module
Create a file ./tools/babel-parser.js

export { parse } from '@babel/parser'

Create rollup.config.js

import resolve from '@rollup/plugin-node-resolve'
import commonjs from '@rollup/plugin-commonjs'

export default {
  input: './tools/babel-parser.js',
  plugins: [  commonjs(), resolve() ],
  output: {
    file: './node_modules/@babel/parser/index.js',
    format: 'es',
    sourcemap: true
  }
}

Also create vite.config.js to create alias for @babel/parser and to use it later

export default {
  alias: {
    '@babel/parser': '@babel/parser/index.js'
  }
}

Add npm script to run the rollup

 "scripts": {
    ...
    "optimize": "rollup -c"
  },

Run npm run optimize and npm run serve

Create a Vite Plugin

Create file ./tools/testPlugin.js

import Router from 'koa-router'
import fs from 'aria-fs'

function getTestFiles() {
  const router = new Router()

  return ({ app }) => {

    router.get('/test-files', async (ctx, next) => {
      ctx.body = await fs.globFiles(`./test/**/*.spec.js`, true)
      await next()
    })

    app.use(router.routes())
  }
}

export default function testPlugin() {
  return {
    configureServer: [ getTestFiles() ]
  }
}

Install dependencies

npm install koa-router aria-fs --save-dev

Update vite.config.js

import testPlugin from './tools/testPlugin'

export default {
  alias: {
    '@babel/parser': '@babel/parser/index.js'
  },
  plugins: [ testPlugin() ]
}

Update script in ./test/index.html

(async function() {

  beforeEach(() => {
    delete window["__VUE_DEVTOOLS_TOAST__"]

    const existingRoot = document.getElementById('root')
    if (existingRoot) {
      existingRoot.innerHTML = ''
      return
    }
    const root = document.createElement('div')
    root.id = 'root'
    document.body.appendChild(root)
  })

  afterEach(() => {
    document.getElementById('root').remove()
  })

  const response = await fetch('/test-files')
  const files = await response.json()

  await Promise.all(files.map(file => import(file)))

  mocha.setup({ reporter: 'html' })
  mocha.checkLeaks()
  mocha.run()
})()

Let's add another test Button increment, file ./src/Button.vue

<template>
  <div>
    <p>Times clicked: {{ count }}</p>
    <button @click="increment">increment</button>
  </div>
</template>

<script>
  export default {
    name: 'Button',
    data: () => ({
      count: 0,
    }),
    methods: {
      increment() {
        this.count++
      },
    },
  }
</script>

And test for our Button, ./tools/Button.spec.js

import { mount } from '@vue/test-utils'
import Button from '../src/Button.vue'

 describe('Button.spec.js', () => {
  it('increments value on click', async () => {
    const wrapper = mount(Button, { attachTo: '#root' })
    const button = wrapper.find('button')

    await button.trigger('click')
    expect(wrapper.find('p').html()).to.contain('Times clicked: 1')
  })
 })

Run npm run serve and go to http://localhost:3000/test

Nix as development environment

Jay — Sun, 16 Aug 2020 05:33:33 +0000

Nix is a purely functional package manager. It is alternative to homebrew in MacOS, every folder has its own environment with the help of direnv, you can install any version of package on folder base.

Getting Started
Create nix config .envrc and default.nix
"Hello World" Node API with Nix

Getting Started

Install Nix

 sh \
  <(curl -L https://nixos.org/nix/install) \
  --darwin-use-unencrypted-nix-store-volume

NOTE: this are for who have intel MacBook
Add nix profile in your favorite shell config
- ~/.zshrc or ~/.bashrc - create if file not exist

   . /Users/<your-user-name>/.nix-profile/etc/profile.d/nix.sh
   source $HOME/.nix-profile/etc/profile.d/nix.sh
   export NIX_PATH="nixpkgs=$HOME/.nix-defexpr/channels/nixpkgs"

Close your terminal to reload ~/.zshrc or ~/.bashrc file
For M1 or arm MacBook please see

 https://nix.dev/tutorials/install-nix

Open new terminal, then type:

 nix-env --version

Update all the channels link

nix-channel --update

Install direnv
- is an extension for your shell. It augments existing shells with a new feature that can load and unload environment variables depending on the current directory.

nix-env -i direnv

Add direnv hook to shell config Please see more...

eval "$(direnv hook zsh)"

How to create your first rollup plugin

Jay — Mon, 01 Jun 2020 11:13:54 +0000

Rollup is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library or application

Getting Started

Create copyFile function
- name is the name of your plugin
- targets array of src and dest
- hook it is buildEnd (execute after bundling) or buildStart (execute before bundling)

const copyFile = (options = {}) => {
  const { targets = [], hook = 'buildEnd' } = options
  return {
    name: 'copy-file',
    [hook]: async() => {

    }
  }
}

Copy file implementations
- Lets add dependencies and add some codes
- Since targets is array let's loop thru each target
- when target.dest is not exist create the directory
- then copy and override the file if exist
- now we can exports our copyFile plugin

  const { basename, join } = require('path')
  const fs = require('fs/promises')

    ...
    [hook]: () => {
      targets.forEach(async target => {
        await fs.mkdir(target.dest, { recursive: true })

        const destPath = join(target.dest, basename(target.src))
        await fs.copyFile(target.src, destPath)
      })
    }
    ...

   module.exports = copyFile

Create rollup.config.js and use our copyFile plugin

const copyFile = require('./plugin')

export default {
  input: './src/index.js',
  plugins: [
    copyFile({
      targets: [
        { src: './index.html', dest: 'dist' }
      ]
    })
  ],
  output: {
    file: './dist/index.js',
    format: 'es'
  }
}

Headless Testing with Vite + Vue-Test-Utils

Jay — Mon, 01 Jun 2020 01:30:59 +0000

Vite is an opinionated web dev build tool that serves your code via native ES Module imports during dev and bundles it with Rollup for production.

Vue-Test-Utils is a utilities for testing Vue components

Aria-Vue is a testing tool for Vue components, it can run your test in headless or browser mode

Getting Started
Adding Test

Getting Started

Lets create a folder mkdir vue-testing
cd vue-testing then npm init -y
Install dependencies

 npm install vue@3.0.0
 npm install vite @vue/compiler-sfc@3.0.0 --save-dev

Create ./src/App.vue

 <template>
   <p>
     Hello world!
   </p>
 </template>

 <script>
 export default { }
 </script>

 <style scoped>
 h1, p {
   font-family: Arial, Helvetica, sans-serif;
 }
 </style>

Create ./src/main.js root director

import {createApp} from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

Add index.html

 <!DOCTYPE html>
 <html lang="en">
 </head>
   <body>
     <h1>⚡️ Vite Component Test Starter</h1>
     <div id="app"></div>
     <script type="module" src="./src/main.js"></script>
   </body>
 </html>

Update or Add scripts to your package.json file

  "scripts": {
    "serve": "vite",
    ....
  }

Now we can run our application to make sure everything is working.

npm run serve

Adding Test to your application

Install dependencies

  npm i --save-dev @vue/test-utils@2.0.0-beta.5 aria-vue aria-mocha puppeteer

Let's create test file ./test/App.spec.js

 import {mount} from '@vue/test-utils'
 import App from '../src/App.vue'

 describe('App.spec.js', () => {
  it('renders', async () => {
    const wrapper = mount(App, { attachTo: '#root' })
    expect(wrapper.html()).to.contain('Hello')
  })
 })

Update or add scripts to your package.json file
- -w option is to watch your src and test folder, then re-run the test
- -H option is to run your test in headless mode

 "scripts": {
    "serve": "vite",
    "test": "aria-vue -w -H"
  },

Now we can run our test in headless mode

npm test

DEV Community: Jay

"Hello World" dotnet core in Mac OSX

Setting up Development Environment

Create `Hello World` Console application

Vite Plugin for Vue 3 testing

Why need test?

Table Of Contents

Getting Started

Adding Test to your application

Create a Vite Plugin

Nix as development environment

Table Of Contents

Getting Started

How to create your first rollup plugin

Getting Started

Headless Testing with Vite + Vue-Test-Utils

Table Of Contents

Getting Started

Adding Test to your application

DEV Community: Jay

"Hello World" dotnet core in Mac OSX

Setting up Development Environment

Create Hello World Console application

Vite Plugin for Vue 3 testing

Why need test?

Table Of Contents

Getting Started

Adding Test to your application

Create a Vite Plugin

Nix as development environment

Table Of Contents

Getting Started

How to create your first rollup plugin

Getting Started

Headless Testing with Vite + Vue-Test-Utils

Table Of Contents

Getting Started

Adding Test to your application

Create `Hello World` Console application