From e3ed26cded405e35b79187315a24e60f192229ac Mon Sep 17 00:00:00 2001 From: hextion <100ishundred@gmail.com> Date: Thu, 22 Aug 2024 19:27:06 +0300 Subject: [PATCH 1/3] chore: useless code --- packages/accordion/src/Component.test.tsx | 15 +-------------- 1 file changed, 1 insertion(+), 14 deletions(-) diff --git a/packages/accordion/src/Component.test.tsx b/packages/accordion/src/Component.test.tsx index de72975b22..5987d176a9 100644 --- a/packages/accordion/src/Component.test.tsx +++ b/packages/accordion/src/Component.test.tsx @@ -1,21 +1,8 @@ import React from 'react'; -import { fireEvent, render } from '@testing-library/react'; +import { render } from '@testing-library/react'; import { Accordion, AccordionProps } from '.'; -const control = ( -
-); - const renderComponent = (props: Partial = {}) => render( From fe2dc1ec0edf17b2387736e39bf39a6ee547f033 Mon Sep 17 00:00:00 2001 From: hextion <100ishundred@gmail.com> Date: Thu, 22 Aug 2024 19:33:57 +0300 Subject: [PATCH 2/3] fix(accordion): correct SSR --- .changeset/breezy-snails-rhyme.md | 5 ++++ jest.config.js | 27 ++++++++++++++----- package.json | 2 +- packages/accordion/src/Component.ssr.test.tsx | 14 ++++++++++ .../accordion/src/hooks/useMeasureHeight.ts | 4 ++- packages/accordion/tsconfig.json | 5 +++- 6 files changed, 48 insertions(+), 9 deletions(-) create mode 100644 .changeset/breezy-snails-rhyme.md create mode 100644 packages/accordion/src/Component.ssr.test.tsx diff --git a/.changeset/breezy-snails-rhyme.md b/.changeset/breezy-snails-rhyme.md new file mode 100644 index 0000000000..83073fd202 --- /dev/null +++ b/.changeset/breezy-snails-rhyme.md @@ -0,0 +1,5 @@ +--- +'@alfalab/core-components-accordion': patch +--- + +Исправление SSR diff --git a/jest.config.js b/jest.config.js index b2459d7618..9594e664d1 100644 --- a/jest.config.js +++ b/jest.config.js @@ -1,9 +1,7 @@ const ignoredModules = ['simplebar']; -module.exports = { +const baseConfig = { preset: 'ts-jest/presets/js-with-ts', - testEnvironment: 'jest-environment-jsdom-sixteen', - setupFilesAfterEnv: ['./packages/setupTests.ts'], modulePathIgnorePatterns: ['dist'], globalSetup: './packages/globalSetup.ts', globals: { @@ -21,9 +19,26 @@ module.exports = { '@alfalab/core-components-(.*)$': '/packages/$1/src', '\\.css$': 'identity-obj-proxy', }, - testMatch: ['**/*.test.ts?(x)', '!**/*.screenshots.test.ts?(x)'], testPathIgnorePatterns: ['codemod'], transformIgnorePatterns: [`node_modules/(?!${ignoredModules.join('|')})`], - coverageReporters: ['lcov', 'text', 'text-summary', 'clover'], - coveragePathIgnorePatterns: ['index.ts'], +} + +module.exports = { + projects: [ + { + ...baseConfig, + displayName: 'csr', /* client side rendering */ + testEnvironment: 'jest-environment-jsdom-sixteen', + setupFilesAfterEnv: ['./packages/setupTests.ts'], + testMatch: ['**/*.test.ts?(x)', '!**/*.(screenshots|ssr).test.ts?(x)'], + coveragePathIgnorePatterns: ['index.ts'], + coverageReporters: ['lcov', 'text', 'text-summary', 'clover'], + }, + { + ...baseConfig, + displayName: 'ssr', /* server side rendering */ + testEnvironment: 'node', + testMatch: ['**/*.ssr.test.ts?(x)'], + } + ], }; diff --git a/package.json b/package.json index b4331b7331..2964304c1b 100644 --- a/package.json +++ b/package.json @@ -27,7 +27,7 @@ "lint:css": "stylelint ./packages/**/*.css", "lint:js": "eslint ./packages --ext .ts,.tsx,.js,.jsx --max-warnings 0", "lint:deps": "node ./bin/lint-deps.js", - "test": "jest --watchAll=false --env=jsdom-sixteen", + "test": "jest --watchAll=false", "test:screenshots": "./bin/run-screenshots.sh", "test:codemod": "jest --config=jest.codemod.config.js packages/codemod/", "format": "prettier --write \"./{packages,bin}/**/*.{ts,tsx,js,jsx,css,json}\"", diff --git a/packages/accordion/src/Component.ssr.test.tsx b/packages/accordion/src/Component.ssr.test.tsx new file mode 100644 index 0000000000..8e6eabb753 --- /dev/null +++ b/packages/accordion/src/Component.ssr.test.tsx @@ -0,0 +1,14 @@ +import React from 'react'; +import { renderToString } from 'react-dom/server'; + +import { Accordion } from '.'; + +test('Accordion', () => { + let htmlString: string | undefined; + + expect(() => { + htmlString = renderToString(); + }).not.toThrow(); + + expect(htmlString).toEqual(expect.any(String)); +}); diff --git a/packages/accordion/src/hooks/useMeasureHeight.ts b/packages/accordion/src/hooks/useMeasureHeight.ts index 4b8447a41f..b8b9e69800 100644 --- a/packages/accordion/src/hooks/useMeasureHeight.ts +++ b/packages/accordion/src/hooks/useMeasureHeight.ts @@ -1,6 +1,8 @@ import { Ref, useEffect, useRef, useState } from 'react'; import { ResizeObserver as ResizeObserverPolyfill } from '@juggle/resize-observer'; +import { isClient } from '@alfalab/core-components-shared'; + function createUseMeasureHook( measure: (element: T) => U, ): () => [U | undefined, Ref]; @@ -17,7 +19,7 @@ function createUseMeasureHook( const [measurement, setMeasurement] = useState(initial); const resizeObserver = useRef(null); - if (!resizeObserver.current) { + if (isClient() && !resizeObserver.current) { const ResizeObserver = window.ResizeObserver || ResizeObserverPolyfill; resizeObserver.current = new ResizeObserver(([{ target }]) => { diff --git a/packages/accordion/tsconfig.json b/packages/accordion/tsconfig.json index 66f0dafd75..4f6fe07fc1 100644 --- a/packages/accordion/tsconfig.json +++ b/packages/accordion/tsconfig.json @@ -9,5 +9,8 @@ "@alfalab/core-components-*": ["../*/src"], } }, - "references": [{ "path": "../typography" }] + "references": [ + { "path": "../typography", }, + { "path": "../shared" } + ] } From 7dc7cd938643800ccc296b90200f3edede713c1f Mon Sep 17 00:00:00 2001 From: hextion <100ishundred@gmail.com> Date: Thu, 22 Aug 2024 20:55:40 +0300 Subject: [PATCH 3/3] chore: eslint warning --- packages/accordion/src/hooks/useMeasureHeight.ts | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/packages/accordion/src/hooks/useMeasureHeight.ts b/packages/accordion/src/hooks/useMeasureHeight.ts index b8b9e69800..507f21473a 100644 --- a/packages/accordion/src/hooks/useMeasureHeight.ts +++ b/packages/accordion/src/hooks/useMeasureHeight.ts @@ -1,7 +1,7 @@ import { Ref, useEffect, useRef, useState } from 'react'; import { ResizeObserver as ResizeObserverPolyfill } from '@juggle/resize-observer'; -import { isClient } from '@alfalab/core-components-shared'; +import { fnUtils, isClient } from '@alfalab/core-components-shared'; function createUseMeasureHook( measure: (element: T) => U, @@ -28,15 +28,13 @@ function createUseMeasureHook( }); } - // eslint-disable-next-line consistent-return useEffect(() => { - if (element) { - resizeObserver.current?.observe(element); + if (fnUtils.isNil(element)) return fnUtils.noop; + resizeObserver.current?.observe(element); - return () => { - resizeObserver.current?.unobserve(element); - }; - } + return () => { + resizeObserver.current?.unobserve(element); + }; }, [element]); useEffect(() => resizeObserver.current?.disconnect(), []);