Add basic cypress tests

2024-11-08 09:29:10 +00:00 · 2022-11-27 20:56:12 +00:00 · 2022-11-27 20:56:12 +00:00 · 669b3a41ca
commit 669b3a41ca
parent 1c3bd60af2
28 changed files with 1435 additions and 129 deletions
--- a/build/dev-server.js
+++ b/build/dev-server.js
@ -31,13 +31,15 @@ var devMiddleware = require('webpack-dev-middleware')(compiler, {
 var hotMiddleware = require('webpack-hot-middleware')(compiler)

 // proxy api requests
-Object.keys(proxyTable).forEach(function (context) {
-  var options = proxyTable[context]
-  if (typeof options === 'string') {
-    options = { target: options }
-  }
-  app.use(proxyMiddleware(context, options))
-})
+if (!process.env.NO_DEV_PROXY) {
+  Object.keys(proxyTable).forEach(function (context) {
+    var options = proxyTable[context]
+    if (typeof options === 'string') {
+      options = { target: options }
+    }
+    app.use(proxyMiddleware(context, options))
+  })
+}

 // handle fallback for HTML5 history API
 app.use(require('connect-history-api-fallback')())
--- a/config/cypress.json
+++ b/config/cypress.json
@ -0,0 +1,4 @@
+{
+  "target": "http://cypress.example.com",
+  "staticConfigPreference": false
+}
--- a/config/index.js
+++ b/config/index.js
@ -1,14 +1,16 @@
 // see http://vuejs-templates.github.io/webpack for documentation.
 const path = require('path')
 let settings = {}
+const localSettings = process.env.CONFIG || './local.json'
+console.log('Using settings', localSettings)
 try {
-  settings = require('./local.json')
+  settings = require(localSettings)
  if (settings.target && settings.target.endsWith('/')) {
    // replacing trailing slash since it can conflict with some apis
    // and that's how actual BE reports its url
    settings.target = settings.target.replace(/\/$/, '')
  }
-  console.log('Using local dev server settings (/config/local.json):')
+  console.log('Using local dev server settings:')
  console.log(JSON.stringify(settings, null, 2))
 } catch (e) {
  console.log('Local dev server settings not found (/config/local.json)')
--- a/cypress.config.js
+++ b/cypress.config.js
@ -0,0 +1,20 @@
+const { defineConfig } = require("cypress");
+const config = require('./build/webpack.dev.conf');
+module.exports = defineConfig({
+  e2e: {
+    baseUrl: "http://localhost:8080",
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+    viewportHeight: 1080,
+    viewportWidth: 1920,
+  },
+
+  component: {
+    devServer: {
+      framework: "vue",
+      bundler: "webpack",
+      webpackConfig: config
+    },
+  },
+});
--- a/cypress/e2e/auth/auth.cy.js
+++ b/cypress/e2e/auth/auth.cy.js
@ -0,0 +1,34 @@
+/// <reference types="cypress" />
+
+describe('signing in', () => {
+  beforeEach(async () => {
+    cy.clearLocalStorage()
+    await indexedDB.deleteDatabase('localforage')
+  })
+
+  it('registers an oauth application', async () => {
+    cy.defaultIntercepts();
+    cy.intercept('POST', '/oauth/token', { fixture: 'oauth_token.json'}).as('createToken')
+    cy.intercept('/api/v1/accounts/verify_credentials', { fixture: 'user.json' }).as('verifyCredentials')
+    cy.visit('/')
+    cy.wait('@getInstance')
+    cy.get('input#username').type('testuser');
+    cy.get('input#password').type('testpassword');
+    cy.get('button[type="submit"]').click();
+
+    cy.wait('@createApp')
+    cy.wait('@createToken').then((interception) => {
+      console.log(interception.request)
+      const form = interception.request.body.split('\r\n---')
+      cy.expectHtmlFormEntryToBe(form, 'grant_type', 'client_credentials')
+    });
+    cy.wait('@createToken').then((interception) => {
+      console.log(interception.request)
+      const form = interception.request.body.split('\r\n---')
+      cy.expectHtmlFormEntryToBe(form, 'grant_type', 'password')
+      cy.expectHtmlFormEntryToBe(form, 'username', 'testuser')
+      cy.expectHtmlFormEntryToBe(form, 'password', 'testpassword')
+    });
+    cy.wait('@verifyCredentials')
+  });
+})
--- a/cypress/fixtures/example.json
+++ b/cypress/fixtures/example.json
@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}
--- a/cypress/fixtures/frontend_configurations.json
+++ b/cypress/fixtures/frontend_configurations.json
@ -0,0 +1,26 @@
+{
+  "masto_fe": {
+    "showInstanceSpecificPanel": true
+  },
+  "pleroma_fe": {
+    "alwaysShowSubjectInput": true,
+    "background": "/images/5cm.jpg",
+    "collapseMessageWithSubject": true,
+    "formattingOptionsEnabled": true,
+    "hidePostStats": false,
+    "hideSiteFavicon": true,
+    "hideUserStats": true,
+    "logo": "/static/logo.png",
+    "logoMask": false,
+    "redirectRootLogin": "/main/friends",
+    "redirectRootNoLogin": "/main/public",
+    "renderMisskeyMarkdown": true,
+    "scopeCopy": true,
+    "scopeOptionsEnabled": true,
+    "showInstanceSpecificPanel": true,
+    "showNavShortcuts": false,
+    "showPanelNavShortcuts": true,
+    "subjectLineBehavior": "email",
+    "theme": "ihatebeingalive"
+  }
+}
--- a/cypress/fixtures/instance.json
+++ b/cypress/fixtures/instance.json
@ -0,0 +1,133 @@
+{
+  "approval_required": false,
+  "avatar_upload_limit": 2000000,
+  "background_image": "/images/city.jpg",
+  "background_upload_limit": 4000000,
+  "banner_upload_limit": 4000000,
+  "description": "A Test Instace",
+  "description_limit": 5000,
+  "email": "somewhere@example.com",
+  "languages": [
+    "en",
+    "ja"
+  ],
+  "max_toot_chars": 5000,
+  "pleroma": {
+    "metadata": {
+      "account_activation_required": false,
+      "features": [
+        "pleroma_api",
+        "akkoma_api",
+        "mastodon_api",
+        "mastodon_api_streaming",
+        "polls",
+        "v2_suggestions",
+        "pleroma_explicit_addressing",
+        "shareable_emoji_packs",
+        "multifetch",
+        "pleroma:api/v1/notifications:include_types_filter",
+        "editing",
+        "media_proxy",
+        "pleroma_emoji_reactions",
+        "exposable_reactions",
+        "profile_directory",
+        "akkoma:machine_translation",
+        "custom_emoji_reactions",
+        "pleroma:get:main/ostatus"
+      ],
+      "federation": {
+        "enabled": true,
+        "exclusions": true,
+        "mrf_hashtag": {
+          "federated_timeline_removal": [],
+          "reject": [],
+          "sensitive": [
+            "nsfw"
+          ]
+        },
+        "mrf_hellthread": {
+          "delist_threshold": 5,
+          "reject_threshold": 10
+        },
+        "mrf_keyword": {
+          "federated_timeline_removal": [],
+          "reject": [
+            "rejectme"
+          ],
+          "replace": []
+        },
+        "mrf_policies": [
+          "SimplePolicy",
+          "HellthreadPolicy",
+          "KeywordPolicy",
+          "TagPolicy",
+          "InlineQuotePolicy",
+          "HashtagPolicy"
+        ],
+        "mrf_simple": {
+          "accept": [],
+          "avatar_removal": [],
+          "banner_removal": [],
+          "federated_timeline_removal": [],
+          "followers_only": [],
+          "media_nsfw": [],
+          "media_removal": [],
+          "reject": [
+            "badinstance.com"
+          ],
+          "reject_deletes": [],
+          "report_removal": []
+        },
+        "mrf_simple_info": {
+          "reject": {
+            "badinstance.com": {
+              "reason": "This instance is bad"
+            }
+          }
+        },
+        "quarantined_instances": [],
+        "quarantined_instances_info": {
+          "quarantined_instances": {}
+        }
+      },
+      "fields_limits": {
+        "max_fields": 10,
+        "max_remote_fields": 20,
+        "name_length": 512,
+        "value_length": 2048
+      },
+      "post_formats": [
+        "text/plain",
+        "text/html",
+        "text/markdown",
+        "text/bbcode",
+        "text/x.misskeymarkdown"
+      ],
+      "privileged_staff": false
+    },
+    "stats": {
+      "mau": 27
+    },
+    "vapid_public_key": "BDgd8xcYuskwMLnr-3Gi-xOU_Jz9IOxhHIW0VWgBMM47wB8qfC_Hw26eNd3sGDSEoXk06ZY-L5qKHqLLNzZSdnw"
+  },
+  "poll_limits": {
+    "max_expiration": 31536000,
+    "max_option_chars": 200,
+    "max_options": 20,
+    "min_expiration": 0
+  },
+  "registrations": false,
+  "stats": {
+    "domain_count": 14557,
+    "status_count": 284658,
+    "user_count": 72
+  },
+  "thumbnail": "https://ihatebeinga.live/media/f11ac1c7cf9bff14c06e32b004bd74100cb57bcfef78881794998e779403f1e1.png",
+  "title": "Test Instance",
+  "upload_limit": 100000000,
+  "uri": "http://localhost:8080/",
+  "urls": {
+    "streaming_api": "ws://localhost:8080"
+  },
+  "version": "2.7.2 (compatible; Akkoma 3.4.0-118-g41241bbb-develop)"
+}
--- a/cypress/fixtures/instance_panel.html
+++ b/cypress/fixtures/instance_panel.html
@ -0,0 +1 @@
+<h4>Testing Panel</h4>
--- a/cypress/fixtures/nodeinfo.json
+++ b/cypress/fixtures/nodeinfo.json
@ -0,0 +1,141 @@
+{
+  "metadata": {
+    "accountActivationRequired": false,
+    "features": [
+      "pleroma_api",
+      "akkoma_api",
+      "mastodon_api",
+      "mastodon_api_streaming",
+      "polls",
+      "v2_suggestions",
+      "pleroma_explicit_addressing",
+      "shareable_emoji_packs",
+      "multifetch",
+      "pleroma:api/v1/notifications:include_types_filter",
+      "editing",
+      "media_proxy",
+      "pleroma_emoji_reactions",
+      "exposable_reactions",
+      "profile_directory",
+      "akkoma:machine_translation",
+      "custom_emoji_reactions",
+      "pleroma:get:main/ostatus"
+    ],
+    "federation": {
+      "enabled": true,
+      "exclusions": true,
+      "mrf_hashtag": {
+        "federated_timeline_removal": [],
+        "reject": [],
+        "sensitive": [
+          "nsfw"
+        ]
+      },
+      "mrf_hellthread": {
+        "delist_threshold": 5,
+        "reject_threshold": 10
+      },
+      "quarantined_instances": [],
+      "quarantined_instances_info": {
+        "quarantined_instances": {}
+      }
+    },
+    "fieldsLimits": {
+      "maxFields": 10,
+      "maxRemoteFields": 20,
+      "nameLength": 512,
+      "valueLength": 2048
+    },
+    "invitesEnabled": true,
+    "localBubbleInstances": [
+      "bubble.example.com"
+    ],
+    "mailerEnabled": true,
+    "nodeDescription": "A Test Instance",
+    "nodeName": "Test",
+    "pollLimits": {
+      "max_expiration": 31536000,
+      "max_option_chars": 200,
+      "max_options": 20,
+      "min_expiration": 0
+    },
+    "postFormats": [
+      "text/plain",
+      "text/html",
+      "text/markdown",
+      "text/bbcode",
+      "text/x.misskeymarkdown"
+    ],
+    "private": false,
+    "restrictedNicknames": [
+      ".well-known",
+      "~",
+      "about",
+      "activities",
+      "api",
+      "auth",
+      "check_password",
+      "dev",
+      "friend-requests",
+      "inbox",
+      "internal",
+      "main",
+      "media",
+      "nodeinfo",
+      "notice",
+      "oauth",
+      "objects",
+      "ostatus_subscribe",
+      "pleroma",
+      "proxy",
+      "push",
+      "registration",
+      "relay",
+      "settings",
+      "status",
+      "tag",
+      "user-search",
+      "user_exists",
+      "users",
+      "web",
+      "verify_credentials",
+      "update_credentials",
+      "relationships",
+      "search",
+      "confirmation_resend",
+      "mfa"
+    ],
+    "skipThreadContainment": true,
+    "staffAccounts": [
+      "http://localhost:8080/users/admin"
+    ],
+    "suggestions": {
+      "enabled": false
+    },
+    "uploadLimits": {
+      "avatar": 2000000,
+      "background": 4000000,
+      "banner": 4000000,
+      "general": 100000000
+    }
+  },
+  "openRegistrations": false,
+  "protocols": [
+    "activitypub"
+  ],
+  "services": {
+    "inbound": [],
+    "outbound": []
+  },
+  "software": {
+    "name": "akkoma",
+    "version": "3.4.0-118-g41241bbb-develop"
+  },
+  "usage": {
+    "localPosts": 284658,
+    "users": {
+      "total": 72
+    }
+  },
+  "version": "2.0"
+}
--- a/cypress/fixtures/oauth_app.json
+++ b/cypress/fixtures/oauth_app.json
@ -0,0 +1,9 @@
+{
+  "id": "563419",
+  "name": "test app",
+  "website": null,
+  "redirect_uri": "urn:ietf:wg:oauth:2.0:oob",
+  "client_id": "TWhM-tNSuncnqN7DBJmoyeLnk6K3iJJ71KKXxgL1hPM",
+  "client_secret": "ZEaFUFmF0umgBX1qKJDjaU99Q31lDkOU8NutzTOoliw",
+  "vapid_key": "BCk-QqERU0q-CfYZjcuB6lnyyOYfJ2AifKqfeGIm7Z-HiTU5T9eTG5GxVA0_OH5mMlI4UkkDTpaZwozy0TzdZ2M="
+}
--- a/cypress/fixtures/oauth_token.json
+++ b/cypress/fixtures/oauth_token.json
@ -0,0 +1,6 @@
+{
+  "access_token": "ZA-Yj3aBD8U8Cm7lKUp-lm9O9BmDgdhHzDeqsY8tlL0",
+  "token_type": "Bearer",
+  "scope": "read write follow push",
+  "created_at": 1573979017
+}
--- a/cypress/fixtures/public_timeline.json
+++ b/cypress/fixtures/public_timeline.json
@ -0,0 +1 @@
+[]
--- a/cypress/fixtures/user.json
+++ b/cypress/fixtures/user.json
@ -0,0 +1,198 @@
+{
+  "acct": "test",
+  "akkoma": {
+    "instance": {
+      "favicon": "favicon.png",
+      "name": "cypress.example.com",
+      "nodeinfo": {
+        "metadata": {
+          "accountActivationRequired": false,
+          "features": [
+            "pleroma_api",
+            "akkoma_api",
+            "mastodon_api",
+            "mastodon_api_streaming",
+            "polls",
+            "v2_suggestions",
+            "pleroma_explicit_addressing",
+            "shareable_emoji_packs",
+            "multifetch",
+            "pleroma:api/v1/notifications:include_types_filter",
+            "editing",
+            "media_proxy",
+            "pleroma_emoji_reactions",
+            "exposable_reactions",
+            "profile_directory",
+            "akkoma:machine_translation",
+            "custom_emoji_reactions",
+            "pleroma:get:main/ostatus"
+          ],
+          "federation": {
+            "enabled": true,
+            "exclusions": true
+          },
+          "fieldsLimits": {
+            "maxFields": 10,
+            "maxRemoteFields": 20,
+            "nameLength": 512,
+            "valueLength": 2048
+          },
+          "invitesEnabled": true,
+          "localBubbleInstances": [
+            "bubble.exaple.com"
+          ],
+          "mailerEnabled": true,
+          "nodeDescription": "An Akkoma Instance",
+          "nodeName": "Test Instance",
+          "pollLimits": {
+            "max_expiration": 31536000,
+            "max_option_chars": 200,
+            "max_options": 20,
+            "min_expiration": 0
+          },
+          "postFormats": [
+            "text/plain",
+            "text/html",
+            "text/markdown",
+            "text/bbcode",
+            "text/x.misskeymarkdown"
+          ],
+          "private": false,
+          "restrictedNicknames": [
+            ".well-known",
+            "~",
+            "about",
+            "activities",
+            "api",
+            "auth",
+            "check_password",
+            "dev",
+            "friend-requests",
+            "inbox",
+            "internal",
+            "main",
+            "media",
+            "nodeinfo",
+            "notice",
+            "oauth",
+            "objects",
+            "ostatus_subscribe",
+            "pleroma",
+            "proxy",
+            "push",
+            "registration",
+            "relay",
+            "settings",
+            "status",
+            "tag",
+            "user-search",
+            "user_exists",
+            "users",
+            "web",
+            "verify_credentials",
+            "update_credentials",
+            "relationships",
+            "search",
+            "confirmation_resend",
+            "mfa"
+          ],
+          "skipThreadContainment": true,
+          "staffAccounts": [
+            "http://cypress.example.com/users/test"
+          ],
+          "suggestions": {
+            "enabled": false
+          },
+          "uploadLimits": {
+            "avatar": 2000000,
+            "background": 4000000,
+            "banner": 4000000,
+            "general": 100000000
+          }
+        },
+        "openRegistrations": false,
+        "protocols": [
+          "activitypub"
+        ],
+        "services": {
+          "inbound": [],
+          "outbound": []
+        },
+        "software": {
+          "name": "akkoma",
+          "version": "3.4.0-136-g98d4d691-develop"
+        },
+        "usage": {
+          "localPosts": 284709,
+          "users": {
+            "total": 72
+          }
+        },
+        "version": "2.0"
+      }
+    }
+  },
+  "avatar": "3ba406a0f1ce44b2379029f322cacb77b78951f515495739bd65bbfcee297931.jpg",
+  "avatar_static": "3ba406a0f1ce44b2379029f322cacb77b78951f515495739bd65bbfcee297931.jpg",
+  "bot": false,
+  "created_at": "2018-11-27T18:04:50.000Z",
+  "display_name": "Test User",
+  "emojis": [
+  ],
+  "fields": [
+  ],
+  "follow_requests_count": 1,
+  "followers_count": 1,
+  "following_count": 1,
+  "fqn": "test@cypress.example.com",
+  "header": "header.gif",
+  "header_static": "header.gif",
+  "id": "1",
+  "last_status_at": "2022-11-27T15:17:03",
+  "locked": true,
+  "note": "A test user",
+"pleroma": {
+    "allow_following_move": true,
+    "also_known_as": [],
+    "ap_id": "http://cypress.example.com/users/example",
+    "background_image": "something.jpg",
+    "deactivated": false,
+    "email": "somewhere@example.com",
+    "favicon": "/favicon.png",
+    "hide_favorites": true,
+    "hide_followers": true,
+    "hide_followers_count": false,
+    "hide_follows": true,
+    "hide_follows_count": false,
+    "is_admin": true,
+    "is_confirmed": true,
+    "is_moderator": true,
+    "is_suggested": false,
+    "notification_settings": {
+      "block_from_strangers": false,
+      "hide_notification_contents": false
+    },
+    "relationship": {},
+    "settings_store": {},
+    "skip_thread_containment": false,
+    "tags": [],
+    "unread_conversation_count": 2108,
+    "unread_notifications_count": 18
+  },
+  "source": {
+    "fields": [
+    ],
+    "note": "Test user",
+    "pleroma": {
+      "actor_type": "Person",
+      "discoverable": true,
+      "no_rich_text": false,
+      "show_role": true
+    },
+    "privacy": "private",
+    "sensitive": false
+  },
+  "statuses_count": 10166,
+  "url": "http://cypress.example.com/users/test",
+  "username": "test"
+}
--- a/cypress/support/commands.js
+++ b/cypress/support/commands.js
@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
--- a/cypress/support/component-index.html
+++ b/cypress/support/component-index.html
@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>Components App</title>
+  </head>
+  <body>
+    <div data-cy-root></div>
+  </body>
+</html>
--- a/cypress/support/component.js
+++ b/cypress/support/component.js
@ -0,0 +1,19 @@
+import './commands'
+import Vuex from 'vuex'
+import getStore from '../../src/store'
+
+
+import { mount } from 'cypress/vue'
+
+Cypress.Commands.add('mount', (component, options = {}) => {
+  // Setup options object
+  options.extensions = options.extensions || {}
+  options.extensions.plugins = options.extensions.plugins || []
+  // Use store passed in from options, or initialize a new one
+  options.store = options.store || getStore()
+
+  // Add Vuex plugin
+  options.extensions.plugins.push(Vuex)
+
+  return mount(component, options)
+})
--- a/cypress/support/e2e.js
+++ b/cypress/support/e2e.js
@ -0,0 +1,48 @@
+// ***********************************************************
+// This example support/e2e.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
+Cypress.Commands.add('defaultIntercepts', () => {
+  const notAuthorized = {
+    body: { error: "not_authorized" },
+    statusCode: 403
+  }
+  cy.intercept('/api/pleroma/frontend_configurations', { fixture: 'frontend_configurations.json' });
+  cy.intercept('/instance/panel.html', { fixture: 'instance_panel.html' })
+  cy.intercept('/api/v1/instance', { fixture: 'instance.json' }).as('getInstance')
+  cy.intercept('/nodeinfo/2.0.json', { fixture: 'nodeinfo.json' })
+  cy.intercept('/api/v1/timelines/public*', { fixture: 'public_timeline.json' })
+  cy.intercept('/static/stickers.json', { body: {} })
+
+  cy.intercept('POST', 'http://cypress.example.com/oauth/token', notAuthorized);
+  cy.intercept('/api/v1/mutes', notAuthorized);
+  cy.intercept('/api/v1/announcements', notAuthorized);
+  cy.intercept('POST', 'http://cypress.example.com/api/v1/apps', { fixture: 'oauth_app.json' }).as('createApp');
+
+});
+
+Cypress.Commands.add('authenticatedIntercepts', () => {
+  cy.intercept('POST', '/oauth/token', { fixture: 'oauth_token.json'})
+  cy.intercept('/api/v1/announcements', { body: [] })
+  cy.intercept('/api/v1/mutes', { body: [] })
+});
+
+Cypress.Commands.add('expectHtmlFormEntryToBe', (form, key, value) => {
+  expect(form.find((line) => line.includes(`name="${key}"`))).to.include(value)
+});
--- a/cypress/videos/auth.cy.js.mp4
+++ b/cypress/videos/auth.cy.js.mp4
--- a/package.json
+++ b/package.json
@ -13,7 +13,8 @@
    "test": "npm run unit && npm run e2e",
    "stylelint": "stylelint src/**/*.scss",
    "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs",
-    "lint-fix": "eslint --fix --ext .js,.vue src test/unit/specs test/e2e/specs"
+    "lint-fix": "eslint --fix --ext .js,.vue src test/unit/specs test/e2e/specs",
+    "run:cypress": "CONFIG='./cypress.json' NO_DEV_SERVER=true yarn dev"
  },
  "dependencies": {
    "@babel/runtime": "7.17.8",
@ -66,6 +67,7 @@
    "cross-spawn": "^7.0.3",
    "css-loader": "^6.7.2",
    "custom-event-polyfill": "^1.0.7",
+    "cypress": "^11.2.0",
    "eslint": "^7.32.0",
    "eslint-config-standard": "^17.0.0",
    "eslint-friendly-formatter": "^4.0.1",
--- a/src/boot/after_store.js
+++ b/src/boot/after_store.js
@ -393,10 +393,7 @@ const afterStoreSetup = async ({ store, i18n }) => {
    getInstanceConfig({ store })
  ])

-  // Start fetching things that don't need to block the UI
-  store.dispatch('fetchMutes')
-  store.dispatch('startFetchingAnnouncements')
-  store.dispatch('startFetchingReports')
+
  getTOS({ store })
  getStickers({ store })

--- a/src/components/basic_user_card/basic_user_card.js
+++ b/src/components/basic_user_card/basic_user_card.js
@ -21,7 +21,7 @@ const BasicUserCard = {
    toggleUserExpanded () {
      this.userExpanded = !this.userExpanded
    },
-    userProfileLink (user) {
+    userProfileLink(user) {
      return generateProfileLink(user.id, user.screen_name, this.$store.state.instance.restrictedNicknames)
    }
  }
--- a/src/i18n.js
+++ b/src/i18n.js
@ -0,0 +1,17 @@
+import 'custom-event-polyfill'
+import './lib/event_target_polyfill.js'
+import { createI18n } from 'vue-i18n'
+import messages from './i18n/messages.js'
+
+const currentLocale = (window.navigator.language || 'en').split('-')[0]
+
+const i18n = createI18n({
+  // By default, use the browser locale, we will update it if neccessary
+  locale: 'en',
+  fallbackLocale: 'en',
+  messages: messages.default
+})
+
+messages.setLanguage(i18n, currentLocale)
+
+export default i18n;
--- a/src/main.js
+++ b/src/main.js
@ -1,100 +1,12 @@
-import { createStore } from 'vuex'
-
+import getStore from './store';
+import i18n from './i18n';
 import 'custom-event-polyfill'
 import './lib/event_target_polyfill.js'
-
-import interfaceModule from './modules/interface.js'
-import instanceModule from './modules/instance.js'
-import statusesModule from './modules/statuses.js'
-import listsModule from './modules/lists.js'
-import usersModule from './modules/users.js'
-import apiModule from './modules/api.js'
-import configModule from './modules/config.js'
-import serverSideConfigModule from './modules/serverSideConfig.js'
-import oauthModule from './modules/oauth.js'
-import authFlowModule from './modules/auth_flow.js'
-import mediaViewerModule from './modules/media_viewer.js'
-import oauthTokensModule from './modules/oauth_tokens.js'
-import reportsModule from './modules/reports.js'
-import pollsModule from './modules/polls.js'
-import postStatusModule from './modules/postStatus.js'
-import announcementsModule from './modules/announcements.js'
-import editStatusModule from './modules/editStatus.js'
-import statusHistoryModule from './modules/statusHistory.js'
-
-import { createI18n } from 'vue-i18n'
-
-import createPersistedState from './lib/persisted_state.js'
-import pushNotifications from './lib/push_notifications_plugin.js'
-
-import messages from './i18n/messages.js'
-
 import afterStoreSetup from './boot/after_store.js'

-const currentLocale = (window.navigator.language || 'en').split('-')[0]
-
-const i18n = createI18n({
-  // By default, use the browser locale, we will update it if neccessary
-  locale: 'en',
-  fallbackLocale: 'en',
-  messages: messages.default
-})
-
-messages.setLanguage(i18n, currentLocale)
-
-const persistedStateOptions = {
-  paths: [
-    'config',
-    'users.lastLoginName',
-    'oauth'
-  ]
-};
-
 (async () => {
-  let storageError = false
-  const plugins = [pushNotifications]
-  try {
-    const persistedState = await createPersistedState(persistedStateOptions)
-    plugins.push(persistedState)
-  } catch (e) {
-    console.error(e)
-    storageError = true
-  }
-  const store = createStore({
-    modules: {
-      i18n: {
-        getters: {
-          i18n: () => i18n.global
-        }
-      },
-      interface: interfaceModule,
-      instance: instanceModule,
-      // TODO refactor users/statuses modules, they depend on each other
-      users: usersModule,
-      statuses: statusesModule,
-      lists: listsModule,
-      api: apiModule,
-      config: configModule,
-      serverSideConfig: serverSideConfigModule,
-      oauth: oauthModule,
-      authFlow: authFlowModule,
-      mediaViewer: mediaViewerModule,
-      oauthTokens: oauthTokensModule,
-      reports: reportsModule,
-      polls: pollsModule,
-      postStatus: postStatusModule,
-      announcements: announcementsModule,
-      editStatus: editStatusModule,
-      statusHistory: statusHistoryModule
-    },
-    plugins,
-    strict: false // Socket modifies itself, let's ignore this for now.
-    // strict: process.env.NODE_ENV !== 'production'
-  })
-  if (storageError) {
-    store.dispatch('pushGlobalNotice', { messageKey: 'errors.storage_unavailable', level: 'error' })
-  }
-  afterStoreSetup({ store, i18n })
+  const store = await getStore();
+  return afterStoreSetup({ store, i18n })
 })()

 // These are inlined by webpack's DefinePlugin
--- a/src/modules/users.js
+++ b/src/modules/users.js
@ -562,6 +562,9 @@ const users = {
              commit('addNewUsers', [user])

              store.dispatch('fetchEmoji')
+              store.dispatch('fetchMutes')
+              store.dispatch('startFetchingAnnouncements')
+              store.dispatch('startFetchingReports')

              getNotificationPermission()
                .then(permission => commit('setNotificationPermission', permission))
--- a/src/services/new_api/oauth.js
+++ b/src/services/new_api/oauth.js
@ -77,6 +77,9 @@ const getToken = ({ clientId, clientSecret, instance, code }) => {
    body: form
  })
    .then((data) => data.json())
+    .catch((e) => {
+      console.error(e);
+    });
 }

 export const getClientToken = ({ clientId, clientSecret, instance }) => {
--- a/src/store.js
+++ b/src/store.js
@ -0,0 +1,84 @@
+import { createStore } from 'vuex'
+
+import 'custom-event-polyfill'
+import './lib/event_target_polyfill.js'
+
+import interfaceModule from './modules/interface.js'
+import instanceModule from './modules/instance.js'
+import statusesModule from './modules/statuses.js'
+import listsModule from './modules/lists.js'
+import usersModule from './modules/users.js'
+import apiModule from './modules/api.js'
+import configModule from './modules/config.js'
+import serverSideConfigModule from './modules/serverSideConfig.js'
+import oauthModule from './modules/oauth.js'
+import authFlowModule from './modules/auth_flow.js'
+import mediaViewerModule from './modules/media_viewer.js'
+import oauthTokensModule from './modules/oauth_tokens.js'
+import reportsModule from './modules/reports.js'
+import pollsModule from './modules/polls.js'
+import postStatusModule from './modules/postStatus.js'
+import announcementsModule from './modules/announcements.js'
+import editStatusModule from './modules/editStatus.js'
+import statusHistoryModule from './modules/statusHistory.js'
+import i18n from './i18n';
+
+import createPersistedState from './lib/persisted_state.js'
+import pushNotifications from './lib/push_notifications_plugin.js'
+
+const persistedStateOptions = {
+  paths: [
+    'config',
+    'users.lastLoginName',
+    'oauth'
+  ]
+};
+
+const getStore = async () => {
+  let storageError = false
+  const plugins = [pushNotifications]
+  try {
+    const persistedState = await createPersistedState(persistedStateOptions)
+    plugins.push(persistedState)
+  } catch (e) {
+    console.error(e)
+    storageError = true
+  }
+  const store = createStore({
+    modules: {
+      i18n: {
+        getters: {
+          i18n: () => i18n.global
+        }
+      },
+      interface: interfaceModule,
+      instance: instanceModule,
+      // TODO refactor users/statuses modules, they depend on each other
+      users: usersModule,
+      statuses: statusesModule,
+      lists: listsModule,
+      api: apiModule,
+      config: configModule,
+      serverSideConfig: serverSideConfigModule,
+      oauth: oauthModule,
+      authFlow: authFlowModule,
+      mediaViewer: mediaViewerModule,
+      oauthTokens: oauthTokensModule,
+      reports: reportsModule,
+      polls: pollsModule,
+      postStatus: postStatusModule,
+      announcements: announcementsModule,
+      editStatus: editStatusModule,
+      statusHistory: statusHistoryModule
+    },
+    plugins,
+    strict: false // Socket modifies itself, let's ignore this for now.
+  })
+  if (storageError) {
+    store.dispatch('pushGlobalNotice', { messageKey: 'errors.storage_unavailable', level: 'error' })
+  }
+
+  return store;
+};
+
+export default getStore;
--- a/yarn.lock
+++ b/yarn.lock