From 7d998a01bfcca32263d47c6b5840d5dc552dba77 Mon Sep 17 00:00:00 2001 From: Yuki Takei Date: Tue, 17 Sep 2024 07:54:24 +0000 Subject: [PATCH 1/3] set maxWidth --- apps/app/src/client/components/PageHeader/PageTitleHeader.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/app/src/client/components/PageHeader/PageTitleHeader.tsx b/apps/app/src/client/components/PageHeader/PageTitleHeader.tsx index e0bca67d386..df72f58e108 100644 --- a/apps/app/src/client/components/PageHeader/PageTitleHeader.tsx +++ b/apps/app/src/client/components/PageHeader/PageTitleHeader.tsx @@ -129,6 +129,7 @@ export const PageTitleHeader = (props: Props): JSX.Element => { ${isRenameInputShown ? 'invisible' : ''} text-truncate ${isMovable ? 'border border-2 rounded-2' : ''} ${borderColorClass} `} + style={{ maxWidth: inputMaxWidth }} onClick={onClickPageTitle} > {pageTitle} From 707f096f2da04c06698fab760ecb8c52d9bb1b5d Mon Sep 17 00:00:00 2001 From: Yuki Takei Date: Tue, 17 Sep 2024 09:12:03 +0000 Subject: [PATCH 2/3] add faker --- package.json | 1 + yarn.lock | 36 ++++++++---------------------------- 2 files changed, 9 insertions(+), 28 deletions(-) diff --git a/package.json b/package.json index 3646f522a09..e961fddd927 100644 --- a/package.json +++ b/package.json @@ -81,6 +81,7 @@ "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-rulesdir": "^0.2.2", "eslint-plugin-vitest": "^0.2.3", + "@faker-js/faker": "^9.0.1", "glob": "^8.1.0", "mock-require": "^3.0.3", "nodemon": "^3.1.3", diff --git a/yarn.lock b/yarn.lock index 6dbf75b544b..6eeeaf9941f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2079,6 +2079,11 @@ resolved "https://registry.yarnpkg.com/@exodus/schemasafe/-/schemasafe-1.1.1.tgz#006ab8b33b1aec6d2992c75e5918c65197388aa2" integrity sha512-Pd7+aGvWIaTDL5ecV4ZBEtBrjXnk8/ly5xyHbikxVhgcq7qhihzHWHbcYmFupQBT2A5ggNZGvT7Bpj0M6AKHjA== +"@faker-js/faker@^9.0.1": + version "9.0.1" + resolved "https://registry.yarnpkg.com/@faker-js/faker/-/faker-9.0.1.tgz#5e201ffc4524d00a200c648d2be55be6e25b3c3e" + integrity sha512-4mDeYIgM3By7X6t5E6eYwLAa+2h4DeZDF7thhzIg6XB76jeEvMwadYAMCFJL/R4AnEBcAUO9+gL0vhy3s+qvZA== + "@fastify/busboy@^2.0.0": version "2.1.1" resolved "https://registry.yarnpkg.com/@fastify/busboy/-/busboy-2.1.1.tgz#b9da6a878a371829a0502c9b6c1c143ef6663f4d" @@ -17066,7 +17071,7 @@ string-template@>=1.0.0: resolved "https://registry.yarnpkg.com/string-template/-/string-template-1.0.0.tgz#9e9f2233dc00f218718ec379a28a5673ecca8b96" integrity sha1-np8iM9wA8hhxjsN5oopWc+zKi5Y= -"string-width-cjs@npm:string-width@^4.2.0": +"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: version "4.2.3" resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== @@ -17084,15 +17089,6 @@ string-width@=4.2.2: is-fullwidth-code-point "^3.0.0" strip-ansi "^6.0.0" -"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: - version "4.2.3" - resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" - integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== - dependencies: - emoji-regex "^8.0.0" - is-fullwidth-code-point "^3.0.0" - strip-ansi "^6.0.1" - string-width@^5.0.1, string-width@^5.1.2: version "5.1.2" resolved "https://registry.yarnpkg.com/string-width/-/string-width-5.1.2.tgz#14f8daec6d81e7221d2a357e668cab73bdbca794" @@ -17176,7 +17172,7 @@ stringify-entities@^4.0.0: character-entities-html4 "^2.0.0" character-entities-legacy "^3.0.0" -"strip-ansi-cjs@npm:strip-ansi@^6.0.1": +"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1: version "6.0.1" resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== @@ -17190,13 +17186,6 @@ strip-ansi@^3.0.0: dependencies: ansi-regex "^2.0.0" -strip-ansi@^6.0.0, strip-ansi@^6.0.1: - version "6.0.1" - resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" - integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== - dependencies: - ansi-regex "^5.0.1" - strip-ansi@^7.0.1, strip-ansi@^7.1.0: version "7.1.0" resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45" @@ -18978,7 +18967,7 @@ word-wrap@^1.2.3: resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.3.tgz#610636f6b1f703891bd34771ccb17fb93b47079c" integrity sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ== -"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0": +"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0: version "7.0.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== @@ -18996,15 +18985,6 @@ wrap-ansi@^6.2.0: string-width "^4.1.0" strip-ansi "^6.0.0" -wrap-ansi@^7.0.0: - version "7.0.0" - resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" - integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== - dependencies: - ansi-styles "^4.0.0" - string-width "^4.1.0" - strip-ansi "^6.0.0" - wrap-ansi@^8.1.0: version "8.1.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214" From 80e9fdad4bdc8aab20177601c728051123340191 Mon Sep 17 00:00:00 2001 From: Yuki Takei Date: Tue, 24 Sep 2024 12:16:13 +0000 Subject: [PATCH 3/3] rewrite test with faker --- .../PageHeader/PageTitleHeader.spec.tsx | 20 +++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/apps/app/src/client/components/PageHeader/PageTitleHeader.spec.tsx b/apps/app/src/client/components/PageHeader/PageTitleHeader.spec.tsx index 82a5a030cc8..02c1ebbfe5a 100644 --- a/apps/app/src/client/components/PageHeader/PageTitleHeader.spec.tsx +++ b/apps/app/src/client/components/PageHeader/PageTitleHeader.spec.tsx @@ -1,11 +1,13 @@ import '@testing-library/jest-dom/vitest'; +import { faker } from '@faker-js/faker'; import type { IPagePopulatedToShowRevision } from '@growi/core'; import { fireEvent, render, screen, waitFor, } from '@testing-library/react'; import { mock } from 'vitest-mock-extended'; + import { EditorMode } from '~/stores-universal/ui'; import { PageTitleHeader } from './PageTitleHeader'; @@ -32,7 +34,7 @@ describe('PageTitleHeader Component with untitled page', () => { it('should render the textbox correctly', async() => { // arrange const currentPage = mock({ - _id: 'dummy-id', + _id: faker.database.mongodbObjectId(), path: '/path/to/page/Untitled-1', }); @@ -63,9 +65,10 @@ describe('PageTitleHeader Component', () => { it('should render the title correctly', async() => { // arrange + const pageTitle = faker.lorem.slug(); const currentPage = mock({ - _id: 'dummy-id', - path: '/path/to/page/page-title', + _id: faker.database.mongodbObjectId(), + path: `/path/to/page/${pageTitle}`, }); // act @@ -73,7 +76,7 @@ describe('PageTitleHeader Component', () => { // assert // header should be rendered - const headerElement = screen.getByText('page-title'); + const headerElement = screen.getByText(pageTitle); await waitFor(() => { expect(headerElement).toBeInTheDocument(); expect(headerElement).not.toHaveClass('invisible'); @@ -85,15 +88,16 @@ describe('PageTitleHeader Component', () => { it('should render text input after clicking', async() => { // arrange + const pageTitle = faker.lorem.slug(); const currentPage = mock({ - _id: 'dummy-id', - path: '/path/to/page/page-title', + _id: faker.database.mongodbObjectId(), + path: `/path/to/page/${pageTitle}`, }); // act render(); - const headerElement = screen.getByText('page-title'); + const headerElement = screen.getByText(pageTitle); await waitFor(() => expect(headerElement).toBeInTheDocument()); // click @@ -103,7 +107,7 @@ describe('PageTitleHeader Component', () => { const inputElement = screen.getByRole('textbox'); await waitFor(() => { expect(inputElement).toBeInTheDocument(); - expect(inputElement).toHaveValue('page-title'); + expect(inputElement).toHaveValue(pageTitle); expect(headerElement).toHaveClass('invisible'); }); });