??

??? ???? ? ?? ???? ????? ??????? ?? ? ????? ????. ??? ?????? ?? ???? ????? ???? ???? ??? ???? ?? ???? ???????. ????? ??? ?????? ?? ???? ??? ????? ?????, ??? ??? ????, ??? ??? ??? ??? ? ????.
? ????? ?? ??? ?? ?? ????? ??? ????? ? ??? ??? ?????. ?? ??, ?? ?? ? ?? ?? ????? ??? ????? ???????.

????? ???? ???

????? ???? ?? ?? ??? ?????.

• ??? ??: UI? ??? ?? ??? ??? ???? ???? ???? ??? ?? ? ????.
• ?????: ???? ???? ?? ??? ???? ??? ??? ? ?? ????? ? ????.
• ???: ??? ??? ???? ?? ?? ??? ??? ????? ???? ? ???? ??? ??? ?????.
• ??? ???? ???: ??????? ??? ????? ???? ????? ?????.

????? ??? ??

??? ??? ????? ???? ???? ??? ??? ???? ? ??? ???.

• ?? ???: ?? ????? ??? ????? ??????.
• ?? ???: ?? ?? ???? ?? ?? ?? ??? ??????.
• E2E(End-to-End) ???: ??? ???? ??????? ?? ??? ??????.
• ??? ?? ???: UI?? ???? ?? ??? ?? ??
• ?? ???: ?? ? ??????? ???? ???? ?????.

?? ?? ?? ?? ????? ??? ?????

??

??

Jest? Facebook?? ??? JavaScript ??? ?????? ?? React ????????? ?????? ?? JavaScript ????? ??? ? ????.

??

• ?? ??: ?? ?? ?? ?? ??? ? ????.
• ??? ???: ???? ??? ???? ?? ??? ?????.
• ??? ???: ??? ?? ?? ?????? ???? ?????.
• ?? ? ???: ?? ?? ? ??? ?? ??? ???? ????.

?? ?

// sum.js
function sum(a, b) {
  return a + b;
}
module.exports = sum;

// sum.test.js
const sum = require('./sum');

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

?? ??

• React ? ?? JavaScript ?????? ?? ?? ? ?? ???
• ?? ??? ?? ??? ??? ????

??

??

Mocha? Node.js? ?????? ???? ??? ???? ???? ??? ??? ????????.

??

• ?? ??: ???, ?? ? ??? ?? ??? ?????? ?????.
• ??? ???: ??, ??, ???/??? ?????.
• ??? ??: ?? ???? ??? ??? ??? ? ????.

?? ?

// sum.js
function sum(a, b) {
  return a + b;
}
module.exports = sum;

// sum.test.js
const sum = require('./sum');

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

?? ??

??? ??? ??? ??? ????
????? ? ??? ??? ??? ?????.

?? ??

??

Jasmine? ???? ??? ?? JavaScript ??? ????? ?? BDD(?? ?? ??) ????????.

??

• ?? ??? ??: DOM ?? ?? ??? ?? ?????. ??? ??: ??? ??? ?? ??? ?? ??.
• ?? ???: ??? ???? ?? ??? ?????.

?? ?

// test.js
const assert = require('assert');

describe('Array', function () {
  describe('#indexOf()', function () {
    it('should return -1 when value is not present, function () {
      assert.strictEqual([1, 2, 3].indexOf(4), -1);
    });
  });
});

?? ??

• BDD ??? ???? ????? ??????.
• ?? ? ?? ???? ?????.

?

??

Karma? ?? ?????? ???? ????? ??? AngularJS ?? ??? ??? ??????.

??

• ?? ???? ???: ?? ????? ???? ???? ?????.

• ??? ?? ??: CI/CD ?????? ?????.

• ????: ??? ?? ? ????? ? ???? ?????.

?? ?

Karma? Jasmine?? Mocha? ?? ?? ?????? ?? ???? ??? ????.

describe('A suite', function () {
  it('contains a spec with an expectation', function () {
    expect(true).toBe(true);
  });
});

?? ??

• ??? ???? ??? ???? ??? ????
• Angular ???????? ????? ?????.

