[chore] formatting

kadena-community · Dec 29, 2023 · 255ddec · 255ddec
1 parent 030c08e
commit 255ddec
Show file tree

Hide file tree

Showing 10 changed files with 136 additions and 92 deletions.
diff --git a/packages/apps/docs/.eslintrc.cjs b/packages/apps/docs/.eslintrc.cjs
@@ -4,7 +4,7 @@ require('@rushstack/eslint-config/patch/modern-module-resolution');
 module.exports = {
   extends: ['@kadena-dev/eslint-config/profile/next'],
   parserOptions: { tsconfigRootDir: __dirname },
-  ignorePatterns: ["playwright.config.ts"],
+  ignorePatterns: ['playwright.config.ts'],
   rules: {
     '@typescript-eslint/strict-boolean-expressions': 'off',
     '@kadena-dev/typedef-var': 'off',

diff --git a/packages/apps/docs/package.json b/packages/apps/docs/package.json
@@ -65,14 +65,12 @@
     "styled-components": "~5.3.10"
   },
   "devDependencies": {
-    "directory-tree": "3.5.1",
-    "parse-md": "2.0.5",
-    "@playwright/test": "^1.39.0",
     "@7-docs/cli": "^0.5.1",
     "@kadena-dev/eslint-config": "workspace:*",
     "@kadena-dev/lint-package": "workspace:*",
     "@kadena-dev/shared-config": "workspace:*",
     "@percy/cli": "~1.24.0",
+    "@playwright/test": "^1.39.0",
     "@rushstack/eslint-config": "~3.3.0",
     "@storybook/addon-a11y": "^7.4.0",
     "@storybook/addon-actions": "^7.4.0",
@@ -96,6 +94,7 @@
     "@vanilla-extract/webpack-plugin": "2.3.1",
     "chalk": "^5.2.0",
     "chromatic": "6.20.0",
+    "directory-tree": "3.5.1",
     "dotenv": "~16.0.3",
     "eslint": "^8.45.0",
     "log-update": "^5.0.1",
@@ -105,6 +104,7 @@
     "micromark-extension-frontmatter": "~1.1.0",
     "mini-css-extract-plugin": "2.7.6",
     "openapi-types": "~12.1.3",
+    "parse-md": "2.0.5",
     "prettier": "~3.0.3",
     "recursive-copy": "^2.0.14",
     "start-server-and-test": "~2.0.0",

diff --git a/packages/apps/docs/playwright.config.ts b/packages/apps/docs/playwright.config.ts
@@ -24,8 +24,10 @@ export default defineConfig({
     url: 'http://127.0.0.1:3000/',
     reuseExistingServer: process.env.CI === undefined,
   },
-  projects: [  {
-    name: 'docs',
-    testDir: 'src/tests/',
-  },]
+  projects: [
+    {
+      name: 'docs',
+      testDir: 'src/tests/',
+    },
+  ],
 });
diff --git a/packages/apps/docs/src/components/Layout/components/TreeMenu/Item.tsx b/packages/apps/docs/src/components/Layout/components/TreeMenu/Item.tsx
@@ -25,7 +25,12 @@ export const Item: FC<IItem> = ({ item, level }) => {
   );
 
   return (
-    <li test-id={`menuItem-${level}`} className={classNames(listItemClass, listItemVariants[`l${level}`])}>
+    //TODO: Check with Steven for a good way to do this.
+    // eslint-disable-next-line react/no-unknown-property
+    <li
+      test-id={`menuItem-${level}`}
+      className={classNames(listItemClass, listItemVariants[`l${level}`])}
+    >
       <Link className={classes} href={item.root} data-active={item.isActive}>
         {item.label}
       </Link>

diff --git a/packages/apps/docs/src/components/Layout/components/TreeMenu/MainTreeItem.tsx b/packages/apps/docs/src/components/Layout/components/TreeMenu/MainTreeItem.tsx
@@ -10,6 +10,7 @@ interface IProps {
   menuOpen?: boolean;
   root?: boolean;
   level?: LevelType;
+  testId?: string;
 }
 
 export const MainTreeItem: FC<IProps> = ({ item, root = false, level = 1 }) => {
@@ -65,6 +66,8 @@ export const MainTreeItem: FC<IProps> = ({ item, root = false, level = 1 }) => {
         </>
       )}
       {!root && hasSubmenu ? (
+        //TODO: Check with Steven for a good way to do this.
+        // eslint-disable-next-line react/no-unknown-property
         <li test-id={`menuItem-${level}`} key={item.root} ref={ref}>
           <TreeButton
             onClick={() => setMenuOpen((v) => !v)}

diff --git a/packages/apps/docs/src/tests/helpers/cookie.helper.ts b/packages/apps/docs/src/tests/helpers/cookie.helper.ts
@@ -1,18 +1,21 @@
 import type { Locator, Page } from '@playwright/test';
-import { expect } from '@playwright/test';
 
 export default class CookieHelper {
-  private readonly page: Page;
-  consentBar: Locator;
-  acceptButton: any;
+  private readonly _page: Page;
+  private _consentBar: Locator;
+  private _acceptButton: Locator;
 
-  constructor(page: Page) {
-    this.page = page;
-    this.consentBar = this.page.getByRole('region', { name: 'Cookie Consent' });
-    this.acceptButton = this.consentBar.getByRole('button', { name: 'Accept' });
+  public constructor(page: Page) {
+    this._page = page;
+    this._consentBar = this._page.getByRole('region', {
+      name: 'Cookie Consent',
+    });
+    this._acceptButton = this._consentBar.getByRole('button', {
+      name: 'Accept',
+    });
   }
 
-  async acceptCookies() {
-    await this.acceptButton.click();
+  public async acceptCookies(): Promise<void> {
+    await this._acceptButton.click();
   }
 }
diff --git a/packages/apps/docs/src/tests/helpers/markdown.helper.ts b/packages/apps/docs/src/tests/helpers/markdown.helper.ts
@@ -1,43 +1,36 @@
 const parseMD = require('parse-md').default;
 import fs from 'fs';
 
-
-
-
- export async function extractMetadataFromMarkdown(
-    parentPath: string,
-    childPath?: string,
-    grandChildPath?: string,
-  ): Promise<Metadata[]> {
-    const metadata: Metadata[] = [];
-
-
-    const parentFile = fs.readFileSync(parentPath, 'utf8');
-    const parent  = parseMD(parentFile);
-    metadata.push(parent.metadata);
-
-    if (childPath) {
-      const childFile = fs.readFileSync(childPath, 'utf8');
-      const child  = parseMD(childFile);
-      metadata.push(child.metadata);
-    }
-
-    if (grandChildPath) {
-      const grandChildFile = fs.readFileSync(grandChildPath, 'utf8');
-      const  grandChild  = parseMD(grandChildFile);
-      metadata.push(grandChild.metadata);
-    }
-    return metadata
+export async function extractMetadataFromMarkdown(
+  parentPath: string,
+  childPath?: string,
+  grandChildPath?: string,
+): Promise<Metadata[]> {
+  const metadata: Metadata[] = [];
+
+  const parentFile = fs.readFileSync(parentPath, 'utf8');
+  const parent = parseMD(parentFile);
+  metadata.push(parent.metadata);
+
+  if (childPath) {
+    const childFile = fs.readFileSync(childPath, 'utf8');
+    const child = parseMD(childFile);
+    metadata.push(child.metadata);
   }
 
+  if (grandChildPath) {
+    const grandChildFile = fs.readFileSync(grandChildPath, 'utf8');
+    const grandChild = parseMD(grandChildFile);
+    metadata.push(grandChild.metadata);
+  }
+  return metadata;
+}
 
-
-
-export type Metadata = {
+export interface Metadata {
   title: string;
   description: string;
   menu: string;
   label: string;
   order: number;
   layout: 'full';
-};
+}
diff --git a/packages/apps/docs/src/tests/helpers/menu.helper.ts b/packages/apps/docs/src/tests/helpers/menu.helper.ts
@@ -2,28 +2,32 @@ import type { Locator, Page } from '@playwright/test';
 import { expect } from '@playwright/test';
 
 export default class MenuHelper {
-  private readonly page: Page;
-  private levelTwo: Locator;
-  private levelOne: Locator;
+  private readonly _page: Page;
+  private _levelTwo: Locator;
+  private _levelOne: Locator;
 
-  constructor(page: Page) {
-    this.page = page;
-    this.levelOne = this.page.locator('[data-cy="sidemenu-submenu"] [test-id="menuItem-1"] > button')
-    this.levelTwo = this.page.locator('[data-cy="sidemenu-submenu"] [test-id="menuItem-2"] > button')
+  public constructor(page: Page) {
+    this._page = page;
+    this._levelOne = this._page.locator(
+      '[data-cy="sidemenu-submenu"] [test-id="menuItem-1"] > button',
+    );
+    this._levelTwo = this._page.locator(
+      '[data-cy="sidemenu-submenu"] [test-id="menuItem-2"] > button',
+    );
   }
 
-  async openCollapsedItems(): Promise<void> {
-    const collapsedFirstLevelElements = await this.levelOne.all();
+  public async openCollapsedItems(): Promise<void> {
+    const collapsedFirstLevelElements = await this._levelOne.all();
 
     for (const collapsedElement of collapsedFirstLevelElements) {
       await collapsedElement.click();
-      await this.page.waitForTimeout(1000)
-      expect(collapsedElement).toHaveAttribute('data-active', "true")
+      await this._page.waitForTimeout(1000);
+      await expect(collapsedElement).toHaveAttribute('data-active', 'true');
     }
-    const collapsedSecondLevelElements = await this.levelTwo.all();
+    const collapsedSecondLevelElements = await this._levelTwo.all();
     for (const collapsedElement of collapsedSecondLevelElements) {
       await collapsedElement.click();
-      expect(collapsedElement).toHaveAttribute('data-active', "true")
+      await expect(collapsedElement).toHaveAttribute('data-active', 'true');
     }
   }
 }
diff --git a/packages/apps/docs/src/tests/helpers/tree.helper.ts b/packages/apps/docs/src/tests/helpers/tree.helper.ts
@@ -1,22 +1,21 @@
 import type { Page } from '@playwright/test';
 import { expect } from '@playwright/test';
 import dirTree from 'directory-tree';
-import fs from 'fs';
 import { join } from 'path';
 import { extractMetadataFromMarkdown } from './markdown.helper';
 
 export default class TreeHelper {
-  private readonly page: Page;
+  private readonly _page: Page;
 
-  constructor(page: Page) {
-    this.page = page;
+  public constructor(page: Page) {
+    this._page = page;
   }
 
   /**
    This function reads the provided directory (based on a page) and validates if all markdown files are present in the menu.
    @param {string} pageToCheck page to check, e.g. 'Kadena'
    */
-  async validateTree(pageToCheck: string): Promise<void> {
+  public async validateTree(pageToCheck: string): Promise<void> {
     const directory = join(__dirname, `../../pages/${pageToCheck}/`);
     const expectedTree = await dirTree(directory, {
       extensions: /\.md/,
@@ -65,9 +64,9 @@ export default class TreeHelper {
    This function validates presence of parent items in the menu.
    @param {string} label of the menu item to validate
    */
-  async validateParent(label: string): Promise<void> {
-    expect(
-      this.page.locator(
+  public async validateParent(label: string): Promise<void> {
+    await expect(
+      this._page.locator(
         `[data-cy="sidemenu-submenu"] [test-id="menuItem-1"] > a:text-is("${label}")`,
       ),
       `Expected ${label} to be visible on level 1 in the menu.`,
@@ -79,17 +78,28 @@ export default class TreeHelper {
    @param {string} parentLabel of the parent menu item
    @param {string} childLabel of the menu item to validate
    */
-  async validateChild(parentMenu: string, childLabel: string): Promise<void> {
+  public async validateChild(
+    parentMenu: string,
+    childLabel: string,
+  ): Promise<void> {
     // open parent menu first
-    await this.page.locator(`[data-cy="sidemenu-submenu"] [test-id="menuItem-1"] > button:text-is("${parentMenu}")`).click()
-    expect(
-      this.page.locator(
+    await this._page
+      .locator(
+        `[data-cy="sidemenu-submenu"] [test-id="menuItem-1"] > button:text-is("${parentMenu}")`,
+      )
+      .click();
+    await expect(
+      this._page.locator(
         `[data-cy="sidemenu-submenu"] [test-id="menuItem-1"] > button:text-is("${parentMenu}") + ul [test-id="menuItem-2"] > a:text-is("${childLabel}")`,
       ),
       `Expected ${childLabel} to be visible on level 2 in the menu.`,
     ).toBeVisible();
     // then close parent menu again
-    await this.page.locator(`[data-cy="sidemenu-submenu"] [test-id="menuItem-1"] > button:text-is("${parentMenu}")`).click()
+    await this._page
+      .locator(
+        `[data-cy="sidemenu-submenu"] [test-id="menuItem-1"] > button:text-is("${parentMenu}")`,
+      )
+      .click();
   }
 
   /**
@@ -98,22 +108,38 @@ export default class TreeHelper {
    @param {string} childMenu of the child menu item
    @param {string} grandChildLabel of the menu item to validate
    */
-  async validateGrandChild(
+  public async validateGrandChild(
     parentMenu: string,
     childMenu: string,
     grandChildLabel: string,
   ): Promise<void> {
-      // open parent and child menu first
-      await this.page.locator(`[data-cy="sidemenu-submenu"] [test-id="menuItem-1"] > button:text-is("${parentMenu}")`).click()
-      await this.page.locator(`[data-cy="sidemenu-submenu"] [test-id="menuItem-1"] > button:text-is("${parentMenu}") + ul [test-id="menuItem-2"] > button:text-is("${childMenu}")`).click()
-    expect(
-      this.page.locator(
+    // open parent and child menu first
+    await this._page
+      .locator(
+        `[data-cy="sidemenu-submenu"] [test-id="menuItem-1"] > button:text-is("${parentMenu}")`,
+      )
+      .click();
+    await this._page
+      .locator(
+        `[data-cy="sidemenu-submenu"] [test-id="menuItem-1"] > button:text-is("${parentMenu}") + ul [test-id="menuItem-2"] > button:text-is("${childMenu}")`,
+      )
+      .click();
+    await expect(
+      this._page.locator(
         `[data-cy="sidemenu-submenu"] [test-id="menuItem-1"] > button:text-is("${parentMenu}") + ul [test-id="menuItem-2"] > button:text-is("${childMenu}") + ul [test-id="menuItem-3"] > a:text-is("${grandChildLabel}")`,
       ),
       `Expected ${grandChildLabel} to be visible on level 3 in the menu.`,
     ).toBeVisible();
     // Close parent and child menu
-    await this.page.locator(`[data-cy="sidemenu-submenu"] [test-id="menuItem-1"] > button:text-is("${parentMenu}")`).click()
-    await this.page.locator(`[data-cy="sidemenu-submenu"] [test-id="menuItem-1"] > button:text-is("${parentMenu}") + ul [test-id="menuItem-2"] > button:text-is("${childMenu}")`).click()
+    await this._page
+      .locator(
+        `[data-cy="sidemenu-submenu"] [test-id="menuItem-1"] > button:text-is("${parentMenu}")`,
+      )
+      .click();
+    await this._page
+      .locator(
+        `[data-cy="sidemenu-submenu"] [test-id="menuItem-1"] > button:text-is("${parentMenu}") + ul [test-id="menuItem-2"] > button:text-is("${childMenu}")`,
+      )
+      .click();
   }
 }
diff --git a/packages/apps/docs/src/tests/page-crawler.spec.ts b/packages/apps/docs/src/tests/page-crawler.spec.ts
@@ -1,17 +1,25 @@
 import { test } from '@playwright/test';
-import TreeHelper from './helpers/tree.helper';
 import CookieHelper from './helpers/cookie.helper';
+import TreeHelper from './helpers/tree.helper';
 
-
-const pages = ['kadena', 'build', 'pact', 'chainweb', 'marmalade', 'contribute'];
+const pages = [
+  'kadena',
+  'build',
+  'pact',
+  'chainweb',
+  'marmalade',
+  'contribute',
+];
 
 for (const pageToCheck of pages) {
-test(`Page: ${pageToCheck} - All Markdown files should be present in the menu`, async ({ page }) => {
-    const treeHelper = new TreeHelper(page)
-    const cookieHelper = new CookieHelper(page)
+  test(`Page: ${pageToCheck} - All Markdown files should be present in the menu`, async ({
+    page,
+  }) => {
+    const treeHelper = new TreeHelper(page);
+    const cookieHelper = new CookieHelper(page);
 
     await page.goto(pageToCheck);
     await cookieHelper.acceptCookies();
-    await treeHelper.validateTree(pageToCheck)
-});
+    await treeHelper.validateTree(pageToCheck);
+  });
 }