feat(ui): fix file error + add colored support #1108

userquin · 2022-04-05T20:59:32Z

This PR fixes the problem on file test compilation error and adds ansi-to-html support on report and console tabs.

closes #494
closes #857
closes #973

netlify · 2022-04-05T21:02:49Z

✅ Deploy Preview for vitest-dev ready!

Name	Link
🔨 Latest commit	`85f65a2`
🔍 Latest deploy log	https://app.netlify.com/sites/vitest-dev/deploys/624f080be9dc1f0008917b9a
😎 Deploy Preview	https://deploy-preview-1108--vitest-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

userquin · 2022-04-06T19:47:46Z

To test both tabs with ansi colors:

base cases: cd packages/core && pnpm run dev:ui then from root folder pnpm run test: open the page and uncomment the console entries from the ui on basic.test.ts (search basic on left panel):

  // eslint-disable-next-line no-console
  // console.log(`\x1B[33m${new Date().toISOString()}\x1B[0m`)
  // eslint-disable-next-line no-console
  // console.log(`\x1B[31m${new Error('I\'m a red fg error').stack}\x1B[0m`)
  // eslint-disable-next-line no-console
  // console.log(`\x1B[37m\x1B[41m${new Error('I\'m a red bg error').stack}\x1B[0m`)
  // console.error('console error 1', new Error('hey there 2'))

@testing-library/xxx: from root folder pnpm run ui:build then cd examples\react-testing-lib && pnpm run test:ui: change for example on examples/react-testing-lib/src/components/input.test.tsx line 19 with name: /email address/g (change the i with g on regex)

https://streamable.com/kw340u

Before merge, we can cleanup the console on test/core/test/basic.test.ts.

packages/vitest/src/types/tasks.ts

edimitchel · 2022-04-07T08:22:04Z

test/core/test/basic.test.ts

+  // eslint-disable-next-line no-console
+  // console.log(`\x1B[33m${new Date().toISOString()}\x1B[0m`)
+  // eslint-disable-next-line no-console
+  // console.log(`\x1B[31m${new Error('I\'m a red fg error').stack}\x1B[0m`)
+  // eslint-disable-next-line no-console
+  // console.log(`\x1B[37m\x1B[41m${new Error('I\'m a red bg error').stack}\x1B[0m`)
+  // console.error('console error 1', new Error('hey there 2'))


As UI testing with Cypress is enabled on Vitest, it could be great to cover your work with it :)

I need to refactor the console view component a few to remove the client (birpc) entry (add a new component and use it on the component) and so we can only check the component, later I'll try to add a few cypress tests on ui package

Let ask me help or to @JessicaSachs who will for sure be happy to help you!

@edimitchel check the console cy test : https://imgur.com/Tq4zB9g

working on report tab tests

@edimitchel check the report cy test: https://imgur.com/gcPyYmH

userquin · 2022-04-07T13:00:40Z

To test the console tab (ViewConsoleOutputentry.vue component) with cypress run cd packages/ui && pnpm run test:open.

edimitchel

Very nice @userquin, you rock!
That's ok for me, @antfu your turn :)

userquin · 2022-04-07T13:15:09Z

Very nice @userquin, you rock!
That's ok for me, @antfu your turn :)

@edimitchel

I need to include the cypress tests for the report tab as well, just wait I'm working on it, I'm going to eat in 1 hour or so I'll be back and finish it.

userquin · 2022-04-07T15:40:02Z

@edimitchel now it is ready to review

antfu · 2022-04-07T18:13:07Z

packages/ui/client/components/views/ViewReport.cy.tsx

+      },
+      tasks: [],
+    }
+    const container = cy.mount(<ViewReport file={file} />)


Do we need TSX here? Possible to simply use h?

it is the cypress test, I just "clone" the existing one from Jess

you have it on dashboard folder (the original from Jess)

@antfu I can change cy tests to render the component and passing the props instead using tsx