?????

??

Cypress? ?? ? ????????? ??? ????? ??? ?????? ??? ???? ??? ?????.

??

• ?? ??: ? ??? ???? ?? ?? ????? ??? ? ?? ??? ???.
• ?? ??: ??? ???? ??? ??? ?????.
• ??? ?? ??: ?? ?? ?? ??? ?? ?????.

// karma.conf.js
module.exports = function (config) {
  config.set({
    frameworks: ['jasmine'],
    files: ['*.spec.js'],
    browsers: ['Chrome'],
  });
};

?? ??

• ?? ? ??????? ?? E2E ???
• ??? ??? ????? ????? ? ?????.

???

??

Puppeteer? DevTools ????? ?? Chrome ?? Chromium? ??? ? ?? ?? API? ???? Node.js ????????.

??

• ???? ???? ???: ???? Chrome/Chromium ?????? ??? ??????.
• ???? ? PDF ??: ????? ???? PDF? ?????.
• ?? ?? ? UI ???: ???? ?? ??? ?? ??? ????????.

?? ?

// sum.js
function sum(a, b) {
  return a + b;
}
module.exports = sum;

// sum.test.js
const sum = require('./sum');

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

?? ??

• ???? UI ??? ? ????.
• ?? ??? ? ????

???

??

Playwright? ?? API? Chromium, Firefox ? WebKit ????? ????? ?? Microsoft?? ??? Node.js ????????.

??

• ??? ???? ??: Chromium, Firefox ? WebKit? ??????.
• ?? ??: ??? ???? ?? ??? ??? ??? ???? ?????.
• ???? ??: ???? ???? ???? ?????.

?? ?

// test.js
const assert = require('assert');

describe('Array', function () {
  describe('#indexOf()', function () {
    it('should return -1 when value is not present, function () {
      assert.strictEqual([1, 2, 3].indexOf(4), -1);
    });
  });
});

?? ??

• ??? ???? E2E ???
• ???? ??? ???? ???? ?? ?????? ???

??? ????? ??

??? ????? ??? ????? ?? ?? ??? ?? ????.

?? ? ?? ???? ??:

• Jest: ?? ??? ??? React ? JavaScript ????? ??????.

• Mocha: ???? ??? ?? ??? ?????.

• Jasmine : BDD? ???? ?? ?????.

????? ???? ??:

• Cypress: ??? ?? ?? ??? ?? ?? ? ??????? ?????.
• Playwright: ??? ???? ??? ? ??? ???? ??? ??? ??? ?? ?????.

?? ??????? ??? ???? ???? ??:

• Karma: ??? ??? ??? ?? ?? ?????? ????? ? ? ?????.

???? ??? ? ????? ??:

• Puppeteer: Chromium ?? ????? ??? ??? ?????.

• ???: ??? ???? ???? ??? ?? ?????.

????? ??? ?? ??

• ?? ??: ?? ???? ???? ???? ?????.

• ??? ?? ??: ???? ?? ?? ?? ??? ?????? ? ???.

• ?? ?? ???: ?? ???? ???? ??? ?? ??? ?????.

• ??? ?? ??: ?? ?? ?? ? ??? ?? ???? ????? ?????.

• ?? ?? ???? ??: ?? ??? ??? ??? ????? ? ?????.

• ???? ??? ??: ?? ????? ???? ??? ????? ??????.

• ????? ??? ?? ? ????: ?????? ???? ?? ???? ???? ????? ?????.

??

????? ???? ???? ???? ? ??????? ???? ? ???? ? ? ?????. ?? ?? ????? ??? ??? ?? ??? ???? ??? ????? ??? ?????. ???? ? ?????? ??? ?? ??? ?????? ???? ?? ??? ?? ??? ??? ? ????.

??? ??? ?????? ???? ?? ??? ??? ?? ??? ??? ???? ???? ?????. ? ?? ???? ????? ???? ?? ?? ??? ?? ??? ?? ??? ?? ?? ??? ?????.

? ??? ?? ?? ????? ??? ?????? ?? ?? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!