-
Notifications
You must be signed in to change notification settings - Fork 81
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #685 from KshitijThareja/vt-abstraction
Add abstraction logic for simplifying writing visual tests
- Loading branch information
Showing
11 changed files
with
124 additions
and
157 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -38,4 +38,4 @@ jobs: | |
| yarn --frozen-lockfile | ||
| npm rebuild node-sass | ||
| - name: Run tests | ||
| run: yarn test | ||
| run: yarn test | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| import percySnapshot from '@percy/puppeteer'; | ||
|
|
||
| export async function renderComponent(component, props) { | ||
| const beforeRenderState = await page.evaluate(() => { | ||
| const testing_playground = document.querySelector('#testing-playground'); | ||
| return testing_playground ? testing_playground.innerHTML : ''; | ||
| }); | ||
|
|
||
| await page.evaluate( | ||
| ({ component, props }) => { | ||
| window.postMessage( | ||
| { | ||
| type: 'RENDER_COMPONENT', | ||
| component: component, | ||
| props: props, | ||
| }, | ||
| '*' | ||
| ); | ||
| }, | ||
| { component, props } | ||
| ); | ||
| await page.waitForSelector('#testing-playground'); | ||
|
|
||
| // Wait until the innerHTML of the testing playground changes, indicating that the component has been rendered. | ||
| await page.waitForFunction( | ||
| initialState => { | ||
| const testing_playground = document.querySelector('#testing-playground'); | ||
| return testing_playground && testing_playground.innerHTML !== initialState; | ||
| }, | ||
| {}, | ||
| beforeRenderState | ||
| ); | ||
|
|
||
| // Check if the component has been rendered by comparing the initial state with the current state. | ||
| const isComponentRendered = await page.evaluate(initialState => { | ||
| const testing_playground = document.querySelector('#testing-playground'); | ||
| return testing_playground && testing_playground.innerHTML !== initialState; | ||
| }, beforeRenderState); | ||
|
|
||
| global.expect(isComponentRendered).toBe(true); | ||
| } | ||
|
|
||
| export async function takeSnapshot(name) { | ||
| if (process.env.TEST_TYPE == 'visual') { | ||
| await percySnapshot(page, name); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,109 +1,75 @@ | ||
| import { shallowMount } from '@vue/test-utils'; | ||
| import percySnapshot from '@percy/puppeteer'; | ||
| import KButton from '../KButton.vue'; | ||
| import { canTakeScreenshot } from '../../../jest.conf/testUtils'; | ||
| import { renderComponent, takeSnapshot } from '../../../jest.conf/visual.testUtils'; | ||
|
|
||
| describe('KButton', () => { | ||
| if (!canTakeScreenshot()) { | ||
| describe('icon related props', () => { | ||
| it('should render an icon before the text with the icon string passed to the `icon` prop', () => { | ||
| const wrapper = shallowMount(KButton, { | ||
| propsData: { | ||
| icon: 'add', | ||
| }, | ||
| }); | ||
| expect(wrapper.find('[data-test="iconBefore"]').exists()).toBe(true); | ||
| describe('icon related props', () => { | ||
| it('should render an icon before the text with the icon string passed to the `icon` prop', () => { | ||
| const wrapper = shallowMount(KButton, { | ||
| propsData: { | ||
| icon: 'add', | ||
| }, | ||
| }); | ||
| it('should render an icon after the text with the icon string pased to the `iconAfter` prop', () => { | ||
| const wrapper = shallowMount(KButton, { | ||
| propsData: { | ||
| iconAfter: 'video', | ||
| }, | ||
| }); | ||
| expect(wrapper.find('[data-test="iconAfter"]').exists()).toBe(true); | ||
| expect(wrapper.find('[data-test="iconBefore"]').exists()).toBe(true); | ||
| }); | ||
| it('should render an icon after the text with the icon string pased to the `iconAfter` prop', () => { | ||
| const wrapper = shallowMount(KButton, { | ||
| propsData: { | ||
| iconAfter: 'video', | ||
| }, | ||
| }); | ||
| it('should render a dropdown icon when hasDropdown is true', () => { | ||
| const wrapper = shallowMount(KButton, { | ||
| propsData: { | ||
| hasDropdown: true, | ||
| }, | ||
| }); | ||
| expect(wrapper.find('[data-test="dropdownIcon"]').exists()).toBe(true); | ||
| expect(wrapper.find('[data-test="iconAfter"]').exists()).toBe(true); | ||
| }); | ||
| it('should render a dropdown icon when hasDropdown is true', () => { | ||
| const wrapper = shallowMount(KButton, { | ||
| propsData: { | ||
| hasDropdown: true, | ||
| }, | ||
| }); | ||
| expect(wrapper.find('[data-test="dropdownIcon"]').exists()).toBe(true); | ||
| }); | ||
| }); | ||
|
|
||
| describe('text prop and slots', () => { | ||
| it('should render the text prop if nothing is in the default slot', () => { | ||
| const wrapper = shallowMount(KButton, { | ||
| propsData: { | ||
| text: 'test', | ||
| }, | ||
| }); | ||
| expect(wrapper.text()).toContain('test'); | ||
| describe('text prop and slots', () => { | ||
| it('should render the text prop if nothing is in the default slot', () => { | ||
| const wrapper = shallowMount(KButton, { | ||
| propsData: { | ||
| text: 'test', | ||
| }, | ||
| }); | ||
| expect(wrapper.text()).toContain('test'); | ||
| }); | ||
|
|
||
| it('should render the slot when the slot has content', () => { | ||
| const wrapper = shallowMount(KButton, { | ||
| propsData: { | ||
| text: 'test', | ||
| }, | ||
| slots: { | ||
| default: '<span>slot</span>', | ||
| }, | ||
| }); | ||
| expect(wrapper.text()).toContain('slot'); | ||
| expect(wrapper.text()).toContain('test'); | ||
| it('should render the slot when the slot has content', () => { | ||
| const wrapper = shallowMount(KButton, { | ||
| propsData: { | ||
| text: 'test', | ||
| }, | ||
| slots: { | ||
| default: '<span>slot</span>', | ||
| }, | ||
| }); | ||
| expect(wrapper.text()).toContain('slot'); | ||
| expect(wrapper.text()).toContain('test'); | ||
| }); | ||
| }); | ||
|
|
||
| describe('event handling', () => { | ||
| it('should emit a click event when clicked', () => { | ||
| const wrapper = shallowMount(KButton, { | ||
| propsData: { | ||
| text: 'test', | ||
| }, | ||
| }); | ||
| wrapper.trigger('click'); | ||
| expect(wrapper.emitted().click).toBeTruthy(); | ||
| describe('event handling', () => { | ||
| it('should emit a click event when clicked', () => { | ||
| const wrapper = shallowMount(KButton, { | ||
| propsData: { | ||
| text: 'test', | ||
| }, | ||
| }); | ||
| wrapper.trigger('click'); | ||
| expect(wrapper.emitted().click).toBeTruthy(); | ||
| }); | ||
| } else { | ||
| describe('KButton Visual Tests', () => { | ||
| beforeAll(async () => { | ||
| await page.goto('http://localhost:4000/testing-playground', { waitUntil: 'networkidle2' }); | ||
| }); | ||
| }); | ||
|
|
||
| async function renderComponent(component, props) { | ||
| await page.evaluate( | ||
| ({ component, props }) => { | ||
| window.postMessage( | ||
| { | ||
| type: 'RENDER_COMPONENT', | ||
| component: component, | ||
| props: props, | ||
| }, | ||
| '*' | ||
| ); | ||
| }, | ||
| { component, props } | ||
| ); | ||
| await page.waitForSelector('#testing-playground'); | ||
|
|
||
| const isComponentRendered = await page.evaluate(() => { | ||
| const testing_playground = document.querySelector('#testing-playground'); | ||
| return testing_playground && testing_playground.children.length > 0; | ||
| }); | ||
|
|
||
| if (!isComponentRendered) { | ||
| // eslint-disable-next-line no-console | ||
| console.error('Component did not render in the testing playground'); | ||
| } | ||
| } | ||
|
|
||
| it('renders correctly with default props', async () => { | ||
| await renderComponent('KButton', { text: 'Test Button' }); | ||
| await percySnapshot(page, 'KButton - Default'); | ||
| }); | ||
| describe.visual('KButton Visual Tests', () => { | ||
| it('renders correctly with default props', async () => { | ||
| await renderComponent('KButton', { text: 'Test Button' }); | ||
| await takeSnapshot('KButton - Default'); | ||
| }); | ||
| } | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.