thiscodeWorks - Organizing the best of code online

<link rel="stylesheet" type="text/css" href="plugin/codemirror/lib/codemirror.css"> <body>	<textarea class="codemirror-textarea"></textarea></body> <script> $(document).ready(function(){    var codeText = $(".codemirror-textarea")[0];    var editor = CodeMirror.fromTextArea(codeText, {        lineNumbers : true    });}); </script> <script type="text/javascript" src="plugin/codemirror/lib/codemirror.js"></script>

#javascript #reac #jest

How to store fetch response in javascript variable - Stack Overflow

async function fun() {  return fetch('https://jsonplaceholder.typicode.com/todos/1').then(res => res.json());} const data  = await fun();

#javascript #reac #jest

simple test example - jest react

test('render h1 element', () => {
  render(<App />);

  screen.debug();

  expect(screen.getByText('Hello World')).toBeInTheDocument();
});

#javascript #jest #test

Jest test dom

test('Check addTodo able add todo to todoList', () => {
  document.body.innerHTML = `
    <input id="newTodoInput" />
    <button id="addTodoBtn">Add todo</button>
    <ol id="todoList"></ol>
  `;
  require('../todolist.js');

  const newTodoInput = document.getElementById('newTodoInput');
  const addTodoBtn = document.getElementById('addTodoBtn');
  const todolist = document.getElementById('todoList');

  newTodoInput.value = 'New todolist!';
  addTodoBtn.click();

  expect(todolist.innerHTML).toBe('<li>New todolist!</li>');
});

#javascript #jest #test

jest test ajax

const APP = (() => {
  var userData = null;
  const myURL = "http://stackoverflow.com";
  const getData = () => {
    $.ajax({
      type: "GET",
      url: myURL,
      success: obj.handleSuccess,
      error: obj.handleError,
    });
  };
  const handleError = () => {
    console.log("ERROR");
  };
  const handleSuccess = (data) => {
    userData = data;
    console.log(userData);
  };
  const render = () => {
    return "<div>some stuff</div>";
  };
  const obj = {
    getData,
    handleError,
    handleSuccess,
    render,
  };
  return obj;
})();
module.exports = APP;


const APP = require("../ajax");
describe("Ajax", () => {
  beforeEach(() => {
    jest.restoreAllMocks();
  });
  it("Data should load", () => {
    const ajaxSpy = jest.spyOn($, "ajax");
    APP.getData();
    expect(ajaxSpy).toBeCalledWith({
      type: "GET",
      url: "http://stackoverflow.com",
      success: expect.any(Function),
      error: expect.any(Function),
    });
  });
  it("should handle success", () => {
    const mUser = { userId: 1 };
    const logSpy = jest.spyOn(console, "log");
    APP.handleSuccess(mUser);
    expect(logSpy).toBeCalledWith(mUser);
  });
  it("should handle error", () => {
    const logSpy = jest.spyOn(console, "log");
    APP.handleError();
    expect(logSpy).toBeCalledWith("ERROR");
  });
});

#typescript #unittest #jest #spyon

Unit test using jest spy and mock implementation

https://kuchbhilearning.blogspot.com/2022/10/unit-test-using-jest-spy-and-mock.html

#javascript #handlebars #jest

Jest Test

// __tests__/helpers.test.js

const { format_date, format_plural } = require('../utils/helpers');


test('format_date() returns a date string', () => {
  const date = new Date('2020-03-20 16:12:03');

  expect(format_date(date)).toBe('3/20/2020');
});

========================

// /utils/helpers.js

module.exports = {
  format_date: (date) => {
    return `${new Date(date).getMonth() + 1}/${new Date(date).getDate()}/${new Date(date).getFullYear()}`;
  },
};

#typescript #jest

.vscode settings.json

{
    "sqltools.connections": [
        {
            "previewLimit": 50,
            "server": "localhost",
            "port": 5432,
            "driver": "PostgreSQL",
            "name": "memo_wall",
            "database": "memo_wall",
            "username": "junowong",
            "password": "gfHK$dgm6501"
        }
    ]
}

#typescript #jest

Jest matchers

test('adds 1 + 2 to equal 3', () => {
    expect(sum(1, 2)).toBe(3);
});

test('object assignment', () => {
  const data = {one: 1};
  data['two'] = 2;
  expect(data).toEqual({one: 1, two: 2});
});

`toBeNull matches only null
toBeUndefined matches only undefined
toBeDefined is the opposite of toBeUndefined
toBeTruthy matches anything that an if statement treats as true
toBeFalsy matches anything that an if statement treats as false`

#typescript #jest

jest init

yarn add --dev jest
yarn add --dev typescript ts-jest @types/jest @types/node ts-node ts-node-dev
yarn ts-jest config:init

#jest #nodejs #testing #puppeteer

Performs E2E testing using puppeteer

test('should verify typed', async () => {
  const browser = await puppeteer.launch({
    headless: false,
    slowMo: 10,
    args: ['--window-size=1920,1080']
  })
  const page = await browser.newPage()
  await page.goto(url)
  await page.type('.input-text', 'Hello World!')

  const finalText = await page.$eval('input.input-text', el => el.textContent)
  expect(finalText).toBe(finalText)
})

#jest #nodejs #testing

Sample Unit Test

const {getIntroduction} = require('./util')

test('should output name and age', () => {
  const text = getIntroduction('Max', 20)
  expect(text).toBe('Max is 20 years old')
})

#jest #nodejs #testing

Declares the test runner and assertion library as jest

"scripts": {
  "test": "jest",
   "start": "node index.js"
},
"devDependencies": {
  "jest": "^26.6.3"
}

#javascript #jest

Testing Asynchronous Code · Jest

test('the data is peanut butter', () => {
  expect.assertions(1);
  return fetchData().then(data => {
    expect(data).toBe('peanut butter');
  });
});

#javascript #jest

Testing Asynchronous Code · Jest

test('the data is peanut butter', done => {
  function callback(data) {
    expect(data).toBe('peanut butter');
    done();
  }

  fetchData(callback);
});

Replace Textarea with Codemirror editor

How to store fetch response in javascript variable - Stack Overflow

simple test example - jest react

Jest test dom

jest test ajax

Unit test using jest spy and mock implementation

Jest Test

.vscode settings.json

Jest matchers

jest init

Performs E2E testing using puppeteer

Sample Unit Test

Declares the test runner and assertion library as jest

Testing Asynchronous Code · Jest

Testing Asynchronous Code · Jest

Save snippets that work with our extensions