menu
Logo
  • Why azing?
  • Blog
  • Help
ENarrow_drop_down
  • DE
  • EN
Suche in Checklisten
search
azing Logo ENarrow_drop_down
  • DE
  • EN
  • Why azing?
  • Help
2sxc
drive_folder_upload
  • homeChecklist Templates
  • south
  • fiber_manual_recordZ: Internal Stuff for the 2sxc-Dev Team
  • south
  • fiber_manual_recordSetup Dev Environment
  • south

folder_sharedJS Automation like Npm, Gulp, Grunt, Webpack

  • homeChecklist Templates
  • south
  • fiber_manual_recordZ: Internal Stuff for the 2sxc-Dev Team
  • south
  • fiber_manual_recordSetup Dev Environment
  • south

folder_sharedJS Automation like Npm, Gulp, Grunt, Webpack

Folders and checklists

  • check_circleGulp - Install Locally or Globally
  • check_circleTypeScript unit testing with Jasmine
  • check_circleTypeScript unit testing with Jasmine for browsers

Parts (0) expand_more

These are small document-parts which are used in other documents. They are not a starting point for any real activity. Because of this, they will be listed further down and the search will not list them unless requested. 

Description

While developing a typescript (TS) application, unit testing is needed. Also, unit tests are written in TS.

Jasmine is the test framework used to test TS code.

When TS applications depend on browser context and use global DOM objects like window or location then unit tests are executed in the browser with jasmine for browsers.

All files with unit tests are in spec folder, with *.spec.ts extension.

The structure of spec folder should be similar to the structure of src folder (where is code).

Jasmin for browsers configuration is in spec\support\jasmine-browser.json.

ES module is natively supported by the browser, so our unit test files should be transpiled from TS to JS as ES module with *.mjs extension.

Spec folder should have additional tsconfig.json configururation for esnext modules nad tsc -w will transpile from TS to JS with js extension.

Node script can change exntesion from js to mjs.

Unit tests are executed with npm test.

Pre req

  • .gitignore, git init; git add .; git commit
  • npm init
  • npm install --save-dev typescript
  • npx tsc --init
  • tsconfig.json
    {"compilerOptions":
    {"target": "esnext",
    "module": "esnext",
    "lib": ["es2016","dom"],
    "allowJs": true,
    "sourceMap": true,
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true
    }
    }
  • npm install --save-dev webpack webpack-cli webpack-dev-server
  • npm install --save-dev ts-loader
  • webpack.config.js
    const path = require('path');
    module.exports = {
        entry: './src/index.ts',
        devtool: 'inline-source-map',
        module: {
            rules: [
                {
                    test: /\.tsx?$/,
                    use: 'ts-loader',
                    exclude: /node_modules/,
                    include: [
                        path.resolve(__dirname, "src")
                    ],
                },
            ],
        },
        resolve: {
            extensions: [ '.tsx', '.ts', '.js' ],
        },
        output: {
            filename: 'bundle.js',
            path: path.resolve(__dirname, 'dist'),
        },
    };
  • add script to package.json
    "build": "npx webpack --config=webpack.config.js"
    npm run build

tsconfig.js for spec folder

{
"compilerOptions": {
  "target": "ESNext",
  "module": "ESNext"
},
"include": [
  "./spec/**/*.ts"
]
}

Jasmine for browsers

  • npm install --save-dev jasmine-browser-runner jasmine-core @types/jasmine
  • jasmine-browser.json
    {  
      "srcDir": "src",
      "srcFiles": [
      ],
      "specDir": ".",
      "specFiles": [
        "spec/**/*.[sS]pec.?(m)js"
      ],
      "helpers": [
        "spec/helpers/**/*.?(m)js"
      ],
      "env": {
        "stopSpecOnExpectationFailure": false,
        "stopOnSpecFailure": false,
        "random": false
      },
      "browser": {
        "name": "firefox"
      }
    }
  • add script to package.json
    "test": "jasmine-browser-runner runSpecs"
    npm test

package.json scripts

  "scripts": {
  "test": "jasmine-browser-runner runSpecs",
  "test:watch": "concurrently -k \"tsc -w\" \"npm run js2mjs:watch\" \"jasmine-browser-runner\"",
  "test:browse": "open-cli http://localhost:8888 --wait -- chrome",
  "js2mjs:watch": "nodemon -e js --watch spec --exec \"npm run js2mjs:run\"",
  "js2mjs:run": "renamer --force --find /\\.js$/ --replace .mjs --path-element ext \"spec/!(support)**/*.*\""
}

More info

https://jasmine.github.io/pages/getting_started.html

 

 

 

 

Logo
Legal | Content Copyright CC-BY 4.0
bug_reportReport Bug
  • info
  • Links
  • Permissions
code Share
code
URL copied to clipboard.
Embed Checklist close
Copy Copy
Content Copyright

CC-BY 4.0

Translations

None

2sxc - Content Management for DNN & Oqtane Logo

2sxc - Content Management for DNN & Oqtane

QR-Code
azing.org/2sxc/r/Kac9gdJg
View & Use

Public (can be used by everybody)

Edit & Admin

Default (all members can edit)

This catalog has a simple permission model, where all members have the same permissions. For advanced permissions, upgrade to Enterprise.

Here you can see how this document is used and linked by other documents

Used in (0)

Others referencing this

Uses these (0)

Documents linked from this document

How it Behaves

How this document is categorized changes how it behaves.

This is a main document, it is listed normally and appears in search result.

Type

This is a Checklist. Lists are converted into checkboxes.

Get something to say?

Comment to start a discussion or make a note
send

please log on to chat

close

Durchsuche ganz Azing