feat: test

Author: Nelfimov

.pnp.cjs

@@ -0,0 +1,17 @@
+<component name="ProjectRunConfigurationManager">
+  <configuration default="false" name="test-unit" type="ShConfigurationType">
+    <option name="SCRIPT_TEXT" value="yarn test unit" />
+    <option name="INDEPENDENT_SCRIPT_PATH" value="true" />
+    <option name="SCRIPT_PATH" value="" />
+    <option name="SCRIPT_OPTIONS" value="" />
+    <option name="INDEPENDENT_SCRIPT_WORKING_DIRECTORY" value="true" />
+    <option name="SCRIPT_WORKING_DIRECTORY" value="$PROJECT_DIR$" />
+    <option name="INDEPENDENT_INTERPRETER_PATH" value="true" />
+    <option name="INTERPRETER_PATH" value="/bin/zsh" />
+    <option name="INTERPRETER_OPTIONS" value="" />
+    <option name="EXECUTE_IN_TERMINAL" value="true" />
+    <option name="EXECUTE_SCRIPT_FILE" value="false" />
+    <envs />
+    <method v="2" />
+  </configuration>
+</component>

.run/test-unit.run.xml

@@ -23,12 +23,16 @@
     "styled-tools": "1.7.2"
   },
   "devDependencies": {
+    "@emotion/jest": "11.9.4",
     "@emotion/react": "11.9.3",
     "@emotion/styled": "11.9.3",
+    "@testing-library/react": "14.1.0",
     "@types/react": "18.2.20",
+    "@types/react-dom": "18",
     "@types/styled-system": "5.1.16",
     "csstype": "3.1.2",
     "react": "18.2.0",
+    "react-dom": "18.2.0",
     "styled-system": "5.1.5"
   },
   "peerDependencies": {

packages/payment-widget/package.json

@@ -0,0 +1,58 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { matchers }      from '@emotion/jest'
+import { RenderResult }  from '@testing-library/react'
+import { fireEvent }     from '@testing-library/react'
+import { render }        from '@testing-library/react'
+import { screen }        from '@testing-library/react'
+
+import React            from 'react'
+import { IntlProvider } from 'react-intl'
+import { theme }        from './theme/src'
+import { ThemeProvider }        from './theme/src'
+import { Settings }     from '../interfaces'
+import { Form }         from './form.component'
+
+expect.extend(matchers)
+
+type CustomRender = (element: React.ReactNode | React.ReactNode[]) => RenderResult
+
+global.ResizeObserver = jest.fn().mockImplementation(() => ({
+  observe: jest.fn(),
+  unobserve: jest.fn(),
+  disconnect: jest.fn(),
+}))
+
+const customRender: CustomRender = (element) => {
+  return render(
+    // @ts-ignore
+    <ThemeProvider>
+      <IntlProvider locale='ru' onError={() => {}}>
+        {element}
+      </IntlProvider>
+    </ThemeProvider>
+  )
+}
+
+describe('Form fragment', () => {
+  const settings: Settings = {
+    storeId: '123'
+  }
+
+  it.only('button reacts to filled in amount', () => {
+    customRender(<Form settings={settings} />)
+
+    const button = screen.getByRole('button', { name: 'Оплатить' })
+
+    expect(button).toBeTruthy()
+    expect(button).toHaveStyleRule('background-color', theme.colors.button.disabled.backgroundColor)
+
+    const input = screen.getByPlaceholderText('payment_widget.order_price')
+
+    fireEvent.change(input, { target: { value: '100' }})
+
+    expect(screen.getByRole('button', { name: 'Оплатить' })).toHaveStyleRule('background-color', theme.colors.button.default.backgroundColor)
+  })
+})

packages/payment-widget/src/ui/form.test.tsx

@@ -269,12 +269,16 @@ __metadata:
     "@atls-ui-parts/input": "npm:0.0.13"
     "@atls-ui-parts/layout": "npm:0.0.7"
     "@atls-ui-parts/text": "npm:0.0.11"
+    "@emotion/jest": "npm:11.9.4"
     "@emotion/react": "npm:11.9.3"
     "@emotion/styled": "npm:11.9.3"
+    "@testing-library/react": "npm:^14.1.0"
     "@types/react": "npm:18.2.20"
+    "@types/react-dom": "npm:^18"
     "@types/styled-system": "npm:5.1.16"
     csstype: "npm:3.1.2"
     react: "npm:18.2.0"
+    react-dom: "npm:18.2.0"
     react-intl: "npm:6.4.4"
     react-laag: "npm:2.0.5"
     styled-system: "npm:5.1.5"
@@ -771,7 +775,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/css-prettifier@npm:^1.1.3":
+"@emotion/css-prettifier@npm:^1.0.1, @emotion/css-prettifier@npm:^1.1.3":
   version: 1.1.3
   resolution: "@emotion/css-prettifier@npm:1.1.3"
   dependencies:
@@ -806,6 +810,27 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@emotion/jest@npm:11.9.4":
+  version: 11.9.4
+  resolution: "@emotion/jest@npm:11.9.4"
+  dependencies:
+    "@babel/runtime": "npm:^7.13.10"
+    "@emotion/css-prettifier": "npm:^1.0.1"
+    chalk: "npm:^4.1.0"
+    specificity: "npm:^0.4.1"
+    stylis: "npm:4.0.13"
+  peerDependencies:
+    "@types/jest": ^26.0.14 || ^27.0.0 || ^28.0.0
+    enzyme-to-json: ^3.2.1
+  peerDependenciesMeta:
+    "@types/jest":
+      optional: true
+    enzyme-to-json:
+      optional: true
+  checksum: b25afc2d4edd07d42695fe2c1dc87642546cf053e421a9d6334998e6b22bd1947df2034e7f2609b8463304ec3e2cf88435c4ae51ba6e9936d75cd1380019c9a3
+  languageName: node
+  linkType: hard
+
 "@emotion/jest@npm:^11.9.1":
   version: 11.11.0
   resolution: "@emotion/jest@npm:11.11.0"
@@ -1804,6 +1829,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@testing-library/dom@npm:^9.0.0":
+  version: 9.3.3
+  resolution: "@testing-library/dom@npm:9.3.3"
+  dependencies:
+    "@babel/code-frame": "npm:^7.10.4"
+    "@babel/runtime": "npm:^7.12.5"
+    "@types/aria-query": "npm:^5.0.1"
+    aria-query: "npm:5.1.3"
+    chalk: "npm:^4.1.0"
+    dom-accessibility-api: "npm:^0.5.9"
+    lz-string: "npm:^1.5.0"
+    pretty-format: "npm:^27.0.2"
+  checksum: dbb4ce29730058e7ad2f610a1f1907e1ac28abfd8389d36d11fad7d48ef7bc08b1c87f89a97cc1cd1ac85b38665697fdecae712ca5ed3e7b86ffcdd07ae7b52e
+  languageName: node
+  linkType: hard
+
 "@testing-library/jest-dom@npm:^5.16.1, @testing-library/jest-dom@npm:^5.16.2":
   version: 5.17.0
   resolution: "@testing-library/jest-dom@npm:5.17.0"
@@ -1857,6 +1898,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@testing-library/react@npm:^14.1.0":
+  version: 14.1.0
+  resolution: "@testing-library/react@npm:14.1.0"
+  dependencies:
+    "@babel/runtime": "npm:^7.12.5"
+    "@testing-library/dom": "npm:^9.0.0"
+    "@types/react-dom": "npm:^18.0.0"
+  peerDependencies:
+    react: ^18.0.0
+    react-dom: ^18.0.0
+  checksum: 3369b0818317456725a9ae4c012b50b88e94406d2c7688faddba918add0bcb46957f6bd0d760a1fbfc06986adf7d048e14c767901c7adb6f20d6e175197a77ac
+  languageName: node
+  linkType: hard
+
 "@tootallnate/once@npm:1":
   version: 1.1.2
   resolution: "@tootallnate/once@npm:1.1.2"
@@ -2067,6 +2122,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/react-dom@npm:^18, @types/react-dom@npm:^18.0.0":
+  version: 18.2.15
+  resolution: "@types/react-dom@npm:18.2.15"
+  dependencies:
+    "@types/react": "npm:*"
+  checksum: e3aa4cbd0edbae1d9d7ced55da2306a2eae966aa6fcf9a2d220ff304676bf40d541ef3dd4c84d64f29002d71699816a2043685a6799d8c9342d210d4019bebeb
+  languageName: node
+  linkType: hard
+
 "@types/react-test-renderer@npm:>=16.9.0":
   version: 18.0.0
   resolution: "@types/react-test-renderer@npm:18.0.0"
@@ -6264,7 +6328,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-dom@npm:^18.2.0":
+"react-dom@npm:18.2.0, react-dom@npm:^18.2.0":
   version: 18.2.0
   resolution: "react-dom@npm:18.2.0"
   dependencies:
@@ -6896,6 +6960,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"stylis@npm:4.0.13":
+  version: 4.0.13
+  resolution: "stylis@npm:4.0.13"
+  checksum: 3231e328da331d07673edc39f1bf0e741d0b891473764b116fe4f4eb22c595435f142860f7a54ddff32bf64ecdd3dbe356cc608a029c4f066d5c5b7f1315d996
+  languageName: node
+  linkType: hard
+
 "stylis@npm:4.2.0":
   version: 4.2.0
   resolution: "stylis@npm:4.2.0"