const container = cy.mount(ViewReport, { propsData: { file } })

Ok, let's refactor it in another PR then

Do we need TSX here? Possible to simply use h?

The reason we use TSX in such a simple example is for consistency. I prefer native h, but I think TSX is the most elegant answer right now to:

passing in spies for emitted events

making components under test reactive/into playgrounds

styling wrapper or related content

The other pattern we explored at Cy was using SFCs.

Passing Spies

const onMyEventSpy = cy.spy().as('myEventSpy') mount(() => <MyComponent onMyEvent={onMyEventSpy}>) cy.get('button').click().get('@myEventSpy').should('have.been.called.with', 'some arguments')

Interactive Tests

TSX becomes really helpful for modals when you not only want to spy on the event emitted (somewhat identical to wrapper.emitted(), but also when you want to make the component into more of a playground and do something. e.g.

const visible = ref(true) mount(() => ( <button onClick={visible.value = !visible.value}>Toggle</button> <MyModal visible={visible}/> ))

Styling Wrapper DOM

Lastly, when you want to control parent/container styles in order to see your component behave differently in different UIs. This works especially well with UnoCSS

mount(() => ( <div min-w-200px resize overflow-auto prefers-dark> <MyTextComponent>Content inside here!</MyTextComponent> </div> ))

JessicaSachs · 2022-04-07T18:23:34Z

Oof. I was in the middle of adding PR feedback.

JessicaSachs · 2022-04-07T18:23:48Z

Like a lot of it 😓

antfu · 2022-04-07T18:25:07Z

Oh haha, I guess you can still do and we could improve it with another PR. Thanks!

JessicaSachs

The ViewReport.cy.tsx needs more help, but I added some feedback to the other spec.

In general, the goal is to say as few HTML-ish things as possible. Avoid span, children, div, etc. Try to only use a11y-friendly selectors. Part of the struggle you have in trying to write tests for these components is that there is very little accessible about them, so your test becomes tightly coupled to the markup structure.

JessicaSachs · 2022-04-07T18:07:47Z

packages/ui/client/components/views/ViewConsoleOutputEntry.cy.tsx

+  it('test plain entry', () => {
+    const content = new Date().toISOString()
+    const container = cy.mount(
+      <ViewConsoleOutputEntry
+        task-name="test/text"
+        type="stderr"
+        time={Date.now()}
+        html={false}
+        content={content}
+      />,
+    ).get(textSelector)
+    container.should('exist')
+    container.invoke('text').then((t) => {
+      expect(t, 'the message has the correct message').equals(content)
+    })
+  })


The goal this test is to make sure that there is text that has the content you pass in when HTML is false. You also want to make sure that the type, task-name, and time are visible. Here's the shortest way to write that test:

Suggested change

it('test plain entry', () => {

const content = new Date().toISOString()

const container = cy.mount(

<ViewConsoleOutputEntry

task-name="test/text"

type="stderr"

time={Date.now()}

html={false}

content={content}

/>,

).get(textSelector)

container.should('exist')

container.invoke('text').then((t) => {

expect(t, 'the message has the correct message').equals(content)

})

})

it('test plain entry', () => {

const content = faker.hacker.phrase()

const time = Date.now()

const localeTime = time.toLocaleString()

const type = 'stderr'

const taskName = 'test/text'

cy.mount(

<ViewConsoleOutputEntry

task-name={taskName}

type={type}

time={time}

html={false}

content={content}

/>,

)

// always either check for visible or exists

// visibility checks prevent CSS bugs relating to overflow, height, width, or opacity

cy.contains(content).should('be.visible')

cy.contains(taskName).should('be.visible')

cy.contains(localeTime).should('be.visible')

cy.contains(type).should('be.visible')

})

JessicaSachs · 2022-04-07T18:09:36Z

packages/ui/client/components/views/ViewConsoleOutputEntry.cy.tsx

+  it('test html entry', () => {
+    const now = new Date().toISOString()
+    const content = new Filter().toHtml(`\x1B[33m${now}\x1B[0m`)
+    const container = cy.mount(


Don't use the return value of container unless you want the Vue Test Utils wrapper result.

JessicaSachs · 2022-04-07T18:11:18Z

packages/ui/client/components/views/ViewConsoleOutputEntry.cy.tsx

+      />,
+    ).get(htmlSelector)
+    container.should('exist')
+    container.children('span').then((c) => {


Instead of using DOM tags like span and hierarchy like children, just ask the test for what you want -- you want to find the element with the text now.

This can be done via

cy.contains(now)

and you can delete all references to span, etc.

the contains check implicitly checks that now exists in the DOM so you ca delete container.should('exist').

cy.contains is very similar to Testing Library's findByText and I may suggest installing @testing-library/cypress to have similar bindings throughout the codebase.

JessicaSachs · 2022-04-07T18:17:57Z

packages/ui/client/components/views/ViewConsoleOutputEntry.cy.tsx

+      <ViewConsoleOutputEntry
+        task-name="test/html"
+        type="stderr"
+        time={Date.now()}
+        html={true}
+        content={content}
+      />,
+    ).get(htmlSelector)
+    container.should('exist')
+    container.children('span').then((c) => {
+      expect(c, 'the message has the correct message').to.have.text(now)
+      expect(c, 'the message has the correct text color').to.have.attr('style', 'color:#A50')
+    })
+  })


@userquin is correcting me that the check for red text is actually part of the subject-under-test, in which case all that is necessary is to make the assertion more resilient against additional CSS styles being added :-)

This test is brittle because it depends on the specific CSS output of UnoCSS on styles 😮. Try to avoid these kinds of tests. I replaced the check for color:#A50 w/ the text class check, which is also brittle.

The best solution is to use visual regression testing with something like Percy, which is free for open source.

Suggested change

<ViewConsoleOutputEntry

task-name="test/html"

type="stderr"

time={Date.now()}

html={true}

content={content}

/>,

).get(htmlSelector)

