fix: get web-component test for example-button working (#357)

annawen1 · web-flow · commit 5ae752586785 · 2025-01-07T10:20:28.000-05:00
* fix: fix web-component tests

* chore: install playwright on ci-check

* chore: fix ci-check

* chore: fix ci-check

* chore: fix ci-check

* chore: update generate script

* chore: fix ci-tests

* chore: remove playwright temporarily
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -90,3 +90,6 @@ jobs:
       - name: run React tests
         working-directory: 'packages/react'
         run: yarn test
+      - name: run Web Component tests
+        working-directory: 'packages/web-components'
+        run: yarn test
diff --git a/docs/developing.md b/docs/developing.md
@@ -13,6 +13,7 @@
 - [Building a Web Component](#building-a-web-component)
 - [Document maintainers](#document-maintainers)
 - [Submitting a Pull Request](#submitting-a-pull-request)
+- [Publishing to NPM](#publishing-to-npm)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 <!-- prettier-ignore-end -->
@@ -137,10 +138,7 @@ might want to run:
    - The component folder (`packages/react/src/components/TestComponent`).
    - The package name for the component will begin with `@carbon-labs/react-*`.
 
-2. Rename the `package-edit.json` files to `package.json` in both the examples
-   folder and component folder.
-
-3. From the root of the project, run the following to add your component to the
+2. From the root of the project, run the following to add your component to the
    yarn workspace.
    ```bash
    yarn && yarn build
@@ -170,10 +168,7 @@ might want to run:
      (`packages/web-components/src/components/test-component`).
    - The package name for the component will begin with `@carbon-labs/wc-*`.
 
-2. Rename the `package-edit.json` files to `package.json` in both the examples
-   folder and component folder.
-
-3. From the root of the project, run the following to add your component to the
+2. From the root of the project, run the following to add your component to the
    yarn workspace.
    ```bash
    yarn && yarn build
@@ -248,3 +243,12 @@ file (within `<component-name>/__stories__/<component-name>.mdx`)
 
    Once all revisions to your pull request are complete, a maintainer will
    squash and merge your commits for you.
+
+## Publishing to NPM
+
+The
+[canary publish to NPM](https://github.com/carbon-design-system/carbon-labs/actions/workflows/release-canary.yml)
+occurs every time a PR is merged into `main`. This canary version of your
+package can be used in your applications.
+[Full minor releases](https://github.com/carbon-design-system/carbon-labs/actions/workflows/release.yml)
+occur when needed and are triggered manually.
diff --git a/package.json b/package.json
@@ -33,15 +33,10 @@
   "devDependencies": {
     "@commitlint/cli": "^19.0.0",
     "@commitlint/config-conventional": "^19.0.0",
-    "@open-wc/testing": "^4.0.0",
-    "@playwright/test": "^1.39.0",
     "@types/fs-extra": "^11.0.4",
     "@types/mocha": "^10.0.3",
     "@types/react": "^18.2.36",
     "@types/sinon": "^17.0.0",
-    "@web/test-runner": "^0.19.0",
-    "@web/test-runner-commands": "^0.9.0",
-    "@web/test-runner-playwright": "^0.11.0",
     "babel-preset-carbon": "^0.0.14",
     "chalk": "^5.4.1",
     "change-case": "^5.4.4",
diff --git a/packages/react/tasks/generate/index.js b/packages/react/tasks/generate/index.js
@@ -58,6 +58,13 @@ sync(resolve(templatesPath, '**/*')).forEach((template) => {
   }
 
   let relativePath = relative(templatesPath, template);
+
+  // needed to name the template package.json file to 'package-edit.json' otherwise
+  // yarn tries to register the template as a package, so swapping back to package.json here
+  if (relativePath.includes('package-edit.json')) {
+    relativePath = relativePath.replace('package-edit.json', 'package.json');
+  }
+
   const compiledPath = compile(relativePath);
   let path;
 
diff --git a/packages/web-components/package.json b/packages/web-components/package.json
@@ -24,8 +24,8 @@
     "generate": "node tasks/generate",
     "storybook": "storybook dev -p 6006",
     "storybook:build": "npx storybook build",
-    "test": "yarn build && web-test-runner \"packages/**/*.test.ts\" --node-resolve --playwright --browsers chromium firefox webkit",
-    "test:updateSnapshot": "yarn build && web-test-runner \"packages/**/*.test.ts\" --node-resolve --update-snapshots"
+    "test": "yarn build && web-test-runner \"src/components/**/*.test.js\" --node-resolve",
+    "test:updateSnapshot": "yarn build && web-test-runner \"src/components/**/*.test.js\" --node-resolve --update-snapshots"
   },
   "dependencies": {
     "@carbon/styles": "^1.70.0",
@@ -42,6 +42,7 @@
     "@custom-elements-manifest/analyzer": "^0.10.0",
     "@lit/react": "^1.0.1",
     "@open-wc/testing": "^4.0.0",
+    "@playwright/test": "^1.39.0",
     "@rollup/plugin-alias": "^5.1.0",
     "@rollup/plugin-commonjs": "^28.0.0",
     "@rollup/plugin-json": "^6.1.0",
@@ -57,6 +58,9 @@
     "@storybook/theming": "^8.4.7",
     "@storybook/web-components": "^8.4.7",
     "@storybook/web-components-vite": "^8.4.7",
+    "@web/test-runner": "^0.19.0",
+    "@web/test-runner-commands": "^0.9.0",
+    "@web/test-runner-playwright": "^0.11.0",
     "async-done": "^2.0.0",
     "autoprefixer": "^10.4.20",
     "browserslist-config-carbon": "^11.2.0",
diff --git a/packages/web-components/src/components/chat/__tests__/__snapshots__/test-input.test.snap.js b/packages/web-components/src/components/chat/__tests__/__snapshots__/test-input.test.snap.js
diff --git a/packages/web-components/src/components/chat/__tests__/test-input.test.ts b/packages/web-components/src/components/chat/__tests__/test-input.test.ts
diff --git a/packages/web-components/src/components/example-button/__tests__/__snapshots__/example-button.test.snap.js b/packages/web-components/src/components/example-button/__tests__/__snapshots__/example-button.test.snap.js
@@ -0,0 +1,17 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["clabs-example-button should render with cds-button minimum attributes"] = 
+`<clabs-example-button
+  has-main-content=""
+  kind="primary"
+  size="lg"
+  tooltip-alignment=""
+  tooltip-position="top"
+  type="button"
+>
+  button
+</clabs-example-button>
+`;
+/* end snapshot clabs-example-button should render with cds-button minimum attributes */
+
diff --git a/packages/web-components/src/components/example-button/__tests__/__snapshots__/extended-button.test.snap.js b/packages/web-components/src/components/example-button/__tests__/__snapshots__/extended-button.test.snap.js
diff --git a/packages/web-components/src/components/example-button/__tests__/example-button.test.js b/packages/web-components/src/components/example-button/__tests__/example-button.test.js
@@ -8,12 +8,11 @@
  */
 
 import { html, fixture, expect } from '@open-wc/testing';
-import '@carbon-labs/ai-example-button/es/components/example-button/example-button.js';
-import CLABSExampleButton from '../components/example-button/example-button.js';
+import '@carbon-labs/wc-example-button/es/index.js';
 
 describe('clabs-example-button', function () {
   it('should render with cds-button minimum attributes', async () => {
-    const el = await fixture<CLABSExampleButton>(
+    const el = await fixture(
       html`<clabs-example-button> button </clabs-example-button>`
     );
 
diff --git a/packages/web-components/tasks/generate/index.js b/packages/web-components/tasks/generate/index.js
@@ -59,6 +59,13 @@ sync(resolve(templatesPath, '**/*')).forEach((template) => {
   }
 
   let relativePath = relative(templatesPath, template);
+
+  // needed to name the template package.json file to 'package-edit.json' otherwise
+  // yarn tries to register the template as a package, so swapping back to package.json here
+  if (relativePath.includes('package-edit.json')) {
+    relativePath = relativePath.replace('package-edit.json', 'package.json');
+  }
+
   const compiledPath = compile(relativePath);
   let path;
 
diff --git a/packages/web-components/tasks/generate/templates/__tests__/DISPLAY_NAME.test.js b/packages/web-components/tasks/generate/templates/__tests__/DISPLAY_NAME.test.js
@@ -0,0 +1,22 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. FULL_YEAR
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { html, fixture, expect } from '@open-wc/testing';
+import '@carbon-labs/wc-DISPLAY_NAME/es/index.js';
+
+describe('clabs-DISPLAY_NAME', function () {
+  it('should render with cds-button minimum attributes', async () => {
+    const el = await fixture(
+      html`<clabs-DISPLAY_NAME> button </clabs-DISPLAY_NAME>`
+    );
+
+    await expect(el).dom.to.equalSnapshot();
+    await expect(el).shadowDom.to.be.accessible();
+  });
+});
diff --git a/web-test-runner.config.js b/web-test-runner.config.js
@@ -8,6 +8,6 @@
 import { esbuildPlugin } from '@web/dev-server-esbuild';
 
 export default {
-  files: ['src/**/*.test.ts'],
+  files: ['src/**/*.test.js'],
   plugins: [esbuildPlugin({ ts: true })],
 };
diff --git a/yarn.lock b/yarn.lock
@@ -2781,6 +2781,7 @@ __metadata:
     "@custom-elements-manifest/analyzer": "npm:^0.10.0"
     "@lit/react": "npm:^1.0.1"
     "@open-wc/testing": "npm:^4.0.0"
+    "@playwright/test": "npm:^1.39.0"
     "@rollup/plugin-alias": "npm:^5.1.0"
     "@rollup/plugin-commonjs": "npm:^28.0.0"
     "@rollup/plugin-json": "npm:^6.1.0"
@@ -2796,6 +2797,9 @@ __metadata:
     "@storybook/theming": "npm:^8.4.7"
     "@storybook/web-components": "npm:^8.4.7"
     "@storybook/web-components-vite": "npm:^8.4.7"
+    "@web/test-runner": "npm:^0.19.0"
+    "@web/test-runner-commands": "npm:^0.9.0"
+    "@web/test-runner-playwright": "npm:^0.11.0"
     async-done: "npm:^2.0.0"
     autoprefixer: "npm:^10.4.20"
     browserslist-config-carbon: "npm:^11.2.0"
@@ -10801,15 +10805,10 @@ __metadata:
   dependencies:
     "@commitlint/cli": "npm:^19.0.0"
     "@commitlint/config-conventional": "npm:^19.0.0"
-    "@open-wc/testing": "npm:^4.0.0"
-    "@playwright/test": "npm:^1.39.0"
     "@types/fs-extra": "npm:^11.0.4"
     "@types/mocha": "npm:^10.0.3"
     "@types/react": "npm:^18.2.36"
     "@types/sinon": "npm:^17.0.0"
-    "@web/test-runner": "npm:^0.19.0"
-    "@web/test-runner-commands": "npm:^0.9.0"
-    "@web/test-runner-playwright": "npm:^0.11.0"
     babel-preset-carbon: "npm:^0.0.14"
     chalk: "npm:^5.4.1"
     change-case: "npm:^5.4.4"
