From 8672389888ba46325cf614a4c7d95ba7a379e3a1 Mon Sep 17 00:00:00 2001 From: Amir Alami Date: Mon, 2 Dec 2024 11:56:53 +0100 Subject: [PATCH] chore: Replaces the test utils script with centralized one --- scripts/test-utils.js | 184 +----- .../test-utils-wrappers.test.tsx.snap | 575 +++++++++--------- 2 files changed, 315 insertions(+), 444 deletions(-) diff --git a/scripts/test-utils.js b/scripts/test-utils.js index f41a0153..e2f78ccc 100644 --- a/scripts/test-utils.js +++ b/scripts/test-utils.js @@ -2,183 +2,31 @@ // SPDX-License-Identifier: Apache-2.0 import { execaSync } from "execa"; import { globbySync } from "globby"; -import fs from "node:fs"; import path from "node:path"; -import { default as convertToSelectorUtil } from "@cloudscape-design/test-utils-converter"; +import { generateTestUtils } from "@cloudscape-design/test-utils-converter"; import { pluralizeComponentName } from "./pluralize.js"; -import { pascalCase, writeSourceFile } from "./utils.js"; +import { pascalCase } from "./utils.js"; -const components = globbySync(["src/test-utils/dom/**/index.ts", "!src/test-utils/dom/index.ts"]).map((fileName) => - fileName.replace("src/test-utils/dom/", "").replace("/index.ts", ""), -); - -function toWrapper(componentClass) { - return `${componentClass}Wrapper`; -} - -const configs = { - common: { - buildFinder: ({ componentName, componentNamePlural }) => ` - ElementWrapper.prototype.find${componentName} = function(selector) { - const rootSelector = \`.$\{${toWrapper(componentName)}.rootSelector}\`; - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, ${toWrapper(componentName)}); - }; - - ElementWrapper.prototype.findAll${componentNamePlural} = function(selector) { - return this.findAllComponents(${toWrapper(componentName)}, selector); - };`, - }, - dom: { - defaultExport: `export default function wrapper(root: Element = document.body) { if (document && document.body && !document.body.contains(root)) { console.warn('[AwsUi] [test-utils] provided element is not part of the document body, interactions may work incorrectly')}; return new ElementWrapper(root); }`, - buildFinderInterface: ({ componentName, componentNamePlural }) => ` - /** - * Returns the wrapper of the first ${componentName} that matches the specified CSS selector. - * If no CSS selector is specified, returns the wrapper of the first ${componentName}. - * If no matching ${componentName} is found, returns \`null\`. - * - * @param {string} [selector] CSS Selector - * @returns {${toWrapper(componentName)} | null} - */ - find${componentName}(selector?: string): ${toWrapper(componentName)} | null; - - /** - * Returns an array of ${componentName} wrapper that matches the specified CSS selector. - * If no CSS selector is specified, returns all of the ${componentNamePlural} inside the current wrapper. - * If no matching ${componentName} is found, returns an empty array. - * - * @param {string} [selector] CSS Selector - * @returns {Array<${toWrapper(componentName)}>} - */ - findAll${componentNamePlural}(selector?: string): Array<${toWrapper(componentName)}>;`, - }, - selectors: { - defaultExport: `export default function wrapper(root: string = 'body') { return new ElementWrapper(root); }`, - buildFinderInterface: ({ componentName, componentNamePlural }) => ` - /** - * Returns a wrapper that matches the ${componentNamePlural} with the specified CSS selector. - * If no CSS selector is specified, returns a wrapper that matches ${componentNamePlural}. - * - * @param {string} [selector] CSS Selector - * @returns {${toWrapper(componentName)}} - */ - find${componentName}(selector?: string): ${toWrapper(componentName)}; - - /** - * Returns a multi-element wrapper that matches ${componentNamePlural} with the specified CSS selector. - * If no CSS selector is specified, returns a multi-element wrapper that matches ${componentNamePlural}. - * - * @param {string} [selector] CSS Selector - * @returns {MultiElementWrapper<${toWrapper(componentName)}>} - */ - findAll${componentNamePlural}(selector?: string): MultiElementWrapper<${toWrapper(componentName)}>;`, +const componentNames = globbySync(["src/test-utils/dom/**/index.ts", "!src/test-utils/dom/index.ts"]).map( + (filePath) => { + const fileNameKebabCase = filePath.replace("src/test-utils/dom/", "").replace("/index.ts", ""); + return pascalCase(fileNameKebabCase); }, -}; - -function generateTestUtilMetaData() { - const testUtilsSrcDir = path.resolve("src/test-utils"); - const metaData = components.reduce((allMetaData, componentFolderName) => { - const absPathComponentFolder = path.resolve(testUtilsSrcDir, componentFolderName); - const relPathTestUtilFile = `./${path.relative(testUtilsSrcDir, absPathComponentFolder)}`; - - const componentNameKebab = componentFolderName; - const componentName = pascalCase(componentNameKebab); - const componentNamePlural = pluralizeComponentName(componentName); - - const componentMetaData = { - componentName, - componentNamePlural, - relPathTestUtilFile, - }; - - return allMetaData.concat(componentMetaData); - }, []); - - return metaData; -} - -function generateFindersInterfaces({ testUtilMetaData, testUtilType, configs }) { - const { buildFinderInterface } = configs[testUtilType]; - const findersInterfaces = testUtilMetaData.map(buildFinderInterface); - - // we need to redeclare the interface in its original definition, extending a re-export will not work - // https://github.com/microsoft/TypeScript/issues/12607 - const interfaces = `declare module '@cloudscape-design/test-utils-core/dist/${testUtilType}' { - interface ElementWrapper { - ${findersInterfaces.join("\n")} - } - }`; - - return interfaces; -} - -function generateFindersImplementations({ testUtilMetaData, configs }) { - const { buildFinder } = configs.common; - const findersImplementations = testUtilMetaData.map(buildFinder); - return findersImplementations.join("\n"); -} - -generateSelectorUtils(); -generateDomIndexFile(); -generateSelectorsIndexFile(); -compileTypescript(); - -function generateSelectorUtils() { - components.forEach((componentName) => { - const domFileName = `./src/test-utils/dom/${componentName}/index.ts`; - const domFileContent = fs.readFileSync(domFileName, "utf-8"); - const selectorsFileName = `./src/test-utils/selectors/${componentName}/index.ts`; - const selectorsFileContent = convertToSelectorUtil.default(domFileContent); - writeSourceFile(selectorsFileName, selectorsFileContent); - }); -} - -function generateDomIndexFile() { - const content = generateIndexFileContent({ - testUtilType: "dom", - testUtilMetaData: generateTestUtilMetaData(), - }); - writeSourceFile("./src/test-utils/dom/index.ts", content); -} - -function generateSelectorsIndexFile() { - const content = generateIndexFileContent({ - testUtilType: "selectors", - testUtilMetaData: generateTestUtilMetaData(), - }); - writeSourceFile("./src/test-utils/selectors/index.ts", content); -} - -function generateIndexFileContent({ testUtilType, testUtilMetaData }) { - const config = configs[testUtilType]; - if (config === undefined) { - throw new Error("Unknown test util type"); - } - - return [ - // language=TypeScript - `import { ElementWrapper } from '@cloudscape-design/test-utils-core/${testUtilType}';`, - `import '@cloudscape-design/components/test-utils/${testUtilType}';`, - `import { appendSelector } from '@cloudscape-design/test-utils-core/utils';`, - `export { ElementWrapper };`, - ...testUtilMetaData.map((metaData) => { - const { componentName, relPathTestUtilFile } = metaData; +); - return ` - import ${toWrapper(componentName)} from '${relPathTestUtilFile}'; - export { ${componentName}Wrapper }; - `; - }), - generateFindersInterfaces({ testUtilMetaData, testUtilType, configs }), - generateFindersImplementations({ testUtilMetaData, configs }), - config.defaultExport, - ].join("\n"); -} +generateTestUtils({ + testUtilsPath: path.resolve("src/test-utils"), + components: componentNames.map((name) => ({ + name, + pluralName: pluralizeComponentName(name), + })), +}); function compileTypescript() { const config = path.resolve("src/test-utils/tsconfig.json"); execaSync("tsc", ["-p", config, "--sourceMap", "--inlineSources"], { stdio: "inherit" }); } + +compileTypescript(); diff --git a/src/__tests__/__snapshots__/test-utils-wrappers.test.tsx.snap b/src/__tests__/__snapshots__/test-utils-wrappers.test.tsx.snap index bda0c9dd..b97c9790 100644 --- a/src/__tests__/__snapshots__/test-utils-wrappers.test.tsx.snap +++ b/src/__tests__/__snapshots__/test-utils-wrappers.test.tsx.snap @@ -1,297 +1,320 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html exports[`Generate test utils ElementWrapper > 'dom' ElementWrapper matches the snapshot 1`] = ` -"import { ElementWrapper } from '@cloudscape-design/test-utils-core/dom'; -import '@cloudscape-design/components/test-utils/dom'; +" +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import { ElementWrapper } from '@cloudscape-design/test-utils-core/dom'; import { appendSelector } from '@cloudscape-design/test-utils-core/utils'; + export { ElementWrapper }; - import BoardWrapper from './board'; - export { BoardWrapper }; - +import BoardWrapper from './board'; +import BoardItemWrapper from './board-item'; +import ItemsPaletteWrapper from './items-palette'; +import PaletteItemWrapper from './palette-item'; - import BoardItemWrapper from './board-item'; - export { BoardItemWrapper }; - - import ItemsPaletteWrapper from './items-palette'; - export { ItemsPaletteWrapper }; - +export { BoardWrapper }; +export { BoardItemWrapper }; +export { ItemsPaletteWrapper }; +export { PaletteItemWrapper }; - import PaletteItemWrapper from './palette-item'; - export { PaletteItemWrapper }; - declare module '@cloudscape-design/test-utils-core/dist/dom' { - interface ElementWrapper { - - /** - * Returns the wrapper of the first Board that matches the specified CSS selector. - * If no CSS selector is specified, returns the wrapper of the first Board. - * If no matching Board is found, returns \`null\`. - * - * @param {string} [selector] CSS Selector - * @returns {BoardWrapper | null} - */ - findBoard(selector?: string): BoardWrapper | null; - - /** - * Returns an array of Board wrapper that matches the specified CSS selector. - * If no CSS selector is specified, returns all of the Boards inside the current wrapper. - * If no matching Board is found, returns an empty array. - * - * @param {string} [selector] CSS Selector - * @returns {Array} - */ - findAllBoards(selector?: string): Array; - - /** - * Returns the wrapper of the first BoardItem that matches the specified CSS selector. - * If no CSS selector is specified, returns the wrapper of the first BoardItem. - * If no matching BoardItem is found, returns \`null\`. - * - * @param {string} [selector] CSS Selector - * @returns {BoardItemWrapper | null} - */ - findBoardItem(selector?: string): BoardItemWrapper | null; - - /** - * Returns an array of BoardItem wrapper that matches the specified CSS selector. - * If no CSS selector is specified, returns all of the BoardItems inside the current wrapper. - * If no matching BoardItem is found, returns an empty array. - * - * @param {string} [selector] CSS Selector - * @returns {Array} - */ - findAllBoardItems(selector?: string): Array; - - /** - * Returns the wrapper of the first ItemsPalette that matches the specified CSS selector. - * If no CSS selector is specified, returns the wrapper of the first ItemsPalette. - * If no matching ItemsPalette is found, returns \`null\`. - * - * @param {string} [selector] CSS Selector - * @returns {ItemsPaletteWrapper | null} - */ - findItemsPalette(selector?: string): ItemsPaletteWrapper | null; - - /** - * Returns an array of ItemsPalette wrapper that matches the specified CSS selector. - * If no CSS selector is specified, returns all of the ItemsPalettes inside the current wrapper. - * If no matching ItemsPalette is found, returns an empty array. - * - * @param {string} [selector] CSS Selector - * @returns {Array} - */ - findAllItemsPalettes(selector?: string): Array; - - /** - * Returns the wrapper of the first PaletteItem that matches the specified CSS selector. - * If no CSS selector is specified, returns the wrapper of the first PaletteItem. - * If no matching PaletteItem is found, returns \`null\`. - * - * @param {string} [selector] CSS Selector - * @returns {PaletteItemWrapper | null} - */ - findPaletteItem(selector?: string): PaletteItemWrapper | null; - - /** - * Returns an array of PaletteItem wrapper that matches the specified CSS selector. - * If no CSS selector is specified, returns all of the PaletteItems inside the current wrapper. - * If no matching PaletteItem is found, returns an empty array. - * - * @param {string} [selector] CSS Selector - * @returns {Array} - */ - findAllPaletteItems(selector?: string): Array; - } - } - - ElementWrapper.prototype.findBoard = function(selector) { - const rootSelector = \`.\${BoardWrapper.rootSelector}\`; - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, BoardWrapper); - }; - - ElementWrapper.prototype.findAllBoards = function(selector) { - return this.findAllComponents(BoardWrapper, selector); - }; - - ElementWrapper.prototype.findBoardItem = function(selector) { - const rootSelector = \`.\${BoardItemWrapper.rootSelector}\`; - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, BoardItemWrapper); - }; - - ElementWrapper.prototype.findAllBoardItems = function(selector) { - return this.findAllComponents(BoardItemWrapper, selector); - }; - - ElementWrapper.prototype.findItemsPalette = function(selector) { - const rootSelector = \`.\${ItemsPaletteWrapper.rootSelector}\`; - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, ItemsPaletteWrapper); - }; - - ElementWrapper.prototype.findAllItemsPalettes = function(selector) { - return this.findAllComponents(ItemsPaletteWrapper, selector); - }; - - ElementWrapper.prototype.findPaletteItem = function(selector) { - const rootSelector = \`.\${PaletteItemWrapper.rootSelector}\`; - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, PaletteItemWrapper); - }; - - ElementWrapper.prototype.findAllPaletteItems = function(selector) { - return this.findAllComponents(PaletteItemWrapper, selector); - }; -export default function wrapper(root: Element = document.body) { if (document && document.body && !document.body.contains(root)) { console.warn('[AwsUi] [test-utils] provided element is not part of the document body, interactions may work incorrectly')}; return new ElementWrapper(root); }" + interface ElementWrapper { + +/** + * Returns the wrapper of the first Board that matches the specified CSS selector. + * If no CSS selector is specified, returns the wrapper of the first Board. + * If no matching Board is found, returns \`null\`. + * + * @param {string} [selector] CSS Selector + * @returns {BoardWrapper | null} + */ +findBoard(selector?: string): BoardWrapper | null; + +/** + * Returns an array of Board wrapper that matches the specified CSS selector. + * If no CSS selector is specified, returns all of the Boards inside the current wrapper. + * If no matching Board is found, returns an empty array. + * + * @param {string} [selector] CSS Selector + * @returns {Array} + */ +findAllBoards(selector?: string): Array; +/** + * Returns the wrapper of the first BoardItem that matches the specified CSS selector. + * If no CSS selector is specified, returns the wrapper of the first BoardItem. + * If no matching BoardItem is found, returns \`null\`. + * + * @param {string} [selector] CSS Selector + * @returns {BoardItemWrapper | null} + */ +findBoardItem(selector?: string): BoardItemWrapper | null; + +/** + * Returns an array of BoardItem wrapper that matches the specified CSS selector. + * If no CSS selector is specified, returns all of the BoardItems inside the current wrapper. + * If no matching BoardItem is found, returns an empty array. + * + * @param {string} [selector] CSS Selector + * @returns {Array} + */ +findAllBoardItems(selector?: string): Array; +/** + * Returns the wrapper of the first ItemsPalette that matches the specified CSS selector. + * If no CSS selector is specified, returns the wrapper of the first ItemsPalette. + * If no matching ItemsPalette is found, returns \`null\`. + * + * @param {string} [selector] CSS Selector + * @returns {ItemsPaletteWrapper | null} + */ +findItemsPalette(selector?: string): ItemsPaletteWrapper | null; + +/** + * Returns an array of ItemsPalette wrapper that matches the specified CSS selector. + * If no CSS selector is specified, returns all of the ItemsPalettes inside the current wrapper. + * If no matching ItemsPalette is found, returns an empty array. + * + * @param {string} [selector] CSS Selector + * @returns {Array} + */ +findAllItemsPalettes(selector?: string): Array; +/** + * Returns the wrapper of the first PaletteItem that matches the specified CSS selector. + * If no CSS selector is specified, returns the wrapper of the first PaletteItem. + * If no matching PaletteItem is found, returns \`null\`. + * + * @param {string} [selector] CSS Selector + * @returns {PaletteItemWrapper | null} + */ +findPaletteItem(selector?: string): PaletteItemWrapper | null; + +/** + * Returns an array of PaletteItem wrapper that matches the specified CSS selector. + * If no CSS selector is specified, returns all of the PaletteItems inside the current wrapper. + * If no matching PaletteItem is found, returns an empty array. + * + * @param {string} [selector] CSS Selector + * @returns {Array} + */ +findAllPaletteItems(selector?: string): Array; + } +} + + +ElementWrapper.prototype.findBoard = function(selector) { + const rootSelector = \`.\${BoardWrapper.rootSelector}\`; + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, BoardWrapper); +}; + +ElementWrapper.prototype.findAllBoards = function(selector) { + return this.findAllComponents(BoardWrapper, selector); +}; +ElementWrapper.prototype.findBoardItem = function(selector) { + const rootSelector = \`.\${BoardItemWrapper.rootSelector}\`; + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, BoardItemWrapper); +}; + +ElementWrapper.prototype.findAllBoardItems = function(selector) { + return this.findAllComponents(BoardItemWrapper, selector); +}; +ElementWrapper.prototype.findItemsPalette = function(selector) { + const rootSelector = \`.\${ItemsPaletteWrapper.rootSelector}\`; + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, ItemsPaletteWrapper); +}; + +ElementWrapper.prototype.findAllItemsPalettes = function(selector) { + return this.findAllComponents(ItemsPaletteWrapper, selector); +}; +ElementWrapper.prototype.findPaletteItem = function(selector) { + const rootSelector = \`.\${PaletteItemWrapper.rootSelector}\`; + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, PaletteItemWrapper); +}; + +ElementWrapper.prototype.findAllPaletteItems = function(selector) { + return this.findAllComponents(PaletteItemWrapper, selector); +}; + + +/** + * Returns the component metadata including its plural and wrapper name. + * + * @param {string} componentName Component name in pascal case. + * @returns {ComponentMetadata} + */ +export function getComponentMetadata(componentName: string) { + return {"Board":{"pluralName":"Boards","wrapperName":"BoardWrapper"},"BoardItem":{"pluralName":"BoardItems","wrapperName":"BoardItemWrapper"},"ItemsPalette":{"pluralName":"ItemsPalettes","wrapperName":"ItemsPaletteWrapper"},"PaletteItem":{"pluralName":"PaletteItems","wrapperName":"PaletteItemWrapper"}}[componentName]; +} + + +export default function wrapper(root: Element = document.body) { + if (document && document.body && !document.body.contains(root)) { + console.warn('[AwsUi] [test-utils] provided element is not part of the document body, interactions may work incorrectly') + }; + return new ElementWrapper(root); +} +" `; exports[`Generate test utils ElementWrapper > 'selectors' ElementWrapper matches the snapshot 1`] = ` -"import { ElementWrapper } from '@cloudscape-design/test-utils-core/selectors'; -import '@cloudscape-design/components/test-utils/selectors'; +" +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import { ElementWrapper } from '@cloudscape-design/test-utils-core/selectors'; import { appendSelector } from '@cloudscape-design/test-utils-core/utils'; + export { ElementWrapper }; - import BoardWrapper from './board'; - export { BoardWrapper }; - +import BoardWrapper from './board'; +import BoardItemWrapper from './board-item'; +import ItemsPaletteWrapper from './items-palette'; +import PaletteItemWrapper from './palette-item'; - import BoardItemWrapper from './board-item'; - export { BoardItemWrapper }; - - import ItemsPaletteWrapper from './items-palette'; - export { ItemsPaletteWrapper }; - +export { BoardWrapper }; +export { BoardItemWrapper }; +export { ItemsPaletteWrapper }; +export { PaletteItemWrapper }; - import PaletteItemWrapper from './palette-item'; - export { PaletteItemWrapper }; - declare module '@cloudscape-design/test-utils-core/dist/selectors' { - interface ElementWrapper { - - /** - * Returns a wrapper that matches the Boards with the specified CSS selector. - * If no CSS selector is specified, returns a wrapper that matches Boards. - * - * @param {string} [selector] CSS Selector - * @returns {BoardWrapper} - */ - findBoard(selector?: string): BoardWrapper; - - /** - * Returns a multi-element wrapper that matches Boards with the specified CSS selector. - * If no CSS selector is specified, returns a multi-element wrapper that matches Boards. - * - * @param {string} [selector] CSS Selector - * @returns {MultiElementWrapper} - */ - findAllBoards(selector?: string): MultiElementWrapper; - - /** - * Returns a wrapper that matches the BoardItems with the specified CSS selector. - * If no CSS selector is specified, returns a wrapper that matches BoardItems. - * - * @param {string} [selector] CSS Selector - * @returns {BoardItemWrapper} - */ - findBoardItem(selector?: string): BoardItemWrapper; - - /** - * Returns a multi-element wrapper that matches BoardItems with the specified CSS selector. - * If no CSS selector is specified, returns a multi-element wrapper that matches BoardItems. - * - * @param {string} [selector] CSS Selector - * @returns {MultiElementWrapper} - */ - findAllBoardItems(selector?: string): MultiElementWrapper; - - /** - * Returns a wrapper that matches the ItemsPalettes with the specified CSS selector. - * If no CSS selector is specified, returns a wrapper that matches ItemsPalettes. - * - * @param {string} [selector] CSS Selector - * @returns {ItemsPaletteWrapper} - */ - findItemsPalette(selector?: string): ItemsPaletteWrapper; - - /** - * Returns a multi-element wrapper that matches ItemsPalettes with the specified CSS selector. - * If no CSS selector is specified, returns a multi-element wrapper that matches ItemsPalettes. - * - * @param {string} [selector] CSS Selector - * @returns {MultiElementWrapper} - */ - findAllItemsPalettes(selector?: string): MultiElementWrapper; - - /** - * Returns a wrapper that matches the PaletteItems with the specified CSS selector. - * If no CSS selector is specified, returns a wrapper that matches PaletteItems. - * - * @param {string} [selector] CSS Selector - * @returns {PaletteItemWrapper} - */ - findPaletteItem(selector?: string): PaletteItemWrapper; - - /** - * Returns a multi-element wrapper that matches PaletteItems with the specified CSS selector. - * If no CSS selector is specified, returns a multi-element wrapper that matches PaletteItems. - * - * @param {string} [selector] CSS Selector - * @returns {MultiElementWrapper} - */ - findAllPaletteItems(selector?: string): MultiElementWrapper; - } - } - - ElementWrapper.prototype.findBoard = function(selector) { - const rootSelector = \`.\${BoardWrapper.rootSelector}\`; - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, BoardWrapper); - }; - - ElementWrapper.prototype.findAllBoards = function(selector) { - return this.findAllComponents(BoardWrapper, selector); - }; - - ElementWrapper.prototype.findBoardItem = function(selector) { - const rootSelector = \`.\${BoardItemWrapper.rootSelector}\`; - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, BoardItemWrapper); - }; - - ElementWrapper.prototype.findAllBoardItems = function(selector) { - return this.findAllComponents(BoardItemWrapper, selector); - }; - - ElementWrapper.prototype.findItemsPalette = function(selector) { - const rootSelector = \`.\${ItemsPaletteWrapper.rootSelector}\`; - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, ItemsPaletteWrapper); - }; - - ElementWrapper.prototype.findAllItemsPalettes = function(selector) { - return this.findAllComponents(ItemsPaletteWrapper, selector); - }; - - ElementWrapper.prototype.findPaletteItem = function(selector) { - const rootSelector = \`.\${PaletteItemWrapper.rootSelector}\`; - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, PaletteItemWrapper); - }; - - ElementWrapper.prototype.findAllPaletteItems = function(selector) { - return this.findAllComponents(PaletteItemWrapper, selector); - }; -export default function wrapper(root: string = 'body') { return new ElementWrapper(root); }" + interface ElementWrapper { + +/** + * Returns a wrapper that matches the Boards with the specified CSS selector. + * If no CSS selector is specified, returns a wrapper that matches Boards. + * + * @param {string} [selector] CSS Selector + * @returns {BoardWrapper} + */ +findBoard(selector?: string): BoardWrapper; + +/** + * Returns a multi-element wrapper that matches Boards with the specified CSS selector. + * If no CSS selector is specified, returns a multi-element wrapper that matches Boards. + * + * @param {string} [selector] CSS Selector + * @returns {MultiElementWrapper} + */ +findAllBoards(selector?: string): MultiElementWrapper; +/** + * Returns a wrapper that matches the BoardItems with the specified CSS selector. + * If no CSS selector is specified, returns a wrapper that matches BoardItems. + * + * @param {string} [selector] CSS Selector + * @returns {BoardItemWrapper} + */ +findBoardItem(selector?: string): BoardItemWrapper; + +/** + * Returns a multi-element wrapper that matches BoardItems with the specified CSS selector. + * If no CSS selector is specified, returns a multi-element wrapper that matches BoardItems. + * + * @param {string} [selector] CSS Selector + * @returns {MultiElementWrapper} + */ +findAllBoardItems(selector?: string): MultiElementWrapper; +/** + * Returns a wrapper that matches the ItemsPalettes with the specified CSS selector. + * If no CSS selector is specified, returns a wrapper that matches ItemsPalettes. + * + * @param {string} [selector] CSS Selector + * @returns {ItemsPaletteWrapper} + */ +findItemsPalette(selector?: string): ItemsPaletteWrapper; + +/** + * Returns a multi-element wrapper that matches ItemsPalettes with the specified CSS selector. + * If no CSS selector is specified, returns a multi-element wrapper that matches ItemsPalettes. + * + * @param {string} [selector] CSS Selector + * @returns {MultiElementWrapper} + */ +findAllItemsPalettes(selector?: string): MultiElementWrapper; +/** + * Returns a wrapper that matches the PaletteItems with the specified CSS selector. + * If no CSS selector is specified, returns a wrapper that matches PaletteItems. + * + * @param {string} [selector] CSS Selector + * @returns {PaletteItemWrapper} + */ +findPaletteItem(selector?: string): PaletteItemWrapper; + +/** + * Returns a multi-element wrapper that matches PaletteItems with the specified CSS selector. + * If no CSS selector is specified, returns a multi-element wrapper that matches PaletteItems. + * + * @param {string} [selector] CSS Selector + * @returns {MultiElementWrapper} + */ +findAllPaletteItems(selector?: string): MultiElementWrapper; + } +} + + +ElementWrapper.prototype.findBoard = function(selector) { + const rootSelector = \`.\${BoardWrapper.rootSelector}\`; + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, BoardWrapper); +}; + +ElementWrapper.prototype.findAllBoards = function(selector) { + return this.findAllComponents(BoardWrapper, selector); +}; +ElementWrapper.prototype.findBoardItem = function(selector) { + const rootSelector = \`.\${BoardItemWrapper.rootSelector}\`; + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, BoardItemWrapper); +}; + +ElementWrapper.prototype.findAllBoardItems = function(selector) { + return this.findAllComponents(BoardItemWrapper, selector); +}; +ElementWrapper.prototype.findItemsPalette = function(selector) { + const rootSelector = \`.\${ItemsPaletteWrapper.rootSelector}\`; + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, ItemsPaletteWrapper); +}; + +ElementWrapper.prototype.findAllItemsPalettes = function(selector) { + return this.findAllComponents(ItemsPaletteWrapper, selector); +}; +ElementWrapper.prototype.findPaletteItem = function(selector) { + const rootSelector = \`.\${PaletteItemWrapper.rootSelector}\`; + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, PaletteItemWrapper); +}; + +ElementWrapper.prototype.findAllPaletteItems = function(selector) { + return this.findAllComponents(PaletteItemWrapper, selector); +}; + + +/** + * Returns the component metadata including its plural and wrapper name. + * + * @param {string} componentName Component name in pascal case. + * @returns {ComponentMetadata} + */ +export function getComponentMetadata(componentName: string) { + return {"Board":{"pluralName":"Boards","wrapperName":"BoardWrapper"},"BoardItem":{"pluralName":"BoardItems","wrapperName":"BoardItemWrapper"},"ItemsPalette":{"pluralName":"ItemsPalettes","wrapperName":"ItemsPaletteWrapper"},"PaletteItem":{"pluralName":"PaletteItems","wrapperName":"PaletteItemWrapper"}}[componentName]; +} + + +export default function wrapper(root: string = 'body') { + return new ElementWrapper(root); +} +" `;