Demo HP and visual tests only include pages with index.html (or *.stories.twig)

packages/web-react/config/vite/app.ts

@@ -6,8 +6,6 @@ import { defineConfig } from 'vite';
 import handlebars from 'vite-plugin-handlebars';
 import { getNestedDirs } from '../../scripts/build';
 
-const hiddenDemoComponents = ['Field', 'Dialog', 'Icon', 'NoSsr', 'TextFieldBase', 'VisuallyHidden'];
-
 export default defineConfig({
   // Disable HMR overlay to avoid flaky screenshots in visual regression tests
   server: {
@@ -29,7 +27,7 @@ export default defineConfig({
           components: [
             ...readdirSync('src/components', { withFileTypes: true })
               .filter((item) => item.isDirectory())
-              .filter((item) => !hiddenDemoComponents.includes(item.name))
+              .filter((item) => readdirSync(`src/components/${item.name}`).includes('index.html'))
               .map((item) => item.name),
           ],
         },

packages/web/scripts/utils.js

@@ -6,9 +6,10 @@ export const kebabToTitleCase = (string) =>
     .map((word) => `${word.charAt(0).toUpperCase()}${word.slice(1)}`)
     .join(' ');
 
-export const getListOfNestedDirectories = (path) => [
+export const getListOfNestedDirectories = (path, mainFile) => [
   ...readdirSync(path, { withFileTypes: true })
     .filter((item) => item.isDirectory())
+    .filter((item) => readdirSync(`${path}/${item.name}`).includes(mainFile))
     .map((item) => ({
       name: item.name,
       title: kebabToTitleCase(item.name),

packages/web/vite.config.ts

@@ -30,9 +30,9 @@ export default defineConfig({
       runtimeOptions: {
         data: {
           // Get the list of components directories and pass their names to the data
-          components: getListOfNestedDirectories('src/scss/components'),
+          components: getListOfNestedDirectories('src/scss/components', 'index.html'),
           // Get the list of helpers directories and pass their names to the data
-          helpers: getListOfNestedDirectories('src/scss/helpers'),
+          helpers: getListOfNestedDirectories('src/scss/helpers', 'index.html'),
           // Get the list of icons files from the icons package and pass their names to the data without their extensions
           icons: getListOfIcons('../icons/src/svg'),
         },

tests/e2e/demo-components-compare.spec.ts

@@ -9,7 +9,7 @@ const IGNORED_TESTS = [
 ];
 
 const runComponentCompareTests = (testConfig) => {
-  const { packageDir, componentsDir, srcDir = '', ignoredComponents = [], packageName } = testConfig;
+  const { packageDir, componentsDir, srcDir = '', packageName } = testConfig;
   if (packageName) {
     const formattedPackageName = packageName
       .split('-')
@@ -19,7 +19,11 @@ const runComponentCompareTests = (testConfig) => {
     test.describe(`Demo ${formattedPackageName} Components`, () => {
       const componentDirs = readdirSync(`${packageDir}${srcDir}${componentsDir}`, { withFileTypes: true })
         .filter((item) => item.isDirectory())
-        .filter((item) => !ignoredComponents.includes(item.name))
+        .filter((item) =>
+          readdirSync(`${packageDir}${srcDir}${componentsDir}/${item.name}`).includes(
+            packageName !== 'web-twig' ? 'index.html' : `${item.name}.stories.twig`,
+          ),
+        )
         .filter((item) => !IGNORED_TESTS.includes(item.name))
         .map((item) => item.name.toLowerCase());
 
@@ -56,14 +60,12 @@ const testConfigs = [
   },
   {
     componentsDir: '/src/components',
-    ignoredComponents: ['Field', 'Dialog', 'Icon', 'TextFieldBase', 'VisuallyHidden'],
     packageDir: 'packages/web-react',
     packageName: 'web-react',
   },
   // Disable web-twig tests for now on CI, because we don't have a way to run them in CI yet.
   !isTestingEnvironment() && {
     componentsDir: '/components',
-    ignoredComponents: ['Field', 'Icon', 'TextFieldBase', 'VisuallyHidden'],
     packageDir: 'packages/web-twig',
     packageName: 'web-twig',
     srcDir: '/src/Resources',