chore: add vue-ssr to testsuite

tolgee · Sep 23, 2024 · 424965f · 424965f
1 parent e09995d
commit 424965f
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 48 deletions.
diff --git a/e2e/cypress/common/exampleAppTest.ts b/e2e/cypress/common/exampleAppTest.ts
@@ -20,8 +20,6 @@ export const exampleAppTest = (url: string) =>
     });
 
     it('Deletes item', () => {
-      cy.wait(1000);
-
       cy.contains('Delete').first().click();
       cy.get('.item__text').should('have.length', 2);
     });

diff --git a/e2e/cypress/common/namespacesTest.ts b/e2e/cypress/common/namespacesTest.ts
@@ -9,10 +9,16 @@ export const namespacesTest = (
   items: Record<string, { text: string; count: number; testId?: string }[]>,
   options?: { skipLoading: boolean }
 ) =>
-  describe('namespaces test', () => {
+  describe('translation methods test', () => {
     before(() => {
       cy.visit(url);
-      cy.wait(1000);
+      if (!options?.skipLoading) {
+        cy.intercept('GET', '*', (req) => {
+          req.on('response', (res) => {
+            res.delay = 500;
+          });
+        });
+      }
       cy.contains('Load more', { timeout: 30_000 }).click();
       if (!options?.skipLoading) {
         cy.contains('Loading namespace...').should('exist');
@@ -25,7 +31,6 @@ export const namespacesTest = (
       describe(`for language ${language}`, () => {
         before(() => {
           cy.get('.lang-selector').select(language);
-          cy.wait(1000);
           cy.get('.namespaces', { timeout: 30_000 }).scrollIntoView();
           Object.values(texts).forEach((text) => {
             getElement(text.text, text.testId).should('be.visible');

diff --git a/e2e/cypress/e2e/vue-ssr/dev.cy.ts b/e2e/cypress/e2e/vue-ssr/dev.cy.ts
@@ -29,20 +29,16 @@ context('Vue app in dev mode', () => {
     ],
   });
 
-  namespacesTest(
-    translationMethods,
-    {
-      en: [
-        { text: 'This is a key in namespace', count: 2 },
-        { text: 'This is a key', count: 1 },
-      ],
-      cs: [
-        { text: 'Toto je klíč v namespace', count: 2 },
-        { text: 'Toto je klíč', count: 1 },
-      ],
-    },
-    { skipLoading: true }
-  );
+  namespacesTest(translationMethods, {
+    en: [
+      { text: 'This is a key in namespace', count: 2 },
+      { text: 'This is a key', count: 1 },
+    ],
+    cs: [
+      { text: 'Toto je klíč v namespace', count: 2 },
+      { text: 'Toto je klíč', count: 1 },
+    ],
+  });
 
   exampleAppDevTest(url, { noLoading: true });
 });
diff --git a/packages/vue/src/TolgeeProvider.ts b/packages/vue/src/TolgeeProvider.ts
@@ -79,8 +79,6 @@ export const TolgeeProvider = defineComponent({
       tolgeeContext.value.isInitialRender = false;
     });
 
-    console.log(tolgee.value.isLoaded());
-
     const isLoading = ref(!tolgee.value.isLoaded());
 
     onBeforeMount(() => {

diff --git a/testapps/vue-ssr/components/Todos.vue b/testapps/vue-ssr/components/Todos.vue
@@ -54,45 +54,50 @@
 </template>
 
 <script lang="tsx">
-import { defineComponent } from 'vue';
+import { defineComponent, ref } from 'vue';
 import { T } from '@tolgee/vue';
 
 import Navbar from './Navbar.vue';
+import { onMounted } from 'vue';
 
 export default defineComponent({
   components: { T, Navbar },
   name: 'TodosComponent',
-  data() {
-    let items: string[] | undefined = undefined;
-    try {
-      items = JSON.parse(
-        localStorage.getItem('tolgee-example-app-items') || ''
-      );
-    } catch (e) {
-      console.error(
-        'Something went wrong while parsing stored items. Items are reset.'
-      );
-      if (typeof localStorage !== 'undefined') {
-        localStorage.removeItem('tolgee-example-app-items');
+  setup() {
+    const newItemValue = ref('');
+    let items = ref<string[]>([]);
+
+    onMounted(() => {
+      let result = [];
+      try {
+        result = JSON.parse(
+          localStorage.getItem('tolgee-example-app-items') || ''
+        );
+      } catch (e) {
+        console.error(
+          'Something went wrong while parsing stored items. Items are reset.'
+        );
+        if (typeof localStorage !== 'undefined') {
+          localStorage.removeItem('tolgee-example-app-items');
+        }
       }
-    }
-    return {
-      newItemValue: '',
-      items: items?.length
-        ? items
-        : ['Passport', 'Maps and directions', 'Travel guide'],
-    };
+      items.value = result.length
+        ? result
+        : ['Passport', 'Maps and directions', 'Travel guide'];
+    });
+
+    return { newItemValue, items };
   },
   methods: {
     onAdd() {
-      if (this.$data.newItemValue) {
-        this.$data.items.push(this.$data.newItemValue);
+      if (this.newItemValue) {
+        this.items.push(this.newItemValue);
         this.updateLocalStorage();
-        this.$data.newItemValue = '';
+        this.newItemValue = '';
       }
     },
     onDelete(index: number) {
-      this.$data.items = this.$data.items.filter((_, i) => i !== index);
+      this.items = this.items.filter((_, i) => i !== index);
       this.updateLocalStorage();
     },
     updateLocalStorage() {

diff --git a/testapps/vue-ssr/components/TranslationMethods.vue b/testapps/vue-ssr/components/TranslationMethods.vue
@@ -113,18 +113,22 @@
       </div>
     </div>
 
-    <div v-if="!revealed" class="load-more-section">
+    <div v-if="!revealed && loaded" class="load-more-section">
       <button class="button" @click="revealed = true">Load more</button>
     </div>
-    <Namespaces v-else />
+    <Namespaces v-if="revealed" />
   </main>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { onMounted, ref } from 'vue';
 import { T } from '@tolgee/vue';
 import Navbar from './Navbar.vue';
 import Namespaces from './Namespaces.vue';
 
 const revealed = ref(false);
+const loaded = ref(false);
+onMounted(() => {
+  loaded.value = true;
+});
 </script>