@bigbinary/neeto-playwright-commons 1.8.48 → 1.9.1

package/configs/scripts/jsdoc-builder/constants.mjs

@@ -0,0 +1,41 @@
+import { complement, startsWith } from "ramda";
+
+export const REMARK_NODE_TYPES = {
+  HTML: "html",
+  PARAGRAPH: "paragraph",
+  CODE: "code",
+  HEADING: "heading",
+  TEXT: "text",
+  INLINE_CODE: "inlineCode",
+};
+
+export const BABEL_NODE_TYPES = { IDENTIFIER: "Identifier" };
+
+export const SUBHEADING_PATTERN = { type: REMARK_NODE_TYPES.HEADING, depth: 2 };
+export const HTML_PATTERN = { type: REMARK_NODE_TYPES.HTML };
+export const IMG_PATTERN = {
+  type: REMARK_NODE_TYPES.HTML,
+  value: startsWith("<img"),
+};
+export const CODE_PATTERN = { type: REMARK_NODE_TYPES.CODE };
+export const PARAGRAPH_PATTERN = { type: REMARK_NODE_TYPES.PARAGRAPH };
+export const HTML_EXCEPT_IMG_PATTERN = {
+  type: REMARK_NODE_TYPES.HTML,
+  value: complement(startsWith("<img")),
+};
+export const INLINE_CODE_PATTERN = { type: REMARK_NODE_TYPES.INLINE_CODE };
+export const TEXT_PATTERN = { type: REMARK_NODE_TYPES.TEXT };
+export const DOCS_FOLDER_NAME = "docs";
+export const TYPES_FOLDER_NAME = "typeTemplates";
+export const EXPORTED_TYPES_FOLDER_NAME = "."; // root
+
+export const JSDOC_IMG_HEIGHT = "200";
+export const JSDOC_IMG_WIDTH = "300";
+
+export const DOUBLE_LINE_BREAK_WITH_LEADING_COMMENT = "\n *\n";
+export const LINE_BREAK = "\n";
+export const JSDOC_EXAMPLE_TAG = "@example ";
+export const JSDOC_END_EXAMPLE_TAG = "@endexample";
+export const ASTERISK = "*";
+export const ASTERISK_WITH_SPACES = " * ";
+export const WHITESPACE_PARENTHESIS_REGEX = /[\s()]/g;

package/configs/scripts/jsdoc-builder/index.mjs

@@ -0,0 +1,67 @@
+import fs from "fs";
+import path from "path";
+
+import _generate from "@babel/generator";
+import _traverse from "@babel/traverse";
+import * as babelTypes from "@babel/types";
+
+import {
+  DOCS_FOLDER_NAME,
+  EXPORTED_TYPES_FOLDER_NAME,
+  TYPES_FOLDER_NAME,
+} from "./constants.mjs";
+import {
+  buildEntityTitleToEntityDescMap,
+  getFileContent,
+  getFileNameList,
+  parseMarkdown,
+  parseTypeFile,
+  syncTypeFiles,
+  defaultTypeFileTraverser,
+} from "./utils.mjs";
+
+const traverse = _traverse.default;
+const generate = _generate.default;
+
+const buildJsdoc = ({
+  customTypeFileTraverser = defaultTypeFileTraverser,
+  exportedTypesFolderName = EXPORTED_TYPES_FOLDER_NAME,
+} = {}) => {
+  const fileNamesInsideDocs = getFileNameList(path.resolve(DOCS_FOLDER_NAME));
+  const typeFileNames = fs.readdirSync(path.resolve(TYPES_FOLDER_NAME));
+
+  syncTypeFiles(exportedTypesFolderName);
+
+  const entityTitleToDescMapOfAllFiles = {};
+
+  fileNamesInsideDocs.forEach(docFileName => {
+    const fileContent = getFileContent(docFileName);
+    const markdownAST = parseMarkdown(fileContent);
+
+    buildEntityTitleToEntityDescMap(
+      markdownAST.children,
+      entityTitleToDescMapOfAllFiles
+    );
+  });
+
+  // eslint-disable-next-line consistent-return
+  typeFileNames.forEach(typeFileName => {
+    const typeFileContent = getFileContent(
+      path.join(exportedTypesFolderName, typeFileName)
+    );
+    const typeFileAST = parseTypeFile(typeFileContent);
+
+    customTypeFileTraverser({
+      typeFileName: `${exportedTypesFolderName}/${typeFileName}`,
+      typeFileAST,
+      entityTitleToDescMapOfAllFiles,
+      babelTraverse: traverse,
+      babelCodeGenerator: generate,
+      babelTypes,
+    });
+  });
+
+  console.log("Successfully added JSDoc comments to type files.");
+};
+
+export default buildJsdoc;

