rsnext/test/e2e/new-link-behavior/material-ui.test.ts
Tim Neutkens 7d3bfac39f
Add stitches and material-ui tests for new link behavior + fix TypeScript types when imported (#36474)
Adds additional tests for material-ui and stitches based on questions in the Twitter thread.

Fixes TypeScript types when `LinkProps` is imported and used in combination with `<button>`, added a TODO to change this at a later point when the new behavior is the default instead of opt-in.



## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `yarn lint`
2022-04-26 11:46:09 +00:00

46 lines
1.4 KiB
TypeScript

import { createNext, FileRef } from 'e2e-utils'
import { NextInstance } from 'test/lib/next-modes/base'
import webdriver from 'next-webdriver'
import path from 'path'
const appDir = path.join(__dirname, 'material-ui')
describe('New Link Behavior with material-ui', () => {
let next: NextInstance
beforeAll(async () => {
next = await createNext({
files: {
pages: new FileRef(path.join(appDir, 'pages')),
src: new FileRef(path.join(appDir, 'src')),
'next.config.js': new FileRef(path.join(appDir, 'next.config.js')),
},
dependencies: {
'@emotion/cache': 'latest',
'@emotion/react': 'latest',
'@emotion/server': 'latest',
'@emotion/styled': 'latest',
'@mui/icons-material': 'latest',
'@mui/material': 'latest',
next: 'latest',
'prop-types': 'latest',
react: 'latest',
'react-dom': 'latest',
eslint: 'latest',
'eslint-config-next': 'latest',
},
})
})
afterAll(() => next.destroy())
it('should render MuiLink with <a>', async () => {
const browser = await webdriver(next.url, `/`)
const element = await browser.elementByCss('a[href="/about"]')
const color = await element.getComputedCss('color')
expect(color).toBe('rgb(25, 133, 123)')
const text = await element.text()
expect(text).toBe('Go to the about page')
})
})