{"id":342880,"date":"2022-12-19T15:01:32","date_gmt":"2022-12-19T15:01:32","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=342880"},"modified":"-0001-11-30T00:00:00","modified_gmt":"2022-12-19T15:01:32","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=342880","title":{"rendered":"<span>\u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0438 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 Drag and Drop. \u0427\u0430\u0441\u0442\u044c 2 \u2014 \u0422\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435<\/span>"},"content":{"rendered":"<div><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<h2>\u041f\u0440\u0435\u0434\u0438\u0441\u043b\u043e\u0432\u0438\u0435.<\/h2>\n<p>\u0412 <a href=\"https:\/\/habr.com\/ru\/post\/704604\/\" rel=\"noopener noreferrer nofollow\">\u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439 \u0441\u0442\u0430\u0442\u044c\u0435<\/a> \u0432\u044b \u0443\u0437\u043d\u0430\u043b\u0438, \u043a\u0430\u043a \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u0443\u043f\u043e\u0440\u044f\u0434\u043e\u0447\u0438\u0432\u0430\u0435\u043c\u044b\u0435 drag-and-drop \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u0442\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u0438\u0448\u043b\u043e \u0432\u0440\u0435\u043c\u044f \u0438\u0445 \u043f\u0440\u043e\u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c. \u0412 \u044d\u0442\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u0432\u044b \u043f\u043e\u043a\u0440\u043e\u0435\u0442\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u044e\u043d\u0438\u0442 \u0442\u0435\u0441\u0442\u0430\u043c\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e BDD \u043f\u043e\u0434\u0445\u043e\u0434\u0430. \u042f \u043d\u0435 \u0431\u0443\u0434\u0443 \u043f\u044b\u0442\u0430\u0442\u044c\u0441\u044f \u0434\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u043f\u043e\u043b\u0435\u0437\u043d\u043e\u0441\u0442\u044c \u0438\u043b\u0438 \u0431\u0435\u0441\u043f\u043e\u043b\u0435\u0437\u043d\u043e\u0441\u0442\u044c \u044e\u043d\u0438\u0442 \u0442\u0435\u0441\u0442\u043e\u0432 \u0432 \u0432\u0430\u0448\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445, \u043e\u043a\u043e\u043d\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0432\u0430\u0441, \u044f \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0430\u0443\u0447\u0443 \u0432\u0430\u0441, \u043a\u0430\u043a \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u0442\u044c. \u0415\u0441\u043b\u0438 \u0432\u044b \u0435\u0449\u0451 \u043d\u0435 \u0437\u043d\u0430\u043a\u043e\u043c\u044b \u0441 \u044e\u043d\u0438\u0442 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u043c, \u0438 \u0447\u0442\u043e \u044d\u0442\u043e \u0442\u0430\u043a\u043e\u0435, \u043d\u0435 \u0442\u043e\u0440\u043e\u043f\u0438\u0442\u0435\u0441\u044c, \u043d\u0430\u0439\u0434\u0438\u0442\u0435 \u0438 \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0439\u0442\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0430\u0442\u0435\u0439, \u0447\u0442\u043e\u0431\u044b \u0438\u043c\u0435\u0442\u044c \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u044d\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u0438 \u043a\u0430\u043a \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442.<\/p>\n<p><strong>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438:<\/strong><\/p>\n<ol>\n<li>\n<p><a href=\"https:\/\/testing-library.com\/\" rel=\"noopener noreferrer nofollow\"><u>React Testing Library<\/u><\/a>.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/cucumber.io\/\" rel=\"noopener noreferrer nofollow\"><u>Cucumber<\/u><\/a>.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/jestjs.io\/\" rel=\"noopener noreferrer nofollow\"><u>Jest<\/u><\/a>\u00a0&amp;\u00a0<a href=\"https:\/\/github.com\/bencompton\/jest-cucumber\" rel=\"noopener noreferrer nofollow\"><u>Jest Cucumber<\/u><\/a>.<\/p>\n<\/li>\n<\/ol>\n<p><strong>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435<\/strong>:<\/p>\n<p>\u0425\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0431\u044b \u043e\u0431\u044a\u044f\u0441\u043d\u0438\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0442\u0435\u0440\u043c\u0438\u043d\u043e\u0432, \u0442\u0430\u043a \u043a\u0430\u043a \u043e\u043d\u0438 \u043c\u043e\u0433\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u0447\u0438\u0441\u0442\u043e\u043c \u0432\u0438\u0434\u0435:<\/p>\n<p><code>drag<\/code>\u00a0&#8212; \u0422\u0430\u0449\u0438\u0442\u044c, \u043f\u0435\u0440\u0435\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u0442\u044c. \u0422\u043e \u0435\u0441\u0442\u044c \u044d\u0442\u043e \u043f\u0435\u0440\u0435\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u0435\u043c\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u0447\u0442\u043e-\u0442\u043e, \u0447\u0442\u043e \u0432\u044b \u043f\u0435\u0440\u0435\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u0435\u0442\u0435 \u0438\u0437 \u043e\u0434\u043d\u043e\u0433\u043e \u043c\u0435\u0441\u0442\u0430 \u0432 \u0434\u0440\u0443\u0433\u043e\u0435.<\/p>\n<p><code>drop<\/code>\u00a0&#8212; \u0411\u0440\u043e\u0441\u0438\u0442\u044c, \u043f\u0430\u0434\u0435\u043d\u0438\u0435. \u042d\u0442\u043e \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u043a\u0443\u0434\u0430 \u043f\u0435\u0440\u0435\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u0435\u043c\u044b\u0439 (drag) \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0437\u043c\u0435\u0449\u0451\u043d. \u0422\u043e \u0435\u0441\u0442\u044c \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u043f\u0435\u0440\u0435\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u043d\u0438\u044f\/\u043f\u0430\u0434\u0435\u043d\u0438\u044f.<\/p>\n<h2>\u041f\u043e\u0434\u0445\u043e\u0434 Cucumber \u0438  BDD.<\/h2>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u0443\u0436\u0435 \u0437\u043d\u0430\u043a\u043e\u043c\u044b \u0441 \u043f\u043e\u0434\u0445\u043e\u0434\u043e\u043c Cucumber \u0438 BDD, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u043c\u0435\u043b\u043e \u043f\u0440\u043e\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u044d\u0442\u043e\u0442 \u0440\u0430\u0437\u0434\u0435\u043b \u0438 \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043a \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c\u0443.<\/p>\n<h4>\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 BDD?<\/h4>\n<p>\u041f\u0440\u043e\u0441\u0442\u044b\u043c\u0438 \u0441\u043b\u043e\u0432\u0430\u043c\u0438, \u044d\u0442\u043e:<\/p>\n<blockquote>\n<p>Behavior-driven development (BDD) &#8212; \u044d\u0442\u043e \u043c\u0435\u0442\u043e\u0434\u043e\u043b\u043e\u0433\u0438\u044f \u0432 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0430\u044f \u043e\u043f\u0438\u0441\u0430\u0442\u044c \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0430 \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u043e\u043c \u0438 \u0447\u0435\u043b\u043e\u0432\u0435\u043a\u043e\u0447\u0438\u0442\u0430\u0435\u043c\u043e\u043c \u044f\u0437\u044b\u043a\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043d\u044f\u0442\u0435\u043d \u0432\u0441\u0435\u043c \u0447\u043b\u0435\u043d\u0430\u043c \u043a\u043e\u043c\u0430\u043d\u0434\u044b. \u0418\u0434\u0435\u044f \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 \u043a\u0430\u043a\u043e\u0435 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u043e\u0436\u0438\u0434\u0430\u0435\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043f\u0440\u0438 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0438 \u0441 \u043d\u0438\u043c.<\/p>\n<\/blockquote>\n<p>\u0412\u043e\u0442 \u043a\u0430\u043a Cucumber \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442, <a href=\"https:\/\/cucumber.io\/docs\/bdd\/\" rel=\"noopener noreferrer nofollow\">\u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0435 BDD<\/a>:<\/p>\n<blockquote>\n<p>BDD &#8212; \u044d\u0442\u043e \u0441\u043f\u043e\u0441\u043e\u0431 \u0440\u0430\u0431\u043e\u0442\u044b \u043a\u043e\u043c\u0430\u043d\u0434 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u043e\u0433\u043e \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0443\u0441\u0442\u0440\u0430\u043d\u044f\u0435\u0442 \u043f\u0440\u043e\u0431\u0435\u043b\u044b \u043c\u0435\u0436\u0434\u0443 \u0431\u0438\u0437\u043d\u0435\u0441\u043e\u043c \u0438 \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438\u043c\u0438 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0441\u0442\u0430\u043c\u0438:<\/p>\n<p> \u2022 \u041f\u043e\u043e\u0449\u0440\u0435\u043d\u0438\u0435 \u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u043c\u0435\u0436\u0434\u0443 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u043c\u0438 \u0440\u043e\u043b\u044f\u043c\u0438 \u0434\u043b\u044f \u0434\u043e\u0441\u0442\u0438\u0436\u0435\u043d\u0438\u044f \u043e\u0431\u0449\u0435\u0433\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0440\u0435\u0448\u0438\u0442\u044c<\/p>\n<p>\u2022 \u0420\u0430\u0431\u043e\u0442\u0430 \u0432 \u0431\u044b\u0441\u0442\u0440\u044b\u0445, \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u0438\u0442\u0435\u0440\u0430\u0446\u0438\u044f\u0445 \u0434\u043b\u044f \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u044f \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0439 \u0441\u0432\u044f\u0437\u0438 \u0438 \u043f\u043e\u0442\u043e\u043a\u0430 \u0446\u0435\u043d\u043d\u043e\u0441\u0442\u0435\u0439<\/p>\n<p>\u2022 \u041f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u043e \u0441\u0438\u0441\u0442\u0435\u043c\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0441\u0432\u0435\u0440\u044f\u0435\u0442\u0441\u044f \u0441 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435\u043c \u0441\u0438\u0441\u0442\u0435\u043c\u044b<\/p>\n<p>\u041c\u044b \u0434\u0435\u043b\u0430\u0435\u043c \u044d\u0442\u043e, \u043a\u043e\u043d\u0446\u0435\u043d\u0442\u0440\u0438\u0440\u0443\u044f \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u0443\u044e \u0440\u0430\u0431\u043e\u0442\u0443 \u043d\u0430 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0445, \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0445 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0438\u0440\u0443\u044e\u0442, \u043a\u0430\u043a \u043c\u044b \u0445\u043e\u0442\u0438\u043c, \u0447\u0442\u043e\u0431\u044b \u0441\u0435\u0431\u044f \u0432\u0435\u043b\u0430 \u0441\u0438\u0441\u0442\u0435\u043c\u0430. \u041c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u044d\u0442\u0438 \u043f\u0440\u0438\u043c\u0435\u0440\u044b, \u0447\u0442\u043e\u0431\u044b \u0432\u0435\u0441\u0442\u0438 \u043d\u0430\u0441 \u043e\u0442 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0438 \u0434\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438, \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u043d\u0435\u043f\u0440\u0435\u0440\u044b\u0432\u043d\u043e\u0433\u043e \u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u0447\u0435\u0441\u0442\u0432\u0430.<\/p>\n<\/blockquote>\n<p>\u0414\u043b\u044f \u043f\u043e\u043b\u043d\u043e\u0433\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u044f \u043d\u0435 \u0441\u0442\u0435\u0441\u043d\u044f\u0439\u0442\u0435\u0441\u044c \u0447\u0438\u0442\u0430\u0442\u044c \u043e\u0431\u044a\u044f\u0441\u043d\u0435\u043d\u0438\u044f \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 Cucumber \u0438\u043b\u0438 \u043f\u043e\u0433\u0443\u0433\u043b\u0438\u0442\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0430\u0442\u0435\u0439, \u043e\u0431\u044a\u044f\u0441\u043d\u044f\u044e\u0449\u0438\u0445 \u044d\u0442\u0443 \u0442\u0435\u043c\u0443.<\/p>\n<h2>\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 Cucumber?<\/h2>\n<p>\u0421\u043e\u0433\u043b\u0430\u0441\u043d\u043e <a href=\"https:\/\/cucumber.io\/docs\/guides\/overview\/\" rel=\"noopener noreferrer nofollow\">\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 Cucumber<\/a>:<\/p>\n<blockquote>\n<p>Cucumber \u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u043d\u044f\u0435\u043c\u044b\u0435 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438, \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0435 \u043e\u0431\u044b\u0447\u043d\u044b\u043c \u0442\u0435\u043a\u0441\u0442\u043e\u043c, \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442, \u0447\u0442\u043e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u043e\u0435 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0435\u043d\u0438\u0435 \u0434\u0435\u043b\u0430\u0435\u0442 \u0442\u043e, \u043e \u0447\u0435\u043c \u0433\u043e\u0432\u043e\u0440\u0438\u0442\u0441\u044f \u0432 \u044d\u0442\u0438\u0445 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f\u0445. \u0421\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u0442 \u0438\u0437 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432, \u0438\u043b\u0438 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0435\u0432. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<p><code>Scenario: Breaker guesses a word<br \/>Given the Maker has chosen a word<br \/>When the Breaker makes a guess<br \/>Then the Maker is asked to score<\/code><\/p>\n<p>\u041a\u0430\u0436\u0434\u044b\u0439 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0439 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u0448\u0430\u0433\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u043e\u043b\u0436\u0435\u043d \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c Cucumber. Cucumber \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0435 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u043e\u0433\u043e \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0435\u043d\u0438\u044f \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u0438 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 \u043e\u0442\u0447\u0435\u0442 \u0441 \u0443\u043a\u0430\u0437\u0430\u043d\u0438\u0435\u043c \u2705 \u0443\u0441\u043f\u0435\u0445\u0430 \u0438\u043b\u0438 \u274c \u043d\u0435\u0443\u0434\u0430\u0447\u0438 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u044f.<\/p>\n<\/blockquote>\n<p>\u0414\u0443\u043c\u0430\u044e, \u0442\u0435\u043f\u0435\u0440\u044c \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u043f\u043e\u0432\u0435\u0440\u0445\u043d\u043e\u0441\u0442\u043d\u043e\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u0438 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u0442\u044c \u0434\u0430\u043b\u044c\u0448\u0435, \u043d\u043e \u0432 \u043b\u044e\u0431\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u044f \u043e\u0431\u044a\u044f\u0441\u043d\u044e \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0448\u0430\u0433 \u0437\u0430 \u0448\u0430\u0433\u043e\u043c.<\/p>\n<h2>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439.<\/h2>\n<h4>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439.<\/h4>\n<p>\u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432, \u0441\u0442\u0430\u0442\u0435\u0439 \u0438 \u043b\u0443\u0447\u0448\u0438\u0445 \u043f\u0440\u0430\u043a\u0442\u0438\u043a \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u044e\u043d\u0438\u0442 \u0442\u0435\u0441\u0442\u044b, \u0438 \u043e\u0431\u044a\u044f\u0441\u043d\u0435\u043d\u0438\u0435 \u044d\u0442\u043e\u0433\u043e \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0439 (\u0430 \u043c\u043e\u0436\u0435\u0442 \u0438 \u043d\u0435 \u043e\u0434\u043d\u043e\u0439) \u0441\u0442\u0430\u0442\u044c\u0438. \u041c\u043e\u044f \u0436\u0435 \u0446\u0435\u043b\u044c \u0437\u0434\u0435\u0441\u044c &#8212; \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u0437\u043d\u0430\u043d\u0438\u044f \u043e \u044e\u043d\u0438\u0442 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Cucumber \u0438 \u043e\u0445\u0432\u0430\u0442\u0438\u0442\u044c \u043e\u0441\u043d\u043e\u0432\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0432\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0438 \u0432 \u043f\u0440\u043e\u0448\u043b\u043e\u0439 \u0447\u0430\u0441\u0442\u0438. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432\u0441\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u0438 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 \u0431\u0443\u0434\u0443\u0442 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u044b\u043c\u0438 \u0438 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u043c\u0438 \u0434\u043b\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0442\u0435\u0441\u0442\u043e\u0432.<br \/> \u0412\u043e\u0442 \u0441\u043f\u0438\u0441\u043e\u043a \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0445 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 \u0438 dev-\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u044b \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u043d\u0430\u0439\u0442\u0438 \u0432 \u0444\u0430\u0439\u043b\u0435 <a href=\"https:\/\/github.com\/WOLFRIEND\/multiple-drag-n-drop\/blob\/master\/package.json\" rel=\"noopener noreferrer nofollow\">package.json<\/a>:<\/p>\n<p><strong>devDependencies.<\/strong><br \/><code>File: package.json<\/code><\/p>\n<pre><code class=\"javascript\">\/\/ Omitted pieces of code. \"@testing-library\/jest-dom\" \"@testing-library\/react\" \"@testing-library\/user-event\" \"@types\/jest\" \"cross-env\" \"jest-circus\" \"jest-cucumber\" \"jest-watch-typeahead\" \"react-test-renderer\" \/\/ Omitted pieces of code.<\/code><\/pre>\n<p>\u041d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0437 \u043d\u0438\u0445 \u0431\u0443\u0434\u0443\u0442 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u044b \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <a href=\"https:\/\/create-react-app.dev\/\" rel=\"noopener noreferrer nofollow\">Create React App<\/a>, \u0430 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0432\u044b \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0435 \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e.<\/p>\n<h4>\u041a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f.<\/h4>\n<p>\u0421\u0430\u043c\u044b\u0439 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0438 \u0431\u044b\u0441\u0442\u0440\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c Jest &#8212; \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u043a\u043b\u044e\u0447 <code>jest<\/code> \u0432 \u0444\u0430\u0439\u043b\u0435 <code>package.json<\/code>. \u041d\u0430\u043c \u043d\u0443\u0436\u043d\u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u043d\u0430 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043a\u0430\u0441\u0430\u0435\u0442\u0441\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 <a href=\"https:\/\/react-dnd.github.io\/react-dnd\/about\" rel=\"noopener noreferrer nofollow\">React DnD<\/a>, \u044d\u0442\u043e <a href=\"https:\/\/jestjs.io\/docs\/configuration#transformignorepatterns-arraystring\" rel=\"noopener noreferrer nofollow\">transformIgnorePatterns<\/a>:<\/p>\n<p><code>File: package.json<\/code><\/p>\n<pre><code class=\"javascript\">\/\/ Omitted pieces of code. \"jest\": {  \"transformIgnorePatterns\": [    \"node_modules\/(?!react-dnd)\/\"  ] } \/\/ Omitted pieces of code.<\/code><\/pre>\n<p>\u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0432 React \u0443\u0436\u0435 \u0435\u0441\u0442\u044c \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u0434\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0442\u0435\u0441\u0442\u043e\u0432, \u043d\u043e \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0435\u0435, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0430 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<pre><code class=\"javascript\">\/\/ Omitted pieces of code. \"test\": \"cross-env RTL_SKIP_AUTO_CLEANUP=true react-scripts test\", \/\/ Omitted pieces of code.<\/code><\/pre>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 <a href=\"https:\/\/github.com\/kentcdodds\/cross-env\" rel=\"noopener noreferrer nofollow\">cross-env<\/a>, \u0432\u044b \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435 <code>React Testing Library<\/code> \u043f\u0440\u043e\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u043e\u0447\u0438\u0441\u0442\u043a\u0443 \u043f\u043e\u0441\u043b\u0435 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0442\u0435\u0441\u0442\u0430. \u0411\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0430\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u0438 \u0441\u043f\u043e\u0441\u043e\u0431\u044b \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0437\u0434\u0435\u0441\u044c: <a href=\"https:\/\/testing-library.com\/docs\/react-testing-library\/setup\/#skipping-auto-cleanup\" rel=\"noopener noreferrer nofollow\">Skipping Auto Cleanup<\/a>.<br \/>\u0422\u0435\u043f\u0435\u0440\u044c \u0432\u0430\u0448\u0435\u0439 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0447\u0430\u0442\u044c \u043f\u0438\u0441\u0430\u0442\u044c \u0442\u0435\u0441\u0442\u044b, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u043c.<\/p>\n<h2>\u041d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0435 Feature File &#8212; \u0421\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f.<\/h2>\n<p>\u0427\u0442\u043e\u0431\u044b Cucumber \u0441\u043c\u043e\u0433 \u043f\u043e\u043d\u044f\u0442\u044c \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0438, \u043e\u043d\u0438 \u0434\u043e\u043b\u0436\u043d\u044b \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u043c \u043f\u0440\u0430\u0432\u0438\u043b\u0430\u043c \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0430, \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u043c\u044b\u043c <a href=\"https:\/\/cucumber.io\/docs\/gherkin\/\" rel=\"noopener noreferrer nofollow\">Gherkin<\/a>. \u0414\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u044b Gherkin \u0445\u0440\u0430\u043d\u044f\u0442\u0441\u044f \u0432 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0445 \u0444\u0430\u0439\u043b\u0430\u0445 <code>*.feature<\/code> \u0438 \u043e\u0431\u044b\u0447\u043d\u043e \u0432\u0435\u0440\u0441\u0438\u043e\u043d\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0432 \u0441\u0438\u0441\u0442\u0435\u043c\u0435 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044f \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430 \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u044b\u043c \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0435\u043d\u0438\u0435\u043c. \u0417\u0430 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0435\u0439 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c\u0441\u044f \u043a <a href=\"https:\/\/cucumber.io\/docs\/guides\/overview\/#what-is-gherkin\" rel=\"noopener noreferrer nofollow\">\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438<\/a>, \u043d\u043e \u043f\u0440\u043e\u0449\u0435 \u0432\u0441\u0435\u0433\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u044d\u0442\u043e \u043d\u0430 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435.<br \/>\u0421\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u0444\u0430\u0439\u043b <code>Container.feature<\/code> \u043d\u0430 \u043e\u0434\u043d\u043e\u043c \u0443\u0440\u043e\u0432\u043d\u0435 \u0441 \u0444\u0430\u0439\u043b\u043e\u043c <code>Container.tsx<\/code>. \u042d\u0442\u043e\u0442 \u0444\u0430\u0439\u043b \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u0441\u0435\u043a\u0446\u0438\u0439, \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0449\u0438\u0445\u0441\u044f \u0441 <a href=\"https:\/\/cucumber.io\/docs\/gherkin\/reference\/?sbsearch=keyword#keywords\" rel=\"noopener noreferrer nofollow\">\u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0445 \u0441\u043b\u043e\u0432<\/a>.<\/p>\n<p><a href=\"https:\/\/cucumber.io\/docs\/gherkin\/reference\/?sbsearch=keyword#feature\" rel=\"noopener noreferrer nofollow\"><strong><u>Feature<\/u><\/strong><\/a><strong>.<\/strong><\/p>\n<blockquote>\n<p>\u041d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0433\u043e \u0441\u043b\u043e\u0432\u0430 Feature &#8212; \u0434\u0430\u0442\u044c \u043f\u043e\u0432\u0435\u0440\u0445\u043d\u043e\u0441\u0442\u043d\u043e\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0438 \u0441\u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0435 \u0441 \u043d\u0435\u0439 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0438. \u041f\u0435\u0440\u0432\u044b\u043c \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u043c \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u043c \u0441\u043b\u043e\u0432\u043e\u043c \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0435 Gherkin \u0432\u0441\u0435\u0433\u0434\u0430 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c Feature, \u0437\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u0441\u043b\u0435\u0434\u0443\u0435\u0442 : \u043a\u043e\u0440\u043e\u0442\u043a\u0438\u0439 \u0442\u0435\u043a\u0441\u0442, \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0449\u0438\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u044e.<\/p>\n<\/blockquote>\n<p>\u0412 \u0432\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0432\u044b \u0431\u0443\u0434\u0435\u0442\u0435 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c drag-and-drop, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0443\u0441\u043b\u043e\u0436\u043d\u044f\u0442\u044c, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043d\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u043a\u0430\u043a \u0435\u0441\u0442\u044c:<\/p>\n<p><code>File: src\/components\/Container\/Container.feature<\/code><\/p>\n<pre><code class=\"javascript\">\/\/ Omitted pieces of code. Feature: Drag and Drop \/\/ Omitted pieces of code.<\/code><\/pre>\n<p><a href=\"https:\/\/cucumber.io\/docs\/gherkin\/reference\/?sbsearch=keyword#rule\" rel=\"noopener noreferrer nofollow\"><strong><u>Rule<\/u><\/strong><\/a><strong>.<\/strong><\/p>\n<blockquote>\n<p>\u041a\u043b\u044e\u0447\u0435\u0432\u043e\u0435 \u0441\u043b\u043e\u0432\u043e Rule \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u043e \u0434\u043b\u044f \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043e\u0434\u043d\u043e\u0433\u043e \u0431\u0438\u0437\u043d\u0435\u0441-\u043f\u0440\u0430\u0432\u0438\u043b\u0430, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043e. \u041e\u043d\u043e \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u0434\u043b\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0430. Rule \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0435\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0442\u043d\u043e\u0441\u044f\u0442\u0441\u044f \u043a \u0434\u0430\u043d\u043d\u043e\u043c\u0443 \u0431\u0438\u0437\u043d\u0435\u0441-\u043f\u0440\u0430\u0432\u0438\u043b\u0443. Rule \u0434\u043e\u043b\u0436\u043d\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u043e\u0434\u0438\u043d \u0438\u043b\u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0435\u0432, \u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0438\u0440\u0443\u044e\u0449\u0438\u0445 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u043e.<\/p>\n<\/blockquote>\n<p>\u0425\u043e\u0442\u044f \u044d\u0442\u043e \u0441\u043b\u043e\u0432\u043e \u043d\u0435\u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0432\u043a\u043b\u044e\u0447\u0438\u043c \u0432 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443.<\/p>\n<p><code>File: src\/components\/Container\/Container.feature<\/code><\/p>\n<pre><code class=\"javascript\">\/\/ Omitted pieces of code. Rule: Check drag and drop behavior \/\/ Omitted pieces of code.<\/code><\/pre>\n<p><a href=\"https:\/\/cucumber.io\/docs\/gherkin\/reference\/#examples\" rel=\"noopener noreferrer nofollow\"><strong><u>Scenario (Example)<\/u><\/strong><\/a><strong>.<\/strong><\/p>\n<blockquote>\n<p>\u042d\u0442\u043e \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440, \u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0438\u0440\u0443\u044e\u0449\u0438\u0439 \u0431\u0438\u0437\u043d\u0435\u0441-\u043f\u0440\u0430\u0432\u0438\u043b\u0430. \u041e\u043d \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u0441\u043f\u0438\u0441\u043a\u0430 \u0448\u0430\u0433\u043e\u0432.<\/p>\n<\/blockquote>\n<p><code>File: src\/components\/Container\/Container.feature<\/code><\/p>\n<pre><code class=\"javascript\">\/\/ Omitted pieces of code. Scenario: DropBoxContainer appearance \/\/ Omitted pieces of code.<\/code><\/pre>\n<p><a href=\"https:\/\/cucumber.io\/docs\/gherkin\/reference\/?sbsearch=keyword#steps\" rel=\"noopener noreferrer nofollow\"><strong><u>Steps<\/u><\/strong><\/a><strong>.<\/strong><\/p>\n<blockquote>\n<p>\u041a\u0430\u0436\u0434\u044b\u0439 \u0448\u0430\u0433 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u0441 Given, When, Then, And \u0438\u043b\u0438 But.<br \/> Cucumber \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u043a\u0430\u0436\u0434\u044b\u0439 \u0448\u0430\u0433 \u0432 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0438 \u043f\u043e \u043e\u0447\u0435\u0440\u0435\u0434\u0438, \u0432 \u0442\u043e\u0439 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0432\u044b \u0438\u0445 \u043d\u0430\u043f\u0438\u0441\u0430\u043b\u0438. \u041a\u043e\u0433\u0434\u0430 Cucumber \u043f\u044b\u0442\u0430\u0435\u0442\u0441\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u0448\u0430\u0433, \u043e\u043d \u0438\u0449\u0435\u0442 \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u044e\u0449\u0435\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0448\u0430\u0433\u0430 \u0434\u043b\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f.<\/p>\n<\/blockquote>\n<p>\u0428\u0430\u0433\u0438 \u0434\u043b\u044f \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0442\u0435\u0441\u0442\u0430 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u044b \u0438 \u043f\u043e\u043d\u044f\u0442\u043d\u044b.<\/p>\n<p><code>File: src\/components\/Container\/Container.feature<\/code><\/p>\n<pre><code class=\"javascript\">\/\/ Omitted pieces of code. When I load the page Then I should see the 'drop box container' \/\/ Omitted pieces of code.<\/code><\/pre>\n<p>\u0412 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u043c \u0438\u0442\u043e\u0433\u0435 \u0444\u0430\u0439\u043b <code>Container.feature<\/code> \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<p><code>File: src\/components\/Container\/Container.feature<\/code><\/p>\n<pre><code class=\"javascript\">Feature: Drag and Drop    Rule: Check drag and drop behavior      Scenario: DropBoxContainer appearance       When I load the page       Then I should see the 'drop box container'      Scenario Outline: DropBoxContainer data appearance       When I load the page       Then I should see the '&lt;dishName>' dish        Examples:         | dishName          |         | Stir-Fried Cat    |         | Whisker Omelet    |         | Cat tails         |         | Delicate cat paws |         | Wool pancakes     |         | Cat's minion      |      Scenario: Drag and drop behavior       When I drag the 'Stir-Fried Cat' dish from the first table and drop it on the third table with the 'Cat tails' dish       Then I should see that the first table contains 'Cat tails' dish       And I should see that the third table contains 'Stir-Fried Cat' dish<\/code><\/pre>\n<h3>Data-testid.<\/h3>\n<p>\u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435, \u0438\u0445 \u043d\u0443\u0436\u043d\u043e \u043a\u0430\u043a\u0438\u043c-\u0442\u043e \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043d\u0430\u0439\u0442\u0438. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432\u044b \u0431\u0443\u0434\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0430\u0442\u0440\u0438\u0431\u0443\u0442 <code>data-testid<\/code>, \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b. \u042d\u0442\u043e \u043f\u043e\u0445\u043e\u0436\u0435 \u043d\u0430 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Document\/getElementById\" rel=\"noopener noreferrer nofollow\">Document.getElementById()<\/a>, \u043d\u043e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f react \u0438\u043c\u0435\u0435\u0442 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0441\u0432\u043e\u0438 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u043c\u0435\u0442\u043e\u0434\u044b. \u0412 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u0432\u044b \u0431\u0443\u0434\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>ByTestId<\/code>, \u043d\u043e \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0438 \u043c\u043d\u043e\u0433\u043e \u0434\u0440\u0443\u0433\u0438\u0445: <a href=\"https:\/\/testing-library.com\/docs\/react-testing-library\/cheatsheet\/#queries\" rel=\"noopener noreferrer nofollow\">Cheat sheet<\/a>.<br \/> \u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0431\u044b\u043b \u043d\u0430\u0439\u0434\u0435\u043d \u043f\u043e \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u0443 \u0442\u0435\u0441\u0442\u0430, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0440\u0438\u0441\u0432\u043e\u0438\u0442\u044c \u0435\u043c\u0443 \u044d\u0442\u043e\u0442 \u0430\u0442\u0440\u0438\u0431\u0443\u0442.<\/p>\n<p><code>File: src\/components\/DnD\/DropBox\/DropBoxContainer.tsx<\/code><\/p>\n<pre><code class=\"javascript\">\/\/ Omitted pieces of code. return (  &lt;div className={styles.container} data-testid={\"drop box container\"}>    {selections.map((item, index) => {      return (        &lt;div className={styles.itemContainer} key={index}>          &lt;DropBox            index={index}            selection={selections[index]}            updateSelectionsOrder={updateSelectionsOrder}          \/>          &lt;Table \/>        &lt;\/div>      );    })}  &lt;\/div> ); \/\/ Omitted pieces of code.<\/code><\/pre>\n<p>\u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0432\u0430\u043c \u0442\u0430\u043a\u0436\u0435 \u043d\u0443\u0436\u043d\u043e \u043d\u0430\u0437\u043d\u0430\u0447\u0438\u0442\u044c \u0435\u0449\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0442\u0430\u043a\u0438\u0445 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 \u0434\u0440\u0443\u0433\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c:<\/p>\n<p><code>File: src\/components\/DnD\/DropBox\/DropBox.tsx<\/code><\/p>\n<pre><code class=\"javascript\">\/\/ Omitted pieces of code. return (  &lt;div       className={clsx(styles.dropContainer, {         [styles.hovered]: isHovered,       })}       ref={drop}       data-testid={`drop box ${index}`}     >       &lt;DragBox dragItem={selection} index={index} \/>     &lt;\/div> );  \/\/ Omitted pieces of code.<\/code><\/pre>\n<p><code>File: src\/components\/DnD\/DragBox\/DragBox.tsx<\/code><\/p>\n<pre><code class=\"javascript\">\/\/ Omitted pieces of code. return (  &lt;div    className={clsx(styles.container, {      [styles.dragging]: isDragging,    })}    ref={drag}    data-testid={name}  >    &lt;img src={image} className={styles.icon} \/>    &lt;p className={styles.name}>{name}&lt;\/p>  &lt;\/div> ); \/\/ Omitted pieces of code.<\/code><\/pre>\n<h3>Test \u0444\u0430\u0439\u043b.<\/h3>\n<p>\u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0442 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044b \u043a \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0442\u0435\u0441\u0442\u043e\u0432. \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043e\u0434\u043d\u043e\u0433\u043e \u0438\u0437 \u043f\u043e\u0434\u0445\u043e\u0434\u043e\u0432 \u044f \u0431\u044b \u043f\u043e\u0441\u043e\u0432\u0435\u0442\u043e\u0432\u0430\u043b \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u044c \u0438\u0445 \u043d\u0430 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b. \u041e\u0434\u0438\u043d \u0438\u0437 \u0444\u0430\u0439\u043b\u043e\u0432 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0430\u043c\u0438 \u0442\u0435\u0441\u0442\u044b, \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0443 \u0432\u0430\u0441 \u0431\u0443\u0434\u0435\u0442 \u0438\u0437\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u043b\u043e\u0433\u0438\u043a\u0430, \u0430 \u0434\u0440\u0443\u0433\u043e\u0439 \u0444\u0430\u0439\u043b, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0443\u0442 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u0442\u0435\u0441\u0442\u044b, \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u0432\u0435\u0447\u0430\u0442\u044c \u0437\u0430 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e.<br \/>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0432\u0437\u0433\u043b\u044f\u043d\u0435\u043c \u043d\u0430 \u0433\u043e\u0442\u043e\u0432\u044b\u0439 \u0444\u0430\u0439\u043b, \u0438 \u044f \u043e\u0431\u044a\u044f\u0441\u043d\u044e \u0432\u0441\u0435, \u0447\u0442\u043e \u0442\u0430\u043c \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442.<\/p>\n<p><code>File: src\/components\/Container\/Container.test.tsx<\/code><\/p>\n<pre><code class=\"javascript\">import React from \"react\";  import { loadFeature, defineFeature } from \"jest-cucumber\"; import { render, cleanup } from \"@testing-library\/react\";  import { Container } from \".\/Container\"; import { DndProvider } from \"react-dnd\"; import { HTML5Backend } from \"react-dnd-html5-backend\";  import {   dragAndDropBehavior,   dropBoxContainerAppearance,   dropBoxContainerDataAppearance, } from \".\/Container.definitions\";  const feature = loadFeature(\".\/Container.feature\", {   loadRelativePath: true, });  defineFeature(feature, (test) => {   describe(\"Check drag and drop behavior\", () => {     beforeAll(() => {       render(         &lt;DndProvider backend={HTML5Backend}>           &lt;Container \/>         &lt;\/DndProvider>       );     });     afterAll(() => {       cleanup();       jest.resetAllMocks();     });     dropBoxContainerAppearance(test);     dropBoxContainerDataAppearance(test);     dragAndDropBehavior(test);   }); });<\/code><\/pre>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043e\u0431\u043e \u0432\u0441\u0435\u043c \u0448\u0430\u0433 \u0437\u0430 \u0448\u0430\u0433\u043e\u043c.<br \/>\u0427\u0442\u043e\u0431\u044b \u0441\u0432\u044f\u0437\u0430\u0442\u044c \u0444\u0430\u0439\u043b <code>Container.feature<\/code> \u0441 \u0442\u0435\u0441\u0442\u043e\u0432\u044b\u043c \u0444\u0430\u0439\u043b\u043e\u043c:<\/p>\n<pre><code class=\"javascript\">\/\/ Omitted pieces of code. import { loadFeature, defineFeature } from \"jest-cucumber\"; \/\/ Omitted pieces of code.<\/code><\/pre>\n<p>\u0414\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f, \u0438 \u043e\u0447\u0438\u0441\u0442\u043a\u0438 \u0441\u043b\u0435\u0434\u043e\u0432 \u043f\u043e\u0441\u043b\u0435 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f:<\/p>\n<pre><code class=\"javascript\">\/\/ Omitted pieces of code. import { render, cleanup } from \"@testing-library\/react\"; \/\/ Omitted pieces of code.<\/code><\/pre>\n<p>\u0422\u0435\u0441\u0442\u0438\u0440\u0443\u0435\u043c\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0438 \u0438\u0445 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438:<\/p>\n<pre><code class=\"javascript\">\/\/ Omitted pieces of code. import { Container } from \".\/Container\"; import { DndProvider } from \"react-dnd\"; import { HTML5Backend } from \"react-dnd-html5-backend\"; \/\/ Omitted pieces of code.<\/code><\/pre>\n<p>\u0421\u0430\u043c\u0438 \u0442\u0435\u0441\u0442\u044b. \u0418\u0445 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u043e\u043f\u0438\u0441\u0430\u043d\u0430 \u043f\u043e\u0437\u0436\u0435, \u0430 \u043f\u043e\u043a\u0430 \u043f\u0440\u043e\u0441\u0442\u043e \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0439\u0442\u0435 \u0438\u0445:<\/p>\n<pre><code class=\"javascript\">\/\/ Omitted pieces of code. import {   dragAndDropBehavior,   dropBoxContainerAppearance,   dropBoxContainerDataAppearance, } from \".\/Container.definitions\"; \/\/ Omitted pieces of code.<\/code><\/pre>\n<p>\u0427\u0442\u043e\u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>feature<\/code> \u0444\u0430\u0439\u043b \u0434\u043b\u044f \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u044e <code>loadFeature<\/code> \u0441 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u043c <a href=\"https:\/\/github.com\/bencompton\/jest-cucumber\/blob\/master\/docs\/AdditionalConfiguration.md#relative-feature-file-paths\" rel=\"noopener noreferrer nofollow\">loadRelativePath<\/a>.<\/p>\n<pre><code class=\"javascript\">\/\/ Omitted pieces of code. const feature = loadFeature(\".\/Container.feature\", {   loadRelativePath: true, }); \/\/ Omitted pieces of code.<\/code><\/pre>\n<p>\u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c jest-\u0442\u0435\u0441\u0442 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u044f \u0432 \u0444\u0430\u0439\u043b\u0435 <code>feature<\/code>, \u043e\u0431\u0435\u0440\u043d\u0438\u0442\u0435 \u0435\u0433\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <a href=\"https:\/\/github.com\/bencompton\/jest-cucumber#add-a-jest-test-for-each-scenario-into-your-step-definition-file\" rel=\"noopener noreferrer nofollow\">defineFeature<\/a>. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u044b\u0434\u0435\u043b\u0438\u0442\u044c \u043a\u0430\u0436\u0434\u044b\u0439 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0439 \u0438\u0437 \u0444\u0430\u0439\u043b\u0430 <code>feature<\/code> \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0431\u043b\u043e\u043a <a href=\"https:\/\/jestjs.io\/docs\/api#describename-fn\" rel=\"noopener noreferrer nofollow\">describe<\/a>, \u043d\u043e \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u044d\u0442\u043e \u043d\u0435 \u043d\u0443\u0436\u043d\u043e.<\/p>\n<pre><code class=\"javascript\">\/\/ Omitted pieces of code. defineFeature(feature, (test) => {   describe(\"Check drag and drop behavior\", () => { \/\/ Omitted pieces of code.<\/code><\/pre>\n<p>\u0412 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <a href=\"https:\/\/jestjs.io\/docs\/api#beforeallfn-timeout\" rel=\"noopener noreferrer nofollow\">beforeAll<\/a> \u0432\u044b \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u0435 \u0441\u0432\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043b\u044f \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <a href=\"https:\/\/testing-library.com\/docs\/react-testing-library\/api\/#render\" rel=\"noopener noreferrer nofollow\">render<\/a>.<\/p>\n<pre><code class=\"javascript\">\/\/ Omitted pieces of code.     beforeAll(() => {       render(         &lt;DndProvider backend={HTML5Backend}>           &lt;Container \/>         &lt;\/DndProvider>       );     }); \/\/ Omitted pieces of code.<\/code><\/pre>\n<p>\u0427\u0442\u043e\u0431\u044b \u043e\u0447\u0438\u0441\u0442\u0438\u0442\u044c \u0432\u0441\u0435, \u0447\u0442\u043e \u0432\u044b &#171;\u043d\u0430\u043c\u0443\u0441\u043e\u0440\u0438\u043b\u0438&#187;, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 <a href=\"https:\/\/testing-library.com\/docs\/react-testing-library\/api\/#cleanup\" rel=\"noopener noreferrer nofollow\">cleanup<\/a> \u0438 <a href=\"https:\/\/jestjs.io\/docs\/jest-object#jestresetallmocks\" rel=\"noopener noreferrer nofollow\">resetAllMocks<\/a>.<\/p>\n<pre><code class=\"javascript\">\/\/ Omitted pieces of code.     afterAll(() => {       cleanup();       jest.resetAllMocks();     }); \/\/ Omitted pieces of code.<\/code><\/pre>\n<p>\u0418, \u043d\u0430\u043a\u043e\u043d\u0435\u0446, \u043f\u0440\u043e\u0441\u0442\u043e \u0443\u043a\u0430\u0436\u0438\u0442\u0435 \u0442\u0435\u0441\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u0437\u0430\u043f\u0443\u0449\u0435\u043d\u044b. \u041a \u0438\u0445 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044e \u0432\u044b \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u0442\u0435 \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0433\u043b\u0430\u0432\u0435.<\/p>\n<pre><code class=\"javascript\">\/\/ Omitted pieces of code.     dropBoxContainerAppearance(test);     dropBoxContainerDataAppearance(test);     dragAndDropBehavior(test); \/\/ Omitted pieces of code.<\/code><\/pre>\n<h3>Tests definitions.<\/h3>\n<p>\u0417\u0434\u0435\u0441\u044c \u0432\u044b \u0431\u0443\u0434\u0435\u0442\u0435 \u043f\u0438\u0441\u0430\u0442\u044c \u0442\u0435\u0441\u0442\u044b \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u044f \u0438\u0437 <code>feature<\/code> \u0444\u0430\u0439\u043b\u0430. \u0421\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0441 \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u044b\u043c \u0438\u043c\u0435\u043d\u0435\u043c, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u043e\u0434\u0438\u043d \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442 &#8212; jest \u0442\u0435\u0441\u0442, \u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0439\u0442\u0435 \u0442\u0435\u0441\u0442 \u0432\u043d\u0443\u0442\u0440\u0438 \u044d\u0442\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438. Test \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0434\u0432\u0430 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430: <code>name<\/code> &#8212; \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0441\u043e \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0435\u043c \u0438\u0437 <code>feature<\/code> \u0444\u0430\u0439\u043b\u0430, \u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0442\u0435\u0441\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u043d\u0435\u0441\u0442\u0438 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e.<\/p>\n<p><code>File: src\/components\/Container\/Container.definitions.tsx<\/code><\/p>\n<pre><code class=\"javascript\">export const dropBoxContainerAppearance = (test): void => {   test(\"DropBoxContainer appearance\", async ({ when, then }) => {     \/\/ Omitted pieces of code.   }); };<\/code><\/pre>\n<p>\u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0442\u0435\u0441\u0442\u043e\u0432 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u0430 \u0438 \u0434\u043e\u043b\u0436\u043d\u0430 \u043e\u0442\u0440\u0430\u0436\u0430\u0442\u044c \u0448\u0430\u0433\u0438 \u0438\u0437 <code>feature<\/code> \u0444\u0430\u0439\u043b\u0430. \u0422\u0430\u043a, \u0434\u043b\u044f \u0448\u0430\u0433\u0430 &#171;<code>When I load the page<\/code>&#187; \u0432\u044b \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0435 \u0432\u0441\u0435 \u043a\u0430\u043a \u0435\u0441\u0442\u044c.<\/p>\n<pre><code class=\"javascript\"> \/\/ Omitted pieces of code.     when(\"I load the page\", async () => {       await waitFor(() => \"pending\");     });  \/\/ Omitted pieces of code.<\/code><\/pre>\n<p>\u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0432\u0430\u0448 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>render<\/code> \u0432 \u0444\u0430\u0439\u043b\u0435 <code>src\/components\/Container\/Container.test.tsx<\/code>, \u0432\u0430\u043c \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u043d\u0438\u043a\u0430\u043a\u043e\u0439 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043d\u0430 \u044d\u0442\u043e\u043c \u0448\u0430\u0433\u0435. \u0412\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u0436\u0434\u0435\u0442\u0435, \u043f\u043e\u043a\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u043d \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <a href=\"https:\/\/testing-library.com\/docs\/dom-testing-library\/api-async\/#waitfor\" rel=\"noopener noreferrer nofollow\">waitFor<\/a>, \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0435 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435. <\/p>\n<p>\u0414\u0430\u043b\u0435\u0435, \u043a\u0430\u043a \u0443\u043f\u043e\u043c\u0438\u043d\u0430\u043b\u043e\u0441\u044c \u0432 \u0448\u0430\u0433\u0435 &#171;<code>Then I should see the 'drop box container'<\/code>&#171;, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0443\u0431\u0435\u0434\u0438\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u044d\u0442\u043e\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043f\u0440\u0438\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435. \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e <code>'drop box container'<\/code> \u0437\u0430\u043c\u0435\u043d\u0435\u043d \u0437\u0434\u0435\u0441\u044c \u043d\u0430 \u043f\u043e\u0434\u0441\u0442\u0430\u043d\u043e\u0432\u043e\u0447\u043d\u044b\u0439 \u0437\u043d\u0430\u043a \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430 <code>testId<\/code>. \u0423 \u0432\u0430\u0441 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0441\u043a\u043e\u043b\u044c \u0443\u0433\u043e\u0434\u043d\u043e \u0442\u0430\u043a\u0438\u0445 \u043f\u043e\u0434\u0441\u0442\u0430\u043d\u043e\u0432\u043e\u0447\u043d\u044b\u0445 \u0437\u043d\u0430\u043a\u043e\u0432 \u0438 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u0432, \u0433\u043b\u0430\u0432\u043d\u043e\u0435, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0438 \u0431\u044b\u043b\u0438 \u0432 \u0441\u043e\u0433\u043b\u0430\u0441\u043e\u0432\u0430\u043d\u043d\u043e\u0441\u0442\u0438 \u0441 <code>feature<\/code> \u0444\u0430\u0439\u043b\u043e\u043c. \u0427\u0442\u043e\u0431\u044b \u043d\u0430\u0439\u0442\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043f\u043e <code>testId<\/code>, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u044e <a href=\"https:\/\/testing-library.com\/docs\/queries\/bytestid\" rel=\"noopener noreferrer nofollow\">ByTestId<\/a>:<\/p>\n<pre><code class=\"javascript\">\/\/ Omitted pieces of code. const dropBoxContainer = screen.getByTestId(testId); \/\/ Omitted pieces of code.<\/code><\/pre>\n<p>\u0418 \u0443\u0431\u0435\u0434\u0438\u0442\u0435\u0441\u044c, \u0447\u0442\u043e \u0434\u0430\u043d\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043f\u0440\u0438\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u0439 <a href=\"https:\/\/jestjs.io\/docs\/29.0\/expect#expectvalue\" rel=\"noopener noreferrer nofollow\">expect<\/a> \u0438 <a href=\"https:\/\/github.com\/testing-library\/jest-dom#tobeinthedocument\" rel=\"noopener noreferrer nofollow\">toBeInTheDocument<\/a>.<\/p>\n<pre><code class=\"javascript\">\/\/ Omitted pieces of code. expect(dropBoxContainer).toBeInTheDocument(); \/\/ Omitted pieces of code.<\/code><\/pre>\n<p>\u0412 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u043c \u0438\u0442\u043e\u0433\u0435 \u0432\u0430\u0448 \u0442\u0435\u0441\u0442 \u0434\u043b\u044f \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<pre><code class=\"javascript\">export const dropBoxContainerAppearance = (test): void => {   test(\"DropBoxContainer appearance\", async ({ when, then }) => {     when(\"I load the page\", async () => {       await waitFor(() => \"pending\");     });      then(\/^I should see the '(.*)'$\/, async (testId) => {       await waitFor(() => {         const dropBoxContainer = screen.getByTestId(testId);         expect(dropBoxContainer).toBeInTheDocument();       });     });   }); };<\/code><\/pre>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u0435 \u0432\u0430\u0448 \u043f\u0435\u0440\u0432\u044b\u0439 \u0442\u0435\u0441\u0442 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u043c\u0430\u043d\u0434\u044b <code>npm run test<\/code> \u0438\u0437 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 \u043f\u0430\u043f\u043a\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 (\u043d\u0435 \u0437\u0430\u0431\u044b\u0432\u0430\u044f \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u0444\u0430\u0439\u043b <code>feature<\/code> \u0434\u043e\u043b\u0436\u0435\u043d \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u044d\u0442\u043e\u0442 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0439), \u0432\u044b \u0443\u0432\u0438\u0434\u0438\u0442\u0435, \u0447\u0442\u043e \u043e\u043d \u0443\u0441\u043f\u0435\u0448\u043d\u043e \u043f\u0440\u043e\u0439\u0434\u0435\u043d.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/732\/eca\/cf5\/732ecacf50a101db92251c80c4493f0d.png\" width=\"754\" height=\"378\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/732\/eca\/cf5\/732ecacf50a101db92251c80c4493f0d.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0439 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u043e\u0445\u043e\u0436 \u043d\u0430 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0439, \u0437\u0430 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0437\u0434\u0435\u0441\u044c \u043d\u0443\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <a href=\"https:\/\/cucumber.io\/docs\/gherkin\/reference\/#scenario-outline\" rel=\"noopener noreferrer nofollow\">Scenario Outline<\/a>.<\/p>\n<blockquote>\n<p>\u041a\u043b\u044e\u0447\u0435\u0432\u043e\u0435 \u0441\u043b\u043e\u0432\u043e Scenario Outline \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u043e\u0434\u043d\u043e\u0433\u043e \u0438 \u0442\u043e\u0433\u043e \u0436\u0435 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437 \u0441 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u043c\u0438 \u043a\u043e\u043c\u0431\u0438\u043d\u0430\u0446\u0438\u044f\u043c\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439.<\/p>\n<\/blockquote>\n<p>\u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0432\u044b \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u0435, \u0447\u0442\u043e \u0432\u0441\u0435 \u0436\u0435\u043b\u0430\u0435\u043c\u044b\u0435 \u0431\u043b\u044e\u0434\u0430 \u043f\u0440\u0438\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044e\u0442 \u043d\u0430 \u0441\u0442\u043e\u043b\u0430\u0445.<\/p>\n<p><code>File: src\/components\/Container\/Container.feature<\/code><\/p>\n<pre><code class=\"javascript\"> \/\/ Omitted pieces of code.     Scenario Outline: DropBoxContainer data appearance       When I load the page       Then I should see the '&lt;dishName>' dish        Examples:         | dishName          |         | Stir-Fried Cat    |         | Whisker Omelet    |         | Cat tails         |         | Delicate cat paws |         | Wool pancakes     |         | Cat's minion      |  \/\/ Omitted pieces of code.<\/code><\/pre>\n<p>\u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0442\u0435\u0441\u0442\u0430 \u0442\u0430\u043a\u0436\u0435 \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u0445\u043e\u0436\u0430, \u043d\u043e \u0442\u0443\u0442 \u0432\u044b \u0431\u0443\u0434\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 \u043c\u0435\u0442\u043e\u0434 \u043f\u043e\u0438\u0441\u043a\u0430 <a href=\"https:\/\/testing-library.com\/docs\/queries\/bytext\" rel=\"noopener noreferrer nofollow\">getByText<\/a>.<\/p>\n<p><code>File: src\/components\/Container\/Container.feature<\/code><\/p>\n<pre><code class=\"javascript\">export const dropBoxContainerDataAppearance = (test): void => {   test(\"DropBoxContainer data appearance\", async ({ when, then }) => {     when(\"I load the page\", async () => {       await waitFor(() => \"pending\");     });      then(\/^I should see the '(.*)' dish$\/, async (dishNameTestId) => {       await waitFor(() => {         const dishName = screen.getByText(dishNameTestId);         expect(dishName).toBeInTheDocument();       });     });   }); };<\/code><\/pre>\n<h3>\u0422\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 Drag and Drop.<\/h3>\n<p>\u0414\u043b\u044f \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f drag-and-drop (\u0438 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e) \u0432 React Testing Library \u0435\u0441\u0442\u044c \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043c\u0435\u0442\u043e\u0434 <a href=\"https:\/\/testing-library.com\/docs\/dom-testing-library\/api-events\/#fireevent\" rel=\"noopener noreferrer nofollow\">fireEvents<\/a>. \u041a\u0430\u043a \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0437 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f, \u043e\u043d \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d \u0434\u043b\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0441\u043e\u0431\u044b\u0442\u0438\u0439 DOM, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a &#171;click&#187;, &#171;change&#187;, &#171;drag&#187; \u0438 \u0442.\u0434.<\/p>\n<p>\u0421\u0446\u0435\u043d\u0430\u0440\u0438\u0439 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f drag-and-drop \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442, \u0447\u0442\u043e \u0435\u0441\u043b\u0438 \u0432\u0437\u044f\u0442\u044c \u0431\u043b\u044e\u0434\u043e \u0441 \u043e\u0434\u043d\u043e\u0433\u043e \u0441\u0442\u043e\u043b\u0430 \u0438 \u043f\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0435\u0433\u043e \u043d\u0430 \u0434\u0440\u0443\u0433\u043e\u0439 \u0441\u0442\u043e\u043b, \u0442\u043e \u043e\u043d\u0438 \u0434\u043e\u043b\u0436\u043d\u044b &#171;\u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f \u043c\u0435\u0441\u0442\u0430\u043c\u0438&#187;. \u041f\u0440\u043e\u0441\u0442\u043e \u0432\u0437\u0433\u043b\u044f\u043d\u0438\u0442\u0435 \u043d\u0430 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044e, \u0438 \u0432\u0441\u0435 \u0441\u0442\u0430\u043d\u0435\u0442 \u044f\u0441\u043d\u043e.<\/p>\n<p><code>File: src\/components\/Container\/Container.feature<\/code><\/p>\n<pre><code class=\"javascript\">\/\/ Omitted pieces of code.     Scenario: Drag and drop behavior       When I drag the 'Stir-Fried Cat' dish from the first table and drop it on the third table with the 'Cat tails' dish       Then I should see that the first table contains 'Cat tails' dish       And I should see that the third table contains 'Stir-Fried Cat' dish  \/\/ Omitted pieces of code.<\/code><\/pre>\n<p>\u041d\u0430 \u043f\u0435\u0440\u0432\u043e\u043c \u0448\u0430\u0433\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u043f\u0435\u0440\u0435\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u043d\u0438\u0435 \u043f\u043e\u0441\u0443\u0434\u044b. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432\u0430\u043c \u043d\u0443\u0436\u0435\u043d \u043f\u0435\u0440\u0435\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u0435\u043c\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u0438 \u0446\u0435\u043b\u044c \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u0435\u043c\u043e\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430 (drop area), \u043a\u0443\u0434\u0430 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0438\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442.<\/p>\n<p><code>File: src\/components\/Container\/Container.definitions.tsx<\/code><\/p>\n<pre><code class=\"javascript\">\/\/ Omitted pieces of code. const firstDragBox = screen.getByTestId(firstDragBoxTestId); const thirdDropBox = screen.getByTestId(\"drop box 2\"); \/\/ Omitted pieces of code.<\/code><\/pre>\n<p>Drag and drop \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u044d\u0442\u0430\u043f\u043e\u0432:<\/p>\n<ol>\n<li>\n<p>\u041d\u0430\u0447\u043d\u0438\u0442\u0435 \u043f\u0435\u0440\u0435\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u043d\u0438\u0435 (drag) \u043f\u0435\u0440\u0435\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u0435\u043c\u043e\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430 (\u0431\u043b\u044e\u0434\u043e).<\/p>\n<\/li>\n<li>\n<p>\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u043f\u0435\u0440\u0435\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u0435\u043c\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u0432 \u043e\u043f\u0443\u0441\u043a\u0430\u0435\u043c\u0443\u044e (drop) \u043e\u0431\u043b\u0430\u0441\u0442\u044c (\u0441\u0442\u043e\u043b).<\/p>\n<\/li>\n<li>\n<p>\u041f\u0435\u0440\u0435\u0442\u0430\u0449\u0438\u0442\u0435 \u043f\u0435\u0440\u0435\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u0435\u043c\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u0432 \u043e\u043f\u0443\u0441\u043a\u0430\u0435\u043c\u0443\u044e (drop) \u043e\u0431\u043b\u0430\u0441\u0442\u044c.<\/p>\n<\/li>\n<li>\n<p>\u0411\u0440\u043e\u0441\u044c\u0442\u0435 (drop) \u043f\u0435\u0440\u0435\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u0435\u043c\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442.<\/p>\n<\/li>\n<\/ol>\n<p>\u0418\u0442\u0430\u043a, \u043f\u0435\u0440\u0432\u044b\u0439 \u0448\u0430\u0433 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<p><code>File: src\/components\/Container\/Container.definitions.tsx<\/code><\/p>\n<pre><code class=\"javascript\"> \/\/ Omitted pieces of code. when(  \/^I drag the '(.*)' dish from the first table and drop it on the third table with the '(.*)' dish$\/,  async (firstDragBoxTestId) => {    await waitFor(() => {      const firstDragBox = screen.getByTestId(firstDragBoxTestId);      const thirdDropBox = screen.getByTestId(\"drop box 2\");      fireEvent.dragStart(firstDragBox);      fireEvent.dragEnter(thirdDropBox);      fireEvent.dragOver(thirdDropBox);      fireEvent.drop(thirdDropBox);    });  } );  \/\/ Omitted pieces of code.<\/code><\/pre>\n<p>\u0414\u0430\u043b\u0435\u0435 \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0443\u0431\u0435\u0434\u0438\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u043e\u0436\u0438\u0434\u0430\u0435\u043c\u044b\u0435 \u0431\u043b\u044e\u0434\u0430 \u0440\u0430\u0441\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u044b \u043d\u0430 \u0441\u0432\u043e\u0438\u0445 \u0441\u0442\u043e\u043b\u0430\u0445. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0435\u0449\u0435 \u043e\u0434\u043d\u043e\u0433\u043e \u043c\u0435\u0442\u043e\u0434\u0430 <code>within<\/code>, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0432\u044b \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u0435\u0442\u0435 \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u043f\u043e\u0438\u0441\u043a\u0430. \u0422\u043e \u0435\u0441\u0442\u044c \u0432\u043c\u0435\u0441\u0442\u043e \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0438\u0441\u043a\u0430\u0442\u044c \u0432\u043e \u0432\u0441\u0435\u043c <code>document.body<\/code>, \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043a\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438. \u0412 \u0432\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0432\u044b \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u0435\u0442\u0435 \u043f\u043e\u0438\u0441\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u043c\u0438 \u0432\u0430\u043c <code>drop box<\/code>. \u041f\u043e\u043b\u043d\u0430\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0433\u043e \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u044f:<\/p>\n<p><code>File: src\/components\/Container\/Container.definitions.tsx<\/code><\/p>\n<pre><code class=\"javascript\">export const dragAndDropBehavior = (test): void => {   test(\"Drag and drop behavior\", async ({ when, then, and }) => {     when(       \/^I drag the '(.*)' dish from the first table and drop it on the third table with the '(.*)' dish$\/,       async (firstDragBoxTestId) => {         await waitFor(() => {           const firstDragBox = screen.getByTestId(firstDragBoxTestId);           const thirdDropBox = screen.getByTestId(\"drop box 2\");           fireEvent.dragStart(firstDragBox);           fireEvent.dragEnter(thirdDropBox);           fireEvent.dragOver(thirdDropBox);           fireEvent.drop(thirdDropBox);         });       }     );     then(       \/^I should see that the first table contains '(.*)' dish$\/,       async (dishNameTestId) => {         await waitFor(() => {           const firstDropBox = screen.getByTestId(\"drop box 0\");           expect(             within(firstDropBox).getByText(dishNameTestId)           ).toBeInTheDocument();         });       }     );     and(       \/^I should see that the third table contains '(.*)' dish$\/,       async (dishNameTestId) => {         await waitFor(() => {           const thirdDropBox = screen.getByTestId(\"drop box 2\");           expect(             within(thirdDropBox).getByText(dishNameTestId)           ).toBeInTheDocument();         });       }     );   }); };<\/code><\/pre>\n<p>\u041d\u0430 \u044d\u0442\u043e\u043c \u044d\u0442\u0430\u043f\u0435 \u0432\u0430\u0448\u0438 \u0442\u0435\u0441\u0442\u044b \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u044b \u0438 \u0433\u043e\u0442\u043e\u0432\u044b \u043a \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u043c\u0443 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044e.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/fe6\/913\/ca1\/fe6913ca167953e9fef2cc78f6bcbe23.png\" width=\"1100\" height=\"1360\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/fe6\/913\/ca1\/fe6913ca167953e9fef2cc78f6bcbe23.png\"\/><figcaption><\/figcaption><\/figure>\n<h3>\u041e\u0442\u043b\u0430\u0434\u043a\u0430.<\/h3>\n<p>\u0411\u044b\u0432\u0430\u044e\u0442 \u0441\u043b\u0443\u0447\u0430\u0438, \u043a\u043e\u0433\u0434\u0430 \u0447\u0442\u043e-\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043d\u0435 \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c, \u0438 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0431\u0443\u0434\u0443\u0442 \u043d\u0435 \u0442\u0430\u043a\u0438\u043c\u0438, \u043a\u0430\u043a \u043e\u0436\u0438\u0434\u0430\u043b\u043e\u0441\u044c. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432\u043c\u0435\u0441\u0442\u043e \u043e\u0431\u044b\u0447\u043d\u043e\u0433\u043e <code>console.log()<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0437\u0434\u0435\u0441\u044c \u043d\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442, \u043d\u0430 \u043f\u043e\u043c\u043e\u0449\u044c \u043f\u0440\u0438\u0434\u0435\u0442 \u043c\u0435\u0442\u043e\u0434 <a href=\"https:\/\/testing-library.com\/docs\/queries\/about\/#screendebug\" rel=\"noopener noreferrer nofollow\">screen.debug()<\/a>. \u041e\u043d \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0442\u0440\u0438 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430:<\/p>\n<pre><code class=\"javascript\">element?: Array&lt;Element | HTMLDocument> | Element | HTMLDocument, maxLength?: number, options?: OptionsReceived,<\/code><\/pre>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c \u0432\u0435\u0441\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u043f\u0440\u043e\u0441\u0442\u043e \u0443\u043a\u0430\u0436\u0438\u0442\u0435:<\/p>\n<pre><code class=\"javascript\">screen.debug(undefined, 99999);<\/code><\/pre>\n<p>\u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0432\u044b \u043d\u0435 \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u043d\u044b \u043a \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u0438 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0435 \u0432\u0435\u0441\u044c \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442, \u0430 \u0432\u0442\u043e\u0440\u043e\u0439 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442 &#8212; \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u0447\u0438\u0441\u043b\u043e, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u0442\u044c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u043c\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e. \u0415\u0441\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0443\u0436\u043d\u0443\u044e \u043e\u0431\u043b\u0430\u0441\u0442\u044c, \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<p><code>File: src\/components\/Container\/Container.definitions.tsx<\/code><\/p>\n<pre><code class=\"javascript\">\/\/ Omitted pieces of code. const firstDropBox = screen.getByTestId(\"drop box 0\"); screen.debug(firstDropBox, 99999); \/\/ Omitted pieces of code.<\/code><\/pre>\n<p>\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/a6d\/ad6\/efa\/a6dad6efaa2085dbce6a86cf0a8ad52b.png\" width=\"544\" height=\"892\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/a6d\/ad6\/efa\/a6dad6efaa2085dbce6a86cf0a8ad52b.png\"\/><figcaption><\/figcaption><\/figure>\n<h2>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435.<\/h2>\n<p>\u042d\u0442\u043e \u0431\u044b\u043b\u0430 \u0437\u0430\u043a\u043b\u044e\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u0441\u0442\u0430\u0442\u044c\u0438, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0432\u044b \u0443\u0437\u043d\u0430\u043b\u0438, \u043a\u0430\u043a \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c drag-and-drop \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b. \u041a\u0430\u043a \u0438 \u0432 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439 \u0441\u0442\u0430\u0442\u044c\u0435, \u0437\u0434\u0435\u0441\u044c \u0431\u044b\u043b\u0438 \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u044b\u0441\u043e\u043a\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f. \u0414\u043b\u044f \u0431\u043e\u043b\u0435\u0435 \u0433\u043b\u0443\u0431\u043e\u043a\u043e\u0433\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u044f \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u044c\u0442\u0435\u0441\u044c \u0441 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u044b\u043c\u0438 \u043d\u0438\u0436\u0435 \u0441\u0441\u044b\u043b\u043a\u0430\u043c\u0438.<\/p>\n<h2>\u041f\u043e\u043b\u0435\u0437\u043d\u044b\u0435 \u0441\u0441\u044b\u043b\u043a\u0438.<\/h2>\n<ol>\n<li>\n<p><a href=\"https:\/\/github.com\/WOLFRIEND\/multiple-drag-n-drop\" rel=\"noopener noreferrer nofollow\"><u>GitHub repository<\/u><\/a>.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/reorderable-drag-and-drop.onrender.com\/\" rel=\"noopener noreferrer nofollow\"><u>Online demo<\/u><\/a>.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/react-dnd.github.io\/react-dnd\/about\" rel=\"noopener noreferrer nofollow\"><u>React DnD library<\/u><\/a>.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/cucumber.io\/\" rel=\"noopener noreferrer nofollow\"><u>Cucumber<\/u><\/a>.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/testing-library.com\/\" rel=\"noopener noreferrer nofollow\"><u>Testing Library<\/u><\/a>.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/jestjs.io\/\" rel=\"noopener noreferrer nofollow\"><u>Jest<\/u><\/a>.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/testing-library\/jest-dom\" rel=\"noopener noreferrer nofollow\"><u>Jest-dom<\/u><\/a>.<\/p>\n<\/li>\n<\/ol>\n<\/div>\n<\/div>\n<\/div>\n<p> <!----> <!----><\/div>\n<p> <!----> <!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/post\/706332\/\"> https:\/\/habr.com\/ru\/post\/706332\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<h2>\u041f\u0440\u0435\u0434\u0438\u0441\u043b\u043e\u0432\u0438\u0435.<\/h2>\n<p>\u0412 <a href=\"https:\/\/habr.com\/ru\/post\/704604\/\" rel=\"noopener noreferrer nofollow\">\u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439 \u0441\u0442\u0430\u0442\u044c\u0435<\/a> \u0432\u044b \u0443\u0437\u043d\u0430\u043b\u0438, \u043a\u0430\u043a \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u0443\u043f\u043e\u0440\u044f\u0434\u043e\u0447\u0438\u0432\u0430\u0435\u043c\u044b\u0435 drag-and-drop \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u0442\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u0438\u0448\u043b\u043e \u0432\u0440\u0435\u043c\u044f \u0438\u0445 \u043f\u0440\u043e\u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c. \u0412 \u044d\u0442\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u0432\u044b \u043f\u043e\u043a\u0440\u043e\u0435\u0442\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u044e\u043d\u0438\u0442 \u0442\u0435\u0441\u0442\u0430\u043c\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e BDD \u043f\u043e\u0434\u0445\u043e\u0434\u0430. \u042f \u043d\u0435 \u0431\u0443\u0434\u0443 \u043f\u044b\u0442\u0430\u0442\u044c\u0441\u044f \u0434\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u043f\u043e\u043b\u0435\u0437\u043d\u043e\u0441\u0442\u044c \u0438\u043b\u0438 \u0431\u0435\u0441\u043f\u043e\u043b\u0435\u0437\u043d\u043e\u0441\u0442\u044c \u044e\u043d\u0438\u0442 \u0442\u0435\u0441\u0442\u043e\u0432 \u0432 \u0432\u0430\u0448\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445, \u043e\u043a\u043e\u043d\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0432\u0430\u0441, \u044f \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0430\u0443\u0447\u0443 \u0432\u0430\u0441, \u043a\u0430\u043a \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u0442\u044c. \u0415\u0441\u043b\u0438 \u0432\u044b \u0435\u0449\u0451 \u043d\u0435 \u0437\u043d\u0430\u043a\u043e\u043c\u044b \u0441 \u044e\u043d\u0438\u0442 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u043c, \u0438 \u0447\u0442\u043e \u044d\u0442\u043e \u0442\u0430\u043a\u043e\u0435, \u043d\u0435 \u0442\u043e\u0440\u043e\u043f\u0438\u0442\u0435\u0441\u044c, \u043d\u0430\u0439\u0434\u0438\u0442\u0435 \u0438 \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0439\u0442\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0430\u0442\u0435\u0439, \u0447\u0442\u043e\u0431\u044b \u0438\u043c\u0435\u0442\u044c \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u044d\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u0438 \u043a\u0430\u043a \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442.<\/p>\n<p><strong>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438:<\/strong><\/p>\n<ol>\n<li>\n<p><a href=\"https:\/\/testing-library.com\/\" rel=\"noopener noreferrer nofollow\"><u>React Testing Library<\/u><\/a>.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/cucumber.io\/\" rel=\"noopener noreferrer nofollow\"><u>Cucumber<\/u><\/a>.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/jestjs.io\/\" rel=\"noopener noreferrer nofollow\"><u>Jest<\/u><\/a>\u00a0&amp;\u00a0<a href=\"https:\/\/github.com\/bencompton\/jest-cucumber\" rel=\"noopener noreferrer nofollow\"><u>Jest Cucumber<\/u><\/a>.<\/p>\n<\/li>\n<\/ol>\n<p><strong>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435<\/strong>:<\/p>\n<p>\u0425\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0431\u044b \u043e\u0431\u044a\u044f\u0441\u043d\u0438\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0442\u0435\u0440\u043c\u0438\u043d\u043e\u0432, \u0442\u0430\u043a \u043a\u0430\u043a \u043e\u043d\u0438 \u043c\u043e\u0433\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u0447\u0438\u0441\u0442\u043e\u043c \u0432\u0438\u0434\u0435:<\/p>\n<p><code>drag<\/code>\u00a0&#8212; \u0422\u0430\u0449\u0438\u0442\u044c, \u043f\u0435\u0440\u0435\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u0442\u044c. \u0422\u043e \u0435\u0441\u0442\u044c \u044d\u0442\u043e \u043f\u0435\u0440\u0435\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u0435\u043c\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u0447\u0442\u043e-\u0442\u043e, \u0447\u0442\u043e \u0432\u044b \u043f\u0435\u0440\u0435\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u0435\u0442\u0435 \u0438\u0437 \u043e\u0434\u043d\u043e\u0433\u043e \u043c\u0435\u0441\u0442\u0430 \u0432 \u0434\u0440\u0443\u0433\u043e\u0435.<\/p>\n<p><code>drop<\/code>\u00a0&#8212; \u0411\u0440\u043e\u0441\u0438\u0442\u044c, \u043f\u0430\u0434\u0435\u043d\u0438\u0435. \u042d\u0442\u043e \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u043a\u0443\u0434\u0430 \u043f\u0435\u0440\u0435\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u0435\u043c\u044b\u0439 (drag) \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0437\u043c\u0435\u0449\u0451\u043d. \u0422\u043e \u0435\u0441\u0442\u044c \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u043f\u0435\u0440\u0435\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u043d\u0438\u044f\/\u043f\u0430\u0434\u0435\u043d\u0438\u044f.<\/p>\n<h2>\u041f\u043e\u0434\u0445\u043e\u0434 Cucumber \u0438  BDD.<\/h2>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u0443\u0436\u0435 \u0437\u043d\u0430\u043a\u043e\u043c\u044b \u0441 \u043f\u043e\u0434\u0445\u043e\u0434\u043e\u043c Cucumber \u0438 BDD, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u043c\u0435\u043b\u043e \u043f\u0440\u043e\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u044d\u0442\u043e\u0442 \u0440\u0430\u0437\u0434\u0435\u043b \u0438 \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043a \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c\u0443.<\/p>\n<h4>\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 BDD?<\/h4>\n<p>\u041f\u0440\u043e\u0441\u0442\u044b\u043c\u0438 \u0441\u043b\u043e\u0432\u0430\u043c\u0438, \u044d\u0442\u043e:<\/p>\n<blockquote>\n<p>Behavior-driven development (BDD) &#8212; \u044d\u0442\u043e \u043c\u0435\u0442\u043e\u0434\u043e\u043b\u043e\u0433\u0438\u044f \u0432 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0430\u044f \u043e\u043f\u0438\u0441\u0430\u0442\u044c \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0430 \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u043e\u043c \u0438 \u0447\u0435\u043b\u043e\u0432\u0435\u043a\u043e\u0447\u0438\u0442\u0430\u0435\u043c\u043e\u043c \u044f\u0437\u044b\u043a\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043d\u044f\u0442\u0435\u043d \u0432\u0441\u0435\u043c \u0447\u043b\u0435\u043d\u0430\u043c \u043a\u043e\u043c\u0430\u043d\u0434\u044b. \u0418\u0434\u0435\u044f \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 \u043a\u0430\u043a\u043e\u0435 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u043e\u0436\u0438\u0434\u0430\u0435\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043f\u0440\u0438 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0438 \u0441 \u043d\u0438\u043c.<\/p>\n<\/blockquote>\n<p>\u0412\u043e\u0442 \u043a\u0430\u043a Cucumber \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442, <a href=\"https:\/\/cucumber.io\/docs\/bdd\/\" rel=\"noopener noreferrer nofollow\">\u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0435 BDD<\/a>:<\/p>\n<blockquote>\n<p>BDD &#8212; \u044d\u0442\u043e \u0441\u043f\u043e\u0441\u043e\u0431 \u0440\u0430\u0431\u043e\u0442\u044b \u043a\u043e\u043c\u0430\u043d\u0434 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u043e\u0433\u043e \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0443\u0441\u0442\u0440\u0430\u043d\u044f\u0435\u0442 \u043f\u0440\u043e\u0431\u0435\u043b\u044b \u043c\u0435\u0436\u0434\u0443 \u0431\u0438\u0437\u043d\u0435\u0441\u043e\u043c \u0438 \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438\u043c\u0438 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0441\u0442\u0430\u043c\u0438:<\/p>\n<p> \u2022 \u041f\u043e\u043e\u0449\u0440\u0435\u043d\u0438\u0435 \u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u043c\u0435\u0436\u0434\u0443 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u043c\u0438 \u0440\u043e\u043b\u044f\u043c\u0438 \u0434\u043b\u044f \u0434\u043e\u0441\u0442\u0438\u0436\u0435\u043d\u0438\u044f \u043e\u0431\u0449\u0435\u0433\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0440\u0435\u0448\u0438\u0442\u044c<\/p>\n<p>\u2022 \u0420\u0430\u0431\u043e\u0442\u0430 \u0432 \u0431\u044b\u0441\u0442\u0440\u044b\u0445, \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u0438\u0442\u0435\u0440\u0430\u0446\u0438\u044f\u0445 \u0434\u043b\u044f \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u044f \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0439 \u0441\u0432\u044f\u0437\u0438 \u0438 \u043f\u043e\u0442\u043e\u043a\u0430 \u0446\u0435\u043d\u043d\u043e\u0441\u0442\u0435\u0439<\/p>\n<p>\u2022 \u041f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u043e \u0441\u0438\u0441\u0442\u0435\u043c\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0441\u0432\u0435\u0440\u044f\u0435\u0442\u0441\u044f \u0441 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435\u043c \u0441\u0438\u0441\u0442\u0435\u043c\u044b<\/p>\n<p>\u041c\u044b \u0434\u0435\u043b\u0430\u0435\u043c \u044d\u0442\u043e, \u043a\u043e\u043d\u0446\u0435\u043d\u0442\u0440\u0438\u0440\u0443\u044f \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u0443\u044e \u0440\u0430\u0431\u043e\u0442\u0443 \u043d\u0430 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0445, \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0445 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0438\u0440\u0443\u044e\u0442, \u043a\u0430\u043a \u043c\u044b \u0445\u043e\u0442\u0438\u043c, \u0447\u0442\u043e\u0431\u044b \u0441\u0435\u0431\u044f \u0432\u0435\u043b\u0430 \u0441\u0438\u0441\u0442\u0435\u043c\u0430. \u041c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u044d\u0442\u0438 \u043f\u0440\u0438\u043c\u0435\u0440\u044b, \u0447\u0442\u043e\u0431\u044b \u0432\u0435\u0441\u0442\u0438 \u043d\u0430\u0441 \u043e\u0442 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0438 \u0434\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438, \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u043d\u0435\u043f\u0440\u0435\u0440\u044b\u0432\u043d\u043e\u0433\u043e \u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u0447\u0435\u0441\u0442\u0432\u0430.<\/p>\n<\/blockquote>\n<p>\u0414\u043b\u044f \u043f\u043e\u043b\u043d\u043e\u0433\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u044f \u043d\u0435 \u0441\u0442\u0435\u0441\u043d\u044f\u0439\u0442\u0435\u0441\u044c \u0447\u0438\u0442\u0430\u0442\u044c \u043e\u0431\u044a\u044f\u0441\u043d\u0435\u043d\u0438\u044f \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 Cucumber \u0438\u043b\u0438 \u043f\u043e\u0433\u0443\u0433\u043b\u0438\u0442\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0430\u0442\u0435\u0439, \u043e\u0431\u044a\u044f\u0441\u043d\u044f\u044e\u0449\u0438\u0445 \u044d\u0442\u0443 \u0442\u0435\u043c\u0443.<\/p>\n<h2>\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 Cucumber?<\/h2>\n<p>\u0421\u043e\u0433\u043b\u0430\u0441\u043d\u043e <a href=\"https:\/\/cucumber.io\/docs\/guides\/overview\/\" rel=\"noopener noreferrer nofollow\">\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 Cucumber<\/a>:<\/p>\n<blockquote>\n<p>Cucumber \u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u043d\u044f\u0435\u043c\u044b\u0435 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438, \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0435 \u043e\u0431\u044b\u0447\u043d\u044b\u043c \u0442\u0435\u043a\u0441\u0442\u043e\u043c, \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442, \u0447\u0442\u043e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u043e\u0435 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0435\u043d\u0438\u0435 \u0434\u0435\u043b\u0430\u0435\u0442 \u0442\u043e, \u043e \u0447\u0435\u043c \u0433\u043e\u0432\u043e\u0440\u0438\u0442\u0441\u044f \u0432 \u044d\u0442\u0438\u0445 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f\u0445. \u0421\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u0442 \u0438\u0437 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432, \u0438\u043b\u0438 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0435\u0432. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<p><code>Scenario: Breaker guesses a word<br \/>Given the Maker has chosen a word<br \/>When the Breaker makes a guess<br \/>Then the Maker is asked to score<\/code><\/p>\n<p>\u041a\u0430\u0436\u0434\u044b\u0439 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0439 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u0448\u0430\u0433\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u043e\u043b\u0436\u0435\u043d \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c Cucumber. Cucumber \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0435 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u043e\u0433\u043e \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0435\u043d\u0438\u044f \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u0438 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 \u043e\u0442\u0447\u0435\u0442 \u0441 \u0443\u043a\u0430\u0437\u0430\u043d\u0438\u0435\u043c \u2705 \u0443\u0441\u043f\u0435\u0445\u0430 \u0438\u043b\u0438 \u274c \u043d\u0435\u0443\u0434\u0430\u0447\u0438 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u044f.<\/p>\n<\/blockquote>\n<p>\u0414\u0443\u043c\u0430\u044e, \u0442\u0435\u043f\u0435\u0440\u044c \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u043f\u043e\u0432\u0435\u0440\u0445\u043d\u043e\u0441\u0442\u043d\u043e\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u0438 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u0442\u044c \u0434\u0430\u043b\u044c\u0448\u0435, \u043d\u043e \u0432 \u043b\u044e\u0431\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u044f \u043e\u0431\u044a\u044f\u0441\u043d\u044e \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0448\u0430\u0433 \u0437\u0430 \u0448\u0430\u0433\u043e\u043c.<\/p>\n<h2>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439.<\/h2>\n<h4>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439.<\/h4>\n<p>\u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432, \u0441\u0442\u0430\u0442\u0435\u0439 \u0438 \u043b\u0443\u0447\u0448\u0438\u0445 \u043f\u0440\u0430\u043a\u0442\u0438\u043a \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u044e\u043d\u0438\u0442 \u0442\u0435\u0441\u0442\u044b, \u0438 \u043e\u0431\u044a\u044f\u0441\u043d\u0435\u043d\u0438\u0435 \u044d\u0442\u043e\u0433\u043e \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0439 (\u0430 \u043c\u043e\u0436\u0435\u0442 \u0438 \u043d\u0435 \u043e\u0434\u043d\u043e\u0439) \u0441\u0442\u0430\u0442\u044c\u0438. \u041c\u043e\u044f \u0436\u0435 \u0446\u0435\u043b\u044c \u0437\u0434\u0435\u0441\u044c &#8212; \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u0437\u043d\u0430\u043d\u0438\u044f \u043e \u044e\u043d\u0438\u0442 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Cucumber \u0438 \u043e\u0445\u0432\u0430\u0442\u0438\u0442\u044c \u043e\u0441\u043d\u043e\u0432\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0432\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0438 \u0432 \u043f\u0440\u043e\u0448\u043b\u043e\u0439 \u0447\u0430\u0441\u0442\u0438. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432\u0441\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u0438 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 \u0431\u0443\u0434\u0443\u0442 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u044b\u043c\u0438 \u0438 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u043c\u0438 \u0434\u043b\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0442\u0435\u0441\u0442\u043e\u0432.<br \/> \u0412\u043e\u0442 \u0441\u043f\u0438\u0441\u043e\u043a \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0445 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 \u0438 dev-\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u044b \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u043d\u0430\u0439\u0442\u0438 \u0432 \u0444\u0430\u0439\u043b\u0435 <a href=\"https:\/\/github.com\/WOLFRIEND\/multiple-drag-n-drop\/blob\/master\/package.json\" rel=\"noopener noreferrer nofollow\">package.json<\/a>:<\/p>\n<p><strong>devDependencies.<\/strong><br \/><code>File: package.json<\/code><\/p>\n<pre><code class=\"javascript\">\/\/ Omitted pieces of code. \"@testing-library\/jest-dom\" \"@testing-library\/react\" \"@testing-library\/user-event\" \"@types\/jest\" \"cross-env\" \"jest-circus\" \"jest-cucumber\" \"jest-watch-typeahead\" \"react-test-renderer\" \/\/ Omitted pieces of code.<\/code><\/pre>\n<p>\u041d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0437 \u043d\u0438\u0445 \u0431\u0443\u0434\u0443\u0442 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u044b \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <a href=\"https:\/\/create-react-app.dev\/\" rel=\"noopener noreferrer nofollow\">Create React App<\/a>, \u0430 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0432\u044b \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0435 \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e.<\/p>\n<h4>\u041a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f.<\/h4>\n<p>\u0421\u0430\u043c\u044b\u0439 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0438 \u0431\u044b\u0441\u0442\u0440\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c Jest &#8212; \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u043a\u043b\u044e\u0447 <code>jest<\/code> \u0432 \u0444\u0430\u0439\u043b\u0435 <code>package.json<\/code>. \u041d\u0430\u043c \u043d\u0443\u0436\u043d\u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u043d\u0430 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043a\u0430\u0441\u0430\u0435\u0442\u0441\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 <a href=\"https:\/\/react-dnd.github.io\/react-dnd\/about\" rel=\"noopener noreferrer nofollow\">React DnD<\/a>, \u044d\u0442\u043e <a href=\"https:\/\/jestjs.io\/docs\/configuration#transformignorepatterns-arraystring\" rel=\"noopener noreferrer nofollow\">transformIgnorePatterns<\/a>:<\/p>\n<p><code>File: package.json<\/code><\/p>\n<pre><code class=\"javascript\">\/\/ Omitted pieces of code. \"jest\": {  \"transformIgnorePatterns\": [    \"node_modules\/(?!react-dnd)\/\"  ] } \/\/ Omitted pieces of code.<\/code><\/pre>\n<p>\u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0432 React \u0443\u0436\u0435 \u0435\u0441\u0442\u044c \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u0434\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0442\u0435\u0441\u0442\u043e\u0432, \u043d\u043e \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0435\u0435, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0430 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<pre><code class=\"javascript\">\/\/ Omitted pieces of code. \"test\": \"cross-env RTL_SKIP_AUTO_CLEANUP=true react-scripts test\", \/\/ Omitted pieces of code.<\/code><\/pre>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 <a href=\"https:\/\/github.com\/kentcdodds\/cross-env\" rel=\"noopener noreferrer nofollow\">cross-env<\/a>, \u0432\u044b \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435 <code>React Testing Library<\/code> \u043f\u0440\u043e\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u043e\u0447\u0438\u0441\u0442\u043a\u0443 \u043f\u043e\u0441\u043b\u0435 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0442\u0435\u0441\u0442\u0430. \u0411\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0430\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u0438 \u0441\u043f\u043e\u0441\u043e\u0431\u044b \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0437\u0434\u0435\u0441\u044c: <a href=\"https:\/\/testing-library.com\/docs\/react-testing-library\/setup\/#skipping-auto-cleanup\" rel=\"noopener noreferrer nofollow\">Skipping Auto Cleanup<\/a>.<br \/>\u0422\u0435\u043f\u0435\u0440\u044c \u0432\u0430\u0448\u0435\u0439 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0447\u0430\u0442\u044c \u043f\u0438\u0441\u0430\u0442\u044c \u0442\u0435\u0441\u0442\u044b, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u043c.<\/p>\n<h2>\u041d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0435 Feature File &#8212; \u0421\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f.<\/h2>\n<p>\u0427\u0442\u043e\u0431\u044b Cucumber \u0441\u043c\u043e\u0433 \u043f\u043e\u043d\u044f\u0442\u044c \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0438, \u043e\u043d\u0438 \u0434\u043e\u043b\u0436\u043d\u044b \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u043c \u043f\u0440\u0430\u0432\u0438\u043b\u0430\u043c \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0430, \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u043c\u044b\u043c <a href=\"https:\/\/cucumber.io\/docs\/gherkin\/\" rel=\"noopener noreferrer nofollow\">Gherkin<\/a>. \u0414\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u044b Gherkin \u0445\u0440\u0430\u043d\u044f\u0442\u0441\u044f \u0432 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0445 \u0444\u0430\u0439\u043b\u0430\u0445 <code>*.feature<\/code> \u0438 \u043e\u0431\u044b\u0447\u043d\u043e \u0432\u0435\u0440\u0441\u0438\u043e\u043d\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0432 \u0441\u0438\u0441\u0442\u0435\u043c\u0435 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044f \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430 \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u044b\u043c \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0435\u043d\u0438\u0435\u043c. \u0417\u0430 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0435\u0439 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c\u0441\u044f \u043a <a href=\"https:\/\/cucumber.io\/docs\/guides\/overview\/#what-is-gherkin\" rel=\"noopener noreferrer nofollow\">\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438<\/a>, \u043d\u043e \u043f\u0440\u043e\u0449\u0435 \u0432\u0441\u0435\u0433\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u044d\u0442\u043e \u043d\u0430 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435.<br \/>\u0421\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u0444\u0430\u0439\u043b <code>Container.feature<\/code> \u043d\u0430 \u043e\u0434\u043d\u043e\u043c \u0443\u0440\u043e\u0432\u043d\u0435 \u0441 \u0444\u0430\u0439\u043b\u043e\u043c <code>Container.tsx<\/code>. \u042d\u0442\u043e\u0442 \u0444\u0430\u0439\u043b \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u0441\u0435\u043a\u0446\u0438\u0439, \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0449\u0438\u0445\u0441\u044f \u0441 <a href=\"https:\/\/cucumber.io\/docs\/gherkin\/reference\/?sbsearch=keyword#keywords\" rel=\"noopener noreferrer nofollow\">\u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0445 \u0441\u043b\u043e\u0432<\/a>.<\/p>\n<p><a href=\"https:\/\/cucumber.io\/docs\/gherkin\/reference\/?sbsearch=keyword#feature\" rel=\"noopener noreferrer nofollow\"><strong><u>Feature<\/u><\/strong><\/a><strong>.<\/strong><\/p>\n<blockquote>\n<p>\u041d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0433\u043e \u0441\u043b\u043e\u0432\u0430 Feature &#8212; \u0434\u0430\u0442\u044c \u043f\u043e\u0432\u0435\u0440\u0445\u043d\u043e\u0441\u0442\u043d\u043e\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0438 \u0441\u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0435 \u0441 \u043d\u0435\u0439 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0438. \u041f\u0435\u0440\u0432\u044b\u043c \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u043c \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u043c \u0441\u043b\u043e\u0432\u043e\u043c \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0435 Gherkin \u0432\u0441\u0435\u0433\u0434\u0430 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c Feature, \u0437\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u0441\u043b\u0435\u0434\u0443\u0435\u0442 : \u043a\u043e\u0440\u043e\u0442\u043a\u0438\u0439 \u0442\u0435\u043a\u0441\u0442, \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0449\u0438\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u044e.<\/p>\n<\/blockquote>\n<p>\u0412 \u0432\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0432\u044b \u0431\u0443\u0434\u0435\u0442\u0435 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c drag-and-drop, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0443\u0441\u043b\u043e\u0436\u043d\u044f\u0442\u044c, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043d\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u043a\u0430\u043a \u0435\u0441\u0442\u044c:<\/p>\n<p><code>File: src\/components\/Container\/Container.feature<\/code><\/p>\n<pre><code class=\"javascript\">\/\/ Omitted pieces of code. Feature: Drag and Drop \/\/ Omitted pieces of code.<\/code><\/pre>\n<p><a href=\"https:\/\/cucumber.io\/docs\/gherkin\/reference\/?sbsearch=keyword#rule\" rel=\"noopener noreferrer nofollow\"><strong><u>Rule<\/u><\/strong><\/a><strong>.<\/strong><\/p>\n<blockquote>\n<p>\u041a\u043b\u044e\u0447\u0435\u0432\u043e\u0435 \u0441\u043b\u043e\u0432\u043e Rule \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u043e \u0434\u043b\u044f \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043e\u0434\u043d\u043e\u0433\u043e \u0431\u0438\u0437\u043d\u0435\u0441-\u043f\u0440\u0430\u0432\u0438\u043b\u0430, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043e. \u041e\u043d\u043e \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u0434\u043b\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0430. Rule \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0435\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0442\u043d\u043e\u0441\u044f\u0442\u0441\u044f \u043a \u0434\u0430\u043d\u043d\u043e\u043c\u0443 \u0431\u0438\u0437\u043d\u0435\u0441-\u043f\u0440\u0430\u0432\u0438\u043b\u0443. Rule \u0434\u043e\u043b\u0436\u043d\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u043e\u0434\u0438\u043d \u0438\u043b\u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0435\u0432, \u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0438\u0440\u0443\u044e\u0449\u0438\u0445 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u043e.<\/p>\n<\/blockquote>\n<p>\u0425\u043e\u0442\u044f \u044d\u0442\u043e \u0441\u043b\u043e\u0432\u043e \u043d\u0435\u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0432\u043a\u043b\u044e\u0447\u0438\u043c \u0432 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443.<\/p>\n<p><code>File: src\/components\/Container\/Container.feature<\/code><\/p>\n<pre><code class=\"javascript\">\/\/ Omitted pieces of code. Rule: Check drag and drop behavior \/\/ Omitted pieces of code.<\/code><\/pre>\n<p><a href=\"https:\/\/cucumber.io\/docs\/gherkin\/reference\/#examples\" rel=\"noopener noreferrer nofollow\"><strong><u>Scenario (Example)<\/u><\/strong><\/a><strong>.<\/strong><\/p>\n<blockquote>\n<p>\u042d\u0442\u043e \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440, \u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0438\u0440\u0443\u044e\u0449\u0438\u0439 \u0431\u0438\u0437\u043d\u0435\u0441-\u043f\u0440\u0430\u0432\u0438\u043b\u0430. \u041e\u043d \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u0441\u043f\u0438\u0441\u043a\u0430 \u0448\u0430\u0433\u043e\u0432.<\/p>\n<\/blockquote>\n<p><code>File: src\/components\/Container\/Container.feature<\/code><\/p>\n<pre><code class=\"javascript\">\/\/ Omitted pieces of code. Scenario: DropBoxContainer appearance \/\/ Omitted pieces of code.<\/code><\/pre>\n<p><a href=\"https:\/\/cucumber.io\/docs\/gherkin\/reference\/?sbsearch=keyword#steps\" rel=\"noopener noreferrer nofollow\"><strong><u>Steps<\/u><\/strong><\/a><strong>.<\/strong><\/p>\n<blockquote>\n<p>\u041a\u0430\u0436\u0434\u044b\u0439 \u0448\u0430\u0433 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u0441 Given, When, Then, And \u0438\u043b\u0438 But.<br \/> Cucumber \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u043a\u0430\u0436\u0434\u044b\u0439 \u0448\u0430\u0433 \u0432 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0438 \u043f\u043e \u043e\u0447\u0435\u0440\u0435\u0434\u0438, \u0432 \u0442\u043e\u0439 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0432\u044b \u0438\u0445 \u043d\u0430\u043f\u0438\u0441\u0430\u043b\u0438. \u041a\u043e\u0433\u0434\u0430 Cucumber \u043f\u044b\u0442\u0430\u0435\u0442\u0441\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u0448\u0430\u0433, \u043e\u043d \u0438\u0449\u0435\u0442 \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u044e\u0449\u0435\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0448\u0430\u0433\u0430 \u0434\u043b\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f.<\/p>\n<\/blockquote>\n<p>\u0428\u0430\u0433\u0438 \u0434\u043b\u044f \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0442\u0435\u0441\u0442\u0430 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u044b \u0438 \u043f\u043e\u043d\u044f\u0442\u043d\u044b.<\/p>\n<p><code>File: src\/components\/Container\/Container.feature<\/code><\/p>\n<pre><code class=\"javascript\">\/\/ Omitted pieces of code. When I load the page Then I should see the 'drop box container' \/\/ Omitted pieces of code.<\/code><\/pre>\n<p>\u0412 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u043c \u0438\u0442\u043e\u0433\u0435 \u0444\u0430\u0439\u043b <code>Container.feature<\/code> \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<p><code>File: src\/components\/Container\/Container.feature<\/code><\/p>\n<pre><code class=\"javascript\">Feature: Drag and Drop    Rule: Check drag and drop behavior      Scenario: DropBoxContainer appearance       When I load the page       Then I should see the 'drop box container'      Scenario Outline: DropBoxContainer data appearance       When I load the page       Then I should see the '&lt;dishName>' dish        Examples:         | dishName          |         | Stir-Fried Cat    |         | Whisker Omelet    |         | Cat tails         |         | Delicate cat paws |         | Wool pancakes     |         | Cat's minion      |      Scenario: Drag and drop behavior       When I drag the 'Stir-Fried Cat' dish from the first table and drop it on the third table with the 'Cat tails' dish       Then I should see that the first table contains 'Cat tails' dish       And I should see that the third table contains 'Stir-Fried Cat' dish<\/code><\/pre>\n<h3>Data-testid.<\/h3>\n<p>\u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435, \u0438\u0445 \u043d\u0443\u0436\u043d\u043e \u043a\u0430\u043a\u0438\u043c-\u0442\u043e \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043d\u0430\u0439\u0442\u0438. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432\u044b \u0431\u0443\u0434\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0430\u0442\u0440\u0438\u0431\u0443\u0442 <code>data-testid<\/code>, \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b. \u042d\u0442\u043e \u043f\u043e\u0445\u043e\u0436\u0435 \u043d\u0430 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Document\/getElementById\" rel=\"noopener noreferrer nofollow\">Document.getElementById()<\/a>, \u043d\u043e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f react \u0438\u043c\u0435\u0435\u0442 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0441\u0432\u043e\u0438 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u043c\u0435\u0442\u043e\u0434\u044b. \u0412 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u0432\u044b \u0431\u0443\u0434\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>ByTestId<\/code>, \u043d\u043e \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0438 \u043c\u043d\u043e\u0433\u043e \u0434\u0440\u0443\u0433\u0438\u0445: <a href=\"https:\/\/testing-library.com\/docs\/react-testing-library\/cheatsheet\/#queries\" rel=\"noopener noreferrer nofollow\">Cheat sheet<\/a>.<br \/> \u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0431\u044b\u043b \u043d\u0430\u0439\u0434\u0435\u043d \u043f\u043e \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u0443 \u0442\u0435\u0441\u0442\u0430, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0440\u0438\u0441\u0432\u043e\u0438\u0442\u044c \u0435\u043c\u0443 \u044d\u0442\u043e\u0442 \u0430\u0442\u0440\u0438\u0431\u0443\u0442.<\/p>\n<p><code>File: src\/components\/DnD\/DropBox\/DropBoxContainer.tsx<\/code><\/p>\n<pre><code class=\"javascript\">\/\/ Omitted pieces of code. return (  &lt;div className={styles.container} data-testid={\"drop box container\"}>    {selections.map((item, index) => {      return (        &lt;div className={styles.itemContainer} key={index}>          &lt;DropBox            index={index}            selection={selections[index]}            updateSelectionsOrder={updateSelectionsOrder}          \/>          &lt;Table \/>        &lt;\/div>      );    })}  &lt;\/div> ); \/\/ Omitted pieces of code.<\/code><\/pre>\n<p>\u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0432\u0430\u043c \u0442\u0430\u043a\u0436\u0435 \u043d\u0443\u0436\u043d\u043e \u043d\u0430\u0437\u043d\u0430\u0447\u0438\u0442\u044c \u0435\u0449\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0442\u0430\u043a\u0438\u0445 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 \u0434\u0440\u0443\u0433\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c:<\/p>\n<p><code>File: src\/components\/DnD\/DropBox\/DropBox.tsx<\/code><\/p>\n<pre><code class=\"javascript\">\/\/ Omitted pieces of code. return (  &lt;div       className={clsx(styles.dropContainer, {         [styles.hovered]: isHovered,       })}       ref={drop}       data-testid={`drop box ${index}`}     >       &lt;DragBox dragItem={selection} index={index} \/>     &lt;\/div> );  \/\/ Omitted pieces of code.<\/code><\/pre>\n<p><code>File: src\/components\/DnD\/DragBox\/DragBox.tsx<\/code><\/p>\n<pre><code class=\"javascript\">\/\/ Omitted pieces of code. return (  &lt;div<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-342880","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/342880","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=342880"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/342880\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=342880"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=342880"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=342880"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}