Changes how config management works in hiccup (#59)

* Changes how config management works in hiccup

* Update version

cypress/e2e/base.cy.ts

@@ -1,8 +1,13 @@
 describe('Basic tests', () => {
   beforeEach(() => {
+    cy.intercept('GET', '**/configs/config.json', { fixture: 'default' }).as(
+      'config'
+    )
+    cy.intercept('GET', '**/configs/manifest.json', {
+      fixture: 'default-manifest',
+    })
     // TODO: gett app url dynamically
     cy.visit('http://localhost:3000')
-    cy.intercept('GET', '**/configs/config.json', { fixture: 'default' })
   })
 
   it('displays the Default config state by default', () => {
@@ -12,32 +17,34 @@ describe('Basic tests', () => {
     cy.findAllByTestId('featured-card').first().contains('Featured Link')
 
     cy.clickSettings()
-    cy.findByTestId(`cached-config-default`)
+    cy.findByTestId(`config-default`)
       .should('contain.text', 'Default Config')
       .findByTestId('active-indicator')
       .should('exist')
   })
 
   it('should be able to able to load a remote config', () => {
-    cy.visit('http://localhost:3000?config=http://dummyconfig.com')
     cy.intercept('GET', 'http://dummyconfig.com', { fixture: 'dummy' })
+    cy.visit('http://localhost:3000?config=http://dummyconfig.com')
     cy.findAllByTestId('featured-card')
       .first()
       .contains('This is a dummy config')
 
     cy.clickSettings()
-    cy.findByTestId(`cached-config-dummy`)
+    cy.findByTestId(`config-url`)
       .should('contain.text', 'Dummy Config')
       .findByTestId('active-indicator')
       .should('exist')
   })
 
   it('should be able to use Hotkeys', () => {
+    cy.waitForPageLoad()
     cy.blurSearch().type('{cmd+/}')
     cy.findAllByTestId('hotkey-modal-title').should('exist')
   })
 
-  it('should be able to edit a category', () => {
+  it('should not be able to edit a read-only config', () => {
+    cy.waitForPageLoad()
     cy.blurSearch().type('{cmd+e}')
     cy.findAllByTestId('category').first().find('h1 button').eq(0).click()
 
@@ -48,13 +55,6 @@ describe('Basic tests', () => {
       .first()
       .click()
 
-    cy.get('body').type('{cmd+e}')
-    cy.findAllByTestId('category')
-      .first()
-      .should('contain', 'Category 1 Edited')
-
-    cy.clickSettings()
-
-    cy.getManagedConfig().should('contain', ' - Editing')
+    cy.get('.toast').should('contain.text', 'Config is readonly')
   })
 })

cypress/e2e/config.cy.ts

@@ -1,10 +1,11 @@
 import path from 'path'
 
-describe('Config Manager', () => {
+// TODO: Reenable this once the config manager is complete with the new features (i.e. editable remotes)
+describe.skip('Config Manager', () => {
   beforeEach(() => {
     // TODO: gett app url dynamically
-    cy.visit('http://localhost:3000')
     cy.intercept('GET', '**/configs/config.json', { fixture: 'default' })
+    cy.visit('http://localhost:3000')
     cy.clickSettings()
   })
 

cypress/e2e/migration.cy.ts

@@ -1,16 +1,9 @@
 describe('Migrations', () => {
   beforeEach(() => {})
 
-  it('should be able to able to migrate - v1 to v2', () => {
-    cy.fixture('v1-config').then((fixture) =>
-      localStorage.setItem('hiccup_config', JSON.stringify(fixture))
-    )
+  it('should be able to able to migrate - v1 to latest', () => {
+    cy.intercept('GET', '**/configs/config.json', { fixture: 'v1-config' })
     cy.visit('http://localhost:3000')
-    cy.intercept('GET', '**/configs/config.json', { fixture: 'default' })
     cy.findAllByTestId('featured-card').first().contains('V1 Config')
-    cy.clickSettings()
-    cy.findByTestId('file-viewer').find('#title').should('contain', 'Recovered')
-    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-    expect(localStorage.getItem('hiccup_config')).to.be.null
   })
 })

cypress/e2e/visual.cy.ts

@@ -8,7 +8,8 @@ describe('Screenshots', () => {
   }[] = [
     {
       type: 'desktop',
-      viewport: 'macbook-13',
+      viewport: 'macbook-16',
+      orientation: 'landscape',
     },
     {
       type: 'mobile',
@@ -18,18 +19,15 @@ describe('Screenshots', () => {
 
   beforeEach(() => {
     // TODO: get app url dynamically
-    cy.visit('http://localhost:3000')
     cy.intercept('GET', '**/configs/config.json', { fixture: 'default' })
     cy.intercept('GET', '**/assets/*').as('image')
+    cy.visit('http://localhost:3000')
   })
 
   screens.forEach(({ type, viewport, orientation }) => {
     it(`should capture all major ${type} screens`, () => {
+      cy.waitForPageLoad()
       cy.viewport(viewport, orientation ?? 'portrait')
-      // Wait for app to load
-      cy.wait('@image')
-      cy.get('.toast').should('be.visible')
-      cy.get('.toast').should('be.hidden')
 
       // Landing page
       cy.screenshotPreviewImage(`main-${type}`)

cypress/fixtures/default-manifest.json

@@ -0,0 +1,13 @@
+{
+  "version": "0.1.0",
+  "configs": [
+    {
+      "id": "default",
+      "title": "Default Config",
+      "remote": {
+        "type": "url",
+        "url": "./configs/config.json"
+      }
+    }
+  ]
+}

cypress/fixtures/default.json

@@ -1,88 +1,85 @@
 {
-    "version": "2.0",
-    "id": "default",
-    "title": "Default Config",
-    "url": "http://localhost:3000/configs/config.json",
-    "featured": [
+  "version": "3.0.0",
+  "defaultTitle": "Default Config",
+  "url": "http://localhost:3000/configs/config.json",
+  "featured": [
+    {
+      "name": "Featured Link",
+      "link": "https://designedbyashw.in/test/hiccup"
+    },
+    {
+      "name": "Another Featured link",
+      "link": "https://designedbyashw.in/test/hiccup"
+    },
+    {
+      "name": "One more",
+      "link": "https://designedbyashw.in/test/hiccup"
+    },
+    {
+      "name": "welcome to hiccup",
+      "background": "/assets/card.png",
+      "link": "https://github.com/ashwin-pc/hiccup",
+      "tags": "space separated tags"
+    }
+  ],
+  "categories": [
+    {
+      "title": "Category 1",
+      "links": [
         {
-            "name": "Featured Link",
-            "link": "https://designedbyashw.in/test/hiccup"
+          "name": "Link 1",
+          "link": "https://designedbyashw.in/test/hiccup"
         },
         {
-            "name": "Another Featured link",
-            "link": "https://designedbyashw.in/test/hiccup"
-        },
+          "name": "Link 2",
+          "link": "https://designedbyashw.in/test/hiccup"
+        }
+      ]
+    },
+    {
+      "title": "Category 2",
+      "links": [
         {
-            "name": "One more",
-            "link": "https://designedbyashw.in/test/hiccup"
+          "name": "Link 1",
+          "link": "https://designedbyashw.in/test/hiccup"
         },
         {
-            "name": "welcome to hiccup",
-            "background": "/assets/card.png",
-            "link": "https://github.com/ashwin-pc/hiccup",
-            "tags": "space separated tags"
+          "name": "Link 2",
+          "link": "https://designedbyashw.in/test/hiccup"
+        }
+      ]
+    },
+    {
+      "title": "Category 3",
+      "links": [
+        {
+          "name": "Link 1",
+          "link": "https://designedbyashw.in/test/hiccup",
+          "tags": "more searchable tags"
         }
-    ],
-    "categories": [
+      ]
+    },
+    {
+      "title": "Category 4",
+      "links": [
         {
-            "title": "Category 1",
-            "links": [
-                {
-                    "name": "Link 1",
-                    "link": "https://designedbyashw.in/test/hiccup"
-                },
-                {
-                    "name": "Link 2",
-                    "link": "https://designedbyashw.in/test/hiccup"
-                }
-            ]
+          "name": "Link 1",
+          "link": "https://designedbyashw.in/test/hiccup"
         },
         {
-            "title": "Category 2",
-            "links": [
-                {
-                    "name": "Link 1",
-                    "link": "https://designedbyashw.in/test/hiccup"
-                },
-                {
-                    "name": "Link 2",
-                    "link": "https://designedbyashw.in/test/hiccup"
-                }
-            ]
+          "name": "Link 2",
+          "link": "https://www.google.com/search?q=I%27m+Feeling+Curious&csf=b&ct=ifl&cad=2:curious&ei=iin8XpLlKJi80PEPi9GtyAo&ved=0ahUKEwiS0oCHs6vqAhUYHjQIHYtoC6kQnRsIDg&rct=j"
         },
         {
-            "title": "Category 3",
-            "links": [
-                {
-                    "name": "Link 1",
-                    "link": "https://designedbyashw.in/test/hiccup",
-                    "tags": "more searchable tags"
-                }
-            ]
+          "name": "Link 3",
+          "link": "https://designedbyashw.in/test/hiccup"
         },
         {
-            "title": "Category 4",
-            "links": [
-                {
-                    "name": "Link 1",
-                    "link": "https://designedbyashw.in/test/hiccup"
-                },
-                {
-                    "name": "Link 2",
-                    "link": "https://www.google.com/search?q=I%27m+Feeling+Curious&csf=b&ct=ifl&cad=2:curious&ei=iin8XpLlKJi80PEPi9GtyAo&ved=0ahUKEwiS0oCHs6vqAhUYHjQIHYtoC6kQnRsIDg&rct=j"
-                },
-                {
-                    "name": "Link 3",
-                    "link": "https://designedbyashw.in/test/hiccup"
-                },
-                {
-                    "name": "Just a long link name to make sure we are safe",
-                    "link": "https://designedbyashw.in/test/hiccup"
-                }
-            ]
+          "name": "Just a long link name to make sure we are safe",
+          "link": "https://designedbyashw.in/test/hiccup"
         }
-    ],
-    "metadata": {
-        "readonly": false
+      ]
     }
-}
+  ],
+  "metadata": {}
+}

cypress/fixtures/dummy.json

@@ -1,14 +1,13 @@
 {
-    "version": "2.0",
-    "id": "dummy",
-    "title": "Dummy Config",
-    "url": "http://dummyconfig.com",
-    "featured": [
-        {
-            "name": "This is a dummy config",
-            "background": "/assets/card.png",
-            "link": "https://designedbyashw.in/test/hiccup"
-        }
-    ],
-    "categories": []
-}
+  "version": "3.0.0",
+  "defaultTitle": "Dummy Config",
+  "url": "http://dummyconfig.com",
+  "featured": [
+    {
+      "name": "This is a dummy config",
+      "background": "/assets/card.png",
+      "link": "https://designedbyashw.in/test/hiccup"
+    }
+  ],
+  "categories": []
+}

cypress/support/index.d.ts

@@ -6,6 +6,7 @@ declare namespace Cypress {
      * Custom command to ... add your description here
      * @example cy.clickOnMyJourneyInCandidateCabinet()
      */
+    waitForPageLoad(): Chainable<null>
     clickSettings(): Chainable<null>
     closeModal(): Chainable<null>
     typeInSearchBar(test: string): Chainable<null>

cypress/support/pageCommands.ts

@@ -12,6 +12,10 @@ const CONFIG_ACTIONS = {
 
 // export type ConfigAction = keyof typeof CONFIG_ACTIONS
 
+Cypress.Commands.add('waitForPageLoad', () => {
+  cy.get('#root.loading').should('not.exist')
+})
+
 Cypress.Commands.add('clickSettings', () => {
   cy.findByTestId('global-settings').click()
 })