container.should('exist')

container.children('span').then((c) => {

expect(c, 'the message has the correct message').to.have.text(now)

expect(c, 'the message has the correct text color').to.have.attr('style', 'color:#A50')

})

})

<ViewConsoleOutputEntry

task-name="test/html"

type="stderr"

time={Date.now()}

html={true}

content={content}

/>,

)

cy.get(htmlSelector)

.should('have.css', { color: '#A50' })

.and('be.visible')

.and('contain.text', now)

})

@JessicaSachs

The resulting html is this:

<pre data-type="html"><span style="color:#A50">2022-04-07T19:10:53.637Z</span></pre>

using your suggestion, the messages aren't totally accurate (the pre doesn't have that style, it's the inner span that does):

feat(ui): add ansi-to-html on report and console

55805a2

userquin added 2 commits April 5, 2022 23:08

chore: fix lint

31a33f7

chore: add report logic

2c3420e

userquin marked this pull request as ready for review April 6, 2022 19:53

userquin marked this pull request as draft April 6, 2022 21:22

chore: fix file compilation error using result error

61d7c54

userquin changed the title ~~feat(ui): add ansi-to-html support on report and console~~ chore(ui): fix file error + add colored support Apr 6, 2022

userquin marked this pull request as ready for review April 6, 2022 21:35

userquin marked this pull request as draft April 6, 2022 21:57

chore: update logic for ansi colored on report

eb2e102

userquin marked this pull request as ready for review April 6, 2022 22:09

chore: cleanup code

c293906

antfu changed the title ~~chore(ui): fix file error + add colored support~~ feat(ui): fix file error + add colored support Apr 6, 2022

edimitchel self-requested a review April 7, 2022 07:58

edimitchel suggested changes Apr 7, 2022

