From 984cba760f98d3899d5c6d319d0939770c27c444 Mon Sep 17 00:00:00 2001 From: Andrew Patton Date: Sat, 20 Jan 2024 11:32:38 -0800 Subject: [PATCH] :white_check_mark: Add basic InputText.test.tsx --- .pnp.cjs | 16 +++++++- packages/input-text/package.json | 12 +++++- packages/input-text/src/InputText.test.tsx | 45 ++++++++++++++++++++++ yarn.lock | 19 ++++++--- 4 files changed, 83 insertions(+), 9 deletions(-) create mode 100644 packages/input-text/src/InputText.test.tsx diff --git a/.pnp.cjs b/.pnp.cjs index 2a868d7d..1ed5e822 100755 --- a/.pnp.cjs +++ b/.pnp.cjs @@ -253,11 +253,16 @@ const RAW_RUNTIME_STATE = "packageLocation": "./.yarn/__virtual__/@acusti-input-text-virtual-584d3a4a59/1/packages/input-text/",\ "packageDependencies": [\ ["@acusti/input-text", "virtual:afdae6bed2220ffeb070ee40379649c9baf1f40f92a18dda206ea109ee08e197c8d4ded52ffaeedb5def9932505c08fa82afb8ccafbb0155d514fb4046b48c2a#workspace:packages/input-text"],\ + ["@testing-library/dom", "npm:9.3.1"],\ + ["@testing-library/react", "virtual:afe4e4a1c85e0b022894420d9b3e04e61e9c8c5fe86707d0599325649d85a5d5c03732ca16e1484fddaba15449239efc39b69b9e5b4963f252ae7a4aee0b9a39#npm:14.0.0"],\ + ["@testing-library/user-event", "virtual:afe4e4a1c85e0b022894420d9b3e04e61e9c8c5fe86707d0599325649d85a5d5c03732ca16e1484fddaba15449239efc39b69b9e5b4963f252ae7a4aee0b9a39#npm:14.4.3"],\ ["@types/react", "npm:18.2.45"],\ ["@types/react-dom", null],\ + ["happy-dom", "npm:12.10.3"],\ ["react", "npm:18.2.0"],\ ["react-dom", "virtual:afe4e4a1c85e0b022894420d9b3e04e61e9c8c5fe86707d0599325649d85a5d5c03732ca16e1484fddaba15449239efc39b69b9e5b4963f252ae7a4aee0b9a39#npm:18.2.0"],\ - ["typescript", "patch:typescript@npm%3A5.3.3#optional!builtin::version=5.3.3&hash=e012d7"]\ + ["typescript", "patch:typescript@npm%3A5.3.3#optional!builtin::version=5.3.3&hash=e012d7"],\ + ["vitest", "virtual:afdae6bed2220ffeb070ee40379649c9baf1f40f92a18dda206ea109ee08e197c8d4ded52ffaeedb5def9932505c08fa82afb8ccafbb0155d514fb4046b48c2a#npm:1.1.0"]\ ],\ "packagePeers": [\ "@types/react-dom",\ @@ -271,8 +276,15 @@ const RAW_RUNTIME_STATE = "packageLocation": "./packages/input-text/",\ "packageDependencies": [\ ["@acusti/input-text", "workspace:packages/input-text"],\ + ["@testing-library/dom", "npm:9.3.1"],\ + ["@testing-library/react", "virtual:afe4e4a1c85e0b022894420d9b3e04e61e9c8c5fe86707d0599325649d85a5d5c03732ca16e1484fddaba15449239efc39b69b9e5b4963f252ae7a4aee0b9a39#npm:14.0.0"],\ + ["@testing-library/user-event", "virtual:afe4e4a1c85e0b022894420d9b3e04e61e9c8c5fe86707d0599325649d85a5d5c03732ca16e1484fddaba15449239efc39b69b9e5b4963f252ae7a4aee0b9a39#npm:14.4.3"],\ ["@types/react", "npm:18.2.45"],\ - ["typescript", "patch:typescript@npm%3A5.3.3#optional!builtin::version=5.3.3&hash=e012d7"]\ + ["happy-dom", "npm:12.10.3"],\ + ["react", "npm:18.2.0"],\ + ["react-dom", "virtual:afe4e4a1c85e0b022894420d9b3e04e61e9c8c5fe86707d0599325649d85a5d5c03732ca16e1484fddaba15449239efc39b69b9e5b4963f252ae7a4aee0b9a39#npm:18.2.0"],\ + ["typescript", "patch:typescript@npm%3A5.3.3#optional!builtin::version=5.3.3&hash=e012d7"],\ + ["vitest", "virtual:afdae6bed2220ffeb070ee40379649c9baf1f40f92a18dda206ea109ee08e197c8d4ded52ffaeedb5def9932505c08fa82afb8ccafbb0155d514fb4046b48c2a#npm:1.1.0"]\ ],\ "linkType": "SOFT"\ }]\ diff --git a/packages/input-text/package.json b/packages/input-text/package.json index 808a9f0e..1c67fae9 100644 --- a/packages/input-text/package.json +++ b/packages/input-text/package.json @@ -23,6 +23,9 @@ "ts", "flow" ], + "scripts": { + "test": "vitest" + }, "repository": { "type": "git", "url": "https://github.com/acusti/uikit.git", @@ -35,8 +38,15 @@ }, "homepage": "https://github.com/acusti/uikit/tree/main/packages/input-text#readme", "devDependencies": { + "@testing-library/dom": "^9.3.1", + "@testing-library/react": "^14.0.0", + "@testing-library/user-event": "^14.4.3", "@types/react": "^18.2.45", - "typescript": "^5.3.3" + "happy-dom": "^12.10.3", + "react": "^18", + "react-dom": "^18", + "typescript": "^5.3.3", + "vitest": "^1.1.0" }, "peerDependencies": { "react": "^16.8 || ^17 || ^18", diff --git a/packages/input-text/src/InputText.test.tsx b/packages/input-text/src/InputText.test.tsx new file mode 100644 index 00000000..23c394e1 --- /dev/null +++ b/packages/input-text/src/InputText.test.tsx @@ -0,0 +1,45 @@ +// @vitest-environment happy-dom +import { cleanup, render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import React from 'react'; // eslint-disable-line @typescript-eslint/no-unused-vars +import { afterEach, describe, expect, it } from 'vitest'; + +import InputText from './InputText.js'; + +afterEach(cleanup); + +describe('CSSValueInput.tsx', () => { + it('renders a text input with the given props.initialValue', () => { + render(); + // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion + const input = screen.getByRole('textbox') as HTMLInputElement; + expect(input.value).toBe('foo Bar'); + }); + + it('allows value state to diverge from initialValue when updated by user but resets value state if initialValue changes', async () => { + const user = userEvent.setup(); + const { rerender } = render(); + // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion + const input = screen.getByRole('textbox') as HTMLInputElement; + expect(input.value).toBe('foo Bar'); + await user.type(input, '{ArrowLeft}{ArrowLeft}{ArrowLeft}{Delete}b'); + expect(input.value).toBe('foo bar'); + // re-render with same initialValue, value state shouldn’t change + rerender(); + expect(input.value).toBe('foo bar'); + // re-render with different initialValue, value state should reset + rerender(); + expect(input.value).toBe('foo Bar '); + }); + + it('supports rendering multi-line inputs as a