Merge pull request #50 from LocalBytes/fix/lb-207-2024-12-fix-flakey-tests

AAllport · web-flow · commit e5de069655d6 · 2024-12-23T14:04:57.000Z
fix/lb 207 2024 12 fix flakey tests
diff --git a/.github/workflows/build.yaml b/.github/workflows/build.yaml
@@ -51,12 +51,13 @@ jobs:
           sed -i "s/VERSION/${{ env.version }}/g" ./packages/localdeck-configurator/homeassistant/config.yaml
           pnpm build
           
-          mkdir -p .temp
-          cp -r ./packages/localdeck-configurator/{.output,homeassistant}/* ./.temp
+          mkdir -p ./packages/artifact
+          cp -r ./packages/localdeck-configurator/{.output,homeassistant}/* ./packages/artifact
+          ls -al ./packages/artifact
       - uses: actions/upload-artifact@v4
         with:
           name: localdeck-configurator
-          path: .temp
+          path: ./packages/artifact
 
       - uses: actions/upload-artifact@v4
         with:
diff --git a/package.json b/package.json
@@ -19,9 +19,9 @@
     "packages/localdeck-configurator"
   ],
   "devDependencies": {
-    "@vue/language-server": "^2.1.4",
+    "@vue/language-server": "^2.1.10",
     "shx": "^0.3.4",
-    "typescript": "^5.5.4"
+    "typescript": "^5.7.2"
   },
   "packageManager": "pnpm@9.10.0+sha512.73a29afa36a0d092ece5271de5177ecbf8318d454ecd701343131b8ebc0c1a91c487da46ab77c8e596d6acf1461e3594ced4becedf8921b074fbd8653ed7051c"
 }
diff --git a/packages/localdeck-codegen/package.json b/packages/localdeck-codegen/package.json
@@ -22,20 +22,20 @@
     "esphome-config-ts": "github:LocalBytes/esphome-config-ts",
     "js-yaml": "^4.1.0",
     "lodash": "^4.17.21",
-    "zod": "^3.23.8"
+    "zod": "^3.24.1"
   },
   "devDependencies": {
-    "@eslint/js": "^9.9.1",
-    "@stylistic/eslint-plugin": "^2.7.2",
+    "@eslint/js": "^9.17.0",
+    "@stylistic/eslint-plugin": "^2.12.1",
     "@tsconfig/node-lts": "^20.1.3",
     "@types/js-yaml": "^4.0.9",
-    "@types/lodash": "^4.17.7",
-    "@types/node": "^22.5.2",
+    "@types/lodash": "^4.17.13",
+    "@types/node": "^22.10.2",
     "eslint": "~9.9.1",
-    "globals": "^15.9.0",
+    "globals": "^15.14.0",
     "ts-node": "^10.9.2",
-    "ts-patch": "^3.2.1",
-    "typescript-eslint": "^8.3.0",
-    "typescript-transform-paths": "^3.5.0"
+    "ts-patch": "^3.3.0",
+    "typescript-eslint": "^8.18.1",
+    "typescript-transform-paths": "^3.5.3"
   }
 }
diff --git a/packages/localdeck-components/nuxt.config.ts b/packages/localdeck-components/nuxt.config.ts
@@ -1,11 +1,8 @@
 export default defineNuxtConfig({
   srcDir: 'src',
   modules: ['@vueuse/nuxt', '@nuxt/eslint', '@nuxt/test-utils/module'],
-  compatibilityDate: '2024-07-15',
 
   eslint: { config: { stylistic: { semi: true } } },
 
-  // https://github.com/nuxt/nuxt/discussions/26739
-  nitro: { experimental: { legacyExternals: true } },
-
+  compatibilityDate: '2024-12-01',
 });
diff --git a/packages/localdeck-components/package.json b/packages/localdeck-components/package.json
@@ -14,16 +14,15 @@
     "test": "vitest --run"
   },
   "devDependencies": {
-    "@nuxt/eslint": "^0.5.5",
-    "@nuxt/test-utils": "^3.14.1",
+    "@nuxt/eslint": "^0.5.7",
+    "@nuxt/test-utils": "catalog:",
     "@types/pako": "^2.0.3",
-    "@vueuse/core": "^11.0.3",
-    "@vueuse/nuxt": "^11.0.3",
-    "maska": "^3.0.2",
-    "nuxt": "^3.13.0",
-    "sass": "^1.77.8",
-    "typescript": "^5.5.4",
-    "vitest": "^2.0.5"
+    "@vueuse/core": "^11.3.0",
+    "@vueuse/nuxt": "^11.3.0",
+    "maska": "^3.0.4",
+    "nuxt": "catalog:",
+    "typescript": "catalog:",
+    "vitest": "^2.1.8"
   },
   "dependencies": {
     "@localbytes/localdeck-codegen": "workspace:^",
@@ -32,6 +31,6 @@
     "material-symbols": "^0.22.2",
     "pako": "^2.1.0",
     "vue3-emoji-picker": "^1.1.8",
-    "zod": "^3.23.8"
+    "zod": "^3.24.1"
   }
 }
diff --git a/packages/localdeck-components/src/assets/material.css b/packages/localdeck-components/src/assets/material.css
diff --git a/packages/localdeck-components/src/components/DeckButtonConfigLabel.vue b/packages/localdeck-components/src/components/DeckButtonConfigLabel.vue
@@ -21,8 +21,10 @@
     <textarea
       v-model="modelValue.label.text"
       class="textarea"
+      name="label_text"
       placeholder="Type here"
       rows="3"
+      title="Label text"
       type="text"
     />
 
@@ -52,7 +54,7 @@
 </template>
 
 <script lang="ts" setup>
-import type { EditContainer } from '../utils/PadCfg';
+import type { EditContainer } from '~/utils/PadCfg';
 
 const modelValue = defineModel<EditContainer>({ required: true });
 </script>
diff --git a/packages/localdeck-components/src/components/DeckButtonItem.vue b/packages/localdeck-components/src/components/DeckButtonItem.vue
@@ -1,7 +1,10 @@
 <template>
   <div
     ref="padGridItem"
+    :aria-label="`DeckButton ${container.keyNum.toFixed(0).padStart(2, '0')}`"
     :class="{ 'shadow-lg shadow-yellow-300': editing, 'printmode': print }"
+    :data-keynum="container.keyNum"
+    role="button"
     class="pad-grid-item"
   >
     <p
@@ -28,8 +31,8 @@
 </template>
 
 <script lang="ts" setup>
-import { useFontSizes, useIsPrinting } from '../utils/hooks';
-import type { EditContainer } from '../utils/PadCfg';
+import { useFontSizes, useIsPrinting } from '~/utils/hooks';
+import type { EditContainer } from '~/utils/PadCfg';
 
 const padGridItem = ref<HTMLDivElement>();
 const print = useIsPrinting();
diff --git a/packages/localdeck-components/src/components/DeckIconPicker.client.vue b/packages/localdeck-components/src/components/DeckIconPicker.client.vue
@@ -24,7 +24,7 @@ import EmojiPicker from 'vue3-emoji-picker';
 import type { ConfiguredButtonOptsLabel } from '@localbytes/localdeck-codegen/dist/virtuals';
 import 'vue3-emoji-picker/css';
 import { mdIconsGroups } from '~/utils/material';
-import '~/assets/material.scss';
+import '~/assets/material.css';
 
 const modelValue = defineModel<ConfiguredButtonOptsLabel>({ required: true });
 const colorMode = useColorMode();
diff --git a/packages/localdeck-components/src/components/DeckPad.vue b/packages/localdeck-components/src/components/DeckPad.vue
@@ -8,7 +8,6 @@
       v-for="container in orderedButtons"
       :key="container.keyNum"
       :container="container"
-      :data-keynum="container.keyNum"
       :editing="editing?.keyNum === container.keyNum && !isPrinting"
       class="pad-grid-item"
       @click="click(container)"
@@ -77,6 +76,6 @@ provide(fontSizesSymbol, sizes);
 }
 
 .pad-grid-item {
-  @apply bg-gray-200 rounded-lg text-black;
+  @apply bg-gray-200 rounded-lg text-black cursor-pointer;
 }
 </style>
diff --git a/packages/localdeck-configurator/nuxt.config.ts b/packages/localdeck-configurator/nuxt.config.ts
@@ -34,9 +34,6 @@ export default defineNuxtConfig({
     },
   },
 
-  // https://github.com/nuxt/nuxt/discussions/26739
-  nitro: { experimental: { legacyExternals: true } },
-
   modules: [
     '@nuxt/test-utils/module',
     '@nuxtjs/tailwindcss',
@@ -45,5 +42,5 @@ export default defineNuxtConfig({
   ],
 
   css: ['~/assets/css/global.css'],
-  compatibilityDate: '2024-07-13',
+  compatibilityDate: '2024-12-01',
 });
diff --git a/packages/localdeck-configurator/package.json b/packages/localdeck-configurator/package.json
@@ -15,36 +15,35 @@
     "test:browser": "vitest --workspace=vitest.workspace.ts"
   },
   "devDependencies": {
-    "@nuxt/eslint": "^0.5.5",
-    "@nuxt/test-utils": "^3.14.1",
+    "@nuxt/eslint": "^0.5.7",
+    "@nuxt/test-utils": "catalog:",
     "@tailwindcss/typography": "^0.5.15",
     "@testing-library/vue": "^8.1.0",
-    "@types/lodash": "^4.17.7",
+    "@types/lodash": "^4.17.13",
     "@types/pako": "^2.0.3",
-    "@vitejs/plugin-vue": "^5.1.3",
-    "@vitest/browser": "^2.0.5",
-    "@vitest/ui": "^2.0.5",
-    "@vue/test-utils": "^2.4.6",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vitest/browser": "^2.1.8",
+    "@vitest/ui": "^2.1.8",
     "autoprefixer": "^10.4.20",
     "happy-dom": "^14.12.3",
-    "nuxt": "^3.13.0",
-    "playwright": "^1.46.1",
-    "playwright-core": "^1.46.1",
-    "postcss": "^8.4.44",
-    "typescript": "^5.5.4",
-    "vitest": "^2.0.5"
+    "nuxt": "catalog:",
+    "playwright": "^1.49.1",
+    "playwright-core": "^1.49.1",
+    "postcss": "^8.4.49",
+    "typescript": "catalog:",
+    "vitest": "^2.1.8"
   },
   "dependencies": {
-    "@fontsource-variable/open-sans": "^5.0.30",
-    "@fontsource/poppins": "^5.0.15",
+    "@fontsource-variable/open-sans": "^5.1.0",
+    "@fontsource/poppins": "^5.1.0",
     "@localbytes/localdeck-codegen": "workspace:^",
     "@localbytes/localdeck-components": "workspace:^",
-    "@nuxtjs/color-mode": "^3.4.4",
-    "@nuxtjs/tailwindcss": "^6.12.1",
+    "@nuxtjs/color-mode": "^3.5.2",
+    "@nuxtjs/tailwindcss": "^6.12.2",
     "esphome-config-ts": "github:localbytes/esphome-config-ts",
     "fuse.js": "^7.0.0",
     "lodash": "^4.17.21",
     "rippleui": "^1.12.1",
-    "tailwindcss": "^3.4.10"
+    "tailwindcss": "^3.4.17"
   }
 }
diff --git a/packages/localdeck-configurator/tests/e2e/file-import.test.ts b/packages/localdeck-configurator/tests/e2e/file-import.test.ts
@@ -62,7 +62,7 @@ describe('Import Workflow', async () => {
     console.log('Saving File');
     await page.getByRole('button', { name: 'Save' }).click();
 
-    await page.getByText('Your changes have been saved').waitFor('visible');
+    await page.getByText('Your changes have been saved').waitFor({ state: 'visible' });
 
     // Check the output file
     console.log('Checking Output File');
diff --git a/packages/localdeck-configurator/tests/e2e/hail-mary.test.ts b/packages/localdeck-configurator/tests/e2e/hail-mary.test.ts
@@ -1,7 +1,7 @@
 import * as path from 'node:path';
 import * as fs from 'node:fs/promises';
 
-import { beforeEach, describe, test } from 'vitest';
+import { beforeEach, describe, expect, test } from 'vitest';
 import { createPage } from '@nuxt/test-utils/e2e';
 import { setButton, setupNuxt } from '~~/tests/utils';
 
@@ -56,11 +56,16 @@ describe('Hail Mary', async () => {
 
     console.log('Saving');
     await page.getByRole('button', { name: 'Save' }).click();
-    await page.reload();
+    await page.reload({ waitUntil: 'networkidle' });
 
     console.log('Checking');
     for (const button of buttons) {
-      await page.getByText(button.name).isVisible();
+      expect(await page
+        .locator('div.pad-grid')
+        .getByLabel(`DeckButton ${button.keynum.toFixed(0).padStart(2, '0')}`)
+        .getByText(button.name)
+        .isVisible(),
+      ).toBe(true);
     }
   });
 });
diff --git a/packages/localdeck-configurator/tests/e2e/resetting.test.ts b/packages/localdeck-configurator/tests/e2e/resetting.test.ts
@@ -3,7 +3,7 @@ import * as fs from 'node:fs/promises';
 
 import { beforeEach, describe, expect, test } from 'vitest';
 import { createPage } from '@nuxt/test-utils/e2e';
-import { setButton, setupNuxt } from '~~/tests/utils';
+import { buttonLabel, setButton, setupNuxt } from '~~/tests/utils';
 
 const FILENAME = 'test-resetting.yaml';
 
@@ -30,14 +30,19 @@ describe('Resetting Workflow', async () => {
     await page.getByRole('button', { name: 'Save' }).click();
     await page.locator('.modal', { hasText: 'Saving' }).getByText('✕').click();
 
+    expect(await page.getByLabel(buttonLabel(1)).getByText('Livingroom Bulb').isVisible()).toBe(true);
+    expect(await page.getByLabel(buttonLabel(2)).getByText('Kitchen Bulb').isVisible()).toBe(true);
+
     await page.getByRole('button', { name: 'Reset' }).click();
-    await page.locator('.modal', { hasText: 'Are you sure?' }).getByRole('button', { name: 'Reset' }).click();
-    await page.getByRole('button', { name: 'Save' }).click();
 
-    console.log('Checking Reset in Network');
-    const response = page.waitForResponse(r => r.url().includes('/api/editor'));
+    const reset = page.locator('.modal', { hasText: 'Are you sure?' }).getByRole('button', { name: 'Reset' });
+    await reset.waitFor({ state: 'visible' });
+    await reset.click();
+
+    await page.getByRole('button', { name: 'Save' }).click();
     await page.reload();
-    const responseJson = await response.then(r => r.json());
-    expect(responseJson.config).toMatchObject({ title: 'LocalDeck', buttons: {} });
+
+    expect(await page.getByLabel(buttonLabel(1)).getByText('Livingroom Bulb').isVisible()).toBe(false);
+    expect(await page.getByLabel(buttonLabel(2)).getByText('Kitchen Bulb').isVisible()).toBe(false);
   });
 });
diff --git a/packages/localdeck-configurator/tests/utils.ts b/packages/localdeck-configurator/tests/utils.ts
@@ -2,12 +2,16 @@ import { type createPage, setup, type TestOptions } from '@nuxt/test-utils/e2e';
 
 type NuxtPage = Awaited<ReturnType<typeof createPage>>;
 
+export function buttonLabel(keynum: number) {
+  return `DeckButton ${keynum.toFixed(0).padStart(2, '0')}`;
+}
+
 export async function setButton(page: NuxtPage, keynum: number, { name, entity }: { name: string; entity: string }) {
   console.log(`Setting Button ${keynum} to ${name} (${entity})`);
-  await page.click(`div[data-keynum="${keynum}"]`);
 
+  await page.getByLabel(buttonLabel(keynum)).click();
   await page.getByRole('textbox', { name: 'Entity' }).fill(entity);
-  await page.getByPlaceholder('Type here').fill(name);
+  await page.getByRole('textbox', { name: 'Label Text' }).fill(name);
 }
 
 export const setupNuxt = (options?: Partial<TestOptions>) => {
diff --git a/packages/localdeck-configurator/vitest.config.ts b/packages/localdeck-configurator/vitest.config.ts
@@ -4,7 +4,7 @@ export default defineVitestConfig({
 // There's a frustrating issue somewhere which means nuxt is loading increadably slow during tests.
 // As such, we keep running into timout issues
   test: {
-    testTimeout: 60_000,
+    testTimeout: 90_000,
     environment: 'nuxt',
   },
 });
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml

Original file line number	Diff line number	Diff line change
`@@ -8,7 +8,6 @@`
`8`	`8`	`v-for="container in orderedButtons"`
`9`	`9`	`:key="container.keyNum"`
`10`	`10`	`:container="container"`
`11`		`- :data-keynum="container.keyNum"`
`12`	`11`	`:editing="editing?.keyNum === container.keyNum && !isPrinting"`
`13`	`12`	`class="pad-grid-item"`
`14`	`13`	`@click="click(container)"`
`@@ -77,6 +76,6 @@ provide(fontSizesSymbol, sizes);`
`77`	`76`	`}`
`78`	`77`
`79`	`78`	`.pad-grid-item {`
`80`		`- @apply bg-gray-200 rounded-lg text-black;`
	`79`	`+ @apply bg-gray-200 rounded-lg text-black cursor-pointer;`
`81`	`80`	`}`
`82`	`81`	`</style>`