test: fix e2e test

ymmooot · Nov 18, 2022 · 1ff48ce · 1ff48ce
1 parent 27da37d
commit 1ff48ce
Show file tree

Hide file tree

Showing 10 changed files with 63 additions and 123 deletions.
diff --git a/cypress/e2e/test.cy.js b/cypress/e2e/test.cy.js
@@ -33,35 +33,53 @@ describe('nuxt-jsonld', () => {
       });
   });
 
-  it('dumps reactive jsonld', () => {
-    cy.visit('/products/foo');
-    const clock = cy.clock(Date.UTC(2022, 0, 1, 13, 10, 10));
-
-    // empty tag is shown
+  it('replaces jsonld on page transition', () => {
+    cy.visit('/static');
     cy.get('script[type="application/ld+json"]')
       .should('exist')
       .then((el) => {
-        expect(el.text()).eq('');
+        expect(JSON.parse(el[0].innerText)).to.have.property('name', 'Static json');
+        expect(JSON.parse(el[1].innerText)).to.have.property('name', 'test');
       });
+    cy.get('script[type="application/ld+json"]').should('have.length', 2);
 
-    // jsonld is set
-    cy.contains('Update Purchase Date').click();
+    cy.contains('Back to list').click();
+    cy.url().should('equal', fullpath('/'));
+    cy.wait(300);
     cy.get('script[type="application/ld+json"]')
       .should('exist')
       .then((el) => {
         const json = JSON.parse(el.text());
-        expect(json).to.have.property('@context', 'https://schema.org');
-        expect(json).to.have.property('@type', 'Product');
-        expect(json).to.have.property('name', 'foo');
-        expect(json).to.have.property('description', 'This is a sample foo product.');
-        expect(json).to.have.property('purchaseDate', '2022-01-01T13:10:10.000Z');
+        expect(json).to.not.have.property('name', 'static');
+        expect(json).to.have.property('@type', 'ItemList');
       });
+    cy.get('script[type="application/ld+json"]').should('have.length', 1);
+  });
+
+  it('dumps reactive jsonld', () => {
+    cy.visit('/products/foo');
+
+    // no jsonld yet
+    cy.get('script[type="application/ld+json"]').should('not.exist');
+    cy.wait(300);
 
-    // one second elapsed
-    clock.tick(1000);
+    // jsonld is set
+    cy.contains('Update Count').click();
+    cy.get('code').contains('1').should('exist');
+    cy.wait(300);
+    cy.get('script[type="application/ld+json"]').then((el) => {
+      const json = JSON.parse(el.text());
+      expect(json).to.have.property('@context', 'https://schema.org');
+      expect(json).to.have.property('@type', 'Product');
+      expect(json).to.have.property('name', 'foo');
+      expect(json).to.have.property('description', 'This is a sample foo product.');
+      expect(json).to.have.property('count', 1);
+    });
 
-    // purchase date is updated
-    cy.contains('Update Purchase Date').click();
+    // count is updated
+    cy.contains('Update Count').click();
+    cy.get('code').contains('2').should('exist');
+    cy.wait(300);
     cy.get('script[type="application/ld+json"]')
       .should('exist')
       .then((el) => {
@@ -70,29 +88,7 @@ describe('nuxt-jsonld', () => {
         expect(json).to.have.property('@type', 'Product');
         expect(json).to.have.property('name', 'foo');
         expect(json).to.have.property('description', 'This is a sample foo product.');
-        expect(json).to.have.property('purchaseDate', '2022-01-01T13:10:11.000Z');
-      });
-  });
-
-  it('replaces jsonld on page transition', () => {
-    cy.visit('/static');
-    cy.get('script[type="application/ld+json"]')
-      .should('exist')
-      .then((el) => {
-        expect(JSON.parse(el[0].innerText)).to.have.property('name', 'Static json');
-        expect(JSON.parse(el[1].innerText)).to.have.property('name', 'test');
+        expect(json).to.have.property('count', 2);
       });
-    cy.get('script[type="application/ld+json"]').should('have.length', 2);
-
-    cy.contains('Back to list').click();
-    cy.url().should('equal', fullpath('/'));
-    cy.get('script[type="application/ld+json"]')
-      .should('exist')
-      .then((el) => {
-        const json = JSON.parse(el.text());
-        expect(json).to.not.have.property('name', 'static');
-        expect(json).to.have.property('@type', 'ItemList');
-      });
-    cy.get('script[type="application/ld+json"]').should('have.length', 1);
   });
 });
diff --git a/example/mixins/index.ts b/example/mixins/index.ts
diff --git a/example/nuxt.config.ts b/example/nuxt.config.ts
@@ -1,5 +1,3 @@
-import { defineNuxtConfig } from 'nuxt';
-
 export default defineNuxtConfig({
   modules: ['nuxt-jsonld'],
   css: ['@/css/index.css'],

diff --git a/example/pages/index.vue b/example/pages/index.vue
@@ -1,8 +1,6 @@
 <template>
   <div>
     <h1>Product List</h1>
-    <code v-html="jsonld"></code>
-
     <ul>
       <li v-for="p in products" :key="p.id">
         name:
@@ -17,11 +15,9 @@
 </template>
 
 <script lang="ts">
-import { WithContext, ItemList, Graph } from 'schema-dts';
-import { getJsonldForDemo } from '@/mixins';
+import { WithContext, ItemList } from 'schema-dts';
 
 export default defineComponent({
-  mixins: [getJsonldForDemo],
   setup() {
     useHead({
       title: 'Product List',

diff --git a/example/pages/option.vue b/example/pages/option.vue
@@ -1,7 +1,6 @@
 <template>
   <div>
     <h1>Options API</h1>
-    <code v-html="jsonld"></code>
     <div>
       <p>{{ count }}</p>
       <button @click="count++">+</button>
@@ -11,10 +10,7 @@
 </template>
 
 <script>
-import { getJsonldForDemo } from '@/mixins';
-
 export default {
-  mixins: [getJsonldForDemo],
   data() {
     return {
       count: 0,

diff --git a/example/pages/products/[id].vue b/example/pages/products/[id].vue
@@ -1,39 +1,36 @@
 <template>
   <div>
     <h1>Product Detail with Reactivity</h1>
-    <code v-if="!product.purchaseDate">No JSON-LD will be shown. Click the button.</code>
-    <code v-else v-html="jsonld"></code>
-    <button @click="updatePurchaseDate">Update Purchase Date</button>
+    <code v-if="!product.count">No JSON-LD will be shown. Click the button.</code>
+    <code v-else>{{ product.count }}</code>
+    <button type="button" @click="updateCount">Update Count</button>
     <div>
       <nuxt-link to="/"> Back to list </nuxt-link>
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import { getJsonldForDemo } from '@/mixins';
-
 export default defineComponent({
-  mixins: [getJsonldForDemo],
   setup() {
     const { params } = useRoute();
-    const purchaseDate = ref<string>(null);
-    const updatePurchaseDate = () => {
-      purchaseDate.value = new Date().toISOString();
+    const count = ref<number>(0);
+    const updateCount = () => {
+      count.value++;
     };
     const product = reactive({
-      name: params.id as string,
+      name: params.id,
       description: `This is a sample ${params.id} product.`,
-      purchaseDate,
+      count,
     });
 
     useHead({
       title: `Product: ${product.name}`,
     });
 
     useJsonld(() => {
-      if (purchaseDate.value === null) {
-        return;
+      if (!product.count) {
+        return null;
       }
       return {
         '@context': 'https://schema.org',
@@ -43,7 +40,7 @@ export default defineComponent({
     });
 
     return {
-      updatePurchaseDate,
+      updateCount,
       product,
     };
   },

diff --git a/example/pages/static.vue b/example/pages/static.vue
@@ -2,22 +2,14 @@
   <div>
     <h1>Static JSON-LD example</h1>
     <div>
-      <code v-html="jsonld"></code>
-      <p class="message">
-        When reloading on this page, a part of the jsonld is delayed, but the server-side rendering
-        is working correctly. Don't worry.
-      </p>
       <sample-comp />
       <nuxt-link to="/"> Back to list </nuxt-link>
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import { getJsonldForDemo } from '@/mixins';
-
 export default defineComponent({
-  mixins: [getJsonldForDemo],
   setup() {
     useJsonld({
       '@context': 'https://schema.org',

diff --git a/src/runtime/composable.ts b/src/runtime/composable.ts
@@ -10,12 +10,17 @@ export const useJsonld = (json: JsonLD | JsonLDFunc) => {
   }
 
   const jsonComputed = computed(() => (isFunc(json) ? json() : json));
-  useHead(() => ({
-    script: [
-      {
-        type: 'application/ld+json',
-        children: jsonComputed.value ? JSON.stringify(jsonComputed.value, null, '') : undefined,
-      },
-    ],
-  }));
+  useHead(() => {
+    if (!jsonComputed.value) {
+      return {};
+    }
+    return {
+      script: [
+        {
+          type: 'application/ld+json',
+          children: JSON.stringify(jsonComputed.value, null, ''),
+        },
+      ],
+    };
+  });
 };
diff --git a/test/composable.spec.js b/test/composable.spec.js
@@ -54,14 +54,7 @@ describe('useJsonld', () => {
   test('passing a function returning null', () => {
     useJsonld(() => null);
     expect(useHead).toBeCalledTimes(1);
-    expect(useHeadArg()).toEqual({
-      script: [
-        {
-          children: undefined,
-          type: 'application/ld+json',
-        },
-      ],
-    });
+    expect(useHeadArg()).toEqual({});
   });
 
   test('passing null', () => {

diff --git a/tsconfig.json b/tsconfig.json
@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "baseUrl": ".",
     "target": "ESNext",
     "module": "ESNext",
     "experimentalDecorators": true,