diff --git a/aio/content/examples/toh-pt6/e2e/app.e2e-spec.ts b/aio/content/examples/toh-pt6/e2e/app.e2e-spec.ts index b51be25f84..cbd0df76d4 100644 --- a/aio/content/examples/toh-pt6/e2e/app.e2e-spec.ts +++ b/aio/content/examples/toh-pt6/e2e/app.e2e-spec.ts @@ -190,6 +190,29 @@ describe('Tutorial part 6', () => { const maxId = heroesBefore[heroesBefore.length - 1].id; expect(heroesAfter[numHeroes]).toEqual({id: maxId + 1, name: newHeroName}); }); + + it('displays correctly styled buttons', async () => { + element.all(by.buttonText('x')).then(buttons => { + for (const button of buttons) { + // Inherited styles from styles.css + expect(button.getCssValue('font-family')).toBe('Arial'); + expect(button.getCssValue('border')).toContain('none'); + expect(button.getCssValue('padding')).toBe('5px 10px'); + expect(button.getCssValue('border-radius')).toBe('4px'); + // Styles defined in heroes.component.css + expect(button.getCssValue('left')).toBe('194px'); + expect(button.getCssValue('top')).toBe('-32px'); + } + }); + + const addButton = element(by.buttonText('add')); + // Inherited styles from styles.css + expect(addButton.getCssValue('font-family')).toBe('Arial'); + expect(addButton.getCssValue('border')).toContain('none'); + expect(addButton.getCssValue('padding')).toBe('5px 10px'); + expect(addButton.getCssValue('border-radius')).toBe('4px'); + }); + }); describe('Progressive hero search', () => { diff --git a/aio/content/examples/toh-pt6/src/app/heroes/heroes.component.css b/aio/content/examples/toh-pt6/src/app/heroes/heroes.component.css index 62634648ad..c345d1d970 100644 --- a/aio/content/examples/toh-pt6/src/app/heroes/heroes.component.css +++ b/aio/content/examples/toh-pt6/src/app/heroes/heroes.component.css @@ -51,7 +51,7 @@ } /* #docregion additions */ -.button { +button { background-color: #eee; border: none; padding: 5px 10px;