View reviewed changes

userquin added 2 commits April 7, 2022 12:00

chore: rename html error

4d73b9b

tests: add cypress tests for console entry

df64535

edimitchel approved these changes Apr 7, 2022

View reviewed changes

tests: add cypress tests for report entry

99cc2a7

userquin added 2 commits April 7, 2022 17:46

chore: add props. on template

7829f72

chore: type on bg color expect message

85f65a2

edimitchel approved these changes Apr 7, 2022

View reviewed changes

antfu reviewed Apr 7, 2022

View reviewed changes

antfu merged commit b737476 into main Apr 7, 2022

antfu deleted the userquin/feat-ui-add-ansi-color branch April 7, 2022 18:23

JessicaSachs reviewed Apr 7, 2022

View reviewed changes

userquin mentioned this pull request Jun 20, 2022

vitest UI doesn't log html correctly in the "console log" tab. #1279

Closed

6 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(ui): fix file error + add colored support #1108

feat(ui): fix file error + add colored support #1108

userquin commented Apr 5, 2022 •

edited

netlify bot commented Apr 5, 2022 •

edited

userquin commented Apr 6, 2022 •

edited

edimitchel Apr 7, 2022 •

edited

userquin Apr 7, 2022

edimitchel Apr 7, 2022 •

edited

userquin Apr 7, 2022

userquin Apr 7, 2022

userquin Apr 7, 2022

userquin commented Apr 7, 2022 •

edited

edimitchel left a comment

userquin commented Apr 7, 2022

userquin commented Apr 7, 2022

antfu Apr 7, 2022

userquin Apr 7, 2022 •

edited

userquin Apr 7, 2022

userquin Apr 7, 2022

userquin Apr 7, 2022

antfu Apr 7, 2022

JessicaSachs Apr 7, 2022 •

edited

JessicaSachs commented Apr 7, 2022

JessicaSachs commented Apr 7, 2022

antfu commented Apr 7, 2022

JessicaSachs left a comment •

edited

JessicaSachs Apr 7, 2022

JessicaSachs Apr 7, 2022

JessicaSachs Apr 7, 2022 •

edited

JessicaSachs Apr 7, 2022 •

edited

userquin Apr 7, 2022

feat(ui): fix file error + add colored support #1108

feat(ui): fix file error + add colored support #1108

Conversation

userquin commented Apr 5, 2022 • edited

netlify bot commented Apr 5, 2022 • edited

✅ Deploy Preview for vitest-dev ready!

userquin commented Apr 6, 2022 • edited

edimitchel Apr 7, 2022 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

edimitchel Apr 7, 2022 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

userquin commented Apr 7, 2022 • edited

edimitchel left a comment

Choose a reason for hiding this comment

userquin commented Apr 7, 2022

userquin commented Apr 7, 2022

Choose a reason for hiding this comment

userquin Apr 7, 2022 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

JessicaSachs Apr 7, 2022 • edited

Choose a reason for hiding this comment

Passing Spies

Interactive Tests

Styling Wrapper DOM

JessicaSachs commented Apr 7, 2022

JessicaSachs commented Apr 7, 2022

antfu commented Apr 7, 2022

JessicaSachs left a comment • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

JessicaSachs Apr 7, 2022 • edited

Choose a reason for hiding this comment

JessicaSachs Apr 7, 2022 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

userquin commented Apr 5, 2022 •

edited

netlify bot commented Apr 5, 2022 •

edited

userquin commented Apr 6, 2022 •

edited

edimitchel Apr 7, 2022 •

edited

edimitchel Apr 7, 2022 •

edited

userquin commented Apr 7, 2022 •

edited

userquin Apr 7, 2022 •

edited

JessicaSachs Apr 7, 2022 •

edited

JessicaSachs left a comment •

edited

JessicaSachs Apr 7, 2022 •

edited

JessicaSachs Apr 7, 2022 •

edited