mirror of
https://github.com/qlik-oss/nebula.js.git
synced 2025-12-25 01:04:14 -05:00
chore: merge master into main (#1461)
* chore(deps): update minor and patch (#1451) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(deps): update dependency rollup to v4.9.4 (#1452) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(deps): update dependency caniuse-lite to v1.0.30001576 (#1453) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * fix: dark theme for listbox (#1449) * chore: fix dark theme for listbox * chore: add test * chore: listbox search bg * chore: add baseline * chore: fix tests * chore: use alpha shift for search bg * chore: baseline * chore(deps): update minor and patch (#1459) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(deps): update dependency prettier to v3.2.2 (#1460) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * feat: add option to inlineDynamicImports (#1458) * feat: add option to inlineDynamicImports * fix: add documentation and run yarn spec * fix: format readme * chore(deps): bump follow-redirects in /examples/sn-hello-react (#1456) Bumps [follow-redirects](https://github.com/follow-redirects/follow-redirects) from 1.14.9 to 1.15.4. - [Release notes](https://github.com/follow-redirects/follow-redirects/releases) - [Commits](https://github.com/follow-redirects/follow-redirects/compare/v1.14.9...v1.15.4) --- updated-dependencies: - dependency-name: follow-redirects dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps): bump follow-redirects from 1.15.1 to 1.15.4 (#1457) Bumps [follow-redirects](https://github.com/follow-redirects/follow-redirects) from 1.15.1 to 1.15.4. - [Release notes](https://github.com/follow-redirects/follow-redirects/releases) - [Commits](https://github.com/follow-redirects/follow-redirects/compare/v1.15.1...v1.15.4) --- updated-dependencies: - dependency-name: follow-redirects dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Elise <fdq@qlik.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
This commit is contained in:
@@ -82,7 +82,7 @@ commands:
|
||||
jobs:
|
||||
validate:
|
||||
docker:
|
||||
- image: cimg/node:21.4.0
|
||||
- image: cimg/node:21.5.0
|
||||
working_directory: ~/project
|
||||
steps:
|
||||
- attach_workspace:
|
||||
@@ -106,7 +106,7 @@ jobs:
|
||||
|
||||
build:
|
||||
docker:
|
||||
- image: cimg/node:21.4.0
|
||||
- image: cimg/node:21.5.0
|
||||
|
||||
working_directory: ~/project
|
||||
resource_class: large
|
||||
@@ -130,7 +130,7 @@ jobs:
|
||||
|
||||
test-integration:
|
||||
docker:
|
||||
- image: cimg/node:21.4.0
|
||||
- image: cimg/node:21.5.0
|
||||
- image: browserless/chrome:1-puppeteer-7.1.0
|
||||
|
||||
working_directory: ~/project
|
||||
@@ -161,7 +161,7 @@ jobs:
|
||||
|
||||
test-create:
|
||||
docker:
|
||||
- image: cimg/node:21.4.0
|
||||
- image: cimg/node:21.5.0
|
||||
- image: browserless/chrome:1-puppeteer-7.1.0
|
||||
|
||||
working_directory: ~/project
|
||||
|
||||
@@ -9,11 +9,11 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@nebula.js/stardust": "next",
|
||||
"@nebula.js/sn-mekko-chart": "1.3.0",
|
||||
"@nebula.js/sn-mekko-chart": "1.4.0",
|
||||
"enigma.js": "2.12.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "7.23.7",
|
||||
"parcel": "^2.10.3"
|
||||
"parcel": "^2.11.0"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,8 +6,8 @@
|
||||
"devDependencies": {
|
||||
"@emotion/react": "^11.11.3",
|
||||
"@emotion/styled": "^11.11.0",
|
||||
"@mui/icons-material": "^5.15.2",
|
||||
"@mui/material": "^5.15.2",
|
||||
"@mui/icons-material": "^5.15.4",
|
||||
"@mui/material": "^5.15.4",
|
||||
"@nebula.js/conversion": "^5.0.0-alpha.2",
|
||||
"@nebula.js/locale": "^5.0.0-alpha.2",
|
||||
"@nebula.js/supernova": "^5.0.0-alpha.2",
|
||||
|
||||
@@ -137,6 +137,12 @@ function getSearchColor(getListboxStyle) {
|
||||
return color;
|
||||
}
|
||||
|
||||
function getSearchBGColor(bgCol, getListboxStyle) {
|
||||
const searchBgColorObj = new Color(getListboxStyle('', 'backgroundColor'));
|
||||
searchBgColorObj.setAlpha(0.7);
|
||||
return searchBgColorObj.isInvalid() ? bgCol : searchBgColorObj.toRGBA();
|
||||
}
|
||||
|
||||
export default function getStyles({ app, themeApi, theme, components = [], checkboxes = false }) {
|
||||
const overrides = getOverridesAsObject(components);
|
||||
const getListboxStyle = (path, prop) => themeApi.getStyle('object.listBox', path, prop);
|
||||
@@ -153,7 +159,9 @@ export default function getStyles({ app, themeApi, theme, components = [], check
|
||||
? resolveBgImage({ bgImage: themeOverrides.background.image }, app)
|
||||
: undefined;
|
||||
|
||||
const searchBgColor = 'rgba(255, 255, 255, 0.7)';
|
||||
const bgColor = bgComponentColor || getListboxStyle('', 'backgroundColor') || theme.palette.background.default;
|
||||
|
||||
const searchBgColor = getSearchBGColor(bgColor, getListboxStyle);
|
||||
const searchColor = getSearchColor(getListboxStyle);
|
||||
|
||||
const headerFontStyle = themeOverrides.header?.fontStyle || {};
|
||||
@@ -165,7 +173,7 @@ export default function getStyles({ app, themeApi, theme, components = [], check
|
||||
|
||||
return {
|
||||
background: {
|
||||
backgroundColor: bgComponentColor || getListboxStyle('', 'backgroundColor') || theme.palette.background.default,
|
||||
backgroundColor: bgColor,
|
||||
backgroundImage: bgImage?.url && !bgImage?.url.startsWith('url(') ? `url('${bgImage.url}')` : undefined,
|
||||
backgroundRepeat: 'no-repeat',
|
||||
backgroundSize: bgImage?.size,
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
{
|
||||
"module": "esm/index.js",
|
||||
"peerDependencies": {
|
||||
"@mui/material": "^5.15.2",
|
||||
"@mui/icons-material": "^5.15.2",
|
||||
"@mui/material": "^5.15.4",
|
||||
"@mui/icons-material": "^5.15.4",
|
||||
"@emotion/react": "^11.11.3",
|
||||
"@emotion/styled": "^11.11.0",
|
||||
"react": "^17.0.2 || ^18.1.0",
|
||||
|
||||
@@ -46,8 +46,8 @@
|
||||
"devDependencies": {
|
||||
"@emotion/react": "^11.11.3",
|
||||
"@emotion/styled": "^11.11.0",
|
||||
"@mui/icons-material": "^5.15.2",
|
||||
"@mui/material": "^5.15.2",
|
||||
"@mui/icons-material": "^5.15.4",
|
||||
"@mui/material": "^5.15.4",
|
||||
"@nebula.js/conversion": "^5.0.0-alpha.2",
|
||||
"@nebula.js/enigma-mocker": "^5.0.0-alpha.2",
|
||||
"@nebula.js/locale": "^5.0.0-alpha.2",
|
||||
|
||||
@@ -38,7 +38,7 @@ describe('set theme', () => {
|
||||
});
|
||||
|
||||
create({ _inherit: false }, resolveMock);
|
||||
expect(extendMock.mock.calls[0]).toEqual([true, {}, base, light, {}]);
|
||||
expect(extendMock.mock.calls[0]).toEqual([true, {}, base, {}, light]);
|
||||
});
|
||||
|
||||
test('should extend from dark theme when type is dark', () => {
|
||||
@@ -47,7 +47,7 @@ describe('set theme', () => {
|
||||
});
|
||||
|
||||
create({ type: 'dark', _inherit: false }, resolveMock);
|
||||
expect(extendMock.mock.calls[0]).toEqual([true, {}, base, dark, {}]);
|
||||
expect(extendMock.mock.calls[0]).toEqual([true, {}, base, {}, dark]);
|
||||
});
|
||||
|
||||
test('should extend and add base inheritance', () => {
|
||||
@@ -56,7 +56,7 @@ describe('set theme', () => {
|
||||
});
|
||||
|
||||
create({}, resolveMock);
|
||||
expect(extendMock.mock.calls[0]).toEqual([true, {}, base, light, baseIn]);
|
||||
expect(extendMock.mock.calls[0]).toEqual([true, {}, base, baseIn, light]);
|
||||
});
|
||||
|
||||
test('should not extend scales and palette arrays', () => {
|
||||
|
||||
@@ -12,7 +12,7 @@ export default function setTheme(t, resolve) {
|
||||
if (t._inherit === false || t._inherit === 'false') {
|
||||
baseInherit = {};
|
||||
}
|
||||
const root = extend(true, {}, baseRawJSON, colorRawJSON, baseInherit);
|
||||
const root = extend(true, {}, baseRawJSON, baseInherit, colorRawJSON);
|
||||
// avoid merging known array objects as it could cause issues if they are of different types (pyramid vs class) or length
|
||||
const rawThemeJSON = extend(true, {}, root, { scales: null, palettes: { data: null, ui: null } }, t);
|
||||
if (!rawThemeJSON.palettes.data || !rawThemeJSON.palettes.data.length) {
|
||||
|
||||
@@ -17,5 +17,21 @@
|
||||
"@H6": "10px"
|
||||
},
|
||||
"type": "dark",
|
||||
"color": "@B98"
|
||||
"color": "@B98",
|
||||
"object": {
|
||||
"listBox": {
|
||||
"backgroundColor": "@B20",
|
||||
"title": {
|
||||
"main": {
|
||||
"color": "@B98",
|
||||
"fontSize": "14px",
|
||||
"fontWeight": "bold"
|
||||
}
|
||||
},
|
||||
"content": {
|
||||
"color": "#@B98",
|
||||
"fontSize": "12px"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -16,18 +16,25 @@ nebula build
|
||||
Build nebula.js visualization
|
||||
|
||||
Options:
|
||||
--version Show version number [boolean]
|
||||
--config, -c Path to a JavaScript config file
|
||||
[string] [default: "nebula.config.js"]
|
||||
--watch, -w Watch source files
|
||||
[choices: "umd", "systemjs"] [default: "umd"]
|
||||
--sourcemap, -m Generate source map [boolean] [default: true]
|
||||
--mode Explicitly set mode
|
||||
[string] [choices: "production", "development"]
|
||||
--core Set a core build target [string] [default: "core"]
|
||||
--typescript Enable typescript bundling [boolean] [default: false]
|
||||
--preferBuiltins Configuration option that specifies whether to use Node.js built-in modules [boolean] [default: true]
|
||||
--browser Instructs the build to use the browser module resolutions in package.json and adds 'browser' to exportConditions if it is not present so browser conditionals in exports are applied. [boolean] [default: false]
|
||||
--version Show version number [boolean]
|
||||
--config, -c Path to a JavaScript config file
|
||||
[string] [default: "nebula.config.js"]
|
||||
--watch, -w Watch source files
|
||||
[choices: "umd", "systemjs"] [default: "umd"]
|
||||
--sourcemap, -m Generate source map [boolean] [default: true]
|
||||
--mode Explicitly set mode
|
||||
[string] [choices: "production", "development"]
|
||||
--core Set a core build target [string] [default: "core"]
|
||||
--typescript Enable typescript bundling [boolean] [default: false]
|
||||
--preferBuiltins Specify whether to use Node.js built-in modules.
|
||||
[boolean] [default: true]
|
||||
--browser Use the browser module resolutions in package.json and adds
|
||||
'browser' to exportConditions if it is not present so browser
|
||||
conditionals in exports are applied.
|
||||
[boolean] [default: false]
|
||||
--inlineDynamicImports Inlines dynamic imports, allowing for code-splitting
|
||||
regardless of format.
|
||||
[boolean] [default: false]
|
||||
```
|
||||
|
||||
## Example
|
||||
|
||||
@@ -61,7 +61,7 @@ const config = ({
|
||||
mode = 'production',
|
||||
format = 'umd',
|
||||
cwd = process.cwd(),
|
||||
argv = { sourcemap: true },
|
||||
argv = { sourcemap: true, inlineDynamicImports: false },
|
||||
core,
|
||||
behaviours: {
|
||||
getExternal = getExternalDefault,
|
||||
@@ -175,6 +175,7 @@ const config = ({
|
||||
output: {
|
||||
banner,
|
||||
format,
|
||||
inlineDynamicImports: argv.inlineDynamicImports,
|
||||
file: path.resolve(dir, outputFile),
|
||||
name: outputName,
|
||||
sourcemap,
|
||||
|
||||
@@ -54,6 +54,12 @@ const options = {
|
||||
type: 'boolean',
|
||||
default: false,
|
||||
},
|
||||
inlineDynamicImports: {
|
||||
description:
|
||||
'In Rollup, inlineDynamicImports option is a configuration option that allows code-splitting while still creating a single bundle.',
|
||||
type: 'boolean',
|
||||
default: false,
|
||||
},
|
||||
};
|
||||
|
||||
// nebula build --watch - watch umd bundle
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
"@babel/cli": "7.23.4",
|
||||
"@babel/core": "7.23.7",
|
||||
"@babel/plugin-transform-react-jsx": "7.23.4",
|
||||
"@babel/preset-env": "7.23.7",
|
||||
"@babel/preset-env": "7.23.8",
|
||||
"@rollup/plugin-babel": "6.0.4",
|
||||
"@rollup/plugin-commonjs": "25.0.7",
|
||||
"@rollup/plugin-json": "6.1.0",
|
||||
@@ -33,14 +33,14 @@
|
||||
"@rollup/plugin-terser": "0.4.4",
|
||||
"chalk": "4.1.2",
|
||||
"extend": "3.0.2",
|
||||
"postcss": "^8.4.32",
|
||||
"rollup": "4.9.2",
|
||||
"postcss": "^8.4.33",
|
||||
"rollup": "4.9.5",
|
||||
"rollup-plugin-postcss": "4.0.2",
|
||||
"rollup-plugin-sourcemaps": "0.6.3",
|
||||
"yargs": "17.7.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@rollup/plugin-typescript": "11.1.5",
|
||||
"@rollup/plugin-typescript": "11.1.6",
|
||||
"tslib": "*",
|
||||
"typescript": ">=5.3.3"
|
||||
}
|
||||
|
||||
@@ -29,7 +29,7 @@
|
||||
"dependencies": {
|
||||
"@babel/cli": "7.23.4",
|
||||
"@babel/core": "7.23.7",
|
||||
"@babel/preset-env": "7.23.7",
|
||||
"@babel/preset-env": "7.23.8",
|
||||
"@nebula.js/stardust": "^4.9.0",
|
||||
"@rollup/plugin-babel": "6.0.4",
|
||||
"@rollup/plugin-commonjs": "25.0.7",
|
||||
@@ -39,7 +39,7 @@
|
||||
"extend": "3.0.2",
|
||||
"fs-extra": "11.2.0",
|
||||
"node-event-emitter": "0.0.1",
|
||||
"rollup": "4.9.2",
|
||||
"rollup": "4.9.5",
|
||||
"yargs": "17.7.2"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -51,10 +51,10 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "7.23.7",
|
||||
"@babel/preset-env": "7.23.7",
|
||||
"@babel/preset-env": "7.23.8",
|
||||
"@babel/preset-react": "7.23.3",
|
||||
"@mui/material": "^5.15.2",
|
||||
"@mui/system": "^5.15.2",
|
||||
"@mui/material": "^5.15.4",
|
||||
"@mui/system": "^5.15.4",
|
||||
"@nebula.js/enigma-mocker": "^5.0.0-alpha.2",
|
||||
"@nebula.js/nucleus": "^5.0.0-alpha.2",
|
||||
"@nebula.js/snapshooter": "^5.0.0-alpha.2",
|
||||
@@ -71,6 +71,6 @@
|
||||
"monaco-editor-webpack-plugin": "7.1.0",
|
||||
"react": "18.2.0",
|
||||
"react-dom": "18.2.0",
|
||||
"react-router-dom": "6.21.1"
|
||||
"react-router-dom": "6.21.2"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3674,9 +3674,9 @@ flatted@^3.1.0:
|
||||
integrity sha512-JaTY/wtrcSyvXJl4IMFHPKyFur1sE9AUqc0QnhOaJ0CxHtAoIV8pYDzeEfAaNEtGkOfq4gr3LBFmdXW5mOQFnA==
|
||||
|
||||
follow-redirects@^1.0.0:
|
||||
version "1.14.9"
|
||||
resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.9.tgz#dd4ea157de7bfaf9ea9b3fbd85aa16951f78d8d7"
|
||||
integrity sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==
|
||||
version "1.15.4"
|
||||
resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.4.tgz#cdc7d308bf6493126b17ea2191ea0ccf3e535adf"
|
||||
integrity sha512-Cr4D/5wlrb0z9dgERpUL3LrmPKVDsETIJhaCMeDfuFYcqa5bldGV6wBsAN6X/vxlXQtFBMrXdXxdL8CbDTGniw==
|
||||
|
||||
for-each@^0.3.3:
|
||||
version "0.3.3"
|
||||
|
||||
28
package.json
28
package.json
@@ -42,10 +42,10 @@
|
||||
"@babel/helper-plugin-utils": "7.22.5",
|
||||
"@babel/plugin-proposal-object-rest-spread": "7.20.7",
|
||||
"@babel/plugin-transform-react-jsx": "7.23.4",
|
||||
"@babel/preset-env": "7.23.7",
|
||||
"@babel/preset-env": "7.23.8",
|
||||
"@babel/preset-react": "7.23.3",
|
||||
"@commitlint/cli": "18.4.3",
|
||||
"@commitlint/config-conventional": "18.4.3",
|
||||
"@commitlint/cli": "18.4.4",
|
||||
"@commitlint/config-conventional": "18.4.4",
|
||||
"@playwright/test": "1.40.1",
|
||||
"@rollup/plugin-babel": "6.0.4",
|
||||
"@rollup/plugin-commonjs": "25.0.7",
|
||||
@@ -53,23 +53,23 @@
|
||||
"@rollup/plugin-node-resolve": "15.2.3",
|
||||
"@rollup/plugin-replace": "5.0.5",
|
||||
"@rollup/plugin-terser": "0.4.4",
|
||||
"@testing-library/jest-dom": "^6.1.6",
|
||||
"@testing-library/jest-dom": "^6.2.0",
|
||||
"@testing-library/react": "^14.1.2",
|
||||
"@testing-library/user-event": "^14.5.2",
|
||||
"babel-loader": "9.1.3",
|
||||
"babel-plugin-istanbul": "6.1.1",
|
||||
"body-parser": "1.20.2",
|
||||
"cross-env": "7.0.3",
|
||||
"css-loader": "6.8.1",
|
||||
"css-loader": "6.9.0",
|
||||
"enigma.js": "2.12.0",
|
||||
"eslint": "8.56.0",
|
||||
"eslint-config-airbnb": "19.0.4",
|
||||
"eslint-config-prettier": "9.1.0",
|
||||
"eslint-plugin-import": "2.29.1",
|
||||
"eslint-plugin-jest": "^27.6.0",
|
||||
"eslint-plugin-jest": "^27.6.3",
|
||||
"eslint-plugin-jsx-a11y": "6.8.0",
|
||||
"eslint-plugin-mocha": "10.2.0",
|
||||
"eslint-plugin-prettier": "5.1.2",
|
||||
"eslint-plugin-prettier": "5.1.3",
|
||||
"eslint-plugin-react": "7.33.2",
|
||||
"express": "4.18.2",
|
||||
"husky": "8.0.3",
|
||||
@@ -78,23 +78,23 @@
|
||||
"jest-junit": "^16.0.0",
|
||||
"jest-location-mock": "^2.0.0",
|
||||
"jimp": "0.22.10",
|
||||
"lerna": "8.0.1",
|
||||
"lerna": "8.0.2",
|
||||
"lint-staged": "^15.2.0",
|
||||
"mocha-junit-reporter": "2.2.1",
|
||||
"picasso-plugin-q": "2.2.5",
|
||||
"picasso.js": "2.2.5",
|
||||
"prettier": "3.1.1",
|
||||
"picasso-plugin-q": "2.2.7",
|
||||
"picasso.js": "2.2.7",
|
||||
"prettier": "3.2.2",
|
||||
"puppeteer": "19.11.1",
|
||||
"qix-faker": "0.3.0",
|
||||
"rollup": "4.9.2",
|
||||
"rollup": "4.9.5",
|
||||
"rollup-plugin-dependency-flow": "0.3.0",
|
||||
"rollup-plugin-sass": "1.12.21",
|
||||
"style-loader": "3.3.3",
|
||||
"style-loader": "3.3.4",
|
||||
"whatwg-fetch": "^3.6.20",
|
||||
"yargs": "17.7.2"
|
||||
},
|
||||
"resolutions": {
|
||||
"**/caniuse-lite": "1.0.30001572",
|
||||
"**/caniuse-lite": "1.0.30001576",
|
||||
"**/react": "18.2.0",
|
||||
"**/react-dom": "18.2.0",
|
||||
"**/react-is": "18.2.0",
|
||||
|
||||
@@ -10,16 +10,16 @@
|
||||
"peerDependencies": {
|
||||
"@emotion/react": "^11.11.3",
|
||||
"@emotion/styled": "^11.11.0",
|
||||
"@mui/icons-material": "^5.15.2",
|
||||
"@mui/material": "^5.15.2",
|
||||
"@mui/icons-material": "^5.15.4",
|
||||
"@mui/material": "^5.15.4",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@emotion/react": "^11.11.3",
|
||||
"@emotion/styled": "^11.11.0",
|
||||
"@mui/icons-material": "^5.15.2",
|
||||
"@mui/material": "^5.15.2",
|
||||
"@mui/icons-material": "^5.15.4",
|
||||
"@mui/material": "^5.15.4",
|
||||
"react": "18.2.0",
|
||||
"react-dom": "18.2.0"
|
||||
}
|
||||
|
||||
@@ -26,14 +26,18 @@
|
||||
};
|
||||
}
|
||||
|
||||
const init = async (options = {}) => {
|
||||
const init = async (options = {}, theme = 'light') => {
|
||||
const element = window.document.querySelector('#object');
|
||||
if (options?.fixtureFile?.customRenderTestElementSize) {
|
||||
element.style.width = options.fixtureFile.customRenderTestElementSize.width;
|
||||
element.style.height = options.fixtureFile.customRenderTestElementSize.height;
|
||||
}
|
||||
const { app } = getMocks(options);
|
||||
const nebbie = window.stardust.embed(app);
|
||||
const nebbie = window.stardust.embed(app, {
|
||||
context: {
|
||||
theme,
|
||||
},
|
||||
});
|
||||
const listboxOptions = {
|
||||
...options,
|
||||
};
|
||||
@@ -75,7 +79,7 @@
|
||||
return sc;
|
||||
};
|
||||
|
||||
const { scenario, fixture, ...options } = getOptions() || {};
|
||||
const { scenario, fixture, theme, ...options } = getOptions() || {};
|
||||
|
||||
let fixtureFile;
|
||||
|
||||
@@ -85,9 +89,12 @@
|
||||
|
||||
const scenarioOptions = fixtureFile ? fixtureFile.options || {} : getScenarioOptions(scenario);
|
||||
|
||||
return init({
|
||||
fixtureFile,
|
||||
...scenarioOptions,
|
||||
...options,
|
||||
});
|
||||
return init(
|
||||
{
|
||||
fixtureFile,
|
||||
...scenarioOptions,
|
||||
...options,
|
||||
},
|
||||
theme
|
||||
);
|
||||
})();
|
||||
|
||||
@@ -82,6 +82,22 @@ test.describe('listbox mashup rendering test', () => {
|
||||
return expect(image).toMatchSnapshot(FILE_NAME);
|
||||
});
|
||||
|
||||
test('listbox search dark', async () => {
|
||||
const FILE_NAME = 'listbox_search_dark_B.png';
|
||||
const searchSelector = '.search input';
|
||||
|
||||
await page.goto(`${url}/listbox/listbox.html?scenario=standard&theme=dark`, { waitUntil: 'networkidle' });
|
||||
const search = await page.waitForSelector(searchSelector, { visible: true });
|
||||
|
||||
await search.click();
|
||||
await search.fill('B');
|
||||
|
||||
// Note that since we don't have a backend providing search results, we can't test highlighting and selected (green) rows.
|
||||
const selector = await page.locator(listboxSelector);
|
||||
const image = await selector.screenshot({ caret: 'hide' });
|
||||
return expect(image).toMatchSnapshot(FILE_NAME);
|
||||
});
|
||||
|
||||
test('hide toolbar', async () => {
|
||||
const FILE_NAME = 'listbox_no_toolbar.png';
|
||||
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 7.0 KiB |
Reference in New Issue
Block a user