package/configs/scripts/jsdoc-builder/utils.mjs

@@ -0,0 +1,228 @@
+import fs from "fs";
+import path from "path";
+
+import * as babelParser from "@babel/parser";
+import { mergeLeft } from "ramda";
+import remarkParse from "remark-parse";
+import { unified } from "unified";
+
+import {
+  ASTERISK,
+  ASTERISK_WITH_SPACES,
+  CODE_PATTERN,
+  DOUBLE_LINE_BREAK_WITH_LEADING_COMMENT,
+  HTML_EXCEPT_IMG_PATTERN,
+  IMG_PATTERN,
+  JSDOC_EXAMPLE_TAG,
+  JSDOC_END_EXAMPLE_TAG,
+  JSDOC_IMG_HEIGHT,
+  JSDOC_IMG_WIDTH,
+  LINE_BREAK,
+  PARAGRAPH_PATTERN,
+  SUBHEADING_PATTERN,
+  TYPES_FOLDER_NAME,
+  WHITESPACE_PARENTHESIS_REGEX,
+} from "./constants.mjs";
+import * as babelTypes from "@babel/types";
+import _traverse from "@babel/traverse";
+import _generate from "@babel/generator";
+
+import { matches } from "@bigbinary/neeto-cist";
+
+const traverse = _traverse.default;
+const generate = _generate.default;
+
+const removeWhiteSpaceAndParentheses = string =>
+  string.replace(WHITESPACE_PARENTHESIS_REGEX, "");
+
+const addLeadingCommentForTextWithLineBreaks = ({
+  text,
+  addCommentForFirstItem = true,
+  addDoubleLineBreaks = true,
+}) => {
+  if (!hasLineBreaks(text)) return addLeadingComment(text);
+  const joinString = addDoubleLineBreaks
+    ? DOUBLE_LINE_BREAK_WITH_LEADING_COMMENT
+    : LINE_BREAK;
+
+  return text
+    .split(LINE_BREAK)
+    .map((item, idx) => {
+      if (!addCommentForFirstItem && idx === 0) return item;
+
+      return addLeadingComment(item);
+    })
+    .join(joinString);
+};
+
+const addLeadingComment = (text, trimWhiteSpace = false) =>
+  (trimWhiteSpace ? ASTERISK : ASTERISK_WITH_SPACES) + text;
+
+const transformCode = node => {
+  let text = "";
+  text += addLeadingComment(JSDOC_EXAMPLE_TAG);
+  text += DOUBLE_LINE_BREAK_WITH_LEADING_COMMENT;
+  text += addLeadingCommentForTextWithLineBreaks({
+    text: removeCommentTags(node.value),
+    addDoubleLineBreaks: false,
+  });
+  text += LINE_BREAK;
+  text += addLeadingComment(JSDOC_END_EXAMPLE_TAG);
+  text += LINE_BREAK;
+
+  return text;
+};
+
+const hasLineBreaks = text => text?.includes(LINE_BREAK);
+
+const getParagraphChildrenText = node => {
+  const children = node.children;
+  if (children.length === 1) return children[0].value;
+
+  return children.map(child => child.value || child.children[0].value).join("");
+};
+
+const transformParagraph = node => {
+  let text = "";
+  text += ASTERISK_WITH_SPACES;
+  const childrenText = getParagraphChildrenText(node);
+
+  if (hasLineBreaks(childrenText)) {
+    text += addLeadingCommentForTextWithLineBreaks({
+      text: childrenText,
+      addCommentForFirstItem: false,
+    });
+  } else {
+    text += childrenText;
+  }
+  text += DOUBLE_LINE_BREAK_WITH_LEADING_COMMENT;
+
+  return text;
+};
+
+const transformImg = node => {
+  const { src, alt } = parseImgTag(node.value);
+  let text = ASTERISK_WITH_SPACES;
+  text += `![${alt}](${src}|height=${JSDOC_IMG_HEIGHT}|width=${JSDOC_IMG_WIDTH})`;
+  text += DOUBLE_LINE_BREAK_WITH_LEADING_COMMENT;
+
+  return text;
+};
+
+const transformNodesToText = nodes => {
+  let text = DOUBLE_LINE_BREAK_WITH_LEADING_COMMENT;
+
+  nodes.forEach(node => {
+    if (matches(CODE_PATTERN, node)) {
+      text += transformCode(node);
+    } else if (matches(IMG_PATTERN, node)) {
+      text += transformImg(node);
+    } else if (matches(PARAGRAPH_PATTERN, node)) {
+      text += transformParagraph(node);
+    }
+  });
+
+  return addLeadingComment(text, true);
+};
+
+const parseImgTag = imgTagStr =>
+  imgTagStr.split(" ").reduce((acc, item) => {
+    let [attrName, attrValue] = item.split("=");
+    attrValue = attrValue?.replaceAll(">", "").replaceAll('"', "");
+
+    return mergeLeft({ [attrName]: attrValue }, acc);
+  }, {});
+
+const removeCommentTags = str => str.replaceAll("/*", "").replaceAll("*/", "");
+
+export const parseTypeFile = typeFileContent =>
+  babelParser.parse(typeFileContent, {
+    sourceType: "module",
+    plugins: [["typescript", { dts: true }]],
+  });
+
+export const buildEntityTitleToEntityDescMap = (nodes, map) => {
+  nodes.forEach((node, idx) => {
+    if (!matches(SUBHEADING_PATTERN, node)) return;
+
+    const entityName = removeWhiteSpaceAndParentheses(node.children[0].value);
+    const entityRightSiblings = [];
+
+    for (let i = idx + 1; i < nodes.length; i++) {
+      const siblingNode = nodes[i];
+
+      if (matches(HTML_EXCEPT_IMG_PATTERN, siblingNode)) continue;
+
+      if (matches(SUBHEADING_PATTERN, siblingNode)) break;
+
+      entityRightSiblings.push(siblingNode);
+    }
+    const entityRightSiblingsText = transformNodesToText(entityRightSiblings);
+    map[entityName] = entityRightSiblingsText;
+  });
+};
+
+export const syncTypeFiles = exportedTypesFolderName => {
+  const sourceDir = path.resolve(TYPES_FOLDER_NAME);
+  const destDir = path.resolve(exportedTypesFolderName);
+
+  fs.cpSync(sourceDir, destDir, { recursive: true });
+};
+
+export const getFileNameList = dirPath => {
+  let files = [];
+  const items = fs.readdirSync(dirPath, { withFileTypes: true });
+
+  for (const item of items) {
+    if (item.isDirectory()) {
+      files = [...files, ...getFileNameList(path.join(dirPath, item.name))];
+    } else {
+      files.push(path.join(dirPath, item.name));
+    }
+  }
+
+  return files;
+};
+
+export const getFileContent = fileName =>
+  fs.readFileSync(path.resolve(fileName), "utf8").toString();
+
+export const parseMarkdown = fileContent =>
+  unified().use(remarkParse).parse(fileContent);
+
+export const defaultTypeFileTraverser = options => {
+  traverse(options.typeFileAST, {
+    VariableDeclaration: ({ node }) =>
+      handleNode({
+        node,
+        options,
+        extractEntityName: findVariableDeclarationName,
+      }),
+    ClassProperty: ({ node }) =>
+      handleNode({ node, options, extractEntityName: findClassPropertyName }),
+  });
+};
+
+export const findVariableDeclarationName = node =>
+  node?.declarations?.[0]?.id?.name || node?.declaration?.id?.name;
+
+export const findClassPropertyName = node => node?.key?.name;
+
+export const handleNode = ({
+  node,
+  extractEntityName,
+  options: { entityTitleToDescMapOfAllFiles, typeFileName, typeFileAST },
+}) => {
+  const entityName = extractEntityName(node);
+  const entityDesc = entityTitleToDescMapOfAllFiles[entityName];
+
+  if (!entityName || !entityDesc) {
+    return;
+  }
+
+  babelTypes.addComment(node, "leading", entityDesc);
+
+  const { code } = generate(typeFileAST, {});
+
+  fs.writeFileSync(path.resolve(typeFileName), code);
+};

