Даже с журналами отладки было очень мало, чтобы продолжить.Моей последней надеждой было заглянуть в подозрительные сообщения
[middleware:source-files]: Requesting /assets/img/logo.png
[middleware:source-files]: Requesting /media/img/showcase-image.jpg
.Я также видел журналы, такие как WARN [web-server]: 404: /media/img/showcase-image.png, но они приходили как с локальных прогонов, так и с Gitlab CI.
Было полезно прочитать , как исправить 404 предупреждения для изображений во время тестирования юнитов кармы , а также файлов кармы документов.
Решением было исправить эти 404 и обеспечить, чтобы все мои «фиктивные» URL-адреса тестовых изображений были разрешены до реальных изображений .После чего задача Gitlab CI работала правильно.
Вот конфиг, который мне нужно было добавить в karma.conf.js :
files: [
{pattern: 'assets/img/*.png', watched: false, included: false, served: true, nocache: false},
{pattern: 'testing/assets/img/*.png', watched: false, included: false, served: true, nocache: false}
],
proxies: {
"/assets/": "/base/assets/",
"/media/": "/base/testing/assets/img/"
},
Объяснение
My AngularПриложение использует изображения, связанные в папке assets в проекте Angular, а также изображения, передаваемые из серверной части CMS.
Первый элемент в списке files настраивает Karma для загрузки локальных ресурсов, таких как assets / img / logo.png , в браузер тестирования.Карма обслуживает загруженные активы по /base/ URL, поэтому logo.png может быть доступно по /base/assets/img/logo.png.Первая строка в proxies передает запрос от assets/img/logo.png до /base/assets/img/logo.png, таким образом гарантируя, что logo.png загружается в тест.
Та же идея верна для поддельных URL, предоставленных для изображений, обслуживаемыхCMS.Я добавил «фальшивое» изображение в testing / assets / img / fake.png в моем проекте.В этом случае мой бэкэнд обычно обслуживал статические файлы на /media/, поэтому я смог обновить все свои тесты, указав /media/fake.png в качестве URL-адреса, который проксируется на /base/testing/assets/img/fake.png.
Пример теста
beforeEach(() => {
fixture = TestBed.createComponent(ProductComponent);
component = fixture.componentInstance;
component.product = {
// other data here
image: {
url: '/media/fake.png'
}
};
fixture.detectChanges();
}
it('should display image in card', () => {
const img = fixture.nativeElement.querySelector('img');
expect(img.src).toEqual('/media/fake.png')
});