e2eテスト用にwindowにsignoutをインジェクトしてタスクごとに実行してみる

.github/workflows/test.yml

@@ -111,8 +111,3 @@ jobs:
       with:
         name: ${{ matrix.browser }}-cypress-screenshots
         path: cypress/screenshots
-    - uses: actions/upload-artifact@v2
-      if: always()
-      with:
-        name: ${{ matrix.browser }}-cypress-videos
-        path: cypress/videos

cypress.json

@@ -1,3 +1,4 @@
 {
-	"baseUrl": "http://localhost:61812"
+	"baseUrl": "http://localhost:61812",
+	"video": false
 }

cypress/integration/basic.js

@@ -6,8 +6,13 @@ describe('Before setup instance', () => {
 	});
 
 	afterEach(() => {
-		// テスト終了直前にページ遷移するようなテストケース(例えばアカウント作成)だと、たぶんCypressのバグでブラウザの内容が次のテストケースに引き継がれてしまう(例えばアカウントが作成し終わった段階からテストが始まる)。
-		// waitを入れることでそれを防止できる
+		// テスト終了直前にページ遷移するようなテストケース(例えばアカウント作成)だと、
+		// たぶんCypressのバグでブラウザの内容が次のテストケースに引き継がれてしまう
+		// (例えばアカウントが作成し終わった段階からテストが始まる→`Authentication failed`エラーが発生)。
+		// waitを入れることでそれを防止してみる
+		cy.wait(1000);
+		// waitでは不十分そうなのでsignout処理を行う
+		cy.window().invoke('_signout');
 		cy.wait(1000);
 	});
 
@@ -24,9 +29,10 @@ describe('Before setup instance', () => {
 		cy.get('[data-cy-admin-password] input').type('admin1234');
 		cy.get('[data-cy-admin-ok]').click();
 
-		// なぜか動かない
-		//cy.wait('@signup').should('have.property', 'response.statusCode');
-		cy.wait('@signup');
+		cy.wait('@signup').should(post => {
+			expect(post).to.have.property('response');
+			expect(post.response).to.have.property('statusCode');
+		});
   });
 });
 
@@ -44,8 +50,8 @@ describe('After setup instance', () => {
 	});
 
 	afterEach(() => {
-		// テスト終了直前にページ遷移するようなテストケース(例えばアカウント作成)だと、たぶんCypressのバグでブラウザの内容が次のテストケースに引き継がれてしまう(例えばアカウントが作成し終わった段階からテストが始まる)。
-		// waitを入れることでそれを防止できる
+		cy.wait(1000);
+		cy.window().invoke('_signout');
 		cy.wait(1000);
 	});
 
@@ -88,16 +94,14 @@ describe('After user signup', () => {
 	});
 
 	afterEach(() => {
-		// テスト終了直前にページ遷移するようなテストケース(例えばアカウント作成)だと、たぶんCypressのバグでブラウザの内容が次のテストケースに引き継がれてしまう(例えばアカウントが作成し終わった段階からテストが始まる)。
-		// waitを入れることでそれを防止できる
 		cy.wait(1000);
 	});
 
   it('successfully loads', () => {
     cy.visit('/');
   });
 
-	it('signin', () => {
+	it('signin and signout', () => {
 		cy.visit('/');
 
 		cy.intercept('POST', '/api/signin').as('signin');
@@ -108,6 +112,14 @@ describe('After user signup', () => {
 		cy.get('[data-cy-signin-password] input').type('alice1234{enter}');
 
 		cy.wait('@signin');
+
+		cy.log('Signin OK');
+
+		cy.wait(1000);
+
+		cy.window().invoke('_signout');
+		cy.wait(100);
+		cy.window().then(window => window.localStorage.getItem('account')).should('eq', null)
   });
 
 	it('suspend', function() {
@@ -157,8 +169,8 @@ describe('After user singed in', () => {
 	});
 
 	afterEach(() => {
-		// テスト終了直前にページ遷移するようなテストケース(例えばアカウント作成)だと、たぶんCypressのバグでブラウザの内容が次のテストケースに引き継がれてしまう(例えばアカウントが作成し終わった段階からテストが始まる)。
-		// waitを入れることでそれを防止できる
+		cy.wait(1000);
+		cy.window().invoke('_signout');
 		cy.wait(1000);
 	});
 

package.json

@@ -21,7 +21,7 @@
 		"dev": "node ./scripts/dev.js",
 		"lint": "node ./scripts/lint.js",
 		"cy:open": "cypress open",
-		"cy:run": "cypress run",
+		"cy:run": "cypress run --browser chrome",
 		"e2e": "start-server-and-test start:test http://localhost:61812 cy:run",
 		"mocha": "cd packages/backend && cross-env TS_NODE_FILES=true TS_NODE_TRANSPILE_ONLY=true TS_NODE_PROJECT=\"./test/tsconfig.json\" npx mocha",
 		"test": "npm run mocha",

packages/client/src/account.ts

@@ -19,6 +19,8 @@ export const $i = data ? reactive(JSON.parse(data) as Account) : null;
 export const iAmModerator = $i != null && ($i.isAdmin || $i.isModerator);
 
 export async function signout() {
+	if (!$i) return;
+
 	waiting();
 	localStorage.removeItem('account');
 
@@ -61,6 +63,8 @@ export async function signout() {
 	else unisonReload('/');
 }
 
+if (_DEV_) window._signout = signout; // Cypressで使う
+
 export async function getAccounts(): Promise<{ id: Account['id'], token: Account['token'] }[]> {
 	return (await get('accounts')) || [];
 }