From 8eed1f2de75e0b8c9bfd9c4f0569273217dbda62 Mon Sep 17 00:00:00 2001 From: Aliullov Vlad Date: Tue, 24 Dec 2024 01:39:21 +0400 Subject: [PATCH] WIP. revert changes --- .../devextreme-themebuilder/jest.config.js | 2 +- .../src/modules/bootstrap-extractor.ts | 3 +- .../tests/modules/builder.test.ts | 130 +++++++++++++++--- 3 files changed, 110 insertions(+), 25 deletions(-) diff --git a/packages/devextreme-themebuilder/jest.config.js b/packages/devextreme-themebuilder/jest.config.js index b9a4fcddb77e..fe184e8c9fe6 100644 --- a/packages/devextreme-themebuilder/jest.config.js +++ b/packages/devextreme-themebuilder/jest.config.js @@ -10,7 +10,7 @@ module.exports = { }], }, testMatch: [ - '**/tests/**/builder.test.ts', + '**/tests/**/*.test.ts', ], coverageThreshold: { global: { diff --git a/packages/devextreme-themebuilder/src/modules/bootstrap-extractor.ts b/packages/devextreme-themebuilder/src/modules/bootstrap-extractor.ts index 144e76e7b68e..de11b8b180a2 100644 --- a/packages/devextreme-themebuilder/src/modules/bootstrap-extractor.ts +++ b/packages/devextreme-themebuilder/src/modules/bootstrap-extractor.ts @@ -93,11 +93,10 @@ export default class BootstrapExtractor { async sassProcessor(): Promise { const functions = await this.readSassFile('_functions.scss'); const variables = await this.readSassFile('_variables.scss'); - + const variablesDarkFile = '_variables-dark.scss'; const variablesDark = this.version === 5 && existsSync(this.getFilePath(variablesDarkFile)) ? await this.readSassFile(variablesDarkFile) : ''; // TODO: can be removed safely in bootstrap@6 - console.log('------readSassFile---->'); const result = `${functions} ${variables.replace('@import "variables-dark";', '')} ${variablesDark} diff --git a/packages/devextreme-themebuilder/tests/modules/builder.test.ts b/packages/devextreme-themebuilder/tests/modules/builder.test.ts index 8943a9f14cae..b4f0f8ac7620 100644 --- a/packages/devextreme-themebuilder/tests/modules/builder.test.ts +++ b/packages/devextreme-themebuilder/tests/modules/builder.test.ts @@ -11,31 +11,103 @@ const normalizeCss = (css: string): string => css .replace(/\s*\/\*[\s\S]*?\*\/\s*/g, '') .trim(); -function findDifference(str1: string, str2: string) { - let start = 0; - let end1 = str1.length; - let end2 = str2.length; - - // Найти начало различий - while (start < str1.length && start < str2.length && str1[start] === str2[start]) { - start++; - } - - // Найти конец различий - while (end1 > start && end2 > start && str1[end1 - 1] === str2[end2 - 1]) { - end1--; - end2--; - } - - // Вернуть отличающиеся подстроки - return [str1.slice(start, end1), str2.slice(start, end2)]; -} - describe('Builder integration tests', () => { + test('Build theme without parameters', async () => { + const config: ConfigSettings = { + command: commands.BUILD_THEME, + outputColorScheme: 'custom-scheme', + }; + + return buildTheme(config).then((result) => { + expect(result.css).not.toBe(''); + expect(result.swatchSelector).toBe(null); + expect(Object.keys(result.compiledMetadata).length).toBeGreaterThan(100); + expect(result.widgets.length).toBeGreaterThan(50); + expect(result.unusedWidgets.length).toBe(0); + expect(result.version).toBe(version); + }); + }, buildTimeout); + + test('Build base theme with swatch', async () => { + const config: ConfigSettings = { + command: commands.BUILD_THEME, + makeSwatch: true, + outputColorScheme: 'custom-scheme', + }; + + return buildTheme(config).then((result) => { + expect(result.css).not.toBe(''); + expect(result.swatchSelector).toBe('.dx-swatch-custom-scheme'); + }); + }, buildTimeout); + test('Build theme according to bootstrap', async () => { + const config: ConfigSettings = { + command: commands.BUILD_THEME, + inputFile: 'some.less', + data: '', + outputColorScheme: 'custom-scheme', + }; + + return buildTheme(config).then((result) => { + expect(result.css).not.toBe(''); + }); + }, buildTimeout); + + test('Build bootstrap 5 theme', async () => { + const config: ConfigSettings = { + command: commands.BUILD_THEME, + inputFile: 'bootstrap5.scss', + bootstrapVersion: 5, + data: '', + outputColorScheme: 'custom-scheme', + }; + + return buildTheme(config).then((result) => { + expect(result.css).not.toBe(''); + }); + }, buildTimeout); + + test('Build theme with changed color constants (generic)', async () => { + const allChangedVariables = metadata.generic.map((item) => ({ + key: item.Key, + value: item.Type === 'color' ? '#abcdef' : '10px', + })); + + allChangedVariables.push({ key: '@undefined-variable', value: '#abcdef' }); + + const config: ConfigSettings = { + command: commands.BUILD_THEME, + outputColorScheme: 'custom-scheme', + items: allChangedVariables, + }; + + return buildTheme(config).then((result) => { + expect(result.css).not.toBe(''); + expect(result.css.includes('#abcdef')).toBe(true); + }); + }, buildTimeout); + + test('Build theme with changed color constants (material)', async () => { + const allChangedVariables = metadata.material.map((item) => ({ + key: item.Key, + value: item.Type === 'color' ? '#abcdef' : '10px', + })); + + const config: ConfigSettings = { + command: commands.BUILD_THEME, + outputColorScheme: 'custom-scheme', + baseTheme: 'material.blue.light', + items: allChangedVariables, + }; + + return buildTheme(config).then((result) => { + expect(result.css).not.toBe(''); + expect(result.css.includes('#abcdef')).toBe(true); + }); + }, buildTimeout); test('Theme built without parameters is the same that in distribution (generic)', async () => { - console.log('------start builder.test---->'); const config: ConfigSettings = { command: commands.BUILD_THEME, outputColorScheme: 'custom-scheme', @@ -46,9 +118,23 @@ describe('Builder integration tests', () => { const themeBuilderCss = normalizeCss(result.css); const cssPath = path.resolve(__dirname, '../../../devextreme/artifacts/css/dx.light.css'); const distributionCss = normalizeCss(readFileSync(cssPath, 'utf8')); - expect(themeBuilderCss).toBe(distributionCss); }); }, buildTimeout); + test('Theme built without parameters is the same that in distribution (material)', async () => { + const config: ConfigSettings = { + command: commands.BUILD_THEME, + outputColorScheme: 'custom-scheme', + baseTheme: 'material.blue.light', + items: [], + }; + + return buildTheme(config).then((result) => { + const themeBuilderCss = normalizeCss(result.css); + const cssPath = path.resolve(__dirname, '../../../devextreme/artifacts/css/dx.material.blue.light.css'); + const distributionCss = normalizeCss(readFileSync(cssPath, 'utf8')); + expect(themeBuilderCss).toBe(distributionCss); + }); + }, buildTimeout); });