package/index.cjs.js

@@ -72,6 +72,25 @@ var require$$1__default$1 = /*#__PURE__*/_interopDefaultLegacy(require$$1$2);
 var require$$4__default = /*#__PURE__*/_interopDefaultLegacy(require$$4$1);
 var require$$3__default$2 = /*#__PURE__*/_interopDefaultLegacy(require$$3$2);
 
+const NEETO_FILTERS_SELECTORS = {
+    emailSelectContainer: "email-select-container-wrapper",
+    filterPaneHeading: "neeto-filters-pane-header",
+    neetoFiltersEmailBlock: "neeto-filters-email-block",
+    neetoFiltersRoleBlock: "neeto-filters-role-block",
+    neetoFiltersBarClearButton: "neeto-filters-bar-clear-btn",
+    neetoFiltersNameFilterField: "neeto-filters-name-filter",
+    neetoFilterNameBlock: "neeto-filters-name-block",
+    roleSelectContainer: "role-select-container-wrapper",
+    filterButton: "neeto-filters-toggle-btn",
+    filtersClearButton: "neeto-filters-clear-btn",
+    filterDoneButton: "neeto-filters-done-btn",
+    filteredMembersCount: "ntm-filtered-members-count",
+    allMenubarBlock: "ntm-members-menubar-all-block",
+    filtersEmailFilter: "neeto-filters-email-filter",
+    paneModalCrossIcon: "neeto-filters-close-button",
+    searchTermBlock: "neeto-filters-search-term-block",
+};
+
 const ENVIRONMENT = {
     development: "development",
     staging: "staging",
@@ -2632,6 +2651,16 @@ class CustomCommands {
                 ? Promise.all(values.map(value => verifyEachFieldValue(value)))
                 : verifyEachFieldValue(values);
         };
+        this.searchAndVerify = async ({ searchTerm, searchInputSelector = COMMON_SELECTORS.inputField, countSelector, countText, }) => {
+            await test$1.expect(async () => {
+                await this.page.getByTestId(searchInputSelector).fill(searchTerm);
+                await test$1.expect(this.page.getByTestId(NEETO_FILTERS_SELECTORS.searchTermBlock)).toBeVisible();
+                await this.page.reload({ waitUntil: "load" });
+                await test$1.expect(this.page.getByTestId(COMMON_SELECTORS.pageLoader)).toBeHidden({ timeout: 10000 });
+                await test$1.expect(this.page.getByRole("cell", { name: searchTerm })).toBeVisible();
+                await test$1.expect(this.page.getByTestId(countSelector)).toContainText(countText);
+            }).toPass({ timeout: 15000 });
+        };
         this.page = page;
         this.responses = [];
         this.request = request;
@@ -13822,24 +13851,6 @@ const NEETO_EDITOR_SELECTORS = {
     submitLinkButton: "neeto-editor-add-link",
 };
 
-const NEETO_FILTERS_SELECTORS = {
-    emailSelectContainer: "email-select-container-wrapper",
-    filterPaneHeading: "neeto-filters-pane-header",
-    neetoFiltersEmailBlock: "neeto-filters-email-block",
-    neetoFiltersRoleBlock: "neeto-filters-role-block",
-    neetoFiltersBarClearButton: "neeto-filters-bar-clear-btn",
-    neetoFiltersNameFilterField: "neeto-filters-name-filter",
-    neetoFilterNameBlock: "neeto-filters-name-block",
-    roleSelectContainer: "role-select-container-wrapper",
-    filterButton: "neeto-filters-toggle-btn",
-    filtersClearButton: "neeto-filters-clear-btn",
-    filterDoneButton: "neeto-filters-done-btn",
-    filteredMembersCount: "ntm-filtered-members-count",
-    allMenubarBlock: "ntm-members-menubar-all-block",
-    filtersEmailFilter: "neeto-filters-email-filter",
-    paneModalCrossIcon: "neeto-filters-close-button",
-};
-
 const MEMBER_SELECTORS = {
     membersTab: "members-nav-tab",
     newButton: "ntm-add-member-button",