Используйте сервис Angular для входа с помощью Cypress

Question

Я использую Cypress для тестирования нашего Angular приложения. После прочтения лучших рекомендаций Cypress я бы хотел реорганизовать нашу собственную команду входа в Cypress. В настоящее время он использует пользовательский интерфейс для входа в систему.

Я нашел пример того, как войти в систему с помощью кода приложения (https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/logging-in__using-app-code), но с этим у меня возникают проблемы с нашим Angular приложение. Очевидно, что мы используем сервис Angular для обработки входа в систему. Теперь попытка репликации кода из примера не работает с использованием службы Angular:

// test.spec
import { AuthService } from 'src/app/core/http/auth.service'

describe('Landing Page Test', () => {
  it('should log the user in running app code', () => {
    // I cannot run it like this, coz service is a class
    AuthService.login('username','password');

    // I also cannot instantiate the AuthService because it has injected dependencies
    // so this does not compile:
    const authService = new AuthService();
  });
});

// AuthService (shortend ...)
@Injectable({
  providedIn: 'root'
})
export class AuthService {
  constructor(private apiHttpService: ApiHttpService) {}

  login(username, password) {
    // do login stuff
  }
}

Есть ли способ подключиться к этой службе и запустить оттуда вход в систему? Или это невозможно с Angular?

Answer 1

Я думаю, вам следует повторить процесс, который будет выполнять пользователь:

• go для входа на страницу
• вставить учетные данные
• нажмите кнопку отправить

И тогда вы можете перемещаться вошедшим в систему.

Пример:

Cypress.Commands.add('login', () => {
  cy.visit(`${LOGIN_URL}`);
  cy.get('input[name="email"]').type('');
  cy.get('input[name="password"]').type('');
  cy.get('form').submit();
});